@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.
Files changed (44) hide show
  1. package/.storybook/preview.ts +4 -14
  2. package/lib/index.css +208 -0
  3. package/lib/index.d.ts +31 -3
  4. package/lib/index.esm.css +208 -0
  5. package/lib/index.esm.js +23 -1
  6. package/lib/index.esm.js.map +1 -1
  7. package/lib/index.js +24 -0
  8. package/lib/index.js.map +1 -1
  9. package/lib/src/components/forms/input/Input.d.ts +18 -0
  10. package/lib/src/components/forms/input/Input.stories.d.ts +12 -0
  11. package/lib/src/components/forms/input/__tests__/Input.test.d.ts +1 -0
  12. package/lib/src/components/forms/input/index.d.ts +1 -0
  13. package/lib/src/components/forms/radio/Radio.d.ts +11 -0
  14. package/lib/src/components/forms/radio/Radio.stories.d.ts +6 -0
  15. package/lib/src/components/forms/radio/__tests__/Radio.test.d.ts +1 -0
  16. package/lib/src/components/forms/radio/index.d.ts +1 -0
  17. package/lib/src/components/forms/subcomponents/ErrorList.d.ts +6 -0
  18. package/lib/src/components/forms/subcomponents/Label.d.ts +8 -0
  19. package/lib/src/components/forms/subcomponents/__tests__/ErrorList.test.d.ts +1 -0
  20. package/lib/src/components/forms/subcomponents/__tests__/Label.test.d.ts +1 -0
  21. package/lib/src/components/index.d.ts +2 -0
  22. package/lib/src/index.d.ts +2 -0
  23. package/package.json +1 -1
  24. package/src/components/forms/input/Input.mdx +19 -0
  25. package/src/components/forms/input/Input.stories.tsx +301 -0
  26. package/src/components/forms/input/Input.tsx +86 -0
  27. package/src/components/forms/input/__tests__/Input.test.tsx +213 -0
  28. package/src/components/forms/input/index.ts +1 -0
  29. package/src/components/forms/input/styles/Input.scss +112 -0
  30. package/src/components/forms/radio/Radio.mdx +83 -0
  31. package/src/components/forms/radio/Radio.stories.tsx +121 -0
  32. package/src/components/forms/radio/Radio.tsx +47 -0
  33. package/src/components/forms/radio/__tests__/Radio.test.tsx +35 -0
  34. package/src/components/forms/radio/index.ts +1 -0
  35. package/src/components/forms/radio/styles/Radio.scss +98 -0
  36. package/src/components/forms/subcomponents/ErrorList.tsx +14 -0
  37. package/src/components/forms/subcomponents/Label.tsx +20 -0
  38. package/src/components/forms/subcomponents/__tests__/ErrorList.test.tsx +16 -0
  39. package/src/components/forms/subcomponents/__tests__/Label.test.tsx +33 -0
  40. package/src/components/index.ts +2 -0
  41. package/src/index.ts +2 -0
  42. package/src/styles/_typography.scss +29 -11
  43. package/src/styles/index.scss +2 -0
  44. 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;