@sproutsocial/racine 12.19.0 → 12.21.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/CHANGELOG.md +33 -0
- package/README.md +46 -44
- package/__flow__/Avatar/index.js +26 -26
- package/__flow__/Avatar/index.stories.js +8 -8
- package/__flow__/Avatar/index.test.js +13 -13
- package/__flow__/Badge/constants.js +14 -14
- package/__flow__/Badge/index.js +18 -18
- package/__flow__/Badge/index.stories.js +8 -8
- package/__flow__/Badge/index.test.js +43 -43
- package/__flow__/Badge/styles.js +13 -9
- package/__flow__/Banner/index.js +21 -21
- package/__flow__/Banner/index.stories.js +56 -68
- package/__flow__/Banner/index.test.js +32 -34
- package/__flow__/Banner/styles.js +4 -4
- package/__flow__/Box/index.js +4 -4
- package/__flow__/Box/index.stories.js +58 -51
- package/__flow__/Box/index.test.js +7 -7
- package/__flow__/Box/styles.js +6 -6
- package/__flow__/Breadcrumb/index.js +9 -13
- package/__flow__/Breadcrumb/index.stories.js +14 -14
- package/__flow__/Breadcrumb/index.test.js +20 -20
- package/__flow__/Breadcrumb/styles.js +5 -5
- package/__flow__/Button/index.js +23 -23
- package/__flow__/Button/index.stories.js +34 -34
- package/__flow__/Button/styles.js +11 -11
- package/__flow__/Card/index.js +7 -7
- package/__flow__/Card/index.stories.js +14 -14
- package/__flow__/Card/styles.js +7 -7
- package/__flow__/CharacterCounter/index.js +7 -7
- package/__flow__/CharacterCounter/index.stories.js +25 -26
- package/__flow__/CharacterCounter/index.test.js +11 -11
- package/__flow__/CharacterCounter/styles.js +3 -3
- package/__flow__/ChartLegend/index.js +7 -7
- package/__flow__/ChartLegend/index.stories.js +22 -22
- package/__flow__/ChartLegend/index.test.js +27 -27
- package/__flow__/ChartLegend/styles.js +7 -7
- package/__flow__/Checkbox/index.js +10 -10
- package/__flow__/Checkbox/index.stories.js +24 -24
- package/__flow__/Checkbox/index.test.js +25 -25
- package/__flow__/Checkbox/styles.js +27 -28
- package/__flow__/Collapsible/index.js +15 -15
- package/__flow__/Collapsible/index.stories.js +13 -13
- package/__flow__/Collapsible/index.test.js +27 -27
- package/__flow__/Collapsible/styles.js +5 -5
- package/__flow__/DatePicker/DateRangePicker.js +5 -8
- package/__flow__/DatePicker/DateRangePicker.stories.js +19 -19
- package/__flow__/DatePicker/DateRangePicker.test.js +21 -21
- package/__flow__/DatePicker/SingleDatePicker.js +6 -9
- package/__flow__/DatePicker/SingleDatePicker.stories.js +10 -10
- package/__flow__/DatePicker/SingleDatePicker.test.js +21 -23
- package/__flow__/DatePicker/StatefulDateRangePicker.js +6 -6
- package/__flow__/DatePicker/StatefulSingleDatePicker.js +3 -3
- package/__flow__/DatePicker/common.js +13 -13
- package/__flow__/DatePicker/index.js +3 -3
- package/__flow__/DatePicker/styles.js +42 -42
- package/__flow__/Drawer/SlideTransition.js +10 -10
- package/__flow__/Drawer/index.js +29 -29
- package/__flow__/Drawer/index.stories.js +58 -141
- package/__flow__/Drawer/index.test.js +28 -28
- package/__flow__/Drawer/styles.js +4 -4
- package/__flow__/EmptyState/index.js +5 -5
- package/__flow__/EmptyState/index.stories.js +10 -10
- package/__flow__/EmptyState/index.test.js +27 -27
- package/__flow__/EnumIllustrationNames.js +1 -1
- package/__flow__/Fieldset/index.js +14 -14
- package/__flow__/Fieldset/index.stories.js +19 -20
- package/__flow__/Fieldset/index.test.js +14 -14
- package/__flow__/Fieldset/styles.js +5 -5
- package/__flow__/FormField/index.js +14 -14
- package/__flow__/FormField/index.stories.js +31 -21
- package/__flow__/FormField/index.test.js +19 -19
- package/__flow__/Icon/deprecatedIcons.js +36 -36
- package/__flow__/Icon/index.js +17 -17
- package/__flow__/Icon/index.stories.js +62 -29
- package/__flow__/Icon/index.test.js +15 -15
- package/__flow__/Icon/styles.js +12 -23
- package/__flow__/IllustrationViewBoxes.js +1 -1
- package/__flow__/Image/index.js +6 -7
- package/__flow__/Image/index.stories.js +5 -5
- package/__flow__/Image/index.test.js +24 -24
- package/__flow__/Image/styles.js +6 -5
- package/__flow__/Indicator/index.js +7 -7
- package/__flow__/Indicator/index.stories.js +8 -14
- package/__flow__/Indicator/index.test.js +6 -6
- package/__flow__/Indicator/styles.js +6 -6
- package/__flow__/Input/index.js +37 -37
- package/__flow__/Input/index.stories.js +96 -189
- package/__flow__/Input/index.test.js +117 -117
- package/__flow__/Input/styles.js +13 -13
- package/__flow__/KeyboardKey/index.js +5 -5
- package/__flow__/KeyboardKey/index.stories.js +9 -12
- package/__flow__/KeyboardKey/index.test.js +7 -7
- package/__flow__/KeyboardKey/styles.js +4 -4
- package/__flow__/Label/index.js +6 -6
- package/__flow__/Label/index.stories.js +5 -7
- package/__flow__/Label/index.test.js +8 -8
- package/__flow__/Link/constants.js +4 -4
- package/__flow__/Link/index.js +11 -11
- package/__flow__/Link/index.stories.js +61 -102
- package/__flow__/Link/index.test.js +40 -40
- package/__flow__/Link/styles.js +6 -6
- package/__flow__/Listbox/index.js +16 -16
- package/__flow__/Listbox/index.stories.js +35 -35
- package/__flow__/Listbox/index.test.js +63 -65
- package/__flow__/Loader/index.js +12 -12
- package/__flow__/Loader/index.stories.js +10 -10
- package/__flow__/Loader/index.test.js +17 -17
- package/__flow__/Loader/styles.js +9 -13
- package/__flow__/LoaderButton/index.js +36 -18
- package/__flow__/LoaderButton/index.stories.js +35 -7
- package/__flow__/LoaderButton/index.test.js +15 -15
- package/__flow__/Menu/__snapshots__/index.test.js.snap +0 -9
- package/__flow__/Menu/constants.js +8 -8
- package/__flow__/Menu/descendants.js +89 -80
- package/__flow__/Menu/hooks.js +22 -22
- package/__flow__/Menu/index.flow.js +13 -13
- package/__flow__/Menu/index.js +56 -60
- package/__flow__/Menu/index.stories.js +19 -19
- package/__flow__/Menu/index.test.js +22 -22
- package/__flow__/Menu/names.js +4945 -4945
- package/__flow__/Menu/styles.js +5 -5
- package/__flow__/Message/index.js +33 -33
- package/__flow__/Message/index.stories.js +18 -13
- package/__flow__/Message/index.test.js +6 -6
- package/__flow__/Message/styles.js +15 -15
- package/__flow__/Modal/index.js +19 -19
- package/__flow__/Modal/index.stories.js +43 -43
- package/__flow__/Modal/index.test.js +29 -29
- package/__flow__/Modal/styles.js +27 -32
- package/__flow__/Numeral/index.js +22 -22
- package/__flow__/Numeral/index.stories.js +74 -74
- package/__flow__/Numeral/styles.js +3 -3
- package/__flow__/Numeral/tests/A11y.test.js +7 -7
- package/__flow__/Numeral/tests/abbreviate.test.js +40 -40
- package/__flow__/Numeral/tests/currency.test.js +24 -24
- package/__flow__/Numeral/tests/defaults.test.js +20 -20
- package/__flow__/Numeral/tests/invalid.test.js +9 -9
- package/__flow__/Numeral/tests/locale.test.js +38 -38
- package/__flow__/Numeral/tests/precision.test.js +76 -76
- package/__flow__/Numeral/tests/testNumeral.js +11 -11
- package/__flow__/Numeral/tests/zero.test.js +8 -8
- package/__flow__/OverflowList/index.flow.js +2 -2
- package/__flow__/OverflowList/index.js +12 -12
- package/__flow__/OverflowList/index.stories.js +10 -10
- package/__flow__/OverflowList/index.test.js +25 -25
- package/__flow__/OverflowList/styles.js +5 -5
- package/__flow__/PartnerLogo/TypePartnerNames.js +37 -37
- package/__flow__/PartnerLogo/index.js +21 -27
- package/__flow__/PartnerLogo/index.stories.js +52 -52
- package/__flow__/PartnerLogo/styles.js +12 -24
- package/__flow__/Popout/index.js +66 -67
- package/__flow__/Popout/index.stories.js +101 -82
- package/__flow__/Popout/index.test.js +43 -43
- package/__flow__/Popout/styles.js +4 -5
- package/__flow__/Portal/index.js +9 -9
- package/__flow__/Portal/index.stories.js +12 -12
- package/__flow__/Radio/index.js +4 -4
- package/__flow__/Radio/index.stories.js +11 -11
- package/__flow__/Radio/index.test.js +12 -12
- package/__flow__/Radio/styles.js +15 -16
- package/__flow__/SegmentedControl/index.js +7 -7
- package/__flow__/SegmentedControl/index.stories.js +7 -7
- package/__flow__/SegmentedControl/index.test.js +29 -29
- package/__flow__/SegmentedControl/styles.js +10 -9
- package/__flow__/Select/index.js +10 -10
- package/__flow__/Select/index.stories.js +33 -69
- package/__flow__/Select/index.test.js +14 -14
- package/__flow__/Select/styles.js +16 -16
- package/__flow__/Skeleton/index.js +4 -4
- package/__flow__/Skeleton/index.stories.js +5 -5
- package/__flow__/SpotIllustration/illustrationNames.js +118 -117
- package/__flow__/SpotIllustration/index.js +15 -11
- package/__flow__/SpotIllustration/index.stories.js +18 -18
- package/__flow__/SpotIllustration/spotIllustrations/molecule.svg +14 -0
- package/__flow__/Stack/index.js +43 -33
- package/__flow__/Stack/index.stories.js +41 -91
- package/__flow__/Stack/index.test.js +16 -7
- package/__flow__/Switch/index.js +8 -8
- package/__flow__/Switch/index.stories.js +5 -5
- package/__flow__/Switch/index.test.js +25 -29
- package/__flow__/Switch/styles.js +13 -9
- package/__flow__/Table/index.js +17 -17
- package/__flow__/Table/index.stories.js +99 -99
- package/__flow__/Table/index.test.js +32 -32
- package/__flow__/Table/styles.js +4 -4
- package/__flow__/TableCell/index.js +8 -7
- package/__flow__/TableCell/index.stories.js +20 -23
- package/__flow__/TableCell/index.test.js +11 -11
- package/__flow__/TableCell/styles.js +4 -5
- package/__flow__/TableHeaderCell/index.js +14 -14
- package/__flow__/TableHeaderCell/index.stories.js +35 -30
- package/__flow__/TableHeaderCell/index.test.js +11 -11
- package/__flow__/TableHeaderCell/styles.js +4 -4
- package/__flow__/TableRowAccordion/index.js +8 -8
- package/__flow__/TableRowAccordion/index.stories.js +36 -36
- package/__flow__/TableRowAccordion/index.test.js +28 -30
- package/__flow__/TableRowAccordion/styles.js +11 -7
- package/__flow__/Tabs/index.js +11 -11
- package/__flow__/Tabs/index.stories.js +28 -54
- package/__flow__/Tabs/index.test.js +54 -54
- package/__flow__/Tabs/styles.js +6 -7
- package/__flow__/Text/index.js +14 -14
- package/__flow__/Text/index.stories.js +84 -86
- package/__flow__/Text/index.test.js +29 -33
- package/__flow__/Text/styles.js +4 -4
- package/__flow__/Textarea/index.js +5 -5
- package/__flow__/Textarea/index.stories.js +54 -93
- package/__flow__/Textarea/index.test.js +30 -30
- package/__flow__/Textarea/styles.js +6 -6
- package/__flow__/ThemeProvider/index.js +4 -4
- package/__flow__/Toast/index.js +23 -23
- package/__flow__/Toast/index.stories.js +21 -21
- package/__flow__/Toast/styles.js +6 -6
- package/__flow__/ToggleHint/index.js +8 -8
- package/__flow__/ToggleHint/index.test.js +8 -8
- package/__flow__/ToggleHint/styles.js +8 -8
- package/__flow__/Token/index.js +10 -10
- package/__flow__/Token/index.stories.js +49 -54
- package/__flow__/Token/index.test.js +28 -28
- package/__flow__/Token/styles.js +11 -11
- package/__flow__/TokenInput/index.flow.js +1 -1
- package/__flow__/TokenInput/index.js +39 -39
- package/__flow__/TokenInput/index.stories.js +121 -128
- package/__flow__/TokenInput/styles.js +5 -5
- package/__flow__/TokenInput/tests/default/clicking.test.js +13 -13
- package/__flow__/TokenInput/tests/default/deleting.test.js +39 -39
- package/__flow__/TokenInput/tests/default/focusing.test.js +18 -18
- package/__flow__/TokenInput/tests/default/inputting.test.js +23 -23
- package/__flow__/TokenInput/tests/default/pasting.test.js +52 -52
- package/__flow__/TokenInput/tests/default/rendering.test.js +54 -54
- package/__flow__/TokenInput/util.js +4 -4
- package/__flow__/Tooltip/index.js +21 -21
- package/__flow__/Tooltip/index.stories.js +18 -18
- package/__flow__/Tooltip/index.test.js +54 -54
- package/__flow__/Tooltip/styles.js +4 -5
- package/__flow__/VisuallyHidden/index.js +3 -3
- package/__flow__/building-stories.stories.mdx +121 -0
- package/__flow__/dataviz/dataviz.stories.js +4 -4
- package/__flow__/dataviz/index.js +3 -3
- package/__flow__/index.js +72 -72
- package/__flow__/overview.stories.js +60 -0
- package/__flow__/setupTests.js +5 -5
- package/__flow__/systemProps/background.js +3 -3
- package/__flow__/systemProps/border.js +3 -3
- package/__flow__/systemProps/color.js +3 -3
- package/__flow__/systemProps/custom.js +3 -3
- package/__flow__/systemProps/flexbox.js +3 -3
- package/__flow__/systemProps/grid.js +3 -3
- package/__flow__/systemProps/index.js +14 -14
- package/__flow__/systemProps/layout.js +3 -3
- package/__flow__/systemProps/position.js +3 -3
- package/__flow__/systemProps/shadow.js +3 -3
- package/__flow__/systemProps/space.js +3 -7
- package/__flow__/systemProps/systemProps.js +14 -14
- package/__flow__/systemProps/tests/background.test.js +17 -17
- package/__flow__/systemProps/tests/border.test.js +61 -61
- package/__flow__/systemProps/tests/color.test.js +15 -15
- package/__flow__/systemProps/tests/custom.test.js +12 -12
- package/__flow__/systemProps/tests/flexbox.test.js +33 -33
- package/__flow__/systemProps/tests/grid.test.js +31 -31
- package/__flow__/systemProps/tests/layout.test.js +29 -29
- package/__flow__/systemProps/tests/position.test.js +19 -19
- package/__flow__/systemProps/tests/shadow.test.js +11 -11
- package/__flow__/systemProps/tests/space.test.js +11 -11
- package/__flow__/systemProps/tests/types.flow.js +18 -18
- package/__flow__/systemProps/tests/typography.test.js +21 -21
- package/__flow__/systemProps/tests/variant.test.js +9 -9
- package/__flow__/systemProps/types.flow.js +2 -2
- package/__flow__/systemProps/typography.js +4 -4
- package/__flow__/systemProps/variant.js +5 -5
- package/__flow__/themes/dark/dataviz-palette.js +21 -21
- package/__flow__/themes/dark/decorative-palettes.js +1 -1
- package/__flow__/themes/dark/theme.js +18 -18
- package/__flow__/themes/extendedThemes/README.md +1 -1
- package/__flow__/themes/extendedThemes/sproutTheme/dark/theme.js +16 -4
- package/__flow__/themes/extendedThemes/sproutTheme/index.js +2 -2
- package/__flow__/themes/extendedThemes/sproutTheme/light/theme.js +16 -4
- package/__flow__/themes/light/dataviz-palette.js +21 -21
- package/__flow__/themes/light/decorative-palettes.js +1 -1
- package/__flow__/themes/light/literal-colors.js +133 -133
- package/__flow__/themes/light/theme.js +53 -53
- package/__flow__/types/system-props.flow.js +5 -5
- package/__flow__/types/theme.colors.flow.js +2 -2
- package/__flow__/types/theme.flow.js +5 -5
- package/__flow__/utils/a11yTest.js +1 -1
- package/__flow__/utils/chartColors.js +1 -1
- package/__flow__/utils/constants.js +1 -1
- package/__flow__/utils/dataQaLabelQueries.js +2 -2
- package/__flow__/utils/hooks.js +17 -17
- package/__flow__/utils/index.js +4 -4
- package/__flow__/utils/innerText.js +9 -9
- package/__flow__/utils/mixins.js +6 -6
- package/__flow__/utils/react-testing-library.js +6 -6
- package/__flow__/utils/responsiveProps/index.js +3 -3
- package/__flow__/utils/responsiveProps/index.test.js +8 -8
- package/__flow__/utils/system-props.js +3 -3
- package/__flow__/utils/useInteractiveColor.js +5 -5
- package/__flow__/writing-good-stories.stories.mdx +3 -0
- package/bin/racine-codemod.js +12 -12
- package/codemods/__tests__/migrate-2.x-to-3.x.test.js +2 -2
- package/codemods/migrate-2.x-to-3.x.js +29 -30
- package/commonjs/Avatar/index.js +33 -53
- package/commonjs/Badge/constants.js +18 -15
- package/commonjs/Badge/index.js +14 -28
- package/commonjs/Badge/styles.js +3 -9
- package/commonjs/Banner/index.js +16 -37
- package/commonjs/Banner/styles.js +0 -5
- package/commonjs/Box/index.js +2 -9
- package/commonjs/Box/styles.js +0 -4
- package/commonjs/Breadcrumb/index.js +13 -29
- package/commonjs/Breadcrumb/styles.js +1 -4
- package/commonjs/Button/index.js +29 -43
- package/commonjs/Button/styles.js +6 -15
- package/commonjs/Card/index.js +16 -26
- package/commonjs/Card/styles.js +1 -5
- package/commonjs/CharacterCounter/index.js +6 -23
- package/commonjs/CharacterCounter/styles.js +0 -5
- package/commonjs/ChartLegend/index.js +5 -20
- package/commonjs/ChartLegend/styles.js +2 -11
- package/commonjs/Checkbox/index.js +30 -53
- package/commonjs/Checkbox/styles.js +14 -35
- package/commonjs/Collapsible/index.js +31 -54
- package/commonjs/Collapsible/styles.js +3 -6
- package/commonjs/DatePicker/DateRangePicker.js +4 -17
- package/commonjs/DatePicker/SingleDatePicker.js +3 -17
- package/commonjs/DatePicker/StatefulDateRangePicker.js +16 -31
- package/commonjs/DatePicker/StatefulSingleDatePicker.js +7 -20
- package/commonjs/DatePicker/common.js +8 -22
- package/commonjs/DatePicker/index.js +0 -5
- package/commonjs/DatePicker/styles.js +8 -25
- package/commonjs/Drawer/SlideTransition.js +8 -18
- package/commonjs/Drawer/index.js +51 -90
- package/commonjs/Drawer/styles.js +0 -8
- package/commonjs/EmptyState/index.js +8 -20
- package/commonjs/Fieldset/index.js +15 -32
- package/commonjs/Fieldset/styles.js +2 -7
- package/commonjs/FormField/index.js +19 -36
- package/commonjs/Icon/deprecatedIcons.js +36 -36
- package/commonjs/Icon/index.js +19 -37
- package/commonjs/Icon/styles.js +8 -19
- package/commonjs/IllustrationViewBoxes.js +1 -0
- package/commonjs/Image/index.js +13 -41
- package/commonjs/Image/styles.js +1 -7
- package/commonjs/Indicator/index.js +8 -26
- package/commonjs/Indicator/styles.js +1 -7
- package/commonjs/Input/index.js +80 -119
- package/commonjs/Input/styles.js +9 -19
- package/commonjs/KeyboardKey/index.js +3 -20
- package/commonjs/KeyboardKey/styles.js +0 -4
- package/commonjs/Label/index.js +7 -27
- package/commonjs/Link/constants.js +3 -4
- package/commonjs/Link/index.js +16 -28
- package/commonjs/Link/styles.js +1 -8
- package/commonjs/Listbox/index.js +15 -36
- package/commonjs/Loader/index.js +15 -31
- package/commonjs/Loader/styles.js +2 -13
- package/commonjs/LoaderButton/index.js +37 -39
- package/commonjs/Menu/constants.js +9 -8
- package/commonjs/Menu/descendants.js +70 -105
- package/commonjs/Menu/hooks.js +23 -41
- package/commonjs/Menu/index.flow.js +0 -7
- package/commonjs/Menu/index.js +94 -164
- package/commonjs/Menu/names.js +1 -1
- package/commonjs/Menu/styles.js +0 -6
- package/commonjs/Message/index.js +37 -70
- package/commonjs/Message/styles.js +9 -24
- package/commonjs/Modal/index.js +31 -54
- package/commonjs/Modal/styles.js +17 -36
- package/commonjs/Numeral/index.js +39 -67
- package/commonjs/Numeral/styles.js +0 -3
- package/commonjs/Numeral/tests/testNumeral.js +13 -31
- package/commonjs/OverflowList/index.flow.js +0 -2
- package/commonjs/OverflowList/index.js +27 -41
- package/commonjs/OverflowList/styles.js +0 -7
- package/commonjs/PartnerLogo/index.js +22 -37
- package/commonjs/PartnerLogo/styles.js +7 -17
- package/commonjs/Popout/index.js +95 -127
- package/commonjs/Popout/styles.js +0 -5
- package/commonjs/Portal/index.js +8 -31
- package/commonjs/Radio/index.js +18 -42
- package/commonjs/Radio/styles.js +9 -21
- package/commonjs/SegmentedControl/index.js +17 -37
- package/commonjs/SegmentedControl/styles.js +2 -12
- package/commonjs/Select/index.js +24 -47
- package/commonjs/Select/styles.js +12 -24
- package/commonjs/Skeleton/index.js +0 -5
- package/commonjs/SpotIllustration/illustrationNames.js +1 -1
- package/commonjs/SpotIllustration/index.js +5 -11
- package/commonjs/Stack/index.js +27 -42
- package/commonjs/Switch/index.js +17 -42
- package/commonjs/Switch/styles.js +3 -11
- package/commonjs/Table/index.js +26 -50
- package/commonjs/Table/styles.js +0 -4
- package/commonjs/TableCell/index.js +12 -30
- package/commonjs/TableCell/styles.js +0 -5
- package/commonjs/TableHeaderCell/index.js +27 -56
- package/commonjs/TableHeaderCell/styles.js +0 -6
- package/commonjs/TableRowAccordion/index.js +12 -37
- package/commonjs/TableRowAccordion/styles.js +2 -9
- package/commonjs/Tabs/index.js +16 -66
- package/commonjs/Tabs/styles.js +2 -11
- package/commonjs/Text/index.js +12 -25
- package/commonjs/Text/styles.js +1 -6
- package/commonjs/Textarea/index.js +31 -55
- package/commonjs/Textarea/styles.js +2 -9
- package/commonjs/ThemeProvider/index.js +1 -10
- package/commonjs/Toast/index.js +19 -42
- package/commonjs/Toast/styles.js +1 -7
- package/commonjs/ToggleHint/index.js +15 -39
- package/commonjs/ToggleHint/styles.js +2 -9
- package/commonjs/Token/index.js +15 -29
- package/commonjs/Token/styles.js +5 -12
- package/commonjs/TokenInput/index.js +70 -122
- package/commonjs/TokenInput/styles.js +1 -7
- package/commonjs/TokenInput/util.js +2 -7
- package/commonjs/Tooltip/index.js +40 -63
- package/commonjs/Tooltip/styles.js +1 -5
- package/commonjs/VisuallyHidden/index.js +0 -4
- package/commonjs/dataviz/index.js +0 -4
- package/commonjs/index.js +0 -129
- package/commonjs/systemProps/background.js +0 -1
- package/commonjs/systemProps/border.js +0 -1
- package/commonjs/systemProps/color.js +0 -1
- package/commonjs/systemProps/custom.js +0 -1
- package/commonjs/systemProps/flexbox.js +0 -1
- package/commonjs/systemProps/grid.js +0 -1
- package/commonjs/systemProps/index.js +0 -28
- package/commonjs/systemProps/layout.js +0 -1
- package/commonjs/systemProps/position.js +0 -1
- package/commonjs/systemProps/shadow.js +0 -1
- package/commonjs/systemProps/space.js +1 -2
- package/commonjs/systemProps/systemProps.js +0 -13
- package/commonjs/systemProps/tests/types.flow.js +25 -22
- package/commonjs/systemProps/typography.js +0 -1
- package/commonjs/systemProps/variant.js +2 -3
- package/commonjs/themes/dark/dataviz-palette.js +20 -22
- package/commonjs/themes/dark/decorative-palettes.js +0 -2
- package/commonjs/themes/dark/theme.js +15 -29
- package/commonjs/themes/extendedThemes/sproutTheme/dark/theme.js +14 -9
- package/commonjs/themes/extendedThemes/sproutTheme/index.js +0 -5
- package/commonjs/themes/extendedThemes/sproutTheme/light/theme.js +14 -9
- package/commonjs/themes/light/dataviz-palette.js +20 -22
- package/commonjs/themes/light/decorative-palettes.js +0 -2
- package/commonjs/themes/light/literal-colors.js +132 -134
- package/commonjs/themes/light/theme.js +45 -61
- package/commonjs/types/system-props.flow.js +1 -1
- package/commonjs/types/theme.colors.flow.js +0 -2
- package/commonjs/types/theme.flow.js +0 -1
- package/commonjs/utils/a11yTest.js +3 -10
- package/commonjs/utils/chartColors.js +0 -1
- package/commonjs/utils/constants.js +1 -1
- package/commonjs/utils/dataQaLabelQueries.js +12 -21
- package/commonjs/utils/hooks.js +39 -70
- package/commonjs/utils/index.js +2 -9
- package/commonjs/utils/innerText.js +10 -14
- package/commonjs/utils/mixins.js +2 -7
- package/commonjs/utils/react-testing-library.js +4 -26
- package/commonjs/utils/responsiveProps/index.js +1 -11
- package/commonjs/utils/system-props.js +2 -5
- package/commonjs/utils/useInteractiveColor.js +6 -8
- package/dist/illustration.svg +1 -1
- package/dist/illustrationList.js +1 -1
- package/dist/themes/dark/theme.scss +2 -2
- package/dist/themes/extendedThemes/sproutTheme/dark/theme.scss +26 -2
- package/dist/themes/extendedThemes/sproutTheme/light/theme.scss +26 -2
- package/dist/themes/light/theme.scss +2 -2
- package/lib/Avatar/index.js +40 -47
- package/lib/Badge/constants.js +19 -15
- package/lib/Badge/index.js +18 -25
- package/lib/Badge/styles.js +8 -6
- package/lib/Banner/index.js +20 -32
- package/lib/Banner/styles.js +3 -2
- package/lib/Box/index.js +4 -5
- package/lib/Box/styles.js +3 -2
- package/lib/Breadcrumb/index.js +19 -27
- package/lib/Breadcrumb/styles.js +3 -2
- package/lib/Button/index.js +31 -38
- package/lib/Button/styles.js +14 -11
- package/lib/Card/index.js +18 -24
- package/lib/Card/styles.js +5 -4
- package/lib/CharacterCounter/index.js +8 -20
- package/lib/CharacterCounter/styles.js +3 -2
- package/lib/ChartLegend/index.js +9 -17
- package/lib/ChartLegend/styles.js +5 -4
- package/lib/Checkbox/index.js +32 -51
- package/lib/Checkbox/styles.js +21 -26
- package/lib/Collapsible/index.js +36 -51
- package/lib/Collapsible/styles.js +6 -5
- package/lib/DatePicker/DateRangePicker.js +8 -14
- package/lib/DatePicker/SingleDatePicker.js +7 -13
- package/lib/DatePicker/StatefulDateRangePicker.js +19 -26
- package/lib/DatePicker/StatefulSingleDatePicker.js +9 -15
- package/lib/DatePicker/common.js +14 -13
- package/lib/DatePicker/index.js +2 -2
- package/lib/DatePicker/styles.js +12 -22
- package/lib/Drawer/SlideTransition.js +11 -14
- package/lib/Drawer/index.js +64 -88
- package/lib/Drawer/styles.js +4 -3
- package/lib/EmptyState/index.js +11 -17
- package/lib/Fieldset/index.js +19 -29
- package/lib/Fieldset/styles.js +5 -4
- package/lib/FormField/index.js +27 -33
- package/lib/Icon/deprecatedIcons.js +36 -36
- package/lib/Icon/index.js +25 -34
- package/lib/Icon/styles.js +12 -16
- package/lib/IllustrationViewBoxes.js +1 -0
- package/lib/Image/index.js +15 -38
- package/lib/Image/styles.js +4 -4
- package/lib/Indicator/index.js +11 -23
- package/lib/Indicator/styles.js +5 -5
- package/lib/Input/index.js +87 -115
- package/lib/Input/styles.js +13 -15
- package/lib/KeyboardKey/index.js +6 -17
- package/lib/KeyboardKey/styles.js +3 -2
- package/lib/Label/index.js +10 -24
- package/lib/Link/constants.js +5 -4
- package/lib/Link/index.js +18 -25
- package/lib/Link/styles.js +6 -5
- package/lib/Listbox/index.js +21 -29
- package/lib/Loader/index.js +17 -29
- package/lib/Loader/styles.js +6 -8
- package/lib/LoaderButton/index.js +45 -34
- package/lib/Menu/constants.js +10 -8
- package/lib/Menu/descendants.js +73 -94
- package/lib/Menu/hooks.js +28 -39
- package/lib/Menu/index.flow.js +6 -5
- package/lib/Menu/index.js +113 -150
- package/lib/Menu/names.js +1 -1
- package/lib/Menu/styles.js +4 -3
- package/lib/Message/index.js +42 -66
- package/lib/Message/styles.js +15 -23
- package/lib/Modal/index.js +38 -51
- package/lib/Modal/styles.js +23 -32
- package/lib/Numeral/index.js +45 -64
- package/lib/Numeral/styles.js +3 -2
- package/lib/Numeral/tests/testNumeral.js +17 -27
- package/lib/OverflowList/index.flow.js +2 -1
- package/lib/OverflowList/index.js +31 -38
- package/lib/OverflowList/styles.js +5 -4
- package/lib/PartnerLogo/index.js +26 -35
- package/lib/PartnerLogo/styles.js +11 -14
- package/lib/Popout/index.js +105 -121
- package/lib/Popout/styles.js +3 -3
- package/lib/Portal/index.js +11 -29
- package/lib/Radio/index.js +20 -40
- package/lib/Radio/styles.js +14 -14
- package/lib/SegmentedControl/index.js +21 -34
- package/lib/SegmentedControl/styles.js +7 -9
- package/lib/Select/index.js +27 -44
- package/lib/Select/styles.js +16 -20
- package/lib/Skeleton/index.js +7 -4
- package/lib/SpotIllustration/illustrationNames.js +2 -1
- package/lib/SpotIllustration/index.js +9 -10
- package/lib/Stack/index.js +31 -39
- package/lib/Switch/index.js +21 -39
- package/lib/Switch/styles.js +8 -7
- package/lib/Table/index.js +30 -40
- package/lib/Table/styles.js +3 -2
- package/lib/TableCell/index.js +14 -27
- package/lib/TableCell/styles.js +3 -3
- package/lib/TableHeaderCell/index.js +30 -52
- package/lib/TableHeaderCell/styles.js +3 -2
- package/lib/TableRowAccordion/index.js +16 -34
- package/lib/TableRowAccordion/styles.js +5 -3
- package/lib/Tabs/index.js +18 -63
- package/lib/Tabs/styles.js +6 -6
- package/lib/Text/index.js +15 -21
- package/lib/Text/styles.js +4 -3
- package/lib/Textarea/index.js +33 -53
- package/lib/Textarea/styles.js +6 -5
- package/lib/ThemeProvider/index.js +4 -7
- package/lib/Toast/index.js +26 -37
- package/lib/Toast/styles.js +5 -4
- package/lib/ToggleHint/index.js +18 -36
- package/lib/ToggleHint/styles.js +6 -5
- package/lib/Token/index.js +20 -26
- package/lib/Token/styles.js +10 -9
- package/lib/TokenInput/index.js +78 -118
- package/lib/TokenInput/styles.js +5 -4
- package/lib/TokenInput/util.js +5 -3
- package/lib/Tooltip/index.js +45 -60
- package/lib/Tooltip/styles.js +4 -4
- package/lib/VisuallyHidden/index.js +3 -2
- package/lib/dataviz/index.js +4 -3
- package/lib/index.js +66 -64
- package/lib/systemProps/background.js +3 -1
- package/lib/systemProps/border.js +3 -1
- package/lib/systemProps/color.js +3 -1
- package/lib/systemProps/custom.js +3 -1
- package/lib/systemProps/flexbox.js +3 -1
- package/lib/systemProps/grid.js +3 -1
- package/lib/systemProps/index.js +16 -14
- package/lib/systemProps/layout.js +3 -1
- package/lib/systemProps/position.js +3 -1
- package/lib/systemProps/shadow.js +3 -1
- package/lib/systemProps/space.js +2 -1
- package/lib/systemProps/systemProps.js +14 -13
- package/lib/systemProps/tests/types.flow.js +27 -22
- package/lib/systemProps/typography.js +3 -1
- package/lib/systemProps/variant.js +4 -3
- package/lib/themes/dark/dataviz-palette.js +23 -21
- package/lib/themes/dark/decorative-palettes.js +3 -1
- package/lib/themes/dark/theme.js +22 -25
- package/lib/themes/extendedThemes/sproutTheme/dark/theme.js +16 -7
- package/lib/themes/extendedThemes/sproutTheme/index.js +3 -2
- package/lib/themes/extendedThemes/sproutTheme/light/theme.js +16 -7
- package/lib/themes/light/dataviz-palette.js +23 -21
- package/lib/themes/light/decorative-palettes.js +3 -1
- package/lib/themes/light/literal-colors.js +135 -133
- package/lib/themes/light/theme.js +56 -57
- package/lib/types/system-props.flow.js +1 -1
- package/lib/types/theme.colors.flow.js +4 -2
- package/lib/types/theme.flow.js +3 -2
- package/lib/utils/a11yTest.js +5 -8
- package/lib/utils/chartColors.js +3 -1
- package/lib/utils/constants.js +3 -1
- package/lib/utils/dataQaLabelQueries.js +13 -21
- package/lib/utils/hooks.js +41 -64
- package/lib/utils/index.js +2 -5
- package/lib/utils/innerText.js +12 -14
- package/lib/utils/mixins.js +6 -5
- package/lib/utils/react-testing-library.js +10 -20
- package/lib/utils/responsiveProps/index.js +3 -8
- package/lib/utils/system-props.js +4 -3
- package/lib/utils/useInteractiveColor.js +10 -9
- package/package.json +6 -13
|
@@ -1,43 +1,34 @@
|
|
|
1
1
|
var _excluded = ["value", "children"],
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
5
|
-
|
|
2
|
+
_excluded2 = ["selectedValue", "label", "onChange", "children"];
|
|
3
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
6
4
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
7
|
-
|
|
8
|
-
import
|
|
9
|
-
import {
|
|
10
|
-
import
|
|
11
|
-
import Box from "../Box";
|
|
5
|
+
import * as React from 'react';
|
|
6
|
+
import { useState, useContext } from 'react';
|
|
7
|
+
import { SegmentedControlContainer, SegmentedControlItemContainer, SegmentedControlLabel } from './styles';
|
|
8
|
+
import Box from '../Box';
|
|
12
9
|
var nameCounter = 0;
|
|
13
10
|
var idCounter = 0;
|
|
14
11
|
var SegmentedControlContext = /*#__PURE__*/React.createContext(null);
|
|
15
|
-
|
|
16
12
|
var SegmentedControlItem = function SegmentedControlItem(_ref) {
|
|
17
13
|
var value = _ref.value,
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
14
|
+
children = _ref.children,
|
|
15
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
21
16
|
var context = useContext(SegmentedControlContext);
|
|
22
|
-
|
|
23
17
|
if (context == null) {
|
|
24
18
|
return null;
|
|
25
19
|
}
|
|
26
|
-
|
|
27
20
|
var name = context.name,
|
|
28
|
-
|
|
29
|
-
|
|
21
|
+
selectedValue = context.selectedValue,
|
|
22
|
+
onChange = context.onChange;
|
|
30
23
|
/* eslint-disable-next-line */
|
|
31
|
-
|
|
32
24
|
var _useState = useState(name + "-" + idCounter++),
|
|
33
|
-
|
|
34
|
-
|
|
25
|
+
id = _useState[0];
|
|
35
26
|
var isChecked = value === selectedValue;
|
|
36
27
|
return /*#__PURE__*/React.createElement(SegmentedControlItemContainer, _extends({
|
|
37
28
|
"data-segmentedcontrol-isactive": isChecked,
|
|
38
29
|
"data-qa-segmentedcontrol-item": value,
|
|
39
|
-
"data-qa-segmentedcontrol-ischecked": isChecked === true
|
|
40
|
-
|
|
30
|
+
"data-qa-segmentedcontrol-ischecked": isChecked === true
|
|
31
|
+
// $FlowIssue - upgrade v0.112.0
|
|
41
32
|
}, rest), /*#__PURE__*/React.createElement("input", {
|
|
42
33
|
type: "radio",
|
|
43
34
|
id: id,
|
|
@@ -52,17 +43,14 @@ var SegmentedControlItem = function SegmentedControlItem(_ref) {
|
|
|
52
43
|
isActive: isChecked
|
|
53
44
|
}, children));
|
|
54
45
|
};
|
|
55
|
-
|
|
56
46
|
var SegmentedControl = function SegmentedControl(_ref2) {
|
|
57
47
|
var selectedValue = _ref2.selectedValue,
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
48
|
+
label = _ref2.label,
|
|
49
|
+
onChange = _ref2.onChange,
|
|
50
|
+
children = _ref2.children,
|
|
51
|
+
rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
|
|
63
52
|
var _useState2 = useState("Racine-segmented-control-" + nameCounter++),
|
|
64
|
-
|
|
65
|
-
|
|
53
|
+
name = _useState2[0];
|
|
66
54
|
return /*#__PURE__*/React.createElement(SegmentedControlContext.Provider, {
|
|
67
55
|
value: {
|
|
68
56
|
name: name,
|
|
@@ -72,13 +60,12 @@ var SegmentedControl = function SegmentedControl(_ref2) {
|
|
|
72
60
|
}, /*#__PURE__*/React.createElement(SegmentedControlContainer, _extends({
|
|
73
61
|
forwardedAs: "fieldset",
|
|
74
62
|
"data-qa-segmentedcontrol": label,
|
|
75
|
-
"data-qa-segmentedcontrol-value": selectedValue
|
|
76
|
-
|
|
63
|
+
"data-qa-segmentedcontrol-value": selectedValue
|
|
64
|
+
// $FlowIssue - upgrade v0.112.0
|
|
77
65
|
}, rest), /*#__PURE__*/React.createElement("legend", null, label), /*#__PURE__*/React.createElement(Box, {
|
|
78
66
|
display: "flex"
|
|
79
67
|
}, children)));
|
|
80
68
|
};
|
|
81
|
-
|
|
82
69
|
SegmentedControl.Item = SegmentedControlItem;
|
|
83
|
-
SegmentedControl.Item.displayName =
|
|
70
|
+
SegmentedControl.Item.displayName = 'SegmentedControl.Item';
|
|
84
71
|
export default SegmentedControl;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
1
|
+
|
|
2
|
+
import styled, { css } from 'styled-components';
|
|
3
|
+
import Box from '../Box';
|
|
4
|
+
import Text from '../Text';
|
|
5
|
+
import { visuallyHidden, focusRing, disabled } from '../utils/mixins';
|
|
6
6
|
export var SegmentedControlContainer = styled(Box).withConfig({
|
|
7
7
|
displayName: "styles__SegmentedControlContainer",
|
|
8
8
|
componentId: "sc-1o18lau-0"
|
|
@@ -14,15 +14,13 @@ export var SegmentedControlContainer = styled(Box).withConfig({
|
|
|
14
14
|
return props.theme.space[100];
|
|
15
15
|
}, visuallyHidden, function (props) {
|
|
16
16
|
return props.disabled && disabled;
|
|
17
|
-
});
|
|
18
|
-
|
|
17
|
+
});
|
|
19
18
|
export var SegmentedControlItemContainer = styled(Box).withConfig({
|
|
20
19
|
displayName: "styles__SegmentedControlItemContainer",
|
|
21
20
|
componentId: "sc-1o18lau-1"
|
|
22
21
|
})(["flex:1 1 auto;display:flex;cursor:pointer;& + &{margin-left:", ";}&:focus-within label{", "}input{", "}"], function (props) {
|
|
23
22
|
return props.theme.space[100];
|
|
24
|
-
}, focusRing, visuallyHidden);
|
|
25
|
-
|
|
23
|
+
}, focusRing, visuallyHidden);
|
|
26
24
|
export var SegmentedControlLabel = styled(Text).withConfig({
|
|
27
25
|
displayName: "styles__SegmentedControlLabel",
|
|
28
26
|
componentId: "sc-1o18lau-2"
|
package/lib/Select/index.js
CHANGED
|
@@ -1,63 +1,48 @@
|
|
|
1
1
|
var _excluded = ["id", "name", "children", "defaultValue", "value", "required", "isInvalid", "autoFocus", "disabled", "onChange", "ariaLabel", "ariaDescribedby", "size", "qa", "inputProps"];
|
|
2
|
-
|
|
3
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
4
|
-
|
|
2
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
5
3
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
6
|
-
|
|
7
4
|
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
import
|
|
12
|
-
import Container, { Arrow } from "./styles";
|
|
13
|
-
import Icon from "../Icon";
|
|
14
|
-
|
|
5
|
+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
6
|
+
import * as React from 'react';
|
|
7
|
+
import Container, { Arrow } from './styles';
|
|
8
|
+
import Icon from '../Icon';
|
|
15
9
|
var Select = /*#__PURE__*/function (_React$Component) {
|
|
16
10
|
_inheritsLoose(Select, _React$Component);
|
|
17
|
-
|
|
18
11
|
function Select() {
|
|
19
12
|
var _this;
|
|
20
|
-
|
|
21
13
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
22
14
|
args[_key] = arguments[_key];
|
|
23
15
|
}
|
|
24
|
-
|
|
25
16
|
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
|
|
26
|
-
|
|
27
17
|
_this.handleChange = function (e) {
|
|
28
18
|
var onChange = _this.props.onChange;
|
|
29
|
-
|
|
30
19
|
if (onChange) {
|
|
31
20
|
onChange(e);
|
|
32
21
|
}
|
|
33
22
|
};
|
|
34
|
-
|
|
35
23
|
return _this;
|
|
36
24
|
}
|
|
37
|
-
|
|
38
25
|
var _proto = Select.prototype;
|
|
39
|
-
|
|
40
26
|
_proto.render = function render() {
|
|
41
27
|
var _this$props = this.props,
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
28
|
+
id = _this$props.id,
|
|
29
|
+
name = _this$props.name,
|
|
30
|
+
children = _this$props.children,
|
|
31
|
+
defaultValue = _this$props.defaultValue,
|
|
32
|
+
value = _this$props.value,
|
|
33
|
+
required = _this$props.required,
|
|
34
|
+
isInvalid = _this$props.isInvalid,
|
|
35
|
+
autoFocus = _this$props.autoFocus,
|
|
36
|
+
disabled = _this$props.disabled,
|
|
37
|
+
onChange = _this$props.onChange,
|
|
38
|
+
ariaLabel = _this$props.ariaLabel,
|
|
39
|
+
ariaDescribedby = _this$props.ariaDescribedby,
|
|
40
|
+
size = _this$props.size,
|
|
41
|
+
_this$props$qa = _this$props.qa,
|
|
42
|
+
qa = _this$props$qa === void 0 ? {} : _this$props$qa,
|
|
43
|
+
_this$props$inputProp = _this$props.inputProps,
|
|
44
|
+
inputProps = _this$props$inputProp === void 0 ? {} : _this$props$inputProp,
|
|
45
|
+
rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
|
|
61
46
|
return (
|
|
62
47
|
/*#__PURE__*/
|
|
63
48
|
// $FlowIssue - upgrade v0.112.0
|
|
@@ -76,8 +61,8 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
76
61
|
autoFocus: autoFocus,
|
|
77
62
|
disabled: disabled,
|
|
78
63
|
onChange: this.handleChange,
|
|
79
|
-
"data-qa-select": name ||
|
|
80
|
-
"data-qa-select-value": value ||
|
|
64
|
+
"data-qa-select": name || '',
|
|
65
|
+
"data-qa-select-value": value || 'unselected',
|
|
81
66
|
"data-qa-select-isrequired": required === true,
|
|
82
67
|
"data-qa-select-isdisabled": disabled === true
|
|
83
68
|
}, qa, inputProps), children), /*#__PURE__*/React.createElement(Arrow, {
|
|
@@ -85,15 +70,13 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
85
70
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
86
71
|
name: "chevron-down",
|
|
87
72
|
fixedWidth: true,
|
|
88
|
-
size: this.props.size ===
|
|
73
|
+
size: this.props.size === 'small' ? 'mini' : 'default'
|
|
89
74
|
})))
|
|
90
75
|
);
|
|
91
76
|
};
|
|
92
|
-
|
|
93
77
|
return Select;
|
|
94
78
|
}(React.Component);
|
|
95
|
-
|
|
96
79
|
Select.defaultProps = {
|
|
97
|
-
size:
|
|
80
|
+
size: 'default'
|
|
98
81
|
};
|
|
99
82
|
export { Select as default };
|
package/lib/Select/styles.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
|
|
2
|
+
import styled, { css } from 'styled-components';
|
|
3
|
+
import { COMMON } from '../utils/system-props';
|
|
4
|
+
import { focusRing } from '../utils/mixins';
|
|
4
5
|
var Container = styled.div.withConfig({
|
|
5
6
|
displayName: "styles__Container",
|
|
6
7
|
componentId: "sc-1j75x48-0"
|
|
@@ -13,7 +14,7 @@ var Container = styled.div.withConfig({
|
|
|
13
14
|
}, function (props) {
|
|
14
15
|
return props.theme.colors.text.body;
|
|
15
16
|
}, function (props) {
|
|
16
|
-
return props.disabled ?
|
|
17
|
+
return props.disabled ? 'not-allowed' : 'pointer';
|
|
17
18
|
}, function (props) {
|
|
18
19
|
return props.theme.duration.fast;
|
|
19
20
|
}, function (props) {
|
|
@@ -28,23 +29,20 @@ var Container = styled.div.withConfig({
|
|
|
28
29
|
return props.theme.fontWeights.normal;
|
|
29
30
|
}, function (props) {
|
|
30
31
|
switch (props.size) {
|
|
31
|
-
case
|
|
32
|
+
case 'large':
|
|
32
33
|
return props.theme.space[400] + " " + props.theme.space[600] + " " + props.theme.space[400] + " " + props.theme.space[400];
|
|
33
|
-
|
|
34
|
-
case "small":
|
|
34
|
+
case 'small':
|
|
35
35
|
return props.theme.space[200] + " " + props.theme.space[500] + " " + props.theme.space[200] + " " + props.theme.space[200];
|
|
36
|
-
|
|
37
|
-
case "default":
|
|
36
|
+
case 'default':
|
|
38
37
|
default:
|
|
39
38
|
return props.theme.space[300] + " " + props.theme.space[500] + " " + props.theme.space[300] + " " + props.theme.space[300];
|
|
40
39
|
}
|
|
41
40
|
}, function (props) {
|
|
42
41
|
switch (props.size) {
|
|
43
|
-
case
|
|
42
|
+
case 'large':
|
|
44
43
|
return props.theme.typography[300].fontSize;
|
|
45
|
-
|
|
46
|
-
case
|
|
47
|
-
case "default":
|
|
44
|
+
case 'small':
|
|
45
|
+
case 'default':
|
|
48
46
|
default:
|
|
49
47
|
return props.theme.typography[200].fontSize;
|
|
50
48
|
}
|
|
@@ -62,19 +60,17 @@ export var Arrow = styled.span.withConfig({
|
|
|
62
60
|
componentId: "sc-1j75x48-1"
|
|
63
61
|
})(["position:absolute;top:48%;right:", ";transform:translateY(-50%);color:", ";pointer-events:none;"], function (props) {
|
|
64
62
|
switch (props.size) {
|
|
65
|
-
case
|
|
63
|
+
case 'large':
|
|
66
64
|
return props.theme.space[400];
|
|
67
|
-
|
|
68
|
-
case "small":
|
|
65
|
+
case 'small':
|
|
69
66
|
return props.theme.space[300];
|
|
70
|
-
|
|
71
|
-
case "default":
|
|
67
|
+
case 'default':
|
|
72
68
|
default:
|
|
73
69
|
return props.theme.space[350];
|
|
74
70
|
}
|
|
75
71
|
}, function (props) {
|
|
76
72
|
return props.theme.colors.icon.base;
|
|
77
73
|
});
|
|
78
|
-
Container.displayName =
|
|
79
|
-
Arrow.displayName =
|
|
74
|
+
Container.displayName = 'SelectContainer';
|
|
75
|
+
Arrow.displayName = 'Select Arrow';
|
|
80
76
|
export default Container;
|
package/lib/Skeleton/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
import Box from '../Box';
|
|
4
|
+
import { transparentize } from 'polished';
|
|
4
5
|
var Skeleton = styled(Box).withConfig({
|
|
5
6
|
displayName: "Skeleton",
|
|
6
7
|
componentId: "sc-1fovt5u-0"
|
|
@@ -9,4 +10,6 @@ var Skeleton = styled(Box).withConfig({
|
|
|
9
10
|
}, function (props) {
|
|
10
11
|
return "linear-gradient(\n 288deg,\n " + transparentize(0.7, props.theme.colors.container.border.base) + " 32%,\n " + transparentize(0.05, props.theme.colors.container.border.base) + ",\n " + transparentize(0.7, props.theme.colors.container.border.base) + " 68%\n );";
|
|
11
12
|
});
|
|
12
|
-
export default Skeleton;
|
|
13
|
+
export default Skeleton;
|
|
14
|
+
|
|
15
|
+
//rgba(243, 244, 244, 0.7)
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
|
+
export var illustrationNames = ['abacus', 'analytics-offering', 'asset-cards', 'astronaut', 'binoculars', 'brand-keyword', 'browser-doc', 'business', 'calendar-event', 'calendar-reporting', 'cat-error', 'cat-no-access', 'cat', 'checkbox-alert', 'coffee-cup', 'competitors', 'compose-window', 'compose', 'computer-error', 'connect', 'contact', 'conversation', 'custom-branding', 'customer-service', 'dashboard', 'exclamation-mark', 'face-happy', 'find-bookmark', 'flask', 'general-topic', 'global-features', 'global-trend', 'grow-large', 'grow', 'hands-raised', 'headset', 'heartbeat-connection', 'instagram-links', 'invoice', 'jewel', 'keyword-tracking', 'lightbulb-alt', 'lightbulb', 'like-conversation', 'link-broken', 'link-messages', 'link-sections', 'link-upload', 'listening-pendo', 'listening-sentiment', 'listening-topic-templates', 'listening-tour', 'listening', 'loading', 'mailbox-empty', 'mailbox-full', 'message', 'molecule', 'network-data', 'no-messages-found', 'no-notifications', 'note', 'notification', 'notifications-onboarding', 'organize-message', 'outbox-queue', 'outbox-reviews', 'pdf', 'planning', 'podium', 'pointer', 'publish-assets', 'publish-links', 'publishing', 'puzzle-piece', 'question-mark', 'reporting-folder', 'reporting', 'review-location', 'review', 'robot-assembly', 'robot-error', 'robot-happy', 'rocket', 'schedule-date', 'schedule-messages', 'search-keywords', 'search-success', 'search-trends', 'search', 'security', 'sentiment', 'shopping-bag', 'spark-line', 'stamp', 'storefront', 'success', 'tag-message', 'tag', 'team-roles', 'team', 'telescope', 'tha-mel', 'thumbs-up', 'toggle-switch', 'toolset-strength', 'tracking-time', 'twitter-messages', 'twitter-profiles', 'under-construction', 'unsubscribe', 'upward-trend', 'user-task', 'view-connections', 'vip-list', 'warning', 'wifi', 'workflow-steps'];
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
1
|
+
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import illustrationViewBoxes from '../IllustrationViewBoxes';
|
|
5
|
+
// eslint-disable-next-line flowtype/generic-spacing
|
|
5
6
|
var StyledSVG = styled.svg.withConfig({
|
|
6
7
|
displayName: "SpotIllustration__StyledSVG",
|
|
7
8
|
componentId: "sc-10ftlaw-0"
|
|
@@ -10,14 +11,13 @@ var StyledSVG = styled.svg.withConfig({
|
|
|
10
11
|
}, function (p) {
|
|
11
12
|
return p.theme.colors.illustration.stroke;
|
|
12
13
|
});
|
|
13
|
-
|
|
14
14
|
var SpotIllustration = function SpotIllustration(_ref) {
|
|
15
15
|
var name = _ref.name,
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
customFill = _ref.customFill,
|
|
17
|
+
height = _ref.height,
|
|
18
|
+
width = _ref.width;
|
|
19
19
|
var viewBox = illustrationViewBoxes[name];
|
|
20
|
-
var viewBoxCoordinates = (viewBox == null ? void 0 : viewBox.split(
|
|
20
|
+
var viewBoxCoordinates = (viewBox == null ? void 0 : viewBox.split(' ')) || [];
|
|
21
21
|
var defaultWidth = viewBoxCoordinates[2];
|
|
22
22
|
var defaultHeight = viewBoxCoordinates[3];
|
|
23
23
|
return /*#__PURE__*/React.createElement(StyledSVG, {
|
|
@@ -31,5 +31,4 @@ var SpotIllustration = function SpotIllustration(_ref) {
|
|
|
31
31
|
xlinkHref: "#ssillustrationsvg-" + name
|
|
32
32
|
}));
|
|
33
33
|
};
|
|
34
|
-
|
|
35
34
|
export default SpotIllustration;
|
package/lib/Stack/index.js
CHANGED
|
@@ -1,65 +1,60 @@
|
|
|
1
1
|
var _excluded = ["children", "space", "align", "direction"];
|
|
2
|
-
|
|
3
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
4
|
-
|
|
2
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
5
3
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
6
|
-
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import { normalizeResponsiveProp } from "../utils/responsiveProps";
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { Children } from 'react';
|
|
6
|
+
import Box from '../Box';
|
|
7
|
+
import { normalizeResponsiveProp } from '../utils/responsiveProps';
|
|
11
8
|
var stackStyles = {
|
|
12
9
|
horizontal: {
|
|
13
10
|
left: {
|
|
14
|
-
alignItems:
|
|
11
|
+
alignItems: 'center'
|
|
15
12
|
},
|
|
16
13
|
center: {
|
|
17
|
-
alignItems:
|
|
18
|
-
justifyContent:
|
|
14
|
+
alignItems: 'center',
|
|
15
|
+
justifyContent: 'center'
|
|
19
16
|
},
|
|
20
17
|
right: {
|
|
21
|
-
alignItems:
|
|
22
|
-
justifyContent:
|
|
18
|
+
alignItems: 'center',
|
|
19
|
+
justifyContent: 'flex-end'
|
|
23
20
|
},
|
|
24
21
|
stretch: {
|
|
25
|
-
alignItems:
|
|
22
|
+
alignItems: 'center'
|
|
26
23
|
}
|
|
27
24
|
},
|
|
28
25
|
vertical: {
|
|
29
26
|
left: {
|
|
30
|
-
flexDirection:
|
|
31
|
-
alignItems:
|
|
27
|
+
flexDirection: 'column',
|
|
28
|
+
alignItems: 'flex-start'
|
|
32
29
|
},
|
|
33
30
|
center: {
|
|
34
|
-
flexDirection:
|
|
35
|
-
alignItems:
|
|
31
|
+
flexDirection: 'column',
|
|
32
|
+
alignItems: 'center'
|
|
36
33
|
},
|
|
37
34
|
right: {
|
|
38
|
-
flexDirection:
|
|
39
|
-
alignItems:
|
|
35
|
+
flexDirection: 'column',
|
|
36
|
+
alignItems: 'flex-end'
|
|
40
37
|
},
|
|
41
38
|
stretch: {
|
|
42
|
-
flexDirection:
|
|
43
|
-
alignItems:
|
|
39
|
+
flexDirection: 'column',
|
|
40
|
+
alignItems: 'stretch'
|
|
44
41
|
}
|
|
45
42
|
}
|
|
46
43
|
};
|
|
47
|
-
|
|
48
44
|
var Stack = function Stack(_ref) {
|
|
49
45
|
var children = _ref.children,
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
46
|
+
_ref$space = _ref.space,
|
|
47
|
+
space = _ref$space === void 0 ? 300 : _ref$space,
|
|
48
|
+
_ref$align = _ref.align,
|
|
49
|
+
align = _ref$align === void 0 ? 'left' : _ref$align,
|
|
50
|
+
_ref$direction = _ref.direction,
|
|
51
|
+
direction = _ref$direction === void 0 ? 'vertical' : _ref$direction,
|
|
52
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
58
53
|
var stackItems = Children.toArray(children);
|
|
59
54
|
var responsiveAlignment = normalizeResponsiveProp(align);
|
|
60
55
|
var responsiveDirection = normalizeResponsiveProp(direction);
|
|
61
56
|
var responsiveSpace = normalizeResponsiveProp(space);
|
|
62
|
-
var initialValue = [
|
|
57
|
+
var initialValue = ['initial', 'initial', 'initial', 'initial', 'initial'];
|
|
63
58
|
var styleProps = {
|
|
64
59
|
alignItems: [].concat(initialValue),
|
|
65
60
|
flexDirection: [].concat(initialValue),
|
|
@@ -74,18 +69,16 @@ var Stack = function Stack(_ref) {
|
|
|
74
69
|
var currentDirection = responsiveDirection[i];
|
|
75
70
|
var currentAlignment = responsiveAlignment[i];
|
|
76
71
|
var currentSpace = responsiveSpace[i];
|
|
77
|
-
|
|
78
72
|
if (currentDirection && currentAlignment) {
|
|
79
73
|
var styles = stackStyles[currentDirection][currentAlignment];
|
|
80
74
|
Object.keys(styleProps).forEach(function (key) {
|
|
81
|
-
styleProps[key][i] = styles[key] ||
|
|
75
|
+
styleProps[key][i] = styles[key] || 'initial';
|
|
82
76
|
});
|
|
83
77
|
}
|
|
84
|
-
|
|
85
|
-
var flexBasis = currentAlignment === "stretch" && currentDirection === "horizontal" ? "100%" : undefined;
|
|
78
|
+
var flexBasis = currentAlignment === 'stretch' && currentDirection === 'horizontal' ? '100%' : undefined;
|
|
86
79
|
childFlexBasis[i] = flexBasis;
|
|
87
|
-
var margin = currentDirection ===
|
|
88
|
-
var opposite = currentDirection ===
|
|
80
|
+
var margin = currentDirection === 'horizontal' ? 'marginLeft' : 'marginTop';
|
|
81
|
+
var opposite = currentDirection === 'horizontal' ? 'marginTop' : 'marginLeft';
|
|
89
82
|
childMarginProps[margin][i] = currentSpace;
|
|
90
83
|
childMarginProps[opposite][i] = 0;
|
|
91
84
|
});
|
|
@@ -99,5 +92,4 @@ var Stack = function Stack(_ref) {
|
|
|
99
92
|
}), item);
|
|
100
93
|
}));
|
|
101
94
|
};
|
|
102
|
-
|
|
103
95
|
export default Stack;
|
package/lib/Switch/index.js
CHANGED
|
@@ -1,67 +1,51 @@
|
|
|
1
1
|
var _excluded = ["checked", "disabled", "name", "a11yLabels", "onClick", "qa"];
|
|
2
|
-
|
|
3
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
4
|
-
|
|
2
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
5
3
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
6
|
-
|
|
7
4
|
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import Icon from "../Icon";
|
|
14
|
-
import { VisuallyHidden } from "../VisuallyHidden";
|
|
15
|
-
|
|
5
|
+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
6
|
+
import * as React from 'react';
|
|
7
|
+
import Container from './styles';
|
|
8
|
+
import Icon from '../Icon';
|
|
9
|
+
import { VisuallyHidden } from '../VisuallyHidden';
|
|
16
10
|
/**
|
|
17
11
|
* Switch acts as a toggle, enabling users to turn a particular action on or off.
|
|
18
|
-
*/
|
|
19
|
-
var Switch = /*#__PURE__*/function (_React$Component) {
|
|
12
|
+
*/var Switch = /*#__PURE__*/function (_React$Component) {
|
|
20
13
|
_inheritsLoose(Switch, _React$Component);
|
|
21
|
-
|
|
22
14
|
function Switch() {
|
|
23
15
|
var _this;
|
|
24
|
-
|
|
25
16
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
26
17
|
args[_key] = arguments[_key];
|
|
27
18
|
}
|
|
28
|
-
|
|
29
19
|
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
|
|
30
|
-
|
|
31
20
|
_this.handleClick = function (e) {
|
|
32
21
|
var _this$props = _this.props,
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
22
|
+
checked = _this$props.checked,
|
|
23
|
+
onClick = _this$props.onClick,
|
|
24
|
+
disabled = _this$props.disabled;
|
|
37
25
|
if (!disabled) {
|
|
38
26
|
onClick(e, !checked);
|
|
39
27
|
}
|
|
40
28
|
};
|
|
41
|
-
|
|
42
29
|
return _this;
|
|
43
30
|
}
|
|
44
|
-
|
|
45
31
|
var _proto = Switch.prototype;
|
|
46
|
-
|
|
47
32
|
_proto.render = function render() {
|
|
48
33
|
var _this$props2 = this.props,
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
34
|
+
checked = _this$props2.checked,
|
|
35
|
+
disabled = _this$props2.disabled,
|
|
36
|
+
name = _this$props2.name,
|
|
37
|
+
a11yLabels = _this$props2.a11yLabels,
|
|
38
|
+
onClick = _this$props2.onClick,
|
|
39
|
+
_this$props2$qa = _this$props2.qa,
|
|
40
|
+
qa = _this$props2$qa === void 0 ? {} : _this$props2$qa,
|
|
41
|
+
rest = _objectWithoutPropertiesLoose(_this$props2, _excluded);
|
|
58
42
|
return /*#__PURE__*/React.createElement(Container, _extends({
|
|
59
43
|
role: "button",
|
|
60
44
|
type: "button",
|
|
61
45
|
"aria-pressed": checked,
|
|
62
46
|
disabled: disabled,
|
|
63
47
|
onClick: this.handleClick,
|
|
64
|
-
"data-qa-switch": name ||
|
|
48
|
+
"data-qa-switch": name || '',
|
|
65
49
|
"data-qa-switch-ischecked": checked === true,
|
|
66
50
|
"data-qa-switch-isdisabled": disabled === true,
|
|
67
51
|
checked: checked
|
|
@@ -70,15 +54,13 @@ var Switch = /*#__PURE__*/function (_React$Component) {
|
|
|
70
54
|
name: "check"
|
|
71
55
|
}) : null);
|
|
72
56
|
};
|
|
73
|
-
|
|
74
57
|
return Switch;
|
|
75
58
|
}(React.Component);
|
|
76
|
-
|
|
77
59
|
Switch.defaultProps = {
|
|
78
60
|
disabled: false,
|
|
79
61
|
a11yLabels: {
|
|
80
|
-
on:
|
|
81
|
-
off:
|
|
62
|
+
on: 'on',
|
|
63
|
+
off: 'off'
|
|
82
64
|
}
|
|
83
65
|
};
|
|
84
66
|
export { Switch as default };
|