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.

8.1 - 2025-11-28

Added

  • Footers: Buttons can now be used in the sub-footers.
  • Tooltip: has a new property maxwidth to easier control how the tooltip behaves.
  • Icon: New icon attachment
  • CSS: Typography now linked to Figma tokens

Bugfix

  • Tooltip: Tooltip position should not stray from the trigger.
  • Tabs: Z-index issues when using dialogs inside of tabs panels fixed.
  • Dialog: Problem with focusloop when tabbing backwards is now fixed.
  • Dialog: Dialog without supplied trigger should not be focused by NVDA.
  • CSS: ids--theme ids--mode classes can now be applied anywhere.

Changed

  • Font: Open Sans SemiBold has been added to all themes.
  • Global alert: The icon is now handled by the component. You can no longer provide an icon of your choice.

Changed

  • Header nav items: Due to accessibility, prop notifications has been removed. You have to add notifications inside the nav item links/buttons instead.
  • Side menu: Any link or button icons have to be placed inside the supplied a or button.

CSS breaking changes

  • Header nav items: Nav items have modified HTML structures.
  • Header inera admin mobile menu: Modified HTML structure.
  • Puff list item header: HTML structure change. The main class ids-puff-list-item-header is now on a wrapper div. While the h2 has got class ids-puff-list-item-header__headline.
  • Side menu: HTML structure change to accommodate for new link/button focus. ids-side-menu__leaf-icon → ids-side-menu__label-icon. ids-side-menu__leaf-icon--empty → ids-side-menu__chevron-button--empty.

Headers

  • All header items: HTML structure change to accommodate for new link/button focus.
  • Header 1177 nav items mobile: HTML structure change to accommodate for new link/button focus.