feat: add new header and footer components

BREAKING CHANGE: consumer html for `.iati-header` and `.iati-footer` components must be updated

BREAKING CHANGE: `.iati-title-bar` component has been removed

.storybook/main.ts

@@ -5,6 +5,7 @@ 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,
   },

.storybook/preview.ts

@@ -10,6 +10,12 @@ const preview: Preview = {
         order: ["Get Started", "Brand", "Core", "Components", "Layout"],
       },
     },
+    backgrounds: {
+      values: [
+        { name: "light", value: "#fff" },
+        { name: "dark", value: "#155366" },
+      ],
+    },
     docs: {
       page: DocsTemplate,
       source: {

src/scss/base/_focus.scss

@@ -0,0 +1,6 @@
+@use "../tokens/color" as *;
+
+:is(a, button, input, select, textarea, summary):focus-visible {
+  outline: 2px solid $color-blue-60;
+  outline-offset: 2px;
+}

src/scss/base/_index.scss

@@ -1,3 +1,4 @@
 @forward "normalize";
 @forward "reset";
 @forward "mixins";
+@forward "focus";

src/scss/base/_mixins.scss

@@ -4,9 +4,9 @@
 @mixin page-width-container {
   width: 100%;
   max-width: $page-width-max;
-  margin-left: auto;
+  margin-inline-start: auto;
   margin-right: auto;
-  padding: $padding-block;
+  padding: 0 $padding-block;
 }
 
 @mixin columns {
@@ -30,6 +30,18 @@
   }
 
   li li {
-    padding-left: $padding-block;
+    padding-inline-start: $padding-block;
   }
 }
+
+@mixin sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

src/scss/base/_reset.scss

@@ -4,7 +4,7 @@
   box-sizing: border-box;
 }
 
-a,
+a[href],
 button {
   cursor: pointer;
 }
@@ -23,3 +23,7 @@ button,
 input {
   font-weight: inherit;
 }
+
+input {
+  border-radius: 0;
+}

src/scss/components/_index.scss

@@ -1,6 +1,18 @@
 @forward "button/button";
+@forward "breadcrumb/breadcrumb";
+@forward "brand-background/brand-background";
 @forward "callout/callout";
 @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";
+@forward "tool-nav/tool-nav";
+@forward "menu-toggle/menu-toggle";
+@forward "message/message";
+@forward "mobile-nav/mobile-nav";
+@forward "newsletter-form/newsletter-form";
+@forward "title-bar/title-bar";
+@forward "footer-block/footer-block";

src/scss/components/brand-background/_brand-background.scss

@@ -0,0 +1,22 @@
+@use "../../tokens/color" as *;
+@use "../../tokens/screens" as *;
+
+.iati-brand-background {
+  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-repeat: no-repeat;
+      background-position: right 2rem top;
+      background-size: 32.3rem auto;
+      opacity: 0.1;
+    }
+    .iati-brand-background__content {
+      grid-area: 1/-1;
+      z-index: 1;
+    }
+  }
+}

src/scss/components/brand-background/brand-background.stories.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import { html } from "lit";
+
+const meta: Meta = {
+  title: "Components/Brand Background",
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () =>
+    html`<div class="iati-brand-background">
+      <div class="iati-brand-background__content">
+        <p>Some words</p>
+      </div>
+    </div>`,
+};

src/scss/components/breadcrumb/_breadcrumb.scss

@@ -0,0 +1,54 @@
+@use "../../tokens/color" as *;
+@use "../../tokens/spacing" as *;
+@use "../../tokens/screens" as *;
+
+.iati-breadcrumb {
+  font-weight: 600;
+}
+
+.iati-breadcrumb__list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  display: none;
+  > *: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;
+  }
+}
+
+.iati-breadcrumb-link {
+  text-decoration: none;
+  line-height: 1;
+}
+
+@media (min-width: $screen-sm) {
+  .iati-breadcrumb__previous {
+    display: none;
+  }
+  .iati-breadcrumb__list {
+    display: flex;
+  }
+}

src/scss/components/breadcrumb/breadcrumb.stories.ts

@@ -0,0 +1,39 @@
+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",
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Breadcrumb: Story = {
+  render: () => html`
+    <nav class="iati-breadcrumb">
+      <p class="iati-breadcrumb__previous">
+        <a href="#" class="iati-breadcrumb-link">${items[items.length - 2]}</a>
+      </p>
+      <ol class="iati-breadcrumb__list"">
+        ${items.map(
+          (i) =>
+            html`<li
+              class="iati-breadcrumb-item ${classMap({
+                "iati-breadcrumb-item--current": i == "Current page",
+              })}"
+            >
+              ${i != "Current page"
+                ? html`<a href="#" class="iati-breadcrumb-link">${i}</a>`
+                : html`<a aria-current="page" class="iati-breadcrumb-link"
+                    >${i}</a
+                  >`}
+            </li>`,
+        )}
+      </ol>
+    </nav>
+  `,
+};

src/scss/components/button/_button.scss

@@ -12,3 +12,12 @@
     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;
+  }
+}

src/scss/components/button/button.stories.ts

@@ -9,6 +9,11 @@ const meta: Meta = {
 export default meta;
 type Story = StoryObj;
 
-export const Button: Story = {
-  render: () => html`<button class="iati-button">Button</button>`,
+export const Default: Story = {
+  render: () => html`<button class="iati-button">Buttons</button>`,
+};
+
+export const Submit: Story = {
+  render: () =>
+    html`<button class="iati-button iati-button--submit">Buttons</button>`,
 };

src/scss/components/callout/_callout.scss

@@ -4,7 +4,7 @@
 
 .iati-callout {
   padding: $padding-block;
-  border-left: $border-width solid $color-blue-50;
+  border-inline-start: $border-width solid $color-blue-50;
   background-color: $color-teal-10;
   color: $color-teal-90;
   box-shadow: 0 4px 5px $color-grey-20;

src/scss/components/country-switcher/_country-switcher.scss

@@ -0,0 +1,40 @@
+@use "../../tokens/color" as *;
+@use "../../tokens/font" as *;
+@use "../../base/mixins";
+
+.iati-country-switcher {
+  background-color: #fff;
+  position: relative;
+  display: inline-block;
+  color: #121212;
+  cursor: pointer;
+  .iati-country-switcher__label {
+    @include mixins.sr-only;
+  }
+  .iati-country-switcher__control {
+    padding: 0.7em 2.1em 0.7em calc(1em + 1rem);
+    font-family: $font-stack-heading;
+    line-height: 1.1;
+    width: 100%;
+    height: 100%;
+    appearance: none;
+    background-color: #fff;
+    border: none;
+    font-family: $font-stack-heading;
+    color: $color-grey-90;
+    font-weight: 600;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath stroke='%23121212' stroke-linecap='square' stroke-width='1.3' d='M10 19c4.9706 0 9-4.0294 9-9 0-4.97056-4.0294-9-9-9-4.97056 0-9 4.02944-9 9 0 4.9706 4.02944 9 9 9Z'/%3E%3Cpath stroke='%23121212' stroke-linecap='round' stroke-linejoin='bevel' stroke-width='1.3' d='M9.99984 18.991C12.3938 16.8114 13.5908 13.8144 13.5908 10c0-3.81433-1.197-6.81133-3.59096-8.99097-2.394 2.17964-3.591 5.17664-3.591 8.99097 0 3.8144 1.197 6.8114 3.591 8.991Z'/%3E%3Cpath stroke='%23121212' stroke-linecap='round' stroke-width='1.3' d='M1.44991 7.29993H18.5499M1.44991 12.6999H18.5499'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: 0.5em center;
+  }
+  &::after {
+    position: absolute;
+    right: 0.7em;
+    top: calc(50% - 0.1875em);
+    content: "";
+    width: 0.75em;
+    height: 0.375em;
+    background-color: currentColor;
+    clip-path: polygon(15% 0, 0 0, 50% 100%, 100% 0, 85% 0, 50% 70%);
+  }
+}

src/scss/components/country-switcher/country-switcher.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+const meta: Meta = {
+  title: "Components/Country Switcher",
+  parameters: {
+    backgrounds: {
+      default: "dark",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const CountrySwitcher: Story = {
+  render: () => html`
+    <div class="iati-country-switcher">
+      <label for="iati-country-switcher" class="iati-country-switcher__label"
+        >Choose your language</label
+      >
+      <select id="iati-country-switcher" class="iati-country-switcher__control">
+        <option>English</option>
+        <option>French</option>
+      </select>
+    </div>
+  `,
+};