Feat/badge

.changeset/fine-seals-care.md

@@ -0,0 +1,7 @@
+---
+'@cocokits/react-components': minor
+'@cocokits/core': minor
+'@cocokits/react-badge': minor
+---
+
+Add Badge Library with badge and badge-container components

.changeset/funny-jobs-dream.md

@@ -0,0 +1,5 @@
+---
+'@cocokits/theme-cocokits': major
+---
+
+Fix icon button colors

.changeset/ripe-badgers-give.md

@@ -0,0 +1,6 @@
+---
+'@cocokits/angular-avatar': major
+'@cocokits/react-avatar': major
+---
+
+Fix avatar label position and default values

.changeset/twenty-turkeys-start.md

@@ -0,0 +1,6 @@
+---
+'@cocokits/theme-cocokits': minor
+'@cocokits/theme-frames-x': minor
+---
+
+Add styles for badge library

.changeset/yummy-emus-refuse.md

@@ -0,0 +1,7 @@
+---
+'@cocokits/angular-components': minor
+'@cocokits/angular-badge': minor
+'@cocokits/core': minor
+---
+
+Add Badge Library with badge and badge-container components

apps/angular-kits-doc/stories/getting-started/utils/advanced-configuration.utils.tsx

@@ -169,6 +169,8 @@ export function getMergeThemesStep3Scss() {
 @include Cocokits.components_accordion_panel;
 @include Cocokits.components_tabs;
 @include Cocokits.components_tab;
+@include Cocokits.components_badge;
+@include Cocokits.components_badge_container;
 
   `);
 }

apps/angular-kits-doc/stories/ui-components/accordion/accordion/index.stories.ts

@@ -25,7 +25,6 @@ export { Control } from './overview/control.stories';
 const meta: StoriesMeta = {
   component: AccordionComponent,
   title: 'UI Components/Accordion',
-  tags: ['status:new'],
   subcomponents: [AccordionPanelComponent, AccordionHeaderComponent],
   decorators: [
     withWrapperDecorator({ insideBox: true }, { width: '400px' }),

apps/angular-kits-doc/stories/ui-components/avatar/avatar-group/index.stories.ts

@@ -13,7 +13,6 @@ export { Color } from './overview/color.stories';
 const meta: StoriesMeta = {
   component: AvatarGroupComponent,
   title: 'UI Components/AvatarGroup',
-  tags: ['status:new'],
   decorators: [
     applicationConfig({
       providers: [withThemeConfigProvider()],

apps/angular-kits-doc/stories/ui-components/avatar/avatar-label/index.stories.ts

@@ -13,7 +13,6 @@ export { Color } from './overview/color.stories';
 const meta: StoriesMeta = {
   component: AvatarLabelComponent,
   title: 'UI Components/AvatarLabel',
-  tags: ['status:new'],
   decorators: [
     withWrapperDecorator({ insideBox: true }),
     applicationConfig({

apps/angular-kits-doc/stories/ui-components/avatar/avatar/index.stories.ts

@@ -12,7 +12,6 @@ export { CustomTemplate } from './overview/custom-content.stories';
 const meta: StoriesMeta = {
   component: AvatarComponent,
   title: 'UI Components/Avatar',
-  tags: ['status:new'],
   decorators: [
     applicationConfig({
       providers: [withThemeConfigProvider()],

apps/angular-kits-doc/stories/ui-components/badge/badge-container/description.md

@@ -0,0 +1,5 @@
+Manages badge placement relative to target elements. Provides precise offset control without affecting layout. This component is perfect for positioning badges on buttons, icons, or other UI elements.
+
+#### Features:
+- **Position Presets:** Positions badge at corners: top-left, top-right, bottom-left, bottom-right
+- **Flexible Integration:** Works with any content element that needs badge indicators

apps/angular-kits-doc/stories/ui-components/badge/badge-container/index.stories.ts

@@ -0,0 +1,46 @@
+import { applicationConfig, moduleMetadata } from '@storybook/angular';
+
+import { BadgeComponent, BadgeContainerComponent } from '@cocokits/angular-badge';
+import { ngArgType, StoriesMeta, withThemeConfigProvider } from '@cocokits/storybook-addon-theme-angular';
+
+import descriptionMd from './description.md';
+
+export { Default } from './overview/default.stories';
+export { Type } from './overview/type.stories';
+export { Size } from './overview/size.stories';
+export { Color } from './overview/color.stories';
+export { Position } from './overview/position.stories';
+export { Integration } from './overview/integration.stories';
+
+const meta: StoriesMeta = {
+  component: BadgeContainerComponent,
+  title: 'UI Components/BadgeContainer',
+  decorators: [
+    applicationConfig({
+      providers: [withThemeConfigProvider()],
+    }),
+    moduleMetadata({
+      imports: [BadgeComponent],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd].join('\n'),
+      },
+    },
+    cckAddon: {
+      componentName: 'badgeContainer',
+    },
+  },
+  argTypes: {
+    ...ngArgType({
+      name: 'position',
+      type: "'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'",
+      defaultValue: 'top-right',
+    }),
+    ...ngArgType({ name: 'offset', type: '[string, string]', defaultValue: '' }),
+    ...ngArgType({ name: 'radius', type: 'string', defaultValue: '0px' }),
+  },
+};
+export default meta;

apps/angular-kits-doc/stories/ui-components/badge/badge-container/overview/color.stories.ts

@@ -0,0 +1,61 @@
+import { BadgeContainerComponent } from '@cocokits/angular-badge';
+import { CCK_CONTROL, renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
+
+export const Color: StoryObj<BadgeContainerComponent> = {
+  name: 'Color',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Color options enable seamless integration with various themes or to highlight specific actions.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithThemeProp('color'), renderWithPageTab('Overview')],
+      singleControls: ['type'],
+      source: [
+        {
+          filename: 'example.component.html',
+          language: 'angular-html',
+          code: `
+          <% themeComponentConfig.color.values.map(color => { %>
+            <cck-badge-container
+              <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
+              color='<%= color %>'
+            >
+              <div
+                [style.width]="'70px'"
+                [style.height]="'70px'"
+                [style.background-color]="'var(--cck-doc-color-bg-3)'"
+                [style.border]="'3px solid var(--cck-doc-color-border-3)'"
+                [style.border-radius]="cckControl.radius"
+              ></div>
+              <cck-badge content="2"/>
+            </cck-badge-container>
+          <% }) %>
+          `,
+        },
+      ],
+      controls: [CCK_CONTROL.type()],
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      @for (color of cckControl.themeComponentConfig.color.values; let col = $index; track color) {
+        <cck-badge-container [type]="cckControl.type" [color]="color">
+          <div
+            [style.width]="'70px'"
+            [style.height]="'70px'"
+            [style.background-color]="'var(--cck-doc-color-bg-3, #191b23)'"
+            [style.border]="'3px solid var(--cck-doc-color-border-3, #ffffff33)'"
+            [style.border-radius]="cckControl.radius"
+          ></div>
+          <cck-badge content="2"/>
+        </cck-badge-container>
+      }
+    `,
+  }),
+};

apps/angular-kits-doc/stories/ui-components/badge/badge-container/overview/default.stories.ts

@@ -0,0 +1,101 @@
+import { BadgeContainerComponent } from '@cocokits/angular-badge';
+import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme';
+import { ngThemeArgsToTemplate, StoryObj } from '@cocokits/storybook-addon-theme-angular';
+
+export const Default: StoryObj<BadgeContainerComponent> = {
+  name: 'Default',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Shows the default example with no additional configurations, providing an interactive example in its most basic form.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithPageTab('Overview')],
+      source: [
+        {
+          filename: 'example.component.html',
+          language: 'angular-html',
+          code: `
+          <cck-badge-container
+            <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
+            <% if (typeof size !== 'undefined') { %> size='<%= size %>' <% } %>
+            <% if (typeof color !== 'undefined') { %> color='<%= color %>' <% } %>
+            position="<%= position %>"
+            <% if (offsetX && offsetX !== '' && offsetY && offsetY !== '') { %> [offset]="['<%= offsetX %>', '<%= offsetY %>']" <% } %>
+            <% if (radius !== '') { %> radius="<%= radius %>" <% } %>
+          >
+
+            <!-- Replace the following \`div\` with your custom content -->
+            <div
+              [style.width]="'70px'"
+              [style.height]="'70px'"
+              [style.background-color]="'var(--cck-doc-color-bg-3, #191b23)'"
+              [style.border]="'3px solid var(--cck-doc-color-border-3, #ffffff33)'"
+              <% if (radius !== '') { %> [style.border-radius]="'<%= radius %>'" <% } %>
+            ></div>
+
+            <cck-badge
+              <% if (typeof badgeType !== 'undefined') { %> type='<%= badgeType %>' <% } %>
+              <% if (typeof badgeSize !== 'undefined') { %> size='<%= badgeSize %>' <% } %>
+              <% if (typeof badgeColor !== 'undefined') { %> color='<%= badgeColor %>' <% } %>
+              <% if (max > 0) { %> [max]="<%= max %>" <% } %>
+              <% if (content !== '') { %> [content]="'<%= content %>'" <% } %>
+              <% if (hide) { %> [hide]="<%= hide %>" <% } %>
+            />
+          </cck-badge-container>
+          `,
+        },
+      ],
+      hasControl: true,
+      controls: [
+        CCK_CONTROL.type(),
+        CCK_CONTROL.size(),
+        CCK_CONTROL.color(),
+        CCK_CONTROL.additional(),
+        CCK_CONTROL.type('badge'),
+        CCK_CONTROL.size('badge'),
+        CCK_CONTROL.color('badge'),
+        CCK_CONTROL.customSelect('position', ['top-left', 'top-right', 'bottom-left', 'bottom-right'], 'top-right'),
+        CCK_CONTROL.customText('Content', '2'),
+        CCK_CONTROL.customNumber('Max', 10),
+        CCK_CONTROL.customText('Radius', '12px'),
+        CCK_CONTROL.customText('OffsetX', undefined),
+        CCK_CONTROL.customText('OffsetY', undefined),
+        CCK_CONTROL.customBoolean('Hide', false),
+      ],
+    },
+  },
+  render: (args) => {
+    return {
+      props: {
+        ...args,
+      },
+      template: `
+        <cck-badge-container
+          ${ngThemeArgsToTemplate(args)}
+          [position]="cckControl.position"
+          [offset]="[cckControl.offsetX, cckControl.offsetY]"
+          [radius]="cckControl.radius"
+        >
+          <div
+            [style.width]="'70px'"
+            [style.height]="'70px'"
+            [style.background-color]="'var(--cck-doc-color-bg-3)'"
+            [style.border]="'3px solid var(--cck-doc-color-border-3)'"
+            [style.border-radius]="cckControl.radius"
+          ></div>
+          <cck-badge
+            [type]="cckControl.badgeType"
+            [size]="cckControl.badgeSize"
+            [color]="cckControl.badgeColor"
+            [content]="cckControl.content"
+            [hide]="cckControl.hide"
+            [max]="cckControl.max"
+          />
+        </cck-badge-container>
+      `,
+    };
+  },
+};

apps/angular-kits-doc/stories/ui-components/badge/badge-container/overview/integration.stories.ts

@@ -0,0 +1,91 @@
+import { moduleMetadata } from '@storybook/angular';
+
+import { AvatarComponent, AvatarLabelComponent } from '@cocokits/angular-avatar';
+import { BadgeContainerComponent } from '@cocokits/angular-badge';
+import { IconButtonComponent } from '@cocokits/angular-button';
+import { SvgIconComponent } from '@cocokits/angular-icon';
+import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme';
+import { StoryObj, withWrapperDecorator } from '@cocokits/storybook-addon-theme-angular';
+
+export const Integration: StoryObj<BadgeContainerComponent> = {
+  name: 'Integration',
+  decorators: [
+    withWrapperDecorator({ insideBox: true }),
+    moduleMetadata({
+      imports: [IconButtonComponent, SvgIconComponent, AvatarComponent, AvatarLabelComponent],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        story: 'Badges attached to interactive components.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithPageTab('Overview')],
+      singleControls: ['type'],
+      source: [
+        {
+          filename: 'example.component.html',
+          language: 'angular-html',
+          code: `
+            <cck-badge-container position="top-right">
+              <button cck-icon-button>
+                <cck-svg-icon [icon]="Icons.heartFill"/>
+              </button>
+              <cck-badge <% if (typeof type !== 'undefined') { %> type='<%= type %>'<% } %> content="2"/>
+            </cck-badge-container>
+
+            <cck-badge-container position="bottom-right" radius="50%">
+              <cck-avatar src="https://i.pravatar.cc?img=9"/>
+              <cck-badge <% if (typeof type !== 'undefined') { %> type='<%= type %>'<% } %> content="2"/>
+            </cck-badge-container>
+
+            <cck-badge-container position="top-right" radius="50%">
+              <cck-avatar src="https://i.pravatar.cc?img=10"/>
+              <cck-badge <% if (typeof type !== 'undefined') { %> type='<%= type %>'<% } %>/>
+            </cck-badge-container>
+
+            <cck-avatar-label title="Alex Pearson" description="UX Engineer">
+              <cck-badge-container position="bottom-right" radius="50%">
+                <cck-avatar src="https://i.pravatar.cc?img=11"/>
+                <cck-badge <% if (typeof type !== 'undefined') { %> type='<%= type %>'<% } %>/>
+              </cck-badge-container>
+            </cck-avatar-label>
+          `,
+        },
+      ],
+      controls: [CCK_CONTROL.type()],
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cck-badge-container position="top-right">
+        <button cck-icon-button>
+          <cck-svg-icon [icon]="cckIcons.heartFill"/>
+        </button>
+        <cck-badge [type]="cckControl.type" content="2"/>
+      </cck-badge-container>
+
+      <cck-badge-container position="bottom-right" radius="50%">
+        <cck-avatar src="https://i.pravatar.cc?img=9"/>
+        <cck-badge [type]="cckControl.type" content="2"/>
+      </cck-badge-container>
+
+      <cck-badge-container position="top-right" radius="50%">
+        <cck-avatar src="https://i.pravatar.cc?img=10"/>
+        <cck-badge [type]="cckControl.type"/>
+      </cck-badge-container>
+
+      <cck-avatar-label title="Alex Pearson" description="UX Engineer">
+        <cck-badge-container position="bottom-right" radius="50%">
+          <cck-avatar src="https://i.pravatar.cc?img=11"/>
+          <cck-badge [type]="cckControl.type"/>
+        </cck-badge-container>
+      </cck-avatar-label>
+    `,
+  }),
+};