diff --git a/.changeset/2024-11-10-update-icons.md b/.changeset/2024-11-10-update-icons.md new file mode 100644 index 0000000000..58d8ed8161 --- /dev/null +++ b/.changeset/2024-11-10-update-icons.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-icons': minor +--- + +Added icon number 2632. + diff --git a/.changeset/new-goats-impress.md b/.changeset/new-goats-impress.md new file mode 100644 index 0000000000..d1bd841e3c --- /dev/null +++ b/.changeset/new-goats-impress.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-documentation': minor +'@swisspost/design-system-styles': minor +--- + +Updated vertical-align utility diff --git a/.changeset/pre.json b/.changeset/pre.json index 5169ad951f..a948833b59 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -24,6 +24,7 @@ "changesets": [ "2024-10-17-update-icons", "2024-10-27-update-icons", + "2024-11-10-update-icons", "beige-jobs-do", "big-frogs-admire", "breezy-cups-add", @@ -32,17 +33,25 @@ "cold-baboons-appear", "cold-panthers-vanish", "cuddly-bears-check", + "cuddly-gifts-film", + "dirty-mayflies-taste", "eight-turkeys-matter", "eleven-keys-work", "empty-islands-kneel", "fair-actors-scream", + "fast-bats-poke", "fast-fans-wash", + "fifty-dodos-wait", + "fifty-students-call", "five-hornets-sin", "friendly-insects-breathe", "funny-shrimps-care", "giant-games-swim", + "gold-chairs-grin", + "gold-chefs-rule", "gorgeous-flowers-flow", "great-humans-talk", + "grumpy-parrots-wonder", "heavy-rats-explode", "kind-buses-trade", "kind-papayas-provide", @@ -51,26 +60,33 @@ "loud-dingos-remember", "lovely-deers-itch", "lovely-mirrors-travel", + "neat-suits-provide", "nervous-rocks-shop", + "new-goats-impress", "ninety-nails-float", "pink-weeks-relate", "plenty-apricots-raise", "popular-games-rush", "proud-actors-knock", + "proud-cheetahs-act", "proud-moons-impress", "quick-eagles-watch", "quiet-apes-rhyme", + "rare-dryers-count", "red-cobras-cry", "red-lies-lick", + "rich-timers-listen", "selfish-bats-run", "selfish-ways-know", "shaggy-experts-give", "sharp-baboons-smile", "sharp-crews-watch", "shiny-ears-care", + "shy-walls-exercise", "silver-coins-invent", "six-spiders-smoke", "sixty-items-promise", + "slimy-rockets-pull", "strange-bottles-impress", "tame-terms-push", "three-lies-do", diff --git a/.changeset/quick-buses-give.md b/.changeset/quick-buses-give.md new file mode 100644 index 0000000000..d3212d7400 --- /dev/null +++ b/.changeset/quick-buses-give.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-documentation': minor +'@swisspost/design-system-components': minor +--- + +Added new Menu Button components (post-menu-button, post-menu-trigger, and post-menu-item) for creating accessible dropdown menus. diff --git a/.changeset/shy-walls-exercise.md b/.changeset/shy-walls-exercise.md new file mode 100644 index 0000000000..ba712642c4 --- /dev/null +++ b/.changeset/shy-walls-exercise.md @@ -0,0 +1,7 @@ +--- +'@swisspost/design-system-documentation': minor +'@swisspost/design-system-components': minor +'@swisspost/design-system-styles': minor +--- + +Added close button web component. diff --git a/.github/ISSUE_TEMPLATE/component-v2.yml b/.github/ISSUE_TEMPLATE/component-v2.yml index dfefd7c352..ace2c22cfb 100644 --- a/.github/ISSUE_TEMPLATE/component-v2.yml +++ b/.github/ISSUE_TEMPLATE/component-v2.yml @@ -28,14 +28,31 @@ body: options: - label: Tokens for this component are ready - type: textarea - id: tasks + id: tasksdesign attributes: - label: Tasks + label: Tasks design + description: Default tasks for the design team. Can be edited later according to needs. + value: | + ```[tasklist] + ### 🎨 Design + - [ ] Design component according to WIKIT + - [ ] Update dependencies + - [ ] Add & test compo in layout examples + - [ ] Designer review + - [ ] Documentation: Overview and usage (about, compo overview, compo props, usage, examples) + - [ ] Documentation: Technical documentation (anatomy, accessibility) + - [ ] Documentation: Review (content correctness, understandability, gaps) + ``` + - type: textarea + id: tasksdev + attributes: + label: Tasks development description: Default tasks for the dev team. Can be edited later according to needs. value: | ```[tasklist] - ### 💻 Tasks + ### 💻 Development - [ ] Review Design (All states present? Possible to implement?) + - [ ] Tokenization - [ ] HTML/CSS implementation - [ ] Web component implementation - [ ] Documentation in Storybook diff --git a/packages/components-angular/CHANGELOG.md b/packages/components-angular/CHANGELOG.md index 11eca2d195..14bd6d34d2 100644 --- a/packages/components-angular/CHANGELOG.md +++ b/packages/components-angular/CHANGELOG.md @@ -1,5 +1,13 @@ # @swisspost/design-system-components-angular-workspace +## 1.1.10-next.4 + +### Patch Changes + +- Updated dependencies: + - @swisspost/design-system-styles@9.0.0-next.4 + - @swisspost/design-system-components@9.0.0-next.4 + ## 1.1.10-next.3 ### Patch Changes diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json index 06c7e9eb61..04519844ac 100644 --- a/packages/components-angular/package.json +++ b/packages/components-angular/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-components-angular-workspace", - "version": "1.1.10-next.3", + "version": "1.1.10-next.4", "scripts": { "start": "ng serve --port 9210", "build": "ng build components", @@ -18,8 +18,8 @@ "@angular/platform-browser": "18.2.10", "@angular/platform-browser-dynamic": "18.2.10", "@angular/router": "18.2.10", - "@swisspost/design-system-components": "workspace:9.0.0-next.3", - "@swisspost/design-system-styles": "workspace:9.0.0-next.3", + "@swisspost/design-system-components": "workspace:9.0.0-next.4", + "@swisspost/design-system-styles": "workspace:9.0.0-next.4", "rxjs": "7.8.1", "tslib": "2.6.3", "zone.js": "0.14.8" diff --git a/packages/components-angular/projects/components/CHANGELOG.md b/packages/components-angular/projects/components/CHANGELOG.md index c897490ffa..8a2305d0ef 100644 --- a/packages/components-angular/projects/components/CHANGELOG.md +++ b/packages/components-angular/projects/components/CHANGELOG.md @@ -1,5 +1,12 @@ # @swisspost/design-system-components-angular +## 9.0.0-next.4 + +### Patch Changes + +- Updated dependencies: + - @swisspost/design-system-components@9.0.0-next.4 + ## 9.0.0-next.3 ### Minor Changes diff --git a/packages/components-angular/projects/components/package.json b/packages/components-angular/projects/components/package.json index e82f5da166..040548d639 100644 --- a/packages/components-angular/projects/components/package.json +++ b/packages/components-angular/projects/components/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-components-angular", - "version": "9.0.0-next.3", + "version": "9.0.0-next.4", "description": "Swiss Post Design System - Angular Wrapper Components", "author": "Swiss Post ", "license": "Apache-2.0", @@ -19,7 +19,7 @@ }, "dependencies": { "tslib": "2.6.3", - "@swisspost/design-system-components": "workspace:9.0.0-next.3" + "@swisspost/design-system-components": "workspace:9.0.0-next.4" }, "peerDependencies": { "@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0", diff --git a/packages/components-react/CHANGELOG.md b/packages/components-react/CHANGELOG.md index 2345d27a43..e1503d21ca 100644 --- a/packages/components-react/CHANGELOG.md +++ b/packages/components-react/CHANGELOG.md @@ -1,5 +1,12 @@ # @swisspost/design-system-components-react +## 9.0.0-next.4 + +### Patch Changes + +- Updated dependencies: + - @swisspost/design-system-components@9.0.0-next.4 + ## 9.0.0-next.3 ### Patch Changes diff --git a/packages/components-react/package.json b/packages/components-react/package.json index 8238f83559..76bb2f2ae5 100644 --- a/packages/components-react/package.json +++ b/packages/components-react/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-components-react", - "version": "9.0.0-next.3", + "version": "9.0.0-next.4", "description": "Design System React Components for easy integration with the React ecosystem", "author": "Swiss Post ", "license": "Apache-2.0", @@ -29,7 +29,7 @@ "lint": "eslint src/**/*.ts" }, "dependencies": { - "@swisspost/design-system-components": "workspace:9.0.0-next.3" + "@swisspost/design-system-components": "workspace:9.0.0-next.4" }, "devDependencies": { "@types/node": "20.14.14", diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 4eb3171fc0..2f4eb8c9fb 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,23 @@ # @swisspost/design-system-components +## 9.0.0-next.4 + +### Major Changes + +- Removed the `.breadcrumb-item` class, which previously handled styling for breadcrumb items. Introduced a new `post-breadcrumb-item` that should be used in place of the `.breadcrumb-item` class. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3659](https://github.com/swisspost/design-system/pull/3659)) + +### Minor Changes + +- Created the `post-list` and `post-list-item` components. (by [@myrta2302](https://github.com/myrta2302) with [#3812](https://github.com/swisspost/design-system/pull/3812)) + +- Added close button web component. (by [@leagrdv](https://github.com/leagrdv) with [#3880](https://github.com/swisspost/design-system/pull/3880)) + +### Patch Changes + +- Fixed an issue with the post-collapsible throwing an invalid selector error. (by [@alizedebray](https://github.com/alizedebray) with [#3726](https://github.com/swisspost/design-system/pull/3726)) +- Updated dependencies: + - @swisspost/design-system-styles@9.0.0-next.4 + ## 9.0.0-next.3 ### Major Changes diff --git a/packages/components/cypress/e2e/closebutton.cy.ts b/packages/components/cypress/e2e/closebutton.cy.ts new file mode 100644 index 0000000000..275adfb50a --- /dev/null +++ b/packages/components/cypress/e2e/closebutton.cy.ts @@ -0,0 +1,22 @@ +const CLOSE_BTN_ID = 'de313349-0c0b-4baf-adc6-cb8c2e36fc1a'; + +describe('Close button', () => { + describe('default', () => { + beforeEach(() => { + cy.getComponent('post-closebutton', CLOSE_BTN_ID); + }); + + it('should render with a close button and a11y label', () => { + cy.get('@closebutton').should('exist'); + cy.get('@closebutton').find('.btn-icon-close').should('exist'); + cy.get('@closebutton').find('span.visually-hidden').should('exist'); + }); + }); +}); + +describe('Accessibility', () => { + it('Has no detectable a11y violations on load for all variants', () => { + cy.getSnapshots('post-closebutton'); + cy.checkA11y('#root-inner'); + }); +}); diff --git a/packages/components/package.json b/packages/components/package.json index f2591ed525..221a556679 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-components", - "version": "9.0.0-next.3", + "version": "9.0.0-next.4", "description": "A collection of web components built with Stencil JS for the Swiss Post Design System.", "license": "Apache-2.0", "main": "dist/index.cjs.js", @@ -40,7 +40,7 @@ "dependencies": { "@floating-ui/dom": "1.6.8", "@oddbird/popover-polyfill": "0.3.7", - "@swisspost/design-system-styles": "workspace:9.0.0-next.3", + "@swisspost/design-system-styles": "workspace:9.0.0-next.4", "ally.js": "1.4.1", "long-press-event": "2.5.0" }, diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts index 5fb886f66a..5a64d0884d 100644 --- a/packages/components/src/components.d.ts +++ b/packages/components/src/components.d.ts @@ -148,6 +148,8 @@ export namespace Components { */ "value": string; } + interface PostClosebutton { + } interface PostCollapsible { /** * If `true`, the element is collapsed otherwise it is displayed. @@ -241,6 +243,33 @@ export namespace Components { */ "url": string | URL; } + interface PostMenu { + /** + * Hides the popover menu and restores focus to the previously focused element. + */ + "hide": () => Promise; + /** + * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. + */ + "placement"?: Placement; + /** + * Displays the popover menu, focusing the first menu item. + * @param target - The HTML element relative to which the popover menu should be displayed. + */ + "show": (target: HTMLElement) => Promise; + /** + * Toggles the menu visibility based on its current state. + */ + "toggle": (target: HTMLElement) => Promise; + } + interface PostMenuItem { + } + interface PostMenuTrigger { + /** + * ID of the menu element that this trigger is linked to. Used to open and close the specified menu. + */ + "for": string; + } interface PostPopover { /** * Show a little indicator arrow @@ -400,6 +429,10 @@ export interface PostLanguageOptionCustomEvent extends CustomEvent { detail: T; target: HTMLPostLanguageOptionElement; } +export interface PostMenuCustomEvent extends CustomEvent { + detail: T; + target: HTMLPostMenuElement; +} export interface PostPopovercontainerCustomEvent extends CustomEvent { detail: T; target: HTMLPostPopovercontainerElement; @@ -475,6 +508,12 @@ declare global { prototype: HTMLPostCardControlElement; new (): HTMLPostCardControlElement; }; + interface HTMLPostClosebuttonElement extends Components.PostClosebutton, HTMLStencilElement { + } + var HTMLPostClosebuttonElement: { + prototype: HTMLPostClosebuttonElement; + new (): HTMLPostClosebuttonElement; + }; interface HTMLPostCollapsibleElementEventMap { "postToggle": boolean; } @@ -542,6 +581,35 @@ declare global { prototype: HTMLPostLogoElement; new (): HTMLPostLogoElement; }; + interface HTMLPostMenuElementEventMap { + "toggleMenu": boolean; + } + interface HTMLPostMenuElement extends Components.PostMenu, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLPostMenuElement, ev: PostMenuCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLPostMenuElement, ev: PostMenuCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLPostMenuElement: { + prototype: HTMLPostMenuElement; + new (): HTMLPostMenuElement; + }; + interface HTMLPostMenuItemElement extends Components.PostMenuItem, HTMLStencilElement { + } + var HTMLPostMenuItemElement: { + prototype: HTMLPostMenuItemElement; + new (): HTMLPostMenuItemElement; + }; + interface HTMLPostMenuTriggerElement extends Components.PostMenuTrigger, HTMLStencilElement { + } + var HTMLPostMenuTriggerElement: { + prototype: HTMLPostMenuTriggerElement; + new (): HTMLPostMenuTriggerElement; + }; interface HTMLPostPopoverElement extends Components.PostPopover, HTMLStencilElement { } var HTMLPostPopoverElement: { @@ -631,6 +699,7 @@ declare global { "post-avatar": HTMLPostAvatarElement; "post-breadcrumb-item": HTMLPostBreadcrumbItemElement; "post-card-control": HTMLPostCardControlElement; + "post-closebutton": HTMLPostClosebuttonElement; "post-collapsible": HTMLPostCollapsibleElement; "post-collapsible-trigger": HTMLPostCollapsibleTriggerElement; "post-icon": HTMLPostIconElement; @@ -638,6 +707,9 @@ declare global { "post-list": HTMLPostListElement; "post-list-item": HTMLPostListItemElement; "post-logo": HTMLPostLogoElement; + "post-menu": HTMLPostMenuElement; + "post-menu-item": HTMLPostMenuItemElement; + "post-menu-trigger": HTMLPostMenuTriggerElement; "post-popover": HTMLPostPopoverElement; "post-popovercontainer": HTMLPostPopovercontainerElement; "post-rating": HTMLPostRatingElement; @@ -769,6 +841,8 @@ declare namespace LocalJSX { */ "value"?: string; } + interface PostClosebutton { + } interface PostCollapsible { /** * If `true`, the element is collapsed otherwise it is displayed. @@ -858,6 +932,24 @@ declare namespace LocalJSX { */ "url"?: string | URL; } + interface PostMenu { + /** + * Emits when the menu is shown or hidden. The event payload is a boolean: `true` when the menu was opened, `false` when it was closed. + */ + "onToggleMenu"?: (event: PostMenuCustomEvent) => void; + /** + * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. + */ + "placement"?: Placement; + } + interface PostMenuItem { + } + interface PostMenuTrigger { + /** + * ID of the menu element that this trigger is linked to. Used to open and close the specified menu. + */ + "for": string; + } interface PostPopover { /** * Show a little indicator arrow @@ -973,6 +1065,7 @@ declare namespace LocalJSX { "post-avatar": PostAvatar; "post-breadcrumb-item": PostBreadcrumbItem; "post-card-control": PostCardControl; + "post-closebutton": PostClosebutton; "post-collapsible": PostCollapsible; "post-collapsible-trigger": PostCollapsibleTrigger; "post-icon": PostIcon; @@ -980,6 +1073,9 @@ declare namespace LocalJSX { "post-list": PostList; "post-list-item": PostListItem; "post-logo": PostLogo; + "post-menu": PostMenu; + "post-menu-item": PostMenuItem; + "post-menu-trigger": PostMenuTrigger; "post-popover": PostPopover; "post-popovercontainer": PostPopovercontainer; "post-rating": PostRating; @@ -1003,6 +1099,7 @@ declare module "@stencil/core" { * @class PostCardControl - representing a stencil component */ "post-card-control": LocalJSX.PostCardControl & JSXBase.HTMLAttributes; + "post-closebutton": LocalJSX.PostClosebutton & JSXBase.HTMLAttributes; "post-collapsible": LocalJSX.PostCollapsible & JSXBase.HTMLAttributes; "post-collapsible-trigger": LocalJSX.PostCollapsibleTrigger & JSXBase.HTMLAttributes; /** @@ -1013,6 +1110,9 @@ declare module "@stencil/core" { "post-list": LocalJSX.PostList & JSXBase.HTMLAttributes; "post-list-item": LocalJSX.PostListItem & JSXBase.HTMLAttributes; "post-logo": LocalJSX.PostLogo & JSXBase.HTMLAttributes; + "post-menu": LocalJSX.PostMenu & JSXBase.HTMLAttributes; + "post-menu-item": LocalJSX.PostMenuItem & JSXBase.HTMLAttributes; + "post-menu-trigger": LocalJSX.PostMenuTrigger & JSXBase.HTMLAttributes; "post-popover": LocalJSX.PostPopover & JSXBase.HTMLAttributes; "post-popovercontainer": LocalJSX.PostPopovercontainer & JSXBase.HTMLAttributes; "post-rating": LocalJSX.PostRating & JSXBase.HTMLAttributes; diff --git a/packages/components/src/components/post-closebutton/post-closebutton.tsx b/packages/components/src/components/post-closebutton/post-closebutton.tsx new file mode 100644 index 0000000000..68d13ef51a --- /dev/null +++ b/packages/components/src/components/post-closebutton/post-closebutton.tsx @@ -0,0 +1,26 @@ +import { Component, Element, h, Host } from '@stencil/core'; +import { version } from '@root/package.json'; + +/** + * @slot default - Slot for placing visually hidden label in the close button. + */ +@Component({ + tag: 'post-closebutton', + shadow: false, +}) +export class PostClosebutton { + @Element() host: HTMLPostClosebuttonElement; + + render() { + return ( + + + + ); + } +} diff --git a/packages/components/src/components/post-closebutton/readme.md b/packages/components/src/components/post-closebutton/readme.md new file mode 100644 index 0000000000..ca0053c6df --- /dev/null +++ b/packages/components/src/components/post-closebutton/readme.md @@ -0,0 +1,30 @@ +# post-closebutton + + + + + + +## Slots + +| Slot | Description | +| ----------- | ----------------------------------------------------------- | +| `"default"` | Slot for placing visually hidden label in the close button. | + + +## Dependencies + +### Depends on + +- [post-icon](../post-icon) + +### Graph +```mermaid +graph TD; + post-closebutton --> post-icon + style post-closebutton fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/components/src/components/post-icon/readme.md b/packages/components/src/components/post-icon/readme.md index 92d1a4bacb..afb94ab2e7 100644 --- a/packages/components/src/components/post-icon/readme.md +++ b/packages/components/src/components/post-icon/readme.md @@ -25,6 +25,7 @@ some content - [post-alert](../post-alert) - [post-breadcrumb-item](../post-breadcrumb-item) - [post-card-control](../post-card-control) + - [post-closebutton](../post-closebutton) - [post-rating](../post-rating) - [post-tag](../post-tag) @@ -34,6 +35,7 @@ graph TD; post-alert --> post-icon post-breadcrumb-item --> post-icon post-card-control --> post-icon + post-closebutton --> post-icon post-rating --> post-icon post-tag --> post-icon style post-icon fill:#f9f,stroke:#333,stroke-width:4px diff --git a/packages/components/src/components/post-menu-item/post-menu-item.scss b/packages/components/src/components/post-menu-item/post-menu-item.scss new file mode 100644 index 0000000000..f09d32524a --- /dev/null +++ b/packages/components/src/components/post-menu-item/post-menu-item.scss @@ -0,0 +1,3 @@ +:host { + display: block; +} \ No newline at end of file diff --git a/packages/components/src/components/post-menu-item/post-menu-item.tsx b/packages/components/src/components/post-menu-item/post-menu-item.tsx new file mode 100644 index 0000000000..b4c7de0469 --- /dev/null +++ b/packages/components/src/components/post-menu-item/post-menu-item.tsx @@ -0,0 +1,19 @@ +import { Component, h, Element, Host } from '@stencil/core'; +import { version } from '@root/package.json'; + +@Component({ + tag: 'post-menu-item', + shadow: true, + styleUrl: 'post-menu-item.scss', +}) +export class PostMenuItem { + @Element() host: HTMLPostMenuItemElement; + + render() { + return ( + + + + ); + } +} diff --git a/packages/components/src/components/post-menu-item/readme.md b/packages/components/src/components/post-menu-item/readme.md new file mode 100644 index 0000000000..d6c88bc316 --- /dev/null +++ b/packages/components/src/components/post-menu-item/readme.md @@ -0,0 +1,10 @@ +# post-menu-item + + + + + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/components/src/components/post-menu-trigger/post-menu-trigger.scss b/packages/components/src/components/post-menu-trigger/post-menu-trigger.scss new file mode 100644 index 0000000000..8d3464e097 --- /dev/null +++ b/packages/components/src/components/post-menu-trigger/post-menu-trigger.scss @@ -0,0 +1,3 @@ +:host { + display: inline-block; +} \ No newline at end of file diff --git a/packages/components/src/components/post-menu-trigger/post-menu-trigger.tsx b/packages/components/src/components/post-menu-trigger/post-menu-trigger.tsx new file mode 100644 index 0000000000..8f07329f27 --- /dev/null +++ b/packages/components/src/components/post-menu-trigger/post-menu-trigger.tsx @@ -0,0 +1,83 @@ +import { Component, Element, Prop, h, Host, State, Watch } from '@stencil/core'; +import { version } from '@root/package.json'; +import { checkType } from '@/utils'; + +@Component({ + tag: 'post-menu-trigger', + styleUrl: 'post-menu-trigger.scss', + shadow: false, +}) +export class PostMenuTrigger { + /** + * ID of the menu element that this trigger is linked to. Used to open and close the specified menu. + */ + @Prop() for!: string; + + @Element() host: HTMLPostMenuTriggerElement; + + /** + * Manages the accessibility attribute `aria-expanded` to indicate whether the associated menu is expanded or collapsed. + */ + @State() ariaExpanded: boolean = false; + + /** + * Reference to the slotted button within the trigger, if present. + * Used to manage click and key events for menu control. + */ + private slottedButton: HTMLButtonElement | null = null; + + /** + * Watch for changes to the `for` property to validate its type and ensure it is a string. + * @param forValue - The new value of the `for` property. + */ + @Watch('for') + validateControlFor(forValue = this.for) { + checkType(forValue, 'string', 'The "for" property is required and should be a string.'); + } + + private get menu(): HTMLPostMenuElement | null { + const ref = document.getElementById(this.for); + return ref && ref.localName === 'post-menu' ? (ref as HTMLPostMenuElement) : null; + } + + private handleToggle() { + const menu = this.menu; + if (menu && this.slottedButton) { + this.ariaExpanded = !this.ariaExpanded; + this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString()); + menu.toggle(this.host); + } else { + console.warn(`No post-menu found with ID: ${this.for}`); + } + } + + private handleKeyDown = (e: KeyboardEvent) => { + if (e.key === 'ArrowUp' || e.key === 'ArrowDown') { + e.preventDefault(); + this.handleToggle(); + } + }; + + componentDidLoad() { + this.validateControlFor(); + + this.slottedButton = this.host.querySelector('button'); + if (this.slottedButton) { + this.slottedButton.setAttribute('aria-haspopup', 'menu'); + this.slottedButton.addEventListener('click', () => { + this.handleToggle(); + }); + this.slottedButton.addEventListener('keydown', this.handleKeyDown); + } else { + console.warn('No button found within post-menu-trigger'); + } + } + + render() { + return ( + + + + ); + } +} diff --git a/packages/components/src/components/post-menu-trigger/readme.md b/packages/components/src/components/post-menu-trigger/readme.md new file mode 100644 index 0000000000..5be3ab3109 --- /dev/null +++ b/packages/components/src/components/post-menu-trigger/readme.md @@ -0,0 +1,17 @@ +# post-menu-trigger + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ------------------ | --------- | ------------------------------------------------------------------------------------------------- | -------- | ----------- | +| `for` _(required)_ | `for` | ID of the menu element that this trigger is linked to. Used to open and close the specified menu. | `string` | `undefined` | + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/components/src/components/post-menu/post-menu.scss b/packages/components/src/components/post-menu/post-menu.scss new file mode 100644 index 0000000000..95b15284b7 --- /dev/null +++ b/packages/components/src/components/post-menu/post-menu.scss @@ -0,0 +1,11 @@ +@use '@swisspost/design-system-styles/core' as post; + +:host { + display: block; +} + +post-popovercontainer { + padding: var(--post-menu-padding); + background-color: var(--post-menu-bg, #ffffff); + border-color: var(--post-menu-bg, #ffffff); +} \ No newline at end of file diff --git a/packages/components/src/components/post-menu/post-menu.tsx b/packages/components/src/components/post-menu/post-menu.tsx new file mode 100644 index 0000000000..dd5c90f3bf --- /dev/null +++ b/packages/components/src/components/post-menu/post-menu.tsx @@ -0,0 +1,195 @@ +import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core'; +import { Placement } from '@floating-ui/dom'; +import { version } from '@root/package.json'; +import { isFocusable } from '@/utils/is-focusable'; + +@Component({ + tag: 'post-menu', + styleUrl: 'post-menu.scss', + shadow: true, +}) +export class PostMenu { + private popoverRef: HTMLPostPopovercontainerElement; + private lastFocusedElement: HTMLElement | null = null; + + private readonly KEYCODES = { + SPACE: ' ', + ENTER: 'Enter', + UP: 'ArrowUp', + DOWN: 'ArrowDown', + TAB: 'Tab', + HOME: 'Home', + END: 'End', + ESCAPE: 'Escape' + }; + + @Element() host: HTMLPostMenuElement; + + /** + * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. + * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted + * towards the viewport if they would overlap edge boundaries. + */ + @Prop() readonly placement?: Placement = 'bottom'; + + /** + * Holds the current visibility state of the menu. + * This state is internally managed to track whether the menu is open (`true`) or closed (`false`), + * and updates automatically when the menu is toggled. + */ + @State() isVisible: boolean = false; + + /** + * Emits when the menu is shown or hidden. + * The event payload is a boolean: `true` when the menu was opened, `false` when it was closed. + **/ + @Event() toggleMenu: EventEmitter; + + connectedCallback() { + this.host.addEventListener('keydown', this.handleKeyDown); + this.host.addEventListener('click', this.handleClick); + } + + disconnectedCallback() { + this.host.removeEventListener('keydown', this.handleKeyDown); + this.host.removeEventListener('click', this.handleClick); + } + + componentDidLoad() { + this.popoverRef.addEventListener('postToggle', (event: CustomEvent) => { + this.isVisible = event.detail; + this.toggleMenu.emit(this.isVisible); + }); + } + + /** + * Toggles the menu visibility based on its current state. + */ + @Method() + async toggle(target: HTMLElement) { + this.isVisible ? await this.hide() : await this.show(target); + } + + /** + * Displays the popover menu, focusing the first menu item. + * + * @param target - The HTML element relative to which the popover menu should be displayed. + */ + @Method() + async show(target: HTMLElement) { + if (this.popoverRef) { + await this.popoverRef.show(target); + this.lastFocusedElement = document.activeElement as HTMLElement; + + const menuItems = this.getSlottedItems(); + if (menuItems.length > 0) { + (menuItems[0] as HTMLElement).focus(); + } + } else { + console.error('show: popoverRef is null or undefined'); + } + } + + /** + * Hides the popover menu and restores focus to the previously focused element. + */ + @Method() + async hide() { + if (this.popoverRef) { + await this.popoverRef.hide(); + if (this.lastFocusedElement) { + this.lastFocusedElement.focus(); + } + } else { + console.error('hide: popoverRef is null or undefined'); + } + } + + private handleKeyDown = (e: KeyboardEvent) => { + e.stopPropagation(); + + if (e.key === this.KEYCODES.ESCAPE) { + this.toggle(this.host); + return; + } + + if (Object.values(this.KEYCODES).includes(e.key)) { + this.controlKeyDownHandler(e); + } + }; + + private handleClick = (e: MouseEvent) => { + const target = e.target as HTMLElement; + if (['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) { + this.toggle(this.host); + } + }; + + private controlKeyDownHandler(e: KeyboardEvent) { + const menuItems = this.getSlottedItems(); + if (!menuItems.length) { + return; + } + + const currentFocusedElement = document.activeElement as HTMLElement; + let currentIndex = menuItems.findIndex(el => el === currentFocusedElement); + + switch (e.key) { + case this.KEYCODES.UP: + e.preventDefault(); + currentIndex = (currentIndex - 1 + menuItems.length) % menuItems.length; + break; + case this.KEYCODES.DOWN: + e.preventDefault(); + currentIndex = (currentIndex + 1) % menuItems.length; + break; + case this.KEYCODES.HOME: + currentIndex = 0; + break; + case this.KEYCODES.END: + currentIndex = menuItems.length - 1; + break; + case this.KEYCODES.SPACE: + case this.KEYCODES.ENTER: + this.toggle(this.host); + return; + case this.KEYCODES.TAB: + this.toggle(this.host); + break; + default: + break; + } + + if (menuItems[currentIndex]) { + (menuItems[currentIndex] as HTMLElement).focus(); + } + } + + private getSlottedItems() { + const slot = this.host.shadowRoot.querySelector('slot'); + const slottedElements = slot ? slot.assignedElements() : []; + + const menuItems = slottedElements + .filter(el => el.tagName === 'POST-MENU-ITEM') + .map(el => { + const slot = el.shadowRoot.querySelector('slot'); + const assignedElements = slot ? slot.assignedElements() : []; + return assignedElements.filter(isFocusable); + }) + .flat(); + + return menuItems; + } + + render() { + return ( + + (this.popoverRef = e)}> +
+ +
+ + + ); + } +} diff --git a/packages/components/src/components/post-menu/readme.md b/packages/components/src/components/post-menu/readme.md new file mode 100644 index 0000000000..f700878d4c --- /dev/null +++ b/packages/components/src/components/post-menu/readme.md @@ -0,0 +1,82 @@ +# post-menu + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ----------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | +| `placement` | `placement` | Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'bottom'` | + + +## Events + +| Event | Description | Type | +| ------------ | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------- | +| `toggleMenu` | Emits when the menu is shown or hidden. The event payload is a boolean: `true` when the menu was opened, `false` when it was closed. | `CustomEvent` | + + +## Methods + +### `hide() => Promise` + +Hides the popover menu and restores focus to the previously focused element. + +#### Returns + +Type: `Promise` + + + +### `show(target: HTMLElement) => Promise` + +Displays the popover menu, focusing the first menu item. + +#### Parameters + +| Name | Type | Description | +| -------- | ------------- | -------------------------------------------------------------------------- | +| `target` | `HTMLElement` | - The HTML element relative to which the popover menu should be displayed. | + +#### Returns + +Type: `Promise` + + + +### `toggle(target: HTMLElement) => Promise` + +Toggles the menu visibility based on its current state. + +#### Parameters + +| Name | Type | Description | +| -------- | ------------- | ----------- | +| `target` | `HTMLElement` | | + +#### Returns + +Type: `Promise` + + + + +## Dependencies + +### Depends on + +- [post-popovercontainer](../post-popovercontainer) + +### Graph +```mermaid +graph TD; + post-menu --> post-popovercontainer + style post-menu fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/components/src/components/post-popovercontainer/readme.md b/packages/components/src/components/post-popovercontainer/readme.md index 7efe854e5c..99b04f2f7e 100644 --- a/packages/components/src/components/post-popovercontainer/readme.md +++ b/packages/components/src/components/post-popovercontainer/readme.md @@ -78,12 +78,14 @@ Type: `Promise` ### Used by + - [post-menu](../post-menu) - [post-popover](../post-popover) - [post-tooltip](../post-tooltip) ### Graph ```mermaid graph TD; + post-menu --> post-popovercontainer post-popover --> post-popovercontainer post-tooltip --> post-popovercontainer style post-popovercontainer fill:#f9f,stroke:#333,stroke-width:4px diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 2644481576..593b7c7fa2 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -7,11 +7,15 @@ export { PostAlert } from './components/post-alert/post-alert'; export { PostBreadcrumbItem } from './components/post-breadcrumb-item/post-breadcrumb-item'; export { PostAvatar } from './components/post-avatar/post-avatar'; export { PostCardControl } from './components/post-card-control/post-card-control'; +export { PostClosebutton } from './components/post-closebutton/post-closebutton'; export { PostCollapsible } from './components/post-collapsible/post-collapsible'; export { PostCollapsibleTrigger } from './components/post-collapsible-trigger/post-collapsible-trigger'; export { PostIcon } from './components/post-icon/post-icon'; export { PostLanguageOption } from './components/post-language-option/post-language-option'; export { PostLogo } from './components/post-logo/post-logo'; +export { PostMenu } from './components/post-menu/post-menu'; +export { PostMenuTrigger } from './components/post-menu-trigger/post-menu-trigger'; +export { PostMenuItem } from './components/post-menu-item/post-menu-item'; export { PostPopover } from './components/post-popover/post-popover'; export { PostPopovercontainer } from './components/post-popovercontainer/post-popovercontainer'; export { PostRating } from './components/post-rating/post-rating'; diff --git a/packages/components/src/utils/is-focusable.ts b/packages/components/src/utils/is-focusable.ts new file mode 100644 index 0000000000..66aa7d74dc --- /dev/null +++ b/packages/components/src/utils/is-focusable.ts @@ -0,0 +1,28 @@ +const focusableSelector = `:where(${[ + 'button', + 'input:not([type="hidden"])', + '[tabindex]', + 'select', + 'textarea', + '[contenteditable]', + 'a[href]', + 'iframe', + 'audio[controls]', + 'video[controls]', + 'area[href]', + 'details > summary:first-of-type', +].join(',')})`; + +const focusDisablingSelector = `:where(${[ + '[inert]', + '[inert] *', + ':disabled', + 'dialog:not([open]) *', + '[popover]:not(:popover-open) *', + 'details:not([open]) > *:not(details > summary:first-of-type)', + 'details:not([open]) > *:not(details > summary:first-of-type) *', +].join(',')})`; + +export const isFocusable = (element: Element) => { + return element?.matches(focusableSelector) && !element?.matches(focusDisablingSelector); +}; diff --git a/packages/documentation/.storybook/preview.ts b/packages/documentation/.storybook/preview.ts index 035bdf5f97..df8c5707e7 100644 --- a/packages/documentation/.storybook/preview.ts +++ b/packages/documentation/.storybook/preview.ts @@ -15,6 +15,7 @@ import './styles/preview.scss'; import { SyntaxHighlighter } from '@storybook/components'; import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss'; +import { ArgTypes } from '@storybook/blocks'; SyntaxHighlighter.registerLanguage('scss', scss); @@ -84,6 +85,9 @@ const preview: Preview = { }, ], }, + argTypes: { + sort: 'requiredFirst', + }, source: { excludeDecorators: true, dark: SourceDarkScheme, diff --git a/packages/documentation/CHANGELOG.md b/packages/documentation/CHANGELOG.md index 4d4645f460..027ce55b6d 100644 --- a/packages/documentation/CHANGELOG.md +++ b/packages/documentation/CHANGELOG.md @@ -1,5 +1,35 @@ # @swisspost/design-system-documentation +## 6.0.0-next.5 + +### Minor Changes + +- Updated list group to v2 and added new options: list links, list documents and list switches. (by [@leagrdv](https://github.com/leagrdv) with [#3740](https://github.com/swisspost/design-system/pull/3740)) + +- Created the `post-list` and `post-list-item` components. (by [@myrta2302](https://github.com/myrta2302) with [#3812](https://github.com/swisspost/design-system/pull/3812)) + +- Updated the Accessibility documentation section with Form Labels guidelines. (by [@myrta2302](https://github.com/myrta2302) with [#3835](https://github.com/swisspost/design-system/pull/3835)) + +- Added Form Footer component. (by [@leagrdv](https://github.com/leagrdv) with [#3616](https://github.com/swisspost/design-system/pull/3616)) + +- Updated vertical-align utility (by [@myrta2302](https://github.com/myrta2302) with [#3805](https://github.com/swisspost/design-system/pull/3805)) + +- Added the skiplinks component to styles and documentation. (by [@leagrdv](https://github.com/leagrdv) with [#3875](https://github.com/swisspost/design-system/pull/3875)) + +- Added close button web component. (by [@leagrdv](https://github.com/leagrdv) with [#3880](https://github.com/swisspost/design-system/pull/3880)) + +- Internalized bootstraps floating utilities into the design system. (by [@myrta2302](https://github.com/myrta2302) with [#3752](https://github.com/swisspost/design-system/pull/3752)) + +### Patch Changes + +- Updated basic `
    ` element docs and moved them from `Utilities/Lists` to `Foundation/Typography/Lists`. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#3859](https://github.com/swisspost/design-system/pull/3859)) +- Updated dependencies: + - @swisspost/design-system-icons@9.0.0-next.4 + - @swisspost/design-system-styles@9.0.0-next.4 + - @swisspost/design-system-components@9.0.0-next.4 + - @swisspost/internet-header@2.0.0-next.4 + - @swisspost/design-system-components-react@9.0.0-next.4 + ## 6.0.0-next.4 ### Patch Changes diff --git a/packages/documentation/cypress/snapshots/components/close-button.snapshot.ts b/packages/documentation/cypress/snapshots/components/close-button.snapshot.ts new file mode 100644 index 0000000000..82da359c4c --- /dev/null +++ b/packages/documentation/cypress/snapshots/components/close-button.snapshot.ts @@ -0,0 +1,7 @@ +describe('Close button', () => { + it('post-closebutton', () => { + cy.visit('/iframe.html?id=snapshots--post-closebutton'); + cy.get('post-closebutton[data-hydrated]', { timeout: 30000 }).should('be.visible'); + cy.percySnapshot('Close button (Web Component)', { widths: [1440] }); + }); +}); diff --git a/packages/documentation/cypress/snapshots/utilities/vertical-align.snapshot.ts b/packages/documentation/cypress/snapshots/utilities/vertical-align.snapshot.ts new file mode 100644 index 0000000000..6d2235f46d --- /dev/null +++ b/packages/documentation/cypress/snapshots/utilities/vertical-align.snapshot.ts @@ -0,0 +1,7 @@ +describe('Vetical Align', () => { + it('vertica-align', () => { + cy.visit('/iframe.html?id=snapshots--vertical-align'); + cy.get('.vertical-align-example', { timeout: 30000 }).should('be.visible'); + cy.percySnapshot('Vertical Align', { widths: [1440] }); + }); +}); diff --git a/packages/documentation/package.json b/packages/documentation/package.json index 1e6d5bbd3e..054769c301 100644 --- a/packages/documentation/package.json +++ b/packages/documentation/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-documentation", - "version": "6.0.0-next.4", + "version": "6.0.0-next.5", "description": "Swiss Post Design System Documentation.", "author": "Swiss Post ", "license": "Apache-2.0", @@ -28,11 +28,11 @@ "lint": "eslint **/*.{ts,tsx,mdx}" }, "dependencies": { - "@swisspost/design-system-components": "workspace:9.0.0-next.3", - "@swisspost/design-system-components-react": "workspace:9.0.0-next.3", - "@swisspost/design-system-icons": "workspace:9.0.0-next.3", - "@swisspost/design-system-styles": "workspace:9.0.0-next.3", - "@swisspost/internet-header": "workspace:2.0.0-next.3", + "@swisspost/design-system-components": "workspace:9.0.0-next.4", + "@swisspost/design-system-components-react": "workspace:9.0.0-next.4", + "@swisspost/design-system-icons": "workspace:9.0.0-next.4", + "@swisspost/design-system-styles": "workspace:9.0.0-next.4", + "@swisspost/internet-header": "workspace:2.0.0-next.4", "bootstrap": "5.3.3" }, "devDependencies": { @@ -53,8 +53,8 @@ "@storybook/types": "8.3.6", "@storybook/web-components": "8.3.6", "@storybook/web-components-vite": "8.3.6", - "@swisspost/design-system-components-angular": "workspace:9.0.0-next.3", - "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.3", + "@swisspost/design-system-components-angular": "workspace:9.0.0-next.4", + "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.4", "@types/css-modules": "1.0.5", "@types/mdx": "2.0.13", "@types/react": "18.3.3", diff --git a/packages/documentation/public/_redirects b/packages/documentation/public/_redirects index 72890d6c5b..554f386e14 100644 --- a/packages/documentation/public/_redirects +++ b/packages/documentation/public/_redirects @@ -7,3 +7,4 @@ /v8 https://design-system-version-8.netlify.app /v9 https://swisspost-design-system-version-9.netlify.app + diff --git a/packages/documentation/public/assets/versions.json b/packages/documentation/public/assets/versions.json index 3c264439ed..e9ffa81f97 100644 --- a/packages/documentation/public/assets/versions.json +++ b/packages/documentation/public/assets/versions.json @@ -1,7 +1,7 @@ [ { "title": "Version 9", - "version": "9.0.0-next.3", + "version": "9.0.0-next.4", "description": "Pattern documentation, code snippets and implementation guidelines for the Design System Styles.", "url": "https://design-system.post.ch", "dependencies": { @@ -9,22 +9,50 @@ "@ng-bootstrap/ng-bootstrap": "^17.0.0", "bootstrap": "~5.3.0", "@swisspost/design-system-changelog-github": "1.0.2", - "@swisspost/design-system-components": "9.0.0-next.3", - "@swisspost/design-system-components-angular-workspace": "1.1.10-next.3", - "@swisspost/design-system-components-angular": "9.0.0-next.3", - "@swisspost/design-system-components-react": "9.0.0-next.3", - "@swisspost/design-system-documentation": "6.0.0-next.3", - "@swisspost/design-system-icons": "9.0.0-next.3", - "@swisspost/internet-header": "2.0.0-next.3", - "@swisspost/design-system-intranet-header-workspace": "3.0.22-next.3", - "@swisspost/design-system-intranet-header": "9.0.0-next.3", - "@swisspost/design-system-intranet-header-showcase": "1.0.10-next.3", - "@swisspost/design-system-migrations": "9.0.0-next.3", - "@swisspost/design-system-nextjs-integration": "0.1.14-next.3", - "@swisspost/design-system-styles": "9.0.0-next.3", - "@swisspost/design-system-styles-primeng-workspace": "1.0.6-next.3", - "@swisspost/design-system-styles-primeng": "9.0.0-next.3", - "@swisspost/design-system-tokens": "9.0.0-next.3" + "@swisspost/design-system-components": "9.0.0-next.4", + "@swisspost/design-system-components-angular-workspace": "1.1.10-next.4", + "@swisspost/design-system-components-angular": "9.0.0-next.4", + "@swisspost/design-system-components-react": "9.0.0-next.4", + "@swisspost/design-system-documentation": "6.0.0-next.5", + "@swisspost/design-system-icons": "9.0.0-next.4", + "@swisspost/internet-header": "2.0.0-next.4", + "@swisspost/design-system-intranet-header-workspace": "3.0.22-next.4", + "@swisspost/design-system-intranet-header": "9.0.0-next.4", + "@swisspost/design-system-intranet-header-showcase": "1.0.10-next.4", + "@swisspost/design-system-migrations": "9.0.0-next.4", + "@swisspost/design-system-nextjs-integration": "0.1.14-next.4", + "@swisspost/design-system-styles": "9.0.0-next.4", + "@swisspost/design-system-styles-primeng-workspace": "1.0.6-next.4", + "@swisspost/design-system-styles-primeng": "9.0.0-next.4", + "@swisspost/design-system-tokens": "9.0.0-next.4" + } + }, + { + "title": "Version 9", + "version": "9.0.0-next.3", + "description": "Pattern documentation, code snippets and implementation guidelines for the Design System Styles.", + "url": "https://swisspost-design-system-version-9.netlify.app", + "dependencies": { + "@angular/core": "^18.0.0", + "@ng-bootstrap/ng-bootstrap": "^17.0.0", + "bootstrap": "~5.3.0", + "@swisspost/design-system-changelog-github": "1.0.2", + "@swisspost/design-system-components": "9.0.0-next.2", + "@swisspost/design-system-components-angular-workspace": "1.1.10-next.2", + "@swisspost/design-system-components-angular": "9.0.0-next.2", + "@swisspost/design-system-components-react": "9.0.0-next.2", + "@swisspost/design-system-documentation": "6.0.0-next.2", + "@swisspost/design-system-icons": "9.0.0-next.2", + "@swisspost/internet-header": "1.14.6-next.2", + "@swisspost/design-system-intranet-header-workspace": "3.0.22-next.2", + "@swisspost/design-system-intranet-header": "9.0.0-next.2", + "@swisspost/design-system-intranet-header-showcase": "1.0.10-next.2", + "@swisspost/design-system-migrations": "9.0.0-next.2", + "@swisspost/design-system-nextjs-integration": "0.1.14-next.2", + "@swisspost/design-system-styles": "9.0.0-next.2", + "@swisspost/design-system-styles-primeng-workspace": "1.0.6-next.2", + "@swisspost/design-system-styles-primeng": "9.0.0-next.2", + "@swisspost/design-system-tokens": "9.0.0-next.2" } }, { diff --git a/packages/documentation/src/stories/components/button/button.docs.mdx b/packages/documentation/src/stories/components/buttons/button/button.docs.mdx similarity index 100% rename from packages/documentation/src/stories/components/button/button.docs.mdx rename to packages/documentation/src/stories/components/buttons/button/button.docs.mdx diff --git a/packages/documentation/src/stories/components/button/button.snapshot.stories.ts b/packages/documentation/src/stories/components/buttons/button/button.snapshot.stories.ts similarity index 100% rename from packages/documentation/src/stories/components/button/button.snapshot.stories.ts rename to packages/documentation/src/stories/components/buttons/button/button.snapshot.stories.ts diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/buttons/button/button.stories.ts similarity index 99% rename from packages/documentation/src/stories/components/button/button.stories.ts rename to packages/documentation/src/stories/components/buttons/button/button.stories.ts index 1b707a53a3..5e8ba415d2 100644 --- a/packages/documentation/src/stories/components/button/button.stories.ts +++ b/packages/documentation/src/stories/components/buttons/button/button.stories.ts @@ -6,7 +6,7 @@ import { MetaComponent } from '@root/types'; const meta: MetaComponent = { id: 'eb78afcb-ce92-4990-94b6-6536d5ec6af4', - title: 'Components/Button', + title: 'Components/Buttons/Button', tags: ['package:HTML'], parameters: { badges: [], diff --git a/packages/documentation/src/stories/components/buttons/close-button/close-button.docs.mdx b/packages/documentation/src/stories/components/buttons/close-button/close-button.docs.mdx new file mode 100644 index 0000000000..6e3948c7de --- /dev/null +++ b/packages/documentation/src/stories/components/buttons/close-button/close-button.docs.mdx @@ -0,0 +1,24 @@ +import { Canvas, Controls, Meta, Source } from '@storybook/blocks'; +import * as CloseButtonStories from './close-button.stories'; + + + +
    + # Close button + + +
    + +
    + The close button is a web component. It is a slightly adapted version of the icon button, intended + for a specific use case. +
    + +The value inside the `` element will be rendered inside the button as a visually hidden text so make sure to only insert inline content there. + + +
    + +
    diff --git a/packages/documentation/src/stories/components/buttons/close-button/close-button.snapshot.stories.ts b/packages/documentation/src/stories/components/buttons/close-button/close-button.snapshot.stories.ts new file mode 100644 index 0000000000..d6b21d0b46 --- /dev/null +++ b/packages/documentation/src/stories/components/buttons/close-button/close-button.snapshot.stories.ts @@ -0,0 +1,26 @@ +import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; +import meta, { Default } from './close-button.stories'; +import { html } from 'lit'; + +const { id, ...metaWithoutId } = meta; + +export default { + ...metaWithoutId, + title: 'Snapshots', +}; + +type Story = StoryObj; + +export const PostClosebutton: Story = { + render: (_args: Args, context: StoryContext) => { + return html` + ${['bg-white', 'bg-dark'].map( + bg => html` +
    + ${Default.render?.({ ...context.args }, context)} +
    + `, + )} + `; + }, +}; diff --git a/packages/documentation/src/stories/components/buttons/close-button/close-button.stories.ts b/packages/documentation/src/stories/components/buttons/close-button/close-button.stories.ts new file mode 100644 index 0000000000..7b947e99a0 --- /dev/null +++ b/packages/documentation/src/stories/components/buttons/close-button/close-button.stories.ts @@ -0,0 +1,39 @@ +import type { Args, StoryObj } from '@storybook/web-components'; +import { html } from 'lit/static-html.js'; +import { MetaComponent } from '@root/types'; +import { unsafeHTML } from 'lit/directives/unsafe-html.js'; + +const meta: MetaComponent = { + id: 'de313349-0c0b-4baf-adc6-cb8c2e36fc1a', + title: 'Components/Buttons/Close button', + component: 'post-closebutton', + tags: ['package:WebComponents'], + parameters: { + badges: [], + design: { + type: 'figma', + url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=2514-18516&t=gCGlckfBEobCTna3-4', + }, + }, + args: { + 'slots-default': 'Close button', + }, + argTypes: { + 'slots-default': { + name: 'Label', + control: { + type: 'text', + }, + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: (args: Args) => { + return html`${unsafeHTML(args['slots-default'])} `; + }, +}; diff --git a/packages/documentation/src/stories/components/menu-button/menu-button.docs.mdx b/packages/documentation/src/stories/components/menu-button/menu-button.docs.mdx new file mode 100644 index 0000000000..a5f7a38de6 --- /dev/null +++ b/packages/documentation/src/stories/components/menu-button/menu-button.docs.mdx @@ -0,0 +1,19 @@ +import { Canvas, Controls, Meta } from '@storybook/blocks'; +import * as MenuButtonStories from './menu-button.stories'; + + + +
    + # Menu Button + + +
    + +
    + A dropdown component for displaying a list of links or actions with flexible alignment. +
    + + + diff --git a/packages/documentation/src/stories/components/menu-button/menu-button.stories.ts b/packages/documentation/src/stories/components/menu-button/menu-button.stories.ts new file mode 100644 index 0000000000..1aacdc2e46 --- /dev/null +++ b/packages/documentation/src/stories/components/menu-button/menu-button.stories.ts @@ -0,0 +1,73 @@ +import { Args, StoryObj } from '@storybook/web-components'; +import { html, nothing } from 'lit'; +import { MetaComponent } from '@root/types'; + +const meta: MetaComponent = { + id: '8ca2bd70-56e6-4da9-b1fd-4e55388dca88', + title: 'Components/Menu Button', + tags: ['package:WebComponents'], + component: 'post-menu', + parameters: { + design: {}, + }, + render, + args: { + id: 'menu-one', + placement: 'bottom', + padding: '', + backgroundColor: '', + }, + argTypes: { + id: { + name: 'id', + description: + 'The id is used to connect a trigger element with the popover.', + table: { + category: 'General', + }, + }, + padding: { + name: 'padding', + description: 'Controls the padding inside the menu container using --post-menu-padding.', + control: { type: 'text' }, + table: { + category: 'CSS Variables', + }, + }, + backgroundColor: { + name: 'background color', + description: 'Defines the color of the menu.', + table: { + category: 'CSS Variables' + }, + }, + }, +}; + +function render(args: Args) { + // Construct the style string conditionally based on padding and backgroundColor + const styles = [ + args.padding ? `--post-menu-padding: ${args.padding};` : '', + args.backgroundColor ? `--post-menu-bg: ${args.backgroundColor};` : '' + ].filter(Boolean).join(' ').trim(); + + return html` + + + + + + + Example 2 +
    Example 3
     +     +     + `; +} + +export default meta; +export const Default: StoryObj = {}; diff --git a/packages/documentation/src/stories/utilities/vertical-align/vertical-align.docs.mdx b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.docs.mdx new file mode 100644 index 0000000000..48fcfe4a04 --- /dev/null +++ b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.docs.mdx @@ -0,0 +1,29 @@ +import { Canvas, Controls, Meta, Source } from '@storybook/blocks'; +import { formatAsMap } from '@/utils/sass-export'; +import * as VerticalAlignStories from './vertical-align.stories'; + + + +# Vertical Alignment + +
    + Use the vertical alignment utilities to adjust the alignment of elements. +
    + +Note that vertical-align applies only to `inline`, `inline-block, `inline-table`, and `table-cell` elements. + +## Examples + +With inline elements: + + +
    + +
    + +With table cells: + + +
    + +
    diff --git a/packages/documentation/src/stories/utilities/vertical-align/vertical-align.snapshot.stories.ts b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.snapshot.stories.ts new file mode 100644 index 0000000000..31e346cb88 --- /dev/null +++ b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.snapshot.stories.ts @@ -0,0 +1,33 @@ +import type { StoryObj, StoryFn, StoryContext } from '@storybook/web-components'; +import { html } from 'lit'; +import meta from './vertical-align.stories'; +import './vertical-align.styles.scss'; + +const { id, ...metaWithoutId } = meta; + +export default { + ...metaWithoutId, + title: 'Snapshots', +}; + +type Story = StoryObj; + +export const VerticalAlign: Story = { + render: () => { + return html` + ${meta?.argTypes?.align?.options?.map( + align => + html`
    + ${align ? `align-${align}` : 'text'} + +
    `, + )} + `; + }, + decorators: [ + (story: StoryFn, context: StoryContext) => { + const storyTemplate = html`
    ${story(context.args, context)}
    `; + return storyTemplate; + }, + ], +}; diff --git a/packages/documentation/src/stories/utilities/vertical-align/vertical-align.stories.ts b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.stories.ts new file mode 100644 index 0000000000..db879df901 --- /dev/null +++ b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.stories.ts @@ -0,0 +1,68 @@ +import type { Args, StoryObj, StoryFn, StoryContext } from '@storybook/web-components'; +import { html, nothing } from 'lit'; +import './vertical-align.styles.scss'; +import { MetaExtended } from '@root/types'; + +const alignOptions = ['baseline', 'top', 'middle', 'bottom', 'text-bottom', 'text-top']; + +const meta: MetaExtended = { + id: 'cf01f6d1-970f-444e-aaa9-8a96c25cc8b2', + title: 'Utilities/Vertical Align', + args: { + align: '', + }, + argTypes: { + align: { + name: 'align', + description: 'Set the vertical alignment of the text', + control: { + type: 'select', + }, + options: alignOptions, + }, + }, + render: (args: Args) => { + return html`baseline + top + middle + bottom + text-bottom + text-top + ${args.align || 'text'}`; + }, + decorators: [ + (story: StoryFn, context: StoryContext) => { + const storyTemplate = html`
    + ${story(context.args, context)} +
    `; + return storyTemplate; + }, + ], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; + +export const tableVersion: Story = { + argTypes: { + align: { + options: alignOptions.filter(o => !o.includes('text-')), + }, + }, + render: (args: Args) => { + return html` + + + + + + + + + +
    baselinetopmiddlebottom${args.align || 'text'}
    `; + }, +}; diff --git a/packages/documentation/src/stories/utilities/vertical-align/vertical-align.styles.scss b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.styles.scss new file mode 100644 index 0000000000..1100f28378 --- /dev/null +++ b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.styles.scss @@ -0,0 +1,61 @@ +.vertical-align-example { + :not(:has(table)) & { + border: 1px solid rgb(204, 204, 204); + line-height: 3; + } + + table { + margin: 0; + height: 100px; + td:nth-of-type(5) { + color: red; + } + } + + span { + padding-inline: 0.5rem; + &:nth-of-type(7) { + padding-inline-start: 2rem; + color: red; + } + } + + .logo { + width: 1rem; + height: 1rem; + display: inline-block; + } + + .snapshot { + gap: 2rem; + display: flex; + flex-direction: column; + + & > div { + border: 1px solid rgb(204, 204, 204); + width: 320px; + + span { + min-width: 150px; + } + + span:nth-of-type(2) { + color: gray; + } + } + } + + .box { + border: 1px solid rgb(204, 204, 204); + height: 50px; + width: 50px; + display: inline-block; + text-align: center; + } +} + +#storybook-root .vertical-align-example { + &:not(:has(table)) { + border: none; + } +} diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 9884c38702..266f90b48c 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,5 +1,11 @@ # @swisspost/design-system-icons +## 9.0.0-next.4 + +### Minor Changes + +- Added icon number 2632. (by [@gfellerph](https://github.com/gfellerph) with [#3952](https://github.com/swisspost/design-system/pull/3952)) + ## 9.0.0-next.3 ### Minor Changes diff --git a/packages/icons/package.json b/packages/icons/package.json index a99c408c8e..bfab4bb763 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-icons", - "version": "9.0.0-next.3", + "version": "9.0.0-next.4", "description": "A collection of Swiss Post icons intended for use with the Design System.", "author": "Swiss Post ", "license": "Apache-2.0", diff --git a/packages/icons/public/post-icons/2632.svg b/packages/icons/public/post-icons/2632.svg new file mode 100644 index 0000000000..a906fca2d3 --- /dev/null +++ b/packages/icons/public/post-icons/2632.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/public/report.json b/packages/icons/public/report.json index be46312c96..51a74ee2e7 100644 --- a/packages/icons/public/report.json +++ b/packages/icons/public/report.json @@ -11385,50 +11385,6 @@ "createdAt": "2020-12-18T07:32:42.000Z", "modifiedAt": "2024-10-18T07:14:11.000Z" }, - { - "uuid": "88307300-5bef-11eb-9f99-005056873709", - "id": 539481, - "type": "picture.pictogram.", - "typeFilter": "pictograms", - "meta": { - "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/539481/storage/NTM5NDg5LzAvbWFzdGVy", - "keywords": [ - "LAD", - "Leistung am Domizil", - "Prestazione a domicilio", - "Service at home", - "Prestation à domicile", - "Wegweiser", - "Sign", - "Segno", - "Signer", - "Sinnbild", - "Symbol", - "Simbolo", - "Symbole", - "Strassenschild", - "Road Sign", - "Segnale stradale", - "Panneau De Signalisation" - ], - "year": [ - "2021" - ] - }, - "file": { - "mime": "image/svg+xml", - "name": "2205.svg", - "basename": "2205", - "ext": ".svg", - "size": { - "width": 0, - "dpi": 72, - "height": 0 - } - }, - "createdAt": "2021-01-21T13:49:50.000Z", - "modifiedAt": "2024-10-24T05:04:06.000Z" - }, { "uuid": "4cc7c010-5bf0-11eb-9f99-005056873709", "id": 539487, @@ -11475,6 +11431,50 @@ "createdAt": "2021-01-21T13:55:20.000Z", "modifiedAt": "2024-10-18T07:14:11.000Z" }, + { + "uuid": "88307300-5bef-11eb-9f99-005056873709", + "id": 539481, + "type": "picture.pictogram.", + "typeFilter": "pictograms", + "meta": { + "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/539481/storage/NTM5NDg5LzAvbWFzdGVy", + "keywords": [ + "LAD", + "Leistung am Domizil", + "Prestazione a domicilio", + "Service at home", + "Prestation à domicile", + "Wegweiser", + "Sign", + "Segno", + "Signer", + "Sinnbild", + "Symbol", + "Simbolo", + "Symbole", + "Strassenschild", + "Road Sign", + "Segnale stradale", + "Panneau De Signalisation" + ], + "year": [ + "2021" + ] + }, + "file": { + "mime": "image/svg+xml", + "name": "2205.svg", + "basename": "2205", + "ext": ".svg", + "size": { + "width": 0, + "dpi": 72, + "height": 0 + } + }, + "createdAt": "2021-01-21T13:49:50.000Z", + "modifiedAt": "2024-10-24T05:04:06.000Z" + }, { "uuid": "044e0500-5bf1-11eb-9f99-005056873709", "id": 539492, @@ -29138,6 +29138,34 @@ "createdAt": "2024-10-24T12:09:32.000Z", "modifiedAt": "2024-10-25T12:05:09.317Z" }, + { + "uuid": "ae649aa0-9b5c-11ef-9712-005056873709", + "id": 820602, + "type": "picture.pictogram.", + "typeFilter": "pictograms", + "meta": { + "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/820602/storage/ODIwNjAxLzAvbWFzdGVy", + "keywords": [ + "shoot photo", + "scattare foto", + "Foto aufnehmen", + "photo prise" + ] + }, + "file": { + "mime": "image/svg+xml", + "name": "2632.svg", + "basename": "2632", + "ext": ".svg", + "size": { + "width": 0, + "dpi": 72, + "height": 0 + } + }, + "createdAt": "2024-11-05T09:59:43.000Z", + "modifiedAt": "2024-11-05T10:11:18.000Z" + }, { "uuid": "6faf6ef0-c5ff-11e7-a943-005056a94f4a", "id": 352241, @@ -41636,12 +41664,12 @@ "wrongViewBox": [], "noKeywords": [ { - "uuid": "717dc650-c5ff-11e7-a943-005056a94f4a", - "id": 352314, + "uuid": "711a4990-c5ff-11e7-a943-005056a94f4a", + "id": 352299, "type": "picture.pictogram.", "typeFilter": "pictograms", "meta": { - "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/352314/storage/NTM3MjI0LzAvbWFzdGVy", + "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/352299/storage/NTM3MTkxLzAvbWFzdGVy", "businessfield": [ "kommunikation" ], @@ -41654,8 +41682,8 @@ }, "file": { "mime": "image/svg+xml", - "name": "3073.svg", - "basename": "3073", + "name": "3058.svg", + "basename": "3058", "ext": ".svg", "size": { "width": 0, @@ -41664,15 +41692,15 @@ } }, "createdAt": "2017-11-10T10:11:07.000Z", - "modifiedAt": "2024-03-12T14:51:51.000Z" + "modifiedAt": "2024-03-12T14:51:50.000Z" }, { - "uuid": "711a4990-c5ff-11e7-a943-005056a94f4a", - "id": 352299, + "uuid": "717dc650-c5ff-11e7-a943-005056a94f4a", + "id": 352314, "type": "picture.pictogram.", "typeFilter": "pictograms", "meta": { - "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/352299/storage/NTM3MTkxLzAvbWFzdGVy", + "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/352314/storage/NTM3MjI0LzAvbWFzdGVy", "businessfield": [ "kommunikation" ], @@ -41685,8 +41713,8 @@ }, "file": { "mime": "image/svg+xml", - "name": "3058.svg", - "basename": "3058", + "name": "3073.svg", + "basename": "3073", "ext": ".svg", "size": { "width": 0, @@ -41695,7 +41723,7 @@ } }, "createdAt": "2017-11-10T10:11:07.000Z", - "modifiedAt": "2024-03-12T14:51:50.000Z" + "modifiedAt": "2024-03-12T14:51:51.000Z" }, { "uuid": "6b09bf30-9901-11eb-935b-005056873709", @@ -41809,11 +41837,11 @@ ], "noSVG": [], "errored": [], - "created": "2024-10-27T01:40:29.123Z", + "created": "2024-11-10T01:37:42.898Z", "stats": { "errors": 0, "notFound": 0, - "success": 961 + "success": 962 }, - "version": "8.3.0" + "version": "8.4.0" } \ No newline at end of file diff --git a/packages/internet-header/CHANGELOG.md b/packages/internet-header/CHANGELOG.md index 6045c62d48..191aa04061 100644 --- a/packages/internet-header/CHANGELOG.md +++ b/packages/internet-header/CHANGELOG.md @@ -1,5 +1,12 @@ # @swisspost/internet-header +## 2.0.0-next.4 + +### Patch Changes + +- Updated dependencies: + - @swisspost/design-system-styles@9.0.0-next.4 + ## 2.0.0-next.3 ### Major Changes diff --git a/packages/internet-header/package.json b/packages/internet-header/package.json index b2f9d12ab1..3fc3baad3d 100644 --- a/packages/internet-header/package.json +++ b/packages/internet-header/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/internet-header", - "version": "2.0.0-next.3", + "version": "2.0.0-next.4", "description": "The header for client facing applications.", "author": "Swiss Post ", "license": "Apache-2.0", @@ -43,7 +43,7 @@ "generate": "stencil generate" }, "dependencies": { - "@swisspost/design-system-styles": "workspace:9.0.0-next.3", + "@swisspost/design-system-styles": "workspace:9.0.0-next.4", "body-scroll-lock": "4.0.0-beta.0", "iframe-resizer": "4.4.5", "jquery": "3.7.1", diff --git a/packages/intranet-header-workspace/CHANGELOG.md b/packages/intranet-header-workspace/CHANGELOG.md index 91492befb9..9089734bf1 100644 --- a/packages/intranet-header-workspace/CHANGELOG.md +++ b/packages/intranet-header-workspace/CHANGELOG.md @@ -1,5 +1,12 @@ # @swisspost/design-system-intranet-header-workspace +## 3.0.22-next.4 + +### Patch Changes + +- Updated dependencies: + - @swisspost/design-system-styles@9.0.0-next.4 + ## 3.0.22-next.3 ### Patch Changes diff --git a/packages/intranet-header-workspace/package.json b/packages/intranet-header-workspace/package.json index 0de925c6c9..4765f5d611 100644 --- a/packages/intranet-header-workspace/package.json +++ b/packages/intranet-header-workspace/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-intranet-header-workspace", - "version": "3.0.22-next.3", + "version": "3.0.22-next.4", "license": "Apache-2.0", "private": true, "scripts": { @@ -23,7 +23,7 @@ "@angular/router": "18.2.10", "@ng-bootstrap/ng-bootstrap": "17.0.0", "@popperjs/core": "2.11.8", - "@swisspost/design-system-styles": "workspace:9.0.0-next.3", + "@swisspost/design-system-styles": "workspace:9.0.0-next.4", "rxjs": "7.8.1", "tslib": "2.6.3", "watch": "1.0.2", diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/CHANGELOG.md b/packages/intranet-header-workspace/projects/intranet-header-showcase/CHANGELOG.md index 079e480e30..59a093b10e 100644 --- a/packages/intranet-header-workspace/projects/intranet-header-showcase/CHANGELOG.md +++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/CHANGELOG.md @@ -1,5 +1,12 @@ # @swisspost/design-system-intranet-header-showcase +## 1.0.10-next.4 + +### Patch Changes + +- Updated dependencies: + - @swisspost/design-system-intranet-header@9.0.0-next.4 + ## 1.0.10-next.3 ### Patch Changes diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/package.json b/packages/intranet-header-workspace/projects/intranet-header-showcase/package.json index d46ae766af..8a6a4aa998 100644 --- a/packages/intranet-header-workspace/projects/intranet-header-showcase/package.json +++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/package.json @@ -1,9 +1,9 @@ { "name": "@swisspost/design-system-intranet-header-showcase", - "version": "1.0.10-next.3", + "version": "1.0.10-next.4", "license": "Apache-2.0", "private": true, "dependencies": { - "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.3" + "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.4" } } diff --git a/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md b/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md index fdf8cfd7e4..80c03b908e 100644 --- a/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md +++ b/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md @@ -1,5 +1,12 @@ # @swisspost/design-system-intranet-header +## 9.0.0-next.4 + +### Patch Changes + +- Updated dependencies: + - @swisspost/design-system-styles@9.0.0-next.4 + ## 9.0.0-next.3 ### Patch Changes diff --git a/packages/intranet-header-workspace/projects/intranet-header/package.json b/packages/intranet-header-workspace/projects/intranet-header/package.json index e140974e8c..6b514d97bf 100644 --- a/packages/intranet-header-workspace/projects/intranet-header/package.json +++ b/packages/intranet-header-workspace/projects/intranet-header/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-intranet-header", - "version": "9.0.0-next.3", + "version": "9.0.0-next.4", "description": "Intranet header for internal Swiss Post applications as an Angular component.", "author": "Swiss Post ", "license": "Apache-2.0", @@ -18,11 +18,11 @@ "linkDirectory": true }, "dependencies": { - "@swisspost/design-system-styles": "workspace:9.0.0-next.3", + "@swisspost/design-system-styles": "workspace:9.0.0-next.4", "tslib": "2.6.3" }, "devDependencies": { - "@swisspost/design-system-intranet-header-workspace": "workspace:3.0.22-next.3" + "@swisspost/design-system-intranet-header-workspace": "workspace:3.0.22-next.4" }, "peerDependencies": { "@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0", diff --git a/packages/migrations/CHANGELOG.md b/packages/migrations/CHANGELOG.md index ff686a4cb5..2a14a52f7a 100644 --- a/packages/migrations/CHANGELOG.md +++ b/packages/migrations/CHANGELOG.md @@ -1,5 +1,7 @@ # @swisspost/design-system-migrations +## 9.0.0-next.4 + ## 9.0.0-next.3 ## 9.0.0-next.2 diff --git a/packages/migrations/package.json b/packages/migrations/package.json index bc96131ef3..2cf92879b2 100644 --- a/packages/migrations/package.json +++ b/packages/migrations/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-migrations", - "version": "9.0.0-next.3", + "version": "9.0.0-next.4", "description": "Scripts to migrate an Angular application from one Design System version to another.", "author": "Swiss Post ", "license": "Apache-2.0", diff --git a/packages/nextjs-integration/CHANGELOG.md b/packages/nextjs-integration/CHANGELOG.md index 87b1330cee..85e09490e7 100644 --- a/packages/nextjs-integration/CHANGELOG.md +++ b/packages/nextjs-integration/CHANGELOG.md @@ -1,5 +1,14 @@ # @swisspost/design-system-nextjs-integration +## 0.1.14-next.4 + +### Patch Changes + +- Updated dependencies: + - @swisspost/design-system-styles@9.0.0-next.4 + - @swisspost/internet-header@2.0.0-next.4 + - @swisspost/design-system-components-react@9.0.0-next.4 + ## 0.1.14-next.3 ### Patch Changes diff --git a/packages/nextjs-integration/package.json b/packages/nextjs-integration/package.json index d1377d9510..11fe8acd03 100644 --- a/packages/nextjs-integration/package.json +++ b/packages/nextjs-integration/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-nextjs-integration", - "version": "0.1.14-next.3", + "version": "0.1.14-next.4", "private": true, "scripts": { "dev": "next dev", @@ -9,9 +9,9 @@ "lint": "next lint" }, "dependencies": { - "@swisspost/design-system-components-react": "workspace:9.0.0-next.3", - "@swisspost/design-system-styles": "workspace:9.0.0-next.3", - "@swisspost/internet-header": "workspace:2.0.0-next.3", + "@swisspost/design-system-components-react": "workspace:9.0.0-next.4", + "@swisspost/design-system-styles": "workspace:9.0.0-next.4", + "@swisspost/internet-header": "workspace:2.0.0-next.4", "next": "15.0.1", "react": "^18", "react-dom": "^18" diff --git a/packages/styles-primeng-workspace/CHANGELOG.md b/packages/styles-primeng-workspace/CHANGELOG.md index b81ee685f3..7f2aef3547 100644 --- a/packages/styles-primeng-workspace/CHANGELOG.md +++ b/packages/styles-primeng-workspace/CHANGELOG.md @@ -1,5 +1,12 @@ # @swisspost/design-system-styles-primeng-workspace +## 1.0.6-next.4 + +### Patch Changes + +- Updated dependencies: + - @swisspost/design-system-styles@9.0.0-next.4 + ## 1.0.6-next.3 ### Patch Changes diff --git a/packages/styles-primeng-workspace/package.json b/packages/styles-primeng-workspace/package.json index 312a3becaa..bfc99bbf30 100644 --- a/packages/styles-primeng-workspace/package.json +++ b/packages/styles-primeng-workspace/package.json @@ -1,7 +1,7 @@ { "name": "@swisspost/design-system-styles-primeng-workspace", "description": "Showcase for a Post like custom prime-ng theme", - "version": "1.0.6-next.3", + "version": "1.0.6-next.4", "license": "Apache-2.0", "private": true, "scripts": { @@ -22,7 +22,7 @@ "@angular/platform-browser": "18.2.10", "@angular/platform-browser-dynamic": "18.2.10", "@angular/router": "18.2.10", - "@swisspost/design-system-styles": "workspace:9.0.0-next.3", + "@swisspost/design-system-styles": "workspace:9.0.0-next.4", "primeng": "17.18.7", "rxjs": "7.8.1", "tslib": "2.6.3", diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/CHANGELOG.md b/packages/styles-primeng-workspace/projects/styles-primeng/CHANGELOG.md index b20af83a42..e21e541e05 100644 --- a/packages/styles-primeng-workspace/projects/styles-primeng/CHANGELOG.md +++ b/packages/styles-primeng-workspace/projects/styles-primeng/CHANGELOG.md @@ -1,5 +1,12 @@ # @swisspost/design-system-styles-primeng +## 9.0.0-next.4 + +### Patch Changes + +- Updated dependencies: + - @swisspost/design-system-styles@9.0.0-next.4 + ## 9.0.0-next.3 ### Patch Changes diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/package.json b/packages/styles-primeng-workspace/projects/styles-primeng/package.json index 6bf017259b..3572a3bd59 100644 --- a/packages/styles-primeng-workspace/projects/styles-primeng/package.json +++ b/packages/styles-primeng-workspace/projects/styles-primeng/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-styles-primeng", - "version": "9.0.0-next.3", + "version": "9.0.0-next.4", "description": "Swiss Post styles for PrimeNg datatable.", "author": "Swiss Post ", "license": "Apache-2.0", @@ -23,7 +23,7 @@ "primeng": "^17.18.0" }, "dependencies": { - "@swisspost/design-system-styles": "workspace:9.0.0-next.3", + "@swisspost/design-system-styles": "workspace:9.0.0-next.4", "tslib": "2.6.3" }, "sideEffects": false, diff --git a/packages/styles/CHANGELOG.md b/packages/styles/CHANGELOG.md index 7c92a2548b..724092b33d 100644 --- a/packages/styles/CHANGELOG.md +++ b/packages/styles/CHANGELOG.md @@ -1,5 +1,33 @@ # @swisspost/design-system-styles +## 9.0.0-next.4 + +### Major Changes + +- Removed regular button size. Buttons that were previously using `btn-rg` will now fall back to the default `btn-md` size. (by [@leagrdv](https://github.com/leagrdv) with [#3849](https://github.com/swisspost/design-system/pull/3849)) + +- Updated list group to v2 and added new options: list links, list documents and list switches. (by [@leagrdv](https://github.com/leagrdv) with [#3740](https://github.com/swisspost/design-system/pull/3740)) + +- Removed the `btn-animated` class. It no longer has any effect and can be removed from existing buttons. (by [@leagrdv](https://github.com/leagrdv) with [#3849](https://github.com/swisspost/design-system/pull/3849)) + +- Removed the `.breadcrumb-item` class, which previously handled styling for breadcrumb items. Introduced a new `post-breadcrumb-item` that should be used in place of the `.breadcrumb-item` class. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3659](https://github.com/swisspost/design-system/pull/3659)) + +### Minor Changes + +- Added Form Footer component. (by [@leagrdv](https://github.com/leagrdv) with [#3616](https://github.com/swisspost/design-system/pull/3616)) + +- Created token-based styles for `
      ` elements. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#3859](https://github.com/swisspost/design-system/pull/3859)) + +- Updated vertical-align utility (by [@myrta2302](https://github.com/myrta2302) with [#3805](https://github.com/swisspost/design-system/pull/3805)) + +- Updated button component to v2. (by [@leagrdv](https://github.com/leagrdv) with [#3849](https://github.com/swisspost/design-system/pull/3849)) + +- Added the skiplinks component to styles and documentation. (by [@leagrdv](https://github.com/leagrdv) with [#3875](https://github.com/swisspost/design-system/pull/3875)) + +- Added close button web component. (by [@leagrdv](https://github.com/leagrdv) with [#3880](https://github.com/swisspost/design-system/pull/3880)) + +- Internalized bootstraps floating utilities into the design system. (by [@myrta2302](https://github.com/myrta2302) with [#3752](https://github.com/swisspost/design-system/pull/3752)) + ## 9.0.0-next.3 ### Major Changes diff --git a/packages/styles/package.json b/packages/styles/package.json index ae55c56de7..97215527b6 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -1,6 +1,6 @@ { "name": "@swisspost/design-system-styles", - "version": "9.0.0-next.3", + "version": "9.0.0-next.4", "description": "Design System Styles for the Swiss Post web platform.", "author": "Swiss Post ", "license": "Apache-2.0", @@ -49,8 +49,8 @@ "gulp-sourcemaps": "3.0.0" }, "devDependencies": { - "@swisspost/design-system-icons": "workspace:9.0.0-next.3", - "@swisspost/design-system-tokens": "workspace:9.0.0-next.3", + "@swisspost/design-system-icons": "workspace:9.0.0-next.4", + "@swisspost/design-system-tokens": "workspace:9.0.0-next.4", "@types/node": "20.14.14", "autoprefixer": "10.4.19", "copyfiles": "2.4.1", diff --git a/packages/styles/src/_svg-icon-map.scss b/packages/styles/src/_svg-icon-map.scss index 634df00619..182f3cdb19 100644 --- a/packages/styles/src/_svg-icon-map.scss +++ b/packages/styles/src/_svg-icon-map.scss @@ -559,6 +559,8 @@ $svg-icon-map: ( "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.6 24h-9.7v-1.5c4-3.5 7.8-7.6 7.8-10.3 0-4.2-6.3-2.4-6.9-2l-.3-1.4c.6-.3 8.8-3.1 8.8 3.4 0 3.8-7.3 10.1-7.8 10.4h8.1z'/%3E%3C/svg%3E", '3000': "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Crect/%3E%3Cpath d='M17.4 8.2V24h-1.6V9.9c-.2.2-.5.5-.9.8-.3.3-.7.6-1 .9l-.9.8-.8-1L16 8.2z'/%3E%3C/svg%3E", + '2632': + "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16s7.16 16 16 16 16-7.16 16-16S24.84 0 16 0m0 30.67C7.91 30.67 1.33 24.09 1.33 16S7.91 1.33 16 1.33 30.67 7.91 30.67 16 24.09 30.67 16 30.67M9.18 10.66c-3.35 3.35-3.35 8.81 0 12.16 1.68 1.68 3.88 2.51 6.08 2.51s4.4-.84 6.08-2.51a8.7 8.7 0 0 0 2.21-3.81L24.3 7.7l-11.24.73a8.6 8.6 0 0 0-3.88 2.23m13.68-1.53-.64 9.65a7.16 7.16 0 0 1-1.83 3.09c-1.37 1.37-3.19 2.12-5.14 2.12s-3.77-.75-5.14-2.12c-2.83-2.83-2.83-7.44 0-10.27.87-.87 1.96-1.51 3.16-1.85l9.58-.62Zm-7.6 10.83a3.2 3.2 0 0 0 2.28-.94 3.223 3.223 0 0 0 0-4.56c-.63-.63-1.45-.94-2.28-.94s-1.65.31-2.28.94a3.223 3.223 0 0 0 0 4.56 3.2 3.2 0 0 0 2.28.94m-1.34-4.56c.36-.36.83-.55 1.34-.55s.98.2 1.34.55c.36.36.55.83.55 1.34s-.2.98-.55 1.34c-.36.36-.83.55-1.34.55s-.98-.2-1.34-.55-.55-.83-.55-1.34.2-.98.55-1.34'/%3E%3C/svg%3E", '2631': "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.99 24.54h-4.07v-4.82h4.07v-1.34h-7.76c-.37.5-.79.94-1.25 1.34h3.56v4.82h-6.28V21.3c-.44.16-.88.28-1.33.36v2.88h-6.32v-4.03a8 8 0 0 1-1.19-.92c-.04-.04-.08-.07-.12-.1-.36-.35-.69-.72-.98-1.11H.02v1.34h3.54v4.82H.01v7.49H32v-7.49zM4.95 19.72h6.32v4.82H4.95zm2.73 10.97H1.35v-4.82h6.33zm7.66 0H9.01v-4.82h6.33zm7.66 0h-6.33v-4.82H23zm7.67 0h-6.33v-4.82h6.33zM17.42 20.46c3.63 0 7.28-2.75 7.28-7.84-.01-2.46-.77-4.67-2.16-6.82 0 2.54-1.49 3.67-2.54 3.67C21.06 1.93 15.62.1 15.62.1c0 5.5-5.8 6.41-5.8 13.04 0 1.39 1.17 7.33 7.6 7.33Zm-2.36-3.77c.23.08.47.11.71.11h1.33v-1.34c0-.68.12-1.22.29-1.64.25.35.53.64.77.9.64.67 1.05 1.11 1.05 2.17 0 .02-.09 2.02-2.15 2.02-.96 0-1.99-.7-2-2.23Zm-1.11-9.88c1.05-1.25 2.19-2.63 2.72-4.52 1.18 1.05 2.55 3.13 2.02 6.99l-.21 1.52h1.53c1.02 0 2.05-.53 2.8-1.51.38 1.09.56 2.19.57 3.33 0 2.93-1.42 4.88-3.26 5.83.33-.65.44-1.28.44-1.55 0-3.03-2.66-3.08-2.66-5.6 0 0-2.12.98-2.12 4.17-.8 0-1.05-.98-1.05-1.93-.63.99-.99 2-.99 3.13 0 .6.11 1.12.31 1.58-2.66-1.66-2.88-5.07-2.88-5.11 0-2.98 1.36-4.6 2.79-6.32Z'/%3E%3C/svg%3E", '2630': diff --git a/packages/styles/src/components/_index.scss b/packages/styles/src/components/_index.scss index b75e0b8370..41d7eacdf6 100644 --- a/packages/styles/src/components/_index.scss +++ b/packages/styles/src/components/_index.scss @@ -25,6 +25,7 @@ @use 'forms'; @use 'grid'; @use 'icon-button'; +@use 'icon-close-button'; @use 'icons'; @use 'lead'; @use 'list-group'; diff --git a/packages/styles/src/components/icon-close-button.scss b/packages/styles/src/components/icon-close-button.scss new file mode 100644 index 0000000000..c8eb34d175 --- /dev/null +++ b/packages/styles/src/components/icon-close-button.scss @@ -0,0 +1,28 @@ +@use '../functions/tokens'; +@use '../tokens/components'; +@use './../mixins/utilities'; + +tokens.$default-map: components.$post-close; + +.btn-icon-close { + padding: 0; + border: unset; + min-height: unset; + min-width: unset; + width: tokens.get('close-size'); + height: tokens.get('close-size'); + border-radius: tokens.get('close-border-radius'); + background-color: tokens.get('close-enabled-bg'); + color: tokens.get('close-enabled-fg'); + + > post-icon { + width: tokens.get('close-icon-size'); + height: tokens.get('close-icon-size'); + } + + @include utilities.not-disabled-hover() { + cursor: pointer; + background-color: tokens.get('close-hover-bg'); + color: tokens.get('close-hover-fg'); + } +} diff --git a/packages/styles/src/mixins/_media.scss b/packages/styles/src/mixins/_media.scss index 340afbaeee..475321853b 100644 --- a/packages/styles/src/mixins/_media.scss +++ b/packages/styles/src/mixins/_media.scss @@ -2,6 +2,8 @@ @use 'sass:meta'; @use '../functions/breakpoint'; +$offset: 0.01; + /** Creates a min-width breakpoint with the given value @param $device-size A pixel value or a key for the breakpoints map @@ -29,7 +31,7 @@ $device-size: breakpoint.min-width($device-size); } - @media screen and (max-width: ($device-size - 0.01)) { + @media screen and (max-width: ($device-size - $offset)) { @content; } } @@ -47,7 +49,7 @@ $max-size: breakpoint.min-width($max-size); } - @media screen and (min-width: $min-size) and (max-width: ($max-size - 0.01)) { + @media screen and (min-width: $min-size) and (max-width: ($max-size - $offset)) { @content; } } diff --git a/packages/styles/src/themes/bootstrap/_utilities.scss b/packages/styles/src/themes/bootstrap/_utilities.scss index e673363b48..403eeabf1b 100644 --- a/packages/styles/src/themes/bootstrap/_utilities.scss +++ b/packages/styles/src/themes/bootstrap/_utilities.scss @@ -54,6 +54,8 @@ $utilities: map.remove($utilities, 'justify-content'); $utilities: map.remove($utilities, 'display'); +$utilities: map.remove($utilities, 'vertical-align'); + $utilities: map.remove($utilities, 'float'); $utilities: map.remove($utilities, 'opacity'); diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss index aabbfe25c3..976fd1fe3b 100644 --- a/packages/styles/src/utilities/_variables.scss +++ b/packages/styles/src/utilities/_variables.scss @@ -88,6 +88,11 @@ $utilities: ( 100: 1, ), ), + 'align': ( + property: vertical-align, + class: align, + values: baseline top middle bottom text-bottom text-top, + ), 'float': ( responsive: true, property: float, @@ -224,7 +229,6 @@ $utilities: ( class: ms, values: from-tokens('spacing', 'margin'), ), - 'padding': ( responsive: true, property: padding, @@ -267,7 +271,6 @@ $utilities: ( class: ps, values: from-tokens('spacing', 'padding'), ), - 'gap': ( responsive: true, property: gap, diff --git a/packages/tokens/CHANGELOG.md b/packages/tokens/CHANGELOG.md index 16cd9f8705..fbc6aba9bc 100644 --- a/packages/tokens/CHANGELOG.md +++ b/packages/tokens/CHANGELOG.md @@ -1,5 +1,7 @@ # @swisspost/design-system-tokens +## 9.0.0-next.4 + ## 9.0.0-next.3 ### Minor Changes diff --git a/packages/tokens/package.json b/packages/tokens/package.json index 5781f6b8d7..2bc80f0ddb 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -1,8 +1,7 @@ { "name": "@swisspost/design-system-tokens", - "version": "9.0.0-next.3", - "private": true, - "description": "Design Tokens for the Swiss Post.", + "version": "9.0.0-next.4", + "description": "Design Tokens for the Swiss Post Design System.", "author": "Swiss Post ", "license": "Apache-2.0", "repository": { @@ -15,7 +14,8 @@ }, "type": "module", "scripts": { - "build": "pnpm clean && node ./build.js", + "copy-files": "copyfiles -f package.json README.md CONTRIBUTING.md CHANGELOG.md LICENSE dist", + "build": "pnpm clean && node ./build.js && pnpm copy-files", "clean": "rimraf dist", "build:verbose": "node ./build.js --verbosity=verbose" }, @@ -29,11 +29,12 @@ ], "publishConfig": { "directory": "./dist", - "access": "restricted", + "access": "public", "linkDirectory": true }, "devDependencies": { "@tokens-studio/sd-transforms": "1.2.2", + "copyfiles": "2.4.1", "rimraf": "6.0.1", "style-dictionary": "4.0.1" } diff --git a/packages/tokens/tokensstudio-generated/tokens.json b/packages/tokens/tokensstudio-generated/tokens.json index 75599a9cd8..d953769d56 100644 --- a/packages/tokens/tokensstudio-generated/tokens.json +++ b/packages/tokens/tokensstudio-generated/tokens.json @@ -235,6 +235,10 @@ "$type": "dimension", "$value": "6" }, + "7": { + "$type": "dimension", + "$value": "7" + }, "8": { "$type": "dimension", "$value": "8" @@ -1375,7 +1379,7 @@ "$value": "{post.core.color.sandgrey.100}" } }, - "emphasis": { + "accent": { "bg": { "$type": "color", "$value": "{post.core.color.sandgrey.080}" @@ -1478,7 +1482,7 @@ "$value": "{post.core.color.cargo.blue}" } }, - "emphasis": { + "accent": { "bg": { "$type": "color", "$value": "{post.core.color.cargo.blue}" @@ -2141,7 +2145,7 @@ "$value": "{post.core.color.sandgrey.100}" } }, - "emphasis": { + "accent": { "bg": { "$type": "color", "$value": "{post.core.color.sandgrey.002}" @@ -2191,6 +2195,76 @@ } } } + }, + "cargo": { + "scheme": { + "color": { + "surface": { + "default": { + "bg": { + "$type": "color", + "$value": "{post.core.color.sandgrey.080}" + }, + "fg": { + "$type": "color", + "$value": "{post.core.color.brand.white}" + }, + "stroke": { + "$type": "color", + "$value": "{post.core.color.brand.white}" + } + }, + "accent1": { + "bg": { + "$type": "color", + "$value": "{post.core.color.sandgrey.100}" + }, + "fg": { + "$type": "color", + "$value": "{post.core.color.brand.white}" + } + }, + "alternate": { + "bg": { + "$type": "color", + "$value": "{post.core.color.sandgrey.100}" + }, + "fg": { + "$type": "color", + "$value": "{post.core.color.brand.white}" + } + }, + "brand": { + "bg": { + "$type": "color", + "$value": "{post.core.color.cargo.green}" + }, + "fg": { + "$type": "color", + "$value": "{post.core.color.brand.white}" + }, + "fg-accent": { + "$type": "color", + "$value": "{post.core.color.cargo.blue}" + } + }, + "accent": { + "bg": { + "$type": "color", + "$value": "{post.core.color.cargo.blue}" + }, + "fg": { + "$type": "color", + "$value": "{post.core.color.sandgrey.100}" + }, + "fg-accent": { + "$type": "color", + "$value": "{post.core.color.cargo.green}" + } + } + } + } + } } } }, @@ -2657,6 +2731,10 @@ "29": { "$type": "spacing", "$value": "{post.core.dimension.25-5}" + }, + "30": { + "$type": "spacing", + "$value": "{post.core.dimension.6-5}" } } }, @@ -2748,6 +2826,10 @@ "5": { "$type": "sizing", "$value": "{post.core.dimension.48}" + }, + "6": { + "$type": "sizing", + "$value": "{post.core.dimension.64}" } }, "appstore": { @@ -3261,6 +3343,10 @@ "29": { "$type": "spacing", "$value": "{post.core.dimension.23}" + }, + "30": { + "$type": "spacing", + "$value": "{post.core.dimension.7}" } }, "inline": { @@ -3350,6 +3436,10 @@ "5": { "$type": "sizing", "$value": "{post.core.dimension.40}" + }, + "6": { + "$type": "sizing", + "$value": "{post.core.dimension.56}" } }, "appstore": { @@ -3853,6 +3943,10 @@ "29": { "$type": "spacing", "$value": "{post.core.dimension.24-5}" + }, + "30": { + "$type": "spacing", + "$value": "{post.core.dimension.8-5}" } } }, @@ -4170,11 +4264,11 @@ "accent": { "bg": { "$type": "color", - "$value": "{post.scheme.color.surface.emphasis.bg}" + "$value": "{post.scheme.color.surface.accent.bg}" }, "fg": { "$type": "color", - "$value": "{post.scheme.color.surface.emphasis.fg}" + "$value": "{post.scheme.color.surface.accent.fg}" } }, "alternate": { @@ -4220,21 +4314,21 @@ "default": { "bg": { "$type": "color", - "$value": "{post.scheme.color.surface.default.bg}" + "$value": "{post.cargo.scheme.color.surface.default.bg}" }, "fg": { "$type": "color", - "$value": "{post.scheme.color.surface.default.fg}" + "$value": "{post.cargo.scheme.color.surface.default.fg}" } }, "alternate": { "bg": { "$type": "color", - "$value": "{post.scheme.color.surface.alternate.bg}" + "$value": "{post.cargo.scheme.color.surface.alternate.bg}" }, "fg": { "$type": "color", - "$value": "{post.scheme.color.surface.alternate.fg}" + "$value": "{post.cargo.scheme.color.surface.alternate.fg}" } }, "brand": { @@ -4250,11 +4344,11 @@ "accent": { "bg": { "$type": "color", - "$value": "{post.cargo.scheme.color.surface.emphasis.bg}" + "$value": "{post.cargo.scheme.color.surface.accent.bg}" }, "fg": { "$type": "color", - "$value": "{post.cargo.scheme.color.surface.emphasis.fg-accent}" + "$value": "{post.cargo.scheme.color.surface.accent.fg-accent}" } } } @@ -6442,11 +6536,11 @@ "color": { "icon-bg": { "$type": "color", - "$value": "{post.scheme.color.surface.emphasis.bg}" + "$value": "{post.scheme.color.surface.accent.bg}" }, "icon-fg": { "$type": "color", - "$value": "{post.scheme.color.surface.emphasis.fg}" + "$value": "{post.scheme.color.surface.accent.fg}" }, "text-fg": { "$type": "color", @@ -6612,15 +6706,15 @@ "close-button": { "enabled-fg": { "$type": "color", - "$value": "{post.scheme.color.surface.emphasis.fg}" + "$value": "{post.scheme.color.surface.accent.fg}" }, "selected-fg": { "$type": "color", - "$value": "{post.scheme.color.surface.emphasis.fg}" + "$value": "{post.scheme.color.surface.accent.fg}" }, "hover-fg": { "$type": "color", - "$value": "{post.scheme.color.surface.emphasis.fg}" + "$value": "{post.scheme.color.surface.accent.fg}" }, "hover-bg": { "$type": "color", @@ -6640,11 +6734,11 @@ }, "enabled-fg": { "$type": "color", - "$value": "{post.scheme.color.surface.emphasis.fg}" + "$value": "{post.scheme.color.surface.accent.fg}" }, "selected-fg": { "$type": "color", - "$value": "{post.scheme.color.surface.emphasis.fg}" + "$value": "{post.scheme.color.surface.accent.fg}" }, "hover-fg": { "$type": "color", @@ -6676,11 +6770,11 @@ "surface": { "bg": { "$type": "color", - "$value": "{post.scheme.color.surface.emphasis.bg}" + "$value": "{post.scheme.color.surface.accent.bg}" }, "fg": { "$type": "color", - "$value": "{post.scheme.color.surface.emphasis.fg}" + "$value": "{post.scheme.color.surface.accent.fg}" }, "border-radius": { "$type": "borderRadius", @@ -6712,7 +6806,7 @@ "text": { "selected-fg": { "$type": "color", - "$value": "{post.scheme.color.surface.emphasis.fg}" + "$value": "{post.scheme.color.surface.accent.fg}" } }, "elevation": { @@ -7700,19 +7794,19 @@ "$type": "color", "$value": "{post.scheme.color.interactive.primary.enabled.fg2}" }, - "enabled-stroke": { + "enabled-border": { "$type": "color", "$value": "{post.scheme.color.interactive.primary.enabled.stroke}" }, - "hover-stroke": { + "hover-border": { "$type": "color", "$value": "{post.scheme.color.interactive.primary.hover.stroke}" }, - "disabled-stroke": { + "disabled-border": { "$type": "color", "$value": "{post.scheme.color.interactive.primary.disabled.stroke}" }, - "selected-stroke": { + "selected-border": { "$type": "color", "$value": "{post.scheme.color.interactive.primary.selected.stroke1}" }, @@ -7741,21 +7835,9 @@ }, "padding": { "block": { - "text1": { - "$type": "spacing", - "$value": "{post.device.spacing.padding.block.1}" - }, - "text2": { - "$type": "spacing", - "$value": "{post.device.spacing.padding.block.3}" - }, - "text-assist": { + "assist": { "$type": "spacing", "$value": "{post.device.spacing.padding.block.5}" - }, - "text5": { - "$type": "spacing", - "$value": "{post.device.spacing.padding.block.2}" } }, "inline": { @@ -7767,7 +7849,7 @@ "$type": "spacing", "$value": "{post.device.spacing.padding.3}" }, - "text-assist": { + "assist": { "$type": "spacing", "$value": "{post.device.spacing.padding.2}" } @@ -7777,6 +7859,10 @@ "icon": { "$type": "sizing", "$value": "{post.device.sizing.notification.1}" + }, + "height": { + "$type": "sizing", + "$value": "{post.device.sizing.interactive.button.height.6}" } }, "border-radius": { @@ -7837,6 +7923,32 @@ } } } + }, + "filled": { + "padding": { + "block": { + "start": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.block.30}" + } + } + }, + "font-size": { + "$type": "fontSizes", + "$value": "{post.device.font-size.10}" + } + } + }, + "validation": { + "icon": { + "position": { + "inline": { + "end": { + "$type": "dimension", + "$value": "{post.device.position.2}" + } + } + } } }, "filled": { @@ -7852,19 +7964,11 @@ } } } - } - } - }, - "input": { - "validation": { - "icon": { - "position": { - "inline": { - "end": { - "$type": "dimension", - "$value": "{post.device.position.2}" - } - } + }, + "assist": { + "font-size": { + "$type": "fontSizes", + "$value": "{post.device.font-size.10}" } } } @@ -9071,6 +9175,7 @@ "post.core.dimension.4": "652e6941eb5ffe7b11b4919943eaa82985cea887", "post.core.dimension.5": "4948cef0547c7028ae2b54d67888730ae50a7a51", "post.core.dimension.6": "2fb4138c6e29828418c6e0d8c3bb0730efb65c1a", + "post.core.dimension.7": "b425da6d6f562134ae5a90e3354c1dd426d7a6dc", "post.core.dimension.8": "32a49eb9f6a3706172348bdf0fd51703bdecc0e9", "post.core.dimension.9": "ca8146c7e9870c3cf4e15aa0cd4141b129e2a5b5", "post.core.dimension.10": "0b8ab9e8f85d59a203c115bacd0e1467302b37d8", @@ -9116,6 +9221,8 @@ "post.core.dimension.16-5": "18a30d47473c6776f526d6695a08ebe450ef9fef", "post.core.dimension.17-5": "de25828e578f9363bd50fec54426f989e8d618e1", "post.core.dimension.26-5": "fc0f8d331a3a6869de95d2f1031974fbc926e0c4", + "post.core.dimension.25-5": "52d70e1c63622fee6eeb2d8a176796da6bb60233", + "post.core.dimension.24-5": "b4bfb43876d1f47a6b0c4e965437a2f29327ff8c", "post.core.font-weight.300": "4436d559d2383ae1a0ad88d57da9ce6360a7aef7", "post.core.font-weight.400": "2e0dea0ce52e09ecf1ea56fc61739b5dfd4c1335", "post.core.font-weight.500": "b4f03965c86694b373279706e6a7abd0f85ef831", @@ -9297,17 +9404,15 @@ "post.scheme.color.surface.alternate.fg": "c301615214e1cca28102b3a651f3b8c9da42ca5c", "post.scheme.color.surface.brand.bg": "5882e06454efa138fece081c28b7788f52e81621", "post.scheme.color.surface.brand.fg": "962f01542da03311583047fbea671773938b354f", - "post.scheme.color.surface.emphasis.bg": "e3fe18387eb6baccd0e82d158ea15da28536615d", - "post.scheme.color.surface.emphasis.fg": "d3570e8972397cb630ce75bf875bfd6a22b4157a", - "post.scheme.color.surface.emphasis.fg-accent": "d7893d385ffd4cb44d7c3f5299884b5719e5e8f5", + "post.scheme.color.surface.accent.bg": "e3fe18387eb6baccd0e82d158ea15da28536615d", + "post.scheme.color.surface.accent.fg": "d3570e8972397cb630ce75bf875bfd6a22b4157a", + "post.scheme.color.surface.accent.fg-accent": "d7893d385ffd4cb44d7c3f5299884b5719e5e8f5", "post.scheme.color.notification.badge.bg": "0de95de05ec88e26525f4211c81f0f8dbe321ebb", "post.scheme.color.notification.badge.fg": "48ff724df33b9947e7e74a729c5dc4a7c930f58c", "post.scheme.color.notification.badge.stroke": "3b53b100fef4f7aa9a97b64e7d2fa8fc9c51aba2", "post.scheme.color.notification.popover.hover": "9e2793c01c18d6947c2d4e898afcb379426d952c", "post.scheme.accent.bg-scheme.1": "a7a55881dbc34e6d6b85f0bd30188fb164677678", "post.scheme.accent.bg-scheme.2": "a343e732fc434c2a0b9c1597748d8e12a1755aed", - "post.scheme.color.signal.neutral-dark": "790da7ad43fa67de3b2da99582d332791fb09e9f", - "post.scheme.color.signal.neutral": "daad7eeff08d93aeed6c1ad67af23e58bdffd198", "post.cargo.scheme.color.surface.default.bg": "41eb3ffd4461ead71c3379a48099d9c674aab882", "post.cargo.scheme.color.surface.default.fg": "d42f699b9bbf506aee792a6a5d28a01f8fdc3078", "post.cargo.scheme.color.surface.default.stroke": "68a8156f2b87010e07a024843e8efbbdf62022d3", @@ -9318,9 +9423,11 @@ "post.cargo.scheme.color.surface.brand.bg": "8ac0a07d302c92c052a22bb1fd904776139683c2", "post.cargo.scheme.color.surface.brand.fg": "45dd08b4fe3f397ab01e14e3ac0df31ba570ea21", "post.cargo.scheme.color.surface.brand.fg-accent": "15eac3957d30e8b21001a30f17a62fd362e0c5f0", - "post.cargo.scheme.color.surface.emphasis.bg": "2dc2983e13aad7ec4e60552838d56966fa9908d6", - "post.cargo.scheme.color.surface.emphasis.fg": "e724294b65aca52dcb29118010534f0482bd0881", - "post.cargo.scheme.color.surface.emphasis.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2" + "post.cargo.scheme.color.surface.accent.bg": "2dc2983e13aad7ec4e60552838d56966fa9908d6", + "post.cargo.scheme.color.surface.accent.fg": "e724294b65aca52dcb29118010534f0482bd0881", + "post.cargo.scheme.color.surface.accent.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2", + "post.scheme.color.signal.neutral-dark": "790da7ad43fa67de3b2da99582d332791fb09e9f", + "post.scheme.color.signal.neutral": "daad7eeff08d93aeed6c1ad67af23e58bdffd198" } }, { @@ -9329,10 +9436,8 @@ "$figmaStyleReferences": {}, "selectedTokenSets": { "core": "source", - "Scheme/Light": "enabled", "Scheme/Dark": "enabled" }, - "group": "Scheme", "$figmaCollectionId": "VariableCollectionId:718:1666", "$figmaModeId": "718:2", "$figmaVariableReferences": { @@ -9344,8 +9449,6 @@ "post.scheme.color.signal.warning-light": "89302ce07bdf3dda8857ae055241ba5e55af16c7", "post.scheme.color.signal.information-dark": "04907dc5972eef19d828ea38aafba62220824b5c", "post.scheme.color.signal.information-light": "92a36e527934b27f741ef1d21ccd77f46081bcea", - "post.scheme.color.signal.neutral-dark": "790da7ad43fa67de3b2da99582d332791fb09e9f", - "post.scheme.color.signal.neutral": "daad7eeff08d93aeed6c1ad67af23e58bdffd198", "post.scheme.color.signal.success-solo": "005074d4749ba0d64a11e8a5c742c48631c98dca", "post.scheme.color.signal.error-solo": "93e0cd4e7a5f9b2a33a76c9c0f3ab60dc5543f66", "post.scheme.color.interactive.button.primary.enabled.fg": "2a55e0da7a6a77af2ab682cfee46da43264624cf", @@ -9479,9 +9582,9 @@ "post.scheme.color.surface.alternate.fg": "c301615214e1cca28102b3a651f3b8c9da42ca5c", "post.scheme.color.surface.brand.bg": "5882e06454efa138fece081c28b7788f52e81621", "post.scheme.color.surface.brand.fg": "962f01542da03311583047fbea671773938b354f", - "post.scheme.color.surface.emphasis.bg": "e3fe18387eb6baccd0e82d158ea15da28536615d", - "post.scheme.color.surface.emphasis.fg": "d3570e8972397cb630ce75bf875bfd6a22b4157a", - "post.scheme.color.surface.emphasis.fg-accent": "d7893d385ffd4cb44d7c3f5299884b5719e5e8f5", + "post.scheme.color.surface.accent.bg": "e3fe18387eb6baccd0e82d158ea15da28536615d", + "post.scheme.color.surface.accent.fg": "d3570e8972397cb630ce75bf875bfd6a22b4157a", + "post.scheme.color.surface.accent.fg-accent": "d7893d385ffd4cb44d7c3f5299884b5719e5e8f5", "post.scheme.color.notification.badge.bg": "0de95de05ec88e26525f4211c81f0f8dbe321ebb", "post.scheme.color.notification.badge.fg": "48ff724df33b9947e7e74a729c5dc4a7c930f58c", "post.scheme.color.notification.badge.stroke": "3b53b100fef4f7aa9a97b64e7d2fa8fc9c51aba2", @@ -9498,10 +9601,11 @@ "post.cargo.scheme.color.surface.brand.bg": "8ac0a07d302c92c052a22bb1fd904776139683c2", "post.cargo.scheme.color.surface.brand.fg": "45dd08b4fe3f397ab01e14e3ac0df31ba570ea21", "post.cargo.scheme.color.surface.brand.fg-accent": "15eac3957d30e8b21001a30f17a62fd362e0c5f0", - "post.cargo.scheme.color.surface.emphasis.bg": "2dc2983e13aad7ec4e60552838d56966fa9908d6", - "post.cargo.scheme.color.surface.emphasis.fg": "e724294b65aca52dcb29118010534f0482bd0881", - "post.cargo.scheme.color.surface.emphasis.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2" - } + "post.cargo.scheme.color.surface.accent.bg": "2dc2983e13aad7ec4e60552838d56966fa9908d6", + "post.cargo.scheme.color.surface.accent.fg": "e724294b65aca52dcb29118010534f0482bd0881", + "post.cargo.scheme.color.surface.accent.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2" + }, + "group": "Scheme" }, { "id": "0ce712c559607fae28cbd844cac1884d8f961af2", @@ -9623,6 +9727,10 @@ "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c", "post.device.border-width.quote": "1c2f3d93f282058f554db3737d1b131c886b81f4", "post.device.position.1": "39f7571c71eb116a2c8eb1184ed6c76f98b2a288", + "post.device.spacing.padding.block.28": "895e312dae801af70e24ede86c2d25203b46e967", + "post.device.spacing.padding.block.29": "e4a88bacff8f38bce4b8c1daec564da51ccc5af9", + "post.device.spacing.padding.block.30": "f22671807ba118b22495e0eb82d88eb98a47b3e2", + "post.device.sizing.interactive.button.height.6": "78caf6ef8cec35dc5ab0dc663c9d2747595bc9a6", "post.device.spacing.gap.4": "18a97621a6b8cd79f7f4424a6afbc99f49a4104e", "post.device.spacing.gap.5": "cd8bc19de4a06c78cf89a9c2ee34309a0f517e9b", "post.device.spacing.gap.6": "d3f0e06bad0472f9dec52560b44068444b9f9676", @@ -9673,7 +9781,8 @@ "post.device.border-width.focus": "36b85b12779fa51b466bbb29ec9f9a54b1ab7dcc", "post.device.border-width.alternative2": "ee4d9dfc6effe80e3529f2cf085a3e3c60cdda30", "post.device.border-width.alternative1": "3304b579ebb55075ec45251e69d38c803cecf378", - "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9" + "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9", + "post.device.position.2": "ba05cc16eebec31bed449523188a621463b014cc" } }, { @@ -9800,6 +9909,9 @@ "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c", "post.device.border-width.quote": "1c2f3d93f282058f554db3737d1b131c886b81f4", "post.device.position.1": "39f7571c71eb116a2c8eb1184ed6c76f98b2a288", + "post.device.spacing.padding.block.28": "895e312dae801af70e24ede86c2d25203b46e967", + "post.device.spacing.padding.block.29": "e4a88bacff8f38bce4b8c1daec564da51ccc5af9", + "post.device.spacing.padding.block.30": "f22671807ba118b22495e0eb82d88eb98a47b3e2", "post.device.spacing.gap.1": "303b065d5f8bf9049661db8845f2d1e59a4c08b0", "post.device.spacing.gap.2": "0e3be5c3cc6b23c8827bc5fb005a234c558199fc", "post.device.spacing.gap.3": "91cd08dcbce598d4f63e04fc4e646796d943a377", @@ -9847,7 +9959,9 @@ "post.device.border-width.alternative2": "ee4d9dfc6effe80e3529f2cf085a3e3c60cdda30", "post.device.border-width.alternative1": "3304b579ebb55075ec45251e69d38c803cecf378", "post.device.grid.sizing.gutter": "c96f1602983aa56f2a1a13cbba9b908b06fd0e05", - "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9" + "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9", + "post.device.position.2": "ba05cc16eebec31bed449523188a621463b014cc", + "post.device.sizing.interactive.button.height.6": "78caf6ef8cec35dc5ab0dc663c9d2747595bc9a6" } }, { @@ -10028,7 +10142,12 @@ "post.device.grid.sizing.gutter": "c96f1602983aa56f2a1a13cbba9b908b06fd0e05", "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9", "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c", - "post.device.position.1": "39f7571c71eb116a2c8eb1184ed6c76f98b2a288" + "post.device.position.1": "39f7571c71eb116a2c8eb1184ed6c76f98b2a288", + "post.device.spacing.padding.block.28": "895e312dae801af70e24ede86c2d25203b46e967", + "post.device.position.2": "ba05cc16eebec31bed449523188a621463b014cc", + "post.device.spacing.padding.block.29": "e4a88bacff8f38bce4b8c1daec564da51ccc5af9", + "post.device.spacing.padding.block.30": "f22671807ba118b22495e0eb82d88eb98a47b3e2", + "post.device.sizing.interactive.button.height.6": "78caf6ef8cec35dc5ab0dc663c9d2747595bc9a6" } }, { @@ -10426,6 +10545,15 @@ "post.banner.neutral.border.color": "0ff562d88f3593f563203f317655ee7fb4c0e6fe", "post.banner.neutral.icon.color": "2e59130401db212ad37cb342a250ee6bc7d859e2", "post.banner.neutral.bg-scheme": "34ed982b500a8a935ee38321ce5a07ba49fd2e22", + "post.blockquote.border-width.left": "6568787d70363b299117e8c52095eeb14451fe89", + "post.blockquote.border.left.color": "adc2d5072c255eb50d74db7d8d3513930191b527", + "post.blockquote.margin.block": "bd08d047e4f9a0f40d6fc329ffcfe35605868fa1", + "post.blockquote.margin.inline": "e74d12dbeafe66a04d4429241a8c0018b2bd3892", + "post.blockquote.padding.inline.start": "7a1872b53d95b09254aedb9c83134c16f257d859", + "post.blockquote.padding.inline.end": "4aaac936d03e419c78861c16341f44cc5aa12c27", + "post.blockquote.gap.inline": "dc6aadb7c7375ca7445e8e3a7123c31a62ad9b63", + "post.blockquote.font-weight": "bbbd5bcf6682a14dd804110603e0f781f880f819", + "post.blockquote.font-size": "0ca009d91f5f9572660f874598908a4c2f0fdaa2", "post.breadcrumb.enabled-fg": "2baf0e7b11623e8bfb266ffb3a8cf71cc6c4dbd4", "post.breadcrumb.hover-fg": "9848a57f5708dd944ac7a829f5031edcc927f7ba", "post.breadcrumb.selected-fg": "11ba9dc52d4c5ff12c180643b18255c8f570da7a", @@ -10737,15 +10865,6 @@ "post.popover.text.selected-fg": "963b9d422b963ed3acdf1500f4aebfd93e4e98fc", "post.popover.paragraph.font-size": "753ab6d39cf4d2df84fe359b6d932172e31f0fab", "post.popover.legend.font-size": "ca32c490ebb5bc14ebf424aba54246f56931bde2", - "post.blockquote.border-width.left": "6568787d70363b299117e8c52095eeb14451fe89", - "post.blockquote.border.left.color": "adc2d5072c255eb50d74db7d8d3513930191b527", - "post.blockquote.margin.block": "bd08d047e4f9a0f40d6fc329ffcfe35605868fa1", - "post.blockquote.margin.inline": "e74d12dbeafe66a04d4429241a8c0018b2bd3892", - "post.blockquote.padding.inline.start": "7a1872b53d95b09254aedb9c83134c16f257d859", - "post.blockquote.padding.inline.end": "4aaac936d03e419c78861c16341f44cc5aa12c27", - "post.blockquote.gap.inline": "dc6aadb7c7375ca7445e8e3a7123c31a62ad9b63", - "post.blockquote.font-weight": "bbbd5bcf6682a14dd804110603e0f781f880f819", - "post.blockquote.font-size": "0ca009d91f5f9572660f874598908a4c2f0fdaa2", "post.radio-button.enabled-bg": "981537511aa6b68e6575007cd1724da013be2dcc", "post.radio-button.enabled-fg": "ad56c5542bcfd074a5baf4037297d0884420cd6d", "post.radio-button.hover-bg": "f8df140d31e8b662762a8ad65af72207185e25a6", @@ -10927,14 +11046,27 @@ "post.input.color.selected-bg": "8bd7235f1399a9bc166130edce1af72427cfb8ed", "post.input.color.selected-fg": "1ae0d7346c71e3c28fd3ebe05123a3ea04b3fbe6", "post.input.color.helptext-fg": "cc1db7dbc95596ee0f941b44c4b55712ba6625e2", - "post.input.color.enabled-stroke": "e8fb5159e5c020c2919c12ad157578d1083b1cc2", - "post.input.color.hover-stroke": "5a5615016cc59292e11a683669369db7182dafb9", - "post.input.color.disabled-stroke": "c65628869cf318afba36f149d035a6ad6291e0d3", - "post.input.color.selected-stroke": "cd6d5766d9f136e44719c7a28eb250c545556c35", "post.input.color.signal.error": "7ddc0bfe846c295b5a215c45e423a2fdddf6959a", "post.input.color.signal.success": "0157a5c40c9a4eb6f87cfddd9a5c3f3a8a67282e", + "post.input.gap.inline.1": "ea0f287f910901d9a2754175427d33874636908d", + "post.input.gap.inline.2": "e17ec3bfeef8ad59d33f8ed4028bcbeffb3c2e65", + "post.input.padding.inline.start": "95d346d8cf0d15d92cbb0d838ad1d21e2196d909", + "post.input.padding.inline.end": "251080d245b6ce91ef6947cedb9d8710871c1e45", "post.input.sizing.icon": "d8468d53a31f1ff5e298f2e6783a215bc1a9902c", "post.input.border-radius.surface": "d06c0dd30f742b0d6cd4cbddcf2ee20dc059be64", + "post.input.border-width": "1ade7245040a677b64153d2cdf6651fcea38bf0e", + "post.input.empty.padding.block": "5e8222cbe4c364dc01d3f3a4bdc58faa38f2056c", + "post.input.label.empty.padding.block.start": "d62b407bf1b5948a054a4f578b2cddaeb4c37c34", + "post.input.label.empty.padding.inline.start": "b51731dc964c610165cf1ae964d243ad78df81e5", + "post.input.label.empty.padding.inline.end": "3717013c982ae87b4a055205377945bfd6f49e68", + "post.input.label.validated.padding.inline.end": "e48ddec27eff926626a3b10a7861ec56e487e335", + "post.input.validation.icon.position.inline.end": "b57f1666c23edfb6f677c04e41bc20ebaae726cc", + "post.input.filled.padding.block.start": "2924bedf122ccb4ab278a3ce28e06a8337c84059", + "post.input.filled.padding.block.end": "66ffd33591a7dcb8d7d81b4a9ceb90cb563652d2", + "post.input.label.filled.padding.block.start": "25bb881879bcfa6f8fc16fbda7cd5164a5083252", + "post.input.sizing.height": "82cf75a7b82a124c9b1d42cdbc0e9e84e3b11b9b", + "post.input.label.filled.font-size": "a12f8c5b97bd1f6bf59bf7da851dba7386e1396e", + "post.input.assist.font-size": "69317593d3b185baf0fb132ac414e643e3c95ae1", "post.toast.spacing.padding.action": "7b789908238cacf3f7c6b327401296ec0a1da28c", "post.toast.spacing.padding.inline": "014e44c5cc1c44d944c9d6df6c213c429f99c76d", "post.toast.spacing.padding.block": "8588d5bd126b4227934aec9c655f6dbcb10a84b7", @@ -10979,15 +11111,12 @@ "post.validation.input.padding.block": "4006573d3a03f1b053a844aaf89e14742a3d3646", "post.validation.input.padding.inline": "8df0e5f5587acbb1f7acb67a97e200e2175d6469", "post.validation.font-size": "67f550629b478f48c1579f8acb13edceabbaee4f", - "post.input.gap.inline.1": "ea0f287f910901d9a2754175427d33874636908d", - "post.input.gap.inline.2": "e17ec3bfeef8ad59d33f8ed4028bcbeffb3c2e65", - "post.input.padding.block.text1": "a2dbf734944c2720e08b06ba2f0d4446807214a7", - "post.input.padding.block.text2": "16e43ccd63e09b43f7078bfdc6bee6432ea4fe9a", - "post.input.padding.block.text-assist": "74fa0091e635d194f2726e8a49d63029f797d7b1", - "post.input.padding.block.text5": "be118ff83da708f6758b8dda877fadaea5a24e3d", - "post.input.padding.inline.text-assist": "e265e8a8f1e63ac91a7c044560f1c84736e1167f", - "post.input.padding.inline.start": "95d346d8cf0d15d92cbb0d838ad1d21e2196d909", - "post.input.padding.inline.end": "251080d245b6ce91ef6947cedb9d8710871c1e45" + "post.input.color.enabled-border": "e8fb5159e5c020c2919c12ad157578d1083b1cc2", + "post.input.color.hover-border": "5a5615016cc59292e11a683669369db7182dafb9", + "post.input.color.disabled-border": "c65628869cf318afba36f149d035a6ad6291e0d3", + "post.input.color.selected-border": "cd6d5766d9f136e44719c7a28eb250c545556c35", + "post.input.padding.inline.assist": "e265e8a8f1e63ac91a7c044560f1c84736e1167f", + "post.input.padding.block.assist": "74fa0091e635d194f2726e8a49d63029f797d7b1" } }, { @@ -11062,16 +11191,16 @@ "$figmaVariableReferences": { "post.theme.palettes.bg-scheme.brand": "ac9cc556351b9d9b72ce01e166e148b74b25de3f", "post.theme.palettes.bg-scheme.emphasis": "f37d68c8d5ee579997a1a1b403162484c8cff869", + "post.theme.color.palettes.default.bg": "dc69a147a83c9da5d6b52a3e1999082ac7405009", + "post.theme.color.palettes.default.fg": "17e7f1199980448c9e431b59ac934c0ef11c5e1b", + "post.theme.color.palettes.alternate.bg": "47e0f61a01f52edc65e7fcfb6ba1237495959eb2", + "post.theme.color.palettes.alternate.fg": "96a7f4c12efb74f3da27770f2014a52032056121", "post.theme.color.palettes.brand.bg": "2f0b9e90b3d7117a9d7037b325deac970c3bee16", "post.theme.color.palettes.brand.fg": "8ce342d323f6022375641c1f92d265636eda0015", "post.theme.color.palettes.accent.bg": "36c62b7057d0d665572ef3d4be91dd81c61fb13b", "post.theme.color.palettes.accent.fg": "8d3dab1f80eb4d3b22f62613a3c3f80d5609538d", "post.theme.palettes.bg-scheme.default": "9504f02cdfa20b1afd02c21b95c5e8753ac50340", - "post.theme.palettes.bg-scheme.alternate": "bb955dc5c7061bd23cb6c735b2d5f01b727625d0", - "post.theme.color.palettes.default.bg": "dc69a147a83c9da5d6b52a3e1999082ac7405009", - "post.theme.color.palettes.default.fg": "17e7f1199980448c9e431b59ac934c0ef11c5e1b", - "post.theme.color.palettes.alternate.bg": "47e0f61a01f52edc65e7fcfb6ba1237495959eb2", - "post.theme.color.palettes.alternate.fg": "96a7f4c12efb74f3da27770f2014a52032056121" + "post.theme.palettes.bg-scheme.alternate": "bb955dc5c7061bd23cb6c735b2d5f01b727625d0" } }, { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c97d7a1e8a..534dde8797 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -47,7 +47,7 @@ importers: specifier: 0.3.7 version: 0.3.7 '@swisspost/design-system-styles': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../styles/dist ally.js: specifier: 1.4.1 @@ -150,10 +150,10 @@ importers: specifier: 18.2.10 version: 18.2.10(@angular/common@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))(@angular/platform-browser@18.2.10(@angular/animations@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(@angular/common@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(rxjs@7.8.1) '@swisspost/design-system-components': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../components '@swisspost/design-system-styles': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../styles/dist rxjs: specifier: 7.8.1 @@ -232,7 +232,7 @@ importers: specifier: ^16.0.0 || ^17.0.0 || ^18.0.0 version: 18.1.1(rxjs@7.8.1)(zone.js@0.14.8) '@swisspost/design-system-components': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../../../components tslib: specifier: 2.6.3 @@ -242,7 +242,7 @@ importers: packages/components-react: dependencies: '@swisspost/design-system-components': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../components devDependencies: '@types/node': @@ -294,19 +294,19 @@ importers: packages/documentation: dependencies: '@swisspost/design-system-components': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../components '@swisspost/design-system-components-react': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../components-react '@swisspost/design-system-icons': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../icons '@swisspost/design-system-styles': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../styles/dist '@swisspost/internet-header': - specifier: workspace:2.0.0-next.3 + specifier: workspace:2.0.0-next.4 version: link:../internet-header bootstrap: specifier: 5.3.3 @@ -364,10 +364,10 @@ importers: specifier: 8.3.6 version: 8.3.6(lit@3.1.4)(storybook@8.2.7(@babel/preset-env@7.25.3(@babel/core@7.25.2)))(typescript@5.5.4)(vite@5.4.8(@types/node@22.7.9)(less@4.2.0)(sass@1.78.0)(terser@5.31.6)) '@swisspost/design-system-components-angular': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../components-angular/dist/components '@swisspost/design-system-intranet-header': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../intranet-header-workspace/dist/intranet-header '@types/css-modules': specifier: 1.0.5 @@ -502,7 +502,7 @@ importers: packages/internet-header: dependencies: '@swisspost/design-system-styles': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../styles/dist body-scroll-lock: specifier: 4.0.0-beta.0 @@ -612,7 +612,7 @@ importers: version: 2.0.5 ts-jest: specifier: 29.2.4 - version: 29.2.4(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@20.14.14)(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)))(typescript@5.5.4) + version: 29.2.4(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@20.14.14))(typescript@5.5.4) typescript: specifier: 5.5.4 version: 5.5.4 @@ -653,7 +653,7 @@ importers: specifier: 2.11.8 version: 2.11.8 '@swisspost/design-system-styles': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../styles/dist rxjs: specifier: 7.8.1 @@ -747,21 +747,21 @@ importers: specifier: ^16.0.0 || ^17.0.0 || ^18.0.0 version: 18.1.1(rxjs@7.8.1)(zone.js@0.14.8) '@swisspost/design-system-styles': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../../../styles/dist tslib: specifier: 2.6.3 version: 2.6.3 devDependencies: '@swisspost/design-system-intranet-header-workspace': - specifier: workspace:3.0.22-next.3 + specifier: workspace:3.0.22-next.4 version: link:../.. publishDirectory: ../../dist/intranet-header packages/intranet-header-workspace/projects/intranet-header-showcase: dependencies: '@swisspost/design-system-intranet-header': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../../dist/intranet-header packages/migrations: @@ -807,13 +807,13 @@ importers: packages/nextjs-integration: dependencies: '@swisspost/design-system-components-react': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../components-react '@swisspost/design-system-styles': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../styles/dist '@swisspost/internet-header': - specifier: workspace:2.0.0-next.3 + specifier: workspace:2.0.0-next.4 version: link:../internet-header next: specifier: 15.0.1 @@ -875,10 +875,10 @@ importers: version: 3.0.0 devDependencies: '@swisspost/design-system-icons': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../icons '@swisspost/design-system-tokens': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../tokens/dist '@types/node': specifier: 20.14.14 @@ -969,7 +969,7 @@ importers: specifier: 18.2.10 version: 18.2.10(@angular/common@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))(@angular/platform-browser@18.2.10(@angular/animations@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(@angular/common@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(rxjs@7.8.1) '@swisspost/design-system-styles': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../styles/dist primeng: specifier: 17.18.7 @@ -1045,7 +1045,7 @@ importers: specifier: ^18.0.0 version: 18.1.1(rxjs@7.8.1)(zone.js@0.14.8) '@swisspost/design-system-styles': - specifier: workspace:9.0.0-next.3 + specifier: workspace:9.0.0-next.4 version: link:../../../styles/dist primeng: specifier: ^17.18.0 @@ -1060,6 +1060,9 @@ importers: '@tokens-studio/sd-transforms': specifier: 1.2.2 version: 1.2.2(style-dictionary@4.0.1) + copyfiles: + specifier: 2.4.1 + version: 2.4.1 rimraf: specifier: 6.0.1 version: 6.0.1 @@ -19099,7 +19102,6 @@ snapshots: - babel-plugin-macros - supports-color - ts-node - optional: true jest@29.7.0(@types/node@20.14.14)(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)): dependencies: @@ -22882,6 +22884,25 @@ snapshots: '@jest/types': 29.6.3 babel-jest: 29.7.0(@babel/core@7.25.2) + ts-jest@29.2.4(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@20.14.14))(typescript@5.5.4): + dependencies: + bs-logger: 0.2.6 + ejs: 3.1.10 + fast-json-stable-stringify: 2.1.0 + jest: 29.7.0(@types/node@20.14.14) + jest-util: 29.7.0 + json5: 2.2.3 + lodash.memoize: 4.1.2 + make-error: 1.3.6 + semver: 7.6.2 + typescript: 5.5.4 + yargs-parser: 21.1.1 + optionalDependencies: + '@babel/core': 7.25.2 + '@jest/transform': 29.7.0 + '@jest/types': 29.6.3 + babel-jest: 29.7.0(@babel/core@7.25.2) + ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4): dependencies: '@cspotcode/source-map-support': 0.8.1