@thecb/components 10.12.3-beta.0 → 10.12.3-beta.1

package/src/components/atoms/searchable-select/SearchableSelect.stories.js

@@ -1,137 +1,62 @@
-import React from "react";
-import SearchableSelect, { SELECT_ALL } from "./SearchableSelect";
-import { useState } from "react";
-import { connect, Provider } from "react-redux";
-import { createStore } from "redux";
+import React, { useState } from "react";
+import { connect } from "react-redux";
+import { text } from "@storybook/addon-knobs";
 import { createFormState } from "redux-freeform";
 
+import SearchableSelect, { SELECT_ALL } from "./SearchableSelect";
+import page from "../../../../.storybook/page";
+
 const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
   searchTerm: {
     validators: []
   }
 });
 
-const store = createStore(
-  reducer,
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-);
-
-const selectAllItem = { name: SELECT_ALL, value: SELECT_ALL };
-
 const items = [
   { name: "Foo", value: "foo-value" },
   { name: "Baz", value: "baz-value" },
-  selectAllItem,
+  { name: SELECT_ALL, value: SELECT_ALL },
   { name: "Bar", value: "bar-value" }
 ];
 
 const FormWrapper = props => {
   const [selectedItems, setSelectedItems] = useState(props.selectedItems || []);
+  const selectValues = items => items.map(item => item.value);
 
-  const selectItem = selection => {
-    if (selectedItems.find(l => l.value === selection.value)) {
-      const filtered = selectedItems.filter(
-        l => l.value !== selection.value && l.value !== SELECT_ALL
+  const selectItem = selectedItem => {
+    if (selectValues(selectedItems).includes(selectedItem.value)) {
+      const fewerItems = selectedItems.filter(
+        item => item.value !== selectedItem.value
       );
-      setSelectedItems(filtered);
-    } else {
-      if (selectedItems.length + 1 === items.length - 1) {
-        setSelectedItems([...selectedItems, selection, selectAllItem]);
-      } else {
-        setSelectedItems([...selectedItems, selection]);
-      }
-    }
-  };
-
-  const toggleSelectAllItems = selectAll => {
-    if (selectAll) {
-      setSelectedItems(items);
+      setSelectedItems(fewerItems);
     } else {
-      setSelectedItems([]);
+      const moreItems = selectedItems.concat(selectedItem);
+      setSelectedItems(moreItems);
     }
   };
 
-  const allSelected = selectedItems.length === items.length ?? false;
-
   return (
     <SearchableSelect
-      {...props}
       autocompleteValue={props.autocompleteValue}
-      items={props.items}
-      selectedItems={selectedItems}
-      selectItem={selectItem}
+      items={items}
       fields={props.fields}
       actions={props.actions}
-      allSelected={allSelected}
-      toggleSelectAllItems={toggleSelectAllItems}
+      selectedItems={selectedItems}
+      selectItem={item => selectItem(item)}
     />
   );
 };
 
-const ConnectedSearchableSelect = connect(
+const story = page({
+  title: "Components|Atoms/SearchableSelect",
+  Component: SearchableSelect,
+  reducer,
   mapStateToProps,
   mapDispatchToProps
-)(FormWrapper);
-
-export default {
-  title: "Atoms/SearchableSelect",
-  component: ConnectedSearchableSelect,
-  tags: ["!autodocs"],
-  parameters: {
-    controls: { expanded: true }
-  },
-  args: {
-    autocompleteValue: undefined,
-    items: items,
-    disabled: false,
-    themeValues: {},
-    placeholder: "Search agencies"
-  },
-  argTypes: {
-    fieldActions: { type: "object" },
-    field: { type: "object" },
-    selectedItems: {
-      description: "Array of objects representing the selected items.",
-      table: {
-        type: { summary: "array" }
-      }
-    },
-    selectItem: {
-      description:
-        "Function that will be called when a non-`SELECT_ALL` checkbox is changed.",
-      table: {
-        type: { summary: "array" }
-      }
-    },
-    allSelected: {
-      description:
-        "Whether all all items are selected or not. This affects what parameter `toggleSelectAllItems` is called with",
-      table: {
-        type: { summary: "boolean" }
-      }
-    },
-    toggleSelectAllItems: {
-      description:
-        "Function called when a checkbox with the name `SELECT_ALL` is changed.",
-      table: {
-        type: { summary: "function" }
-      }
-    }
-  },
-  decorators: [
-    Story => (
-      <Provider store={store}>
-        <Story />
-      </Provider>
-    )
-  ]
-};
-
-export const Basic = args => <ConnectedSearchableSelect {...args} />;
+});
 
-export const Disabled = {
-  args: {
-    disabled: true
-  },
-  render: args => <ConnectedSearchableSelect {...args} />
-};
+export default story;
+const ConnectedForm = connect(mapStateToProps, mapDispatchToProps)(FormWrapper);
+export const searchableSelect = () => (
+  <ConnectedForm autocompleteValue={text("autocompleteValue", null, "props")} />
+);

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

@@ -1,78 +1,53 @@
 import React from "react";
-import StateProvinceDropdown from "./StateProvinceDropdown";
-import { connect, Provider } from "react-redux";
-import { createStore } from "redux";
+import { connect } from "react-redux";
+import { text, boolean } from "@storybook/addon-knobs";
 import { createFormState, required } from "redux-freeform";
-import { action } from "@storybook/addon-actions";
+
+import StateProvinceDropDown from ".";
+import page from "../../../../.storybook/page";
 
 const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
-  country: {
+  state: {
     validators: [required()]
   }
 });
-
-const store = createStore(
-  reducer,
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-);
-
 const errorMessages = {
-  [required.error]: "country is required"
+  [required.error]: "State is required"
 };
 
-const FormWrapper = props => (
-  <StateProvinceDropdown
-    {...props}
-    field={props.fields.country}
-    fieldActions={props.actions.fields.country}
-  />
-);
-
-const ConnectedStateProvinceDropdown = connect(
+const story = page({
+  title: "Components|Atoms/StateProvinceDropDown",
+  Component: StateProvinceDropDown,
+  reducer,
   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>
-    )
-  ]
-};
+  mapDispatchToProps,
+  height: "500px"
+});
 
-export const Basic = args => <ConnectedStateProvinceDropdown {...args} />;
+const FormWrapper = ({
+  autocompleteValue,
+  fields,
+  actions,
+  countryCode,
+  labelTextWhenNoError,
+  showErrors
+}) => (
+  <StateProvinceDropDown
+    errorMessages={errorMessages}
+    field={fields.state}
+    fieldActions={actions.fields.state}
+    countryCode={countryCode}
+    labelTextWhenNoError={labelTextWhenNoError}
+    showErrors={showErrors}
+  />
+);
 
-export const NonUS = {
-  args: {
-    countryCode: "CA",
-    labelTextWhenNoError: "Province/territory"
-  },
-  render: args => <ConnectedStateProvinceDropdown {...args} />
-};
+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")}
+  />
+);

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

@@ -1,65 +1,81 @@
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeading,
-  TableRow
-} from "./index.js";
-import { fn } from "@storybook/test";
-import { noop } from "../../../util/general";
+import React, { useState } from "react";
+import { Table, TableHead, TableBody, TableRow, TableCell } from "./";
+import page from "../../../../.storybook/page";
+import SortableTableHeading from "../sortable-table-heading";
 
-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 data = [
+  { name: "Alice", occupation: "Engineer", location: "New York" },
+  { name: "Bob", occupation: "Designer", location: "Los Angeles" },
+  { name: "Charlie", occupation: "Doctor", location: "Chicago" }
+];
 
-export default meta;
+const headings = [
+  { displayName: "Name", sortKey: "name" },
+  { displayName: "Occupation", sortKey: "occupation" },
+  { displayName: "Location", sortKey: "location" }
+];
 
-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>
-);
+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 const Basic = {
-  render: () => <ComposedTable />
-};
+    setSortState({
+      column,
+      order: newOrder
+    });
 
-export const InteractiveRows = {
-  render: () => <ComposedTable hoverCursor={true} onClick={fn()} />
+    // 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/TableRow.js

@@ -15,7 +15,6 @@ 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,6 +10,29 @@ 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/toggle-switch/ToggleSwitch.stories.js

@@ -1,111 +1,28 @@
-import React, { useState } from "react";
+import React, { useState, Fragment } from "react";
+import { boolean, text } from "@storybook/addon-knobs";
 import ToggleSwitch from "./ToggleSwitch";
-import { noop } from "../../../util/general";
+import page from "../../../../.storybook/page";
 
-const meta = {
-  title: "Atoms/ToggleSwitch",
-  component: ToggleSwitch,
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["!autodocs"],
-  args: {
-    isOn: false,
-    onToggle: noop,
-    disabled: false,
-    name: "switch",
-    label: "Autopay Enabled",
-    labelLeft: false,
-    dataQa: undefined
-  },
-  argTypes: {
-    isOn: {
-      description: "Whether the ToggleSwitch is in an on state",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    onToggle: {
-      description: "Function to execute when user interacts with switch",
-      table: {
-        type: { summary: "function" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    disabled: {
-      description: "Whether the ToggleSwitch is disabled",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    name: {
-      description: "Accessible name for ToggleSwitch element",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" }
-      }
-    },
-    label: {
-      description: "Text to display next to ToggleSwitch",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: null }
-      }
-    },
-    labelLeft: {
-      description: "Show the label on the left of the ToggleSwitch",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    dataQa: {
-      description: "data-qa value to use for E2E testing libraries",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    }
-  }
-};
-
-export default meta;
-
-const StatefulToggle = ({ useDynamicLabel, ...args }) => {
-  const [toggleOn, setToggleOn] = useState(false);
-  const dynamicLabel = toggleOn ? "Autopay Enabled" : "Autopay Disabled";
-  const label = useDynamicLabel ? dynamicLabel : args.label;
+export const toggleSwitchDefault = () => {
+  const [isOn, onToggle] = useState(false);
 
+  const disabled = boolean("disabled", false, "props");
   return (
-    <ToggleSwitch
-      {...args}
-      isOn={toggleOn}
-      onToggle={() => setToggleOn(!toggleOn)}
-      label={label}
-    />
+    <Fragment>
+      <ToggleSwitch
+        name="toggle-switch"
+        label={text("label", "Toggle Switch Label", "props")}
+        isOn={isOn}
+        onToggle={() => onToggle(!isOn)}
+        disabled={disabled}
+      />
+    </Fragment>
   );
 };
 
-export const BasicToggleSwitch = {};
-
-export const StatefulToggleSwitch = {
-  render: args => <StatefulToggle {...args} useDynamicLabel />
-};
-
-export const LeftLabelToggleSwitch = {
-  args: {
-    labelLeft: true,
-    label: "Set as Default"
-  },
-  render: args => <StatefulToggle {...args} />
-};
+const story = page({
+  title: "Components|Atoms/ToggleSwitch",
+  Component: ToggleSwitch
+});
 
-export const DisabledToggleSwitch = {
-  args: {
-    label: "Receive SMS Alerts",
-    disabled: true
-  },
-  render: args => <StatefulToggle {...args} />
-};
+export default story;

package/src/components/atoms/toggle-switch/ToggleSwitch.theme.js

@@ -17,15 +17,13 @@ const labelStyles = `
 `;
 
 const rightLabelStyles = `
-  > div {
-    flex-direction: row;
-  }
+  ${labelStyles}
+  flex-direction: row;
 `;
 
 const leftLabelStyles = `
-  > div {
-    flex-direction: row-reverse;
-  }
+  ${labelStyles}
+  flex-direction: row-reverse;
 `;
 
 export const fallbackValues = {
@@ -34,6 +32,5 @@ export const fallbackValues = {
   disabledBackgroundLight,
   white,
   rightLabelStyles,
-  leftLabelStyles,
-  labelStyles
+  leftLabelStyles
 };