Small snags for new header/footer

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",

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";

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;

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";
+
+<Meta of={ComponentStories} />
+
+<Title>Brand Background</Title>
+
+**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 <a href="../?path=/docs/brand-logos--docs#marque-white">Marque White</a> 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.
+
+<Stories />

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

@@ -13,7 +13,8 @@ export const Default: Story = {
   render: () =>
     html`<div class="iati-brand-background">
       <div class="iati-brand-background__content">
-        <p>Some words</p>
+        <!-- Example child container for documentation purposes only -->
+        <div style="height: 500px;"></div>
       </div>
     </div>`,
 };

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;
+    }
   }
 }

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`<button class="iati-button">Buttons</button>`,
+  render: () => html`<button class="iati-button">Button</button>`,
+};
+
+export const Light: Story = {
+  parameters: {
+    backgrounds: {
+      default: "dark",
+    },
+  },
+  render: () =>
+    html`<button class="iati-button iati-button--light">Button</button>`,
 };
 
 export const Submit: Story = {
   render: () =>
-    html`<button class="iati-button iati-button--submit">Buttons</button>`,
+    html`<button class="iati-button iati-button--submit">Submit</button>`,
+};
+
+export const WithIcon: Story = {
+  parameters: {
+    backgrounds: {
+      default: "dark",
+    },
+  },
+  render: () => html`
+    <button class="iati-button iati-button--light">
+      <span>Info</span>
+      <img class="iati-button__icon" src="${iconInfoUrl}" alt="" />
+    </button>
+  `,
 };

src/scss/components/footer-block/footer-block.stories.ts

@@ -23,7 +23,7 @@ export const UsefulLinks: Story = {
           <li><a href="#">Useful link</a></li>
           <li><a href="#">Translation FAQs</a></li>
           <li><a href="#">Another useful link</a></li>
-          <li><a href="#">Another even more useful longer lin</a></li>
+          <li><a href="#">Another even more useful longer link</a></li>
         </ul>
       </div>
     </div>`,

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`
     <div
       class="iati-mobile-nav js-iati-mobile-nav ${args.open

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",

src/scss/components/title-bar/_title-bar.scss

@@ -8,6 +8,7 @@
   flex-direction: column;
   gap: 0.8rem;
   padding-inline-start: 1rem;
+  margin-block-end: 1.5rem;
   border-inline-start: $border-width solid $color-blue-50;
   & > * {
     margin: 0;

src/scss/iati.scss

@@ -4,6 +4,7 @@
 @use "typography";
 @use "components";
 @use "layout";
+@use "utilities";
 
 // Expose tokens as Sass variables
 @forward "tokens";

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;
   }

src/scss/layout/footer/footer.stories.ts

@@ -58,9 +58,21 @@ export const Footer: Story = {
             </nav>
             ${CountrySwitcher.render?.call({ ...args })}
             <div class="iati-footer__social">
-              <a href="#">${Linkedin.render?.call({ ...args })}</a>
-              <a href="#">${Twitter.render?.call({ ...args })}</a>
-              <a href="#">${Youtube.render?.call({ ...args })}</a>
+              <a
+                https://www.linkedin.com/company/international-aid-transparency-initiative/"
+                aria-label="LinkedIn"
+              >
+                ${Linkedin.render?.call({ ...args })}
+              </a>
+              <a href="https://twitter.com/IATI_aid" aria-label="Twitter">
+                ${Twitter.render?.call({ ...args })}
+              </a>
+              <a
+                href="https://www.youtube.com/channel/UCAVH1gcgJXElsj8ENC-bDQQ"
+                aria-label="YouTube"
+              >
+                ${Youtube.render?.call({ ...args })}
+              </a>
             </div>
           </div>
         </div>