-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into 3420-component-form-footer
- Loading branch information
Showing
57 changed files
with
1,209 additions
and
582 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| '@swisspost/design-system-documentation': minor | ||
| '@swisspost/design-system-styles': minor | ||
| --- | ||
|
|
||
| Added styling support and documentation for the `<dialog>` element. The dialog will replace the current modal and notification overlay components coming from ng-bootstrap. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@swisspost/design-system-styles': patch | ||
| --- | ||
|
|
||
| Deprecated the ng-bootstrap components Modal and Notification overlay in favor of the new Dialog component. The styles for these ng-bootstrap components will be removed in a future major version. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| { | ||
| "name": "@swisspost/design-system-components-angular", | ||
| "version": "9.0.0-next.0", | ||
| "version": "9.0.0-next.1", | ||
| "description": "Swiss Post Design System - Angular Wrapper Components", | ||
| "author": "Swiss Post <[email protected]>", | ||
| "license": "Apache-2.0", | ||
|
|
@@ -19,7 +19,7 @@ | |
| }, | ||
| "dependencies": { | ||
| "tslib": "2.6.3", | ||
| "@swisspost/design-system-components": "workspace:9.0.0-next.0" | ||
| "@swisspost/design-system-components": "workspace:9.0.0-next.1" | ||
| }, | ||
| "peerDependencies": { | ||
| "@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0", | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
7 changes: 7 additions & 0 deletions
7
packages/documentation/cypress/snapshots/components/dialog.snapshot.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| describe('Dialog', () => { | ||
| it('default', () => { | ||
| cy.visit('/iframe.html?id=snapshots--dialog'); | ||
| cy.get('dialog[open]', { timeout: 30000 }).should('be.visible'); | ||
| cy.percySnapshot('Dialog', { widths: [1440] }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| { | ||
| "name": "@swisspost/design-system-documentation", | ||
| "version": "6.0.0-next.0", | ||
| "version": "6.0.0-next.1", | ||
| "description": "Swiss Post Design System Documentation.", | ||
| "author": "Swiss Post <[email protected]>", | ||
| "license": "Apache-2.0", | ||
|
|
@@ -25,14 +25,14 @@ | |
| "e2e:watch": "cypress open", | ||
| "doctor": "storybook doctor", | ||
| "snapshots": "percy exec -- cypress run --config-file ./cypress.snapshot.config.js --record --key 0995e768-43ec-42bd-a127-ff944a2ad8c9", | ||
| "lint": "eslint **/*.{js,ts,tsx,mdx}" | ||
| "lint": "eslint **/*.{ts,tsx,mdx}" | ||
| }, | ||
| "dependencies": { | ||
| "@swisspost/design-system-components": "workspace:9.0.0-next.0", | ||
| "@swisspost/design-system-components-react": "workspace:9.0.0-next.0", | ||
| "@swisspost/design-system-icons": "workspace:9.0.0-next.0", | ||
| "@swisspost/design-system-styles": "workspace:9.0.0-next.0", | ||
| "@swisspost/internet-header": "workspace:1.14.6-next.0", | ||
| "@swisspost/design-system-components": "workspace:9.0.0-next.1", | ||
| "@swisspost/design-system-components-react": "workspace:9.0.0-next.1", | ||
| "@swisspost/design-system-icons": "workspace:9.0.0-next.1", | ||
| "@swisspost/design-system-styles": "workspace:9.0.0-next.1", | ||
| "@swisspost/internet-header": "workspace:1.14.6-next.1", | ||
| "bootstrap": "5.3.3" | ||
| }, | ||
| "devDependencies": { | ||
|
|
@@ -53,8 +53,8 @@ | |
| "@storybook/types": "8.2.7", | ||
| "@storybook/web-components": "8.2.7", | ||
| "@storybook/web-components-vite": "8.2.7", | ||
| "@swisspost/design-system-components-angular": "workspace:9.0.0-next.0", | ||
| "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.0", | ||
| "@swisspost/design-system-components-angular": "workspace:9.0.0-next.1", | ||
| "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.1", | ||
| "@types/css-modules": "1.0.5", | ||
| "@types/mdx": "2.0.13", | ||
| "@types/react": "18.3.3", | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
35 changes: 35 additions & 0 deletions
35
packages/documentation/src/stories/components/dialog/dialog.docs.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { Canvas, Controls, Meta, Source } from '@storybook/blocks'; | ||
| import * as DialogStories from './dialog.stories'; | ||
| import JSFormData from './samples/js-form-data?raw'; | ||
| import StylesPackageImport from '@/shared/styles-package-import.mdx'; | ||
|
|
||
| <Meta of={DialogStories} /> | ||
|
|
||
| # Dialog | ||
|
|
||
| <p className="lead">Communicate crucial information and request user action.</p> | ||
|
|
||
| <Canvas sourceState="shown" of={DialogStories.Default} /> | ||
| <div className="hide-col-default"> | ||
| <Controls of={DialogStories.Default} /> | ||
| </div> | ||
|
|
||
| <StylesPackageImport components={['dialog']} /> | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Form dialog | ||
| <Canvas sourceState="hidden" of={DialogStories.Form} /> | ||
|
|
||
| #### Using form data | ||
|
|
||
| Register a `submit` event listener on the form. In the event handler, you have access to all the form field values inside the dialog. The dialog box closes when the form gets submitted. | ||
|
|
||
| <Source | ||
| code={JSFormData} | ||
| language="typescript" | ||
| /> | ||
|
|
||
| ### Custom content dialog | ||
| The dialog can also contain arbitrary content. | ||
| <Canvas sourceState="hidden" of={DialogStories.Custom} /> |
40 changes: 40 additions & 0 deletions
40
packages/documentation/src/stories/components/dialog/dialog.snapshot.stories.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import meta, { Default } from './dialog.stories'; | ||
| import { html } from 'lit'; | ||
| import { bombArgs } from '@/utils'; | ||
| import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; | ||
|
|
||
| const { id, ...metaWithoutId } = meta; | ||
|
|
||
| export default { | ||
| ...metaWithoutId, | ||
| title: 'Snapshots', | ||
| }; | ||
|
|
||
| type Story = StoryObj; | ||
|
|
||
| export const Dialog: Story = { | ||
| render: (_args: Args, context: StoryContext) => { | ||
| return html` | ||
| <style> | ||
| dialog { | ||
| position: static; | ||
| margin: 0; | ||
| transition: none !important; | ||
| } | ||
| </style> | ||
| <div class="d-flex flex-wrap align-items-start gap-regular p-regular"> | ||
| ${bombArgs({ | ||
| backgroundColor: ['bg-white', 'bg-primary'], | ||
| size: context.argTypes.size.options, | ||
| icon: ['none', '1034'], | ||
| closeButton: [true, false], | ||
| content: [ | ||
| 'Content', | ||
| 'Contentus momentus vero siteos et accusam iretea et justo. Contentus momentus vero siteos et accusam iretea et justo.', | ||
| ], | ||
| open: [true], | ||
| }).map((args: Args) => Default.render?.({ ...context.args, ...args }, context))} | ||
| </div> | ||
| `; | ||
| }, | ||
| }; |
Oops, something went wrong.