@bloom-housing/ui-components 7.1.0 → 7.2.0

package/src/actions/LinkButton.stories.tsx

@@ -0,0 +1,54 @@
+import * as React from "react"
+import { AppearanceSizeType, AppearanceStyleType } from "../global/AppearanceTypes"
+
+import { LinkButton } from "./LinkButton"
+
+export default {
+  title: "Actions/Link Button",
+}
+
+export const standard = () => <LinkButton href="/standardButtonLink">LinkButton w/Link</LinkButton>
+
+export const small = () => (
+  <LinkButton size={AppearanceSizeType.small} href="/smallButtonLink">
+    Small LinkButton
+  </LinkButton>
+)
+
+export const filled = () => (
+  <LinkButton styleType={AppearanceStyleType.primary} href="/filledButtonLink">
+    Filled LinkButton
+  </LinkButton>
+)
+
+export const SmallAndFilled = () => (
+  <LinkButton
+    size={AppearanceSizeType.small}
+    styleType={AppearanceStyleType.primary}
+    href="/smallFilledButtonLink"
+  >
+    Small and Filled LinkButton
+  </LinkButton>
+)
+
+export const RegularCase = () => (
+  <LinkButton normalCase={true} href="/regularButtonLink">
+    LinkButton (Normal Case)
+  </LinkButton>
+)
+
+export const ExternalSameTab = () => (
+  <LinkButton href="https://www.google.com">LinkButton</LinkButton>
+)
+
+export const ExternalNewTabIcon = () => (
+  <LinkButton href="https://www.google.com" newTabIcon={true} newTab={true}>
+    LinkButton
+  </LinkButton>
+)
+
+export const UnstyledExternalNewTabIcon = () => (
+  <LinkButton href="https://www.google.com" newTabIcon={true} newTab={true} unstyled={true}>
+    LinkButton
+  </LinkButton>
+)

package/src/blocks/ActionBlock.stories.tsx

@@ -0,0 +1,121 @@
+import React from "react";
+import ActionBlock, { ActionBlockLayout } from "./ActionBlock";
+import HeaderBadge from "../icons/HeaderBadge";
+import { Button } from "../..";
+import { AppearanceStyleType } from "../global/AppearanceTypes";
+import Icon from "../icons/Icon";
+
+export default {
+  title: "Blocks/Action Block",
+};
+
+export const blockWithIcon = () => (
+  <ActionBlock
+    header="Action block"
+    background="primary-lighter"
+    icon={<Icon size="3xl" symbol="mail" />}
+    actions={[
+      <Button
+        onClick={() => console.log("click")}
+        styleType={AppearanceStyleType.primary}
+      >
+        Action
+      </Button>,
+    ]}
+  ></ActionBlock>
+);
+
+export const blockNoIconNoBackgroung = () => (
+  <ActionBlock
+    header="Full length headline text that spans the block"
+    actions={[
+      <Button
+        onClick={() => console.log("click")}
+        styleType={AppearanceStyleType.info}
+      >
+        Button
+      </Button>,
+    ]}
+  ></ActionBlock>
+);
+
+export const blockWithDarkerBg = () => (
+  <ActionBlock
+    header="Action block"
+    icon={<Icon size="3xl" symbol="mail" />}
+    background="primary-darker"
+    actions={[
+      <Button
+        onClick={() => console.log("click")}
+        styleType={AppearanceStyleType.primary}
+      >
+        Action
+      </Button>,
+      <Button
+        onClick={() => console.log("click")}
+        styleType={AppearanceStyleType.info}
+      >
+        Action
+      </Button>,
+    ]}
+  ></ActionBlock>
+);
+
+export const blockWithSubheader = () => (
+  <ActionBlock
+    header="Full length headline text that spans the block"
+    subheader="Brunch leggings trust fund tattooed, flannel sustainable man braid venmo. "
+    icon={<Icon size="3xl" symbol="mail" />}
+    background="primary-lighter"
+    actions={[<Button onClick={() => console.log("click")}>Action</Button>]}
+  ></ActionBlock>
+);
+
+export const inlineBlock = () => (
+  <ActionBlock
+    header="See more listings from our community partners"
+    icon={<Icon size="3xl" symbol="mail" />}
+    background="primary-lighter"
+    layout={ActionBlockLayout.inline}
+    actions={[
+      <Button
+        onClick={() => console.log("click")}
+        styleType={AppearanceStyleType.primary}
+      >
+        Action
+      </Button>,
+    ]}
+  ></ActionBlock>
+);
+
+export const inlineBlockWith2actions = () => (
+  <ActionBlock
+    header="Find more listings on our website"
+    background="primary-darker"
+    layout={ActionBlockLayout.inline}
+    actions={[
+      <Button onClick={() => console.log("click")}>
+        First Come, First Served
+      </Button>,
+      <Button onClick={() => console.log("click")}>
+        First Come, First Served
+      </Button>,
+    ]}
+  ></ActionBlock>
+);
+
+export const inlineBlockWith2actionsAsLinks = () => (
+  <ActionBlock
+    header="Find more listings on our website:"
+    background="primary-darker"
+    layout={ActionBlockLayout.inline}
+    actions={[
+      <a className="button" key="action-1" href={"https://google.com"}>
+        {"First come, first served"}
+      </a>,
+      <a className="button" key="action-2" href={"https://google.com"}>
+        {"City Second loan program"}
+      </a>,
+    ]}
+  ></ActionBlock>
+);

package/src/blocks/Card.docs.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
-import { Swatch } from "../prototypes/Swatch"
-import { Card } from "./Card"
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs";
+import { Swatch } from "../prototypes/Swatch";
+import { Card } from "./Card";
 
 # Card
 

package/src/blocks/Card.stories.tsx

@@ -0,0 +1,182 @@
+import React from "react"
+import { BADGES } from "../../.storybook/constants"
+import { AppearanceStyleType, Button, ButtonGroup, ButtonGroupSpacing, LinkButton } from "../.."
+import { HeadingGroup } from "../headers/HeadingGroup"
+import Card from "./Card"
+import CardDocumentation from "./Card.docs.mdx"
+
+export default {
+  title: "Blocks/Card 🚩",
+  id: "blocks/card",
+  parameters: {
+    docs: {
+      page: CardDocumentation,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+
+export const TextContent = () => (
+  <div style={{ maxWidth: "500px" }}>
+    <Card>
+      <Card.Header>
+        <h3>I'm just a heading</h3>
+      </Card.Header>
+
+      <Card.Section className="markdown">
+        <p>Markdown styled content here.</p>
+
+        <ul>
+          <li>List Item 1</li>
+          <li>List Item 2</li>
+        </ul>
+      </Card.Section>
+
+      <Card.Footer>
+        <Card.Section>
+          <p>Footer content here.</p>
+        </Card.Section>
+      </Card.Footer>
+    </Card>
+  </div>
+)
+
+export const MixedContent = () => (
+  <div style={{ maxWidth: "500px" }}>
+    <Card>
+      <div>
+        <figure>
+          <img src="/images/listing.jpg" />
+        </figure>
+
+        <Card.Header
+          suffix={
+            <div>
+              <Button>Click</Button>
+            </div>
+          }
+        >
+          <h3 className="card-header">I'm a heading!</h3>
+        </Card.Header>
+      </div>
+
+      <Card.Section>
+        <p>Hello World!</p>
+      </Card.Section>
+
+      <Card.Footer>
+        <ButtonGroup
+          spacing={ButtonGroupSpacing.even}
+          columns={[<Button styleType={AppearanceStyleType.primary}>Call to Action</Button>]}
+        />
+      </Card.Footer>
+    </Card>
+  </div>
+)
+
+export const HeaderFooterOnly = () => (
+  <div style={{ maxWidth: "600px" }}>
+    <Card>
+      <Card.Header>
+        <HeadingGroup
+          headingPriority={2}
+          heading="Household Maximum Income"
+          subheading="To determine your eligibility for this property, choose your household size (include yourself in that calculation)."
+        />
+      </Card.Header>
+
+      <Card.Footer>
+        <ButtonGroup
+          columns={[
+            <Button>Previous</Button>,
+            <Button styleType={AppearanceStyleType.primary}>Next</Button>,
+          ]}
+        />
+        <Card.Section centered={true}>
+          <LinkButton href="#" unstyled className="m-0">
+            Skip this and show me listings
+          </LinkButton>
+        </Card.Section>
+      </Card.Footer>
+    </Card>
+  </div>
+)
+
+export const DetroitStyle = () => {
+  const cssVarsOverride = `
+    .card-overrides {
+      --bloom-font-sans: Montserrat;
+      --bloom-font-alt-sans: var(--bloom-font-sans);
+      --bloom-color-primary: rgb(41,126,115);
+      --bloom-color-primary-dark: rgb(0,68,69);
+
+      --primary-appearance-hover-background-color: white;
+      --primary-appearance-hover-label-color: var(--bloom-color-primary-dark);
+
+      --outlined-appearance-hover-background-color: var(--bloom-color-primary);
+      --outlined-appearance-hover-border-color: var(--bloom-color-primary);
+
+      font-family: var(--bloom-font-sans);
+    }
+
+    .card-overrides .heading-group > *:first-child {
+      font-family: var(--bloom-font-sans);
+    }
+
+    .card-overrides .button {
+      --normal-rounded: 60px;
+      --normal-padding: 0.5rem 1rem;
+      --normal-font-size: var(--bloom-font-size-base);
+      --label-letter-spacing: normal;
+      --label-transform: none;
+    }
+  `
+
+  return (
+    <>
+      <link rel="preconnect" href="https://fonts.googleapis.com" />
+      <link rel="preconnect" href="https://fonts.gstatic.com" />
+      <link
+        href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
+        rel="stylesheet"
+      ></link>
+      <div className="card-overrides" style={{ maxWidth: "600px" }}>
+        <Card>
+          <Card.Header>
+            <HeadingGroup
+              headingPriority={2}
+              heading="Household Maximum Income"
+              subheading="To determine your eligibility for this property, choose your household size (include yourself in that calculation)."
+            />
+          </Card.Header>
+
+          <Card.Section className="markdown">
+            <div className="field">
+              <input type="radio" name="household-size" id="one-two" />
+              <label htmlFor="one-two">1-2 People</label>
+            </div>
+            <div className="field">
+              <input type="radio" name="household-size" id="three-six" />
+              <label htmlFor="three-six">3-6 People</label>
+            </div>
+          </Card.Section>
+
+          <Card.Footer>
+            <ButtonGroup
+              columns={[
+                <Button>Previous</Button>,
+                <Button styleType={AppearanceStyleType.primary}>Next</Button>,
+              ]}
+            />
+            <Card.Section centered={true}>
+              <LinkButton href="#" unstyled className="m-0">
+                Skip this and show me listings
+              </LinkButton>
+            </Card.Section>
+          </Card.Footer>
+        </Card>
+        <style>{cssVarsOverride}</style>
+      </div>
+    </>
+  )
+}

package/src/blocks/DashBlocks.stories.tsx

@@ -0,0 +1,39 @@
+import React from "react"
+import DashBlocks from "./DashBlocks"
+import DashBlock from "./DashBlock"
+import HeaderBadge from "../icons/HeaderBadge"
+
+export default {
+  title: "Blocks/Dash Blocks",
+}
+
+export const withTwoBlocks = () => (
+  <DashBlocks>
+    <DashBlock
+      href="#"
+      title="My Applications"
+      subtitle="and listings for properties for which you've applied"
+      icon={<HeaderBadge />}
+    ></DashBlock>
+    <DashBlock
+      href="#"
+      title="Account Settings"
+      subtitle="Account settings, email and password"
+      icon={
+        <span className="header-badge">
+          <svg id="i-settings" viewBox="0 0 32 32">
+            <title>settings</title>
+            <path
+              fill="#c7cbc7"
+              d="M30.075 14.091c-2.858-0.549-4.168-3.888-2.446-6.234l1.208-1.648-2.611-2.611-1.624 1.099c-2.408 1.632-5.696 0.197-6.138-2.677l-0.31-2.021h-3.693l-0.478 2.486c-0.538 2.794-3.757 4.128-6.114 2.531l-2.096-1.419-2.611 2.611 1.208 1.648c1.72 2.346 0.411 5.685-2.446 6.234l-1.925 0.37v3.693l2.021 0.31c2.875 0.443 4.309 3.73 2.677 6.139l-1.099 1.622 2.611 2.611 1.648-1.208c2.347-1.72 5.685-0.411 6.234 2.446l0.371 1.925h3.693l0.219-1.421c0.453-2.939 3.861-4.35 6.259-2.592l1.16 0.851 2.611-2.611-1.099-1.622c-1.632-2.408-0.197-5.696 2.677-6.139l2.021-0.31v-3.693l-1.925-0.37zM16.307 19.077c-1.53 0-2.77-1.24-2.77-2.77s1.24-2.77 2.77-2.77 2.77 1.24 2.77 2.77c0 1.53-1.24 2.77-2.77 2.77v0 0z"
+            ></path>
+            <path
+              fill="#556080"
+              d="M16.307 10.461c-3.229 0-5.846 2.618-5.846 5.846s2.618 5.846 5.846 5.846 5.846-2.618 5.846-5.846c0-3.229-2.618-5.846-5.846-5.846v0 0zM16.307 19.077c-1.53 0-2.77-1.24-2.77-2.77s1.24-2.77 2.77-2.77 2.77 1.24 2.77 2.77c0 1.53-1.24 2.77-2.77 2.77v0 0z"
+            ></path>
+          </svg>
+        </span>
+      }
+    ></DashBlock>
+  </DashBlocks>
+)

package/src/blocks/HousingCounselor.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+
+import { HousingCounselor } from "./HousingCounselor"
+
+export default {
+  title: "Blocks/Housing Counselor",
+}
+
+export const withOnlyRequiredFields = () => (
+  <HousingCounselor name={"Counselor Name"} languages={["English"]} />
+)
+
+export const withMultipleLanguages = () => (
+  <HousingCounselor name={"Counselor Name"} languages={["English", "Spanish", "Chinese"]} />
+)
+
+export const withAllFields = () => (
+  <HousingCounselor
+    name={"Counselor Name"}
+    languages={["English"]}
+    addressStreet={"123 Main St"}
+    addressCityState={"San Francisco, CA"}
+    website={"www.counselor.org"}
+    phone={"123-456-7890"}
+  />
+)

package/src/blocks/ImageCard.stories.tsx

@@ -0,0 +1,179 @@
+import * as React from "react"
+import { BADGES } from "../../.storybook/constants"
+import { ImageCard } from "./ImageCard"
+import { t } from "../helpers/translator"
+import { ApplicationStatusType } from "../global/ApplicationStatusType"
+import { IconFillColors } from "../icons/Icon"
+import ImageCardDocumentation from "./ImageCard.docs.mdx"
+
+export default {
+  title: "Blocks/Image Card 🚩",
+  id: "blocks/image-card",
+  decorators: [(storyFn: any) => <div style={{ maxWidth: "700px" }}>{storyFn()}</div>],
+  parameters: {
+    docs: {
+      page: ImageCardDocumentation,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+
+export const image = () => <ImageCard imageUrl="/images/listing.jpg" />
+
+export const twoImages = () => (
+  <ImageCard
+    images={[
+      { url: "/images/listing.jpg" },
+      {
+        url:
+          "https://res.cloudinary.com/exygy/image/upload/w_1302,c_limit,q_65/dev/oakhouse_cgdqmx.jpg",
+      },
+    ]}
+  />
+)
+
+export const threeImages = () => (
+  <ImageCard
+    images={[
+      { url: "/images/listing.jpg" },
+      {
+        url:
+          "https://res.cloudinary.com/exygy/image/upload/w_1302,c_limit,q_65/dev/oakhouse_cgdqmx.jpg",
+      },
+      {
+        url:
+          "https://res.cloudinary.com/exygy/image/upload/w_1302,c_limit,q_65/dev/house_goo3cp.jpg",
+      },
+    ]}
+  />
+)
+
+export const fourImages = () => (
+  <ImageCard
+    images={[
+      { url: "/images/listing.jpg" },
+      {
+        url:
+          "https://res.cloudinary.com/exygy/image/upload/w_1302,c_limit,q_65/dev/oakhouse_cgdqmx.jpg",
+        mobileUrl:
+          "https://res.cloudinary.com/exygy/image/upload/w_767,c_limit,q_55/dev/oakhouse_cgdqmx.jpg",
+        thumbnailUrl:
+          "https://res.cloudinary.com/exygy/image/upload/w_480,c_limit,q_55/dev/oakhouse_cgdqmx.jpg",
+        description: "The second photo in the list",
+      },
+      {
+        url:
+          "https://res.cloudinary.com/exygy/image/upload/w_1302,c_limit,q_65/dev/house_goo3cp.jpg",
+      },
+      {
+        url:
+          "https://regional-dahlia-staging.s3-us-west-1.amazonaws.com/listings/triton/thetriton.png",
+      },
+    ]}
+    modalCloseLabel="Back to listing"
+    moreImagesLabel="images"
+    moreImagesDescription="more images for 'Property Name'"
+  />
+)
+
+export const withLink = () => <ImageCard href="/listings" imageUrl="/images/listing.jpg" />
+
+export const withNoImage = () => <ImageCard />
+
+export const withOneStatusAndSmaller = () => (
+  <header className="image-card--leader">
+    <ImageCard
+      href="/listings"
+      imageUrl="/images/listing.jpg"
+      statuses={[
+        { status: ApplicationStatusType.Closed, content: t("listings.applicationsClosed") },
+      ]}
+    />
+  </header>
+)
+
+export const withDescriptionAsAlt = () => (
+  <ImageCard imageUrl="/images/listing.jpg" description="An image of the building" />
+)
+
+export const withOneStatusAndTag = () => (
+  <ImageCard
+    href="/listings"
+    imageUrl="/images/listing.jpg"
+    tags={[{ text: "Label" }]}
+    statuses={[{ status: ApplicationStatusType.Closed, content: t("listings.applicationsClosed") }]}
+  />
+)
+export const withMultipleTags = () => (
+  <ImageCard
+    href="/listings"
+    imageUrl="/images/listing.jpg"
+    tags={[{ text: "Label" }, { text: "Label2" }]}
+    statuses={[{ status: ApplicationStatusType.Closed, content: t("listings.applicationsClosed") }]}
+  />
+)
+
+export const withLongTagsAndIcons = () => (
+  <ImageCard
+    href="/listings"
+    imageUrl="/images/listing.jpg"
+    tags={[
+      { text: "This is a long label", iconType: "mail", iconColor: IconFillColors.white },
+      { text: "This is another longer label" },
+    ]}
+    statuses={[{ status: ApplicationStatusType.Closed, content: t("listings.applicationsClosed") }]}
+  />
+)
+
+export const withManyTags = () => (
+  <ImageCard
+    href="/listings"
+    imageUrl="/images/listing.jpg"
+    tags={[
+      { text: "Label 1" },
+      { text: "Label 2" },
+      { text: "Label 3" },
+      { text: "Label 4" },
+      { text: "Label 5" },
+      { text: "Label 6" },
+      { text: "Label 7" },
+      { text: "Label 8" },
+    ]}
+    statuses={[{ status: ApplicationStatusType.Closed, content: t("listings.applicationsClosed") }]}
+  />
+)
+
+export const withMultipleAppStatus = () => (
+  <ImageCard
+    href="/listings"
+    imageUrl="/images/listing.jpg"
+    tags={[{ text: "Label" }]}
+    statuses={[
+      {
+        status: ApplicationStatusType.Open,
+        content: "First Come First Served",
+        subContent: "Application Due Date: July 10th",
+      },
+      { status: ApplicationStatusType.Closed, content: t("listings.applicationsClosed") },
+      {
+        status: ApplicationStatusType.PostLottery,
+        content: "Lottery Results Posted: September 3rd",
+        hideIcon: true,
+      },
+    ]}
+  />
+)
+
+export const withCustomIconType = () => (
+  <ImageCard
+    href="/listings"
+    imageUrl="/images/listing.jpg"
+    statuses={[
+      {
+        status: ApplicationStatusType.Matched,
+        content: "Matched",
+        iconType: "check",
+      },
+    ]}
+  />
+)

package/src/blocks/InfoCard.stories.tsx

@@ -0,0 +1,56 @@
+import React from "react"
+import { BADGES } from "../../.storybook/constants"
+import { InfoCard } from "../blocks/InfoCard"
+import { ExpandableText } from "../actions/ExpandableText"
+import InfoCardDocumentation from "./InfoCard.docs.mdx"
+
+export default {
+  title: "blocks/Info Card  🚩",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+  id: "blocks/info-card",
+  parameters: {
+    docs: {
+      page: InfoCardDocumentation,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+
+export const Default = () => (
+  <>
+    <InfoCard
+      title="My Card"
+      externalHref="http://google.com"
+      className="is-normal-primary-lighter"
+    >
+      {`
+Paragraph content
+
+----
+
+More content
+      `}
+    </InfoCard>
+  </>
+)
+
+export const WithMarkdown = () => (
+  <InfoCard title="My Card" externalHref="http://google.com" className="is-normal-primary-lighter">
+    {`
+#### Header 4
+
+* A list
+* of items
+      `}
+  </InfoCard>
+)
+
+export const WithChildComponent = () => (
+  <InfoCard title="My Card" externalHref="http://google.com" className="is-normal-primary-lighter">
+    <ExpandableText strings={{ readMore: "More", readLess: "Less" }}>
+      {`
+Text within _another_ component…
+      `}
+    </ExpandableText>
+  </InfoCard>
+)