@thecb/components 2.3.0 → 3.1.3

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@thecb/components",
-  "version": "2.3.0",
+  "version": "3.1.3",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "source": "src/index.js",
   "scripts": {
+    "storybook": "start-storybook",
     "build": "rollup -c"
   },
   "repository": {
@@ -27,12 +28,14 @@
     "@storybook/addon-a11y": "^5.3.14",
     "@storybook/addon-actions": "^5.3.14",
     "@storybook/addon-console": "^1.2.1",
+    "@storybook/addon-docs": "^5.3.19",
     "@storybook/addon-knobs": "^5.3.14",
     "@storybook/addon-storysource": "^5.3.14",
     "@storybook/addon-viewport": "^5.3.14",
     "@storybook/react": "^5.3.14",
     "babel-core": "^6.26.3",
     "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.1.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "eslint": "^6.8.0",
@@ -40,16 +43,22 @@
     "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.20.0",
+    "history": "^5.0.0",
     "husky": "^4.2.3",
     "prettier": "^1.19.1",
     "pretty-quick": "^2.0.1",
+    "react-redux": "^7.2.0",
+    "react-router-dom": "^5.2.0",
+    "redux": "^4.0.5",
     "rollup": "^1.21.4",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.0.0",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^5.1.0",
     "rollup-plugin-visualizer": "^4.0.4",
-    "storybook": "^5.3.14"
+    "storybook": "^5.3.14",
+    "styled-components": "^5.1.1",
+    "styled-theming": "^2.2.0"
   },
   "peerDependencies": {
     "ramda": "^0.27.0",
@@ -70,7 +79,6 @@
     "numeral": "^2.0.6",
     "react-aria-modal": "^4.0.0",
     "react-pose": "^4.0.10",
-    "redux-freeform": "^4.1.3",
-    "sanctuary": "^3.0.0"
+    "redux-freeform": "^4.1.3"
   }
 }

package/rollup.config.js

@@ -5,7 +5,6 @@ import json from "rollup-plugin-json";
 import visualizer from "rollup-plugin-visualizer";
 import pkg from "./package.json";
 
-import * as sanctuary from "sanctuary";
 import * as formattedInput from "formatted-input";
 
 const globals = {
@@ -23,7 +22,6 @@ const plugins = [
   commonjs({
     include: "node_modules/**",
     namedExports: {
-      sanctuary: Object.keys(sanctuary),
       "formatted-input": Object.keys(formattedInput)
     }
   }),

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

@@ -24,16 +24,21 @@ const Breadcrumbs = ({ breadcrumbsList = [] }) => {
                 to={linkDestination}
                 active={isActive.toString()}
                 color={themeValues.color}
-                activeStyles={themeValues.activeColor}
                 fontSize={themeValues.fontSize}
                 lineheight={themeValues.lineHeight}
                 fontWeight={themeValues.fontWeight}
                 margin={themeValues.margin}
-                hoverStyles={themeValues.hover}
                 extraStyles={`
                           text-transform: uppercase;
+                          ${isActive.toString() === "true" &&
+                            `pointer-events: none;
+                             color: ${themeValues.activeBreadcrumbColor};
+                            `}
                           &:first-child {
                             margin-left: 0;
+                          }
+                          &:active {
+                            color: ${themeValues.activeColor}; 
                           }`}
               >
                 {linkText}

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

@@ -7,7 +7,8 @@ import { MATISSE_BLUE, STORM_GREY } from "../../../constants/colors";
 */
 
 const color = `${MATISSE_BLUE}`;
-const activeColor = `color: ${STORM_GREY};`;
+const activeColor = `${STORM_GREY}`;
+const activeBreadcrumbColor = `${STORM_GREY}`;
 const fontSize = "0.875rem";
 const lineHeight = "1.25rem";
 const fontWeight = "400";
@@ -17,6 +18,7 @@ const hover = `text-decoration: none;`;
 export const fallbackValues = {
   color,
   activeColor,
+  activeBreadcrumbColor,
   fontSize,
   lineHeight,
   fontWeight,

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

@@ -88,12 +88,18 @@ const ButtonWithAction = ({
     background-color: ${themeValues.hoverBackgroundColor};
     border-color: ${themeValues.hoverBorderColor};
     color: ${themeValues.hoverColor};
+    text-decoration: ${
+      variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
+    };
   `;
   const activeStyles = `
     outline: none;
     background-color: ${themeValues.activeBackgroundColor};
     border-color: ${themeValues.activeBorderColor};
     color: ${themeValues.activeColor};
+    text-decoration: ${
+      variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
+    };
   `;
   const disabledStyles = `
     background-clor: #6E727E;
@@ -114,7 +120,6 @@ const ButtonWithAction = ({
       background={themeValues.backgroundColor}
       border={themeValues.border}
       hoverStyles={hoverStyles}
-      focusStyles={hoverStyles}
       activeStyles={activeStyles}
       disabledStyles={disabledStyles}
       as="button"

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

@@ -1,125 +1,34 @@
 import React from "react";
-import { withKnobs, text } from "@storybook/addon-knobs";
+import { text, select, boolean } 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>
-    )
-  ]
+import page from "../../../../.storybook/page";
+
+const variantsLabel = "variant";
+const variants = {
+  primary: "primary",
+  secondary: "secondary",
+  back: "back",
+  smallPrimary: "smallPrimary",
+  smallSecondary: "smallSecondary",
+  ghost: "ghost",
+  smallGhost: "smallGhost",
+  danger: "danger",
+  None: undefined
 };
-
-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" };
+const defaultValue = "primary";
+const groupId = "props";
+
+export const buttonWithAction = () => (
+  <ButtonWithAction
+    variant={select(variantsLabel, variants, defaultValue, groupId)}
+    text={text("text", "button", "props")}
+    isLoading={boolean("isLoading", false, "props")}
+    action={text("action", undefined, "props")}
+  />
+);
+
+const story = page({
+  title: "Components|Atoms/ButtonWithAction",
+  Component: ButtonWithAction
+});
+export default story;

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

@@ -51,7 +51,8 @@ const fontWeight = {
   smallGhost: "400",
   ghost: "600",
   danger: "600",
-  whiteSecondary: "600"
+  whiteSecondary: "600",
+  whitePrimary: "600"
 };
 
 const height = {
@@ -114,7 +115,9 @@ const hoverBackgroundColor = {
   smallSecondary: "transparent",
   ghost: "transparent",
   smallGhost: "transparent",
-  danger: "#BA002C"
+  danger: "#BA002C",
+  whiteSecondary: "transparent",
+  whitePrimary: "transparent"
 };
 
 const hoverBorderColor = {
@@ -125,7 +128,9 @@ const hoverBorderColor = {
   smallSecondary: "#DCEAF1",
   ghost: "transparent",
   smallGhost: "transparent",
-  danger: "#BA002C"
+  danger: "#BA002C",
+  whiteSecondary: "2px solid transparent",
+  whitePrimary: "2px solid transparent"
 };
 
 const hoverColor = {
@@ -136,7 +141,9 @@ const hoverColor = {
   smallSecondary: "#116285",
   ghost: "#116285",
   smallGhost: "#116285",
-  danger: "#FFFFFF"
+  danger: "#FFFFFF",
+  whiteSecondary: "#FFFFFF",
+  whitePrimary: "#FFFFFF"
 };
 
 const activeBackgroundColor = {
@@ -147,7 +154,9 @@ const activeBackgroundColor = {
   smallSecondary: "transparent",
   ghost: "transparent",
   smallGhost: "transparent",
-  danger: "#870000"
+  danger: "#870000",
+  whiteSecondary: "transparent",
+  whitePrimary: "transparent"
 };
 
 const activeBorderColor = {
@@ -158,7 +167,9 @@ const activeBorderColor = {
   smallSecondary: "#0E506D",
   ghost: "transparent",
   smallGhost: "transparent",
-  danger: "#870000"
+  danger: "#870000",
+  whiteSecondary: "2px solid transparent",
+  whitePrimary: "2px solid transparent"
 };
 
 const activeColor = {
@@ -169,7 +180,9 @@ const activeColor = {
   smallSecondary: "#0E506D",
   ghost: "#0E506D",
   smallGhost: "#0E506D",
-  danger: "#FFFFFF"
+  danger: "#FFFFFF",
+  whiteSecondary: "#FFFFFF",
+  whitePrimary: "#FFFFFF"
 };
 
 export const fallbackValues = {

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

@@ -9,14 +9,26 @@ const ButtonWithLink = ({
   url = "/",
   disabled = false,
   extraStyles,
+  newTab = false,
   ...otherProps
 }) => {
-  const ButtonWithLinkWrapper = ({ children, url, disabled, extraStyles }) => {
+  const ButtonWithLinkWrapper = ({
+    children,
+    url,
+    disabled,
+    newTab,
+    extraStyles
+  }) => {
     if (disabled) {
       return safeChildren(children, <span />);
     }
     return R.test(URL_TEST, url) ? (
-      <ExternalLink href={url} tabIndex="-1" extraStyles={extraStyles}>
+      <ExternalLink
+        href={url}
+        tabIndex="-1"
+        newTab={newTab}
+        extraStyles={extraStyles}
+      >
         {safeChildren(children, <span />)}
       </ExternalLink>
     ) : (
@@ -30,7 +42,9 @@ const ButtonWithLink = ({
     <ButtonWithLinkWrapper
       url={url}
       disabled={disabled}
-      extraStyles={extraStyles}
+      newTab={newTab}
+      extraStyles={`text-decoration: none; ${extraStyles} &:hover {
+        text-decoration: none; }`}
     >
       <ButtonWithAction {...otherProps} extraStyles={extraStyles} />
     </ButtonWithLinkWrapper>

package/src/components/atoms/dropdown/Dropdown.js

@@ -1,5 +1,4 @@
 import React, { useEffect, Fragment, useState, useRef, createRef } from "react";
-import { pipe, find, map, prop, fromMaybe } from "sanctuary";
 import { Box, Stack } from "../layouts";
 import Text from "../text";
 import { noop } from "../../../util/general";
@@ -9,6 +8,7 @@ import styled from "styled-components";
 import {
   WHITE,
   GREY_CHATEAU,
+  STORM_GREY,
   MINESHAFT_GREY,
   ERROR_COLOR
 } from "../../../constants/colors";
@@ -50,6 +50,7 @@ const DropdownItemWrapper = styled.div`
   padding: 1rem;
   box-sizing: border-box;
   width: 100%;
+  cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
 
   &:hover {
     background-color: ${({ selected, disabled, themeValues }) =>
@@ -232,11 +233,7 @@ const Dropdown = ({
           ) : (
             <Text variant="p">
               {value
-                ? pipe([
-                    find(option => option.value === value),
-                    map(prop("text")),
-                    fromMaybe(placeholder)
-                  ])(options)
+                ? options.find(option => option.value === value)?.text
                 : placeholder}
             </Text>
           )}

package/src/components/atoms/dropdown/Dropdown.stories.js

@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from "react";
+import { withKnobs, text } from "@storybook/addon-knobs";
+import Dropdown from "./Dropdown";
+import { Cover, Center } from "../layouts";
+import { ThemeProvider } from "styled-components";
+
+const fakeTheme = {
+  Dropdown: {
+    selectedColor: "#15749D",
+    hoverColor: "#EFFAFF"
+  }
+};
+
+export default {
+  title: "Dropdown",
+  component: Dropdown,
+  decorators: [
+    withKnobs,
+    storyFn => (
+      <ThemeProvider
+        theme={{
+          name: text("Theme Name", "default"),
+          values: fakeTheme
+        }}
+      >
+        <Cover>
+          <div />
+          <Center>{storyFn()}</Center>
+          <div />
+        </Cover>
+      </ThemeProvider>
+    )
+  ]
+};
+
+const options = [
+  { text: "Please select an option", value: "" },
+  { text: "OPTION_1", value: "OPTION_1" },
+  { text: "OPTION_2", value: "OPTION_2" },
+  { text: "DISABLED_OPTION", value: "DISABLED_OPTION" }
+];
+
+const disabledValues = ["DISABLED_OPTION"];
+
+export const dropdownDefault = () => {
+  const [isOpen, setOpen] = useState(false);
+  const [value, setValue] = useState(null);
+  const [isError, setError] = useState(false);
+
+  useEffect(() => {
+    if (value === options[0].value) {
+      setError(true);
+    } else {
+      setError(false);
+    }
+  }, [value]);
+
+  return (
+    <Dropdown
+      placeholder={options[0].text}
+      options={options}
+      disabledValues={disabledValues}
+      value={value}
+      isOpen={isOpen}
+      isError={isError}
+      onSelect={setValue}
+      onClick={() => setOpen(!isOpen)}
+    />
+  );
+};

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

@@ -23,7 +23,6 @@ const Box = ({
   border,
   textAlign,
   hoverStyles,
-  focusStyles,
   activeStyles,
   disabledStyles,
   variant,
@@ -57,7 +56,6 @@ const Box = ({
     borderWidthOverride={borderWidthOverride}
     border={border}
     hoverStyles={hoverStyles}
-    focusStyles={focusStyles}
     activeStyles={activeStyles}
     disabledStyles={disabledStyles}
     variant={variant}

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

@@ -13,7 +13,6 @@ import styled, { css } from "styled-components";
 export const BoxWrapper = styled(
   ({
     activeStyles,
-    focusStyles,
     hoverStyles,
     disabledStyles,
     extraStyles,
@@ -48,7 +47,7 @@ export const BoxWrapper = styled(
   border: ${({ border }) => border};
   text-align: ${({ textAlign }) => textAlign};
 
-  &:hover {
+  &:hover, &:focus {
     ${({ hoverStyles, as }) =>
       css`
         ${hoverStyles}
@@ -63,21 +62,6 @@ export const BoxWrapper = styled(
       `}
   }
 
-  &:focus {
-    ${({ focusStyles, as }) =>
-      css`
-        ${focusStyles}
-        ${as === "button"
-          ? `> * > span {
-          ${focusStyles}
-          border: none;
-          outline: none;
-          box-shadow: none;
-        }`
-          : ``}
-      `}
-  }
-
   &:active {
     ${({ activeStyles, as }) =>
       css`

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

@@ -21,7 +21,8 @@ export const MotionWrapper = styled(motion.div)`
   text-align: ${({ textAlign }) => textAlign};
   margin: ${({ margin }) => margin};
 
-  &:hover {
+  &:hover,
+  &:focus {
     ${({ hoverStyles }) => hoverStyles};
   }
 
@@ -29,10 +30,6 @@ export const MotionWrapper = styled(motion.div)`
     ${({ activeStyles }) => activeStyles};
   }
 
-  &:focus {
-    ${({ focusStyles }) => focusStyles};
-  }
-
   &:disabled {
     ${({ disabledStyles }) => disabledStyles};
   }

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

@@ -4,7 +4,7 @@ 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 { CONGRESS_BLUE } from "../../../constants/colors";
 import { safeChildren } from "../../../util/general";
 
 const ExternalLink = ({
@@ -14,7 +14,6 @@ const ExternalLink = ({
   size = "1rem",
   lineHeight = "1.5rem",
   weight = FONT_WEIGHT_REGULAR,
-  hoverColor = SCIENCE_BLUE,
   extraStyles = ``,
   variant = "primary",
   tabIndex = "0",
@@ -36,7 +35,8 @@ const ExternalLink = ({
       size={size}
       lineheight={lineHeight}
       weight={weight}
-      hovercolor={hoverColor}
+      hovercolor={themeValues.hoverColor}
+      activeColor={themeValues.activeColor}
       fontFamily={themeValues.fontFamily}
       tabIndex={tabIndex}
       extrastyles={extraStyles}

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

@@ -8,7 +8,7 @@ import styled from "styled-components";
 
 /* eslint-disable no-unused-vars */
 export const StyledExternalLink = styled(
-  ({ hoverColor, extraStyles, ...props }) => <a {...props} />
+  ({ hoverColor, activeColor, extrastyles, ...props }) => <a {...props} />
 )`
   display: flex;
   font-size: ${({ size }) => size};
@@ -17,8 +17,15 @@ export const StyledExternalLink = styled(
   font-family: ${({ fontFamily }) => fontFamily};
   line-height: ${({ lineheight }) => lineheight};
 
-  &:hover {
-    color: ${({ hovercolor }) => hovercolor};
+  &:hover,
+  &:focus {
+    color: ${({ hoverColor }) => hoverColor};
+    text-decoration: underline;
+  }
+
+  &:active {
+    text-decoration: underline;
+    color: ${({ activeColor }) => activeColor};
   }
 
   ${({ extrastyles }) => extrastyles}