@thecb/components 10.2.4-beta.8 → 10.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.2.4-beta.8",
+  "version": "10.3.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/badge/Badge.stories.js

@@ -9,8 +9,7 @@ const variants = {
   info: "info",
   warn: "warn",
   primary: "primary",
-  success: "success",
-  disabled: "disabled"
+  success: "success"
 };
 
 const defaultValue = "success";

package/src/components/atoms/badge/Badge.theme.js

@@ -1,6 +1,4 @@
 import {
-  MANATEE_GREY,
-  GRECIAN_GREY,
   CORNFLOWER_BLUE,
   HALF_COLONIAL_WHITE,
   HINT_GREEN,
@@ -15,19 +13,17 @@ const background = {
   info: `${INFO_BLUE}`,
   warn: `${HALF_COLONIAL_WHITE}`,
   primary: `${CORNFLOWER_BLUE}`,
-  success: `${HINT_GREEN}`,
-  disabled: `${GRECIAN_GREY}`
+  success: `${HINT_GREEN}`
 };
 
 const color = {
   info: `${MATISSE_BLUE}`,
   warn: `${ZEST_ORANGE}`,
   primary: `${ROYAL_BLUE_VIVID}`,
-  success: `${SEA_GREEN}`,
-  disabled: `${MANATEE_GREY}`
+  success: `${SEA_GREEN}`
 };
 
 export const fallbackValues = {
-  background: background,
-  color: color
+  background,
+  color
 };

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

@@ -33,15 +33,16 @@ const Breadcrumbs = ({ breadcrumbsList = [] }) => {
                 margin={themeValues.margin}
                 extraStyles={`
                           text-transform: uppercase;
+                          text-decoration: none;
                           ${isActive.toString() === "true" &&
-                            `pointer-events: none;
-                             color: ${themeValues.activeBreadcrumbColor};
+                            `color: ${themeValues.activeBreadcrumbColor};
+                             pointer-events: none;
                             `}
                           &:first-child {
                             margin-left: 0;
                           }
                           &:active {
-                            color: ${themeValues.activeColor}; 
+                            color: ${themeValues.activeColor};
                           }`}
               >
                 {linkText}

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

@@ -1,5 +1,8 @@
 // import theme from "styled-theming";
-import { MATISSE_BLUE, STORM_GREY } from "../../../constants/colors";
+import { colors, styleConstants } from "../../../constants";
+
+const { MATISSE_BLUE, STORM_GREY } = colors;
+const { LINK_TEXT_DECORATION } = styleConstants;
 
 /*
   For now I'm using string values, eventually shared components library will have its own constants file
@@ -13,7 +16,7 @@ const fontSize = "0.875rem";
 const lineHeight = "1.25rem";
 const fontWeight = "400";
 const margin = "0.5rem";
-const hover = `text-decoration: none;`;
+const hover = `text-decoration: ${LINK_TEXT_DECORATION};`;
 
 export const fallbackValues = {
   color,

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

@@ -57,7 +57,7 @@ const Spinner = ({ color, isMobile }) => (
 
   Note: the children prop is only used if contentOverride is set to true, in which case
   the text prop is ignored.
-  
+
 */
 
 const ButtonWithAction = forwardRef(
@@ -81,7 +81,6 @@ const ButtonWithAction = forwardRef(
     },
     ref
   ) => {
-    const isGhostVariant = variant === "ghost" || variant === "smallGhost";
     const themeContext = useContext(ThemeContext);
     const themeValues = createThemeValues(
       themeContext,
@@ -96,9 +95,6 @@ const ButtonWithAction = forwardRef(
     background-color: ${themeValues.hoverBackgroundColor};
     border-color: ${themeValues.hoverBorderColor};
     color: ${themeValues.hoverColor};
-    text-decoration: ${
-      variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
-    };
     cursor: pointer;
   `;
     const activeStyles = `
@@ -106,14 +102,11 @@ const ButtonWithAction = forwardRef(
     background-color: ${themeValues.activeBackgroundColor};
     border-color: ${themeValues.activeBorderColor};
     color: ${themeValues.activeColor};
-    text-decoration: ${
-      variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
-    };
   `;
     const disabledStyles = `
-    background-color: ${isGhostVariant ? "transparent;" : "#6D717E;"};
-    border-color: ${isGhostVariant ? "transparent;" : "#6D717E;"};
-    color: ${isGhostVariant ? "#6D717E;" : "#FFFFFF"};
+    background-color: #6D717E;
+    border-color: #6D717E;
+    color: #FFFFFF;
     cursor: default;
     &:focus {
       outline: 3px solid #6D717E;
@@ -155,10 +148,9 @@ const ButtonWithAction = forwardRef(
                 weight={themeValues.fontWeight}
                 variant={themeValues.fontSizeVariant}
                 color={themeValues.color}
+                textDecoration={themeValues.textDecoration}
                 textWrap={textWrap}
-                extraStyles={
-                  disabled ? textExtraStyles + disabledStyles : textExtraStyles
-                }
+                extraStyles={textExtraStyles}
               >
                 {text}
               </Text>

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

@@ -13,7 +13,6 @@ const variants = {
   ghost: "ghost",
   smallGhost: "smallGhost",
   danger: "danger",
-  disabled: "disabled",
   None: undefined
 };
 const defaultValue = "primary";

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

@@ -1,14 +1,16 @@
-import {
+import { colors, styleConstants } from "../../../constants";
+
+const {
   WHITE,
   TRANSPARENT,
   SAPPHIRE_BLUE,
   PEACOCK_BLUE,
-  MANATEE_GREY,
   MATISSE_BLUE,
   RASPBERRY,
-  ERROR_COLOR,
-  GRECIAN_GREY
-} from "../../../constants/colors";
+  ERROR_COLOR
+} = colors;
+
+const { LINK_TEXT_DECORATION } = styleConstants;
 
 const padding = {
   primary: "0.75rem 1.5rem",
@@ -22,8 +24,7 @@ const padding = {
   danger: "0.75rem 1.5rem",
   dangerSecondary: "0.75rem 1.5rem",
   whiteSecondary: "0.75rem 2rem",
-  whitePrimary: "1.125rem 0.75rem",
-  disabled: "0.75rem 1.5rem"
+  whitePrimary: "1.125rem 0.75rem"
 };
 
 const color = {
@@ -38,8 +39,7 @@ const color = {
   danger: WHITE,
   dangerSecondary: ERROR_COLOR,
   whiteSecondary: WHITE,
-  whitePrimary: WHITE,
-  disabled: MANATEE_GREY
+  whitePrimary: WHITE
 };
 
 const fontSizeVariant = {
@@ -54,8 +54,7 @@ const fontSizeVariant = {
   danger: "pS",
   dangerSecondary: "pS",
   whiteSecondary: "pS",
-  whitePrimary: "pS",
-  disabled: "pS"
+  whitePrimary: "pS"
 };
 
 const fontWeight = {
@@ -70,8 +69,7 @@ const fontWeight = {
   danger: "600",
   dangerSecondary: "600",
   whiteSecondary: "600",
-  whitePrimary: "600",
-  disabled: "600"
+  whitePrimary: "600"
 };
 
 const height = {
@@ -86,8 +84,7 @@ const height = {
   danger: "3rem",
   dangerSecondary: "3rem",
   whiteSecondary: "3rem",
-  whitePrimary: "auto",
-  disabled: "3rem"
+  whitePrimary: "auto"
 };
 
 const minWidth = {
@@ -102,8 +99,22 @@ const minWidth = {
   danger: "130px",
   dangerSecondary: "157px",
   whiteSecondary: "160px",
-  whitePrimary: "130px",
-  disabled: "130px"
+  whitePrimary: "130px"
+};
+
+const textDecoration = {
+  primary: "none",
+  secondary: "none",
+  back: "none",
+  smallPrimary: "none",
+  smallSecondary: "none",
+  smallGhost: LINK_TEXT_DECORATION,
+  ghost: LINK_TEXT_DECORATION,
+  tertiary: "none",
+  danger: "none",
+  dangerSecondary: "none",
+  whiteSecondary: "none",
+  whitePrimary: "none"
 };
 
 const backgroundColor = {
@@ -118,8 +129,7 @@ const backgroundColor = {
   danger: RASPBERRY,
   dangerSecondary: TRANSPARENT,
   whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT,
-  disabled: GRECIAN_GREY
+  whitePrimary: TRANSPARENT
 };
 
 const border = {
@@ -134,8 +144,7 @@ const border = {
   danger: "2px solid " + RASPBERRY,
   dangerSecondary: "2px solid " + ERROR_COLOR,
   whiteSecondary: "2px solid " + WHITE,
-  whitePrimary: "2px solid " + TRANSPARENT,
-  disabled: "2px solid " + MANATEE_GREY
+  whitePrimary: "2px solid " + TRANSPARENT
 };
 
 const hoverBackgroundColor = {
@@ -150,8 +159,7 @@ const hoverBackgroundColor = {
   danger: "#BA002C",
   dangerSecondary: "#FAE7EE",
   whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT,
-  disabled: TRANSPARENT
+  whitePrimary: TRANSPARENT
 };
 
 const hoverBorderColor = {
@@ -166,8 +174,7 @@ const hoverBorderColor = {
   danger: "#BA002C",
   dangerSecondary: "#B10541",
   whiteSecondary: "2px solid " + TRANSPARENT,
-  whitePrimary: "2px solid " + TRANSPARENT,
-  disabled: MANATEE_GREY
+  whitePrimary: "2px solid " + TRANSPARENT
 };
 
 const hoverColor = {
@@ -182,8 +189,7 @@ const hoverColor = {
   danger: WHITE,
   dangerSecondary: "#B10541",
   whiteSecondary: WHITE,
-  whitePrimary: WHITE,
-  disabled: MANATEE_GREY
+  whitePrimary: WHITE
 };
 
 const activeBackgroundColor = {
@@ -198,8 +204,7 @@ const activeBackgroundColor = {
   danger: "#870000",
   dangerSecondary: "#FAE7EE",
   whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT,
-  disabled: TRANSPARENT
+  whitePrimary: TRANSPARENT
 };
 
 const activeBorderColor = {
@@ -214,8 +219,7 @@ const activeBorderColor = {
   danger: "#870000",
   dangerSecondary: "#910029",
   whiteSecondary: "2px solid " + TRANSPARENT,
-  whitePrimary: "2px solid " + TRANSPARENT,
-  disabled: TRANSPARENT
+  whitePrimary: "2px solid " + TRANSPARENT
 };
 
 const activeColor = {
@@ -230,8 +234,7 @@ const activeColor = {
   danger: WHITE,
   dangerSecondary: "#910029",
   whiteSecondary: WHITE,
-  whitePrimary: WHITE,
-  disabled: MANATEE_GREY
+  whitePrimary: WHITE
 };
 
 export const fallbackValues = {
@@ -241,6 +244,7 @@ export const fallbackValues = {
   fontWeight,
   height,
   minWidth,
+  textDecoration,
   backgroundColor,
   border,
   hoverBackgroundColor,

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

@@ -9,8 +9,8 @@ const ButtonWithLink = ({
   url = "/",
   disabled = false,
   fileLink = false,
-  extraStyles,
-  linkExtraStyles,
+  extraStyles = "",
+  linkExtraStyles = "",
   newTab = false,
   dataQa,
   ...otherProps

package/src/components/atoms/form-layouts/FormInput.js

@@ -172,7 +172,7 @@ const FormInput = ({
                   color={themeValues.linkColor}
                   weight={themeValues.fontWeight}
                   hoverStyles={themeValues.hoverFocusStyles}
-                  extraStyles={`cursor: pointer; &:focus { outline-offset: -2px; }`}
+                  extraStyles={`text-decoration: underline; cursor: pointer; &:focus { outline-offset: -2px; }`}
                   onClick={() => setShowPassword(!showPassword)}
                   tabIndex="0"
                   aria-label={showPassword ? "Hide Password" : "Show password"}

package/src/components/atoms/icons/CloseIcon.d.ts

@@ -0,0 +1 @@
+export const CloseIcon: JSX.Element;

package/src/components/atoms/icons/CloseIcon.js

@@ -0,0 +1,48 @@
+import React from "react";
+
+export const CloseIcon = ({
+  iconFill = "#3B414D",
+  iconWidth = "24",
+  iconHeight = "24",
+  ...rest
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={iconWidth}
+      height={iconHeight}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...rest}
+    >
+      <title>Close Icon</title>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.3033 5.98982C17.108 5.79456 16.7915 5.79456 16.5962 5.98982L12 10.586L7.40381 5.98982C7.20854 5.79456 6.89196 5.79456 6.6967 5.98982L5.98959 6.69693C5.79433 6.89219 5.79433 7.20878 5.98959 7.40404L10.5858 12.0002L5.98959 16.5964C5.79433 16.7917 5.79433 17.1083 5.98959 17.3035L6.6967 18.0106C6.89196 18.2059 7.20854 18.2059 7.40381 18.0106L12 13.4144L16.5962 18.0106C16.7915 18.2059 17.108 18.2059 17.3033 18.0106L18.0104 17.3035C18.2057 17.1083 18.2057 16.7917 18.0104 16.5964L13.4142 12.0002L18.0104 7.40404C18.2057 7.20878 18.2057 6.89219 18.0104 6.69693L17.3033 5.98982Z"
+        fill={iconFill}
+      />
+      <mask
+        id="mask0_3727_16765"
+        style={{ maskType: "luminance" }}
+        maskUnits="userSpaceOnUse"
+        x="5"
+        y="5"
+        width="14"
+        height="14"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M17.3033 5.98982C17.108 5.79456 16.7915 5.79456 16.5962 5.98982L12 10.586L7.40381 5.98982C7.20854 5.79456 6.89196 5.79456 6.6967 5.98982L5.98959 6.69693C5.79433 6.89219 5.79433 7.20878 5.98959 7.40404L10.5858 12.0002L5.98959 16.5964C5.79433 16.7917 5.79433 17.1083 5.98959 17.3035L6.6967 18.0106C6.89196 18.2059 7.20854 18.2059 7.40381 18.0106L12 13.4144L16.5962 18.0106C16.7915 18.2059 17.108 18.2059 17.3033 18.0106L18.0104 17.3035C18.2057 17.1083 18.2057 16.7917 18.0104 16.5964L13.4142 12.0002L18.0104 7.40404C18.2057 7.20878 18.2057 6.89219 18.0104 6.69693L17.3033 5.98982Z"
+          fill="none"
+        />
+      </mask>
+      <g mask="url(#mask0_3727_16765)">
+        <path d="M0 0H24V24H0V0Z" fill={iconFill} />
+      </g>
+    </svg>
+  );
+};
+
+export default CloseIcon;

package/src/components/atoms/icons/TrashIconV2.d.ts

@@ -0,0 +1 @@
+export const TrashIconV2: JSX.Element;

package/src/components/atoms/icons/TrashIconV2.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const TrashIconV2 = ({ themeValues, iconFill }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.5 4H14V6H4V4H6.5L7.21429 3H10.7857L11.5 4ZM6.99048 15C6.25714 15 5.65714 14.4857 5.65714 13.8571L4.85714 7H12.8571L12.0571 13.8571C12.0571 14.4857 11.4571 15 10.7238 15H6.99048Z"
+        fill={iconFill ?? themeValues.singleIconColor}
+      />
+      <mask
+        id="mask0_4292_11876"
+        style={{ maskType: "luminance" }}
+        maskUnits="userSpaceOnUse"
+        x="4"
+        y="3"
+        width="10"
+        height="12"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M11.5 4H14V6H4V4H6.5L7.21429 3H10.7857L11.5 4ZM6.99048 15C6.25714 15 5.65714 14.4857 5.65714 13.8571L4.85714 7H12.8571L12.0571 13.8571C12.0571 14.4857 11.4571 15 10.7238 15H6.99048Z"
+          fill="white"
+        />
+      </mask>
+      <g mask="url(#mask0_4292_11876)"></g>
+    </svg>
+  );
+};
+
+export default themeComponent(TrashIconV2, "Icons", fallbackValues, "primary");

package/src/components/atoms/icons/icons.stories.js

@@ -40,7 +40,9 @@ import {
   StatusUnknownIcon,
   AutopayIcon,
   KebabMenuIcon,
-  MultiCartIcon
+  MultiCartIcon,
+  CloseIcon,
+  TrashIconV2
 } from "./index";
 
 const story = page({
@@ -88,3 +90,5 @@ export const statusUnknownIcon = () => <StatusUnknownIcon />;
 export const autopayIcon = () => <AutopayIcon />;
 export const kebabMenuIcon = () => <KebabMenuIcon />;
 export const multiCartIcon = () => <MultiCartIcon />;
+export const closeIcon = () => <CloseIcon />;
+export const trashIconV2 = () => <TrashIconV2 />;

package/src/components/atoms/icons/index.d.ts

@@ -23,3 +23,5 @@ export * from "./XCircleIconMedium";
 export * from "./XCircleIconSmall";
 export * from "./KebabMenuIcon";
 export * from "./MultiCartIcon";
+export * from "./CloseIcon";
+export * from "./TrashIconV2";

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

@@ -88,6 +88,8 @@ import ChargebackReversalIconMedium from "./ChargebackReversalIconMedium";
 import PlusCircleIcon from "./PlusCircleIcon";
 import KebabMenuIcon from "./KebabMenuIcon";
 import MultiCartIcon from "./MultiCartIcon";
+import CloseIcon from "./CloseIcon";
+import TrashIconV2 from "./TrashIconV2";
 
 export {
   AccountsIcon,
@@ -179,5 +181,7 @@ export {
   ChargebackReversalIconMedium,
   PlusCircleIcon,
   KebabMenuIcon,
-  MultiCartIcon
+  MultiCartIcon,
+  CloseIcon,
+  TrashIconV2
 };

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

@@ -45,7 +45,6 @@ const Box = forwardRef(
       extraStyles,
       srOnly = false,
       dataQa,
-      disabled = false,
       children,
       ...rest
     },

package/src/components/atoms/layouts/examples/box-example/BoxExample.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { boolean, text, radios, select } from "@storybook/addon-knobs";
+import { text, radios, select } from "@storybook/addon-knobs";
 
 import page from "../../../../../../.storybook/page";
 import Box from "../../Box";
@@ -47,7 +47,6 @@ export const box = () => (
     onFocus={text("onFocus", () => {}, groupId)}
     onBlur={text("onBlur", () => {}, groupId)}
     onTouchEnd={text("onTouchEnd", () => {}, groupId)}
-    disabled={boolean("disabled", false, groupId)}
   >
     Text Child
     <LayoutContentBlock

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

@@ -1,6 +1,10 @@
 import React, { forwardRef } from "react";
 import styled from "styled-components";
-import { ROYAL_BLUE } from "../../../constants/colors";
+import { colors, styleConstants } from "../../../constants";
+
+const { ROYAL_BLUE } = colors;
+const { LINK_TEXT_DECORATION } = styleConstants;
+
 /*
   The extracting of props and the disabling of the eslint rule is to stop React from complaining about
   unrecognized DOM attributes.
@@ -18,10 +22,10 @@ export const StyledExternalLink = styled(
   font-weight: ${({ weight }) => weight};
   font-family: ${({ fontFamily }) => fontFamily};
   line-height: ${({ lineheight }) => lineheight};
+  text-decoration: ${LINK_TEXT_DECORATION};
 
   &:hover {
     color: ${({ hoverColor }) => hoverColor};
-    text-decoration: underline;
   }
 
   &:focus {
@@ -30,7 +34,6 @@ export const StyledExternalLink = styled(
   }
 
   &:active {
-    text-decoration: underline;
     color: ${({ activeColor }) => activeColor};
   }
 

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

@@ -1,7 +1,11 @@
 import React, { forwardRef } from "react";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
-import { ROYAL_BLUE } from "../../../constants/colors";
+import { colors, styleConstants } from "../../../constants";
+
+const { ROYAL_BLUE } = colors;
+const { LINK_TEXT_DECORATION } = styleConstants;
+
 /*
   The extracting of props and the disabling of the eslint rule is to stop React from complaining about
   unrecognized DOM attributes.
@@ -24,10 +28,10 @@ export const StyledInternalLink = styled(
   font-size: ${({ fontSize }) => fontSize};
   font-family: ${({ fontFamily }) => fontFamily};
   margin: ${({ margin }) => margin};
+  text-decoration: ${LINK_TEXT_DECORATION};
 
   &:hover {
     color: ${({ hoverColor }) => hoverColor};
-    text-decoration: underline;
   }
 
   &:focus {
@@ -36,7 +40,6 @@ export const StyledInternalLink = styled(
   }
 
   &:active {
-    text-decoration: underline;
     color: ${({ activeColor }) => activeColor};
   }