No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

This is a pre-release version and is not production ready. For new and ongoing projects, please refer to the latest Design System version.

Stepper

Figma Design

The stepped progression component provides an interactive visual overview of a process. It shows at a glance the amount of steps a user is required to go through, and serves as a guide for each step, indicating its status.

<nav aria-label="Registration Form">
  <ol class="stepper">
    <li class="stepper-item">
      <a class="stepper-link" href="../step-1">
        <span class="visually-hidden">Completed step:</span> Sender
      </a>
    </li>

    <li class="stepper-item">
      <a class="stepper-link" href="../step-2">
        <span class="visually-hidden">Completed step:</span> Product
      </a>
    </li>

    <li class="stepper-item" aria-current="step">
      <span class="stepper-link"
        ><span class="visually-hidden">Current step:</span> Other details</span
      >
    </li>

    <li class="stepper-item">
      <a class="stepper-link" href="../step-4">
        <span class="visually-hidden">Next step:</span> Order summary
      </a>
    </li>
  </ol>
</nav>
NameDescriptionDefaultControl
General
Current Step Number
The number of the step the user is currently at in the process.
number
-
Navigatable Steps
Defines which steps in the current process the user can navigate to.
string
-
Process Name
A straightforward, self-explanatory name for the current process, used for assistive technologies.
string
-

Make sure the @swisspost/design-system-styles package is already present in your project or follow the installation guidelines.

To import all Design System styles:

@use '@swisspost/design-system-styles/post-compact.scss';

To import only the styles required for this component:

@use '@swisspost/design-system-styles/basics.scss';
@use '@swisspost/design-system-styles/components/stepper.scss';

You can use a stepper to allow users to navigate to specific steps. To do so, use a elements for the .stepper-link of the steps you want to be navigable, and use span for the steps you want not to be navigable. Then, wrap the stepper inside a <nav>.

However, it is better not to use an a for the current step since the user is already on the page.

If you wish to display the stepper for informational purposes only, you can use <span> elements for the .stepper-link on all the steps. In this case, there's no need to wrap the stepper inside a <nav>.

  1. Sender
  2. Product
  3. Other details
  4. Order summary

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.