chore(documentation, styles): shadow utilities

.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.

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';
+
+<Meta of={ShadowStories} />
+
+# Shadow
+
+<div className="lead">The shadow property controls an element's box shadow.</div>
+
+Available values are the following: `.shadow`, `.shadow-sm`, `.shadow-lg` and `.shadow-none`.
+
+<Canvas sourceState="shown" of={ShadowStories.Default} />
+<div className="hide-col-default">
+  <Controls of={ShadowStories.Default} />
+</div>

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`
+        <div class="d-flex gap-32 flex-column">
+          ${(context.argTypes.shadow.options as string[]).map(shadow =>
+            meta.render?.({ ...meta.args, shadow }, context),
+          )}
+        </div>
+      `,
+    );
+  },
+};

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` <div class="${args.shadow}">${ShadowLabels[args.shadow]}</div> `;
+  },
+  decorators: [
+    (story: StoryFn, context: StoryContext) => {
+      const storyTemplate = html`<div class="shadow-example">${story(context.args, context)}</div>`;
+      return storyTemplate;
+    },
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};

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;
+}

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';

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`.
 );