Merged in feat/SW-903-breadcrumbs-select-hotel (pull request #924)

Feat/SW-903 breadcrumbs select hotel

* feat(SW-903): break out breadcrumbs component and add on select-hotel page

* feat(903): updated paths

* feat(903): fix padding and remove translations

* feat(903): fix type

* feat(903): refactor padding

* feat(903): refactor padding again

* feat(903): refactor

* feat(903): fix comments

* feat(903): rename content breadcrumbs back


Approved-by: Pontus Dreij
Approved-by: Erik Tiekstra

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