@thecb/components 10.11.1 → 10.11.2-beta.1

package/dist/index.d.ts

@@ -639,6 +639,11 @@ interface FormInputProps {
   autocompleteValue?: string;
   removeFromValue?: RegExp;
   dataQa?: string | null;
+  isRequired?: boolean;
+  errorFieldExtraStyles?: string;
+  showFieldErrorRow?: boolean;
+  labelTextVariant?: string;
+  errorTextVariant?: string;
 }
 
 declare const FormInput: React.FC<Expand<FormInputProps> &
@@ -661,6 +666,9 @@ interface FormSelectProps {
   smoothScroll?: boolean;
   dataQa?: string | null;
   widthFitOptions?: boolean;
+  isRequired?: boolean;
+  labelTextVariant?: string;
+  errorLabelTextVariant?: string;
 }
 
 declare const FormSelect: React.FC<Expand<FormSelectProps> &
@@ -1288,6 +1296,7 @@ interface RadioGroupProps {
   handleChange?: () => void;
   heading?: ReactNode;
   headingText: string;
+  headingFontSize?: string;
 }
 
 declare const RadioGroup: React.FC<Expand<RadioGroupProps> &

package/dist/index.esm.js

@@ -25542,7 +25542,11 @@ var FormSelect = function FormSelect(_ref) {
     _ref$widthFitOptions = _ref.widthFitOptions,
     widthFitOptions = _ref$widthFitOptions === void 0 ? false : _ref$widthFitOptions,
     _ref$isRequired = _ref.isRequired,
-    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
+    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
+    _ref$labelTextVariant = _ref.labelTextVariant,
+    labelTextVariant = _ref$labelTextVariant === void 0 ? "pS" : _ref$labelTextVariant,
+    _ref$errorLabelTextVa = _ref.errorLabelTextVariant,
+    errorLabelTextVariant = _ref$errorLabelTextVa === void 0 ? "pXS" : _ref$errorLabelTextVa;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -25572,7 +25576,7 @@ var FormSelect = function FormSelect(_ref) {
     align: "center"
   }, /*#__PURE__*/React.createElement(Text$1, {
     as: "label",
-    variant: "pS",
+    variant: labelTextVariant,
     color: themeValues.labelColor,
     weight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
@@ -25607,7 +25611,7 @@ var FormSelect = function FormSelect(_ref) {
     justify: "space-between"
   }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React.createElement(Text$1, {
     color: ERROR_COLOR,
-    variant: "pXS",
+    variant: errorLabelTextVariant,
     weight: themeValues.fontWeight,
     extraStyles: "\n            word-break: break-word;\n            font-family: Public Sans;\n            &::first-letter {\n              text-transform: uppercase;\n            }\n          ",
     id: createIdFromString(labelTextWhenNoError, "error message"),
@@ -27229,7 +27233,7 @@ var fallbackValues$n = {
 };
 
 var _excluded$v = ["showErrors", "themeValues"],
-  _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow"];
+  _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow", "labelTextVariant", "errorTextVariant"];
 var InputField = styled.input.withConfig({
   displayName: "FormInput__InputField",
   componentId: "sc-l094r1-0"
@@ -27320,6 +27324,10 @@ var FormInput = function FormInput(_ref15) {
     errorFieldExtraStyles = _ref15.errorFieldExtraStyles,
     _ref15$showFieldError = _ref15.showFieldErrorRow,
     showFieldErrorRow = _ref15$showFieldError === void 0 ? true : _ref15$showFieldError,
+    _ref15$labelTextVaria = _ref15.labelTextVariant,
+    labelTextVariant = _ref15$labelTextVaria === void 0 ? "pS" : _ref15$labelTextVaria,
+    _ref15$errorTextVaria = _ref15.errorTextVariant,
+    errorTextVariant = _ref15$errorTextVaria === void 0 ? "pXS" : _ref15$errorTextVaria,
     props = _objectWithoutProperties(_ref15, _excluded2);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -27354,7 +27362,7 @@ var FormInput = function FormInput(_ref15) {
   }, /*#__PURE__*/React.createElement(Text$1, {
     as: "label",
     color: themeValues.labelColor,
-    variant: "pS",
+    variant: labelTextVariant,
     weight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n                  font-family: Public Sans;\n                  &::first-letter {\n                    text-transform: uppercase;\n                  }",
     id: createIdFromString(labelTextWhenNoError)
@@ -27367,12 +27375,12 @@ var FormInput = function FormInput(_ref15) {
   }, /*#__PURE__*/React.createElement(Text$1, {
     as: "label",
     color: themeValues.labelColor,
-    variant: "pS",
+    variant: labelTextVariant,
     fontWeight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n                    font-family: Public Sans;\n                    &::first-letter {\n                      text-transform: uppercase;\n                    }",
     id: createIdFromString(labelTextWhenNoError)
   }, labelTextWhenNoError), type === "password" && /*#__PURE__*/React.createElement(Text$1, {
-    variant: "pS",
+    variant: labelTextVariant,
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.hoverFocusStyles,
@@ -27452,7 +27460,7 @@ var FormInput = function FormInput(_ref15) {
     "aria-atomic": true
   }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React.createElement(Text$1, {
     color: ERROR_COLOR,
-    variant: "pXS",
+    variant: errorTextVariant,
     weight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }\n              ".concat(errorFieldExtraStyles, ";"),
     id: createIdFromString(labelTextWhenNoError, "error message")
@@ -49194,27 +49202,33 @@ PhoneForm.mapDispatchToProps = mapDispatchToProps$8;
 var DefaultHeading = styled.div.withConfig({
   displayName: "RadioGroup__DefaultHeading",
   componentId: "sc-7lqrl8-0"
-})(["font-size:0.875rem;color:", " margin:0;padding:8px 0px;"], CHARADE_GREY);
+})(["", " color:", ";margin:0;padding:8px 0px;"], function (_ref) {
+  var fontSize = _ref.fontSize;
+  return "font-size: ".concat(fontSize, ";");
+}, CHARADE_GREY);
 var StyledFieldset = styled.fieldset.withConfig({
   displayName: "RadioGroup__StyledFieldset",
   componentId: "sc-7lqrl8-1"
 })(["", ""], function (props) {
   return props.$extraStyles;
 });
-var RadioGroup = function RadioGroup(_ref) {
-  var headingText = _ref.headingText,
-    groupName = _ref.groupName,
-    _ref$heading = _ref.heading,
-    Heading = _ref$heading === void 0 ? /*#__PURE__*/React.createElement(DefaultHeading, {
+var RadioGroup = function RadioGroup(_ref2) {
+  var headingText = _ref2.headingText,
+    groupName = _ref2.groupName,
+    _ref2$headingFontSize = _ref2.headingFontSize,
+    headingFontSize = _ref2$headingFontSize === void 0 ? "0.875rem" : _ref2$headingFontSize,
+    _ref2$heading = _ref2.heading,
+    Heading = _ref2$heading === void 0 ? /*#__PURE__*/React.createElement(DefaultHeading, {
       role: "heading",
-      id: "radio-group-".concat(groupName, "-heading")
-    }, headingText) : _ref$heading,
-    config = _ref.config,
-    extraStyles = _ref.extraStyles,
-    _ref$handleChange = _ref.handleChange,
-    handleChange = _ref$handleChange === void 0 ? noop : _ref$handleChange,
-    field = _ref.field,
-    fieldActions = _ref.fieldActions;
+      id: "radio-group-".concat(groupName, "-heading"),
+      fontSize: headingFontSize
+    }, headingText) : _ref2$heading,
+    config = _ref2.config,
+    extraStyles = _ref2.extraStyles,
+    _ref2$handleChange = _ref2.handleChange,
+    handleChange = _ref2$handleChange === void 0 ? noop : _ref2$handleChange,
+    field = _ref2.field,
+    fieldActions = _ref2.fieldActions;
   var setValue = function setValue(value) {
     return fieldActions.set(value);
   };