From 7b633a14a880b1e7adcc00a26ad9dad72ae07ea3 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Fri, 27 Dec 2024 12:37:33 +0100 Subject: [PATCH 1/5] chore(documentation, styles): shadow utilities --- .changeset/red-comics-cough.md | 6 +++ .../stories/utilities/shadow/shadow.docs.mdx | 15 ++++++ .../shadow/shadow.snapshot.stories.ts | 27 +++++++++++ .../utilities/shadow/shadow.stories.ts | 48 +++++++++++++++++++ .../utilities/shadow/shadow.styles.scss | 6 +++ .../src/themes/bootstrap/_utilities.scss | 2 + packages/styles/src/utilities/_variables.scss | 11 +++++ 7 files changed, 115 insertions(+) create mode 100644 .changeset/red-comics-cough.md create mode 100644 packages/documentation/src/stories/utilities/shadow/shadow.docs.mdx create mode 100644 packages/documentation/src/stories/utilities/shadow/shadow.snapshot.stories.ts create mode 100644 packages/documentation/src/stories/utilities/shadow/shadow.stories.ts create mode 100644 packages/documentation/src/stories/utilities/shadow/shadow.styles.scss diff --git a/.changeset/red-comics-cough.md b/.changeset/red-comics-cough.md new file mode 100644 index 0000000000..50ab44d1a6 --- /dev/null +++ b/.changeset/red-comics-cough.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-documentation': patch +'@swisspost/design-system-styles': patch +--- + +Internalized bootstrap shadow utility into the design system. diff --git a/packages/documentation/src/stories/utilities/shadow/shadow.docs.mdx b/packages/documentation/src/stories/utilities/shadow/shadow.docs.mdx new file mode 100644 index 0000000000..36be22917a --- /dev/null +++ b/packages/documentation/src/stories/utilities/shadow/shadow.docs.mdx @@ -0,0 +1,15 @@ +import { Canvas, Controls, Meta, Source } from '@storybook/blocks'; +import * as ShadowStories from './shadow.stories'; + + + +# Shadow + +
The shadow property controls an element's box shadow.
+ +Available values are the following: `.shadow`, `.shadow-sm`, `.shadow-lg` and `.shadow-none`. + + +
+ +
diff --git a/packages/documentation/src/stories/utilities/shadow/shadow.snapshot.stories.ts b/packages/documentation/src/stories/utilities/shadow/shadow.snapshot.stories.ts new file mode 100644 index 0000000000..2e2469ba62 --- /dev/null +++ b/packages/documentation/src/stories/utilities/shadow/shadow.snapshot.stories.ts @@ -0,0 +1,27 @@ +import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; +import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; +import meta from './shadow.stories'; + +const { id, ...metaWithoutId } = meta; + +export default { + ...metaWithoutId, + title: 'Snapshots', +}; + +type Story = StoryObj; + +export const Shadow: Story = { + render: (_args: Args, context: StoryContext) => { + return schemes( + () => html` +
+ ${(context.argTypes.shadow.options as string[]).map(shadow => + meta.render?.({ ...meta.args, shadow }, context), + )} +
+ `, + ); + }, +}; diff --git a/packages/documentation/src/stories/utilities/shadow/shadow.stories.ts b/packages/documentation/src/stories/utilities/shadow/shadow.stories.ts new file mode 100644 index 0000000000..1248c36ab7 --- /dev/null +++ b/packages/documentation/src/stories/utilities/shadow/shadow.stories.ts @@ -0,0 +1,48 @@ +import type { Args, StoryObj, StoryFn, StoryContext } from '@storybook/web-components'; +import { html } from 'lit'; +import './shadow.styles.scss'; +import { MetaExtended } from '@root/types'; + +export const ShadowLabels: { [key: string]: string } = { + 'shadow': 'Default shadow', + 'shadow-sm': 'Small shadow', + 'shadow-lg': 'Large shadow', + 'shadow-none': 'No shadow', +}; + +const meta: MetaExtended = { + id: '69f2b7e0-827d-4a7a-8580-5ff46dac276d', + title: 'Utilities/Shadow', + args: { + shadow: 'shadow', + }, + argTypes: { + shadow: { + name: 'Shadow', + description: 'Size of the shadow', + control: { + type: 'select', + labels: ShadowLabels, + }, + options: ['shadow', 'shadow-sm', 'shadow-lg', 'shadow-none'], + table: { + category: 'General', + }, + }, + }, + render: (args: Args) => { + return html`
${ShadowLabels[args.shadow]}
`; + }, + decorators: [ + (story: StoryFn, context: StoryContext) => { + const storyTemplate = html`
${story(context.args, context)}
`; + return storyTemplate; + }, + ], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/packages/documentation/src/stories/utilities/shadow/shadow.styles.scss b/packages/documentation/src/stories/utilities/shadow/shadow.styles.scss new file mode 100644 index 0000000000..417e556efb --- /dev/null +++ b/packages/documentation/src/stories/utilities/shadow/shadow.styles.scss @@ -0,0 +1,6 @@ +@use '@swisspost/design-system-styles/core' as post; + +.shadow-example [class|='shadow'] { + border-radius: post.$border-radius; + padding: 1rem; +} diff --git a/packages/styles/src/themes/bootstrap/_utilities.scss b/packages/styles/src/themes/bootstrap/_utilities.scss index e8d4bde6d1..151cc5cc88 100644 --- a/packages/styles/src/themes/bootstrap/_utilities.scss +++ b/packages/styles/src/themes/bootstrap/_utilities.scss @@ -69,4 +69,6 @@ $utilities: map.remove($utilities, 'overflow'); $utilities: map.remove($utilities, 'overflow-x'); $utilities: map.remove($utilities, 'overflow-y'); +$utilities: map.remove($utilities, 'shadow'); + @import 'bootstrap/scss/utilities/api'; diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss index 04b78b2890..c537151445 100644 --- a/packages/styles/src/utilities/_variables.scss +++ b/packages/styles/src/utilities/_variables.scss @@ -3,6 +3,7 @@ @use './functions' as *; @use '../variables/sizing' as *; +@use '../variables/commons'; /* Utilities are generated with our utility API using bellow $utilities map. @@ -424,5 +425,15 @@ $utilities: ( property: overflow-y, values: auto hidden visible scroll, ), + 'shadow': ( + property: box-shadow, + class: shadow, + values: ( + null: commons.$box-shadow, + sm: commons.$box-shadow-sm, + lg: commons.$box-shadow-lg, + none: none, + ), + ), // IMPORTANT: When adding new utilities here, please ensure to remove the corresponding bootstrap utilities in `src/themes/bootstrap/_utilities.scss`. ); From 090dc796d5d47507d7c506ea3a49ecce3c70ba86 Mon Sep 17 00:00:00 2001 From: Lea Date: Wed, 8 Jan 2025 11:47:52 +0100 Subject: [PATCH 2/5] Update .changeset/red-comics-cough.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- .changeset/red-comics-cough.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/red-comics-cough.md b/.changeset/red-comics-cough.md index 50ab44d1a6..7cd60fd093 100644 --- a/.changeset/red-comics-cough.md +++ b/.changeset/red-comics-cough.md @@ -3,4 +3,4 @@ '@swisspost/design-system-styles': patch --- -Internalized bootstrap shadow utility into the design system. +Internalized Bootstrap shadow utility into the Design System. From 7a0580056ecb5111b72e2342de072ea946edd926 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Wed, 8 Jan 2025 12:22:47 +0100 Subject: [PATCH 3/5] remove shadow utility classes --- .changeset/red-comics-cough.md | 6 +-- .../stories/utilities/shadow/shadow.docs.mdx | 15 ------ .../shadow/shadow.snapshot.stories.ts | 27 ----------- .../utilities/shadow/shadow.stories.ts | 48 ------------------- .../utilities/shadow/shadow.styles.scss | 6 --- packages/styles/src/utilities/_variables.scss | 10 ---- packages/styles/src/variables/_elevation.scss | 2 + 7 files changed, 5 insertions(+), 109 deletions(-) delete mode 100644 packages/documentation/src/stories/utilities/shadow/shadow.docs.mdx delete mode 100644 packages/documentation/src/stories/utilities/shadow/shadow.snapshot.stories.ts delete mode 100644 packages/documentation/src/stories/utilities/shadow/shadow.stories.ts delete mode 100644 packages/documentation/src/stories/utilities/shadow/shadow.styles.scss diff --git a/.changeset/red-comics-cough.md b/.changeset/red-comics-cough.md index 7cd60fd093..52969fc2bd 100644 --- a/.changeset/red-comics-cough.md +++ b/.changeset/red-comics-cough.md @@ -1,6 +1,6 @@ --- -'@swisspost/design-system-documentation': patch -'@swisspost/design-system-styles': patch +'@swisspost/design-system-documentation': major +'@swisspost/design-system-styles': major --- -Internalized Bootstrap shadow utility into the Design System. +Removed Bootstrap shadow utility classes from the Design System, as the elevation classes are replacing it. diff --git a/packages/documentation/src/stories/utilities/shadow/shadow.docs.mdx b/packages/documentation/src/stories/utilities/shadow/shadow.docs.mdx deleted file mode 100644 index 36be22917a..0000000000 --- a/packages/documentation/src/stories/utilities/shadow/shadow.docs.mdx +++ /dev/null @@ -1,15 +0,0 @@ -import { Canvas, Controls, Meta, Source } from '@storybook/blocks'; -import * as ShadowStories from './shadow.stories'; - - - -# Shadow - -
The shadow property controls an element's box shadow.
- -Available values are the following: `.shadow`, `.shadow-sm`, `.shadow-lg` and `.shadow-none`. - - -
- -
diff --git a/packages/documentation/src/stories/utilities/shadow/shadow.snapshot.stories.ts b/packages/documentation/src/stories/utilities/shadow/shadow.snapshot.stories.ts deleted file mode 100644 index 2e2469ba62..0000000000 --- a/packages/documentation/src/stories/utilities/shadow/shadow.snapshot.stories.ts +++ /dev/null @@ -1,27 +0,0 @@ -import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; -import { html } from 'lit'; -import { schemes } from '@/shared/snapshots/schemes'; -import meta from './shadow.stories'; - -const { id, ...metaWithoutId } = meta; - -export default { - ...metaWithoutId, - title: 'Snapshots', -}; - -type Story = StoryObj; - -export const Shadow: Story = { - render: (_args: Args, context: StoryContext) => { - return schemes( - () => html` -
- ${(context.argTypes.shadow.options as string[]).map(shadow => - meta.render?.({ ...meta.args, shadow }, context), - )} -
- `, - ); - }, -}; diff --git a/packages/documentation/src/stories/utilities/shadow/shadow.stories.ts b/packages/documentation/src/stories/utilities/shadow/shadow.stories.ts deleted file mode 100644 index 1248c36ab7..0000000000 --- a/packages/documentation/src/stories/utilities/shadow/shadow.stories.ts +++ /dev/null @@ -1,48 +0,0 @@ -import type { Args, StoryObj, StoryFn, StoryContext } from '@storybook/web-components'; -import { html } from 'lit'; -import './shadow.styles.scss'; -import { MetaExtended } from '@root/types'; - -export const ShadowLabels: { [key: string]: string } = { - 'shadow': 'Default shadow', - 'shadow-sm': 'Small shadow', - 'shadow-lg': 'Large shadow', - 'shadow-none': 'No shadow', -}; - -const meta: MetaExtended = { - id: '69f2b7e0-827d-4a7a-8580-5ff46dac276d', - title: 'Utilities/Shadow', - args: { - shadow: 'shadow', - }, - argTypes: { - shadow: { - name: 'Shadow', - description: 'Size of the shadow', - control: { - type: 'select', - labels: ShadowLabels, - }, - options: ['shadow', 'shadow-sm', 'shadow-lg', 'shadow-none'], - table: { - category: 'General', - }, - }, - }, - render: (args: Args) => { - return html`
${ShadowLabels[args.shadow]}
`; - }, - decorators: [ - (story: StoryFn, context: StoryContext) => { - const storyTemplate = html`
${story(context.args, context)}
`; - return storyTemplate; - }, - ], -}; - -export default meta; - -type Story = StoryObj; - -export const Default: Story = {}; diff --git a/packages/documentation/src/stories/utilities/shadow/shadow.styles.scss b/packages/documentation/src/stories/utilities/shadow/shadow.styles.scss deleted file mode 100644 index 417e556efb..0000000000 --- a/packages/documentation/src/stories/utilities/shadow/shadow.styles.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '@swisspost/design-system-styles/core' as post; - -.shadow-example [class|='shadow'] { - border-radius: post.$border-radius; - padding: 1rem; -} diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss index c537151445..f3a50bc83f 100644 --- a/packages/styles/src/utilities/_variables.scss +++ b/packages/styles/src/utilities/_variables.scss @@ -425,15 +425,5 @@ $utilities: ( property: overflow-y, values: auto hidden visible scroll, ), - 'shadow': ( - property: box-shadow, - class: shadow, - values: ( - null: commons.$box-shadow, - sm: commons.$box-shadow-sm, - lg: commons.$box-shadow-lg, - none: none, - ), - ), // IMPORTANT: When adding new utilities here, please ensure to remove the corresponding bootstrap utilities in `src/themes/bootstrap/_utilities.scss`. ); diff --git a/packages/styles/src/variables/_elevation.scss b/packages/styles/src/variables/_elevation.scss index 0f66c75e9a..a8d0043fd2 100644 --- a/packages/styles/src/variables/_elevation.scss +++ b/packages/styles/src/variables/_elevation.scss @@ -2,6 +2,7 @@ // Values are kept in PX for easier copy-ability from figma and better overview // rems would provide little value added +$elevation-none: none; $elevation-1: 0.25px 1px 1px rgba(0, 0, 0, 0.1), 1px 2px 2.5px 1px rgba(0, 0, 0, 0.1); @@ -22,6 +23,7 @@ $elevation-map: () !default; $elevation-map: map.merge( $elevation-map, ( + 'elevation-none': $elevation-none, 'elevation-1': $elevation-1, 'elevation-2': $elevation-2, 'elevation-3': $elevation-3, From ab34eccf3bcb18ff35ed41be8189b26f065e939b Mon Sep 17 00:00:00 2001 From: leagrdv Date: Wed, 8 Jan 2025 14:06:10 +0100 Subject: [PATCH 4/5] update elevation to tokens --- packages/styles/src/variables/_elevation.scss | 24 +++++-------------- 1 file changed, 6 insertions(+), 18 deletions(-) diff --git a/packages/styles/src/variables/_elevation.scss b/packages/styles/src/variables/_elevation.scss index a8d0043fd2..63e01d1bc4 100644 --- a/packages/styles/src/variables/_elevation.scss +++ b/packages/styles/src/variables/_elevation.scss @@ -1,33 +1,21 @@ @use 'sass:map'; -// Values are kept in PX for easier copy-ability from figma and better overview -// rems would provide little value added $elevation-none: none; -$elevation-1: - 0.25px 1px 1px rgba(0, 0, 0, 0.1), - 1px 2px 2.5px 1px rgba(0, 0, 0, 0.1); -$elevation-2: - 0.25px 1.5px 2px rgba(0, 0, 0, 0.1), - 2px 2px 5px 2px rgba(0, 0, 0, 0.11); -$elevation-3: - 0.5px 3px 4px rgba(0, 0, 0, 0.1), - 2px 4px 10px 4px rgba(0, 0, 0, 0.12); -$elevation-4: - 0.75px 4.5px 6px rgba(0, 0, 0, 0.1), - 2px 6px 15px 6px rgba(0, 0, 0, 0.13); -$elevation-5: - 1px 6px 8px rgba(0, 0, 0, 0.1), - 2px 8px 20px 8px rgba(0, 0, 0, 0.14); +$elevation-1: var(--post-core-elevation-1); +$elevation-2: var(--post-core-elevation-2); +$elevation-3: var(--post-core-elevation-3); +$elevation-4: var(--post-core-elevation-4); +$elevation-5: var(--post-core-elevation-5); $elevation-map: () !default; $elevation-map: map.merge( $elevation-map, ( - 'elevation-none': $elevation-none, 'elevation-1': $elevation-1, 'elevation-2': $elevation-2, 'elevation-3': $elevation-3, 'elevation-4': $elevation-4, 'elevation-5': $elevation-5, + 'elevation-none': $elevation-none, ) ); From 1b29956517214a3077137e99da0076c64e71b4ca Mon Sep 17 00:00:00 2001 From: leagrdv Date: Wed, 8 Jan 2025 14:10:14 +0100 Subject: [PATCH 5/5] move elevation-none --- packages/styles/src/variables/_elevation.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/variables/_elevation.scss b/packages/styles/src/variables/_elevation.scss index 63e01d1bc4..7b1131390e 100644 --- a/packages/styles/src/variables/_elevation.scss +++ b/packages/styles/src/variables/_elevation.scss @@ -11,11 +11,11 @@ $elevation-map: () !default; $elevation-map: map.merge( $elevation-map, ( + 'elevation-none': $elevation-none, 'elevation-1': $elevation-1, 'elevation-2': $elevation-2, 'elevation-3': $elevation-3, 'elevation-4': $elevation-4, 'elevation-5': $elevation-5, - 'elevation-none': $elevation-none, ) );