@indico-data/design-system 2.5.0 → 2.6.0

package/.storybook/preview.ts

@@ -1,26 +1,14 @@
 import type { Preview, ReactRenderer } from '@storybook/react';
 import { withThemeByDataAttribute } from '@storybook/addon-themes';
-// import { withThemeFromJSXProvider } from '@storybook/addon-themes';
-// import { GlobalStyles } from '../src/legacy/styles/globals'; // TODO -- replace
 import '@/styles/index.scss';
-
-// export const decorators = [
-// withThemeFromJSXProvider({
-//   GlobalStyles, // Adds your GlobalStyle component to all stories
-// }),
-// ];
+import '@/styles/storybook.scss';
 
 import React from 'react';
 
 const preview: Preview = {
   decorators: [
     (Story: React.ComponentType) =>
-      React.createElement(
-        'div',
-        { style: { padding: '1em' } },
-        // 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it
-        React.createElement(Story),
-      ),
+      React.createElement('div', { style: { padding: '1em' } }, React.createElement(Story)),
     withThemeByDataAttribute({
       themes: {
         light: 'light',
@@ -30,6 +18,8 @@ const preview: Preview = {
       attributeName: 'data-theme',
       parentSelector: 'body',
     }),
+    (Story: React.ComponentType) =>
+      React.createElement('div', { className: 'sb__story' }, React.createElement(Story)),
   ],
   parameters: {
     backgrounds: { disable: true },

package/lib/index.css

@@ -965,6 +965,95 @@
   margin-bottom: var(--pf-margin-2);
 }
 
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-radio-background-color: var(--pf-white-color);
+  --pf-radio-check-color: var(--pf-primary-color);
+  --pf-radio-border-color: var(--pf-gray-color);
+  --pf-radio-disabled-color: var(--pf-gray-color-400);
+}
+
+:root [data-theme=dark] {
+  --pf-radio-background-color: transparent;
+  --pf-radio-check-color: var(--pf-white-color);
+  --pf-radio-border-color: var(--pf-white-color);
+  --pf-radio-disabled-color: var(--pf-gray-color-300);
+}
+
+.form-control .radio-wrapper {
+  display: flex;
+  margin-bottom: var(--pf-margin-2);
+  align-items: center;
+}
+.form-control .radio-input {
+  margin: 0;
+  margin-right: var(--pf-margin-2);
+  cursor: pointer;
+}
+.form-control .radio-input-label {
+  cursor: pointer;
+}
+.form-control [type=radio]:checked,
+.form-control [type=radio]:not(:checked) {
+  position: absolute;
+  left: -9999px;
+}
+.form-control [type=radio]:checked + label,
+.form-control [type=radio]:not(:checked) + label {
+  position: relative;
+  padding-left: var(--pf-padding-7);
+  cursor: pointer;
+  line-height: 20px;
+  display: inline-block;
+}
+.form-control [type=radio]:checked + label:before,
+.form-control [type=radio]:not(:checked) + label:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 18px;
+  height: 18px;
+  border: 1px solid var(--pf-radio-border-color);
+  border-radius: 100%;
+  background: var(--pf-radio-background-color);
+}
+.form-control [type=radio]:checked + label:after,
+.form-control [type=radio]:not(:checked) + label:after {
+  content: "";
+  width: 12px;
+  height: 12px;
+  background: var(--pf-radio-check-color);
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  border-radius: 100%;
+  transition: all 0.2s ease;
+}
+.form-control [type=radio]:not(:checked) + label:after {
+  opacity: 0;
+  transform: scale(0);
+}
+.form-control [type=radio]:checked + label:after {
+  opacity: 1;
+  transform: scale(1);
+}
+.form-control [type=radio]:disabled,
+.form-control [type=radio]:disabled + label {
+  cursor: not-allowed;
+}
+.form-control [type=radio]:disabled + label {
+  color: var(--pf-radio-disabled-color);
+  opacity: 0.5;
+}
+.form-control [type=radio]:disabled + label:before {
+  border-color: var(--pf-radio-disabled-color);
+}
+.form-control [type=radio]:disabled + label:after {
+  background: var(--pf-radio-disabled-color);
+}
+
 :root {
   --pf-font-family-base: "Mulish", sans-serif;
   --pf-font-size-base: 1rem;

package/lib/index.d.ts

@@ -525,7 +525,7 @@ declare function RadioGroup$1({ children, ...props }: Props$d): react_jsx_runtim
 /**
  * A single radio button and its label.
  */
-declare function Radio$1({ children, ...props }: AriaRadioProps): react_jsx_runtime.JSX.Element;
+declare function Radio$2({ children, ...props }: AriaRadioProps): react_jsx_runtime.JSX.Element;
 
 type RadioGroupProps = PermafrostComponent$1 & {
     value?: string;
@@ -545,7 +545,7 @@ declare function RadioGroup(props: RadioGroupProps): react_jsx_runtime.JSX.Eleme
  * A single radio button and its label; no styling is applied, and the native
  * radio button is visually hidden.
  */
-declare function Radio(props: AriaRadioProps & {
+declare function Radio$1(props: AriaRadioProps & {
     className?: string;
     isVisuallySelected?: (selectedValue: string) => void;
 }): react_jsx_runtime.JSX.Element;
@@ -922,4 +922,32 @@ type TableProps<T> = Omit<TableProps$1<T>, 'disabled' | 'progressPending' | 'dir
 };
 declare const Table: <T>(props: TableProps<T>) => react_jsx_runtime.JSX.Element;
 
-export { animation as ANIMATION, Radio as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, GlobalStyles, Icon, IconButton, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RandomLoadingMessage, Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, typography as TYPOGRAPHY, Table, TextInput, TextTruncate, Toggle, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
+interface InputProps {
+    ref?: React$1.LegacyRef<HTMLInputElement>;
+    label: string;
+    name: string;
+    placeholder: string;
+    value: string;
+    onChange: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    errorList?: string[];
+    helpText?: string;
+    hasHiddenLabel?: boolean;
+    iconName?: IconName$1;
+    isClearable?: boolean;
+}
+declare const Input: ({ ref, label, name, placeholder, value, onChange, isRequired, isDisabled, errorList, helpText, iconName, hasHiddenLabel, isClearable, ...rest }: InputProps) => react_jsx_runtime.JSX.Element;
+
+interface RadioProps {
+    ref?: React$1.LegacyRef<HTMLInputElement>;
+    id: string;
+    label: string;
+    name: string;
+    value?: string;
+    onChange: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
+    isDisabled?: boolean;
+}
+declare const Radio: ({ ref, id, label, name, value, onChange, isDisabled, ...rest }: RadioProps) => react_jsx_runtime.JSX.Element;
+
+export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, GlobalStyles, Icon, IconButton, Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio$2 as Radio, RadioGroup$1 as RadioGroup, Radio as RadioInput, RandomLoadingMessage, Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, typography as TYPOGRAPHY, Table, TextInput, TextTruncate, Toggle, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };

package/lib/index.esm.css

@@ -965,6 +965,95 @@
   margin-bottom: var(--pf-margin-2);
 }
 
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-radio-background-color: var(--pf-white-color);
+  --pf-radio-check-color: var(--pf-primary-color);
+  --pf-radio-border-color: var(--pf-gray-color);
+  --pf-radio-disabled-color: var(--pf-gray-color-400);
+}
+
+:root [data-theme=dark] {
+  --pf-radio-background-color: transparent;
+  --pf-radio-check-color: var(--pf-white-color);
+  --pf-radio-border-color: var(--pf-white-color);
+  --pf-radio-disabled-color: var(--pf-gray-color-300);
+}
+
+.form-control .radio-wrapper {
+  display: flex;
+  margin-bottom: var(--pf-margin-2);
+  align-items: center;
+}
+.form-control .radio-input {
+  margin: 0;
+  margin-right: var(--pf-margin-2);
+  cursor: pointer;
+}
+.form-control .radio-input-label {
+  cursor: pointer;
+}
+.form-control [type=radio]:checked,
+.form-control [type=radio]:not(:checked) {
+  position: absolute;
+  left: -9999px;
+}
+.form-control [type=radio]:checked + label,
+.form-control [type=radio]:not(:checked) + label {
+  position: relative;
+  padding-left: var(--pf-padding-7);
+  cursor: pointer;
+  line-height: 20px;
+  display: inline-block;
+}
+.form-control [type=radio]:checked + label:before,
+.form-control [type=radio]:not(:checked) + label:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 18px;
+  height: 18px;
+  border: 1px solid var(--pf-radio-border-color);
+  border-radius: 100%;
+  background: var(--pf-radio-background-color);
+}
+.form-control [type=radio]:checked + label:after,
+.form-control [type=radio]:not(:checked) + label:after {
+  content: "";
+  width: 12px;
+  height: 12px;
+  background: var(--pf-radio-check-color);
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  border-radius: 100%;
+  transition: all 0.2s ease;
+}
+.form-control [type=radio]:not(:checked) + label:after {
+  opacity: 0;
+  transform: scale(0);
+}
+.form-control [type=radio]:checked + label:after {
+  opacity: 1;
+  transform: scale(1);
+}
+.form-control [type=radio]:disabled,
+.form-control [type=radio]:disabled + label {
+  cursor: not-allowed;
+}
+.form-control [type=radio]:disabled + label {
+  color: var(--pf-radio-disabled-color);
+  opacity: 0.5;
+}
+.form-control [type=radio]:disabled + label:before {
+  border-color: var(--pf-radio-disabled-color);
+}
+.form-control [type=radio]:disabled + label:after {
+  background: var(--pf-radio-disabled-color);
+}
+
 :root {
   --pf-font-family-base: "Mulish", sans-serif;
   --pf-font-size-base: 1rem;

package/lib/index.esm.js

@@ -18632,6 +18632,28 @@ const Table$1 = (props) => {
     return (jsx("div", { className: "table-wrapper", children: 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: jsx(LoadingComponent, {}) }, rest)) }));
 };
 
+const Label = ({ label, name, isRequired, hasHiddenLabel }) => {
+    return (jsx("div", { "data-testid": `${name}-testId`, className: `form-label ${hasHiddenLabel ? 'is-visually-hidden' : ''}`, children: jsxs("label", { htmlFor: `${name}`, children: [label, isRequired ? jsx("span", { className: "text-error", children: " *" }) : ''] }) }));
+};
+
+const ErrorList = ({ errorList, name }) => {
+    return (jsx("ul", { className: "error-list", id: `${name}-helper`, children: (errorList !== null && errorList !== void 0 ? errorList : []).map((error, index) => (jsx("li", { children: error }, index))) }));
+};
+
+const Input = (_a) => {
+    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"]);
+    const hasErrors = errorList && errorList.length > 0;
+    const handleClear = () => {
+        onChange({ target: { value: '' } });
+    };
+    return (jsxs("div", { className: "form-control", children: [jsx(Label, { label: label, name: name, isRequired: isRequired, hasHiddenLabel: hasHiddenLabel }), jsxs("div", { className: "input-wrapper", children: [iconName && (jsx(Icon, { name: iconName, "data-testid": `${name}-embedded-icon`, className: "embedded-icon" })), 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 && (jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsx(ErrorList, { errorList: errorList, name: name }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+};
+
+const Radio$2 = (_a) => {
+    var { ref, id, label, name, value, onChange, isDisabled } = _a, rest = __rest$1(_a, ["ref", "id", "label", "name", "value", "onChange", "isDisabled"]);
+    return (jsx("div", { className: "form-control", children: jsxs("div", { className: "radio-wrapper", children: [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 })), jsx("label", { htmlFor: id, className: "radio-input-label", "data-testid": `label-radio-input-${name}`, children: label })] }) }));
+};
+
 const StyledAccordion = styled.details `
   summary {
     display: inherit;
@@ -41453,5 +41475,5 @@ const Tooltip = (props) => {
                 openOnClick: props.clickToShow, id: props.for, delayShow: props.delayShow, delayHide: props.delayHide, children: props.children })] }));
 };
 
-export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button$2 as Button, allColors as COLORS, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, GlobalStyles, Icon, IconButton, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio, RadioGroup, RandomLoadingMessage, Row$1 as Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, typography as TYPOGRAPHY, Table$1 as Table, TextInput, TextTruncate, Toggle, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
+export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button$2 as Button, allColors as COLORS, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, GlobalStyles, Icon, IconButton, Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio, RadioGroup, Radio$2 as RadioInput, RandomLoadingMessage, Row$1 as Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, typography as TYPOGRAPHY, Table$1 as Table, TextInput, TextTruncate, Toggle, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
 //# sourceMappingURL=index.esm.js.map