@thecb/components 3.1.1 → 3.1.3

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@thecb/components",
-  "version": "3.1.1",
+  "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

@@ -30,8 +30,15 @@ const Breadcrumbs = ({ breadcrumbsList = [] }) => {
                 margin={themeValues.margin}
                 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.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/link/ExternalLink.styled.js

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

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

@@ -9,21 +9,24 @@ import { Link } from "react-router-dom";
 
 /* eslint-disable no-unused-vars */
 export const StyledInternalLink = styled(
-  ({ hoverColor, activeColor, active, ...props }) => <Link {...props} />
+  ({ hoverColor, activeColor, active, color, extrastyles, ...props }) => (
+    <Link {...props} />
+  )
 )`
   display: flex;
   color: ${({ color, active, activeColor }) =>
-    active === true ? activeColor : color};
+    active === "true" ? activeColor : color};
   font-weight: ${({ fontWeight }) => fontWeight};
   line-height: ${({ lineheight }) => lineheight};
   font-size: ${({ fontSize }) => fontSize};
   font-family: ${({ fontFamily }) => fontFamily};
   margin: ${({ margin }) => margin};
-  text-decoration: ${({ active }) => (active === true ? "underline" : "none")};
+  text-decoration: ${({ active }) =>
+    active === "true" ? "underline" : "none"};
 
   &:hover,
   &:focus {
-    color: ${({ hovercolor }) => hovercolor};
+    color: ${({ hoverColor }) => hoverColor};
     text-decoration: underline;
   }
 

package/src/components/atoms/radio-button/RadioButton.stories.js

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import { withKnobs, text, radios } from "@storybook/addon-knobs";
+import RadioButton from "./RadioButton";
+import { Box, Cover, Center } from "../layouts";
+import { ThemeProvider } from "styled-components";
+
+const fakeTheme = {
+  RadioButton: {
+    activeColor: "#15749D",
+    inactiveColor: "#959CA8"
+  }
+};
+
+export default {
+  title: "Radio Button",
+  component: RadioButton,
+  decorators: [
+    withKnobs,
+    storyFn => (
+      <ThemeProvider
+        theme={{
+          name: text("Theme Name", "default"),
+          values: fakeTheme
+        }}
+      >
+        <Cover>
+          <div />
+          <Center>{storyFn()}</Center>
+          <div />
+        </Cover>
+      </ThemeProvider>
+    )
+  ]
+};
+
+export const radioButtonsDefault = () => {
+  const buttons = 3;
+
+  const [selected, setSelected] = useState(null);
+  const [focused, setFocused] = useState(null);
+
+  return [...Array(buttons).keys()].map(i => {
+    const name = `radio-button-${i}`;
+    return (
+      <Box
+        key={name}
+        onFocus={() => setFocused(name)}
+        onBlur={() => setFocused(null)}
+        extraStyles="outline: none;"
+        tabIndex="0"
+      >
+        <RadioButton
+          name={name}
+          radioOn={selected === name}
+          radioFocused={focused === name}
+          toggleRadio={() => setSelected(name)}
+          disabled={
+            radios(
+              "Disable Radio Buttons",
+              { Enabled: "enabled", Disabled: "disabled" },
+              "enabled",
+              "RADIO-GROUP-1"
+            ) === "disabled"
+          }
+        />
+      </Box>
+    );
+  });
+};

package/src/components/atoms/toggle-switch/ToggleSwitch.js

@@ -7,6 +7,7 @@ import Heading from "../heading";
 import { Box, Center, Cover, Cluster } from "../layouts";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 import { CHARADE_GREY } from "../../../constants/colors";
+import { noop } from "../../../util/general";
 
 const HiddenToggleSwitchBox = styled.input`
   opacity: 0;
@@ -159,7 +160,6 @@ const ToggleSwitch = ({
       extraStyles={
         labelLeft ? themeValues.leftLabelStyles : themeValues.rightLabelStyles
       }
-      hoverStyles={`outline: ${themeValues.onBackground} auto 5px`}
     >
       <Center>
         <Cluster justify="stretch" align="center">