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

package/src/components/atoms/detail/Detail.stories.js

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

package/src/components/atoms/display-box/DisplayBox.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as DisplayBoxStories from './DisplayBox.stories.js';
+
+<Meta of={DisplayBoxStories} />
+
+<Title />
+
+The DisplayBox uses nested Box components with hardcoded padding and border radius values to create consistent and themeable "boxes" that wrap children with a box shadow. DisplayBox supports an "error" state with a red border via the `showErrors` prop.
+
+<Story />

package/src/components/atoms/display-box/DisplayBox.stories.js

@@ -0,0 +1,69 @@
+import DisplayBox from "./DisplayBox";
+import React from "react";
+import FormattedAddress from "../formatted-address";
+
+const meta = {
+  title: "Atoms/DisplayBox",
+  component: DisplayBox,
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  tags: ["!autodocs"],
+  args: {
+    dataQa: null,
+    children: "Display box content!"
+  },
+  argTypes: {
+    dataQa: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: null }
+      }
+    },
+    showError: {
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    children: {
+      table: {
+        type: { summary: "string/component" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const Basic = {
+  render: args => <DisplayBox {...args} />
+};
+
+export const Error = {
+  args: {
+    showError: true
+  },
+  render: args => <DisplayBox {...args} />
+};
+
+export const ChildComponent = {
+  args: {
+    children: (
+      <FormattedAddress
+        qaPrefix="billing-info"
+        name="Citybase"
+        street1="30 North Lasalle"
+        city="Chicago"
+        country="USA"
+        stateProvince="Illinois"
+        zip="60606"
+      />
+    )
+  },
+  render: args => <DisplayBox {...args} />
+};

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

@@ -13,7 +13,6 @@ import "core-js/proposals/relative-indexing-method";
 
 import {
   ERROR_COLOR,
-  GREY_CHATEAU,
   MINESHAFT_GREY,
   STORM_GREY,
   WHITE
@@ -35,7 +34,7 @@ const IconWrapper = styled.div`
 
 const DropdownContentWrapper = styled.div`
   transform-origin: 0 0;
-  border: 1px solid ${GREY_CHATEAU};
+  border: 1px solid ${STORM_GREY};
   border-radius: 2px;
   background-color: ${WHITE};
   padding: 8px 0 8px;
@@ -135,7 +134,8 @@ const Dropdown = ({
   autocompleteValue, // browser autofill value, like country-name
   smoothScroll = true,
   ariaInvalid = false,
-  isRequired = false
+  isRequired = false,
+  extraStyles
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [optionsState, setOptionsState] = useState([]);
@@ -238,6 +238,17 @@ const Dropdown = ({
     }
   };
 
+  const handleOnBlur = inputVal => {
+    const selectedRefExists =
+      selectedRef !== undefined && selectedRef.current !== null;
+    const inputRequired = options.required || isRequired;
+    const hasSelectedValue = value || selectedRefExists;
+    // Select the empty value to trigger a validation error if it's required.
+    if (inputRequired && !hasSelectedValue && inputVal === "") {
+      onSelect("");
+    }
+  };
+
   useEffect(() => {
     const selectedRefExists =
       selectedRef !== undefined && selectedRef.current !== null;
@@ -305,7 +316,7 @@ const Dropdown = ({
     <Box
       padding="0"
       background={isOpen ? themeValues.hoverColor : WHITE}
-      extraStyles={`position: relative;`}
+      extraStyles={`position: relative;${extraStyles ? ` ${extraStyles}` : ""}`}
       minWidth="100%"
       onClick={() => {
         if (!isOpen) {
@@ -337,7 +348,7 @@ const Dropdown = ({
             ? ERROR_COLOR
             : isOpen
             ? themeValues.selectedColor
-            : GREY_CHATEAU
+            : STORM_GREY
         }
         dataQa={placeholder}
         extraStyles={
@@ -357,6 +368,7 @@ const Dropdown = ({
             setInputChangedByAutofill(true);
           }
         }}
+        onBlur={e => handleOnBlur(e.target.value)}
         padding="12px 25px 12px 12px"
         placeholder={getSelection()}
         required={options.required || isRequired}

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

@@ -0,0 +1,65 @@
+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/dropdown/Dropdown.stories.js

@@ -0,0 +1,128 @@
+import { useState, useEffect } from "react";
+import Dropdown from "./Dropdown";
+import { fn } from "@storybook/test";
+import React from "react";
+
+const meta = {
+  title: "Atoms/Dropdown",
+  component: Dropdown,
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  tags: ["!autodocs"],
+  args: {
+    placeholder: "Placeholder",
+    options: [],
+    value: "",
+    isOpen: false,
+    isError: false,
+    onSelect: fn(),
+    disabledValues: [],
+    onClick: fn(),
+    themeValues: {},
+    maxHeight: "400px",
+    widthFitOptions: false,
+    disabled: false,
+    hasTitles: false,
+    autoEraseTypeAhead: true,
+    ariaLabelledby: "label-id",
+    ariaDescribedby: "desc-id",
+    autocompleteValue: "",
+    smoothScroll: true,
+    ariaInvalid: false,
+    isRequired: false
+  },
+  argTypes: {
+    autoEraseTypeAhead: {
+      description: "Clears type ahead inputs after 20s",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: true }
+      }
+    },
+    autocompleteValue: {
+      description:
+        "Sets the autoComplete attribute and name attribute on the underlying input element",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    hasTitles: {
+      description:
+        "Adds the selected value and option values as HTML `title` attributes to their respective elements",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    smoothScroll: {
+      description:
+        "Smoothly animate to the selected option when the menu is opened by a mouse click",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: true }
+      }
+    },
+    widthFitOptions: {
+      description:
+        "Sets the width of the wrapping element to fit-content instead of 100%",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    }
+  }
+};
+
+export default meta;
+
+const options = [
+  { text: "Please select an option", value: "" },
+  { text: "OPTION_1", value: "OPTION_1" },
+  { text: "OPTION_2", value: "OPTION_2" },
+  { text: "DISABLED_OPTION", value: "DISABLED_OPTION" }
+];
+
+const disabledValues = ["DISABLED_OPTION"];
+
+const DropdownWithHooks = props => {
+  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
+      {...props}
+      placeholder={options[0].text}
+      options={options}
+      disabledValues={disabledValues}
+      value={value}
+      isOpen={isOpen}
+      isError={isError}
+      onSelect={setValue}
+      onClick={() => !props.disabled && setOpen(!isOpen)}
+      disabled={props.disabled}
+    />
+  );
+};
+
+export const Basic = {
+  render: args => <DropdownWithHooks {...args} />
+};
+
+export const Disabled = {
+  args: {
+    disabled: true
+  },
+  render: args => <DropdownWithHooks {...args} />
+};

package/src/components/atoms/dropdown/Dropdown.theme.js

@@ -1,12 +1,12 @@
 import {
-  HOVER_LIGHT_BLUE,
-  MATISSE_BLUE,
-  MATISSE_BLUE_DARK
+  HAWKES_BLUE,
+  LUCKY_POINT,
+  LUCKY_POINT_DARK
 } from "../../../constants/colors";
 
-const selectedColor = `${MATISSE_BLUE}`;
-const hoverColor = `${HOVER_LIGHT_BLUE}`;
-const focusColor = `${MATISSE_BLUE_DARK}`;
+const selectedColor = `${LUCKY_POINT}`;
+const hoverColor = `${HAWKES_BLUE}`;
+const focusColor = `${LUCKY_POINT_DARK}`;
 
 export const fallbackValues = {
   selectedColor,

package/src/components/atoms/dropdown/DropdownIcon.js

@@ -2,6 +2,7 @@ import React from "react";
 
 const DropdownIcon = () => (
   <svg
+    aria-hidden="true"
     version="1.2"
     xmlns="http://www.w3.org/2000/svg"
     overflow="visible"

package/src/components/atoms/dropdown/DropdownIconV2.js

@@ -0,0 +1,50 @@
+import React from "react";
+
+const DropdownIconV2 = ({
+  width = "18",
+  height = "19",
+  color = "#292A33",
+  ...props
+}) => (
+  <svg
+    aria-hidden="true"
+    width={width}
+    height={height}
+    viewBox={`0 0 ${width} ${height}`}
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    {...props}
+  >
+    <g id="Carrot - Down / Carrot - Down - XS">
+      <path
+        id="Combined Shape"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.1075 7.45743C13.9122 7.26217 13.5956 7.26216 13.4003 7.45743L8.99233 11.8654L4.59199 7.46509C4.39673 7.26983 4.08014 7.26983 3.88488 7.46509L3.45355 7.89643C3.25828 8.09169 3.25828 8.40827 3.45355 8.60354L8.65078 13.8008C8.84604 13.996 9.16263 13.996 9.35789 13.8008L9.78922 13.3694C9.81738 13.3413 9.84147 13.3106 9.86151 13.2781L14.5413 8.59836C14.7365 8.4031 14.7365 8.08652 14.5413 7.89126L14.1075 7.45743Z"
+        fill={color}
+      />
+      <mask
+        id="mask0_3043_4463"
+        style={{ maskType: "luminance" }}
+        maskUnits="userSpaceOnUse"
+        x="3"
+        y="7"
+        width="12"
+        height="7"
+      >
+        <path
+          id="Combined Shape_2"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M14.1075 7.45743C13.9122 7.26217 13.5956 7.26216 13.4003 7.45743L8.99233 11.8654L4.59199 7.46509C4.39673 7.26983 4.08014 7.26983 3.88488 7.46509L3.45355 7.89643C3.25828 8.09169 3.25828 8.40827 3.45355 8.60354L8.65078 13.8008C8.84604 13.996 9.16263 13.996 9.35789 13.8008L9.78922 13.3694C9.81738 13.3413 9.84147 13.3106 9.86151 13.2781L14.5413 8.59836C14.7365 8.4031 14.7365 8.08652 14.5413 7.89126L14.1075 7.45743Z"
+          fill="white"
+        />
+      </mask>
+      <g mask="url(#mask0_3043_4463)">
+        <path id="Path" d="M0 0.5H18V18.5H0V0.5Z" fill={color} />
+      </g>
+    </g>
+  </svg>
+);
+
+export default DropdownIconV2;

package/src/components/atoms/dropdown/index.d.ts

@@ -0,0 +1,59 @@
+import React from "react";
+import Expand from "../../../util/expand";
+import { FormSelectOption } from "../../../types/common";
+
+export interface DropdownThemeValues {
+  selectedColor?: string;
+  hoverColor?: string;
+  focusColor?: string;
+}
+
+export interface DropdownProps {
+  /** Placeholder text displayed when no value is selected */
+  placeholder?: string;
+  /** Array of options to display in the dropdown */
+  options: FormSelectOption[];
+  /** Currently selected value */
+  value?: string;
+  /** Whether the dropdown is currently open */
+  isOpen?: boolean;
+  /** Whether the dropdown is in an error state */
+  isError?: boolean;
+  /** Callback fired when an option is selected */
+  onSelect: (value: string) => void;
+  /** Array of values that should be disabled */
+  disabledValues?: string[];
+  /** Callback fired when the dropdown is clicked */
+  onClick?: () => void;
+  /** Theme values for styling the dropdown */
+  themeValues?: DropdownThemeValues;
+  /** Maximum height of the dropdown content */
+  maxHeight?: string;
+  /** Whether the dropdown width should fit its content */
+  widthFitOptions?: boolean;
+  /** Whether the dropdown is disabled */
+  disabled?: boolean;
+  /** Whether to show title attributes on options */
+  hasTitles?: boolean;
+  /** Whether to auto-erase type-ahead input after timeout */
+  autoEraseTypeAhead?: boolean;
+  /** ID of the element that labels this dropdown */
+  ariaLabelledby?: string;
+  /** ID of the element that describes this dropdown */
+  ariaDescribedby?: string;
+  /** Autocomplete attribute value for browser autofill */
+  autocompleteValue?: string;
+  /** Whether to use smooth scrolling when scrolling to selected item */
+  smoothScroll?: boolean;
+  /** Whether the dropdown has an invalid value */
+  ariaInvalid?: boolean;
+  /** Whether the dropdown is required */
+  isRequired?: boolean;
+  /** Custom CSS styles */
+  extraStyles?: string;
+}
+
+export const Dropdown: React.FC<Expand<DropdownProps> &
+  Omit<React.HTMLAttributes<HTMLElement>, "onSelect">>;
+
+export default Dropdown;