@thecb/components 2.2.0

package/src/components/atoms/labeled-amount/LabeledAmount.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { fallbackValues } from "./LabeledAmount.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { Stack } from "../layouts";
+import Heading from "../heading";
+import Paragraph from "../paragraph";
+
+const LabeledAmount = ({ variant = "pL", label, amount, themeValues }) => {
+  const LabeledAmountText = variant === "h6" ? Heading : Paragraph;
+  return (
+    <Stack direction="row">
+      <LabeledAmountText
+        variant={variant}
+        weight={themeValues.fontWeight}
+        extraStyles="text-align: end; flex: 3;"
+      >
+        {label}:
+      </LabeledAmountText>
+      <LabeledAmountText
+        variant={variant}
+        weight={themeValues.fontWeight}
+        extraStyles="text-align: end; flex: 1;"
+      >
+        {amount}
+      </LabeledAmountText>
+    </Stack>
+  );
+};
+
+export default themeComponent(
+  LabeledAmount,
+  "LabeledAmount",
+  fallbackValues,
+  "default"
+);

package/src/components/atoms/labeled-amount/LabeledAmount.theme.js

@@ -0,0 +1,10 @@
+const fontWeight = {
+  default: "600",
+  p: "600",
+  pL: "600",
+  h6: "700"
+};
+
+export const fallbackValues = {
+  fontWeight
+};

package/src/components/atoms/labeled-amount/index.js

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

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

@@ -0,0 +1,83 @@
+import React, { Fragment } from "react";
+import { BoxWrapper } from "./Box.styled";
+import { safeChildren } from "../../../util/general";
+
+/*
+  Box component to create generic boxes
+  Supply padding, border, background, and color values
+*/
+
+const Box = ({
+  padding = "16px",
+  borderSize = "0px",
+  borderColor = "transparent",
+  borderRadius,
+  boxShadow = "none",
+  background,
+  color,
+  minHeight,
+  width,
+  minWidth,
+  maxWidth,
+  borderWidthOverride,
+  border,
+  textAlign,
+  hoverStyles,
+  focusStyles,
+  activeStyles,
+  disabledStyles,
+  variant,
+  as,
+  onClick,
+  onKeyDown,
+  onMouseEnter,
+  onMouseLeave,
+  onFocus,
+  onBlur,
+  onTouchEnd,
+  theme,
+  hiddenStyles,
+  extraStyles,
+  dataQa,
+  children,
+  ...rest
+}) => (
+  <BoxWrapper
+    padding={padding}
+    borderSize={borderSize}
+    borderColor={borderColor}
+    boxShadow={boxShadow}
+    color={color}
+    minHeight={minHeight}
+    width={width}
+    minWidth={minWidth}
+    maxWidth={maxWidth}
+    background={background}
+    borderRadius={borderRadius}
+    borderWidthOverride={borderWidthOverride}
+    border={border}
+    hoverStyles={hoverStyles}
+    focusStyles={focusStyles}
+    activeStyles={activeStyles}
+    disabledStyles={disabledStyles}
+    variant={variant}
+    as={as}
+    onClick={onClick}
+    hiddenStyles={hiddenStyles}
+    onKeyDown={onKeyDown}
+    extraStyles={extraStyles}
+    theme={theme}
+    textAlign={textAlign}
+    data-qa={dataQa}
+    onMouseEnter={onMouseEnter}
+    onMouseLeave={onMouseLeave}
+    onFocus={onFocus}
+    onBlur={onBlur}
+    onTouchEnd={onTouchEnd}
+    {...rest}
+  >
+    {safeChildren(children, <Fragment />)}
+  </BoxWrapper>
+);
+
+export default Box;

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

@@ -0,0 +1,131 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+/*
+  The child span selector on hover styles targets the text inside of buttons when a button is hovered,
+  as long as the box wrapper has an "as" prop equal to "button"
+
+  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 BoxWrapper = styled(
+  ({
+    activeStyles,
+    focusStyles,
+    hoverStyles,
+    disabledStyles,
+    extraStyles,
+    borderSize,
+    borderColor,
+    borderWidthOverride,
+    borderRadius,
+    textAlign,
+    boxShadow,
+    minHeight,
+    minWidth,
+    maxWidth,
+    padding,
+    ...props
+  }) => <div {...props} />
+)`
+  position: relative;
+  box-sizing: border-box;
+  padding: ${({ padding }) => padding};
+  border: ${({ borderSize, borderColor }) =>
+    `${borderSize} solid ${borderColor}`};
+  box-shadow: ${({ boxShadow }) => boxShadow};
+  background-color: ${({ background }) => background};
+  min-height: ${({ minHeight }) => (minHeight ? minHeight : "auto")};
+  ${({ width }) => width && `width: ${width};`}
+  min-width: ${({ minWidth }) => (minWidth ? minWidth : "auto")};
+  max-width: ${({ maxWidth }) => (maxWidth ? maxWidth : "auto")};
+  color: ${({ color }) => color};
+  border-radius: ${({ borderRadius }) => borderRadius};
+  border-width: ${({ borderWidthOverride, borderSize }) =>
+    borderWidthOverride ? borderWidthOverride : borderSize};
+  border: ${({ border }) => border};
+  text-align: ${({ textAlign }) => textAlign};
+
+  &:hover {
+    ${({ hoverStyles, as }) =>
+      css`
+        ${hoverStyles}
+        ${as === "button"
+          ? `> * > span {
+          ${hoverStyles}
+          border: none;
+          outline: none;
+          box-shadow: none;
+        }`
+          : ``}
+      `}
+  }
+
+  &:focus {
+    ${({ focusStyles, as }) =>
+      css`
+        ${focusStyles}
+        ${as === "button"
+          ? `> * > span {
+          ${focusStyles}
+          border: none;
+          outline: none;
+          box-shadow: none;
+        }`
+          : ``}
+      `}
+  }
+
+  &:active {
+    ${({ activeStyles, as }) =>
+      css`
+        ${activeStyles}
+        ${as === "button"
+          ? `        > * > span {
+          ${activeStyles}
+          border: none;
+          outline: none;
+          box-shadow: none;
+        }`
+          : ``}
+      `}
+  }
+
+  &:disabled {
+    ${({ disabledStyles, as }) =>
+      css`
+        ${disabledStyles}
+        ${as === "button"
+          ? `        > * > span {
+          ${disabledStyles}
+          border: none;
+          outline: none;
+          box-shadow: none;
+        }`
+          : ``}
+      `}
+  }
+
+  & * {
+    color: ${({ color }) => color};
+  }
+
+  ${({ hiddenStyles }) =>
+    hiddenStyles &&
+    css`
+      display: none;
+    `}
+  ${({ extraStyles }) =>
+    css`
+      ${extraStyles}
+    `}
+
+  ${({ hiddenStyles }) =>
+    hiddenStyles &&
+    css`
+      display: none;
+    `}
+`;
+/* eslint-enable no-unused-vars */

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

@@ -0,0 +1,28 @@
+import React, { Fragment } from "react";
+import { CenterWrapper } from "./Center.styled";
+import { safeChildren } from "../../../util/general";
+
+/*
+  Component to horizontally center itself (with auto right and left margins)
+  Use intrinsic prop if you want its children that are narrower than the max-width
+  to also be centered within the center wrapper itself
+*/
+
+const Center = ({
+  maxWidth,
+  gutters,
+  intrinsic = false,
+  children,
+  ...rest
+}) => (
+  <CenterWrapper
+    maxWidth={maxWidth}
+    gutters={gutters}
+    intrinsic={intrinsic}
+    {...rest}
+  >
+    {safeChildren(children, <Fragment />)}
+  </CenterWrapper>
+);
+
+export default Center;

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

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+
+export const CenterWrapper = styled.div`
+  box-sizing: content-box;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: ${({ maxWidth }) => maxWidth};
+  padding-left: ${({ gutters }) => gutters};
+  padding-right: ${({ gutters }) => gutters};
+  ${({ intrinsic }) =>
+    intrinsic
+      ? `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  `
+      : ``};
+`;

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

@@ -0,0 +1,37 @@
+import React, { Fragment } from "react";
+import { ClusterWrapper, ClusterInnerWrapper } from "./Cluster.styled";
+import { safeChildren } from "../../../util/general";
+
+/*
+  Cluster components suit any groups of elements that differ in
+  length and are liable to wrap. Buttons that appear together at the
+  end of forms are ideal candidates, as well as lists of tags
+  keywords, or other meta information. Use the Cluster to align any
+  groups of horizontally laid out elements to the left or right, or
+  in the center.
+*/
+
+const Cluster = ({
+  justify,
+  align,
+  childGap,
+  minHeight,
+  minWidth,
+  overflow = false,
+  children,
+  ...rest
+}) => (
+  <ClusterWrapper overflow={overflow} {...rest}>
+    <ClusterInnerWrapper
+      justify={justify}
+      align={align}
+      childGap={childGap}
+      minHeight={minHeight}
+      minWidth={minWidth}
+    >
+      {safeChildren(children, <Fragment />)}
+    </ClusterInnerWrapper>
+  </ClusterWrapper>
+);
+
+export default Cluster;

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

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+
+export const ClusterWrapper = styled.div`
+  overflow: ${({ overflow }) => (overflow ? "visible" : "hidden")};
+  box-sizing: border-box;
+`;
+
+export const ClusterInnerWrapper = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: ${({ justify }) => justify};
+  align-items: ${({ align }) => align};
+  margin: calc(${({ childGap }) => childGap} / 2 * -1);
+  min-height: ${({ minHeight }) => minHeight};
+  min-width: ${({ minWidth }) => minWidth};
+
+  > * {
+    margin: calc(${({ childGap }) => childGap} / 2);
+  }
+`;

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

@@ -0,0 +1,49 @@
+import React, { Fragment } from "react";
+import { safeChildren } from "../../../util/general";
+import { CoverOuterContainer } from "./Cover.styled";
+
+/*
+  The Cover component is used when you want to have one center element
+  and an optional top/header element and/or an optional bottom/footer element.
+  The classic use case is for an "above the fold" page layout in which you have a header, footer, and center content of variable size. When the center content is smaller than
+  minHeight, the cover expands to minHeight and centers the content, while anchoring
+  the optional top element to the top, and the optional bottom element to the bottom.
+
+  If the center content is taller than minHeight, then the entire cover exapnds, while
+  still anchorhing the top and bottom elements where they belong.
+
+  Note: This component is only concerned with vertical centering. To also
+  horizontally center your content, combine it with the Center component.
+  Therefore childGap only sets vertical margins in this component.
+
+  Props:
+  fillCenter: 
+      If true instead of centering the middle content it will grow to fill the space
+      WARNING: May act unexpectedly if children have flex-grow property on them
+*/
+
+const Cover = ({
+  minHeight = "100vh",
+  childGap,
+  padding,
+  fillCenter,
+  singleChild,
+  centerOverride,
+  children,
+  ...rest
+}) => (
+  <CoverOuterContainer
+    minHeight={minHeight}
+    padding={padding}
+    childGap={childGap}
+    centerOverride={centerOverride}
+    fillCenter={fillCenter}
+    {...rest}
+  >
+    {singleChild ? <div /> : <Fragment />}
+    {safeChildren(children, <Fragment />)}
+    {singleChild ? <div /> : <Fragment />}
+  </CoverOuterContainer>
+);
+
+export default Cover;

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

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+export const CoverOuterContainer = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-height: ${({ minHeight }) => minHeight};
+  padding: ${({ padding }) => padding};
+
+  > * {
+    margin-top: ${({ childGap }) => childGap};
+    margin-bottom: ${({ childGap }) => childGap};
+  }
+
+  > :first-child {
+    margin-top: 0;
+  }
+
+  ${({ fillCenter }) => (fillCenter ? "> :nth-child(2) {flex-grow: 1;}" : "")}
+
+  ${({ centerOverride }) =>
+    centerOverride
+      ? `> :nth-child(2) {margin-top: 0; margin-bottom: auto;}`
+      : `> :nth-child(2) {margin-top: auto; margin-bottom: auto;}`}
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+`;

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

@@ -0,0 +1,28 @@
+import React, { Fragment } from "react";
+import { safeChildren } from "../../../util/general";
+import { FrameOuterContainer } from "./Frame.styled";
+
+/*
+  The Frame component is used for cropping content to a specific aspect ratio.
+  The aspect ratio is supplied by the numerator and denominator props.
+  (The numerator is the left-hand number and denominator the right-hand number
+  in class aspect-ratio notation, e.g., 16:9 or 4:3).
+
+  This component should mostly be used with images or video content.
+  However, the CSS makes it possible to use with _any_ type of element.
+  This is useful for a situation where your child may be an image, or may be
+  a different type of element. A good example is having textual fallback
+  content when an image is not available.
+*/
+
+const Frame = ({ numerator = 1, denominator = 1, children, ...rest }) => (
+  <FrameOuterContainer
+    numerator={numerator}
+    denominator={denominator}
+    {...rest}
+  >
+    {safeChildren(children, <Fragment />)}
+  </FrameOuterContainer>
+);
+
+export default Frame;

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

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+
+export const FrameOuterContainer = styled.div`
+  box-sizing: border-box;
+  padding-bottom: ${({ numerator, denominator }) =>
+    `calc((${numerator} / ${denominator}) * 100%)`};
+  position: relative;
+
+  > * {
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  > img,
+  > video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;

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

@@ -0,0 +1,38 @@
+import React, { useRef, useState, useLayoutEffect, Fragment } from "react";
+import { GridWrapper } from "./Grid.styled";
+import { safeChildren } from "../../../util/general";
+
+const Grid = ({
+  columnGap,
+  minColWidth = 20,
+  maxColWidth = "1fr",
+  children,
+  ...rest
+}) => {
+  const ref = useRef();
+  const [width, setWidth] = useState(0);
+  const [aboveMin, setAboveMin] = useState(true);
+  useLayoutEffect(() => {
+    const currentWidth = ref.current.getBoundingClientRect().width;
+    setWidth(currentWidth);
+    setAboveMin(currentWidth >= minColWidth * 16);
+  }, [ref.current, width]);
+  return (
+    <GridWrapper
+      ref={ref}
+      columnGap={columnGap}
+      aboveMin={aboveMin}
+      minColWidth={
+        typeof minColWidth === "number" ? `${minColWidth}rem` : minColWidth
+      }
+      maxColWidth={
+        typeof maxColWidth === "number" ? `${maxColWidth}rem` : maxColWidth
+      }
+      {...rest}
+    >
+      {safeChildren(children, <Fragment />)}
+    </GridWrapper>
+  );
+};
+
+export default Grid;

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

@@ -0,0 +1,22 @@
+import styled from "styled-components";
+
+export const GridWrapper = styled.div`
+  display: grid;
+  grid-gap: ${({ columnGap }) => columnGap};
+  grid-template-columns: ${({ aboveMin, minColWidth, maxColWidth }) =>
+    aboveMin
+      ? `repeat(auto-fill, minmax(${minColWidth}, ${maxColWidth}))`
+      : "100%"};
+
+  @supports (width: min(${({ minColWidth }) => minColWidth}, 100%)) {
+    & {
+      grid-template-columns: repeat(
+        auto-fill,
+        minmax(
+          ${({ minColWidth }) => minColWidth},
+          ${({ maxColWidth }) => maxColWidth}
+        )
+      );
+    }
+  }
+`;

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

@@ -0,0 +1,52 @@
+import React, { Fragment } from "react";
+import { ImposterWrapper } from "./Imposter.styled";
+import { safeChildren } from "../../../util/general";
+
+/*
+  The imposter is used to position content over a parent node.
+  Great for tooltips, modals, dialogs, etc.
+  For this to work, the parent *must* have position: relative in it styles.
+  If using a <Box /> component, this can be specified using the extraStyles prop.
+
+  Imposter takes a few props:
+    -fixed (defaults to false): if true, position imposter relative to the viewport, not its parent
+    -verticalMargin (defaults to "0px"): space between edge of imposter and edge of its parent
+    -horizontalMargin (defaults to "0px"): space between edge of imposter and edge of its parent
+    -breakout (defaults to true): if false, contain imposter within parent. margins do not apply if      breakout is true.
+    -top (defaults to 50%): position from top of parent element
+    -left (defaults to 50%): position from left of parent element
+    -centered (defaults to false): if true, applies a transform such that the center of the imposter is
+     over the center of the parent element
+  
+  NOTE: Imposter is not accessible by default. If building a modal/dialog/tooltip, make sure your content has the appropriate aria-roles and is focusable via keyboard.
+
+*/
+
+const Imposter = ({
+  fixed = false,
+  verticalMargin = "0px",
+  horizontalMargin = "0px",
+  breakout = true,
+  top = "50%",
+  left = "50%",
+  centered = false,
+  visible = true,
+  children,
+  ...rest
+}) => (
+  <ImposterWrapper
+    fixed={fixed}
+    verticalMargin={verticalMargin}
+    horizontalMargin={horizontalMargin}
+    breakout={breakout}
+    top={top}
+    left={left}
+    centered={centered}
+    visible={visible}
+    {...rest}
+  >
+    {safeChildren(children, <Fragment />)}
+  </ImposterWrapper>
+);
+
+export default Imposter;

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

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+export const ImposterWrapper = styled.div`
+  position: ${({ fixed }) => (fixed ? "fixed" : "absolute")};
+  top: ${({ top }) => top};
+  left: ${({ left }) => left};
+  display: ${({ visible }) => (visible ? "block" : "none")};
+
+  ${({ centered }) => (centered ? `transform: translate(-50%, -50%);` : ``)}
+
+  ${({ breakout, verticalMargin, horizontalMargin }) =>
+    breakout
+      ? ``
+      : `
+    overflow: auto;
+    max-width: calc(100% - (${horizontalMargin} * 2));
+    max-height: calc(100% - (${verticalMargin} * 2));
+  `}
+`;