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.

Migration guide

This information can be found in the package.json file in the root of your application.
What environment is your application for?
What technology is your application built with?

  1. Package Update 🩺

    1. Use Angular Update Guide to update Angular to version 18

    2. Update ng-bootstrap to version 17.x.x: npm install @ng-bootstrap/ng-bootstrap@17
      See the ng-bootstrap 17.x.x changelog for more details.

    3. Update Design System style package to version 8: npm install @swisspost/design-system-styles@8

  2. 🥮 Rejoice

    For there are no other breaking changes in this version.

  1. Package Update 🩺

    1. Use https://angular.dev/update-guide to update Angular to version 19

    2. If used within your project, upgrade PrimeNG to version 19: npm install primeng@19

    3. Update Design System styles and components packages to version 9: npm install @swisspost/design-system-styles@9 npm install @swisspost/design-system-components-angular@9

  2. Component Migration

    1. The post-tooltip now has its own post-tooltip-trigger, meaning that the attribute data-tooltip-target="" is no longer effective. breaking

      Instead of using the attribute, you should now wrap your target in the post-tooltip-trigger component.

    2. The default value of the arrow property for the post-tooltip component has changed to false, meaning that tooltips don't display arrows by default anymore. breaking

      If you want to add an arrow to your tooltip, use the arrow="true" property on the component.

    3. The PrimeNGConfig has been replaced by PrimeNG and the initial configuration is now done via the providePrimeNG provider during startup.

      See the PrimeNg migration guide and PrimeNg Styles package documentation for more detailed information.

  3. Deprecation notice

    This is the last major release that supports bootstrap and @ng-bootstrap/ng-bootstrap. Support for these packages will be dropped with v10. Long term support for v9 will be active until the end of 2025 and will receive critical bugfixes.

    Bootstrap will be removed as a dependency for the Design System. For easy upgrades in the future, the component structure and class names will remain the same, only the styles in the background will be switched to the new token system.

    Certain utility classes will no longer be available from the Design System due to this change. However, projects that need them can add the bootstrap library as their dependency and conditionally import the needed files. More information on this change will be detailed in the migration guide for v10.

    Any ng-bootstrap components will be replaced by web components and available for Angular users with the @swisspost/design-system-components-angular package. With this change, we will limit our dependency on Angular to the components-angular package which allows us to ship Angular upgrades much faster in the future.

  1. Introduction

    Version 10 comes with a new look and cleaner codebase — and yes, a few breaking changes, all for good reason.

    We’ve completely refreshed the design and reworked how components are built. Bootstrap and Ng-Bootstrap have been replaced by Web Standards compliant components, which means the Design System works across any framework (Angular, React, or plain HTML).

    We've reworked utility classes to be pixel-based and more intuitive — for example, .p-16 now clearly means "16px padding", instead of guessing what .p-3 stood for. We’ve also simplified things overall: fewer breakpoints, fewer font-size classes, and a more consistent color palette (no more purple or coral buttons 🎨).

    Components are now tokenized, so you can implement dark mode and easily adjust themes without rewriting CSS. Want to see this in action? Check the Palette documentation and switch to dark mode or the Cargo theme.

    Oh, and yes — there’s a brand-new icon set too 🖼️.

  2. Package Update 🩺

    Update Design System styles and components packages to version 10 by running these two commands in your project root: npm install @swisspost/design-system-styles@10 npm install @swisspost/design-system-components-angular@10

  3. Component Migration 🤓

    💡 Many changes are automatically handled by the migration scripts. Each 🪄 symbol means that automatic migration rules can handle the changes, but you should still verify the results manually.

    Notice: Bootstrap & Ng-Bootstrap removed

    As part of the latest migration, Bootstrap and Ng-Bootstrap have been fully removed from the design system. This means that any variables, classes, mixins, or utilities originating from Bootstrap and all components from Ng-Bootstrap are no longer available.

    ✅ Good news:

    Common Bootstrap features — such as the grid system (columns) and most utility classes — have been internalized into the design system. You can continue using them through the design system without needing Bootstrap.

    If you encounter any broken styles or issues after upgrading, you have two options:

    Please review your components and styles to ensure compatibility.

    Ng-Bootstrap

    Components

    Styles

    ✍️ Forms
    📐 Grid system
    🧰 Utilities
    ✒️ Typography
    🎨 Other styles

  4. 🧹 Clean up

    You're almost done! After completing the migration steps above, you can now remove all remaining references to Bootstrap and Ng-Bootstrap from your project. The steps below help ensure that no deprecated imports or dependencies remain.

    1. Search your CSS or SCSS files for any occurrences of @import 'bootstrap/...'; and remove them.
    2. Check your TypeScript files for Ng-Bootstrap imports such as import { ... } from '@ng-bootstrap/ng-bootstrap'; and delete them. 💡 Note: Your project might also use Ng-Bootstrap components that were not previously styled by the Design System. In that case, verify whether an equivalent component exists in the Design System. If no equivalent is available yet, you may need to keep Ng-Bootstrap temporarily until a replacement is provided.
    3. Once you've verified that your project builds and displays correctly, uninstall the packages by running: npm uninstall bootstrap @ng-bootstrap/ng-bootstrap