@indico-data/design-system 2.5.0 → 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 +89 -0
- package/lib/index.d.ts +31 -3
- package/lib/index.esm.css +89 -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/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/index.d.ts +1 -0
- package/lib/src/index.d.ts +2 -0
- package/package.json +1 -1
- 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/index.ts +1 -0
- package/src/index.ts +2 -0
- package/src/styles/index.scss +1 -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;
|