feat: add card menu styles

IATI · Jun 6, 2024 · 73c201b · 73c201b
1 parent d6e9da9
commit 73c201b
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 1 deletion.
diff --git a/src/scss/base/_mixins.scss b/src/scss/base/_mixins.scss
@@ -19,7 +19,17 @@
 }
 
 @mixin unstyled-list {
-  list-style-type: none;
+  list-style: none;
   margin: 0;
   padding: 0;
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li li {
+    padding-left: $padding-block;
+  }
 }
diff --git a/src/scss/components/card/_card.scss b/src/scss/components/card/_card.scss
@@ -1,6 +1,7 @@
 @use "../../tokens/color" as *;
 @use "../../tokens/font" as *;
 @use "../../tokens/spacing" as *;
+@use "../../base/mixins";
 
 .iati-card {
   box-shadow: 0 4px 5px $color-grey-20;
@@ -31,4 +32,23 @@
     margin: 0;
     text-transform: uppercase;
   }
+
+  &__menu {
+    @include mixins.unstyled-list();
+
+    li,
+    a {
+      line-height: 1.2;
+    }
+
+    a {
+      text-decoration: none;
+      display: block;
+      padding: 0.6em 0;
+
+      &.current {
+        font-weight: $font-weight-body-strong;
+      }
+    }
+  }
 }
diff --git a/src/scss/components/card/card.stories.ts b/src/scss/components/card/card.stories.ts
@@ -18,3 +18,26 @@ export const Card: Story = {
     </div>
   `,
 };
+
+export const CardWithMenu: Story = {
+  render: () => html`
+    <div class="iati-card">
+      <p class="iati-card__title">Card Title</p>
+      <p class="iati-card__subtitle">Subtitle</p>
+      <ul class="iati-card__menu">
+        <li><a>Item 1</a></li>
+        <li>
+          <a>Item 2</a>
+          <ul>
+            <li>
+              <a class="current">Nested Item 1</a>
+              <ul>
+                <li><a>Nested Item 2</a></li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  `,
+};