@thecb/components 3.5.0 → 3.5.3

package/dist/index.cjs.js

@@ -13633,8 +13633,8 @@ var IconAdd = function IconAdd() {
 var TimeoutImage = function TimeoutImage() {
   return /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    width: "458",
-    height: "308",
+    width: "100%",
+    height: "100%",
     viewBox: "0 0 458 308"
   }, /*#__PURE__*/React__default.createElement("g", {
     fill: "none",
@@ -17008,15 +17008,14 @@ var Dropdown = function Dropdown(_ref7) {
   }, /*#__PURE__*/React__default.createElement(Box, {
     as: "button",
     background: isOpen ? themeValues.hoverColor : WHITE,
-    minHeight: "52px",
     width: "100%",
-    padding: "16px",
+    padding: "12px",
     hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
     focusStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
     borderSize: "1px",
     borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : GREY_CHATEAU,
     borderRadius: "2px",
-    extraStyles: "tabindex: 0;",
+    extraStyles: "tabindex: 0; height: 48px;",
     dataQa: placeholder
   }, /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
@@ -19072,7 +19071,7 @@ var Loading = function Loading() {
   return /*#__PURE__*/React__default.createElement(Box, {
     key: "spinner-container"
   }, /*#__PURE__*/React__default.createElement(Cover, {
-    minHeight: "100%",
+    minHeight: "100vh",
     singleChild: true
   }, /*#__PURE__*/React__default.createElement(Center, {
     intrinsic: true
@@ -37811,16 +37810,20 @@ var TermsAndConditions = function TermsAndConditions(_ref) {
 
 var Timeout = function Timeout(_ref) {
   var onLogout = _ref.onLogout;
+
+  var _useContext = React.useContext(styled.ThemeContext),
+      isMobile = _useContext.isMobile;
+
   return /*#__PURE__*/React__default.createElement(Cover, null, /*#__PURE__*/React__default.createElement(Center, {
     intrinsic: true
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
-    maxWidth: "500px"
+    maxWidth: isMobile ? "100%" : "500px"
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "32px",
     justify: "center"
-  }, /*#__PURE__*/React__default.createElement(Center, {
-    intrinsic: true
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: isMobile ? "1rem" : "0"
   }, /*#__PURE__*/React__default.createElement(TimeoutImage, null)), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, /*#__PURE__*/React__default.createElement(Heading$1, {
@@ -37840,6 +37843,8 @@ var Timeout = function Timeout(_ref) {
   })))))));
 };
 
+var Timeout$1 = withWindowSize(Timeout);
+
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
       workflowName = _ref$workflowName === void 0 ? "Test Workflow" : _ref$workflowName,
@@ -38261,7 +38266,7 @@ exports.TableListItem = TableListItem;
 exports.TermsAndConditions = TermsAndConditions;
 exports.TermsAndConditionsModal = TermsAndConditionsModal$1;
 exports.Text = Text$1;
-exports.Timeout = Timeout;
+exports.Timeout = Timeout$1;
 exports.TimeoutImage = TimeoutImage;
 exports.ToggleSwitch = ToggleSwitch$1;
 exports.VerifiedEmailIcon = VerifiedEmailIcon$1;

package/package.json

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

package/src/components/atoms/dropdown/Dropdown.js

@@ -206,9 +206,8 @@ const Dropdown = ({
       <Box
         as="button"
         background={isOpen ? themeValues.hoverColor : WHITE}
-        minHeight="52px"
         width="100%"
-        padding="16px"
+        padding="12px"
         hoverStyles={`background-color: ${themeValues.hoverColor};`}
         focusStyles={`background-color: ${themeValues.hoverColor};`}
         borderSize="1px"
@@ -220,7 +219,7 @@ const Dropdown = ({
             : GREY_CHATEAU
         }
         borderRadius="2px"
-        extraStyles={`tabindex: 0;`}
+        extraStyles={`tabindex: 0; height: 48px;`}
         dataQa={placeholder}
       >
         <Stack direction="row" bottomItem={2}>

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

@@ -4,8 +4,8 @@ const TimeoutImage = () => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="458"
-      height="308"
+      width="100%"
+      height="100%"
       viewBox="0 0 458 308"
     >
       <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">

package/src/components/atoms/loading/Loading.js

@@ -4,7 +4,7 @@ import { Box, Cover, Center } from "../layouts";
 
 const Loading = () => (
   <Box key="spinner-container">
-    <Cover minHeight="100%" singleChild>
+    <Cover minHeight="100vh" singleChild>
       <Center intrinsic>
         <Box>
           <Spinner size="100" />

package/src/components/molecules/timeout/Timeout.js

@@ -1,41 +1,46 @@
-import React from "react";
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
 import { Box, Stack, Center, Cover } from "../../atoms/layouts";
 import { TimeoutImage } from "../../atoms/icons";
 import ButtonWithAction from "../../atoms/button-with-action";
 import Heading from "../../atoms/heading";
 import { FONT_WEIGHT_BOLD } from "../../../constants/style_constants";
 import Paragraph from "../../atoms/paragraph";
+import withWindowSize from "../../withWindowSize";
 
-const Timeout = ({ onLogout }) => (
-  <Cover>
-    <Center intrinsic>
-      <Box padding="0" maxWidth="500px">
-        <Stack childGap="32px" justify="center">
-          <Center intrinsic>
-            <TimeoutImage />
-          </Center>
-          <Box padding="0">
-            <Heading textAlign="center" weight={FONT_WEIGHT_BOLD}>
-              Request Timed Out
-            </Heading>
-            <Paragraph variant="pL" extraStyles={`text-align: center;`}>
-              That was taking longer than we expected and your request timed
-              out. Please log out, log back in, and then try again.
-            </Paragraph>
-          </Box>
-          <Center intrinsic>
+const Timeout = ({ onLogout }) => {
+  const { isMobile } = useContext(ThemeContext);
+  return (
+    <Cover>
+      <Center intrinsic>
+        <Box padding="0" maxWidth={isMobile ? "100%" : "500px"}>
+          <Stack childGap="32px" justify="center">
+            <Box padding={isMobile ? "1rem" : "0"}>
+              <TimeoutImage />
+            </Box>
             <Box padding="0">
-              <ButtonWithAction
-                variant="primary"
-                text="Log out"
-                action={onLogout}
-              />
+              <Heading textAlign="center" weight={FONT_WEIGHT_BOLD}>
+                Request Timed Out
+              </Heading>
+              <Paragraph variant="pL" extraStyles={`text-align: center;`}>
+                That was taking longer than we expected and your request timed
+                out. Please log out, log back in, and then try again.
+              </Paragraph>
             </Box>
-          </Center>
-        </Stack>
-      </Box>
-    </Center>
-  </Cover>
-);
+            <Center intrinsic>
+              <Box padding="0">
+                <ButtonWithAction
+                  variant="primary"
+                  text="Log out"
+                  action={onLogout}
+                />
+              </Box>
+            </Center>
+          </Stack>
+        </Box>
+      </Center>
+    </Cover>
+  );
+};
 
-export default Timeout;
+export default withWindowSize(Timeout);