@bloom-housing/ui-components 7.1.0 → 7.2.0

package/src/tables/GroupedTable.stories.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+
+import { GroupedTable } from "./GroupedTable"
+import { mockData } from "../tables/StandardTable.stories"
+import t from "../helpers/translator"
+
+export default {
+  title: "Tables/GroupedTable",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+const headers = {
+  name: t("t.name"),
+  relationship: t("t.relationship"),
+  dob: t("application.household.member.dateOfBirth"),
+}
+
+const data = [
+  {
+    header: "Reserved",
+    className: "reserved",
+    data: mockData,
+  },
+  {
+    data: mockData,
+  },
+]
+
+export const Default = () => <GroupedTable headers={headers} data={data} />

package/src/tables/GroupedTable.tsx

@@ -17,7 +17,7 @@ export const GroupedTable = (props: GroupedTableProps) => {
 
   const headerLabels = Object.values(headers).map((col, index) => {
     const uniqKey = process.env.NODE_ENV === "test" ? `header-${index}` : nanoid()
-    return <th key={uniqKey}>{col}</th>
+    return <th key={uniqKey}>{col as string}</th>
   })
 
   const body: React.ReactNode[] = []

package/src/tables/MinimalTable.stories.tsx

@@ -0,0 +1,122 @@
+import React from "react"
+
+import { MinimalTable } from "./MinimalTable"
+import { preferenceData, preferenceHeaders, mockData, mockHeaders } from "./StandardTable.stories"
+import { TableHeaders, StandardTableData, TableThumbnail } from "../tables/StandardTable"
+import Icon, { IconFillColors } from "../icons/Icon"
+import { faClone, faPenToSquare, faTrashCan } from "@fortawesome/free-regular-svg-icons"
+
+export default {
+  title: "Tables/MinimalTable",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+  component: MinimalTable,
+  excludeStories: ["mockHeadersWithStyling", "mockDataWithStyling"],
+}
+
+export const Default = () => <MinimalTable headers={mockHeaders} data={mockData} />
+
+export const Responsive = () => (
+  <MinimalTable headers={mockHeaders} data={mockData} responsiveCollapse={true} />
+)
+
+const headersWithImage = { image: "Image", ...mockHeaders }
+const dataWithImage = [...mockData] as StandardTableData
+dataWithImage[0].image = {
+  content: (
+    <TableThumbnail>
+      <img src="/images/listing.jpg" alt="listing picture" />
+    </TableThumbnail>
+  ),
+}
+dataWithImage[1].image = {
+  content: (
+    <TableThumbnail>
+      <img src="/images/logo_glyph.svg" alt="site logo" />
+    </TableThumbnail>
+  ),
+}
+
+export const ImageCells = () => <MinimalTable headers={headersWithImage} data={dataWithImage} />
+
+export const FlushLeft = () => (
+  <MinimalTable headers={headersWithImage} data={dataWithImage} flushLeft={true} />
+)
+
+export const FlushRight = () => (
+  <MinimalTable headers={headersWithImage} data={dataWithImage} flushRight={true} />
+)
+
+export const Draggable = () => (
+  <MinimalTable headers={preferenceHeaders} data={preferenceData} draggable={true} />
+)
+
+export const mockHeadersWithStyling: TableHeaders = {
+  name: { name: "t.name" },
+  relationship: { name: "t.relationship" },
+  dob: {
+    name: "application.household.member.dateOfBirth",
+  },
+  icons: { name: "" },
+}
+
+const iconContent = () => {
+  return (
+    <div className={"flex justify-end"}>
+      <div className={"w-max"}>
+        <span onClick={() => alert("edit")} className={"cursor-pointer"}>
+          <Icon
+            symbol={faPenToSquare}
+            size={"medium"}
+            fill={IconFillColors.primary}
+            className={"mr-5"}
+          />
+        </span>
+        <span onClick={() => alert("copy")} className={"cursor-pointer"}>
+          <Icon symbol={faClone} size={"medium"} fill={IconFillColors.primary} className={"mr-5"} />
+        </span>
+        <span onClick={() => alert("trash")} className={"cursor-pointer"}>
+          <Icon symbol={faTrashCan} size={"medium"} fill={IconFillColors.alert} />
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export const mockDataWithStyling: StandardTableData = [
+  {
+    name: { content: "Jim Halpert" },
+    relationship: { content: "Husband" },
+    dob: { content: "05/01/1985" },
+    icons: { content: iconContent() },
+  },
+  {
+    name: { content: "Michael Scott" },
+    relationship: { content: "Friend" },
+    dob: { content: "05/01/1975" },
+    icons: { content: iconContent() },
+  },
+]
+
+let i = 5
+while (i > 0) {
+  mockDataWithStyling.push(mockDataWithStyling[0])
+  mockDataWithStyling.push(mockDataWithStyling[1])
+  i--
+}
+
+export const withIcons = () => (
+  <MinimalTable headers={mockHeadersWithStyling} data={mockDataWithStyling} draggable={true} />
+)
+
+Draggable.parameters = {
+  a11y: {
+    config: {
+      rules: [
+        {
+          id: "nested-interactive",
+          enabled: false,
+        },
+      ],
+    },
+  },
+}

package/src/tables/StackedTable.stories.tsx

@@ -0,0 +1,142 @@
+import React from "react"
+
+import { StackedTable } from "./StackedTable"
+
+export default {
+  title: "Tables/StackedTable",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+  component: StackedTable,
+}
+
+const basicTableHeaders = {
+  one: { name: "t.unitType" },
+  two: { name: "t.availability" },
+  three: { name: "t.incomeRange" },
+}
+
+const basicTableHeadersHiddenDesktop = {
+  one: { name: "t.unitType" },
+  two: { name: "t.availability" },
+  three: { name: "t.incomeRange" },
+  four: { name: "t.rent" },
+}
+
+const basicTableRows = [
+  {
+    one: { cellText: "Cell 1" },
+    two: { cellText: "Cell 2" },
+    three: { cellText: "Cell 3" },
+  },
+  {
+    one: { cellText: "Cell 1" },
+    two: { cellText: "Cell 2" },
+    three: { cellText: "Cell 3" },
+  },
+  {
+    one: { cellText: "Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 Cell 1" },
+    two: { cellText: "Cell 2 Cell 2 Cell 2 Cell 2 Cell 2 Cell 2 Cell 2" },
+    three: { cellText: "Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3" },
+  },
+]
+
+const basicTableRowsHiddenDesktop = [
+  {
+    one: { cellText: "Cell 1", cellSubText: "Subtext 1" },
+    two: { cellText: "Cell 2", cellSubText: "Subtext 2" },
+    three: { cellText: "Cell 3", cellSubText: "Subtext 3" },
+    four: { cellText: "Cell 4", cellSubText: "Subtext 4" },
+  },
+  {
+    one: { cellText: "Cell 1", cellSubText: "Subtext 1" },
+    two: { cellText: "Cell 2", cellSubText: "Subtext 2" },
+    three: { cellText: "Cell 3", cellSubText: "Subtext 3" },
+    four: { cellText: "Cell 4", cellSubText: "Subtext 4" },
+  },
+  {
+    one: {
+      cellText: "Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 Cell 1",
+      cellSubText: "Subtext 1 Subtext 1 Subtext 1 Subtext 1 Subtext 1 Subtext 1",
+    },
+    two: {
+      cellText: "Cell 2 Cell 2 Cell 2 Cell 2 Cell 2 Cell 2 Cell 2",
+      cellSubText: "Subtext 2 Subtext 2 Subtext 2 Subtext 2 Subtext 2 Subtext 2",
+    },
+    three: {
+      cellText: "Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3",
+      cellSubText: "Subtext 3 Subtext 3 Subtext 3 Subtext 3 Subtext 3 Subtext 3",
+    },
+    four: {
+      cellText: "Cell 4 Cell 4 Cell 4 Cell 4 Cell 4 Cell 4 Cell 4",
+      cellSubText: "Subtext 4 Subtext 4 Subtext 4 Subtext 4 Subtext 4 Subtext 4 Subtext 4",
+    },
+  },
+]
+
+const basicTableRowsSubtext = [
+  {
+    one: { cellText: "Cell 1", cellSubText: "Subtext 1" },
+    two: { cellText: "Cell 2", cellSubText: "Subtext 2" },
+    three: { cellText: "Cell 3", cellSubText: "Subtext 3" },
+  },
+  {
+    one: { cellText: "Cell 1", cellSubText: "Subtext 1" },
+    two: { cellText: "Cell 2", cellSubText: "Subtext 2" },
+    three: { cellText: "Cell 3", cellSubText: "Subtext 3" },
+  },
+  {
+    one: {
+      cellText: "Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 Cell 1",
+      cellSubText: "Subtext 1 Subtext 1 Subtext 1 Subtext 1 Subtext 1 Subtext 1",
+    },
+    two: {
+      cellText: "Cell 2 Cell 2 Cell 2 Cell 2 Cell 2 Cell 2 Cell 2",
+      cellSubText: "Subtext 2 Subtext 2 Subtext 2 Subtext 2 Subtext 2 Subtext 2",
+    },
+    three: {
+      cellText: "Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3",
+      cellSubText: "Subtext 3 Subtext 3 Subtext 3 Subtext 3 Subtext 3 Subtext 3",
+    },
+  },
+]
+
+const responsiveTableHeaders = {
+  units: { name: "t.unitType" },
+  availability: { name: "t.availability" },
+  income: { name: "t.incomeRange" },
+  rent: { name: "t.rent" },
+}
+
+const responsiveTableRows = [
+  {
+    units: { cellText: "Studio", cellSubText: "23 available", hideSubTextMobile: true },
+    availability: { cellText: "23", cellSubText: "available" },
+    income: { cellText: "$0 to $6,854", cellSubText: "per month" },
+    rent: { cellText: "30%", cellSubText: "income" },
+  },
+  {
+    units: { cellText: "1 BR", cellSubText: "3 available" },
+    availability: { cellText: "3", cellSubText: "available" },
+    income: { cellText: "$2,194 to $6,854", cellSubText: "per month" },
+    rent: { cellText: "$1,295", cellSubText: "income" },
+  },
+]
+export const Basic = () => <StackedTable stackedData={basicTableRows} headers={basicTableHeaders} />
+export const BasicWithSubtext = () => (
+  <StackedTable stackedData={basicTableRowsSubtext} headers={basicTableHeaders} />
+)
+
+export const BasicWithSubtextAndHiddenDesktopRow = () => (
+  <StackedTable
+    stackedData={basicTableRowsHiddenDesktop}
+    headers={basicTableHeadersHiddenDesktop}
+    headersHiddenDesktop={["two"]}
+  />
+)
+
+export const UnitSummaryDefault = () => (
+  <StackedTable
+    stackedData={responsiveTableRows}
+    headers={responsiveTableHeaders}
+    headersHiddenDesktop={["availability"]}
+  />
+)

package/src/tables/StandardTable.stories.tsx

@@ -0,0 +1,109 @@
+import React from "react"
+import { Button } from "../actions/Button"
+import { StandardTable, StandardTableData, TableHeaders, TableThumbnail } from "./StandardTable"
+
+export default {
+  title: "Tables/StandardTable",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+  includeStories: ["Default", "ImageCells", "Draggable"],
+  excludeStories: ["mockHeaders", "mockData", "preferenceHeaders", "preferenceData"],
+  component: StandardTable,
+}
+
+export const mockHeaders: TableHeaders = {
+  name: "t.name",
+  relationship: "t.relationship",
+  dob: "application.household.member.dateOfBirth",
+}
+
+export const mockData: StandardTableData = [
+  {
+    name: { content: "Jim Halpert" },
+    relationship: { content: "Husband" },
+    dob: { content: "05/01/1985" },
+  },
+  {
+    name: { content: "Michael Scott" },
+    relationship: { content: "Friend" },
+    dob: { content: "05/01/1975" },
+  },
+]
+
+let i = 5
+while (i > 0) {
+  mockData.push(mockData[0])
+  mockData.push(mockData[1])
+  i--
+}
+
+export const Default = () => <StandardTable headers={mockHeaders} data={mockData} />
+
+const headersWithImage = { image: "Image", ...mockHeaders }
+const dataWithImage = [...mockData] as any
+dataWithImage[0].image = (
+  <TableThumbnail>
+    <a href="#">
+      <img src="/images/listing.jpg" alt="listing image" />
+    </a>
+  </TableThumbnail>
+)
+dataWithImage[1].image = (
+  <TableThumbnail>
+    <img src="/images/logo_glyph.svg" alt="logo" />
+  </TableThumbnail>
+)
+
+export const ImageCells = () => (
+  <StandardTable headers={headersWithImage} data={dataWithImage} responsiveCollapse />
+)
+
+export const preferenceHeaders = {
+  name: "t.name",
+  action: "",
+}
+
+const getDeleteButton = () => {
+  return (
+    <div className={"text-right"}>
+      <Button type="button" className="front-semibold uppercase text-alert m-0" unstyled>
+        Delete
+      </Button>
+    </div>
+  )
+}
+
+export const preferenceData = [
+  {
+    name: { content: "Live or Work in City of Hayward" },
+    action: { content: getDeleteButton() },
+  },
+  {
+    name: { content: "Displacee Tenant" },
+    action: { content: getDeleteButton() },
+  },
+  {
+    name: { content: "Veteran Status" },
+    action: { content: getDeleteButton() },
+  },
+]
+
+export const Draggable = () => (
+  <StandardTable headers={preferenceHeaders} data={preferenceData} draggable={true} />
+)
+
+Draggable.parameters = {
+  a11y: {
+    config: {
+      rules: [
+        {
+          id: "nested-interactive",
+          enabled: false,
+        },
+        {
+          id: "color-contrast",
+          enabled: false,
+        },
+      ],
+    },
+  },
+}

package/src/text/Heading.stories.tsx

@@ -0,0 +1,31 @@
+import * as React from "react"
+import { BADGES } from "../../.storybook/constants"
+import HeadingDocumentation from "./Heading.docs.mdx"
+import { Heading } from "./Heading"
+
+export default {
+  title: "Text/Heading 🚩",
+  id: "text/heading",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+  parameters: {
+    docs: {
+      page: HeadingDocumentation,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+export const base1 = () => <Heading>Test Header</Heading>
+export const base2 = () => <Heading priority={2}>Test Header</Heading>
+export const base3 = () => <Heading priority={3}>Test Header</Heading>
+export const base4 = () => <Heading priority={4}>Test Header</Heading>
+export const base5 = () => <Heading priority={5}>Test Header</Heading>
+export const base6 = () => <Heading priority={6}>Test Header</Heading>
+export const largeHeader = () => <Heading styleType={"largePrimary"}>Large Header</Heading>
+export const mediumHeader = () => <Heading styleType={"mediumNormal"}>Medium Header</Heading>
+export const smallWeighted = () => <Heading styleType={"smallWeighted"}>Small Weighted</Heading>
+export const smallNormal = () => <Heading styleType={"smallNormal"}>Small Normal</Heading>
+export const underlineHeader = () => (
+  <Heading styleType={"underlineWeighted"}>Underline Header</Heading>
+)
+export const lightWeighted = () => <Heading styleType={"lightWeighted"}>Light Weighted</Heading>
+export const capsWeighted = () => <Heading styleType={"capsWeighted"}>Caps Weighted</Heading>

package/src/text/Message.stories.tsx

@@ -0,0 +1,11 @@
+import * as React from "react"
+import { Message } from "./Message"
+
+export default {
+  title: "Text/Message",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const standard = () => <Message>Message</Message>
+
+export const warning = () => <Message warning={true}>Warning</Message>

package/src/text/Tag.stories.tsx

@@ -0,0 +1,146 @@
+import * as React from "react"
+import {
+  AppearanceSizeType,
+  AppearanceStyleType,
+  AppearanceShadeType,
+} from "../global/AppearanceTypes"
+import { BADGES } from "../../.storybook/constants"
+import { Tag } from "./Tag"
+import TagDocumentation from "./Tag.docs.mdx"
+
+export default {
+  title: "Text/Tag 🚩",
+  id: "text/tag",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+  parameters: {
+    docs: {
+      page: TagDocumentation,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+
+export const standard = () => <Tag>Tag</Tag>
+
+export const success = () => <Tag styleType={AppearanceStyleType.success}>Success</Tag>
+
+export const warning = () => <Tag styleType={AppearanceStyleType.warning}>Warning</Tag>
+
+export const small = () => <Tag size={AppearanceSizeType.small}>Warning</Tag>
+
+// TODO: export const big = () => <Tag size={AppearanceSizeType.big}>Warning</Tag>
+
+export const pill = () => <Tag pillStyle={true}>Pill Style</Tag>
+
+export const pillSmall = () => (
+  <Tag pillStyle={true} size={AppearanceSizeType.small}>
+    Pill Small
+  </Tag>
+)
+
+export const pillLarge = () => (
+  <Tag pillStyle={true} styleType={AppearanceStyleType.success}>
+    Pill Large
+  </Tag>
+)
+
+const Spacer = () => {
+  return <div style={{ height: "10px" }} />
+}
+export const pillColors = () => (
+  <>
+    <Tag pillStyle={true} styleType={AppearanceStyleType.primary}>
+      Primary
+    </Tag>
+    <Spacer />
+    <Tag pillStyle={true} styleType={AppearanceStyleType.secondary}>
+      Secondary
+    </Tag>
+    <Spacer />
+    <Tag pillStyle={true} styleType={AppearanceStyleType.success}>
+      Success Dark
+    </Tag>
+    <Spacer />
+    <Tag pillStyle={true} styleType={AppearanceStyleType.success} shade={AppearanceShadeType.light}>
+      Success Light
+    </Tag>
+    <Spacer />
+    <Tag
+      pillStyle={true}
+      styleType={AppearanceStyleType.accentCool}
+      shade={AppearanceShadeType.dark}
+    >
+      Accent Cool Dark
+    </Tag>
+    <Spacer />
+    <Tag
+      pillStyle={true}
+      styleType={AppearanceStyleType.accentCool}
+      shade={AppearanceShadeType.light}
+    >
+      Accent Cool Light
+    </Tag>
+    <Spacer />
+    <Tag
+      pillStyle={true}
+      styleType={AppearanceStyleType.accentWarm}
+      shade={AppearanceShadeType.dark}
+    >
+      Accent Warm Dark
+    </Tag>
+    <Spacer />
+    <Tag
+      pillStyle={true}
+      styleType={AppearanceStyleType.accentWarm}
+      shade={AppearanceShadeType.light}
+    >
+      Accent Warm Light
+    </Tag>
+    <Spacer />
+    <Tag pillStyle={true} styleType={AppearanceStyleType.closed}>
+      Closed
+    </Tag>
+  </>
+)
+
+export const pillListings = () => (
+  <div style={{ width: "200px" }}>
+    <Tag
+      pillStyle={true}
+      styleType={AppearanceStyleType.primary}
+      size={AppearanceSizeType.small}
+      fillContainer={true}
+    >
+      Draft
+    </Tag>
+    <Spacer />
+    <Tag
+      pillStyle={true}
+      styleType={AppearanceStyleType.success}
+      shade={AppearanceShadeType.light}
+      size={AppearanceSizeType.small}
+      fillContainer={true}
+    >
+      Scheduled
+    </Tag>
+    <Spacer />
+    <Tag
+      pillStyle={true}
+      styleType={AppearanceStyleType.closed}
+      size={AppearanceSizeType.small}
+      fillContainer={true}
+    >
+      Closed
+    </Tag>
+    <Spacer />
+    <Tag
+      pillStyle={true}
+      styleType={AppearanceStyleType.accentCool}
+      shade={AppearanceShadeType.dark}
+      size={AppearanceSizeType.small}
+      fillContainer={true}
+    >
+      Results
+    </Tag>
+  </div>
+)

package/.jest/setup-tests.js

@@ -1,31 +0,0 @@
-import "@testing-library/jest-dom/extend-expect"
-import { configure } from "@testing-library/dom"
-
-import { addTranslation } from "../src/helpers/translator"
-import general from "../src/locales/general.json"
-
-// see: https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
-window.matchMedia = jest.fn().mockImplementation((query) => {
-  return {
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // deprecated
-    removeListener: jest.fn(), // deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  }
-})
-
-window.IntersectionObserver = class {
-  constructor(root, options) {
-    // no-op
-  }
-  observe = jest.fn()
-  disconnect = jest.fn()
-}
-
-addTranslation(general)
-
-configure({ testIdAttribute: "data-test-id" })