logo and headers

figma · May 24, 2024 · 52c1553 · 52c1553
1 parent 1e178d9
commit 52c1553
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 2 deletions.
diff --git a/src/blocks/Headers/Headers.figma.tsx b/src/blocks/Headers/Headers.figma.tsx
@@ -0,0 +1,42 @@
+import { figma } from "@figma/code-connect";
+import { Grid, GridItem } from "ui";
+import { StandardHeader, VerticalHeader } from "./Headers";
+
+const FIGMA_URL_STANDARD_HEADER =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=7717-3642&t=nZCpXAWLyKWF2wPs-11";
+const FIGMA_URL_VERTICAL_HEADER =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=7722-3364&t=nZCpXAWLyKWF2wPs-11";
+
+figma.connect(StandardHeader, FIGMA_URL_STANDARD_HEADER, {
+  props: {
+    logo: figma.children("Logo"),
+    children: figma.children(["Navigation", "Button Group"]),
+  },
+  example: ({ children, logo }) => (
+    <StandardHeader>
+      <Grid>
+        <GridItem size="minor">{logo}</GridItem>
+        <GridItem size="major">
+          <Grid auto gap="xl" alignPrimary="end">
+            {children}
+          </Grid>
+        </GridItem>
+      </Grid>
+    </StandardHeader>
+  ),
+});
+
+figma.connect(VerticalHeader, FIGMA_URL_VERTICAL_HEADER, {
+  props: {
+    logo: figma.children("Logo"),
+    children: figma.children("Navigation"),
+  },
+  example: ({ children, logo }) => (
+    <VerticalHeader>
+      <Grid auto direction="column" alignSecondary="center" gap="md">
+        {logo}
+        {children}
+      </Grid>
+    </VerticalHeader>
+  ),
+});
diff --git a/src/blocks/Headers/Headers.tsx b/src/blocks/Headers/Headers.tsx
@@ -0,0 +1,14 @@
+import { Section, type SectionProps } from "ui";
+
+export type StandardHeaderProps = Omit<SectionProps, "variant" | "padding">;
+export function StandardHeader({ className, ...props }: StandardHeaderProps) {
+  return (
+    <Section elementType="header" variant="stroke" padding="sm" {...props} />
+  );
+}
+export type VerticalHeaderProps = Omit<SectionProps, "variant" | "padding">;
+export function VerticalHeader({ className, ...props }: VerticalHeaderProps) {
+  return (
+    <Section elementType="header" variant="subtle" padding="sm" {...props} />
+  );
+}
diff --git a/src/blocks/Headers/headers.css b/src/blocks/Headers/headers.css
diff --git a/src/ui/Button/button.css b/src/ui/Button/button.css
@@ -152,7 +152,7 @@
 .button-group {
   align-items: center;
   display: flex;
-  gap: var(--sds-size-gap-xl);
+  gap: var(--sds-size-gap-md);
 
   &.button-group-align-start {
     justify-content: flex-start;

diff --git a/src/ui/Layout/Layout.stories.tsx b/src/ui/Layout/Layout.stories.tsx
@@ -1,5 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Grid, GridItem, Section } from "ui";
+import { StandardHeader, VerticalHeader } from "blocks/Headers/Headers";
+import { Button, ButtonGroup, Grid, GridItem, Section } from "ui";
+import { Logo } from "ui/Logo/Logo";
+import { Navigation, NavigationItem } from "ui/Navigation/Navigation";
 
 const meta: Meta<typeof Grid> = {
   component: Grid,
@@ -98,6 +101,46 @@ export const SectionStory: StoryObj<typeof Section> = {
   },
   render: (args) => (
     <>
+      <VerticalHeader>
+        <Grid auto direction="column" alignSecondary="center" gap="md">
+          <Logo />
+          <Navigation>
+            <NavigationItem>Home</NavigationItem>
+            <NavigationItem isSelected>About</NavigationItem>
+            <NavigationItem>Pricing</NavigationItem>
+            <NavigationItem>Blog</NavigationItem>
+            <NavigationItem>Careers</NavigationItem>
+            <NavigationItem>Contact</NavigationItem>
+          </Navigation>
+        </Grid>
+      </VerticalHeader>
+
+      <StandardHeader>
+        <Grid>
+          <GridItem size="minor">
+            <Logo />
+          </GridItem>
+          <GridItem size="major">
+            <Grid auto gap="xl" alignPrimary="end">
+              <Navigation>
+                <NavigationItem>Home</NavigationItem>
+                <NavigationItem isSelected>About</NavigationItem>
+                <NavigationItem>Pricing</NavigationItem>
+                <NavigationItem>Blog</NavigationItem>
+                <NavigationItem>Careers</NavigationItem>
+                <NavigationItem>Contact</NavigationItem>
+              </Navigation>
+              <ButtonGroup>
+                <Button onPress={() => {}} variant="secondary">
+                  Log in
+                </Button>
+                <Button onPress={() => {}}>Register</Button>
+              </ButtonGroup>
+            </Grid>
+          </GridItem>
+        </Grid>
+      </StandardHeader>
+
       <Section {...args}>
         <Grid auto gap="xl">
           <GridItem size="full">{renderChild("full")}</GridItem>

diff --git a/src/ui/Logo/Logo.figma.tsx b/src/ui/Logo/Logo.figma.tsx
@@ -0,0 +1,7 @@
+import { figma } from "@figma/code-connect";
+import { Logo } from "./Logo";
+
+const FIGMA_URL_LOGO =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=2159-5053&t=nZCpXAWLyKWF2wPs-11";
+
+figma.connect(Logo, FIGMA_URL_LOGO);
diff --git a/src/ui/Logo/Logo.tsx b/src/ui/Logo/Logo.tsx
@@ -0,0 +1,17 @@
+import clsx from "clsx";
+import { IconFigma } from "icons";
+import {
+  AnchorOrButton,
+  type AnchorOrButtonProps,
+} from "ui/utils/AnchorOrButton";
+import "./logo.css";
+
+export type LogoProps = AnchorOrButtonProps;
+export function Logo({ className, ...props }: LogoProps) {
+  const classNames = clsx(className, "logo");
+  return (
+    <AnchorOrButton className={classNames} {...props}>
+      <IconFigma size="40" />
+    </AnchorOrButton>
+  );
+}
diff --git a/src/ui/Logo/logo.css b/src/ui/Logo/logo.css
@@ -0,0 +1,21 @@
+.logo {
+  --border-radius: var(--sds-size-radius-md);
+  border-radius: var(--border-radius);
+  position: relative;
+
+  &[data-focus-visible] {
+    outline: none;
+    --offset: calc(var(--sds-responsive-border-width) * 2);
+    &::before {
+      content: "";
+      border-radius: calc(var(--border-radius) + var(--offset));
+      bottom: calc(-1 * var(--offset));
+      box-shadow: 0 0 0 var(--global-focus-ring-size)
+        var(--global-focus-ring-color);
+      left: calc(-1 * var(--offset));
+      position: absolute;
+      right: calc(-1 * var(--offset));
+      top: calc(-1 * var(--offset));
+    }
+  }
+}