@thecb/components 4.0.13 → 4.0.15-beta.0

package/dist/index.cjs.js

@@ -12633,7 +12633,7 @@ var ButtonWithAction = function ButtonWithAction(_ref) {
   var themeContext = React.useContext(styled.ThemeContext);
   var themeValues = createThemeValues(themeContext, fallbackValues$1, "Button", variant);
   var loadingExtraStyles = "".concat(extraStyles, "; padding-top: 0.75rem; padding-bottom: 0.75rem; height: ").concat(themeContext.isMobile ? "50px" : "57px", " ");
-  var hoverStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.hoverBackgroundColor, ";\n    border-color: ").concat(themeValues.hoverBorderColor, ";\n    color: ").concat(themeValues.hoverColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
+  var hoverStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.hoverBackgroundColor, ";\n    border-color: ").concat(themeValues.hoverBorderColor, ";\n    color: ").concat(themeValues.hoverColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n    cursor: pointer;\n  ");
   var activeStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.activeBackgroundColor, ";\n    border-color: ").concat(themeValues.activeBorderColor, ";\n    color: ").concat(themeValues.activeColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
   var disabledStyles = "\n    background-clor: #6E727E;\n    border-color: #6E727E;\n    color: #FFFFFF;\n    &:focus {\n      box-shadow: 0 0 10px #6E727E;\n      outline: none;\n    }\n  ";
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -16293,9 +16293,10 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
       _ref$fileLink = _ref.fileLink,
       fileLink = _ref$fileLink === void 0 ? false : _ref$fileLink,
       extraStyles = _ref.extraStyles,
+      linkExtraStyles = _ref.linkExtraStyles,
       _ref$newTab = _ref.newTab,
       newTab = _ref$newTab === void 0 ? false : _ref$newTab,
-      otherProps = _objectWithoutProperties(_ref, ["url", "disabled", "fileLink", "extraStyles", "newTab"]);
+      otherProps = _objectWithoutProperties(_ref, ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab"]);
 
   var ButtonWithLinkWrapper = function ButtonWithLinkWrapper(_ref2) {
     var children = _ref2.children,
@@ -16324,7 +16325,7 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
     url: url,
     disabled: disabled,
     newTab: newTab,
-    extraStyles: "text-decoration: none; &:hover {\n        text-decoration: none; }"
+    extraStyles: "".concat(linkExtraStyles, " text-decoration: none; &:hover {\n        text-decoration: none; }")
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, _extends({}, otherProps, {
     extraStyles: extraStyles
   })));
@@ -19916,9 +19917,7 @@ var ERRORS = {
   "71": "Passed invalid pixel value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
   "72": "Passed invalid base value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
   "73": "Please provide a valid CSS variable.\n\n",
-  "74": "CSS variable not found and no default was provided.\n\n",
-  "75": "important requires a valid style object, got a %s instead.\n\n",
-  "76": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n"
+  "74": "CSS variable not found.\n"
 };
 /**
  * super basic version of sprintf
@@ -33396,12 +33395,10 @@ ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
 var titleColor = "#292A33";
 var headingBackgroundColor = "transparent";
 var bodyBackgroundColor = "transparent";
-var focusStyles = "outline: none;";
 var fallbackValues$q = {
   titleColor: titleColor,
   headingBackgroundColor: headingBackgroundColor,
-  bodyBackgroundColor: bodyBackgroundColor,
-  focusStyles: focusStyles
+  bodyBackgroundColor: bodyBackgroundColor
 };
 
 var CollapsibleSection = function CollapsibleSection(_ref) {
@@ -33459,7 +33456,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     padding: "0",
     tabIndex: "0",
     onKeyDown: handleKeyDown,
-    hoverStyles: themeValues.focusStyles,
+    hoverStyles: "outline: none;",
     animate: isOpen ? "open" : "closed",
     positionTransition: true
   }, /*#__PURE__*/React__default.createElement(Stack, {
@@ -33469,7 +33466,8 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     background: themeValues.headingBackgroundColor,
     onClick: isMobile && supportsTouch ? noop : toggleSection,
     onTouchEnd: isMobile && supportsTouch ? toggleSection : noop,
-    key: "header"
+    key: "header",
+    hoverStyles: "cursor: pointer;"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "space-between",
     align: "center"
@@ -33483,10 +33481,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     as: "h6"
   }, title), /*#__PURE__*/React__default.createElement(Motion, {
     variants: icon,
-    style: {
-      display: "flex",
-      alignItems: "center"
-    }
+    extraStyles: "display: flex; align-items: center;"
   }, /*#__PURE__*/React__default.createElement(ChevronIcon$1, null)))), /*#__PURE__*/React__default.createElement(AnimatePresence, {
     initial: false
   }, isOpen && /*#__PURE__*/React__default.createElement(Motion, {
@@ -37700,7 +37695,9 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
       subtotal = _ref.subtotal,
       total = _ref.total,
       themeValues = _ref.themeValues;
-  return /*#__PURE__*/React__default.createElement(Stack, null, lineItemElems, /*#__PURE__*/React__default.createElement(SolidDivider$1, null), /*#__PURE__*/React__default.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "16px"
+  }, lineItemElems, /*#__PURE__*/React__default.createElement(SolidDivider$1, null), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0.5rem 0"
   }, /*#__PURE__*/React__default.createElement(LabeledAmount$1, {
     variant: themeValues.labeledAmountSubtotal,
@@ -37803,13 +37800,19 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     return /*#__PURE__*/React__default.createElement(React.Fragment, {
       key: fee.label
     }, /*#__PURE__*/React__default.createElement(Box, {
-      padding: "0.25rem 0"
+      padding: "4px 0"
     }), /*#__PURE__*/React__default.createElement(LabeledAmount$1, _extends({
       key: fee.label,
       variant: themeValues.labeledAmountSubtotal
     }, fee)));
   });
-  var content = isCollapsible ? /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(SolidDivider$1, null), /*#__PURE__*/React__default.createElement(PaymentDetailsContent, {
+  var content = isCollapsible ? /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "0"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "4.5px"
+  }), /*#__PURE__*/React__default.createElement(SolidDivider$1, null), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "8px"
+  }), /*#__PURE__*/React__default.createElement(PaymentDetailsContent, {
     lineItemElems: lineItemElems,
     feeElems: feeElems,
     subtotal: subtotal,
@@ -37832,7 +37835,11 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     variant: "h5",
     weight: "700",
     as: "h1"
-  }, titleText), displayCurrency(total))) : /*#__PURE__*/React__default.createElement(Heading$1, {
+  }, titleText), /*#__PURE__*/React__default.createElement(Heading$1, {
+    variant: "h5",
+    weight: "700",
+    as: "h1"
+  }, displayCurrency(total)))) : /*#__PURE__*/React__default.createElement(Heading$1, {
     as: "h1",
     variant: "h3",
     weight: "700",
@@ -38321,13 +38328,13 @@ var headingBackgroundColor$1 = "".concat(WHITE);
 var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$2 = "".concat(GREY_CHATEAU);
-var focusStyles$1 = "outline: none;";
+var focusStyles = "outline: none;";
 var fallbackValues$x = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
   borderColor: borderColor$2,
-  focusStyles: focusStyles$1
+  focusStyles: focusStyles
 };
 
 function _templateObject$A() {
@@ -38671,7 +38678,8 @@ var ResetConfirmationForm = function ResetConfirmationForm() {
     url: "/login",
     text: "Back to Login",
     variant: "primary",
-    extraStyles: "width: 100%;"
+    extraStyles: "width: 100%;",
+    linkExtraStyles: "width: 100%;"
   })))));
 };
 
@@ -38791,7 +38799,8 @@ var ResetConfirmationForm$2 = function ResetConfirmationForm() {
     url: "/login",
     text: "Log in",
     variant: "primary",
-    extraStyles: "width: 100%;"
+    extraStyles: "width: 100%;",
+    linkExtraStyles: "width: 100%;"
   }))))));
 };
 
@@ -39113,7 +39122,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
   }, /*#__PURE__*/React__default.createElement(WelcomeImage, {
     src: welcomeImage
   }))), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0.875rem 1.5rem",
+    padding: isMobile ? "0.875rem 1rem" : "0.875rem 1.5rem",
     background: themeValues.headerBackgroundColor
   }, /*#__PURE__*/React__default.createElement(Heading$1, {
     variant: "h6",
@@ -39356,7 +39365,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
   }, /*#__PURE__*/React__default.createElement(Sidebar, {
     width: sidebarTargetWidth,
     childGap: sidebarContentGap,
-    onRight: sidebarOnRight,
+    sidebarOnRight: sidebarOnRight,
     contentMinWidth: mainContentMinWidth
   }, sidebarOnRight ? /*#__PURE__*/React__default.createElement(React.Fragment, null) : sidebarContent, mainContent, sidebarOnRight ? sidebarContent : /*#__PURE__*/React__default.createElement(React.Fragment, null))))), footer ? footer : /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
@@ -39418,7 +39427,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   }, /*#__PURE__*/React__default.createElement(Sidebar, {
     width: sidebarTargetWidth,
     childGap: sidebarContentGap,
-    onRight: sidebarOnRight,
+    sidebarOnRight: sidebarOnRight,
     contentMinWidth: mainContentMinWidth,
     key: "content-sidebar"
   }, sidebarOnRight ? /*#__PURE__*/React__default.createElement(React.Fragment, {

package/package.json

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

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

@@ -93,6 +93,7 @@ const ButtonWithAction = ({
     text-decoration: ${
       variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
     };
+    cursor: pointer;
   `;
   const activeStyles = `
     outline: none;

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

@@ -10,6 +10,7 @@ const ButtonWithLink = ({
   disabled = false,
   fileLink = false,
   extraStyles,
+  linkExtraStyles,
   newTab = false,
   ...otherProps
 }) => {
@@ -44,7 +45,7 @@ const ButtonWithLink = ({
       url={url}
       disabled={disabled}
       newTab={newTab}
-      extraStyles={`text-decoration: none; &:hover {
+      extraStyles={`${linkExtraStyles} text-decoration: none; &:hover {
         text-decoration: none; }`}
     >
       <ButtonWithAction {...otherProps} extraStyles={extraStyles} />

package/src/components/atoms/layouts/examples/sidebar-example/SidebarExample.js

@@ -3,7 +3,7 @@ import React from "react";
 import Sidebar from "../../Sidebar";
 
 const SidebarExample = ({ width, onRight, childGap, children }) => (
-  <Sidebar width={width} onRight={onRight} childGap={childGap}>
+  <Sidebar width={width} sidebarOnRight={onRight} childGap={childGap}>
     {children}
   </Sidebar>
 );

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

@@ -64,7 +64,7 @@ const CollapsibleSection = ({
       padding="0"
       tabIndex="0"
       onKeyDown={handleKeyDown}
-      hoverStyles={themeValues.focusStyles}
+      hoverStyles={`outline: none;`}
       animate={isOpen ? "open" : "closed"}
       positionTransition
     >
@@ -75,6 +75,7 @@ const CollapsibleSection = ({
           onClick={isMobile && supportsTouch ? noop : toggleSection}
           onTouchEnd={isMobile && supportsTouch ? toggleSection : noop}
           key="header"
+          hoverStyles={`cursor: pointer;`}
         >
           <Cluster justify="space-between" align="center">
             {customTitle ? (
@@ -93,7 +94,7 @@ const CollapsibleSection = ({
             )}
             <Motion
               variants={icon}
-              style={{ display: "flex", alignItems: "center" }}
+              extraStyles={`display: flex; align-items: center;`}
             >
               <ChevronIcon />
             </Motion>

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

@@ -1,11 +1,9 @@
 const titleColor = "#292A33";
 const headingBackgroundColor = "transparent";
 const bodyBackgroundColor = "transparent";
-const focusStyles = `outline: none;`;
 
 export const fallbackValues = {
   titleColor,
   headingBackgroundColor,
-  bodyBackgroundColor,
-  focusStyles
+  bodyBackgroundColor
 };

package/src/components/molecules/payment-details/PaymentDetails.js

@@ -18,7 +18,7 @@ const PaymentDetailsContent = ({
   total,
   themeValues
 }) => (
-  <Stack>
+  <Stack childGap="16px">
     {lineItemElems}
     <SolidDivider />
     <Box padding="0.5rem 0">
@@ -99,7 +99,7 @@ const PaymentDetails = ({
   ));
   const feeElems = fees.map(fee => (
     <Fragment key={fee.label}>
-      <Box padding="0.25rem 0" />
+      <Box padding="4px 0" />
       <LabeledAmount
         key={fee.label}
         variant={themeValues.labeledAmountSubtotal}
@@ -108,8 +108,10 @@ const PaymentDetails = ({
     </Fragment>
   ));
   const content = isCollapsible ? (
-    <Stack>
+    <Stack childGap="0">
+      <Box padding="4.5px" />
       <SolidDivider />
+      <Box padding="8px" />
       <PaymentDetailsContent
         {...{ lineItemElems, feeElems, subtotal, total, themeValues }}
       />
@@ -127,7 +129,9 @@ const PaymentDetails = ({
         <Heading variant="h5" weight="700" as="h1">
           {titleText}
         </Heading>
-        {displayCurrency(total)}
+        <Heading variant="h5" weight="700" as="h1">
+          {displayCurrency(total)}
+        </Heading>
       </Cluster>
     </Box>
   ) : (

package/src/components/molecules/reset-confirmation-form/ResetConfirmationForm.js

@@ -46,6 +46,7 @@ const ResetConfirmationForm = () => {
               text="Back to Login"
               variant="primary"
               extraStyles={`width: 100%;`}
+              linkExtraStyles={`width: 100%;`}
             />
           </Cluster>
         </Box>

package/src/components/molecules/reset-password-success/ResetPasswordSuccess.js

@@ -44,6 +44,7 @@ const ResetConfirmationForm = () => {
                 text="Log in"
                 variant="primary"
                 extraStyles={`width: 100%;`}
+                linkExtraStyles={`width: 100%;`}
               />
             </Cluster>
           </Box>

package/src/components/molecules/welcome-module/WelcomeModule.js

@@ -25,7 +25,7 @@ const WelcomeModule = ({ heading, isMobile, themeValues }) => {
           </Box>
         )}
         <Box
-          padding="0.875rem 1.5rem"
+          padding={isMobile ? "0.875rem 1rem" : "0.875rem 1.5rem"}
           background={themeValues.headerBackgroundColor}
         >
           <Heading

package/src/components/templates/sidebar-single-content/SidebarSingleContent.js

@@ -44,7 +44,7 @@ const SidebarSingleContent = ({
               <Sidebar
                 width={sidebarTargetWidth}
                 childGap={sidebarContentGap}
-                onRight={sidebarOnRight}
+                sidebarOnRight={sidebarOnRight}
                 contentMinWidth={mainContentMinWidth}
               >
                 {sidebarOnRight ? <Fragment /> : sidebarContent}

package/src/components/templates/sidebar-stack-content/SidebarStackContent.js

@@ -46,7 +46,7 @@ const SidebarStackContent = ({
               <Sidebar
                 width={sidebarTargetWidth}
                 childGap={sidebarContentGap}
-                onRight={sidebarOnRight}
+                sidebarOnRight={sidebarOnRight}
                 contentMinWidth={mainContentMinWidth}
                 key="content-sidebar"
               >

package/.tool-versions

@@ -1 +0,0 @@
-nodejs 10.15.3