@thecb/components 12.0.0-beta.0 → 12.0.0-beta.2

package/src/components/atoms/card/Card.mdx

@@ -0,0 +1,41 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as CardStories from './Card.stories.js';
+
+<Meta of={CardStories} />
+
+<Title />
+
+The Card component is a generic wrapper to create "cards" of information. A Card can contain a header, title, body text, images, and custom controls. Providing strings for header/title/body text as props results in default styling, but the component is very flexible and can be customized to display virtually any information.
+
+Cards can take these properties to display content:
+
+- headerText (optional)
+- titleText (optional)
+- text (optional)
+- imgSrc (optional)
+- Image (optional)
+- children
+
+In addition to the content props, Cards also offer certain props for controlling the style and display of provided information:
+
+- headerAs (optional, default "h2")
+- headerVariant (optional, default "small")
+- imgHeight (optional, default "150px")
+- imgObjectFit (optional, default "none")
+- imgAltText (required for proper accessibility)
+- titleVariant (optional, default "small")
+- padding (optioonal, default "24px")
+- width (optional min-width, default "276px")
+
+By default, the width prop is the Card's _minimum_ width. The card will scale to match its width to the width of its parent container. If you wish to cap the Card's with, use the extraStyles prop like so:
+
+```
+    <Card extraStyles={`& { max-width: 450px };`} />
+```
+
+When using a Card to display an image there are two options. Either provide a URL string using the imgSrc prop, or provide a React Component using the Image prop. These are mutually exclusive options -- an image provided using the Image prop will only be displayed if imgSrc is undefined.
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>

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

@@ -0,0 +1,360 @@
+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/card/Card.theme.js

@@ -5,9 +5,11 @@ const imageBackgroundColor = INFO_BLUE;
 
 const headerBackgroundColor = STORM_GREY;
 const headerColor = WHITE;
+const contentBackgroundColor = INFO_BLUE;
 
 export const fallbackValues = {
   backgroundColor,
+  contentBackgroundColor,
   imageBackgroundColor,
   headerBackgroundColor,
   headerColor

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

@@ -10,10 +10,16 @@ import Cover from "../layouts/Cover";
 import Paragraph from "../paragraph";
 import Stack from "../layouts/Stack";
 import Title from "../title";
+import IconQuitLarge from "../../atoms/icons/IconQuitLarge";
+import { Cluster } from "../layouts";
 
 export const CardText = ({
+  showQuitLink,
+  onQuitClick,
+  titleAs,
   padding,
   text,
+  textAs = "p",
   titleText,
   titleVariant = "small",
   themeValues
@@ -22,17 +28,39 @@ export const CardText = ({
     <Box padding={padding}>
       <Cover>
         <Stack>
-          {titleText && (
-            <Title
-              as="p"
-              variant={titleVariant}
-              color={themeValues.titleColor}
-              weight={themeValues.titleWeight}
-            >
-              {titleText}
-            </Title>
-          )}
-          <Paragraph color={themeValues.textColor}>{text}</Paragraph>
+          <Cluster
+            justify="space-between"
+            align="center"
+            overflow={true}
+            nowrap
+          >
+            {titleText && (
+              <Title
+                as={titleAs}
+                variant={titleVariant}
+                color={themeValues.titleColor}
+                weight={themeValues.titleWeight}
+              >
+                {titleText}
+              </Title>
+            )}
+            {showQuitLink && (
+              <Box
+                padding="0"
+                onClick={onQuitClick}
+                onKeyDown={e => e.key === "Enter" && onQuitClick()}
+                role="button"
+                tabIndex={0}
+                aria-label={`Close Card: ${titleText}`}
+                extraStyles="cursor: pointer;"
+              >
+                <IconQuitLarge />
+              </Box>
+            )}
+          </Cluster>
+          <Paragraph as={textAs} color={themeValues.textColor}>
+            {text}
+          </Paragraph>
         </Stack>
       </Cover>
     </Box>

package/src/components/atoms/card/index.d.ts

@@ -2,8 +2,10 @@ import React from "react";
 import Expand from "../../../util/expand";
 
 export interface CardProps {
-  text?: string;
+  text?: string | React.ReactNode;
+  textAs?: string;
   titleText?: string;
+  titleAs?: string;
   titleVariant?: string;
   extraStyles?: string;
   imgSrc?: string;
@@ -21,12 +23,17 @@ export interface CardProps {
     | "revert"
     | "revert-layer"
     | "unset";
+  hasContentBackgroundColor?: string;
   headerAs?: string;
   headerText?: string;
   headerVariant?: string;
   borderRadius?: string;
   width?: string;
   padding?: string;
+  showQuitLink?: boolean;
+  onQuitClick?: (
+    event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>
+  ) => void;
 }
 
 export const Card: React.FC<Expand<CardProps> &

package/src/components/atoms/card-type/CardType.js

@@ -0,0 +1,55 @@
+import React from "react";
+import VisaSmallIcon from "../icons/VisaSmallIcon";
+import AmExSmallIcon from "../icons/AmExSmallIcon";
+import DiscoverSmallIcon from "../icons/DiscoverSmallIcon";
+import MasterCardSmallIcon from "../icons/MasterCardSmallIcon";
+import GenericSmallIcon from "../icons/GenericSmallIcon";
+import VisaLargeIcon from "../icons/VisaLargeIcon";
+import AmExLargeIcon from "../icons/AmExLargeIcon";
+import DiscoverLargeIcon from "../icons/DiscoverLargeIcon";
+import MasterCardLargeIcon from "../icons/MasterCardLargeIcon";
+import GenericCardLarge from "../icons/GenericCardLarge";
+
+const cardBrands = {
+  visa: { label: "Visa", small: VisaSmallIcon, large: VisaLargeIcon },
+  master_card: {
+    label: "Mastercard",
+    small: MasterCardSmallIcon,
+    large: MasterCardLargeIcon
+  },
+  discover: {
+    label: "Discover",
+    small: DiscoverSmallIcon,
+    large: DiscoverLargeIcon
+  },
+  amex: {
+    label: "American Express",
+    small: AmExSmallIcon,
+    large: AmExLargeIcon
+  },
+  default: {
+    label: "Credit card",
+    small: GenericSmallIcon,
+    large: GenericCardLarge
+  }
+};
+
+const normalizeType = type => {
+  if (!type) return undefined;
+  const lower = type.toLowerCase();
+  if (lower === "mastercard") return "master_card";
+  return lower;
+};
+
+const CardType = ({ type, size = "small" }) => {
+  const normalizedType = normalizeType(type);
+  const { label, [size]: IconComponent } =
+    cardBrands[normalizedType] || cardBrands.default;
+  return (
+    <span>
+      <IconComponent />
+    </span>
+  );
+};
+
+export default CardType;

package/src/components/atoms/card-type/CardType.stories.js

@@ -0,0 +1,86 @@
+import React from "react";
+import CardType from "./CardType";
+import { Box, Stack, Cluster } from "../layouts";
+
+const meta = {
+  title: "Atoms/CardType",
+  component: CardType,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    type: "visa",
+    size: "small"
+  },
+  argTypes: {
+    type: {
+      description: "The card network type",
+      control: "select",
+      options: ["visa", "master_card", "discover", "amex", "unknown"],
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    size: {
+      description: "The size of the card icon",
+      control: "radio",
+      options: ["small", "large"],
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "small" }
+      }
+    }
+  }
+};
+
+export default meta;
+
+const Label = ({ children }) => (
+  <span style={{ fontFamily: "sans-serif", fontSize: "0.875rem" }}>
+    {children}
+  </span>
+);
+
+export const AllCardTypes = {
+  render: () => {
+    const types = ["visa", "master_card", "discover", "amex"];
+    return (
+      <Box padding="1rem">
+        <Stack childGap="2rem">
+          <Label>Small</Label>
+          <Cluster justify="flex-start" align="center" childGap="1.5rem">
+            {types.map(type => (
+              <Stack key={type} childGap="0.5rem" align="center">
+                <CardType type={type} size="small" />
+                <Label>{type}</Label>
+              </Stack>
+            ))}
+            <Stack childGap="0.5rem" align="center">
+              <CardType size="small" />
+              <Label>generic (fallback)</Label>
+            </Stack>
+          </Cluster>
+          <Label>Large</Label>
+          <Cluster justify="flex-start" align="center" childGap="1.5rem">
+            {types.map(type => (
+              <Stack key={type} childGap="0.5rem" align="center">
+                <CardType type={type} size="large" />
+                <Label>{type}</Label>
+              </Stack>
+            ))}
+            <Stack childGap="0.5rem" align="center">
+              <CardType size="large" />
+              <Label>generic (fallback)</Label>
+            </Stack>
+          </Cluster>
+        </Stack>
+      </Box>
+    );
+  }
+};
+
+export const Interactive = {
+  render: args => <CardType {...args} />
+};

package/src/components/atoms/card-type/index.js

@@ -0,0 +1,3 @@
+import CardType from "./CardType";
+
+export default CardType;