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

package/src/lists/PreferencesList.stories.tsx

@@ -0,0 +1,48 @@
+import * as React from "react"
+import { BADGES } from "../../.storybook/constants"
+import { PreferencesList } from "./PreferencesList"
+import PreferencesListDocumentation from "./PreferencesList.docs.mdx"
+
+export default {
+  title: "Lists/Preferences List 🚩",
+  id: "lists/preferences-list",
+  decorators: [(storyFn: any) => <div>{storyFn()}</div>],
+  parameters: {
+    docs: {
+      page: PreferencesListDocumentation,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+
+const listingPreferences = [
+  {
+    ordinal: 1,
+    links: [],
+    title: "Title 1",
+    description: "Description 1",
+  },
+  {
+    ordinal: 2,
+    links: [
+      {
+        url: "http://www.google.com",
+        title: "Link Title 2",
+      },
+    ],
+    title: "Title 2",
+    subtitle: "Subtitle 2",
+    description: "Description 2",
+  },
+  {
+    ordinal: 3,
+    links: [],
+    title: "Title 3",
+    subtitle: "Subtitle 3",
+    description: "Description 3",
+  },
+]
+
+export const preferences = () => {
+  return <PreferencesList listingPreferences={listingPreferences} />
+}

package/src/navigation/Breadcrumbs.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+
+import { Breadcrumbs, BreadcrumbLink } from "./Breadcrumbs"
+
+export default {
+  title: "Navigation/Breadcrumbs",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const Default = () => (
+  <Breadcrumbs>
+    <BreadcrumbLink href="/One">One</BreadcrumbLink>
+    <BreadcrumbLink href="/Two">Two</BreadcrumbLink>
+    <BreadcrumbLink current={true} href="/Three">
+      Three
+    </BreadcrumbLink>
+  </Breadcrumbs>
+)

package/src/navigation/LanguageNav.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+
+import { LanguageNav } from "./LanguageNav"
+import { text, withKnobs } from "@storybook/addon-knobs"
+
+export default {
+  title: "Navigation/LanguageNav",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>, withKnobs],
+}
+
+export const Default = () => (
+  <LanguageNav
+    ariaLabel={text("ariaLabel", "")}
+    languages={[
+      {
+        label: "English",
+        active: true,
+        onClick: () => {},
+      },
+      {
+        label: "Spanish",
+        active: false,
+        onClick: () => {},
+      },
+    ]}
+  />
+)

package/src/navigation/ProgressNav.stories.tsx

@@ -0,0 +1,34 @@
+import React from "react"
+import { BADGES } from "../../.storybook/constants"
+import { ProgressNav } from "./ProgressNav"
+import ProgressNavDocs from "./ProgressNav.docs.mdx"
+
+export default {
+  title: "Navigation/Progress Nav 🚩",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+  parameters: {
+    docs: {
+      page: ProgressNavDocs,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+
+export const Default = () => (
+  <ProgressNav
+    currentPageSection={2}
+    completedSections={1}
+    labels={["You", "Household", "Income", "Preferences", "Review"]}
+    mounted={true}
+  />
+)
+
+export const barStyle = () => (
+  <ProgressNav
+    currentPageSection={2}
+    completedSections={1}
+    labels={["You", "Household", "Income", "Preferences", "Review"]}
+    mounted={true}
+    style={"bar"}
+  />
+)

package/src/navigation/ProgressNav.tsx

@@ -26,7 +26,7 @@ const ProgressNavItem = (props: {
     }
   }
 
-  const srTextBuilder = (): string | React.ReactFragment => {
+  const srTextBuilder = (): string | React.ReactNode => {
     if (props.section < props.currentPageSection) {
       return (
         <span className="sr-only">

package/src/navigation/SideNav.stories.tsx

@@ -0,0 +1,77 @@
+import React from "react"
+import { BADGES } from "../../.storybook/constants"
+import { StandardTable } from "../tables/StandardTable"
+import { SideNav } from "./SideNav"
+import { mockHeaders, mockData } from "../tables/StandardTable.stories"
+import SideNavDocumentation from "./SideNav.docs.mdx"
+
+export default {
+  title: "Navigation/Side Nav 🚩",
+  id: "navigation/side-nav",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+  parameters: {
+    docs: {
+      page: SideNavDocumentation,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+
+export const Default = () => (
+  <div style={{ maxWidth: "275px" }}>
+    <SideNav
+      navItems={[
+        { label: "Nav Item 1", url: "#", current: false },
+        { label: "Nav Item 2", url: "#", current: false },
+        { label: "Nav Item 3", url: "#" },
+      ]}
+    />
+  </div>
+)
+
+export const Current = () => (
+  <div style={{ maxWidth: "275px" }}>
+    <SideNav
+      navItems={[
+        { label: "Nav Item 1", url: "#", current: true },
+        { label: "Nav Item 2", url: "#", current: false },
+        { label: "Nav Item 3", url: "#", current: false },
+      ]}
+    />
+  </div>
+)
+
+const MultiLevelNav = () => (
+  <SideNav
+    navItems={[
+      { label: "Nav Item 1", url: "#", current: false },
+      {
+        label: "Nav Item 2",
+        url: "#",
+        count: 10,
+        childrenItems: [
+          { label: "Child Item 1", url: "#", count: 7 },
+          { label: "Child Item 2", url: "#", current: true, count: 3 },
+        ],
+      },
+      { label: "Nav Item 3", url: "#" },
+    ]}
+  />
+)
+
+export const ChildItems = () => (
+  <div style={{ maxWidth: "275px" }}>
+    <MultiLevelNav />
+  </div>
+)
+
+export const WithinLayout = () => (
+  <div className="sidebar-detail-layout">
+    <aside>
+      <MultiLevelNav />
+    </aside>
+    <div className="rounded-lg border border-gray-500 overflow-hidden">
+      <StandardTable headers={mockHeaders} data={mockData} />
+    </div>
+  </div>
+)

package/src/navigation/TabNav.stories.tsx

@@ -0,0 +1,68 @@
+import React from "react"
+
+import { TabNav, TabNavItem } from "./TabNav"
+
+export default {
+  title: "Navigation/Tab-like Nav",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+  parameters: { actions: { argTypesRegex: "^on[A-Z].*" } },
+}
+
+export const Default = () => {
+  return (
+    <TabNav>
+      <TabNavItem href={"/other"}>Other</TabNavItem>
+      <TabNavItem href={"/default"} current tagContent="15">
+        Default
+      </TabNavItem>
+    </TabNav>
+  )
+}
+// TODO: Fix tab roles for this component in #1489
+Default.parameters = {
+  a11y: {
+    config: {
+      rules: [
+        {
+          id: "no-focusable-content",
+          enabled: false,
+        },
+        {
+          id: "nested-interactive",
+          enabled: false,
+        },
+      ],
+    },
+  },
+}
+
+export const Other = () => {
+  return (
+    <TabNav>
+      <TabNavItem href={"/other"} current>
+        Other
+      </TabNavItem>
+      <TabNavItem href={"/default"} tagContent="15">
+        Default
+      </TabNavItem>
+    </TabNav>
+  )
+}
+
+// TODO: Fix tab roles for this component in #1489
+Other.parameters = {
+  a11y: {
+    config: {
+      rules: [
+        {
+          id: "no-focusable-content",
+          enabled: false,
+        },
+        {
+          id: "nested-interactive",
+          enabled: false,
+        },
+      ],
+    },
+  },
+}

package/src/navigation/Tabs.stories.tsx

@@ -0,0 +1,60 @@
+import React from "react"
+import { Tab, Tabs, TabList, TabPanel } from "./Tabs"
+
+export default {
+  title: "Navigation/Tabs",
+  decorators: [
+    (storyFn: any) => (
+      <div style={{ padding: "1rem" }}>
+        <style>
+          {`
+      .styled {
+        color: blue !important;
+        font-weight: bold;
+      }
+      .tabs__panel.styled {
+        display: block;
+      }
+    `}
+        </style>
+
+        {storyFn()}
+      </div>
+    ),
+  ],
+}
+
+export const Default = () => {
+  return (
+    <Tabs>
+      <TabList>
+        <Tab>Title 1</Tab>
+        <Tab>Title 2</Tab>
+        <Tab>Long Tab Title 3</Tab>
+        <Tab disabled>Disabled Tab</Tab>
+        <Tab selectedClassName="funky">Funky Tab</Tab>
+      </TabList>
+
+      <TabPanel>
+        <h2>Any content 1</h2>
+        <p>Paragraph text 1.</p>
+      </TabPanel>
+      <TabPanel>
+        <h2>Any content 2</h2>
+        <p>Paragraph text 2.</p>
+      </TabPanel>
+      <TabPanel>
+        <h2>Any kind of content here</h2>
+        <p>Paragraph text 3.</p>
+        <p>Paragraph text 3.</p>
+        <p>Paragraph text 3.</p>
+      </TabPanel>
+      <TabPanel>
+        <p>This is disabled</p>
+      </TabPanel>
+      <TabPanel selectedClassName="styled">
+        <p>Feeling funky!</p>
+      </TabPanel>
+    </Tabs>
+  )
+}

package/src/notifications/AlertBox.stories.tsx

@@ -0,0 +1,112 @@
+import React from "react"
+import { AlertBox } from "./AlertBox"
+import AlertBoxDocumentation from "./AlertBox.docs.mdx"
+import { BADGES } from "../../.storybook/constants"
+import { withMenuLinks } from "../headers/SiteHeader.stories"
+
+export default {
+  title: "Notifications/Alert Box  🚩",
+  id: "notifications/alert-box",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+  component: AlertBox,
+  parameters: {
+    docs: {
+      page: AlertBoxDocumentation,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+
+export const AlertBoxAlert = () => (
+  <AlertBox onClose={() => {}} type="alert">
+    Some warning
+  </AlertBox>
+)
+
+export const AlertBoxAlertInvert = () => (
+  <AlertBox onClose={() => {}} type="alert" inverted>
+    Some warning
+  </AlertBox>
+)
+
+export const AlertBoxNotice = () => (
+  <AlertBox onClose={() => {}} type="notice">
+    Some warning
+  </AlertBox>
+)
+
+export const AlertBoxNoticeInvert = () => (
+  <AlertBox onClose={() => {}} type="notice" inverted>
+    Some warning
+  </AlertBox>
+)
+
+export const AlertBoxNoticeInvertLink = () => (
+  <AlertBox onClose={() => {}} type="notice" inverted>
+    Some warning <a href={""}>with link text</a>
+  </AlertBox>
+)
+
+export const AlertBoxSuccess = () => (
+  <AlertBox onClose={() => {}} type="success">
+    Some warning
+  </AlertBox>
+)
+
+export const AlertBoxSuccessInvert = () => (
+  <AlertBox onClose={() => {}} type="success" inverted>
+    Some warning
+  </AlertBox>
+)
+
+export const AlertBoxWarn = () => (
+  <AlertBox onClose={() => {}} type="warn">
+    Some warning
+  </AlertBox>
+)
+
+export const AlertBoxBoundToLayoutWidth = () => (
+  <AlertBox onClose={() => {}} type="success" boundToLayoutWidth>
+    Some warning
+  </AlertBox>
+)
+
+export const AlertBoxNarrow = () => (
+  <AlertBox onClose={() => {}} type="success" narrow>
+    Some warning
+  </AlertBox>
+)
+
+export const AlertBoxSticky = () => (
+  <div style={{ height: "200rem", border: "3px solid gray" }}>
+    <div>{withMenuLinks()}</div>
+    <AlertBox onClose={() => {}} type="success" sticky={true}>
+      Some warning
+    </AlertBox>
+    <div style={{ borderTop: "1px solid gray", padding: "5rem" }}>Page Content</div>
+  </div>
+)
+
+export const styleOverrides = () => {
+  const cssVarsOverride = `
+    .alert-box-overrides .alert-box {
+      --background-color: var(--bloom-color-gray-400);
+      --horizontal-padding: var(--bloom-s3);
+      --font-weight: 400;
+      --close-icon-color: var(--bloom-color-gray-600);
+    }
+  `
+
+  return (
+    <>
+      <div className="alert-box-overrides">
+        <AlertBox onClose={() => {}}>Some warning</AlertBox>
+        <style>{cssVarsOverride}</style>
+      </div>
+
+      <p className="mt-12 font-semibold">Customized using the following variable overrides:</p>
+
+      <pre>{cssVarsOverride.replace(".page-header-overrides ", "")}</pre>
+    </>
+  )
+}

package/src/notifications/AlertNotice.stories.tsx

@@ -0,0 +1,86 @@
+import React from "react"
+
+import { AlertNotice } from "./AlertNotice"
+
+export default {
+  title: "Notifications/Alert Notice",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const AlertNoticeAlert = () => (
+  <AlertNotice title={"Your household income is too low."}>
+    <p className="mb-2">
+      Please edit your income if you believe you might have made a mistake. Be aware that if you
+      falsify any information on your application you will be disqualified.
+    </p>
+    <p>
+      If the information you entered is accurate, we encourage you to check back in the future of as
+      more properties become available.
+    </p>
+  </AlertNotice>
+)
+
+export const AlertNoticeAlertInverted = () => (
+  <AlertNotice title={"Your household income is too low."} inverted>
+    <p className="mb-2">
+      Please edit your income if you believe you might have made a mistake. Be aware that if you
+      falsify any information on your application you will be disqualified.
+    </p>
+    <p>
+      If the information you entered is accurate, we encourage you to check back in the future of as
+      more properties become available.
+    </p>
+  </AlertNotice>
+)
+
+export const AlertNoticeNotice = () => (
+  <AlertNotice title={"Your household income is too low."} type="notice">
+    <p className="mb-2">
+      Please edit your income if you believe you might have made a mistake. Be aware that if you
+      falsify any information on your application you will be disqualified.
+    </p>
+    <p>
+      If the information you entered is accurate, we encourage you to check back in the future of as
+      more properties become available.
+    </p>
+  </AlertNotice>
+)
+
+export const AlertNoticeNoticeInverted = () => (
+  <AlertNotice title={"Your household income is too low."} type="notice" inverted>
+    <p className="mb-2">
+      Please edit your income if you believe you might have made a mistake. Be aware that if you
+      falsify any information on your application you will be disqualified.
+    </p>
+    <p>
+      If the information you entered is accurate, we encourage you to check back in the future of as
+      more properties become available.
+    </p>
+  </AlertNotice>
+)
+
+export const AlertNoticeSuccess = () => (
+  <AlertNotice title={"Your household income is too low."} type="success">
+    <p className="mb-2">
+      Please edit your income if you believe you might have made a mistake. Be aware that if you
+      falsify any information on your application you will be disqualified.
+    </p>
+    <p>
+      If the information you entered is accurate, we encourage you to check back in the future of as
+      more properties become available.
+    </p>
+  </AlertNotice>
+)
+
+export const AlertNoticeSuccessInverted = () => (
+  <AlertNotice title={"Your household income is too low."} type="success" inverted>
+    <p className="mb-2">
+      Please edit your income if you believe you might have made a mistake. Be aware that if you
+      falsify any information on your application you will be disqualified.
+    </p>
+    <p>
+      If the information you entered is accurate, we encourage you to check back in the future of as
+      more properties become available.
+    </p>
+  </AlertNotice>
+)