@thecb/components 2.2.0

package/src/components/atoms/nav-footer/NavFooter.js

@@ -0,0 +1,57 @@
+import React from "react";
+import { Box, Switcher, Center, Cluster, Cover } from "../layouts";
+
+const NavFooter = ({
+  leftContent,
+  rightContent,
+  footerMinHeight = "104px",
+  backgroundColor,
+  largeSide = "right",
+  largeSideSize = "2",
+  footerPadding = "1.5rem 1rem",
+  isMobile,
+  ...rest
+}) => (
+  <Box
+    padding={footerPadding}
+    background={backgroundColor}
+    minHeight={footerMinHeight}
+    minWidth="100%"
+    extraStyles={
+      isMobile
+        ? `overflow: hidden;`
+        : `height: ${footerMinHeight}; > * { height: 100%; };`
+    }
+    {...rest}
+  >
+    <Center maxWidth="76.5rem">
+      <Cover singleChild minHeight="100%">
+        <Box minHeight="100%" padding="0">
+          <Switcher
+            breakpoint={isMobile ? "999px" : "700px"}
+            largeChild={largeSide === "right" ? "2" : "1"}
+            largeChildSize={largeSideSize}
+            childGap="0.25rem"
+          >
+            {leftContent}
+            <Cluster
+              justify={isMobile ? "flex-start" : "flex-end"}
+              align="center"
+              childGap="0.5rem"
+            >
+              <Switcher
+                maxChildrenOnly
+                maxChildren={isMobile ? 1 : 99}
+                childGap={isMobile ? "1rem" : "2rem"}
+              >
+                {rightContent}
+              </Switcher>
+            </Cluster>
+          </Switcher>
+        </Box>
+      </Cover>
+    </Center>
+  </Box>
+);
+
+export default NavFooter;

package/src/components/atoms/nav-footer/index.js

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

package/src/components/atoms/nav-header/NavHeader.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { Box, Cluster, Center, Cover } from "../layouts";
+
+const NavHeader = ({
+  leftContent,
+  rightContent,
+  headerHeight = "105px",
+  isMobile,
+  backgroundColor,
+  ...rest
+}) => (
+  <Box
+    padding="0 1rem 0.25rem 1rem"
+    background={backgroundColor}
+    extraStyles={
+      isMobile
+        ? `height: 72px; > * { height: 100%; }; z-index: 2;`
+        : `height: ${headerHeight}; > * { height: 100%; }; z-index: 2;`
+    }
+    minWidth="100%"
+    {...rest}
+  >
+    <Center maxWidth="76.5rem">
+      <Box minHeight="100%" padding="0">
+        <Cover singleChild minHeight={isMobile ? "72px" : headerHeight}>
+          <Cluster justify="space-between" align="center" overflow>
+            <Box padding="0">{leftContent}</Box>
+            <Box padding="0">{rightContent}</Box>
+          </Cluster>
+        </Cover>
+      </Box>
+    </Center>
+  </Box>
+);
+
+export default NavHeader;

package/src/components/atoms/nav-header/index.js

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

package/src/components/atoms/paragraph/Paragraph.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { fallbackValues } from "./Paragraph.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import { FIREFLY_GREY } from "../../../constants/colors";
+import { ParagraphText } from "./Paragraph.styled";
+import { safeChildren } from "../../../util/general";
+
+const Paragraph = ({
+  themeValues,
+  weight = FONT_WEIGHT_REGULAR,
+  color = FIREFLY_GREY,
+  margin = 0,
+  extraStyles = ``,
+  children,
+  ...rest
+}) => (
+  <ParagraphText
+    weight={weight}
+    color={color}
+    margin={margin}
+    fontFamily={themeValues.fontFamily}
+    fontSize={themeValues.fontSize}
+    extraStyles={extraStyles}
+    {...rest}
+  >
+    {safeChildren(children, <span />)}
+  </ParagraphText>
+);
+
+export default themeComponent(Paragraph, "Paragraph", fallbackValues, "p");

package/src/components/atoms/paragraph/Paragraph.styled.js

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const ParagraphText = styled.p`
+  --font-size: ${({ fontSize }) => fontSize};
+  font-size: var(--font-size);
+  line-height: calc(1.5 * var(--font-size));
+  font-weight: ${({ weight }) => weight};
+  font-family: ${({ fontFamily }) => fontFamily};
+  color: ${({ color }) => color};
+  margin: ${({ margin }) => margin};
+
+  ${({ extraStyles }) => extraStyles}
+`;

package/src/components/atoms/paragraph/Paragraph.theme.js

@@ -0,0 +1,18 @@
+const fontFamily = {
+  primary: "Public Sans",
+  secondary: "Open Sans"
+};
+
+const fontSize = {
+  p: "1rem",
+  pL: "1.125rem",
+  pS: "0.875rem",
+  pXS: "0.75rem",
+  pXXS: "0.65rem",
+  pXL: "1.5rem"
+};
+
+export const fallbackValues = {
+  fontFamily,
+  fontSize
+};

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

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

package/src/components/atoms/password-requirements/PasswordRequirements.js

@@ -0,0 +1,116 @@
+import React from "react";
+import { IconNeutral, IconInvalid, IconValid } from "../../../deprecated/icons";
+import Paragraph from "../paragraph";
+import { Cluster, Stack, Box, Sidebar, Cover } from "../layouts";
+import {
+  getInputState,
+  MIN_LENGTH_ERROR,
+  HAS_NUMBER_ERROR,
+  HAS_UPPERCASE_LETTER_ERROR,
+  HAS_LOWERCASE_LETTER_ERROR,
+  HAS_SPECIAL_CHARACTER_ERROR,
+  INPUT_STATE_INVALID,
+  INPUT_STATE_NEUTRAL,
+  INPUT_STATE_VALID
+} from "../../../util/inputValidationUtils";
+import {
+  MINESHAFT_GREY,
+  ATHENS_GREY,
+  FOREST_GREEN,
+  RAZZMATAZZ_RED
+} from "../../../constants/colors";
+
+const PasswordRequirements = ({ password, isMobile }) => {
+  const iconMap = {
+    [INPUT_STATE_NEUTRAL]: {
+      icon: <IconNeutral margin="0.125rem 0.5rem 0 0" />,
+      color: MINESHAFT_GREY
+    },
+    [INPUT_STATE_INVALID]: {
+      icon: <IconInvalid margin="0.125rem 0.5rem 0 0" />,
+      color: RAZZMATAZZ_RED
+    },
+    [INPUT_STATE_VALID]: {
+      icon: <IconValid margin="0.125rem 0.5rem 0 0" />,
+      color: FOREST_GREEN
+    }
+  };
+
+  const validationMap = {
+    charactersValidation: {
+      validationMessage: "Password must be 8 characters",
+      validationRequirement: [MIN_LENGTH_ERROR]
+    },
+    numbersValidation: {
+      validationMessage: "Password must contain at least one number",
+      validationRequirement: [HAS_NUMBER_ERROR]
+    },
+    letterCaseValidation: {
+      validationMessage: "Password must contain an upper and lower case letter",
+      validationRequirement: [
+        HAS_UPPERCASE_LETTER_ERROR,
+        HAS_LOWERCASE_LETTER_ERROR
+      ]
+    },
+    specialCharacterValidation: {
+      validationMessage:
+        "Password must contain a special character (!@#$%^&*.?)",
+      validationRequirement: [HAS_SPECIAL_CHARACTER_ERROR]
+    }
+  };
+
+  return (
+    <Box
+      background={ATHENS_GREY}
+      padding={isMobile ? "1rem" : "1.5rem"}
+      width="100%"
+    >
+      <Cluster justify="center" align="center">
+        <Stack>
+          {Object.values(validationMap).map(item => (
+            <Box padding="0" key={item.validationMessage}>
+              <Sidebar width="24px" childGap="0rem">
+                <Box padding="0" minHeight="100%">
+                  <Cover minHeight="100%" singleChild>
+                    <Box padding="0">
+                      {
+                        iconMap[
+                          getInputState(password, item.validationRequirement)
+                        ].icon
+                      }
+                    </Box>
+                  </Cover>
+                </Box>
+                <Box padding="0">
+                  <Sidebar onRight childGap="0rem">
+                    <Box padding="0rem">
+                      <Cluster justify="flex-start" align="center">
+                        <Stack fullHeight childGap="0.25rem">
+                          <Paragraph
+                            variant="pS"
+                            color={
+                              iconMap[
+                                getInputState(
+                                  password,
+                                  item.validationRequirement
+                                )
+                              ].color
+                            }
+                          >
+                            {item.validationMessage}
+                          </Paragraph>
+                        </Stack>
+                      </Cluster>
+                    </Box>
+                  </Sidebar>
+                </Box>
+              </Sidebar>
+            </Box>
+          ))}
+        </Stack>
+      </Cluster>
+    </Box>
+  );
+};
+
+export default PasswordRequirements;

package/src/components/atoms/password-requirements/index.js

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

package/src/components/atoms/placeholder/Placeholder.js

@@ -0,0 +1,122 @@
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
+import { Link } from "react-router-dom";
+import Text from "../text";
+import { Box, Switcher, Center, Cluster } from "../layouts";
+import { fallbackValues } from "./Placeholder.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { IconAdd } from "../../../deprecated/icons";
+import { STORM_GREY } from "../../../constants/colors";
+import { AccountsAddIcon, PropertiesAddIcon } from "../icons";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import withWindowSize from "../../withWindowSize";
+
+const PlaceholderContentWrapper = ({
+  isLink,
+  action,
+  destination,
+  children,
+  dataQa
+}) =>
+  isLink ? (
+    <Link to={destination} dataQa={dataQa}>
+      <Box padding="0" minHeight="100%" extraStyles={`cursor: pointer;`}>
+        {children}
+      </Box>
+    </Link>
+  ) : (
+    <Box
+      onClick={action}
+      padding="0"
+      minHeight="100%"
+      extraStyles={`cursor: pointer;`}
+      dataQa={dataQa}
+    >
+      {children}
+    </Box>
+  );
+
+const Placeholder = ({
+  text,
+  action,
+  visible = true,
+  iconID,
+  isLink = false,
+  destination,
+  variant,
+  largeIcon,
+  themeValues,
+  dataQa
+}) => {
+  const { isMobile } = useContext(ThemeContext);
+
+  return (
+    <Box
+      padding="0"
+      borderRadius="4px"
+      border="none"
+      minHeight={themeValues.height}
+      hiddenStyles={!visible}
+      extraStyles={`
+        background: linear-gradient(
+          to right,
+          ${STORM_GREY} 40%,
+          rgba(255, 255, 255, 0) 0%
+        ),
+        linear-gradient(${STORM_GREY} 40%, rgba(255, 255, 255, 0) 0%),
+        linear-gradient(to right, ${STORM_GREY} 40%, rgba(255, 255, 255, 0) 0%),
+        linear-gradient(${STORM_GREY} 40%, rgba(255, 255, 255, 0) 0%);
+        background-position: top, right, bottom, left;
+        background-repeat: repeat-x, repeat-y;
+        background-size: 5px 1px, 1px 5px;
+        display: flex;
+        justify-content: center;
+        align-items:center;`}
+    >
+      <PlaceholderContentWrapper
+        isLink={isLink}
+        action={action}
+        destination={destination}
+        dataQa={dataQa}
+      >
+        <Center maxWidth="300px">
+          <Box padding="0px 0px 0px 0px">
+            <Cluster justify="center" align="center" minHeight="100%">
+              <Switcher maxChildren={2} childGap="0">
+                {variant === "large" && <div></div>}
+                <Cluster justify="center" align="center" minHeight="100%">
+                  {variant === "large" ? (
+                    largeIcon === "accounts" ? (
+                      <AccountsAddIcon />
+                    ) : (
+                      <PropertiesAddIcon />
+                    )
+                  ) : (
+                    <IconAdd iconID={iconID} isMobile={isMobile} />
+                  )}
+                </Cluster>
+                <Center intrinsic>
+                  <Text
+                    variant="pS"
+                    color={themeValues.color}
+                    weight={FONT_WEIGHT_REGULAR}
+                    textAlign="center"
+                    extraStyles={variant !== "large" && `padding: 0 0 0 8px;`}
+                  >
+                    {text}
+                  </Text>
+                </Center>
+              </Switcher>
+            </Cluster>
+          </Box>
+        </Center>
+      </PlaceholderContentWrapper>
+    </Box>
+  );
+};
+export default themeComponent(
+  withWindowSize(Placeholder),
+  "Placeholder",
+  fallbackValues,
+  "default"
+);

package/src/components/atoms/placeholder/Placeholder.theme.js

@@ -0,0 +1,9 @@
+import { BRIGHT_GREY, CHARADE_GREY } from "../../../constants/colors";
+
+const color = { default: `${CHARADE_GREY}`, large: `${BRIGHT_GREY}` };
+const height = { default: "3rem", large: "192px" };
+
+export const fallbackValues = {
+  color,
+  height
+};

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

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

package/src/components/atoms/processing-fee/ProcessingFee.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { ifElse, isNil, always } from "ramda";
+import { fallbackValues } from "./ProcessingFee.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import Box from "../layouts/Box";
+import Alert from "../alert";
+import { displayCurrency } from "../../../util/general";
+const ProcessingFee = ({
+  feeValue = 0,
+  feeName = "",
+  feeType,
+  feeMinimum = 0,
+  hide,
+  themeValues
+}) => (
+  <Box
+    padding="0 1.5rem 1.5rem"
+    background={themeValues.backgroundColor}
+    hiddenStyles={hide}
+  >
+    <Alert
+      heading="Processing Fee"
+      text={`There is a processing fee of ${
+        feeType === "FLAT"
+          ? `${displayCurrency(feeValue)}`
+          : `${feeValue * 100}%`
+      } ${ifElse(
+        isNil,
+        always(""),
+        a => `with a minimum of ${displayCurrency(a)} `
+      )(feeMinimum)}on all ${feeName} payments.`}
+      variant="info"
+      showQuitLink={false}
+    />
+  </Box>
+);
+
+export default themeComponent(
+  ProcessingFee,
+  "ProcessingFee",
+  fallbackValues,
+  "default"
+);

package/src/components/atoms/processing-fee/ProcessingFee.theme.js

@@ -0,0 +1,7 @@
+import { WHITE } from "../../../constants/colors";
+
+const backgroundColor = { default: `${WHITE}` };
+
+export const fallbackValues = {
+  backgroundColor
+};

package/src/components/atoms/processing-fee/index.js

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

package/src/components/atoms/radio-button/RadioButton.js

@@ -0,0 +1,101 @@
+import React from "react";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./RadioButton.theme";
+import { Motion } from "../layouts";
+import styled from "styled-components";
+
+const HiddenRadioButton = styled.input`
+  opacity: 0;
+  position: absolute;
+  cursor: ${({ disabled }) => (disabled ? "auto" : "pointer")};
+`;
+
+const RadioButton = ({
+  radioOn = false,
+  radioFocused = false,
+  toggleRadio,
+  name,
+  disabled = false,
+  themeValues
+}) => {
+  const buttonBorder = {
+    onFocused: {
+      borderColor: themeValues.activeColor,
+      boxShadow: `0px 0px 4px 0px ${themeValues.activeColor}`
+    },
+    offFocused: {
+      borderColor: themeValues.activeColor,
+      boxShadow: `0px 0px 4px 0px ${themeValues.activeColor}`
+    },
+    on: {
+      borderColor: themeValues.activeColor,
+      boxShadow: "0px 0px 0px 0px #FFFFFF"
+    },
+    off: {
+      borderColor: themeValues.inactiveColor,
+      boxShadow: "0px 0px 0px 0px #FFFFFF"
+    }
+  };
+
+  const buttonCenter = {
+    on: {
+      backgroundColor: themeValues.activeColor,
+      height: "1rem",
+      width: "1rem"
+    },
+    onFocused: {
+      backgroundColor: themeValues.activeColor,
+      height: "1rem",
+      width: "1rem"
+    },
+    offFocused: {
+      backgroundColor: "transparent",
+      height: "0px",
+      width: "0px"
+    },
+    off: {
+      backgroundColor: "transparent",
+      height: "0px",
+      width: "0px"
+    }
+  };
+
+  return (
+    <Motion
+      position="relative"
+      padding="0"
+      initial="off"
+      animate={
+        radioOn
+          ? radioFocused
+            ? "onFocused"
+            : "on"
+          : radioFocused
+          ? "offFocused"
+          : "off"
+      }
+    >
+      <HiddenRadioButton
+        id={`#radio-${name}`}
+        disabled={disabled}
+        onClick={toggleRadio}
+        tabIndex="-1"
+      />
+      <Motion
+        borderWidth="1px"
+        borderStyle="solid"
+        borderRadius="0.75rem"
+        margin="0.25rem 0.875rem 0.25rem 0.25rem"
+        height="1.5rem"
+        width="1.5rem"
+        variants={buttonBorder}
+        display="flex"
+        extraStyles={`justify-content: center; align-items: center;`}
+      >
+        <Motion variants={buttonCenter} borderRadius="0.5rem" />
+      </Motion>
+    </Motion>
+  );
+};
+
+export default themeComponent(RadioButton, "RadioButton", fallbackValues);

package/src/components/atoms/radio-button/RadioButton.theme.js

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

package/src/components/atoms/radio-button/index.js

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

package/src/components/atoms/solid-divider/SolidDivider.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { fallbackValues } from "./SolidDivider.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { Box } from "../layouts";
+
+const SolidDivider = ({ themeValues }) => (
+  <Box
+    padding="0"
+    minWidth="100%"
+    minHeight="1px"
+    borderColor={themeValues.borderColor}
+    borderSize={themeValues.borderSize}
+    borderWidthOverride={`0px 0px ${themeValues.borderSize} 0px`}
+  />
+);
+
+export default themeComponent(
+  SolidDivider,
+  "SolidDivider",
+  fallbackValues,
+  "default"
+);

package/src/components/atoms/solid-divider/SolidDivider.theme.js

@@ -0,0 +1,8 @@
+import { GREY_CHATEAU } from "../../../constants/colors";
+
+const borderColor = { default: `${GREY_CHATEAU}` };
+const borderSize = { default: "1px" };
+export const fallbackValues = {
+  borderColor,
+  borderSize
+};

package/src/components/atoms/solid-divider/index.js

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