@mrshmllw/smores-react 2.19.2 → 3.0.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/Accordion/Accordion.d.ts +1 -0
- package/dist/Accordion/Accordion.js +16 -12
- package/dist/Accordion/Accordion.js.map +1 -1
- package/dist/Accordion/Accordion.stories.d.ts +1 -2
- package/dist/Accordion/Accordion.stories.js +2 -8
- package/dist/Accordion/Accordion.stories.js.map +1 -1
- package/dist/Accordion/Collection.d.ts +2 -0
- package/dist/Accordion/Collection.js +52 -0
- package/dist/Accordion/Collection.js.map +1 -0
- package/dist/Accordion/__tests__/Accordion.js +9 -0
- package/dist/Accordion/__tests__/Accordion.js.map +1 -0
- package/dist/ActionDropdown/ActionDropdown.js +7 -7
- package/dist/ActionDropdown/ActionDropdown.js.map +1 -1
- package/dist/ActionDropdown/ActionDropdown.stories.js +1 -1
- package/dist/ActionDropdown/Container.js +16 -10
- package/dist/ActionDropdown/Container.js.map +1 -1
- package/dist/ActionDropdown/List.js +3 -3
- package/dist/ActionDropdown/List.js.map +1 -1
- package/dist/ActionDropdown/__tests__/ActionDropdown.js +3 -3
- package/dist/ActionDropdown/__tests__/ActionDropdown.js.map +1 -1
- package/dist/Banner/Banner.stories.d.ts +9 -0
- package/dist/Banner/Banner.stories.js +86 -0
- package/dist/Banner/Banner.stories.js.map +1 -0
- package/dist/Banner/BannerContainer.d.ts +7 -0
- package/dist/Banner/BannerContainer.js +40 -0
- package/dist/Banner/BannerContainer.js.map +1 -0
- package/dist/Banner/BannerItem.d.ts +7 -0
- package/dist/Banner/BannerItem.js +64 -0
- package/dist/Banner/BannerItem.js.map +1 -0
- package/dist/Banner/hooks.d.ts +3 -0
- package/dist/Banner/hooks.js +6 -0
- package/dist/Banner/hooks.js.map +1 -0
- package/dist/Banner/index.d.ts +2 -0
- package/dist/Banner/index.js +3 -0
- package/dist/Banner/index.js.map +1 -0
- package/dist/Banner/types.d.ts +18 -0
- package/dist/Banner/types.js +2 -0
- package/dist/Banner/types.js.map +1 -0
- package/dist/Box/Box.stories.js +2 -2
- package/dist/Box/Box.stories.js.map +1 -1
- package/dist/BrandCard/BrandCard.d.ts +27 -0
- package/dist/BrandCard/BrandCard.js +60 -0
- package/dist/BrandCard/BrandCard.js.map +1 -0
- package/dist/BrandCard/BrandCard.stories.d.ts +11 -0
- package/dist/BrandCard/BrandCard.stories.js +54 -0
- package/dist/BrandCard/BrandCard.stories.js.map +1 -0
- package/dist/BrandCard/__tests__/BrandCard.js +9 -0
- package/dist/BrandCard/__tests__/BrandCard.js.map +1 -0
- package/dist/BrandCard/index.d.ts +1 -0
- package/dist/BrandCard/index.js +2 -0
- package/dist/BrandCard/index.js.map +1 -0
- package/dist/Button/Button.d.ts +4 -6
- package/dist/Button/Button.js +52 -54
- package/dist/Button/Button.js.map +1 -1
- package/dist/Button/Button.stories.js +1 -1
- package/dist/Button/Collection.d.ts +2 -0
- package/dist/Button/Collection.js +4 -2
- package/dist/Button/Collection.js.map +1 -1
- package/dist/Button/LegacyButton.js +6 -6
- package/dist/Button/LegacyButton.js.map +1 -1
- package/dist/Button/__tests__/Button.js.map +1 -1
- package/dist/Card/Card.d.ts +19 -1
- package/dist/Card/Card.js +42 -10
- package/dist/Card/Card.js.map +1 -1
- package/dist/Card/Card.stories.d.ts +8 -4
- package/dist/Card/Card.stories.js +74 -18
- package/dist/Card/Card.stories.js.map +1 -1
- package/dist/CheckBox/CheckBox.js +39 -16
- package/dist/CheckBox/CheckBox.js.map +1 -1
- package/dist/Chip/Chip.js +15 -9
- package/dist/Chip/Chip.js.map +1 -1
- package/dist/Datepicker/Datepicker.d.ts +3 -0
- package/dist/Datepicker/Datepicker.js +34 -20
- package/dist/Datepicker/Datepicker.js.map +1 -1
- package/dist/Datepicker/DatesList.js +18 -10
- package/dist/Datepicker/DatesList.js.map +1 -1
- package/dist/Divider/Divider.js +1 -1
- package/dist/Divider/Divider.js.map +1 -1
- package/dist/Dropdown/Collection.d.ts +2 -0
- package/dist/Dropdown/Collection.js +91 -0
- package/dist/Dropdown/Collection.js.map +1 -0
- package/dist/Dropdown/Dropdown.d.ts +2 -1
- package/dist/Dropdown/Dropdown.js +24 -30
- package/dist/Dropdown/Dropdown.js.map +1 -1
- package/dist/Dropdown/Dropdown.stories.d.ts +2 -16
- package/dist/Dropdown/Dropdown.stories.js +7 -156
- package/dist/Dropdown/Dropdown.stories.js.map +1 -1
- package/dist/Icon/Icon.js +1 -1
- package/dist/Icon/Icon.stories.js +2 -2
- package/dist/IconStrict/IconStrict.d.ts +20 -0
- package/dist/IconStrict/IconStrict.js +50 -0
- package/dist/IconStrict/IconStrict.js.map +1 -0
- package/dist/IconStrict/IconStrict.stories.d.ts +11 -0
- package/dist/IconStrict/IconStrict.stories.js +33 -0
- package/dist/IconStrict/IconStrict.stories.js.map +1 -0
- package/dist/IconStrict/__tests__/IconStrict.js +9 -0
- package/dist/IconStrict/__tests__/IconStrict.js.map +1 -0
- package/dist/IconStrict/index.d.ts +1 -0
- package/dist/IconStrict/index.js +2 -0
- package/dist/IconStrict/index.js.map +1 -0
- package/dist/IconWrapper/IconWrapper.js +2 -2
- package/dist/IconWrapper/IconWrapper.js.map +1 -1
- package/dist/LabelledText/LabelledText.js +1 -1
- package/dist/LabelledText/LabelledText.js.map +1 -1
- package/dist/Link/Link.d.ts +3 -0
- package/dist/Link/Link.js +10 -13
- package/dist/Link/Link.js.map +1 -1
- package/dist/Link/Link.stories.d.ts +2 -0
- package/dist/Link/Link.stories.js +5 -1
- package/dist/Link/Link.stories.js.map +1 -1
- package/dist/Loader/Loader.js +1 -1
- package/dist/Loader/Loader.js.map +1 -1
- package/dist/Loader/Loader.stories.d.ts +1 -1
- package/dist/Loader/Loader.stories.js +3 -3
- package/dist/Loader/Loader.stories.js.map +1 -1
- package/dist/Loader/__tests__/Loader.js +1 -1
- package/dist/Loader/__tests__/Loader.js.map +1 -1
- package/dist/Modal/Modal.js +6 -23
- package/dist/Modal/Modal.js.map +1 -1
- package/dist/NumberInput/Collection.d.ts +2 -0
- package/dist/NumberInput/Collection.js +97 -0
- package/dist/NumberInput/Collection.js.map +1 -0
- package/dist/NumberInput/NumberInput.d.ts +1 -6
- package/dist/NumberInput/NumberInput.js +13 -89
- package/dist/NumberInput/NumberInput.js.map +1 -1
- package/dist/NumberInput/NumberInput.stories.d.ts +2 -7
- package/dist/NumberInput/NumberInput.stories.js +5 -73
- package/dist/NumberInput/NumberInput.stories.js.map +1 -1
- package/dist/Pagination/Pagination.js +43 -12
- package/dist/Pagination/Pagination.js.map +1 -1
- package/dist/Pagination/Pagination.stories.js +8 -1
- package/dist/Pagination/Pagination.stories.js.map +1 -1
- package/dist/RadioGroup/RadioElement.js +4 -4
- package/dist/RadioGroup/RadioElement.js.map +1 -1
- package/dist/RadioGroup/RadioGroup.d.ts +4 -0
- package/dist/RadioGroup/RadioGroup.js +2 -2
- package/dist/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/RadioGroup/RadioGroup.stories.d.ts +3 -0
- package/dist/RadioGroup/RadioGroup.stories.js +2 -0
- package/dist/RadioGroup/RadioGroup.stories.js.map +1 -1
- package/dist/RadioGroup/RadioItem.d.ts +2 -0
- package/dist/RadioGroup/RadioItem.js +25 -9
- package/dist/RadioGroup/RadioItem.js.map +1 -1
- package/dist/Row/Row.js +14 -8
- package/dist/Row/Row.js.map +1 -1
- package/dist/Row/Row.stories.js +1 -1
- package/dist/SearchInput/Container.js +2 -2
- package/dist/SearchInput/Container.js.map +1 -1
- package/dist/SearchInput/SearchInput.d.ts +0 -2
- package/dist/SearchInput/SearchInput.js +8 -55
- package/dist/SearchInput/SearchInput.js.map +1 -1
- package/dist/SearchInput/SearchInput.stories.d.ts +0 -1
- package/dist/SearchInput/SearchInput.stories.js +0 -5
- package/dist/SearchInput/SearchInput.stories.js.map +1 -1
- package/dist/SearchInput/SearchOptions.d.ts +0 -2
- package/dist/SearchInput/SearchOptions.js +12 -16
- package/dist/SearchInput/SearchOptions.js.map +1 -1
- package/dist/Snackbar/SnackbarContainer.js +1 -1
- package/dist/Snackbar/SnackbarItem.js +5 -5
- package/dist/Snackbar/SnackbarItem.js.map +1 -1
- package/dist/SupportMessage/Collection.js +6 -1
- package/dist/SupportMessage/Collection.js.map +1 -1
- package/dist/SupportMessage/SupportMessage.d.ts +1 -1
- package/dist/SupportMessage/SupportMessage.js +27 -26
- package/dist/SupportMessage/SupportMessage.js.map +1 -1
- package/dist/Tag/Collection.d.ts +2 -0
- package/dist/Tag/Collection.js +77 -0
- package/dist/Tag/Collection.js.map +1 -0
- package/dist/Tag/Tag.d.ts +3 -13
- package/dist/Tag/Tag.js +7 -8
- package/dist/Tag/Tag.js.map +1 -1
- package/dist/Tag/Tag.stories.d.ts +1 -1
- package/dist/Tag/Tag.stories.js +5 -9
- package/dist/Tag/Tag.stories.js.map +1 -1
- package/dist/Tag/__tests__/Tag.js +1 -1
- package/dist/Tag/__tests__/Tag.js.map +1 -1
- package/dist/Text/Text.js +1 -1
- package/dist/Text/Text.stories.js +4 -4
- package/dist/Text/Text.stories.js.map +1 -1
- package/dist/Text/fontMapping.js +1 -1
- package/dist/TextInput/Collection.d.ts +2 -0
- package/dist/TextInput/Collection.js +69 -0
- package/dist/TextInput/Collection.js.map +1 -0
- package/dist/TextInput/TextInput.d.ts +0 -3
- package/dist/TextInput/TextInput.js +7 -60
- package/dist/TextInput/TextInput.js.map +1 -1
- package/dist/TextInput/TextInput.stories.d.ts +2 -10
- package/dist/TextInput/TextInput.stories.js +5 -111
- package/dist/TextInput/TextInput.stories.js.map +1 -1
- package/dist/Textarea/Container.js +1 -1
- package/dist/Textarea/Container.js.map +1 -1
- package/dist/Textarea/Textarea.d.ts +1 -0
- package/dist/Textarea/Textarea.js +10 -16
- package/dist/Textarea/Textarea.js.map +1 -1
- package/dist/Textarea/Textarea.stories.js +2 -0
- package/dist/Textarea/Textarea.stories.js.map +1 -1
- package/dist/Toggle/Toggle.js +19 -13
- package/dist/Toggle/Toggle.js.map +1 -1
- package/dist/Tooltip/Tooltip.d.ts +3 -3
- package/dist/Tooltip/Tooltip.js +16 -13
- package/dist/Tooltip/Tooltip.js.map +1 -1
- package/dist/Tooltip/Tooltip.stories.d.ts +1 -0
- package/dist/Tooltip/Tooltip.stories.js +15 -4
- package/dist/Tooltip/Tooltip.stories.js.map +1 -1
- package/dist/colors.stories.js +37 -11
- package/dist/colors.stories.js.map +1 -1
- package/dist/fields/Field/Field.d.ts +0 -1
- package/dist/fields/Field/Field.js.map +1 -1
- package/dist/fields/Fieldset/Fieldset.js +1 -1
- package/dist/fields/Fieldset/Fieldset.js.map +1 -1
- package/dist/fields/commonFieldTypes.d.ts +4 -3
- package/dist/fields/components/CommonInput.d.ts +18 -0
- package/dist/fields/components/CommonInput.js +64 -0
- package/dist/fields/components/CommonInput.js.map +1 -0
- package/dist/fields/components/InternalField.d.ts +3 -3
- package/dist/fields/components/InternalField.js +7 -7
- package/dist/fields/components/InternalField.js.map +1 -1
- package/dist/fields/components/Placeholder.js +3 -3
- package/dist/fields/components/Placeholder.js.map +1 -1
- package/dist/fontStyle.js +2 -2
- package/dist/index.d.ts +0 -3
- package/dist/index.js +0 -3
- package/dist/index.js.map +1 -1
- package/dist/theme.d.ts +58 -28
- package/dist/theme.js +34 -18
- package/dist/theme.js.map +1 -1
- package/dist/utils/focusOutline.d.ts +1 -0
- package/dist/utils/focusOutline.js +7 -1
- package/dist/utils/focusOutline.js.map +1 -1
- package/package.json +2 -1
- package/dist/ConfirmationRadioButtons/Confirmation.d.ts +0 -17
- package/dist/ConfirmationRadioButtons/Confirmation.js +0 -100
- package/dist/ConfirmationRadioButtons/Confirmation.js.map +0 -1
- package/dist/ConfirmationRadioButtons/Confirmation.stories.d.ts +0 -21
- package/dist/ConfirmationRadioButtons/Confirmation.stories.js +0 -76
- package/dist/ConfirmationRadioButtons/Confirmation.stories.js.map +0 -1
- package/dist/ConfirmationRadioButtons/Container.d.ts +0 -2
- package/dist/ConfirmationRadioButtons/Container.js +0 -8
- package/dist/ConfirmationRadioButtons/Container.js.map +0 -1
- package/dist/ConfirmationRadioButtons/RadioButtonStyled.d.ts +0 -17
- package/dist/ConfirmationRadioButtons/RadioButtonStyled.js +0 -41
- package/dist/ConfirmationRadioButtons/RadioButtonStyled.js.map +0 -1
- package/dist/ConfirmationRadioButtons/__tests__/Confirmation.js +0 -8
- package/dist/ConfirmationRadioButtons/__tests__/Confirmation.js.map +0 -1
- package/dist/ConfirmationRadioButtons/index.d.ts +0 -1
- package/dist/ConfirmationRadioButtons/index.js +0 -2
- package/dist/ConfirmationRadioButtons/index.js.map +0 -1
- package/dist/Message/Message.d.ts +0 -21
- package/dist/Message/Message.js +0 -45
- package/dist/Message/Message.js.map +0 -1
- package/dist/Message/Message.stories.d.ts +0 -13
- package/dist/Message/Message.stories.js +0 -38
- package/dist/Message/Message.stories.js.map +0 -1
- package/dist/Message/__tests__/Message.js +0 -26
- package/dist/Message/__tests__/Message.js.map +0 -1
- package/dist/Message/index.d.ts +0 -1
- package/dist/Message/index.js +0 -2
- package/dist/Message/index.js.map +0 -1
- package/dist/RadioButton/Container.d.ts +0 -2
- package/dist/RadioButton/Container.js +0 -9
- package/dist/RadioButton/Container.js.map +0 -1
- package/dist/RadioButton/RadioButton.d.ts +0 -10
- package/dist/RadioButton/RadioButton.js +0 -68
- package/dist/RadioButton/RadioButton.js.map +0 -1
- package/dist/RadioButton/RadioButton.stories.d.ts +0 -15
- package/dist/RadioButton/RadioButton.stories.js +0 -29
- package/dist/RadioButton/RadioButton.stories.js.map +0 -1
- package/dist/RadioButton/__tests__/RadioButton.js +0 -13
- package/dist/RadioButton/__tests__/RadioButton.js.map +0 -1
- package/dist/RadioButton/index.d.ts +0 -1
- package/dist/RadioButton/index.js +0 -2
- package/dist/RadioButton/index.js.map +0 -1
- /package/dist/{ConfirmationRadioButtons/__tests__/Confirmation.d.ts → Accordion/__tests__/Accordion.d.ts} +0 -0
- /package/dist/{Message/__tests__/Message.d.ts → BrandCard/__tests__/BrandCard.d.ts} +0 -0
- /package/dist/{RadioButton/__tests__/RadioButton.d.ts → IconStrict/__tests__/IconStrict.d.ts} +0 -0
package/dist/theme.d.ts
CHANGED
@@ -1,18 +1,33 @@
|
|
1
1
|
declare const colors: {
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
2
|
+
lollipop: string;
|
3
|
+
marshmallowPink: string;
|
4
|
+
bubblegum: string;
|
5
|
+
fairyFloss: string;
|
6
|
+
boba: string;
|
7
|
+
liquorice: string;
|
8
|
+
sesame: string;
|
9
|
+
chia: string;
|
10
|
+
custard: string;
|
11
|
+
mascarpone: string;
|
12
|
+
coconut: string;
|
13
|
+
cream: string;
|
14
|
+
spearmint: string;
|
15
|
+
feijoa: string;
|
16
|
+
blueberry: string;
|
17
|
+
macaroon: string;
|
18
|
+
pistachio: string;
|
19
|
+
matcha: string;
|
20
|
+
caramel: string;
|
21
|
+
peanut: string;
|
22
|
+
marzipan: string;
|
23
|
+
oatmeal: string;
|
24
|
+
strawberry: string;
|
25
|
+
watermelon: string;
|
26
|
+
apple: string;
|
27
|
+
mint: string;
|
28
|
+
lemon: string;
|
29
|
+
sherbert: string;
|
30
|
+
tangerine: string;
|
16
31
|
compareTheMarket: string;
|
17
32
|
confused: string;
|
18
33
|
onfido: string;
|
@@ -29,20 +44,35 @@ declare const colors: {
|
|
29
44
|
export type Color = keyof typeof colors;
|
30
45
|
export declare const theme: {
|
31
46
|
colors: {
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
47
|
+
lollipop: string;
|
48
|
+
marshmallowPink: string;
|
49
|
+
bubblegum: string;
|
50
|
+
fairyFloss: string;
|
51
|
+
boba: string;
|
52
|
+
liquorice: string;
|
53
|
+
sesame: string;
|
54
|
+
chia: string;
|
55
|
+
custard: string;
|
56
|
+
mascarpone: string;
|
57
|
+
coconut: string;
|
58
|
+
cream: string;
|
59
|
+
spearmint: string;
|
60
|
+
feijoa: string;
|
61
|
+
blueberry: string;
|
62
|
+
macaroon: string;
|
63
|
+
pistachio: string;
|
64
|
+
matcha: string;
|
65
|
+
caramel: string;
|
66
|
+
peanut: string;
|
67
|
+
marzipan: string;
|
68
|
+
oatmeal: string;
|
69
|
+
strawberry: string;
|
70
|
+
watermelon: string;
|
71
|
+
apple: string;
|
72
|
+
mint: string;
|
73
|
+
lemon: string;
|
74
|
+
sherbert: string;
|
75
|
+
tangerine: string;
|
46
76
|
compareTheMarket: string;
|
47
77
|
confused: string;
|
48
78
|
onfido: string;
|
package/dist/theme.js
CHANGED
@@ -1,22 +1,38 @@
|
|
1
1
|
const colors = {
|
2
|
-
// Core
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
//
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
2
|
+
// Core Primary
|
3
|
+
lollipop: '#FF69B5',
|
4
|
+
marshmallowPink: '#FF88C8',
|
5
|
+
bubblegum: '#FFB3DA',
|
6
|
+
fairyFloss: '#FFCCE7',
|
7
|
+
// Core Secondary
|
8
|
+
boba: '#0E0E0C',
|
9
|
+
liquorice: '#292924',
|
10
|
+
sesame: '#636768',
|
11
|
+
chia: '#D2D2D2',
|
12
|
+
// Core Tertiary
|
13
|
+
custard: '#F1E9DC',
|
14
|
+
mascarpone: '#F8F2EA',
|
15
|
+
coconut: '#FBF8F5',
|
16
|
+
cream: '#FFFFFF',
|
17
|
+
// Brand Secondary
|
18
|
+
spearmint: '#294636',
|
19
|
+
feijoa: '#3B5848',
|
20
|
+
blueberry: '#89A2B6',
|
21
|
+
macaroon: '#BBCFDF',
|
22
|
+
pistachio: '#838E49',
|
23
|
+
matcha: '#DBE1B0',
|
24
|
+
caramel: '#C26B2A',
|
25
|
+
peanut: '#F8C699',
|
26
|
+
marzipan: '#A1957C',
|
27
|
+
oatmeal: '#DAD2C4',
|
15
28
|
// Traffic light
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
29
|
+
strawberry: '#DF2929',
|
30
|
+
watermelon: '#F5CFCC',
|
31
|
+
apple: '#008933',
|
32
|
+
mint: '#C9E2CE',
|
33
|
+
lemon: '#FFD23A',
|
34
|
+
sherbert: '#FCF0D0',
|
35
|
+
tangerine: '#FF9F2C',
|
20
36
|
// Third-party brand colours
|
21
37
|
compareTheMarket: '#004A8E',
|
22
38
|
confused: '#000A8C',
|
@@ -26,7 +42,7 @@ const colors = {
|
|
26
42
|
checkout: '#56AC88',
|
27
43
|
facebook: '#3B5998',
|
28
44
|
stripe: '#6772E5',
|
29
|
-
intercom: '
|
45
|
+
intercom: '#286EFA',
|
30
46
|
ravelin: '#2A4AFC',
|
31
47
|
rac: '#EA7D24',
|
32
48
|
hometree: '#17171C',
|
package/dist/theme.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,GAAG;IACb,
|
1
|
+
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,GAAG;IACb,eAAe;IACf,QAAQ,EAAE,SAAS;IACnB,eAAe,EAAE,SAAS;IAC1B,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,SAAS;IAErB,iBAAiB;IACjB,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IAEf,gBAAgB;IAChB,OAAO,EAAE,SAAS;IAClB,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,SAAS;IAEhB,kBAAkB;IAClB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,SAAS;IACjB,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,SAAS;IACnB,OAAO,EAAE,SAAS;IAElB,gBAAgB;IAChB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,SAAS;IAEpB,4BAA4B;IAC5B,gBAAgB,EAAE,SAAS;IAC3B,QAAQ,EAAE,SAAS;IACnB,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,SAAS;IACnB,OAAO,EAAE,SAAS;IAClB,GAAG,EAAE,SAAS;IACd,QAAQ,EAAE,SAAS;CACpB,CAAA;AAID,MAAM,IAAI,GAAG;IACX,MAAM,EAAE;QACN,MAAM,EAAE,GAAG;QACX,MAAM,EAAE,GAAG;QACX,IAAI,EAAE,GAAG;KACV;IACD,MAAM,EACJ,+IAA+I;CAClJ,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM;IACN,IAAI;CACL,CAAA"}
|
@@ -4,7 +4,13 @@ export const focusOutline = ({ selector = '&:focus-visible', } = {}) => css `
|
|
4
4
|
outline: 0;
|
5
5
|
|
6
6
|
${selector} {
|
7
|
-
outline: 2px solid ${theme.colors.
|
7
|
+
outline: 2px solid ${theme.colors.liquorice};
|
8
|
+
outline-offset: 2px;
|
9
|
+
}
|
10
|
+
`;
|
11
|
+
export const focusOutlineStyle = css `
|
12
|
+
&:focus-visible {
|
13
|
+
outline: 2px solid ${theme.colors.liquorice};
|
8
14
|
outline-offset: 2px;
|
9
15
|
}
|
10
16
|
`;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"focusOutline.js","sourceRoot":"","sources":["../../src/utils/focusOutline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,GAAG,iBAAiB,MACH,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;IAGjC,QAAQ;yBACa,KAAK,CAAC,MAAM,CAAC,SAAS;;;CAG9C,CAAA"}
|
1
|
+
{"version":3,"file":"focusOutline.js","sourceRoot":"","sources":["../../src/utils/focusOutline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,GAAG,iBAAiB,MACH,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;IAGjC,QAAQ;yBACa,KAAK,CAAC,MAAM,CAAC,SAAS;;;CAG9C,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;yBAEX,KAAK,CAAC,MAAM,CAAC,SAAS;;;CAG9C,CAAA"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@mrshmllw/smores-react",
|
3
|
-
"version": "
|
3
|
+
"version": "3.0.0",
|
4
4
|
"main": "./dist/index.js",
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
6
6
|
"keywords": [
|
@@ -23,6 +23,7 @@
|
|
23
23
|
"test:coverage": "jest --coverage --silent",
|
24
24
|
"test:watch": "jest --watch --silent",
|
25
25
|
"test": "jest --silent",
|
26
|
+
"updateSnaps": "jest --updateSnapshot",
|
26
27
|
"snyk-protect": "snyk-protect",
|
27
28
|
"prepare": "npm run snyk-protect && husky install",
|
28
29
|
"pre-commit-lint": "npm run check-types && lint-staged",
|
@@ -1,17 +0,0 @@
|
|
1
|
-
import { FC, FocusEvent, ReactElement } from 'react';
|
2
|
-
import { MarginProps } from '../utils/space';
|
3
|
-
export type ConfirmationProps = {
|
4
|
-
onChange(value?: boolean): void;
|
5
|
-
checked?: boolean;
|
6
|
-
id?: string;
|
7
|
-
error?: boolean;
|
8
|
-
errorMsg?: string;
|
9
|
-
label?: string;
|
10
|
-
onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
|
11
|
-
sublabel?: string | ReactElement;
|
12
|
-
yesLabel?: string | ReactElement;
|
13
|
-
noLabel?: string | ReactElement;
|
14
|
-
required?: boolean;
|
15
|
-
disabled?: boolean;
|
16
|
-
} & MarginProps;
|
17
|
-
export declare const Confirmation: FC<ConfirmationProps>;
|
@@ -1,100 +0,0 @@
|
|
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, { css } from 'styled-components';
|
14
|
-
import { theme } from '../theme';
|
15
|
-
import { Box } from '../Box';
|
16
|
-
import { Text } from '../Text';
|
17
|
-
import { RadioButton } from './RadioButtonStyled';
|
18
|
-
import { useUniqueId } from '../utils/id';
|
19
|
-
import { useDeprecatedWarning } from '../utils/deprecated';
|
20
|
-
export const Confirmation = (props) => {
|
21
|
-
const { checked, onChange, id: idProp, error = false, errorMsg = '', label, onBlur, sublabel, yesLabel = 'Yes', noLabel = 'No', required = false, disabled = false } = props, marginProps = __rest(props, ["checked", "onChange", "id", "error", "errorMsg", "label", "onBlur", "sublabel", "yesLabel", "noLabel", "required", "disabled"]);
|
22
|
-
useDeprecatedWarning({
|
23
|
-
title: 'Confirmation',
|
24
|
-
message: 'The Confirmation component has been deprecated. Please use the new RadioGroup component instead.',
|
25
|
-
componentProps: props,
|
26
|
-
});
|
27
|
-
const id = useUniqueId(idProp);
|
28
|
-
return (React.createElement(ConfirmationWrapper, Object.assign({}, marginProps),
|
29
|
-
(label || sublabel) && (React.createElement(TextWrapper, null,
|
30
|
-
label && (React.createElement(SectionHeadingText, { tag: "h3" },
|
31
|
-
label,
|
32
|
-
required && React.createElement(Asterisk, null, "*"))),
|
33
|
-
sublabel && (React.createElement(Text, { tag: "p", typo: "base-small", color: "subtext" }, sublabel)))),
|
34
|
-
React.createElement(RadioButtonGroupWrapper, null,
|
35
|
-
React.createElement(RadioButtonGroup, null,
|
36
|
-
React.createElement(RadioButtonWrapper, { checked: checked === true, error: error, disabled: disabled },
|
37
|
-
React.createElement(RadioButton, { id: id, label: yesLabel, checked: checked === true, onChange: () => onChange(true), value: id, onBlur: onBlur, disabled: disabled })),
|
38
|
-
React.createElement(RadioButtonWrapper, { checked: checked === false, error: error, disabled: disabled },
|
39
|
-
React.createElement(RadioButton, { id: `${id}-1`, label: noLabel, checked: checked === false, onChange: () => onChange(false), value: `${id}-1`, onBlur: onBlur, disabled: disabled }))),
|
40
|
-
error && React.createElement(ErrorBox, null, errorMsg))));
|
41
|
-
};
|
42
|
-
const RadioButtonGroupWrapper = styled.div `
|
43
|
-
display: flex;
|
44
|
-
flex-direction: column;
|
45
|
-
`;
|
46
|
-
const RadioButtonGroup = styled.div `
|
47
|
-
display: flex;
|
48
|
-
flex-direction: row;
|
49
|
-
`;
|
50
|
-
const getColor = (checked, error) => {
|
51
|
-
if (error) {
|
52
|
-
return `2px solid ${theme.colors.error}`;
|
53
|
-
}
|
54
|
-
else if (checked) {
|
55
|
-
return `2px solid ${theme.colors.secondary}`;
|
56
|
-
}
|
57
|
-
else {
|
58
|
-
return 'none';
|
59
|
-
}
|
60
|
-
};
|
61
|
-
const RadioButtonWrapper = styled.div `
|
62
|
-
background-color: ${({ checked }) => !checked && `${theme.colors.background}`};
|
63
|
-
border: ${({ checked, error }) => getColor(checked, error)};
|
64
|
-
margin-right: 10px;
|
65
|
-
width: 139px;
|
66
|
-
display: flex;
|
67
|
-
align-items: center;
|
68
|
-
height: 56px;
|
69
|
-
padding-left: 12px;
|
70
|
-
border-radius: 5px;
|
71
|
-
font-weight: bold;
|
72
|
-
${({ disabled }) => disabled &&
|
73
|
-
css `
|
74
|
-
border-color: ${theme.colors.secondary};
|
75
|
-
opacity: 0.5;
|
76
|
-
`}
|
77
|
-
`;
|
78
|
-
const ErrorBox = styled.span `
|
79
|
-
margin-top: 7px;
|
80
|
-
margin-left: 12px;
|
81
|
-
font-size: 12px;
|
82
|
-
color: ${theme.colors.error};
|
83
|
-
`;
|
84
|
-
const ConfirmationWrapper = styled(Box) `
|
85
|
-
display: flex;
|
86
|
-
flex-direction: column;
|
87
|
-
`;
|
88
|
-
const SectionHeadingText = styled(Text) `
|
89
|
-
font-weight: bold;
|
90
|
-
`;
|
91
|
-
const TextWrapper = styled.div `
|
92
|
-
display: flex;
|
93
|
-
flex-direction: column;
|
94
|
-
margin-bottom: 8px;
|
95
|
-
`;
|
96
|
-
const Asterisk = styled.span `
|
97
|
-
font-size: 14px;
|
98
|
-
color: ${theme.colors.error};
|
99
|
-
`;
|
100
|
-
//# sourceMappingURL=Confirmation.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/Confirmation.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAuC,MAAM,OAAO,CAAA;AAC3D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,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;AAEzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAiB1D,MAAM,CAAC,MAAM,YAAY,GAA0B,CAAC,KAAK,EAAE,EAAE;IAC3D,MAAM,EACJ,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,EAChB,QAAQ,GAAG,KAAK,KAEd,KAAK,EADJ,WAAW,UACZ,KAAK,EAdH,gIAcL,CAAQ,CAAA;IAET,oBAAoB,CAAC;QACnB,KAAK,EAAE,cAAc;QACrB,OAAO,EACL,kGAAkG;QACpG,cAAc,EAAE,KAAK;KACtB,CAAC,CAAA;IAEF,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,OAAO,CACL,oBAAC,mBAAmB,oBAAK,WAAW;QACjC,CAAC,KAAK,IAAI,QAAQ,CAAC,IAAI,CACtB,oBAAC,WAAW;YACT,KAAK,IAAI,CACR,oBAAC,kBAAkB,IAAC,GAAG,EAAC,IAAI;gBACzB,KAAK;gBACL,QAAQ,IAAI,oBAAC,QAAQ,YAAa,CAChB,CACtB;YACA,QAAQ,IAAI,CACX,oBAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,SAAS,IAC5C,QAAQ,CACJ,CACR,CACW,CACf;QACD,oBAAC,uBAAuB;YACtB,oBAAC,gBAAgB;gBACf,oBAAC,kBAAkB,IACjB,OAAO,EAAE,OAAO,KAAK,IAAI,EACzB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ;oBAElB,oBAAC,WAAW,IACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,QAAQ,EACf,OAAO,EAAE,OAAO,KAAK,IAAI,EACzB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAC9B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,GAClB,CACiB;gBACrB,oBAAC,kBAAkB,IACjB,OAAO,EAAE,OAAO,KAAK,KAAK,EAC1B,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ;oBAElB,oBAAC,WAAW,IACV,EAAE,EAAE,GAAG,EAAE,IAAI,EACb,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,OAAO,KAAK,KAAK,EAC1B,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC/B,KAAK,EAAE,GAAG,EAAE,IAAI,EAChB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,GAClB,CACiB,CACJ;YAClB,KAAK,IAAI,oBAAC,QAAQ,QAAE,QAAQ,CAAY,CACjB,CACN,CACvB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGzC,CAAA;AAED,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGlC,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,OAAiB,EAAE,KAAe,EAAE,EAAE;IACtD,IAAI,KAAK,EAAE;QACT,OAAO,aAAa,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;KACzC;SAAM,IAAI,OAAO,EAAE;QAClB,OAAO,aAAa,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,CAAA;KAC7C;SAAM;QACL,OAAO,MAAM,CAAA;KACd;AACH,CAAC,CAAA;AAED,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAW;sBAC1B,CAAC,EAAE,OAAO,EAAa,EAAE,EAAE,CAC7C,CAAC,OAAO,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,UAAU,EAAE;YAChC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAa,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC;;;;;;;;;IASnE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjB,QAAQ;IACR,GAAG,CAAA;sBACe,KAAK,CAAC,MAAM,CAAC,SAAS;;KAEvC;CACJ,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAA;;;;WAIjB,KAAK,CAAC,MAAM,CAAC,KAAK;CAC5B,CAAA;AAED,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;CAGtC,CAAA;AAED,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAEtC,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI7B,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAA;;WAEjB,KAAK,CAAC,MAAM,CAAC,KAAK;CAC5B,CAAA"}
|
@@ -1,21 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { ConfirmationProps } from './Confirmation';
|
3
|
-
declare const _default: {
|
4
|
-
title: string;
|
5
|
-
component: React.FC<ConfirmationProps>;
|
6
|
-
argTypes: {
|
7
|
-
onChange: {
|
8
|
-
action: string;
|
9
|
-
};
|
10
|
-
};
|
11
|
-
};
|
12
|
-
export default _default;
|
13
|
-
export declare const Default: any;
|
14
|
-
export declare const WithError: any;
|
15
|
-
export declare const WithSublabel: any;
|
16
|
-
export declare const WorkingExample: any;
|
17
|
-
export declare const WithCustomLabel: any;
|
18
|
-
export declare const WithNoLabel: any;
|
19
|
-
export declare const Required: any;
|
20
|
-
export declare const RequiredWithLongLabel: any;
|
21
|
-
export declare const Disabled: any;
|
@@ -1,76 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { noop } from '../utils/noop';
|
3
|
-
import { Confirmation } from './Confirmation';
|
4
|
-
import { Container } from './Container';
|
5
|
-
export default {
|
6
|
-
title: 'Confirmation Radio Button',
|
7
|
-
component: Confirmation,
|
8
|
-
argTypes: { onChange: { action: 'clicked' } },
|
9
|
-
};
|
10
|
-
const Template = (props) => React.createElement(Confirmation, Object.assign({}, props));
|
11
|
-
export const Default = Template.bind({});
|
12
|
-
Default.args = {
|
13
|
-
id: 'radioButton',
|
14
|
-
onChange: noop,
|
15
|
-
checked: false,
|
16
|
-
label: 'Do you like marshmallows?',
|
17
|
-
};
|
18
|
-
export const WithError = Template.bind({});
|
19
|
-
WithError.args = {
|
20
|
-
id: 'radioButton',
|
21
|
-
onChange: noop,
|
22
|
-
checked: undefined,
|
23
|
-
label: 'Do you like marshmallows?',
|
24
|
-
error: true,
|
25
|
-
errorMsg: 'This field is required.',
|
26
|
-
};
|
27
|
-
export const WithSublabel = Template.bind({});
|
28
|
-
WithSublabel.args = {
|
29
|
-
id: 'radioButton',
|
30
|
-
onChange: noop,
|
31
|
-
checked: undefined,
|
32
|
-
label: 'Do you like marshmallows?',
|
33
|
-
sublabel: 'This includes smores and hot chocolate topped with marshmallows.',
|
34
|
-
};
|
35
|
-
const ContainerTemplate = () => React.createElement(Container, null);
|
36
|
-
export const WorkingExample = ContainerTemplate.bind({});
|
37
|
-
export const WithCustomLabel = Template.bind({});
|
38
|
-
WithCustomLabel.args = {
|
39
|
-
id: 'radioButton',
|
40
|
-
onChange: noop,
|
41
|
-
checked: undefined,
|
42
|
-
label: 'Do you like marshmallows?',
|
43
|
-
yesLabel: 'Correct',
|
44
|
-
};
|
45
|
-
export const WithNoLabel = Template.bind({});
|
46
|
-
WithNoLabel.args = {
|
47
|
-
id: 'radioButton',
|
48
|
-
onChange: noop,
|
49
|
-
checked: undefined,
|
50
|
-
yesLabel: 'Yes',
|
51
|
-
};
|
52
|
-
export const Required = Template.bind({});
|
53
|
-
Required.args = {
|
54
|
-
id: 'radioButton',
|
55
|
-
label: 'Do you like ice cream?',
|
56
|
-
onChange: noop,
|
57
|
-
checked: undefined,
|
58
|
-
required: true,
|
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
|
-
};
|
68
|
-
export const Disabled = Template.bind({});
|
69
|
-
Disabled.args = {
|
70
|
-
id: 'radioButton',
|
71
|
-
label: 'Do you like marshmallows?',
|
72
|
-
onChange: noop,
|
73
|
-
checked: true,
|
74
|
-
disabled: true,
|
75
|
-
};
|
76
|
-
//# sourceMappingURL=Confirmation.stories.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"Confirmation.stories.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/Confirmation.stories.tsx"],"names":[],"mappings":"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"}
|
@@ -1,8 +0,0 @@
|
|
1
|
-
import React, { useState } from 'react';
|
2
|
-
import { Confirmation } from './Confirmation';
|
3
|
-
export const Container = () => {
|
4
|
-
const [checked, setChecked] = useState(undefined);
|
5
|
-
return (React.createElement("form", null,
|
6
|
-
React.createElement(Confirmation, { id: "radioButton", onChange: (selection) => setChecked(selection), checked: checked, label: 'Do you like marshmallows?', error: checked === undefined, errorMsg: "This field is required." })));
|
7
|
-
};
|
8
|
-
//# sourceMappingURL=Container.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAsB,SAAS,CAAC,CAAA;IAEtE,OAAO,CACL;QACE,oBAAC,YAAY,IACX,EAAE,EAAC,aAAa,EAChB,QAAQ,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,EAC9C,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,2BAA2B,EAClC,KAAK,EAAE,OAAO,KAAK,SAAS,EAC5B,QAAQ,EAAC,yBAAyB,GAClC,CACG,CACR,CAAA;AACH,CAAC,CAAA"}
|
@@ -1,17 +0,0 @@
|
|
1
|
-
import { FC, ChangeEvent, FocusEvent, ReactElement } from 'react';
|
2
|
-
export interface FakeInput {
|
3
|
-
checked?: boolean;
|
4
|
-
error?: boolean;
|
5
|
-
disabled?: boolean;
|
6
|
-
}
|
7
|
-
type RadioButtonProps = {
|
8
|
-
id: string;
|
9
|
-
label: string | ReactElement;
|
10
|
-
checked?: boolean;
|
11
|
-
value: string;
|
12
|
-
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
|
13
|
-
onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
|
14
|
-
disabled?: boolean;
|
15
|
-
};
|
16
|
-
export declare const RadioButton: FC<RadioButtonProps>;
|
17
|
-
export {};
|
@@ -1,41 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import styled from 'styled-components';
|
3
|
-
import { theme } from '../theme';
|
4
|
-
import { Box } from '../Box';
|
5
|
-
export const RadioButton = ({ id, label, checked, value, onChange, onBlur, disabled = false, }) => (React.createElement(Box, { flex: true, alignItems: "center" },
|
6
|
-
React.createElement(RadioInput, { id: id, type: "radio", checked: checked, value: value, onChange: onChange, onBlur: onBlur, disabled: disabled }),
|
7
|
-
React.createElement(RadioLabel, { htmlFor: id },
|
8
|
-
React.createElement(FakeInput, { checked: checked }),
|
9
|
-
React.createElement(Text, null, label))));
|
10
|
-
const FakeInput = styled.div `
|
11
|
-
width: 24px;
|
12
|
-
height: 24px;
|
13
|
-
border-radius: 50%;
|
14
|
-
background-color: ${theme.colors.white};
|
15
|
-
margin-right: 10px;
|
16
|
-
border: ${({ checked }) => checked
|
17
|
-
? `8px solid ${theme.colors.secondary}`
|
18
|
-
: `1px solid ${theme.colors.secondary}`};
|
19
|
-
`;
|
20
|
-
const RadioInput = styled.input `
|
21
|
-
position: absolute;
|
22
|
-
opacity: 0;
|
23
|
-
height: 0;
|
24
|
-
width: 0;
|
25
|
-
`;
|
26
|
-
const RadioLabel = styled.label `
|
27
|
-
font-family: 'Gordita', sans-serif;
|
28
|
-
text-transform: none;
|
29
|
-
font-size: 16px;
|
30
|
-
line-height: 17px;
|
31
|
-
color: ${theme.colors.secondary};
|
32
|
-
margin-bottom: 0;
|
33
|
-
display: flex;
|
34
|
-
cursor: pointer;
|
35
|
-
`;
|
36
|
-
// needed because the text is top aligned in its viewbox
|
37
|
-
const Text = styled.span `
|
38
|
-
position: relative;
|
39
|
-
bottom: -5px;
|
40
|
-
`;
|
41
|
-
//# sourceMappingURL=RadioButtonStyled.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"RadioButtonStyled.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/RadioButtonStyled.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAA;AACxE,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAkB5B,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAChD,EAAE,EACF,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,GAAG,KAAK,GACC,EAAE,EAAE,CAAC,CACtB,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ;IAC3B,oBAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,GAClB;IACF,oBAAC,UAAU,IAAC,OAAO,EAAE,EAAE;QACrB,oBAAC,SAAS,IAAC,OAAO,EAAE,OAAO,GAAI;QAC/B,oBAAC,IAAI,QAAE,KAAK,CAAQ,CACT,CACT,CACP,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAW;;;;sBAIjB,KAAK,CAAC,MAAM,CAAC,KAAK;;YAE5B,CAAC,EAAE,OAAO,EAAa,EAAE,EAAE,CACnC,OAAO;IACL,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE;IACvC,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE;CAC5C,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;CAK9B,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;WAKpB,KAAK,CAAC,MAAM,CAAC,SAAS;;;;CAIhC,CAAA;AAED,wDAAwD;AACxD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;;;CAGvB,CAAA"}
|
@@ -1,8 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { render } from '@testing-library/react';
|
3
|
-
import { Confirmation } from '../Confirmation';
|
4
|
-
test('renders', () => {
|
5
|
-
const { container } = render(React.createElement(Confirmation, null));
|
6
|
-
expect(container.firstChild).toMatchSnapshot();
|
7
|
-
});
|
8
|
-
//# sourceMappingURL=Confirmation.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../../src/ConfirmationRadioButtons/__tests__/Confirmation.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE;IACnB,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,YAAY,OAAG,CAAC,CAAA;IAC9C,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAA;AAChD,CAAC,CAAC,CAAA"}
|
@@ -1 +0,0 @@
|
|
1
|
-
export { Confirmation } from './Confirmation';
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA"}
|
@@ -1,21 +0,0 @@
|
|
1
|
-
import { FC, ReactNode } from 'react';
|
2
|
-
type BorderProps = {
|
3
|
-
hasBorder?: false;
|
4
|
-
borderColor?: never;
|
5
|
-
} | {
|
6
|
-
hasBorder: true;
|
7
|
-
borderColor: string;
|
8
|
-
};
|
9
|
-
export type MessageProps = {
|
10
|
-
className?: string;
|
11
|
-
children: ReactNode;
|
12
|
-
type?: 'info' | 'warning' | 'warning-bubble' | string;
|
13
|
-
alignIcon?: 'center' | 'flex-start' | 'flex-end';
|
14
|
-
backgroundColor?: string;
|
15
|
-
sizeSmall?: boolean;
|
16
|
-
} & BorderProps;
|
17
|
-
/**
|
18
|
-
* @deprecated Use Support Message instead
|
19
|
-
*/
|
20
|
-
export declare const Message: FC<MessageProps>;
|
21
|
-
export {};
|
package/dist/Message/Message.js
DELETED
@@ -1,45 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import styled, { css } from 'styled-components';
|
3
|
-
import { Box } from '../Box';
|
4
|
-
import { Icon } from '../Icon';
|
5
|
-
import { theme } from '../theme';
|
6
|
-
import { useDeprecatedWarning } from '../utils/deprecated';
|
7
|
-
/**
|
8
|
-
* @deprecated Use Support Message instead
|
9
|
-
*/
|
10
|
-
export const Message = ({ className, children, type = 'info', alignIcon = 'center', backgroundColor, sizeSmall, hasBorder, borderColor, }) => {
|
11
|
-
useDeprecatedWarning({
|
12
|
-
title: 'Legacy Message component',
|
13
|
-
message: "You're using the legacy Message component. Please use the new Support Message component.",
|
14
|
-
});
|
15
|
-
return (React.createElement(Wrapper, { className: className, type: type, backgroundColor: backgroundColor, sizeSmall: sizeSmall, hasBorder: hasBorder, borderColor: borderColor },
|
16
|
-
React.createElement(IconWrapper, { alignIcon: alignIcon },
|
17
|
-
React.createElement(Icon, { size: sizeSmall ? 24 : 32, render: type, color: type === 'warning' ? 'error' : 'secondary' })),
|
18
|
-
children));
|
19
|
-
};
|
20
|
-
const IconWrapper = styled(Box) `
|
21
|
-
align-self: ${({ alignIcon }) => alignIcon};
|
22
|
-
`;
|
23
|
-
const Wrapper = styled.div(({ type, backgroundColor, sizeSmall, hasBorder, borderColor }) => css `
|
24
|
-
align-items: center;
|
25
|
-
background-color: ${backgroundColor
|
26
|
-
? backgroundColor
|
27
|
-
: type === 'warning'
|
28
|
-
? theme.colors.white
|
29
|
-
: theme.colors.background};
|
30
|
-
box-sizing: border-box;
|
31
|
-
${type === 'warning'
|
32
|
-
? `border: 1px solid ${theme.colors.error};`
|
33
|
-
: hasBorder && `border: 1px solid ${borderColor};`}
|
34
|
-
border-radius: 8px;
|
35
|
-
margin-bottom: 24px;
|
36
|
-
padding: 16px;
|
37
|
-
display: flex;
|
38
|
-
font-family: ${theme.font.system};
|
39
|
-
color: ${type === 'warning' ? theme.colors.error : theme.colors.secondary};
|
40
|
-
font-size: ${sizeSmall ? '12px' : '16px'};
|
41
|
-
span {
|
42
|
-
margin: 0 16px 0 0;
|
43
|
-
}
|
44
|
-
`);
|
45
|
-
//# sourceMappingURL=Message.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../src/Message/Message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAe1D;;GAEG;AAEH,MAAM,CAAC,MAAM,OAAO,GAAqB,CAAC,EACxC,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,MAAM,EACb,SAAS,GAAG,QAAQ,EACpB,eAAe,EACf,SAAS,EACT,SAAS,EACT,WAAW,GACZ,EAAE,EAAE;IACH,oBAAoB,CAAC;QACnB,KAAK,EAAE,0BAA0B;QACjC,OAAO,EACL,0FAA0F;KAC7F,CAAC,CAAA;IACF,OAAO,CACL,oBAAC,OAAO,IACN,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW;QAExB,oBAAC,WAAW,IAAC,SAAS,EAAE,SAAS;YAC/B,oBAAC,IAAI,IACH,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACzB,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,GACjD,CACU;QAEb,QAAQ,CACD,CACX,CAAA;AACH,CAAC,CAAA;AAcD,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAc;gBAC7B,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS;CAC3C,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CACxB,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;wBAE/C,eAAe;IACjC,CAAC,CAAC,eAAe;IACjB,CAAC,CAAC,IAAI,KAAK,SAAS;QACpB,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;QACpB,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU;;MAEzB,IAAI,KAAK,SAAS;IAClB,CAAC,CAAC,qBAAqB,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG;IAC5C,CAAC,CAAC,SAAS,IAAI,qBAAqB,WAAW,GAAG;;;;;mBAKrC,KAAK,CAAC,IAAI,CAAC,MAAM;aACvB,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS;iBAC5D,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;;;;GAIzC,CACF,CAAA"}
|
@@ -1,13 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { MessageProps } from './Message';
|
3
|
-
declare const _default: {
|
4
|
-
title: string;
|
5
|
-
component: React.FC<MessageProps>;
|
6
|
-
};
|
7
|
-
export default _default;
|
8
|
-
export declare const Default: any;
|
9
|
-
export declare const Info: any;
|
10
|
-
export declare const Warning: any;
|
11
|
-
export declare const WarningBubbleSmall: any;
|
12
|
-
export declare const InfoBubbleSmall: any;
|
13
|
-
export declare const CardWithBorder: any;
|