@mrshmllw/smores-react 2.6.2 → 2.7.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 (75) hide show
  1. package/dist/Dropdown/Dropdown.d.ts +5 -11
  2. package/dist/Dropdown/Dropdown.js +18 -7
  3. package/dist/Dropdown/Dropdown.js.map +1 -1
  4. package/dist/Dropdown/Dropdown.stories.d.ts +2 -7
  5. package/dist/Field/Field.d.ts +1 -2
  6. package/dist/Field/Field.js +20 -8
  7. package/dist/Field/Field.js.map +1 -1
  8. package/dist/Field/types/commonFieldTypes.d.ts +0 -1
  9. package/dist/Fieldset/Fieldset.js +7 -2
  10. package/dist/Fieldset/Fieldset.js.map +1 -1
  11. package/dist/NumberInput/NumberInput.d.ts +3 -2
  12. package/dist/NumberInput/NumberInput.js +2 -2
  13. package/dist/NumberInput/NumberInput.js.map +1 -1
  14. package/dist/RadioGroup/RadioElement.d.ts +13 -0
  15. package/dist/RadioGroup/RadioElement.js +50 -0
  16. package/dist/RadioGroup/RadioElement.js.map +1 -0
  17. package/dist/RadioGroup/RadioGroup.d.ts +13 -0
  18. package/dist/RadioGroup/RadioGroup.js +38 -0
  19. package/dist/RadioGroup/RadioGroup.js.map +1 -0
  20. package/dist/RadioGroup/RadioGroup.stories.d.ts +17 -0
  21. package/dist/RadioGroup/RadioGroup.stories.js +39 -0
  22. package/dist/RadioGroup/RadioGroup.stories.js.map +1 -0
  23. package/dist/RadioGroup/RadioItem.d.ts +13 -0
  24. package/dist/RadioGroup/RadioItem.js +48 -0
  25. package/dist/RadioGroup/RadioItem.js.map +1 -0
  26. package/dist/RadioGroup/constants.d.ts +1 -0
  27. package/dist/RadioGroup/constants.js +2 -0
  28. package/dist/RadioGroup/constants.js.map +1 -0
  29. package/dist/RadioGroup/index.d.ts +1 -0
  30. package/dist/RadioGroup/index.js +2 -0
  31. package/dist/RadioGroup/index.js.map +1 -0
  32. package/dist/RadioGroup/types.d.ts +2 -0
  33. package/dist/RadioGroup/types.js +2 -0
  34. package/dist/RadioGroup/types.js.map +1 -0
  35. package/dist/SearchInput/SearchInput.d.ts +3 -2
  36. package/dist/SearchInput/SearchInput.js +3 -2
  37. package/dist/SearchInput/SearchInput.js.map +1 -1
  38. package/dist/Text/Text.d.ts +1 -1
  39. package/dist/TextInput/TextInput.d.ts +3 -2
  40. package/dist/TextInput/TextInput.js +3 -2
  41. package/dist/TextInput/TextInput.js.map +1 -1
  42. package/dist/Textarea/Textarea.d.ts +2 -2
  43. package/dist/Textarea/Textarea.js +2 -2
  44. package/dist/Textarea/Textarea.js.map +1 -1
  45. package/dist/fields/Field/Field.d.ts +9 -0
  46. package/dist/fields/Field/Field.js +18 -0
  47. package/dist/fields/Field/Field.js.map +1 -0
  48. package/dist/fields/Field/index.d.ts +3 -0
  49. package/dist/fields/Field/index.js +2 -0
  50. package/dist/fields/Field/index.js.map +1 -0
  51. package/dist/fields/Fieldset/Fieldset.d.ts +5 -0
  52. package/dist/fields/Fieldset/Fieldset.js +18 -0
  53. package/dist/fields/Fieldset/Fieldset.js.map +1 -0
  54. package/dist/fields/Fieldset/Fieldset.stories.d.ts +10 -0
  55. package/dist/fields/Fieldset/Fieldset.stories.js +22 -0
  56. package/dist/fields/Fieldset/Fieldset.stories.js.map +1 -0
  57. package/dist/fields/Fieldset/index.d.ts +1 -0
  58. package/dist/fields/Fieldset/index.js +2 -0
  59. package/dist/fields/Fieldset/index.js.map +1 -0
  60. package/dist/fields/commonFieldTypes.d.ts +16 -0
  61. package/dist/fields/commonFieldTypes.js +2 -0
  62. package/dist/fields/commonFieldTypes.js.map +1 -0
  63. package/dist/fields/components/InternalField.d.ts +11 -0
  64. package/dist/fields/components/InternalField.js +37 -0
  65. package/dist/fields/components/InternalField.js.map +1 -0
  66. package/dist/fields/components/Placeholder.d.ts +2 -0
  67. package/dist/fields/components/Placeholder.js +25 -0
  68. package/dist/fields/components/Placeholder.js.map +1 -0
  69. package/dist/index.d.ts +2 -1
  70. package/dist/index.js +2 -1
  71. package/dist/index.js.map +1 -1
  72. package/dist/utils/visuallyHidden.d.ts +5 -0
  73. package/dist/utils/visuallyHidden.js +14 -0
  74. package/dist/utils/visuallyHidden.js.map +1 -0
  75. package/package.json +1 -1
@@ -1,17 +1,17 @@
1
- import React, { FocusEvent, FormEvent, RefObject } from 'react';
2
- import { CommonFieldTypes } from '../Field';
1
+ import React, { FocusEvent, FormEvent } from 'react';
2
+ import { CommonFieldProps } from '../fields/Field';
3
3
  export declare type DropdownItem = {
4
4
  optionGroupLabel?: string;
5
5
  label: string;
6
6
  value: string;
7
7
  };
8
- export interface Props extends CommonFieldTypes {
9
- ref?: RefObject<HTMLSelectElement>;
8
+ export interface Props extends CommonFieldProps {
10
9
  placeholder?: string;
11
10
  name?: string;
12
11
  value?: string;
13
12
  defaultValue?: string;
14
13
  disabled?: boolean;
14
+ outlined?: boolean;
15
15
  list: DropdownItem[];
16
16
  onSelect: (element: string) => void;
17
17
  onBlur?: (e: FocusEvent<HTMLSelectElement>) => void;
@@ -24,11 +24,5 @@ declare type TruncateProps = {
24
24
  onInputChange: (e: FormEvent<HTMLSelectElement>) => void;
25
25
  };
26
26
  export declare type DropdownProps = Props & TruncateProps;
27
- export declare const Dropdown: React.ForwardRefExoticComponent<(Pick<Props & {
28
- onSelect: (e: string) => void;
29
- onInputChange?: ((e: FormEvent<HTMLSelectElement>) => void) | undefined;
30
- }, "required" | "error" | "id" | "name" | "value" | "label" | "className" | "disabled" | "list" | "defaultValue" | "placeholder" | "onBlur" | "onSelect" | "m" | "mx" | "my" | "ml" | "mr" | "mt" | "mb" | "outlined" | "errorMsg" | "renderAsTitle" | "assistiveText" | "onInputChange"> | Pick<Props & {
31
- onSelect?: ((e: string) => void) | undefined;
32
- onInputChange: (e: FormEvent<HTMLSelectElement>) => void;
33
- }, "required" | "error" | "id" | "name" | "value" | "label" | "className" | "disabled" | "list" | "defaultValue" | "placeholder" | "onBlur" | "onSelect" | "m" | "mx" | "my" | "ml" | "mr" | "mt" | "mb" | "outlined" | "errorMsg" | "renderAsTitle" | "assistiveText" | "onInputChange">) & React.RefAttributes<HTMLSelectElement>>;
27
+ export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLSelectElement>>;
34
28
  export {};
@@ -13,20 +13,18 @@ import React, { useEffect, useState, forwardRef, } from 'react';
13
13
  import { darken } from 'polished';
14
14
  import styled from 'styled-components';
15
15
  import { theme } from '../theme';
16
- import { Field } from '../Field';
16
+ import { Icon } from '../Icon';
17
+ import { Field } from '../fields/Field';
17
18
  import { useUniqueId } from '../utils/id';
18
19
  export const Dropdown = forwardRef(function Dropdown(_a, ref) {
19
20
  var { id: idProp, placeholder, name, value, defaultValue, disabled = false, list, onSelect, outlined = false, error = false, onInputChange, onBlur } = _a, fieldProps = __rest(_a, ["id", "placeholder", "name", "value", "defaultValue", "disabled", "list", "onSelect", "outlined", "error", "onInputChange", "onBlur"]);
20
21
  const id = useUniqueId(idProp);
21
- const [key, setKey] = useState('');
22
22
  const [hasOptGroups, setHasOptGroups] = useState(false);
23
23
  const [dropdownItemsGroups, setDropdownItemsGroups] = useState([]);
24
24
  useEffect(() => {
25
25
  if (list.length === 1) {
26
26
  onSelect(list[0].value);
27
27
  }
28
- // update 'key' props in order to deselect the active option if a new list passed
29
- list.length > 1 ? setKey(`${list[0].value}-${list.length}`) : '';
30
28
  setHasOptGroups(!!list.find((item) => !!item.optionGroupLabel));
31
29
  const itemsPerGroupLabel = new Map();
32
30
  list.forEach((item) => {
@@ -38,8 +36,8 @@ export const Dropdown = forwardRef(function Dropdown(_a, ref) {
38
36
  });
39
37
  setDropdownItemsGroups(Array.from(itemsPerGroupLabel.values()));
40
38
  }, [list]);
41
- return (React.createElement(Field, Object.assign({}, fieldProps, { showCaret: true, dropdownKey: key, id: id, error: error, outlined: outlined, value: value }),
42
- React.createElement(React.Fragment, null,
39
+ return (React.createElement(Field, Object.assign({}, fieldProps, { id: id, error: error, outlined: outlined }),
40
+ React.createElement(DropdownContainer, null,
43
41
  React.createElement(StyledSelect, { id: id, defaultValue: list.length === 1
44
42
  ? String(list[0].value)
45
43
  : defaultValue
@@ -53,7 +51,9 @@ export const Dropdown = forwardRef(function Dropdown(_a, ref) {
53
51
  dropdownItemsGroups.map((groupItems, i) => {
54
52
  var _a;
55
53
  return hasOptGroups ? (React.createElement("optgroup", { key: i, label: (_a = groupItems[0].optionGroupLabel) !== null && _a !== void 0 ? _a : 'Other' }, groupItems.map((el, j) => (React.createElement("option", { key: `${i}-${j}`, value: el.value }, el.label))))) : (groupItems.map((el, j) => (React.createElement("option", { key: j, value: el.value }, el.label))));
56
- })))));
54
+ })),
55
+ React.createElement(Caret, { outlined: outlined },
56
+ React.createElement(Icon, { render: "caret", color: "subtext", size: 24 })))));
57
57
  });
58
58
  const getErrorOutline = (outlined, error) => {
59
59
  if (error && outlined) {
@@ -111,4 +111,15 @@ const StyledSelect = styled.select `
111
111
 
112
112
  ${({ error, outlined }) => getErrorOutline(outlined, error)};
113
113
  `;
114
+ const DropdownContainer = styled.div `
115
+ position: relative;
116
+ `;
117
+ const Caret = styled.div `
118
+ position: absolute;
119
+ top: 50%;
120
+ z-index: 1;
121
+ right: ${({ outlined }) => (outlined ? '15px' : '0')};
122
+ pointer-events: none;
123
+ transform: translateY(-50%);
124
+ `;
114
125
  //# sourceMappingURL=Dropdown.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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"}
@@ -1,13 +1,8 @@
1
1
  import React from 'react';
2
+ import { DropdownProps } from './Dropdown';
2
3
  declare const _default: {
3
4
  title: string;
4
- component: React.ForwardRefExoticComponent<(Pick<import("./Dropdown").Props & {
5
- onSelect: (e: string) => void;
6
- onInputChange?: ((e: React.FormEvent<HTMLSelectElement>) => void) | undefined;
7
- }, "required" | "error" | "id" | "name" | "value" | "label" | "className" | "disabled" | "list" | "defaultValue" | "placeholder" | "onBlur" | "onSelect" | "m" | "mx" | "my" | "ml" | "mr" | "mt" | "mb" | "outlined" | "errorMsg" | "renderAsTitle" | "assistiveText" | "onInputChange"> | Pick<import("./Dropdown").Props & {
8
- onSelect?: ((e: string) => void) | undefined;
9
- onInputChange: (e: React.FormEvent<HTMLSelectElement>) => void;
10
- }, "required" | "error" | "id" | "name" | "value" | "label" | "className" | "disabled" | "list" | "defaultValue" | "placeholder" | "onBlur" | "onSelect" | "m" | "mx" | "my" | "ml" | "mr" | "mt" | "mb" | "outlined" | "errorMsg" | "renderAsTitle" | "assistiveText" | "onInputChange">) & React.RefAttributes<HTMLSelectElement>>;
5
+ component: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLSelectElement>>;
11
6
  argTypes: {
12
7
  onSelect: {
13
8
  action: string;
@@ -7,7 +7,6 @@ interface FieldProps extends CommonFieldTypes {
7
7
  trailingIcon?: string;
8
8
  dropdownKey?: string;
9
9
  fullHeight?: boolean;
10
- assistiveText?: string;
11
10
  }
12
- export declare const Field: ({ children, renderAsTitle, className, error, id, label, outlined, value, trailingIcon, errorMsg, dropdownKey, required, showCaret, fullHeight, assistiveText, ...marginProps }: FieldProps) => JSX.Element;
11
+ export declare const Field: ({ children, renderAsTitle, className, error, id, label, outlined, value, trailingIcon, errorMsg, dropdownKey, required, showCaret, fullHeight, ...marginProps }: FieldProps) => JSX.Element;
13
12
  export {};
@@ -17,20 +17,17 @@ import { Text } from '../Text';
17
17
  import { Box } from '../Box';
18
18
  import { theme } from '../theme';
19
19
  export const Field = (_a) => {
20
- var { children, renderAsTitle, className = '', error, id, label, outlined = false, value, trailingIcon, errorMsg, dropdownKey, required, showCaret, fullHeight = false, assistiveText } = _a, marginProps = __rest(_a, ["children", "renderAsTitle", "className", "error", "id", "label", "outlined", "value", "trailingIcon", "errorMsg", "dropdownKey", "required", "showCaret", "fullHeight", "assistiveText"]);
20
+ var { children, renderAsTitle, className = '', error, id, label, outlined = false, value, trailingIcon, errorMsg, dropdownKey, required, showCaret, fullHeight = false } = _a, marginProps = __rest(_a, ["children", "renderAsTitle", "className", "error", "id", "label", "outlined", "value", "trailingIcon", "errorMsg", "dropdownKey", "required", "showCaret", "fullHeight"]);
21
21
  return (React.createElement(Container, Object.assign({ className: className }, marginProps),
22
- label && (React.createElement(React.Fragment, null, renderAsTitle ? (React.createElement(Box, { mb: "16px" },
23
- React.createElement(Text, { tag: "label", typo: "heading-small", htmlFor: id, mb: assistiveText ? { custom: 4 } : undefined }, label),
24
- assistiveText && (React.createElement(Text, { tag: "p", color: "subtext" }, assistiveText)))) : (React.createElement(Box, { mb: { custom: outlined ? 4 : 0 } },
25
- React.createElement(Text, { tag: "label", typo: "label", color: "subtext", htmlFor: id },
26
- label,
27
- required && (React.createElement(Text, { tag: "span", typo: "body-small", color: "error" }, "*"))))))),
22
+ label && (React.createElement(Box, { mb: { custom: outlined ? 4 : 0 } }, renderAsTitle ? (React.createElement(Title, { htmlFor: id }, label)) : (React.createElement(Text, { tag: "label", color: "subtext", typo: "label", htmlFor: id },
23
+ label,
24
+ required && React.createElement(Asterisk, null, "*"))))),
28
25
  React.createElement(Content, { fullHeight: fullHeight, value: value, outlined: outlined, error: error, key: dropdownKey !== null && dropdownKey !== void 0 ? dropdownKey : null },
29
26
  children,
30
27
  showCaret && (React.createElement(Caret, { outlined: outlined },
31
28
  React.createElement(Icon, { render: "caret", color: "subtext", size: 24 })))),
32
29
  trailingIcon && React.createElement(Icon, { render: trailingIcon, color: "subtext" }),
33
- error && (React.createElement(Text, { tag: "span", typo: "caption", color: "error", mt: "8px" }, errorMsg))));
30
+ error && React.createElement(ErrorBox, null, errorMsg)));
34
31
  };
35
32
  const Container = styled(Box) `
36
33
  display: flex;
@@ -61,6 +58,17 @@ const Content = styled.div `
61
58
  border-color: ${theme.colors.outline};
62
59
  `}
63
60
  `;
61
+ const ErrorBox = styled.span `
62
+ margin-top: 7px;
63
+ color: ${theme.colors.error};
64
+ font-size: 12px;
65
+ `;
66
+ const Title = styled.label `
67
+ font-size: 20px;
68
+ line-height: 26px;
69
+ font-weight: 500;
70
+ padding-bottom: 8px;
71
+ `;
64
72
  const Caret = styled.div `
65
73
  position: absolute;
66
74
  top: 50%;
@@ -69,4 +77,8 @@ const Caret = styled.div `
69
77
  pointer-events: none;
70
78
  transform: translateY(-50%);
71
79
  `;
80
+ const Asterisk = styled.span `
81
+ font-size: 14px;
82
+ color: ${theme.colors.error};
83
+ `;
72
84
  //# sourceMappingURL=Field.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Field.js","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAahC,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAiBT,EAAE,EAAE;QAjBK,EACpB,QAAQ,EACR,aAAa,EACb,SAAS,GAAG,EAAE,EACd,KAAK,EACL,EAAE,EACF,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,aAAa,OAEF,EADR,WAAW,cAhBM,0LAiBrB,CADe;IAEd,OAAO,CACL,oBAAC,SAAS,kBAAC,SAAS,EAAE,SAAS,IAAM,WAAW;QAC7C,KAAK,IAAI,CACR,0CACG,aAAa,CAAC,CAAC,CAAC,CACf,oBAAC,GAAG,IAAC,EAAE,EAAC,MAAM;YACZ,oBAAC,IAAI,IACH,GAAG,EAAC,OAAO,EACX,IAAI,EAAC,eAAe,EACpB,OAAO,EAAE,EAAE,EACX,EAAE,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,IAE5C,KAAK,CACD;YAEN,aAAa,IAAI,CAChB,oBAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,SAAS,IAC1B,aAAa,CACT,CACR,CACG,CACP,CAAC,CAAC,CAAC,CACF,oBAAC,GAAG,IAAC,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;YACnC,oBAAC,IAAI,IAAC,GAAG,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,EAAE;gBACvD,KAAK;gBACL,QAAQ,IAAI,CACX,oBAAC,IAAI,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,OAAO,QAEzC,CACR,CACI,CACH,CACP,CACA,CACJ;QAED,oBAAC,OAAO,IACN,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,IAAI;YAEvB,QAAQ;YACR,SAAS,IAAI,CACZ,oBAAC,KAAK,IAAC,QAAQ,EAAE,QAAQ;gBACvB,oBAAC,IAAI,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,EAAE,GAAI,CAC3C,CACT,CACO;QACT,YAAY,IAAI,oBAAC,IAAI,IAAC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAC,SAAS,GAAG;QAE9D,KAAK,IAAI,CACR,oBAAC,IAAI,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,OAAO,EAAC,EAAE,EAAC,KAAK,IACnD,QAAQ,CACJ,CACR,CACS,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAuB;;;;;CAKnD,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAKxB;;kBAEgB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAC5B,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;sBAC5B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACnC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;YACzC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;;;oBAI1C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAC5B,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;;IAGhE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjB,QAAQ;IACR;;;KAGC;;IAED,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACd,KAAK;IACL,KAAK,IAAI,EAAE;IACX;oBACgB,KAAK,CAAC,MAAM,CAAC,OAAO;KACnC;CACJ,CAAA;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAuB;;;;WAIpC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC;;;CAGrD,CAAA"}
1
+ {"version":3,"file":"Field.js","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"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"}
@@ -8,5 +8,4 @@ export interface CommonFieldTypes extends MarginProps {
8
8
  renderAsTitle?: boolean;
9
9
  className?: string;
10
10
  outlined?: boolean;
11
- assistiveText?: string;
12
11
  }
@@ -10,13 +10,18 @@ var __rest = (this && this.__rest) || function (s, e) {
10
10
  return t;
11
11
  };
12
12
  import React from 'react';
13
+ import styled from 'styled-components';
13
14
  import { Box } from '../Box';
14
- import { Text } from '../Text';
15
15
  export const Fieldset = (_a) => {
16
16
  var { children, label, outlined = false } = _a, marginProps = __rest(_a, ["children", "label", "outlined"]);
17
17
  return (React.createElement(Box, Object.assign({ as: "fieldset" }, marginProps),
18
18
  React.createElement(Box, { mb: { custom: outlined ? 4 : 0 } },
19
- React.createElement(Text, { tag: "legend", typo: "heading-small", mb: "16px" }, label)),
19
+ React.createElement(Legend, null, label)),
20
20
  children));
21
21
  };
22
+ const Legend = styled.legend `
23
+ font-size: 16px;
24
+ font-weight: bold;
25
+ padding-bottom: 8px;
26
+ `;
22
27
  //# sourceMappingURL=Fieldset.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Fieldset.js","sourceRoot":"","sources":["../../src/Fieldset/Fieldset.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAQ9B,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAKT,EAAE,EAAE;QALK,EACvB,QAAQ,EACR,KAAK,EACL,QAAQ,GAAG,KAAK,OAEF,EADX,WAAW,cAJS,iCAKxB,CADe;IAEd,OAAO,CACL,oBAAC,GAAG,kBAAC,EAAE,EAAC,UAAU,IAAK,WAAW;QAChC,oBAAC,GAAG,IAAC,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;YACnC,oBAAC,IAAI,IAAC,GAAG,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,EAAC,EAAE,EAAC,MAAM,IAC9C,KAAK,CACD,CACH;QAEL,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA"}
1
+ {"version":3,"file":"Fieldset.js","sourceRoot":"","sources":["../../src/Fieldset/Fieldset.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAGtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAQ5B,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAKT,EAAE,EAAE;QALK,EACvB,QAAQ,EACR,KAAK,EACL,QAAQ,GAAG,KAAK,OAEF,EADX,WAAW,cAJS,iCAKxB,CADe;IAEd,OAAO,CACL,oBAAC,GAAG,kBAAC,EAAE,EAAC,UAAU,IAAK,WAAW;QAChC,oBAAC,GAAG,IAAC,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;YACnC,oBAAC,MAAM,QAAE,KAAK,CAAU,CACpB;QAEL,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;;;;CAI3B,CAAA"}
@@ -1,6 +1,6 @@
1
1
  import React, { FocusEvent, FormEvent } from 'react';
2
- import { CommonFieldTypes } from '../Field';
3
- export interface Props extends CommonFieldTypes {
2
+ import { CommonFieldProps } from '../fields/Field';
3
+ export interface Props extends CommonFieldProps {
4
4
  type?: 'number' | 'tel';
5
5
  placeholder: string;
6
6
  name?: string;
@@ -15,6 +15,7 @@ export interface Props extends CommonFieldTypes {
15
15
  roundCurrency?: boolean;
16
16
  step?: number;
17
17
  disabled?: boolean;
18
+ outlined?: boolean;
18
19
  }
19
20
  /** on change or on input required */
20
21
  declare type InputProps = {
@@ -14,7 +14,7 @@ import styled from 'styled-components';
14
14
  import { Box } from '../Box';
15
15
  import { Text } from '../Text';
16
16
  import { Icon } from '../Icon';
17
- import { Field } from '../Field';
17
+ import { Field } from '../fields/Field';
18
18
  import { theme } from '../theme';
19
19
  import { useUniqueId } from '../utils/id';
20
20
  export const NumberInput = forwardRef(function NumberInput(_a, ref) {
@@ -92,7 +92,7 @@ export const NumberInput = forwardRef(function NumberInput(_a, ref) {
92
92
  onChange(roundNumber(currentValue));
93
93
  }
94
94
  };
95
- return (React.createElement(Field, Object.assign({}, fieldProps, { id: id, error: error, outlined: outlined, value: value }),
95
+ return (React.createElement(Field, Object.assign({}, fieldProps, { id: id, error: error, outlined: outlined }),
96
96
  React.createElement(Box, { flex: true },
97
97
  prefix && (React.createElement(SymbolText, { tag: "span", color: "secondary", outlined: outlined, prefix: prefix }, prefix)),
98
98
  React.createElement(Input, { error: error, outlined: outlined, disabled: disabled, type: type, id: id, name: name, placeholder: placeholder, value: value, prefix: prefix, onChange: (e) => {
@@ -1 +1 @@
1
- {"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAGZ,UAAU,GAGX,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAoB,MAAM,UAAU,CAAA;AAElD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAkCzC,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CAAC,SAAS,WAAW,CACxD,EAqBmB,EACnB,GAAmC;QAtBnC,EACE,EAAE,EAAE,MAAM,EACV,IAAI,GAAG,QAAQ,EACf,WAAW,EACX,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,MAAM,EACN,MAAM,EACN,MAAM,EACN,aAAa,EACb,GAAG,GAAG,CAAC,MAAM,EACb,GAAG,GAAG,MAAM,EACZ,MAAM,EACN,IAAI,GAAG,CAAC,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,KAAK,EACb,QAAQ,GAAG,KAAK,OAEC,EADd,UAAU,cApBf,2MAqBC,CADc;IAIf,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAE9B,uEAAuE;IACvE,MAAM,SAAS,GAAG,CAAC,KAAa,EAAE,EAAE;QAClC,IAAI,GAAG,IAAI,KAAK,GAAG,GAAG,EAAE;YACtB,OAAO,KAAK,CAAA;SACb;QAED,IAAI,GAAG,IAAI,KAAK,GAAG,GAAG,EAAE;YACtB,OAAO,KAAK,CAAA;SACb;QAED,OAAO,IAAI,CAAA;IACb,CAAC,CAAA;IAED,yCAAyC;IACzC,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,EAAE;QACpC,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAA;IACtC,CAAC,CAAA;IAED,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAU,EAAE;QAClD,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE;YACpB,OAAO,KAAK,CAAA;SACb;QAED,oEAAoE;QACpE,MAAM,IAAI,GAAG,GAAG,GAAG,KAAK,CAAA;QACxB,MAAM,IAAI,GAAG,GAAG,GAAG,KAAK,CAAA;QAExB,iDAAiD;QACjD,IAAI,CAAC,IAAI,EAAE;YACT,OAAO,GAAG,CAAA;SACX;QAED,iDAAiD;QACjD,IAAI,CAAC,IAAI,EAAE;YACT,OAAO,GAAG,CAAA;SACX;QAED,0EAA0E;QAC1E,kHAAkH;QAClH,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAA;IACpD,CAAC,CAAA;IAED,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE;QACrC,IAAI,QAAQ,KAAK,SAAS;YAAE,OAAM;QAClC,MAAM,WAAW,GAAG,EAAE,CAAA;QAEtB,IAAI,KAAK,KAAK,WAAW,EAAE;YACzB,QAAQ,CAAC,KAAK,CAAC,CAAA;SAChB;aAAM;YACL,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;YAEpC,MAAM,MAAM,GAAG,aAAa;gBAC1B,CAAC,CAAC,WAAW,CAAC,cAAc,CAAC;gBAC7B,CAAC,CAAC,cAAc,CAAA;YAElB,IAAI,MAAM,EAAE;gBACV,QAAQ,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAA;aACpC;iBAAM;gBACL,QAAQ,CAAC,MAAM,CAAC,CAAA;aACjB;SACF;IACH,CAAC,CAAA;IAED,sEAAsE;IACtE,MAAM,cAAc,GAAG,CAAC,KAAoC,EAAE,EAAE;QAC9D,IAAI,QAAQ,KAAK,SAAS;YAAE,OAAM;QAClC,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,CAAA;QAEzC,IAAI,SAAS,CAAC,YAAY,CAAC,EAAE;YAC3B,QAAQ,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAA;SACpC;IACH,CAAC,CAAA;IAED,MAAM,cAAc,GAAG,CAAC,KAAoC,EAAE,EAAE;QAC9D,IAAI,QAAQ,KAAK,SAAS;YAAE,OAAM;QAClC,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,CAAA;QAEzC,IAAI,SAAS,CAAC,YAAY,CAAC,EAAE;YAC3B,QAAQ,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAA;SACpC;IACH,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,KAAK,oBACA,UAAU,IACd,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK;QAEZ,oBAAC,GAAG,IAAC,IAAI;YACN,MAAM,IAAI,CACT,oBAAC,UAAU,IACT,GAAG,EAAC,MAAM,EACV,KAAK,EAAC,WAAW,EACjB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,IAEb,MAAM,CACI,CACd;YAED,oBAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,CAAC,CAA8B,EAAE,EAAE;oBAC3C,QAAQ,IAAI,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;oBAC/C,aAAa,IAAI,aAAa,CAAC,CAAC,CAAC,CAAA;gBACnC,CAAC,EACD,MAAM,EAAE,MAAM,GACd;YAED,MAAM,IAAI,CACT,oBAAC,UAAU,IACT,GAAG,EAAC,MAAM,EACV,KAAK,EAAC,WAAW,EACjB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,IAEb,MAAM,CACI,CACd;YAEA,QAAQ,IAAI,IAAI,GAAG,CAAC,IAAI,CACvB,oBAAC,OAAO,IAAC,QAAQ,EAAE,QAAQ;gBACzB,oBAAC,aAAa,IAAC,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,QAAQ;oBACxD,oBAAC,IAAI,IAAC,MAAM,EAAC,OAAO,EAAC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,EAAE,GAAI,CAChD;gBAEhB,oBAAC,aAAa,IAAC,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,QAAQ;oBACxD,oBAAC,IAAI,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,EAAE,GAAI,CACnC,CACR,CACX;YAEA,YAAY,IAAI,oBAAC,UAAU,IAAC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAC,SAAS,GAAG,CACjE,CACA,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AAUF,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAQ;;;;kBAIhB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAC5B,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;WACvC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;;;;YAI9D,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;aACvD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;aAC1C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC;;;;aAItD,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;;;;;;;;;oBAcb,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAC5B,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;;;IAGhD,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CACxB,QAAQ;IACR;0BACsB,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;;;KAGtE;;IAED,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACd,KAAK;IACL,KAAK,KAAK,EAAE;IACZ;sBACkB,KAAK,CAAC,MAAM,CAAC,OAAO;KACrC;;MAEC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CACjB,MAAM;IACN;;;;KAIC;CACJ,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;CAG9B,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAI7B;;;;;;;IAOE,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,CACzB,QAAQ;IACR;;cAEU,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;KAC7B;;IAED,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CACzB,MAAM;IACN;cACU,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;KACrC;CACJ,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAExB;;;SAGO,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;CAEtD,CAAA;AAMD,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAS;;;;;;YAMhC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;CACnE,CAAA"}
1
+ {"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,13 @@
1
+ /// <reference types="react" />
2
+ import { MarginProps } from '../utils/space';
3
+ import { BaseValueType } from './types';
4
+ declare type RadioElementProps<Value extends BaseValueType> = {
5
+ name: string;
6
+ id: string;
7
+ value: Value;
8
+ checked: boolean;
9
+ onChange: (value: Value) => void;
10
+ isError: boolean;
11
+ } & MarginProps;
12
+ export declare const RadioElement: <Value extends BaseValueType>({ name, id, value, checked, onChange, isError, ...marginProps }: RadioElementProps<Value>) => JSX.Element;
13
+ export {};
@@ -0,0 +1,50 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import React from 'react';
13
+ import styled from 'styled-components';
14
+ import { theme } from '../theme';
15
+ import { visuallyHidden } from '../utils/visuallyHidden';
16
+ import { focusOutline } from '../utils/focusOutline';
17
+ import { Box } from '../Box';
18
+ export const RadioElement = (_a) => {
19
+ var { name, id, value, checked, onChange, isError } = _a, marginProps = __rest(_a, ["name", "id", "value", "checked", "onChange", "isError"]);
20
+ return (React.createElement(React.Fragment, null,
21
+ React.createElement(StyledInput, { type: "radio", name: name, id: id, value: `${value}`, checked: checked, onChange: () => onChange(value) }),
22
+ React.createElement(RadioCircle, Object.assign({ isError: isError, checked: checked }, marginProps))));
23
+ };
24
+ const StyledInput = styled.input `
25
+ ${visuallyHidden}
26
+ `;
27
+ const RADIO_SIZE = 24;
28
+ const RadioCircle = styled(Box) `
29
+ flex-shrink: 0;
30
+ width: ${RADIO_SIZE}px;
31
+ height: ${RADIO_SIZE}px;
32
+ border-radius: ${RADIO_SIZE}px;
33
+ background-color: ${theme.colors.white};
34
+ border: 2px solid
35
+ ${({ isError }) => (isError ? theme.colors.error : theme.colors.subtext)};
36
+
37
+ ${({ checked, isError }) => !checked &&
38
+ !isError &&
39
+ `
40
+ &:hover {
41
+ border: 2px solid ${theme.colors.secondary};
42
+ }
43
+ `}
44
+
45
+ ${({ checked, isError }) => checked &&
46
+ `border: 8px solid ${isError ? theme.colors.error : theme.colors.secondary};`}
47
+
48
+ ${focusOutline({ selector: `${StyledInput}:focus-visible + &` })}
49
+ `;
50
+ //# sourceMappingURL=RadioElement.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"RadioElement.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioElement.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAY5B,MAAM,CAAC,MAAM,YAAY,GAAG,CAA8B,EAQ/B,EAAE,EAAE;QAR2B,EACxD,IAAI,EACJ,EAAE,EACF,KAAK,EACL,OAAO,EACP,QAAQ,EACR,OAAO,OAEkB,EADtB,WAAW,cAP0C,yDAQzD,CADe;IAEd,OAAO,CACL;QACE,oBAAC,WAAW,IACV,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,GAAG,KAAK,EAAE,EACjB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GAC/B;QACF,oBAAC,WAAW,kBAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,IAAM,WAAW,EAAI,CACnE,CACJ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;IAC5B,cAAc;CACjB,CAAA;AAED,MAAM,UAAU,GAAG,EAAE,CAAA;AAErB,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAwC;;WAE5D,UAAU;YACT,UAAU;mBACH,UAAU;sBACP,KAAK,CAAC,MAAM,CAAC,KAAK;;MAElC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;IAExE,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,CACzB,CAAC,OAAO;IACR,CAAC,OAAO;IACR;;0BAEsB,KAAK,CAAC,MAAM,CAAC,SAAS;;GAE7C;;IAEC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,CACzB,OAAO;IACP,qBACE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,SAC9C,GAAG;;IAEH,YAAY,CAAC,EAAE,QAAQ,EAAE,GAAG,WAAW,oBAAoB,EAAE,CAAC;CACjE,CAAA"}
@@ -0,0 +1,13 @@
1
+ /// <reference types="react" />
2
+ import { CommonFieldProps } from '../fields/commonFieldTypes';
3
+ import { BaseValueType, DisplayType } from './types';
4
+ export declare type RadioGroupProps<Value extends BaseValueType = BaseValueType> = {
5
+ options: Array<{
6
+ label: string;
7
+ value: Value;
8
+ }>;
9
+ onChange: (value: Value) => void;
10
+ value: Value;
11
+ displayType?: DisplayType;
12
+ } & CommonFieldProps;
13
+ export declare const RadioGroup: <Value extends BaseValueType>({ options, onChange, value, displayType, renderAsTitle, error, ...fieldProps }: RadioGroupProps<Value>) => JSX.Element;
@@ -0,0 +1,38 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import React from 'react';
13
+ import styled from 'styled-components';
14
+ import { useUniqueId } from '../utils/id';
15
+ import { Fieldset } from '../fields/Fieldset';
16
+ import { RadioItem } from './RadioItem';
17
+ import { ITEM_GAP } from './constants';
18
+ export const RadioGroup = (_a) => {
19
+ var { options, onChange, value, displayType = 'normal', renderAsTitle = false, error = false } = _a, fieldProps = __rest(_a, ["options", "onChange", "value", "displayType", "renderAsTitle", "error"]);
20
+ const name = useUniqueId();
21
+ return (React.createElement(Fieldset, Object.assign({ renderAsTitle: renderAsTitle, error: error }, fieldProps),
22
+ React.createElement(RadioItemList, { displayType: displayType }, options.map((option) => (React.createElement(RadioItem, { key: `${option.value}`, name: name, label: option.label, value: option.value, checked: option.value === value, onChange: onChange, displayType: displayType, isError: error }))))));
23
+ };
24
+ const RadioItemList = styled.div `
25
+ display: flex;
26
+ gap: ${ITEM_GAP}px;
27
+
28
+ ${({ displayType }) => {
29
+ if (displayType === 'horizontal-card') {
30
+ return `
31
+ flex-direction: row;
32
+ flex-wrap: wrap;
33
+ `;
34
+ }
35
+ return `flex-direction: column;`;
36
+ }}
37
+ `;
38
+ //# sourceMappingURL=RadioGroup.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAE7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAYtC,MAAM,CAAC,MAAM,UAAU,GAAG,CAA8B,EAQ/B,EAAE,EAAE;QAR2B,EACtD,OAAO,EACP,QAAQ,EACR,KAAK,EACL,WAAW,GAAG,QAAQ,EACtB,aAAa,GAAG,KAAK,EACrB,KAAK,GAAG,KAAK,OAEU,EADpB,UAAU,cAPyC,yEAQvD,CADc;IAEb,MAAM,IAAI,GAAG,WAAW,EAAE,CAAA;IAE1B,OAAO,CACL,oBAAC,QAAQ,kBAAC,aAAa,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,IAAM,UAAU;QAClE,oBAAC,aAAa,IAAC,WAAW,EAAE,WAAW,IACpC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,EACtB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,MAAM,CAAC,KAAK,KAAK,KAAK,EAC/B,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,KAAK,GACd,CACH,CAAC,CACY,CACP,CACZ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAsC;;SAE7D,QAAQ;;IAEb,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE;IACpB,IAAI,WAAW,KAAK,iBAAiB,EAAE;QACrC,OAAO;;;OAGN,CAAA;KACF;IAED,OAAO,yBAAyB,CAAA;AAClC,CAAC;CACF,CAAA"}
@@ -0,0 +1,17 @@
1
+ /// <reference types="react" />
2
+ import { RadioGroupProps } from './RadioGroup';
3
+ declare const _default: {
4
+ title: string;
5
+ component: <Value extends import("./types").BaseValueType>({ options, onChange, value, displayType, renderAsTitle, error, ...fieldProps }: RadioGroupProps<Value>) => JSX.Element;
6
+ argTypes: {
7
+ onChange: {
8
+ action: string;
9
+ };
10
+ };
11
+ };
12
+ export default _default;
13
+ export declare const Default: any;
14
+ export declare const Vertical: any;
15
+ export declare const Horizontal: any;
16
+ export declare const WithError: any;
17
+ export declare const Interactive: any;
@@ -0,0 +1,39 @@
1
+ import React, { useState } from 'react';
2
+ import { RadioGroup } from './RadioGroup';
3
+ export default {
4
+ title: 'RadioGroup',
5
+ component: RadioGroup,
6
+ argTypes: { onChange: { action: 'clicked' } },
7
+ };
8
+ const options = [
9
+ { label: 'Social', value: 'social' },
10
+ { label: 'Social and commuting', value: 'social/commuting' },
11
+ {
12
+ label: 'All the above, and I drive for work',
13
+ value: 'social/commuting/work',
14
+ },
15
+ { label: 'It’s a commercial vehicle', value: 'commercial' },
16
+ ];
17
+ const defaultArgs = {
18
+ label: 'What do you use it for?',
19
+ onChange: (value) => console.log(value),
20
+ value: options[0].value,
21
+ options,
22
+ displayType: 'normal',
23
+ };
24
+ const Template = (props) => React.createElement(RadioGroup, Object.assign({}, props));
25
+ export const Default = Template.bind({});
26
+ Default.args = defaultArgs;
27
+ export const Vertical = Template.bind({});
28
+ Vertical.args = Object.assign(Object.assign({}, defaultArgs), { displayType: 'vertical-card' });
29
+ export const Horizontal = Template.bind({});
30
+ Horizontal.args = Object.assign(Object.assign({}, defaultArgs), { displayType: 'horizontal-card' });
31
+ export const WithError = Template.bind({});
32
+ WithError.args = Object.assign(Object.assign({}, defaultArgs), { error: true, errorMsg: 'something', displayType: 'horizontal-card' });
33
+ const InteractiveStory = (props) => {
34
+ const [value, setValue] = useState('');
35
+ return (React.createElement(RadioGroup, Object.assign({}, props, { onChange: (nextValue) => setValue(nextValue), value: value })));
36
+ };
37
+ export const Interactive = InteractiveStory.bind({});
38
+ Interactive.args = defaultArgs;
39
+ //# sourceMappingURL=RadioGroup.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"RadioGroup.stories.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAA;AAE1D,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAA;AAED,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;IACpC,EAAE,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,kBAAkB,EAAE;IAC5D;QACE,KAAK,EAAE,qCAAqC;QAC5C,KAAK,EAAE,uBAAuB;KAC/B;IACD,EAAE,KAAK,EAAE,2BAA2B,EAAE,KAAK,EAAE,YAAY,EAAE;CAC5D,CAAA;AAED,MAAM,WAAW,GAAoB;IACnC,KAAK,EAAE,yBAAyB;IAChC,QAAQ,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;IAC/C,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK;IACvB,OAAO;IACP,WAAW,EAAE,QAAQ;CACtB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAsB,EAAE,EAAE,CAAC,oBAAC,UAAU,oBAAK,KAAK,EAAI,CAAA;AAEtE,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG,WAAW,CAAA;AAE1B,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzC,QAAQ,CAAC,IAAI,mCACR,WAAW,KACd,WAAW,EAAE,eAAe,GAC7B,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE3C,UAAU,CAAC,IAAI,mCACV,WAAW,KACd,WAAW,EAAE,iBAAiB,GAC/B,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,SAAS,CAAC,IAAI,mCACT,WAAW,KACd,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,WAAW,EACrB,WAAW,EAAE,iBAAiB,GAC/B,CAAA;AAED,MAAM,gBAAgB,GAAG,CAAC,KAA8B,EAAE,EAAE;IAC1D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAEtC,OAAO,CACL,oBAAC,UAAU,oBACL,KAAK,IACT,QAAQ,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,EAC5C,KAAK,EAAE,KAAK,IACZ,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEpD,WAAW,CAAC,IAAI,GAAG,WAAW,CAAA"}
@@ -0,0 +1,13 @@
1
+ /// <reference types="react" />
2
+ import { BaseValueType, DisplayType } from './types';
3
+ declare type RadioItemProps<Value extends BaseValueType = BaseValueType> = {
4
+ name: string;
5
+ value: Value;
6
+ label: string;
7
+ checked: boolean;
8
+ onChange: (value: Value) => void;
9
+ displayType: DisplayType;
10
+ isError: boolean;
11
+ };
12
+ export declare const RadioItem: <Value extends BaseValueType>({ name, label, value, checked, onChange, displayType, isError, }: RadioItemProps<Value>) => JSX.Element;
13
+ export {};
@@ -0,0 +1,48 @@
1
+ import React from 'react';
2
+ import styled, { css } from 'styled-components';
3
+ import { useUniqueId } from '../utils/id';
4
+ import { theme } from '../theme';
5
+ import { RadioElement } from './RadioElement';
6
+ import { ITEM_GAP } from './constants';
7
+ export const RadioItem = ({ name, label, value, checked, onChange, displayType, isError, }) => {
8
+ const id = useUniqueId();
9
+ return (React.createElement(Wrapper, { htmlFor: id, checked: checked, displayType: displayType },
10
+ React.createElement(RadioElement, { name: name, id: id, value: value, checked: checked, onChange: onChange, isError: isError, mr: "8px" }),
11
+ React.createElement(RadioText, { isError: isError }, label)));
12
+ };
13
+ const Wrapper = styled.label `
14
+ display: flex;
15
+ flex-direction: row;
16
+ align-items: flex-start;
17
+
18
+ ${({ displayType, checked }) => css `
19
+ ${(displayType === 'horizontal-card' ||
20
+ displayType === 'vertical-card') &&
21
+ css `
22
+ border-radius: 8px;
23
+ background-color: ${theme.colors[checked ? 'white' : 'background']};
24
+ padding: ${checked ? '10px' : '12px'};
25
+ ${checked && `border: 2px solid ${theme.colors.secondary};`}
26
+ `}
27
+ ${displayType === 'horizontal-card' &&
28
+ css `
29
+ width: 100%;
30
+
31
+ @media (min-width: 420px) {
32
+ width: calc(50% - ${ITEM_GAP / 2}px);
33
+ }
34
+
35
+ @media (min-width: 768px) {
36
+ width: 240px;
37
+ }
38
+ `}
39
+ `}
40
+ `;
41
+ const RadioText = styled.span `
42
+ line-height: 16px;
43
+ font-size: 16px;
44
+ font-weight: ${theme.font.weight.medium};
45
+ color: ${({ isError }) => isError ? theme.colors.error : theme.colors.secondary};
46
+ margin-top: 4px;
47
+ `;
48
+ //# sourceMappingURL=RadioItem.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"RadioItem.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAYtC,MAAM,CAAC,MAAM,SAAS,GAAG,CAA8B,EACrD,IAAI,EACJ,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAW,EACX,OAAO,GACe,EAAE,EAAE;IAC1B,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;IACxB,OAAO,CACL,oBAAC,OAAO,IAAC,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW;QAC9D,oBAAC,YAAY,IACX,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAC,KAAK,GACR;QACF,oBAAC,SAAS,IAAC,OAAO,EAAE,OAAO,IAAG,KAAK,CAAa,CACxC,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAiD;;;;;IAKzE,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,CAC7B,GAAG,CAAA;QACC,CAAC,WAAW,KAAK,iBAAiB;IAClC,WAAW,KAAK,eAAe,CAAC;IAClC,GAAG,CAAA;;4BAEmB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;mBACvD,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;UAClC,OAAO,IAAI,qBAAqB,KAAK,CAAC,MAAM,CAAC,SAAS,GAAG;OAC5D;QACC,WAAW,KAAK,iBAAiB;IACnC,GAAG,CAAA;;;;8BAIqB,QAAQ,GAAG,CAAC;;;;;;OAMnC;KACF;CACJ,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAsB;;;iBAGlC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;WAC9B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CACvB,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS;;CAExD,CAAA"}
@@ -0,0 +1 @@
1
+ export declare const ITEM_GAP = 12;
@@ -0,0 +1,2 @@
1
+ export const ITEM_GAP = 12;
2
+ //# sourceMappingURL=constants.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/RadioGroup/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG,EAAE,CAAA"}
@@ -0,0 +1 @@
1
+ export * from './RadioGroup';
@@ -0,0 +1,2 @@
1
+ export * from './RadioGroup';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/RadioGroup/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}
@@ -0,0 +1,2 @@
1
+ export declare type DisplayType = 'normal' | 'vertical-card' | 'horizontal-card';
2
+ export declare type BaseValueType = string | boolean;
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=types.js.map