feat(segmented-button): add icon and text support

.changeset/stale-days-smoke.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': minor
+---
+
+added a version with an icon to the segmented button.

packages/documentation/src/stories/components/segmented-button/segmented-button.docs.mdx

@@ -27,4 +27,9 @@ It allows users to toggle between two or more content sections within the same a
 <Canvas of={SegmentedButtonStories.IconExample} sourceState="shown" />
 <Controls of={SegmentedButtonStories.IconExample} />
 
+## Segmented text and icon button
+
+<Canvas of={SegmentedButtonStories.TextAndIconExample} sourceState="shown" />
+<Controls of={SegmentedButtonStories.TextAndIconExample} />
+
 <StylesPackageImport components={['segmented-button']} />

packages/documentation/src/stories/components/segmented-button/segmented-button.snapshot.stories.ts

@@ -1,6 +1,6 @@
 import type { StoryObj } from '@storybook/web-components';
 import meta from './segmented-button.stories';
-import { html } from 'lit';
+import { html, nothing } from 'lit'; // ← ajout de `nothing`
 import { schemes } from '@/shared/snapshots/schemes';
 
 const { id, ...metaWithoutId } = meta;
@@ -37,6 +37,23 @@ export const SegmentedButton: Story = {
               </div>
             `;
           })}
+          ${labelCounts.map(count => {
+            const labels = Array.from({ length: count }, (_, i) => `Label ${i + 1}`);
+            const name = `text-icon-${count}-${scheme}`;
+            return html`
+              <fieldset class="segmented-button">
+                ${labels.map(
+                  (label, index) => html`
+                    <label class="segmented-button-label">
+                      <input type="radio" name="${name}" />
+                      <post-icon name="${1000 + index}"></post-icon>
+                      ${label}
+                    </label>
+                  `,
+                )}
+              </fieldset>
+            `;
+          })}
         </div>
       `,
     );

packages/documentation/src/stories/components/segmented-button/segmented-button.stories.ts

@@ -79,3 +79,28 @@ export const IconExample: Story = {
     `;
   },
 };
+
+export const TextAndIconExample: Story = {
+  render: (args: Args) => {
+    const labelCount = Math.min(args.labelCount || 0, MAX_LABELS);
+    const labelsArray = Array.from({ length: labelCount }, (_, i) => `Label ${i + 1}`);
+    const name = `segmented-button-${Math.random().toString(36).slice(-6)}`;
+
+    return html`
+      <div class="segmented-button-container">
+        <fieldset class="segmented-button">
+          <legend>Choose one of the options</legend>
+          ${labelsArray.map(
+            (label, index) => html`
+              <label class="segmented-button-label">
+                <input type="radio" name="${name}" checked="${index === 0 ? '' : nothing}" />
+                <post-icon name="${1000 + index}"></post-icon>
+                ${label}
+              </label>
+            `,
+          )}
+        </fieldset>
+      </div>
+    `;
+  },
+};

packages/styles/src/components/segmented-button.scss

@@ -30,6 +30,7 @@ $post-segmented-button-max-count: 8;
   label {
     flex: 0 1 100%;
     display: flex;
+    gap: tokens.get('button-segmented-gap-inline');
     justify-content: center;
     align-items: center;
     position: relative;

packages/styles/src/utilities/_post-icon-version.scss

@@ -0,0 +1 @@
+$post-icon-version: '9.0.0-next.36';