feat(styles, docs, migrations): create the chip component (#2855)

.changeset/quiet-mugs-design.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-migrations': minor
+---
+
+Added migrations to turn badges into chips.

.changeset/selfish-lions-tap.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': major
+---
+
+Renamed badge into "chip" and improved related examples.

.changeset/sweet-clouds-scream.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Renamed the badge into "chip", added a disable state and updated its styles.

packages/demo/package.json

@@ -26,6 +26,7 @@
     "@popperjs/core": "2.11.8",
     "@swimlane/ngx-datatable": "20.1.0",
     "@swisspost/design-system-intranet-header": "workspace:5.0.11",
+    "@swisspost/design-system-migrations": "workspace:1.0.2",
     "@swisspost/design-system-styles": "workspace:6.6.4",
     "bootstrap": "5.3.2",
     "core-js": "3.36.1",

packages/documentation/cypress/snapshots/components/chip.snapshot.ts

@@ -0,0 +1,7 @@
+describe('Chip', () => {
+  it('default', () => {
+    cy.visit('/iframe.html?id=snapshots--chip');
+    cy.get('.chip', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Chips', { widths: [1440] });
+  });
+});

packages/documentation/src/stories/components/badge/badge.stories.ts

@@ -3,6 +3,7 @@ import { html, nothing } from 'lit';
 import { MetaComponent } from '../../../../types';
 import backgroundColors from '../../../shared/background-colors.module.scss';
 import { coloredBackground } from '../../../shared/decorators/dark-background';
+import chipMeta from '../chip/chip.stories';
 
 const meta: MetaComponent = {
   id: 'bec68e8b-445e-4760-8bd7-1b9970206d8d',
@@ -120,11 +121,8 @@ export const LargeNumber: Story = {
 };
 
 export const Position: Story = {
-  render: args => html`
-    <div class="chip">
-      Filter
-      <div class="badge bg-gray">1</div>
-    </div>
+  render: (_args, context) => html`
+    ${chipMeta.render?.({ ...chipMeta.args, badge: true }, context)}
 
     <div class="position-relative d-inline">
       <post-icon name="2026" class="fs-large"></post-icon>
@@ -133,7 +131,7 @@ export const Position: Story = {
   `,
   decorators: [
     (story: StoryFn, { args, context }: StoryContext) => html`
-      <div class="d-flex gap-large">${story(args, context)}</div>
+      <div class="d-flex gap-large align-items-center">${story(args, context)}</div>
     `,
   ],
 };

packages/documentation/src/stories/components/chip/chip.docs.mdx

@@ -0,0 +1,42 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { PostAlert } from '@swisspost/design-system-components-react';
+import * as ChipStories from './chip.stories';
+import StylesPackageImport from '../../../shared/styles-package-import.mdx';
+
+<Meta of={ChipStories} />
+
+# Chip
+
+<div className="lead">
+  Display small pieces of information with which users can interact.
+</div>
+
+<Canvas sourceState="shown" of={ChipStories.Default} />
+<div className="hide-col-default">
+  <Controls of={ChipStories.Default} />
+</div>
+
+<StylesPackageImport components={['chip']} />
+
+## Examples
+
+### Filter Chip
+
+Filter chips provide a simple means to refine content or search results based on specific attributes.
+They are personalized checkboxes, allowing users to toggle them to filter content effectively.
+
+<Canvas of={ChipStories.FilterCheckboxChip} />
+
+Alternatively, filter chips may be used with radio inputs when a single filter selection is needed.
+
+<Canvas of={ChipStories.FilterRadioChip} />
+
+### Dismissible Chip
+
+Dismissible chips represent pieces of information entered by a user.
+Each chip includes a close button, enabling users to conveniently remove them from view.
+
+It's important to note that the close icon lacks visible text.
+Therefore, it's imperative to include a visually hidden label to ensure accessibility for users relying on assistive technologies.
+
+<Canvas of={ChipStories.Dismissible} />

packages/documentation/src/stories/components/chip/chip.snapshot.stories.ts

@@ -0,0 +1,43 @@
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import meta from './chip.stories';
+import { html } from 'lit';
+import { bombArgs } from '../../../utils';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const Chip: Story = {
+  render: (_args: Args, context: StoryContext) => {
+    return html`
+      <div class="d-flex flex-wrap gap-1 align-items-start">
+        ${['bg-white', 'bg-dark'].map(
+          bg => html`
+            <div class="${bg} d-flex flex-wrap align-items-start gap-regular p-regular">
+              ${bombArgs({
+                text: [
+                  'Malakceptebla Insigno',
+                  'Contentus momentus vero siteos et accusam iretea et justo.',
+                ],
+                size: context.argTypes.size.options,
+                type: context.argTypes.type.options,
+                badge: [false, true],
+                active: [false, true],
+                disabled: [false, true],
+                dismissed: [false],
+              })
+                .filter(args => !(args.type !== 'filter' && args.active === true))
+                .filter(args => !(args.type !== 'filter' && args.badge === true))
+                .map((args: Args) => meta.render?.({ ...context.args, ...args }, context))}
+            </div>
+          `,
+        )}
+      </div>
+    `;
+  },
+};