@thecb/components 4.1.16-beta.0 → 4.1.16

package/dist/index.cjs.js

@@ -18374,7 +18374,7 @@ function _templateObject8() {
 }
 
 function _templateObject7() {
-  var data = _taggedTemplateLiteral(["\n  display: inline-block;\n  margin-right: 16px;\n  width: 24px;\n  height: 24px;\n  border-radius: 2px;\n  transition: all 150ms;\n\n  ", " {\n    visibility: ", ";\n  }\n\n  ", ";\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  border-radius: 2px;\n  transition: all 150ms;\n\n  ", " {\n    visibility: ", ";\n  }\n\n  ", ";\n"]);
 
   _templateObject7 = function _templateObject7() {
     return data;
@@ -19094,9 +19094,19 @@ var Dropdown = function Dropdown(_ref9) {
 
 var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$e);
 
-function _templateObject3$6() {
+function _templateObject4$3() {
   var data = _taggedTemplateLiteral([""]);
 
+  _templateObject4$3 = function _templateObject4() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject3$6() {
+  var data = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: 48px;\n  width: 100%;\n  padding: 0.75rem 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  font-family: Public Sans;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n"]);
+
   _templateObject3$6 = function _templateObject3() {
     return data;
   };
@@ -19105,7 +19115,7 @@ function _templateObject3$6() {
 }
 
 function _templateObject2$c() {
-  var data = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: 48px;\n  width: 100%;\n  padding: 0.75rem 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  font-family: Public Sans;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: ", ";\n  margin-bottom: 4px;\n  font-family: Public Sans;\n\n  &::first-letter {\n    text-transform: uppercase;\n  }\n"]);
 
   _templateObject2$c = function _templateObject2() {
     return data;
@@ -19124,18 +19134,23 @@ function _templateObject$o() {
   return data;
 }
 var SelectContainer = styled__default.div(_templateObject$o());
-var SelectField = styled__default.select(_templateObject2$c(), function (_ref) {
+var SelectLabel = styled__default.label(_templateObject2$c(), function (_ref) {
   var field = _ref.field,
       showErrors = _ref.showErrors;
+  return field.dirty && field.hasErrors || field.hasErrors && showErrors ? ERROR_COLOR : STORM_GREY;
+}, FONT_WEIGHT_REGULAR);
+var SelectField = styled__default.select(_templateObject3$6(), function (_ref2) {
+  var field = _ref2.field,
+      showErrors = _ref2.showErrors;
   return field.dirty && field.hasErrors || field.hasErrors && showErrors ? ERROR_COLOR : GHOST_GREY;
-}, FONT_WEIGHT_REGULAR, function (_ref2) {
-  var themeValues = _ref2.themeValues;
-  return themeValues.inputBackgroundColor && themeValues.inputBackgroundColor;
-}, function (_ref3) {
+}, FONT_WEIGHT_REGULAR, function (_ref3) {
   var themeValues = _ref3.themeValues;
+  return themeValues.inputBackgroundColor && themeValues.inputBackgroundColor;
+}, function (_ref4) {
+  var themeValues = _ref4.themeValues;
   return themeValues.color && themeValues.color;
 }, MATISSE_BLUE);
-var SelectOption = styled__default.option(_templateObject3$6());
+var SelectOption = styled__default.option(_templateObject4$3());
 
 var linkColor$1 = {
   "default": "".concat(MATISSE_BLUE),
@@ -19241,10 +19256,8 @@ var FormSelect = function FormSelect(_ref) {
     variant: "pS",
     color: themeValues.labelColor,
     weight: themeValues.fontWeight,
-    extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
-    id: labelTextWhenNoError.replace(/\s+/g, "-")
+    extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }"
   }, labelTextWhenNoError))), /*#__PURE__*/React__default.createElement(Dropdown$1, {
-    "aria-labelledby": labelTextWhenNoError.replace(/\s+/g, "-"),
     maxHeight: dropdownMaxHeight,
     placeholder: options[0] ? options[0].text : "",
     options: options,
@@ -19260,9 +19273,9 @@ var FormSelect = function FormSelect(_ref) {
     onClick: function onClick() {
       return setOpen(!open);
     }
-  }), /*#__PURE__*/React__default.createElement(Stack, {
-    direction: "row",
-    justify: "space-between"
+  }), /*#__PURE__*/React__default.createElement(SelectLabel, {
+    field: field,
+    showErrors: showErrors
   }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React__default.createElement(Text$1, {
     color: ERROR_COLOR,
     variant: "pXS",
@@ -20466,10 +20479,10 @@ var fallbackValues$h = {
   hoverFocusStyles: hoverFocusStyles$1
 };
 
-function _templateObject4$3() {
+function _templateObject4$4() {
   var data = _taggedTemplateLiteral(["\n      ", "\n    "]);
 
-  _templateObject4$3 = function _templateObject4() {
+  _templateObject4$4 = function _templateObject4() {
     return data;
   };
 
@@ -20550,7 +20563,7 @@ var FormattedInputField = styled__default(function (_ref7) {
   return themeValues.color && themeValues.color;
 }, MATISSE_BLUE, function (_ref12) {
   var extraStyles = _ref12.extraStyles;
-  return styled.css(_templateObject4$3(), extraStyles);
+  return styled.css(_templateObject4$4(), extraStyles);
 });
 
 var FormInput = function FormInput(_ref13) {
@@ -21305,10 +21318,10 @@ function _templateObject5$2() {
   return data;
 }
 
-function _templateObject4$4() {
+function _templateObject4$5() {
   var data = _taggedTemplateLiteral(["", " is not a valid length"]);
 
-  _templateObject4$4 = function _templateObject4() {
+  _templateObject4$5 = function _templateObject4() {
     return data;
   };
 
@@ -21384,7 +21397,7 @@ with interpolation.
 */
 
 
-var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$t(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2$h(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$9(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4$4(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15(), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16(), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
+var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$t(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2$h(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$9(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4$5(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15(), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16(), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
 // Neutral - has not been validated
 // Invalid - has been validated and has an error
 // Valid - has been validated and has no error
@@ -32347,10 +32360,10 @@ var fallbackValues$r = {
   leftLabelStyles: leftLabelStyles
 };
 
-function _templateObject4$5() {
+function _templateObject4$6() {
   var data = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  top: 3px;\n  left: 3px;\n  right: 3px;\n  bottom: 3px;\n  border-radius: 50%;\n  box-sizing: border-box;\n"]);
 
-  _templateObject4$5 = function _templateObject4() {
+  _templateObject4$6 = function _templateObject4() {
     return data;
   };
 
@@ -32404,7 +32417,7 @@ var VisibleSwitchComponent = styled__default.label(_templateObject2$i(), functio
   return isMobile ? "transform: scale(0.75)" : "";
 });
 var ToggleSwitchMiddleRingComponent = styled__default.div(_templateObject3$a());
-var ToggleSwitchInnerRingComponent = styled__default.div(_templateObject4$5());
+var ToggleSwitchInnerRingComponent = styled__default.div(_templateObject4$6());
 
 var ToggleSwitch = function ToggleSwitch(_ref6) {
   var _ref6$isOn = _ref6.isOn,
@@ -34777,10 +34790,10 @@ function _templateObject5$3() {
   return data;
 }
 
-function _templateObject4$6() {
+function _templateObject4$7() {
   var data = _taggedTemplateLiteral(["\n  color: ", ";\n  align-items: center;\n  font-size: 1rem;\n  padding-right: 1rem;\n  cursor: pointer;\n  display: ", ";\n"]);
 
-  _templateObject4$6 = function _templateObject4() {
+  _templateObject4$7 = function _templateObject4() {
     return data;
   };
 
@@ -34834,7 +34847,7 @@ var EditableTableListItem = styled__default.div(_templateObject2$k(), function (
   return isMobile ? "padding: 1rem 0.5rem" : "padding: 0 0.5rem";
 });
 var EditableListItemControls$1 = styled__default.div(_templateObject3$b());
-var EditableListAction = styled__default.div(_templateObject4$6(), MATISSE_BLUE, function (_ref6) {
+var EditableListAction = styled__default.div(_templateObject4$7(), MATISSE_BLUE, function (_ref6) {
   var hide = _ref6.hide;
   return hide ? "none" : "flex";
 });
@@ -40055,22 +40068,24 @@ var TermsAndConditions = function TermsAndConditions(_ref) {
       showTerms = _useState2[0],
       toggleShowTerms = _useState2[1];
 
-  return /*#__PURE__*/React__default.createElement(DisplayBox$1, null, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  return /*#__PURE__*/React__default.createElement(DisplayBox$1, null, /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "row"
+  }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "terms",
-    title: "Terms and Conditions",
     error: error,
     checked: isChecked,
     onChange: onCheck
-  }), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0 0 0 58px"
-  }, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Box, {
+  }), /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: "p",
+    fontWeight: FONT_WEIGHT_BOLD
+  }, "Terms and Conditions"), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, html), terms && /*#__PURE__*/React__default.createElement(TermsAndConditionsModal$1, {
     link: "Learn More",
     terms: terms,
     isOpen: showTerms,
     toggleOpen: toggleShowTerms
-  })))));
+  }))));
 };
 
 var Timeout = function Timeout(_ref) {

package/package.json

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

package/src/components/atoms/checkbox/Checkbox.js

@@ -44,7 +44,6 @@ const HiddenCheckbox = styled.input.attrs({ type: "checkbox" })`
 
 const StyledCheckbox = styled.div`
   display: inline-block;
-  margin-right: 16px;
   width: 24px;
   height: 24px;
   border-radius: 2px;

package/src/components/atoms/form-select/FormSelect.js

@@ -2,10 +2,10 @@ import React, { useState, useRef, useEffect } from "react";
 import Dropdown from "../dropdown";
 import Text from "../text";
 import { ERROR_COLOR } from "../../../constants/colors";
-import { SelectContainer } from "./FormSelect.styled";
+import { SelectContainer, SelectLabel } from "./FormSelect.styled";
 import { fallbackValues } from "./FormSelect.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import { Box, Cluster, Stack } from "../layouts";
+import { Box, Cluster } from "../layouts";
 
 const FormSelect = ({
   fieldActions,
@@ -49,14 +49,12 @@ const FormSelect = ({
               &::first-letter {
                 text-transform: uppercase;
               }`}
-            id={labelTextWhenNoError.replace(/\s+/g, "-")}
           >
             {labelTextWhenNoError}
           </Text>
         </Cluster>
       </Box>
       <Dropdown
-        aria-labelledby={labelTextWhenNoError.replace(/\s+/g, "-")}
         maxHeight={dropdownMaxHeight}
         placeholder={options[0] ? options[0].text : ""}
         options={options}
@@ -71,7 +69,7 @@ const FormSelect = ({
         }
         onClick={() => setOpen(!open)}
       />
-      <Stack direction="row" justify="space-between">
+      <SelectLabel field={field} showErrors={showErrors}>
         {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (
           <Text
             color={ERROR_COLOR}
@@ -88,7 +86,7 @@ const FormSelect = ({
         ) : (
           <Text extraStyles={`height: ${themeValues.lineHeight};`} />
         )}
-      </Stack>
+      </SelectLabel>
     </SelectContainer>
   );
 };

package/src/components/atoms/form-select/FormSelect.styled.js

@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import {
+  STORM_GREY,
   GHOST_GREY,
   ERROR_COLOR,
   MATISSE_BLUE
@@ -17,6 +18,22 @@ export const SelectContainer = styled.div`
   }
 `;
 
+export const SelectLabel = styled.label`
+  color: ${({ field, showErrors }) =>
+    (field.dirty && field.hasErrors) || (field.hasErrors && showErrors)
+      ? ERROR_COLOR
+      : STORM_GREY};
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: ${FONT_WEIGHT_REGULAR};
+  margin-bottom: 4px;
+  font-family: Public Sans;
+
+  &::first-letter {
+    text-transform: uppercase;
+  }
+`;
+
 export const SelectField = styled.select`
   border: 1px solid
     ${({ field, showErrors }) =>

package/src/components/molecules/terms-and-conditions/TermsAndConditions.js

@@ -1,7 +1,9 @@
 import React, { useState } from "react";
 import Checkbox from "../../atoms/checkbox";
+import Text from "../../atoms/text";
 import { Box, Stack } from "../../atoms/layouts";
 import DisplayBox from "../../atoms/display-box";
+import { FONT_WEIGHT_BOLD } from "../../../constants/style_constants";
 import TermsAndConditionsModal from "../../molecules/terms-and-conditions-modal";
 
 const TermsAndConditions = ({
@@ -14,27 +16,27 @@ const TermsAndConditions = ({
   const [showTerms, toggleShowTerms] = useState(false);
   return (
     <DisplayBox>
-      <Stack>
+      <Stack direction="row">
         <Checkbox
           name="terms"
-          title="Terms and Conditions"
           error={error}
           checked={isChecked}
           onChange={onCheck}
         />
-        <Box padding="0 0 0 58px">
-          <Stack>
-            <Box padding="0">{html}</Box>
-            {terms && (
-              <TermsAndConditionsModal
-                link="Learn More"
-                terms={terms}
-                isOpen={showTerms}
-                toggleOpen={toggleShowTerms}
-              />
-            )}
-          </Stack>
-        </Box>
+        <Stack>
+          <Text variant="p" fontWeight={FONT_WEIGHT_BOLD}>
+            Terms and Conditions
+          </Text>
+          <Box padding="0">{html}</Box>
+          {terms && (
+            <TermsAndConditionsModal
+              link="Learn More"
+              terms={terms}
+              isOpen={showTerms}
+              toggleOpen={toggleShowTerms}
+            />
+          )}
+        </Stack>
       </Stack>
     </DisplayBox>
   );