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.

@swisspost/internet-header

npm version

The header for client-facing applications.

Instructions

Request a configuration

The Internet Header is built to support the already existing Portal Configuration used for the old Internet Header.
If you're working on a new project, you probably need a new configuration. Please contact the Post Portal Team.

Step 1

Integration of header only: contact dm-tec@post.ch directly

Integration of header and KLP: contact KLP first for integration

Step 2

Provide these informations to DM Tec:

  • ServiceID (ProjektID)
  • Languages which you'd like to support
  • Allowed referrers per environment (test/int/prod)
  • Categories for the Online Service (see the Swiss Post online services overview page)
  • Name of the Online Service in all available languages
  • URLs of all environments and languages (links should be dependent on language)
  • Abstract in all available languages (will be shown on the Swiss Post online services overview page)

Internet-header package provide two versions:

  • Lazy-loaded (default): it allows better performance by dynamically load the component when used, so it reduces bundle size, startup time and first paint.
  • Bare component: if you already manage the lazy-loading or don't need it for any reason, you can use the component without any overhead.
Install with a bundler

All the popular frameworks come with some form of bundler. This makes it easy to use npm packages like the Internet Header as you can import, bundle and deliver the header with your own code.

When working with Angular or any other framework, the easiest installation method is via npm.

npm install @swisspost/internet-header
<!-- index.html -->
<body>
  <swisspost-internet-header project="your-project-id"></swisspost-internet-header>
  ...
</body>

Lazy-Loaded

// main.ts / index.js / ...
import { defineCustomElements } from '@swisspost/internet-header/loader';

defineCustomElements();

Bare Component

// main.ts / index.js / ...
import '@swisspost/internet-header/dist/swisspost-internet-header/swisspost-internet-header.esm';
Include from a CDN

If you are not using any bundler or don't want to install from npm, you can load the internet-header from your favourite CDN.
Make sure to replace {version} with the version you want to use or remove @{version} to use the latest version.

Available CDNs:

Lazy-Loaded

<!DOCTYPE html>
<html>
  <body>
    <swisspost-internet-header project="your-project-id"></swisspost-internet-header>
    <script type="module">
      import { defineCustomElements } from '{cdnUrl}@{version}/loader/index.es2017.js';

      defineCustomElements();
    </script>
  </body>
</html>

Bare Component

<!DOCTYPE html>
<html>
  <head>
    <script
      async
      type="module"
      src="{cdnUrl}@{version}/dist/swisspost-internet-header/swisspost-internet-header.esm.js"
    ></script>
  </head>
  <body>
    <swisspost-internet-header project="your-project-id"></swisspost-internet-header>
  </body>
</html>

For Angular user, please have a look at How to integrate Web Components inside Angular

The internet header package provides a stylesheet aimed at facilitating the use of key CSS variables beyond the header itself. This stylesheet allows you to access CSS variables to implement styling relative to the header as needed, but it is completely optional.

Sass Import
@use "@swisspost/internet-header/dist/swisspost-internet-header/swisspost-internet-header.css";
HTML Import
<link rel="stylesheet" href="@swisspost/internet-header/dist/swisspost-internet-header/swisspost-internet-header.css"/>

This guide aims to give a broad overview of how a migration can be performed. Different projects have different levels of integration with the header, and therefore require more steps to migrate.

The "new" Internet Header Web Component aims to encapsulate as much as possible whereas the old header had a big influence on the page — limiting design decisions and flexibility of the markup structure. The Web Component Header consists of one script and three standard Web Components that can be freely placed on the page. It's even possible to render those elements with Angular (or any other framework) to easier pass settings into the component.

The new header is built to work with the existing Sitecore configuration already existing for your project to make the migration as smooth as possible.

If you need support during your migration, don't hesitate to contact the Design System Team on GitHub.

In your index.html, you should find three scripts associated with the old header. One to load static assets, one to configure it and one to load it.

  • You can remove the configuration and the loader scripts, but remember your serviceid.
  • Try to remove the staticassets script to check if you still need it
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post.css&environment=prod"
    />
    <link
      rel="stylesheet"
      href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post-modules.css&environment=prod"
    />

    <!-- Custom CSS -->

    <!-- static assets -->
    <script
      src="https://www.post.ch/api/staticasset?serviceId=webstamp&file=head.js&environment=prod"
      type="text/javascript"
    ></script>
  </head>

  <body>
    <div id="os_content">
      <!-- Content from the current page of the online service -->
    </div>

    <!-- configuration -->
    <script id="os_config" type="application/json">
      {
        "os_config": {
          "currentLang": "de",
          "currentUrl": "https://service.post.ch/onlinedienst/deep-url"
        }
      }
    </script>

    <!-- loader -->
    <script
      src="https://www.post.ch/api/headerjs?serviceid=webstamp&includejquery=true&environment=prod"
      type="text/javascript"
    ></script>
  </body>
</html>

The old header was responsible for wrapping your main code (here #os_content) with custom <div>s. The new header does not provide those wrappers. Instead, every page has control over the main markup structure. A possible replacement of the above code could be:

<html>
  <head>
    <link
      rel="stylesheet"
      href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post.css&environment=prod"
    />
    <link
      rel="stylesheet"
      href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post-modules.css&environment=prod"
    />

    <!-- Custom CSS -->
  </head>

  <body>
    <main id="os_content" class="container">
      <!-- Content from the current page of the online service -->
    </main>
  </body>
</html>
  • Likely you'll need the class container around your main content to align it properly in the center.
  • For improved semantic markup, consider wrapping the main page content in a <main> tag. (Learn more about the <main> tag).
  • Check if you need the staticasset stylesheets linked in the header

If you need to do any other changes, please make a post to the Design System Teams Channel in order to inform the devs to update this guide and provide useful information for other developers.

The new Header does not ship jQuery anymore. While jQuery v3.6 is an internal dependency for the Login Widget, every project is now responsible for loading and updating jQuery individually. If you are depending on an older (<3.5) version of jQuery, please update. There is a long list of known jQuery vulnerabilities.

Please refer to the Internet Header installation instructions for an installation guide.

After installation, you're ready to add the new tags to your markup:

<html>
  <head>
    <link
      rel="stylesheet"
      href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post.css&environment=prod"
    />
    <link
      rel="stylesheet"
      href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post-modules.css&environment=prod"
    />

    <!-- Eigene CSS Verknüpfungen -->
  </head>

  <body>
    <!-- The header needs to be directly in the body tag for stickiness functionality to work -->
    <swisspost-internet-header project="your-service-id"></swisspost-internet-header>

    <aside class="my-huge-r container">
      <swisspost-internet-breadcrumbs></swisspost-internet-breadcrumbs>
    </aside>

    <main id="os_content" class="container">
      <!-- Content from the current page of the online service  -->
    </main>

    <swisspost-internet-footer></swisspost-internet-footer>
  </body>
</html>

Place the new elements as described (and needed) as shown above. The breadcrumbs need a container wrapper to align themselves with the content of your page, the header and the footer already provide a container. If you don't have breadcrumbs, you can just delete the <aside> and the <swisspost-internet-breadcrumbs>.

If you need to change settings during runtime, you can get a reference to the header by querying:

const header = document.querySelector<HTMLSwisspostInternetHeaderElement>(
  'swisspost-internet-header',
);

// Toggle search
header.search = false;

// Set new custom config
header.customConfig = {
  /* ... */
};

At the Internet Header configuration page you can find a list of possible options.

Changelog

@swisspost/internet-header

2.0.0-next.39

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@10.0.0-next.39

2.0.0-next.38

Patch Changes

  • Added the TikTok icon to the SVG sprite used in the footer. It can now be added to the footer using the icon name 8020_tiktok. (by @leagrdv with #5517)
  • Updated dependencies:
    • @swisspost/design-system-styles@10.0.0-next.38

2.0.0-next.37

Patch Changes

  • Added cypress eslint plugin to enable linting for all cypress folders and files. (by @schaertim with #5102)
  • Updated dependencies:
    • @swisspost/design-system-styles@10.0.0-next.37

2.0.0-next.36

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.36

2.0.0-next.35

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.35

2.0.0-next.34

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.34

2.0.0-next.33

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.33

2.0.0-next.32

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.32

2.0.0-next.31

Patch Changes

  • Replaced usages of color: inherit with tokens to improve high contrast mode compatability. (by @schaertim with #4933)
  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.31

2.0.0-next.30

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.30

2.0.0-next.29

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.29

2.0.0-next.28

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.28

2.0.0-next.27

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.27

2.0.0-next.26

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.26

2.0.0-next.25

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.25

2.0.0-next.24

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.24

2.0.0-next.23

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.23

2.0.0-next.22

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.22

2.0.0-next.21

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.21

2.0.0-next.20

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.20

2.0.0-next.19

Major Changes

  • Removed deprecated legacy utility classes. (by @leagrdv with #4631)

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.19

2.0.0-next.18

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.18

2.0.0-next.17

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.17

2.0.0-next.16

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.16

2.0.0-next.15

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.15

2.0.0-next.14

Patch Changes

  • Replaced sessionData and address properties in the sessionStorage item klp.widget.state. If you're looking for this info, contact the Swiss Post Design System Team! (by @oliverschuerch with #4553)
  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.14

2.0.0-next.13

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.13

2.0.0-next.12

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.12

2.0.0-next.11

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.11

2.0.0-next.10

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.10

2.0.0-next.9

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.9

2.0.0-next.8

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.8

2.0.0-next.7

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.7

2.0.0-next.6

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.6

2.0.0-next.5

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.5

2.0.0-next.4

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.4

2.0.0-next.3

Major Changes

  • Switched stencil hydrated flag from class (hydrated) to attribute (data-hydrated). This flag indicates when a component finished rendering on the page. If your tests relied on the class being present, please rewrite the selector to use the new attribute selector. (by @oliverschuerch with #3783)

Minor Changes

  • Added and documented the possibility to create plain links in the main navigation by adding noFlyout: true to the config. The flyout property is now optional and can be omitted. (by @alionazherdetska with #3596)

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.3

1.14.6-next.2

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.2

1.14.6-next.1

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.1

1.14.6-next.0

Patch Changes

  • Applied High Contrast Mode mixin to breadcrumb SVGs for proper color inversion. (by @schaertim with #3480)
  • Updated dependencies:
    • @swisspost/design-system-styles@9.0.0-next.0

1.14.5

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@8.2.0

1.14.4

Patch Changes

  • Improved accessibility of the header search by improving announcement of suggestions to screen reader users. (by @alizedebray with #3328)
  • Updated dependencies:
    • @swisspost/design-system-styles@8.1.0

1.14.3

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@8.0.0

1.14.2

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@7.4.0

1.14.1

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@7.3.1

1.14.0

Minor Changes

  • Added a new stylesheet containing :root CSS custom properties to facilitate implementing styles relative to the header. This will allow putting sticky content right below the header. (by @alizedebray with #3200)

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@7.3.0

1.13.12

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@7.2.1

1.13.11

Patch Changes

  • Fixed focus trap on overlay of the breadcrumb. Added a focus trap on search overlay (by @imagoiq with #2922)
  • Updated dependencies:
    • @swisspost/design-system-styles@7.2.0

1.13.10

Patch Changes

  • Fixed display issue with long user/company names being cut off in the user dropdown. (by @alizedebray with #3104)
  • Updated dependencies:
    • @swisspost/design-system-styles@7.1.0

1.13.9

Patch Changes

  • Refactored brand colors. Renamed $gray-background SCSS variable to $gray and removed $gray-background-light variable because it is a duplication of the already existing variable $light.
    Updated the usage of said variables in dependant packages accordingly. (by @oliverschuerch with #2861)

  • Fixed logo not scaled properly for header with no meta navigation. (by @alizedebray with #2787)

  • Sanitized hours fields in footer against XSS "Incomplete multi-character sanitization" issue. (by @imagoiq with #2807)

  • Replaced system-ui fallback font with a list of fallbacks to avoid rendering issues with specific writing system (chinese, arabic…). (by @imagoiq with #2735)

  • Fixed an issue with invisible focus rings when not using the Design System Styles along with the Swisspost Internet Header. Focus rings are now displayed as expected. (by @gfellerph with #2793)

  • Hide the main navigation custom content when empty. (by @alizedebray with #2786)
  • Updated dependencies:
    • @swisspost/design-system-styles@7.0.0

1.13.8

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@6.6.4

1.13.7

Patch Changes

  • Reinstated original navigation role for post-main-navigation. (by @imagoiq with #2709)
  • Updated dependencies:
    • @swisspost/design-system-styles@6.6.3

1.13.6

Patch Changes

  • Added secure flag for cookies. (by @imagoiq with #2629)

  • Fixed display of internet-header icons on high-contrast mode with light theme. (by @imagoiq with #2669)

  • Fixed missing accessible labels on post-meta navigation links. (by @gfellerph with #2700)
  • Updated dependencies:
    • @swisspost/design-system-styles@6.6.2

1.13.5

Patch Changes

  • Set the size of the logo before it is displayed to avoid a layout jump right after the initial rendering of the header. (by @alizedebray with #2557)
  • Updated dependencies:
    • @swisspost/design-system-styles@6.6.1

1.13.4

Patch Changes

  • Fixed size of post logo on browser which does not support aspect-ratio property. (by @imagoiq with #2543)

1.13.3

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@6.6.0

1.13.2

Patch Changes

  • Improve the main navigation slot placement and styling. (by @alizedebray with #2280)

  • Fixed an issue with stickyness scrolling where the logo would not react to scroll events and the header did not appear when scrolling back up. (by @gfellerph with #2377)
  • Updated dependencies:
    • @swisspost/design-system-styles@6.5.1

1.13.1

Patch Changes

  • Defined @stencil/core and @stencil/store as a devDependency to avoid compatibilities issues. (by @imagoiq with #2313)

  • Fixed position of close button on click or on focus in the help overlay. (by @imagoiq with #2365)

  • Fixed display of active navigation in High Contrast Mode. (by @imagoiq with #2314)
  • Updated dependencies:
    • @swisspost/design-system-styles@6.5.0

1.13.0

Minor Changes

  • Added a link to settings in the user drop-down menu for business users. (by @alizedebray with #2234)

Patch Changes

  • Replaced the old twitter logo with the new X logo. (by @b1aserlu with #2176)
  • Updated dependencies:
    • @swisspost/design-system-styles@6.4.4

1.12.1

Patch Changes

  • Reverted #2152 because of an issue with importing the internet headers defineCustomElements. (by @gfellerph with #2208)
  • Updated dependencies:
    • @swisspost/design-system-styles@6.4.3

1.12.0

Minor Changes

  • Added component exports to the src/index.ts files, to include them in the dist/index.js and dist/index.esm.js output files and therefore fix our stencil setup. (by @oliverschuerch with f74c9662)

Patch Changes

  • Added logout-url property to override the URL provided by the portal config on the internet-header component. (by @imagoiq with #2114)

  • Upgraded builder Stenciljs from version 3 to 4. No user visible changes are expected. (by @imagoiq with #2116)
  • Updated dependencies:
    • @swisspost/design-system-styles@6.4.3

1.11.0

Minor Changes

  • Added a new button to clear the text in the search box. (by @b1aserlu with #2036)

Patch Changes

  • Added hide-buttons prop to hide all breadcrumbs buttons. (by @imagoiq with #2027)

  • Fixed internet-header search focus truncated on focus-within. (by @imagoiq with #2043)

  • Compressed styles output. (by @imagoiq with #2098)
  • Updated dependencies:
    • @swisspost/design-system-styles@6.4.2

1.10.0

Minor Changes

  • Enabled nesting the header in a different scroll container than the <body> element. The header stickyness and logo animation logic will automatically attach to the nearest scrolling container instead of the document when nested in a container that has overflow: auto | scroll set. (by @alizedebray with #1855)

  • Added ability to toggle programmatically an overlay associated with a button using the toggleOverlayById method. (by @imagoiq with #1838)

Patch Changes

  • Fixed an issue with custom configuration that was not applied when the prop "language" was not set on the internet header. (by @alizedebray with #1855)
  • Updated dependencies:
    • @swisspost/design-system-styles@6.4.1

1.9.1

Patch Changes

  • Clarified and fixed which internet-header versions are available and how to use them. (by @imagoiq with #1792)

  • Fixed a line of code that was not compliant with quality rules (by @b1aserlu with #1872)
  • Updated dependencies:
    • @swisspost/design-system-styles@6.4.0

1.9.0

Minor Changes

  • Added a cookie settings button to the footer. Applications with integrated UC_UI (through GTM) will see the button and users will be able to edit their preferences. (by @gfellerph with #1730)

  • Updated the logo size, the post logo now spans the meta-navigation and scales down on scroll. (by @gfellerph with #1552)

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@6.3.0

1.8.3

Patch Changes

  • Fixed an issue with typings that were incorrectly exported, leading to errors when using "defineCustomElements" to import the internet header. (by @gfellerph with #1720)

1.8.2

Patch Changes

  • Fixed an issue with uppercase environment strings. Uppercase environment strings caused issues with mapping to datasets throughout the header. Now the property is being converted to lowercase internally. (by @gfellerph with #1670)

  • Fixed an issue with the search redirect to track and trace. The track and trace API ok response type changed from boolean to string. The new type is now supported in the redirect logic. (by @gfellerph with #1674)

  • Fixed broken and outdated output structure of stencil build. (by @oliverschuerch with #1611)
  • Updated dependencies:
    • @swisspost/design-system-styles@6.2.6

1.8.1

Patch Changes

  • Updated dependencies:
    • @swisspost/design-system-styles@6.2.5

1.8.0

Minor Changes

  • Added tracking calls to the search recommendations. Click events are being sent to the tag manager if it is present on the page (by @gfellerph with #1548)

  • Implemented kill-switch for coveo suggestions based on the isCustomSuggestionHidden option in the search configuration. (by @gfellerph with #1591)

Patch Changes

  • Deprecated the stickyness option "full". It should not be used anymore as this mode takes up too much screen space (by @gfellerph with #1551)

  • Fixed jobs login widget. An optimized widget is now rendered without requesting the whole KLP widget logic (by @gfellerph with #1568)

  • Fixed an issue with the search button. Focusing or clicking the button will no longer change its position and search queries can be performed as usual. (by @gfellerph with #1590)
  • Updated dependencies:
    • @swisspost/design-system-styles@6.2.4

1.7.4

Patch Changes

  • Fixed broken links to the storybook documentation. (by @alizedebray with #1514)

  • Fixed an issue, which causes the autofocus of any element on a page to move instantly to the klp-login-widget button on page load, when a user is logged in. (by @oliverschuerch with #1476)

  • Fixed a visual bug where the header was not completely hidden in the stickyness="minimal" mode. The grey line is no longer visible when the header is hidden. (by @cellcoresystems with #1517)
  • Updated dependencies:
    • @swisspost/design-system-styles@6.2.3

1.7.3

Patch Changes

  • Fixed an issue with route detection. Uppercase URLs will now correctly match their lowercase navigation item counterparts. (by @gfellerph with #1435)

  • Fixed the focus behavior when navigating the flyout with a mouse. Hovering and leaving navigation items that trigger a flyout will no longer focus the main navigation entry after the flyout has been closed. (by @gfellerph with #1462)

  • Added abort controller for all existing post-search search endpoints, to avoid running parallel calls for the same endpoint and therefore get outdated suggestions in the search suggestion list. (by @oliverschuerch with #1416)

  • Fixed focus styles for links and buttons inside the navigation. Focus styles are now defined and uniform across browsers. (by @gfellerph with #1453)
  • Updated dependencies:
    • @swisspost/design-system-styles@6.2.2

1.7.2

Patch Changes

  • Added role="search" to the post-search component and role="searchbox" to its search input field. (by @oliverschuerch with #1403)

  • Added an aria-label attribute on the skiplinks ul element to clearify the usage of the links in the list. (by @oliverschuerch with #1402)

  • Setting the focus to the related back-button or main-link element whenever a flyout is opened or closed. (by @oliverschuerch with #1404)

  • Added aria-label or aria-labelledby attributes to all <nav> elements. (by @alizedebray with #1408)

  • Added invisible text to mark active main navigation point. (by @oliverschuerch with #1401)

  • Fixed the scroll error in the 2nd-level navigation overlay on mobile devices. (by @oliverschuerch with #1400)

1.7.1

Patch Changes

  • Added current language information in the post-language-switch component. (by @oliverschuerch with #1376)

  • Added an aria-labelledby attribute to the flyout link lists to bind them to their title. (by @alizedebray with #1370)

  • Fixed overlapping of the search input label and the search input icon in the post-search component. (by @oliverschuerch with #1367)

  • Removed the title and accessKey attributes from the skiplinks. (by @alizedebray with #1369)

  • Added the name of the active menu item to the hidden label of the flyout close button. (by @alizedebray with #1372)

  • Added aria-label to the mobile language selector. (by @alizedebray with #1373)

  • Added an aria-labelledby attribute to the search suggestion list to bind it to its title. (by @alizedebray with #1371)

  • Added aria attributes to mobile menu toggle. (by @alizedebray with #1368)

1.7.0

Minor Changes

1.6.0

Minor Changes

  • Added the possibility to configure the header via script tag for Portal specific integrations. A lang attribute on the html element is required for this solution to work as well as a <script id="PPM_HEADER_DATA" type="application/json"> tag containing the header config for the defined language. (by @gfellerph with #1309)

Patch Changes

  • Fixed a bug where a shipment information in the search suggestions was not reset after the search query changed. (by @gfellerph with #1278)

1.5.6

Patch Changes

  • Updated the places search filter. The search now shows adresses, localities and regions in addition to points of interest like Post Branches, MyPost 24 and other Post services. (by @oliverschuerch with #1257)

  • Improved the styling for the Internet-Header search input. Text in the input does not overlap the start-search-button anymore. (by @oliverschuerch with #1257)

1.5.5

Patch Changes

  • Reverted the update to Bootstrap 5.2 and Angular 15. This update should have been a major release and will be re-released as such as soon as possible. (by @gfellerph with #1207)

1.5.4

Patch Changes

  • Added the environment devs1 to the list of possible environment settings. (by @gfellerph with #1152)

1.5.3

Patch Changes

  • Removed @sindresorhus/slugger as dependency, since it's no longer necessary for creating places.post.ch detail page URLs (by @gfellerph with #1120)

  • Added more possible environment settings (dev01, dev02, test). (by @gfellerph with #1114)

  • Fixed heading level for main navigation from h2 to h1 in order to comply to the header level nesting spec. (by @gfellerph with #1123)

1.5.2

Patch Changes

  • Updated skiplinks markup to better match the previous implementation and prevent an unnamed landmark error. Also added a title. (by @gfellerph with #1066)

  • Updated the styles for the breadcrumb help & contact buttons in order to make the button text accessible for screen readers on mobile (by @gfellerph with #1066)

  • Fixed an issue with the footer custom config. The header part of the custom config is optional and is now treated as such. (by @gfellerph with #1066)

  • Fixed environment string comparison when upper case characters are used to define the environment property (by @gfellerph with #1082)

1.5.1

Patch Changes

  • Fixed a missing margin on the lg viewport for the main navigation (by @gfellerph with #1058)

1.5.0

Minor Changes

  • Released the Swiss Post Internet Header to GitHub and NPM (by @gfellerph with #972)

Patch Changes

  • Patched relative URLs for the "most searched services" feature of the search box. Relative URLs are always resolved to the base "https://post.ch" (by @gfellerph with #1011)

  • Fixed an issue with cross-origin communication between the breadcrumb help and contact overlay iFrames and the host page. Disabled origin checks in the iframeresizer plugin (by @gfellerph with #1008)

  • Fixed button alignment in the change company dialog (by @gfellerph with #1010)