@thecb/components 10.12.3-beta.0 → 10.12.3

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

@@ -1,360 +0,0 @@
-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",
-    hasContentBackgroundColor: undefined,
-    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" }
-      }
-    },
-    hasContentBackgroundColor: {
-      description: "Whether or not the content should have a background color",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    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>
-    ),
-    hasContentBackgroundColor: true,
-    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/checkbox/Checkbox.mdx

@@ -1,15 +0,0 @@
-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

@@ -1,30 +0,0 @@
-import React 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 = () => (
-  <Checkbox
-    variant={select(variantsLabel, variants, defaultValue, groupId)}
-    title={text("title", "Checkbox", "props")}
-    name={text("name", "Checkbox", "props")}
-    checked={boolean("checked", false, "props")}
-    error={boolean("error", false, "props")}
-    disabled={boolean("disabled", false, "props")}
-    focused={boolean("focused", false, "props")}
-    labelledById={text("labelledById", undefined, "props")}
-  />
-);
-
-const story = page({
-  title: "Components|Atoms/Checkbox",
-  Component: Checkbox
-});
-export default story;

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

@@ -1,36 +0,0 @@
-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.

package/src/components/atoms/detail/Detail.mdx

@@ -1,32 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as DetailStories from './Detail.stories.js';
-
-<Meta of={DetailStories} />
-
-<Title />
-
-
-Detail component is a responsive text component (Block level text elements which are smaller than [Title](?path=/docs/atoms-title--docs) elements).
-
-Size is decoupled from tag. Comes with four variants - `large`, `regular`, `small`, `extraSmall`:
-
-- Large variant results in text that is `1.125rem/1.1428rem` (`18px` desktop, `16px` mobile)
-- Regular variant results in text that is `1rem` (`16px` desktop, `14px` mobile)
-- Small variant reuslts in text that is `0.875rem/0.8571rem` (`14px` desktop, `12px` mobile)
-- ExtraSmall variant results in text that is `0.75rem/0.7142rem` (`12px` desktop, `10px` mobile)
-
-If you need a larger font size, use the [Title atom](?path=/docs/atoms-title--docs), which has larger variants
-
-Use the "as" prop to specify element type, can use any of: `h1/h2/h3/h4/h5/h6/p`. If you need an inline text element (span), use the `<Text />` atom. The "as" value should be dictated by the structure of your page, not what font-size you want.
-
-Title / Detail both use slightly different desktop/mobile scales. (Mobile scale is different to allow for design-friendly px values). Both atoms detect the presence of a mobile device on their own and apply the corresponding scale.
-
-Mobile breakpoint value is specified in `Detail.theme.js`
-
-If you want to disable mobile text scales (use the same rem scale for desktop/mobile), then use a theme in FCS to set all of the variants to use the same rem sizes. FCS themes override fallbacks defined in the .theme file
-
-
-<Story />
-
-<Controls />

package/src/components/atoms/detail/Detail.stories.js

@@ -1,156 +0,0 @@
-import Detail from "./Detail";
-import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
-import { FIREFLY_GREY } from "../../../constants/colors";
-import { Box } from "../layouts";
-
-const meta = {
-  title: "Atoms/Detail",
-  component: Detail,
-  parameters: {
-    layout: "centered",
-    controls: { expanded: true }
-  },
-  tags: ["!autodocs"],
-  args: {
-    weight: FONT_WEIGHT_REGULAR,
-    color: FIREFLY_GREY,
-    margin: 0,
-    textAlign: undefined,
-    extraStyles: "",
-    className: undefined,
-    variant: "regular",
-    as: "p",
-    dataQa: undefined,
-    children: "Detail Component!"
-  },
-  argTypes: {
-    weight: {
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: FONT_WEIGHT_REGULAR }
-      }
-    },
-    color: {
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: FIREFLY_GREY }
-      }
-    },
-    margin: {
-      control: { type: "text" },
-      table: {
-        type: { summary: "number | string" },
-        defaultValue: { summary: 0 }
-      }
-    },
-    textAlign: {
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    extraStyles: {
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    className: {
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    variant: {
-      description: "`large` `regular` `small` `extraSmall`",
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "large" }
-      }
-    },
-    as: {
-      description: "`h1` `h2` `h3` `h4` `h5` `h6` `p`",
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "h1" }
-      }
-    },
-    dataQa: {
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    children: {
-      control: { type: "text" },
-      table: {
-        type: { summary: "string | element | array" },
-        defaultValue: { summary: undefined }
-      }
-    }
-  }
-};
-
-export default meta;
-
-export const Basic = {};
-
-export const CustomWeight = {
-  args: {
-    weight: "700"
-  }
-};
-
-export const CustomColor = {
-  args: {
-    color: "green"
-  }
-};
-
-export const CustomMargin = {
-  args: {
-    margin: "2rem"
-  },
-  render: args => (
-    <Box border={`1px dotted ${FIREFLY_GREY}`} padding="0">
-      <Detail {...args} />
-    </Box>
-  )
-};
-
-export const TextAlign = {
-  args: {
-    textAlign: "right"
-  },
-  render: args => (
-    <Box border={`1px dotted ${FIREFLY_GREY}`} padding="0" minWidth="400px">
-      <Detail {...args} />
-    </Box>
-  )
-};
-
-export const LargeVariant = {
-  args: {
-    variant: "large"
-  }
-};
-
-export const SmallVariant = {
-  args: {
-    variant: "small"
-  }
-};
-
-export const ExtraSmallVariant = {
-  args: {
-    variant: "extraSmall"
-  }
-};

package/src/components/atoms/display-box/DisplayBox.mdx

@@ -1,11 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as DisplayBoxStories from './DisplayBox.stories.js';
-
-<Meta of={DisplayBoxStories} />
-
-<Title />
-
-The DisplayBox uses nested Box components with hardcoded padding and border radius values to create consistent and themeable "boxes" that wrap children with a box shadow. DisplayBox supports an "error" state with a red border via the `showErrors` prop.
-
-<Story />

package/src/components/atoms/display-card/DisplayCard.mdx

@@ -1,13 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as DisplayCardStories from './DisplayCard.stories.js';
-
-<Meta of={DisplayCardStories} />
-
-<Title />
-
-The DisplayCard component offers a consistent box style for text content. A link, button, or "help" text is also supported, which will be displayed with the text in a flexbox with any extra space rendered in-between. DisplayCard also supports an optional tooltip with the Popover molecule, and a title.
-
-Note: DisplyCard is _not_ themeable or styleable except for the Popover box.
-
-<Story />