@thecb/components 3.1.3 → 3.1.11

package/src/components/atoms/layouts/Cluster.js

@@ -17,6 +17,7 @@ const Cluster = ({
   childGap,
   minHeight,
   minWidth,
+  nowrap,
   overflow = false,
   children,
   ...rest
@@ -28,6 +29,7 @@ const Cluster = ({
       childGap={childGap}
       minHeight={minHeight}
       minWidth={minWidth}
+      nowrap={nowrap}
     >
       {safeChildren(children, <Fragment />)}
     </ClusterInnerWrapper>

package/src/components/atoms/layouts/Cluster.styled.js

@@ -8,7 +8,7 @@ export const ClusterWrapper = styled.div`
 export const ClusterInnerWrapper = styled.div`
   box-sizing: border-box;
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: ${({ nowrap }) => (nowrap ? "nowrap" : "wrap")};
   justify-content: ${({ justify }) => justify};
   align-items: ${({ align }) => align};
   margin: calc(${({ childGap }) => childGap} / 2 * -1);

package/src/components/atoms/layouts/examples/ResizingContainer.js

@@ -10,7 +10,8 @@ const ResizeContainer = ({
   animate = "pause",
   containerMax = "500px",
   containerMin = "100%",
-  padding = "0.5rem"
+  padding = "0.5rem",
+  height = "auto"
 }) => {
   const ref = useRef();
   const [width, setWidth] = useState(0);
@@ -39,6 +40,7 @@ const ResizeContainer = ({
         containerMax={containerMax}
         containerMin={containerMin}
         padding={padding}
+        height={height}
       >
         {safeChildren(children, <Fragment />)}
       </ResizeInnerContainer>

package/src/components/atoms/layouts/examples/ResizingContainer.styled.js

@@ -23,7 +23,7 @@ export const ResizeInnerContainer = styled.div`
   box-sizing: border-box;
   margin-left: auto;
   margin-right: auto;
-  height: auto;
+  height: ${({ height }) => height};
   overflow-y: auto;
   display: flex;
   flex-direction: column;

package/src/components/atoms/layouts/examples/box-example/BoxExample.stories.js

@@ -0,0 +1,58 @@
+import React from "react";
+import { text, radios, select } from "@storybook/addon-knobs";
+
+import page from "../../../../../../.storybook/page";
+import Box from "../../Box";
+import LayoutContentBlock from "../LayoutContentBlock";
+
+const as = { default: "", button: "button" };
+const textAlign = {
+  left: "left",
+  center: "center",
+  right: "right"
+};
+const groupId = "props";
+
+export default page({
+  title: "Layouts|Basic Layouts/Box",
+  Component: Box
+});
+
+export const box = () => (
+  <Box
+    padding={text("padding", "16px", groupId)}
+    borderSize={text("borderSize", "0px", groupId)}
+    borderColor={text("borderColor", "transparent", groupId)}
+    borderRadius={text("borderRadius", "0px", groupId)}
+    boxShadow={text("boxShadow", "none", groupId)}
+    background={text("background", "", groupId)}
+    color={text("color", "", groupId)}
+    minHeight={text("minHeight", "", groupId)}
+    width={text("width", "", groupId)}
+    minWidth={text("minWidth", "", groupId)}
+    maxWidth={text("maxWidth", "", groupId)}
+    borderWidthOverride={text("borderWidthOverride", "", groupId)}
+    border={text("border", "", groupId)}
+    as={radios("as", as, "default", groupId)}
+    textAlign={select("textAlign", textAlign, "left", groupId)}
+    hoverStyles={text("hoverStyles", "", groupId)}
+    activeStyles={text("activeStyles", "", groupId)}
+    disabledStyles={text("disabledStyles", "", groupId)}
+    hiddenStyles={text("hiddenStyles", "", groupId)}
+    extraStyles={text("extraStyles", "", groupId)}
+    onClick={text("onClick", () => {}, groupId)}
+    onKeyDown={text("onKeyDown", () => {}, groupId)}
+    onMouseEnter={text("onMouseEnter", () => {}, groupId)}
+    onMouseLeave={text("onMouseLeave", () => {}, groupId)}
+    onFocus={text("onFocus", () => {}, groupId)}
+    onBlur={text("onBlur", () => {}, groupId)}
+    onTouchEnd={text("onTouchEnd", () => {}, groupId)}
+  >
+    Text Child
+    <LayoutContentBlock
+      height="3.5rem"
+      width="8rem"
+      layoutName="Component Child"
+    />
+  </Box>
+);

package/src/components/atoms/layouts/examples/center-example/CenterExample.stories.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { text, boolean } from "@storybook/addon-knobs";
+
+import page from "../../../../../../.storybook/page";
+import Center from "../../Center";
+import LayoutContentBlock from "../LayoutContentBlock";
+
+const groupId = "props";
+
+export default page({
+  title: "Layouts|Basic Layouts/Center",
+  Component: Center
+});
+
+export const center = () => (
+  <Center
+    maxWidth={text("maxWidth", "", groupId)}
+    gutters={text("gutters", "", groupId)}
+    intrinsic={boolean("intrinsic", false, groupId)}
+  >
+    Text Child
+    <LayoutContentBlock
+      height="3.5rem"
+      width="8rem"
+      layoutName="Component Child"
+    />
+  </Center>
+);

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/InternalLink.styled.js

@@ -21,8 +21,6 @@ export const StyledInternalLink = styled(
   font-size: ${({ fontSize }) => fontSize};
   font-family: ${({ fontFamily }) => fontFamily};
   margin: ${({ margin }) => margin};
-  text-decoration: ${({ active }) =>
-    active === "true" ? "underline" : "none"};
 
   &:hover,
   &:focus {

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 = {