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. Package Update 🩺

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

  2. Component Migration 🤓

    Styles

    Forms

    • Removed tooltip validation classes breaking

      • .valid-tooltip
      • .invalid-tooltip

      Instead, use classes .valid-feedback and .invalid-feedback.

    • textarea, input and select form elements no longer have sizes, therefore the following classes have no more effect on those elements breaking

      • .form-control-sm
      • .form-control-rg
      • .form-control-lg
      • .form-select-sm
      • .form-select-rg
      • .form-select-lg

    • The .form-text class has been renamed to .form-hint breaking

    • Some form-check scss variables have been removed breaking

      • $form-check-inline-margin-left
      • $form-check-input-width
      • $form-check-min-height
      • $form-check-padding-start
      • $form-check-input-color
      • $form-check-input-bg
      • $form-check-input-border
      • $form-check-input-border-radius
      • $form-check-radio-border-radius
      • $form-check-input-focus-border
      • $form-check-input-focus-width
      • $form-check-input-focus-box-shadow
      • $form-check-input-active-filter
      • $form-check-input-hover-color
      • $form-check-input-checked-color
      • $form-check-input-checked-bg-color
      • $form-check-input-checked-border-color
      • $form-check-input-checked-bg-icon
      • $form-check-input-checked-bg-image
      • $form-check-radio-checked-bg-icon
      • $form-check-radio-checked-bg-image
      • $form-check-input-indeterminate-color
      • $form-check-input-indeterminate-bg-color
      • $form-check-input-indeterminate-border-color
      • $form-check-input-indeterminate-bg-icon
      • $form-check-input-indeterminate-bg-image
      • $form-check-inline-margin-end
      • $form-check-label-cursor
      • $form-check-label-color
      • $form-check-label-padding-x
      • $form-check-label-padding-top
      • $form-check-label-padding-start
      • $form-check-label-padding-end
      • $form-check-feedback-margin-top

    • Removed the @mixin placeholder() breaking

      The CSS selector ::placeholder can be used instead as it is now widely available.

    Grid

    • Removed grid container helper classes breaking

      • .vertical-gutters
      • .row.border-gutters
      • .container-reset
      • .container-reset-left and .container-reset-right
      • .container-fluid-#{$breakpoint}

    • The rg and xxl breakpoints have been removed breaking

      • All classes containing *-rg-* are no longer effective
      • All classes containing *-xxl-* are no longer effective

      xs now spans the previous xs and sm, while sm spans the previous rg. xl now spans both the previous xl and xxl breakpoints.

    • The gutter classes naming (g-*, gx-*, gy-*) has changed to pixel-based names breaking

      • *-1 is now *-4
      • *-2 is now *-8
      • *-3 is now *-16
      • *-4 is now *-24
      • *-5 is now *-48
    Utilities

    • Changed the percentage sizing utility classes (w-*, h-*, mh-*, mw-*) naming breaking

      • *-25 is now *-quarter
      • *-50 is now *-half
      • *-75 is now *-three-quarters
      • *-100 is now *-full

    • Removed some pixel sizing utility classes (w-*, h-*, mh-*, mw-*). breaking

      • *-small-large
      • *-bigger-giant

    • Changed the pixel sizing utility classes (w-*, h-*, mh-*, mw-*) to pixel-based names breaking

      • *-hair is now *-1
      • *-line is now *-2
      • *-micro is now *-4
      • *-mini is now *-8
      • *-small-regular is now *-12
      • *-regular is now *-16
      • *-large is now *-24
      • *-big is now *-32
      • *-bigger-big is now *-40
      • *-small-huge is now *-48
      • *-huge is now *-56
      • *-small-giant is now *-78
      • *-giant is now *-80

    • Changed the sizing utility classes max-height and max-width naming breaking

      • mh-* is now max-h-*
      • mw-* is now max-w-*

    • Some Bootstrap utility classes have been removed breaking

      • Shadows: .shadow-none, .shadow-sm, .shadow and .shadow-lg

      We recommend using the .elevation-* classes instead.

    • The following elevation utility classes have been renamed breaking

      • .elevation-1 is now .elevation-100
      • .elevation-2 is now .elevation-200
      • .elevation-3 is now .elevation-300
      • .elevation-4 is now .elevation-400
      • .elevation-5 is now .elevation-500

    • Removed some spacing utilities' classes (margin and padding {m/p}{x/y/s/e/t/b}-*) breaking

      • *-small-large
      • *-bigger-giant

    • Changed the spacing utilities' classes (margin and padding {m/p}{x/y/s/e/t/b}-*) naming to pixel-based names breaking

      • *-hair is now *-1
      • *-line is now *-2
      • *-micro and *-1 are now *-4
      • *-mini and *-2 are now *-8
      • *-small-regular is now *-12
      • *-regular and *-3 are now *-16
      • *-large and *-4 are now *-24
      • *-big is now *-32
      • *-bigger-big is now *-40
      • *-small-huge and *-5 are now *-48
      • *-huge is now *-56
      • *-small-giant is now *-78
      • *-giant is now *-80

    • All background color classes (bg-*) have been removed breaking

    • Removed utility mixins breaking

      • @mixin responsive-size
      • @mixin generate-utility-class()
      • @mixin bezel-small(), @mixin bezel-small-regular(), @mixin bezel-regular(), @mixin bezel-bigger-regular(), @mixin bezel-medium(), @mixin bezel-large(), @mixin bezel-big()

    • Renamed some utility classes breaking

      • .h-visuallyhidden is now .visually-hidden
      • .h-clearfix is now .clearfix

    • Removed some utility classes breaking

      • .spacer
      • .h-visuallyhidden-up-md, .h-visuallyhidden-down-rg, .h-visuallyhidden-down-lg
    Helpers

    • The following bootstrap helper classes have been removed breaking

      • Figures: .figure, .figure-img and .figure-caption
      • Vertical rule: .vr
      • Colored background: .text-bg-*
      • Colored links: .link-*
      • Visually hidden: .visually-hidden-focusable
      • Stretched link: .stretched-link
      • Stacks: .vstack and .hstack
      • Ratios: .ratio and .ratio-*x*
      • Icon link: .icon-link and .icon-link-hover
    Typography

    • Removed deprecated font size variables and classes breaking

      • $font-size-12 and .font-size-12
      • $font-size-14 and .font-size-14
      • $font-size-16 and .font-size-16
      • $font-size-18 and .font-size-18
      • $font-size-20 and .font-size-20
      • $font-size-24 and .font-size-24
      • $font-size-28 and .font-size-28
      • $font-size-32 and .font-size-32
      • $font-size-40 and .font-size-40
      • $font-size-48 and .font-size-48
      • $font-size-56 and .font-size-56

      You can now use the font curves .fs-1 to .fs-11 that are documented in the text utilities.

    • Removed deprecated font curve variables and classes breaking

      • $font-size-tiny and .fs-tiny
      • $font-size-small and .fs-small
      • $font-size-regular and .fs-regular
      • $font-size-bigger-regular and .fs-bigger-regular
      • $font-size-medium and .fs-medium
      • $font-size-large and .fs-large
      • $font-size-small-big and .fs-small-big
      • $font-size-big and .fs-big
      • $font-size-bigger-big and .fs-bigger-big
      • $font-size-small-huge and .fs-small-huge
      • $font-size-huge and .fs-huge

      You can now use the font curves .fs-1 to .fs-11 that are documented in the text utilities.

    • Removed font curve mixin breaking

      • @mixin font-curve

    • Removed deprecated line-height variables breaking

      • $line-heights
      • $line-height-tiny
      • $line-height-small
      • $line-height-regular
      • $line-height-bigger-regular
      • $line-height-medium
      • $line-height-large
      • $line-height-small-big
      • $line-height-big
      • $line-height-bigger-big
      • $line-height-small-huge
      • $line-height-huge

    • Removed font-size class .small breaking

    • The following classes have been removed as the new Swiss Post font does not provide a light font weight (300) breaking

      • .fw-light
      • .light

    • Renamed font-weight utility classes breaking

      • .bold is now .fw-bold
      • .regular is now .fw-regular

    • Removed the following display SCSS variables breaking

      • $display1-weight
      • $display2-weight
      • $display3-weight
      • $display4-weight
      • $display-line-height

    • The display sizes scss variables have been removed breaking

      • $display{1/2/3/4/5/6}-size variables no longer exist

      We recommend using the heading classes to replace their usage, either by using the standard html tags (e.g. h1) or the css classes (e.g. .h1).

    • The @function line-height-calc($val) has been removed breaking

      The line height is now set to a default value for both paragraph elements and headings. If a different value is needed, we recommend using the line height text utility classes.

    • The .lh-base class has been removed breaking

    • The .font-monospace class has been removed along with the $font-family-monospace scss variable. breaking

    • Some text placeholder have been removed breaking

      • %list-adjustement
      • %module-container
      • %default-module-spacer
      • %text-container
    Other styles

    • The card button CSS component has been removed.The .card-button and .card-buttons are therefore no longer available. breaking

    • The .btn-rg class has been removed. Buttons using this class will now fall back to the default btn-md breaking

    • The .btn-animated class has been removed breaking

    • The .pi-* classes have been removed breaking

      The post-icon component should be used instead.

    • The .breadcrumb-item class has been removed breaking

      The post-breadcrumb-item component should be used instead.

    • The .alert-fixed-bottom class has been removed breaking

    • The topic-teaser component and all of its related classes have been removed breaking

    • The ng-bootstrap notification overlay component has been removed breaking

    • The ng-bootstrap custom select has been removed breaking

    • The ng-bootstrap carousel component has been removed breaking

    • The ng-bootstrap modal component has been removed as well as all of its classes and scss variables breaking

    • The @mixin scroll-shadows-y has been removed breaking

    • The .card-group class has been removed. breaking

      Card elements should be set inside a grid container.

    • Some datatable scss variables have been removed breaking

      • $datatable-sort-asc-icon
      • $datatable-sort-desc-icon
      • $datatable-sort-unset-icon
      • $datatable-sort-editable-icon

    • Some stepper scss variables have been removed breaking

      • $stepper-link-hover-color
      • $stepper-indicator-hover-outline
      • $stepper-indicator-font-size
      • $stepper-link-current-font-size
      • $stepper-indicator-hover-check-icon
      • $stepper-indicator-height

    • The following z-index scss variables have been removed, as they were set on elements that are now using popover which place them in the top layer. breaking

      • $zindex-sticky
      • $zindex-fixed
      • $zindex-modal-backdrop
      • $zindex-modal
      • $zindex-popover
      • $zindex-tooltip
      • $zindex-alert

    • Accent colors have been removed breaking

      • .btn-nightblue, .btn-nightblue-bright, .btn-petrol, .btn-petrol-bright, .btn-coral, .btn-coral-bright, .btn-olive, .btn-olive-bright, .btn-purple, .btn-purple-bright, .btn-aubergine, .btn-aubergine-bright classes no longer exist.
      • $nightblue, $nightblue-bright, $petrol, $petrol-bright, $coral, $coral-bright, $olive, $olive-bright, $purple, $purple-bright, $aubergine, $aubergine-bright scss variables no longer exist.

    • All classes and CSS variables related to the bootstrap navbar component have been removed breaking

    Components

    • The post-alert web component is now post-banner breaking

    • The heading-level property on post-accordion is now required breaking

    • The stencil hydrated flag has switched from the .hydrated class to to the data-hydrated attribute breaking

      If your tests related on the class being present, please rewrite the selector to use the new attribute selector.