@thecb/components 10.12.3-beta.0 → 10.12.3

package/src/components/atoms/dropdown/Dropdown.mdx

@@ -1,65 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as DropdownStories from './Dropdown.stories.js';
-
-<Meta of={DropdownStories} />
-
-<Title />
-
-The Dropdown component is a fully accesible (keyboard & screenreader) replacement for standard `<select/>` elements, which provides addtional features such as:
-
-- More styling options than a `<select />`
-- Theming
-- Error message display
-- Width & height settings
-- Disabled options (via the `disabledValues` prop)
-- Animated scrolling to the selected option when open
-- Type ahead
-
-Under the hood the Dropdown uses an `<input />` element to allow users to filter the available options via keyboard (TypeAhead).
-
-<div style={{ marginBottom: "2em"}}>
-    <Story />
-</div>
-
-## Controlling a Dropdown
-
-The Dropdown component does not handle opening and closing it's own options menu, nor does it track the selected value. Both of these things are left to the app implementing the component.
-
-### Disabled State
-
-While the `<Dropdown />` component takes a `disabled` prop, it should be noted that this prop only effects the styles of the component.
-
-The code below shows how a Dropdown can be controlled via hooks to manage the open state, value, and to not allow the menu to be opened when the component should be disabled.
-
-<Story of={DropdownStories.Disabled} />
-
-```
-const DropdownWithHooks = ({ disabled = false }) => {
-  const [isOpen, setOpen] = useState(false);
-  const [value, setValue] = useState(null);
-  const [isError, setError] = useState(false);
-
-  useEffect(() => {
-    if (value === options[0].value) {
-      setError(true);
-    } else {
-      setError(false);
-    }
-  }, [value]);
-
-  return (
-    <Dropdown
-      placeholder={options[0].text}
-      options={options}
-      disabledValues={disabledValues}
-      value={value}
-      isOpen={isOpen}
-      isError={isError}
-      onSelect={setValue}
-      onClick={() => !disabled && setOpen(!isOpen)}
-      disabled={disabled}
-    />
-  );
-};
-```

package/src/components/atoms/form-layouts/FormInput.mdx

@@ -1,38 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as FormInputStories from './FormInput.stories.js';
-
-<Meta of={FormInputStories} />
-
-<Title />
-
-FormInput is a wrapper for `<input/>` elements that adds extra functionality. It is meant to be used in forms. The underlying component is an `input` element, unless the formatter prop is set, then it will be a [formatted-input](https://www.npmjs.com/package/formatted-input) component. Additional props are passed down to the underlying element.
-
-## 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 FormInput 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.
-
-<Controls />

package/src/components/atoms/form-select/FormSelect.mdx

@@ -1,42 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as FormSelectStories from './FormSelect.stories.js';
-
-<Meta of={FormSelectStories} />
-
-<Title />
-
-FormSelect is a wrapper for the [Dropdown component](?path=/docs/atoms-dropdown--docs) meant to be used in forms.
-
-It controls the open state of the menu (including closing on mouse clicks outside of the component). It also renders an accesible label and error messages.
-
-FormSelect can be used with [redux-freeform](https://github.com/CityBaseInc/redux-freeform) to connect the form to Redux state.
-
-<Story />
-
-## Form Integration
-
-FormSelect 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 FormSelect 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/formatted-address/FormattedAddress.mdx

@@ -1,13 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as FormattedAddressStories from './FormattedAddress.stories.js';
-
-<Meta of={FormattedAddressStories} />
-
-<Title />
-
-FormattedAddress is a composition of Box and Text components to help create consistent formatting of addresses. The outer padding and text color are themeable.
-
-<Story />
-
-<Controls />

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

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

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

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

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

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