@thecb/components 3.1.1 → 3.1.10

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@thecb/components",
-  "version": "3.1.1",
+  "version": "3.1.10",
   "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,23 +43,29 @@
     "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": "6.0.0-alpha.3",
+    "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",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-router-dom": "^5.2.0",
-    "styled-components": "^5.1.1",
+    "react-router-dom": "6.0.0-alpha.3",
+    "styled-components": "5.1.1",
     "styled-theming": "^2.2.0"
   },
   "husky": {
@@ -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/alert/Alert.stories.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { text, select, boolean } from "@storybook/addon-knobs";
+import Alert from "./Alert";
+import page from "../../../../.storybook/page";
+
+const variantsLabel = "variant";
+const variants = {
+  info: "info",
+  warn: "warn",
+  error: "error",
+  success: "success"
+};
+const defaultValue = "info";
+const groupId = "props";
+
+export const alert = () => (
+  <Alert
+    variant={select(variantsLabel, variants, defaultValue, groupId)}
+    text={text("text", "Alert Bar", "props")}
+    showQuitLink={boolean("showQuitLink", true, "props")}
+  />
+);
+
+const story = page({
+  title: "Components|Atoms/Alert",
+  Component: Alert
+});
+export default story;

package/src/components/atoms/amount-callout/AmountCallout.stories.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { text, select } from "@storybook/addon-knobs";
+import AmountCallout from "./AmountCallout";
+import page from "../../../../.storybook/page";
+
+const variantsLabel = "variant";
+const variants = {
+  small: "small",
+  medium: "medium",
+  large: "large",
+  None: undefined
+};
+const defaultValue = "large";
+
+const textAlignLabel = "textAlign";
+const textAlign = {
+  left: "left",
+  center: "center",
+  right: "right"
+};
+const defaultTextAlignValue = "left";
+const groupId = "props";
+
+export const amountCallout = () => (
+  <AmountCallout
+    variant={select(variantsLabel, variants, defaultValue, groupId)}
+    amount={text("text", "$1.23", "props")}
+    textAlign={select(
+      textAlignLabel,
+      textAlign,
+      defaultTextAlignValue,
+      groupId
+    )}
+  />
+);
+
+const story = page({
+  title: "Components|Atoms/AmountCallout",
+  Component: AmountCallout
+});
+export default story;

package/src/components/atoms/amount-callout/AmountCallout.theme.js

@@ -1,14 +1,14 @@
 const fontSize = {
-  large: "1.75rem",
-  medium: "1.5rem",
+  large: "1.5rem",
+  medium: "1.25rem",
   small: "1.094rem"
 };
 
 const color = "#15749D";
 
 const lineHeight = {
-  large: "2.25rem",
-  medium: "2rem",
+  large: "2rem",
+  medium: "1.875rem",
   small: "1.641rem"
 };
 

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.stories.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { object } from "@storybook/addon-knobs";
+import Breadcrumb from "./Breadcrumb";
+import page from "../../../../.storybook/page";
+
+const labelInactive = "Inactive Breadcrumb";
+const defaultInactiveValue = {
+  linkText: "Home",
+  linkDestination: location.pathname,
+  isActive: false
+};
+
+const labelActive = "Active Breadcrumb";
+const defaultActiveValue = {
+  linkText: "Page",
+  linkDestination: location.pathname,
+  isActive: true
+};
+const groupId = "props";
+
+export const breadcrumb = () => (
+  <Breadcrumb
+    breadcrumbsList={[
+      {
+        ...object(labelInactive, defaultInactiveValue, groupId)
+      },
+      {
+        ...object(labelActive, defaultActiveValue, groupId)
+      }
+    ]}
+  />
+);
+
+const story = page({
+  title: "Components|Atoms/Breadcrumb",
+  Component: Breadcrumb
+});
+export default story;

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/button-with-link/ButtonWithLink.stories.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { text, select, boolean } from "@storybook/addon-knobs";
+import ButtonWithLink from "./ButtonWithLink";
+import page from "../../../../.storybook/page";
+
+const variants = {
+  primary: "primary",
+  secondary: "secondary",
+  back: "back",
+  smallPrimary: "smallPrimary",
+  smallSecondary: "smallSecondary",
+  ghost: "ghost",
+  smallGhost: "smallGhost",
+  danger: "danger",
+  None: undefined
+};
+
+export const buttonWithLink = () => (
+  <ButtonWithLink
+    variant={select("variant", variants, "primary", "props")}
+    url={text("url", "/login", "props")}
+    disabled={boolean("disabled", false, "props")}
+    extraStyles={text("extraStyles", "", "props")}
+    text={text("text", "Lorem", "props")}
+  />
+);
+
+const story = page({
+  title: "Components|Atoms/ButtonWithLink",
+  Component: ButtonWithLink
+});
+export default story;

package/src/components/atoms/checkbox/Checkbox.stories.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { text, select, boolean } from "@storybook/addon-knobs";
+import Checkbox from "./Checkbox";
+import page from "../../../../.storybook/page";
+
+const variantsLabel = "variant";
+const variants = {
+  default: "default"
+};
+const defaultValue = "default";
+const groupId = "props";
+
+export const checkbox = () => (
+  <Checkbox
+    variant={select(variantsLabel, variants, defaultValue, groupId)}
+    title={text("title", "Checkbox", "props")}
+    name={text("name", "Checkbox", "props")}
+    checked={boolean("checked", false, "props")}
+    error={boolean("error", false, "props")}
+    disabled={boolean("disabled", false, "props")}
+    focused={boolean("focused", false, "props")}
+  />
+);
+
+const story = page({
+  title: "Components|Atoms/Checkbox",
+  Component: Checkbox
+});
+export default story;

package/src/components/atoms/checkbox-list/CheckboxList.stories.js

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import { select } from "@storybook/addon-knobs";
+import CheckboxList from "./CheckboxList";
+import page from "../../../../.storybook/page";
+
+const variantsLabel = "variant";
+const variants = {
+  default: "default",
+  disabled: "disabled"
+};
+const defaultValue = "default";
+const groupId = "props";
+const imageUrl = `https://picsum.photos/seed/picsum/200/300`;
+const items = [
+  {
+    text: "item 1",
+    name: "item 1 name",
+    imageUrl: imageUrl
+  },
+  {
+    text: "item 2",
+    name: "item 2 name",
+    imageUrl: imageUrl
+  },
+  {
+    text: "item 3",
+    name: "item 3 name",
+    imageUrl: imageUrl
+  }
+];
+export const checkboxList = () => {
+  const [selected, setSelected] = useState(false);
+  const setSelectedItem = (e, item) => {
+    setSelected(item.name);
+  };
+  return (
+    <CheckboxList
+      variant={select(variantsLabel, variants, defaultValue, groupId)}
+      items={items}
+      selectedName={selected}
+      onSelect={setSelectedItem}
+    />
+  );
+};
+
+const story = page({
+  title: "Components|Atoms/CheckboxList",
+  Component: CheckboxList
+});
+export default story;

package/src/components/atoms/country-dropdown/CountryDropdown.stories.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { connect } from "react-redux";
+import { createFormState, required } from "redux-freeform";
+import { Box } from "../../atoms/layouts";
+import CountryDropdown from "./CountryDropdown";
+import { options } from "./options";
+import page from "../../../../.storybook/page";
+
+const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
+  country: {
+    validators: [required()]
+  }
+});
+const errorMessages = {
+  [required.error]: "country is required"
+};
+
+const story = page({
+  title: "Components|Atoms/CountryDropdown",
+  Component: CountryDropdown,
+  reducer,
+  mapStateToProps,
+  mapDispatchToProps
+});
+
+const CountryFormWrapper = ({ fields, actions }) => (
+  <Box minHeight="300px">
+    <CountryDropdown
+      errorMessages={errorMessages}
+      options={options}
+      field={fields.country}
+      fieldActions={actions.fields.country}
+    />
+  </Box>
+);
+
+export default story;
+const ConnectedForm = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CountryFormWrapper);
+export const countryDropdown = () => <ConnectedForm />;