@thecb/components 10.12.6 → 11.0.0-beta.0

package/src/components/atoms/state-province-dropdown/StateProvinceDropdown.stories.js

@@ -1,53 +1,78 @@
 import React from "react";
-import { connect } from "react-redux";
-import { text, boolean } from "@storybook/addon-knobs";
+import StateProvinceDropdown from "./StateProvinceDropdown";
+import { connect, Provider } from "react-redux";
+import { createStore } from "redux";
 import { createFormState, required } from "redux-freeform";
-
-import StateProvinceDropDown from ".";
-import page from "../../../../.storybook/page";
+import { action } from "@storybook/addon-actions";
 
 const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
-  state: {
+  country: {
     validators: [required()]
   }
 });
-const errorMessages = {
-  [required.error]: "State is required"
-};
 
-const story = page({
-  title: "Components|Atoms/StateProvinceDropDown",
-  Component: StateProvinceDropDown,
+const store = createStore(
   reducer,
-  mapStateToProps,
-  mapDispatchToProps,
-  height: "500px"
-});
-
-const FormWrapper = ({
-  autocompleteValue,
-  fields,
-  actions,
-  countryCode,
-  labelTextWhenNoError,
-  showErrors
-}) => (
-  <StateProvinceDropDown
-    errorMessages={errorMessages}
-    field={fields.state}
-    fieldActions={actions.fields.state}
-    countryCode={countryCode}
-    labelTextWhenNoError={labelTextWhenNoError}
-    showErrors={showErrors}
-  />
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );
 
-export default story;
-const ConnectedForm = connect(mapStateToProps, mapDispatchToProps)(FormWrapper);
-export const stateProvinceDropDown = () => (
-  <ConnectedForm
-    labelTextWhenNoError={text("State/Province", "", "props")}
-    countryCode={text("countryCode", "US", "props")}
-    showErrors={boolean("showErrors", false, "props")}
+const errorMessages = {
+  [required.error]: "country is required"
+};
+
+const FormWrapper = props => (
+  <StateProvinceDropdown
+    {...props}
+    field={props.fields.country}
+    fieldActions={props.actions.fields.country}
   />
 );
+
+const ConnectedStateProvinceDropdown = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(FormWrapper);
+
+export default {
+  title: "Atoms/StateProvinceDropdown",
+  component: ConnectedStateProvinceDropdown,
+  tags: ["!autodocs"],
+  parameters: {
+    controls: { expanded: true }
+  },
+  args: {
+    errorMessages: errorMessages,
+    showErrors: false,
+    onChange: action("onChange"),
+    labelTextWhenNoError: "State",
+    isRequired: false,
+    countryCode: "US"
+  },
+  argTypes: {
+    fieldActions: { type: "object" },
+    field: { type: "object" },
+    showErrors: {
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  },
+  decorators: [
+    Story => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    )
+  ]
+};
+
+export const Basic = args => <ConnectedStateProvinceDropdown {...args} />;
+
+export const NonUS = {
+  args: {
+    countryCode: "CA",
+    labelTextWhenNoError: "Province/territory"
+  },
+  render: args => <ConnectedStateProvinceDropdown {...args} />
+};

package/src/components/atoms/table/Table.mdx

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

@@ -0,0 +1,84 @@
+/* 
+  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/table/Table.stories.js

@@ -1,81 +1,65 @@
-import React, { useState } from "react";
-import { Table, TableHead, TableBody, TableRow, TableCell } from "./";
-import page from "../../../../.storybook/page";
-import SortableTableHeading from "../sortable-table-heading";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeading,
+  TableRow
+} from "./index.js";
+import { fn } from "@storybook/test";
+import { noop } from "../../../util/general";
 
-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 meta = {
+  title: "Atoms/Table",
+  component: Table,
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  args: {
+    extraStyles: undefined
+  },
+  argTypes: {
+    extraStyles: {
+      description: "Styles for the table element.",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
 
-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";
+export default meta;
 
-    setSortState({
-      column,
-      order: newOrder
-    });
+const ComposedTable = ({ hoverCursor = false, onClick = noop }) => (
+  <Table>
+    <TableHead>
+      <TableHeading>Heading 1</TableHeading>
+      <TableHeading>Heading 2</TableHeading>
+      <TableHeading>Heading 3</TableHeading>
+    </TableHead>
+    <TableBody>
+      <TableRow hoverCursor={hoverCursor} onClick={onClick}>
+        <TableCell>Cell 1</TableCell>
+        <TableCell>Cell 2</TableCell>
+        <TableCell>Cell 3</TableCell>
+      </TableRow>
+      <TableRow hoverCursor={hoverCursor} onClick={onClick}>
+        <TableCell>Cell 4</TableCell>
+        <TableCell>Cell 5</TableCell>
+        <TableCell>Cell 6</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+);
 
-    // 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 Basic = {
+  render: () => <ComposedTable />
 };
 
-export const table = () => <ComposedSortableTable />;
-const story = page({
-  title: "Components|Atoms/Table",
-  Component: Table
-});
-
-export default story;
+export const InteractiveRows = {
+  render: () => <ComposedTable hoverCursor={true} onClick={fn()} />
+};

package/src/components/atoms/table/TableRow.js

@@ -15,6 +15,7 @@ const TableRow = ({
   <TableRowWrapper
     onClick={onClick}
     hoverEffect={hoverEffect}
+    hoverCursor={hoverCursor}
     extraStyles={extraStyles}
     borderColor={themeValues.borderColor}
     hoverBackgroundColor={themeValues.hoverBackgroundColor}

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

@@ -10,29 +10,6 @@ import {
 } from "./Title.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
-/*
-  New responsive text component for Title elements
-  Size is decoupled from tag
-  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
-*/
-
 const isBelowBreakpoint = window.innerWidth < MOBILE_BREAKPOINT;
 const isTouchDevice = "ontouchstart" in window || navigator.maxTouchPoints > 1;
 const mobileDeviceDetected = isBelowBreakpoint && isTouchDevice;

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

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

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

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