@thecb/components 10.11.2-beta.2 → 10.12.0-beta.0

package/dist/index.d.ts

@@ -577,7 +577,9 @@ declare const ButtonWithLink: React.FC<Expand<ButtonWithLinkProps> &
 
 interface CardProps {
   text?: string;
+  textAs?: string;
   titleText?: string;
+  titleAs?: string;
   titleVariant?: string;
   extraStyles?: string;
   imgSrc?: string;
@@ -601,6 +603,10 @@ interface CardProps {
   borderRadius?: string;
   width?: string;
   padding?: string;
+  showQuitLink?: boolean;
+  onQuitClick?: (
+    event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>
+  ) => void;
 }
 
 declare const Card: React.FC<Expand<CardProps> &
@@ -639,11 +645,6 @@ 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> &
@@ -666,9 +667,6 @@ interface FormSelectProps {
   smoothScroll?: boolean;
   dataQa?: string | null;
   widthFitOptions?: boolean;
-  isRequired?: boolean;
-  labelTextVariant?: string;
-  errorLabelTextVariant?: string;
 }
 
 declare const FormSelect: React.FC<Expand<FormSelectProps> &
@@ -1296,7 +1294,6 @@ interface RadioGroupProps {
   handleChange?: () => void;
   heading?: ReactNode;
   headingText: string;
-  headingFontSize?: string;
 }
 
 declare const RadioGroup: React.FC<Expand<RadioGroupProps> &

package/dist/index.esm.js

@@ -25542,11 +25542,7 @@ 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,
-    _ref$labelTextVariant = _ref.labelTextVariant,
-    labelTextVariant = _ref$labelTextVariant === void 0 ? "pS" : _ref$labelTextVariant,
-    _ref$errorLabelTextVa = _ref.errorLabelTextVariant,
-    errorLabelTextVariant = _ref$errorLabelTextVa === void 0 ? "pXS" : _ref$errorLabelTextVa;
+    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -25576,7 +25572,7 @@ var FormSelect = function FormSelect(_ref) {
     align: "center"
   }, /*#__PURE__*/React.createElement(Text$1, {
     as: "label",
-    variant: labelTextVariant,
+    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              }",
@@ -25611,7 +25607,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: errorLabelTextVariant,
+    variant: "pXS",
     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"),
@@ -27233,7 +27229,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", "labelTextVariant", "errorTextVariant"];
+  _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow"];
 var InputField = styled.input.withConfig({
   displayName: "FormInput__InputField",
   componentId: "sc-l094r1-0"
@@ -27324,10 +27320,6 @@ 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),
@@ -27362,7 +27354,7 @@ var FormInput = function FormInput(_ref15) {
   }, /*#__PURE__*/React.createElement(Text$1, {
     as: "label",
     color: themeValues.labelColor,
-    variant: labelTextVariant,
+    variant: "pS",
     weight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n                  font-family: Public Sans;\n                  &::first-letter {\n                    text-transform: uppercase;\n                  }",
     id: createIdFromString(labelTextWhenNoError)
@@ -27375,12 +27367,12 @@ var FormInput = function FormInput(_ref15) {
   }, /*#__PURE__*/React.createElement(Text$1, {
     as: "label",
     color: themeValues.labelColor,
-    variant: labelTextVariant,
+    variant: "pS",
     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: labelTextVariant,
+    variant: "pS",
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.hoverFocusStyles,
@@ -27460,7 +27452,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: errorTextVariant,
+    variant: "pXS",
     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")
@@ -39857,20 +39849,40 @@ var fallbackValues$E = {
 };
 
 var CardText = function CardText(_ref) {
-  var padding = _ref.padding,
+  var showQuitLink = _ref.showQuitLink,
+    onQuitClick = _ref.onQuitClick,
+    titleAs = _ref.titleAs,
+    padding = _ref.padding,
     text = _ref.text,
+    _ref$textAs = _ref.textAs,
+    textAs = _ref$textAs === void 0 ? "p" : _ref$textAs,
     titleText = _ref.titleText,
     _ref$titleVariant = _ref.titleVariant,
     titleVariant = _ref$titleVariant === void 0 ? "small" : _ref$titleVariant,
     themeValues = _ref.themeValues;
   return /*#__PURE__*/React.createElement(Box, {
     padding: padding
-  }, /*#__PURE__*/React.createElement(Cover, null, /*#__PURE__*/React.createElement(Stack, null, titleText && /*#__PURE__*/React.createElement(Title$1, {
-    as: "p",
+  }, /*#__PURE__*/React.createElement(Cover, null, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Cluster, {
+    justify: "space-between",
+    align: "center",
+    overflow: true
+  }, titleText && /*#__PURE__*/React.createElement(Title$1, {
+    as: titleAs,
     variant: titleVariant,
     color: themeValues.titleColor,
     weight: themeValues.titleWeight
-  }, titleText), /*#__PURE__*/React.createElement(Paragraph$1, {
+  }, titleText), showQuitLink && /*#__PURE__*/React.createElement(Box, {
+    padding: "0",
+    onClick: onQuitClick,
+    onKeyDown: function onKeyDown(e) {
+      return e.key === "Enter" && onQuitClick();
+    },
+    role: "button",
+    tabIndex: 0,
+    "aria-label": "Close Card: ".concat(titleText),
+    extraStyles: "cursor: pointer;"
+  }, /*#__PURE__*/React.createElement(IconQuitLarge, null))), /*#__PURE__*/React.createElement(Paragraph$1, {
+    as: textAs,
     color: themeValues.textColor
   }, text))));
 };
@@ -39911,9 +39923,17 @@ var Card = function Card(_ref) {
     _ref$imgObjectFit = _ref.imgObjectFit,
     imgObjectFit = _ref$imgObjectFit === void 0 ? "none" : _ref$imgObjectFit,
     imgAltText = _ref.imgAltText,
+    _ref$onQuitClick = _ref.onQuitClick,
+    onQuitClick = _ref$onQuitClick === void 0 ? noop : _ref$onQuitClick,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? "24px" : _ref$padding,
+    _ref$showQuitLink = _ref.showQuitLink,
+    showQuitLink = _ref$showQuitLink === void 0 ? false : _ref$showQuitLink,
     text = _ref.text,
+    _ref$textAs = _ref.textAs,
+    textAs = _ref$textAs === void 0 ? "p" : _ref$textAs,
+    _ref$titleAs = _ref.titleAs,
+    titleAs = _ref$titleAs === void 0 ? "h2" : _ref$titleAs,
     titleText = _ref.titleText,
     _ref$titleVariant = _ref.titleVariant,
     titleVariant = _ref$titleVariant === void 0 ? "small" : _ref$titleVariant,
@@ -39970,9 +39990,13 @@ var Card = function Card(_ref) {
     width: "100%",
     extraStyles: "flex-basis: 100%;"
   }, text && /*#__PURE__*/React.createElement(CardText$1, {
+    onQuitClick: onQuitClick,
     padding: padding,
+    showQuitLink: showQuitLink,
+    titleAs: titleAs,
     titleText: titleText,
     text: text,
+    textAs: textAs,
     titleVariant: titleVariant
   }), children)))));
 };
@@ -49202,33 +49226,27 @@ PhoneForm.mapDispatchToProps = mapDispatchToProps$8;
 var DefaultHeading = styled.div.withConfig({
   displayName: "RadioGroup__DefaultHeading",
   componentId: "sc-7lqrl8-0"
-})(["", " color:", ";margin:0;padding:8px 0px;"], function (_ref) {
-  var fontSize = _ref.fontSize;
-  return "font-size: ".concat(fontSize, ";");
-}, CHARADE_GREY);
+})(["font-size:0.875rem;color:", " margin:0;padding:8px 0px;"], CHARADE_GREY);
 var StyledFieldset = styled.fieldset.withConfig({
   displayName: "RadioGroup__StyledFieldset",
   componentId: "sc-7lqrl8-1"
 })(["", ""], function (props) {
   return props.$extraStyles;
 });
-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, {
+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, {
       role: "heading",
-      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;
+      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;
   var setValue = function setValue(value) {
     return fieldActions.set(value);
   };