@thecb/components 10.12.3-beta.0 → 10.12.3

package/src/components/atoms/state-province-dropdown/StateProvinceDropdown.mdx

@@ -1,36 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as StateProvinceDropdownStories from './StateProvinceDropdown.stories.js';
-
-<Meta of={StateProvinceDropdownStories} />
-
-<Title />
-
-StateProvinceDropdown is a wrapper for [FormSelect](?path=/docs/atoms-formselect--docs) that adds a pre-defined array of states or provinces for options. The state/provinces loaded are determined by the `countryCode` prop. These options cannot be modified. A "placeholder" option is added to the top of the list with a value of "". The display name of the placeholder is determined by the country code.
-
-## 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/table/Table.mdx

@@ -1,71 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as TableStories from './Table.stories.js';
-
-<Meta of={TableStories} />
-
-<Title />
-
-The Table component is styled `<table />` element that can be paired with other related table compoments to compose consistent and themeable tables. These components can be mixed with raw HTML.
-
-## Components
-
-- [Table](#table)
-- [TableBody](#tablebody)
-- [TableCell](#tablecell)
-- [TableHead](#tablehead)
-- [TableHeading](#tableheading)
-- [TableRow](#tablerow)
-
-## Table
-`<table />` element with a small set of default styles.
-
-### Props
-- `extraStyles`
-
-## TableBody
-`<tbody />` element.
-
-### Props
-- `extraStyles`
-
-## TableCell
-`<td />` element with a small set of default styles. Last child will default to `text-align: right`.
-
-### Props
-- `extraStyles`
-- `padding`, default value `24px`
-- `fontSize`, default value `0.875rem`
-- `maxWidth`, default value `250px`
-
-## TableHead
-`<thead />` element. Automatically wraps children `TableRow` component.
-
-### Props
-- `children`
-- `themeValues.backgroundColor`
-- `themeValues.borderColor`
-- `extraStyles`, passed to the `<TableRow />`
-
-## TableHeading
-`<th />` element with a small set of default styles. Last child will default to `text-align: right`.
-
-### Props
-- `extraStyles`
-- `padding`, default value `24px`
-- `minWidth`, default value `initial`
-
-## TableRow
-`<tr />` element.
-
-### Props
-- `extraStyles`
-- `children`
-- `onClick`, function handler for `onClick` on the `<tr />` element
-- `borderColor`, color of the bottom border of the row if it is not the last row
-- `hoverEffect`, set to `true` to add CSS `:hover` styles to the row
-- `hoverCursor`, adds `cursor: pointer` if `hoverEffect` is true
-- `hoverBackgroundColor`, sets background color on `:hover`
-- all other props passed to the `<tr />` element
-
-<Story />

package/src/components/atoms/table/Table.oldstories.js

@@ -1,84 +0,0 @@
-/* 
-  Changes were made to the Table stories while the TOOl-597 feature branch was pending, this file has been kept to memorialize those changes so that the v8 story can be updated to match
-*/
-import React, { useState } from "react";
-import { Table, TableHead, TableBody, TableRow, TableCell } from "./";
-import page from "../../../../.storybook/page";
-import SortableTableHeading from "../sortable-table-heading";
-
-const data = [
-  { name: "Alice", occupation: "Engineer", location: "New York" },
-  { name: "Bob", occupation: "Designer", location: "Los Angeles" },
-  { name: "Charlie", occupation: "Doctor", location: "Chicago" }
-];
-
-const headings = [
-  { displayName: "Name", sortKey: "name" },
-  { displayName: "Occupation", sortKey: "occupation" },
-  { displayName: "Location", sortKey: "location" }
-];
-
-const ComposedSortableTable = () => {
-  const [sortState, setSortState] = useState({
-    column: "name",
-    order: "asc"
-  });
-  const [sortedData, setSortedData] = useState(data);
-  const handleSortChange = column => {
-    // Determine the new sort order for SortableTableHeading components
-    const newOrder =
-      sortState.column === column && sortState.order === "asc" ? "desc" : "asc";
-
-    setSortState({
-      column,
-      order: newOrder
-    });
-
-    // Perform sort and update sortedData state
-    const sorted = [...data].sort((a, b) => {
-      const valueA = a[column];
-      const valueB = b[column];
-      if (newOrder === "asc") {
-        return valueA > valueB ? 1 : -1;
-      } else {
-        return valueA < valueB ? 1 : -1;
-      }
-    });
-
-    setSortedData(sorted);
-  };
-  return (
-    <Table id="users-table">
-      <TableHead>
-        {headings.map(heading => (
-          <SortableTableHeading
-            ariaControlsId="users-table"
-            displayName={heading.displayName}
-            key={heading.sortKey}
-            onSortChange={() => handleSortChange(heading.sortKey)}
-            sortOrder={
-              sortState.column === heading.sortKey ? sortState.order : null
-            }
-          />
-        ))}
-      </TableHead>
-      <TableBody>
-        {sortedData.map((item, idx) => (
-          <TableRow key={idx}>
-            <TableCell>{item.name}</TableCell>
-            <TableCell>{item.occupation}</TableCell>
-            <TableCell>{item.location}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  );
-};
-
-export const table = () => <ComposedSortableTable />;
-const story = page({
-  title: "Components|Atoms/Table",
-  Component: Table
-});
-
-export default story;

package/src/components/atoms/title/Title.mdx

@@ -1,26 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as TitleStories from './Title.stories.js';
-
-<Meta of={TitleStories} />
-
-<Title />
-
-Title is a responsive text component for heading elements where the font size is decoupled from tag. It comes with two variants - "large" and "small":
-
-- Large variant results in text that is `1.5rem` (`24px` desktop, `21px` mobile)
-- Small variant results in text that is `1.25rem/1.2142rem` (`20px` desktop, `17px` mobile)
-
-If you need a smaller text size, use the `<Detail />` atom, which has smaller 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 `Title.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 both the "large" and "small" variants to use the same rem sizes. FCS themes override fallbacks defined in the .theme file.
-
-<Story />
-
-<Controls />

package/src/components/atoms/title/Title.stories.js

@@ -1,144 +0,0 @@
-import Title from "./Title";
-import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
-import { FIREFLY_GREY } from "../../../constants/colors";
-import { Box } from "../layouts";
-
-const meta = {
-  title: "Atoms/Title",
-  component: Title,
-  parameters: {
-    layout: "centered",
-    controls: { expanded: true }
-  },
-  tags: ["!autodocs"],
-  args: {
-    weight: FONT_WEIGHT_REGULAR,
-    color: FIREFLY_GREY,
-    margin: 0,
-    textAlign: undefined,
-    extraStyles: "",
-    className: undefined,
-    variant: "large",
-    as: "h1",
-    dataQa: undefined,
-    children: "Title 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` `small`",
-      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">
-      <Title {...args} />
-    </Box>
-  )
-};
-
-export const TextAlign = {
-  args: {
-    textAlign: "right"
-  },
-  render: args => (
-    <Box border={`1px dotted ${FIREFLY_GREY}`} padding="0" minWidth="400px">
-      <Title {...args} />
-    </Box>
-  )
-};
-
-export const SmallVariant = {
-  args: {
-    variant: "small"
-  }
-};

package/src/components/atoms/toggle-switch/ToggleSwitch.mdx

@@ -1,17 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as ToggleSwitchStories from './ToggleSwitch.stories.js';
-
-<Meta of={ToggleSwitchStories} />
-
-<Title />
-
-The ToggleSwitch is a small button with an on/off state. Use the ToggleSwitch for interactions with binary values, like whether a user's payment method is used as the default, or whether a particular account has automatic payments enabled.
-
-The ToggleSwitch is a dumb component and requires its parent component to provide both its curent state as well as the action that occurs when a user interacts with the switch. The Basic Toggle Switch story demonstrates manually providing the `isOn` value via the story controls, while the other stories feature use of the `useState` hook to setup basic state control.
-
-<Controls />
-
-<div style={{ marginBottom: "2em"}}>
-    <Story />
-</div>

package/src/components/atoms/typeahead-input/TypeaheadInput.mdx

@@ -1,13 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as TypeaheadInputStories from './TypeaheadInput.stories.js';
-
-<Meta of={TypeaheadInputStories} />
-
-<Title />
-
-TypeaheadInput is a wrapper for an uncontrolled input element that includes a visually hidden label and search icon.
-
-<Story />
-
-<Controls />

package/src/components/atoms/typeahead-input/TypeaheadInput.stories.js

@@ -1,63 +0,0 @@
-import TypeaheadInput from "./TypeaheadInput";
-import { fn } from "@storybook/test";
-
-const meta = {
-  title: "Atoms/TypeaheadInput",
-  component: TypeaheadInput,
-  parameters: {
-    layout: "centered",
-    controls: { expanded: true }
-  },
-  tags: ["!autodocs"],
-  args: {
-    handleChange: undefined,
-    placeholder: undefined,
-    id: undefined,
-    labelText: undefined
-  },
-  argTypes: {
-    id: {
-      description: "Used to link `labelText` to the input element",
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    placeholder: {
-      description: "Placeholder text for the input element",
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    labelText: {
-      description: "Visually hidden label for the input",
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    handleChange: {
-      description: "Callback function called when input value changes",
-      control: { type: "object" },
-      table: {
-        type: { summary: "function" },
-        defaultValue: { summary: undefined }
-      }
-    }
-  }
-};
-
-export default meta;
-
-export const Basic = {
-  args: {
-    handleChange: fn(),
-    placeholder: "Name…",
-    id: "search-input",
-    labelText: "Search"
-  }
-};

package/src/components/molecules/address-form/AddressForm.mdx

@@ -1,18 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as AddressFormStories from './AddressForm.stories.js';
-
-<Meta of={AddressFormStories} />
-
-<Title />
-
-Renders all the fields needed to collect a full address.
-
-- Uses the [StateProvinceDropdown](?path=/docs/atoms-stateprovincedropdown--docs) component connected with the value from [CountryDropdown](?path=/docs/atoms-countrydropdown--docs) to filter states/provinces.
-- Zip codes automatically formatted via [FormInput](?path=/docs/atoms-form-layouts-forminput--docs) `formatter` prop.
-- Optional "Save address to wallet" [Checkbox](?path=/docs/atoms-checkbox--docs) via the `showWalletCheckbox` prop.
-- Expands to fit the width of it's containing element
-
-<Story />
-
-<Controls />

package/src/components/molecules/banner/Banner.mdx

@@ -1,23 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as BannerStories from './Banner.stories.js';
-
-<Meta of={BannerStories} />
-
-<Title />
-
-Banner is a themeable component that renders a heading and sub-heading alongside an image. It supports custom padding and content spacing for both mobile and desktop, as well as minimum width and height values.
-
-## The `Image` Prop
-
-The `image` prop is required, and must be valid a React component, typically a component that renders an SVG.
-
-The Banner component forces a width of `176px` for SVG elements on mobile screens.
-
----
-
-<div style={{ margin: "2em 0"}}>
-  <Story />
-</div>
-
-<Controls />

package/src/components/molecules/change-password-form/ChangePasswordForm.mdx

@@ -1,15 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as ChangePasswordFormStories from './ChangePasswordForm.stories.js';
-
-<Meta of={ChangePasswordFormStories} />
-
-<Title />
-
-Renders a form for users to update their password. Built with [FormInput](?path=/docs/atoms-form-layouts-forminput--docs), and [PasswordRequirements](?path=/docs/atoms-passwordrequirements--docs).
-
-When the [`revenueManagement`](?path=/story/molecules-changepasswordform--revenue-management) prop is set to `true`, the form will include a user block with their full name & initials, and "Save" & "Cancel" buttons.
-
-<Story />
-
-<Controls />

package/src/components/molecules/collapsible-section/CollapsibleSection.mdx

@@ -1,15 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as CollapsibleSectionStories from './CollapsibleSection.stories.js';
-
-<Meta of={CollapsibleSectionStories} />
-
-<Title />
-
-The CollapsibleSection component behaves like a typical accordion, expanding and collapsing respectively when triggered by user interaction. It also includes [accessibility attributes for accordions](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
-
-<Controls />
-
-<div style={{ marginBottom: "2em"}}>
-  <Story />
-</div>

package/src/components/molecules/edit-name-form/EditNameForm.mdx

@@ -1,13 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as EditNameFormStories from './EditNameForm.stories.js';
-
-<Meta of={EditNameFormStories} />
-
-<Title />
-
-Renders input fields to collect a person's first name and last name.
-
-<Story />
-
-<Controls />

package/src/components/molecules/edit-name-form/EditNameForm.stories.js

@@ -1,117 +0,0 @@
-import React from "react";
-import EditNameForm from "./EditNameForm";
-import { connect, Provider } from "react-redux";
-import { createStore } from "redux";
-import { createFormState, required } from "redux-freeform";
-import { noop } from "../../../util/general";
-import { fn } from "@storybook/test";
-
-const formConfig = {
-  firstName: {
-    validators: [required()]
-  },
-  lastName: {
-    validators: [required()]
-  }
-};
-
-const { mapStateToProps, mapDispatchToProps, reducer } = createFormState(
-  formConfig
-);
-
-const store = createStore(
-  reducer,
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-);
-
-const FormWrapper = props => <EditNameForm {...props} />;
-
-const ConnectedEditNameForm = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(FormWrapper);
-
-export default {
-  title: "Molecules/EditNameForm",
-  component: ConnectedEditNameForm,
-  tags: ["!autodocs"],
-  parameters: {
-    layout: "centered"
-  },
-  args: {
-    fields: undefined,
-    actions: undefined,
-    clearOnDismount: undefined,
-    showErrors: undefined,
-    handleSubmit: noop
-  },
-  argTypes: {
-    fields: {
-      description:
-        "Field data, usually generated with [redux-freeform](https://github.com/CityBaseInc/redux-freeform).",
-      control: { type: "object" },
-      table: {
-        type: { summary: "object" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    actions: {
-      description:
-        "Field actions, usually generated with [redux-freeform](https://github.com/CityBaseInc/redux-freeform).",
-      control: { type: "object" },
-      table: {
-        type: { summary: "object" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    clearOnDismount: {
-      description:
-        "If `true`, `actions.form.clear()` will be called when the component unmounts.",
-      control: { type: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    showErrors: {
-      description: "Show form field errors.",
-      control: { type: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    handleSubmit: {
-      description:
-        "Function called when the `Enter` key is pressed on any of the text inputs (via `onKeyDown` prop passed to `FormInput` component).",
-      control: { type: "object" },
-      table: {
-        type: { summary: "function" },
-        defaultValue: { summary: noop }
-      }
-    }
-  },
-  decorators: [
-    Story => (
-      <Provider store={store}>
-        <Story />
-      </Provider>
-    )
-  ]
-};
-
-export const Basic = args => <ConnectedEditNameForm {...args} />;
-
-export const ShowErrors = {
-  args: {
-    showErrors: true
-  },
-  render: args => <ConnectedEditNameForm {...args} />
-};
-
-export const HandleSubmit = {
-  args: {
-    handleSubmit: fn()
-  },
-  render: args => <ConnectedEditNameForm {...args} />
-};