feat(documentation): Add link to figma (#2875)

For reviews: - Check especially cards - Design not found: - Card Button (in Cards folder) - Carousel - Collapsible (but I don't think there are any relevant) - Internet-header - Intranet-header - Modal (but I don't think there are any relevant) - Subnavigation - Timepicker
swisspost · Apr 10, 2024 · 3987cb0 · 3987cb0
1 parent 9787d76
commit 3987cb0
Show file tree

Hide file tree

Showing 102 changed files with 502 additions and 112 deletions.
diff --git a/.changeset/ninety-moons-cover.md b/.changeset/ninety-moons-cover.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added link to figma for all components.
diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss
@@ -74,11 +74,20 @@
     }
 
     // Style buttons related to the current page next to the tile
-    .docs-title-nav {
+    .docs-title,
+    .docs-title nav {
       display:flex;
+      flex-wrap: wrap;
       align-items: center;
       gap: post.$size-mini;
     }
+    .docs-title {
+      margin-bottom: post.$size-mini;
+
+      :first-child {
+        margin-right:auto;
+      }
+    }
   }
 
   pre {

diff --git a/packages/documentation/src/shared/link-design/link-design.component.ts b/packages/documentation/src/shared/link-design/link-design.component.ts
@@ -4,7 +4,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { getTitleFromPath } from '../../utils';
 import { ModuleExport } from '@storybook/types';
 
-interface DesignParameter {
+export interface DesignParameter {
   type: 'figma';
   url: string;
 }

diff --git a/packages/documentation/src/stories/components/accordion/accordion.docs.mdx b/packages/documentation/src/stories/components/accordion/accordion.docs.mdx
@@ -5,7 +5,13 @@ import SampleCustomTrigger from './accordion-custom-trigger.sample?raw';
 
 <Meta of={accordionStories} />
 
-# Accordion
+<div className="docs-title">
+  # Accordion
+
+  <nav>
+    <link-design of={JSON.stringify(accordionStories)}></link-design>
+  </nav>
+</div>
 
 <p className="lead">Toggle the visibility of a set of related content in your project.</p>
 

diff --git a/packages/documentation/src/stories/components/accordion/accordion.stories.ts b/packages/documentation/src/stories/components/accordion/accordion.stories.ts
@@ -10,6 +10,10 @@ const meta: MetaComponent<HTMLPostAccordionElement & HTMLPostCollapsibleElementE
   component: 'post-accordion',
   parameters: {
     badges: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=17964-20698&mode=design&t=3lniLiZhl7q9Gqgn-4',
+    },
   },
   args: {
     multiple: false,

diff --git a/packages/documentation/src/stories/components/alert/alert.docs.mdx b/packages/documentation/src/stories/components/alert/alert.docs.mdx
@@ -7,12 +7,12 @@ import AlertDismissSample from './web-component/alert-dismiss.sample?raw';
 
 <Meta of={AlertStories} />
 
-<div className="d-flex align-items-center justify-content-between">
+<div className="docs-title">
   # Alert
 
-  <div className="docs-title-nav">
+  <nav>
     <link-design of={JSON.stringify(AlertStories)}></link-design>
-  </div>
+  </nav>
 </div>
 
 <div className="lead">

diff --git a/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts b/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
@@ -5,7 +5,6 @@ import { html, nothing } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { getAlertClasses } from './getAlertClasses';
 import { MetaComponent } from '../../../../../types';
-import { getComponentFigmaLink } from '../../../../utils';
 
 const meta: MetaComponent = {
   id: '105e67d8-31e9-4d0b-87ff-685aba31fd4c',
@@ -20,7 +19,7 @@ const meta: MetaComponent = {
     },
     design: {
       type: 'figma',
-      url: getComponentFigmaLink('17001-2244'),
+      url: 'https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=17001-2244&mode=design&t=3lniLiZhl7q9Gqgn-4',
     },
   },
   args: {

diff --git a/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts b/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
@@ -1,6 +1,6 @@
 import { StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
-import { getComponentFigmaLink, spreadArgs } from '../../../../utils';
+import { spreadArgs } from '../../../../utils';
 import { MetaComponent } from '../../../../../types';
 
 const meta: MetaComponent<HTMLPostAlertElement> = {
@@ -14,7 +14,7 @@ const meta: MetaComponent<HTMLPostAlertElement> = {
     badges: [],
     design: {
       type: 'figma',
-      url: getComponentFigmaLink('17001-2244'),
+      url: 'https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=17001-2244&mode=design&t=3lniLiZhl7q9Gqgn-4',
     },
   },
   args: {

diff --git a/packages/documentation/src/stories/components/badge/badge.docs.mdx b/packages/documentation/src/stories/components/badge/badge.docs.mdx
@@ -5,7 +5,13 @@ import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 <Meta of={badgeStories} />
 
-# Badge
+<div className="docs-title">
+  # Badge
+
+  <nav>
+    <link-design of={JSON.stringify(badgeStories)}></link-design>
+  </nav>
+</div>
 
 <div className="lead">
   Highlight a numerical characteristic or mark an item with a status.

diff --git a/packages/documentation/src/stories/components/badge/badge.stories.ts b/packages/documentation/src/stories/components/badge/badge.stories.ts
@@ -10,6 +10,13 @@ const meta: MetaComponent = {
   tags: ['package:HTML'],
   render: renderBadge,
   decorators: [adaptiveBackground],
+  parameters: {
+    badges: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=18172-73431&mode=design&t=3lniLiZhl7q9Gqgn-4',
+    },
+  },
   args: {
     showNumber: true,
     number: 1,

diff --git a/packages/documentation/src/stories/components/blockquote/blockquote.docs.mdx b/packages/documentation/src/stories/components/blockquote/blockquote.docs.mdx
@@ -4,7 +4,13 @@ import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 <Meta of={BlockquoteStories} />
 
-# Blockquote
+<div className="docs-title">
+  # Blockquote
+
+  <nav>
+    <link-design of={JSON.stringify(BlockquoteStories)}></link-design>
+  </nav>
+</div>
 
 <div className="lead">
   For quoting blocks of content from another source within your document. Wrap `

diff --git a/packages/documentation/src/stories/components/blockquote/blockquote.stories.ts b/packages/documentation/src/stories/components/blockquote/blockquote.stories.ts
@@ -9,6 +9,10 @@ const meta: MetaComponent = {
   render: renderBlockquote,
   parameters: {
     badges: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=20767-5527&mode=design&t=3lniLiZhl7q9Gqgn-4',
+    },
   },
   args: {
     text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.',

diff --git a/packages/documentation/src/stories/components/button-group/button-group.docs.mdx b/packages/documentation/src/stories/components/button-group/button-group.docs.mdx
@@ -4,7 +4,13 @@ import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 <Meta of={ButtonGroupStories} />
 
-# Button Group
+<div className="docs-title">
+  # Button Group
+
+  <nav>
+    <link-design of={JSON.stringify(ButtonGroupStories)}></link-design>
+  </nav>
+</div>
 
 <div className="lead">
   Group a series of buttons together on a single line.

diff --git a/packages/documentation/src/stories/components/button-group/button-group.stories.ts b/packages/documentation/src/stories/components/button-group/button-group.stories.ts
@@ -10,6 +10,10 @@ const meta: MetaComponent = {
   render: renderButtonGroup,
   parameters: {
     badges: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=22233-42010&mode=design&t=3lniLiZhl7q9Gqgn-4',
+    },
   },
   args: {
     size: 'btn-md',

diff --git a/packages/documentation/src/stories/components/button/button.docs.mdx b/packages/documentation/src/stories/components/button/button.docs.mdx
@@ -4,12 +4,12 @@ import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 <Meta of={ButtonStories} />
 
-<div className="d-flex align-items-center justify-content-between">
+<div className="docs-title">
   # Button
 
-  <div className="docs-title-nav">
+  <nav>
     <link-design of={JSON.stringify(ButtonStories)}></link-design>
-  </div>
+  </nav>
 </div>
 
 <div className="lead">

diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts
@@ -3,7 +3,6 @@ import { html, unsafeStatic } from 'lit/static-html.js';
 import { spread } from '@open-wc/lit-helpers';
 import { repeat } from 'lit/directives/repeat.js';
 import { MetaComponent } from '../../../../types';
-import { getComponentFigmaLink } from '../../../utils';
 
 const meta: MetaComponent = {
   id: 'eb78afcb-ce92-4990-94b6-6536d5ec6af4',
@@ -13,7 +12,7 @@ const meta: MetaComponent = {
     badges: [],
     design: {
       type: 'figma',
-      url: getComponentFigmaLink('16826-33449'),
+      url: 'https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=16826-33449&mode=design&t=3lniLiZhl7q9Gqgn-4',
     },
   },
   args: {

diff --git a/...ges/documentation/src/stories/components/cards/card-button/card-button.docs.mdx b/...ges/documentation/src/stories/components/cards/card-button/card-button.docs.mdx
@@ -1,11 +1,16 @@
-import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 import StylesPackageImport from '../../../../shared/styles-package-import.mdx';
 import * as CardButtonStories from './card-button.stories';
 
 <Meta of={CardButtonStories} />
 
+<div className="docs-title">
+  # Card Button
 
-# Card Button
+  <nav>
+    <link-design of={JSON.stringify(CardButtonStories)}></link-design>
+  </nav>
+</div>
 
 <p className="lead">A Card that can be used as a clickable link to other content</p>
 

diff --git a/packages/documentation/src/stories/components/cards/card-button/card-button.stories.ts b/packages/documentation/src/stories/components/cards/card-button/card-button.stories.ts
@@ -10,6 +10,10 @@ const meta: MetaComponent = {
   tags: ['package:HTML'],
   parameters: {
     badges: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=2452-66025&mode=design&t=jADNra0puVcBoQ9V-0',
+    },
   },
   args: {
     focus: 'Focus',

diff --git a/packages/documentation/src/stories/components/cards/card/card.docs.mdx b/packages/documentation/src/stories/components/cards/card/card.docs.mdx
@@ -4,7 +4,13 @@ import StylesPackageImport from '../../../../shared/styles-package-import.mdx';
 
 <Meta of={CardStories} />
 
-# Card
+<div className="docs-title">
+  # Card
+
+  <nav>
+    <link-design of={JSON.stringify(CardStories)}></link-design>
+  </nav>
+</div>
 
 <div className="lead">
   Cards provide a flexible and extensible content container with multiple variants and options.

diff --git a/packages/documentation/src/stories/components/cards/card/card.stories.ts b/packages/documentation/src/stories/components/cards/card/card.stories.ts
@@ -14,6 +14,10 @@ const meta: MetaComponent = {
     controls: {
       exclude: ['Custom Header', 'Custom Body', 'Custom Footer'],
     },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=21462-3684&mode=design&t=3lniLiZhl7q9Gqgn-4',
+    },
   },
   args: {
     showImage: true,

diff --git a/...s/documentation/src/stories/components/cards/product-card/product-card.docs.mdx b/...s/documentation/src/stories/components/cards/product-card/product-card.docs.mdx
@@ -7,8 +7,13 @@ import ProductCardAngularSyncHeights from './product-card.sample.ts?raw';
 
 <Meta of={ProductCardStories} />
 
-# Product Card
+<div className="docs-title">
+  # Product Card
 
+  <nav>
+    <link-design of={JSON.stringify(ProductCardStories)}></link-design>
+  </nav>
+</div>
 
 <div className="lead">
   Highlight essential product details and provide an entry point to access in-depth information.

diff --git a/packages/documentation/src/stories/components/cards/product-card/product-card.stories.ts b/packages/documentation/src/stories/components/cards/product-card/product-card.stories.ts
@@ -10,6 +10,10 @@ const meta: MetaComponent = {
   decorators: [paddedContainer, clickBlocker],
   parameters: {
     badges: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=21512-19101&mode=design&t=3lniLiZhl7q9Gqgn-4',
+    },
   },
   args: {
     title: 'Produkta',

diff --git a/packages/documentation/src/stories/components/carousel/carousel.docs.mdx b/packages/documentation/src/stories/components/carousel/carousel.docs.mdx
@@ -11,10 +11,13 @@ import SampleLight from './carousel-light.sample.html?raw';
 
 <Meta of={carouselStories} />
 
-<div className="d-flex align-items-center justify-content-between">
+<div className="docs-title">
   # Carousel
 
-  <NgbComponentDemoLink component="carousel" />
+  <nav>
+    <link-design of={JSON.stringify(carouselStories)}></link-design>
+    <NgbComponentDemoLink component="carousel" />
+  </nav>
 </div>
 
 <p className="lead">A slideshow component for cycling through elements—images or slides of text—like a carousel.</p>

diff --git a/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts b/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts
@@ -12,10 +12,6 @@ const meta: MetaComponent<HTMLPostCollapsibleElement> = {
   decorators: [externalControls],
   parameters: {
     badges: [],
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=42%3A358&mode=design&t=OK8meBHjpJvBhwZI-1',
-    },
     controls: {
       exclude: ['innerHTML'],
     },

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,5 @@
 import { Meta, Source } from '@storybook/blocks';
-import { PostTabs, PostTabHeader, PostTabPanel } from '@swisspost/design-system-components-react';
+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 NgbComponentAlert from '../../../shared/nb-bootstrap/ngb-component-alert.mdx';
@@ -16,10 +16,13 @@ import datepickerValidation from './datepicker-validation.sample.html?raw';
 
 <Meta of={datepickerStories} />
 
-<div className="d-flex align-items-center justify-content-between">
+<div className="docs-title">
   # Datepicker
 
-  <NgbComponentDemoLink component="datepicker" />
+  <nav>
+    <link-design of={JSON.stringify(datepickerStories)}></link-design>
+    <NgbComponentDemoLink component="datepicker" />
+  </nav>
 </div>
 
 <p className="lead">Display dates on a calendar view, allowing selection of a date or date range.</p>

diff --git a/packages/documentation/src/stories/components/datepicker/datepicker.stories.ts b/packages/documentation/src/stories/components/datepicker/datepicker.stories.ts
@@ -8,6 +8,10 @@ const meta: MetaComponent = {
   tags: ['package:Angular'],
   parameters: {
     badges: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=20098-6912&mode=design&t=3lniLiZhl7q9Gqgn-4',
+    },
   },
 };