From 2e68fdbd574fdab7413127962c997c03ca9d5a96 Mon Sep 17 00:00:00 2001 From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com> Date: Wed, 6 Nov 2024 10:52:23 +0200 Subject: [PATCH 01/10] docs(header): update stories for header components --- .../mobile-nav/mobile-nav.stories.ts | 47 ++++++++++++++----- .../components/title-bar/title-bar.stories.ts | 2 +- .../components/tool-nav/tool-nav.stories.ts | 2 +- 3 files changed, 36 insertions(+), 15 deletions(-) diff --git a/src/scss/components/mobile-nav/mobile-nav.stories.ts b/src/scss/components/mobile-nav/mobile-nav.stories.ts index 4d8af8b..da31e66 100644 --- a/src/scss/components/mobile-nav/mobile-nav.stories.ts +++ b/src/scss/components/mobile-nav/mobile-nav.stories.ts @@ -3,13 +3,7 @@ import { html } from "lit"; import type { Meta, StoryObj } from "@storybook/web-components"; import { Close as MenuToggle } from "../menu-toggle/menu-toggle.stories"; -const toolItems = [ - "Tool Home", - "About", - "Data Dashboards", - "Custom Data Download", -]; -const generalItems = ["IATI Home", "News", "Events", "Contact", "Help Docs"]; +const toolItems = ["Tool Home", "About"]; const meta: Meta = { title: "Components/Mobile Nav", @@ -55,12 +49,39 @@ export const MobileNav: Story = { )} diff --git a/src/scss/components/title-bar/title-bar.stories.ts b/src/scss/components/title-bar/title-bar.stories.ts index 792c33f..59fbf2a 100644 --- a/src/scss/components/title-bar/title-bar.stories.ts +++ b/src/scss/components/title-bar/title-bar.stories.ts @@ -17,7 +17,7 @@ export const Default: Story = { render: () => html`

IATI Tools

-

Country Development Finance Data

+

Tool Name

`, }; diff --git a/src/scss/components/tool-nav/tool-nav.stories.ts b/src/scss/components/tool-nav/tool-nav.stories.ts index efab64d..b5ddb5d 100644 --- a/src/scss/components/tool-nav/tool-nav.stories.ts +++ b/src/scss/components/tool-nav/tool-nav.stories.ts @@ -2,7 +2,7 @@ import { html } from "lit"; import type { Meta, StoryObj } from "@storybook/web-components"; -const items = ["Tool Home", "About", "Data Dashboards", "Custom Data Download"]; +const items = ["Tool Name", "About"]; const meta: Meta = { title: "Components/Header/Tool Nav", From 8270df87324a2a9aadbf51e9f552dab4986dfde7 Mon Sep 17 00:00:00 2001 From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com> Date: Thu, 7 Nov 2024 10:30:09 +0200 Subject: [PATCH 02/10] refactor: move header from layout to components folder --- src/scss/components/_index.scss | 1 + src/scss/{layout => components}/header/_header.scss | 0 src/scss/{layout => components}/header/header.stories.ts | 2 +- src/scss/layout/_index.scss | 1 - src/scss/layout/page/page.stories.ts | 2 +- 5 files changed, 3 insertions(+), 3 deletions(-) rename src/scss/{layout => components}/header/_header.scss (100%) rename src/scss/{layout => components}/header/header.stories.ts (99%) diff --git a/src/scss/components/_index.scss b/src/scss/components/_index.scss index d696b72..b5cf83f 100644 --- a/src/scss/components/_index.scss +++ b/src/scss/components/_index.scss @@ -15,3 +15,4 @@ @forward "newsletter-form/newsletter-form"; @forward "title-bar/title-bar"; @forward "footer-block/footer-block"; +@forward "header/header"; diff --git a/src/scss/layout/header/_header.scss b/src/scss/components/header/_header.scss similarity index 100% rename from src/scss/layout/header/_header.scss rename to src/scss/components/header/_header.scss diff --git a/src/scss/layout/header/header.stories.ts b/src/scss/components/header/header.stories.ts similarity index 99% rename from src/scss/layout/header/header.stories.ts rename to src/scss/components/header/header.stories.ts index 1d6cc6a..6b6eff9 100644 --- a/src/scss/layout/header/header.stories.ts +++ b/src/scss/components/header/header.stories.ts @@ -10,7 +10,7 @@ import { Default as TitleBar } from "../../components/title-bar/title-bar.storie import { ToolNav } from "../../components/tool-nav/tool-nav.stories"; const meta: Meta = { - title: "Layout/Header", + title: "Components/Header", parameters: { layout: "fullscreen", }, diff --git a/src/scss/layout/_index.scss b/src/scss/layout/_index.scss index f127e09..9954f4e 100644 --- a/src/scss/layout/_index.scss +++ b/src/scss/layout/_index.scss @@ -1,3 +1,2 @@ @forward "footer/footer"; -@forward "header/header"; @forward "page/page"; diff --git a/src/scss/layout/page/page.stories.ts b/src/scss/layout/page/page.stories.ts index b053acc..0517b7b 100644 --- a/src/scss/layout/page/page.stories.ts +++ b/src/scss/layout/page/page.stories.ts @@ -2,9 +2,9 @@ import type { Meta, StoryObj } from "@storybook/web-components"; import { html } from "lit"; import { Breadcrumb } from "../../components/breadcrumb/breadcrumb.stories"; +import { Header } from "../../components/header/header.stories"; import { Notice as MessageNotice } from "../../components/message/message.stories"; import { Footer } from "../footer/footer.stories"; -import { Header } from "../header/header.stories"; const meta: Meta = { title: "Layout/Page", From 4334220909b12871ffafba23f113a64fd4cb17c2 Mon Sep 17 00:00:00 2001 From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com> Date: Thu, 7 Nov 2024 10:32:27 +0200 Subject: [PATCH 03/10] refactor: move footer from layout to components folder --- src/scss/components/_index.scss | 1 + src/scss/{layout => components}/footer/_footer.scss | 0 src/scss/{layout => components}/footer/footer.stories.ts | 2 +- src/scss/layout/_index.scss | 1 - src/scss/layout/page/page.stories.ts | 2 +- 5 files changed, 3 insertions(+), 3 deletions(-) rename src/scss/{layout => components}/footer/_footer.scss (100%) rename src/scss/{layout => components}/footer/footer.stories.ts (98%) diff --git a/src/scss/components/_index.scss b/src/scss/components/_index.scss index b5cf83f..d3bc2b3 100644 --- a/src/scss/components/_index.scss +++ b/src/scss/components/_index.scss @@ -16,3 +16,4 @@ @forward "title-bar/title-bar"; @forward "footer-block/footer-block"; @forward "header/header"; +@forward "footer/footer"; diff --git a/src/scss/layout/footer/_footer.scss b/src/scss/components/footer/_footer.scss similarity index 100% rename from src/scss/layout/footer/_footer.scss rename to src/scss/components/footer/_footer.scss diff --git a/src/scss/layout/footer/footer.stories.ts b/src/scss/components/footer/footer.stories.ts similarity index 98% rename from src/scss/layout/footer/footer.stories.ts rename to src/scss/components/footer/footer.stories.ts index 1518366..3c84c70 100644 --- a/src/scss/layout/footer/footer.stories.ts +++ b/src/scss/components/footer/footer.stories.ts @@ -16,7 +16,7 @@ const legalNavItems = [ ]; const meta: Meta = { - title: "Layout/Footer", + title: "Components/Footer", parameters: { layout: "fullscreen", }, diff --git a/src/scss/layout/_index.scss b/src/scss/layout/_index.scss index 9954f4e..d8702ee 100644 --- a/src/scss/layout/_index.scss +++ b/src/scss/layout/_index.scss @@ -1,2 +1 @@ -@forward "footer/footer"; @forward "page/page"; diff --git a/src/scss/layout/page/page.stories.ts b/src/scss/layout/page/page.stories.ts index 0517b7b..a33b937 100644 --- a/src/scss/layout/page/page.stories.ts +++ b/src/scss/layout/page/page.stories.ts @@ -2,9 +2,9 @@ import type { Meta, StoryObj } from "@storybook/web-components"; import { html } from "lit"; import { Breadcrumb } from "../../components/breadcrumb/breadcrumb.stories"; +import { Footer } from "../../components/footer/footer.stories"; import { Header } from "../../components/header/header.stories"; import { Notice as MessageNotice } from "../../components/message/message.stories"; -import { Footer } from "../footer/footer.stories"; const meta: Meta = { title: "Layout/Page", From bdb01c2bc56be74e14f9eb17d8698c4647dc017c Mon Sep 17 00:00:00 2001 From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com> Date: Thu, 7 Nov 2024 11:33:35 +0200 Subject: [PATCH 04/10] docs(piped-list): use generic items for documentation --- src/scss/components/piped-list/piped-list.stories.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/scss/components/piped-list/piped-list.stories.ts b/src/scss/components/piped-list/piped-list.stories.ts index 3c3c5eb..2ab8513 100644 --- a/src/scss/components/piped-list/piped-list.stories.ts +++ b/src/scss/components/piped-list/piped-list.stories.ts @@ -2,8 +2,6 @@ import { html } from "lit"; import type { Meta, StoryObj } from "@storybook/web-components"; -const items = ["IATI Home", "News", "Events", "Contacts"]; - const meta: Meta = { title: "Components/Piped List", }; @@ -14,7 +12,9 @@ type Story = StoryObj; export const PipedList: Story = { render: () => html` `, }; From 25676c9b1fa30e8901b03ad760382f9afe6dcd6e Mon Sep 17 00:00:00 2001 From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com> Date: Thu, 7 Nov 2024 11:38:22 +0200 Subject: [PATCH 05/10] refactor: move title bar component into header folder --- src/scss/components/_index.scss | 1 - src/scss/components/header/_header.scss | 2 ++ src/scss/components/header/header.stories.ts | 2 +- .../components/{ => header}/title-bar/_title-bar.scss | 8 ++++---- .../{ => header}/title-bar/title-bar.stories.ts | 2 +- 5 files changed, 8 insertions(+), 7 deletions(-) rename src/scss/components/{ => header}/title-bar/_title-bar.scss (82%) rename src/scss/components/{ => header}/title-bar/title-bar.stories.ts (92%) diff --git a/src/scss/components/_index.scss b/src/scss/components/_index.scss index d3bc2b3..412aa1d 100644 --- a/src/scss/components/_index.scss +++ b/src/scss/components/_index.scss @@ -13,7 +13,6 @@ @forward "message/message"; @forward "mobile-nav/mobile-nav"; @forward "newsletter-form/newsletter-form"; -@forward "title-bar/title-bar"; @forward "footer-block/footer-block"; @forward "header/header"; @forward "footer/footer"; diff --git a/src/scss/components/header/_header.scss b/src/scss/components/header/_header.scss index 3b937f7..9b834f6 100644 --- a/src/scss/components/header/_header.scss +++ b/src/scss/components/header/_header.scss @@ -1,3 +1,5 @@ +@forward "title-bar/title-bar"; + @use "../../tokens/color" as *; @use "../../tokens/screens" as *; @use "../../tokens/spacing" as *; diff --git a/src/scss/components/header/header.stories.ts b/src/scss/components/header/header.stories.ts index 6b6eff9..bb6e65d 100644 --- a/src/scss/components/header/header.stories.ts +++ b/src/scss/components/header/header.stories.ts @@ -6,8 +6,8 @@ import logoColourUrl from "../../../assets/svg/logo-colour.svg"; import { CountrySwitcher } from "../../components/country-switcher/country-switcher.stories"; import { Open as MenuToggle } from "../../components/menu-toggle/menu-toggle.stories"; import { MobileNav } from "../../components/mobile-nav/mobile-nav.stories"; -import { Default as TitleBar } from "../../components/title-bar/title-bar.stories"; import { ToolNav } from "../../components/tool-nav/tool-nav.stories"; +import { Default as TitleBar } from "./title-bar/title-bar.stories"; const meta: Meta = { title: "Components/Header", diff --git a/src/scss/components/title-bar/_title-bar.scss b/src/scss/components/header/title-bar/_title-bar.scss similarity index 82% rename from src/scss/components/title-bar/_title-bar.scss rename to src/scss/components/header/title-bar/_title-bar.scss index df6aaff..c8b39e0 100644 --- a/src/scss/components/title-bar/_title-bar.scss +++ b/src/scss/components/header/title-bar/_title-bar.scss @@ -1,7 +1,7 @@ -@use "../../tokens/color" as *; -@use "../../tokens/font" as *; -@use "../../tokens/spacing" as *; -@use "../../tokens/screens" as *; +@use "../../../tokens/color" as *; +@use "../../../tokens/font" as *; +@use "../../../tokens/spacing" as *; +@use "../../../tokens/screens" as *; .iati-header-title { display: flex; diff --git a/src/scss/components/title-bar/title-bar.stories.ts b/src/scss/components/header/title-bar/title-bar.stories.ts similarity index 92% rename from src/scss/components/title-bar/title-bar.stories.ts rename to src/scss/components/header/title-bar/title-bar.stories.ts index 59fbf2a..614cce3 100644 --- a/src/scss/components/title-bar/title-bar.stories.ts +++ b/src/scss/components/header/title-bar/title-bar.stories.ts @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/web-components"; import { html } from "lit"; const meta: Meta = { - title: "Components/Title Bar", + title: "Components/Header/Title Bar", parameters: { backgrounds: { default: "dark", From 2599c57a4fa53dcffc40974a495f4cd1829de93f Mon Sep 17 00:00:00 2001 From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com> Date: Thu, 7 Nov 2024 11:39:33 +0200 Subject: [PATCH 06/10] refactor: move tool nav component into header folder --- src/scss/components/_index.scss | 1 - src/scss/components/header/_header.scss | 1 + src/scss/components/header/header.stories.ts | 2 +- src/scss/components/{ => header}/tool-nav/_tool-nav.scss | 6 +++--- .../components/{ => header}/tool-nav/tool-nav.stories.ts | 0 5 files changed, 5 insertions(+), 5 deletions(-) rename src/scss/components/{ => header}/tool-nav/_tool-nav.scss (79%) rename src/scss/components/{ => header}/tool-nav/tool-nav.stories.ts (100%) diff --git a/src/scss/components/_index.scss b/src/scss/components/_index.scss index 412aa1d..78d3c7e 100644 --- a/src/scss/components/_index.scss +++ b/src/scss/components/_index.scss @@ -8,7 +8,6 @@ @forward "icon/icon"; @forward "search-bar/search-bar"; @forward "table/table"; -@forward "tool-nav/tool-nav"; @forward "menu-toggle/menu-toggle"; @forward "message/message"; @forward "mobile-nav/mobile-nav"; diff --git a/src/scss/components/header/_header.scss b/src/scss/components/header/_header.scss index 9b834f6..a6b56fe 100644 --- a/src/scss/components/header/_header.scss +++ b/src/scss/components/header/_header.scss @@ -1,4 +1,5 @@ @forward "title-bar/title-bar"; +@forward "tool-nav/tool-nav"; @use "../../tokens/color" as *; @use "../../tokens/screens" as *; diff --git a/src/scss/components/header/header.stories.ts b/src/scss/components/header/header.stories.ts index bb6e65d..d68a0a9 100644 --- a/src/scss/components/header/header.stories.ts +++ b/src/scss/components/header/header.stories.ts @@ -6,8 +6,8 @@ import logoColourUrl from "../../../assets/svg/logo-colour.svg"; import { CountrySwitcher } from "../../components/country-switcher/country-switcher.stories"; import { Open as MenuToggle } from "../../components/menu-toggle/menu-toggle.stories"; import { MobileNav } from "../../components/mobile-nav/mobile-nav.stories"; -import { ToolNav } from "../../components/tool-nav/tool-nav.stories"; import { Default as TitleBar } from "./title-bar/title-bar.stories"; +import { ToolNav } from "./tool-nav/tool-nav.stories"; const meta: Meta = { title: "Components/Header", diff --git a/src/scss/components/tool-nav/_tool-nav.scss b/src/scss/components/header/tool-nav/_tool-nav.scss similarity index 79% rename from src/scss/components/tool-nav/_tool-nav.scss rename to src/scss/components/header/tool-nav/_tool-nav.scss index ca08698..dacf886 100644 --- a/src/scss/components/tool-nav/_tool-nav.scss +++ b/src/scss/components/header/tool-nav/_tool-nav.scss @@ -1,6 +1,6 @@ -@use "../../tokens/color" as *; -@use "../../tokens/font" as *; -@use "../../tokens/spacing" as *; +@use "../../../tokens/color" as *; +@use "../../../tokens/font" as *; +@use "../../../tokens/spacing" as *; .iati-tool-nav { list-style-type: none; diff --git a/src/scss/components/tool-nav/tool-nav.stories.ts b/src/scss/components/header/tool-nav/tool-nav.stories.ts similarity index 100% rename from src/scss/components/tool-nav/tool-nav.stories.ts rename to src/scss/components/header/tool-nav/tool-nav.stories.ts From a23cd6e25beae26f8a5c0cc72191878f88cd5eae Mon Sep 17 00:00:00 2001 From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com> Date: Thu, 7 Nov 2024 11:40:38 +0200 Subject: [PATCH 07/10] refactor: move footer block component into footer folder --- src/scss/components/_index.scss | 1 - src/scss/components/footer/_footer.scss | 2 ++ .../{ => footer}/footer-block/_footer-block.scss | 8 ++++---- .../{ => footer}/footer-block/footer-block.stories.ts | 0 src/scss/components/footer/footer.stories.ts | 6 +++--- 5 files changed, 9 insertions(+), 8 deletions(-) rename src/scss/components/{ => footer}/footer-block/_footer-block.scss (84%) rename src/scss/components/{ => footer}/footer-block/footer-block.stories.ts (100%) diff --git a/src/scss/components/_index.scss b/src/scss/components/_index.scss index 78d3c7e..1fbf2bb 100644 --- a/src/scss/components/_index.scss +++ b/src/scss/components/_index.scss @@ -12,6 +12,5 @@ @forward "message/message"; @forward "mobile-nav/mobile-nav"; @forward "newsletter-form/newsletter-form"; -@forward "footer-block/footer-block"; @forward "header/header"; @forward "footer/footer"; diff --git a/src/scss/components/footer/_footer.scss b/src/scss/components/footer/_footer.scss index 3b25788..905354c 100644 --- a/src/scss/components/footer/_footer.scss +++ b/src/scss/components/footer/_footer.scss @@ -1,3 +1,5 @@ +@forward "footer-block/footer-block"; + @use "../../tokens/color" as *; @use "../../tokens/font" as *; @use "../../tokens/spacing" as *; diff --git a/src/scss/components/footer-block/_footer-block.scss b/src/scss/components/footer/footer-block/_footer-block.scss similarity index 84% rename from src/scss/components/footer-block/_footer-block.scss rename to src/scss/components/footer/footer-block/_footer-block.scss index 18b719b..54ec7d3 100644 --- a/src/scss/components/footer-block/_footer-block.scss +++ b/src/scss/components/footer/footer-block/_footer-block.scss @@ -1,7 +1,7 @@ -@use "../../tokens/screens" as *; -@use "../../tokens/font" as *; -@use "../../tokens/color" as *; -@use "../../base/mixins"; +@use "../../../tokens/screens" as *; +@use "../../../tokens/font" as *; +@use "../../../tokens/color" as *; +@use "../../../base/mixins"; .iati-footer-block { color: #fff; diff --git a/src/scss/components/footer-block/footer-block.stories.ts b/src/scss/components/footer/footer-block/footer-block.stories.ts similarity index 100% rename from src/scss/components/footer-block/footer-block.stories.ts rename to src/scss/components/footer/footer-block/footer-block.stories.ts diff --git a/src/scss/components/footer/footer.stories.ts b/src/scss/components/footer/footer.stories.ts index 3c84c70..df15cbe 100644 --- a/src/scss/components/footer/footer.stories.ts +++ b/src/scss/components/footer/footer.stories.ts @@ -2,12 +2,12 @@ import type { Meta, StoryObj } from "@storybook/web-components"; import { html } from "lit"; import { CountrySwitcher } from "../../components/country-switcher/country-switcher.stories"; +import { Linkedin, Twitter, Youtube } from "../../components/icon/icon.stories"; +import { Default as NewsletterForm } from "../../components/newsletter-form/newsletter-form.stories"; import { AdditionInfo as AdditionalInfoFooterBlock, UsefulLinks as UsefulLinksFooterBlock, -} from "../../components/footer-block/footer-block.stories"; -import { Linkedin, Twitter, Youtube } from "../../components/icon/icon.stories"; -import { Default as NewsletterForm } from "../../components/newsletter-form/newsletter-form.stories"; +} from "./footer-block/footer-block.stories"; const legalNavItems = [ html`Privacy`, From 94199ba09478c70c7b2e825cb2b32a116f0bb328 Mon Sep 17 00:00:00 2001 From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com> Date: Tue, 12 Nov 2024 10:31:25 +0200 Subject: [PATCH 08/10] docs: use teal for background colour of white logos --- src/logos.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/logos.mdx b/src/logos.mdx index df75280..4e2ef09 100644 --- a/src/logos.mdx +++ b/src/logos.mdx @@ -17,15 +17,15 @@ import favicon32Url from "./assets/favicon/favicon-32x32.png"; ## Logo White - + ## Marque White - + ## Marque White Animated - + ## Favicon 16 x 16 From 31b398cd34c6563d4dd285e1c7ae598ac9dd0775 Mon Sep 17 00:00:00 2001 From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com> Date: Tue, 12 Nov 2024 10:34:21 +0200 Subject: [PATCH 09/10] feat: use vite to inline svg into compiled css so that consuming apps don't have to serve brand logo --- .storybook/main.ts | 1 - .../brand-background/_brand-background.scss | 2 +- .../brand-background/brand-background.mdx | 27 --------- static/images/marque-white.svg | 59 ------------------- 4 files changed, 1 insertion(+), 88 deletions(-) delete mode 100644 src/scss/components/brand-background/brand-background.mdx delete mode 100644 static/images/marque-white.svg diff --git a/.storybook/main.ts b/.storybook/main.ts index 86b26d9..b87ffc7 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -4,7 +4,6 @@ const config: StorybookConfig = { framework: "@storybook/web-components-vite", stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"], addons: ["@storybook/addon-essentials"], - staticDirs: ["../static"], docs: { autodocs: true, }, diff --git a/src/scss/components/brand-background/_brand-background.scss b/src/scss/components/brand-background/_brand-background.scss index 26b8154..21feea4 100644 --- a/src/scss/components/brand-background/_brand-background.scss +++ b/src/scss/components/brand-background/_brand-background.scss @@ -3,7 +3,7 @@ .iati-brand-background { $var-background-image: --background-image; - #{$var-background-image}: url("/images/marque-white.svg"); + #{$var-background-image}: url("/src/assets/svg/marque-white.svg"); background-color: $color-teal-90; display: grid; diff --git a/src/scss/components/brand-background/brand-background.mdx b/src/scss/components/brand-background/brand-background.mdx deleted file mode 100644 index a159bea..0000000 --- a/src/scss/components/brand-background/brand-background.mdx +++ /dev/null @@ -1,27 +0,0 @@ -import { Meta, Title, Subtitle, Stories } from "@storybook/blocks"; -import LinkTo from "@storybook/addon-links/react"; -import * as ComponentStories from "./brand-background.stories.ts"; - - - -Brand Background - -**This component expects the background image to be served by the app using the design system.** - -To use this component, take the following steps: - -1. Go to Marque White and download the image. - -2. Serve the file from your app. This will depend on the technology your app is written in. - -3. Optionally, use the provided CSS custom property to configure the path to the image. The default is `/images/marque-white.svg`. - - ```css - .iati-brand-background { - --background-image: url("PATH_TO_IMAGE"); - } - ``` - -4. Apply the appropriate classes to your html elements, using the example below. - - diff --git a/static/images/marque-white.svg b/static/images/marque-white.svg deleted file mode 100644 index d84543b..0000000 --- a/static/images/marque-white.svg +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - - - - - - - - - - - From d5b5f99d53dec5dda525969423ec7984b86bc4ce Mon Sep 17 00:00:00 2001 From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com> Date: Tue, 12 Nov 2024 10:36:13 +0200 Subject: [PATCH 10/10] docs(icon): use dark background for icon stories so icon background is visible --- src/scss/components/icon/icon.stories.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/scss/components/icon/icon.stories.ts b/src/scss/components/icon/icon.stories.ts index 28813b3..1ce8ce7 100644 --- a/src/scss/components/icon/icon.stories.ts +++ b/src/scss/components/icon/icon.stories.ts @@ -3,6 +3,11 @@ import { html } from "lit"; const meta: Meta = { title: "Components/Icon", + parameters: { + backgrounds: { + default: "dark", + }, + }, }; export default meta;