@bloom-housing/ui-components 2.0.0-pre-tailwind

package/src/navigation/Breadcrumbs.scss

@@ -0,0 +1,25 @@
+.breadcrumbs {
+  ol {
+    @apply flex;
+    @apply items-center;
+    line-height: 1.5rem;
+  }
+
+  li {
+    @apply text-sm;
+    @apply flex;
+    @apply tracking-wider;
+    @apply self-center;
+
+    &:not(:last-child)::after {
+      content: "\203A";
+      @apply text-lg;
+      @apply px-2;
+      line-height: 1.4rem;
+    }
+  }
+
+  a.is-active {
+    color: inherit;
+  }
+}

package/src/navigation/Breadcrumbs.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import { LocalizedLink } from "../actions/LocalizedLink"
+import "./Breadcrumbs.scss"
+
+export interface BreadcrumbsProps {
+  children: React.ReactNode
+}
+
+const BreadcrumbLink = (props: { href: string; children: React.ReactNode; current?: boolean }) => (
+  <li>
+    <LocalizedLink
+      className={props.current ? "is-active" : undefined}
+      aria-current={props.current ? "page" : undefined}
+      href={props.href}
+    >
+      {props.children}
+    </LocalizedLink>
+  </li>
+)
+
+const Breadcrumbs = (props: BreadcrumbsProps) => (
+  <nav className="breadcrumbs" aria-label="Breadcrumb">
+    <ol>{props.children}</ol>
+  </nav>
+)
+
+export { Breadcrumbs as default, Breadcrumbs, BreadcrumbLink }

package/src/navigation/FooterNav.scss

@@ -0,0 +1,47 @@
+.footer-sock {
+  @apply bg-gray-950;
+  @apply py-8;
+  @apply px-2;
+
+  p {
+    margin-bottom: 0 !important;
+  }
+
+  a {
+    @apply text-white;
+    @apply block;
+    @apply mt-2;
+
+    @screen lg {
+      @apply inline;
+      @apply mt-0;
+      @apply ml-5;
+    }
+  }
+
+  .footer-sock__inner {
+    @apply max-w-5xl;
+    @apply m-auto;
+
+    @screen lg {
+      @apply flex;
+    }
+  }
+
+  .footer-copyright {
+    @screen lg {
+      @apply w-6/12;
+      @apply text-left;
+    }
+  }
+
+  .footer-nav {
+    @apply mt-5;
+
+    @screen lg {
+      @apply mt-0;
+      @apply w-6/12;
+      @apply text-right;
+    }
+  }
+}

package/src/navigation/FooterNav.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+import "./FooterNav.scss"
+
+export interface FooterNavProps {
+  children: React.ReactNode
+  copyright: string
+}
+
+const FooterNav = (props: FooterNavProps) => (
+  <section className="footer-sock">
+    <div className="footer-sock__inner">
+      <p className="footer-copyright">{props.copyright}</p>
+
+      <nav className="footer-nav">{props.children}</nav>
+    </div>
+  </section>
+)
+
+export { FooterNav as default, FooterNav }

package/src/navigation/LanguageNav.scss

@@ -0,0 +1,32 @@
+.language-bar {
+  @apply bg-gray-800;
+}
+
+.language-bar__inner {
+  @apply max-w-5xl;
+  @apply m-auto;
+  @apply flex;
+  @apply justify-end;
+}
+
+.language-nav__list {
+  @apply flex;
+}
+
+.language-nav__list-button {
+  @apply py-2;
+  @apply px-2;
+  @apply text-gray-500;
+  @apply font-semibold;
+  @apply cursor-pointer;
+  @apply bg-none;
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #fff, 0 0 3px 4px $tailwind-accent-cool;
+  }
+
+  &.is-active {
+    @apply text-white;
+  }
+}

package/src/navigation/LanguageNav.tsx

@@ -0,0 +1,53 @@
+import React, { useContext } from "react"
+import { NavigationContext } from "../config/NavigationContext"
+import "./LanguageNav.scss"
+import { t } from "../helpers/translator"
+
+export type LangItem = {
+  prefix: string
+  label: string
+}
+
+export interface LanguageNavLang {
+  list: LangItem[]
+  codes: string[]
+}
+
+export interface LanguageNavProps {
+  language: LanguageNavLang
+}
+
+const LanguageNav = ({ language }: LanguageNavProps) => {
+  const routePrefix = t("config.routePrefix")
+  const { router } = useContext(NavigationContext)
+
+  return (
+    <div className="language-bar">
+      <div className="language-bar__inner">
+        <nav className="language-nav">
+          <ul className="language-nav__list">
+            {language.list?.map((item) => (
+              <li key={item.prefix}>
+                <button
+                  onClick={() => {
+                    void router.push(router.asPath, router.asPath, { locale: item.prefix || "en" })
+                  }}
+                  className={
+                    routePrefix === item.prefix
+                      ? "language-nav__list-button is-active"
+                      : "language-nav__list-button"
+                  }
+                  type="button"
+                >
+                  {item.label}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </div>
+    </div>
+  )
+}
+
+export { LanguageNav as default, LanguageNav }

package/src/navigation/ProgressNav.scss

@@ -0,0 +1,102 @@
+.progress-nav {
+  // @include clearfix;
+  @apply list-none;
+  @apply table;
+  @apply m-0;
+  @apply p-0;
+  @apply w-full;
+}
+
+.progress-nav__item {
+  @apply text-2xs;
+  @apply px-2;
+  @apply py-3;
+  @apply relative;
+  @apply text-center;
+  @apply uppercase;
+  @apply table-cell;
+  @apply whitespace-no-wrap;
+  @apply float-none;
+  max-width: 20%;
+
+  @screen md {
+    @apply text-sm;
+    @apply p-0;
+  }
+
+  &:before {
+    @apply absolute;
+    @apply h-3;
+    @apply w-3;
+    @apply bg-lush;
+    @apply border-solid;
+    @apply border;
+    @apply border-white;
+    @apply rounded-full;
+    @apply top-0;
+    left: 50%;
+    content: "";
+    transform: translateX(-50%);
+    z-index: 2;
+  }
+
+  &:after {
+    @apply absolute;
+    @apply bg-gray-450;
+    @apply w-full;
+    @apply left-0;
+    top: 0.4rem;
+    content: "";
+    height: 1px;
+  }
+
+  &:first-of-type {
+    &:after {
+      left: 50%;
+    }
+  }
+
+  &:last-of-type {
+    &:after {
+      @apply left-auto;
+      right: 50%;
+    }
+  }
+
+  &.is-active {
+    &:before {
+      @apply h-3;
+      @apply w-3;
+      @apply bg-primary;
+      @apply top-0;
+    }
+
+    a {
+      @apply text-black;
+      @apply font-bold;
+    }
+  }
+
+  &.is-disabled {
+    &:before {
+      @apply h-3;
+      @apply w-3;
+      @apply bg-gray-450;
+      @apply top-0;
+    }
+
+    a {
+      @apply pointer-events-none;
+      @apply cursor-default;
+    }
+  }
+
+  a {
+    @apply pt-4;
+    @apply pl-1;
+    @apply text-gray-700;
+    @apply block;
+    @apply relative;
+    z-index: 3;
+  }
+}

package/src/navigation/ProgressNav.tsx

@@ -0,0 +1,50 @@
+import React from "react"
+import { OnClientSide } from "../helpers/nextjs"
+import "./ProgressNav.scss"
+
+const ProgressNavItem = (props: {
+  section: number
+  currentPageSection: number
+  completedSections: number
+  label: string
+}) => {
+  let bgColor = "is-disabled"
+  if (OnClientSide()) {
+    if (props.section === props.currentPageSection) {
+      bgColor = "is-active"
+    } else if (props.completedSections >= props.section) {
+      bgColor = ""
+    }
+  }
+
+  return (
+    <li className={`progress-nav__item ${bgColor}`}>
+      <a aria-disabled={bgColor === "is-disabled"} href={"#"}>
+        {props.label}
+      </a>
+    </li>
+  )
+}
+
+const ProgressNav = (props: {
+  currentPageSection: number
+  completedSections: number
+  labels: string[]
+}) => {
+  return (
+    <ul className={!OnClientSide() ? "invisible" : "progress-nav"}>
+      {props.labels.map((label, i) => (
+        <ProgressNavItem
+          key={label}
+          // Sections are 1-indexed
+          section={i + 1}
+          currentPageSection={props.currentPageSection}
+          completedSections={props.completedSections}
+          label={label}
+        />
+      ))}
+    </ul>
+  )
+}
+
+export { ProgressNav as default, ProgressNav }

package/src/navigation/TabNav.scss

@@ -0,0 +1,38 @@
+.tab-nav ul {
+  @apply flex;
+  @apply items-center;
+  @apply font-alt-sans;
+  @apply uppercase;
+  @apply text-sm;
+  @apply font-semibold;
+  @apply tracking-wider;
+}
+
+.tab-nav__tab {
+  a {
+    @apply block;
+    @apply px-6;
+    @apply py-3;
+    @apply border-b-2;
+    @apply text-gray-700;
+    @apply items-center;
+    border-color: transparent;
+    line-height: 1.5rem;
+
+    &:hover {
+      @apply text-gray-900;
+      @apply border-gray-450;
+    }
+
+    &.is-active {
+      @apply border-primary;
+      @apply text-gray-900;
+    }
+
+    .tag {
+      @apply ml-2;
+      @apply text-xs;
+      line-height: 1rem;
+    }
+  }
+}

package/src/navigation/TabNav.tsx

@@ -0,0 +1,69 @@
+import React from "react"
+import { LocalizedLink } from "../actions/LocalizedLink"
+import { AppearanceSizeType } from "../global/AppearanceTypes"
+import { Tag } from "../text/Tag"
+import "./TabNav.scss"
+
+export interface TabNavItemProps {
+  href: string
+  current?: boolean
+  tagContent?: React.ReactNode
+  tagSize?: AppearanceSizeType
+  children: React.ReactNode
+}
+
+const TabNavItem = (props: TabNavItemProps) => {
+  const tabRef = React.useRef<HTMLLIElement>(null)
+
+  const handleKeyboard = (event: React.KeyboardEvent) => {
+    if (event.key == "ArrowLeft") {
+      const previousTab = tabRef.current?.previousSibling as HTMLElement
+      previousTab?.querySelector("a")?.focus()
+    } else if (event.key == "ArrowRight") {
+      const nextTab = tabRef.current?.nextSibling as HTMLElement
+      nextTab?.querySelector("a")?.focus()
+    }
+  }
+
+  return (
+    <li
+      role="tab"
+      aria-selected={props.current ? "true" : undefined}
+      ref={tabRef}
+      onKeyUp={handleKeyboard}
+      className="tab-nav__tab"
+    >
+      <LocalizedLink
+        className={props.current ? "is-active" : undefined}
+        aria-current={props.current ? "page" : undefined}
+        href={props.href}
+        tabIndex={props.current ? 0 : -1}
+      >
+        {props.children}
+        {props.tagContent && (
+          <Tag pillStyle={true} size={props.tagSize ? props.tagSize : AppearanceSizeType.normal}>
+            {props.tagContent}
+          </Tag>
+        )}
+      </LocalizedLink>
+    </li>
+  )
+}
+
+const TabNav = (props: { children: React.ReactNode; className?: string }) => {
+  const classes = ["tab-nav"]
+
+  if (props.className) {
+    classes.push(props.className)
+  }
+
+  return (
+    <nav className={classes.join(" ")}>
+      <ul role="tablist" aria-label="Secondary navigation">
+        {props.children}
+      </ul>
+    </nav>
+  )
+}
+
+export { TabNav as default, TabNav, TabNavItem }