@thecb/components 4.1.17 → 4.1.18-beta.0

package/dist/index.cjs.js

@@ -18408,7 +18408,7 @@ function _templateObject8() {
 }
 
 function _templateObject7() {
-  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"]);
+  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"]);
 
   _templateObject7 = function _templateObject7() {
     return data;
@@ -19128,18 +19128,8 @@ var Dropdown = function Dropdown(_ref9) {
 
 var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$e);
 
-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"]);
+  var data = _taggedTemplateLiteral([""]);
 
   _templateObject3$6 = function _templateObject3() {
     return data;
@@ -19149,7 +19139,7 @@ function _templateObject3$6() {
 }
 
 function _templateObject2$c() {
-  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"]);
+  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"]);
 
   _templateObject2$c = function _templateObject2() {
     return data;
@@ -19168,23 +19158,18 @@ function _templateObject$o() {
   return data;
 }
 var SelectContainer = styled__default.div(_templateObject$o());
-var SelectLabel = styled__default.label(_templateObject2$c(), function (_ref) {
+var SelectField = styled__default.select(_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 (_ref3) {
-  var themeValues = _ref3.themeValues;
+}, FONT_WEIGHT_REGULAR, function (_ref2) {
+  var themeValues = _ref2.themeValues;
   return themeValues.inputBackgroundColor && themeValues.inputBackgroundColor;
-}, function (_ref4) {
-  var themeValues = _ref4.themeValues;
+}, function (_ref3) {
+  var themeValues = _ref3.themeValues;
   return themeValues.color && themeValues.color;
 }, MATISSE_BLUE);
-var SelectOption = styled__default.option(_templateObject4$3());
+var SelectOption = styled__default.option(_templateObject3$6());
 
 var linkColor$1 = {
   "default": "".concat(MATISSE_BLUE),
@@ -19290,8 +19275,10 @@ 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              }"
+    extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
+    id: labelTextWhenNoError.replace(/\s+/g, "-")
   }, labelTextWhenNoError))), /*#__PURE__*/React__default.createElement(Dropdown$1, {
+    "aria-labelledby": labelTextWhenNoError.replace(/\s+/g, "-"),
     maxHeight: dropdownMaxHeight,
     placeholder: options[0] ? options[0].text : "",
     options: options,
@@ -19307,9 +19294,9 @@ var FormSelect = function FormSelect(_ref) {
     onClick: function onClick() {
       return setOpen(!open);
     }
-  }), /*#__PURE__*/React__default.createElement(SelectLabel, {
-    field: field,
-    showErrors: showErrors
+  }), /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "row",
+    justify: "space-between"
   }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React__default.createElement(Text$1, {
     color: ERROR_COLOR,
     variant: "pXS",
@@ -20513,10 +20500,10 @@ var fallbackValues$h = {
   hoverFocusStyles: hoverFocusStyles$1
 };
 
-function _templateObject4$4() {
+function _templateObject4$3() {
   var data = _taggedTemplateLiteral(["\n      ", "\n    "]);
 
-  _templateObject4$4 = function _templateObject4() {
+  _templateObject4$3 = function _templateObject4() {
     return data;
   };
 
@@ -20597,7 +20584,7 @@ var FormattedInputField = styled__default(function (_ref7) {
   return themeValues.color && themeValues.color;
 }, MATISSE_BLUE, function (_ref12) {
   var extraStyles = _ref12.extraStyles;
-  return styled.css(_templateObject4$4(), extraStyles);
+  return styled.css(_templateObject4$3(), extraStyles);
 });
 
 var FormInput = function FormInput(_ref13) {
@@ -21352,10 +21339,10 @@ function _templateObject5$2() {
   return data;
 }
 
-function _templateObject4$5() {
+function _templateObject4$4() {
   var data = _taggedTemplateLiteral(["", " is not a valid length"]);
 
-  _templateObject4$5 = function _templateObject4() {
+  _templateObject4$4 = function _templateObject4() {
     return data;
   };
 
@@ -21431,7 +21418,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$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
+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
 // Neutral - has not been validated
 // Invalid - has been validated and has an error
 // Valid - has been validated and has no error
@@ -32394,10 +32381,10 @@ var fallbackValues$r = {
   leftLabelStyles: leftLabelStyles
 };
 
-function _templateObject4$6() {
+function _templateObject4$5() {
   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$6 = function _templateObject4() {
+  _templateObject4$5 = function _templateObject4() {
     return data;
   };
 
@@ -32451,7 +32438,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$6());
+var ToggleSwitchInnerRingComponent = styled__default.div(_templateObject4$5());
 
 var ToggleSwitch = function ToggleSwitch(_ref6) {
   var _ref6$isOn = _ref6.isOn,
@@ -34824,10 +34811,10 @@ function _templateObject5$3() {
   return data;
 }
 
-function _templateObject4$7() {
+function _templateObject4$6() {
   var data = _taggedTemplateLiteral(["\n  color: ", ";\n  align-items: center;\n  font-size: 1rem;\n  padding-right: 1rem;\n  cursor: pointer;\n  display: ", ";\n"]);
 
-  _templateObject4$7 = function _templateObject4() {
+  _templateObject4$6 = function _templateObject4() {
     return data;
   };
 
@@ -34881,7 +34868,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$7(), MATISSE_BLUE, function (_ref6) {
+var EditableListAction = styled__default.div(_templateObject4$6(), MATISSE_BLUE, function (_ref6) {
   var hide = _ref6.hide;
   return hide ? "none" : "flex";
 });
@@ -38539,10 +38526,10 @@ var PartialAmountForm = function PartialAmountForm(_ref) {
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
-    "aria-label": "Partial amount"
+    "aria-label": "Other amount"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "p"
-  }, "Pay a portion of your current bill. The remaining balance will still be due on the same due date."), /*#__PURE__*/React__default.createElement("div", {
+  }, "Pay a different amount. The total balance will still be due on the same due date."), /*#__PURE__*/React__default.createElement("div", {
     style: {
       height: "16px"
     }
@@ -40102,24 +40089,22 @@ var TermsAndConditions = function TermsAndConditions(_ref) {
       showTerms = _useState2[0],
       toggleShowTerms = _useState2[1];
 
-  return /*#__PURE__*/React__default.createElement(DisplayBox$1, null, /*#__PURE__*/React__default.createElement(Stack, {
-    direction: "row"
-  }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  return /*#__PURE__*/React__default.createElement(DisplayBox$1, null, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "terms",
+    title: "Terms and Conditions",
     error: error,
     checked: isChecked,
     onChange: onCheck
-  }), /*#__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, {
+  }), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0 0 0 58px"
+  }, /*#__PURE__*/React__default.createElement(Stack, null, /*#__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.17",
+  "version": "4.1.18-beta.0",
   "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,6 +44,7 @@ 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, SelectLabel } from "./FormSelect.styled";
+import { SelectContainer } from "./FormSelect.styled";
 import { fallbackValues } from "./FormSelect.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import { Box, Cluster } from "../layouts";
+import { Box, Cluster, Stack } from "../layouts";
 
 const FormSelect = ({
   fieldActions,
@@ -49,12 +49,14 @@ 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}
@@ -69,7 +71,7 @@ const FormSelect = ({
         }
         onClick={() => setOpen(!open)}
       />
-      <SelectLabel field={field} showErrors={showErrors}>
+      <Stack direction="row" justify="space-between">
         {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (
           <Text
             color={ERROR_COLOR}
@@ -86,7 +88,7 @@ const FormSelect = ({
         ) : (
           <Text extraStyles={`height: ${themeValues.lineHeight};`} />
         )}
-      </SelectLabel>
+      </Stack>
     </SelectContainer>
   );
 };

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

@@ -1,6 +1,5 @@
 import styled from "styled-components";
 import {
-  STORM_GREY,
   GHOST_GREY,
   ERROR_COLOR,
   MATISSE_BLUE
@@ -18,22 +17,6 @@ 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/partial-amount-form/PartialAmountForm.js

@@ -39,10 +39,10 @@ const PartialAmountForm = ({
 
   const lineItemsNew = Array.isArray(lineItems) ? lineItems : [];
   return (
-    <FormContainer variant={variant} role="form" aria-label="Partial amount">
+    <FormContainer variant={variant} role="form" aria-label="Other amount">
       <Text variant="p">
-        Pay a portion of your current bill. The remaining balance will still be
-        due on the same due date.
+        Pay a different amount. The total balance will still be due on the same
+        due date.
       </Text>
       <div style={{ height: "16px" }}></div>
       <FormInputColumn>

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

@@ -1,9 +1,7 @@
 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 = ({
@@ -16,27 +14,27 @@ const TermsAndConditions = ({
   const [showTerms, toggleShowTerms] = useState(false);
   return (
     <DisplayBox>
-      <Stack direction="row">
+      <Stack>
         <Checkbox
           name="terms"
+          title="Terms and Conditions"
           error={error}
           checked={isChecked}
           onChange={onCheck}
         />
-        <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>
+        <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>
     </DisplayBox>
   );