From 7b633a14a880b1e7adcc00a26ad9dad72ae07ea3 Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Fri, 27 Dec 2024 12:37:33 +0100
Subject: [PATCH] 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';
+
+<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>
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`
+        <div class="d-flex gap-32 flex-column">
+          ${(context.argTypes.shadow.options as string[]).map(shadow =>
+            meta.render?.({ ...meta.args, shadow }, context),
+          )}
+        </div>
+      `,
+    );
+  },
+};
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` <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 = {};
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`.
 );