@thecb/components 3.3.6 → 3.3.7

package/dist/index.cjs.js

@@ -4793,6 +4793,12 @@ export const generateImgSrc = (
 };
 */
 
+var themeUtils = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  createThemeValues: createThemeValues,
+  themeComponent: themeComponent
+});
+
 /* These are constants used by nav frontend components */
 var HEADER_HEIGHT = "104px";
 var FOOTER_HEIGHT = "100px";
@@ -6774,7 +6780,7 @@ var CoverOuterContainer = styled__default.div(_templateObject$7(), function (_re
 
 var Cover = function Cover(_ref) {
   var _ref$minHeight = _ref.minHeight,
-      minHeight = _ref$minHeight === void 0 ? "100vh" : _ref$minHeight,
+      minHeight = _ref$minHeight === void 0 ? "100%" : _ref$minHeight,
       childGap = _ref.childGap,
       padding = _ref.padding,
       fillCenter = _ref.fillCenter,
@@ -37460,9 +37466,9 @@ var CenterSingle = function CenterSingle(_ref) {
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    background: themeValues.pageBackground
+    background: themeValues.pageBackground,
+    extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React__default.createElement(Cover, {
-    minHeight: "100vh",
     centerOverride: isMobile && !centeredMobileContent
   }, header ? header : /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
@@ -37505,10 +37511,9 @@ var CenterStack = function CenterStack(_ref) {
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    background: themeValues.pageBackground
-  }, /*#__PURE__*/React__default.createElement(Cover, {
-    minHeight: "100vh"
-  }, header ? header : /*#__PURE__*/React__default.createElement(Box, {
+    background: themeValues.pageBackground,
+    extraStyles: "flex-grow: 1;"
+  }, /*#__PURE__*/React__default.createElement(Cover, null, header ? header : /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -37546,9 +37551,9 @@ var CenterSingle$2 = function CenterSingle(_ref) {
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    background: themeValues.pageBackground
+    background: themeValues.pageBackground,
+    extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React__default.createElement(Cover, {
-    minHeight: "100vh",
     childGap: "0",
     fillCenter: true
   }, header ? header : /*#__PURE__*/React__default.createElement(Box, {
@@ -37597,9 +37602,9 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    background: themeValues.pageBackground
+    background: themeValues.pageBackground,
+    extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React__default.createElement(Cover, {
-    minHeight: "100vh",
     centerOverride: !sidebarVerticalCenter
   }, header ? header : /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
@@ -37654,9 +37659,9 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
     padding: "0",
     minWidth: "100%",
     background: themeValues.pageBackground,
-    key: "page-bg"
+    key: "page-bg",
+    extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React__default.createElement(Cover, {
-    minHeight: "100vh",
     centerOverride: !sidebarVerticalCenter,
     key: "page-cover"
   }, header ? header : /*#__PURE__*/React__default.createElement(Box, {
@@ -37707,7 +37712,8 @@ var index$4 = /*#__PURE__*/Object.freeze({
 var index$5 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   formats: formats,
-  general: general
+  general: general,
+  theme: themeUtils
 });
 
 exports.AccountNumberImage = AccountNumberImage;

package/package.json

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

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

@@ -23,7 +23,7 @@ import { CoverOuterContainer } from "./Cover.styled";
 */
 
 const Cover = ({
-  minHeight = "100vh",
+  minHeight = "100%",
   childGap,
   padding,
   fillCenter,

package/src/components/templates/center-single/CenterSingle.js

@@ -20,11 +20,13 @@ const CenterSingle = ({
   const { isMobile } = themeContext;
 
   return (
-    <Box padding="0" minWidth="100%" background={themeValues.pageBackground}>
-      <Cover
-        minHeight="100vh"
-        centerOverride={isMobile && !centeredMobileContent}
-      >
+    <Box
+      padding="0"
+      minWidth="100%"
+      background={themeValues.pageBackground}
+      extraStyles="flex-grow: 1;"
+    >
+      <Cover centerOverride={isMobile && !centeredMobileContent}>
         {header ? header : <Box padding="0" />}
         <Box
           padding="0"

package/src/components/templates/center-stack/CenterStack.js

@@ -20,8 +20,13 @@ const CenterStack = ({
   const { isMobile } = themeContext;
 
   return (
-    <Box padding="0" minWidth="100%" background={themeValues.pageBackground}>
-      <Cover minHeight="100vh">
+    <Box
+      padding="0"
+      minWidth="100%"
+      background={themeValues.pageBackground}
+      extraStyles="flex-grow: 1;"
+    >
+      <Cover>
         {header ? header : <Box padding="0" />}
         <Box padding="0" minWidth="100%" role="main">
           {subHeader && !(isMobile && hideMobileSubHeader) ? (

package/src/components/templates/default-page-template/DefaultPageTemplate.js

@@ -19,8 +19,13 @@ const CenterSingle = ({
   const { isMobile } = themeContext;
 
   return (
-    <Box padding="0" minWidth="100%" background={themeValues.pageBackground}>
-      <Cover minHeight="100vh" childGap="0" fillCenter>
+    <Box
+      padding="0"
+      minWidth="100%"
+      background={themeValues.pageBackground}
+      extraStyles="flex-grow: 1;"
+    >
+      <Cover childGap="0" fillCenter>
         {header ? header : <Box padding="0" />}
         <Box
           padding="0"

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

@@ -25,8 +25,13 @@ const SidebarSingleContent = ({
   const { isMobile } = themeContext;
 
   return (
-    <Box padding="0" minWidth="100%" background={themeValues.pageBackground}>
-      <Cover minHeight="100vh" centerOverride={!sidebarVerticalCenter}>
+    <Box
+      padding="0"
+      minWidth="100%"
+      background={themeValues.pageBackground}
+      extraStyles="flex-grow: 1;"
+    >
+      <Cover centerOverride={!sidebarVerticalCenter}>
         {header ? header : <Box padding="0" />}
         <Box padding="0" minWidth="100%" role="main">
           {subHeader && !(isMobile && hideMobileSubHeader) ? (

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

@@ -31,12 +31,9 @@ const SidebarStackContent = ({
       minWidth="100%"
       background={themeValues.pageBackground}
       key="page-bg"
+      extraStyles="flex-grow: 1;"
     >
-      <Cover
-        minHeight="100vh"
-        centerOverride={!sidebarVerticalCenter}
-        key="page-cover"
-      >
+      <Cover centerOverride={!sidebarVerticalCenter} key="page-cover">
         {header ? header : <Box padding="0" key="header-box" />}
         <Box padding="0" minWidth="100%" key="content-box" role="main">
           {subHeader && !(isMobile && hideMobileSubHeader) ? (

package/src/util/index.js

@@ -1,4 +1,5 @@
 import * as formats from "./formats";
 import * as general from "./general";
+import * as theme from "./themeUtils";
 
-export { formats, general };
+export { formats, general, theme };