feat(docs): add package type information to the components pages

.changeset/hungry-pumas-repair.md

@@ -0,0 +1,10 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added the information about package-type following the installation guide of the component,
+for all components on the documentation.
+The package type information is added as a tag component to the component pages.
+The tag variant gives the information, if the component is of package:
+- HTML (Default variant)
+- WebComponents (Yellow)

packages/documentation/src/shared/package-tag.tsx

@@ -0,0 +1,22 @@
+type PackageTagProps = {
+  meta: {
+    tags: string[];
+  };
+};
+
+export default function PackageTag({ meta }: PackageTagProps) {
+  let packageName = '';
+  const tagColor = '';
+
+  if (meta.tags.includes('package:Styles')) {
+    packageName = '@swisspost/design-system-styles';
+  } else if (meta.tags.includes('package:WebComponents')) {
+    packageName = '@swisspost/design-system-components';
+  }
+
+  return (
+    <div className={`tag tag-sm mb-24 tag-${tagColor}`}>
+      <div className="tag-text">{packageName}</div>
+    </div>
+  );
+}

packages/documentation/src/stories/components/accordion/accordion.docs.mdx

@@ -1,7 +1,8 @@
 import { Canvas, Controls, Meta, Source } from '@storybook/addon-docs/blocks';
-import * as accordionStories from './accordion.stories';
+import meta, * as accordionStories from './accordion.stories';
 import * as accordionItemStories from './accordion-item.stories';
 import SampleCustomTrigger from './accordion-custom-trigger.sample?raw';
+import PackageTag from '@/shared/package-tag';
 
 <Meta of={accordionStories} />
 
@@ -11,6 +12,7 @@ import SampleCustomTrigger from './accordion-custom-trigger.sample?raw';
   <link-design of={JSON.stringify(accordionStories)}></link-design>
 </div>
 
+<PackageTag meta={meta}/>
 
 <p className="lead">Toggle the visibility of a set of related content in your project.</p>
 

packages/documentation/src/stories/components/app-store-badge/app-store-badge.mdx

@@ -1,5 +1,6 @@
 import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import * as AppStoreBadgeStories from './app-store-badge.stories';
+import meta, * as AppStoreBadgeStories from './app-store-badge.stories';
+import PackageTag from '@/shared/package-tag';
 
 <Meta of={AppStoreBadgeStories} />
 
@@ -9,6 +10,8 @@ import * as AppStoreBadgeStories from './app-store-badge.stories';
   <link-design of={JSON.stringify(AppStoreBadgeStories)}></link-design>
 </div>
 
+<PackageTag meta={meta}/>
+
 <div className="lead">
   The app store badge leads the user to the respective product page in the Apple Store or Google Play, so the user can download the app.
 </div>

packages/documentation/src/stories/components/avatar/avatar.docs.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Controls, Meta, Source } from '@storybook/addon-docs/blocks';
-import * as AvatarPictureStories from './avatar.stories';
+import meta, * as AvatarPictureStories from './avatar.stories';
 import AvatarSample from './avatar.sample.scss?raw';
+import PackageTag from '@/shared/package-tag';
 
 <Meta of={AvatarPictureStories} />
 
@@ -10,6 +11,8 @@ import AvatarSample from './avatar.sample.scss?raw';
   <link-design of={JSON.stringify(AvatarPictureStories)}></link-design>
 </div>
 
+<PackageTag meta={meta}/>
+
 <div className="lead">
   Display a user's profile picture or their initials if the picture is unavailable.
 </div>

packages/documentation/src/stories/components/back-to-top/back-to-top.docs.mdx

@@ -1,6 +1,7 @@
 import { Meta, Source } from '@storybook/addon-docs/blocks';
-import * as BackToTopStories from './back-to-top.stories.ts';
+import meta, * as BackToTopStories from './back-to-top.stories.ts';
 import BackToTop from './back-to-top.sample.html?raw';
+import PackageTag from '@/shared/package-tag';
 
 <Meta of={BackToTopStories} />
 
@@ -10,6 +11,8 @@ import BackToTop from './back-to-top.sample.html?raw';
   <link-design of={JSON.stringify(BackToTopStories)}></link-design>
 </div>
 
+<PackageTag meta={meta}/>
+
 <div className="lead">
   The Back to top component enables the user to scroll back to the top of the page with only a
   click. This is especially helpful for pages which require a lot of scrolling to reach the end.

packages/documentation/src/stories/components/badge/badge.docs.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import * as badgeStories from './badge.stories';
+import meta, * as badgeStories from './badge.stories';
 import StylesPackageImport from '@/shared/styles-package-import.mdx';
+import PackageTag from '@/shared/package-tag';
 
 <Meta of={badgeStories} />
 
@@ -10,6 +11,8 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
   <link-design of={JSON.stringify(badgeStories)}></link-design>
 </div>
 
+<PackageTag meta={meta}/>
+
 <div className="lead">Highlight a numerical characteristic or mark an item with a status.</div>
 
 <Canvas sourceState="shown" of={badgeStories.Default} />

packages/documentation/src/stories/components/blockquote/blockquote.docs.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import * as BlockquoteStories from './blockquote.stories.ts';
+import meta, * as BlockquoteStories from './blockquote.stories.ts';
 import StylesPackageImport from '@/shared/styles-package-import.mdx';
+import PackageTag from '@/shared/package-tag';
 
 <Meta of={BlockquoteStories} />
 
@@ -10,6 +11,8 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
   <link-design of={JSON.stringify(BlockquoteStories)}></link-design>
 </div>
 
+<PackageTag meta={meta}/>
+
 <div className="lead">
   For quoting blocks of content from another source within your document. Wrap `
   <blockquote

packages/documentation/src/stories/components/breadcrumb/breadcrumbs.mdx

@@ -1,5 +1,6 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
-import * as BreadcrumbsStories from './breadcrumbs.stories';
+import meta, * as BreadcrumbsStories from './breadcrumbs.stories';
+import PackageTag from '@/shared/package-tag';
 
 <Meta of={BreadcrumbsStories} />
 
@@ -9,6 +10,8 @@ import * as BreadcrumbsStories from './breadcrumbs.stories';
   <link-design of={JSON.stringify(BreadcrumbsStories)}></link-design>
 </div>
 
+<PackageTag meta={meta}/>
+
 <div className="lead">
     The breadcrumbs is a secondary navigation pattern that helps users understand the hierarchy among levels and navigate back through them.
 </div>

packages/documentation/src/stories/components/button-close/button-close.docs.mdx

@@ -1,5 +1,6 @@
 import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import * as CloseButtonStories from './button-close.stories';
+import meta, * as CloseButtonStories from './button-close.stories';
+import PackageTag from '@/shared/package-tag';
 
 <Meta of={CloseButtonStories} />
 
@@ -9,6 +10,8 @@ import * as CloseButtonStories from './button-close.stories';
   <link-design of={JSON.stringify(CloseButtonStories)}></link-design>
 </div>
 
+<PackageTag meta={meta}/>
+
 <div className="lead">
   The close button is a web component. It is a slightly adapted version of the icon button, intended
   for a specific use case.

packages/documentation/src/stories/components/button-group/button-group.docs.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import * as ButtonGroupStories from './button-group.stories';
+import meta, * as ButtonGroupStories from './button-group.stories';
 import StylesPackageImport from '@/shared/styles-package-import.mdx';
+import PackageTag from '@/shared/package-tag';
 
 <Meta of={ButtonGroupStories} />
 
@@ -10,6 +11,8 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
   <link-design of={JSON.stringify(ButtonGroupStories)}></link-design>
 </div>
 
+<PackageTag meta={meta}/>
+
 <div className="lead">Group a series of buttons together on a single line.</div>
 
 <Canvas sourceState="shown" of={ButtonGroupStories.Default} />

packages/documentation/src/stories/components/button/button.docs.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import * as ButtonStories from './button.stories';
+import meta, * as ButtonStories from './button.stories';
 import StylesPackageImport from '@/shared/styles-package-import.mdx';
+import PackageTag from '@/shared/package-tag';
 
 <Meta of={ButtonStories} />
 
@@ -10,6 +11,8 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
   <link-design of={JSON.stringify(ButtonStories)}></link-design>
 </div>
 
+<PackageTag meta={meta}/>
+
 <div className="lead">
   Use our custom button styles for actions in forms, dialogs, and more with support for multiple
   sizes, states, and more.

packages/documentation/src/stories/components/card-product/card-product.docs.mdx

@@ -1,18 +1,20 @@
 import { Canvas, Controls, Meta, Source } from '@storybook/addon-docs/blocks';
-import * as ProductCardStories from './card-product.stories';
+import meta, * as ProductCardStories from './card-product.stories';
 import StylesPackageImport from '@/shared/styles-package-import.mdx';
 import ProductCardSyncHeights from './card-product.sample.js?raw';
 import ProductCardAngularSyncHeights from './card-product.sample.ts?raw';
+import PackageTag from '@/shared/package-tag';
 
 <Meta of={ProductCardStories} />
 
 <div className="docs-title">
   # Card for Products
 
 <link-design of={JSON.stringify(ProductCardStories)}></link-design>
-
 </div>
 
+<PackageTag meta={meta}/>
+
 <div className="lead">
   Highlight essential product details and provide an entry point to access in-depth information.
 </div>

packages/documentation/src/stories/components/card/card.docs.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import * as CardStories from './card.stories';
+import meta, * as CardStories from './card.stories';
 import StylesPackageImport from '@/shared/styles-package-import.mdx';
+import PackageTag from '@/shared/package-tag';
 
 <Meta of={CardStories} />
 
@@ -10,6 +11,8 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
   <link-design of={JSON.stringify(CardStories)}></link-design>
 </div>
 
+<PackageTag meta={meta}/>
+
 <div className="lead">
   Cards provide a flexible and extensible content container with multiple variants and options.
 </div>

packages/documentation/src/stories/components/checkbox/checkbox.docs.mdx

@@ -1,6 +1,8 @@
 import { Canvas, Controls, Meta, Source } from '@storybook/addon-docs/blocks';
-import * as checkboxStories from './checkbox.stories';
+import meta, * as checkboxStories from './checkbox.stories';
 import StylesPackageImport from '@/shared/styles-package-import.mdx';
+import PackageTag from '@/shared/package-tag';
+
 
 <Meta of={checkboxStories} />
 
@@ -10,6 +12,8 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
   <link-design of={JSON.stringify(checkboxStories)}></link-design>
 </div>
 
+<PackageTag meta={meta}/>
+
 <div className="lead">
   Create consistent cross-browser and cross-device checkboxes with our completely custom checks
   component.

packages/documentation/src/stories/components/chip/chip.docs.mdx

@@ -1,11 +1,14 @@
 import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import * as ChipStories from './chip.stories';
+import meta, * as ChipStories from './chip.stories';
 import StylesPackageImport from '@/shared/styles-package-import.mdx';
+import PackageTag from '@/shared/package-tag';
 
 <Meta of={ChipStories} />
 
 # Chip
 
+<PackageTag meta={meta}/>
+
 <div className="lead">
   Chips contain small labels which represent single values or a collection of values. These discrete
   pieces of information can be inputs, status, properties, categories or any other pieces of meta

packages/documentation/src/stories/components/collapsible/collapsible.docs.mdx

@@ -1,11 +1,14 @@
 import { Canvas, Controls, Meta, Source } from '@storybook/addon-docs/blocks';
-import * as CollapsibleStories from './collapsible.stories';
+import meta, * as CollapsibleStories from './collapsible.stories';
 import SampleCustomTrigger from './collapsible-custom-trigger.sample?raw';
+import PackageTag from '@/shared/package-tag';
 
 <Meta of={CollapsibleStories} />
 
 # Collapsible
 
+<PackageTag meta={meta}/>
+
 <p className="lead">Toggle the visibility of content across your project.</p>
 
 The `<post-collapsible>` component is used to show and hide content.

packages/documentation/src/stories/components/dialog/dialog.docs.mdx

@@ -1,12 +1,15 @@
 import { Canvas, Controls, Meta, Source } from '@storybook/addon-docs/blocks';
-import * as DialogStories from './dialog.stories';
+import meta, * as DialogStories from './dialog.stories';
 import JSFormData from './samples/js-form-data?raw';
 import StylesPackageImport from '@/shared/styles-package-import.mdx';
+import PackageTag from '@/shared/package-tag';
 
 <Meta of={DialogStories} />
 
 # Dialog
 
+<PackageTag meta={meta}/>
+
 <p className="lead">Communicate crucial information and request user action.</p>
 For more information on the dialog element, please refer to the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog).
 

packages/documentation/src/stories/components/dialog/dialog.stories.ts

@@ -4,6 +4,7 @@ import { html, nothing } from 'lit-html';
 const meta: Meta = {
   id: '562eac2b-6dc1-4007-ba8e-4e981cef0cbc',
   title: 'Components/Dialog',
+  tags: ['package:HTML'],
   parameters: {
     design: {
       type: 'figma',

packages/documentation/src/stories/components/footer/footer.docs.mdx

@@ -1,5 +1,6 @@
 import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import * as FooterStories from './footer.stories';
+import meta, * as FooterStories from './footer.stories';
+import PackageTag from '@/shared/package-tag';
 
 <Meta of={FooterStories}/>
 
@@ -9,11 +10,13 @@ import * as FooterStories from './footer.stories';
   <link-design of={JSON.stringify(FooterStories)}></link-design>
 </div>
 
+<PackageTag meta={meta}/>
+
 <p className="lead">The composable footer component for your Swiss Post page.</p>
 
 Internally the `<post-footer>` component has a fix structure, but it offers a number of slots, which can be used to add your very own content, so it ultimatly fulfills everyones requirements.
 
 
 <Canvas of={FooterStories.Default} />
 
-<Controls of={FooterStories.Default} />
+<Controls of={FooterStories.Default} />

packages/documentation/src/stories/components/form-footer/form-footer.docs.mdx

@@ -1,5 +1,6 @@
 import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import * as FormFooterStories from './form-footer.stories';
+import meta, * as FormFooterStories from './form-footer.stories';
+import PackageTag from '@/shared/package-tag';
 
 <Meta of={FormFooterStories} />
 
@@ -9,6 +10,8 @@ import * as FormFooterStories from './form-footer.stories';
   <link-design of={JSON.stringify(FormFooterStories)}></link-design>
 </div>
 
+<PackageTag meta={meta}/>
+
 <div className="lead">
   The form footer is placed at the end/bottom of a form or a form step, in case the form is splitted with a stepper. It provides workflow-related actions to the form or form step.
 </div>

packages/documentation/src/stories/components/forms/hint/hint.docs.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import * as HintStories from './hint.stories';
+import meta, * as HintStories from './hint.stories';
 import StylesPackageImport from '@/shared/styles-package-import.mdx';
+import PackageTag from '@/shared/package-tag';
 
 <Meta of={HintStories} />
 
@@ -10,6 +11,8 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
   <link-design of={JSON.stringify(HintStories)}></link-design>
 </div>
 
+<PackageTag meta={meta}/>
+
 <div className="lead">
   Form hint or assistive text is used under a form element to give guidance to users on how to best
   fill in fields.