@thecb/components 10.12.6 → 11.0.0-beta.0

package/src/components/atoms/icons/Icons.stories.js

@@ -0,0 +1,325 @@
+import * as icons from "./index";
+import styled from "styled-components";
+import { MANATEE_GREY } from "../../../constants/colors";
+
+const meta = {
+  title: "Atoms/Icons",
+  component: icons.AccountsIcon,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    ariaLabel: undefined,
+    color: undefined,
+    colorOverride: undefined,
+    fill: undefined,
+    height: undefined,
+    iconFill: undefined,
+    iconHeight: undefined,
+    iconIndex: undefined,
+    iconWidth: undefined,
+    labelledBy: undefined,
+    linkColor: undefined,
+    strokeWidth: undefined,
+    text: undefined,
+    title: undefined,
+    titleID: undefined
+  },
+  argTypes: {
+    ariaLabel: {
+      description: "Sets the `aria-label` value on the `PencilIcon` icon",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "Edit" }
+      }
+    },
+    color: {
+      description:
+        "Sets a color (usually for a `fill` attribute) on one or many elements within a component. The default value for this prop varies by component. Used in the following componenets: `ArrowDownCircleIconSmall`, `ArrowLeftCircleIconMedium`, `ArrowLeftCircleIconSmall`, `ArrowRightCircleIconSmall`, `ArrowUpCircleIconSmall`, `AutopayOnIcon`, `ChargebackIconMedium`, `ChargebackIconSmall`, `ChargebackReversalIconMedium`, `ChargebackReversalIconSmall`, `RefundIconMedium`, `RefundIconSmall`, `XCircleIconMedium`, `XCircleIconSmall`, `AutopayIcon`, `ArrowRightIcon`, `PlusCircleIcon`, `WarningIconXS`, `EmptyCartIconV2`",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: `varies` }
+      }
+    },
+    colorOverride: {
+      description:
+        "Overrides the theme values for some element's fill attribute in the `WalletIconSmall` component",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    fill: {
+      description:
+        "Sets the fill attribute in the following components: `AutopayIcon`, `IconQuitLarge`, `PendingIcon`",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: `varies` }
+      }
+    },
+    height: {
+      description:
+        "Sets the `height` value in the `style` attribute for the `EmptyCartIconV2` component",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "auto" }
+      }
+    },
+    iconFill: {
+      description:
+        "Sets the fill attribute in the following components: `ChevronIcon`, `TrashIcon`, `TrashIconV2`, `CloseIcon`, `MultiCartIcon`",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: `varies` }
+      }
+    },
+    iconHeight: {
+      description:
+        "Sets the height of the `CloseIcon` and `MultiCartIcon` icons",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: `varies` }
+      }
+    },
+    iconIndex: {
+      description:
+        "Used to create a unique id for a variety of elements in the following components: `BankIconLarge`, `SuccessfulIconMedium`, `SuccessfulIconSmall`, `WarningIconXS`, `XCircleIconSmall`, `XCircleIconMedium`, `RefundIconSmall`, `RefundIconMedium`, `ChargebackReversalIconSmall`, `ChargebackReversalIconMedium`, `ChargebackIconSmall`, `ChargebackIconMedium`, `AutopayOnIcon`, `ArrowUpCircleIconSmall`, `ArrowRightCircleIconSmall`, `ArrowLeftCircleIconSmall`, `ArrowLeftCircleIconMedium`, `ArrowDownCircleIconSmall`, `WalletIconSmall`, `FindIconSmall`",
+      table: {
+        type: { summary: "string | number" },
+        defaultValue: { summary: 0 }
+      }
+    },
+    iconWidth: {
+      description:
+        "Sets the width of the `CloseIcon` and `MultiCartIcon` icons",
+      table: {
+        type: { summary: "string | number" },
+        defaultValue: { summary: `varies` }
+      }
+    },
+    labelledBy: {
+      description:
+        "Sets the `aria-labelledby` value in the following components: `ArrowRightIcon`, `PlusCircleIcon`",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    linkColor: {
+      description:
+        "Sets the fill attribute on multiple elements in the `ExternalLinkIcon` component",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    strokeWidth: {
+      description: "Set the stroke width on the circle in `IconAdd`",
+      table: {
+        type: { summary: "string | number" },
+        defaultValue: { summary: 1 }
+      }
+    },
+    text: {
+      description:
+        "Used to create a unique id for a `<mask />` element in `ExternalLinkIcon`",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    title: {
+      description:
+        "Sets the text of the `<title />` element in the `WarningIconXS` component",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    titleID: {
+      description:
+        "Used to build a unique id for the `<title />` element in the `WarningIconXS` component, which is matched with the `aria-labelledby` value",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "warning-icon-title" }
+      }
+    }
+  }
+};
+
+const StyledIconLIst = styled.ul`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 2em;
+  list-style: none;
+
+  li {
+    padding-bottom: 2em;
+    text-align: center;
+    width: 100%;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid ${MANATEE_GREY};
+    }
+  }
+
+  .icon-name {
+    margin-top: 1em;
+    font-family: monospace
+    font-size: 2em;
+  }
+
+  // for the IconAdd component
+  .fill { fill: ${MANATEE_GREY} }
+  .stroke { stroke: ${MANATEE_GREY} }
+`;
+
+const IconList = ({ iconNames }) => (
+  <StyledIconLIst>
+    {iconNames.map(icon => (
+      <li key={icon} style={{ textAlign: "center", paddingBottom: "2em" }}>
+        {icons[icon]({ linkColor: MANATEE_GREY })}
+        <div className="icon-name">{icon}</div>
+      </li>
+    ))}
+  </StyledIconLIst>
+);
+
+const genericIcons = [
+  "DuplicateIcon",
+  "CalendarIcon",
+  "PendingIcon",
+  "StatusUnknownIcon",
+  "FailedIcon",
+  "ErroredIcon",
+  "SuccessfulIcon",
+  "SuccessfulIconMedium",
+  "SuccessfulIconSmall",
+  "VoidedIcon",
+  "XCircleIconMedium",
+  "XCircleIconSmall",
+  "ProfileIconSmall",
+  "SearchIcon",
+  "FindIconSmall",
+  "PencilIcon",
+  "AccountsIconSmall",
+  "TrashIcon",
+  "TrashIconV2",
+  "SettingsIconSmall",
+  "ShoppingCartIcon",
+  "PlusCircleIcon",
+  "IconAdd",
+  "ExternalLinkIcon",
+  "AutopayIcon",
+  "AutopayOnIcon",
+  "CloseIcon",
+  "IconQuitLarge",
+  "WarningIconXS",
+  "KebabMenuIcon",
+  "MultiCartIcon",
+  "EmptyCartIconV2",
+  "CheckmarkIcon"
+];
+
+const arrowIcons = [
+  "AchReturnIcon",
+  "RejectedIcon",
+  "RejectedVelocityIcon",
+  "ArrowDownCircleIconSmall",
+  "ArrowLeftCircleIconMedium",
+  "ArrowLeftCircleIconSmall",
+  "ArrowRightCircleIconSmall",
+  "ArrowUpCircleIconSmall",
+  "ArrowRightIcon",
+  "ChevronIcon",
+  "CarrotIcon"
+];
+
+const paymentIcons = [
+  "BankIcon",
+  "BankIconLarge",
+  "CashIcon",
+  "ChargebackIcon",
+  "ChargebackIconMedium",
+  "ChargebackIconSmall",
+  "ChargebackReversalIcon",
+  "ChargebackReversalIconMedium",
+  "ChargebackReversalIconSmall",
+  "CheckIcon",
+  "GenericCard",
+  "GenericCardLarge",
+  "PaymentMethodAddIcon",
+  "PaymentMethodIcon",
+  "PaymentsIconSmall",
+  "RefundIcon",
+  "RefundIconMedium",
+  "RefundIconSmall"
+];
+
+const checkIcons = ["RoutingNumberImage", "AccountNumberImage"];
+
+const accountIcons = [
+  "AccountsAddIcon",
+  "AccountsIcon",
+  "DisabledAccountsAddIcon",
+  "DisabledPaymentMethodsAddIcon",
+  "ForgotPasswordIcon",
+  "GoToEmailIcon",
+  "ResetPasswordIcon",
+  "VerifiedEmailIcon"
+];
+
+const mascotIcons = [
+  "CustomerSearchIcon",
+  "EmptyCartIcon",
+  "GenericErrorIcon",
+  "NoCustomerResultsIcon",
+  "NoPaymentResultsIcon",
+  "NotFoundIcon",
+  "PaymentSearchIcon",
+  "PeriscopeFailedIcon",
+  "ProfileIcon",
+  "TimeoutImage",
+  "WalletIcon",
+  "GuidedCheckoutImage",
+  "KioskImage",
+  "PointOfSaleImage",
+  "RevenueManagementImage",
+  "ProfileImage",
+  "StandardCheckoutImage",
+  "WalletBannerIcon"
+];
+
+export const GenericIcons = () => <IconList iconNames={genericIcons} />;
+
+export const ArrowIcons = () => <IconList iconNames={arrowIcons} />;
+
+export const PaymentIcons = () => <IconList iconNames={paymentIcons} />;
+
+export const CheckIcons = () => <IconList iconNames={checkIcons} />;
+
+export const AccountIcons = () => <IconList iconNames={accountIcons} />;
+
+export const MascotIcons = () => <IconList iconNames={mascotIcons} />;
+
+export const OtherIcons = {
+  render: () => {
+    const groupedIcons = [
+      ...checkIcons,
+      ...mascotIcons,
+      ...arrowIcons,
+      ...genericIcons,
+      ...accountIcons,
+      ...paymentIcons
+    ];
+    const otherIcons = Object.keys(icons).filter(
+      icon => !groupedIcons.includes(icon)
+    );
+
+    return <IconList iconNames={otherIcons} />;
+  }
+};
+
+export default meta;

package/src/components/atoms/labeled-amount/LabeledAmount.mdx

@@ -0,0 +1,23 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as LabeledAmountStories from './LabeledAmount.stories.js';
+
+<Meta of={LabeledAmountStories} />
+
+<Title />
+
+The LabeledAmount component is a component that combines a text label with a formatted money string, for use in checkout experiences (payment details, receipts, etc). The wrapping container for the text elements is styled using flexbox, by default using the  `space-between` value for the `justify-content` property. This can be changed by passing an override using the `extraStyles` prop like so:
+
+```
+ <LabeledAmount extraStyles={`justify-content: space-around`} />
+```
+
+Currently, there are two versions of this component: LabeledAmountV1 and LabeledAmountV2. While both versions are in active use in the codebase, LabeledAmountV1 is deprecated and should not be used in new code. The difference between the two is that LabeledAmountV2 has been updated to decouple the component's rendered HTML element from its theme size variant. This allows for arbitrary HTML elements (any heading size, paragraph, span) to be used as the underlying element regardless of the component size specified in the design, preserving proper HTML semantics and accessibility.
+
+LabeledAmountV2 takes the following props:
+
+<Controls />
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>

package/src/components/atoms/labeled-amount/LabeledAmount.stories.js

@@ -1,42 +1,118 @@
-import React from "react";
-import { text, select } from "@storybook/addon-knobs";
 import LabeledAmount from "./LabeledAmount";
-import page from "../../../../.storybook/page";
+import { Box } from "../layouts";
 
-const variantsLabel = "variant";
-const variants = {
-  default: "default",
-  p: "p",
-  pL: "pL",
-  h6: "h6",
-  small: "small",
-  regular: "regular",
-  large: "large",
-  None: undefined
+const meta = {
+  title: "Atoms/LabeledAmount",
+  component: LabeledAmount,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    version: "v2",
+    variant: "regular",
+    label: "Subtotal:",
+    amount: "$102.55",
+    as: "h3",
+    extraStyles: undefined
+  },
+  argTypes: {
+    version: {
+      description:
+        "The verison (v1 or v2) of the LabeledAmount component to use",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "v1" }
+      }
+    },
+    variant: {
+      description:
+        "The variant (regular, extraSmall, small, large) of the LabeledAmount component to use",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "regular" }
+      }
+    },
+    label: {
+      description: "The label to place before the amount",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    amount: {
+      description: "The formatted amount value to display, as a money string",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    as: {
+      description:
+        "The HTML element to render the component as, generally h or p element",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "p" }
+      }
+    },
+    extraStyles: {
+      description: "Extra styles used for wrapping container",
+      table: {
+        type: { summary: "string" },
+        defaultvalue: { summary: undefined }
+      }
+    }
+  }
 };
-const defaultValue = "default";
 
-const versionsLabel = "version";
-const versions = {
-  v1: "v1",
-  v2: "v2"
+export default meta;
+
+export const LabeledAmountDefault = {
+  render: args => (
+    <Box minWidth="300px" padding="0">
+      <LabeledAmount {...args} />
+    </Box>
+  )
 };
-const defaultVersion = "v1";
 
-const groupId = "props";
+export const LabeledAmountHeading = {
+  render: args => (
+    <Box minWidth="450px" padding="0">
+      <LabeledAmount {...args} />
+    </Box>
+  ),
+  args: {
+    as: "h3",
+    label: "Total paid:",
+    amount: "$626.93",
+    variant: "large"
+  }
+};
 
-export const labeledAmount = () => (
-  <LabeledAmount
-    variant={select(variantsLabel, variants, defaultValue, groupId)}
-    as={text("as", "p", groupId)}
-    label={text("label", "Amount", groupId)}
-    amount={text("amount", "$1.23", groupId)}
-    version={select(versionsLabel, versions, defaultVersion, groupId)}
-  />
-);
+export const ExtraSmallLabeledAmount = {
+  render: args => (
+    <Box minWidth="150px" padding="0">
+      <LabeledAmount {...args} />
+    </Box>
+  ),
+  args: {
+    as: "h6",
+    label: "Fees:",
+    amount: "$2.50",
+    variant: "extraSmall"
+  }
+};
 
-const story = page({
-  title: "Components|Atoms/LabeledAmount",
-  Component: LabeledAmount
-});
-export default story;
+export const SmallLabeledAmount = {
+  render: args => (
+    <Box minWidth="150px" padding="0">
+      <LabeledAmount {...args} />
+    </Box>
+  ),
+  args: {
+    as: "h4",
+    label: "Tax:",
+    amount: "$20.75",
+    variant: "small"
+  }
+};

package/src/components/atoms/line-item/LineItem.mdx

@@ -0,0 +1,28 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as LineItemStories from './LineItem.stories.js';
+
+<Meta of={LineItemStories} />
+
+<Title />
+
+The LineItem component is small component that formats the description, subDescription, amount, and optionally quantity of a line item. LineItems are typically used in checkout flows and as a part of transaction details.
+
+The default styling of the LineItem uses flexbox. The description and subDescription are left-justified, while the formatted amount string is right-justified. An item's quantity, if displayed, sits evenly between the description and amount string. By default, elements of the LineItem have no gap between them. As shown below, the LineItem sizes itself to the width of its parent container, so gaps between items can be controlled by the size of the LineItem's parent.
+
+LineItems are typically rendered inside of other display components, like a DisplayBox or Card, as seen in the Line Item With Quantity story.
+
+The LineItem component can take the following props:
+
+- description (required, main description of the lineItem),
+- subDescription (optional, but should not be `null`),
+- amount (required, pre-formatted money string),
+- displayQuantity (optional, quantity of the item, if its display is desired)
+- customAttributes (optional, array of item's custom attributes, used in conjunction with visibleFields)
+- visibleFields (optional, an array that is a subset of customAttributes to display below the subDescription)
+
+NOTE: The LineItem currently supports unused functionality that can display a subset of an item's custom attributes as "visible fields". If this functionality is used in the future, a new story should be added to demonstrate it.
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>

package/src/components/atoms/line-item/LineItem.stories.js

@@ -1,28 +1,95 @@
 import React from "react";
-import { text } from "@storybook/addon-knobs";
-
 import LineItem from "./LineItem";
-import page from "../../../../.storybook/page";
+import DisplayBox from "../display-box/DisplayBox";
+import { Box } from "../layouts";
 
-const story = page({
-  title: "Components|Atoms/LineItem",
-  Component: LineItem
-});
-export default story;
+const meta = {
+  title: "Atoms/LineItem",
+  component: LineItem,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    description: "",
+    subDescription: "",
+    amount: "",
+    customAttributes: undefined,
+    visibleFields: [],
+    displayQuantity: null
+  },
+  argTypes: {
+    description: {
+      description: "The main description of the lineItem",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    subDescription: {
+      description: "Secondary description of the lineItem",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    amount: {
+      description: "The amount in a formatted string of the lineItem",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    customAttributes: {
+      description:
+        "A lineItem's custom attributes, currently unused functionality",
+      table: {
+        type: { summary: "array" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    visibleFields: {
+      description:
+        "An array of customAttributes to display below the subDescription, currently unused",
+      table: {
+        type: { summary: "array" },
+        defaultValue: { summary: [] }
+      }
+    },
+    displayQuantity: {
+      description:
+        "The quantity of the lineItem. Will only display if provided.",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
 
-export const lineItem = () => (
-  <LineItem
-    description={text("description", "Foo", "props")}
-    subDescription={text("subDescription", "Bar", "props")}
-    amount={text("amount", "$4.00", "props")}
-  />
-);
+export default meta;
 
-export const lineItemWithQuantity = () => (
-  <LineItem
-    description={text("description", "Foo", "props")}
-    subDescription={text("subDescription", "Bar", "props")}
-    amount={text("amount", "$4.00", "props")}
-    displayQuantity={2}
-  />
+export const BasicLineItem = {
+  args: {
+    description: "Dog Registration Permit",
+    subDescription: "Small dogs under 50lbs (valid until 2026)",
+    amount: "$75.00"
+  }
+};
+
+const FancyLineItem = props => (
+  <DisplayBox>
+    <Box minWidth="400px" padding="0">
+      <LineItem
+        description="Masked Ball Permits"
+        subDescription="One permit per 10 attendees"
+        amount="$625.00"
+        displayQuantity={25}
+      />
+    </Box>
+  </DisplayBox>
 );
+
+export const LineItemWithQuantity = {
+  render: args => <FancyLineItem {...args} />
+};

package/src/components/atoms/link/Link.mdx

@@ -0,0 +1,19 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as LinkStories from './Link.stories.js';
+
+<Meta of={LinkStories} />
+
+<Title />
+
+The Link component comes in two varieties: InternalLink and ExternalLink. We have two components because most of our frontend applications rely on some version of react-router for internal routing. The InternalLink component is a wrapper that applies react-router-dom's `<Link />` component, while ExternalLink uses a plain `<a />` tag. Either link component can be used as a wrapper around arbitrary children.
+
+Due to the components being written at different times, they have similar, but not identical, props. The props table identifies which props apply to InternalLinks and which apply to ExternalLinks.
+
+Currently, the InternalLink has a minor bug where it will not apply a theme color for a non-active, non-hover state. At the moment, the only way to get InternalLinks to apply the correct color is to pass the theme color in to the component using the `color` prop.
+
+<Controls />
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>