From 8057bd5333e0ae71e0b5fd148e64e6b893c7231f Mon Sep 17 00:00:00 2001 From: Laurie Date: Thu, 7 Aug 2025 09:54:05 +0100 Subject: [PATCH 01/33] fix: add TypeScript declaration for SVG module --- src/types/svg.d.ts | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 src/types/svg.d.ts diff --git a/src/types/svg.d.ts b/src/types/svg.d.ts new file mode 100644 index 0000000..a5a700b --- /dev/null +++ b/src/types/svg.d.ts @@ -0,0 +1,4 @@ +declare module "*.svg" { + const content: string; + export default content; +} \ No newline at end of file From 643e5f3bf03e5172d99194f1be51385ad8040a4a Mon Sep 17 00:00:00 2001 From: Laurie Date: Thu, 7 Aug 2025 09:54:30 +0100 Subject: [PATCH 02/33] docs: update header documentation to include compact header variant --- src/scss/components/header/Docs.mdx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/scss/components/header/Docs.mdx b/src/scss/components/header/Docs.mdx index 118ed2f..60a7e07 100644 --- a/src/scss/components/header/Docs.mdx +++ b/src/scss/components/header/Docs.mdx @@ -18,4 +18,12 @@ The first link in the menu must return to the tool's home page. Further links ar If breadcrumbs are to be used, these should be directly below the header. +## Default Header + + +## Compact Header + +The compact header variant places the title bar and actions on the same line and removes the `Tool Nav`. + + From ded16b983c16b2074af4a32a8200cdaf3aac3fac Mon Sep 17 00:00:00 2001 From: Laurie Date: Thu, 7 Aug 2025 09:55:00 +0100 Subject: [PATCH 03/33] feat: add compact header variant with responsive layout adjustments --- src/scss/components/header/_header.scss | 34 ++++++++-- src/scss/components/header/header.stories.ts | 68 +++++++++++++++++++- 2 files changed, 97 insertions(+), 5 deletions(-) diff --git a/src/scss/components/header/_header.scss b/src/scss/components/header/_header.scss index 5729104..eee16fe 100644 --- a/src/scss/components/header/_header.scss +++ b/src/scss/components/header/_header.scss @@ -33,9 +33,6 @@ &:not(:has(.iati-header__nav[hidden])) { padding-block-end: 0; } - @media (min-width: $mobile_nav_breakpoint) { - padding-block: 2rem; - } } } @@ -46,7 +43,7 @@ align-items: flex-start; border-block-end: 1px solid #fff; padding-block-end: 1rem; - margin-block-end: 1rem; + margin-block-end: 0.5rem; > :last-child { margin-inline-start: auto; } @@ -103,3 +100,32 @@ display: none; } } + +.iati-header--compact { + .iati-header__main-row { + display: flex; + flex-direction: column; + width: 100%; + @media (min-width: $mobile_nav_breakpoint) { + flex-direction: row-reverse; + align-items: center; + gap: 2rem; + justify-content: space-between; + } + } + + .iati-header-title { + flex: 1 1 0; + min-width: 0; + } + + .iati-header__actions { + flex-shrink: 0; + } + + .iati-brand-background__content { + @media (min-width: $mobile_nav_breakpoint) { + padding-block: 0; + } + } +} diff --git a/src/scss/components/header/header.stories.ts b/src/scss/components/header/header.stories.ts index de2f026..c2f98af 100644 --- a/src/scss/components/header/header.stories.ts +++ b/src/scss/components/header/header.stories.ts @@ -4,9 +4,14 @@ 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 "./title-bar/title-bar.stories"; +import { + Compact as CompactTitleBar, + Default as TitleBar, +} from "./title-bar/title-bar.stories"; import { ToolNav } from "./tool-nav/tool-nav.stories"; + + const meta: Meta = { title: "Components/Header", parameters: { @@ -80,3 +85,64 @@ export const Header: Story = { `, }; + +export const CompactHeader: Story = { + args: { + heading: + "Tool Name or a longer heading that may wrap on narrow screens", + }, + render: (args, context) => html` + ${MobileNav.render({ ...args }, context)} +
+
+
+ ${logo} + +
+
+
+
+
+
+ ${CountrySwitcher.render?.call({ ...args })} + + + ${MenuToggle.render?.call({ ...args })} +
+ ${CompactTitleBar.render(args, context)} +
+
+
+
+ `, + argTypes: { + heading: { control: "text" }, + }, +}; From 10b7056d3ace4ac3aa2e5a6b3e6114c7aff76e5d Mon Sep 17 00:00:00 2001 From: Laurie Date: Thu, 7 Aug 2025 09:55:21 +0100 Subject: [PATCH 04/33] feat: implement compact header variant --- .../header/title-bar/_title-bar.scss | 42 +++++++++++++++++++ .../header/title-bar/title-bar.stories.ts | 19 +++++++++ 2 files changed, 61 insertions(+) diff --git a/src/scss/components/header/title-bar/_title-bar.scss b/src/scss/components/header/title-bar/_title-bar.scss index c8b39e0..d4045db 100644 --- a/src/scss/components/header/title-bar/_title-bar.scss +++ b/src/scss/components/header/title-bar/_title-bar.scss @@ -38,3 +38,45 @@ font-size: 2.5rem; } } + +.iati-header--compact { + .iati-header-title { + flex-direction: row; + align-items: center; + gap: 1.2rem; + padding-inline-start: 0; + margin-block-end: 0.5rem; + border: none; + @media (min-width: $mobile_nav_breakpoint) { + margin-block-start: 0.25rem; + } + } + + .iati-header-title__eyebrow { + border-right: 2px solid $color-blue-50; + padding-right: 1rem; + margin: 0; + display: flex; + align-items: center; + font-size: 1.0625rem; + flex-direction: column; + align-items: flex-start; + line-height: 1; + span { + display: block; + } + @media (min-width: $screen-sm) { + line-height: 1.2; + } + } + + .iati-header-title__heading { + white-space: normal; + word-break: break-word; + font-size: 1.5rem; + line-height: 1.2; + @media (max-width: $screen-sm) { + font-size: 1rem; + } + } +} diff --git a/src/scss/components/header/title-bar/title-bar.stories.ts b/src/scss/components/header/title-bar/title-bar.stories.ts index 614cce3..bf8f534 100644 --- a/src/scss/components/header/title-bar/title-bar.stories.ts +++ b/src/scss/components/header/title-bar/title-bar.stories.ts @@ -21,3 +21,22 @@ export const Default: Story = { `, }; + +export const Compact: Story = { + args: { + heading: "Tool Name or a longer heading that may wrap on small screens", + }, + argTypes: { + heading: { control: "text" }, + }, + render: ({ heading } = {}) => html` +
+
+

+ IATITools +

+

${heading}

+
+
+ `, +}; From 26888d899409fb1d6951e893e4f447e2f9e47466 Mon Sep 17 00:00:00 2001 From: Laurie Date: Thu, 7 Aug 2025 09:56:56 +0100 Subject: [PATCH 05/33] fix: lint and format --- src/scss/components/header/header.stories.ts | 5 +---- src/types/svg.d.ts | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/scss/components/header/header.stories.ts b/src/scss/components/header/header.stories.ts index c2f98af..1939800 100644 --- a/src/scss/components/header/header.stories.ts +++ b/src/scss/components/header/header.stories.ts @@ -10,8 +10,6 @@ import { } from "./title-bar/title-bar.stories"; import { ToolNav } from "./tool-nav/tool-nav.stories"; - - const meta: Meta = { title: "Components/Header", parameters: { @@ -88,8 +86,7 @@ export const Header: Story = { export const CompactHeader: Story = { args: { - heading: - "Tool Name or a longer heading that may wrap on narrow screens", + heading: "Tool Name or a longer heading that may wrap on narrow screens", }, render: (args, context) => html` ${MobileNav.render({ ...args }, context)} diff --git a/src/types/svg.d.ts b/src/types/svg.d.ts index a5a700b..5e52f80 100644 --- a/src/types/svg.d.ts +++ b/src/types/svg.d.ts @@ -1,4 +1,4 @@ declare module "*.svg" { const content: string; export default content; -} \ No newline at end of file +} From 45256c9f617f8ab55f3453b01664bd807d5bedeb Mon Sep 17 00:00:00 2001 From: Laurie Date: Fri, 8 Aug 2025 11:33:45 +0100 Subject: [PATCH 06/33] fix: adjust button background color for submit variant --- src/scss/components/button/_button.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scss/components/button/_button.scss b/src/scss/components/button/_button.scss index 598e535..02b177c 100644 --- a/src/scss/components/button/_button.scss +++ b/src/scss/components/button/_button.scss @@ -41,9 +41,9 @@ &--submit { color: $color-grey-90; - background-color: $color-green-50; + background-color: $color-green-40; &:hover { - background-color: $color-green-40; + background-color: $color-green-50; } } } From 996513a8bd43f080d540b6e580e0a443174caa1c Mon Sep 17 00:00:00 2001 From: Laurie Date: Fri, 8 Aug 2025 13:13:58 +0100 Subject: [PATCH 07/33] feat: add support for submenus in jump menu component --- .../components/jump-menu/jump-menu.stories.ts | 71 ++++++++++++++++++- 1 file changed, 70 insertions(+), 1 deletion(-) diff --git a/src/scss/components/jump-menu/jump-menu.stories.ts b/src/scss/components/jump-menu/jump-menu.stories.ts index 4077086..2b88b41 100644 --- a/src/scss/components/jump-menu/jump-menu.stories.ts +++ b/src/scss/components/jump-menu/jump-menu.stories.ts @@ -30,7 +30,7 @@ export const Default: Story = { @@ -38,6 +38,7 @@ export const Default: Story = {