@thecb/components 9.1.0-beta.7 → 9.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.1.0-beta.7",
+  "version": "9.1.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/alert/Alert.js

@@ -24,7 +24,10 @@ const Alert = ({
   enableSmallText = false,
   innerContentPadding = "1rem",
   iconPadding = "0 0 0 1rem",
-  contentFullHeight = false
+  contentFullHeight = false,
+  ariaRole = null,
+  ariaAtomic = true,
+  ariaLive = "polite"
 }) => {
   const Icon = AlertIcons[variant];
   let contentPadding = maxContentWidth
@@ -92,8 +95,9 @@ const Alert = ({
       borderSize={noBorder ? "0px" : "1px"}
       boxShadow={enableBoxShadow ? generateShadows()?.inset?.base : ""}
       extraStyles={extraStyles}
-      role="alert"
-      aria-atomic={true}
+      aria-live={ariaLive}
+      {...(ariaAtomic !== null ? { "aria-atomic": ariaAtomic } : {})}
+      {...(ariaRole !== null ? { role: ariaRole } : {})}
     >
       {maxContentWidth ? (
         <Center maxWidth={maxContentWidth}>{content}</Center>

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

@@ -103,7 +103,7 @@ const Dropdown = ({
   autoEraseTypeAhead = true,
   ariaLabelledby,
   ariaDescribedby,
-  autocompleteValue = null, // browser autofill value, like country-name
+  autocompleteValue, // browser autofill value, like country-name
   smoothScroll = true,
   ariaInvalid = false
 }) => {
@@ -394,14 +394,14 @@ const Dropdown = ({
                           ? STORM_GREY
                           : MINESHAFT_GREY
                       }
-                      extraStyles={`padding-left: 16px; 
+                      extraStyles={`padding-left: 16px;
                       cursor: ${
                         disabledValues.includes(choice.value)
                           ? "default"
                           : "pointer"
-                      }; 
-                      white-space: nowrap; 
-                      overflow: hidden; 
+                      };
+                      white-space: nowrap;
+                      overflow: hidden;
                       text-overflow: ellipsis;`}
                     >
                       {choice.text}

package/src/components/atoms/form-layouts/FormInput.js

@@ -112,7 +112,7 @@ const FormInput = ({
   themeValues,
   background,
   customHeight,
-  autocompleteValue = null,
+  autocompleteValue,
   extraStyles,
   removeFromValue, // regex of characters to remove before setting value
   dataQa = null,

package/src/components/atoms/form-layouts/index.d.ts

@@ -23,7 +23,7 @@ export interface FormInputProps {
   themeValues?: object;
   background?: string;
   customHeight?: string;
-  autocompleteValue?: string | null;
+  autocompleteValue?: string;
   removeFromValue?: RegExp;
   dataQa?: string | null;
 }

package/src/components/atoms/form-select/FormSelect.js

@@ -21,9 +21,10 @@ const FormSelect = ({
   disabled,
   themeValues,
   hasTitles = false,
-  autocompleteValue = null, // browser autofill value, like country-name
+  autocompleteValue, // browser autofill value, like country-name
   smoothScroll = true, // whether the browser should animate scroll to selected item on first open
-  dataQa = null
+  dataQa = null,
+  widthFitOptions = false
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -73,6 +74,7 @@ const FormSelect = ({
           "error message"
         )}
         maxHeight={dropdownMaxHeight}
+        widthFitOptions={widthFitOptions}
         hasTitles={hasTitles}
         placeholder={options[0] ? options[0].text : ""}
         options={options}

package/src/components/atoms/form-select/FormSelect.stories.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
+import { text } from "@storybook/addon-knobs";
 import { createFormState, required } from "redux-freeform";
 
 import FormSelect from "./FormSelect";
@@ -30,17 +31,20 @@ const story = page({
   height: "500px"
 });
 
-const FormWrapper = ({ fields, actions }) => (
+const FormWrapper = props => (
   <FormSelect
+    autocompleteValue={props.autocompleteValue}
     labelTextWhenNoError="Form Select"
     errorMessages={errorMessages}
     options={options}
-    field={fields.thing}
-    fieldActions={actions.fields.thing}
+    field={props.fields.thing}
+    fieldActions={props.actions.fields.thing}
     disabledValues={["disabled"]}
   />
 );
 
 export default story;
 const ConnectedForm = connect(mapStateToProps, mapDispatchToProps)(FormWrapper);
-export const formSelect = () => <ConnectedForm />;
+export const formSelect = () => (
+  <ConnectedForm autocompleteValue={text("autocompleteValue", null, "props")} />
+);

package/src/components/atoms/form-select/index.d.ts

@@ -20,9 +20,10 @@ export interface FormSelectProps {
   disabledValues?: string[];
   themeValues?: object;
   hasTitles?: boolean;
-  autocompleteValue?: string | null;
+  autocompleteValue?: string;
   smoothScroll?: boolean;
   dataQa?: string | null;
+  widthFitOptions?: boolean;
 }
 
 export const FormSelect: React.FC<Expand<FormSelectProps> &

package/src/components/atoms/icons/icons.stories.js

@@ -20,7 +20,6 @@ import {
   CheckmarkIcon,
   BankIcon,
   GenericCard,
-  PaymentIcon,
   AutopayOnIcon,
   SearchIcon,
   AchReturnIcon,
@@ -66,7 +65,6 @@ export const routingNumberImage = () => <RoutingNumberImage />;
 export const checkmarkIcon = () => <CheckmarkIcon />;
 export const bankIcon = () => <BankIcon />;
 export const genericCard = () => <GenericCard />;
-export const paymentIcon = () => <PaymentIcon />;
 export const autopayOnIcon = () => <AutopayOnIcon />;
 export const searchIcon = () => <SearchIcon />;
 export const achReturnIcon = () => <AchReturnIcon />;

package/src/components/atoms/layouts/Box.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import Expand from "../../../util/expand";
 
 export interface BoxProps {
+  autocompleteValue?: string;
   padding?: string;
   borderSize?: string;
   borderColor?: string;

package/src/components/atoms/layouts/Box.js

@@ -13,6 +13,7 @@ import { safeChildren, screenReaderOnlyStyle } from "../../../util/general";
 const Box = forwardRef(
   (
     {
+      autocompleteValue,
       padding = "16px",
       borderSize = "0px",
       borderColor = "transparent",
@@ -50,6 +51,7 @@ const Box = forwardRef(
     ref
   ) => (
     <BoxWrapper
+      autoComplete={autocompleteValue}
       padding={padding}
       borderSize={borderSize}
       borderColor={borderColor}

package/src/components/atoms/line-item/LineItem.js

@@ -1,10 +1,9 @@
 import React from "react";
 import { Cluster, Stack } from "../layouts";
 import Paragraph from "../paragraph";
-import Text from "../text";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./LineItem.theme";
-import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import { STORM_GREY } from "../../../constants/colors";
 
 const LineItem = ({
   description,
@@ -29,15 +28,8 @@ const LineItem = ({
       attr => visibleFields.includes(attr.key) && attr.key !== "description"
     )
     ?.map(attr => (
-      <Paragraph
-        variant={themeValues.paragraphVariant}
-        weight="400"
-        key={attr.key}
-      >
-        <Text weight={FONT_WEIGHT_SEMIBOLD}>{`${formatAttrKeys(
-          attr.key
-        )}:`}</Text>
-        <Text>{` ${attr.value}`}</Text>
+      <Paragraph variant="pS" weight="400" key={attr.key} color={STORM_GREY}>
+        {`${formatAttrKeys(attr.key)}: ${attr.value}`}
       </Paragraph>
     ));
 
@@ -53,7 +45,9 @@ const LineItem = ({
         <Paragraph variant={themeValues.paragraphVariant} weight="400">
           {subDescription}
         </Paragraph>
-        {visibleCustomAttrs && <Stack childGap="0">{visibleCustomAttrs}</Stack>}
+        {visibleCustomAttrs && (
+          <Stack childGap="0.25rem">{visibleCustomAttrs}</Stack>
+        )}
       </Stack>
       {!!displayQuantity && (
         <Paragraph

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

@@ -8,6 +8,7 @@ import Checkbox from "../checkbox";
 const SELECT_ALL = "Select All";
 
 const SearchableSelect = ({
+  autocompleteValue,
   items,
   selectedItems,
   allSelected,
@@ -47,6 +48,7 @@ const SearchableSelect = ({
       }
     >
       <FormInput
+        autocompleteValue={autocompleteValue}
         errorMessages={{}}
         field={fields.searchTerm}
         fieldActions={actions.fields.searchTerm}

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

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import { connect } from "react-redux";
+import { text } from "@storybook/addon-knobs";
+import { createFormState } from "redux-freeform";
+
+import SearchableSelect from "./SearchableSelect";
+import page from "../../../../.storybook/page";
+
+const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
+  searchTerm: {
+    validators: []
+  }
+});
+
+const items = [
+  { name: "Foo", value: "foo-value" },
+  { name: "Bar", value: "bar-value" },
+  { name: "Baz", value: "baz-value" }
+];
+
+const FormWrapper = props => {
+  const [selectedItems, setSelectedItems] = useState(props.selectedItems || []);
+  const selectValues = items => items.map(item => item.value);
+
+  const selectItem = selectedItem => {
+    if (selectValues(selectedItems).includes(selectedItem.value)) {
+      const fewerItems = selectedItems.filter(
+        item => item.value !== selectedItem.value
+      );
+      setSelectedItems(fewerItems);
+    } else {
+      const moreItems = selectedItems.concat(selectedItem);
+      setSelectedItems(moreItems);
+    }
+  };
+
+  return (
+    <SearchableSelect
+      autocompleteValue={props.autocompleteValue}
+      items={items}
+      fields={props.fields}
+      actions={props.actions}
+      selectedItems={selectedItems}
+      selectItem={selectItem}
+    />
+  );
+};
+
+const story = page({
+  title: "Components|Atoms/SearchableSelect",
+  Component: SearchableSelect,
+  reducer,
+  mapStateToProps,
+  mapDispatchToProps
+});
+
+export default story;
+const ConnectedForm = connect(mapStateToProps, mapDispatchToProps)(FormWrapper);
+export const searchableSelect = () => (
+  <ConnectedForm autocompleteValue={text("autocompleteValue", null, "props")} />
+);

package/src/components/atoms/searchable-select/index.d.ts

@@ -7,6 +7,7 @@ import {
 } from "../../../types/common";
 
 export interface SearchableSelectProps {
+  autocompleteValue?: boolean;
   items: SearchableSelectOption[];
   selectedItems: SearchableSelectOption[];
   allSelected: boolean;

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

@@ -9,8 +9,7 @@ const FormStateDropdown = ({
   field,
   fieldActions,
   showErrors,
-  countryCode,
-  autocompleteValue = null
+  countryCode
 }) => {
   const placeholder =
     countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
@@ -23,7 +22,7 @@ const FormStateDropdown = ({
       labelTextWhenNoError={labelTextWhenNoError}
       errorMessages={errorMessages}
       showErrors={showErrors}
-      autocompleteValue={autocompleteValue}
+      autocompleteValue="address-level1"
     />
   );
 };

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

@@ -25,6 +25,7 @@ const story = page({
 });
 
 const FormWrapper = ({
+  autocompleteValue,
   fields,
   actions,
   countryCode,

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

@@ -98,7 +98,7 @@ const AddressForm = ({
           fieldActions={actions.fields.city}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          autocompleteValue="city"
+          autocompleteValue="address-level2"
           dataQa="City"
         />
         <StateProvinceDropdown
@@ -109,7 +109,6 @@ const AddressForm = ({
           fieldActions={actions.fields.stateProvince}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          autocompleteValue="administrative-area"
           dataQa="State or Province"
         />
         <FormInput

package/src/components/molecules/phone-form/PhoneForm.js

@@ -40,7 +40,7 @@ const PhoneForm = ({
           showErrors={showErrors}
           formatter={createFormat(phoneFormats, formatDelimiter)}
           onKeyUp={e => e.key === "Enter" && handleSubmit(e)}
-          autocompleteValue="tel"
+          autocompleteValue="tel-national"
           dataQa="Phone number"
           isNum={true}
         />