@thecb/components 12.0.0-beta.0 → 12.0.0-beta.2

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

@@ -0,0 +1,137 @@
+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 { createFormState } from "redux-freeform";
+
+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: "Bar", value: "bar-value" }
+];
+
+const FormWrapper = props => {
+  const [selectedItems, setSelectedItems] = useState(props.selectedItems || []);
+
+  const selectItem = selection => {
+    if (selectedItems.find(l => l.value === selection.value)) {
+      const filtered = selectedItems.filter(
+        l => l.value !== selection.value && l.value !== SELECT_ALL
+      );
+      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);
+    } else {
+      setSelectedItems([]);
+    }
+  };
+
+  const allSelected = selectedItems.length === items.length ?? false;
+
+  return (
+    <SearchableSelect
+      {...props}
+      autocompleteValue={props.autocompleteValue}
+      items={props.items}
+      selectedItems={selectedItems}
+      selectItem={selectItem}
+      fields={props.fields}
+      actions={props.actions}
+      allSelected={allSelected}
+      toggleSelectAllItems={toggleSelectAllItems}
+    />
+  );
+};
+
+const ConnectedSearchableSelect = connect(
+  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} />
+};

package/src/components/atoms/sortable-table-heading/SortableTableHeading.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { CaretArrowUp } from "../icons";
+import { CaretArrowDown } from "../icons";
+import { fallbackValues } from "./SortableTableHeading.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { Cluster, Stack } from "../layouts";
+import { TableHeading } from "../table";
+import { noop } from "../../../util/general";
+
+const SortableTableHeading = ({
+  ariaControlsId,
+  disabled = false,
+  displayName,
+  onSortChange,
+  sortOrder = null,
+  themeValues,
+  extraStyles
+}) => {
+  const getCaretColor = order => {
+    if (sortOrder === order) {
+      return themeValues.activeColor;
+    }
+    return themeValues.inactiveColor;
+  };
+  return (
+    <TableHeading
+      disabled={disabled}
+      extraStyles={`cursor: pointer; ${extraStyles}`}
+      onClick={event => (disabled ? noop : onSortChange(event))}
+      aria-controls={ariaControlsId}
+    >
+      <Cluster justify="space-between">
+        {displayName}
+        <Stack justify="center" childGap="2px">
+          <CaretArrowUp color={getCaretColor("asc")} />
+          <CaretArrowDown color={getCaretColor("desc")} />
+        </Stack>
+      </Cluster>
+    </TableHeading>
+  );
+};
+
+export default themeComponent(
+  SortableTableHeading,
+  "SortableTableHeading",
+  fallbackValues
+);

package/src/components/atoms/sortable-table-heading/SortableTableHeading.oldstories.js

@@ -0,0 +1,19 @@
+import React from "react";
+import SortableTableHeading from "./SortableTableHeading";
+import page from "../../../../.storybook/page";
+import { noop } from "../../../util/general";
+
+export const sortableTableHeading = () => (
+  <SortableTableHeading
+    ariaControlsId="table-this-would-be-sorting"
+    displayName="Sortable Table Heading"
+    sortOrder={null}
+    onSortChange={noop}
+  />
+);
+const story = page({
+  title: "Components|Atoms/SortableTableHeading",
+  Component: SortableTableHeading
+});
+
+export default story;

package/src/components/atoms/sortable-table-heading/SortableTableHeading.theme.js

@@ -0,0 +1,9 @@
+import { CHARADE_GREY, MANATEE_GREY } from "../../../constants/colors";
+
+const inactiveColor = MANATEE_GREY;
+const activeColor = CHARADE_GREY;
+
+export const fallbackValues = {
+  inactiveColor,
+  activeColor
+};

package/src/components/atoms/sortable-table-heading/index.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export type SortOrder = "asc" | "desc" | null;
+export interface SortableTableHeadingProps {
+  ariaControlsId: string;
+  disabled?: boolean; // Useful if you want to render the component while data is fetching
+  displayName: string; // The name displayed in the <th> element
+  onSortChange: () => void;
+  sortOrder: SortOrder;
+  extraStyles?: string;
+}
+
+export const SortableTableHeading: React.FC<Expand<SortableTableHeadingProps> &
+  React.HTMLAttributes<HTMLElement>>;

package/src/components/atoms/sortable-table-heading/index.js

@@ -0,0 +1,3 @@
+import SortableTableHeading from "./SortableTableHeading";
+
+export default SortableTableHeading;

package/src/components/atoms/spinner/Spinner.js

@@ -65,6 +65,7 @@ const Spinner = ({
   size = "24",
   centerSpinner = false,
   themeValues,
+  color = themeValues.color,
   cx = "50",
   cy = "50",
   radius = "25",
@@ -73,7 +74,7 @@ const Spinner = ({
   <SpinnerContainer centerSpinner={centerSpinner} size={size}>
     <SpinnerSvgAnimation
       size={size}
-      color={themeValues.color}
+      color={color}
       centerSpinner={centerSpinner}
     >
       <circle

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

@@ -0,0 +1,36 @@
+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/state-province-dropdown/StateProvinceDropdown.stories.js

@@ -0,0 +1,78 @@
+import React from "react";
+import StateProvinceDropdown from "./StateProvinceDropdown";
+import { connect, Provider } from "react-redux";
+import { createStore } from "redux";
+import { createFormState, required } from "redux-freeform";
+import { action } from "@storybook/addon-actions";
+
+const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
+  country: {
+    validators: [required()]
+  }
+});
+
+const store = createStore(
+  reducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
+
+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/state-province-dropdown/options.js

@@ -3650,7 +3650,10 @@ const allOptions = {
     { text: "Washington", value: "WA" },
     { text: "West Virginia", value: "WV" },
     { text: "Wisconsin", value: "WI" },
-    { text: "Wyoming", value: "WY" }
+    { text: "Wyoming", value: "WY" },
+    { text: "Armed Forces Americas", value: "AA" },
+    { text: "Armed Forces Europe", value: "AE" },
+    { text: "Armed Forces Pacific", value: "AP" }
   ],
   UM: [{ text: "Palmyra Atoll", value: "95" }],
   UY: [

package/src/components/atoms/tab/Tab.js

@@ -18,13 +18,13 @@ const Tab = ({ label, activeTab, setActiveTab }) => {
       className={className}
       onClick={onClick}
       margin="0 0 -1px 0"
-      padding="0.5rem 0.75rem"
+      padding="1rem 0.75rem"
       background={activeTab === label ? WHITE : GRECIAN_GREY}
       extraStyles={`cursor: pointer; flex-grow: 1; text-align: center; ${
         activeTab === label ? `list-style: none;` : ``
       }`}
     >
-      <Text>{label}</Text>
+      <Text weight="600">{label}</Text>
     </Box>
   );
 };

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

@@ -0,0 +1,65 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeading,
+  TableRow
+} from "./index.js";
+import { fn } from "@storybook/test";
+import { noop } from "../../../util/general";
+
+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 }
+      }
+    }
+  }
+};
+
+export default meta;
+
+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>
+);
+
+export const Basic = {
+  render: () => <ComposedTable />
+};
+
+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 />