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

package/src/components/atoms/breadcrumb/Breadcrumb.stories.js

@@ -0,0 +1,47 @@
+import Breadcrumb from "./Breadcrumb";
+
+const meta = {
+  title: "Atoms/Breadcrumb",
+  component: Breadcrumb,
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  tags: ["!autodocs"],
+  args: {
+    breadcrumbsList: []
+  },
+  argTypes: {
+    breadcrumbsList: {
+      control: { type: "array" },
+      table: {
+        type: { summary: "array" },
+        defaultValue: { summary: [] }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const Basic = {
+  args: {
+    breadcrumbsList: [
+      {
+        linkText: "Home",
+        linkDestination: "/",
+        isActive: false
+      },
+      {
+        linkText: "Page",
+        linkDestination: "/page",
+        isActive: false
+      },
+      {
+        linkText: "Another Page",
+        linkDestination: "/another-page",
+        isActive: true
+      }
+    ]
+  }
+};

package/src/components/atoms/button-with-action/ButtonWithAction.js

@@ -1,32 +1,14 @@
 import React, { useContext, forwardRef } from "react";
 import styled, { ThemeContext } from "styled-components";
-import posed from "react-pose";
-import { linear } from "@popmotion/easing";
 import Text from "../text";
-import { Box, Center } from "../layouts";
+import { Box, Center, Motion } from "../layouts";
 import { fallbackValues } from "./ButtonWithAction.theme";
 
 import SpinnerIcon from "../../../deprecated/spinner";
 import { noop } from "../../../util/general";
 import { createThemeValues } from "../../../util/themeUtils";
 
-const rotate = posed.div({
-  fixed: {
-    rotate: "0deg"
-  },
-  rotate: {
-    rotate: "360deg",
-    transition: {
-      rotate: {
-        ease: linear,
-        duration: 1000,
-        loop: Infinity
-      }
-    }
-  }
-});
-
-const SpinnerContainer = styled.div`
+const SpinnerContainer = styled(Motion)`
   width: 100%;
   display: flex;
   flex-direction: row;
@@ -34,13 +16,9 @@ const SpinnerContainer = styled.div`
   justify-content: center;
 `;
 
-const SpinnerIconWrapper = styled(rotate)``;
-
 const Spinner = ({ color, isMobile }) => (
   <SpinnerContainer>
-    <SpinnerIconWrapper initialPose="fixed" pose="rotate">
-      <SpinnerIcon color={color} isMobile={isMobile} />
-    </SpinnerIconWrapper>
+    <SpinnerIcon color={color} isMobile={isMobile} />
   </SpinnerContainer>
 );
 
@@ -82,16 +60,12 @@ const ButtonWithAction = forwardRef(
     ref
   ) => {
     const themeContext = useContext(ThemeContext);
-    console.log("theme context is", themeContext);
-    console.log("fallback values are", fallbackValues);
-    console.log("variant is", variant);
     const themeValues = createThemeValues(
       themeContext,
       fallbackValues,
       "Button",
       variant
     );
-    console.log("theme values are", themeValues);
     const { isMobile } = themeContext;
 
     const hoverStyles = `

package/src/components/atoms/button-with-action/ButtonWithAction.stories.js

@@ -1,4 +1,3 @@
-import { Button } from "../../../stories/Button";
 import ButtonWithAction from "./ButtonWithAction";
 import { fn } from "@storybook/test";
 
@@ -108,3 +107,17 @@ export const WhiteSecondary = {
   ...Primary.args,
   variant: "whiteSecondary"
 };
+
+export const GreenPrimary = {
+  args: {
+    ...Primary.args,
+    variant: "greenPrimary"
+  }
+};
+
+export const GreenSecondary = {
+  args: {
+    ...Primary.args,
+    variant: "greenSecondary"
+  }
+};

package/src/components/atoms/button-with-action/ButtonWithAction.theme.js

@@ -1,4 +1,5 @@
 import { colors, styleConstants } from "../../../constants";
+import { adjustHexColor } from "../../../util/general";
 
 const {
   WHITE,
@@ -6,9 +7,13 @@ const {
   SAPPHIRE_BLUE,
   PEACOCK_BLUE,
   MANATEE_GREY,
-  MATISSE_BLUE,
+  LUCKY_POINT,
+  HINT_GREEN,
+  SEA_GREEN,
   RASPBERRY,
-  ERROR_COLOR
+  ERROR_COLOR,
+  LUCKY_POINT_DARK,
+  HAWKES_BLUE
 } = colors;
 
 const { LINK_TEXT_DECORATION } = styleConstants;
@@ -24,8 +29,10 @@ const disabledBorderColor = {
   tertiary: TRANSPARENT,
   danger: MANATEE_GREY,
   dangerSecondary: MANATEE_GREY,
+  whitePrimary: MANATEE_GREY,
   whiteSecondary: MANATEE_GREY,
-  whitePrimary: MANATEE_GREY
+  greenPrimary: SEA_GREEN,
+  greenSecondary: SEA_GREEN
 };
 
 const disabledColor = {
@@ -39,8 +46,10 @@ const disabledColor = {
   tertiary: MANATEE_GREY,
   danger: WHITE,
   dangerSecondary: MANATEE_GREY,
+  whitePrimary: MANATEE_GREY,
   whiteSecondary: MANATEE_GREY,
-  whitePrimary: MANATEE_GREY
+  greenPrimary: WHITE,
+  greenSecondary: SEA_GREEN
 };
 
 const disabledBackgroundColor = {
@@ -54,8 +63,10 @@ const disabledBackgroundColor = {
   tertiary: TRANSPARENT,
   danger: MANATEE_GREY,
   dangerSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT,
   whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT
+  greenPrimary: SEA_GREEN,
+  greenSecondary: TRANSPARENT
 };
 
 const padding = {
@@ -69,23 +80,27 @@ const padding = {
   ghost: "0.65rem 0",
   danger: "0.75rem 1.5rem",
   dangerSecondary: "0.75rem 1.5rem",
+  whitePrimary: "1.125rem 0.75rem",
   whiteSecondary: "0.75rem 2rem",
-  whitePrimary: "1.125rem 0.75rem"
+  greenPrimary: "0.75rem 1.5rem",
+  greenSecondary: "0.75rem 1.5rem"
 };
 
 const color = {
   primary: WHITE,
-  secondary: MATISSE_BLUE,
-  back: MATISSE_BLUE,
+  secondary: LUCKY_POINT,
+  back: LUCKY_POINT,
   smallPrimary: WHITE,
-  smallSecondary: MATISSE_BLUE,
-  smallGhost: MATISSE_BLUE,
-  ghost: MATISSE_BLUE,
-  tertiary: MATISSE_BLUE,
+  smallSecondary: LUCKY_POINT,
+  smallGhost: LUCKY_POINT,
+  ghost: LUCKY_POINT,
+  tertiary: LUCKY_POINT,
   danger: WHITE,
   dangerSecondary: ERROR_COLOR,
+  whitePrimary: WHITE,
   whiteSecondary: WHITE,
-  whitePrimary: WHITE
+  greenPrimary: WHITE,
+  greenSecondary: SEA_GREEN
 };
 
 const fontSizeVariant = {
@@ -100,7 +115,9 @@ const fontSizeVariant = {
   danger: "pS",
   dangerSecondary: "pS",
   whiteSecondary: "pS",
-  whitePrimary: "pS"
+  whitePrimary: "pS",
+  greenPrimary: "pS",
+  greenSecondary: "pS"
 };
 
 const fontWeight = {
@@ -115,7 +132,9 @@ const fontWeight = {
   danger: "600",
   dangerSecondary: "600",
   whiteSecondary: "600",
-  whitePrimary: "600"
+  whitePrimary: "600",
+  greenPrimary: "600",
+  greenSecondary: "600"
 };
 
 const height = {
@@ -129,8 +148,10 @@ const height = {
   tertiary: "3rem",
   danger: "3rem",
   dangerSecondary: "3rem",
+  whitePrimary: "auto",
   whiteSecondary: "3rem",
-  whitePrimary: "auto"
+  greenPrimary: "3rem",
+  greenSecondary: "3rem"
 };
 
 const minWidth = {
@@ -144,8 +165,10 @@ const minWidth = {
   tertiary: "130px",
   danger: "130px",
   dangerSecondary: "157px",
+  whitePrimary: "130px",
   whiteSecondary: "160px",
-  whitePrimary: "130px"
+  greenPrimary: "130px",
+  greenSecondary: "130px"
 };
 
 const textDecoration = {
@@ -159,118 +182,134 @@ const textDecoration = {
   tertiary: "none",
   danger: "none",
   dangerSecondary: "none",
+  whitePrimary: "none",
   whiteSecondary: "none",
-  whitePrimary: "none"
+  greenPrimary: "none",
+  greenSecondary: "none"
 };
 
 const backgroundColor = {
-  primary: MATISSE_BLUE,
+  primary: LUCKY_POINT,
   secondary: TRANSPARENT,
   back: TRANSPARENT,
-  smallPrimary: MATISSE_BLUE,
+  smallPrimary: LUCKY_POINT,
   smallSecondary: TRANSPARENT,
   smallGhost: TRANSPARENT,
   ghost: TRANSPARENT,
   tertiary: TRANSPARENT,
   danger: RASPBERRY,
   dangerSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT,
   whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT
+  greenPrimary: SEA_GREEN,
+  greenSecondary: TRANSPARENT
 };
 
 const border = {
-  primary: "2px solid " + MATISSE_BLUE,
-  secondary: "2px solid " + MATISSE_BLUE,
-  back: "2px solid " + MATISSE_BLUE,
-  smallPrimary: "2px solid " + MATISSE_BLUE,
-  smallSecondary: "2px solid " + MATISSE_BLUE,
+  primary: "2px solid " + LUCKY_POINT,
+  secondary: "2px solid " + LUCKY_POINT,
+  back: "2px solid " + LUCKY_POINT,
+  smallPrimary: "2px solid " + LUCKY_POINT,
+  smallSecondary: "2px solid " + LUCKY_POINT,
   smallGhost: "none",
   ghost: "none",
   tertiary: "none",
   danger: "2px solid " + RASPBERRY,
   dangerSecondary: "2px solid " + ERROR_COLOR,
+  whitePrimary: "2px solid " + TRANSPARENT,
   whiteSecondary: "2px solid " + WHITE,
-  whitePrimary: "2px solid " + TRANSPARENT
+  greenPrimary: "2px solid " + SEA_GREEN,
+  greenSecondary: "2px solid " + SEA_GREEN
 };
 
 const hoverBackgroundColor = {
-  primary: SAPPHIRE_BLUE,
-  secondary: "#DBEAF0",
+  primary: LUCKY_POINT_DARK,
+  secondary: HAWKES_BLUE,
   back: TRANSPARENT,
-  smallPrimary: SAPPHIRE_BLUE,
-  smallSecondary: "#DBEAF0",
+  smallPrimary: LUCKY_POINT_DARK,
+  smallSecondary: HAWKES_BLUE,
   smallGhost: TRANSPARENT,
   ghost: TRANSPARENT,
   tertiary: TRANSPARENT,
   danger: "#BA002C",
   dangerSecondary: "#FAE7EE",
+  whitePrimary: TRANSPARENT,
   whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT
+  greenPrimary: adjustHexColor(SEA_GREEN, 10, "darken"),
+  greenSecondary: HINT_GREEN
 };
 
 const hoverBorderColor = {
-  primary: SAPPHIRE_BLUE,
-  secondary: MATISSE_BLUE,
+  primary: LUCKY_POINT_DARK,
+  secondary: LUCKY_POINT,
   back: "#DCEAF1",
-  smallPrimary: SAPPHIRE_BLUE,
-  smallSecondary: MATISSE_BLUE,
+  smallPrimary: LUCKY_POINT_DARK,
+  smallSecondary: LUCKY_POINT,
   smallGhost: TRANSPARENT,
   ghost: TRANSPARENT,
   tertiary: TRANSPARENT,
   danger: "#BA002C",
   dangerSecondary: "#B10541",
+  whitePrimary: "2px solid " + TRANSPARENT,
   whiteSecondary: "2px solid " + TRANSPARENT,
-  whitePrimary: "2px solid " + TRANSPARENT
+  greenPrimary: SEA_GREEN,
+  greenSecondary: SEA_GREEN
 };
 
 const hoverColor = {
   primary: WHITE,
-  secondary: SAPPHIRE_BLUE,
-  back: SAPPHIRE_BLUE,
+  secondary: LUCKY_POINT,
+  back: LUCKY_POINT,
   smallPrimary: WHITE,
-  smallSecondary: SAPPHIRE_BLUE,
-  smallGhost: SAPPHIRE_BLUE,
-  ghost: SAPPHIRE_BLUE,
-  tertiary: SAPPHIRE_BLUE,
+  smallSecondary: LUCKY_POINT,
+  smallGhost: LUCKY_POINT,
+  ghost: LUCKY_POINT,
+  tertiary: LUCKY_POINT,
   danger: WHITE,
   dangerSecondary: "#B10541",
+  whitePrimary: WHITE,
   whiteSecondary: WHITE,
-  whitePrimary: WHITE
+  greenPrimary: WHITE,
+  greenSecondary: SEA_GREEN
 };
 
 const activeBackgroundColor = {
-  primary: PEACOCK_BLUE,
-  secondary: "#B8D5E1",
+  primary: LUCKY_POINT_DARK,
+  secondary: adjustHexColor(HAWKES_BLUE, 10, "darken"),
   back: TRANSPARENT,
-  smallPrimary: PEACOCK_BLUE,
-  smallSecondary: "#B8D5E1",
+  smallPrimary: LUCKY_POINT_DARK,
+  smallSecondary: adjustHexColor(HAWKES_BLUE, 10, "darken"),
   smallGhost: TRANSPARENT,
   ghost: TRANSPARENT,
   tertiary: TRANSPARENT,
   danger: "#870000",
   dangerSecondary: "#FAE7EE",
+  whitePrimary: TRANSPARENT,
   whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT
+  greenPrimary: adjustHexColor(SEA_GREEN, 20, "darken"),
+  greenSecondary: adjustHexColor(HINT_GREEN, 5, "darken")
 };
 
 const activeBorderColor = {
-  primary: PEACOCK_BLUE,
-  secondary: MATISSE_BLUE,
+  primary: adjustHexColor(LUCKY_POINT_DARK, 10, "darken"),
+  secondary: LUCKY_POINT,
   back: PEACOCK_BLUE,
-  smallPrimary: PEACOCK_BLUE,
-  smallSecondary: MATISSE_BLUE,
+  smallPrimary: adjustHexColor(LUCKY_POINT_DARK, 10, "darken"),
+  smallSecondary: LUCKY_POINT,
   smallGhost: TRANSPARENT,
   ghost: TRANSPARENT,
   tertiary: TRANSPARENT,
   danger: "#870000",
   dangerSecondary: "#910029",
+  whitePrimary: "2px solid " + TRANSPARENT,
   whiteSecondary: "2px solid " + TRANSPARENT,
-  whitePrimary: "2px solid " + TRANSPARENT
+  greenPrimary: SEA_GREEN,
+  greenSecondary: SEA_GREEN
 };
 
 const activeColor = {
   primary: WHITE,
-  secondary: MATISSE_BLUE,
+  secondary: LUCKY_POINT,
   back: PEACOCK_BLUE,
   smallPrimary: WHITE,
   smallSecondary: PEACOCK_BLUE,
@@ -279,8 +318,10 @@ const activeColor = {
   tertiary: PEACOCK_BLUE,
   danger: WHITE,
   dangerSecondary: "#910029",
+  whitePrimary: WHITE,
   whiteSecondary: WHITE,
-  whitePrimary: WHITE
+  greenPrimary: WHITE,
+  greenSecondary: SEA_GREEN
 };
 
 export const fallbackValues = {

package/src/components/atoms/button-with-action/index.d.ts

@@ -12,6 +12,7 @@ export interface ButtonWithActionProps {
   contentOverride?: boolean;
   extraStyles?: string;
   tabIndex?: string;
+  loadingColor?: string;
 }
 
 export const ButtonWithAction: React.FC<Expand<ButtonWithActionProps> &

package/src/components/atoms/button-with-link/ButtonWithLink.mdx

@@ -0,0 +1,21 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as ButtonWithLinkStories from './ButtonWithLink.stories.js';
+
+<Meta of={ButtonWithLinkStories} />
+
+<Title />
+
+`ButtonWithLink` wraps a [ButtonWithAction](?path=/docs/atoms-buttonwithaction--docs) component with either a `ExternalLink` or `InternalLink` component, unless the `disabled` prop is `true`, then it returns just the disabled `ButtonWithAction`.
+
+Any additional props not specified in the component params will be passed down to the underlying `ButtonWithAction` component, including the `text` prop, which will be used as the text for the button.
+
+The underlying `ButtonWithAction` component is themeable, and the variant can be changed by passing a valid `variant` value to `ButtonWithLink`.
+
+`extraStyles` will be passed down to the `ButtonWithAction`, while `linkExtraStyles` are passed to the `ExternalLink` or `InternalLink` component.
+
+`fileLink` forces the use of the `ExternalLink` component, even if the value of `url` is not an full external link with a valid URL prefix like `http://`.
+
+<Story />
+
+<Controls />

package/src/components/atoms/button-with-link/ButtonWithLink.stories.js

@@ -0,0 +1,161 @@
+import ButtonWithLink from "./ButtonWithLink";
+
+const meta = {
+  title: "Atoms/ButtonWithLink",
+  component: ButtonWithLink,
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  tags: ["!autodocs"],
+  args: {
+    url: "/",
+    disabled: false,
+    fileLink: false,
+    extraStyles: "",
+    linkExtraStyles: "",
+    newTab: false,
+    dataQa: undefined,
+    text: "Test Button",
+    variant: "primary"
+  },
+  argTypes: {
+    url: {
+      description: "URL for the button, can be interal or external",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "/" }
+      }
+    },
+    disabled: {
+      description: "Whether or not the button is disabled",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    fileLink: {
+      description:
+        "Forces `ExternalLink` to be used even if `url` is an internal value",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    extraStyles: {
+      description: "Styles for the underlying `ButtonWithAction` component",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    linkExtraStyles: {
+      description:
+        "Styles for the underlying `ExternalLink` or `InternalLink` component",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    newTab: {
+      description: "Whether or not the link will open in a new tab/window",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    dataQa: {
+      description: "`data-qa` value for the underlying link",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    text: {
+      description: "The button's text",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    variant: {
+      description: "The button's style variant",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const Basic = {
+  args: {
+    url: "http://example.com"
+  }
+};
+
+export const SecondaryVariant = {
+  args: {
+    url: "http://example.com",
+    variant: "secondary"
+  }
+};
+
+export const Disabled = {
+  args: {
+    url: "http://example.com",
+    disabled: true
+  }
+};
+
+export const ExtraStyles = {
+  args: {
+    url: "http://example.com",
+    extraStyles: "border-radius: 50%"
+  }
+};
+
+export const LinkExtraStyles = {
+  args: {
+    url: "http://example.com",
+    linkExtraStyles: "opacity: 50%;"
+  }
+};
+
+export const FileLink = {
+  args: {
+    url: "test.pdf",
+    fileLink: true
+  }
+};
+
+export const NewTab = {
+  args: {
+    url: "http://example.com",
+    newTab: true
+  }
+};
+
+export const DataQA = {
+  args: {
+    url: "http://example.com",
+    dataQa: "important-link"
+  }
+};
+
+export const InternalLink = {
+  args: {
+    url: "/example"
+  }
+};

package/src/components/atoms/card/Card.js

@@ -14,6 +14,7 @@ import Stack from "../layouts/Stack";
 import CardImage from "./CardImage.styled";
 import CardText from "./CardText";
 import CardHeader from "./CardHeader";
+import { noop } from "../../../util/general";
 
 const Card = ({
   borderRadius = "4px",
@@ -26,8 +27,13 @@ const Card = ({
   imgHeight = "150px",
   imgObjectFit = "none",
   imgAltText,
+  hasContentBackgroundColor = false,
+  onQuitClick = noop,
   padding = "24px",
+  showQuitLink = false,
   text,
+  textAs = "p",
+  titleAs = "h2",
   titleText,
   titleVariant = "small",
   themeValues,
@@ -87,12 +93,27 @@ const Card = ({
                 alt={imgAltText}
               />
             )}
-            <Box padding="0" width="100%" extraStyles="flex-basis: 100%;">
+            <Box
+              padding="0"
+              width="100%"
+              extraStyles={`
+                flex-basis: 100%;
+                background-color: ${
+                  hasContentBackgroundColor
+                    ? themeValues.contentBackgroundColor
+                    : ""
+                };
+              `}
+            >
               {text && (
                 <CardText
+                  onQuitClick={onQuitClick}
                   padding={padding}
+                  showQuitLink={showQuitLink}
+                  titleAs={titleAs}
                   titleText={titleText}
                   text={text}
+                  textAs={textAs}
                   titleVariant={titleVariant}
                 />
               )}