Merge branch 'master' into feature/tracking

components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css

@@ -10,7 +10,7 @@
   position: relative;
   display: flex;
   align-items: center;
-  gap: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  gap: var(--Spacing-x-one-and-half) var(--Spacing-x1);
   cursor: pointer;
   color: var(--Base-Text-High-contrast);
   font-family: var(--typography-Body-Bold-fontFamily);

components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton/index.tsx

@@ -0,0 +1,29 @@
+import { ChevronRightIcon, HouseIcon } from "@/components/Icons"
+import styles from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+
+export default function BreadcrumbsSkeleton() {
+  return (
+    <nav className={styles.breadcrumbs}>
+      <ul className={styles.list}>
+        <li className={styles.listItem}>
+          <span className={styles.homeLink} color="peach80">
+            <HouseIcon color="peach80" />
+          </span>
+          <ChevronRightIcon
+            aria-hidden="true"
+            color="peach80"
+            height={20}
+            width={20}
+          />
+        </li>
+
+        <li className={styles.listItem}>
+          <Footnote color="burgundy" type="bold">
+            ...
+          </Footnote>
+        </li>
+      </ul>
+    </nav>
+  )
+}

components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css

@@ -0,0 +1,32 @@
+.breadcrumbs {
+  display: block;
+  padding: var(--Spacing-x2) var(--Spacing-x2) 0;
+  max-width: var(--max-width);
+  margin: 0 auto;
+  width: 100%;
+}
+
+.list {
+  align-items: center;
+  display: flex;
+  gap: var(--Spacing-x-quarter);
+  justify-content: flex-start;
+  list-style: none;
+}
+
+.listItem {
+  align-items: center;
+  display: flex;
+  gap: var(--Spacing-x-quarter);
+}
+
+.homeLink {
+  display: flex;
+}
+
+@media screen and (min-width: 1367px) {
+  .breadcrumbs {
+    padding-left: var(--Spacing-x5);
+    padding-right: var(--Spacing-x5);
+  }
+}

components/TempDesignSystem/Breadcrumbs/breadcrumbs.ts

@@ -0,0 +1,9 @@
+type Breadcrumb = {
+  title: string
+  uid: string
+  href?: string
+}
+
+export interface BreadcrumbsProps {
+  breadcrumbs: Breadcrumb[]
+}

components/TempDesignSystem/Breadcrumbs/index.tsx

@@ -0,0 +1,61 @@
+import { HouseIcon } from "@/components/Icons"
+import ChevronRightSmallIcon from "@/components/Icons/ChevronRightSmall"
+import Link from "@/components/TempDesignSystem/Link"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+
+import styles from "./breadcrumbs.module.css"
+
+import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
+
+export default function Breadcrumbs({ breadcrumbs }: BreadcrumbsProps) {
+  if (!breadcrumbs?.length) {
+    return null
+  }
+
+  const homeBreadcrumb = breadcrumbs.shift()
+  return (
+    <nav className={styles.breadcrumbs}>
+      <ul className={styles.list}>
+        {homeBreadcrumb ? (
+          <li className={styles.listItem}>
+            <Link
+              className={styles.homeLink}
+              color="peach80"
+              href={homeBreadcrumb.href!}
+              variant="breadcrumb"
+              aria-label={homeBreadcrumb.title}
+            >
+              <HouseIcon width={16} height={16} color="peach80" />
+            </Link>
+            <ChevronRightSmallIcon aria-hidden="true" color="peach80" />
+          </li>
+        ) : null}
+
+        {breadcrumbs.map((breadcrumb) => {
+          if (breadcrumb.href) {
+            return (
+              <li key={breadcrumb.uid} className={styles.listItem}>
+                <Link
+                  color="peach80"
+                  href={breadcrumb.href}
+                  variant="breadcrumb"
+                >
+                  {breadcrumb.title}
+                </Link>
+                <ChevronRightSmallIcon aria-hidden="true" color="peach80" />
+              </li>
+            )
+          }
+
+          return (
+            <li key={breadcrumb.uid} className={styles.listItem}>
+              <Footnote color="burgundy" type="bold">
+                {breadcrumb.title}
+              </Footnote>
+            </li>
+          )
+        })}
+      </ul>
+    </nav>
+  )
+}

components/TempDesignSystem/Divider/divider.module.css

@@ -51,3 +51,7 @@
 .opacity8 {
   opacity: 0.08;
 }
+
+.baseSurfaceSubtleHover {
+  background-color: var(--Base-Surface-Subtle-Hover);
+}

components/TempDesignSystem/Divider/variants.ts

@@ -13,6 +13,7 @@ export const dividerVariants = cva(styles.divider, {
       primaryLightSubtle: styles.primaryLightSubtle,
       subtle: styles.subtle,
       white: styles.white,
+      baseSurfaceSutbleHover: styles.baseSurfaceSubtleHover,
     },
     opacity: {
       100: styles.opacity100,

components/TempDesignSystem/Form/ChoiceCard/_Card/card.ts

@@ -12,6 +12,7 @@ interface BaseCardProps
   title: React.ReactNode
   type: "checkbox" | "radio"
   value?: string
+  handleSelectedOnClick?: () => void
 }
 
 interface ListCardProps extends BaseCardProps {

components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx

@@ -25,10 +25,22 @@ export default function Card({
   title,
   type,
   value,
+  handleSelectedOnClick,
 }: CardProps) {
   const { register } = useFormContext()
+
+  function onLabelClick(event: React.MouseEvent) {
+    // Preventing click event on label elements firing twice: https://github.com/facebook/react/issues/14295
+    event.preventDefault()
+    handleSelectedOnClick?.()
+  }
   return (
-    <label className={styles.label} data-declined={declined} tabIndex={0}>
+    <label
+      className={styles.label}
+      data-declined={declined}
+      tabIndex={0}
+      onClick={handleSelectedOnClick ? onLabelClick : undefined}
+    >
       <Caption className={styles.title} color="burgundy" type="label" uppercase>
         {title}
       </Caption>