fix(documentation): tabs content in docs

swisspost · Feb 4, 2025 · 879585f · 879585f
1 parent 89e5552
commit 879585f
Show file tree

Hide file tree

Showing 18 changed files with 196 additions and 225 deletions.
diff --git a/.changeset/large-apples-clap.md 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
@@ -1,19 +1,18 @@
 import { Markdown } from '@storybook/blocks';
-import { PostTabs, PostTabHeader, PostTabPanel } from '@swisspost/design-system-components-react';
 import { CodeOrSourceMdx } from '@/utils/codeOrSourceMdx';
 
-<PostTabs className='sb-tabs-lg'>
-  <PostTabHeader panel="instructions">Instructions</PostTabHeader>
-  <PostTabPanel name="instructions">
+<post-tabs className='sb-tabs-lg'>
+  <post-tab-header panel="instructions">Instructions</post-tab-header>
+  <post-tab-panel name="instructions">
     {/* eslint-disable-next-line no-undef */}
     {props.children}
-  </PostTabPanel>
+  </post-tab-panel>
 
-  <PostTabHeader panel="changelog">Changelog</PostTabHeader>
-  <PostTabPanel name="changelog">
+  <post-tab-header panel="changelog">Changelog</post-tab-header>
+  <post-tab-panel name="changelog">
     <Markdown className="sb-markdown-no-h1" options={{ overrides: { code: CodeOrSourceMdx } }}>
       {/* eslint-disable-next-line no-undef */}
       {props.changelog}
     </Markdown>
-  </PostTabPanel>
-</PostTabs>
+  </post-tab-panel>
+</post-tabs>
diff --git 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
   </p>
 </PostBanner>
 
-<PostTabs>
-    <PostTabHeader panel="standardHTML">Standard HTML</PostTabHeader>
-    <PostTabPanel name="standardHTML">
+<post-tabs>
+    <post-tab-header panel="standardHTML">Standard HTML</post-tab-header>
+    <post-tab-panel name="standardHTML">
       <Canvas sourceState="shown" of={BannerStories.Default} />
 
       <div className="hide-col-default">
@@ -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.
 
       <Canvas of={BannerStories.ActionButtons} />
-    </PostTabPanel>
+    </post-tab-panel>
 
-    <PostTabHeader panel="webComponent">Web Component</PostTabHeader>
-    <PostTabPanel name="webComponent">
+    <post-tab-header panel="webComponent">Web Component</post-tab-header>
+    <post-tab-panel name="webComponent">
       <Canvas sourceState="shown" of={PostBannerStories.Default} />
 
       <Controls of={PostBannerStories.Default} />
@@ -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.
 
       <Source code={BannerDismissSample} language="typescript"/>
-    </PostTabPanel>
+    </post-tab-panel>
 
-</PostTabs>
+</post-tabs>
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
@@ -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
   </p>
 </PostBanner>
 
-<PostTabs>
-  <PostTabHeader panel="standardhtml">Standard HTML</PostTabHeader>
-  <PostTabPanel name="standardhtml">
+<post-tabs>
+  <post-tab-header panel="standardhtml">Standard HTML</post-tab-header>
+  <post-tab-panel name="standardhtml">
     <Canvas sourceState="shown" of={CardControlStandardHTMLStories.Default} />
     <div className="hide-col-default">
       <Controls of={CardControlStandardHTMLStories.Default} />
@@ -80,12 +75,12 @@ import SampleCardControlMethods from './web-component/card-control-methods.sampl
 
     <StylesPackageImport components={['choice-control-card']} />
 
-  </PostTabPanel>
+  </post-tab-panel>
 
-  <PostTabHeader panel="webcomponent">Webcomponent</PostTabHeader>
-  <PostTabPanel name="webcomponent">
-    <Canvas of={CardControlStories.Default} sourceState="shown"/>
-    <Controls of={CardControlStories.Default} />
+<post-tab-header panel="webcomponent">Webcomponent</post-tab-header>
+<post-tab-panel name="webcomponent">
+<Canvas of={CardControlStories.Default} sourceState="shown"/>
+<Controls of={CardControlStories.Default} />
 
     ## Installation
 
@@ -149,5 +144,5 @@ import SampleCardControlMethods from './web-component/card-control-methods.sampl
       language="typescript"
     />
 
-  </PostTabPanel>
-</PostTabs>
+  </post-tab-panel>
+</post-tabs>
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
@@ -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
 
 <Canvas of={ProductCardStories.Multipart} />
 
-<PostTabs>
-  <PostTabHeader panel="javascript">Vanilla JavaScript</PostTabHeader>
-  <PostTabPanel name="javascript">
+<post-tabs>
+  <post-tab-header panel="javascript">Vanilla JavaScript</post-tab-header>
+  <post-tab-panel name="javascript">
     <Source code={ProductCardSyncHeights} language="js"/>
-  </PostTabPanel>
+  </post-tab-panel>
 
-  <PostTabHeader panel="angular">Angular Implementation</PostTabHeader>
-  <PostTabPanel name="angular">
-    <Source code={ProductCardAngularSyncHeights} language="typescript"/>
-  </PostTabPanel>
-</PostTabs>
+<post-tab-header panel="angular">Angular Implementation</post-tab-header>
+<post-tab-panel name="angular">
+<Source code={ProductCardAngularSyncHeights} language="typescript"/>
+</post-tab-panel>
+</post-tabs>
diff --git 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
 
-<PostTabs>
-  <PostTabHeader panel="floating-label">Floating Label Input</PostTabHeader>
-  <PostTabPanel name="floating-label">
+<post-tabs>
+  <post-tab-header panel="floating-label">Floating Label Input</post-tab-header>
+  <post-tab-panel name="floating-label">
     <Source code={datepickerFloatingLabel} language="html"/>
-  </PostTabPanel>
+  </post-tab-panel>
 
 {' '}
 
-<PostTabHeader panel="navigation-arrows">Navigation Arrows Only</PostTabHeader>
-<PostTabPanel name="navigation-arrows">
+<post-tab-header panel="navigation-arrows">Navigation Arrows Only</post-tab-header>
+<post-tab-panel name="navigation-arrows">
+
   <Source code={datepickerNavigationArrows} language="html" />
-</PostTabPanel>
+</post-tab-panel>
 
-  <PostTabHeader panel="validation">Invalid Feedback</PostTabHeader>
-  <PostTabPanel name="validation">
-    <Source code={datepickerValidation} language="html"/>
-  </PostTabPanel>
-</PostTabs>
+<post-tab-header panel="validation">Invalid Feedback</post-tab-header>
+<post-tab-panel name="validation">
+<Source code={datepickerValidation} language="html"/>
+</post-tab-panel>
+</post-tabs>
diff --git 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
 
-<PostTabs>
-  <PostTabHeader panel="basicDropdown">Basic Dropdown</PostTabHeader>
-  <PostTabPanel name="basicDropdown">
+<post-tabs>
+  <post-tab-header panel="basicDropdown">Basic Dropdown</post-tab-header>
+  <post-tab-panel name="basicDropdown">
     <Source code={SampleBasic} language="html" />
-  </PostTabPanel>
-  <PostTabHeader panel="basicDropup">Basic Dropup</PostTabHeader>
-  <PostTabPanel name="basicDropup">
+  </post-tab-panel>
+  <post-tab-header panel="basicDropup">Basic Dropup</post-tab-header>
+  <post-tab-panel name="basicDropup">
     <Source code={SampleDropup} language="html" />
-  </PostTabPanel>
-  <PostTabHeader panel="scrollableDropup">Scrollable Dropup</PostTabHeader>
-  <PostTabPanel name="scrollableDropup">
+  </post-tab-panel>
+  <post-tab-header panel="scrollableDropup">Scrollable Dropup</post-tab-header>
+  <post-tab-panel name="scrollableDropup">
     <Source code={SampleDropupScroll} language="html" />
-  </PostTabPanel>
-  <PostTabHeader panel="dropdownIcon">Dropdown with Icons</PostTabHeader>
-  <PostTabPanel name="dropdownIcon">
+  </post-tab-panel>
+  <post-tab-header panel="dropdownIcon">Dropdown with Icons</post-tab-header>
+  <post-tab-panel name="dropdownIcon">
     <Source code={SampleIcons} language="html" />
-  </PostTabPanel>
-</PostTabs>
+  </post-tab-panel>
+</post-tabs>
diff --git a/...s/documentation/src/stories/components/intranet-header/intranet-header.docs.mdx b/...s/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 <a href="/?path=/docs/7068be42-1a20-4a34-9e79
 
 ## Examples
 
-<PostTabs>
-  <PostTabHeader panel="headerNavbar">Header with a navigation bar</PostTabHeader>
-  <PostTabPanel name="headerNavbar">
+<post-tabs>
+  <post-tab-header panel="headerNavbar">Header with a navigation bar</post-tab-header>
+  <post-tab-panel name="headerNavbar">
     <Source code={SampleNavigationBar} language="html" />
-  </PostTabPanel>
+  </post-tab-panel>
 
 {' '}
-<PostTabHeader panel="headerWithCustomUserMenu">Header with a custom user menu</PostTabHeader>
-<PostTabPanel name="headerWithCustomUserMenu">
+<post-tab-header panel="headerWithCustomUserMenu">Header with a custom user menu</post-tab-header>
+<post-tab-panel name="headerWithCustomUserMenu">
+
   <Source code={SampleSideUserMenuDropdown} language="html" />
-</PostTabPanel>
+</post-tab-panel>
 
 {' '}
-<PostTabHeader panel="headerSideNavigation">Header with a side navigation</PostTabHeader>
-<PostTabPanel name="headerSideNavigation">
+<post-tab-header panel="headerSideNavigation">Header with a side navigation</post-tab-header>
+<post-tab-panel name="headerSideNavigation">
+
   <Source code={SampleSideNavigation} language="html" />
-</PostTabPanel>
+</post-tab-panel>
 
-  <PostTabHeader panel="headerPostweb">"Postweb" intranet header</PostTabHeader>
-  <PostTabPanel name="headerPostweb">
-    <Source code={SamplePostweb} language="html" />
-  </PostTabPanel>
-</PostTabs>
+<post-tab-header panel="headerPostweb">"Postweb" intranet header</post-tab-header>
+<post-tab-panel name="headerPostweb">
+<Source code={SamplePostweb} language="html" />
+</post-tab-panel>
+</post-tabs>
 
 ### Props
 

diff --git 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
 
-<PostTabs>
-  <PostTabHeader panel="varying-content">Varying Content</PostTabHeader>
-  <PostTabPanel name="varying-content">
+<post-tabs>
+  <post-tab-header panel="varying-content">Varying Content</post-tab-header>
+  <post-tab-panel name="varying-content">
     <Source code={modalVaryingContent} language="typescript"/>
-  </PostTabPanel>
+  </post-tab-panel>
 
-<PostTabHeader panel="focused-content">Focused Content</PostTabHeader>
-<PostTabPanel name="focused-content">
+<post-tab-header panel="focused-content">Focused Content</post-tab-header>
+<post-tab-panel name="focused-content">
   <Source code={modalFocusedContent} language="typescript" />
-</PostTabPanel>
+</post-tab-panel>
 
-  <PostTabHeader panel="blocking">Mandatory Confirmation</PostTabHeader>
-  <PostTabPanel name="blocking">
+  <post-tab-header panel="blocking">Mandatory Confirmation</post-tab-header>
+  <post-tab-panel name="blocking">
     <Source code={modalBlocking} language="typescript"/>
-  </PostTabPanel>
-</PostTabs>
+  </post-tab-panel>
+</post-tabs>
diff --git a/...ation/src/stories/components/notification-overlay/notification-overlay.docs.mdx b/...ation/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
 
-<PostTabs>
-  <PostTabHeader panel="basicExampleHTML">template.html</PostTabHeader>
-  <PostTabPanel name="basicExampleHTML">
+<post-tabs>
+  <post-tab-header panel="basicExampleHTML">template.html</post-tab-header>
+  <post-tab-panel name="basicExampleHTML">
     <Source code={basicExampleHTML} language="html"/>
-  </PostTabPanel>
+  </post-tab-panel>
 
-  <PostTabHeader panel="basicExampleAngular">component.ts</PostTabHeader>
-  <PostTabPanel name="basicExampleAngular">
+  <post-tab-header panel="basicExampleAngular">component.ts</post-tab-header>
+  <post-tab-panel name="basicExampleAngular">
     <Source code={basicExampleAngular} language="ts"/>
-  </PostTabPanel>
-</PostTabs>
+  </post-tab-panel>
+</post-tabs>