@thecb/components 2.2.0

package/src/components/atoms/layouts/examples/grid-example/GridExample.js

@@ -0,0 +1,49 @@
+import React from "react";
+
+import Grid from "../../Grid";
+import Stack from "../../Stack";
+import FixedSizeContainer from "../FixedSizeContainer";
+import LayoutContentBlock from "../LayoutContentBlock";
+
+const generateChildren = number => {
+  let childArray = [];
+  for (let count = 0; count < number; count++) {
+    childArray = [
+      ...childArray,
+      <FixedSizeContainer
+        key={`card-${count}`}
+        width="12rem"
+        height="14rem"
+        margin="0 0 1rem 0"
+      >
+        <Stack fullHeight bottomItem={3}>
+          <LayoutContentBlock key="1" height="2rem" layoutName="Card Title" />
+          <LayoutContentBlock
+            key="2"
+            height="6rem"
+            layoutName={`Card Content ${count + 1}`}
+          />
+          <LayoutContentBlock key="3" height="2rem" layoutName="Card Footer" />
+        </Stack>
+      </FixedSizeContainer>
+    ];
+  }
+  return childArray;
+};
+
+const GridExample = ({
+  minColWidth,
+  maxColWidth,
+  columnGap = "0.5rem",
+  numChildren
+}) => (
+  <Grid
+    minColWidth={minColWidth}
+    maxColWidth={maxColWidth}
+    columnGap={columnGap}
+  >
+    {generateChildren(numChildren)}
+  </Grid>
+);
+
+export default GridExample;

package/src/components/atoms/layouts/examples/grid-example/GridExample.stories.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { withKnobs, text, radios, number } from "@storybook/addon-knobs";
+import GridExample from "./GridExample";
+import Cover from "../../Cover";
+import Center from "../../Center";
+import ResizingContainer from "../ResizingContainer";
+
+export default {
+  title: "Layouts|Basic Layouts/Grid",
+  component: GridExample,
+  decorators: [
+    withKnobs,
+    storyFn => (
+      <Cover>
+        <div />
+        <Center>{storyFn()}</Center>
+        <div />
+      </Cover>
+    )
+  ]
+};
+
+const label = "Animate";
+const options = {
+  play: "play",
+  pause: "pause"
+};
+const defaultValue = "pause";
+const groupID = "RADIO-GROUP-1";
+
+export const basicGrid = () => (
+  <ResizingContainer
+    animate={radios(label, options, defaultValue, groupID)}
+    containerMax={text("Container Max", "60rem")}
+    containerMin={text("Container Min", "25rem")}
+    padding={"1rem"}
+  >
+    <GridExample numChildren={number("Number of Cards", 8)} minColWidth={13} />
+  </ResizingContainer>
+);
+
+basicGrid.story = {
+  name: "Grid of cards"
+};

package/src/components/atoms/layouts/examples/sidebar-example/SidebarExample.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+import Sidebar from "../../Sidebar";
+
+const SidebarExample = ({ width, onRight, childGap, children }) => (
+  <Sidebar width={width} onRight={onRight} childGap={childGap}>
+    {children}
+  </Sidebar>
+);
+
+export default SidebarExample;

package/src/components/atoms/layouts/examples/sidebar-example/SidebarExample.stories.js

@@ -0,0 +1,87 @@
+import React from "react";
+import { withKnobs, text, radios } from "@storybook/addon-knobs";
+import SidebarExample from "./SidebarExample";
+//import Stack from "../../Stack";
+import Switcher from "../../Switcher";
+import Cover from "../../Cover";
+import Center from "../../Center";
+import FixedSizeContainer from "../FixedSizeContainer";
+import ResizingContainer from "../ResizingContainer";
+import LayoutContentBlock from "../LayoutContentBlock";
+
+export default {
+  title: "Layouts|Basic Layouts/Sidebar",
+  component: SidebarExample,
+  decorators: [
+    withKnobs,
+    storyFn => (
+      <Cover>
+        <div />
+        <Center>{storyFn()}</Center>
+        <div />
+      </Cover>
+    )
+  ]
+};
+
+const label = "Animate";
+const options = {
+  play: "play",
+  pause: "pause"
+};
+const defaultValue = "pause";
+const groupID = "RADIO-GROUP-1";
+
+export const basicSidebar = () => (
+  <ResizingContainer
+    animate={radios(label, options, defaultValue, groupID)}
+    containerMax={text("Container Max", "60rem")}
+    containerMin={text("Container Min", "25rem")}
+    padding={"1rem"}
+  >
+    <SidebarExample childGap="0.5rem" width="15rem">
+      <FixedSizeContainer>
+        <Switcher breakpoint={"15rem"}>
+          <LayoutContentBlock
+            height="3rem"
+            width="2rem"
+            layoutName="First Tab"
+          />
+          <LayoutContentBlock
+            height="3rem"
+            width="2rem"
+            layoutName="Second Tab"
+          />
+          <LayoutContentBlock
+            height="3rem"
+            width="2rem"
+            layoutName="Third Tab"
+          />
+        </Switcher>
+        {/*<Stack fullHeight bottomItem={4}>
+          <LayoutContentBlock height="3rem" layoutName="First Tab" />
+          <LayoutContentBlock height="3rem" layoutName="Second Tab" />
+          <LayoutContentBlock height="3rem" layoutName="Third Tab" />
+          <LayoutContentBlock height="3.5rem" layoutName="Cool Button" />
+</Stack>*/}
+      </FixedSizeContainer>
+      <FixedSizeContainer>
+        <Cover minHeight="75vh">
+          <div />
+          <Center>
+            <LayoutContentBlock
+              layoutName="Some great content"
+              width="20rem"
+              height="400px"
+            />
+          </Center>
+          <div />
+        </Cover>
+      </FixedSizeContainer>
+    </SidebarExample>
+  </ResizingContainer>
+);
+
+basicSidebar.story = {
+  name: "Sidebar and content"
+};

package/src/components/atoms/layouts/examples/stack-example/StackExample.js

@@ -0,0 +1,27 @@
+import React from "react";
+
+import Stack from "../../Stack";
+import LayoutContentBlock from "../LayoutContentBlock";
+
+const generateChildren = number => {
+  let childArray = [];
+  for (let count = 0; count < number; count++) {
+    childArray = [
+      ...childArray,
+      <LayoutContentBlock
+        height="2.5rem"
+        layoutName={`Element ${count + 1}`}
+        key={`count ${count}`}
+      />
+    ];
+  }
+  return childArray;
+};
+
+const StackExample = ({ numChildren, childGap, bottomItem, fullHeight }) => (
+  <Stack childGap={childGap} bottomItem={bottomItem} fullHeight={fullHeight}>
+    {generateChildren(numChildren)}
+  </Stack>
+);
+
+export default StackExample;

package/src/components/atoms/layouts/examples/stack-example/StackExample.stories.js

@@ -0,0 +1,69 @@
+import React from "react";
+import { withKnobs, text, number, boolean } from "@storybook/addon-knobs";
+import StackExample from "./StackExample";
+import Cover from "../../Cover";
+import Center from "../../Center";
+import FixedSizeContainer from "../FixedSizeContainer";
+import { TROUT_GREY } from "../../../../../constants/colors";
+
+export default {
+  title: "Layouts|Basic Layouts/Stack",
+  component: StackExample,
+  decorators: [
+    withKnobs,
+    storyFn => (
+      <Cover>
+        <div />
+        <Center>{storyFn()}</Center>
+        <div />
+      </Cover>
+    )
+  ]
+};
+
+export const basicStack = () => (
+  <FixedSizeContainer
+    width={text("Container Width", "30rem")}
+    height={text("Container Height", "auto")}
+    border={text("Container Border", `2px solid ${TROUT_GREY}`)}
+  >
+    <StackExample
+      numChildren={number("Number of children", 4)}
+      childGap={text("Space between children", "1rem")}
+      bottomItem={text("Bottom item", "")}
+      fullHeight={boolean("Full height", false)}
+    />
+  </FixedSizeContainer>
+);
+
+basicStack.story = {
+  name: "Basic Stack"
+};
+
+export const bottomItemStack = () => (
+  <FixedSizeContainer
+    width={"30rem"}
+    height={"20rem"}
+    border={text("Container Border", `2px solid ${TROUT_GREY}`)}
+  >
+    <StackExample numChildren={4} bottomItem={4} fullHeight={true} />
+  </FixedSizeContainer>
+);
+
+bottomItemStack.story = {
+  name: "Bottom Item Stack"
+};
+
+export const splitStack = () => (
+  <FixedSizeContainer
+    width={"30rem"}
+    height={"20rem"}
+    border={text("Container Border", `2px solid ${TROUT_GREY}`)}
+  >
+    <StackExample numChildren={4} bottomItem={3} fullHeight={true} />
+  </FixedSizeContainer>
+);
+
+splitStack.story = {
+  name: "Split Stack"
+};

package/src/components/atoms/layouts/examples/switcher-example/SwitcherExample.js

@@ -0,0 +1,38 @@
+import React from "react";
+
+import Switcher from "../../Switcher";
+import LayoutContentBlock from "../LayoutContentBlock";
+
+const generateChildren = number => {
+  let childArray = [];
+  for (let count = 0; count < number; count++) {
+    childArray = [
+      ...childArray,
+      <LayoutContentBlock
+        height="3rem"
+        layoutName={`Element ${count + 1}`}
+        key={`count ${count}`}
+      />
+    ];
+  }
+  return childArray;
+};
+
+const SwitcherExample = ({
+  numChildren,
+  breakpoint,
+  largeChild,
+  largeChildSize,
+  maxChildren
+}) => (
+  <Switcher
+    breakpoint={breakpoint}
+    largeChild={largeChild}
+    largeChildSize={largeChildSize}
+    maxChildren={maxChildren}
+  >
+    {generateChildren(numChildren)}
+  </Switcher>
+);
+
+export default SwitcherExample;

package/src/components/atoms/layouts/examples/switcher-example/SwitcherExample.stories.js

@@ -0,0 +1,65 @@
+import React from "react";
+import { withKnobs, text, radios, number } from "@storybook/addon-knobs";
+import SwitcherExample from "./SwitcherExample";
+import Cover from "../../Cover";
+import Center from "../../Center";
+import FixedSizeContainer from "../FixedSizeContainer";
+import ResizingContainer from "../ResizingContainer";
+
+export default {
+  title: "Layouts|Basic Layouts/Switcher",
+  component: SwitcherExample,
+  decorators: [
+    withKnobs,
+    storyFn => (
+      <Cover>
+        <div />
+        <Center>{storyFn()}</Center>
+        <div />
+      </Cover>
+    )
+  ]
+};
+
+const label = "Animate";
+const options = {
+  play: "play",
+  pause: "pause"
+};
+const defaultValue = "pause";
+const groupID = "RADIO-GROUP-1";
+
+export const basicSwitcher = () => (
+  <ResizingContainer
+    animate={radios(label, options, defaultValue, groupID)}
+    containerMax={text("Container Max", "45rem")}
+    containerMin={text("Container Min", "12.5rem")}
+  >
+    <SwitcherExample
+      numChildren={4}
+      breakpoint={text("Switcher Breakpoint", "30rem")}
+    />
+  </ResizingContainer>
+);
+
+basicSwitcher.story = {
+  name: "Resizing Switcher"
+};
+
+export const childLimitSwitcher = () => (
+  <FixedSizeContainer
+    width={text("Container Width", "40rem")}
+    floatingLabel={"Switcher"}
+  >
+    <SwitcherExample
+      numChildren={number("Number of Children", 4)}
+      maxChildren={number("Max Children", 6)}
+      largeChild={number("Large Child", 2)}
+      largeChildSize={number("Large Child Size", 1)}
+    />
+  </FixedSizeContainer>
+);
+
+childLimitSwitcher.story = {
+  name: "Limited Children Switcher"
+};

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

@@ -0,0 +1,27 @@
+import Box from "./Box.js";
+import Center from "./Center.js";
+import Cluster from "./Cluster.js";
+import Grid from "./Grid.js";
+import Sidebar from "./Sidebar.js";
+import Stack from "./Stack.js";
+import Cover from "./Cover.js";
+import Frame from "./Frame.js";
+import Switcher from "./Switcher.js";
+import Imposter from "./Imposter.js";
+import Motion from "./Motion.js";
+import Reel from "./Reel.js";
+
+export {
+  Box,
+  Center,
+  Cluster,
+  Grid,
+  Sidebar,
+  Stack,
+  Cover,
+  Frame,
+  Switcher,
+  Imposter,
+  Motion,
+  Reel
+};

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

@@ -0,0 +1,30 @@
+import React from "react";
+import { Cluster, Stack } from "../layouts";
+import Paragraph from "../paragraph";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./LineItem.theme";
+
+const LineItem = ({ description, subDescription, amount, themeValues }) => (
+  <Cluster justify="space-between" align="start">
+    <Stack childGap="0px">
+      <Paragraph
+        variant={themeValues.paragraphVariant}
+        weight={themeValues.weightTitle}
+      >
+        {description}
+      </Paragraph>
+      <Paragraph variant={themeValues.paragraphVariant} weight="400">
+        {subDescription}
+      </Paragraph>
+    </Stack>
+    <Paragraph
+      variant={themeValues.paragraphVariant}
+      weight="600"
+      extraStyles="margin: 0;"
+    >
+      {amount}
+    </Paragraph>
+  </Cluster>
+);
+
+export default themeComponent(LineItem, "LineItem", fallbackValues, "default");

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

@@ -0,0 +1,7 @@
+const weightTitle = { default: "600", small: "400" };
+const paragraphVariant = { default: "pL", small: "p" };
+
+export const fallbackValues = {
+  weightTitle,
+  paragraphVariant
+};

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

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

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

@@ -0,0 +1,50 @@
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
+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, SCIENCE_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,
+  hoverColor = SCIENCE_BLUE,
+  extraStyles = ``,
+  variant = "primary",
+  tabIndex = "0",
+  children
+}) => {
+  const themeContext = useContext(ThemeContext);
+  const themeValues = createThemeValues(
+    themeContext,
+    fallbackValues,
+    "Link",
+    variant
+  );
+
+  return (
+    <StyledExternalLink
+      href={href}
+      target={newTab ? "_blank" : ""}
+      color={color}
+      size={size}
+      lineheight={lineHeight}
+      weight={weight}
+      hovercolor={hoverColor}
+      fontFamily={themeValues.fontFamily}
+      tabIndex={tabIndex}
+      extrastyles={extraStyles}
+      rel={newTab ? "noopener" : ""}
+    >
+      {safeChildren(children, <span />)}
+    </StyledExternalLink>
+  );
+};
+
+export default ExternalLink;

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

@@ -0,0 +1,26 @@
+import React from "react";
+import styled from "styled-components";
+
+/*
+  The extracting of props and the disabling of the eslint rule is to stop React from complaining about
+  unrecognized DOM attributes.
+*/
+
+/* eslint-disable no-unused-vars */
+export const StyledExternalLink = styled(
+  ({ hoverColor, extraStyles, ...props }) => <a {...props} />
+)`
+  display: flex;
+  font-size: ${({ size }) => size};
+  color: ${({ color }) => color};
+  font-weight: ${({ weight }) => weight};
+  font-family: ${({ fontFamily }) => fontFamily};
+  line-height: ${({ lineheight }) => lineheight};
+
+  &:hover {
+    color: ${({ hovercolor }) => hovercolor};
+  }
+
+  ${({ extrastyles }) => extrastyles}
+`;
+/* eslint-enable no-unused-vars */

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

@@ -0,0 +1,51 @@
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
+import { fallbackValues } from "./Link.theme";
+import { createThemeValues } from "../../../util/themeUtils";
+import { StyledInternalLink } from "./InternalLink.styled";
+import { safeChildren } from "../../../util/general";
+
+const InternalLink = ({
+  to = "",
+  color,
+  children,
+  activeStyles,
+  active,
+  fontSize,
+  lineheight,
+  fontWeight,
+  variant = "primary",
+  margin,
+  hoverStyles,
+  tabIndex = "0",
+  extraStyles = ``
+}) => {
+  const themeContext = useContext(ThemeContext);
+  const themeValues = createThemeValues(
+    themeContext,
+    fallbackValues,
+    "Link",
+    variant
+  );
+
+  return (
+    <StyledInternalLink
+      to={to}
+      color={color}
+      lineheight={lineheight}
+      activeStyles={activeStyles}
+      active={active}
+      fontWeight={fontWeight}
+      fontSize={fontSize}
+      fontFamily={themeValues.fontFamily}
+      margin={margin}
+      hoverStyles={hoverStyles}
+      tabIndex={tabIndex}
+      extrastyles={extraStyles}
+    >
+      {safeChildren(children, <span />)}
+    </StyledInternalLink>
+  );
+};
+
+export default InternalLink;

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

@@ -0,0 +1,39 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { Link } from "react-router-dom";
+
+/*
+  The extracting of props and the disabling of the eslint rule is to stop React from complaining about
+  unrecognized DOM attributes.
+*/
+
+/* eslint-disable no-unused-vars */
+export const StyledInternalLink = styled(
+  ({ hoverStyles, activeStyles, active, ...props }) => <Link {...props} />
+)`
+  display: flex;
+  color: ${({ color }) => color};
+  font-weight: ${({ fontWeight }) => fontWeight};
+  line-height: ${({ lineheight }) => lineheight};
+  font-size: ${({ fontSize }) => fontSize};
+  font-family: ${({ fontFamily }) => fontFamily};
+  margin: ${({ margin }) => margin};
+
+  &:hover {
+    ${({ hoverStyles }) =>
+      css`
+        ${hoverStyles}
+      `}
+  }
+
+  ${({ activeStyles, active }) =>
+    active === "true" &&
+    css`
+      ${activeStyles}
+      cursor: default;
+      pointer-events: none;
+    `}
+
+  ${({ extrastyles }) => extrastyles}
+`;
+/* eslint-enable no-unused-vars */

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

@@ -0,0 +1,8 @@
+const fontFamily = {
+  primary: "Public Sans",
+  secondary: "Open Sans"
+};
+
+export const fallbackValues = {
+  fontFamily
+};

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

@@ -0,0 +1,4 @@
+import ExternalLink from "./ExternalLink";
+import InternalLink from "./InternalLink";
+
+export { ExternalLink, InternalLink };