@thecb/components 4.1.25 → 4.1.26

package/dist/index.cjs.js

@@ -20484,6 +20484,9 @@ var hoverFocusStyles$1 = {
   "default": "color: #0E506D; outline: none; text-decoration: underline;  ",
   disabled: "color: #6E727E;"
 };
+var formFooterPanel = {
+  "default": "".concat(INFO_BLUE)
+};
 var fallbackValues$h = {
   linkColor: linkColor$2,
   formBackgroundColor: formBackgroundColor$1,
@@ -20495,7 +20498,8 @@ var fallbackValues$h = {
   fontSize: fontSize$6,
   errorFontSize: errorFontSize$1,
   fontWeight: fontWeight$3,
-  hoverFocusStyles: hoverFocusStyles$1
+  hoverFocusStyles: hoverFocusStyles$1,
+  formFooterPanel: formFooterPanel
 };
 
 function _templateObject4$3() {
@@ -20765,6 +20769,30 @@ var FormContainer = function FormContainer(_ref) {
 
 var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$h, "default");
 
+var FormFooterPanel = function FormFooterPanel(_ref) {
+  var themeValues = _ref.themeValues,
+      link = _ref.link,
+      linkText = _ref.linkText;
+
+  var _useContext = React.useContext(styled.ThemeContext),
+      isMobile = _useContext.isMobile;
+
+  return /*#__PURE__*/React__default.createElement(Box, {
+    background: themeValues.formFooterPanel,
+    minWidth: "100%",
+    padding: isMobile ? "1.5rem" : "2rem"
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "center",
+    align: "center"
+  }, /*#__PURE__*/React__default.createElement(ButtonWithLink, {
+    url: link,
+    variant: "smallGhost",
+    text: linkText
+  })));
+};
+
+var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$h, "default");
+
 var fontSize$7 = {
   "default": "1rem",
   radio: "1.0625rem"
@@ -40598,6 +40626,7 @@ exports.FailedIcon = FailedIcon;
 exports.ForgotPasswordForm = ForgotPasswordForm;
 exports.ForgotPasswordIcon = ForgotPasswordIcon$1;
 exports.FormContainer = FormContainer$1;
+exports.FormFooterPanel = FormFooterPanel$1;
 exports.FormInput = FormInput$1;
 exports.FormInputColumn = FormInputColumn;
 exports.FormInputRow = FormInputRow;

package/package.json

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

package/src/components/atoms/form-layouts/FormFooterPanel.js

@@ -0,0 +1,29 @@
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
+import { fallbackValues } from "./FormLayouts.theme.js";
+import { themeComponent } from "../../../util/themeUtils";
+import { Box, Cluster } from "../layouts";
+import ButtonWithLink from "../button-with-link";
+import withWindowSize from "../../withWindowSize";
+
+const FormFooterPanel = ({ themeValues, link, linkText }) => {
+  const { isMobile } = useContext(ThemeContext);
+  return (
+    <Box
+      background={themeValues.formFooterPanel}
+      minWidth="100%"
+      padding={isMobile ? "1.5rem" : "2rem"}
+    >
+      <Cluster justify="center" align="center">
+        <ButtonWithLink url={link} variant="smallGhost" text={linkText} />
+      </Cluster>
+    </Box>
+  );
+};
+
+export default themeComponent(
+  withWindowSize(FormFooterPanel),
+  "FormFooterPanel",
+  fallbackValues,
+  "default"
+);

package/src/components/atoms/form-layouts/FormLayouts.theme.js

@@ -6,7 +6,8 @@ import {
   MINESHAFT_GREY,
   DUSTY_GREY,
   GREY_CHATEAU,
-  ATHENS_GREY
+  ATHENS_GREY,
+  INFO_BLUE
 } from "../../../constants/colors";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 
@@ -36,6 +37,9 @@ const hoverFocusStyles = {
   default: `color: #0E506D; outline: none; text-decoration: underline;  `,
   disabled: `color: #6E727E;`
 };
+const formFooterPanel = {
+  default: `${INFO_BLUE}`
+};
 
 export const fallbackValues = {
   linkColor,
@@ -48,5 +52,6 @@ export const fallbackValues = {
   fontSize,
   errorFontSize,
   fontWeight,
-  hoverFocusStyles
+  hoverFocusStyles,
+  formFooterPanel
 };

package/src/components/atoms/form-layouts/index.js

@@ -2,5 +2,12 @@ import FormInput from "./FormInput";
 import FormInputRow from "./FormInputRow";
 import FormInputColumn from "./FormInputColumn";
 import FormContainer from "./FormContainer";
+import FormFooterPanel from "./FormFooterPanel";
 
-export { FormInput, FormInputRow, FormInputColumn, FormContainer };
+export {
+  FormInput,
+  FormInputRow,
+  FormInputColumn,
+  FormContainer,
+  FormFooterPanel
+};