Create a Header

Author: grahamc

src/Header/Header.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import Header from ".";
+import { Placeholder } from "../Placeholder";
+import ColorSchemeToggle from "../ColorSchemeToggle";
+
+const meta = {
+  title: "Organism/Header",
+  component: Header,
+  argTypes: {
+    logo: { type: "function" },
+    elements: { type: "function" },
+  },
+} satisfies Meta<typeof Header>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    logo: <Placeholder height="100%" width="100px" label="Logo" />,
+    elements: [
+      <ColorSchemeToggle key="color-scheme-toggle" />,
+      <Placeholder
+        key="element-1"
+        height="100%"
+        width="100px"
+        label="Element"
+      />,
+      <Placeholder key="navigation" height="100%" label="Navigation Link" />,
+    ],
+  },
+};

src/Header/index.scss

@@ -0,0 +1,42 @@
+@use "sass:map";
+
+@use "../sass/mixins";
+@use "../sass/tokens";
+
+.header {
+  width: 100%;
+  height: tokens.$header-height;
+  padding: map.get(tokens.$spacing, base);
+  box-sizing: border-box;
+
+  border-bottom: 1px solid map.get(tokens.$grays, light);
+  @include mixins.light-mode {
+    background-color: map.get(tokens.$grays, faint);
+    border-bottom: 1px solid map.get(tokens.$grays, less-faint);
+  }
+
+  .header__container {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    gap: map.get(tokens.$spacing, base);
+    justify-content: space-between;
+
+    @include mixins.container;
+  }
+
+  .header__logo {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    gap: map.get(tokens.$spacing, sm);
+  }
+
+  .header__elements {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    gap: map.get(tokens.$spacing, base);
+  }
+}

src/Header/index.tsx

@@ -0,0 +1,25 @@
+import { type FC } from "react";
+
+import "./index.scss";
+import React from "react";
+
+export interface HeaderProps {
+  logo?: React.ReactNode;
+  elements?: React.ReactNode[];
+}
+
+const Header: FC<HeaderProps> = ({ logo, elements = [] }) => {
+  return (
+    <header className="header" role="banner">
+      <div className="header__container">
+        {!!logo && <div className="header__logo">{logo}</div>}
+
+        {elements.length > 0 && (
+          <div className="header__elements">{elements}</div>
+        )}
+      </div>
+    </header>
+  );
+};
+
+export default Header;

src/index.ts

@@ -55,6 +55,8 @@ export {
   default as GitHubButton,
 } from "./GitHubButton";
 
+export { type HeaderProps, default as Header } from "./Header";
+
 export {
   type LabeledInputProps,
   type LabeledInputRenderProps,

src/sass/_mixins.scss

@@ -12,6 +12,7 @@
 @mixin container {
   padding-inline: map.get(tokens.$spacing, base);
   margin-inline: auto;
+  box-sizing: border-box;
   width: 100%;
 
   @media (width >= map.get(tokens.$breakpoints, small)) {

src/sass/_tokens.scss

@@ -1,5 +1,7 @@
 @use "sass:map";
 
+$header-height: 3.5rem;
+
 $brand: (
   red: #ec2c5b,
   yellow: #faa61a,
@@ -18,6 +20,8 @@ $brand: (
 );
 
 $grays: (
+  faint: color-mix(in oklab, oklch(0.985 0.002 247.839) 95%, transparent),
+  less-faint: oklch(0.928 0.006 264.531),
   very-light: oklch(0.872 0.01 258.338),
   light: oklch(0.446 0.03 256.802),
   dark: oklch(0.21 0.034 264.665),