@bloom-housing/ui-components 7.1.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/DateFormat.ts

@@ -0,0 +1,11 @@
+import { t } from "../..";
+import dayjs from "dayjs";
+
+function formatDateTime(date: Date, showTime?: boolean) {
+  return (
+    dayjs(date).format("MMMM D, YYYY") +
+    (showTime ? ` ${t("t.at")} ` + dayjs(date).format("h:mmA") : "")
+  );
+}
+
+export { formatDateTime as default, formatDateTime };

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/preferences.tsx

@@ -1,5 +1,5 @@
-import React from "react"
-import { UseFormMethods } from "react-hook-form"
+import React from "react";
+import { UseFormMethods } from "react-hook-form";
 import {
   t,
   GridSection,
@@ -8,17 +8,17 @@ import {
   Field,
   Select,
   resolveObject,
-} from "@bloom-housing/ui-components"
+} from "../..";
 
 type FormAddressProps = {
-  subtitle: string
-  dataKey: string
-  enableMailCheckbox?: boolean
-  register: UseFormMethods["register"]
-  errors?: UseFormMethods["errors"]
-  required?: boolean
-  stateKeys: string[]
-}
+  subtitle: string;
+  dataKey: string;
+  enableMailCheckbox?: boolean;
+  register: UseFormMethods["register"];
+  errors?: UseFormMethods["errors"];
+  required?: boolean;
+  stateKeys: string[];
+};
 
 export const FormAddress = ({
   subtitle,
@@ -121,5 +121,5 @@ export const FormAddress = ({
         )}
       </GridSection>
     </>
-  )
-}
+  );
+};

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 />