@ndlib/component-library 0.0.93 → 0.0.94

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 (13) hide show
  1. package/dist/components/elements/Fields/Checkbox/index.d.ts +1 -0
  2. package/dist/components/elements/Fields/Checkbox/index.js +3 -3
  3. package/dist/components/elements/Fields/CheckboxGroup/CheckboxGroup.stories.d.ts +1 -0
  4. package/dist/components/elements/Fields/CheckboxGroup/CheckboxGroup.stories.js +5 -2
  5. package/dist/components/elements/Fields/CheckboxGroup/index.d.ts +1 -0
  6. package/dist/components/elements/Fields/CheckboxGroup/index.js +3 -2
  7. package/dist/components/elements/Fields/Radio/index.d.ts +1 -0
  8. package/dist/components/elements/Fields/Radio/index.js +3 -3
  9. package/dist/components/elements/Fields/RadioGroup/RadioGroup.stories.d.ts +1 -0
  10. package/dist/components/elements/Fields/RadioGroup/RadioGroup.stories.js +4 -1
  11. package/dist/components/elements/Fields/RadioGroup/index.d.ts +1 -0
  12. package/dist/components/elements/Fields/RadioGroup/index.js +1 -1
  13. package/package.json +1 -1
package/dist/components/elements/Fields/Checkbox/index.d.ts CHANGED
@@ -3,6 +3,7 @@ import { StyledElementProps } from '../../../../theme';
3
3
  type CheckboxProps = StyledElementProps<HTMLInputElement, {
4
4
  checked: boolean;
5
5
  onChange: (value: boolean) => void;
6
+ disabled?: boolean;
6
7
  }, string>;
7
8
  export declare const Checkbox: React.FC<CheckboxProps>;
8
9
  export {};
package/dist/components/elements/Fields/Checkbox/index.js CHANGED
@@ -12,11 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
12
12
  import { jsx as _jsx } from "theme-ui/jsx-runtime";
13
13
  import { useTheme } from '../../../../theme';
14
14
  export const Checkbox = (_a) => {
15
- var { checked, onChange, sx } = _a, rest = __rest(_a, ["checked", "onChange", "sx"]);
15
+ var { checked, onChange, disabled, sx } = _a, rest = __rest(_a, ["checked", "onChange", "disabled", "sx"]);
16
16
  const theme = useTheme();
17
17
  return (_jsx("input", Object.assign({ type: "checkbox", onChange: (e) => {
18
18
  onChange(e.target.checked);
19
- }, checked: checked, sx: Object.assign({ margin: '0px', height: '1.25rem', width: '1.25rem', cursor: 'pointer', ':hover': {
19
+ }, checked: checked, sx: Object.assign({ margin: '0px', height: '1.25rem', width: '1.25rem', cursor: disabled ? 'not-allowed' : 'pointer', ':hover': {
20
20
  boxShadow: theme.boxShadow,
21
- } }, sx) }, rest)));
21
+ } }, sx), disabled: disabled }, rest)));
22
22
  };
package/dist/components/elements/Fields/CheckboxGroup/CheckboxGroup.stories.d.ts CHANGED
@@ -5,3 +5,4 @@ export default meta;
5
5
  type Story = StoryObj<typeof CheckboxGroup>;
6
6
  export declare const Default: Story;
7
7
  export declare const Columns: Story;
8
+ export declare const Disabled: Story;
package/dist/components/elements/Fields/CheckboxGroup/CheckboxGroup.stories.js CHANGED
@@ -9,14 +9,14 @@ const meta = {
9
9
  };
10
10
  export default meta;
11
11
  const options = [
12
- { value: 'orange', label: 'Orange' },
12
+ { value: 'orange', label: 'Orange', disabled: true },
13
13
  { value: 'apple', label: 'Apple' },
14
14
  { value: 'strawberry', label: 'Strawberry' },
15
15
  { value: 'pineapple', label: 'Pineapple' },
16
16
  ];
17
17
  const StatefulCheckboxGroup = (props) => {
18
18
  const [checked, setChecked] = useState(new Set());
19
- return (_jsx(CheckboxGroup, Object.assign({}, props, { checkedOptions: checked, options: options, onChange: setChecked })));
19
+ return (_jsx(CheckboxGroup, Object.assign({}, props, { checkedOptions: checked, options: props.options || options, onChange: setChecked })));
20
20
  };
21
21
  export const Default = {
22
22
  render: () => (_jsx(Row, { children: _jsx(StatefulCheckboxGroup, {}) })),
@@ -24,3 +24,6 @@ export const Default = {
24
24
  export const Columns = {
25
25
  render: () => (_jsx(Row, { children: _jsx(StatefulCheckboxGroup, { columns: 2 }) })),
26
26
  };
27
+ export const Disabled = {
28
+ render: () => (_jsx(Row, { children: _jsx(StatefulCheckboxGroup, { options: options.map((option, i) => (Object.assign(Object.assign({}, option), { disabled: i === 1 ? true : false }))) }) })),
29
+ };
package/dist/components/elements/Fields/CheckboxGroup/index.d.ts CHANGED
@@ -3,6 +3,7 @@ import { Key } from '../option';
3
3
  type Option<K extends Key = string> = {
4
4
  value: K;
5
5
  label: string;
6
+ disabled?: boolean;
6
7
  };
7
8
  type CheckboxGroupProps<K extends Key = string> = StyledElementProps<HTMLDivElement, {
8
9
  onChange: (value: Set<K>) => void;
package/dist/components/elements/Fields/CheckboxGroup/index.js CHANGED
@@ -18,6 +18,7 @@ import { Group } from '../../Group';
18
18
  import { GROUP_TYPE } from '../../Group';
19
19
  import { Column } from '../../layout/Column';
20
20
  import { TYPOGRAPHY_TYPE, getTypographyStyles, } from '../../../../theme/typography';
21
+ import { COLOR } from '../../../../theme/colors';
21
22
  export function CheckboxGroup(_a) {
22
23
  var { options, checkedOptions, columns: columnsProp, columnStyles, rowStyles, onChange } = _a, rest = __rest(_a, ["options", "checkedOptions", "columns", "columnStyles", "rowStyles", "onChange"]);
23
24
  const columns = columnsProp || 1;
@@ -42,8 +43,8 @@ export function CheckboxGroup(_a) {
42
43
  updatedSet.delete(option.value);
43
44
  }
44
45
  onChange(updatedSet);
45
- }, checked: !!(checkedOptions === null || checkedOptions === void 0 ? void 0 : checkedOptions.has(option.value)), id: labelTargetId, sx: {
46
+ }, checked: !!(checkedOptions === null || checkedOptions === void 0 ? void 0 : checkedOptions.has(option.value)), id: labelTargetId, disabled: option.disabled, sx: {
46
47
  mr: 2,
47
48
  flexShrink: 0,
48
- } }), _jsx(Label, Object.assign({ sx: Object.assign({ cursor: 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM)) }, { children: option.label }))] }))) }), option.value))) }), index))) })));
49
+ } }), _jsx(Label, Object.assign({ sx: Object.assign(Object.assign({ cursor: option.disabled ? 'not-allowed' : 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM)), { color: option.disabled ? COLOR.GRAY : undefined }) }, { children: option.label }))] }))) }), option.value))) }), index))) })));
49
50
  }
package/dist/components/elements/Fields/Radio/index.d.ts CHANGED
@@ -3,6 +3,7 @@ import { StyledElementProps } from '../../../../theme';
3
3
  type RadioProps = StyledElementProps<HTMLInputElement, {
4
4
  checked: boolean;
5
5
  onChange: (value: boolean) => void;
6
+ disabled?: boolean;
6
7
  }, string>;
7
8
  export declare const Radio: React.FC<RadioProps>;
8
9
  export {};
package/dist/components/elements/Fields/Radio/index.js CHANGED
@@ -12,11 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
12
12
  import { jsx as _jsx } from "theme-ui/jsx-runtime";
13
13
  import { useTheme } from '../../../../theme';
14
14
  export const Radio = (_a) => {
15
- var { checked, onChange, sx } = _a, rest = __rest(_a, ["checked", "onChange", "sx"]);
15
+ var { checked, onChange, disabled, sx } = _a, rest = __rest(_a, ["checked", "onChange", "disabled", "sx"]);
16
16
  const theme = useTheme();
17
17
  return (_jsx("input", Object.assign({ type: "radio", onChange: (e) => {
18
18
  onChange(e.target.checked);
19
- }, checked: checked, sx: Object.assign({ margin: '0px', height: '1.25rem', width: '1.25rem', cursor: 'pointer', ':hover': {
19
+ }, checked: checked, sx: Object.assign({ margin: '0px', height: '1.25rem', width: '1.25rem', cursor: disabled ? 'not-allowed' : 'pointer', ':hover': {
20
20
  boxShadow: theme.boxShadow,
21
- } }, sx) }, rest)));
21
+ } }, sx), disabled: disabled }, rest)));
22
22
  };
package/dist/components/elements/Fields/RadioGroup/RadioGroup.stories.d.ts CHANGED
@@ -4,3 +4,4 @@ declare const meta: Meta<typeof RadioGroup>;
4
4
  export default meta;
5
5
  type Story = StoryObj<typeof RadioGroup>;
6
6
  export declare const Default: Story;
7
+ export declare const Disabled: Story;
package/dist/components/elements/Fields/RadioGroup/RadioGroup.stories.js CHANGED
@@ -16,8 +16,11 @@ const options = [
16
16
  ];
17
17
  const StatefulRadioGroup = (props) => {
18
18
  const [checked, setChecked] = useState(new Set());
19
- return (_jsx(RadioGroup, Object.assign({}, props, { checked: checked, options: options, onChange: setChecked })));
19
+ return (_jsx(RadioGroup, Object.assign({}, props, { checked: checked, options: props.options || options, onChange: setChecked })));
20
20
  };
21
21
  export const Default = {
22
22
  render: () => (_jsx(Row, { children: _jsx(StatefulRadioGroup, {}) })),
23
23
  };
24
+ export const Disabled = {
25
+ render: () => (_jsx(Row, { children: _jsx(StatefulRadioGroup, { options: options.map((option, i) => (Object.assign(Object.assign({}, option), { disabled: i === 1 ? true : false }))) }) })),
26
+ };
package/dist/components/elements/Fields/RadioGroup/index.d.ts CHANGED
@@ -3,6 +3,7 @@ import { Key } from '../option';
3
3
  type Option<K extends Key = string> = {
4
4
  value: K;
5
5
  label: string;
6
+ disabled?: boolean;
6
7
  };
7
8
  type RadioGroupProps<K extends Key = string> = StyledElementProps<HTMLDivElement, {
8
9
  onChange: (value: K) => void;
package/dist/components/elements/Fields/RadioGroup/index.js CHANGED
@@ -24,5 +24,5 @@ export function RadioGroup(_a) {
24
24
  }, checked: checked === option.value, id: labelTargetId, sx: {
25
25
  mr: 2,
26
26
  flexShrink: 0,
27
- } }), _jsx(Label, Object.assign({ sx: Object.assign({ cursor: 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM)) }, { children: option.label }))] }))) }), option.value))) })));
27
+ }, disabled: option.disabled }), _jsx(Label, Object.assign({ sx: Object.assign({ cursor: option.disabled ? 'not-allowed' : 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM)) }, { children: option.label }))] }))) }), option.value))) })));
28
28
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ndlib/component-library",
3
- "version": "0.0.93",
3
+ "version": "0.0.94",
4
4
  "type": "module",
5
5
  "sideEffects": false,
6
6
  "files": [