@thecb/components 4.2.7-beta.9 → 4.2.8-beta.2

package/dist/index.cjs.js

@@ -13775,41 +13775,54 @@ var IconAdd = function IconAdd() {
   }))))));
 };
 
-var IconQuit = function IconQuit(_ref) {
+var IconQuitLarge = function IconQuitLarge(_ref) {
   var _ref$fill = _ref.fill,
-      fill = _ref$fill === void 0 ? MINESHAFT_GREY : _ref$fill,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? "24px" : _ref$width,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? "24px" : _ref$height;
+      fill = _ref$fill === void 0 ? "#091325" : _ref$fill;
   return /*#__PURE__*/React__default.createElement("svg", {
+    width: "14px",
+    height: "14px",
+    viewBox: "0 0 14 14",
+    version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    width: width,
-    height: height,
-    viewBox: "0 0 24 24"
-  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("path", {
-    id: "quit",
-    d: "M18.9999989 6.40999946L17.589999 4.9999997 11.9999993 10.5899995 6.40999946 4.9999997 4.9999997 6.40999946 10.5899995 11.9999993 4.9999997 17.589999 6.40999946 18.9999989 11.9999993 13.409999 17.589999 18.9999989 18.9999989 17.589999 13.409999 11.9999993z"
+    xmlnsXlink: "http://www.w3.org/1999/xlink"
+  }, /*#__PURE__*/React__default.createElement("title", null, "Icon/X"), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("polygon", {
+    id: "quit-large-path-1",
+    points: "18.9999989 6.40999946 17.589999 4.9999997 11.9999993 10.5899995 6.40999946 4.9999997 4.9999997 6.40999946 10.5899995 11.9999993 4.9999997 17.589999 6.40999946 18.9999989 11.9999993 13.409999 17.589999 18.9999989 18.9999989 17.589999 13.409999 11.9999993"
   })), /*#__PURE__*/React__default.createElement("g", {
-    fill: "none",
-    fillRule: "evenodd",
+    id: "quit-large-[D]-Cart---Slideout",
     stroke: "none",
-    strokeWidth: "1"
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "quit-large-[D]-Cart-Slideout---Standard",
+    transform: "translate(-741.000000, -34.000000)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "quit-large-Close-Icon",
+    transform: "translate(724.000000, 17.000000)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "quit-large-Group",
+    transform: "translate(12.000000, 12.000000)"
   }, /*#__PURE__*/React__default.createElement("mask", {
-    id: "quitMask",
-    fill: "#fff"
+    id: "quit-large-mask-2",
+    fill: "white"
   }, /*#__PURE__*/React__default.createElement("use", {
-    xlinkHref: "#quit"
+    xlinkHref: "#quit-large-path-1"
   })), /*#__PURE__*/React__default.createElement("use", {
+    id: "quit-large-Fill-2",
     fill: fill,
-    xlinkHref: "#quit"
+    xlinkHref: "#quit-large-path-1"
   }), /*#__PURE__*/React__default.createElement("g", {
+    mask: "url(#quit-large-mask-2)",
     fill: fill,
-    mask: "url(#quitMask)"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M0 0H24V24H0z"
-  }))));
+    id: "quit-large-\u2B91\uD83C\uDFA8"
+  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("rect", {
+    id: "quit-large-\u279D\u270F\uFE0F",
+    x: "0",
+    y: "0",
+    width: "24",
+    height: "24"
+  }))))))));
 };
 
 var TimeoutImage = function TimeoutImage() {
@@ -15285,6 +15298,43 @@ var AlertWarningIcon = function AlertWarningIcon() {
   })))));
 };
 
+var IconQuit = function IconQuit(_ref) {
+  var _ref$fill = _ref.fill,
+      fill = _ref$fill === void 0 ? MINESHAFT_GREY : _ref$fill,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? "24px" : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? "24px" : _ref$height;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("path", {
+    id: "quit",
+    d: "M18.9999989 6.40999946L17.589999 4.9999997 11.9999993 10.5899995 6.40999946 4.9999997 4.9999997 6.40999946 10.5899995 11.9999993 4.9999997 17.589999 6.40999946 18.9999989 11.9999993 13.409999 17.589999 18.9999989 18.9999989 17.589999 13.409999 11.9999993z"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React__default.createElement("mask", {
+    id: "quitMask",
+    fill: "#fff"
+  }, /*#__PURE__*/React__default.createElement("use", {
+    xlinkHref: "#quit"
+  })), /*#__PURE__*/React__default.createElement("use", {
+    fill: fill,
+    xlinkHref: "#quit"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    fill: fill,
+    mask: "url(#quitMask)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M0 0H24V24H0z"
+  }))));
+};
+
 var AlertIcons = {
   error: AlertErrorIcon,
   info: AlertInfoIcon,
@@ -21206,7 +21256,11 @@ var Jumbo = function Jumbo(_ref) {
       _ref$largeSide = _ref.largeSide,
       largeSide = _ref$largeSide === void 0 ? "right" : _ref$largeSide,
       _ref$largeSideSize = _ref.largeSideSize,
-      largeSideSize = _ref$largeSideSize === void 0 ? "2" : _ref$largeSideSize;
+      largeSideSize = _ref$largeSideSize === void 0 ? "2" : _ref$largeSideSize,
+      CartStatus = _ref.cartStatus,
+      total = _ref.total,
+      showCartStatus = _ref.showCartStatus,
+      openCartSlider = _ref.openCartSlider;
 
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
@@ -21228,7 +21282,7 @@ var Jumbo = function Jumbo(_ref) {
     childGap: "0.25rem"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     minHeight: "100%",
-    justify: isMobile ? "center" : showButton ? "space-between" : "left",
+    justify: isMobile ? "center" : showButton || showCartStatus ? "space-between" : "left",
     align: "center"
   }, /*#__PURE__*/React__default.createElement(Heading$1, {
     variant: isMobile ? "h5" : "h3",
@@ -21244,6 +21298,9 @@ var Jumbo = function Jumbo(_ref) {
     text: buttonText || "Browse Services",
     variant: "primary",
     extraStyles: "margin: 0 0 65px 0; min-width: 320px;"
+  }), showCartStatus && /*#__PURE__*/React__default.createElement(CartStatus, {
+    total: total,
+    openCart: openCartSlider
   }))))));
 };
 
@@ -34754,7 +34811,9 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
       customTitle = _ref$customTitle === void 0 ? false : _ref$customTitle,
       _ref$stackTitle = _ref.stackTitle,
       stackTitle = _ref$stackTitle === void 0 ? false : _ref$stackTitle,
-      stackTitleContent = _ref.stackTitleContent;
+      stackTitleContent = _ref.stackTitleContent,
+      _ref$sectionGap = _ref.sectionGap,
+      sectionGap = _ref$sectionGap === void 0 ? "0.5rem" : _ref$sectionGap;
 
   var handleKeyDown = function handleKeyDown(e) {
     if (e.keyCode === 13) {
@@ -34797,7 +34856,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     animate: isOpen ? "open" : "closed",
     positionTransition: true
   }, stackTitle && /*#__PURE__*/React__default.createElement(React.Fragment, null, stackTitleContent), /*#__PURE__*/React__default.createElement(Stack, {
-    childGap: isOpen && !isMobile ? "0.5rem" : "0rem"
+    childGap: isOpen && !isMobile ? sectionGap : "0rem"
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: customPadding ? customPadding : "0",
     background: themeValues.headingBackgroundColor,
@@ -40932,7 +40991,7 @@ exports.HamburgerButton = HamburgerButton;
 exports.Heading = Heading$1;
 exports.HighlightTabRow = HighlightTabRow$1;
 exports.IconAdd = IconAdd;
-exports.IconQuit = IconQuit;
+exports.IconQuitLarge = IconQuitLarge;
 exports.Imposter = Imposter;
 exports.InternalLink = InternalLink;
 exports.Jumbo = Jumbo$1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.2.7-beta.9",
+  "version": "4.2.8-beta.2",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/alert/Alert.js

@@ -1,6 +1,5 @@
 import React from "react";
-import { AlertIcons } from "../../../deprecated/icons";
-import { IconQuit } from "../icons";
+import { AlertIcons, IconQuit } from "../../../deprecated/icons";
 import { Box, Center, Cluster, Stack, Cover, Sidebar } from "../layouts";
 import Text from "../text";
 import { fallbackValues } from "./Alert.theme";

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

@@ -0,0 +1,61 @@
+import React from "react";
+
+const IconQuitLarge = ({ fill = "#091325" }) => (
+  <svg
+    width="14px"
+    height="14px"
+    viewBox="0 0 14 14"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <title>Icon/X</title>
+    <defs>
+      <polygon
+        id="quit-large-path-1"
+        points="18.9999989 6.40999946 17.589999 4.9999997 11.9999993 10.5899995 6.40999946 4.9999997 4.9999997 6.40999946 10.5899995 11.9999993 4.9999997 17.589999 6.40999946 18.9999989 11.9999993 13.409999 17.589999 18.9999989 18.9999989 17.589999 13.409999 11.9999993"
+      ></polygon>
+    </defs>
+    <g
+      id="quit-large-[D]-Cart---Slideout"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="quit-large-[D]-Cart-Slideout---Standard"
+        transform="translate(-741.000000, -34.000000)"
+      >
+        <g
+          id="quit-large-Close-Icon"
+          transform="translate(724.000000, 17.000000)"
+        >
+          <g id="quit-large-Group" transform="translate(12.000000, 12.000000)">
+            <mask id="quit-large-mask-2" fill="white">
+              <use xlinkHref="#quit-large-path-1"></use>
+            </mask>
+            <use
+              id="quit-large-Fill-2"
+              fill={fill}
+              xlinkHref="#quit-large-path-1"
+            ></use>
+            <g mask="url(#quit-large-mask-2)" fill={fill} id="quit-large-⮑🎨">
+              <g>
+                <rect
+                  id="quit-large-➝✏️"
+                  x="0"
+                  y="0"
+                  width="24"
+                  height="24"
+                ></rect>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export default IconQuitLarge;

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

@@ -19,7 +19,7 @@ import BankIcon from "./BankIcon";
 import GenericCard from "./GenericCard";
 import PaymentIcon from "./PaymentIcon";
 import IconAdd from "./IconAdd";
-import IconQuit from "./IconQuit";
+import IconQuitLarge from "./IconQuitLarge";
 import TimeoutImage from "./TimeoutImage";
 import AutopayOnIcon from "./AutopayOnIcon";
 import NotFoundIcon from "./NotFoundIcon";
@@ -69,7 +69,7 @@ export {
   GenericCard,
   PaymentIcon,
   IconAdd,
-  IconQuit,
+  IconQuitLarge,
   TimeoutImage,
   AutopayOnIcon,
   NotFoundIcon,

package/src/components/atoms/jumbo/Jumbo.js

@@ -14,7 +14,11 @@ const Jumbo = ({
   buttonText,
   slug,
   largeSide = "right",
-  largeSideSize = "2"
+  largeSideSize = "2",
+  cartStatus: CartStatus,
+  total,
+  showCartStatus,
+  openCartSlider
 }) => {
   const { isMobile } = useContext(ThemeContext);
   return (
@@ -35,7 +39,11 @@ const Jumbo = ({
             <Cluster
               minHeight="100%"
               justify={
-                isMobile ? `center` : showButton ? `space-between` : `left`
+                isMobile
+                  ? `center`
+                  : showButton || showCartStatus
+                  ? `space-between`
+                  : `left`
               }
               align="center"
             >
@@ -65,6 +73,9 @@ const Jumbo = ({
                   extraStyles={`margin: 0 0 65px 0; min-width: 320px;`}
                 />
               )}
+              {showCartStatus && (
+                <CartStatus total={total} openCart={openCartSlider} />
+              )}
             </Cluster>
           </Switcher>
         </Cover>

package/src/components/molecules/collapsible-section/CollapsibleSection.js

@@ -21,7 +21,8 @@ const CollapsibleSection = ({
   children,
   customTitle = false,
   stackTitle = false,
-  stackTitleContent
+  stackTitleContent,
+  sectionGap = "0.5rem"
 }) => {
   const handleKeyDown = e => {
     if (e.keyCode === 13) {
@@ -69,7 +70,7 @@ const CollapsibleSection = ({
       positionTransition
     >
       {stackTitle && <Fragment>{stackTitleContent}</Fragment>}
-      <Stack childGap={isOpen && !isMobile ? "0.5rem" : "0rem"}>
+      <Stack childGap={isOpen && !isMobile ? sectionGap : "0rem"}>
         <Box
           padding={customPadding ? customPadding : "0"}
           background={themeValues.headingBackgroundColor}

package/src/{components/atoms → deprecated}/icons/IconQuit.js

@@ -1,7 +1,7 @@
 import React from "react";
-import { MINESHAFT_GREY } from "../../../constants/colors";
+import { MINESHAFT_GREY } from "../../constants/colors";
 
-const IconQuit = ({
+export const IconQuit = ({
   fill = MINESHAFT_GREY,
   width = "24px",
   height = "24px"
@@ -30,5 +30,3 @@ const IconQuit = ({
     </g>
   </svg>
 );
-
-export default IconQuit;

package/src/deprecated/icons/index.js

@@ -13,6 +13,7 @@ import { AlertInfoIcon } from "./AlertInfoIcon";
 import { AlertErrorIcon } from "./AlertErrorIcon";
 import { AlertSuccessIcon } from "./AlertSuccessIcon";
 import { AlertWarningIcon } from "./AlertWarningIcon";
+import { IconQuit } from "./IconQuit";
 
 const AlertIcons = {
   error: AlertErrorIcon,
@@ -32,5 +33,6 @@ export {
   IconNeutral,
   IconValid,
   IconInvalid,
-  AlertIcons
+  AlertIcons,
+  IconQuit
 };