@mrshmllw/smores-react 2.1.26 → 2.2.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/dist/CheckBoxGroup/CheckBox.d.ts +9 -0
- package/dist/CheckBoxGroup/CheckBox.js +67 -0
- package/dist/CheckBoxGroup/CheckBox.js.map +1 -0
- package/dist/ConfirmationRadioButtons/Confirmation.js +6 -5
- package/dist/ConfirmationRadioButtons/Confirmation.js.map +1 -1
- package/dist/ConfirmationRadioButtons/Confirmation.stories.d.ts +1 -0
- package/dist/ConfirmationRadioButtons/Confirmation.stories.js +8 -0
- package/dist/ConfirmationRadioButtons/Confirmation.stories.js.map +1 -1
- package/dist/Dropdown/Dropdown.d.ts +7 -33
- package/dist/Dropdown/Dropdown.js +22 -48
- package/dist/Dropdown/Dropdown.js.map +1 -1
- package/dist/Dropdown/Dropdown.stories.d.ts +3 -39
- package/dist/Field/Field.d.ts +12 -0
- package/dist/Field/Field.js +68 -0
- package/dist/Field/Field.js.map +1 -0
- package/dist/Field/index.d.ts +1 -0
- package/dist/Field/index.js +2 -0
- package/dist/Field/index.js.map +1 -0
- package/dist/Field/types/commonFieldTypes.d.ts +10 -0
- package/dist/Field/types/commonFieldTypes.js +2 -0
- package/dist/Field/types/commonFieldTypes.js.map +1 -0
- package/dist/Fieldset/Fieldset.d.ts +8 -0
- package/dist/Fieldset/Fieldset.js +15 -0
- package/dist/Fieldset/Fieldset.js.map +1 -0
- package/dist/Fieldset/index.d.ts +1 -0
- package/dist/Fieldset/index.js +2 -0
- package/dist/Fieldset/index.js.map +1 -0
- package/dist/SearchInput/SearchInput.d.ts +3 -12
- package/dist/SearchInput/SearchInput.js +12 -21
- package/dist/SearchInput/SearchInput.js.map +1 -1
- package/dist/SupportMessage/SupportMessage.d.ts +2 -2
- package/dist/SupportMessage/SupportMessage.js.map +1 -1
- package/dist/SupportMessage/SupportMessage.stories.d.ts +1 -0
- package/dist/SupportMessage/SupportMessage.stories.js +9 -0
- package/dist/SupportMessage/SupportMessage.stories.js.map +1 -1
- package/dist/SupportMessage/SupportMessage.test.js +8 -0
- package/dist/SupportMessage/SupportMessage.test.js.map +1 -1
- package/dist/Tag/Tag.d.ts +11 -2
- package/dist/Tag/Tag.js +5 -3
- package/dist/Tag/Tag.js.map +1 -1
- package/dist/Tag/Tag.stories.d.ts +1 -0
- package/dist/Tag/Tag.stories.js +6 -0
- package/dist/Tag/Tag.stories.js.map +1 -1
- package/dist/TextInput/TextInput.d.ts +5 -23
- package/dist/TextInput/TextInput.js +19 -49
- package/dist/TextInput/TextInput.js.map +1 -1
- package/dist/Textarea/Textarea.d.ts +1 -15
- package/dist/Textarea/Textarea.js +20 -21
- package/dist/Textarea/Textarea.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
@@ -0,0 +1,67 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import styled from 'styled-components';
|
3
|
+
import { Text } from '../Text';
|
4
|
+
import { theme } from '../theme';
|
5
|
+
export const CheckBox = ({ id, checked, children, toggle }) => (React.createElement(BoxContainer, { id: id },
|
6
|
+
React.createElement(Text, { tag: "span", typo: "base" }, children),
|
7
|
+
React.createElement("input", { type: "checkbox", checked: checked, onChange: toggle }),
|
8
|
+
React.createElement(Checkmark, null)));
|
9
|
+
const Checkmark = styled.span `
|
10
|
+
position: absolute;
|
11
|
+
left: 0;
|
12
|
+
width: 24px;
|
13
|
+
height: 24px;
|
14
|
+
border: solid 1px ${theme.colors.secondary};
|
15
|
+
box-sizing: border-box;
|
16
|
+
border-radius: 1px;
|
17
|
+
|
18
|
+
&:after {
|
19
|
+
content: '';
|
20
|
+
position: absolute;
|
21
|
+
display: none;
|
22
|
+
top: 3px;
|
23
|
+
left: 7px;
|
24
|
+
width: 5px;
|
25
|
+
height: 12px;
|
26
|
+
border: solid white;
|
27
|
+
border-width: 0 2px 2px 0;
|
28
|
+
-webkit-transform: rotate(45deg);
|
29
|
+
-ms-transform: rotate(45deg);
|
30
|
+
transform: rotate(45deg);
|
31
|
+
}
|
32
|
+
`;
|
33
|
+
const BoxContainer = styled.label `
|
34
|
+
position: relative;
|
35
|
+
display: flex;
|
36
|
+
align-items: center;
|
37
|
+
padding-left: 32px;
|
38
|
+
user-select: none;
|
39
|
+
cursor: pointer;
|
40
|
+
|
41
|
+
input {
|
42
|
+
position: absolute;
|
43
|
+
opacity: 0;
|
44
|
+
cursor: pointer;
|
45
|
+
|
46
|
+
&:checked ~ ${Checkmark} {
|
47
|
+
background-color: ${theme.colors.secondary};
|
48
|
+
border: solid 1px ${theme.colors.secondary};
|
49
|
+
}
|
50
|
+
|
51
|
+
&:checked ~ ${Checkmark}:after {
|
52
|
+
display: block;
|
53
|
+
}
|
54
|
+
}
|
55
|
+
|
56
|
+
&:hover {
|
57
|
+
${Checkmark} {
|
58
|
+
background-color: ${theme.colors.background};
|
59
|
+
border: solid 1px ${theme.colors.secondary};
|
60
|
+
}
|
61
|
+
}
|
62
|
+
|
63
|
+
@media (min-width: 768px) {
|
64
|
+
padding-left: 32px;
|
65
|
+
}
|
66
|
+
`;
|
67
|
+
//# sourceMappingURL=CheckBox.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"CheckBox.js","sourceRoot":"","sources":["../../src/CheckBoxGroup/CheckBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAShC,MAAM,CAAC,MAAM,QAAQ,GAAc,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACxE,oBAAC,YAAY,IAAC,EAAE,EAAE,EAAE;IAClB,oBAAC,IAAI,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,IACzB,QAAQ,CACJ;IAEP,+BAAO,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAI;IAC7D,oBAAC,SAAS,OAAG,CACA,CAChB,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;sBAKP,KAAK,CAAC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;;;CAkB3C,CAAA;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;;;;;;kBAaf,SAAS;0BACD,KAAK,CAAC,MAAM,CAAC,SAAS;0BACtB,KAAK,CAAC,MAAM,CAAC,SAAS;;;kBAG9B,SAAS;;;;;;MAMrB,SAAS;0BACW,KAAK,CAAC,MAAM,CAAC,UAAU;0BACvB,KAAK,CAAC,MAAM,CAAC,SAAS;;;;;;;CAO/C,CAAA"}
|
@@ -9,9 +9,9 @@ export const Confirmation = ({ checked, onChange, id: idProp, error = false, err
|
|
9
9
|
const id = useUniqueId(idProp);
|
10
10
|
return (React.createElement(ConfirmationWrapper, null,
|
11
11
|
(label || sublabel) && (React.createElement(TextWrapper, null,
|
12
|
-
React.createElement(
|
13
|
-
label
|
14
|
-
required &&
|
12
|
+
label && (React.createElement(SectionHeadingText, { tag: "h3" },
|
13
|
+
label,
|
14
|
+
required && React.createElement(Asterisk, null, "*"))),
|
15
15
|
sublabel && (React.createElement(Text, { tag: "p", typo: "base-small", color: "subtext" }, sublabel)))),
|
16
16
|
React.createElement(RadioButtonGroupWrapper, null,
|
17
17
|
React.createElement(RadioButtonGroup, null,
|
@@ -70,7 +70,8 @@ const TextWrapper = styled.div `
|
|
70
70
|
display: flex;
|
71
71
|
flex-direction: column;
|
72
72
|
`;
|
73
|
-
const
|
74
|
-
|
73
|
+
const Asterisk = styled.span `
|
74
|
+
font-size: 14px;
|
75
|
+
color: ${theme.colors.error};
|
75
76
|
`;
|
76
77
|
//# sourceMappingURL=Confirmation.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/Confirmation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAC1D,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAa,MAAM,qBAAqB,CAAA;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAgBzC,MAAM,CAAC,MAAM,YAAY,GAA0B,CAAC,EAClD,OAAO,EACP,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,KAAK,GAAG,KAAK,EACb,QAAQ,GAAG,EAAE,EACb,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,IAAI,EACd,QAAQ,GAAG,KAAK,GACE,EAAE,EAAE;IACtB,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,OAAO,CACL,oBAAC,mBAAmB;QACjB,CAAC,KAAK,IAAI,QAAQ,CAAC,IAAI,CACtB,oBAAC,WAAW;
|
1
|
+
{"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/Confirmation.tsx"],"names":[],"mappings":"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"}
|
@@ -57,4 +57,12 @@ Required.args = {
|
|
57
57
|
checked: undefined,
|
58
58
|
required: true,
|
59
59
|
};
|
60
|
+
export const RequiredWithLongLabel = Template.bind({});
|
61
|
+
RequiredWithLongLabel.args = {
|
62
|
+
id: 'radioButton',
|
63
|
+
label: 'This is a really long label to test the placement of the required asterisk. Do you like ice cream, pie, marshmallows, smores, cupcakes, cookies, and muffins?',
|
64
|
+
onChange: noop,
|
65
|
+
checked: undefined,
|
66
|
+
required: true,
|
67
|
+
};
|
60
68
|
//# sourceMappingURL=Confirmation.stories.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Confirmation.stories.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/Confirmation.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,YAAY,EAAqB,MAAM,gBAAgB,CAAA;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,eAAe;IACb,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAwB,EAAE,EAAE,CAAC,oBAAC,YAAY,oBAAK,KAAK,EAAI,CAAA;AAE1E,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,EAAE,EAAE,aAAa;IACjB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,KAAK;IACd,KAAK,EAAE,2BAA2B;CACnC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,SAAS,CAAC,IAAI,GAAG;IACf,EAAE,EAAE,aAAa;IACjB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,2BAA2B;IAClC,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,yBAAyB;CACpC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE7C,YAAY,CAAC,IAAI,GAAG;IAClB,EAAE,EAAE,aAAa;IACjB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,2BAA2B;IAClC,QAAQ,EAAE,kEAAkE;CAC7E,CAAA;AAED,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,oBAAC,SAAS,OAAG,CAAA;AAE7C,MAAM,CAAC,MAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExD,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEhD,eAAe,CAAC,IAAI,GAAG;IACrB,EAAE,EAAE,aAAa;IACjB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,2BAA2B;IAClC,QAAQ,EAAE,SAAS;CACpB,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE5C,WAAW,CAAC,IAAI,GAAG;IACjB,EAAE,EAAE,aAAa;IACjB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,KAAK;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzC,QAAQ,CAAC,IAAI,GAAG;IACd,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,wBAAwB;IAC/B,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,IAAI;CACf,CAAA"}
|
1
|
+
{"version":3,"file":"Confirmation.stories.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/Confirmation.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,YAAY,EAAqB,MAAM,gBAAgB,CAAA;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,eAAe;IACb,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAwB,EAAE,EAAE,CAAC,oBAAC,YAAY,oBAAK,KAAK,EAAI,CAAA;AAE1E,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,EAAE,EAAE,aAAa;IACjB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,KAAK;IACd,KAAK,EAAE,2BAA2B;CACnC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,SAAS,CAAC,IAAI,GAAG;IACf,EAAE,EAAE,aAAa;IACjB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,2BAA2B;IAClC,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,yBAAyB;CACpC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE7C,YAAY,CAAC,IAAI,GAAG;IAClB,EAAE,EAAE,aAAa;IACjB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,2BAA2B;IAClC,QAAQ,EAAE,kEAAkE;CAC7E,CAAA;AAED,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,oBAAC,SAAS,OAAG,CAAA;AAE7C,MAAM,CAAC,MAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExD,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEhD,eAAe,CAAC,IAAI,GAAG;IACrB,EAAE,EAAE,aAAa;IACjB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,2BAA2B;IAClC,QAAQ,EAAE,SAAS;CACpB,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE5C,WAAW,CAAC,IAAI,GAAG;IACjB,EAAE,EAAE,aAAa;IACjB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,KAAK;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzC,QAAQ,CAAC,IAAI,GAAG;IACd,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,wBAAwB;IAC/B,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,IAAI;CACf,CAAA;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEtD,qBAAqB,CAAC,IAAI,GAAG;IAC3B,EAAE,EAAE,aAAa;IACjB,KAAK,EACH,+JAA+J;IACjK,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,IAAI;CACf,CAAA"}
|
@@ -1,61 +1,35 @@
|
|
1
1
|
import React, { FormEvent, RefObject } from 'react';
|
2
|
+
import { CommonFieldTypes } from 'Field/types/commonFieldTypes';
|
2
3
|
export declare type DropdownItem = {
|
3
4
|
optionGroupLabel?: string;
|
4
5
|
label: string;
|
5
6
|
value: string;
|
6
7
|
};
|
7
|
-
|
8
|
-
id?: string;
|
9
|
-
className?: string;
|
10
|
-
/** ref attribute for select input */
|
8
|
+
export interface Props extends CommonFieldTypes {
|
11
9
|
ref?: RefObject<HTMLSelectElement>;
|
12
|
-
/** Placeholder (initial state) */
|
13
10
|
placeholder?: string;
|
14
|
-
/** label displayed above the dropdown */
|
15
|
-
label?: string;
|
16
|
-
/** used for label - input connection */
|
17
11
|
name?: string;
|
18
|
-
/** input value */
|
19
12
|
value?: string;
|
20
|
-
/** Default value */
|
21
13
|
defaultValue?: string;
|
22
|
-
/** conditionally renders error message below dropdown */
|
23
|
-
error?: boolean;
|
24
|
-
/** error message to be displayed */
|
25
|
-
errorMsg?: string;
|
26
|
-
/** Disabled flag */
|
27
14
|
disabled?: boolean;
|
28
|
-
/** list of items for the dropdown list */
|
29
15
|
list: DropdownItem[];
|
30
|
-
/** onSelect handler */
|
31
16
|
onSelect: (element: string) => void;
|
32
|
-
/** Displays border */
|
33
|
-
outlined?: boolean;
|
34
|
-
/** onBlur listener */
|
35
17
|
onBlur?: (e: FormEvent<HTMLSelectElement>) => void;
|
36
|
-
/** required item */
|
37
|
-
required?: boolean;
|
38
|
-
/** set required asterisk */
|
39
18
|
showRequiredAsterisk?: boolean;
|
40
|
-
}
|
41
|
-
/** on change or on input required */
|
19
|
+
}
|
42
20
|
declare type TruncateProps = {
|
43
|
-
/** on change is required and on input optional */
|
44
21
|
onSelect: (e: string) => void;
|
45
22
|
onInputChange?: (e: FormEvent<HTMLSelectElement>) => void;
|
46
23
|
} | {
|
47
|
-
/** on input is required and on change optional */
|
48
24
|
onSelect?: (e: string) => void;
|
49
25
|
onInputChange: (e: FormEvent<HTMLSelectElement>) => void;
|
50
26
|
};
|
51
|
-
export declare type DropdownProps =
|
52
|
-
export declare const Dropdown: React.ForwardRefExoticComponent<(Pick<
|
53
|
-
/** on change is required and on input optional */
|
27
|
+
export declare type DropdownProps = Props & TruncateProps;
|
28
|
+
export declare const Dropdown: React.ForwardRefExoticComponent<(Pick<Props & {
|
54
29
|
onSelect: (e: string) => void;
|
55
30
|
onInputChange?: ((e: FormEvent<HTMLSelectElement>) => void) | undefined;
|
56
|
-
}, "required" | "error" | "id" | "name" | "value" | "label" | "className" | "disabled" | "list" | "defaultValue" | "placeholder" | "onBlur" | "onSelect" | "outlined" | "errorMsg" | "
|
57
|
-
/** on input is required and on change optional */
|
31
|
+
}, "required" | "error" | "id" | "name" | "value" | "label" | "className" | "disabled" | "list" | "defaultValue" | "placeholder" | "onBlur" | "onSelect" | "outlined" | "errorMsg" | "renderAsTitle" | "showRequiredAsterisk" | "onInputChange"> | Pick<Props & {
|
58
32
|
onSelect?: ((e: string) => void) | undefined;
|
59
33
|
onInputChange: (e: FormEvent<HTMLSelectElement>) => void;
|
60
|
-
}, "required" | "error" | "id" | "name" | "value" | "label" | "className" | "disabled" | "list" | "defaultValue" | "placeholder" | "onBlur" | "onSelect" | "outlined" | "errorMsg" | "
|
34
|
+
}, "required" | "error" | "id" | "name" | "value" | "label" | "className" | "disabled" | "list" | "defaultValue" | "placeholder" | "onBlur" | "onSelect" | "outlined" | "errorMsg" | "renderAsTitle" | "showRequiredAsterisk" | "onInputChange">) & React.RefAttributes<HTMLSelectElement>>;
|
61
35
|
export {};
|
@@ -1,12 +1,22 @@
|
|
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
|
+
};
|
1
12
|
import React, { useEffect, useState, forwardRef, } from 'react';
|
2
|
-
import styled from 'styled-components';
|
3
13
|
import { darken } from 'polished';
|
4
|
-
import
|
5
|
-
import { Icon } from '../Icon';
|
6
|
-
import { Box } from '../Box';
|
14
|
+
import styled from 'styled-components';
|
7
15
|
import { theme } from '../theme';
|
16
|
+
import { Field } from '../Field';
|
8
17
|
import { useUniqueId } from '../utils/id';
|
9
|
-
export const Dropdown = forwardRef(function Dropdown(
|
18
|
+
export const Dropdown = forwardRef(function Dropdown(_a, ref) {
|
19
|
+
var { id: idProp, placeholder, name, value, defaultValue, disabled = false, list, onSelect, outlined = false, error = false, onInputChange, onBlur, required = true } = _a, fieldProps = __rest(_a, ["id", "placeholder", "name", "value", "defaultValue", "disabled", "list", "onSelect", "outlined", "error", "onInputChange", "onBlur", "required"]);
|
10
20
|
const id = useUniqueId(idProp);
|
11
21
|
const [key, setKey] = useState('');
|
12
22
|
const [hasOptGroups, setHasOptGroups] = useState(false);
|
@@ -28,12 +38,9 @@ export const Dropdown = forwardRef(function Dropdown({ id: idProp, className = '
|
|
28
38
|
});
|
29
39
|
setDropdownItemsGroups(Array.from(itemsPerGroupLabel.values()));
|
30
40
|
}, [list]);
|
31
|
-
return (React.createElement(
|
32
|
-
|
33
|
-
React.createElement(
|
34
|
-
showRequiredAsterisk && (React.createElement(Text, { tag: "label", color: "error", typo: "label" }, "*")))),
|
35
|
-
React.createElement(Content, { outlined: outlined, key: key },
|
36
|
-
React.createElement(Select, { id: id, defaultValue: list.length === 1
|
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,
|
43
|
+
React.createElement(StyledSelect, { id: id, defaultValue: list.length === 1
|
37
44
|
? String(list[0].value)
|
38
45
|
: defaultValue
|
39
46
|
? defaultValue
|
@@ -48,23 +55,8 @@ export const Dropdown = forwardRef(function Dropdown({ id: idProp, className = '
|
|
48
55
|
dropdownItemsGroups.map((groupItems, i) => {
|
49
56
|
var _a;
|
50
57
|
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))));
|
51
|
-
}))
|
52
|
-
React.createElement(Caret, { outlined: outlined },
|
53
|
-
React.createElement(Icon, { render: "caret", color: "subtext", size: 24 }))),
|
54
|
-
error && React.createElement(ErrorBox, null, errorMsg)));
|
58
|
+
})))));
|
55
59
|
});
|
56
|
-
const Container = styled.div `
|
57
|
-
display: flex;
|
58
|
-
flex-direction: column;
|
59
|
-
height: 44px;
|
60
|
-
width: 100%;
|
61
|
-
margin: 0;
|
62
|
-
padding: 0;
|
63
|
-
`;
|
64
|
-
const Content = styled.div `
|
65
|
-
width: 100%;
|
66
|
-
position: relative;
|
67
|
-
`;
|
68
60
|
const getErrorOutline = (outlined, error) => {
|
69
61
|
if (error && outlined) {
|
70
62
|
return `border: 2px solid ${theme.colors.error}`;
|
@@ -76,7 +68,7 @@ const getErrorOutline = (outlined, error) => {
|
|
76
68
|
return;
|
77
69
|
}
|
78
70
|
};
|
79
|
-
const
|
71
|
+
const StyledSelect = styled.select `
|
80
72
|
width: 100%;
|
81
73
|
height: 32px;
|
82
74
|
padding-right: 24px;
|
@@ -87,16 +79,13 @@ const Select = styled.select `
|
|
87
79
|
font-size: 16px;
|
88
80
|
cursor: pointer;
|
89
81
|
appearance: none; /* remove default arrow */
|
90
|
-
|
91
82
|
&:disabled {
|
92
83
|
cursor: not-allowed;
|
93
84
|
opacity: 0.5;
|
94
85
|
}
|
95
|
-
|
96
86
|
&:not(:focus):invalid {
|
97
87
|
color: ${theme.colors.outline};
|
98
88
|
}
|
99
|
-
|
100
89
|
&:hover,
|
101
90
|
&:focus,
|
102
91
|
&:focus-visible,
|
@@ -104,7 +93,6 @@ const Select = styled.select `
|
|
104
93
|
outline: none;
|
105
94
|
border-color: ${darken(0.1, theme.colors.outline)};
|
106
95
|
}
|
107
|
-
|
108
96
|
${({ outlined }) => outlined &&
|
109
97
|
`
|
110
98
|
border: 2px solid ${theme.colors.outline};
|
@@ -117,26 +105,12 @@ const Select = styled.select `
|
|
117
105
|
border: 2px solid ${theme.colors.outline};
|
118
106
|
}
|
119
107
|
`}
|
120
|
-
|
121
108
|
${({ value }) => value &&
|
122
109
|
value != '' &&
|
123
110
|
`
|
124
111
|
border: 2px solid ${theme.colors.outline};
|
125
|
-
`}
|
112
|
+
`}}
|
126
113
|
|
127
|
-
${({ error, outlined }) => getErrorOutline(outlined, error)};
|
128
|
-
`;
|
129
|
-
const Caret = styled.div `
|
130
|
-
position: absolute;
|
131
|
-
top: 50%;
|
132
|
-
z-index: 1;
|
133
|
-
right: ${({ outlined }) => (outlined ? '15px' : '0')};
|
134
|
-
pointer-events: none;
|
135
|
-
transform: translateY(-50%);
|
136
|
-
`;
|
137
|
-
const ErrorBox = styled.span `
|
138
|
-
margin-top: 7px;
|
139
|
-
font-size: 12px;
|
140
|
-
color: ${theme.colors.error};
|
114
|
+
${({ error, outlined }) => getErrorOutline(outlined, error)};
|
141
115
|
`;
|
142
116
|
//# sourceMappingURL=Dropdown.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,SAAS,EACT,QAAQ,EAGR,UAAU,GAEX,MAAM,OAAO,CAAA;AACd,OAAO,
|
1
|
+
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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"}
|
@@ -1,49 +1,13 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
declare const _default: {
|
3
3
|
title: string;
|
4
|
-
component: React.ForwardRefExoticComponent<(Pick<{
|
5
|
-
id?: string | undefined;
|
6
|
-
className?: string | undefined;
|
7
|
-
ref?: React.RefObject<HTMLSelectElement> | undefined;
|
8
|
-
placeholder?: string | undefined;
|
9
|
-
label?: string | undefined;
|
10
|
-
name?: string | undefined;
|
11
|
-
value?: string | undefined;
|
12
|
-
defaultValue?: string | undefined;
|
13
|
-
error?: boolean | undefined;
|
14
|
-
errorMsg?: string | undefined;
|
15
|
-
disabled?: boolean | undefined;
|
16
|
-
list: import("./Dropdown").DropdownItem[];
|
17
|
-
onSelect: (element: string) => void;
|
18
|
-
outlined?: boolean | undefined;
|
19
|
-
onBlur?: ((e: React.FormEvent<HTMLSelectElement>) => void) | undefined;
|
20
|
-
required?: boolean | undefined;
|
21
|
-
showRequiredAsterisk?: boolean | undefined;
|
22
|
-
} & {
|
4
|
+
component: React.ForwardRefExoticComponent<(Pick<import("./Dropdown").Props & {
|
23
5
|
onSelect: (e: string) => void;
|
24
6
|
onInputChange?: ((e: React.FormEvent<HTMLSelectElement>) => void) | undefined;
|
25
|
-
}, "required" | "error" | "id" | "name" | "value" | "label" | "className" | "disabled" | "list" | "defaultValue" | "placeholder" | "onBlur" | "onSelect" | "outlined" | "errorMsg" | "
|
26
|
-
id?: string | undefined;
|
27
|
-
className?: string | undefined;
|
28
|
-
ref?: React.RefObject<HTMLSelectElement> | undefined;
|
29
|
-
placeholder?: string | undefined;
|
30
|
-
label?: string | undefined;
|
31
|
-
name?: string | undefined;
|
32
|
-
value?: string | undefined;
|
33
|
-
defaultValue?: string | undefined;
|
34
|
-
error?: boolean | undefined;
|
35
|
-
errorMsg?: string | undefined;
|
36
|
-
disabled?: boolean | undefined;
|
37
|
-
list: import("./Dropdown").DropdownItem[];
|
38
|
-
onSelect: (element: string) => void;
|
39
|
-
outlined?: boolean | undefined;
|
40
|
-
onBlur?: ((e: React.FormEvent<HTMLSelectElement>) => void) | undefined;
|
41
|
-
required?: boolean | undefined;
|
42
|
-
showRequiredAsterisk?: boolean | undefined;
|
43
|
-
} & {
|
7
|
+
}, "required" | "error" | "id" | "name" | "value" | "label" | "className" | "disabled" | "list" | "defaultValue" | "placeholder" | "onBlur" | "onSelect" | "outlined" | "errorMsg" | "renderAsTitle" | "showRequiredAsterisk" | "onInputChange"> | Pick<import("./Dropdown").Props & {
|
44
8
|
onSelect?: ((e: string) => void) | undefined;
|
45
9
|
onInputChange: (e: React.FormEvent<HTMLSelectElement>) => void;
|
46
|
-
}, "required" | "error" | "id" | "name" | "value" | "label" | "className" | "disabled" | "list" | "defaultValue" | "placeholder" | "onBlur" | "onSelect" | "outlined" | "errorMsg" | "
|
10
|
+
}, "required" | "error" | "id" | "name" | "value" | "label" | "className" | "disabled" | "list" | "defaultValue" | "placeholder" | "onBlur" | "onSelect" | "outlined" | "errorMsg" | "renderAsTitle" | "showRequiredAsterisk" | "onInputChange">) & React.RefAttributes<HTMLSelectElement>>;
|
47
11
|
argTypes: {
|
48
12
|
onSelect: {
|
49
13
|
action: string;
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { CommonFieldTypes } from './types/commonFieldTypes';
|
3
|
+
interface FieldProps extends CommonFieldTypes {
|
4
|
+
children: React.ReactElement;
|
5
|
+
showCaret?: boolean;
|
6
|
+
value: string;
|
7
|
+
trailingIcon?: string;
|
8
|
+
dropdownKey?: string;
|
9
|
+
fullHeight?: boolean;
|
10
|
+
}
|
11
|
+
export declare const Field: ({ children, renderAsTitle, className, error, id, label, outlined, value, trailingIcon, errorMsg, dropdownKey, required, showCaret, fullHeight, }: FieldProps) => JSX.Element;
|
12
|
+
export {};
|
@@ -0,0 +1,68 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import styled from 'styled-components';
|
3
|
+
import { darken } from 'polished';
|
4
|
+
import { Icon } from '../Icon';
|
5
|
+
import { Text } from '../Text';
|
6
|
+
import { Box } from '../Box';
|
7
|
+
import { theme } from '../theme';
|
8
|
+
export const Field = ({ children, renderAsTitle, className = '', error, id, label, outlined = false, value, trailingIcon, errorMsg, dropdownKey, required, showCaret, fullHeight = false, }) => {
|
9
|
+
return (React.createElement(Container, { className: className },
|
10
|
+
label && (React.createElement(Box, { mb: outlined ? '4px' : '0px' },
|
11
|
+
renderAsTitle ? (React.createElement(Title, null, label)) : (React.createElement(Text, { tag: "label", color: "subtext", typo: "label", htmlFor: id }, label)),
|
12
|
+
required && (React.createElement(Text, { tag: "label", color: "error", typo: "base" },
|
13
|
+
' ',
|
14
|
+
"*")))),
|
15
|
+
React.createElement(Content, { fullHeight: fullHeight, value: value, outlined: outlined, error: error, key: dropdownKey !== null && dropdownKey !== void 0 ? dropdownKey : null },
|
16
|
+
children,
|
17
|
+
showCaret && (React.createElement(Caret, { outlined: outlined },
|
18
|
+
React.createElement(Icon, { render: "caret", color: "subtext", size: 24 })))),
|
19
|
+
trailingIcon && React.createElement(Icon, { render: trailingIcon, color: "subtext" }),
|
20
|
+
error && React.createElement(ErrorBox, null, errorMsg)));
|
21
|
+
};
|
22
|
+
const Container = styled(Box) `
|
23
|
+
display: flex;
|
24
|
+
flex-direction: column;
|
25
|
+
position: relative;
|
26
|
+
`;
|
27
|
+
const Content = styled.div `
|
28
|
+
position: relative;
|
29
|
+
border-color: ${({ error }) => theme.colors[`${error ? 'error' : 'outline'}`]};
|
30
|
+
background-color: ${({ outlined }) => !outlined ? 'transparent' : theme.colors['white']};
|
31
|
+
display: flex;
|
32
|
+
height: ${({ fullHeight }) => (fullHeight ? `100%` : `32px`)};
|
33
|
+
|
34
|
+
&:hover,
|
35
|
+
&:focus-within {
|
36
|
+
border-color: ${({ error }) => error ? theme.colors.error : darken(0.1, theme.colors.outline)};
|
37
|
+
}
|
38
|
+
|
39
|
+
${({ outlined }) => outlined &&
|
40
|
+
`
|
41
|
+
border-radius: 8px;
|
42
|
+
height: auto;
|
43
|
+
`}
|
44
|
+
|
45
|
+
${({ value }) => value &&
|
46
|
+
value != '' &&
|
47
|
+
`
|
48
|
+
border-color: ${theme.colors.outline};
|
49
|
+
`}
|
50
|
+
`;
|
51
|
+
const ErrorBox = styled.span `
|
52
|
+
margin-top: 7px;
|
53
|
+
color: ${theme.colors.error};
|
54
|
+
font-size: 12px;
|
55
|
+
`;
|
56
|
+
const Title = styled.h3 `
|
57
|
+
font-weight: bold;
|
58
|
+
padding-bottom: 8px;
|
59
|
+
`;
|
60
|
+
const Caret = styled.div `
|
61
|
+
position: absolute;
|
62
|
+
top: 50%;
|
63
|
+
z-index: 1;
|
64
|
+
right: ${({ outlined }) => (outlined ? '15px' : '0')};
|
65
|
+
pointer-events: none;
|
66
|
+
transform: translateY(-50%);
|
67
|
+
`;
|
68
|
+
//# sourceMappingURL=Field.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"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"}
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Field } from './Field';
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"commonFieldTypes.js","sourceRoot":"","sources":["../../../src/Field/types/commonFieldTypes.ts"],"names":[],"mappings":""}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import styled from 'styled-components';
|
3
|
+
import { Box } from '../Box';
|
4
|
+
export const Fieldset = ({ children, label, outlined = false, }) => {
|
5
|
+
return (React.createElement("fieldset", null,
|
6
|
+
React.createElement(Box, { mb: outlined ? '4px' : '0px' },
|
7
|
+
React.createElement(Legend, null, label)),
|
8
|
+
children));
|
9
|
+
};
|
10
|
+
const Legend = styled.legend `
|
11
|
+
font-size: 16px;
|
12
|
+
font-weight: bold;
|
13
|
+
padding-bottom: 8px;
|
14
|
+
`;
|
15
|
+
//# sourceMappingURL=Fieldset.js.map
|
@@ -0,0 +1 @@
|
|
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;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAQ5B,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,KAAK,EACL,QAAQ,GAAG,KAAK,GACF,EAAE,EAAE;IAClB,OAAO,CACL;QACE,oBAAC,GAAG,IAAC,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;YAC/B,oBAAC,MAAM,QAAE,KAAK,CAAU,CACpB;QAEL,QAAQ,CACA,CACZ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;;;;CAI3B,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Fieldset } from './Fieldset';
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Fieldset/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA"}
|
@@ -1,25 +1,16 @@
|
|
1
1
|
import { FC } from 'react';
|
2
|
+
import { CommonFieldTypes } from 'Field/types/commonFieldTypes';
|
2
3
|
export declare type SearchInputItem = {
|
3
4
|
label: string;
|
4
5
|
value: string;
|
5
6
|
};
|
6
|
-
export
|
7
|
-
id?: string;
|
8
|
-
/** Name of the form control */
|
7
|
+
export interface SearchInputProps extends CommonFieldTypes {
|
9
8
|
name?: string;
|
10
|
-
/** label displayed above the input */
|
11
9
|
label?: string;
|
12
|
-
/** Placeholder (initial state) */
|
13
10
|
placeholder?: string;
|
14
|
-
/** list of items for the search list */
|
15
11
|
searchList: SearchInputItem[];
|
16
|
-
/** onFound listener */
|
17
12
|
onFound: (element: string) => void;
|
18
|
-
/** Displays search results in a relative position to other elements */
|
19
13
|
resultsRelativePosition?: boolean;
|
20
|
-
/** Displays border */
|
21
|
-
outlined?: boolean;
|
22
|
-
/** Displays search icon */
|
23
14
|
showIcon?: boolean;
|
24
|
-
}
|
15
|
+
}
|
25
16
|
export declare const SearchInput: FC<SearchInputProps>;
|