@thecb/components 10.7.8 → 10.8.0-beta.1

package/package.json

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

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

@@ -1,7 +1,8 @@
 import React from "react";
+import { CHARADE_GREY } from "../../../constants/colors";
 
-const SearchIcon = () => (
-  <svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1">
+const SearchIcon = ({ color = CHARADE_GREY, size = "22px" }) => (
+  <svg width={size} height={size} viewBox="0 0 22 22" version="1.1">
     <g
       id="Debt-Search"
       stroke="none"
@@ -12,7 +13,7 @@ const SearchIcon = () => (
       <g
         id="Debt-Search---Expanded"
         transform="translate(-155.000000, -258.000000)"
-        stroke="#292A33"
+        stroke={color}
         strokeWidth="2"
       >
         <g id="debt-search" transform="translate(132.000000, 189.000000)">

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

@@ -12,6 +12,7 @@ export * from "./nav-footer";
 export * from "./nav-header";
 export * from "./nav-tabs";
 export * from "./paragraph";
+export * from "./search";
 export * from "./searchable-select";
 export * from "./spinner";
 export * from "./table";

package/src/components/atoms/index.js

@@ -37,6 +37,7 @@ export { default as Placeholder } from "./placeholder";
 export { default as ProcessingFee } from "./processing-fee";
 export { default as RadioButtonWithLabel } from "./radio-button-with-label";
 export { default as RadioButton } from "../molecules/radio-section/radio-button/RadioButton";
+export { default as Search } from "./search";
 export { default as SearchableSelect } from "./searchable-select";
 export { default as SolidDivider } from "./solid-divider";
 export { default as Spinner } from "./spinner";

package/src/components/atoms/search/Search.js

@@ -0,0 +1,122 @@
+import React from "react";
+import { Box, Cluster } from "../layouts";
+import { ButtonWithAction } from "..";
+import { FormInput } from "../form-layouts";
+import { SearchIcon } from "../icons";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./Search.theme";
+import { noop } from "../../../util/general";
+
+/**
+ * Search requires a redux-freeform field and actions to use
+ * for its `FormInput` state, as well as a dataset and the keys you wish
+ * to include in your search.
+ *
+ * The `dataset` expected is a one-dimensional array of objects.
+ * Properties within the objects are included in the traversal
+ * when they are present in the `valuesToSearchFor` prop.
+ *
+ * This component expects implementations of `onSearchCallback` and `onClearCallback`
+ * in the consuming application. For example, if you want to filter a table based on
+ * this, your callbacks should trigger the adjustment of your table data's state in your
+ * application implementing Search.
+ */
+
+const Search = ({
+  field,
+  fieldActions,
+  dataset,
+  valuesToSearchFor,
+  onSearchCallback,
+  onClearCallback,
+  disabled,
+  placeholder = "Search",
+  searchOnKeypress = false,
+  searchContainerWidth = null, // Defaults to full width
+  ariaControlsId,
+  themeValues
+}) => {
+  const searchTerm = field.rawValue;
+
+  const getFilteredDataset = () => {
+    if (!searchTerm) return dataset;
+    return dataset.filter(item =>
+      valuesToSearchFor.some(key =>
+        item[key]
+          ?.toString()
+          .toLowerCase()
+          .includes(searchTerm.toLowerCase())
+      )
+    );
+  };
+
+  const handleSubmit = () => onSearchCallback(getFilteredDataset());
+
+  return (
+    <Cluster extraStyles={`overflow: visible;`}>
+      <Box
+        padding="0"
+        extraStyles={`
+          flex-grow: ${searchContainerWidth ? 0 : 1}; 
+          width: ${searchContainerWidth} : auto;`}
+      >
+        <FormInput
+          id="searchInput"
+          role="search"
+          aria-controls={ariaControlsId}
+          extraStyles={`border-radius: 2px 0 0 2px;`}
+          onKeyDown={e =>
+            searchOnKeypress || e.key === "Enter" ? handleSubmit() : noop
+          }
+          field={field}
+          fieldActions={fieldActions}
+          placeholder={placeholder}
+          errorMessages={{}}
+          disabled={disabled}
+        />
+        {searchTerm.length > 0 && (
+          <Box
+            padding="0"
+            extraStyles={`
+            position: absolute;
+            right: 8px;
+            top: 10px;
+          `}
+          >
+            <ButtonWithAction
+              extraStyles={`* > span { text-decoration: none; }`}
+              type="reset"
+              variant="smallGhost"
+              text="Clear Search"
+              aria-label="Clear Search"
+              action={() => {
+                fieldActions.set("");
+                onClearCallback();
+              }}
+            />
+          </Box>
+        )}
+      </Box>
+      <ButtonWithAction
+        type="submit"
+        aria-label="Submit search"
+        minWidth="0"
+        width="3rem"
+        padding=".5rem"
+        extraStyles={`
+          height: 48px; 
+          margin: 4px 0 0;
+          border-radius: 0 2px 2px 0;
+          background: ${themeValues.searchIconBackgroundColor};
+        `}
+        variant="primary"
+        contentOverride={true}
+        action={handleSubmit}
+      >
+        <SearchIcon color={themeValues.searchIconColor} size={24} />
+      </ButtonWithAction>
+    </Cluster>
+  );
+};
+
+export default themeComponent(Search, "Search", fallbackValues);

package/src/components/atoms/search/Search.stories.js

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import Search from "./Search";
+import page from "../../../../.storybook/page";
+import { createFormState } from "redux-freeform";
+import { connect } from "react-redux";
+
+const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
+  searchTerm: {
+    validators: []
+  }
+});
+
+const dataset = [
+  { id: 1, name: "Leslie Knope", email: "leslie.knope@email.com" },
+  { id: 2, name: "Ron Swanson", email: "ron.swanson@email.com" },
+  { id: 3, name: "April Ludgate", email: "april.ludgate@email.com" }
+];
+
+const FormWrapper = props => {
+  const [filteredDataset, setFilteredDataset] = useState(dataset);
+  const onSearch = searchResults => setFilteredDataset(searchResults);
+  const onClear = () => setFilteredDataset(dataset);
+
+  return (
+    <>
+      <Search
+        placeholder="Search by Name or Email Address"
+        ariaControlsId="resultList"
+        searchOnKeypress={false}
+        valuesToSearchFor={["name", "email"]}
+        field={props.fields.searchTerm}
+        fieldActions={props.actions.fields.searchTerm}
+        dataset={dataset}
+        onSearchCallback={onSearch}
+        onClearCallback={onClear}
+      />
+      <ul id="resultList">
+        {filteredDataset.map(item => (
+          <li key={item.id}>
+            {item.name} | {item.email}
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+};
+
+const story = page({
+  title: "Components|Atoms/Search",
+  Component: Search,
+  reducer,
+  mapStateToProps,
+  mapDispatchToProps
+});
+
+export default story;
+const ConnectedForm = connect(mapStateToProps, mapDispatchToProps)(FormWrapper);
+export const search = () => <ConnectedForm />;

package/src/components/atoms/search/Search.theme.js

@@ -0,0 +1,9 @@
+import { MATISSE_BLUE, WHITE } from "../../../constants/colors";
+
+const searchIconColor = WHITE;
+const searchIconBackgroundColor = MATISSE_BLUE;
+
+export const fallbackValues = {
+  searchIconColor,
+  searchIconBackgroundColor
+};

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

@@ -0,0 +1,25 @@
+import React from "react";
+import Expand from "../../../util/expand";
+import { Field, FieldActions } from "../../../types/common";
+
+// Keys within this array will be referenced based on the
+// `valuesToSearchFor` array.
+type FlexibleObjectArray = Array<{ [key: string]: any }>;
+
+export interface SearchProps {
+  field: Field;
+  fieldActions: FieldActions;
+  dataset: FlexibleObjectArray;
+  valuesToSearchFor: string[];
+  onSearchCallback: () => void;
+  onClearCallback: () => void;
+  disabled?: boolean;
+  placeholder?: string;
+  searchOnKeypress?: boolean;
+  formWidth?: string;
+  autocompleteValue?: string;
+  themeValues?: object;
+}
+
+export const Search: React.FC<Expand<SearchProps> &
+  React.HTMLAttributes<HTMLElement>>;

package/src/components/atoms/search/index.js

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