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/_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/brand-background/_brand-background.scss b/src/scss/components/brand-background/_brand-background.scss index 6797345..26b8154 100644 --- a/src/scss/components/brand-background/_brand-background.scss +++ b/src/scss/components/brand-background/_brand-background.scss @@ -2,13 +2,16 @@ @use "../../tokens/screens" as *; .iati-brand-background { + $var-background-image: --background-image; + #{$var-background-image}: url("/images/marque-white.svg"); + background-color: $color-teal-90; display: grid; @media (min-width: $screen-md) { &:after { content: ""; grid-area: 1/-1; - background-image: url("/images/marque-white.svg"); + background-image: var($var-background-image); background-repeat: no-repeat; background-position: right 2rem top; background-size: 32.3rem auto; 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

+ +
`, }; diff --git a/src/scss/components/button/_button.scss b/src/scss/components/button/_button.scss index f5015ce..ca96dca 100644 --- a/src/scss/components/button/_button.scss +++ b/src/scss/components/button/_button.scss @@ -1,23 +1,44 @@ @use "../../tokens/color" as *; +@use "../../tokens/font" as *; @use "../../tokens/spacing" as *; .iati-button { + --display: inline-flex; // Used by .display--* utilities + + display: var(--display); + 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/footer-block/footer-block.stories.ts b/src/scss/components/footer-block/footer-block.stories.ts index 6a4e4dc..7f95918 100644 --- a/src/scss/components/footer-block/footer-block.stories.ts +++ b/src/scss/components/footer-block/footer-block.stories.ts @@ -23,7 +23,7 @@ export const UsefulLinks: Story = {
  • Useful link
  • Translation FAQs
  • Another useful link
    • -
  • Another even more useful longer lin
    • +
  • Another even more useful longer link
    • `, 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 3696821..0000000 --- a/src/scss/components/header-button/_header-button.scss +++ /dev/null @@ -1,25 +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; - } -} - -.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 df1b34b..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/components/mobile-nav/mobile-nav.stories.ts b/src/scss/components/mobile-nav/mobile-nav.stories.ts index 74146d6..4d8af8b 100644 --- a/src/scss/components/mobile-nav/mobile-nav.stories.ts +++ b/src/scss/components/mobile-nav/mobile-nav.stories.ts @@ -9,22 +9,31 @@ 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", 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`
    * { margin: 0; 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/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; } 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 })}
    diff --git a/src/scss/layout/header/_header.scss b/src/scss/layout/header/_header.scss index 32a80fc..3b937f7 100644 --- a/src/scss/layout/header/_header.scss +++ b/src/scss/layout/header/_header.scss @@ -58,8 +58,12 @@ } .iati-header__nav { - margin-block-start: 1.5rem; border-block-start: 1px solid #fff; + display: none; + + @media (min-width: $mobile_nav_breakpoint) { + display: block; + } } .iati-header__logo { @@ -71,6 +75,12 @@ } .iati-header__general-nav { + display: none; + + @media (min-width: $mobile_nav_breakpoint) { + display: block; + } + a { font-family: $font-stack-heading; text-decoration: none; @@ -84,3 +94,9 @@ } } } + +.iati-header .iati-menu-toggle--open { + @media (min-width: $mobile_nav_breakpoint) { + display: none; + } +} diff --git a/src/scss/layout/header/header.stories.ts b/src/scss/layout/header/header.stories.ts index 094706b..9ddf282 100644 --- a/src/scss/layout/header/header.stories.ts +++ b/src/scss/layout/header/header.stories.ts @@ -1,29 +1,19 @@ 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"; import { ToolNav } from "../../components/tool-nav/tool-nav.stories"; -const generalNavItems = ["IATI home", "News", "Events", "Contacts"]; - const meta: Meta = { title: "Layout/Header", parameters: { layout: "fullscreen", }, - argTypes: { - open: { - defaultValue: true, - control: { type: "boolean" }, - }, - }, }; export default meta; @@ -35,15 +25,23 @@ const logo = html` `; -export const WithHorizontalNav: Story = { - render: (args) => html` +export const Header: Story = { + render: (args, context) => html` + ${MobileNav.render({ ...args }, context)}
    ${logo}
    @@ -54,8 +52,15 @@ export const WithHorizontalNav: Story = {
    ${CountrySwitcher.render?.call({ ...args })} - ${InfoButton.render?.call({ ...args })} - ${SearchButton.render?.call({ ...args })} + + + ${MenuToggle.render?.call({ ...args })}
    ${TitleBar.render?.call({ ...args })}
    @@ -64,37 +69,6 @@ export const WithHorizontalNav: Story = {
    - `, -}; - -export const WithMobileNav: Story = { - parameters: { - viewport: { - defaultviewport: "tablet", - }, - }, - render: (args, context) => html` - ${MobileNav.render({ ...args }, context)} -
    -
    -
    - ${logo} -
    -
    -
    -
    -
    - ${CountrySwitcher.render?.call({ ...args })} - ${SearchButton.render?.call({ ...args })} - ${MenuToggle.render?.call({ ...args })} -
    - ${TitleBar.render?.call({ ...args })} - -
    -
    -
    `, }; diff --git a/src/scss/layout/page/page.stories.ts b/src/scss/layout/page/page.stories.ts index 271cf09..b053acc 100644 --- a/src/scss/layout/page/page.stories.ts +++ b/src/scss/layout/page/page.stories.ts @@ -4,7 +4,7 @@ import { html } from "lit"; import { Breadcrumb } from "../../components/breadcrumb/breadcrumb.stories"; import { Notice as MessageNotice } from "../../components/message/message.stories"; import { Footer } from "../footer/footer.stories"; -import { WithHorizontalNav, WithMobileNav } from "../header/header.stories"; +import { Header } from "../header/header.stories"; const meta: Meta = { title: "Layout/Page", @@ -16,22 +16,9 @@ const meta: Meta = { export default meta; type Story = StoryObj; -export const HorizontalNav: Story = { +export const Page: Story = { render: (args) => html` - ${WithHorizontalNav.render?.call({ ...args })} -
    - ${Breadcrumb.render?.call({ ...args })} - ${MessageNotice.render?.call({ ...args })} -

    Page heading

    -

    Page contents

    -
    - ${Footer.render?.call({ ...args })} - `, -}; - -export const MobileNav: Story = { - render: (args) => html` - ${WithMobileNav.render?.call({ ...args })} + ${Header.render?.call({ ...args })}
    ${Breadcrumb.render?.call({ ...args })} ${MessageNotice.render?.call({ ...args })} diff --git a/src/scss/tokens/_screens.scss b/src/scss/tokens/_screens.scss index e0795de..8d3cec2 100644 --- a/src/scss/tokens/_screens.scss +++ b/src/scss/tokens/_screens.scss @@ -3,3 +3,5 @@ $screen-md: 768px; $screen-lg: 1024px; $screen-xl: 1280px; $screen-2xl: 1536px; + +$mobile_nav_breakpoint: $screen-sm; 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";