@thecb/components 4.2.7-beta.3 → 4.2.7-beta.6

package/dist/index.cjs.js

@@ -6898,7 +6898,7 @@ function _templateObject3$2() {
 }
 
 function _templateObject2$4() {
-  var data = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  display: flex;\n  flex-wrap: wrap;\n  overflow: hidden;\n  padding: ", ";\n  margin: ", ";\n\n  > * {\n    flex-grow: 1;\n    ", ";\n    ", "\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"]);
+  var data = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  display: flex;\n  flex-wrap: wrap;\n  overflow: hidden;\n  padding: ", ";\n  margin: ", ";\n  ", "\n\n  > * {\n    flex-grow: 1;\n    ", ";\n    ", "\n    ", "\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"]);
 
   _templateObject2$4 = function _templateObject2() {
     return data;
@@ -6924,22 +6924,28 @@ var SwitcherInnerContainer = styled__default.div(_templateObject2$4(), function
   var childGap = _ref2.childGap;
   return "calc((".concat(childGap, " / 2) * -1)");
 }, function (_ref3) {
-  var maxChildrenOnly = _ref3.maxChildrenOnly,
-      breakpoint = _ref3.breakpoint,
-      childGap = _ref3.childGap;
-  return !maxChildrenOnly ? "flex-basis: calc((".concat(breakpoint, " - (100% - ").concat(childGap, ")) * 999);") : "";
+  var constrainMobile = _ref3.constrainMobile;
+  return constrainMobile && "max-width: 100%; margin-left: 0; margin-right: 0;";
 }, function (_ref4) {
-  var childGap = _ref4.childGap;
-  return "margin: calc(".concat(childGap, " / 2);");
+  var maxChildrenOnly = _ref4.maxChildrenOnly,
+      breakpoint = _ref4.breakpoint,
+      childGap = _ref4.childGap;
+  return !maxChildrenOnly ? "flex-basis: calc((".concat(breakpoint, " - (100% - ").concat(childGap, ")) * 999);") : "";
 }, function (_ref5) {
-  var largeChild = _ref5.largeChild,
-      largeChildSize = _ref5.largeChildSize;
-  return largeChild && largeChildSize ? "> :nth-child(".concat(largeChild, ") {\n      flex-grow: ").concat(largeChildSize, ";\n    }") : "";
+  var childGap = _ref5.childGap;
+  return "margin: calc(".concat(childGap, " / 2);");
 }, function (_ref6) {
-  var maxChildren = _ref6.maxChildren;
-  return maxChildren ? "> :nth-last-child(".concat(maxChildren + 1, "), > :nth-last-child(").concat(maxChildren + 1, ") ~ * {\n      flex-basis: 100%;\n    }") : "";
+  var constrainMobile = _ref6.constrainMobile;
+  return constrainMobile && "margin-left: 0; margin-right: 0;";
 }, function (_ref7) {
-  var extraStyles = _ref7.extraStyles;
+  var largeChild = _ref7.largeChild,
+      largeChildSize = _ref7.largeChildSize;
+  return largeChild && largeChildSize ? "> :nth-child(".concat(largeChild, ") {\n      flex-grow: ").concat(largeChildSize, ";\n    }") : "";
+}, function (_ref8) {
+  var maxChildren = _ref8.maxChildren;
+  return maxChildren ? "> :nth-last-child(".concat(maxChildren + 1, "), > :nth-last-child(").concat(maxChildren + 1, ") ~ * {\n      flex-basis: 100%;\n    }") : "";
+}, function (_ref9) {
+  var extraStyles = _ref9.extraStyles;
   return styled.css(_templateObject3$2(), extraStyles);
 });
 
@@ -6968,6 +6974,11 @@ var SwitcherInnerContainer = styled__default.div(_templateObject2$4(), function
   products/services should share the same width no matter the orientation, otherwise
   one or more cards could be perceived as highlighted or featured in some way. Or
   a set of numbered steps in, for example, a list of items to complete or tasks to do."
+
+  New: Set the "constrainMobile" prop to true in order to prevent switcher content from
+  overflowing the mobile viewport:
+
+    <Switcher constrainMobile={isMobile} />
 */
 
 var Switcher = function Switcher(_ref) {
@@ -6984,7 +6995,9 @@ var Switcher = function Switcher(_ref) {
       padding = _ref$padding === void 0 ? "0" : _ref$padding,
       children = _ref.children,
       extraStyles = _ref.extraStyles,
-      rest = _objectWithoutProperties(_ref, ["breakpoint", "childGap", "largeChild", "largeChildSize", "maxChildren", "maxChildrenOnly", "padding", "children", "extraStyles"]);
+      _ref$constrainMobile = _ref.constrainMobile,
+      constrainMobile = _ref$constrainMobile === void 0 ? false : _ref$constrainMobile,
+      rest = _objectWithoutProperties(_ref, ["breakpoint", "childGap", "largeChild", "largeChildSize", "maxChildren", "maxChildrenOnly", "padding", "children", "extraStyles", "constrainMobile"]);
 
   return /*#__PURE__*/React__default.createElement(SwitcherOuterContainer, null, /*#__PURE__*/React__default.createElement(SwitcherInnerContainer, _extends({
     breakpoint: breakpoint,
@@ -6994,7 +7007,8 @@ var Switcher = function Switcher(_ref) {
     maxChildren: maxChildren,
     maxChildrenOnly: maxChildrenOnly,
     padding: padding,
-    extraStyles: extraStyles
+    extraStyles: extraStyles,
+    constrainMobile: constrainMobile
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement(React.Fragment, null))));
 };
 
@@ -12692,7 +12706,7 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
   var isMobile = themeContext.isMobile;
   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-color: #6D717E;\n    border-color: #6D717E;\n    color: #FFFFFF;\n    &:focus {\n      box-shadow: 0 0 10px #6D717E;\n      outline: none;\n    }\n  ";
+  var disabledStyles = "\n    background-color: #6D717E;\n    border-color: #6D717E;\n    color: #FFFFFF;\n    cursor: default;\n    &:focus {\n      box-shadow: 0 0 10px #6D717E;\n      outline: none;\n    }\n  ";
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     variant: variant,
     padding: themeValues.padding,
@@ -34757,7 +34771,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     initial: initiallyOpen ? "open" : "closed",
     exit: "closed",
     variants: wrapper,
-    extraStyles: "transform-origin: 100% 0;"
+    extraStyles: "transform-origin: 100% 0; overflow-y: hidden;"
   }, children))));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.2.7-beta.3",
+  "version": "4.2.7-beta.6",
   "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

@@ -105,6 +105,7 @@ const ButtonWithAction = ({
     background-color: #6D717E;
     border-color: #6D717E;
     color: #FFFFFF;
+    cursor: default;
     &:focus {
       box-shadow: 0 0 10px #6D717E;
       outline: none;

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

@@ -30,6 +30,11 @@ import {
   products/services should share the same width no matter the orientation, otherwise
   one or more cards could be perceived as highlighted or featured in some way. Or
   a set of numbered steps in, for example, a list of items to complete or tasks to do."
+
+  New: Set the "constrainMobile" prop to true in order to prevent switcher content from
+  overflowing the mobile viewport:
+
+    <Switcher constrainMobile={isMobile} />
 */
 
 const Switcher = ({
@@ -42,6 +47,7 @@ const Switcher = ({
   padding = "0",
   children,
   extraStyles,
+  constrainMobile = false,
   ...rest
 }) => (
   <SwitcherOuterContainer>
@@ -54,6 +60,7 @@ const Switcher = ({
       maxChildrenOnly={maxChildrenOnly}
       padding={padding}
       extraStyles={extraStyles}
+      constrainMobile={constrainMobile}
       {...rest}
     >
       {safeChildren(children, <Fragment />)}

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

@@ -12,6 +12,8 @@ export const SwitcherInnerContainer = styled.div`
   overflow: hidden;
   padding: ${({ padding }) => padding};
   margin: ${({ childGap }) => `calc((${childGap} / 2) * -1)`};
+  ${({ constrainMobile }) =>
+    constrainMobile && `max-width: 100%; margin-left: 0; margin-right: 0;`}
 
   > * {
     flex-grow: 1;
@@ -20,6 +22,8 @@ export const SwitcherInnerContainer = styled.div`
         ? `flex-basis: calc((${breakpoint} - (100% - ${childGap})) * 999);`
         : ``};
     ${({ childGap }) => `margin: calc(${childGap} / 2);`}
+    ${({ constrainMobile }) =>
+      constrainMobile && `margin-left: 0; margin-right: 0;`}
   }
 
   ${({ largeChild, largeChildSize }) =>

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

@@ -113,7 +113,7 @@ const CollapsibleSection = ({
               initial={initiallyOpen ? "open" : "closed"}
               exit="closed"
               variants={wrapper}
-              extraStyles={`transform-origin: 100% 0;`}
+              extraStyles={`transform-origin: 100% 0; overflow-y: hidden;`}
             >
               {children}
             </Motion>