Merge branch 'main' into 1526-doc-internet-header-import

.changeset/calm-swans-begin.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Deprecated sizes "regular" and "medium" for text inputs, textareas and select boxes. Future major versions of the Design System will only support the sizes "small" and "large". This change will make it easier to decide what variant to use where: small for internal applications, large for customer facing external applications.

.changeset/three-shoes-brake.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': major
+---
+
+Updated storybook to version 7 and switched display mode to show documentation pages only (playgrounds are hidden)

.github/CODEOWNERS

@@ -6,3 +6,5 @@
 # https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners
 
 * @gfellerph @oliverschuerch @alizedebray @imagoiq
+
+/packages/documentation @b1aserlu @davidritter-dotcom

packages/documentation/CHANGELOG.md

@@ -1,6 +1,10 @@
-# @swisspost/design-system-documentation-v7
+# @swisspost/design-system-documentation
 
-## 1.1.2
+## 1.12.0
+
+### Minor Changes
+
+- Added a gray notification variant for cookie banners. (by [@alizedebray](https://github.com/alizedebray) with [#1350](https://github.com/swisspost/design-system/pull/1350))
 
 ### Patch Changes
 
@@ -11,18 +15,14 @@
   - @swisspost/design-system-components@1.3.10
   - @swisspost/design-system-components-react@1.0.16
 
-## 1.1.1
+## 1.11.3
 
 ### Patch Changes
 
 - Updated dependencies:
   - @swisspost/internet-header@1.8.3
 
-## 1.1.0
-
-### Minor Changes
-
-- Created a storybook v7 package, set up with vite and lit. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#1613](https://github.com/swisspost/design-system/pull/1613))
+## 1.11.2
 
 ### Patch Changes
 
@@ -33,6 +33,17 @@
   - @swisspost/design-system-components@1.3.9
   - @swisspost/design-system-components-react@1.0.15
 
+## 1.11.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-icons@1.0.8
+  - @swisspost/design-system-styles@6.2.5
+  - @swisspost/design-system-components@1.3.8
+  - @swisspost/internet-header@1.8.1
+  - @swisspost/design-system-components-react@1.0.14
+
 ## 1.11.0
 
 ### Minor Changes

packages/documentation/cypress/snapshots/components/choice-card.snapshot.ts

@@ -0,0 +1,6 @@
+describe('Choice card', () => {
+  it('default', () => {
+    cy.visit('./iframe.html?id=snapshots--choice-card');
+    cy.percySnapshot('Choice cards', { widths: [1440] });
+  });
+});

packages/documentation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-documentation",
-  "version": "1.1.2",
+  "version": "1.12.0",
   "description": "Swiss Post Design System Documentation.",
   "author": "Swiss Post <[email protected]>",
   "license": "Apache-2.0",

packages/documentation/src/stories/components/blockquote/blockquote.snapshot.stories.ts

@@ -13,12 +13,11 @@ type Story = StoryObj;
 export const Blockquote: Story = {
   render: (_args: Args, context: StoryContext) => {
     return html`
-      <div style="display: 'flex'; flexWrap: 'wrap'; gap: '1rem'; alignItems: 'start';">
+      <div class="d-flex flex-wrap align-items-start gap-regular">
         ${['bg-white', 'bg-dark'].map(
           bg => html`
             <div
-              class=${bg}
-              style="padding: '1rem'; display: 'flex'; gap: '1rem'; flexWrap: 'wrap'; alignItems: 'start;"
+              class="${bg} d-flex flex-wrap align-items-start gap-regular p-regular"
             >
               ${bombArgs({
                 text: [

packages/documentation/src/stories/components/button/button.snapshot.stories.ts

@@ -17,8 +17,7 @@ export const Button: Story = {
         ${['bg-white', 'bg-dark'].map(
           bg => html`
             <div
-              class="${bg}"
-              style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: start; padding: 1rem;"
+              class="${bg} d-flex flex-wrap align-items-start gap-regular p-regular"
             >
               ${bombArgs({
                 variant: context.argTypes.variant.options,

packages/documentation/src/stories/components/choice-card/checkbox-card.stories.ts

@@ -1,5 +1,5 @@
 import { BADGE } from '../../../../.storybook/constants';
-import { choiceCardMeta, choiceCardDefault, choiceCardGroup } from './choice-control';
+import { choiceCardMeta, choiceCardDefault, choiceCardGroup } from './choice-card';
 
 export default {
   ...choiceCardMeta,

packages/documentation/src/stories/components/choice-card/choice-control.snapshot.stories.ts → packages/documentation/src/stories/components/choice-card/choice-card.snapshot.stories.ts

@@ -1,5 +1,5 @@
 import { bombArgs } from '../../../utils/bombArgs';
-import { choiceCardMeta, choiceCardDefault } from './choice-control';
+import { choiceCardMeta, choiceCardDefault } from './choice-card';
 import { StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 

packages/documentation/src/stories/components/choice-card/radiobutton-card.stories.ts

@@ -1,5 +1,5 @@
 import { BADGE } from '../../../../.storybook/constants';
-import { choiceCardMeta, choiceCardDefault, choiceCardGroup } from './choice-control';
+import { choiceCardMeta, choiceCardDefault, choiceCardGroup } from './choice-card';
 
 export default {
   ...choiceCardMeta,

packages/documentation/src/stories/components/heading/heading.snapshot.stories.ts

@@ -17,8 +17,7 @@ export const Heading: Story = {
         ${['bg-white', 'bg-dark'].map(
           bg => html`
             <div
-              class="${bg} mt-3"
-              style="padding: 1rem; display: flex; flex-direction: column; gap: 1rem;"
+              class="${bg} d-flex flex-column gap-regular p-regular mt-regular"
             >
               ${bombArgs({
                 title: [