@bloom-housing/ui-components 7.0.8-alpha.0 → 7.2.0

package/src/headers/SiteHeader.stories.tsx

@@ -0,0 +1,394 @@
+import * as React from "react"
+
+import { SiteHeader } from "./SiteHeader"
+
+export default {
+  title: "Headers/Site Header",
+}
+
+export const basic = () => (
+  <SiteHeader
+    homeURL={"/"}
+    // languages={[{ label: "English", onClick: () => console.log("Clicked English"), active: true }]}
+    logoSrc="/images/logo_glyph.svg"
+    // notice="This is a preview of our new website. We're just getting started. We'd love to get your feedback."
+    title="Alameda County Housing Portal"
+    menuLinks={[]}
+  />
+)
+
+export const withLanguage = () => (
+  <SiteHeader
+    homeURL={"/"}
+    languages={[
+      { label: "English", onClick: () => console.log("Clicked English"), active: true },
+      { label: "Español", onClick: () => console.log("Clicked Español"), active: false },
+      { label: "中文", onClick: () => console.log("Clicked 中文"), active: false },
+    ]}
+    languageNavLabel="Choose a Language"
+    logoSrc="/images/logo_glyph.svg"
+    title="Alameda County Housing Portal"
+    menuLinks={[]}
+  />
+)
+
+export const withLanguageAndMobileNotice = () => (
+  <SiteHeader
+    homeURL={"/"}
+    languages={[
+      { label: "English", onClick: () => console.log("Clicked English"), active: true },
+      { label: "Español", onClick: () => console.log("Clicked Español"), active: false },
+      { label: "中文", onClick: () => console.log("Clicked 中文"), active: false },
+    ]}
+    noticeMobile={true}
+    notice="We're just getting started. We'd love to get your feedback."
+    logoSrc="/images/logo_glyph.svg"
+    title="Alameda County Housing Portal"
+    menuLinks={[]}
+  />
+)
+
+export const slimLogo = () => (
+  <SiteHeader
+    homeURL={"/"}
+    languages={[
+      { label: "English", onClick: () => console.log("Clicked English"), active: true },
+      { label: "Español", onClick: () => console.log("Clicked Español"), active: false },
+      { label: "中文", onClick: () => console.log("Clicked 中文"), active: false },
+    ]}
+    logoWidth={"slim"}
+    notice="We're just getting started. We'd love to get your feedback."
+    logoSrc="/images/logo_glyph.svg"
+    title="Housing Portal"
+    menuLinks={[]}
+  />
+)
+
+export const mediumLogo = () => (
+  <SiteHeader
+    homeURL={"/"}
+    languages={[
+      { label: "English", onClick: () => console.log("Clicked English"), active: true },
+      { label: "Español", onClick: () => console.log("Clicked Español"), active: false },
+      { label: "中文", onClick: () => console.log("Clicked 中文"), active: false },
+    ]}
+    logoWidth={"medium"}
+    notice="We're just getting started. We'd love to get your feedback."
+    logoSrc="/images/logo_glyph.svg"
+    title="Housing Portal"
+    menuLinks={[]}
+  />
+)
+
+export const wideLogo = () => (
+  <SiteHeader
+    homeURL={"/"}
+    languages={[
+      { label: "English", onClick: () => console.log("Clicked English"), active: true },
+      { label: "Español", onClick: () => console.log("Clicked Español"), active: false },
+      { label: "中文", onClick: () => console.log("Clicked 中文"), active: false },
+    ]}
+    logoWidth={"wide"}
+    notice="We're just getting started. We'd love to get your feedback."
+    logoSrc="/images/logo_glyph.svg"
+    title="Housing Portal"
+    menuLinks={[]}
+  />
+)
+
+export const withMenuLinks = () => (
+  <SiteHeader
+    homeURL={"/"}
+    languages={[
+      { label: "English", onClick: () => console.log("Clicked English"), active: true },
+      { label: "Español", onClick: () => console.log("Clicked Español"), active: false },
+      { label: "中文", onClick: () => console.log("Clicked 中文"), active: false },
+    ]}
+    notice="We're just getting started. We'd love to get your feedback."
+    logoSrc="/images/logo_glyph.svg"
+    title="Alameda County Housing Portal"
+    menuLinks={[
+      {
+        title: "Listings",
+        href: "/",
+      },
+      {
+        title: "Get Assistance",
+        href: "/",
+      },
+      {
+        title: "Sign In",
+        href: "/",
+      },
+    ]}
+  />
+)
+
+export const withMenuDropdowns = () => (
+  <SiteHeader
+    homeURL={"/"}
+    languages={[
+      { label: "English", onClick: () => console.log("Clicked English"), active: true },
+      { label: "Español", onClick: () => console.log("Clicked Español"), active: false },
+      { label: "中文", onClick: () => console.log("Clicked 中文"), active: false },
+    ]}
+    notice="We're just getting started. We'd love to get your feedback."
+    logoSrc="/images/logo_glyph.svg"
+    title="Alameda County Housing Portal"
+    menuLinks={[
+      {
+        title: "My Account",
+        subMenuLinks: [
+          {
+            title: "My Dashboard",
+            href: "/account/dashboard",
+          },
+          {
+            title: "My Applications",
+            href: "/account/dashboard",
+          },
+          {
+            title: "Account Settings",
+            href: "/account/edit",
+          },
+          {
+            title: "Sign Out",
+            onClick: () => {},
+          },
+        ],
+      },
+    ]}
+  />
+)
+
+export const withMobileDrawer = () => (
+  <SiteHeader
+    homeURL={"/"}
+    languages={[
+      { label: "English", onClick: () => console.log("Clicked English"), active: true },
+      { label: "Español", onClick: () => console.log("Clicked Español"), active: false },
+      { label: "中文", onClick: () => console.log("Clicked 中文"), active: false },
+    ]}
+    notice="We're just getting started. We'd love to get your feedback."
+    logoSrc="/images/logo_glyph.svg"
+    title="Alameda County Housing Portal"
+    menuLinks={[
+      {
+        title: "Listings",
+        href: "/",
+      },
+      {
+        title: "Get Assistance",
+        href: "/",
+      },
+      {
+        title: "Sign In",
+        href: "/",
+      },
+    ]}
+    mobileDrawer={true}
+  />
+)
+
+export const withMobileText = () => (
+  <SiteHeader
+    homeURL={"/"}
+    languages={[
+      { label: "English", onClick: () => console.log("Clicked English"), active: true },
+      { label: "Español", onClick: () => console.log("Clicked Español"), active: false },
+      { label: "中文", onClick: () => console.log("Clicked 中文"), active: false },
+    ]}
+    mobileText={true}
+    notice="We're just getting started. We'd love to get your feedback."
+    logoSrc="/images/logo_glyph.svg"
+    title="Alameda County Housing Portal"
+    menuLinks={[
+      {
+        title: "Listings",
+        href: "/",
+      },
+      {
+        title: "Get Assistance",
+        href: "/",
+      },
+      {
+        title: "Sign In",
+        href: "/",
+      },
+    ]}
+    mobileDrawer={true}
+  />
+)
+
+export const withNoticeOnMobile = () => (
+  <SiteHeader
+    homeURL={"/"}
+    logoSrc="/images/logo_glyph.svg"
+    notice="We'd love to get your feedback."
+    title="Alameda County Housing Portal"
+    menuLinks={[]}
+    noticeMobile={true}
+  />
+)
+
+export const withFlattenedMobileSubMenus = () => (
+  <SiteHeader
+    homeURL={"/"}
+    languages={[
+      { label: "English", onClick: () => console.log("Clicked English"), active: true },
+      { label: "Español", onClick: () => console.log("Clicked Español"), active: false },
+      { label: "中文", onClick: () => console.log("Clicked 中文"), active: false },
+    ]}
+    flattenSubMenus={true}
+    notice="We're just getting started. We'd love to get your feedback."
+    logoSrc="/images/logo_glyph.svg"
+    title="Alameda County Housing Portal"
+    menuLinks={[
+      {
+        title: "My Account",
+        subMenuLinks: [
+          {
+            title: "My Dashboard",
+            href: "/account/dashboard",
+          },
+          {
+            title: "My Applications",
+            href: "/account/dashboard",
+          },
+          {
+            title: "Account Settings",
+            href: "/account/edit",
+          },
+          {
+            title: "Sign Out",
+            onClick: () => {},
+          },
+        ],
+      },
+    ]}
+  />
+)
+
+export const withDropdownIcons = () => (
+  <SiteHeader
+    homeURL={"/"}
+    languages={[
+      { label: "English", onClick: () => console.log("Clicked English"), active: true },
+      { label: "Español", onClick: () => console.log("Clicked Español"), active: false },
+      { label: "中文", onClick: () => console.log("Clicked 中文"), active: false },
+    ]}
+    notice="We're just getting started. We'd love to get your feedback."
+    logoSrc="/images/logo_glyph.svg"
+    title="Alameda County Housing Portal"
+    dropdownItemClassName={"text-xs"}
+    menuLinks={[
+      {
+        title: "My Account",
+        subMenuLinks: [
+          {
+            title: "My Dashboard",
+            href: "/account/dashboard",
+            iconSrc: "https://bit.ly/2YoHrxA",
+            iconClassName: "w-6 pr-2",
+          },
+          {
+            title: "My Applications",
+            href: "/account/dashboard",
+            iconSrc: "https://bit.ly/2YoHrxA",
+            iconClassName: "w-6 pr-2",
+          },
+          {
+            title: "Account Settings",
+            href: "/account/edit",
+            iconSrc: "https://bit.ly/2YoHrxA",
+            iconClassName: "w-6 pr-2",
+          },
+          {
+            title: "Sign Out",
+            onClick: () => {},
+            iconSrc: "https://bit.ly/2YoHrxA",
+            iconClassName: "w-6 pr-2",
+          },
+        ],
+      },
+    ]}
+  />
+)
+export const imageOnlyLogo = () => (
+  <SiteHeader
+    homeURL={"/"}
+    languages={[
+      { label: "English", onClick: () => console.log("Clicked English"), active: true },
+      { label: "Español", onClick: () => console.log("Clicked Español"), active: false },
+      { label: "中文", onClick: () => console.log("Clicked 中文"), active: false },
+    ]}
+    imageOnly
+    logoWidth={"medium"}
+    notice="We're just getting started. We'd love to get your feedback."
+    logoSrc="https://bit.ly/3me4iUC"
+    menuLinks={[]}
+  />
+)
+
+export const DAHLIAToggleSet = () => (
+  <SiteHeader
+    homeURL={"/"}
+    languages={[
+      { label: "English", onClick: () => console.log("Clicked English"), active: true },
+      { label: "Español", onClick: () => console.log("Clicked Español"), active: false },
+      { label: "中文", onClick: () => console.log("Clicked 中文"), active: false },
+    ]}
+    notice="We'd love to get your feedback."
+    noticeMobile={true}
+    mobileDrawer={true}
+    flattenSubMenus={true}
+    imageOnly={true}
+    mobileText={true}
+    logoWidth={"medium"}
+    logoSrc="https://bit.ly/3me4iUC"
+    dropdownItemClassName={"text-xs"}
+    menuLinks={[
+      {
+        title: "Some longer links",
+        href: "/",
+      },
+      {
+        title: "Some longer links",
+        href: "/",
+      },
+      {
+        title: "Some longer links",
+        href: "/",
+      },
+      {
+        title: "My Account",
+        subMenuLinks: [
+          {
+            title: "My Dashboard",
+            href: "/account/dashboard",
+            iconSrc: "https://bit.ly/2YoHrxA",
+            iconClassName: "w-6 pr-2",
+          },
+          {
+            title: "My Applications",
+            href: "/account/dashboard",
+            iconSrc: "https://bit.ly/2YoHrxA",
+            iconClassName: "w-6 pr-2",
+          },
+          {
+            title: "Account Settings",
+            href: "/account/edit",
+            iconSrc: "https://bit.ly/2YoHrxA",
+            iconClassName: "w-6 pr-2",
+          },
+          {
+            title: "Sign Out",
+            onClick: () => {},
+            iconSrc: "https://bit.ly/2YoHrxA",
+            iconClassName: "w-6 pr-2",
+          },
+        ],
+      },
+    ]}
+  />
+)

package/src/headers/StepHeader.stories.tsx

@@ -0,0 +1,54 @@
+import { useState } from "@storybook/addons"
+import * as React from "react"
+import { BADGES } from "../../.storybook/constants"
+import { StepHeader } from "./StepHeader"
+import { Button } from "../actions/Button"
+import { AppearanceSizeType } from "../.."
+import StepHeaderDocumentation from "./StepHeader.docs.mdx"
+
+export default {
+  title: "Headers/Step Header 🚩",
+  id: "headers/step-header",
+  parameters: {
+    docs: {
+      page: StepHeaderDocumentation,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+
+export const basicDynamic = () => {
+  const [currentStep, setCurrentStep] = useState<number>(1)
+  return (
+    <div>
+      <div className="pb-4">
+        <StepHeader
+          currentStep={currentStep}
+          totalSteps={4}
+          stepPreposition={"of"}
+          stepLabeling={["Start", "Mid 1", "Mid 2", "End"]}
+        />
+      </div>
+      <div className="flex gap-x-2">
+        <Button size={AppearanceSizeType.small} onClick={() => setCurrentStep(currentStep - 1)}>
+          Previous
+        </Button>
+        <Button size={AppearanceSizeType.small} onClick={() => setCurrentStep(currentStep + 1)}>
+          Next
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export const finalStep = () => (
+  <StepHeader currentStep={8} totalSteps={8} stepPreposition={"of"} stepLabeling={["Items"]} />
+)
+
+export const doubleDigits = () => (
+  <StepHeader currentStep={10} totalSteps={40} stepPreposition={"of"} stepLabeling={["Levels"]} />
+)
+
+export const tripleDigits = () => (
+  <StepHeader currentStep={100} totalSteps={400} stepPreposition={"of"} stepLabeling={["Phases"]} />
+)

package/src/helpers/MultiLineAddress.stories.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import MultiLineAddress from "./MultiLineAddress"
+
+export default {
+  title: "Listing Sidebar/MultiLineAddress",
+  component: MultiLineAddress,
+}
+
+export const Default = () => {
+  return (
+    <MultiLineAddress
+      address={{
+        street: "Street 1",
+        street2: "Street 2",
+        city: "City",
+        state: "State",
+        zipCode: "12345",
+      }}
+    />
+  )
+}
+
+export const NoStreet = () => {
+  return (
+    <MultiLineAddress
+      address={{
+        city: "City",
+        state: "State",
+        zipCode: "12345",
+      }}
+    />
+  )
+}
+
+export const NoCity = () => {
+  return (
+    <MultiLineAddress
+      address={{
+        street: "Street 1",
+        street2: "Street 2",
+        state: "State",
+        zipCode: "12345",
+      }}
+    />
+  )
+}
+
+export const NoState = () => {
+  return (
+    <MultiLineAddress
+      address={{
+        street: "Street 1",
+        street2: "Street 2",
+        city: "City",
+        zipCode: "12345",
+      }}
+    />
+  )
+}

package/src/helpers/OneLineAddress.stories.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import OneLineAddress from "./OneLineAddress"
+
+export default {
+  title: "Listing Sidebar/OneLineAddress",
+  component: OneLineAddress,
+}
+
+export const Default = () => {
+  return (
+    <OneLineAddress
+      address={{
+        street: "Street 1",
+        street2: "Street 2",
+        city: "City",
+        state: "State",
+        zipCode: "12345",
+      }}
+    />
+  )
+}
+
+export const NoStreet = () => {
+  return (
+    <OneLineAddress
+      address={{
+        city: "City",
+        state: "State",
+        zipCode: "12345",
+      }}
+    />
+  )
+}
+
+export const NoCity = () => {
+  return (
+    <OneLineAddress
+      address={{
+        street: "Street 1",
+        street2: "Street 2",
+        state: "State",
+        zipCode: "12345",
+      }}
+    />
+  )
+}
+
+export const NoState = () => {
+  return (
+    <OneLineAddress
+      address={{
+        street: "Street 1",
+        street2: "Street 2",
+        city: "City",
+        zipCode: "12345",
+      }}
+    />
+  )
+}

package/src/helpers/useOutsideClick.ts

@@ -7,7 +7,7 @@ type OutsideClickProps = {
 
 export const useOutsideClick = ({ ref, callback }: OutsideClickProps) => {
   const handleClick = useCallback(
-    (e) => {
+    (e: any) => {
       if (ref?.current && !ref.current.contains(e.target)) {
         callback()
       }

package/src/icons/FontAwesome.stories.tsx

@@ -0,0 +1,12 @@
+import React from "react"
+import { Icon } from "./Icon"
+import { faAlignCenter, faForwardStep, faHandsClapping } from "@fortawesome/free-solid-svg-icons"
+
+export default {
+  title: "Icons/FontAwesome Examples",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const IconAlignCenter = () => <Icon symbol={faAlignCenter} size="large" />
+export const IconForwardStep = () => <Icon symbol={faForwardStep} size="large" fill="#2277CC" />
+export const IconHandsClapping = () => <Icon symbol={faHandsClapping} size="large" fill="#BB5511" />

package/src/icons/HeaderBadge.stories.tsx

@@ -0,0 +1,8 @@
+import React from "react"
+import HeaderBadge from "./HeaderBadge"
+
+export default {
+  title: "Icons/Header Badge",
+}
+
+export const withIcon = () => <HeaderBadge />

package/src/icons/Icon.stories.tsx

@@ -0,0 +1,67 @@
+import React from "react"
+import { Icon } from "./Icon"
+
+export default {
+  title: "Icons/Icon",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const IconApplication = () => <Icon size="large" symbol="application" />
+export const IconArrowBack = () => <Icon size="large" symbol="arrowBack" />
+export const IconArrowDown = () => <Icon size="large" symbol="arrowDown" />
+export const IconAssistance = () => <Icon size="large" symbol="assistance" />
+export const IconAsterisk = () => <Icon size="large" symbol="asterisk" />
+export const IconBed = () => <Icon size="large" symbol="bed" />
+export const IconBrowse = () => <Icon size="large" symbol="browse" />
+export const IconBuilding = () => <Icon size="large" symbol="building" />
+export const IconCalendar = () => <Icon size="large" symbol="calendar" />
+export const IconCheck = () => <Icon size="large" symbol="check" />
+export const IconClock = () => <Icon size="large" symbol="clock" />
+export const IconClose = () => <Icon size="large" symbol="close" />
+export const IconCloseRound = () => <Icon size="large" symbol="closeRound" />
+export const IconCloseSmall = () => <Icon size="large" symbol="closeSmall" />
+export const IconCross = () => <Icon size="large" symbol="cross" />
+export const IconDocument = () => <Icon size="large" symbol="document" />
+export const IconDoubleHouse = () => <Icon size="large" symbol="doubleHouse" />
+export const IconDown = () => <Icon size="large" symbol="down" />
+export const IconDownload = () => <Icon size="large" symbol="download" />
+export const IconEdit = () => <Icon size="large" symbol="edit" />
+export const IconEligibility = () => <Icon size="large" symbol="eligibility" />
+export const IconEnvelope = () => <Icon size="large" symbol="envelope" />
+export const IconEye = () => <Icon size="large" symbol="eye" />
+export const IconFavorite = () => <Icon size="large" symbol="favorite" />
+export const IconFile = () => <Icon size="large" symbol="file" />
+export const IconForward = () => <Icon size="large" symbol="forward" />
+export const IconFrontDoor = () => <Icon size="large" symbol="frontDoor" />
+export const IconGlobe = () => <Icon size="large" symbol="globe" />
+export const IconHamburger = () => <Icon size="large" symbol="hamburger" />
+export const IconHouse = () => <Icon size="large" symbol="house" />
+export const IconInfo = () => <Icon size="large" symbol="info" />
+export const IconLeft = () => <Icon size="large" symbol="left" />
+export const IconLightBulb = () => <Icon size="large" symbol="lightbulb" />
+export const IconLike = () => <Icon size="large" symbol="like" />
+export const IconLikeFill = () => <Icon size="large" symbol="likeFill" />
+export const IconLink = () => <Icon size="large" symbol="link" />
+export const IconList = () => <Icon size="large" symbol="list" />
+export const IconLock = () => <Icon size="large" symbol="lock" />
+export const IconMail = () => <Icon size="large" symbol="mail" />
+export const IconMailThin = () => <Icon size="large" symbol="mailThin" />
+export const IconMap = () => <Icon size="large" symbol="map" />
+export const IconMapThin = () => <Icon size="large" symbol="mapThin" />
+export const IconMenu = () => <Icon size="large" symbol="menu" />
+export const IconMessages = () => <Icon size="large" symbol="messages" />
+export const IconOval = () => <Icon size="large" symbol="oval" />
+export const IconPhone = () => <Icon size="large" symbol="phone" />
+export const IconPlus = () => <Icon size="large" symbol="plus" />
+export const IconPolygon = () => <Icon size="large" symbol="polygon" />
+export const IconProfile = () => <Icon size="large" symbol="profile" />
+export const IconQuestion = () => <Icon size="large" symbol="question" />
+export const IconResult = () => <Icon size="large" symbol="result" />
+export const IconRight = () => <Icon size="large" symbol="right" />
+export const IconSearch = () => <Icon size="large" symbol="search" />
+export const IconSettings = () => <Icon size="large" symbol="settings" />
+export const IconSpinner = () => <Icon size="large" symbol="spinner" />
+export const IconStar = () => <Icon size="large" symbol="star" />
+export const IconTicket = () => <Icon size="large" symbol="ticket" />
+export const IconTrash = () => <Icon size="large" symbol="trash" />
+export const IconWarning = () => <Icon size="large" symbol="warning" />

package/src/lists/NumberedList.stories.tsx

@@ -0,0 +1,15 @@
+import * as React from "react"
+
+export default {
+  title: "Lists/Numbered List",
+}
+
+export const list = () => {
+  return (
+    <ol className="numbered-list">
+      <li>Item One</li>
+      <li>Item Two</li>
+      <li>Item Three</li>
+    </ol>
+  )
+}