Merge branch 'main' into popup-component

package.json

@@ -14,6 +14,7 @@
   "scripts": {
     "bootstrap": "pnpm install && pnpm -r build",
     "start": "pnpm docs:start",
+    "start:clean": "pnpm bootstrap && pnpm start",
     "test": "pnpm -r test",
     "unit": "pnpm -r unit",
     "e2e": "start-server-and-test docs:headless 9001 'pnpm -r --stream e2e'",

packages/components-react/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @swisspost/design-system-components-react
 
+## 1.0.23
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@1.6.3
+
 ## 1.0.22
 
 ### Patch Changes

packages/components-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-react",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "license": "Apache-2.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -19,7 +19,7 @@
     "tsc": "tsc -p ."
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:1.6.2"
+    "@swisspost/design-system-components": "workspace:1.6.3"
   },
   "devDependencies": {
     "@types/node": "18.19.2",

packages/components/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @swisspost/design-system-components
 
+## 1.6.3
+
+### Patch Changes
+
+- Defined @stencil/core and @stencil/store as a devDependency to avoid compatibilities issues. (by [@imagoiq](https://github.com/imagoiq) with [#2313](https://github.com/swisspost/design-system/pull/2313))
+- Updated dependencies:
+  - @swisspost/design-system-styles@6.5.0
+
 ## 1.6.2
 
 ### Patch Changes

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "A collection of web components built with Stencil JS for the Swiss Post Design System.",
   "license": "Apache-2.0",
   "main": "loader/index.cjs.js",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@floating-ui/dom": "1.5.3",
     "@oddbird/popover-polyfill": "0.2.3",
-    "@swisspost/design-system-styles": "workspace:6.4.4",
+    "@swisspost/design-system-styles": "workspace:6.5.0",
     "ally.js": "1.4.1",
     "long-press-event": "2.4.6"
   },

packages/demo/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @swisspost/design-system-demo
 
+## 7.1.1
+
+### Patch Changes
+
+- Updated ng-bootstrap component-based accordion example in favor of the directive-based implementation. (by [@gfellerph](https://github.com/gfellerph) with [#2368](https://github.com/swisspost/design-system/pull/2368))
+
+- Deprecated Bootstrap accordions in favor of the post-accordion web component. (by [@alizedebray](https://github.com/alizedebray) with [#2310](https://github.com/swisspost/design-system/pull/2310))
+
+- Update the commands to run the Design System migrations. (by [@alizedebray](https://github.com/alizedebray) with [#2270](https://github.com/swisspost/design-system/pull/2270))
+- Updated dependencies:
+  - @swisspost/design-system-styles@6.5.0
+  - @swisspost/design-system-intranet-header@5.0.5
+
 ## 7.1.0
 
 ### Minor Changes

packages/demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-demo",
-  "version": "7.1.0",
+  "version": "7.1.1",
   "description": "Pattern documentation, code snippets and implementation guidelines for the Design System Styles.",
   "author": "Swiss Post <[email protected]>",
   "license": "Apache-2.0",
@@ -25,8 +25,8 @@
     "@ng-bootstrap/ng-bootstrap": "15.1.2",
     "@popperjs/core": "2.11.8",
     "@swimlane/ngx-datatable": "20.1.0",
-    "@swisspost/design-system-intranet-header": "workspace:5.0.4",
-    "@swisspost/design-system-styles": "workspace:6.4.4",
+    "@swisspost/design-system-intranet-header": "workspace:5.0.5",
+    "@swisspost/design-system-styles": "workspace:6.5.0",
     "bootstrap": "5.3.2",
     "core-js": "3.33.3",
     "highlight.js": "11.9.0",

packages/documentation/.storybook/preview.ts

@@ -19,6 +19,7 @@ const preview: Preview = {
   parameters: {
     options: {
       storySort: {
+        method: 'alphabetical',
         order: [
           'Home',
           'Getting Started',
@@ -33,13 +34,25 @@ const preview: Preview = {
             'Accessibility',
           ],
           'Components',
-          'Internet Header',
-          ['Getting Started', 'Migration Guide', 'Header', 'Breadcrumbs', 'Footer'],
-          'Intranet Header',
-          ['Getting Started'],
-          'Icons',
-          ['Getting Started', 'Search for Icons', 'Icon Component'],
-          'Templates',
+          [
+            'Accordion',
+            'Alert',
+            'Badge',
+            'Blockquote',
+            'Button',
+            'Button Group',
+            'Card',
+            'Collapsible',
+            'Forms',
+            'Heading',
+            'Internet Header',
+            ['Getting Started'],
+            'Intranet Header',
+            ['Getting Started'],
+            'Icons',
+            ['Getting Started'],
+          ],
+          'Patterns',
           'Utilities',
           'Misc',
           ['Migration Guide', 'Changelog', 'Versions'],

packages/documentation/.storybook/styles/layout.scss

@@ -2,7 +2,7 @@
 
 .docs-header {
   margin-top: -4rem;
-  background-image: url('/images/header.png');
+  background-image: url('/assets/images/header.png');
   background-repeat: no-repeat;
   background-position: center left 60vw;
   background-size: auto 100%;

packages/documentation/.storybook/styles/themes.ts

@@ -34,7 +34,7 @@ export const light = create({
 
   brandTitle: 'Swiss Post Design System',
   brandUrl: 'https://design-system.post.ch',
-  brandImage: '/images/logo-swisspost.svg',
+  brandImage: '/assets/images/logo-swisspost.svg',
   brandTarget: '_self',
 });
 
@@ -72,7 +72,7 @@ export const dark = create({
 
   brandTitle: 'Swiss Post Design System',
   brandUrl: 'https://design-system.post.ch',
-  brandImage: '/images/logo-swisspost.svg',
+  brandImage: '/assets/images/logo-swisspost.svg',
   brandTarget: '_self',
 });
 

packages/documentation/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @swisspost/design-system-documentation
 
+## 2.6.0
+
+### Minor Changes
+
+- Added a Since v1 label on all the components that got introduced in Version 1 (by [@davidritter-dotcom](https://github.com/davidritter-dotcom) with [#2290](https://github.com/swisspost/design-system/pull/2290))
+
+### Patch Changes
+
+- Removed badge size class at wrapper level. It's only used inside the label. (by [@imagoiq](https://github.com/imagoiq) with [#2294](https://github.com/swisspost/design-system/pull/2294))
+
+- Added small variant to floating label select. (by [@gfellerph](https://github.com/gfellerph) with [#2368](https://github.com/swisspost/design-system/pull/2368))
+
+- Updated select styles to match design. (by [@imagoiq](https://github.com/imagoiq) with [#2312](https://github.com/swisspost/design-system/pull/2312))
+- Updated dependencies:
+  - @swisspost/design-system-icons@1.0.16
+  - @swisspost/design-system-styles@6.5.0
+  - @swisspost/internet-header@1.13.1
+  - @swisspost/design-system-components@1.6.3
+  - @swisspost/design-system-components-react@1.0.23
+
 ## 2.5.0
 
 ### Minor Changes

packages/documentation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-documentation",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "Swiss Post Design System Documentation.",
   "author": "Swiss Post <[email protected]>",
   "license": "Apache-2.0",
@@ -25,11 +25,11 @@
     "snapshots": "percy exec -- cypress run --config-file ./cypress.snapshot.config.js --record --key 0995e768-43ec-42bd-a127-ff944a2ad8c9"
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:1.6.2",
-    "@swisspost/design-system-components-react": "workspace:1.0.22",
-    "@swisspost/design-system-icons": "workspace:1.0.15",
-    "@swisspost/design-system-styles": "workspace:6.4.4",
-    "@swisspost/internet-header": "workspace:1.13.0",
+    "@swisspost/design-system-components": "workspace:1.6.3",
+    "@swisspost/design-system-components-react": "workspace:1.0.23",
+    "@swisspost/design-system-icons": "workspace:1.0.16",
+    "@swisspost/design-system-styles": "workspace:6.5.0",
+    "@swisspost/internet-header": "workspace:1.13.1",
     "bootstrap": "5.3.2"
   },
   "devDependencies": {

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

@@ -1,7 +1,7 @@
 import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
 import LinkTo from '@storybook/addon-links/react';
 import * as checkboxStories from './checkbox.stories';
-import StylesPackageImport from '../../../shared/styles-package-import.mdx';
+import StylesPackageImport from '../../../../shared/styles-package-import.mdx';
 
 <Meta of={checkboxStories} />
 

packages/documentation/src/stories/components/checkbox/checkbox.snapshot.stories.ts → packages/documentation/src/stories/components/forms/checkbox/checkbox.snapshot.stories.ts

@@ -1,7 +1,7 @@
 import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import meta, { Inline } from './checkbox.stories';
 import { html } from 'lit';
-import { bombArgs } from '../../../utils';
+import { bombArgs } from '../../../../utils';
 
 export default {
   ...meta,

packages/documentation/src/stories/components/checkbox/checkbox.stories.ts → packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts

@@ -2,11 +2,11 @@ import { useArgs } from '@storybook/preview-api';
 import type { Args, Meta, StoryContext, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { BADGE } from '../../../../.storybook/constants';
-import { mapClasses } from '../../../utils';
+import { BADGE } from '../../../../../.storybook/constants';
+import { mapClasses } from '../../../../utils';
 
 const meta: Meta = {
-  title: 'Components/Checkbox',
+  title: 'Components/Forms/Checkbox',
   render: renderCheckbox,
   parameters: {
     badges: [BADGE.NEEDS_REVISION],

packages/documentation/src/stories/components/choice-card/checkbox-card.docs.mdx → packages/documentation/src/stories/components/forms/choice-card/checkbox-card.docs.mdx

@@ -1,6 +1,6 @@
 import { Meta, Canvas, Controls, Source } from '@storybook/blocks';
 import * as CheckboxCardStories from './checkbox-card.stories';
-import StylesPackageImport from '../../../shared/styles-package-import.mdx';
+import StylesPackageImport from '../../../../shared/styles-package-import.mdx';
 import firefoxFallbackSnippet from './firefox-fallback.ts?raw';
 
 <Meta of={CheckboxCardStories} />

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

@@ -1,9 +1,9 @@
-import { BADGE } from '../../../../.storybook/constants';
+import { BADGE } from '../../../../../.storybook/constants';
 import { choiceCardMeta, choiceCardDefault, choiceCardGroup } from './choice-card';
 
 export default {
   ...choiceCardMeta,
-  title: 'Components/Checkbox Card',
+  title: 'Components/Forms/Checkbox Card',
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
   },

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

@@ -1,4 +1,4 @@
-import { bombArgs } from '../../../utils';
+import { bombArgs } from '../../../../utils';
 import { choiceCardMeta, choiceCardDefault } from './choice-card';
 import { StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
@@ -31,7 +31,7 @@ export const ChoiceCard: StoryObj = {
               ${bombedArgs.map(
                 args =>
                   html`
-                    <div class="col-sm-6">${choiceCardDefault({ ...args, icon: 1000 })}</div>
+                    <div class="col-sm-6">${choiceCardDefault(args)}</div>
                   `,
               )}
             </div>

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

@@ -1,7 +1,7 @@
 import type { Args, Meta } from '@storybook/web-components';
 import { html } from 'lit/static-html.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { BADGE } from '../../../../.storybook/constants';
+import { BADGE } from '../../../../../.storybook/constants';
 import { nothing } from 'lit';
 import { useArgs } from '@storybook/preview-api';
 

packages/documentation/src/stories/components/choice-card/radiobutton-card.docs.mdx → packages/documentation/src/stories/components/forms/choice-card/radiobutton-card.docs.mdx

@@ -1,6 +1,6 @@
 import { Meta, Canvas, Controls, Source } from '@storybook/blocks';
 import * as RadiobuttonCardStories from './radiobutton-card.stories';
-import StylesPackageImport from '../../../shared/styles-package-import.mdx';
+import StylesPackageImport from '../../../../shared/styles-package-import.mdx';
 import firefoxFallbackSnippet from './firefox-fallback.ts?raw';
 
 <Meta of={RadiobuttonCardStories} />