@thecb/components 10.12.0-beta.0 → 10.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +37 -23
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +10 -1
- package/dist/index.esm.js +37 -23
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/atoms/card/index.d.ts +1 -1
- package/src/components/atoms/form-layouts/FormInput.js +6 -4
- package/src/components/atoms/form-layouts/FormInput.stories.js +33 -0
- package/src/components/atoms/form-layouts/index.d.ts +5 -0
- package/src/components/atoms/form-select/FormSelect.js +5 -3
- package/src/components/atoms/form-select/index.d.ts +3 -0
- package/src/components/molecules/editable-list/EditableList.js +3 -1
- package/src/components/molecules/radio-group/RadioGroup.js +8 -3
- package/src/components/molecules/radio-group/index.d.ts +1 -0
package/dist/index.cjs.js
CHANGED
|
@@ -25550,7 +25550,11 @@ var FormSelect = function FormSelect(_ref) {
|
|
|
25550
25550
|
_ref$widthFitOptions = _ref.widthFitOptions,
|
|
25551
25551
|
widthFitOptions = _ref$widthFitOptions === void 0 ? false : _ref$widthFitOptions,
|
|
25552
25552
|
_ref$isRequired = _ref.isRequired,
|
|
25553
|
-
isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired
|
|
25553
|
+
isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
|
|
25554
|
+
_ref$labelTextVariant = _ref.labelTextVariant,
|
|
25555
|
+
labelTextVariant = _ref$labelTextVariant === void 0 ? "pS" : _ref$labelTextVariant,
|
|
25556
|
+
_ref$errorLabelTextVa = _ref.errorLabelTextVariant,
|
|
25557
|
+
errorLabelTextVariant = _ref$errorLabelTextVa === void 0 ? "pXS" : _ref$errorLabelTextVa;
|
|
25554
25558
|
var _useState = React.useState(false),
|
|
25555
25559
|
_useState2 = _slicedToArray(_useState, 2),
|
|
25556
25560
|
open = _useState2[0],
|
|
@@ -25580,7 +25584,7 @@ var FormSelect = function FormSelect(_ref) {
|
|
|
25580
25584
|
align: "center"
|
|
25581
25585
|
}, /*#__PURE__*/React__default.createElement(Text$1, {
|
|
25582
25586
|
as: "label",
|
|
25583
|
-
variant:
|
|
25587
|
+
variant: labelTextVariant,
|
|
25584
25588
|
color: themeValues.labelColor,
|
|
25585
25589
|
weight: themeValues.fontWeight,
|
|
25586
25590
|
extraStyles: "word-break: break-word;\n font-family: Public Sans;\n &::first-letter {\n text-transform: uppercase;\n }",
|
|
@@ -25615,7 +25619,7 @@ var FormSelect = function FormSelect(_ref) {
|
|
|
25615
25619
|
justify: "space-between"
|
|
25616
25620
|
}, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React__default.createElement(Text$1, {
|
|
25617
25621
|
color: ERROR_COLOR,
|
|
25618
|
-
variant:
|
|
25622
|
+
variant: errorLabelTextVariant,
|
|
25619
25623
|
weight: themeValues.fontWeight,
|
|
25620
25624
|
extraStyles: "\n word-break: break-word;\n font-family: Public Sans;\n &::first-letter {\n text-transform: uppercase;\n }\n ",
|
|
25621
25625
|
id: createIdFromString(labelTextWhenNoError, "error message"),
|
|
@@ -27237,7 +27241,7 @@ var fallbackValues$n = {
|
|
|
27237
27241
|
};
|
|
27238
27242
|
|
|
27239
27243
|
var _excluded$v = ["showErrors", "themeValues"],
|
|
27240
|
-
_excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow"];
|
|
27244
|
+
_excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow", "labelTextVariant", "errorTextVariant"];
|
|
27241
27245
|
var InputField = styled__default.input.withConfig({
|
|
27242
27246
|
displayName: "FormInput__InputField",
|
|
27243
27247
|
componentId: "sc-l094r1-0"
|
|
@@ -27328,6 +27332,10 @@ var FormInput = function FormInput(_ref15) {
|
|
|
27328
27332
|
errorFieldExtraStyles = _ref15.errorFieldExtraStyles,
|
|
27329
27333
|
_ref15$showFieldError = _ref15.showFieldErrorRow,
|
|
27330
27334
|
showFieldErrorRow = _ref15$showFieldError === void 0 ? true : _ref15$showFieldError,
|
|
27335
|
+
_ref15$labelTextVaria = _ref15.labelTextVariant,
|
|
27336
|
+
labelTextVariant = _ref15$labelTextVaria === void 0 ? "pS" : _ref15$labelTextVaria,
|
|
27337
|
+
_ref15$errorTextVaria = _ref15.errorTextVariant,
|
|
27338
|
+
errorTextVariant = _ref15$errorTextVaria === void 0 ? "pXS" : _ref15$errorTextVaria,
|
|
27331
27339
|
props = _objectWithoutProperties(_ref15, _excluded2);
|
|
27332
27340
|
var _useState = React.useState(false),
|
|
27333
27341
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -27362,7 +27370,7 @@ var FormInput = function FormInput(_ref15) {
|
|
|
27362
27370
|
}, /*#__PURE__*/React__default.createElement(Text$1, {
|
|
27363
27371
|
as: "label",
|
|
27364
27372
|
color: themeValues.labelColor,
|
|
27365
|
-
variant:
|
|
27373
|
+
variant: labelTextVariant,
|
|
27366
27374
|
weight: themeValues.fontWeight,
|
|
27367
27375
|
extraStyles: "word-break: break-word;\n font-family: Public Sans;\n &::first-letter {\n text-transform: uppercase;\n }",
|
|
27368
27376
|
id: createIdFromString(labelTextWhenNoError)
|
|
@@ -27375,12 +27383,12 @@ var FormInput = function FormInput(_ref15) {
|
|
|
27375
27383
|
}, /*#__PURE__*/React__default.createElement(Text$1, {
|
|
27376
27384
|
as: "label",
|
|
27377
27385
|
color: themeValues.labelColor,
|
|
27378
|
-
variant:
|
|
27386
|
+
variant: labelTextVariant,
|
|
27379
27387
|
fontWeight: themeValues.fontWeight,
|
|
27380
27388
|
extraStyles: "word-break: break-word;\n font-family: Public Sans;\n &::first-letter {\n text-transform: uppercase;\n }",
|
|
27381
27389
|
id: createIdFromString(labelTextWhenNoError)
|
|
27382
27390
|
}, labelTextWhenNoError), type === "password" && /*#__PURE__*/React__default.createElement(Text$1, {
|
|
27383
|
-
variant:
|
|
27391
|
+
variant: labelTextVariant,
|
|
27384
27392
|
color: themeValues.linkColor,
|
|
27385
27393
|
weight: themeValues.fontWeight,
|
|
27386
27394
|
hoverStyles: themeValues.hoverFocusStyles,
|
|
@@ -27460,7 +27468,7 @@ var FormInput = function FormInput(_ref15) {
|
|
|
27460
27468
|
"aria-atomic": true
|
|
27461
27469
|
}, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React__default.createElement(Text$1, {
|
|
27462
27470
|
color: ERROR_COLOR,
|
|
27463
|
-
variant:
|
|
27471
|
+
variant: errorTextVariant,
|
|
27464
27472
|
weight: themeValues.fontWeight,
|
|
27465
27473
|
extraStyles: "word-break: break-word;\n font-family: Public Sans;\n &::first-letter {\n text-transform: uppercase;\n }\n ".concat(errorFieldExtraStyles, ";"),
|
|
27466
27474
|
id: createIdFromString(labelTextWhenNoError, "error message")
|
|
@@ -41738,7 +41746,7 @@ var EditableList = function EditableList(_ref) {
|
|
|
41738
41746
|
}, /*#__PURE__*/React__default.createElement(Text$1, {
|
|
41739
41747
|
variant: "p",
|
|
41740
41748
|
color: CHARADE_GREY
|
|
41741
|
-
}, renderItem(item)), /*#__PURE__*/React__default.createElement(EditableListItemControls, null, item.isPrimary && /*#__PURE__*/React__default.createElement(Text$1, {
|
|
41749
|
+
}, !!renderItem && typeof renderItem === "function" && renderItem(item)), /*#__PURE__*/React__default.createElement(EditableListItemControls, null, item.isPrimary && /*#__PURE__*/React__default.createElement(Text$1, {
|
|
41742
41750
|
variant: "p",
|
|
41743
41751
|
color: STORM_GREY,
|
|
41744
41752
|
extraStyles: "font-style: italic;",
|
|
@@ -49234,27 +49242,33 @@ PhoneForm.mapDispatchToProps = mapDispatchToProps$8;
|
|
|
49234
49242
|
var DefaultHeading = styled__default.div.withConfig({
|
|
49235
49243
|
displayName: "RadioGroup__DefaultHeading",
|
|
49236
49244
|
componentId: "sc-7lqrl8-0"
|
|
49237
|
-
})(["
|
|
49245
|
+
})(["", " color:", ";margin:0;padding:8px 0px;"], function (_ref) {
|
|
49246
|
+
var fontSize = _ref.fontSize;
|
|
49247
|
+
return "font-size: ".concat(fontSize, ";");
|
|
49248
|
+
}, CHARADE_GREY);
|
|
49238
49249
|
var StyledFieldset = styled__default.fieldset.withConfig({
|
|
49239
49250
|
displayName: "RadioGroup__StyledFieldset",
|
|
49240
49251
|
componentId: "sc-7lqrl8-1"
|
|
49241
49252
|
})(["", ""], function (props) {
|
|
49242
49253
|
return props.$extraStyles;
|
|
49243
49254
|
});
|
|
49244
|
-
var RadioGroup = function RadioGroup(
|
|
49245
|
-
var headingText =
|
|
49246
|
-
groupName =
|
|
49247
|
-
|
|
49248
|
-
|
|
49255
|
+
var RadioGroup = function RadioGroup(_ref2) {
|
|
49256
|
+
var headingText = _ref2.headingText,
|
|
49257
|
+
groupName = _ref2.groupName,
|
|
49258
|
+
_ref2$headingFontSize = _ref2.headingFontSize,
|
|
49259
|
+
headingFontSize = _ref2$headingFontSize === void 0 ? "0.875rem" : _ref2$headingFontSize,
|
|
49260
|
+
_ref2$heading = _ref2.heading,
|
|
49261
|
+
Heading = _ref2$heading === void 0 ? /*#__PURE__*/React__default.createElement(DefaultHeading, {
|
|
49249
49262
|
role: "heading",
|
|
49250
|
-
id: "radio-group-".concat(groupName, "-heading")
|
|
49251
|
-
|
|
49252
|
-
|
|
49253
|
-
|
|
49254
|
-
|
|
49255
|
-
handleChange =
|
|
49256
|
-
|
|
49257
|
-
|
|
49263
|
+
id: "radio-group-".concat(groupName, "-heading"),
|
|
49264
|
+
fontSize: headingFontSize
|
|
49265
|
+
}, headingText) : _ref2$heading,
|
|
49266
|
+
config = _ref2.config,
|
|
49267
|
+
extraStyles = _ref2.extraStyles,
|
|
49268
|
+
_ref2$handleChange = _ref2.handleChange,
|
|
49269
|
+
handleChange = _ref2$handleChange === void 0 ? noop : _ref2$handleChange,
|
|
49270
|
+
field = _ref2.field,
|
|
49271
|
+
fieldActions = _ref2.fieldActions;
|
|
49258
49272
|
var setValue = function setValue(value) {
|
|
49259
49273
|
return fieldActions.set(value);
|
|
49260
49274
|
};
|