@thecb/components 2.2.0

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

@@ -0,0 +1,51 @@
+import React, { Fragment } from "react";
+import { MotionWrapper } from "./Motion.styled";
+import { safeChildren } from "../../../util/general";
+
+/*
+  Catch-all component for creating animations with Framer Motion library
+  Wraps the framer motion "motion.div" with styled components and allows for passing
+  of style props, like with all the other layout primitives.
+
+  Compatible with other layout primitives, you can wrap non-animating primitives in a Motion
+  to animate items. See the construction of the Collapsible Section and Radio Section for examples.
+
+  Motion is intentionally more flexible than our other layout primitives - this was done to avoid
+  creating motion versions of each primitive. Usually, the correct approach will be to wrap
+  other layout primitives with a Motion in order to animate: 
+
+    <Motion>
+      <Cluster>
+        stuff...
+      </Cluster>
+    </Motion>
+
+    Motion components can be nested in order to animate both a primitive container as well as its
+    children:
+
+    <Motion>
+      <Stack>
+        <Motion>
+          <Box>cool stuff</Box>
+        </Motion>
+        <Motion>
+          <Box>other stuff</Box>
+        </Motion>
+      </Stack>
+    </Motion>
+  
+  This should be sufficient for most scenarios, but if you need to, you have the ability to make Motion act like all of the other primitives using the props provided.
+*/
+
+export const Motion = ({
+  position = "relative",
+  padding = "0",
+  children,
+  ...rest
+}) => (
+  <MotionWrapper position={position} padding={padding} {...rest}>
+    {safeChildren(children, <Fragment />)}
+  </MotionWrapper>
+);
+
+export default Motion;

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

@@ -0,0 +1,41 @@
+import styled from "styled-components";
+import { motion } from "framer-motion";
+
+export const MotionWrapper = styled(motion.div)`
+  position: ${({ position }) => position};
+  display: ${({ display }) => display};
+  box-sizing: border-box;
+  padding: ${({ padding }) => padding};
+  border: ${({ borderShorthand }) => borderShorthand};
+  border-color: ${({ borderColor }) => borderColor};
+  border-size: ${({ borderSize }) => borderSize};
+  border-style: ${({ borderStyle }) => borderStyle};
+  border-width: ${({ borderWidth }) => borderWidth};
+  border-radius: ${({ borderRadius }) => borderRadius};
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  box-shadow: ${({ boxShadow }) => boxShadow};
+  min-height: ${({ minHeight }) => minHeight};
+  min-width: ${({ minWidth }) => minWidth};
+  height: ${({ height }) => height};
+  width: ${({ width }) => width};
+  text-align: ${({ textAlign }) => textAlign};
+  margin: ${({ margin }) => margin};
+
+  &:hover {
+    ${({ hoverStyles }) => hoverStyles};
+  }
+
+  &:active {
+    ${({ activeStyles }) => activeStyles};
+  }
+
+  &:focus {
+    ${({ focusStyles }) => focusStyles};
+  }
+
+  &:disabled {
+    ${({ disabledStyles }) => disabledStyles};
+  }
+
+  ${({ extraStyles }) => extraStyles};
+`;

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

@@ -0,0 +1,28 @@
+import React, { Fragment } from "react";
+import { safeChildren } from "../../../util/general";
+import { ReelStyled } from "./Reel.styled";
+
+const Reel = ({
+  childGap = "1rem",
+  height = "auto",
+  childWidth = "auto",
+  padding = "1rem",
+  justifyContent = "flex-start",
+  disableScroll = false,
+  children,
+  ...rest
+}) => (
+  <ReelStyled
+    childGap={childGap}
+    height={height}
+    childWidth={childWidth}
+    padding={padding}
+    justifyContent={justifyContent}
+    disableScroll={disableScroll}
+    {...rest}
+  >
+    {safeChildren(children, <Fragment />)}
+  </ReelStyled>
+);
+
+export default Reel;

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

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+export const ReelStyled = styled.div`
+  display: flex;
+  overflow-x: ${({ disableScroll }) => (disableScroll ? "hidden" : "auto")};
+  padding: ${({ padding }) => padding};
+  height: ${({ height }) => height};
+  justify-content: ${({ justifyContent }) => justifyContent};
+
+  > * + * {
+    margin-left: ${({ childGap }) => childGap};
+  }
+
+  > * {
+    flex: 0 0 ${({ childWidth }) => childWidth};
+  }
+`;

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

@@ -0,0 +1,42 @@
+import React, { Fragment } from "react";
+import { SidebarWrapper, SidebarInnerWrapper } from "./Sidebar.styled";
+import { safeChildren } from "../../../util/general";
+
+/*
+  Component to assist in creating layouts with some element and a sidebar next to it
+  Sidebar takes a width value, this is the ideal target with, and what the sidebar
+  will be sized to on larger/medium screens
+
+  The component also takes a content minimum width, this should be a percentage
+  it represents the narrowest the content piece can get before the sidebar wraps to
+  the top of the layout. If not supplied, the sidebar will size to the width of its content.
+
+  This can be used for many use cases beyond the typical content/sidebar layout
+  Such as for pinning a button/icon next to a form input
+*/
+
+const Sidebar = ({
+  childGap = "1rem",
+  width,
+  onRight = false,
+  contentMinWidth = "50%",
+  fullHeight = false,
+  minHeight,
+  children,
+  ...rest
+}) => (
+  <SidebarWrapper fullHeight={fullHeight} minHeight={minHeight} {...rest}>
+    <SidebarInnerWrapper
+      childGap={childGap}
+      width={width}
+      onRight={onRight}
+      contentMinWidth={contentMinWidth}
+      fullHeight={fullHeight}
+      minHeight={minHeight}
+    >
+      {safeChildren(children, <Fragment />)}
+    </SidebarInnerWrapper>
+  </SidebarWrapper>
+);
+
+export default Sidebar;

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

@@ -0,0 +1,38 @@
+import styled from "styled-components";
+
+export const SidebarWrapper = styled.div`
+  overflow: visible;
+  box-sizing: border-box;
+
+  ${({ fullHeight }) => (fullHeight ? `height: 100%;` : ``)}
+`;
+
+export const SidebarInnerWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  margin: calc(${({ childGap }) => childGap} / 2 * -1);
+
+  > * {
+    margin: calc(${({ childGap }) => childGap} / 2);
+    flex-grow: 1;
+    ${({ width }) => (width ? `flex-basis: ${width}` : ``)};
+    ${({ minHeight }) => (minHeight ? `margin-top: 0; margin-bottom: 0;` : ``)}
+  }
+
+  ${({ onRight, contentMinWidth, childGap }) =>
+    onRight
+      ? `> :first-child {
+      flex-basis: 0;
+      flex-grow: 999;
+      min-width: calc(${contentMinWidth} - ${childGap});
+    }
+    `
+      : `> :last-child {
+      flex-basis: 0;
+      flex-grow: 999;
+      min-width: calc(${contentMinWidth} - ${childGap});
+    }`}
+
+  ${({ fullHeight }) => (fullHeight ? `min-height: 100%;` : ``)}
+`;

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

@@ -0,0 +1,36 @@
+import React, { Fragment } from "react";
+import { StackWrapper } from "./Stack.styled";
+import { safeChildren } from "../../../util/general";
+
+/*
+  Component to impose margin-top between a list of child elements
+  Useful for things like sidebars and button lists
+  Avoids common pitfalls like having to manually adjust the margin
+  on first/last children
+
+  For more information and diagrams:
+  https://every-layout.dev/layouts/stack/
+*/
+
+const Stack = ({
+  childGap = "1rem",
+  bottomItem,
+  fullHeight = false,
+  children,
+  direction = "column",
+  justify,
+  ...rest
+}) => (
+  <StackWrapper
+    childGap={childGap}
+    bottomItem={bottomItem}
+    fullHeight={fullHeight}
+    direction={direction}
+    justify={justify}
+    {...rest}
+  >
+    {safeChildren(children, <Fragment />)}
+  </StackWrapper>
+);
+
+export default Stack;

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

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+
+export const StackWrapper = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: ${({ direction }) => direction};
+  justify-content: ${({ justify }) => (justify ? justify : "flex-start")};
+  height: ${({ fullHeight }) => (fullHeight ? "100%" : "auto")};
+
+  > * {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  > * + * {
+    ${({ direction, childGap }) =>
+      direction === "row"
+        ? `margin-left: ${childGap};`
+        : `margin-top: ${childGap};`}
+  }
+
+  ${({ bottomItem, direction }) =>
+    bottomItem
+      ? `
+    > :nth-child(${bottomItem}) {
+        ${direction === "row" ? "margin-left: auto;" : "margin-top: auto;"}
+    }
+  `
+      : ``};
+`;

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

@@ -0,0 +1,64 @@
+import React, { Fragment } from "react";
+import { safeChildren } from "../../../util/general";
+import {
+  SwitcherOuterContainer,
+  SwitcherInnerContainer
+} from "./Switcher.styled";
+
+/*
+  The Switcher is a component that is used to toggle between wide and narrow
+  layouts based on the size of the surrounding container. In the wide layout,
+  the children of the Switcher will be sized to the value specified by childSize.
+  The point at which the layout switches is specified by the breakpoint prop.
+  The space between child elements is specified with 
+
+  In the wide layout, it is possible to specify that a particular child take up
+  more space than its siblings. The largeChild prop takes a child number and
+  applies the largeChildSize to its flex-grow property.
+
+  This component also accepts an optional maxChildren prop. This prop specifies the max
+  number of children allowed before the component toggles to a vertical list
+  layout.
+
+  In the narrow layout, the children of the Switcher will render as a vertical list
+  of width: 100%. This component is best used for scenarios when you want to bypass
+  intermediate layouts where children may size differently depending on the number of
+  children present in a given row.
+
+  Use cases for this component include any situation "in which each child element
+  should be considered equal, or part of a continuum. E.g., card components listing
+  products/services should share the same width no matter the orientation, otherwise
+  one or more cards could be perceived as highlighted or featured in some way. Or
+  a set of numbered steps in, for example, a list of items to complete or tasks to do."
+*/
+
+const Switcher = ({
+  breakpoint = "30rem",
+  childGap = "1rem",
+  largeChild,
+  largeChildSize,
+  maxChildren,
+  maxChildrenOnly = false,
+  padding = "0",
+  children,
+  extraStyles,
+  ...rest
+}) => (
+  <SwitcherOuterContainer>
+    <SwitcherInnerContainer
+      breakpoint={breakpoint}
+      childGap={childGap}
+      largeChild={largeChild}
+      largeChildSize={largeChildSize}
+      maxChildren={maxChildren}
+      maxChildrenOnly={maxChildrenOnly}
+      padding={padding}
+      extraStyles={extraStyles}
+      {...rest}
+    >
+      {safeChildren(children, <Fragment />)}
+    </SwitcherInnerContainer>
+  </SwitcherOuterContainer>
+);
+
+export default Switcher;

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

@@ -0,0 +1,44 @@
+import styled, { css } from "styled-components";
+
+export const SwitcherOuterContainer = styled.div`
+  box-sizing: border-box;
+  display: block;
+`;
+
+export const SwitcherInnerContainer = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+  padding: ${({ padding }) => padding};
+  margin: ${({ childGap }) => `calc((${childGap} / 2) * -1)`};
+
+  > * {
+    flex-grow: 1;
+    ${({ maxChildrenOnly, breakpoint, childGap }) =>
+      !maxChildrenOnly
+        ? `flex-basis: calc((${breakpoint} - (100% - ${childGap})) * 999);`
+        : ``};
+    ${({ childGap }) => `margin: calc(${childGap} / 2);`}
+  }
+
+  ${({ largeChild, largeChildSize }) =>
+    largeChild && largeChildSize
+      ? `> :nth-child(${largeChild}) {
+      flex-grow: ${largeChildSize};
+    }`
+      : ``}
+
+  ${({ maxChildren }) =>
+    maxChildren
+      ? `> :nth-last-child(${maxChildren +
+          1}), > :nth-last-child(${maxChildren + 1}) ~ * {
+      flex-basis: 100%;
+    }`
+      : ``}
+
+  ${({ extraStyles }) =>
+    css`
+      ${extraStyles}
+    `}
+`;

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

@@ -0,0 +1,22 @@
+import React, { Fragment } from "react";
+import { FixedSize, FloatingLabel } from "./FixedSizeContainer.styled";
+import { safeChildren } from "../../../../util/general";
+import { TROUT_GREY } from "../../../../constants/colors";
+
+const FixedSizeContainer = ({
+  width,
+  height = "auto",
+  border = `2px solid ${TROUT_GREY}`,
+  floatingLabel,
+  margin,
+  children
+}) => (
+  <FixedSize width={width} height={height} border={border} margin={margin}>
+    {safeChildren(children)}
+    <Fragment>
+      <FloatingLabel>{floatingLabel}</FloatingLabel>
+    </Fragment>
+  </FixedSize>
+);
+
+export default FixedSizeContainer;

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

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+import { TROUT_GREY } from "../../../../constants/colors";
+
+export const FixedSize = styled.div`
+  box-sizing: border-box;
+  width: ${({ width }) => width};
+  height: ${({ height }) => height};
+  padding: 0.5rem;
+  border: ${({ border }) => border};
+  border-radius: 4px;
+  position: relative;
+  margin: ${({ margin }) => margin};
+`;
+
+export const FloatingLabel = styled.p`
+  position: absolute;
+  left: 0.5rem;
+  font-size: 1rem;
+  color: ${TROUT_GREY};
+`;

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { LayoutBlock } from "./LayoutContentBlock.styled";
+import Text from "../../text";
+
+const LayoutContentBlock = ({
+  layoutName,
+  bgColor = "#AAA",
+  textColor = "#111",
+  borderColor = "#666",
+  width = "100%",
+  height = "auto",
+  padding = "1rem",
+  margin
+}) => (
+  <LayoutBlock
+    width={width}
+    height={height}
+    bgColor={bgColor}
+    borderColor={borderColor}
+    padding={padding}
+    margin={margin}
+  >
+    <Text color={textColor}>{layoutName}</Text>
+  </LayoutBlock>
+);
+
+export default LayoutContentBlock;

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

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+export const LayoutBlock = styled.div`
+  box-sizing: border-box;
+  width: ${({ width }) => width};
+  height: ${({ height }) => height};
+  background-color: ${({ bgColor }) => bgColor};
+  border: 2px solid ${({ borderColor }) => borderColor};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: ${({ padding }) => padding};
+  max-width: 100%;
+  margin: ${({ margin }) => margin};
+`;

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

@@ -0,0 +1,49 @@
+import React, { useState, useRef, useEffect, Fragment } from "react";
+import {
+  ResizeOuterContainer,
+  ResizeInnerContainer
+} from "./ResizingContainer.styled";
+import { safeChildren } from "../../../../util/general";
+
+const ResizeContainer = ({
+  children,
+  animate = "pause",
+  containerMax = "500px",
+  containerMin = "100%",
+  padding = "0.5rem"
+}) => {
+  const ref = useRef();
+  const [width, setWidth] = useState(0);
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(entries => {
+      if (!Array.isArray(entries)) {
+        return;
+      }
+      if (!entries.length) {
+        return;
+      }
+      const entry = entries[0];
+      setWidth(entry.contentRect.width);
+    });
+
+    resizeObserver.observe(ref.current);
+
+    return () => resizeObserver.unobserve(ref.current);
+  }, []);
+  console.warn("width is", width);
+  return (
+    <ResizeOuterContainer>
+      <ResizeInnerContainer
+        ref={ref}
+        animate={animate}
+        containerMax={containerMax}
+        containerMin={containerMin}
+        padding={padding}
+      >
+        {safeChildren(children, <Fragment />)}
+      </ResizeInnerContainer>
+    </ResizeOuterContainer>
+  );
+};
+
+export default ResizeContainer;

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

@@ -0,0 +1,39 @@
+import styled, { keyframes, css } from "styled-components";
+import { TROUT_GREY } from "../../../../constants/colors";
+
+const squeeze = (containerMin, containerMax) => keyframes`
+  0% {
+    width: ${containerMax};
+  }
+  100% {
+    width: ${containerMin};
+  }
+`;
+
+export const ResizeOuterContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+`;
+
+export const ResizeInnerContainer = styled.div`
+  border: 2px solid ${TROUT_GREY};
+  padding: ${({ padding }) => padding};
+  box-sizing: border-box;
+  margin-left: auto;
+  margin-right: auto;
+  height: auto;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: ${({ containerMax }) => containerMax};
+  ${({ animate, containerMin, containerMax }) =>
+    animate === "play"
+      ? css`
+          animation: 5s linear infinite alternate
+            ${squeeze(containerMin, containerMax)};
+        `
+      : ``};
+`;

package/src/components/atoms/layouts/examples/cluster-example/ClusterExample.js

@@ -0,0 +1,10 @@
+import React from "react";
+import Cluster from "../../Cluster";
+
+const ClusterExample = ({ justify, align, children }) => (
+  <Cluster justify={justify} align={align} childGap="1rem">
+    {children}
+  </Cluster>
+);
+
+export default ClusterExample;

package/src/components/atoms/layouts/examples/cluster-example/ClusterExample.stories.js

@@ -0,0 +1,97 @@
+import React from "react";
+import { withKnobs, text, radios } from "@storybook/addon-knobs";
+import ClusterExample from "./ClusterExample";
+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/Cluster",
+  component: ClusterExample,
+  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 basicCluster = () => (
+  <ResizingContainer
+    animate={radios(label, options, defaultValue, groupID)}
+    containerMax={text("Container Max", "60rem")}
+    containerMin={text("Container Min", "20rem")}
+  >
+    <ClusterExample justify="space-between" align="center">
+      <LayoutContentBlock height="3.5rem" width="8rem" layoutName="City Logo" />
+      <ClusterExample justify="flex-start" align="center">
+        <LayoutContentBlock
+          height="2.5rem"
+          width="4.5rem"
+          layoutName="Profile"
+        />
+        <LayoutContentBlock
+          height="2.5rem"
+          width="4.5rem"
+          layoutName="Settings"
+        />
+        <LayoutContentBlock
+          height="2.5rem"
+          width="4.5rem"
+          layoutName="Accounts"
+        />
+      </ClusterExample>
+    </ClusterExample>
+  </ResizingContainer>
+);
+
+basicCluster.story = {
+  name: "Resizing Nav Cluster"
+};
+
+export const formButtonCluster = () => (
+  <FixedSizeContainer
+    width={text("Container Width", "40rem")}
+    floatingLabel="Cluster"
+  >
+    <ClusterExample justify="flex-end" align="center">
+      <LayoutContentBlock height="3rem" width="6rem" layoutName="Back" />
+      <LayoutContentBlock height="3rem" width="6rem" layoutName="Submit" />
+    </ClusterExample>
+  </FixedSizeContainer>
+);
+
+formButtonCluster.story = {
+  name: "Form Button Cluster"
+};
+
+export const formInputCluster = () => (
+  <ResizingContainer
+    animate={radios(label, options, defaultValue, groupID)}
+    containerMax={text("Container Max", "40rem")}
+    containerMin={text("Container Min", "20rem")}
+  >
+    <ClusterExample justify="flex-start" align="center">
+      <LayoutContentBlock height="1.5rem" width="3rem" layoutName="Label" />
+      <LayoutContentBlock height="3rem" width="20rem" layoutName="Form Input" />
+    </ClusterExample>
+  </ResizingContainer>
+);
+
+formInputCluster.story = {
+  name: "Form Input Cluster"
+};