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

package/src/components/molecules/module/Module.stories.js

@@ -0,0 +1,273 @@
+import React from "react";
+import { INFO_BLUE } from "../../../constants/colors";
+import { Box, Stack, Cluster } from "../../atoms/layouts";
+import Heading from "../../atoms/heading";
+import Paragraph from "../../atoms/paragraph";
+import Module from "./Module";
+import { fn } from "@storybook/test";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import WalletIcon from "../../atoms/icons/WalletIcon";
+import ButtonWithAction from "../../atoms/button-with-action";
+
+const meta = {
+  title: "Molecules/Module",
+  component: Module,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    variant: "default",
+    as: undefined,
+    disabled: undefined,
+    heading: undefined,
+    rightTitleContent: undefined,
+    titleID: "",
+    spacing: "1rem",
+    padding: "0",
+    margin: "0",
+    spacingBottom: "2.5rem",
+    fontSize: undefined,
+    children: undefined,
+    allowContentOverflow: false
+  },
+  argTypes: {
+    variant: {
+      description:
+        "Variant of the module, one of `default`, `largeTitle`, or `small` ",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "default" }
+      }
+    },
+    as: {
+      description: "HTML element type for the module's title text",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    disabled: {
+      description: "Whether the module is disabled",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    heading: {
+      description:
+        "Text or a React Component to use in the heading, if rightTitleContent is undefined, value is wrapped in a `<Title />` atom.",
+      table: {
+        type: { summary: "string/React Component" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    rightTitleContent: {
+      description: "Component to render right justified with heading text",
+      table: {
+        type: { summary: "React Component" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    titleID: {
+      description: "ID value for the heading title element",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    spacing: {
+      description: "Top margin for heading text",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "1rem" }
+      }
+    },
+    padding: {
+      description: "Padding value for the module container",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "0" }
+      }
+    },
+    margin: {
+      description: "Margin value for the module container",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "0" }
+      }
+    },
+    spacingBottom: {
+      descripton: "Padding below the module",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "2.5rem" }
+      }
+    },
+    fontSize: {
+      description: "Font size of the module's title text",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    children: {
+      description: "React Components to render as children of the module",
+      table: {
+        type: { summary: "React Component" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    allowContentOverflow: {
+      description:
+        "Whether content can overflow the heading portion of the module",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const BasicModule = {
+  args: {
+    heading: "Guest Checkout",
+    padding: "1.5rem",
+    spacing: "0",
+    spacingBottom: "0",
+    as: "h2",
+    fontSize: "1.5rem"
+  },
+  render: args => {
+    return (
+      <Module {...args}>
+        <Cluster justify="center" align="center" childGap="1rem">
+          <Box padding="0" extraStyles={`display: flex; flex: 1;`}>
+            {false ? (
+              <Paragraph>
+                Make a payment without your previously saved payment methods and
+                addresses.
+              </Paragraph>
+            ) : (
+              <Paragraph>
+                You can create a wallet after you finish checking out
+              </Paragraph>
+            )}
+          </Box>
+          <Box padding="0" extraStyles={`display: flex; flex: 1;`}>
+            <ButtonWithAction
+              text="Check out as Guest"
+              variant={"secondary"}
+              dataQa={"Check out as Guest"}
+              action={fn()}
+              aria-labelledby="guest-checkout-button"
+              role="link"
+              extraStyles={`width: 100%;`}
+            />
+          </Box>
+        </Cluster>
+      </Module>
+    );
+  }
+};
+
+export const DisabledModule = {
+  args: {
+    heading: "Guest Checkout",
+    padding: "1.5rem",
+    spacing: "0",
+    spacingBottom: "0",
+    as: "h2",
+    fontSize: "1.5rem",
+    disabled: true
+  },
+  render: args => {
+    return (
+      <Module {...args}>
+        <Cluster justify="center" align="center" childGap="1rem">
+          <Box padding="0" extraStyles={`display: flex; flex: 1;`}>
+            {false ? (
+              <Paragraph>
+                Make a payment without your previously saved payment methods and
+                addresses.
+              </Paragraph>
+            ) : (
+              <Paragraph>
+                You can create a wallet after you finish checking out
+              </Paragraph>
+            )}
+          </Box>
+          <Box padding="0" extraStyles={`display: flex; flex: 1;`}>
+            <ButtonWithAction
+              text="Check out as Guest"
+              variant={"secondary"}
+              dataQa={"Check out as Guest"}
+              action={fn()}
+              aria-labelledby="guest-checkout-button"
+              role="link"
+              extraStyles={`width: 100%;`}
+            />
+          </Box>
+        </Cluster>
+      </Module>
+    );
+  }
+};
+
+export const DeprecatedModule = {
+  args: {
+    padding: "0",
+    spacing: "0",
+    spacingBottom: "1.5rem"
+  },
+  render: args => {
+    return (
+      <Module {...args}>
+        <Box background={INFO_BLUE} padding={"1rem"} minWidth="100%">
+          <Stack childGap={"0"}>
+            <Cluster
+              justify="flex-start"
+              align={"flex-start"}
+              nowrap
+              childGap="1rem"
+            >
+              <Box padding="0" extraStyles={`flex: 2;`}>
+                <Stack childGap="0.5rem">
+                  <Box padding="0">
+                    <Heading variant="h6" as="h2" weight={FONT_WEIGHT_SEMIBOLD}>
+                      Register for Cityville Wallet
+                    </Heading>
+                  </Box>
+                  <Box padding="0">
+                    <Paragraph>
+                      Next time, use wallet to pay quicker with saved payment
+                      methods and personal information
+                    </Paragraph>
+                  </Box>
+                </Stack>
+              </Box>
+              <Box
+                padding="0"
+                extraStyles={`> svg { width: 190px; height: 114px;
+                } flex: 1;`}
+              >
+                <WalletIcon />
+              </Box>
+            </Cluster>
+            <Box padding={"1rem 0 0"} extraStyles={`width: 100%;`}>
+              <ButtonWithAction
+                text="Register Now"
+                variant="primary"
+                action={fn()}
+                extraStyles={`width: 100%;`}
+                dataQa="Register Now Widget"
+              />
+            </Box>
+          </Stack>
+        </Box>
+      </Module>
+    );
+  }
+};

package/src/components/molecules/multiple-select-filter/MultipleSelectFilter.js

@@ -0,0 +1,229 @@
+import React, { useState, useEffect, useRef } from "react";
+import { fallbackValues } from "./MultipleSelectFilter.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { Box } from "../../atoms/layouts";
+import { GHOST_GREY, WHITE, CHARADE_GREY } from "../../../constants/colors";
+import { noop } from "../../../util/general";
+import { FilterContainer } from "./MultipleSelectFilter.styled";
+import ActionLinkButton from "./__private__/ActionLinkButton";
+import FilterButton from "./__private__/FilterButton";
+import FilterDropdown from "./__private__/FilterDropdown";
+import SearchBox from "./__private__/SearchBox";
+import FilterableList from "./__private__/FilterableList";
+import useOutsideClickHook from "../../../hooks/use-outside-click";
+import { mergeOptions } from "./__private__/util";
+
+const MultipleSelectFilter = ({
+  actions,
+  autocompleteValue,
+  btnContentOverride,
+  btnExtraStyles,
+  disabled,
+  dropdownExtraStyles,
+  extraStyles,
+  fields,
+  filterLabel,
+  hasIcon = false,
+  icon: Icon,
+  maxSelections,
+  name = "MultipleSelectFilter",
+  onApply = noop,
+  onClear = noop,
+  options,
+  placeholder = "Search",
+  searchable = true,
+  themeValues,
+  truncateBtnTextWidth = "15rem",
+  activeAppliedOptions
+}) => {
+  // State to manage whether the dropdown is open or closed
+  const [opened, setOpened] = useState(false);
+
+  // State to manage the currently selected options
+  const [selectedOptions, setSelectedOptions] = useState([]);
+
+  // State to manage the applied options, initialized with activeAppliedOptions or an empty array
+  const [appliedOptions, setAppliedOptions] = useState(
+    activeAppliedOptions || []
+  );
+
+  // State to track whether the user has interacted with the component
+  const [hasInteracted, setHasInteracted] = useState(false);
+
+  // Reference to keep track of the opened state across renders without causing re-renders
+  const openedRef = useRef(opened);
+
+  // Hook to detect clicks outside the component and close the dropdown
+  const containerRef = useOutsideClickHook(() => handleOnClose());
+
+  // References to various elements within the component
+  const dropdownRef = useRef(null);
+  const filterButtonRef = useRef(null);
+  const applyFilterButtonRef = useRef(null);
+
+  // IDs for accessibility and identification purposes
+  const filterDropdownID = `${name}-filter-dropdown`;
+  const listGroupID = `${name}-list-group`;
+
+  const handleOnClose = () => {
+    if (openedRef.current) {
+      setOpened(false);
+      actions.fields.searchTerm.set("");
+    }
+  };
+
+  useEffect(() => {
+    openedRef.current = opened;
+    if (!opened) {
+      if (hasInteracted) {
+        onApply(selectedOptions);
+        setAppliedOptions(selectedOptions);
+      }
+    } else {
+      setHasInteracted(true);
+    }
+  }, [opened]);
+
+  useEffect(() => {
+    // Update the applied options state with the current active applied options,
+    // or an empty array if activeAppliedOptions is undefined or null.
+    // This ensures that the current applied options are in sync with the parent component.
+    setAppliedOptions(activeAppliedOptions || []);
+
+    // Merge the selected options with the active applied options.
+    const mergedSelections = mergeOptions(
+      selectedOptions,
+      activeAppliedOptions
+    );
+    setSelectedOptions(mergedSelections);
+  }, [activeAppliedOptions]);
+
+  useEffect(() => {
+    const handleKeyDown = event => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+      }
+      /*
+        Close the dropdown if we hit the Escape key, 
+        or if we are tabbing forward away from the last button (apply button) 
+        or tabbing backward past the filter button.
+      */
+      if (
+        event.key === "Escape" ||
+        (event.key === "Tab" &&
+          !event.shiftKey &&
+          applyFilterButtonRef.current &&
+          applyFilterButtonRef.current.contains(event.target)) ||
+        (event.key === "Tab" &&
+          event.shiftKey &&
+          filterButtonRef.current &&
+          filterButtonRef.current.contains(event.target))
+      ) {
+        handleOnClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
+  return (
+    <FilterContainer ref={containerRef} extraStyles={`${extraStyles}`}>
+      <FilterButton
+        ref={filterButtonRef}
+        btnContentOverride={btnContentOverride}
+        action={() => {
+          actions.fields.searchTerm.set("");
+          setOpened(!opened);
+        }}
+        opened={opened}
+        backgroundHoverColor={
+          appliedOptions?.length
+            ? themeValues.secondaryHoverColor
+            : themeValues.primaryHoverColor
+        }
+        backgroundColor={
+          appliedOptions?.length
+            ? themeValues.secondaryColor
+            : themeValues.primaryColor
+        }
+        textColor={appliedOptions?.length ? WHITE : CHARADE_GREY}
+        textHoverColor={
+          opened && !appliedOptions?.length ? CHARADE_GREY : WHITE
+        }
+        name={name}
+        filterDropdownID={filterDropdownID}
+        hasIcon={hasIcon}
+        icon={Icon}
+        truncateBtnTextWidth={truncateBtnTextWidth}
+        filterLabel={filterLabel}
+        selectedOptions={selectedOptions}
+        extraStyles={btnExtraStyles}
+        dataAppliedOptions={appliedOptions?.length}
+      ></FilterButton>
+      <FilterDropdown
+        id={filterDropdownID}
+        ref={dropdownRef}
+        ariaOwns={listGroupID}
+        ariaControls={listGroupID}
+        opened={opened}
+        extraStyles={dropdownExtraStyles}
+      >
+        <SearchBox
+          showSearchBox={searchable && options?.length > 8}
+          autocompleteValue={autocompleteValue}
+          fields={fields}
+          actions={actions}
+          placeholder={placeholder}
+          disabled={disabled}
+        ></SearchBox>
+        <FilterableList
+          id={listGroupID}
+          options={options}
+          appliedOptions={appliedOptions}
+          themeValues={themeValues}
+          selectedOptions={selectedOptions}
+          maxSelections={maxSelections}
+          name={name}
+          setSelectedOptions={setSelectedOptions}
+          searchTerm={fields?.searchTerm}
+        ></FilterableList>
+        <Box
+          padding="0 0.5rem 0.0625rem 0.5rem"
+          extraStyles={`
+            max-height: 100px; 
+            display: flex; 
+            flex-flow: row; 
+            justify-content: space-between;
+            border-top: 1px solid ${GHOST_GREY};
+          `}
+        >
+          <ActionLinkButton
+            action={() => {
+              setSelectedOptions([]);
+              handleOnClose();
+              onClear();
+            }}
+            text="Clear"
+            dataQa={`${name}-clear-filters`}
+            ariaLabel={"Clear all filters"}
+          ></ActionLinkButton>
+          <ActionLinkButton
+            ref={applyFilterButtonRef}
+            action={() => handleOnClose()}
+            text="Apply"
+            dataQa={`${name}-apply-filters`}
+            ariaLabel={"Apply all filters"}
+          ></ActionLinkButton>
+        </Box>
+      </FilterDropdown>
+    </FilterContainer>
+  );
+};
+
+export default themeComponent(
+  MultipleSelectFilter,
+  "MultipleSelectFilter",
+  fallbackValues
+);

package/src/components/molecules/multiple-select-filter/MultipleSelectFilter.oldstories.js

@@ -0,0 +1,74 @@
+import React, { useState } from "react";
+import { connect } from "react-redux";
+import { text } from "@storybook/addon-knobs";
+import { createFormState } from "redux-freeform";
+import MultipleSelectFilter from "./MultipleSelectFilter";
+import page from "../../../../.storybook/page";
+import { AgencyIcon } from "../../atoms/icons";
+
+const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
+  searchTerm: {
+    validators: []
+  }
+});
+
+const items = [
+  { name: "Board of Supervisors", value: "Board of Supervisors" },
+  { name: "Animal Care and Control", value: "Animal Care and Control" },
+  {
+    name: "Department of Building Inspection",
+    value: "Department of Building Inspection"
+  },
+  { name: "Department of Public Health", value: "Department of Public Health" },
+  {
+    name: "Department of Public Health - 49 SVN",
+    value: "Department of Public Health - 49 SVN"
+  },
+  { name: "Department of Public Works", value: "Department of Public Works" },
+  {
+    name: "Department of Public Works - 49SVN",
+    value: "Department of Public Works - 49SVN"
+  },
+  {
+    name: "DPH Zuckerberg General Parking",
+    value: "DPH Zuckerberg General Parking"
+  },
+  {
+    name: "Entertainment Commission - 49SVN",
+    value: "Entertainment Commission - 49SVN"
+  },
+  { name: "Entertainment Commission", value: "Entertainment Commission " }
+];
+
+const FormWrapper = props => {
+  return (
+    <MultipleSelectFilter
+      autocompleteValue={props.autocompleteValue}
+      extraStyles={`margin-bottom: 500px;`}
+      filterLabel={"Agencies"}
+      hasIcon={true}
+      icon={AgencyIcon}
+      options={items}
+      name={"Agencies"}
+      placeholder={"Find an agency"}
+      fields={props.fields}
+      actions={props.actions}
+      btnExtraStyles={props.btnExtraStyles}
+      dropdownExtraStyles={props.dropdownExtraStyles}
+    />
+  );
+};
+
+const story = page({
+  title: "Components|Molecules/MultipleSelectFilter",
+  Component: MultipleSelectFilter,
+  reducer,
+  mapStateToProps,
+  mapDispatchToProps
+});
+
+export default story;
+const ConnectedForm = connect(mapStateToProps, mapDispatchToProps)(FormWrapper);
+export const multipleSelectFilter = () => (
+  <ConnectedForm autocompleteValue={text("autocompleteValue", null, "props")} />
+);

package/src/components/molecules/multiple-select-filter/MultipleSelectFilter.styled.js

@@ -0,0 +1,65 @@
+import React, { forwardRef } from "react";
+import styled from "styled-components";
+import { Box } from "../../atoms/layouts";
+import ButtonWithAction from "../../atoms/button-with-action";
+
+const StyledFilterContainer = styled(Box)`
+  position: relative;
+  overflow: visible;
+  box-sizing: border-box;
+  padding: 0;
+`;
+
+export const FilterContainer = forwardRef((props, ref) => (
+  <StyledFilterContainer ref={ref} {...props} />
+));
+
+const StyledFilterDropdown = styled(Box)`
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: 0;
+  width: 18.4rem;
+  background-color: white;
+  z-index: 1000;
+  border-radius: 0.25rem;
+  box-shadow: 0px 1px 0px 0px rgba(41, 42, 51, 0.1),
+    0px 2px 4px 0px rgba(41, 42, 51, 0.2), 0px 1px 2px 0px rgba(41, 42, 51, 0.1);
+  padding: 0;
+  max-width: 18.625rem;
+`;
+
+export const FilterDropdownContainer = forwardRef((props, ref) => (
+  <StyledFilterDropdown ref={ref} {...props} />
+));
+
+const FilterButton = styled(ButtonWithAction)`
+  min-width: auto;
+  min-height: 2.3125rem;
+  margin: 0;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  box-shadow: 0px 1px 2px 0px rgba(41, 42, 51, 0.1);
+  ${({ opened, textColor, textHoverColor }) => `
+    color: ${opened ? textHoverColor : textColor};
+    :hover,
+    :active,
+    :focus {
+      color: ${textHoverColor};
+      > * {
+        color: ${textHoverColor};
+      }
+    }
+  `}
+  ${({ opened, backgroundColor, backgroundHoverColor }) => `
+    background-color: ${opened ? backgroundHoverColor : backgroundColor};  
+    :hover,
+    :active,
+    :focus {
+      background-color: ${backgroundHoverColor};
+    }
+  `}
+`;
+
+export const StyledFilterButton = forwardRef((props, ref) => (
+  <FilterButton ref={ref} {...props} />
+));

package/src/components/molecules/multiple-select-filter/MultipleSelectFilter.theme.js

@@ -0,0 +1,13 @@
+import { INFO_BLUE, MATISSE_BLUE, WHITE } from "../../../constants/colors";
+
+const primaryColor = WHITE;
+const primaryHoverColor = INFO_BLUE;
+const secondaryColor = MATISSE_BLUE;
+const secondaryHoverColor = "#115D7E";
+
+export const fallbackValues = {
+  primaryColor,
+  primaryHoverColor,
+  secondaryColor,
+  secondaryHoverColor
+};

package/src/components/molecules/multiple-select-filter/__private__/ActionLinkButton.js

@@ -0,0 +1,27 @@
+import React, { forwardRef } from "react";
+import { ButtonWithAction } from "../../../atoms";
+import { FONT_WEIGHT_REGULAR } from "../../../../constants/style_constants";
+
+const ActionLinkButton = forwardRef(
+  ({ action, text, dataQa, ariaLabel }, ref) => {
+    return (
+      <ButtonWithAction
+        ref={ref}
+        action={action}
+        variant="tertiary"
+        extraStyles={`
+        padding: 0.2rem; 
+        margin: 0.5rem; 
+        min-height: auto; 
+        min-width: auto;
+      `}
+        textExtraStyles={`font-weight: ${FONT_WEIGHT_REGULAR};`}
+        text={text}
+        dataQa={dataQa}
+        aria-label={ariaLabel}
+      ></ButtonWithAction>
+    );
+  }
+);
+
+export default ActionLinkButton;