@bloom-housing/ui-components 7.1.0 → 7.2.1

package/dist/tailwind.config.js

@@ -0,0 +1,124 @@
+/* eslint-env node */
+module.exports = {
+    important: true,
+    purge: false,
+    theme: {
+        screens: {
+            sm: "640px",
+            md: "768px",
+            lg: "1200px",
+            xl: "1280px",
+            "2xl": "1440px",
+            print: { raw: "print" },
+        },
+        fontSize: {
+            "2xs": "var(--bloom-font-size-2xs)",
+            xs: "var(--bloom-font-size-xs)",
+            sm: "var(--bloom-font-size-sm)",
+            tiny: "var(--bloom-font-size-tiny)",
+            base: "var(--bloom-font-size-base)",
+            "base-alt": "var(--bloom-font-size-base-alt)",
+            lg: "var(--bloom-font-size-lg)",
+            xl: "var(--bloom-font-size-xl)",
+            "2xl": "var(--bloom-font-size-2xl)",
+            "3xl": "var(--bloom-font-size-3xl)",
+            "4xl": "var(--bloom-font-size-4xl)",
+            "5xl": "var(--bloom-font-size-5xl)",
+            "6xl": "var(--bloom-font-size-6xl)",
+            "6.5xl": "var(--bloom-font-size-6_5xl)",
+            "7xl": "var(--bloom-font-size-7xl)",
+        },
+        fontFamily: {
+            sans: "var(--bloom-font-sans)",
+            serif: "var(--bloom-font-serif)",
+            "alt-sans": "var(--bloom-font-alt-sans)",
+        },
+        colors: {
+            primary: "var(--bloom-color-primary)",
+            "primary-dark": "var(--bloom-color-primary-dark)",
+            "primary-darker": "var(--bloom-color-primary-darker)",
+            "primary-light": "var(--bloom-color-primary-light)",
+            "primary-lighter": "var(--bloom-color-primary-lighter)",
+            secondary: "var(--bloom-color-secondary)",
+            alert: "var(--bloom-color-alert)",
+            "alert-light": "var(--bloom-color-alert-light)",
+            "alert-dark": "var(--bloom-color-alert-dark)",
+            success: "var(--bloom-color-success)",
+            "success-light": "var(--bloom-color-success-light)",
+            "success-dark": "var(--bloom-color-success-dark)",
+            warn: "var(--bloom-color-warn)",
+            "warn-light": "var(--bloom-color-warn-light)",
+            "warn-dark": "var(--bloom-color-warn-dark)",
+            "accent-cool": "var(--bloom-color-accent-cool)",
+            "accent-cool-light": "var(--bloom-color-accent-cool-light)",
+            "accent-cool-dark": "var(--bloom-color-accent-cool-dark)",
+            "accent-warm": "var(--bloom-color-accent-warm)",
+            "accent-warm-dark": "var(--bloom-color-accent-warm-dark)",
+            "accent-warm-light": "var(--bloom-color-accent-warm-light)",
+            "accent-warm-lighter": "var(--bloom-color-accent-warm-lighter)",
+            lush: "var(--bloom-color-lush)",
+            white: "var(--bloom-color-white)",
+            black: "var(--bloom-color-black)",
+            blue: {
+                800: "var(--bloom-color-blue-800)",
+                700: "var(--bloom-color-blue-700)",
+                600: "var(--bloom-color-blue-600)",
+                300: "var(--bloom-color-blue-300)",
+                200: "var(--bloom-color-blue-200)",
+            },
+            red: {
+                700: "var(--bloom-color-red-700)",
+                300: "var(--bloom-color-red-300)",
+            },
+            yellow: {
+                700: "var(--bloom-color-yellow-700)",
+                300: "var(--bloom-color-yellow-300)",
+            },
+            green: {
+                700: "var(--bloom-color-green-700)",
+                300: "var(--bloom-color-green-300)",
+            },
+            teal: {
+                700: "var(--bloom-color-green-700)",
+                300: "var(--bloom-color-green-300)",
+            },
+            gray: {
+                950: "var(--bloom-color-gray-950)",
+                900: "var(--bloom-color-gray-900)",
+                850: "var(--bloom-color-gray-850)",
+                800: "var(--bloom-color-gray-800)",
+                750: "var(--bloom-color-gray-750)",
+                700: "var(--bloom-color-gray-700)",
+                650: "var(--bloom-color-gray-650)",
+                600: "var(--bloom-color-gray-600)",
+                550: "var(--bloom-color-gray-550)",
+                500: "var(--bloom-color-gray-500)",
+                450: "var(--bloom-color-gray-450)",
+                400: "var(--bloom-color-gray-400)",
+                300: "var(--bloom-color-gray-300)",
+                200: "var(--bloom-color-gray-200)",
+                100: "var(--bloom-color-gray-100)",
+            },
+        },
+        letterSpacing: {
+            tightest: "var(--bloom-letter-spacing-tightest)",
+            tighter: "var(--bloom-letter-spacing-tighter)",
+            tight: "var(--bloom-letter-spacing-tight)",
+            normal: "0",
+            wide: "var(--bloom-letter-spacing-wide)",
+            wider: "var(--bloom-letter-spacing-wider)",
+            widest: "var(--bloom-letter-spacing-widest)",
+            ultrawide: "var(--bloom-letter-spacing-ultrawide)",
+        },
+        extend: {
+            borderColor: function (theme) { return ({
+                DEFAULT: theme("colors.gray.450", "currentColor"),
+            }); },
+            inset: {
+                4: "1rem",
+                "-10": "-2.5rem",
+            },
+        },
+    },
+};
+//# sourceMappingURL=tailwind.config.js.map

package/dist/tailwind.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind.config.js","sourceRoot":"","sources":["../tailwind.config.js"],"names":[],"mappings":"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"}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "7.1.0",
+  "version": "7.2.1",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
-  "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
+  "homepage": "https://github.com/bloom-housing/ui-components",
   "main": "index.js",
   "license": "Apache-2.0",
   "private": false,
@@ -11,9 +11,21 @@
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
+  "release": {
+    "branches": [
+      "main"
+    ]
+  },
+  "files": [
+    "dist",
+    "src",
+    "tailwind.config.js",
+    "tailwind.tosass.js"
+  ],
   "scripts": {
     "build-storybook": "build-storybook -c .storybook -s ./public",
     "start": "start-storybook -s ./public",
+    "build": "tsc --module commonjs",
     "test": "jest -w 1",
     "test:coverage": "jest -w 1 --coverage --watchAll=false",
     "prettier": "prettier --write \"**/*.tsx\"",
@@ -24,6 +36,13 @@
     "@babel/preset-env": "^7.15.4",
     "@emotion/core": "^10.0.35",
     "@emotion/styled": "^10.0.27",
+    "eslint": "^7.11.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.21.4",
+    "eslint-plugin-react-hooks": "^4.1.2",
+    "eslint-plugin-jsx-a11y": "6.5.1",
     "@geometricpanda/storybook-addon-badges": "^0.2.1",
     "@storybook/addon-a11y": "^6.3.8",
     "@storybook/addon-actions": "^6.3.8",
@@ -43,10 +62,18 @@
     "@types/dompurify": "^2.3.3",
     "@types/jest": "^26.0.14",
     "@types/jwt-decode": "^2.2.1",
+    "@types/markdown-to-jsx": "6.11.3",
+    "@types/mdx": "^2.0.1",
+    "@types/node": "^12.12.67",
+    "@types/node-polyglot": "^2.4.1",
     "@types/pretty": "2.0.1",
+    "@types/react-beautiful-dnd": "^13.1.1",
+    "@types/react-dom": "^16.9.5",
     "@types/react-map-gl": "^5.2.10",
     "@types/react-tabs": "^2.3.2",
+    "@types/react-text-mask": "^5.4.6",
     "@types/react-test-renderer": "^16.9.3",
+    "@types/react-transition-group": "^4.4.0",
     "@types/webpack": "^4.41.22",
     "autoprefixer": "^10.3.4",
     "babel-loader": "^8.2.2",
@@ -58,6 +85,7 @@
     "postcss": "^8.3.6",
     "postcss-loader": "^4.3",
     "preact": "^10.5.14",
+    "prettier": "^2.1.0",
     "pretty": "2.0.0",
     "puppeteer": "^10.1.0",
     "react-dom-server": "0.0.5",
@@ -66,6 +94,7 @@
     "regenerator-runtime": "^0.13.7",
     "sass": "1.52.1",
     "sass-loader": "^10.0.3",
+    "semantic-release": "19.0.5",
     "style-loader": "^1.1.3",
     "ts-jest": "^26.4.1",
     "ts-loader": "^8.0.4",
@@ -78,15 +107,6 @@
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.18",
     "@mapbox/mapbox-sdk": "^0.13.0",
-    "@types/jwt-decode": "^2.2.1",
-    "@types/markdown-to-jsx": "^6.11.2",
-    "@types/mdx": "^2.0.1",
-    "@types/node": "^12.12.67",
-    "@types/node-polyglot": "^2.4.1",
-    "@types/react-beautiful-dnd": "^13.1.1",
-    "@types/react-dom": "^16.9.5",
-    "@types/react-text-mask": "^5.4.6",
-    "@types/react-transition-group": "^4.4.0",
     "ag-grid-community": "^26.0.0",
     "ag-grid-react": "^26.0.0",
     "aria-autocomplete": "^1.4.0",
@@ -102,6 +122,7 @@
     "react-dom": "^17.0.2",
     "react-dropzone": "^11.3.2",
     "react-focus-lock": "^2.5.2",
+    "react-hook-form": "^6.15.5",
     "react-map-gl": "^6.1.16",
     "react-media": "^1.10.0",
     "react-remove-scroll": "2.5.4",
@@ -112,5 +133,9 @@
     "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "f697afa34839f27242e03d670cb896b7f3781cbc"
+  "prettier": {
+    "singleQuote": false,
+    "printWidth": 100,
+    "semi": false
+  }
 }

package/src/actions/Button.stories.tsx

@@ -0,0 +1,234 @@
+import * as React from "react"
+import { withKnobs, text, select } from "@storybook/addon-knobs"
+import { BADGES } from "../../.storybook/constants"
+import { Button } from "../actions/Button"
+import {
+  AppearanceBorderType,
+  AppearanceSizeType,
+  AppearanceStyleType,
+} from "../global/AppearanceTypes"
+import ButtonDocumentation from "./Button.docs.mdx"
+import { faArrowsRotate, faCoffee, faTable } from "@fortawesome/free-solid-svg-icons"
+
+export default {
+  title: "Actions/Button 🚩",
+  id: "actions-button",
+  decorators: [(storyFn: any) => <div>{storyFn()}</div>, withKnobs],
+  parameters: {
+    docs: {
+      page: ButtonDocumentation,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+
+const handleClick = (e: React.MouseEvent) => {
+  alert(`You clicked me! Event: ${e.type}`)
+}
+
+const StyleTypeStory = { ...AppearanceStyleType, default: undefined }
+const BorderTypeStory = { ...AppearanceBorderType, default: undefined }
+
+export const standard = () => {
+  const styleSelect = select("Appearance Style", StyleTypeStory, undefined)
+  const borderSelect = select("Appearance Border", BorderTypeStory, undefined)
+  const iconSelect = select(
+    "Icon",
+    {
+      arrowBack: "arrowBack",
+      arrowForward: "arrowForward",
+      default: undefined,
+    },
+    undefined
+  )
+  const iconPlacementSelect = select(
+    "Icon Placement",
+    { left: "left", right: "right", default: undefined },
+    undefined
+  )
+
+  return (
+    <>
+      <Button
+        styleType={styleSelect}
+        border={borderSelect}
+        icon={iconSelect}
+        iconPlacement={iconPlacementSelect}
+        onClick={handleClick}
+      >
+        {text("Label", "Hello Storybook")}
+      </Button>
+
+      <p className="mt-10">Try out different styles with the Knobs below.</p>
+    </>
+  )
+}
+
+export const withFontAwesomeIcon = () => {
+  const iconSelect = select("Icon", ["coffee", "rotate", "table"], "rotate")
+
+  const iconsMap = {
+    coffee: faCoffee,
+    rotate: faArrowsRotate,
+    table: faTable,
+  }
+
+  return (
+    <>
+      <Button
+        icon={iconSelect ? iconsMap[iconSelect] : undefined}
+        iconSize="medium"
+        iconPlacement="left"
+        onClick={handleClick}
+      >
+        FontAwesome is awesome
+      </Button>
+
+      <p className="mt-10">Try out different icons with the Knobs below.</p>
+    </>
+  )
+}
+
+export const small = () => (
+  <Button size={AppearanceSizeType.small} onClick={handleClick}>
+    Small Button
+  </Button>
+)
+
+export const big = () => (
+  <Button size={AppearanceSizeType.big} onClick={handleClick}>
+    Big Button
+  </Button>
+)
+
+export const SmallAndPrimary = () => (
+  <Button
+    size={AppearanceSizeType.small}
+    styleType={AppearanceStyleType.primary}
+    onClick={handleClick}
+  >
+    Small and Primary Button
+  </Button>
+)
+
+export const NormalCase = () => (
+  <Button normalCase={true} onClick={handleClick}>
+    Button (Normal Case)
+  </Button>
+)
+
+export const NormalCaseAndSuccess = () => (
+  <Button normalCase={true} styleType={AppearanceStyleType.success} onClick={handleClick}>
+    Button (Normal Case)
+  </Button>
+)
+
+export const borderless = () => (
+  <Button border={AppearanceBorderType.borderless} onClick={handleClick}>
+    Borderless Button
+  </Button>
+)
+
+export const unstyled = () => (
+  <Button unstyled={true} onClick={handleClick}>
+    Unstyled Button
+  </Button>
+)
+
+export const inlineIcon = () => (
+  <>
+    <Button inlineIcon="left" icon="arrowBack" onClick={() => alert("Click!")}>
+      Go Back
+    </Button>
+    <br />
+    <br />
+    <Button inlineIcon="right" icon="right" onClick={() => alert("Click!")}>
+      Go Forward
+    </Button>
+    <br />
+    <br />
+    <Button inlineIcon="right" icon="arrowForward" onClick={() => alert("Click!")}>
+      Go Forward
+    </Button>
+  </>
+)
+
+export const detroitStyle = () => {
+  const cssVarsOverride = `
+    .button-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);
+    }
+
+    .button-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@700&display=swap"
+        rel="stylesheet"
+      ></link>
+      <div className="button-overrides">
+        <Button styleType={AppearanceStyleType.primary} onClick={handleClick}>
+          "Detroit" Primary Button
+        </Button>{" "}
+        <Button onClick={handleClick}>"Detroit" Outlined Button</Button>
+        <style>{cssVarsOverride}</style>
+      </div>
+
+      <p className="mt-12 font-semibold">Customized using the following variable overrides:</p>
+
+      <pre>
+        {cssVarsOverride.replace(".button-overrides ", ":root ").replace(".button-overrides ", "")}
+      </pre>
+    </>
+  )
+}
+
+export const loading = () => (
+  <Button styleType={AppearanceStyleType.primary} loading={true} onClick={handleClick}>
+    Loading Button
+  </Button>
+)
+
+export const transitions = () => (
+  <Button onClick={handleClick} transition={true}>
+    With Transitions
+  </Button>
+)
+
+// TODO: replace with tailwind markup, if it matters
+export const inaccessible = () => (
+  <button style={{ backgroundColor: "red", color: "darkRed" }}>Inaccessible button</button>
+)
+
+// Example of how you can override axe a11y checks
+inaccessible.parameters = {
+  a11y: {
+    config: {
+      rules: [
+        {
+          id: "color-contrast",
+          enabled: false,
+        },
+      ],
+    },
+  },
+}

package/src/actions/ButtonGroup.stories.tsx

@@ -0,0 +1,85 @@
+import * as React from "react"
+import { BADGES } from "../../.storybook/constants"
+import { AppearanceStyleType } from "../.."
+import Button from "./Button"
+import ButtonGroupDocumentation from "./ButtonGroup.docs.mdx"
+
+import { ButtonGroup, ButtonGroupSpacing } from "./ButtonGroup"
+
+export default {
+  title: "Actions/Button Group 🚩",
+  id: "actions-button-group",
+  parameters: {
+    docs: {
+      page: ButtonGroupDocumentation,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+
+export const twoColumns = () => (
+  <ButtonGroup
+    columns={[
+      <Button>Previous</Button>,
+      <Button styleType={AppearanceStyleType.primary}>Next</Button>,
+    ]}
+    spacing={ButtonGroupSpacing.between}
+  />
+)
+
+export const oneColumnLeft = () => (
+  <ButtonGroup
+    columns={[
+      <>
+        <Button>Previous</Button>
+        <Button styleType={AppearanceStyleType.primary}>Next</Button>
+      </>,
+    ]}
+  />
+)
+
+export const oneColumnRight = () => (
+  <ButtonGroup
+    columns={[
+      <></>,
+      <>
+        <Button>Previous</Button> <Button styleType={AppearanceStyleType.primary}>Next</Button>
+      </>,
+    ]}
+  />
+)
+
+export const oneColumnReversed = () => (
+  <ButtonGroup
+    columns={[
+      <>
+        <Button styleType={AppearanceStyleType.primary}>Next</Button> <Button>Previous</Button>
+      </>,
+    ]}
+    reversed={true}
+  />
+)
+
+export const oneColumnCenter = () => (
+  <ButtonGroup
+    columns={[
+      <>
+        <Button>Previous</Button> <Button styleType={AppearanceStyleType.primary}>Next</Button>
+      </>,
+    ]}
+    spacing={ButtonGroupSpacing.even}
+  />
+)
+
+export const twoColumnsFullwidthMobile = () => (
+  <ButtonGroup
+    columns={[
+      <>
+        <Button>Previous</Button>
+        <Button styleType={AppearanceStyleType.warning}>Another Action</Button>
+      </>,
+      <Button styleType={AppearanceStyleType.primary}>Next</Button>,
+    ]}
+    fullwidthMobile={true}
+  />
+)

package/src/actions/ExpandableContent.stories.tsx

@@ -0,0 +1,15 @@
+import * as React from "react"
+
+import { ExpandableContent } from "./ExpandableContent"
+
+export default {
+  title: "Actions/Expandable Content",
+}
+
+const content = <div className={"mb-2"}>Sample Content</div>
+
+export const standard = () => (
+  <ExpandableContent strings={{ readMore: "read more", readLess: "read less" }}>
+    {content}
+  </ExpandableContent>
+)

package/src/actions/ExpandableText.stories.tsx

@@ -0,0 +1,71 @@
+import * as React from "react"
+
+import { ExpandableText } from "./ExpandableText"
+
+export default {
+  title: "Actions/Expandable Text",
+}
+
+const longText =
+  "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been \
+  the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley \
+  of type and scrambled it to make a type specimen book. It has survived not only five centuries, \
+  but also the leap into electronic typesetting, remaining essentially unchanged. It was \
+  popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, \
+  and more recently with desktop publishing software like Aldus PageMaker including versions of \
+  Lorem Ipsum."
+
+export const standard = () => (
+  <ExpandableText buttonClassName="ml-4" strings={{ readMore: "More", readLess: "Less" }}>
+    {longText}
+  </ExpandableText>
+)
+export const expanded = () => (
+  <ExpandableText
+    buttonClassName="ml-4"
+    strings={{ readMore: "More", readLess: "Less" }}
+    expand={true}
+  >
+    {longText}
+  </ExpandableText>
+)
+export const noExpansion = () => (
+  <ExpandableText buttonClassName="ml-4" strings={{ readMore: "More", readLess: "Less" }}>
+    Short text
+  </ExpandableText>
+)
+export const html = () => (
+  <ExpandableText
+    buttonClassName="ml-4"
+    strings={{ readMore: "More", readLess: "Less" }}
+  >{`Go to <a href="http://www.google.com" target="_blank">Google</a>. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been \
+  the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley \
+  of type and scrambled it to make a type specimen book. It has survived not only five centuries`}</ExpandableText>
+)
+export const disableRawHtml = () => (
+  <ExpandableText
+    buttonClassName="ml-4"
+    strings={{ readMore: "More", readLess: "Less" }}
+    markdownProps={{ disableParsingRawHTML: true }}
+  >{`Go to <a href="http://www.google.com" target="_blank">Google</a>. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been \
+  the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley \
+  of type and scrambled it to make a type specimen book. It has survived not only five centuries`}</ExpandableText>
+)
+
+export const buttonClassName = () => (
+  <ExpandableText
+    strings={{ readMore: "More", readLess: "Less" }}
+    markdownProps={{ disableParsingRawHTML: true }}
+    buttonClassName="ml-1 font-bold"
+  >
+    {
+      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been \
+  the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley \
+  of type and scrambled it to make a type specimen book. It has survived not only five centuries, \
+  but also the leap into electronic typesetting, remaining essentially unchanged. It was \
+  popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, \
+  and more recently with desktop publishing software like Aldus PageMaker including versions of \
+  Lorem Ipsum."
+    }
+  </ExpandableText>
+)