@thecb/components 10.12.6 → 11.0.0-beta.0

package/src/components/atoms/formatted-address/FormattedAddress.stories.js

@@ -1,32 +1,138 @@
-import React from "react";
-import { select, text } from "@storybook/addon-knobs";
 import FormattedAddress from "./FormattedAddress";
-import page from "../../../../.storybook/page";
+import React from "react";
+
+const meta = {
+  title: "Atoms/FormattedAddress",
+  component: FormattedAddress,
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  tags: ["!autodocs"],
+  args: {
+    street1: undefined,
+    city: undefined,
+    stateProvince: undefined,
+    country: undefined,
+    zip: undefined,
+    street2: null,
+    name: null,
+    themeValues: undefined,
+    qaPrefix: "address"
+  },
+  argTypes: {
+    street1: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    street2: {
+      description: "Optional",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: null }
+      }
+    },
+    city: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    stateProvince: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    country: {
+      description: "Optional",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    zip: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    name: {
+      description: "Optional",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: null }
+      }
+    },
+    qaPrefix: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "address" }
+      }
+    }
+  }
+};
+
+export default meta;
 
-const variantsLabel = "variant";
-const variants = {
-  default: "default",
-  radio: "radio",
-  None: undefined
+export const Basic = {
+  args: {
+    street1: "363 W. Erie St.",
+    city: "Chicago",
+    stateProvince: "IL",
+    zip: "60654"
+  }
 };
-const defaultValue = "default";
-const groupId = "props";
 
-export const formattedAddress = () => (
-  <FormattedAddress
-    variant={select(variantsLabel, variants, defaultValue, groupId)}
-    street1={text("street1", "30 North Lasalle", groupId)}
-    city={text("city", "Chicago", groupId)}
-    stateProvince={text("stateProvince", "Illinois", groupId)}
-    country={text("country", "USA", groupId)}
-    zip={text("zip", "60606", groupId)}
-    street2={text("street2", "", groupId)}
-    name={text("name", "Citybase", groupId)}
-  />
-);
+export const WithName = {
+  args: {
+    street1: "363 W. Erie St.",
+    city: "Chicago",
+    stateProvince: "IL",
+    zip: "60654",
+    name: "John Doe"
+  }
+};
 
-const story = page({
-  title: "Components|Atoms/FormattedAddress",
-  Component: FormattedAddress
-});
-export default story;
+export const WithStreet2 = {
+  args: {
+    street1: "363 W. Erie St.",
+    city: "Chicago",
+    stateProvince: "IL",
+    zip: "60654",
+    street2: "Floor 7"
+  }
+};
+
+export const WithCountry = {
+  args: {
+    street1: "363 W. Erie St.",
+    city: "Chicago",
+    stateProvince: "IL",
+    zip: "60654",
+    country: "USA"
+  }
+};
+
+export const WithAllProps = {
+  args: {
+    name: "John Doe",
+    street1: "363 W. Erie St.",
+    street2: "Floor 7",
+    city: "Chicago",
+    stateProvince: "IL",
+    zip: "60654",
+    country: "USA",
+    qaPrefix: "all-props"
+  }
+};

package/src/components/atoms/formatted-bank-account/FormattedBankAccount.mdx

@@ -0,0 +1,17 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as FormattedBankAccountStories from './FormattedBankAccount.stories.js';
+
+<Meta of={FormattedBankAccountStories} />
+
+<Title />
+
+The FormattedBankAccount is a simple component that takes bank account information and presents it in a standard way that can be reused throughout applications. The component requires:
+
+- lastFour (last four of the account number),
+- accountType (one of CHECKING or SAVINGS),
+- autoPay (boolean, whether an autopay is associated with the account)
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>

package/src/components/atoms/formatted-bank-account/FormattedBankAccount.stories.js

@@ -0,0 +1,57 @@
+import FormattedBankAccount from "./FormattedBankAccount";
+
+const meta = {
+  title: "Atoms/FormattedBankAccount",
+  component: FormattedBankAccount,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    lastFour: "9456",
+    accountType: "CHECKING",
+    autoPay: false
+  },
+  argTypes: {
+    lastFour: {
+      description: "The last four digits of the bank account number",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    accountType: {
+      description: "The type of bank account - either CHECKING or SAVINGS",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    autoPay: {
+      description: "Whether the bank account is being used for autopay",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const FormattedCheckingAccount = {};
+
+export const FormattedSavingsAccount = {
+  args: {
+    lastFour: "5139",
+    accountType: "SAVINGS"
+  }
+};
+
+export const AccountWithAutopay = {
+  args: {
+    lastFour: "7291",
+    accountType: "CHECKING",
+    autoPay: true
+  }
+};

package/src/components/atoms/formatted-credit-card/FormattedCreditCard.mdx

@@ -0,0 +1,40 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as FormattedCreditCardStories from './FormattedCreditCard.stories.js';
+
+<Meta of={FormattedCreditCardStories} />
+
+<Title />
+
+The FormattedCreditCard is a simple component that takes credit card information and presents it in a standard way that can be reused throughout applications. The component requires:
+
+- lastFour (last four of the account number),
+- autoPay (boolean, whether an autopay is associated with the account)
+- expirationStatus (one of ACTIVE, EXPIRING_SOON, EXPIRED)
+- expireDate (date of card expiration in MM/YY)
+
+The expirationStatus of a card is typically managed by the application consuming this component. That status can either be received from an API call, or generated using logic in a utility function. Navigate uses the following utility function to attach a status to credit cards:
+
+```
+export const getCardExpirationStatus = card => {
+  const ACTIVE = "ACTIVE";
+  const EXPIRING_SOON = "EXPIRING_SOON";
+  const EXPIRED = "EXPIRED";
+
+  const { expiryMonth, expiryYear } = card;
+  const today = dayjs();
+  const expiration = dayjs(`20${expiryYear}-${expiryMonth}`);
+  const cardExpirationStatus = expiration.diff(today, "months");
+
+  return cardExpirationStatus >= 1
+    ? ACTIVE
+    : cardExpirationStatus === 0
+    ? EXPIRING_SOON
+    : EXPIRED;
+};
+```
+The text for a card's expiration status and date is generated by the `renderCardStatus` function in the formats.js file of this library.
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>

package/src/components/atoms/formatted-credit-card/FormattedCreditCard.stories.js

@@ -0,0 +1,74 @@
+import FormattedCreditCard from "./FormattedCreditCard";
+
+const meta = {
+  title: "Atoms/FormattedCreditCard",
+  component: FormattedCreditCard,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    lastFour: "1003",
+    autoPay: false,
+    expirationDate: undefined,
+    expirationStatus: undefined
+  },
+  argTypes: {
+    lastFour: {
+      description: "The last four digits of the credit card number",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    autoPay: {
+      description: "Whether the bank account is being used for autopay",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    expirationDate: {
+      description: "The expiration date of the credit card",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    expirationStatus: {
+      description:
+        "Whether a card will expire soon, one of ACTIVE, EXPIRING_SOON, or EXPIRED",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const ActiveCreditCard = {
+  args: {
+    autoPay: true,
+    expireDate: "10/29",
+    expirationStatus: "ACTIVE"
+  }
+};
+
+export const ExpiringSoonCreditCard = {
+  args: {
+    lastFour: "2613",
+    expireDate: "12/24",
+    expirationStatus: "EXPIRING_SOON",
+    autoPay: true
+  }
+};
+
+export const ExpiredCreditCard = {
+  args: {
+    lastFour: "8054",
+    expireDate: "01/24",
+    expirationStatus: "EXPIRED"
+  }
+};

package/src/components/atoms/icons/Icons.mdx

@@ -0,0 +1,40 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as IconsStories from './Icons.stories.js';
+
+<Meta of={IconsStories} />
+
+<Title />
+
+The icons folder contains a variety of components which render SVGs, ranging from simple icons to large graphics.
+
+## Theming
+
+Some of the icon components are themeable through the `themeValues` object prop. The properties used from the `themeValues` vary between components.
+
+### Variants
+
+Some icons support variants from themes, including `info`, `success`, and `error`.
+
+## Props
+
+Many icon components make use of additional props:
+
+<Controls />
+
+## Additional Props
+
+The following components will pass along _all_ other props to their wrapping elements via the spread operator: `EmptyCartIconV2`, `CloseIcon`, `MultiCartIcon`.
+
+## IconAdd Styling
+
+`IconAdd` needs color values set in CSS in order to display:
+
+```
+.fill { fill: #000 }
+.stroke { stroke: #000 }
+```
+
+## ExternalLinkIcon
+
+`ExternalLinkIcon` must be passed a value for `linkColor` in order to be visible.