Merge branch 'main' into 2894-fix-tag-stories

swisspost · Apr 10, 2024 · 44dfc10 · 44dfc10
2 parents 1156ba9 + bde5675
commit 44dfc10
Show file tree

Hide file tree

Showing 136 changed files with 1,494 additions and 349 deletions.
diff --git a/.changeset/dry-wasps-film.md b/.changeset/dry-wasps-film.md
@@ -3,4 +3,7 @@
 '@swisspost/design-system-documentation': patch
 ---
 
-Restricted the badge to showing counts only and updated the styles accordingly.
+Restricted badges to showcase counts exclusively and adjusted the styles accordingly.
+
+Use tags to display states, properties, or other metadata.
+Opt for chips when presenting dismissible or selectable information.
diff --git a/.changeset/fifty-rabbits-flow.md b/.changeset/fifty-rabbits-flow.md
@@ -8,7 +8,7 @@
 '@swisspost/design-system-intranet-header': major
 ---
 
-Syncing versions of the following packages:
+Synchronized the versions of the following packages:
 
 - @swisspost/design-system-styles
 - @swisspost/design-system-components

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/.changeset/quiet-mugs-design.md b/.changeset/quiet-mugs-design.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-migrations': minor
+---
+
+Added migrations to turn badges into chips.
diff --git a/.changeset/selfish-lions-tap.md b/.changeset/selfish-lions-tap.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': major
+---
+
+Renamed badge into "chip" and improved related examples.
diff --git a/.changeset/shiny-zoos-accept.md b/.changeset/shiny-zoos-accept.md
@@ -5,6 +5,7 @@
 '@swisspost/design-system-demo': patch
 ---
 
+Updated Sass color variables:
 - Removed variables `$success-green`, `$error-red`, `$warning-orange`, `$success-text`, `$error-text`, `$danger` as well as the Sass map `$contextual-colors`.
   Instead use the variables `$success`, `$error`, `$warning` and the Sass map `$signal-colors`.
 - Updated the Sass map `$signal-colors` keys and added a new Sass map `$signal-background-colors`.

diff --git a/.changeset/sweet-clouds-scream.md b/.changeset/sweet-clouds-scream.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Renamed the badge into "chip", added a disable state and updated its styles.
diff --git a/.github/workflows/build-demo.yaml b/.github/workflows/build-demo.yaml
@@ -14,6 +14,7 @@
 name: Build Demo App
 on:
   pull_request:
+    types: [ opened, synchronize, edited, reopened ]
     paths:
       - 'packages/intranet-header-workspace/**'
       - 'packages/demo/**'

diff --git a/.github/workflows/build-documentation.yaml b/.github/workflows/build-documentation.yaml
@@ -13,6 +13,7 @@
 name: Build Documentation
 on:
   pull_request:
+    types: [opened, synchronize, edited, reopened]
     paths:
       - 'packages/**'
 

diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -26,6 +26,7 @@
     "@popperjs/core": "2.11.8",
     "@swimlane/ngx-datatable": "20.1.0",
     "@swisspost/design-system-intranet-header": "workspace:5.0.11",
+    "@swisspost/design-system-migrations": "workspace:1.0.2",
     "@swisspost/design-system-styles": "workspace:6.6.4",
     "bootstrap": "5.3.2",
     "core-js": "3.36.1",

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/cypress/snapshots/components/badge.snapshot.ts b/packages/documentation/cypress/snapshots/components/badge.snapshot.ts
diff --git a/packages/documentation/cypress/snapshots/components/chip.snapshot.ts b/packages/documentation/cypress/snapshots/components/chip.snapshot.ts
@@ -0,0 +1,7 @@
+describe('Chip', () => {
+  it('default', () => {
+    cy.visit('/iframe.html?id=snapshots--chip');
+    cy.get('.chip', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Chips', { widths: [1440] });
+  });
+});
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
@@ -3,13 +3,21 @@ import { html, nothing } from 'lit';
 import { MetaComponent } from '../../../../types';
 import backgroundColors from '../../../shared/background-colors.module.scss';
 import { coloredBackground } from '../../../shared/decorators/dark-background';
+import chipMeta from '../chip/chip.stories';
 
 const meta: MetaComponent = {
   id: 'bec68e8b-445e-4760-8bd7-1b9970206d8d',
   title: 'Components/Badge',
   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,
@@ -113,11 +121,8 @@ export const LargeNumber: Story = {
 };
 
 export const Position: Story = {
-  render: args => html`
-    <div class="chip">
-      Filter
-      <div class="badge bg-gray">1</div>
-    </div>
+  render: (_args, context) => html`
+    ${chipMeta.render?.({ ...chipMeta.args, badge: true }, context)}
 
     <div class="position-relative d-inline">
       <post-icon name="2026" class="fs-large"></post-icon>
@@ -126,7 +131,7 @@ export const Position: Story = {
   `,
   decorators: [
     (story: StoryFn, { args, context }: StoryContext) => html`
-      <div class="d-flex gap-large">${story(args, context)}</div>
+      <div class="d-flex gap-large align-items-center">${story(args, context)}</div>
     `,
   ],
 };
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,