@thecb/components 2.2.0

package/src/components/atoms/display-box/index.js

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

package/src/components/atoms/display-card/DisplayCard.js

@@ -0,0 +1,65 @@
+import React from "react";
+import Stack from "../layouts/Stack";
+import Box from "../layouts/Box";
+import Text from "../text";
+import Paragraph from "../paragraph";
+import Cluster from "../layouts/Cluster";
+import ButtonWithAction from "../button-with-action";
+import ButtonWithLink from "../button-with-link";
+import { WHITE, CHARADE_GREY } from "../../../constants/colors";
+
+const DisplayCard = ({
+  title,
+  item,
+  buttonText,
+  buttonAction,
+  url,
+  link = false
+}) => (
+  <Box padding="0 0 16px">
+    <Stack childGap="0rem">
+      <Box padding="0 0 8px 0">
+        <Paragraph
+          variant="pL"
+          color={CHARADE_GREY}
+          extraStyles={`letter-spacing: 0.29px`}
+        >
+          {title}
+        </Paragraph>
+      </Box>
+      <Box padding="0">
+        <Box
+          padding="24px"
+          borderSize="1px"
+          borderRadius="4px"
+          background={WHITE}
+          boxShadow="0px 2px 14px 0px rgb(246, 246, 249),
+            0px 3px 8px 0px rgb(202, 206, 216)"
+        >
+          <Cluster justify="space-between" align="center">
+            <Text variant="p" color={CHARADE_GREY}>
+              {item}
+            </Text>
+            {link ? (
+              <ButtonWithLink
+                text={buttonText}
+                url={url}
+                variant="smallGhost"
+                dataQa={buttonText}
+              />
+            ) : (
+              <ButtonWithAction
+                text={buttonText}
+                action={buttonAction}
+                variant="smallGhost"
+                dataQa={buttonText}
+              />
+            )}
+          </Cluster>
+        </Box>
+      </Box>
+    </Stack>
+  </Box>
+);
+
+export default DisplayCard;

package/src/components/atoms/display-card/index.js

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

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

@@ -0,0 +1,299 @@
+import React, { useEffect, Fragment, useState, useRef, createRef } from "react";
+import { pipe, find, map, prop, fromMaybe } from "sanctuary";
+import { Box, Stack } from "../layouts";
+import Text from "../text";
+import { noop } from "../../../util/general";
+import DropdownIcon from "./DropdownIcon";
+import styled from "styled-components";
+
+import {
+  WHITE,
+  GREY_CHATEAU,
+  MINESHAFT_GREY,
+  ERROR_COLOR
+} from "../../../constants/colors";
+import { fallbackValues } from "./Dropdown.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const IconWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  transition: transform 0.3s ease;
+  ${({ open }) => (open ? "transform: rotate(-180deg)" : "")}
+`;
+
+const DropdownContentWrapper = styled.div`
+  transform-origin: 0 0;
+  border: 1px solid ${GREY_CHATEAU};
+  border-radius: 2px;
+  background-color: ${WHITE};
+  padding: 8px 0 8px;
+  position: absolute;
+  width: 100%;
+  max-height: 400px;
+  overflow-y: scroll;
+  z-index: 1;
+  box-sizing: border-box;
+  &:focus {
+    outline: none;
+  }
+`;
+
+const DropdownItemWrapper = styled.div`
+  background-color: ${({ selected, themeValues }) =>
+    selected ? themeValues.selectedColor : WHITE};
+  text-align: start;
+  border-size: 0px;
+  border-color: transparent;
+  box-shadow: none;
+  padding: 1rem;
+  box-sizing: border-box;
+  width: 100%;
+
+  &:hover {
+    background-color: ${({ selected, disabled, themeValues }) =>
+      selected
+        ? themeValues.selectedColor
+        : disabled
+        ? WHITE
+        : themeValues.hoverColor};
+  }
+  &:focus {
+    background-color: ${({ selected, disabled, themeValues }) =>
+      selected
+        ? themeValues.selectedColor
+        : disabled
+        ? WHITE
+        : themeValues.hoverColor};
+    outline: none;
+  }
+`;
+
+const SearchInput = styled.input`
+  border: none;
+  background-color: ${({ themeValues }) =>
+    themeValues.hoverColor && themeValues.hoverColor};
+  font-size: 16px;
+  height: 24px;
+`;
+
+const Dropdown = ({
+  placeholder,
+  options,
+  value,
+  isOpen,
+  isError,
+  onSelect,
+  disabledValues = [],
+  onClick = noop,
+  themeValues
+}) => {
+  const [inputValue, setInputValue] = useState("");
+  const [optionsState, setOptionsState] = useState([]);
+  const [filteredOptions, setFilteredOptions] = useState([]);
+  const [optionsChanged, setOptionsChanged] = useState(true);
+
+  if (optionsState !== options) {
+    setOptionsState(options);
+    setOptionsChanged(true);
+  }
+
+  if (optionsChanged) {
+    setFilteredOptions(options);
+    setOptionsChanged(false);
+  }
+
+  const [timer, setTimer] = useState(null);
+  const optionRefs = useRef([...Array(options.length)].map(() => createRef()));
+  const dropdownRef = useRef(null);
+
+  const onKeyDown = e => {
+    const { key, keyCode } = e;
+    const focus = document.activeElement;
+    const optionEl = optionRefs.current.find(ref => ref.current === focus);
+    switch (key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (optionEl) {
+          if (optionEl.current.nextElementSibling) {
+            optionEl.current.nextElementSibling.focus();
+          } else {
+            // If at the end of the options list, don't do anything
+            break;
+          }
+        } else {
+          onClick();
+        }
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (optionEl) {
+          if (optionEl.current.previousElementSibling) {
+            optionEl.current.previousElementSibling.focus();
+          } else {
+            // If at the start of the options list, don't do anything
+            break;
+          }
+        } else {
+          onClick();
+        }
+        break;
+      case "Tab":
+        if (isOpen) {
+          e.preventDefault();
+        }
+        break;
+      case "Backspace" || "Delete":
+        e.preventDefault();
+        setInputValue(inputValue.slice(0, -1));
+        break;
+    }
+    if ((keyCode > 64 && keyCode < 91) || keyCode == 32) {
+      e.preventDefault();
+      setInputValue(inputValue + key);
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen && optionRefs.current[0].current) {
+      optionRefs.current[0].current.focus();
+    }
+    clearTimeout(timer);
+    setInputValue("");
+  }, [isOpen]);
+
+  useEffect(() => {
+    clearTimeout(timer);
+    setTimer(setTimeout(() => setInputValue(""), 2000));
+
+    setFilteredOptions(
+      options.filter(
+        option =>
+          option.value.toLowerCase().startsWith(inputValue.toLowerCase()) ||
+          option.text.toLowerCase().startsWith(inputValue.toLowerCase())
+      )
+    );
+  }, [inputValue]);
+
+  useEffect(() => {
+    if (
+      !isOpen &&
+      filteredOptions[0] &&
+      !disabledValues.includes(filteredOptions[0].value) &&
+      filteredOptions[0].text != placeholder
+    ) {
+      onSelect(filteredOptions[0].value);
+    }
+    if (optionRefs.current[0].current) {
+      optionRefs.current[0].current.focus();
+    } else if (isOpen) {
+      dropdownRef.current.focus();
+    }
+  }, [filteredOptions]);
+
+  return (
+    <Box
+      onKeyDown={onKeyDown}
+      onClick={onClick}
+      tabIndex={0}
+      padding="0"
+      width="100%"
+      focusStyles={`background-color: ${themeValues.hoverColor};`}
+      aria-expanded={isOpen}
+    >
+      <Box
+        as="button"
+        background={isOpen ? themeValues.hoverColor : WHITE}
+        minHeight="52px"
+        width="100%"
+        padding="16px"
+        hoverStyles={`background-color: ${themeValues.hoverColor};`}
+        focusStyles={`background-color: ${themeValues.hoverColor};`}
+        borderSize="1px"
+        borderColor={
+          isError
+            ? ERROR_COLOR
+            : isOpen
+            ? themeValues.selectedColor
+            : GREY_CHATEAU
+        }
+        borderRadius="2px"
+        extraStyles={`tabindex: 0;`}
+        dataQa={placeholder}
+      >
+        <Stack direction="row" bottomItem={2}>
+          {isOpen ? (
+            <SearchInput
+              value={inputValue}
+              onChange={noop}
+              themeValues={themeValues}
+            />
+          ) : (
+            <Text variant="p">
+              {value
+                ? pipe([
+                    find(option => option.value === value),
+                    map(prop("text")),
+                    fromMaybe(placeholder)
+                  ])(options)
+                : placeholder}
+            </Text>
+          )}
+          <IconWrapper open={isOpen}>
+            <DropdownIcon />
+          </IconWrapper>
+        </Stack>
+      </Box>
+      {isOpen ? (
+        <DropdownContentWrapper open={isOpen} ref={dropdownRef} tabIndex={-1}>
+          <Stack childGap="0">
+            {filteredOptions.map((choice, i) => (
+              <DropdownItemWrapper
+                key={choice.value}
+                ref={optionRefs.current[i]}
+                as="button"
+                tabIndex={-1}
+                onClick={
+                  disabledValues.includes(choice.value)
+                    ? evt => evt.preventDefault()
+                    : () => onSelect(choice.value)
+                }
+                selected={choice.value === value}
+                disabled={disabledValues.includes(choice.value)}
+                data-qa={choice.text}
+                themeValues={themeValues}
+              >
+                <Text
+                  variant="p"
+                  color={
+                    choice.value === value
+                      ? WHITE
+                      : disabledValues.includes(choice.value)
+                      ? STORM_GREY
+                      : MINESHAFT_GREY
+                  }
+                  extraStyles={`padding-left: 16px; 
+                      cursor: ${
+                        disabledValues.includes(choice.value)
+                          ? "default"
+                          : "pointer"
+                      }; 
+                      white-space: nowrap; 
+                      overflow: hidden; 
+                      text-overflow: ellipsis;`}
+                >
+                  {choice.text}
+                </Text>
+              </DropdownItemWrapper>
+            ))}
+          </Stack>
+        </DropdownContentWrapper>
+      ) : (
+        <Fragment />
+      )}
+    </Box>
+  );
+};
+
+export default themeComponent(Dropdown, "Dropdown", fallbackValues);

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

@@ -0,0 +1,9 @@
+import { HOVER_LIGHT_BLUE, MATISSE_BLUE } from "../../../constants/colors";
+
+const selectedColor = `${MATISSE_BLUE}`;
+const hoverColor = `${HOVER_LIGHT_BLUE}`;
+
+export const fallbackValues = {
+  selectedColor,
+  hoverColor
+};

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

@@ -0,0 +1,31 @@
+import React from "react";
+
+const DropdownIcon = () => (
+  <svg
+    version="1.2"
+    xmlns="http://www.w3.org/2000/svg"
+    overflow="visible"
+    preserveAspectRatio="none"
+    viewBox="0 0 14 10"
+    height="8"
+    width="12"
+  >
+    <g transform="translate(1 1)">
+      <g fillRule="evenodd" fill="none" id="Symbols_1548197283918">
+        <g
+          fill="#333"
+          transform="translate(-155 -22)"
+          id="Dropdown/Closed_1548197283918"
+        >
+          <polygon
+            points="165.59 22.59 161 27.17 156.41 22.59 155 24 161 30 167 24"
+            id="Path_1548197283918"
+            vectorEffect="non-scaling-stroke"
+          />
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export default DropdownIcon;

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

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

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

@@ -0,0 +1,28 @@
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
+import { fallbackValues } from "./FormLayouts.theme.js";
+import { themeComponent } from "../../../util/themeUtils";
+import { Box } from "../layouts";
+import withWindowSize from "../../withWindowSize";
+
+const FormContainer = ({ themeValues, children, ...rest }) => {
+  const { isMobile } = useContext(ThemeContext);
+
+  return (
+    <Box
+      padding={isMobile ? "1rem" : "1.5rem"}
+      background={themeValues.formBackgroundColor}
+      borderRadius="4px"
+      {...rest}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default themeComponent(
+  withWindowSize(FormContainer),
+  "FormContainer",
+  fallbackValues,
+  "default"
+);

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

@@ -0,0 +1,218 @@
+import React, { useState, useContext } from "react";
+import styled, { ThemeContext } from "styled-components";
+import { FormattedInput } from "formatted-input";
+import { fallbackValues } from "./FormLayouts.theme.js";
+import { themeComponent } from "../../../util/themeUtils";
+import Text from "../text";
+import { Box, Cluster, Stack } from "../layouts";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import { MATISSE_BLUE, ERROR_COLOR } from "../../../constants/colors";
+
+const InputField = styled.input`
+  border: 1px solid
+    ${({ field, showErrors, themeValues }) =>
+      (field.dirty && field.hasErrors) || (field.hasErrors && showErrors)
+        ? ERROR_COLOR
+        : themeValues.borderColor};
+  border-radius: 2px;
+  height: 48px;
+  width: 100%;
+  padding: 1rem;
+  min-width: 100px;
+  margin: 0;
+  box-sizing: border-box;
+  position: relative;
+  font-size: 1.1rem;
+  font-family: Public Sans;
+  line-height: 2rem;
+  font-weight: ${FONT_WEIGHT_REGULAR};
+  background-color: ${({ themeValues }) =>
+    themeValues.inputBackgroundColor && themeValues.inputBackgroundColor};
+  color: ${({ themeValues }) => themeValues.color && themeValues.color};
+  box-shadow: none;
+  ${({ background, themeValues }) =>
+    background &&
+    `background: ${themeValues.inputBackgroundColor} url(${background}) no-repeat right 0.5rem center;`}
+  transition: background 0.3s ease;
+
+  &:focus {
+    border: 1px solid ${MATISSE_BLUE};
+  }
+`;
+
+// eslint-disable-next-line no-unused-vars
+const FormattedInputField = styled(({ showErrors, ...props }) => (
+  <FormattedInput {...props} />
+))`
+  border: 1px solid
+    ${({ field, showErrors, themeValues }) =>
+      (field.dirty && field.hasErrors) || (field.hasErrors && showErrors)
+        ? ERROR_COLOR
+        : themeValues.borderColor};
+  border-radius: 2px;
+  height: 48px;
+  width: 100%;
+  padding: 1rem;
+  min-width: 100px;
+  margin: 0;
+  box-sizing: border-box;
+  position: relative;
+  font-size: 1.1rem;
+  line-height: 2rem;
+  font-weight: ${FONT_WEIGHT_REGULAR};
+  background-color: ${({ themeValues }) =>
+    themeValues.inputBackgroundColor && themeValues.inputBackgroundColor};
+  color: ${({ themeValues }) => themeValues.color && themeValues.color};
+  box-shadow: none;
+
+  &:focus {
+    border: 1px solid ${MATISSE_BLUE};
+  }
+`;
+
+const FormInput = ({
+  type = "text",
+  labelTextWhenNoError,
+  errorMessages,
+  isNum = false,
+  helperModal = false,
+  field,
+  fieldActions,
+  showErrors,
+  formatter = null,
+  decorator,
+  themeValues,
+  background,
+  ...props
+}) => {
+  const [showPassword, setShowPassword] = useState(false);
+  const { isMobile } = useContext(ThemeContext);
+
+  return (
+    <Stack childGap="0.25rem">
+      <Box padding="0">
+        {helperModal ? (
+          <Cluster justify="space-between" align="center">
+            <Text
+              color={themeValues.labelColor}
+              variant="pS"
+              weight={themeValues.fontWeight}
+              extraStyles={`word-break: break-word;
+                  font-family: Public Sans;
+                  &::first-letter {
+                    text-transform: uppercase;
+                  }`}
+            >
+              {labelTextWhenNoError}
+            </Text>
+            <Text
+              color={themeValues.linkColor}
+              variant="pS"
+              weight={themeValues.fontWeight}
+            >
+              {helperModal()}
+            </Text>
+          </Cluster>
+        ) : (
+          <Box padding="0" minWidth="100%">
+            <Cluster justify="space-between" align="center">
+              <Text
+                color={themeValues.labelColor}
+                variant="pS"
+                fontWeight={themeValues.fontWeight}
+                extraStyles={`word-break: break-word;
+                    font-family: Public Sans;
+                    &::first-letter {
+                      text-transform: uppercase;
+                    }`}
+                id={labelTextWhenNoError}
+              >
+                {labelTextWhenNoError}
+              </Text>
+              {type === "password" && (
+                <Text
+                  variant="pS"
+                  color={themeValues.linkColor}
+                  weight={themeValues.fontWeight}
+                  hoverStyles={themeValues.hoverFocusStyles}
+                  focusStyles={themeValues.hoverFocusStyles}
+                  extraStyles={`cursor: pointer;`}
+                  onClick={() => setShowPassword(!showPassword)}
+                  aria-label="Show password"
+                  tabIndex="0"
+                  onKeyPress={e =>
+                    e.key === "Enter" && setShowPassword(!showPassword)
+                  }
+                >
+                  {showPassword ? "Hide" : "Show"}
+                </Text>
+              )}
+              {isMobile && decorator && (
+                <Box padding="0 0 0 auto">{decorator}</Box>
+              )}
+            </Cluster>
+          </Box>
+        )}
+      </Box>
+      <Box padding="0">
+        {formatter ? (
+          <FormattedInputField
+            aria-labelledby={labelTextWhenNoError}
+            onChange={e => fieldActions.set(e)}
+            type={type}
+            value={field.rawValue}
+            pattern={isNum ? "[0-9]*" : ""}
+            inputMode={isNum ? "numeric" : ""}
+            field={field}
+            formatter={formatter}
+            showErrors={showErrors}
+            data-qa={labelTextWhenNoError}
+            themeValues={themeValues}
+            {...props}
+          />
+        ) : (
+          <InputField
+            aria-labelledby={labelTextWhenNoError}
+            onChange={e => fieldActions.set(e.target.value)}
+            type={type === "password" && showPassword ? "text" : type}
+            value={field.rawValue}
+            pattern={isNum ? "[0-9]*" : ""}
+            inputMode={isNum ? "numeric" : ""}
+            field={field}
+            showErrors={showErrors}
+            data-qa={labelTextWhenNoError}
+            themeValues={themeValues}
+            background={background}
+            {...props}
+          />
+        )}
+      </Box>
+      <Stack direction="row" justify="space-between">
+        {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (
+          <Text
+            color={ERROR_COLOR}
+            variant="pXS"
+            weight={themeValues.fontWeight}
+            extraStyles={`word-break: break-word;
+              font-family: Public Sans;
+              &::first-letter {
+                text-transform: uppercase;
+              }`}
+          >
+            {errorMessages[field.errors[0]]}
+          </Text>
+        ) : (
+          <Text extraStyles={`height: ${themeValues.lineHeight};`} />
+        )}
+        {!isMobile && decorator && <Box padding="0 0 0 auto">{decorator}</Box>}
+      </Stack>
+    </Stack>
+  );
+};
+
+export default themeComponent(
+  FormInput,
+  "FormInput",
+  fallbackValues,
+  "default"
+);

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { Stack } from "../layouts";
+
+const FormInputColumn = ({
+  childGap = "0.5rem",
+  bottomItem,
+  children,
+  ...rest
+}) => (
+  <Stack childGap={childGap} bottomItem={bottomItem} {...rest}>
+    {children}
+  </Stack>
+);
+
+export default FormInputColumn;