feat: consolidate button styles

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

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/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 = {
         <div class="iati-header__container iati-brand-background__content">
           <div class="iati-header__actions">
             ${CountrySwitcher.render?.call({ ...args })}
-            ${InfoButton.render?.call({ ...args })}
-            ${SearchButton.render?.call({ ...args })}
+            <button class="iati-button iati-button--light">
+              <span>Help Docs</span>
+              <img class="iati-button__icon" src="${iconInfoUrl}" alt="" />
+            </button>
+            <button class="iati-button iati-button--light">
+              <span>Search</span>
+              <img class="iati-button__icon" src="${iconSearchUrl}" alt="" />
+            </button>
             ${MenuToggle.render?.call({ ...args })}
           </div>
           ${TitleBar.render?.call({ ...args })}