@thecb/components 10.4.0-beta.0 → 10.4.0-beta.2

package/package.json

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

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

@@ -32,9 +32,13 @@ const StyledBadge = styled(Text)`
 
 const Badge = ({ label, Icon, themeValues, iconOnLeft = true }) => (
   <StyledBadgeContainer background={themeValues.background}>
-    {iconOnLeft && Icon && <Icon fill={themeValues.color} />}
+    {iconOnLeft && Icon && (
+      <Icon color={themeValues.color} fill={themeValues.color} />
+    )}
     <StyledBadge color={themeValues.color}>{label}</StyledBadge>
-    {!iconOnLeft && Icon && <Icon fill={themeValues.color} />}
+    {!iconOnLeft && Icon && (
+      <Icon color={themeValues.color} fill={themeValues.color} />
+    )}
   </StyledBadgeContainer>
 );
 

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

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

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

@@ -1,4 +1,6 @@
 import {
+  MANATEE_GREY,
+  GRECIAN_GREY,
   CORNFLOWER_BLUE,
   HALF_COLONIAL_WHITE,
   HINT_GREEN,
@@ -13,17 +15,19 @@ const background = {
   info: `${INFO_BLUE}`,
   warn: `${HALF_COLONIAL_WHITE}`,
   primary: `${CORNFLOWER_BLUE}`,
-  success: `${HINT_GREEN}`
+  success: `${HINT_GREEN}`,
+  disabled: `${GRECIAN_GREY}`
 };
 
 const color = {
   info: `${MATISSE_BLUE}`,
   warn: `${ZEST_ORANGE}`,
   primary: `${ROYAL_BLUE_VIVID}`,
-  success: `${SEA_GREEN}`
+  success: `${SEA_GREEN}`,
+  disabled: `${MANATEE_GREY}`
 };
 
 export const fallbackValues = {
-  background,
-  color
+  background: background,
+  color: 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(
@@ -68,6 +68,7 @@ const ButtonWithAction = forwardRef(
       text,
       textWrap = false,
       isLoading = false,
+      disabled = false,
       loadingColor = "white",
       dataQa = null,
       textExtraStyles,
@@ -90,35 +91,35 @@ const ButtonWithAction = forwardRef(
     const { isMobile } = themeContext;
 
     const hoverStyles = `
-    outline: none;
-    background-color: ${themeValues.hoverBackgroundColor};
-    border-color: ${themeValues.hoverBorderColor};
-    color: ${themeValues.hoverColor};
-    text-decoration: ${
-      variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
-    };
-    cursor: pointer;
-  `;
+      outline: none;
+      background-color: ${themeValues.hoverBackgroundColor};
+      border-color: ${themeValues.hoverBorderColor};
+      color: ${themeValues.hoverColor};
+      text-decoration: ${
+        variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
+      };
+      cursor: pointer;
+    `;
     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-color: #6D717E;
-    border-color: #6D717E;
-    color: #FFFFFF;
-    cursor: default;
-    &:focus {
-      box-shadow: 0 0 10px #6D717E;
       outline: none;
-    }
-    ${extraDisabledStyles}
+      background-color: ${themeValues.activeBackgroundColor};
+      border-color: ${themeValues.activeBorderColor};
+      color: ${themeValues.activeColor};
+      text-decoration: ${
+        variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
+      };
   `;
+    const disabledStyles = `
+      background-color: ${themeValues.disabledBackgroundColor};
+      border-color: ${themeValues.disabledBorderColor};
+      color: ${themeValues.disabledColor};
+      cursor: default;
+      &:focus {
+        outline: 3px solid ${themeValues.disabledBorderColor};
+        outline-offset: 2px;
+      }
+      ${extraDisabledStyles}
+    `;
 
     return (
       <Box
@@ -129,11 +130,12 @@ const ButtonWithAction = forwardRef(
         minWidth={themeValues.minWidth}
         background={themeValues.backgroundColor}
         border={themeValues.border}
-        hoverStyles={hoverStyles}
-        activeStyles={activeStyles}
+        hoverStyles={disabled ? disabledStyles : hoverStyles}
+        activeStyles={disabled ? disabledStyles : activeStyles}
         disabledStyles={disabledStyles}
+        aria-disabled={disabled}
         as="button"
-        onClick={isLoading ? undefined : action}
+        onClick={isLoading || disabled ? undefined : action}
         borderRadius="2px"
         theme={themeContext}
         extraStyles={`margin: 0.5rem; ${extraStyles}`}
@@ -151,7 +153,8 @@ const ButtonWithAction = forwardRef(
               <Text
                 weight={themeValues.fontWeight}
                 variant={themeValues.fontSizeVariant}
-                color={themeValues.color}
+                color={disabled ? themeValues.disabledColor : themeValues.color}
+                textDecoration={themeValues.textDecoration}
                 textWrap={textWrap}
                 extraStyles={textExtraStyles}
               >

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

@@ -12,18 +12,22 @@ const variants = {
   smallSecondary: "smallSecondary",
   ghost: "ghost",
   smallGhost: "smallGhost",
+  tertiary: "tertiary",
   danger: "danger",
   None: undefined
 };
 const defaultValue = "primary";
 const groupId = "props";
 
+const buttonHandler = () => console.log("Button selected");
+
 export const buttonWithAction = () => (
   <ButtonWithAction
     variant={select(variantsLabel, variants, defaultValue, groupId)}
+    disabled={boolean("disabled", false, "props")}
     text={text("text", "button", "props")}
     isLoading={boolean("isLoading", false, "props")}
-    action={text("action", undefined, "props")}
+    action={text("action", buttonHandler, "props")}
   />
 );
 

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

@@ -1,12 +1,63 @@
-import {
+import { colors, styleConstants } from "../../../constants";
+
+const {
   WHITE,
   TRANSPARENT,
   SAPPHIRE_BLUE,
   PEACOCK_BLUE,
+  MANATEE_GREY,
   MATISSE_BLUE,
   RASPBERRY,
-  ERROR_COLOR
-} from "../../../constants/colors";
+  ERROR_COLOR,
+  STORM_GREY
+} = colors;
+
+const { LINK_TEXT_DECORATION } = styleConstants;
+
+const disabledBorderColor = {
+  primary: STORM_GREY,
+  secondary: STORM_GREY,
+  back: TRANSPARENT,
+  smallPrimary: STORM_GREY,
+  smallSecondary: STORM_GREY,
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
+  danger: STORM_GREY,
+  dangerSecondary: STORM_GREY,
+  whiteSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT
+};
+
+const disabledColor = {
+  primary: WHITE,
+  secondary: MANATEE_GREY,
+  back: MANATEE_GREY,
+  smallPrimary: WHITE,
+  smallSecondary: MANATEE_GREY,
+  smallGhost: MANATEE_GREY,
+  ghost: MANATEE_GREY,
+  tertiary: MANATEE_GREY,
+  danger: WHITE,
+  dangerSecondary: MANATEE_GREY,
+  whiteSecondary: MANATEE_GREY,
+  whitePrimary: MANATEE_GREY
+};
+
+const disabledBackgroundColor = {
+  primary: MANATEE_GREY,
+  secondary: TRANSPARENT,
+  back: TRANSPARENT,
+  smallPrimary: MANATEE_GREY,
+  smallSecondary: TRANSPARENT,
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
+  danger: MANATEE_GREY,
+  dangerSecondary: TRANSPARENT,
+  whiteSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT
+};
 
 const padding = {
   primary: "0.75rem 1.5rem",
@@ -98,6 +149,21 @@ const minWidth = {
   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 = {
   primary: MATISSE_BLUE,
   secondary: TRANSPARENT,
@@ -225,6 +291,7 @@ export const fallbackValues = {
   fontWeight,
   height,
   minWidth,
+  textDecoration,
   backgroundColor,
   border,
   hoverBackgroundColor,
@@ -232,5 +299,8 @@ export const fallbackValues = {
   hoverColor,
   activeBackgroundColor,
   activeBorderColor,
-  activeColor
+  activeColor,
+  disabledColor,
+  disabledBackgroundColor,
+  disabledBorderColor
 };

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
@@ -57,7 +57,11 @@ const ButtonWithLink = ({
         text-decoration: none; }`}
       dataQa={dataQa}
     >
-      <ButtonWithAction {...otherProps} extraStyles={extraStyles} />
+      <ButtonWithAction
+        {...otherProps}
+        disabled={disabled}
+        extraStyles={extraStyles}
+      />
     </ButtonWithLinkWrapper>
   );
 };

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/AutopayIcon.js

@@ -1,7 +1,7 @@
 import React from "react";
 
 // Fill color based on default "success" variant color
-const AutopayIcon = ({ fill = "#317D4F" }) => (
+const AutopayIcon = ({ fill = "#317D4F", color = "#317D4F" }) => (
   <svg
     width="16"
     height="16"
@@ -24,7 +24,7 @@ const AutopayIcon = ({ fill = "#317D4F" }) => (
       />
     </mask>
     <g mask="url(#mask0_5560_39870)">
-      <path d="M0 0H16V16H0V0Z" fill={fill} />
+      <path d="M0 0H16V16H0V0Z" fill={fill || color} />
     </g>
   </svg>
 );

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/MultiCartIcon.js

@@ -1,23 +1,25 @@
 import React from "react";
 
-const MultiCartIcon = ({ iconFill = "#3B5BDB", isMobile = true }) => {
-  const iconWidth = isMobile ? "20" : "25";
-  const iconHeight = isMobile ? "17" : "23";
+const MultiCartIcon = ({
+  iconFill = "#3B5BDB",
+  iconWidth = "20",
+  iconHeight = "17",
+  ...rest
+}) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width={iconWidth}
       height={iconHeight}
-      viewBox={`0 0 ${iconWidth} ${iconHeight}`}
-      fill="none"
+      viewBox="0 0 24.81 22.06"
+      {...rest}
     >
+      <title>Icon - Cart-Empty</title>
       <path
-        d={
-          isMobile
-            ? "M17.5312 9.99414C17.4648 10.1934 17.3652 10.3594 17.2324 10.459C17.0996 10.5918 16.9336 10.625 16.7676 10.625H7.03906L7.23828 11.6875H16.1699C16.4023 11.6875 16.6016 11.7871 16.7676 11.9863C16.9004 12.1855 16.9668 12.418 16.9336 12.6504L16.7344 13.4805C17.0664 13.6465 17.2988 13.8789 17.498 14.1777C17.6973 14.4766 17.7969 14.8086 17.7969 15.1406C17.7969 15.6719 17.5977 16.1035 17.2324 16.4688C16.8672 16.834 16.4355 17 15.9375 17C15.4062 17 14.9746 16.834 14.6094 16.4688C14.2441 16.1035 14.0781 15.6719 14.0781 15.1406C14.0781 14.6094 14.2441 14.1777 14.6426 13.8125H7.66992C8.03516 14.1777 8.23438 14.6094 8.23438 15.1406C8.23438 15.6719 8.03516 16.1035 7.66992 16.4688C7.30469 16.834 6.87305 17 6.375 17C5.84375 17 5.41211 16.834 5.04688 16.4688C4.68164 16.1035 4.51562 15.6719 4.51562 15.1406C4.51562 14.8086 4.58203 14.5098 4.74805 14.2109C4.91406 13.9453 5.14648 13.7129 5.44531 13.5137L3.12109 2.125H0.796875C0.564453 2.125 0.365234 2.05859 0.232422 1.89258C0.0664062 1.75977 0 1.56055 0 1.32812V0.796875C0 0.597656 0.0664062 0.398438 0.232422 0.232422C0.365234 0.0996094 0.564453 0 0.796875 0H4.2168C4.38281 0 4.54883 0.0664062 4.68164 0.199219C4.81445 0.332031 4.91406 0.464844 4.98047 0.630859L5.2793 2.125H18.3281C18.5938 2.125 18.793 2.22461 18.959 2.42383C19.0918 2.62305 19.1582 2.85547 19.0918 3.08789L17.5312 9.99414Z"
-            : "M22.6875 13.4336C22.6016 13.6914 22.4727 13.9062 22.3008 14.0352C22.1289 14.207 21.9141 14.25 21.6992 14.25H9.10938L9.36719 15.625H20.9258C21.2266 15.625 21.4844 15.7539 21.6992 16.0117C21.8711 16.2695 21.957 16.5703 21.9141 16.8711L21.6562 17.9453C22.0859 18.1602 22.3867 18.4609 22.6445 18.8477C22.9023 19.2344 23.0312 19.6641 23.0312 20.0938C23.0312 20.7812 22.7734 21.3398 22.3008 21.8125C21.8281 22.2852 21.2695 22.5 20.625 22.5C19.9375 22.5 19.3789 22.2852 18.9062 21.8125C18.4336 21.3398 18.2188 20.7812 18.2188 20.0938C18.2188 19.4062 18.4336 18.8477 18.9492 18.375H9.92578C10.3984 18.8477 10.6562 19.4062 10.6562 20.0938C10.6562 20.7812 10.3984 21.3398 9.92578 21.8125C9.45312 22.2852 8.89453 22.5 8.25 22.5C7.5625 22.5 7.00391 22.2852 6.53125 21.8125C6.05859 21.3398 5.84375 20.7812 5.84375 20.0938C5.84375 19.6641 5.92969 19.2773 6.14453 18.8906C6.35938 18.5469 6.66016 18.2461 7.04688 17.9883L4.03906 3.25H1.03125C0.730469 3.25 0.472656 3.16406 0.300781 2.94922C0.0859375 2.77734 0 2.51953 0 2.21875V1.53125C0 1.27344 0.0859375 1.01562 0.300781 0.800781C0.472656 0.628906 0.730469 0.5 1.03125 0.5H5.45703C5.67188 0.5 5.88672 0.585938 6.05859 0.757812C6.23047 0.929688 6.35938 1.10156 6.44531 1.31641L6.83203 3.25H23.7188C24.0625 3.25 24.3203 3.37891 24.5352 3.63672C24.707 3.89453 24.793 4.19531 24.707 4.49609L22.6875 13.4336Z"
-        }
+        d="M18.7499553,20.499994 C19.348912,20.499994 19.8632339,20.2851508 20.2929204,19.8554643 C20.7226068,19.4257779 20.9374501,18.911456 20.9374501,18.3124993 C20.9374501,17.8958334 20.8267735,17.5117199 20.6054196,17.1601583 C20.3840658,16.8085966 20.0780771,16.5416703 19.6874531,16.3593789 L19.6874531,16.3593789 L19.9218275,15.3828187 C19.9739105,15.0963613 19.9088069,14.835945 19.7265155,14.6015706 C19.544224,14.3671962 19.3098496,14.2500089 19.0233921,14.2500089 L19.0233921,14.2500089 L8.5156047,14.2500089 L8.28123026,13.0000119 L19.7265155,13.0000119 C19.9348481,13.0000119 20.1236501,12.9349077 20.2929204,12.8046999 C20.4621906,12.6744921 20.5728678,12.4922006 20.6249508,12.2578262 L20.6249508,12.2578262 L22.4608839,4.13284556 C22.5390088,3.84638811 22.4869258,3.58597187 22.3046343,3.35159742 C22.1223429,3.11722298 21.8749478,3.00004172 21.5624486,3.00004172 L21.5624486,3.00004172 L6.21092269,3.00004172 L5.85936103,1.24222745 C5.80727802,1.03389482 5.6966008,0.858113985 5.52733057,0.714884961 C5.35806034,0.571655937 5.16925831,0.500041723 4.96092567,0.500041723 L4.96092567,0.500041723 L0.937497765,0.500041723 C0.67708152,0.500041723 0.455728279,0.591187141 0.273436848,0.773478571 C0.0911454173,0.955770002 0,1.17712324 0,1.43753949 L0,1.43753949 L0,2.062538 C0,2.32295424 0.0911454173,2.54430748 0.273436848,2.72659891 C0.455728279,2.90889035 0.67708152,3.00004172 0.937497765,3.00004172 L0.937497765,3.00004172 L3.67186625,3.00004172 L6.40623473,16.3984413 C6.06769367,16.606774 5.80076742,16.8802108 5.60545539,17.2187519 C5.41014335,17.5572929 5.31248733,17.9218752 5.31248733,18.3124993 C5.31248733,18.911456 5.52733057,19.4257779 5.95701705,19.8554643 C6.38670352,20.2851508 6.90102541,20.499994 7.49998212,20.499994 C8.09893883,20.499994 8.61326071,20.2851508 9.04294719,19.8554643 C9.47263367,19.4257779 9.6874769,18.904946 9.6874769,18.2929681 C9.6874769,17.6809901 9.46612307,17.1666689 9.02341599,16.750003 L9.02341599,16.750003 L17.2265214,16.750003 C16.7838143,17.1666689 16.5624605,17.6809901 16.5624605,18.2929681 C16.5624605,18.904946 16.7773037,19.4257779 17.2069902,19.8554643 C17.6366767,20.2851508 18.1509986,20.499994 18.7499553,20.499994 Z"
+        id="cart-badge-shopping-cart"
         fill={iconFill}
+        fillRule="nonzero"
       />
     </svg>
   );

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/jumbo/Jumbo.js

@@ -21,9 +21,7 @@ const Jumbo = ({
   itemsCount,
   showCartStatus = false,
   openCartSlider,
-  extraStyles,
-  cartStatusExtraStyles,
-  cartStatusThemeValues
+  extraStyles
 }) => {
   const { isMobile } = useContext(ThemeContext);
   return (
@@ -53,7 +51,6 @@ const Jumbo = ({
               }
               align="center"
               nowrap={showCartStatus}
-              extraStyles={cartStatusExtraStyles}
             >
               <Title
                 variant={isMobile ? "small" : "large"}
@@ -83,7 +80,6 @@ const Jumbo = ({
               )}
               {showCartStatus && (
                 <CartStatus
-                  themeValues={cartStatusThemeValues}
                   total={total}
                   itemsCount={itemsCount}
                   openCart={openCartSlider}

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

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

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

@@ -107,6 +107,21 @@ export const BoxWrapper = styled(
           : ``}
       `}
   }
+  
+  &[aria-disabled="true"] {
+    ${({ disabledStyles, as }) =>
+      css`
+        ${disabledStyles}
+        ${as === "button"
+          ? `        > * > span {
+          ${disabledStyles}
+          border: none;
+          outline: none;
+          box-shadow: none;
+        }`
+          : ``}
+      `}
+  }
 
   & * {
     color: ${({ color }) => color};

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

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