diff --git a/.changeset/large-apples-clap.md b/.changeset/large-apples-clap.md new file mode 100644 index 0000000000..88469c7425 --- /dev/null +++ b/.changeset/large-apples-clap.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-documentation': patch +--- + +Fixed tabs in documentation pages. diff --git a/packages/documentation/src/shared/packages-docs-layout.mdx b/packages/documentation/src/shared/packages-docs-layout.mdx index a4fc1fae4d..ffecdb9165 100644 --- a/packages/documentation/src/shared/packages-docs-layout.mdx +++ b/packages/documentation/src/shared/packages-docs-layout.mdx @@ -1,19 +1,18 @@ import { Markdown } from '@storybook/blocks'; -import { PostTabs, PostTabHeader, PostTabPanel } from '@swisspost/design-system-components-react'; import { CodeOrSourceMdx } from '@/utils/codeOrSourceMdx'; - - Instructions - + + Instructions + {/* eslint-disable-next-line no-undef */} {props.children} - + - Changelog - + Changelog + {/* eslint-disable-next-line no-undef */} {props.changelog} - - + + diff --git a/packages/documentation/src/stories/components/banner/banner.docs.mdx b/packages/documentation/src/stories/components/banner/banner.docs.mdx index 7232ca75a1..01587d88c1 100644 --- a/packages/documentation/src/stories/components/banner/banner.docs.mdx +++ b/packages/documentation/src/stories/components/banner/banner.docs.mdx @@ -1,10 +1,5 @@ import { Canvas, Controls, Meta, Source } from '@storybook/blocks'; -import { - PostBanner, - PostTabHeader, - PostTabPanel, - PostTabs, -} from '@swisspost/design-system-components-react'; +import { PostBanner } from '@swisspost/design-system-components-react'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; import * as BannerStories from './standard-html/banner.stories'; import * as PostBannerStories from './web-component/post-banner.stories'; @@ -36,9 +31,9 @@ Banners are intended to attract the user's attention without interrupting their

- - Standard HTML - + + Standard HTML +
@@ -79,10 +74,10 @@ Banners are intended to attract the user's attention without interrupting their enclose the banner's content within a `.banner-content` container, and place the action buttons within a `.banner-buttons` wrapper. - + - Web Component - + Web Component + @@ -129,6 +124,6 @@ Banners are intended to attract the user's attention without interrupting their This method operates asynchronously and returns a promise that resolves once the fade-out animation has finished. - + - + diff --git a/packages/documentation/src/stories/components/card-control/card-control.docs.mdx b/packages/documentation/src/stories/components/card-control/card-control.docs.mdx index d163752e5c..7458e59916 100644 --- a/packages/documentation/src/stories/components/card-control/card-control.docs.mdx +++ b/packages/documentation/src/stories/components/card-control/card-control.docs.mdx @@ -1,10 +1,5 @@ import { Canvas, Controls, Meta, Source } from '@storybook/blocks'; -import { - PostBanner, - PostTabs, - PostTabHeader, - PostTabPanel, -} from '@swisspost/design-system-components-react'; +import { PostBanner } from '@swisspost/design-system-components-react'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; import * as CardControlStandardHTMLStories from './standard-html/card-control.stories'; @@ -33,9 +28,9 @@ import SampleCardControlMethods from './web-component/card-control-methods.sampl

- - Standard HTML - + + Standard HTML +
@@ -80,12 +75,12 @@ import SampleCardControlMethods from './web-component/card-control-methods.sampl - + - Webcomponent - - - +Webcomponent + + + ## Installation @@ -149,5 +144,5 @@ import SampleCardControlMethods from './web-component/card-control-methods.sampl language="typescript" /> - - + + diff --git a/packages/documentation/src/stories/components/card-product/card-product.docs.mdx b/packages/documentation/src/stories/components/card-product/card-product.docs.mdx index a88c363129..db710750fa 100644 --- a/packages/documentation/src/stories/components/card-product/card-product.docs.mdx +++ b/packages/documentation/src/stories/components/card-product/card-product.docs.mdx @@ -1,10 +1,5 @@ import { Canvas, Controls, Meta, Source } from '@storybook/blocks'; -import { - PostBanner, - PostTabHeader, - PostTabPanel, - PostTabs, -} from '@swisspost/design-system-components-react'; +import { PostBanner } from '@swisspost/design-system-components-react'; import * as ProductCardStories from './card-product.stories'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; import ProductCardSyncHeights from './card-product.sample.js?raw'; @@ -51,14 +46,14 @@ For presenting a collection of products with comparable features, use cards with - - Vanilla JavaScript - + + Vanilla JavaScript + - + - Angular Implementation - - - - +Angular Implementation + + + + diff --git a/packages/documentation/src/stories/components/datepicker/datepicker.docs.mdx b/packages/documentation/src/stories/components/datepicker/datepicker.docs.mdx index 7caf2f426a..37a3acdd40 100644 --- a/packages/documentation/src/stories/components/datepicker/datepicker.docs.mdx +++ b/packages/documentation/src/stories/components/datepicker/datepicker.docs.mdx @@ -1,5 +1,4 @@ import { Meta, Source } from '@storybook/blocks'; -import { PostTabHeader, PostTabPanel, PostTabs } from '@swisspost/design-system-components-react'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; import NgbComponentDemoLink from '@/shared/nb-bootstrap/ngb-component-demo-link.mdx'; import NgbComponentBanner from '@/shared/nb-bootstrap/ngb-component-banner.mdx'; @@ -85,21 +84,22 @@ The formatter below transforms the NgbDateStruct into the usual Swiss format str ## Examples - - Floating Label Input - + + Floating Label Input + - + {' '} -Navigation Arrows Only - +Navigation Arrows Only + + - + - Invalid Feedback - - - - +Invalid Feedback + + + + diff --git a/packages/documentation/src/stories/components/dropdown/dropdown.docs.mdx b/packages/documentation/src/stories/components/dropdown/dropdown.docs.mdx index c56323a280..253820b163 100644 --- a/packages/documentation/src/stories/components/dropdown/dropdown.docs.mdx +++ b/packages/documentation/src/stories/components/dropdown/dropdown.docs.mdx @@ -1,5 +1,4 @@ import { Meta, Source } from '@storybook/blocks'; -import { PostTabHeader, PostTabPanel, PostTabs } from '@swisspost/design-system-components-react'; import * as DropdownStories from './dropdown.stories'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; import NgbComponentDemoLink from '@/shared/nb-bootstrap/ngb-component-demo-link.mdx'; @@ -52,21 +51,21 @@ import SampleIcons from './dropdown-icons.sample.html?raw'; ## Examples - - Basic Dropdown - + + Basic Dropdown + - - Basic Dropup - + + Basic Dropup + - - Scrollable Dropup - + + Scrollable Dropup + - - Dropdown with Icons - + + Dropdown with Icons + - - + + diff --git a/packages/documentation/src/stories/components/intranet-header/intranet-header.docs.mdx b/packages/documentation/src/stories/components/intranet-header/intranet-header.docs.mdx index 7618469c9c..dca1fb306d 100644 --- a/packages/documentation/src/stories/components/intranet-header/intranet-header.docs.mdx +++ b/packages/documentation/src/stories/components/intranet-header/intranet-header.docs.mdx @@ -1,5 +1,4 @@ import { ArgTypes, Meta, Source } from '@storybook/blocks'; -import { PostTabHeader, PostTabPanel, PostTabs } from '@swisspost/design-system-components-react'; import * as IntranetHeaderStories from './intranet-header.stories'; import SampleNavigationBar from './intranet-header-navigation-bar.sample.html?raw'; import SampleSideNavigation from './intranet-header-side-navigation.sample.html?raw'; @@ -32,29 +31,31 @@ For installation and usage see the Header with a navigation bar - + + Header with a navigation bar + - + {' '} -Header with a custom user menu - +Header with a custom user menu + + - + {' '} -Header with a side navigation - +Header with a side navigation + + - + - "Postweb" intranet header - - - - +"Postweb" intranet header + + + + ### Props diff --git a/packages/documentation/src/stories/components/modal/modal.docs.mdx b/packages/documentation/src/stories/components/modal/modal.docs.mdx index de3af30557..276518b2a7 100644 --- a/packages/documentation/src/stories/components/modal/modal.docs.mdx +++ b/packages/documentation/src/stories/components/modal/modal.docs.mdx @@ -1,5 +1,4 @@ import { Meta, Source } from '@storybook/blocks'; -import { PostTabHeader, PostTabPanel, PostTabs } from '@swisspost/design-system-components-react'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; import NgbComponentDemoLink from '@/shared/nb-bootstrap/ngb-component-demo-link.mdx'; import NgbComponentBanner from '@/shared/nb-bootstrap/ngb-component-banner.mdx'; @@ -66,19 +65,19 @@ However, You can decide to focus any other element by adding an `ngbAutofocus` a ## Examples - - Varying Content - + + Varying Content + - + -Focused Content - +Focused Content + - + - Mandatory Confirmation - + Mandatory Confirmation + - - + + diff --git a/packages/documentation/src/stories/components/notification-overlay/notification-overlay.docs.mdx b/packages/documentation/src/stories/components/notification-overlay/notification-overlay.docs.mdx index 5f283d2146..54e51f7270 100644 --- a/packages/documentation/src/stories/components/notification-overlay/notification-overlay.docs.mdx +++ b/packages/documentation/src/stories/components/notification-overlay/notification-overlay.docs.mdx @@ -1,5 +1,4 @@ import { Meta, Source } from '@storybook/blocks'; -import { PostTabHeader, PostTabPanel, PostTabs } from '@swisspost/design-system-components-react'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; import PostComponentDemoLink from '@/shared/post-component-demo-link.mdx'; import NgbComponentImport from '@/shared/nb-bootstrap/ngb-component-import.mdx'; @@ -65,14 +64,14 @@ However, You can decide to focus any other element by adding an `ngbAutofocus` a ### Notify the user of an incomplete field before continuing - - template.html - + + template.html + - + - component.ts - + component.ts + - - + + diff --git a/packages/documentation/src/stories/components/select-custom/select-custom.docs.mdx b/packages/documentation/src/stories/components/select-custom/select-custom.docs.mdx index 4d503677e2..5964dcfcd4 100644 --- a/packages/documentation/src/stories/components/select-custom/select-custom.docs.mdx +++ b/packages/documentation/src/stories/components/select-custom/select-custom.docs.mdx @@ -2,12 +2,7 @@ import { Meta, Source } from '@storybook/blocks'; import * as CustomSelectStories from './select-custom.stories.ts'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; import NgbComponentImport from '@/shared/nb-bootstrap/ngb-component-import.mdx'; -import { - PostBanner, - PostTabHeader, - PostTabPanel, - PostTabs, -} from '@swisspost/design-system-components-react'; +import { PostBanner } from '@swisspost/design-system-components-react'; import SampleBasicHTML from './select-custom-basic.sample.html?raw'; import SampleBasicTS from './select-custom-basic.sample.ts?raw'; import SampleFloatingHTML from './select-custom-floating.sample.html?raw'; @@ -56,19 +51,19 @@ import PostComponentDemoLink from '@/shared/post-component-demo-link.mdx'; ## Examples - - Basic example - + + Basic example + ### HTML ### Typescript - - Floating example - + + Floating example + ### HTML ### Typescript - - + + diff --git a/packages/documentation/src/stories/components/tag/tag.docs.mdx b/packages/documentation/src/stories/components/tag/tag.docs.mdx index 94177cedbf..d675465cf7 100644 --- a/packages/documentation/src/stories/components/tag/tag.docs.mdx +++ b/packages/documentation/src/stories/components/tag/tag.docs.mdx @@ -1,9 +1,4 @@ import { Canvas, Controls, Meta } from '@storybook/blocks'; -import { - PostTabs, - PostTabHeader, - PostTabPanel, -} from '@swisspost/design-system-components-react'; import * as TagStories from './standard-html/tag.stories'; import * as PostTagStories from './web-component/post-tag.stories'; import StylesPackageImport from '@/shared/styles-package-import.mdx'; @@ -21,9 +16,9 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
A small label, generally appearing inside or in close proximity to another larger interface component, representing a status, property, or some other metadata.
- - Standard HTML - + + Standard HTML +
@@ -42,10 +37,10 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx'; Here is a quick overview of all the background colors available for this component. - + - Web Component - + Web Component + @@ -65,5 +60,5 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx'; Here is a quick overview of all the background colors available for this component. - - + + diff --git a/packages/documentation/src/stories/components/timepicker/timepicker.docs.mdx b/packages/documentation/src/stories/components/timepicker/timepicker.docs.mdx index 58a44ec347..2d6722bd98 100644 --- a/packages/documentation/src/stories/components/timepicker/timepicker.docs.mdx +++ b/packages/documentation/src/stories/components/timepicker/timepicker.docs.mdx @@ -5,7 +5,6 @@ import NgbComponentDemoLink from '@/shared/nb-bootstrap/ngb-component-demo-link. import NgbComponentBanner from '@/shared/nb-bootstrap/ngb-component-banner.mdx'; import NgbComponentImport from '@/shared/nb-bootstrap/ngb-component-import.mdx'; import NgbComponentInternationalization from '@/shared/nb-bootstrap/ngb-component-internationalization.mdx'; -import { PostTabHeader, PostTabPanel, PostTabs } from '@swisspost/design-system-components-react'; import SampleBasic from './timepicker-basic.sample.html?raw'; import SampleSizes from './timepicker-sizes.sample.html?raw'; import SampleValidation from './timepicker-validation.sample.html?raw'; @@ -55,23 +54,23 @@ import SampleValidation from './timepicker-validation.sample.html?raw'; ## Examples - - Basic example - + + Basic example + - + - Sizes - + Sizes + By default, the timepicker component only supports 3 different sizes: sm , md , and lg . To use one of these predefined sizes, simply set the `[size]` entry as defined in the [component api](https://ng-bootstrap.github.io/#/components/timepicker/api). - + - Validation - + Validation + - - + + diff --git a/packages/documentation/src/stories/components/typeahead/typeahead.docs.mdx b/packages/documentation/src/stories/components/typeahead/typeahead.docs.mdx index 298d4a6edf..67554f059e 100644 --- a/packages/documentation/src/stories/components/typeahead/typeahead.docs.mdx +++ b/packages/documentation/src/stories/components/typeahead/typeahead.docs.mdx @@ -1,5 +1,4 @@ import { Meta, Source } from '@storybook/blocks'; -import { PostTabHeader, PostTabPanel, PostTabs } from '@swisspost/design-system-components-react'; import NgbComponentDemoLink from '@/shared/nb-bootstrap/ngb-component-demo-link.mdx'; import NgbComponentBanner from '@/shared/nb-bootstrap/ngb-component-banner.mdx'; import NgbComponentImport from '@/shared/nb-bootstrap/ngb-component-import.mdx'; @@ -52,14 +51,14 @@ A typeahead example that gets values from a static
  • limits to 10 results
    • - - template.html - + + template.html + - + - component.ts - + component.ts + - - + + diff --git a/packages/documentation/src/stories/foundations/icons/icon.docs.mdx b/packages/documentation/src/stories/foundations/icons/icon.docs.mdx index 8521ac5ab9..30c7c96d9b 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.docs.mdx +++ b/packages/documentation/src/stories/foundations/icons/icon.docs.mdx @@ -1,6 +1,5 @@ import { Canvas, Controls, Meta, Source } from '@storybook/blocks'; import * as IconStories from './icon.stories'; -import { PostTabHeader, PostTabPanel, PostTabs } from '@swisspost/design-system-components-react'; import SampleMixin from './mixin.sample.scss?raw'; import { POST_ICONS_COUNT, UI_ICONS_COUNT, Search } from './search/search-icons.blocks'; import './icon.styles.scss'; @@ -19,9 +18,9 @@ import './icon.styles.scss'; The official Swiss Post Icon Library with {Math.floor(POST_ICONS_COUNT / 10) * 10}+ high-quality svg icons and the brand new UI Icon Set, exclusively designed and provided for the web with {Math.floor(UI_ICONS_COUNT / 10) * 10}+ icons and responsive level-of-detail.
    - - Installation - + + Installation + ## Installation ### Icon Component @@ -33,10 +32,10 @@ import './icon.styles.scss'; The SVG files for icons should be hosted within your project. For guidelines on how to set this up, please refer to the [icon package documentation](/?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs#usage). - +     - Usage as Web-Component - + Usage as Web-Component + ## Usage as Web-Component Our <post-icon> component renders SVGs, so it scales quickly and easily and can @@ -103,10 +102,10 @@ import './icon.styles.scss'; - + - Usage as CSS-Background - + Usage as CSS-Background + ## Usage in CSS To define an icon in your own CSS, you need the `@swisspost/design-system-styles` package and use our `post-icon` mixin. The icons are responsive and can have a different level-of-detail, depending on how big they are rendered on the page. @@ -144,10 +143,10 @@ import './icon.styles.scss'; code={SampleMixin} > - + - Find your Icon - + Find your Icon + - -     + + diff --git a/packages/documentation/src/stories/packages/components/components.docs.mdx b/packages/documentation/src/stories/packages/components/components.docs.mdx index 40a5e39c7d..56c9030e3a 100644 --- a/packages/documentation/src/stories/packages/components/components.docs.mdx +++ b/packages/documentation/src/stories/packages/components/components.docs.mdx @@ -1,6 +1,5 @@ import { Meta, Source } from '@storybook/blocks'; import * as PackageStories from './components.stories'; -import { PostTabs, PostTabHeader, PostTabPanel } from '@swisspost/design-system-components-react'; import SampleCdnBareComponent from './components-cdn-bare-component-all.sample.html?raw'; import SampleCdnLazyLoadedAll from './components-cdn-lazy-loaded-all.sample.html?raw'; import SampleCdnLazyLoadedSpecific from './components-cdn-lazy-loaded-specific.sample.html?raw'; @@ -58,18 +57,18 @@ import PackageDocs from '@/shared/packages-docs-layout.mdx'; - [jsDelivr](https://www.jsdelivr.com/): replace `{cdnURL}` with [https://cdn.jsdelivr.net/npm/@swisspost/design-system-components](https://cdn.jsdelivr.net/npm/@swisspost/design-system-components). - [unpkg](https://unpkg.com/): replace `{cdnURL}` with [https://unpkg.com/@swisspost/design-system-components](https://unpkg.com/@swisspost/design-system-components). - - Lazy-Loaded - + + Lazy-Loaded + Load all components at once Load specific components only - + - Bare component - + Bare component + - - + + diff --git a/packages/documentation/src/stories/packages/icons/package-icons.mdx b/packages/documentation/src/stories/packages/icons/package-icons.mdx index 40b348c50a..e136da1658 100644 --- a/packages/documentation/src/stories/packages/icons/package-icons.mdx +++ b/packages/documentation/src/stories/packages/icons/package-icons.mdx @@ -1,5 +1,4 @@ import { Meta, Source } from '@storybook/blocks'; -import { PostTabHeader, PostTabPanel, PostTabs } from '@swisspost/design-system-components-react'; import * as PackageIconsStories from './package-icons.stories'; import SampleNode16 from './package-icons-node-16.7.0.sample.json?raw'; import SampleNodeOlder from './package-icons-node-old.sample.json?raw'; @@ -44,18 +43,18 @@ import PackageDocs from '@/shared/packages-docs-layout.mdx'; Add a `postinstall` script to your `package.json`, to copy & paste the icons to a public folder within your web project.
    If you want to know more about pre & post scripts and how they are handled, please read the     npm documentation. - - NodeJS version 16.7.0 or newer - + + NodeJS version 16.7.0 or newer + - + - Older NodeJS versions - + Older NodeJS versions + - - + + ### Configure the icons base-path @@ -65,17 +64,17 @@ import PackageDocs from '@/shared/packages-docs-layout.mdx'; 1. Use the **meta-tag** solution to configure the `base-path` globally for all icons on the page. 2. Use the **base-attribute** solution, to configure the `base-path` on every `icon` component. This can also be used to overwrite the global `base-path` for a single icon. - - Meta-tag solution (recommended) - + + Meta-tag solution (recommended) + - + - Base-attribute solution - + Base-attribute solution + `} language="html"/> - - + + ## Usage with CDN diff --git a/packages/documentation/src/stories/packages/internet-header/internet-header.docs.mdx b/packages/documentation/src/stories/packages/internet-header/internet-header.docs.mdx index f0772df4dc..c1e64f3268 100644 --- a/packages/documentation/src/stories/packages/internet-header/internet-header.docs.mdx +++ b/packages/documentation/src/stories/packages/internet-header/internet-header.docs.mdx @@ -1,5 +1,4 @@ import { Meta, Source } from '@storybook/blocks'; -import { PostTabHeader, PostTabPanel, PostTabs } from '@swisspost/design-system-components-react'; import SampleFrameworks from './internet-header-frameworks.sample.html?raw'; import SampleLazyLoaded from './internet-header-lazy-loaded.sample.js?raw'; import SampleBareComponent from './internet-header-bare-component.sample.js?raw'; @@ -65,9 +64,9 @@ import PackageDocs from '@/shared/packages-docs-layout.mdx'; - 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 - + + 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. @@ -88,10 +87,10 @@ import PackageDocs from '@/shared/packages-docs-layout.mdx';
    -     + - Include from a CDN - + 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](https://en.wikipedia.org/wiki/Content_delivery_network).
    Make sure to replace `{version}` with the version you want to use or remove `@{version}` to use the latest version. @@ -110,8 +109,8 @@ import PackageDocs from '@/shared/packages-docs-layout.mdx';
    -     -     + + ### Usage with Angular @@ -122,16 +121,16 @@ import PackageDocs from '@/shared/packages-docs-layout.mdx'; 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 - + + Sass Import + - - HTML Import - + + HTML Import + `} dark={SourceDarkScheme} language="html" /> - - + + ## Migration from the old header