Merge pull request #33 from IATI/breadcrumb

Simplify breadcrumb component
IATI · Dec 12, 2024 · a7155f2 · a7155f2
2 parents 09f4393 + 04eb331
commit a7155f2
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 45 deletions.
diff --git a/src/assets/svg/icon-chevron-left.svg b/src/assets/svg/icon-chevron-left.svg
diff --git a/src/scss/components/breadcrumb/_breadcrumb.scss b/src/scss/components/breadcrumb/_breadcrumb.scss
@@ -1,3 +1,4 @@
+@use "../../base/mixins";
 @use "../../tokens/color" as *;
 @use "../../tokens/spacing" as *;
 @use "../../tokens/screens" as *;
@@ -7,41 +8,29 @@
 }
 
 .iati-breadcrumb__list {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
+  @include mixins.unstyled-list();
+
   display: none;
-  > *:not(:last-child)::after {
+
+  & > *:not(:last-child)::after {
     content: "/";
     color: $color-teal-90;
-    font-weight: 600;
-    display: inline-block;
     padding-inline: 0.4em;
   }
 }
 
-.iati-breadcrumb-item {
-  line-height: 1;
-}
-
 .iati-breadcrumb__previous {
   display: flex;
-  align-items: flex-end;
-  &::before {
-    content: "";
-    display: inline-block;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
-    background-size: contain;
-    background-position: center;
-    height: 1.2em;
-    width: 1.2em;
+  align-items: center;
+
+  .iati-icon {
+    height: 1em;
+    margin-right: 0.2em;
   }
 }
 
 .iati-breadcrumb-link {
   text-decoration: none;
-  line-height: 1;
 }
 
 @media (min-width: $screen-sm) {

diff --git a/src/scss/components/breadcrumb/breadcrumb.stories.ts b/src/scss/components/breadcrumb/breadcrumb.stories.ts
@@ -1,10 +1,7 @@
 import { html } from "lit";
-import { classMap } from "lit-html/directives/class-map.js";
 
 import type { Meta, StoryObj } from "@storybook/web-components";
 
-const items = ["Home", "About", "Current page"];
-
 const meta: Meta = {
   title: "Components/Breadcrumb",
 };
@@ -15,24 +12,20 @@ type Story = StoryObj;
 export const Breadcrumb: Story = {
   render: () => html`
     <nav class="iati-breadcrumb">
-      <p class="iati-breadcrumb__previous">
-        <a href="#" class="iati-breadcrumb-link">${items[items.length - 2]}</a>
-      </p>
-      <ol class="iati-breadcrumb__list"">
-        ${items.map(
-          (i) =>
-            html`<li
-              class="iati-breadcrumb-item ${classMap({
-                "iati-breadcrumb-item--current": i == "Current page",
-              })}"
-            >
-              ${i != "Current page"
-                ? html`<a href="#" class="iati-breadcrumb-link">${i}</a>`
-                : html`<a aria-current="page" class="iati-breadcrumb-link"
-                    >${i}</a
-                  >`}
-            </li>`,
-        )}
+      <span class="iati-breadcrumb__previous">
+        <i class="iati-icon iati-icon--chevron-left"></i>
+        <a href="#" class="iati-breadcrumb-link">About</a>
+      </span>
+      <ol class="iati-breadcrumb__list">
+        <li class="iati-breadcrumb-item">
+          <a href="#" class="iati-breadcrumb-link">Home</a>
+        </li>
+        <li class="iati-breadcrumb-item">
+          <a href="#" class="iati-breadcrumb-link">About</a>
+        </li>
+        <li class="iati-breadcrumb-item iati-breadcrumb-item--current">
+          <a aria-current="page" class="iati-breadcrumb-link">Current page</a>
+        </li>
       </ol>
     </nav>
   `,

diff --git a/src/scss/components/icon/_icon.scss b/src/scss/components/icon/_icon.scss
@@ -18,6 +18,10 @@
     background-image: url("@assets/svg/icon-globe.svg");
   }
 
+  &--chevron-left {
+    background-image: url("@assets/svg/icon-chevron-left.svg");
+  }
+
   &--youtube {
     background-image: url("@assets/svg/youtube-logo.svg");
     aspect-ratio: 1.2 / 1;

diff --git a/src/scss/components/icon/icon.stories.ts b/src/scss/components/icon/icon.stories.ts
@@ -23,6 +23,7 @@ const createStory = (variant: string, background = "light") => {
 export const Info: Story = createStory("info");
 export const Search: Story = createStory("search");
 export const Globe: Story = createStory("globe");
+export const ChevronLeft: Story = createStory("chevron-left");
 export const Youtube: Story = createStory("youtube", "dark");
 export const X: Story = createStory("x", "dark");
 export const LinkedIn: Story = createStory("linkedin", "dark");

diff --git a/src/scss/layout/page/_page.scss b/src/scss/layout/page/_page.scss
@@ -4,7 +4,4 @@
   @include mixins.page-width-container();
   flex: 1;
   padding-block: 1rem;
-  & > * + * {
-    margin-block-start: 2rem;
-  }
 }