@thecb/components 2.2.0

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

@@ -0,0 +1,25 @@
+// import theme from "styled-theming";
+import { MATISSE_BLUE, STORM_GREY } from "../../../constants/colors";
+
+/*
+  For now I'm using string values, eventually shared components library will have its own constants file
+  for colors/values that should be used here instead
+*/
+
+const color = `${MATISSE_BLUE}`;
+const activeColor = `color: ${STORM_GREY};`;
+const fontSize = "0.875rem";
+const lineHeight = "1.25rem";
+const fontWeight = "400";
+const margin = "0 0.5rem";
+const hover = `text-decoration: none;`;
+
+export const fallbackValues = {
+  color,
+  activeColor,
+  fontSize,
+  lineHeight,
+  fontWeight,
+  margin,
+  hover
+};

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

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

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

@@ -0,0 +1,128 @@
+import React, { useContext } 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 { 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`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+`;
+
+const SpinnerIconWrapper = styled(rotate)`
+  width: 24px;
+  height: 24px;
+`;
+
+const Spinner = () => (
+  <SpinnerContainer>
+    <SpinnerIconWrapper initialPose="fixed" pose="rotate">
+      <SpinnerIcon />
+    </SpinnerIconWrapper>
+  </SpinnerContainer>
+);
+
+/* Most of the time, to use this button you'll only need to specify:
+  - A variant (if different than primary)
+  - An action
+  - Text
+
+  Optionally, you can also pass:
+  - isLoading to show a spinner
+  - dataQa for use with test cafe
+  - contentOverride to use the button as a wrapper around arbitrary content
+  - extraStyles if you need an escape hatch. Extra styles should be used sparingly.
+
+  Note: the children prop is only used if contentOverride is set to true, in which case
+  the text prop is ignored.
+  
+*/
+
+const ButtonWithAction = ({
+  action = noop,
+  variant = "primary",
+  text,
+  isLoading = false,
+  dataQa = null,
+  textExtraStyles,
+  contentOverride = false,
+  extraStyles = "",
+  children
+}) => {
+  const themeContext = useContext(ThemeContext);
+  const themeValues = createThemeValues(
+    themeContext,
+    fallbackValues,
+    "Button",
+    variant
+  );
+  const loadingExtraStyles = `${extraStyles}; padding-top: 0.75rem; padding-bottom: 0.75rem;`;
+
+  return (
+    <Box
+      variant={variant}
+      padding={themeValues.padding}
+      minHeight={themeValues.height}
+      minWidth={themeValues.minWidth}
+      background={themeValues.backgroundColor}
+      border={themeValues.border}
+      hoverStyles={themeValues.hover}
+      focusStyles={themeValues.focus}
+      activeStyles={themeValues.active}
+      disabledStyles={themeValues.disabled}
+      as="button"
+      onClick={action}
+      borderRadius="2px"
+      theme={themeContext}
+      extraStyles={isLoading ? loadingExtraStyles : extraStyles}
+      dataQa={dataQa}
+    >
+      {contentOverride ? (
+        children
+      ) : (
+        <Center intrinsic>
+          {isLoading ? (
+            <Spinner />
+          ) : (
+            <Text
+              weight={themeValues.fontWeight}
+              variant={themeValues.fontSizeVariant}
+              color={themeValues.color}
+              extraStyles={textExtraStyles}
+            >
+              {text}
+            </Text>
+          )}
+        </Center>
+      )}
+    </Box>
+  );
+};
+
+export default ButtonWithAction;

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

@@ -0,0 +1,125 @@
+import React from "react";
+import { withKnobs, text } from "@storybook/addon-knobs";
+import ButtonWithAction from "./ButtonWithAction";
+import { Cover, Center } from "../layouts";
+import { ThemeProvider } from "styled-components";
+
+const fakeTheme = {
+  Button: {
+    backgroundColor: {
+      primary: `#357FB8`,
+      secondary: `transparent`,
+      small: `#357FB8`,
+      smallSecondary: `transparent`
+    },
+    color: {
+      primary: `#FFFFFF`,
+      secondary: `#357FB8`,
+      small: `#FFFFFF`,
+      smallSecondary: `#357FB8`
+    },
+    fontWeight: `600`,
+    fontSize: `1.125rem`,
+    border: {
+      primary: `1px solid #357FB8`,
+      secondary: `2px solid #357FB8`,
+      small: `1px solid #357FB8`,
+      smallSecondary: `2px solid #357FB8`
+    },
+    height: {
+      primary: `3rem`,
+      secondary: `3rem`,
+      small: `2.5rem`,
+      smallSecondary: `2.5rem`
+    },
+    padding: {
+      primary: `0.75rem 2rem`,
+      secondary: `0.75rem 2rem`,
+      small: `0.625rem 1rem`,
+      smallSecondary: `0.625rem 1rem`
+    },
+    focus: `outline: none; box-shadow: 0 0 4px #357FB8`,
+    active: {
+      primary: `background-color: #182848; border: 1px solid #182848; box-shadow: 0 0 4px #357FB8`,
+      secondary: `background-color: #357FB8; color: #FFFFFF; box-shadow: 0 0 4px #357FB8`,
+      small: `background-color: #182848; border: 1px solid #182848; box-shadow: 0 0 4px #357FB8`,
+      smallSecondary: `background-color: #357FB8; color: #FFFFFF; box-shadow: 0 0 4px #357FB8`
+    },
+    disabled: {
+      primary: `background-color: #6E727E; border: 1px solid #6E727E; &:focus { box-shadow: 0 0 4px #6E727E }`,
+      secondary: `color: #6E727E; border: 2px solid #6E727E; &:focus { box-shadow: 0 0 4px #6E727E }`,
+      small: `background-color: #6E727E; border: 1px solid #6E727E; &:focus { box-shadow: 0 0 4px #6E727E`,
+      smallSecondary: `color: #6E727E; border: 2px solid #6E727E; &:focus { box-shadow: 0 0 4px #6E727E }`
+    }
+  }
+};
+
+export default {
+  title: "Themed Button",
+  component: ButtonWithAction,
+  decorators: [
+    withKnobs,
+    storyFn => (
+      <ThemeProvider
+        theme={{
+          name: text("Theme Name", "default"),
+          values: fakeTheme
+        }}
+      >
+        <Cover>
+          <div />
+          <Center>{storyFn()}</Center>
+          <div />
+        </Cover>
+      </ThemeProvider>
+    )
+  ]
+};
+
+export const primaryButtonDefault = () => (
+  <ButtonWithAction variant="primary" text="Primary Button" />
+);
+
+primaryButtonDefault.story = { name: "Default Primary Button" };
+
+export const secondaryButtonDefault = () => (
+  <ButtonWithAction variant="secondary" text="Secondary Button" />
+);
+
+secondaryButtonDefault.story = { name: "Default Secondary Button" };
+
+export const smallButtonDefault = () => (
+  <ButtonWithAction variant="small" text="Small Button" />
+);
+
+smallButtonDefault.story = { name: "Default Small Button" };
+
+export const smallSecondaryButtonDefault = () => (
+  <ButtonWithAction variant="smallSecondary" text="Small Secondary" />
+);
+
+smallSecondaryButtonDefault.story = { name: "Default Small Secondary Button" };
+
+export const primaryButtonThemed = () => (
+  <ButtonWithAction variant="primary" text="Primary Themed" />
+);
+
+primaryButtonThemed.story = { name: "Themed Primary Button" };
+
+export const secondaryButtonThemed = () => (
+  <ButtonWithAction variant="secondary" text="Themed Secondary" />
+);
+
+secondaryButtonThemed.story = { name: "Themed Secondary Button" };
+
+export const smallButtonThemed = () => (
+  <ButtonWithAction variant="small" text="Themed Small" />
+);
+
+smallButtonThemed.story = { name: "Themed Small Button" };
+
+export const smallSecondaryButtonThemed = () => (
+  <ButtonWithAction variant="smallSecondary" text="Small Secondary" />
+);
+
+smallSecondaryButtonThemed.story = { name: "Themed Small Secondary Button" };

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

@@ -0,0 +1,360 @@
+/*
+  For now I'm using string values, eventually shared components library will have its own constants file
+  for colors/values that should be used here instead
+*/
+
+const padding = {
+  primary: "1rem 1.25rem",
+  secondary: "1rem 1.25rem",
+  back: "1rem 1.25rem",
+  smallPrimary: "0.75rem 1rem",
+  smallSecondary: "0.75rem 1rem",
+  smallGhost: "0",
+  ghost: "0.65rem 0",
+  danger: "1rem 1.25rem",
+  whiteSecondary: "0.75rem 2rem",
+  whitePrimary: "1.125rem 0.75rem"
+};
+
+const color = {
+  primary: "#FFFFFF",
+  secondary: "#15749D",
+  back: "#15749D",
+  smallPrimary: "#FFFFFF",
+  smallSecondary: "#15749D",
+  smallGhost: "#15749D",
+  ghost: "#15749D",
+  danger: "#FFFFFF",
+  whiteSecondary: "#FFFFFF",
+  whitePrimary: "#FFFFFF"
+};
+
+const fontSizeVariant = {
+  primary: "pS",
+  secondary: "pS",
+  back: "pS",
+  smallPrimary: "pS",
+  smallSecondary: "pS",
+  smallGhost: "p",
+  ghost: "pL",
+  danger: "pS",
+  whiteSecondary: "pS",
+  whitePrimary: "pS"
+};
+
+const fontWeight = {
+  primary: "600",
+  secondary: "600",
+  back: "600",
+  smallPrimary: "600",
+  smallSecondary: "600",
+  smallGhost: "400",
+  ghost: "600",
+  danger: "600",
+  whiteSecondary: "600"
+};
+
+const height = {
+  primary: "3rem",
+  secondary: "3rem",
+  back: "3rem",
+  smallPrimary: "2.5rem",
+  smallSecondary: "2.5rem",
+  smallGhost: "1.5rem",
+  ghost: "3rem",
+  danger: "3rem",
+  whiteSecondary: "3rem",
+  whitePrimary: "auto"
+};
+
+const minWidth = {
+  primary: "130px",
+  secondary: "130px",
+  back: "130px",
+  smallPrimary: "100px",
+  smallSecondary: "100px",
+  smallGhost: "100px",
+  ghost: "130px",
+  danger: "130px",
+  whiteSecondary: "160px",
+  whitePrimary: "130px"
+};
+
+const backgroundColor = {
+  primary: "#15749D",
+  secondary: "transparent",
+  back: "transparent",
+  smallPrimary: "#15749D",
+  smallSecondary: "transparent",
+  smallGhost: "transparent",
+  ghost: "transparent",
+  danger: "#ED125F",
+  whiteSecondary: "transparent",
+  whitePrimary: "transparent"
+};
+
+const border = {
+  primary: "2px solid #15749D",
+  secondary: "2px solid #15749D",
+  back: "2px solid #15749D",
+  smallPrimary: "2px solid #15749D",
+  smallSecondary: "2px solid #15749D",
+  smallGhost: "none",
+  ghost: "none",
+  danger: "2px solid #ED125F",
+  whiteSecondary: "2px solid white",
+  whitePrimary: "2px solid transparent"
+};
+
+const focus = {
+  primary: `
+    outline: none;
+    background-color: #0E506D;
+    border: 2px solid #0E506D;
+    box-shadow: 0 0 10px #15749D;
+`,
+  secondary: `
+    outline: none;
+    background-color: #DCEAF1;
+    box-shadow: 0 0 10px #DCEAF1;
+`,
+  back: `
+    outline: none;
+    background-color: #DCEAF1;
+    box-shadow: 0 0 10px #DCEAF1;
+`,
+  smallPrimary: `
+    outline: none;
+    background-color: #0E506D;
+    border: 2px solid #0E506D;
+    box-shadow: 0 0 10px #15749D;
+`,
+  smallSecondary: `
+    outline: none;
+    background-color: #DCEAF1;
+    box-shadow: 0 0 10px #DCEAF1;
+`,
+  smallGhost: `
+    outline: none;
+    box-shadow: none;
+    color: #0E506D;
+  `,
+  ghost: `
+    outline: none;
+    box-shadow: none;
+    color: #0E506D;
+  `,
+  danger: `
+    outline: none;
+    background-color: #BA002C;
+    border: 2px solid #BA002C;
+    box-shadow: 0 0 10px #ED125F;
+  `,
+  whiteSecondary: `
+    outline: none;
+    background-color: #ffffff4D;
+    > div > span {
+      background-color: transparent;
+    }
+  `,
+  whitePrimary: `
+    outline: none;
+    background-color: #ffffff4D;
+    border: 2px solid transparent;
+    > div > span {
+      background-color: transparent;
+    }
+  `
+};
+
+const hover = {
+  primary: `
+    cursor: pointer;
+    background-color: #116285;
+    border: 2px solid #116285;
+    box-shadow: 0 0 10px #15749D;
+  `,
+  secondary: `
+    cursor: pointer;
+    background-color: #DCEAF1;
+    box-shadow: 0 0 10px #DCEAF1;
+  `,
+  back: `
+    cursor: pointer;
+    background-color: #DCEAF1;
+    box-shadow: 0 0 10px #DCEAF1;
+  `,
+  smallPrimary: `
+    cursor: pointer;
+    background-color: #116285;
+    border: 2px solid #116285;
+    box-shadow: 0 0 10px #15749D;
+  `,
+  smallSecondary: `
+    cursor: pointer;
+    background-color: #DCEAF1;
+    box-shadow: 0 0 10px #DCEAF1;
+  `,
+  smallGhost: `
+    cursor: pointer;
+    color: #0E506D;
+  `,
+  ghost: `
+    cursor: pointer;
+    color: #0E506D;
+  `,
+  danger: `
+    outline: none;
+    background-color: #BA002C;
+    border: 2px solid #BA002C;
+    box-shadow: 0 0 10px #ED125F;
+  `,
+  whiteSecondary: `
+    outline: none;
+    background-color: #ffffff4D;
+    > div > span {
+      background-color: transparent;
+    }
+  `,
+  whitePrimary: `
+    outline: none;
+    background-color: #ffffff4D;
+    border: 2px solid transparent;
+    > div > span {
+      background-color: transparent;
+    }
+  `
+};
+
+const active = {
+  primary: `
+    background-color: #0E506D;
+    border: 2px solid #0E506D;
+    box-shadow: 0 0 10px #15749D;
+  `,
+  secondary: `
+    background-color: #B8D5E1;
+    box-shadow: 0 0 10px #B8D5E1;
+  `,
+  back: `
+    background-color: #B8D5E1;
+    box-shadow: 0 0 10px #B8D5E1;
+  `,
+  smallPrimary: `
+    background-color: #0E506D;
+    border: 2px solid #0E506D;
+    box-shadow: 0 0 10px #15749D;
+  `,
+  smallSecondary: `
+    background-color: #B8D5E1;
+    box-shadow: 0 0 10px #B8D5E1;
+  `,
+  smallGhost: `
+    background-color: transparent;
+    color: #15749D;
+    box-shadow: none;
+  `,
+  ghost: `
+    background-color: transparent;
+    color: #15749D;
+    box-shadow: none;
+  `,
+  danger: `
+    outline: none;
+    background-color: #870000;
+    border: 2px solid #870000;
+    box-shadow: 0 0 10px #ED125F;
+  `,
+  whiteSecondary: `
+    outline: none;
+    background-color: #00000033;
+    box-shadow: 0 0 10px #00000033;
+    > div > span {
+      background-color: transparent;
+    }
+  `,
+  whitePrimary: `
+    outline: none;
+    background-color: #00000033;
+    box-shadow: 0 0 10px #00000033;
+    border: 2px solid transparent;
+    > div > span {
+      background-color: transparent;
+    }
+  `
+};
+
+const disabled = {
+  primary: `
+    background-color: #6E727E;
+    border: 2px solid #6E727E;
+    &:focus {
+      box-shadow: 0 0 10px #6E727E;
+    }
+  `,
+  secondary: `
+    color: #6E727E;
+    border: 2px solid #6E727E;
+    &:focus {
+      box-shadow: 0 0 10px #6E727E;
+    }
+  `,
+  back: `
+    color: #6E727E;
+    border: 2px solid #6E727E;
+    &:focus {
+      box-shadow: 0 0 10px #6E727E;
+    }
+  `,
+  smallPrimary: `
+    background-color: #6E727E;
+    border: 2px solid #6E727E;
+    &:focus {
+      box-shadow: 0 0 10px #6E727E;
+    }
+   `,
+  smallSecondary: `
+    color: #6E727E;
+    border: 2px solid #6E727E;
+    &:focus {
+      box-shadow: 0 0 10px #6E727E;
+    }
+  `,
+  smallGhost: `
+    color: #6E727E;
+    border: none;
+  `,
+  ghost: `
+    color: #6E727E; 
+    border: none;
+  `,
+  whiteSecondary: `
+    color: #6E727E;
+    border: 2px solid #6E727E;
+    &:focus {
+      box-shadow: 0 0 10px #6E727E;
+    }
+  `,
+  whitePrimary: `
+    color: #6E727E;
+    border: 2px solid #6E727E;
+    &:focus {
+      box-shadow: 0 0 10px #6E727E;
+    }
+  `
+};
+
+export const fallbackValues = {
+  padding,
+  color,
+  fontSizeVariant,
+  fontWeight,
+  height,
+  minWidth,
+  backgroundColor,
+  border,
+  hover,
+  focus,
+  active,
+  disabled
+};

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

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

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

@@ -0,0 +1,40 @@
+import React from "react";
+import * as R from "ramda";
+import { URL_TEST } from "../../../constants/regex_constants";
+import { InternalLink, ExternalLink } from "../link";
+import { safeChildren } from "../../../util/general";
+import ButtonWithAction from "../button-with-action";
+
+const ButtonWithLink = ({
+  url = "/",
+  disabled = false,
+  extraStyles,
+  ...otherProps
+}) => {
+  const ButtonWithLinkWrapper = ({ children, url, disabled, extraStyles }) => {
+    if (disabled) {
+      return safeChildren(children, <span />);
+    }
+    return R.test(URL_TEST, url) ? (
+      <ExternalLink href={url} tabIndex="-1" extraStyles={extraStyles}>
+        {safeChildren(children, <span />)}
+      </ExternalLink>
+    ) : (
+      <InternalLink to={url} tabIndex="-1" extraStyles={extraStyles}>
+        {safeChildren(children, <span />)}
+      </InternalLink>
+    );
+  };
+
+  return (
+    <ButtonWithLinkWrapper
+      url={url}
+      disabled={disabled}
+      extraStyles={extraStyles}
+    >
+      <ButtonWithAction {...otherProps} extraStyles={extraStyles} />
+    </ButtonWithLinkWrapper>
+  );
+};
+
+export default ButtonWithLink;

package/src/components/atoms/button-with-link/index.js

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