docs(dropshadow): add storybook entry

Author: rise-erpelding

.storybook/foundations/drop-shadow/drop-shadow.mdx

@@ -0,0 +1,18 @@
+import { Meta, Title, Story } from '@storybook/blocks';
+import * as DropShadowStories from './drop-shadow.stories.js';
+
+
+<Meta of={DropShadowStories} />
+
+<Title />
+
+## Emphasized Default
+<Story of={DropShadowStories.DropShadowEmphasizedDefault} />
+
+## Emphasized Hover
+<Story of={DropShadowStories.DropShadowEmphasizedHover} />
+
+## Elevated
+<Story of={DropShadowStories.DropShadowElevated} />
+
+

.storybook/foundations/drop-shadow/drop-shadow.stories.js

@@ -0,0 +1,55 @@
+import { html } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import "./index.css";
+
+export default {
+  title: "Foundations/Drop shadow",
+  description: "Drop shadows draw attention and give the appearance of depth. By default, this style is used to show elevation, when content appears on top of other content.",
+  component: "Drop shadow",
+  tags: ['foundation'],
+}
+
+const DropShadowSwatch = ({rootClass = "spectrum-Foundations-Example-DropShadow-swatch", variant}) => {
+  return html`
+  <div class=${classMap({
+    [rootClass]: true,
+    [`${rootClass}--${variant}`]: typeof variant !== undefined,
+  })}></div>
+`;}
+
+const DropShadowBackground = ({rootClass = "spectrum-Foundations-Example-swatch-container", color, ...args}) => {
+
+  return html`
+    <div class=${classMap({
+      [rootClass]: true,
+      "spectrum--light": color === "light",
+      "spectrum--dark": color === "dark",
+    })}>
+      ${DropShadowSwatch(args)}
+    </div>
+  `;
+}
+
+const DropShadowVariant = ({...args}) => {
+  return html`
+  <div class="spectrum-Foundations-Example-variant-container">
+    ${DropShadowBackground({...args, color: "light"})}
+    ${DropShadowBackground({...args, color: "dark"})}
+  </div>
+`;}
+
+
+export const DropShadowEmphasizedDefault = DropShadowVariant.bind({});
+DropShadowEmphasizedDefault.args = {
+  variant: "emphasized-default",
+};
+
+export const DropShadowEmphasizedHover = DropShadowVariant.bind({});
+DropShadowEmphasizedHover.args = {
+  variant: "emphasized-hover",
+};
+
+export const DropShadowElevated = DropShadowVariant.bind({});
+DropShadowElevated.args = {
+  variant: "elevated",
+};

.storybook/foundations/drop-shadow/index.css

@@ -0,0 +1,66 @@
+/*!
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+@import "../../../components/commons/dropshadow.css";
+
+.spectrum-Foundations-Example-DropShadow-swatch {
+  block-size: 150px;
+  inline-size: 150px;
+  background-color: var(--spectrum-gray-25);
+  border-radius: var(--spectrum-corner-radius-large-default);
+  border: transparent;
+}
+
+.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch {
+  background-color: var(--spectrum-gray-75); /* matches dark mode design spec rgb(34, 34, 34) */
+}
+
+.spectrum-Foundations-Example-DropShadow-swatch--emphasized-default {
+  @extend %spectrum-DropShadow-emphasized-default;
+}
+
+.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default {
+  /* override with correct color for dark mode in this example page only */
+  --mod-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100);
+}
+
+.spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover {
+  @extend %spectrum-DropShadow-emphasized-hover;
+}
+
+.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover {
+  /* override with correct color for dark mode in this example page only */
+  --mod-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200);
+}
+
+.spectrum-Foundations-Example-DropShadow-swatch--elevated {
+  @extend %spectrum-DropShadow-elevated;
+}
+
+.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated {
+  /* override with correct color for dark mode in this example page only */
+  --mod-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200);
+}
+
+.spectrum-Foundations-Example-swatch-container {
+  background-color: var(--spectrum-gray-50);
+  block-size: 200px;
+  inline-size: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.spectrum-Foundations-Example-variant-container {
+  display: flex;
+  flex-direction: row;
+}