From 28bc53f4b67a64b400ff67ddd52eaa43a30b8d34 Mon Sep 17 00:00:00 2001 From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com> Date: Tue, 22 Oct 2024 10:58:05 +0300 Subject: [PATCH 01/11] docs: add links to IATI website pages for header general nav --- src/scss/layout/header/header.stories.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/scss/layout/header/header.stories.ts b/src/scss/layout/header/header.stories.ts index 094706b..a2d1ea8 100644 --- a/src/scss/layout/header/header.stories.ts +++ b/src/scss/layout/header/header.stories.ts @@ -11,8 +11,6 @@ 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"; -const generalNavItems = ["IATI home", "News", "Events", "Contacts"]; - const meta: Meta = { title: "Layout/Header", parameters: { @@ -43,7 +41,14 @@ export const WithHorizontalNav: Story = { ${logo} From db73de2a77a957c5b2cbaa8d732f13ce57857d09 Mon Sep 17 00:00:00 2001 From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com> Date: Tue, 22 Oct 2024 15:27:56 +0300 Subject: [PATCH 02/11] docs: update capitalisation on nav items --- src/scss/components/mobile-nav/mobile-nav.stories.ts | 2 +- src/scss/components/piped-list/piped-list.stories.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scss/components/mobile-nav/mobile-nav.stories.ts b/src/scss/components/mobile-nav/mobile-nav.stories.ts index 74146d6..4629578 100644 --- a/src/scss/components/mobile-nav/mobile-nav.stories.ts +++ b/src/scss/components/mobile-nav/mobile-nav.stories.ts @@ -9,7 +9,7 @@ const toolItems = [ "Data Dashboards", "Custom Data Download", ]; -const generalItems = ["IATI home", "News", "Events", "Contact", "Help docs"]; +const generalItems = ["IATI Home", "News", "Events", "Contact", "Help Docs"]; const meta: Meta = { title: "Components/Mobile Nav", diff --git a/src/scss/components/piped-list/piped-list.stories.ts b/src/scss/components/piped-list/piped-list.stories.ts index 7c3308d..3c3c5eb 100644 --- a/src/scss/components/piped-list/piped-list.stories.ts +++ b/src/scss/components/piped-list/piped-list.stories.ts @@ -2,7 +2,7 @@ import { html } from "lit"; import type { Meta, StoryObj } from "@storybook/web-components"; -const items = ["IATI home", "News", "Events", "Contacts"]; +const items = ["IATI Home", "News", "Events", "Contacts"]; const meta: Meta = { title: "Components/Piped List", From 419374d16aef3b41a00816eec155938b27103152 Mon Sep 17 00:00:00 2001 From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com> Date: Tue, 22 Oct 2024 15:28:47 +0300 Subject: [PATCH 03/11] docs: add links to social icons --- src/scss/layout/footer/footer.stories.ts | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/src/scss/layout/footer/footer.stories.ts b/src/scss/layout/footer/footer.stories.ts index 26f14cc..1518366 100644 --- a/src/scss/layout/footer/footer.stories.ts +++ b/src/scss/layout/footer/footer.stories.ts @@ -58,9 +58,21 @@ export const Footer: Story = { ${CountrySwitcher.render?.call({ ...args })}
- ${Linkedin.render?.call({ ...args })} - ${Twitter.render?.call({ ...args })} - ${Youtube.render?.call({ ...args })} + + ${Linkedin.render?.call({ ...args })} + + + ${Twitter.render?.call({ ...args })} + + + ${Youtube.render?.call({ ...args })} +
From 1ece36393a05efbc5ddc61dced96f077e91c1279 Mon Sep 17 00:00:00 2001 From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com> Date: Tue, 22 Oct 2024 16:14:58 +0300 Subject: [PATCH 04/11] docs: fix mobile nav story --- src/scss/components/header-button/_header-button.scss | 9 +++++++++ .../components/header-button/header-button.stories.ts | 2 +- src/scss/components/mobile-nav/mobile-nav.stories.ts | 11 ++++++++++- 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/scss/components/header-button/_header-button.scss b/src/scss/components/header-button/_header-button.scss index 3696821..45a85f0 100644 --- a/src/scss/components/header-button/_header-button.scss +++ b/src/scss/components/header-button/_header-button.scss @@ -15,9 +15,18 @@ transition: all 0.2s ease-in-out; text-decoration: none; line-height: 1.1; + &:hover { background-color: $color-blue-30; } + + &--hide-mobile { + display: none; + + @media (min-width: $mobile_nav_breakpoint) { + display: inline-flex; + } + } } .header-button__icon { diff --git a/src/scss/components/header-button/header-button.stories.ts b/src/scss/components/header-button/header-button.stories.ts index df1b34b..1a872b5 100644 --- a/src/scss/components/header-button/header-button.stories.ts +++ b/src/scss/components/header-button/header-button.stories.ts @@ -18,7 +18,7 @@ type Story = StoryObj; export const Info: Story = { render: () => html` - + Help docs diff --git a/src/scss/components/mobile-nav/mobile-nav.stories.ts b/src/scss/components/mobile-nav/mobile-nav.stories.ts index 4629578..4d8af8b 100644 --- a/src/scss/components/mobile-nav/mobile-nav.stories.ts +++ b/src/scss/components/mobile-nav/mobile-nav.stories.ts @@ -15,16 +15,25 @@ const meta: Meta = { title: "Components/Mobile Nav", argTypes: { open: { - defaultValue: true, control: { type: "boolean" }, }, }, + parameters: { + docs: { + story: { + height: "600px", + }, + }, + }, }; export default meta; type Story = StoryObj; export const MobileNav: Story = { + args: { + open: true, + }, render: (args) => html` `, From 123f94b0867ea362b6333df349363cc39289882e Mon Sep 17 00:00:00 2001 From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com> Date: Wed, 23 Oct 2024 15:30:14 +0300 Subject: [PATCH 08/11] feat: consolidate button styles --- src/scss/components/_index.scss | 1 - src/scss/components/button/_button.scss | 37 ++++++++++++++----- src/scss/components/button/button.stories.ts | 29 ++++++++++++++- .../header-button/_header-button.scss | 34 ----------------- .../header-button/header-button.stories.ts | 35 ------------------ src/scss/layout/header/header.stories.ts | 16 +++++--- 6 files changed, 65 insertions(+), 87 deletions(-) delete mode 100644 src/scss/components/header-button/_header-button.scss delete mode 100644 src/scss/components/header-button/header-button.stories.ts diff --git a/src/scss/components/_index.scss b/src/scss/components/_index.scss index 78753a0..d696b72 100644 --- a/src/scss/components/_index.scss +++ b/src/scss/components/_index.scss @@ -5,7 +5,6 @@ @forward "card/card"; @forward "country-switcher/country-switcher"; @forward "piped-list/piped-list"; -@forward "header-button/header-button"; @forward "icon/icon"; @forward "search-bar/search-bar"; @forward "table/table"; diff --git a/src/scss/components/button/_button.scss b/src/scss/components/button/_button.scss index f5015ce..47f2aa4 100644 --- a/src/scss/components/button/_button.scss +++ b/src/scss/components/button/_button.scss @@ -1,23 +1,42 @@ @use "../../tokens/color" as *; +@use "../../tokens/font" as *; @use "../../tokens/spacing" as *; .iati-button { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.25em; background-color: $color-teal-90; border: none; color: white; - text-transform: uppercase; - padding: $padding-block; + font-family: $font-stack-heading; + line-height: 1.1; + padding: 0.7em; + font-weight: 600; + transition: all 0.2s ease-in-out; &:hover { background-color: $color-teal-80; } -} -.iati-button--submit { - color: $color-grey-90; - font-weight: 600; - background-color: $color-green-50; - &:hover { - background-color: $color-green-40; + &__icon { + width: 1rem; + } + + &--light { + color: $color-grey-90; + background-color: #fff; + &:hover { + background-color: $color-blue-30; + } + } + + &--submit { + color: $color-grey-90; + background-color: $color-green-50; + &:hover { + background-color: $color-green-40; + } } } diff --git a/src/scss/components/button/button.stories.ts b/src/scss/components/button/button.stories.ts index 84b6b31..3ffbf05 100644 --- a/src/scss/components/button/button.stories.ts +++ b/src/scss/components/button/button.stories.ts @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from "@storybook/web-components"; +import iconInfoUrl from "../../../assets/svg/icon-info.svg"; import { html } from "lit"; @@ -10,10 +11,34 @@ export default meta; type Story = StoryObj; export const Default: Story = { - render: () => html``, + render: () => html``, +}; + +export const Light: Story = { + parameters: { + backgrounds: { + default: "dark", + }, + }, + render: () => + html``, }; export const Submit: Story = { render: () => - html``, + html``, +}; + +export const WithIcon: Story = { + parameters: { + backgrounds: { + default: "dark", + }, + }, + render: () => html` + + `, }; diff --git a/src/scss/components/header-button/_header-button.scss b/src/scss/components/header-button/_header-button.scss deleted file mode 100644 index 45a85f0..0000000 --- a/src/scss/components/header-button/_header-button.scss +++ /dev/null @@ -1,34 +0,0 @@ -@use "../../tokens/color" as *; -@use "../../tokens/font" as *; -@use "../../tokens/spacing" as *; -@use "../../tokens/screens" as *; - -.header-button { - display: inline-flex; - padding: 0.7em; - font-family: $font-stack-heading; - color: $color-grey-90; - font-weight: 600; - align-items: center; - gap: 0.25em; - background-color: #fff; - transition: all 0.2s ease-in-out; - text-decoration: none; - line-height: 1.1; - - &:hover { - background-color: $color-blue-30; - } - - &--hide-mobile { - display: none; - - @media (min-width: $mobile_nav_breakpoint) { - display: inline-flex; - } - } -} - -.header-button__icon { - width: 1rem; -} diff --git a/src/scss/components/header-button/header-button.stories.ts b/src/scss/components/header-button/header-button.stories.ts deleted file mode 100644 index 1a872b5..0000000 --- a/src/scss/components/header-button/header-button.stories.ts +++ /dev/null @@ -1,35 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/web-components"; -import iconInfoUrl from "../../../assets/svg/icon-info.svg"; -import iconSearchUrl from "../../../assets/svg/icon-search.svg"; - -import { html } from "lit"; - -const meta: Meta = { - title: "Components/Header/Button", - parameters: { - backgrounds: { - default: "dark", - }, - }, -}; - -export default meta; -type Story = StoryObj; - -export const Info: Story = { - render: () => html` - - Help docs - - - `, -}; - -export const Search: Story = { - render: () => html` - - Search - - - `, -}; diff --git a/src/scss/layout/header/header.stories.ts b/src/scss/layout/header/header.stories.ts index 7851be8..ee2348c 100644 --- a/src/scss/layout/header/header.stories.ts +++ b/src/scss/layout/header/header.stories.ts @@ -1,11 +1,9 @@ import type { Meta, StoryObj } from "@storybook/web-components"; import { html } from "lit"; +import iconInfoUrl from "../../../assets/svg/icon-info.svg"; +import iconSearchUrl from "../../../assets/svg/icon-search.svg"; import logoColourUrl from "../../../assets/svg/logo-colour.svg"; import { CountrySwitcher } from "../../components/country-switcher/country-switcher.stories"; -import { - Info as InfoButton, - Search as SearchButton, -} from "../../components/header-button/header-button.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"; @@ -54,8 +52,14 @@ export const Header: Story = {
${CountrySwitcher.render?.call({ ...args })} - ${InfoButton.render?.call({ ...args })} - ${SearchButton.render?.call({ ...args })} + + ${MenuToggle.render?.call({ ...args })}
${TitleBar.render?.call({ ...args })} From f5ce74eee33658f74937c6e22246d6ba33abc403 Mon Sep 17 00:00:00 2001 From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com> Date: Wed, 23 Oct 2024 17:35:15 +0300 Subject: [PATCH 09/11] docs: write custom docs page for brand-background component --- package-lock.json | 24 +++++++++++++++++ package.json | 1 + .../brand-background/brand-background.mdx | 27 +++++++++++++++++++ .../brand-background.stories.ts | 3 ++- 4 files changed, 54 insertions(+), 1 deletion(-) create mode 100644 src/scss/components/brand-background/brand-background.mdx diff --git a/package-lock.json b/package-lock.json index 898b9e8..d7b0b92 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@commitlint/config-conventional": "^19.2.2", "@eslint/js": "^9.0.0", "@storybook/addon-essentials": "^8.0.10", + "@storybook/addon-links": "^8.0.10", "@storybook/blocks": "^8.0.10", "@storybook/web-components": "^8.0.10", "@storybook/web-components-vite": "^8.0.10", @@ -4849,6 +4850,29 @@ "url": "https://opencollective.com/storybook" } }, + "node_modules/@storybook/addon-links": { + "version": "8.0.10", + "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-8.0.10.tgz", + "integrity": "sha512-+mIyH2UcrgQfAyRM4+ARkB/D0OOY8UMwkZsD8dD23APZ8oru7W/NHX3lXl0WjPfQcOIx/QwWNWI3+DgVZJY3jw==", + "dev": true, + "dependencies": { + "@storybook/csf": "^0.1.4", + "@storybook/global": "^5.0.0", + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + } + } + }, "node_modules/@storybook/addon-measure": { "version": "8.0.10", "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.0.10.tgz", diff --git a/package.json b/package.json index 6275b64..390260e 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "@commitlint/config-conventional": "^19.2.2", "@eslint/js": "^9.0.0", "@storybook/addon-essentials": "^8.0.10", + "@storybook/addon-links": "^8.0.10", "@storybook/blocks": "^8.0.10", "@storybook/web-components": "^8.0.10", "@storybook/web-components-vite": "^8.0.10", diff --git a/src/scss/components/brand-background/brand-background.mdx b/src/scss/components/brand-background/brand-background.mdx new file mode 100644 index 0000000..a159bea --- /dev/null +++ b/src/scss/components/brand-background/brand-background.mdx @@ -0,0 +1,27 @@ +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/src/scss/components/brand-background/brand-background.stories.ts b/src/scss/components/brand-background/brand-background.stories.ts index 3385eac..1ebec9e 100644 --- a/src/scss/components/brand-background/brand-background.stories.ts +++ b/src/scss/components/brand-background/brand-background.stories.ts @@ -13,7 +13,8 @@ export const Default: Story = { render: () => html`
-

Some words

+ +
`, }; From 53402791ee60d960d54bc7f96d1b448f5d3c82cf Mon Sep 17 00:00:00 2001 From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com> Date: Thu, 24 Oct 2024 09:42:10 +0300 Subject: [PATCH 10/11] feat: add utilities to hide and display elements based on screen size --- src/scss/components/button/_button.scss | 4 +++- src/scss/iati.scss | 1 + src/scss/layout/header/header.stories.ts | 2 +- src/scss/utilities/_display.scss | 15 +++++++++++++++ src/scss/utilities/_index.scss | 1 + 5 files changed, 21 insertions(+), 2 deletions(-) create mode 100644 src/scss/utilities/_display.scss create mode 100644 src/scss/utilities/_index.scss diff --git a/src/scss/components/button/_button.scss b/src/scss/components/button/_button.scss index 47f2aa4..ca96dca 100644 --- a/src/scss/components/button/_button.scss +++ b/src/scss/components/button/_button.scss @@ -3,7 +3,9 @@ @use "../../tokens/spacing" as *; .iati-button { - display: inline-flex; + --display: inline-flex; // Used by .display--* utilities + + display: var(--display); align-items: center; justify-content: center; gap: 0.25em; diff --git a/src/scss/iati.scss b/src/scss/iati.scss index 12bc329..9a99298 100644 --- a/src/scss/iati.scss +++ b/src/scss/iati.scss @@ -4,6 +4,7 @@ @use "typography"; @use "components"; @use "layout"; +@use "utilities"; // Expose tokens as Sass variables @forward "tokens"; diff --git a/src/scss/layout/header/header.stories.ts b/src/scss/layout/header/header.stories.ts index ee2348c..9ddf282 100644 --- a/src/scss/layout/header/header.stories.ts +++ b/src/scss/layout/header/header.stories.ts @@ -52,7 +52,7 @@ export const Header: Story = {
${CountrySwitcher.render?.call({ ...args })} - diff --git a/src/scss/utilities/_display.scss b/src/scss/utilities/_display.scss new file mode 100644 index 0000000..3be4d94 --- /dev/null +++ b/src/scss/utilities/_display.scss @@ -0,0 +1,15 @@ +@use "../tokens/screens" as *; + +:root { + --display: block; +} + +.hide { + display: none; +} + +.display--sm { + @media (min-width: $screen-sm) { + display: var(--display); + } +} diff --git a/src/scss/utilities/_index.scss b/src/scss/utilities/_index.scss new file mode 100644 index 0000000..51eb377 --- /dev/null +++ b/src/scss/utilities/_index.scss @@ -0,0 +1 @@ +@use "display"; From 420f19da68c6a619efde004bb0b7887873508f88 Mon Sep 17 00:00:00 2001 From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com> Date: Tue, 5 Nov 2024 10:41:15 +0200 Subject: [PATCH 11/11] fix: change where margin is added in footer to stop the brand marque being cut off --- src/scss/layout/footer/_footer.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scss/layout/footer/_footer.scss b/src/scss/layout/footer/_footer.scss index b939a26..3b25788 100644 --- a/src/scss/layout/footer/_footer.scss +++ b/src/scss/layout/footer/_footer.scss @@ -6,12 +6,12 @@ .iati-footer { color: #fff; - padding-block: 2rem; } .iati-footer__section { + margin-block: 2rem; + &:not(:first-of-type) { - margin-block-start: 2rem; padding-block-start: 2rem; border-block-start: 1px solid $color-blue-30; }