@thecb/components 9.0.6 → 9.0.7-beta.1

package/package.json

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

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-select/FormSelect.js

@@ -21,10 +21,9 @@ 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,
-  widthFitOptions = false
+  dataQa = null
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -74,7 +73,6 @@ 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

@@ -23,7 +23,6 @@ export interface FormSelectProps {
   autocompleteValue?: string | null;
   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.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/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/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

@@ -109,7 +109,6 @@ const AddressForm = ({
           fieldActions={actions.fields.stateProvince}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          autocompleteValue="address-level1"
           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}
         />