@indico-data/design-system 2.4.2 → 2.6.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/.storybook/preview.ts +4 -14
- package/lib/index.css +208 -0
- package/lib/index.d.ts +31 -3
- package/lib/index.esm.css +208 -0
- package/lib/index.esm.js +23 -1
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +24 -0
- package/lib/index.js.map +1 -1
- package/lib/src/components/forms/input/Input.d.ts +18 -0
- package/lib/src/components/forms/input/Input.stories.d.ts +12 -0
- package/lib/src/components/forms/input/__tests__/Input.test.d.ts +1 -0
- package/lib/src/components/forms/input/index.d.ts +1 -0
- package/lib/src/components/forms/radio/Radio.d.ts +11 -0
- package/lib/src/components/forms/radio/Radio.stories.d.ts +6 -0
- package/lib/src/components/forms/radio/__tests__/Radio.test.d.ts +1 -0
- package/lib/src/components/forms/radio/index.d.ts +1 -0
- package/lib/src/components/forms/subcomponents/ErrorList.d.ts +6 -0
- package/lib/src/components/forms/subcomponents/Label.d.ts +8 -0
- package/lib/src/components/forms/subcomponents/__tests__/ErrorList.test.d.ts +1 -0
- package/lib/src/components/forms/subcomponents/__tests__/Label.test.d.ts +1 -0
- package/lib/src/components/index.d.ts +2 -0
- package/lib/src/index.d.ts +2 -0
- package/package.json +1 -1
- package/src/components/forms/input/Input.mdx +19 -0
- package/src/components/forms/input/Input.stories.tsx +301 -0
- package/src/components/forms/input/Input.tsx +86 -0
- package/src/components/forms/input/__tests__/Input.test.tsx +213 -0
- package/src/components/forms/input/index.ts +1 -0
- package/src/components/forms/input/styles/Input.scss +112 -0
- package/src/components/forms/radio/Radio.mdx +83 -0
- package/src/components/forms/radio/Radio.stories.tsx +121 -0
- package/src/components/forms/radio/Radio.tsx +47 -0
- package/src/components/forms/radio/__tests__/Radio.test.tsx +35 -0
- package/src/components/forms/radio/index.ts +1 -0
- package/src/components/forms/radio/styles/Radio.scss +98 -0
- package/src/components/forms/subcomponents/ErrorList.tsx +14 -0
- package/src/components/forms/subcomponents/Label.tsx +20 -0
- package/src/components/forms/subcomponents/__tests__/ErrorList.test.tsx +16 -0
- package/src/components/forms/subcomponents/__tests__/Label.test.tsx +33 -0
- package/src/components/index.ts +2 -0
- package/src/index.ts +2 -0
- package/src/styles/_typography.scss +29 -11
- package/src/styles/index.scss +2 -0
- package/src/styles/storybook.scss +15 -0
package/lib/index.js
CHANGED
|
@@ -18657,6 +18657,28 @@ const Table$1 = (props) => {
|
|
|
18657
18657
|
return (jsxRuntime.jsx("div", { className: "table-wrapper", children: jsxRuntime.jsx(Xe, Object.assign({ responsive: responsive, direction: direction, subHeaderAlign: subHeaderAlign, keyField: keyField, striped: striped, className: `${striped ? 'pf__table--striped' : ''}`, disabled: isDisabled, noDataComponent: noDataComponent, progressPending: isLoading, progressComponent: jsxRuntime.jsx(LoadingComponent, {}) }, rest)) }));
|
|
18658
18658
|
};
|
|
18659
18659
|
|
|
18660
|
+
const Label = ({ label, name, isRequired, hasHiddenLabel }) => {
|
|
18661
|
+
return (jsxRuntime.jsx("div", { "data-testid": `${name}-testId`, className: `form-label ${hasHiddenLabel ? 'is-visually-hidden' : ''}`, children: jsxRuntime.jsxs("label", { htmlFor: `${name}`, children: [label, isRequired ? jsxRuntime.jsx("span", { className: "text-error", children: " *" }) : ''] }) }));
|
|
18662
|
+
};
|
|
18663
|
+
|
|
18664
|
+
const ErrorList = ({ errorList, name }) => {
|
|
18665
|
+
return (jsxRuntime.jsx("ul", { className: "error-list", id: `${name}-helper`, children: (errorList !== null && errorList !== void 0 ? errorList : []).map((error, index) => (jsxRuntime.jsx("li", { children: error }, index))) }));
|
|
18666
|
+
};
|
|
18667
|
+
|
|
18668
|
+
const Input = (_a) => {
|
|
18669
|
+
var { ref, label, name, placeholder, value, onChange, isRequired, isDisabled, errorList, helpText, iconName, hasHiddenLabel, isClearable } = _a, rest = __rest$1(_a, ["ref", "label", "name", "placeholder", "value", "onChange", "isRequired", "isDisabled", "errorList", "helpText", "iconName", "hasHiddenLabel", "isClearable"]);
|
|
18670
|
+
const hasErrors = errorList && errorList.length > 0;
|
|
18671
|
+
const handleClear = () => {
|
|
18672
|
+
onChange({ target: { value: '' } });
|
|
18673
|
+
};
|
|
18674
|
+
return (jsxRuntime.jsxs("div", { className: "form-control", children: [jsxRuntime.jsx(Label, { label: label, name: name, isRequired: isRequired, hasHiddenLabel: hasHiddenLabel }), jsxRuntime.jsxs("div", { className: "input-wrapper", children: [iconName && (jsxRuntime.jsx(Icon, { name: iconName, "data-testid": `${name}-embedded-icon`, className: "embedded-icon" })), jsxRuntime.jsx("input", Object.assign({ ref: ref, "data-testid": `form-input-${name}`, name: name, type: "text", disabled: isDisabled, required: isRequired, placeholder: placeholder, value: value, onChange: onChange, className: `input ${hasErrors ? 'error' : ''} ${iconName ? 'input--has-icon' : ''}`, "aria-invalid": hasErrors, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired, "aria-label": label }, rest)), isClearable && (jsxRuntime.jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsxRuntime.jsx(ErrorList, { errorList: errorList, name: name }), helpText && (jsxRuntime.jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
|
|
18675
|
+
};
|
|
18676
|
+
|
|
18677
|
+
const Radio$2 = (_a) => {
|
|
18678
|
+
var { ref, id, label, name, value, onChange, isDisabled } = _a, rest = __rest$1(_a, ["ref", "id", "label", "name", "value", "onChange", "isDisabled"]);
|
|
18679
|
+
return (jsxRuntime.jsx("div", { className: "form-control", children: jsxRuntime.jsxs("div", { className: "radio-wrapper", children: [jsxRuntime.jsx("input", Object.assign({ "data-testid": `form-radio-input-${name}` }, rest, { className: "radio-input", type: "radio", id: id, name: name, value: value, disabled: isDisabled, ref: ref, onChange: onChange, tabIndex: 0, "aria-describedby": id, "aria-label": label })), jsxRuntime.jsx("label", { htmlFor: id, className: "radio-input-label", "data-testid": `label-radio-input-${name}`, children: label })] }) }));
|
|
18680
|
+
};
|
|
18681
|
+
|
|
18660
18682
|
const StyledAccordion = styled__default.default.details `
|
|
18661
18683
|
summary {
|
|
18662
18684
|
display: inherit;
|
|
@@ -41497,6 +41519,7 @@ exports.EditableInput = EditableInput;
|
|
|
41497
41519
|
exports.GlobalStyles = GlobalStyles;
|
|
41498
41520
|
exports.Icon = Icon;
|
|
41499
41521
|
exports.IconButton = IconButton;
|
|
41522
|
+
exports.Input = Input;
|
|
41500
41523
|
exports.LegacyButton = Button$1;
|
|
41501
41524
|
exports.ListTable = ListTable;
|
|
41502
41525
|
exports.LoadingAwareContainer = LoadingAwareContainer;
|
|
@@ -41513,6 +41536,7 @@ exports.Pagination = Pagination;
|
|
|
41513
41536
|
exports.PercentageRing = PercentageRing;
|
|
41514
41537
|
exports.Radio = Radio;
|
|
41515
41538
|
exports.RadioGroup = RadioGroup;
|
|
41539
|
+
exports.RadioInput = Radio$2;
|
|
41516
41540
|
exports.RandomLoadingMessage = RandomLoadingMessage;
|
|
41517
41541
|
exports.Row = Row$1;
|
|
41518
41542
|
exports.SPACING = spacings;
|