From 04eb33134d26f0364a9dacf3ff75f5e58ef53b1b Mon Sep 17 00:00:00 2001 From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com> Date: Wed, 11 Dec 2024 16:44:23 +0200 Subject: [PATCH] feat: simplify breadcrumb component --- src/assets/svg/icon-chevron-left.svg | 5 +++ .../components/breadcrumb/_breadcrumb.scss | 31 ++++++---------- .../breadcrumb/breadcrumb.stories.ts | 35 ++++++++----------- src/scss/components/icon/_icon.scss | 4 +++ src/scss/components/icon/icon.stories.ts | 1 + src/scss/layout/page/_page.scss | 3 -- 6 files changed, 34 insertions(+), 45 deletions(-) create mode 100644 src/assets/svg/icon-chevron-left.svg diff --git a/src/assets/svg/icon-chevron-left.svg b/src/assets/svg/icon-chevron-left.svg new file mode 100644 index 0000000..3025967 --- /dev/null +++ b/src/assets/svg/icon-chevron-left.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/scss/components/breadcrumb/_breadcrumb.scss b/src/scss/components/breadcrumb/_breadcrumb.scss index 8f56895..17269d6 100644 --- 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 index 2e47182..8c18a0d 100644 --- 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` `, diff --git a/src/scss/components/icon/_icon.scss b/src/scss/components/icon/_icon.scss index d600161..8b5e5da 100644 --- 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 index 01cd047..0f8765c 100644 --- 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 index 5214254..8a21200 100644 --- 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; - } }