improve docs

swisspost · May 22, 2024 · d650a54 · d650a54
1 parent 5fbde12
commit d650a54
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 5 deletions.
diff --git a/packages/documentation/src/stories/components/stepper/stepper.docs.mdx b/packages/documentation/src/stories/components/stepper/stepper.docs.mdx
@@ -45,3 +45,10 @@ If you wish to display the stepper for informational purposes only, you can use
 In this case, there's no need to wrap the stepper inside a `<nav>`.
 
 <Canvas of={StepperStories.InformationalStepper} />
+
+### Long Labels
+
+When dealing with longer labels that may wrap into multiple lines, it is recommended to use a `title` attribute for the `.stepper-link`.
+This will truncate the label with an ellipsis if it exceeds two lines, while allowing the user to read the full label by hovering over it with the mouse.
+
+<Canvas of={StepperStories.LongLabels} />
diff --git a/packages/documentation/src/stories/components/stepper/stepper.snapshot.stories.ts b/packages/documentation/src/stories/components/stepper/stepper.snapshot.stories.ts
@@ -14,6 +14,12 @@ type Story = StoryObj;
 
 export const Stepper: Story = {
   render: (_args: Args, context: StoryContext) => {
+    const longSteps = [
+      'Curabitur sed velit ullamcorper, molestie nunc a, dignissim ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+      'Ut sed consectetur odio. Curabitur vel pulvinar est. Maecenas quam arcu, sagittis et libero aliquet, egestas luctus nisi.',
+      'Nam pretium nec neque sed vulputate. Sed non augue libero. Vivamus consequat mauris id ligula cursus, sit amet faucibus ipsum.',
+      'Sed vulputate lacinia eros, sit amet mattis sem luctus sit amet. Vestibulum pharetra tortor a laoreet malesuada.',
+    ];
     return html`
       <div class="d-flex flex-column gap-1">
         ${['bg-white', 'bg-dark'].map(
@@ -22,6 +28,7 @@ export const Stepper: Story = {
               ${bombArgs({
                 currentStepNumber: meta.argTypes?.currentStepNumber?.options,
               }).map((args: Args) => meta.render?.({ ...context.args, ...args }, context))}
+              ${meta.render?.({ ...context.args, ...{ steps: longSteps } }, context)}
             </div>
           `,
         )}

diff --git a/packages/documentation/src/stories/components/stepper/stepper.stories.ts b/packages/documentation/src/stories/components/stepper/stepper.stories.ts
@@ -4,7 +4,7 @@ import { MetaComponent } from '@root/types';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { useArgs } from '@storybook/preview-api';
 
-const steps = ['Sender', 'Product', 'Other details', 'Order summary'];
+const defaultSteps = ['Sender', 'Product', 'Other details', 'Order summary'];
 
 const meta: MetaComponent = {
   id: '7dc546d9-e248-4d06-befe-3ad62fcd310f',
@@ -13,6 +13,9 @@ const meta: MetaComponent = {
   render: renderStepper,
   parameters: {
     badges: [],
+    controls: {
+      exclude: ['steps'],
+    },
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=20952-29106&mode=design&t=38qLaYwWdirTcHdb-4',
@@ -22,6 +25,7 @@ const meta: MetaComponent = {
     currentStepNumber: 3,
     navigableSteps: 'all',
     processName: 'Registration Form',
+    steps: defaultSteps,
   },
   argTypes: {
     navigableSteps: {
@@ -46,7 +50,7 @@ const meta: MetaComponent = {
       control: {
         type: 'select',
       },
-      options: Object.keys(steps).map(key => parseInt(key, 10) + 1),
+      options: Object.keys(defaultSteps).map(key => parseInt(key, 10) + 1),
       table: {
         category: 'General',
       },
@@ -81,12 +85,17 @@ function getStepperItem(args: Args, step: string, index: number) {
   if (isNextStep) status = 'Next';
 
   const text = html`<span class="visually-hidden">${status} step:</span> ${step}`;
+  const title = step !== defaultSteps[index] ? step : undefined;
 
   return html`
     <li aria-current=${ifDefined(isCurrentStep ? 'step' : undefined)} class="stepper-item">
       ${isLink
-        ? html` <a class="stepper-link" href="../step-${index + 1}"> ${text} </a> `
-        : html`<span class="stepper-link">${text}</span>`}
+        ? html`
+            <a class="stepper-link" href="../step-${index + 1}" title=${ifDefined(title)}>
+              ${text}
+            </a>
+          `
+        : html`<span class="stepper-link" title=${ifDefined(title)}>${text}</span>`}
     </li>
   `;
 }
@@ -111,7 +120,7 @@ function renderStepper(args: Args) {
     class="stepper"
     aria-label=${ifDefined(isNav ? undefined : args.processName + ' Progress')}
   >
-    ${steps.map((step, index) => getStepperItem(args, step, index))}
+    ${args.steps.map((step: string, index: number) => getStepperItem(args, step, index))}
   </ol>`;
 
   return args.navigableSteps === 'none'
@@ -132,3 +141,12 @@ export const InformationalStepper: StoryObj = {
     navigableSteps: 'none',
   },
 };
+
+export const LongLabels: StoryObj = {
+  args: {
+    steps: [
+      'Nullam luctus mi sit amet nisl suscipit, nec tempor justo varius',
+      ...defaultSteps.slice(1),
+    ],
+  },
+};