@thecb/components 3.1.1 → 3.1.10

package/src/components/atoms/layouts/examples/cover-example/CoverExample.stories.js

@@ -0,0 +1,53 @@
+import React from "react";
+import { text, boolean } from "@storybook/addon-knobs";
+
+import page from "../../../../../../.storybook/page";
+import Cover from "../../Cover";
+import LayoutContentBlock from "../LayoutContentBlock";
+
+const groupId = "props";
+
+export default page({
+  title: "Layouts|Basic Layouts/Cover",
+  Component: Cover
+});
+
+export const cover = () => (
+  <Cover
+    minHeight={text("minHeight", "100vh", groupId)}
+    childGap={text("childGap", "", groupId)}
+    padding={text("padding", "", groupId)}
+    fillCenter={boolean("fillCenter", false, groupId)}
+    singleChild={boolean("singleChild", false, groupId)}
+    centerOverride={boolean("centerOverride", false, groupId)}
+  >
+    <LayoutContentBlock height="3.5rem" width="100%" layoutName="Header" />
+    Text Child
+    <LayoutContentBlock height="3.5rem" width="100%" layoutName="Footer" />
+  </Cover>
+);
+
+cover.story = {
+  name: "Cover with Multiple Children"
+};
+
+export const coverSingleChild = () => (
+  <Cover
+    minHeight={text("minHeight", "100vh", groupId)}
+    childGap={text("childGap", "", groupId)}
+    padding={text("padding", "", groupId)}
+    fillCenter={boolean("fillCenter", false, groupId)}
+    singleChild={boolean("singleChild", true, groupId)}
+    centerOverride={boolean("centerOverride", false, groupId)}
+  >
+    <LayoutContentBlock
+      height="3.5rem"
+      width="100%"
+      layoutName="Child Component"
+    />
+  </Cover>
+);
+
+coverSingleChild.story = {
+  name: "Cover with Single Child"
+};

package/src/components/atoms/layouts/examples/frame-example/FrameExample.stories.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { text } from "@storybook/addon-knobs";
+
+import page from "../../../../../../.storybook/page";
+import Frame from "../../Frame";
+import LayoutContentBlock from "../LayoutContentBlock";
+
+const groupId = "props";
+
+export default page({
+  title: "Layouts|Basic Layouts/Frame",
+  Component: Frame
+});
+
+export const frame = () => (
+  <Frame
+    numerator={text("numerator", "1", groupId)}
+    denominator={text("denominator", "1", groupId)}
+  >
+    <LayoutContentBlock height="100%" width="100%" layoutName="Image" />
+  </Frame>
+);

package/src/components/atoms/layouts/examples/imposter-example/ImposterExample.stories.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { text, boolean } from "@storybook/addon-knobs";
+
+import page from "../../../../../../.storybook/page";
+import Box from "../../Box";
+import Imposter from "../../Imposter";
+import LayoutContentBlock from "../LayoutContentBlock";
+
+const groupId = "props";
+
+export default page({
+  title: "Layouts|Basic Layouts/Imposter",
+  Component: Imposter
+});
+
+export const imposter = () => (
+  <Box minHeight="50vh" background="#F6F6F9">
+    <Imposter
+      fixed={boolean("fixed", false, groupId)}
+      verticalMargin={text("verticalMargin", "0px", groupId)}
+      horizontalMargin={text("horizontalMargin", "0px", groupId)}
+      breakout={boolean("breakout", true, groupId)}
+      top={text("top", "50%", groupId)}
+      left={text("left", "50%", groupId)}
+      centered={boolean("centered", false, groupId)}
+      visible={boolean("visible", true, groupId)}
+    >
+      <LayoutContentBlock
+        height="100%"
+        width="100%"
+        layoutName="Component Child"
+      />
+    </Imposter>
+  </Box>
+);

package/src/components/atoms/layouts/examples/motion-example/MotionExample.stories.js

@@ -0,0 +1,62 @@
+import React from "react";
+import { text, select, boolean } from "@storybook/addon-knobs";
+
+import page from "../../../../../../.storybook/page";
+import Motion from "../../Motion";
+import LayoutContentBlock from "../LayoutContentBlock";
+
+const position = {
+  relative: "relative",
+  absolute: "absolute"
+};
+const animate = {
+  open: "open",
+  closed: "closed"
+};
+const groupId = "props";
+
+const variants = {
+  open: {
+    height: "50vh",
+    opacity: 1,
+    transition: {
+      duration: 0.3,
+      ease: [0.04, 0.62, 0.23, 0.98],
+      staggerChildren: 0
+    }
+  },
+  closed: {
+    height: 0,
+    opacity: 0,
+    transition: {
+      duration: 0.3,
+      ease: [0.04, 0.62, 0.23, 0.98],
+      staggerChildren: 0,
+      staggerDirection: -1
+    }
+  }
+};
+
+export default page({
+  title: "Layouts|Basic Layouts/Motion",
+  Component: Motion
+});
+
+export const motion = () => (
+  <Motion
+    position={select("position", position, "relative", groupId)}
+    padding={text("padding", "0", groupId)}
+    variants={variants}
+    layoutTransition={boolean("layoutTransition", true, groupId)}
+    positionTransition={boolean("positionTransition", false, groupId)}
+    initial="closed"
+    animate={select("animate", animate, "open", groupId)}
+    exit="closed"
+  >
+    <LayoutContentBlock
+      height="100%"
+      width="100%"
+      layoutName="Component Child"
+    />
+  </Motion>
+);

package/src/components/atoms/layouts/examples/reel-example/ReelExample.stories.js

@@ -0,0 +1,57 @@
+import React from "react";
+import { text, boolean, select } from "@storybook/addon-knobs";
+
+import page from "../../../../../../.storybook/page";
+import Reel from "../../Reel";
+import LayoutContentBlock from "../LayoutContentBlock";
+
+const justifyContent = {
+  flexStart: "flex-start",
+  flexEnd: "flex-end",
+  center: "center",
+  spaceEvenly: "space-evenly"
+};
+
+const groupId = "props";
+
+export default page({
+  title: "Layouts|Basic Layouts/Reel",
+  Component: Reel
+});
+
+export const reel = () => (
+  <Reel
+    childGap={text("childGap", "1rem", groupId)}
+    height={text("height", "auto", groupId)}
+    childWidth={text("childWidth", "auto", groupId)}
+    padding={text("padding", "1rem", groupId)}
+    justifyContent={select(
+      "justify-content",
+      justifyContent,
+      "flexStart",
+      groupId
+    )}
+    disableScroll={boolean("disableScroll", false, groupId)}
+  >
+    <LayoutContentBlock
+      height="3.5rem"
+      width="8rem"
+      layoutName="Component Child"
+    />
+    <LayoutContentBlock
+      height="3.5rem"
+      width="8rem"
+      layoutName="Component Child 2"
+    />
+    <LayoutContentBlock
+      height="3.5rem"
+      width="8rem"
+      layoutName="Component Child 3 "
+    />
+    <LayoutContentBlock
+      height="3.5rem"
+      width="8rem"
+      layoutName="Component Child 4"
+    />
+  </Reel>
+);

package/src/components/atoms/line-item/LineItem.js

@@ -5,7 +5,7 @@ import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./LineItem.theme";
 
 const LineItem = ({ description, subDescription, amount, themeValues }) => (
-  <Cluster justify="space-between" align="start">
+  <Cluster nowrap justify="space-between" align="start">
     <Stack childGap="0px">
       <Paragraph
         variant={themeValues.paragraphVariant}
@@ -20,7 +20,7 @@ const LineItem = ({ description, subDescription, amount, themeValues }) => (
     <Paragraph
       variant={themeValues.paragraphVariant}
       weight="600"
-      extraStyles="margin: 0;"
+      extraStyles="margin: 0; text-align: end; min-width: fit-content; padding-left: 32px;"
     >
       {amount}
     </Paragraph>

package/src/components/atoms/line-item/LineItem.stories.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { text } from "@storybook/addon-knobs";
+
+import LineItem from "./LineItem";
+import page from "../../../../.storybook/page";
+
+const story = page({
+  title: "Components|Atoms/LineItem",
+  Component: LineItem
+});
+export default story;
+
+export const lineItem = () => (
+  <LineItem
+    description={text("description", "Foo", "props")}
+    subDescription={text("subDescription", "Bar", "props")}
+    amount={text("amount", "$4.00", "props")}
+  />
+);

package/src/components/atoms/link/ExternalLink.js

@@ -4,13 +4,11 @@ import { fallbackValues } from "./Link.theme";
 import { createThemeValues } from "../../../util/themeUtils";
 import { StyledExternalLink } from "./ExternalLink.styled";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
-import { CONGRESS_BLUE } from "../../../constants/colors";
 import { safeChildren } from "../../../util/general";
 
 const ExternalLink = ({
   href = "",
   newTab = false,
-  color = CONGRESS_BLUE,
   size = "1rem",
   lineHeight = "1.5rem",
   weight = FONT_WEIGHT_REGULAR,
@@ -31,7 +29,7 @@ const ExternalLink = ({
     <StyledExternalLink
       href={href}
       target={newTab ? "_blank" : ""}
-      color={color}
+      color={themeValues.externalLinkColor}
       size={size}
       lineheight={lineHeight}
       weight={weight}

package/src/components/atoms/link/ExternalLink.styled.js

@@ -8,7 +8,7 @@ import styled from "styled-components";
 
 /* eslint-disable no-unused-vars */
 export const StyledExternalLink = styled(
-  ({ hoverColor, activeColor, extraStyles, ...props }) => <a {...props} />
+  ({ hoverColor, activeColor, extrastyles, ...props }) => <a {...props} />
 )`
   display: flex;
   font-size: ${({ size }) => size};
@@ -19,7 +19,7 @@ export const StyledExternalLink = styled(
 
   &:hover,
   &:focus {
-    color: ${({ hovercolor }) => hovercolor};
+    color: ${({ hoverColor }) => hoverColor};
     text-decoration: underline;
   }
 

package/src/components/atoms/link/InternalLink.styled.js

@@ -9,21 +9,22 @@ import { Link } from "react-router-dom";
 
 /* eslint-disable no-unused-vars */
 export const StyledInternalLink = styled(
-  ({ hoverColor, activeColor, active, ...props }) => <Link {...props} />
+  ({ hoverColor, activeColor, active, color, extrastyles, ...props }) => (
+    <Link {...props} />
+  )
 )`
   display: flex;
   color: ${({ color, active, activeColor }) =>
-    active === true ? activeColor : color};
+    active === "true" ? activeColor : color};
   font-weight: ${({ fontWeight }) => fontWeight};
   line-height: ${({ lineheight }) => lineheight};
   font-size: ${({ fontSize }) => fontSize};
   font-family: ${({ fontFamily }) => fontFamily};
   margin: ${({ margin }) => margin};
-  text-decoration: ${({ active }) => (active === true ? "underline" : "none")};
 
   &:hover,
   &:focus {
-    color: ${({ hovercolor }) => hovercolor};
+    color: ${({ hoverColor }) => hoverColor};
     text-decoration: underline;
   }
 

package/src/components/atoms/link/Link.stories.js

@@ -0,0 +1,57 @@
+import React from "react";
+import { boolean, select, text, number } from "@storybook/addon-knobs";
+import page from "../../../../.storybook/page";
+import InternalLink from "./InternalLink";
+import ExternalLink from "./ExternalLink";
+import {
+  FONT_WEIGHT_BOLD,
+  FONT_WEIGHT_SEMIBOLD,
+  FONT_WEIGHT_REGULAR
+} from "../../../constants/style_constants";
+import * as colors from "../../../constants/colors";
+
+const fontWeights = {
+  FONT_WEIGHT_BOLD,
+  FONT_WEIGHT_SEMIBOLD,
+  FONT_WEIGHT_REGULAR
+};
+const variantsLabel = "variant";
+const variants = {
+  primary: "primary",
+  secondary: "secondary"
+};
+const defaultValue = "primary";
+const groupId = "props";
+
+export const internalLink = () => (
+  <InternalLink
+    variant={select(variantsLabel, variants, defaultValue, groupId)}
+    to={text("to", "https://google.com", "props")}
+    extraStyles={text("extraStyles", "text-align: center;", "props")}
+    margin={number("margin", 0, { min: 0, max: 99 }, "props")}
+    fontWeight={select("fontWeight", fontWeights, 400, "props")}
+    color={select("color", colors, "black", "props")}
+  >
+    Internal Link
+  </InternalLink>
+);
+
+export const externalLink = () => (
+  <ExternalLink
+    variant={select(variantsLabel, variants, defaultValue, groupId)}
+    href={text("href", "https://google.com", "props")}
+    newTab={boolean("newTab", true, "props")}
+    extraStyles={text("extraStyles", "text-align: center;", "props")}
+    margin={number("margin", 0, { min: 0, max: 99 }, "props")}
+    weight={select("weight", fontWeights, 400, "props")}
+    color={select("color", colors, "black", "props")}
+  >
+    External Link
+  </ExternalLink>
+);
+
+const story = page({
+  title: "Components|Atoms/Link",
+  Component: InternalLink
+});
+export default story;

package/src/components/atoms/link/Link.theme.js

@@ -4,11 +4,12 @@ const fontFamily = {
 };
 
 const hoverColor = "#116285";
-
 const activeColor = "#0E506D";
+const externalLinkColor = "#15749D";
 
 export const fallbackValues = {
   fontFamily,
   hoverColor,
-  activeColor
+  activeColor,
+  externalLinkColor
 };

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { text, select, boolean } from "@storybook/addon-knobs";
+
+import NavFooter from "./NavFooter";
+import page from "../../../../.storybook/page";
+import * as colors from "../../../constants/colors";
+
+const story = page({
+  title: "Components|Atoms/NavFooter",
+  Component: NavFooter
+});
+export default story;
+
+const Left = () => (
+  <div style={{ border: "2px solid black", width: "50px" }}>Left Content</div>
+);
+
+const Right = () => (
+  <div style={{ border: "2px solid black", width: "50px" }}>Right Content</div>
+);
+
+export const navFooter = () => (
+  <NavFooter
+    leftContent={<Left />}
+    rightContent={<Right />}
+    headerHeight={text("headerHeight", "105px", "props")}
+    backgroundColor={select("activeColor", colors, "white", "props")}
+    footerPadding={text("footerPadding", "1.5rem 1rem", "props")}
+    isMobile={boolean("isMobile", false, "props")}
+  />
+);

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { text, number, select } from "@storybook/addon-knobs";
+
+import NavHeader from "./NavHeader";
+import page from "../../../../.storybook/page";
+import * as colors from "../../../constants/colors";
+
+const story = page({
+  title: "Components|Atoms/NavHeader",
+  Component: NavHeader
+});
+export default story;
+
+const Left = () => (
+  <div style={{ border: "2px solid black", width: "50px" }}>Left Content</div>
+);
+
+const Right = () => (
+  <div style={{ border: "2px solid black", width: "50px" }}>Right Content</div>
+);
+
+export const navHeader = () => (
+  <NavHeader
+    leftContent={<Left />}
+    rightContent={<Right />}
+    headerHeight={text("headerHeight", "105px", "props")}
+    backgroundColor={select("activeColor", colors, "white", "props")}
+  />
+);

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

@@ -0,0 +1,34 @@
+import React from "react";
+import { text, number, select } from "@storybook/addon-knobs";
+
+import Paragraph from "./Paragraph";
+import page from "../../../../.storybook/page";
+import {
+  FONT_WEIGHT_BOLD,
+  FONT_WEIGHT_SEMIBOLD,
+  FONT_WEIGHT_REGULAR
+} from "../../../constants/style_constants";
+import * as colors from "../../../constants/colors";
+
+const fontWeights = {
+  FONT_WEIGHT_BOLD,
+  FONT_WEIGHT_SEMIBOLD,
+  FONT_WEIGHT_REGULAR
+};
+
+const story = page({
+  title: "Components|Atoms/Paragraph",
+  Component: Paragraph
+});
+export default story;
+
+export const paragraph = () => (
+  <Paragraph
+    extraStyles={text("extraStyles", "text-align: center;", "props")}
+    margin={number("margin", 0, { min: 0, max: 99 }, "props")}
+    weight={select("weight", fontWeights, 400, "props")}
+    color={select("activeColor", colors, "black", "props")}
+  >
+    {text("children", "Lorem Ipsum", "props")}
+  </Paragraph>
+);

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

@@ -1,6 +1,10 @@
 const fontFamily = {
-  primary: "Public Sans",
-  secondary: "Open Sans"
+  p: "Public Sans",
+  pL: "Public Sans",
+  pS: "Public Sans",
+  pXS: "Public Sans",
+  pXXS: "Public Sans",
+  pXL: "Public Sans"
 };
 
 const fontSize = {

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

@@ -0,0 +1,75 @@
+import React from "react";
+import { boolean } from "@storybook/addon-knobs";
+import PasswordRequirements from "./PasswordRequirements";
+import { FormInput } from "../form-layouts";
+import { Box } from "../layouts";
+import page from "../../../../.storybook/page";
+import { connect } from "react-redux";
+import {
+  createFormState,
+  required,
+  hasLength,
+  hasNumber,
+  hasLowercaseLetter,
+  hasUppercaseLetter,
+  hasSpecialCharacter
+} from "redux-freeform";
+
+const formConfig = {
+  password: {
+    validators: [
+      required(),
+      hasLength(8, 100),
+      hasNumber(),
+      hasLowercaseLetter(),
+      hasUppercaseLetter(),
+      hasSpecialCharacter()
+    ]
+  }
+};
+
+const passwordForm = createFormState(formConfig);
+
+const passwordRequirementsWrapper = ({ fields, actions, showErrors }) => {
+  const passwordErrorMessages = {
+    [required.error]: "Password is required",
+    [hasLength.error]: "Password must have at least 8 characters",
+    [hasNumber.error]: "Password must contain at least one number",
+    [hasLowercaseLetter.error]:
+      "Password must contain at least one lowercase letter",
+    [hasUppercaseLetter.error]:
+      "Password must contain at least one uppercase letter",
+    [hasSpecialCharacter.error]:
+      "Password must contain at least one special character (!@#$%^&*.?)"
+  };
+  return (
+    <Box>
+      <FormInput
+        labelTextWhenNoError="Type in password"
+        errorMessages={passwordErrorMessages}
+        field={fields.password}
+        fieldActions={actions.fields.password}
+        showErrors={showErrors}
+      />
+      <PasswordRequirements password={fields.password} />
+    </Box>
+  );
+};
+
+const story = page({
+  title: "Components|Atoms/PasswordRequirements",
+  Component: PasswordRequirements,
+  reducer: passwordForm.reducer,
+  mapStateToProps: passwordForm.mapStateToProps,
+  mapDispatchToProps: passwordForm.mapDispatchToProps
+});
+export default story;
+
+const ConnectedForm = connect(
+  passwordForm.mapStateToProps,
+  passwordForm.mapDispatchToProps
+)(passwordRequirementsWrapper);
+
+export const passwordRequirements = () => (
+  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
+);

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

@@ -51,13 +51,19 @@ const Placeholder = ({
   const { isMobile } = useContext(ThemeContext);
 
   return (
-    <Box
-      padding="0"
-      borderRadius="4px"
-      border="none"
-      minHeight={themeValues.height}
-      hiddenStyles={!visible}
-      extraStyles={`
+    <PlaceholderContentWrapper
+      isLink={isLink}
+      action={action}
+      destination={destination}
+      dataQa={dataQa}
+    >
+      <Box
+        padding="0"
+        borderRadius="4px"
+        border="none"
+        minHeight={themeValues.height}
+        hiddenStyles={!visible}
+        extraStyles={`
         background: linear-gradient(
           to right,
           ${STORM_GREY} 40%,
@@ -72,13 +78,7 @@ const Placeholder = ({
         display: flex;
         justify-content: center;
         align-items:center;`}
-      hoverStyles={`background-color: ${GRECIAN_GREY};`}
-    >
-      <PlaceholderContentWrapper
-        isLink={isLink}
-        action={action}
-        destination={destination}
-        dataQa={dataQa}
+        hoverStyles={`background-color: ${GRECIAN_GREY};`}
       >
         <Center maxWidth="300px">
           <Box padding="0px 0px 0px 0px">
@@ -111,8 +111,8 @@ const Placeholder = ({
             </Cluster>
           </Box>
         </Center>
-      </PlaceholderContentWrapper>
-    </Box>
+      </Box>
+    </PlaceholderContentWrapper>
   );
 };
 export default themeComponent(