@thecb/components 10.12.6-beta.0 → 11.0.0-beta.0

package/src/components/atoms/card/Card.stories.js

@@ -0,0 +1,351 @@
+import React from "react";
+import { MANATEE_GREY } from "../../../constants/colors";
+import { Box, Stack, Cluster } from "../layouts";
+import Card from "./Card";
+import ButtonWithAction from "../button-with-action/ButtonWithAction";
+import ButtonWithLink from "../button-with-link/ButtonWithLink";
+import Badge from "../badge/Badge";
+import AutopayOnIcon from "../icons/AutopayOnIcon";
+import FormattedCreditCard from "../formatted-credit-card/FormattedCreditCard";
+import FormattedAddress from "../formatted-address/FormattedAddress";
+import Detail from "../detail/Detail";
+import WalletBannerIcon from "../icons/WalletBannerIcon";
+import { fn } from "@storybook/test";
+import { noop } from "../../../util/general";
+
+const meta = {
+  title: "Atoms/Card",
+  component: Card,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    borderRadius: "4px",
+    headerAs: "h2",
+    headerText: "Register a Dog",
+    headerVariant: "small",
+    imgSrc: undefined,
+    Image: undefined,
+    imgHeight: "150px",
+    imgObjectFit: "none",
+    imgAltText: undefined,
+    onQuitClick: fn(),
+    padding: "24px",
+    showQuitLink: undefined,
+    text: undefined,
+    titleAs: "h2",
+    titleText: undefined,
+    titleVariant: "small",
+    width: "276px",
+    extraStyles: undefined,
+    children: undefined
+  },
+  argTypes: {
+    borderRadius: {
+      description: "The radius value for the Card's border",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "4px" }
+      }
+    },
+    headerAs: {
+      description: "The HTML element to use for the Card's header",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "h2" }
+      }
+    },
+    headerText: {
+      description: "The text used in the Card's header",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    headerVariant: {
+      description:
+        "The variant used for the embedded <Title /> component. Independent of specified HTML element, sets font size and line height.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "small" }
+      }
+    },
+    imgSrc: {
+      description: "URL to use for Card image",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    Image: {
+      description: "React Image component to use for Card's image",
+      table: {
+        type: { summary: "React Component" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    imgObjectFit: {
+      description: "CSS value for the object-fit property",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "none" }
+      }
+    },
+    imgAltText: {
+      description: "Alt text to include with image",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    padding: {
+      descripton: "Card's inner padding value",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "24px" }
+      }
+    },
+    textAs: {
+      description:
+        "The HTML element to use for the Card's <Paragraph /> Component. This may need to be something other than 'p' when text is being rendered as children.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "p" }
+      }
+    },
+    text: {
+      description: "Body text of the card",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    titleText: {
+      description: "Text for the title of the card",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    titleAs: {
+      description: "The HTML element to use for the Card's title",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "h2" }
+      }
+    },
+    titleVariant: {
+      description:
+        "Variant for the <Title /> component used in the Card's title text",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "small" }
+      }
+    },
+    width: {
+      description: "The width of the Card in px",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "276px" }
+      }
+    },
+    extraStyles: {
+      description: "Supplemental CSS",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    children: {
+      description:
+        "Custom react components to display below the Card's text like buttons, links, or tags",
+      table: {
+        type: { summary: "React Component" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    onQuitClick: {
+      description:
+        "Function called when the quit/dismiss card button is used. The consuming application will handle the render logic based on this.",
+      control: { type: "object" },
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: noop }
+      }
+    },
+    showQuitLink: {
+      description: "Whether or not the Card is dismissable",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const BasicCard = {
+  args: {
+    titleText: "Pay Dog Registration Fee",
+    text:
+      "Cityville requires new dog owners to register their pet with Cityville Animal Control. The fee for a new dog is $150, payable by credit or debit card.",
+    extraStyles: `& { max-width: 450px }; & > div > div > div { flex-direction: column; margin: 0;};`
+  }
+};
+
+export const BasicCardWithChildren = {
+  args: {
+    titleText: "Pay Dog Registration Fee",
+    text:
+      "Cityville requires new dog owners to register their pet with Cityville Animal Control. The fee for a new dog is $150, payable by credit or debit card.",
+    children: (
+      <Box
+        padding="16px 24px 16px 16px"
+        border={`1px solid ${MANATEE_GREY}`}
+        borderWidthOverride="1px 0 0 0"
+      >
+        <Cluster justify="space-between" align="center">
+          <ButtonWithAction text="Register" variant="secondary" />
+          <Badge variant="info" label="Animal Control" id="basic-card-badge" />
+        </Cluster>
+      </Box>
+    ),
+    extraStyles: `& { max-width: 450px }; & > div > div > div { flex-direction: column; margin: 0;}; #basic-card-badge { align-self: unset; }`
+  }
+};
+
+export const BasicImageCard = {
+  args: {
+    headerText: "Join Cityville Wallet",
+    titleText: "Sign up for Cityville Wallet Today!",
+    text:
+      "Cityville Wallet makes it convenient to save your payment methods, billing addresses, and contact information. Use Cityville Wallet to enable one-click payment of all of your accounts today!",
+    Image: () => <WalletBannerIcon />,
+    imgAltText: "Cityville Wallet icon",
+    padding: "16px",
+    width: "800px",
+    extraStyles: `& div { margin: 0;}; & { max-width: 800px; }`
+  }
+};
+
+export const ImageCard = {
+  args: {
+    headerText: "Purchase Transit Card",
+    imgSrc:
+      "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Chicago_Transit_Authority_Logo.svg/300px-Chicago_Transit_Authority_Logo.svg.png",
+    imgObjectFit: "contain",
+    imgAltText: "Chicago Transit Authority Portal",
+    padding: "16px",
+    children: (
+      <Box
+        padding="16px 24px 16px 16px"
+        border={`1px solid ${MANATEE_GREY}`}
+        borderWidthOverride="1px 0 0 0"
+      >
+        <Cluster justify="space-between" align="center">
+          <ButtonWithAction text="Buy Card" variant="secondary" />
+          <Badge id="image-card-badge" variant="info" label="Transportation" />
+        </Cluster>
+      </Box>
+    ),
+    width: "375px",
+    extraStyles: `& { max-width: 375px }; & > div > div > div { flex-direction: column; margin: 0;}; #image-card-badge { align-self: unset; }`
+  }
+};
+
+const cardExpireMonth = new Date().getMonth() + 2;
+const cardExpireYear = new Date().getFullYear();
+const formattedMonth = cardExpireMonth === 13 ? 1 : cardExpireMonth;
+const formattedYear =
+  cardExpireMonth === 13 ? cardExpireYear + 1 : cardExpireYear;
+
+export const CustomContentCard = {
+  args: {
+    headerText: undefined,
+    children: (
+      <Box padding="0">
+        <Stack childGap="0">
+          <Box
+            padding="1rem"
+            border={`1px solid ${MANATEE_GREY}`}
+            borderWidthOverride="0 0 1px 0"
+          >
+            <Cluster justify="flext-start" align="center" childGap="1rem">
+              <Badge
+                variant="success"
+                label="Autopay On"
+                Icon={() => <AutopayOnIcon />}
+              />
+              <Badge variant="warn" label="Expiring Soon" />
+            </Cluster>
+          </Box>
+          <Box
+            padding="1rem"
+            border={`1px solid ${MANATEE_GREY}`}
+            borderWidthOverride="0 0 1px 0"
+          >
+            <Stack childGap="1rem">
+              <Detail as="h3" weight="600">
+                Payment Method:
+              </Detail>
+              <FormattedCreditCard
+                expireDate={`${formattedMonth}/${formattedYear}`}
+                expirationStatus="EXPIRING SOON"
+                lastFour="9872"
+              />
+            </Stack>
+          </Box>
+          <Box padding="1rem">
+            <Stack childGap="1rem">
+              <Detail as="h3" weight="600">
+                Billing Address:
+              </Detail>
+              <FormattedAddress
+                street1="1600 Pensylvania Avenue NW"
+                street2="Floor 2"
+                city="Washington"
+                stateProvince="D.C."
+                zip="20500"
+              />
+            </Stack>
+          </Box>
+        </Stack>
+      </Box>
+    )
+  }
+};
+
+export const DismissableCard = {
+  args: {
+    children: (
+      <Box padding="0 24px 24px">
+        <ButtonWithLink
+          extraStyles="border-radius: 4px; margin: 0; flex-basis: 100%; flex-grow: 1;"
+          url="your-destination-page"
+          text="Start here by searching for your ambulance bill"
+          newTab={true}
+        />
+      </Box>
+    ),
+    headerText: undefined,
+    showQuitLink: true,
+    titleAs: "h2",
+    titleText: "Looking for your ambulance bill?",
+    text: (
+      <>
+        <ol style={{ margin: 0, paddingLeft: 24 }}>
+          <li>Click the button below</li>
+          <li>
+            Search using your ambulance run number and click “Link Account”
+          </li>
+          <li>
+            Your ambulance bill will be displayed on your Active Accounts page
+          </li>
+        </ol>
+      </>
+    ),
+    textAs: "div"
+  }
+};

package/src/components/atoms/card/CardText.js

@@ -28,7 +28,12 @@ export const CardText = ({
     <Box padding={padding}>
       <Cover>
         <Stack>
-          <Cluster justify="space-between" align="center" overflow={true}>
+          <Cluster
+            justify="space-between"
+            align="center"
+            overflow={true}
+            nowrap
+          >
             {titleText && (
               <Title
                 as={titleAs}

package/src/components/atoms/checkbox/Checkbox.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as CheckboxStories from './Checkbox.stories.js';
+
+<Meta of={CheckboxStories} />
+
+<Title />
+
+The Checkbox component uses a visually hidden `input` element with the type `checkbox` to create a styleable and themeable checkbox that is still accessible. The visual checkbox, hidden checkbox, and optional text (set with the `title` prop) are wrapped in a `label` element to allow mouse and keyboard interaction on both the checkbox and the text.
+
+Checkbox is a "controlled" component, it's checked and error state should be handled by the consuming app and passed down to it via the `checked` and `error` props.
+
+When the `error` prop is set to `true`, the component will style the checkbox with the supplied theme's error styles, set `aria-invalid` on the hidden input to `true`, and set `aria-describedby` to `${props.name}-error-message`, allowing you to match the error state to a message in an element with matching `id`.
+
+Note: pressing the `enter` key when the component has focus currently triggers the `onChange` callback function. This does not match standard `<input type="checkbox" />` elements which are toggled with the `spacebar`.

package/src/components/atoms/checkbox/Checkbox.oldstories.js

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import { text, select, boolean } from "@storybook/addon-knobs";
+import Checkbox from "./Checkbox";
+import page from "../../../../.storybook/page";
+
+const variantsLabel = "variant";
+const variants = {
+  default: "default"
+};
+const defaultValue = "default";
+const groupId = "props";
+
+export const checkbox = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <Checkbox
+      variant={select(variantsLabel, variants, defaultValue, groupId)}
+      title={text("title", "Checkbox", "props")}
+      name={text("name", "Checkbox", "props")}
+      checked={checked}
+      error={boolean("error", false, "props")}
+      disabled={boolean("disabled", false, "props")}
+      focused={boolean("focused", false, "props")}
+      labelledById={text("labelledById", undefined, "props")}
+      onChange={() => setChecked(!checked)}
+    />
+  );
+};
+
+const story = page({
+  title: "Components|Atoms/Checkbox",
+  Component: Checkbox
+});
+export default story;

package/src/components/atoms/checkbox/Checkbox.stories.js

@@ -1,34 +1,149 @@
-import React, { useState } from "react";
-import { text, select, boolean } from "@storybook/addon-knobs";
 import Checkbox from "./Checkbox";
-import page from "../../../../.storybook/page";
+import React, { useState } from "react";
 
-const variantsLabel = "variant";
-const variants = {
-  default: "default"
+const meta = {
+  title: "Atoms/Checkbox",
+  component: Checkbox,
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  tags: ["!autodocs"],
+  args: {
+    title: undefined,
+    name: "test",
+    checked: false,
+    onChange: undefined,
+    disabled: false,
+    hidden: false,
+    error: false,
+    checkboxMargin: "0 16px 0 0",
+    extraStyles: undefined,
+    textExtraStyles: undefined,
+    labelledById: undefined,
+    dataQa: null
+  },
+  argTypes: {
+    checkboxMargin: {
+      table: {
+        description: "Sets margin value on the components wrapping div",
+        type: { summary: "string" },
+        defaultValue: { summary: "0 16px 0 0" }
+      }
+    },
+    textExtraStyles: {
+      table: {
+        description: "Styles for the text defined in the `title` prop",
+        type: { summary: "string" }
+      }
+    },
+    onChange: {
+      table: {
+        type: { summary: "function" }
+      }
+    },
+    dataQa: {
+      table: {
+        type: { summary: "string" }
+      }
+    },
+    labelledById: {
+      table: {
+        type: { summary: "string" }
+      }
+    },
+    extraStyles: {
+      table: {
+        type: { summary: "string" }
+      }
+    },
+    error: {
+      table: {
+        type: { summary: "boolean" }
+      }
+    },
+    title: {
+      table: {
+        type: { summary: "string" }
+      }
+    },
+    name: {
+      table: {
+        type: { summary: "string" }
+      }
+    }
+  }
 };
-const defaultValue = "default";
-const groupId = "props";
 
-export const checkbox = () => {
+const CheckboxWithHooks = props => {
   const [checked, setChecked] = useState(false);
+
+  const onChange = () => setChecked(!checked);
+
+  return <Checkbox {...props} onChange={onChange} checked={checked} />;
+};
+
+const RequiredCheckbox = props => {
+  const [checked, setChecked] = useState(false);
+
+  const onChange = () => setChecked(!checked);
+
   return (
-    <Checkbox
-      variant={select(variantsLabel, variants, defaultValue, groupId)}
-      title={text("title", "Checkbox", "props")}
-      name={text("name", "Checkbox", "props")}
-      checked={checked}
-      error={boolean("error", false, "props")}
-      disabled={boolean("disabled", false, "props")}
-      focused={boolean("focused", false, "props")}
-      labelledById={text("labelledById", undefined, "props")}
-      onChange={() => setChecked(!checked)}
-    />
+    <div>
+      <Checkbox
+        {...props}
+        onChange={onChange}
+        checked={checked}
+        error={!checked}
+      />
+      {!checked && (
+        <div id={`${props.name}-error-message`}>You must check this!</div>
+      )}
+    </div>
   );
 };
 
-const story = page({
-  title: "Components|Atoms/Checkbox",
-  Component: Checkbox
-});
-export default story;
+export default meta;
+
+export const Basic = args => <CheckboxWithHooks {...args} />;
+
+export const Title = {
+  args: {
+    title: "My Checkbox"
+  },
+  render: args => <CheckboxWithHooks {...args} />
+};
+
+export const ExtraStyles = {
+  args: {
+    title: "My Stylish Checkbox",
+    textExtraStyles: `outline: 2px dashed red;`
+  },
+  render: args => <CheckboxWithHooks {...args} />
+};
+
+export const Disabled = {
+  args: {
+    disabled: true
+  },
+  render: args => <CheckboxWithHooks {...args} />
+};
+
+export const CheckboxMargin = {
+  args: {
+    checkboxMargin: "0",
+    title: "Custom Margin"
+  },
+  render: args => <CheckboxWithHooks {...args} />
+};
+
+export const Required = {
+  render: args => <RequiredCheckbox {...args} />
+};
+
+export const Hidden = {
+  args: {
+    hidden: true
+  },
+  render: args => <CheckboxWithHooks {...args} />
+};

package/src/components/atoms/country-dropdown/CountryDropdown.mdx

@@ -0,0 +1,36 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as CountryDropdownStories from './CountryDropdown.stories.js';
+
+<Meta of={CountryDropdownStories} />
+
+<Title />
+
+CountryDropdown is a wrapper for [FormSelect](?path=/docs/atoms-formselect--docs) that adds a pre-defined array of countries for options. The country list cannot be modified.
+
+## Form Integration
+
+FormInput requires a `field` and `fieldActions` prop. Both are objects that _can_ be generated with [redux-freeform](https://github.com/CityBaseInc/redux-freeform). Below are example values for each prop with the minimum properties needed for a CountryDropdown component.
+
+### field
+
+```
+{
+  "dirty": false,
+  "rawValue": "",
+  "errors": [
+    "error/REQUIRED"
+  ],
+  "hasErrors": true
+}
+```
+
+### fieldActions
+
+```
+{
+  set: (value) => {...}
+}
+```
+
+`fieldActions.set()` is called when an option is selected in the underlying Dropdown component, unless a function is defined for the `onChange` prop.