@dxc-technology/halstack-react 12.2.0 → 13.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/README.md +1 -1
- package/dist/index.d.mts +6439 -0
- package/dist/index.d.ts +6439 -0
- package/dist/index.js +12617 -0
- package/dist/index.mjs +12529 -0
- package/package.json +59 -64
- package/BackgroundColorContext.d.ts +0 -1
- package/BackgroundColorContext.js +0 -30
- package/HalstackContext.d.ts +0 -1269
- package/HalstackContext.js +0 -320
- package/accordion/Accordion.accessibility.test.d.ts +0 -1
- package/accordion/Accordion.accessibility.test.js +0 -71
- package/accordion/Accordion.d.ts +0 -4
- package/accordion/Accordion.js +0 -168
- package/accordion/Accordion.stories.tsx +0 -241
- package/accordion/Accordion.test.d.ts +0 -1
- package/accordion/Accordion.test.js +0 -56
- package/accordion/types.d.ts +0 -57
- package/accordion/types.js +0 -5
- package/accordion-group/AccordionGroup.accessibility.test.d.ts +0 -1
- package/accordion-group/AccordionGroup.accessibility.test.js +0 -82
- package/accordion-group/AccordionGroup.d.ts +0 -7
- package/accordion-group/AccordionGroup.js +0 -101
- package/accordion-group/AccordionGroup.stories.tsx +0 -252
- package/accordion-group/AccordionGroup.test.d.ts +0 -1
- package/accordion-group/AccordionGroup.test.js +0 -94
- package/accordion-group/AccordionGroupAccordion.d.ts +0 -4
- package/accordion-group/AccordionGroupAccordion.js +0 -31
- package/accordion-group/AccordionGroupContext.d.ts +0 -3
- package/accordion-group/AccordionGroupContext.js +0 -8
- package/accordion-group/types.d.ts +0 -67
- package/accordion-group/types.js +0 -5
- package/action-icon/ActionIcon.accessibility.test.d.ts +0 -1
- package/action-icon/ActionIcon.accessibility.test.js +0 -63
- package/action-icon/ActionIcon.d.ts +0 -4
- package/action-icon/ActionIcon.js +0 -48
- package/action-icon/ActionIcon.stories.tsx +0 -41
- package/action-icon/ActionIcon.test.d.ts +0 -1
- package/action-icon/ActionIcon.test.js +0 -64
- package/action-icon/types.d.ts +0 -26
- package/action-icon/types.js +0 -5
- package/alert/Alert.accessibility.test.d.ts +0 -1
- package/alert/Alert.accessibility.test.js +0 -95
- package/alert/Alert.d.ts +0 -4
- package/alert/Alert.js +0 -203
- package/alert/Alert.stories.tsx +0 -198
- package/alert/Alert.test.d.ts +0 -1
- package/alert/Alert.test.js +0 -75
- package/alert/types.d.ts +0 -49
- package/alert/types.js +0 -5
- package/badge/Badge.accessibility.test.d.ts +0 -1
- package/badge/Badge.accessibility.test.js +0 -129
- package/badge/Badge.d.ts +0 -4
- package/badge/Badge.js +0 -161
- package/badge/Badge.stories.tsx +0 -210
- package/badge/Badge.test.d.ts +0 -1
- package/badge/Badge.test.js +0 -30
- package/badge/types.d.ts +0 -54
- package/badge/types.js +0 -5
- package/bleed/Bleed.d.ts +0 -3
- package/bleed/Bleed.js +0 -43
- package/bleed/Bleed.stories.tsx +0 -342
- package/bleed/types.d.ts +0 -37
- package/bleed/types.js +0 -5
- package/box/Box.accessibility.test.d.ts +0 -1
- package/box/Box.accessibility.test.js +0 -33
- package/box/Box.d.ts +0 -4
- package/box/Box.js +0 -75
- package/box/Box.stories.tsx +0 -119
- package/box/Box.test.d.ts +0 -1
- package/box/Box.test.js +0 -13
- package/box/types.d.ts +0 -32
- package/box/types.js +0 -5
- package/breadcrumbs/Breadcrumbs.accessibility.test.d.ts +0 -1
- package/breadcrumbs/Breadcrumbs.accessibility.test.js +0 -96
- package/breadcrumbs/Breadcrumbs.d.ts +0 -4
- package/breadcrumbs/Breadcrumbs.js +0 -79
- package/breadcrumbs/Breadcrumbs.stories.tsx +0 -194
- package/breadcrumbs/Breadcrumbs.test.d.ts +0 -1
- package/breadcrumbs/Breadcrumbs.test.js +0 -168
- package/breadcrumbs/Item.d.ts +0 -4
- package/breadcrumbs/Item.js +0 -52
- package/breadcrumbs/dropdownTheme.d.ts +0 -53
- package/breadcrumbs/dropdownTheme.js +0 -62
- package/breadcrumbs/types.d.ts +0 -40
- package/breadcrumbs/types.js +0 -5
- package/bulleted-list/BulletedList.accessibility.test.d.ts +0 -1
- package/bulleted-list/BulletedList.accessibility.test.js +0 -119
- package/bulleted-list/BulletedList.d.ts +0 -7
- package/bulleted-list/BulletedList.js +0 -92
- package/bulleted-list/BulletedList.stories.tsx +0 -115
- package/bulleted-list/types.d.ts +0 -38
- package/bulleted-list/types.js +0 -5
- package/button/Button.accessibility.test.d.ts +0 -1
- package/button/Button.accessibility.test.js +0 -127
- package/button/Button.d.ts +0 -4
- package/button/Button.js +0 -121
- package/button/Button.stories.tsx +0 -325
- package/button/Button.test.d.ts +0 -1
- package/button/Button.test.js +0 -38
- package/button/types.d.ts +0 -57
- package/button/types.js +0 -5
- package/card/Card.accessibility.test.d.ts +0 -1
- package/card/Card.accessibility.test.js +0 -36
- package/card/Card.d.ts +0 -4
- package/card/Card.js +0 -121
- package/card/Card.stories.tsx +0 -171
- package/card/Card.test.d.ts +0 -1
- package/card/Card.test.js +0 -39
- package/card/types.d.ts +0 -62
- package/card/types.js +0 -5
- package/checkbox/Checkbox.accessibility.test.d.ts +0 -1
- package/checkbox/Checkbox.accessibility.test.js +0 -87
- package/checkbox/Checkbox.d.ts +0 -4
- package/checkbox/Checkbox.js +0 -212
- package/checkbox/Checkbox.stories.tsx +0 -222
- package/checkbox/Checkbox.test.d.ts +0 -1
- package/checkbox/Checkbox.test.js +0 -199
- package/checkbox/types.d.ts +0 -72
- package/checkbox/types.js +0 -5
- package/chip/Chip.accessibility.test.d.ts +0 -1
- package/chip/Chip.accessibility.test.js +0 -67
- package/chip/Chip.d.ts +0 -4
- package/chip/Chip.js +0 -126
- package/chip/Chip.stories.tsx +0 -195
- package/chip/Chip.test.d.ts +0 -1
- package/chip/Chip.test.js +0 -41
- package/chip/types.d.ts +0 -45
- package/chip/types.js +0 -5
- package/common/coreTokens.d.ts +0 -236
- package/common/coreTokens.js +0 -183
- package/common/utils.d.ts +0 -1
- package/common/utils.js +0 -16
- package/common/variables.d.ts +0 -1421
- package/common/variables.js +0 -1287
- package/container/Container.d.ts +0 -4
- package/container/Container.js +0 -194
- package/container/Container.stories.tsx +0 -214
- package/container/types.d.ts +0 -176
- package/container/types.js +0 -5
- package/contextual-menu/ContextualMenu.accessibility.test.d.ts +0 -1
- package/contextual-menu/ContextualMenu.accessibility.test.js +0 -98
- package/contextual-menu/ContextualMenu.d.ts +0 -5
- package/contextual-menu/ContextualMenu.js +0 -136
- package/contextual-menu/ContextualMenu.stories.tsx +0 -231
- package/contextual-menu/ContextualMenu.test.d.ts +0 -1
- package/contextual-menu/ContextualMenu.test.js +0 -247
- package/contextual-menu/GroupItem.d.ts +0 -4
- package/contextual-menu/GroupItem.js +0 -67
- package/contextual-menu/ItemAction.d.ts +0 -4
- package/contextual-menu/ItemAction.js +0 -88
- package/contextual-menu/MenuItem.d.ts +0 -4
- package/contextual-menu/MenuItem.js +0 -29
- package/contextual-menu/SingleItem.d.ts +0 -4
- package/contextual-menu/SingleItem.js +0 -38
- package/contextual-menu/types.d.ts +0 -65
- package/contextual-menu/types.js +0 -5
- package/date-input/Calendar.d.ts +0 -4
- package/date-input/Calendar.js +0 -230
- package/date-input/DateInput.accessibility.test.d.ts +0 -1
- package/date-input/DateInput.accessibility.test.js +0 -229
- package/date-input/DateInput.d.ts +0 -4
- package/date-input/DateInput.js +0 -228
- package/date-input/DateInput.stories.tsx +0 -291
- package/date-input/DateInput.test.d.ts +0 -1
- package/date-input/DateInput.test.js +0 -808
- package/date-input/DatePicker.d.ts +0 -4
- package/date-input/DatePicker.js +0 -121
- package/date-input/YearPicker.d.ts +0 -4
- package/date-input/YearPicker.js +0 -105
- package/date-input/types.d.ts +0 -164
- package/date-input/types.js +0 -5
- package/dialog/Dialog.accessibility.test.d.ts +0 -1
- package/dialog/Dialog.accessibility.test.js +0 -69
- package/dialog/Dialog.d.ts +0 -4
- package/dialog/Dialog.js +0 -93
- package/dialog/Dialog.stories.tsx +0 -369
- package/dialog/Dialog.test.d.ts +0 -1
- package/dialog/Dialog.test.js +0 -370
- package/dialog/types.d.ts +0 -36
- package/dialog/types.js +0 -5
- package/divider/Divider.accessibility.test.d.ts +0 -1
- package/divider/Divider.accessibility.test.js +0 -33
- package/divider/Divider.d.ts +0 -4
- package/divider/Divider.js +0 -36
- package/divider/Divider.stories.tsx +0 -224
- package/divider/Divider.test.d.ts +0 -1
- package/divider/Divider.test.js +0 -38
- package/divider/types.d.ts +0 -21
- package/divider/types.js +0 -5
- package/dropdown/Dropdown.accessibility.test.d.ts +0 -1
- package/dropdown/Dropdown.accessibility.test.js +0 -183
- package/dropdown/Dropdown.d.ts +0 -4
- package/dropdown/Dropdown.js +0 -320
- package/dropdown/Dropdown.stories.tsx +0 -427
- package/dropdown/Dropdown.test.d.ts +0 -1
- package/dropdown/Dropdown.test.js +0 -628
- package/dropdown/DropdownMenu.d.ts +0 -4
- package/dropdown/DropdownMenu.js +0 -63
- package/dropdown/DropdownMenuItem.d.ts +0 -4
- package/dropdown/DropdownMenuItem.js +0 -71
- package/dropdown/types.d.ts +0 -96
- package/dropdown/types.js +0 -5
- package/file-input/FileInput.accessibility.test.d.ts +0 -1
- package/file-input/FileInput.accessibility.test.js +0 -167
- package/file-input/FileInput.d.ts +0 -4
- package/file-input/FileInput.js +0 -438
- package/file-input/FileInput.stories.tsx +0 -618
- package/file-input/FileInput.test.d.ts +0 -1
- package/file-input/FileInput.test.js +0 -404
- package/file-input/FileItem.d.ts +0 -4
- package/file-input/FileItem.js +0 -125
- package/file-input/types.d.ts +0 -125
- package/file-input/types.js +0 -5
- package/flex/Flex.d.ts +0 -4
- package/flex/Flex.js +0 -57
- package/flex/Flex.stories.tsx +0 -112
- package/flex/types.d.ts +0 -97
- package/flex/types.js +0 -5
- package/footer/Footer.accessibility.test.d.ts +0 -1
- package/footer/Footer.accessibility.test.js +0 -125
- package/footer/Footer.d.ts +0 -4
- package/footer/Footer.js +0 -140
- package/footer/Footer.stories.tsx +0 -208
- package/footer/Footer.test.d.ts +0 -1
- package/footer/Footer.test.js +0 -85
- package/footer/Icons.d.ts +0 -3
- package/footer/Icons.js +0 -108
- package/footer/types.d.ts +0 -64
- package/footer/types.js +0 -5
- package/grid/Grid.d.ts +0 -7
- package/grid/Grid.js +0 -76
- package/grid/Grid.stories.tsx +0 -221
- package/grid/types.d.ts +0 -115
- package/grid/types.js +0 -5
- package/header/Header.accessibility.test.d.ts +0 -1
- package/header/Header.accessibility.test.js +0 -94
- package/header/Header.d.ts +0 -8
- package/header/Header.js +0 -210
- package/header/Header.stories.tsx +0 -267
- package/header/Header.test.d.ts +0 -1
- package/header/Header.test.js +0 -66
- package/header/Icons.d.ts +0 -2
- package/header/Icons.js +0 -24
- package/header/types.d.ts +0 -33
- package/header/types.js +0 -5
- package/heading/Heading.accessibility.test.d.ts +0 -1
- package/heading/Heading.accessibility.test.js +0 -33
- package/heading/Heading.d.ts +0 -4
- package/heading/Heading.js +0 -137
- package/heading/Heading.stories.tsx +0 -54
- package/heading/Heading.test.d.ts +0 -1
- package/heading/Heading.test.js +0 -156
- package/heading/types.d.ts +0 -33
- package/heading/types.js +0 -5
- package/icon/Icon.accessibility.test.d.ts +0 -1
- package/icon/Icon.accessibility.test.js +0 -30
- package/icon/Icon.d.ts +0 -4
- package/icon/Icon.js +0 -33
- package/icon/Icon.stories.tsx +0 -28
- package/icon/types.d.ts +0 -4
- package/icon/types.js +0 -5
- package/image/Image.accessibility.test.d.ts +0 -1
- package/image/Image.accessibility.test.js +0 -56
- package/image/Image.d.ts +0 -4
- package/image/Image.js +0 -70
- package/image/Image.stories.tsx +0 -129
- package/image/types.d.ts +0 -72
- package/image/types.js +0 -5
- package/inset/Inset.d.ts +0 -3
- package/inset/Inset.js +0 -43
- package/inset/Inset.stories.tsx +0 -230
- package/inset/types.d.ts +0 -37
- package/inset/types.js +0 -5
- package/layout/ApplicationLayout.d.ts +0 -20
- package/layout/ApplicationLayout.js +0 -137
- package/layout/ApplicationLayout.stories.tsx +0 -162
- package/layout/Icons.d.ts +0 -7
- package/layout/Icons.js +0 -48
- package/layout/types.d.ts +0 -41
- package/layout/types.js +0 -5
- package/link/Link.accessibility.test.d.ts +0 -1
- package/link/Link.accessibility.test.js +0 -108
- package/link/Link.d.ts +0 -4
- package/link/Link.js +0 -117
- package/link/Link.stories.tsx +0 -253
- package/link/Link.test.d.ts +0 -1
- package/link/Link.test.js +0 -63
- package/link/types.d.ts +0 -54
- package/link/types.js +0 -5
- package/main.d.ts +0 -50
- package/main.js +0 -364
- package/nav-tabs/NavTabs.accessibility.test.d.ts +0 -1
- package/nav-tabs/NavTabs.accessibility.test.js +0 -44
- package/nav-tabs/NavTabs.d.ts +0 -7
- package/nav-tabs/NavTabs.js +0 -108
- package/nav-tabs/NavTabs.stories.tsx +0 -294
- package/nav-tabs/NavTabs.test.d.ts +0 -1
- package/nav-tabs/NavTabs.test.js +0 -77
- package/nav-tabs/NavTabsContext.d.ts +0 -3
- package/nav-tabs/NavTabsContext.js +0 -8
- package/nav-tabs/Tab.d.ts +0 -4
- package/nav-tabs/Tab.js +0 -117
- package/nav-tabs/types.d.ts +0 -52
- package/nav-tabs/types.js +0 -5
- package/number-input/NumberInput.accessibility.test.d.ts +0 -1
- package/number-input/NumberInput.accessibility.test.js +0 -227
- package/number-input/NumberInput.d.ts +0 -4
- package/number-input/NumberInput.js +0 -89
- package/number-input/NumberInput.stories.tsx +0 -126
- package/number-input/NumberInput.test.d.ts +0 -1
- package/number-input/NumberInput.test.js +0 -988
- package/number-input/NumberInputContext.d.ts +0 -3
- package/number-input/NumberInputContext.js +0 -8
- package/number-input/types.d.ts +0 -136
- package/number-input/types.js +0 -5
- package/paginator/Paginator.accessibility.test.d.ts +0 -1
- package/paginator/Paginator.accessibility.test.js +0 -78
- package/paginator/Paginator.d.ts +0 -4
- package/paginator/Paginator.js +0 -138
- package/paginator/Paginator.stories.tsx +0 -87
- package/paginator/Paginator.test.d.ts +0 -1
- package/paginator/Paginator.test.js +0 -334
- package/paginator/types.d.ts +0 -38
- package/paginator/types.js +0 -5
- package/paragraph/Paragraph.accessibility.test.d.ts +0 -1
- package/paragraph/Paragraph.accessibility.test.js +0 -28
- package/paragraph/Paragraph.d.ts +0 -5
- package/paragraph/Paragraph.js +0 -22
- package/paragraph/Paragraph.stories.tsx +0 -27
- package/password-input/PasswordInput.accessibility.test.d.ts +0 -1
- package/password-input/PasswordInput.accessibility.test.js +0 -152
- package/password-input/PasswordInput.d.ts +0 -4
- package/password-input/PasswordInput.js +0 -100
- package/password-input/PasswordInput.stories.tsx +0 -108
- package/password-input/PasswordInput.test.d.ts +0 -1
- package/password-input/PasswordInput.test.js +0 -197
- package/password-input/types.d.ts +0 -111
- package/password-input/types.js +0 -5
- package/progress-bar/ProgressBar.accessibility.test.d.ts +0 -1
- package/progress-bar/ProgressBar.accessibility.test.js +0 -35
- package/progress-bar/ProgressBar.d.ts +0 -4
- package/progress-bar/ProgressBar.js +0 -146
- package/progress-bar/ProgressBar.stories.tsx +0 -93
- package/progress-bar/ProgressBar.test.d.ts +0 -1
- package/progress-bar/ProgressBar.test.js +0 -93
- package/progress-bar/types.d.ts +0 -37
- package/progress-bar/types.js +0 -5
- package/quick-nav/QuickNav.accessibility.test.d.ts +0 -1
- package/quick-nav/QuickNav.accessibility.test.js +0 -57
- package/quick-nav/QuickNav.d.ts +0 -4
- package/quick-nav/QuickNav.js +0 -94
- package/quick-nav/QuickNav.stories.tsx +0 -356
- package/quick-nav/types.d.ts +0 -21
- package/quick-nav/types.js +0 -5
- package/radio-group/Radio.d.ts +0 -4
- package/radio-group/Radio.js +0 -121
- package/radio-group/RadioGroup.accessibility.test.d.ts +0 -1
- package/radio-group/RadioGroup.accessibility.test.js +0 -97
- package/radio-group/RadioGroup.d.ts +0 -4
- package/radio-group/RadioGroup.js +0 -233
- package/radio-group/RadioGroup.stories.tsx +0 -214
- package/radio-group/RadioGroup.test.d.ts +0 -1
- package/radio-group/RadioGroup.test.js +0 -754
- package/radio-group/types.d.ts +0 -114
- package/radio-group/types.js +0 -5
- package/resultset-table/Icons.d.ts +0 -7
- package/resultset-table/Icons.js +0 -47
- package/resultset-table/ResultsetTable.accessibility.test.d.ts +0 -1
- package/resultset-table/ResultsetTable.accessibility.test.js +0 -284
- package/resultset-table/ResultsetTable.d.ts +0 -7
- package/resultset-table/ResultsetTable.js +0 -195
- package/resultset-table/ResultsetTable.stories.tsx +0 -413
- package/resultset-table/ResultsetTable.test.d.ts +0 -1
- package/resultset-table/ResultsetTable.test.js +0 -450
- package/resultset-table/types.d.ts +0 -101
- package/resultset-table/types.js +0 -5
- package/select/Listbox.d.ts +0 -4
- package/select/Listbox.js +0 -151
- package/select/Option.d.ts +0 -4
- package/select/Option.js +0 -89
- package/select/Select.accessibility.test.d.ts +0 -1
- package/select/Select.accessibility.test.js +0 -227
- package/select/Select.d.ts +0 -4
- package/select/Select.js +0 -602
- package/select/Select.stories.tsx +0 -928
- package/select/Select.test.d.ts +0 -1
- package/select/Select.test.js +0 -2267
- package/select/types.d.ts +0 -209
- package/select/types.js +0 -5
- package/sidenav/Sidenav.accessibility.test.d.ts +0 -1
- package/sidenav/Sidenav.accessibility.test.js +0 -59
- package/sidenav/Sidenav.d.ts +0 -10
- package/sidenav/Sidenav.js +0 -201
- package/sidenav/Sidenav.stories.tsx +0 -277
- package/sidenav/Sidenav.test.d.ts +0 -1
- package/sidenav/Sidenav.test.js +0 -37
- package/sidenav/SidenavContext.d.ts +0 -5
- package/sidenav/SidenavContext.js +0 -13
- package/sidenav/types.d.ts +0 -76
- package/sidenav/types.js +0 -5
- package/slider/Slider.accessibility.test.d.ts +0 -1
- package/slider/Slider.accessibility.test.js +0 -103
- package/slider/Slider.d.ts +0 -4
- package/slider/Slider.js +0 -283
- package/slider/Slider.stories.tsx +0 -180
- package/slider/Slider.test.d.ts +0 -1
- package/slider/Slider.test.js +0 -256
- package/slider/types.d.ts +0 -86
- package/slider/types.js +0 -5
- package/spinner/Spinner.accessibility.test.d.ts +0 -1
- package/spinner/Spinner.accessibility.test.js +0 -96
- package/spinner/Spinner.d.ts +0 -4
- package/spinner/Spinner.js +0 -210
- package/spinner/Spinner.stories.tsx +0 -129
- package/spinner/Spinner.test.d.ts +0 -1
- package/spinner/Spinner.test.js +0 -55
- package/spinner/types.d.ts +0 -32
- package/spinner/types.js +0 -5
- package/status-light/StatusLight.accessibility.test.d.ts +0 -1
- package/status-light/StatusLight.accessibility.test.js +0 -157
- package/status-light/StatusLight.d.ts +0 -4
- package/status-light/StatusLight.js +0 -51
- package/status-light/StatusLight.stories.tsx +0 -74
- package/status-light/StatusLight.test.d.ts +0 -1
- package/status-light/StatusLight.test.js +0 -25
- package/status-light/types.d.ts +0 -17
- package/status-light/types.js +0 -5
- package/switch/Switch.accessibility.test.d.ts +0 -1
- package/switch/Switch.accessibility.test.js +0 -98
- package/switch/Switch.d.ts +0 -4
- package/switch/Switch.js +0 -211
- package/switch/Switch.stories.tsx +0 -149
- package/switch/Switch.test.d.ts +0 -1
- package/switch/Switch.test.js +0 -180
- package/switch/types.d.ts +0 -66
- package/switch/types.js +0 -5
- package/table/DropdownTheme.js +0 -62
- package/table/Table.accessibility.test.d.ts +0 -1
- package/table/Table.accessibility.test.js +0 -92
- package/table/Table.d.ts +0 -8
- package/table/Table.js +0 -161
- package/table/Table.stories.tsx +0 -663
- package/table/Table.test.d.ts +0 -1
- package/table/Table.test.js +0 -111
- package/table/types.d.ts +0 -49
- package/table/types.js +0 -5
- package/tabs/Tab.d.ts +0 -4
- package/tabs/Tab.js +0 -117
- package/tabs/Tabs.accessibility.test.d.ts +0 -1
- package/tabs/Tabs.accessibility.test.js +0 -56
- package/tabs/Tabs.d.ts +0 -4
- package/tabs/Tabs.js +0 -373
- package/tabs/Tabs.stories.tsx +0 -230
- package/tabs/Tabs.test.d.ts +0 -1
- package/tabs/Tabs.test.js +0 -276
- package/tabs/types.d.ts +0 -92
- package/tabs/types.js +0 -5
- package/tag/Tag.accessibility.test.d.ts +0 -1
- package/tag/Tag.accessibility.test.js +0 -69
- package/tag/Tag.d.ts +0 -4
- package/tag/Tag.js +0 -151
- package/tag/Tag.stories.tsx +0 -152
- package/tag/Tag.test.d.ts +0 -1
- package/tag/Tag.test.js +0 -41
- package/tag/types.d.ts +0 -69
- package/tag/types.js +0 -5
- package/text-input/Suggestion.d.ts +0 -4
- package/text-input/Suggestion.js +0 -67
- package/text-input/Suggestions.d.ts +0 -4
- package/text-input/Suggestions.js +0 -94
- package/text-input/TextInput.accessibility.test.d.ts +0 -1
- package/text-input/TextInput.accessibility.test.js +0 -320
- package/text-input/TextInput.d.ts +0 -4
- package/text-input/TextInput.js +0 -571
- package/text-input/TextInput.stories.tsx +0 -477
- package/text-input/TextInput.test.d.ts +0 -1
- package/text-input/TextInput.test.js +0 -1755
- package/text-input/types.d.ts +0 -205
- package/text-input/types.js +0 -5
- package/textarea/Textarea.accessibility.test.d.ts +0 -1
- package/textarea/Textarea.accessibility.test.js +0 -155
- package/textarea/Textarea.d.ts +0 -4
- package/textarea/Textarea.js +0 -235
- package/textarea/Textarea.stories.tsx +0 -174
- package/textarea/Textarea.test.d.ts +0 -1
- package/textarea/Textarea.test.js +0 -406
- package/textarea/types.d.ts +0 -141
- package/textarea/types.js +0 -5
- package/toggle-group/ToggleGroup.accessibility.test.d.ts +0 -1
- package/toggle-group/ToggleGroup.accessibility.test.js +0 -107
- package/toggle-group/ToggleGroup.d.ts +0 -4
- package/toggle-group/ToggleGroup.js +0 -199
- package/toggle-group/ToggleGroup.stories.tsx +0 -218
- package/toggle-group/ToggleGroup.test.d.ts +0 -1
- package/toggle-group/ToggleGroup.test.js +0 -137
- package/toggle-group/types.d.ts +0 -114
- package/toggle-group/types.js +0 -5
- package/tooltip/Tooltip.accessibility.test.d.ts +0 -1
- package/tooltip/Tooltip.accessibility.test.js +0 -144
- package/tooltip/Tooltip.d.ts +0 -4
- package/tooltip/Tooltip.js +0 -50
- package/tooltip/Tooltip.stories.tsx +0 -111
- package/tooltip/Tooltip.test.d.ts +0 -1
- package/tooltip/Tooltip.test.js +0 -112
- package/tooltip/types.d.ts +0 -16
- package/tooltip/types.js +0 -5
- package/typography/Typography.accessibility.test.d.ts +0 -1
- package/typography/Typography.accessibility.test.js +0 -339
- package/typography/Typography.d.ts +0 -4
- package/typography/Typography.js +0 -23
- package/typography/Typography.stories.tsx +0 -196
- package/typography/Typography.test.js +0 -23
- package/typography/types.d.ts +0 -18
- package/typography/types.js +0 -5
- package/useTheme.d.ts +0 -1168
- package/useTheme.js +0 -15
- package/useTranslatedLabels.d.ts +0 -85
- package/useTranslatedLabels.js +0 -14
- package/utils/BaseTypography.d.ts +0 -21
- package/utils/BaseTypography.js +0 -98
- package/utils/FocusLock.d.ts +0 -13
- package/utils/FocusLock.js +0 -125
- package/wizard/Wizard.accessibility.test.d.ts +0 -1
- package/wizard/Wizard.accessibility.test.js +0 -55
- package/wizard/Wizard.d.ts +0 -4
- package/wizard/Wizard.js +0 -239
- package/wizard/Wizard.stories.tsx +0 -272
- package/wizard/Wizard.test.d.ts +0 -1
- package/wizard/Wizard.test.js +0 -114
- package/wizard/types.d.ts +0 -64
- package/wizard/types.js +0 -5
package/textarea/types.d.ts
DELETED
|
@@ -1,141 +0,0 @@
|
|
|
1
|
-
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2
|
-
type Margin = {
|
|
3
|
-
top?: Space;
|
|
4
|
-
bottom?: Space;
|
|
5
|
-
left?: Space;
|
|
6
|
-
right?: Space;
|
|
7
|
-
};
|
|
8
|
-
type Props = {
|
|
9
|
-
/**
|
|
10
|
-
* Text to be placed above the textarea.
|
|
11
|
-
*/
|
|
12
|
-
label?: string;
|
|
13
|
-
/**
|
|
14
|
-
* Name attribute of the textarea element.
|
|
15
|
-
*/
|
|
16
|
-
name?: string;
|
|
17
|
-
/**
|
|
18
|
-
* Initial value of the textarea, only when it is uncontrolled.
|
|
19
|
-
*/
|
|
20
|
-
defaultValue?: string;
|
|
21
|
-
/**
|
|
22
|
-
* Value of the textarea. If undefined, the component will be uncontrolled and the value will be managed internally.
|
|
23
|
-
*/
|
|
24
|
-
value?: string;
|
|
25
|
-
/**
|
|
26
|
-
* Helper text to be placed above the textarea.
|
|
27
|
-
*/
|
|
28
|
-
helperText?: string;
|
|
29
|
-
/**
|
|
30
|
-
* Text to be put as placeholder of the textarea.
|
|
31
|
-
*/
|
|
32
|
-
placeholder?: string;
|
|
33
|
-
/**
|
|
34
|
-
* If true, the component will be disabled.
|
|
35
|
-
*/
|
|
36
|
-
disabled?: boolean;
|
|
37
|
-
/**
|
|
38
|
-
* If true, the component will not be mutable, meaning the user can not edit the control.
|
|
39
|
-
*/
|
|
40
|
-
readOnly?: boolean;
|
|
41
|
-
/**
|
|
42
|
-
* If true, the textarea will be optional, showing '(Optional)'
|
|
43
|
-
* next to the label. Otherwise, the field will be considered required
|
|
44
|
-
* and an error will be passed as a parameter to the OnBlur and onChange functions
|
|
45
|
-
* when it has not been filled.
|
|
46
|
-
*/
|
|
47
|
-
optional?: boolean;
|
|
48
|
-
/**
|
|
49
|
-
* Defines the textarea's ability to resize vertically. It can be:
|
|
50
|
-
* - 'auto': The textarea grows or shrinks automatically in order to fit the content.
|
|
51
|
-
* - 'manual': The height of the textarea is enabled to be manually modified.
|
|
52
|
-
* - 'none': The textarea has a fixed height and can't be modified.
|
|
53
|
-
*/
|
|
54
|
-
verticalGrow?: "auto" | "manual" | "none";
|
|
55
|
-
/**
|
|
56
|
-
* Number of rows of the textarea.
|
|
57
|
-
*/
|
|
58
|
-
rows?: number;
|
|
59
|
-
/**
|
|
60
|
-
* This function will be called when the user types within the textarea.
|
|
61
|
-
* An object including the current value and the error (if the value
|
|
62
|
-
* entered is not valid) will be passed to this function.
|
|
63
|
-
* If there is no error, error will not be defined.
|
|
64
|
-
*/
|
|
65
|
-
onChange?: (val: {
|
|
66
|
-
value: string;
|
|
67
|
-
error?: string;
|
|
68
|
-
}) => void;
|
|
69
|
-
/**
|
|
70
|
-
* This function will be called when the textarea loses the focus. An
|
|
71
|
-
* object including the textarea value and the error (if the value entered
|
|
72
|
-
* is not valid) will be passed to this function. If there is no error,
|
|
73
|
-
* error will not be defined.
|
|
74
|
-
*/
|
|
75
|
-
onBlur?: (val: {
|
|
76
|
-
value: string;
|
|
77
|
-
error?: string;
|
|
78
|
-
}) => void;
|
|
79
|
-
/**
|
|
80
|
-
* If it is a defined value and also a truthy string, the component will
|
|
81
|
-
* change its appearance, showing the error below the textarea. If the
|
|
82
|
-
* defined value is an empty string, it will reserve a space below the
|
|
83
|
-
* component for a future error, but it would not change its look. In
|
|
84
|
-
* case of being undefined or null, both the appearance and the space for
|
|
85
|
-
* the error message would not be modified.
|
|
86
|
-
*/
|
|
87
|
-
error?: string;
|
|
88
|
-
/**
|
|
89
|
-
* Regular expression that defines the valid format allowed by the
|
|
90
|
-
* textarea. This will be checked both when the textarea loses the focus
|
|
91
|
-
* and while typing within it. If the string entered does not match the
|
|
92
|
-
* pattern, the onBlur and onChange functions will be called with the
|
|
93
|
-
* current value and an internal error informing that this value does not
|
|
94
|
-
* match the pattern. If the pattern is met, the error parameter of both
|
|
95
|
-
* events will not be defined.
|
|
96
|
-
*/
|
|
97
|
-
pattern?: string;
|
|
98
|
-
/**
|
|
99
|
-
* Specifies the minimum length allowed by the textarea.
|
|
100
|
-
* This will be checked both when the textarea loses the
|
|
101
|
-
* focus and while typing within it. If the string entered does not
|
|
102
|
-
* comply the minimum length, the onBlur and onChange functions will be called
|
|
103
|
-
* with the current value and an internal error informing that the value
|
|
104
|
-
* length does not comply the specified range. If a valid length is
|
|
105
|
-
* reached, the error parameter of both events will not be defined.
|
|
106
|
-
*/
|
|
107
|
-
minLength?: number;
|
|
108
|
-
/**
|
|
109
|
-
* Specifies the maximum length allowed by the textarea.
|
|
110
|
-
* This will be checked both when the textarea loses the
|
|
111
|
-
* focus and while typing within it. If the string entered does not
|
|
112
|
-
* comply the maximum length, the onBlur and onChange functions will be called
|
|
113
|
-
* with the current value and an internal error informing that the value
|
|
114
|
-
* length does not comply the specified range. If a valid length is
|
|
115
|
-
* reached, the error parameter of both events will not be defined.
|
|
116
|
-
*/
|
|
117
|
-
maxLength?: number;
|
|
118
|
-
/**
|
|
119
|
-
* HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the textarea value.
|
|
120
|
-
* Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
|
|
121
|
-
*/
|
|
122
|
-
autocomplete?: string;
|
|
123
|
-
/**
|
|
124
|
-
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
125
|
-
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
126
|
-
*/
|
|
127
|
-
margin?: Space | Margin;
|
|
128
|
-
/**
|
|
129
|
-
* Size of the component.
|
|
130
|
-
*/
|
|
131
|
-
size?: "small" | "medium" | "large" | "fillParent";
|
|
132
|
-
/**
|
|
133
|
-
* Value of the tabindex attribute.
|
|
134
|
-
*/
|
|
135
|
-
tabIndex?: number;
|
|
136
|
-
};
|
|
137
|
-
/**
|
|
138
|
-
* Reference to the component.
|
|
139
|
-
*/
|
|
140
|
-
export type RefType = HTMLDivElement;
|
|
141
|
-
export default Props;
|
package/textarea/types.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
5
|
-
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
6
|
-
var _react = _interopRequireDefault(require("react"));
|
|
7
|
-
var _react2 = require("@testing-library/react");
|
|
8
|
-
var _axeHelper = require("../../test/accessibility/axe-helper.js");
|
|
9
|
-
var _ToggleGroup = _interopRequireDefault(require("./ToggleGroup"));
|
|
10
|
-
var ethernetSVG = /*#__PURE__*/_react["default"].createElement("svg", {
|
|
11
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
12
|
-
height: "24px",
|
|
13
|
-
viewBox: "0 0 24 24",
|
|
14
|
-
width: "24px",
|
|
15
|
-
fill: "currentColor"
|
|
16
|
-
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
17
|
-
d: "M0 0h24v24H0V0z",
|
|
18
|
-
fill: "none"
|
|
19
|
-
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
20
|
-
d: "M7.77 6.76L6.23 5.48.82 12l5.41 6.52 1.54-1.28L3.42 12l4.35-5.24zM7 13h2v-2H7v2zm10-2h-2v2h2v-2zm-6 2h2v-2h-2v2zm6.77-7.52l-1.54 1.28L20.58 12l-4.35 5.24 1.54 1.28L23.18 12l-5.41-6.52z"
|
|
21
|
-
}));
|
|
22
|
-
var gMobileSVG = /*#__PURE__*/_react["default"].createElement("svg", {
|
|
23
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
24
|
-
height: "24px",
|
|
25
|
-
viewBox: "0 0 24 24",
|
|
26
|
-
width: "24px",
|
|
27
|
-
fill: "currentColor"
|
|
28
|
-
}, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
|
|
29
|
-
d: "M0,0h24v24H0V0z",
|
|
30
|
-
fill: "none"
|
|
31
|
-
})), /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
|
|
32
|
-
d: "M3,7v2h5v2H4v2h4v2H3v2h5c1.1,0,2-0.9,2-2v-1.5c0-0.83-0.67-1.5-1.5-1.5c0.83,0,1.5-0.67,1.5-1.5V9c0-1.1-0.9-2-2-2H3z M21,11v4c0,1.1-0.9,2-2,2h-5c-1.1,0-2-0.9-2-2V9c0-1.1,0.9-2,2-2h5c1.1,0,2,0.9,2,2h-7v6h5v-2h-2.5v-2H21z"
|
|
33
|
-
}))));
|
|
34
|
-
var wifiSVG = /*#__PURE__*/_react["default"].createElement("svg", {
|
|
35
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
36
|
-
height: "24px",
|
|
37
|
-
viewBox: "0 0 24 24",
|
|
38
|
-
width: "24px",
|
|
39
|
-
fill: "currentColor"
|
|
40
|
-
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
41
|
-
d: "M0 0h24v24H0V0zm0 0h24v24H0V0z",
|
|
42
|
-
fill: "none"
|
|
43
|
-
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
44
|
-
d: "M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"
|
|
45
|
-
}));
|
|
46
|
-
var options = [{
|
|
47
|
-
value: 1,
|
|
48
|
-
icon: wifiSVG,
|
|
49
|
-
title: "WiFi connection"
|
|
50
|
-
}, {
|
|
51
|
-
value: 2,
|
|
52
|
-
icon: ethernetSVG,
|
|
53
|
-
title: "Ethernet connection"
|
|
54
|
-
}, {
|
|
55
|
-
value: 3,
|
|
56
|
-
icon: gMobileSVG,
|
|
57
|
-
title: "3G Mobile data connection"
|
|
58
|
-
}];
|
|
59
|
-
describe("Toggle group component accessibility tests", function () {
|
|
60
|
-
it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
|
|
61
|
-
var _render, container, results;
|
|
62
|
-
return _regenerator["default"].wrap(function _callee$(_context) {
|
|
63
|
-
while (1) switch (_context.prev = _context.next) {
|
|
64
|
-
case 0:
|
|
65
|
-
_render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
|
|
66
|
-
label: "Toggle group label",
|
|
67
|
-
helperText: "Toggle group helper text",
|
|
68
|
-
options: options,
|
|
69
|
-
margin: "medium",
|
|
70
|
-
defaultValue: [2],
|
|
71
|
-
multiple: true
|
|
72
|
-
})), container = _render.container;
|
|
73
|
-
_context.next = 3;
|
|
74
|
-
return (0, _axeHelper.axe)(container);
|
|
75
|
-
case 3:
|
|
76
|
-
results = _context.sent;
|
|
77
|
-
expect(results).toHaveNoViolations();
|
|
78
|
-
case 5:
|
|
79
|
-
case "end":
|
|
80
|
-
return _context.stop();
|
|
81
|
-
}
|
|
82
|
-
}, _callee);
|
|
83
|
-
})));
|
|
84
|
-
it("Should not have basic accessibility issues for disabled mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
|
|
85
|
-
var _render2, container, results;
|
|
86
|
-
return _regenerator["default"].wrap(function _callee2$(_context2) {
|
|
87
|
-
while (1) switch (_context2.prev = _context2.next) {
|
|
88
|
-
case 0:
|
|
89
|
-
_render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
|
|
90
|
-
label: "Toggle group label",
|
|
91
|
-
helperText: "Toggle group helper text",
|
|
92
|
-
options: options,
|
|
93
|
-
margin: "medium",
|
|
94
|
-
disabled: true
|
|
95
|
-
})), container = _render2.container;
|
|
96
|
-
_context2.next = 3;
|
|
97
|
-
return (0, _axeHelper.axe)(container);
|
|
98
|
-
case 3:
|
|
99
|
-
results = _context2.sent;
|
|
100
|
-
expect(results).toHaveNoViolations();
|
|
101
|
-
case 5:
|
|
102
|
-
case "end":
|
|
103
|
-
return _context2.stop();
|
|
104
|
-
}
|
|
105
|
-
}, _callee2);
|
|
106
|
-
})));
|
|
107
|
-
});
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import ToggleGroupPropsType from "./types";
|
|
3
|
-
declare const DxcToggleGroup: ({ label, helperText, defaultValue, value, onChange, disabled, options, margin, multiple, tabIndex, }: ToggleGroupPropsType) => JSX.Element;
|
|
4
|
-
export default DxcToggleGroup;
|
|
@@ -1,199 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
var _typeof3 = require("@babel/runtime/helpers/typeof");
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports["default"] = void 0;
|
|
9
|
-
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
10
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
11
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
12
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
-
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
14
|
-
var _variables = require("../common/variables");
|
|
15
|
-
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
16
|
-
var _Flex = _interopRequireDefault(require("../flex/Flex"));
|
|
17
|
-
var _Icon = _interopRequireDefault(require("../icon/Icon"));
|
|
18
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
19
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
20
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
21
|
-
var DxcToggleGroup = function DxcToggleGroup(_ref) {
|
|
22
|
-
var label = _ref.label,
|
|
23
|
-
helperText = _ref.helperText,
|
|
24
|
-
defaultValue = _ref.defaultValue,
|
|
25
|
-
value = _ref.value,
|
|
26
|
-
onChange = _ref.onChange,
|
|
27
|
-
_ref$disabled = _ref.disabled,
|
|
28
|
-
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
29
|
-
options = _ref.options,
|
|
30
|
-
margin = _ref.margin,
|
|
31
|
-
_ref$multiple = _ref.multiple,
|
|
32
|
-
multiple = _ref$multiple === void 0 ? false : _ref$multiple,
|
|
33
|
-
_ref$tabIndex = _ref.tabIndex,
|
|
34
|
-
tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
|
|
35
|
-
var toggleGroupLabelId = "label-toggle-group-".concat((0, _react.useId)());
|
|
36
|
-
var _useState = (0, _react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : multiple ? [] : -1),
|
|
37
|
-
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
38
|
-
selectedValue = _useState2[0],
|
|
39
|
-
setSelectedValue = _useState2[1];
|
|
40
|
-
var colorsTheme = (0, _useTheme["default"])();
|
|
41
|
-
var handleToggleChange = function handleToggleChange(selectedOption) {
|
|
42
|
-
var newSelectedOptions;
|
|
43
|
-
if (value == null) {
|
|
44
|
-
if (multiple && Array.isArray(selectedValue)) {
|
|
45
|
-
newSelectedOptions = selectedValue.map(function (value) {
|
|
46
|
-
return value;
|
|
47
|
-
});
|
|
48
|
-
if (newSelectedOptions.includes(selectedOption)) {
|
|
49
|
-
var index = newSelectedOptions.indexOf(selectedOption);
|
|
50
|
-
newSelectedOptions.splice(index, 1);
|
|
51
|
-
} else {
|
|
52
|
-
newSelectedOptions.push(selectedOption);
|
|
53
|
-
}
|
|
54
|
-
setSelectedValue(newSelectedOptions);
|
|
55
|
-
} else setSelectedValue(selectedOption === selectedValue ? null : selectedOption);
|
|
56
|
-
} else if (multiple) {
|
|
57
|
-
newSelectedOptions = Array.isArray(value) ? value.map(function (v) {
|
|
58
|
-
return v;
|
|
59
|
-
}) : value;
|
|
60
|
-
if (newSelectedOptions.includes(selectedOption)) {
|
|
61
|
-
var _index = newSelectedOptions.indexOf(selectedOption);
|
|
62
|
-
newSelectedOptions.splice(_index, 1);
|
|
63
|
-
} else newSelectedOptions.push(selectedOption);
|
|
64
|
-
}
|
|
65
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(multiple ? newSelectedOptions : selectedOption);
|
|
66
|
-
};
|
|
67
|
-
var handleOnKeyDown = function handleOnKeyDown(event, optionValue) {
|
|
68
|
-
switch (event.key) {
|
|
69
|
-
case "Enter":
|
|
70
|
-
case " ":
|
|
71
|
-
event.preventDefault();
|
|
72
|
-
handleToggleChange(optionValue);
|
|
73
|
-
}
|
|
74
|
-
};
|
|
75
|
-
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
76
|
-
theme: colorsTheme.toggleGroup
|
|
77
|
-
}, /*#__PURE__*/_react["default"].createElement(ToggleGroup, {
|
|
78
|
-
margin: margin
|
|
79
|
-
}, /*#__PURE__*/_react["default"].createElement(Label, {
|
|
80
|
-
id: toggleGroupLabelId,
|
|
81
|
-
disabled: disabled
|
|
82
|
-
}, label), /*#__PURE__*/_react["default"].createElement(HelperText, {
|
|
83
|
-
disabled: disabled
|
|
84
|
-
}, helperText), /*#__PURE__*/_react["default"].createElement(OptionsContainer, {
|
|
85
|
-
"aria-labelledby": toggleGroupLabelId
|
|
86
|
-
}, options.map(function (option, i) {
|
|
87
|
-
return /*#__PURE__*/_react["default"].createElement(ToggleButton, {
|
|
88
|
-
key: "toggle-".concat(i, "-").concat(option.label),
|
|
89
|
-
"aria-label": option.title,
|
|
90
|
-
"aria-pressed": multiple ? value ? Array.isArray(value) && value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
|
|
91
|
-
disabled: disabled,
|
|
92
|
-
onClick: function onClick() {
|
|
93
|
-
handleToggleChange(option.value);
|
|
94
|
-
},
|
|
95
|
-
onKeyDown: function onKeyDown(event) {
|
|
96
|
-
handleOnKeyDown(event, option.value);
|
|
97
|
-
},
|
|
98
|
-
tabIndex: !disabled ? tabIndex : -1,
|
|
99
|
-
title: option.title,
|
|
100
|
-
hasIcon: option.icon,
|
|
101
|
-
optionLabel: option.label,
|
|
102
|
-
selected: multiple ? value ? Array.isArray(value) && value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue
|
|
103
|
-
}, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
|
|
104
|
-
alignItems: "center"
|
|
105
|
-
}, option.icon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
|
|
106
|
-
optionLabel: option.label
|
|
107
|
-
}, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
|
|
108
|
-
icon: option.icon
|
|
109
|
-
}) : option.icon), option.label && /*#__PURE__*/_react["default"].createElement(LabelContainer, null, option.label)));
|
|
110
|
-
}))));
|
|
111
|
-
};
|
|
112
|
-
var ToggleGroup = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n flex-direction: column;\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
|
|
113
|
-
return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
|
|
114
|
-
}, function (props) {
|
|
115
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
|
|
116
|
-
}, function (props) {
|
|
117
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
|
|
118
|
-
}, function (props) {
|
|
119
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
|
|
120
|
-
}, function (props) {
|
|
121
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
|
|
122
|
-
});
|
|
123
|
-
var Label = _styledComponents["default"].label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (props) {
|
|
124
|
-
return props.disabled ? props.theme.disabledLabelFontColor : props.theme.labelFontColor;
|
|
125
|
-
}, function (props) {
|
|
126
|
-
return props.theme.labelFontFamily;
|
|
127
|
-
}, function (props) {
|
|
128
|
-
return props.theme.labelFontSize;
|
|
129
|
-
}, function (props) {
|
|
130
|
-
return props.theme.labelFontStyle;
|
|
131
|
-
}, function (props) {
|
|
132
|
-
return props.theme.labelFontWeight;
|
|
133
|
-
}, function (props) {
|
|
134
|
-
return props.theme.labelLineHeight;
|
|
135
|
-
});
|
|
136
|
-
var HelperText = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (props) {
|
|
137
|
-
return props.disabled ? props.theme.disabledHelperTextFontcolor : props.theme.helperTextFontColor;
|
|
138
|
-
}, function (props) {
|
|
139
|
-
return props.theme.helperTextFontFamily;
|
|
140
|
-
}, function (props) {
|
|
141
|
-
return props.theme.helperTextFontSize;
|
|
142
|
-
}, function (props) {
|
|
143
|
-
return props.theme.helperTextFontStyle;
|
|
144
|
-
}, function (props) {
|
|
145
|
-
return props.theme.helperTextFontWeight;
|
|
146
|
-
}, function (props) {
|
|
147
|
-
return props.theme.helperTextLineHeight;
|
|
148
|
-
});
|
|
149
|
-
var OptionsContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n gap: 0.25rem;\n width: max-content;\n height: calc(48px - 4px - 4px);\n padding: 0.25rem;\n border-width: ", ";\n border-style: ", ";\n border-radius: ", ";\n border-color: ", ";\n margin-top: ", ";\n background-color: ", ";\n"])), function (props) {
|
|
150
|
-
return props.theme.containerBorderThickness;
|
|
151
|
-
}, function (props) {
|
|
152
|
-
return props.theme.containerBorderStyle;
|
|
153
|
-
}, function (props) {
|
|
154
|
-
return props.theme.containerBorderRadius;
|
|
155
|
-
}, function (props) {
|
|
156
|
-
return props.theme.containerBorderColor;
|
|
157
|
-
}, function (props) {
|
|
158
|
-
return props.theme.containerMarginTop;
|
|
159
|
-
}, function (props) {
|
|
160
|
-
return props.theme.containerBackgroundColor;
|
|
161
|
-
});
|
|
162
|
-
var ToggleButton = _styledComponents["default"].button(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n border-width: ", ";\n border-style: ", ";\n border-radius: ", ";\n background-color: ", ";\n color: ", ";\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n color: #ffffff;\n }\n &:focus {\n outline: none;\n box-shadow: ", ";\n }\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n"])), function (props) {
|
|
163
|
-
return props.optionLabel && props.hasIcon || props.optionLabel && !props.hasIcon ? props.theme.labelPaddingLeft : props.theme.iconPaddingLeft;
|
|
164
|
-
}, function (props) {
|
|
165
|
-
return props.optionLabel && props.hasIcon || props.optionLabel && !props.hasIcon ? props.theme.labelPaddingRight : props.theme.iconPaddingRight;
|
|
166
|
-
}, function (props) {
|
|
167
|
-
return props.theme.optionBorderThickness;
|
|
168
|
-
}, function (props) {
|
|
169
|
-
return props.theme.optionBorderStyle;
|
|
170
|
-
}, function (props) {
|
|
171
|
-
return props.theme.optionBorderRadius;
|
|
172
|
-
}, function (props) {
|
|
173
|
-
return props.selected ? props.theme.selectedBackgroundColor : props.theme.unselectedBackgroundColor;
|
|
174
|
-
}, function (props) {
|
|
175
|
-
return props.selected ? props.theme.selectedFontColor : props.theme.unselectedFontColor;
|
|
176
|
-
}, function (props) {
|
|
177
|
-
return props.selected ? props.theme.selectedHoverBackgroundColor : props.theme.unselectedHoverBackgroundColor;
|
|
178
|
-
}, function (props) {
|
|
179
|
-
return props.selected ? props.theme.selectedActiveBackgroundColor : props.theme.unselectedActiveBackgroundColor;
|
|
180
|
-
}, function (props) {
|
|
181
|
-
return "0 0 0 ".concat(props.theme.optionFocusBorderThickness, " ").concat(props.theme.focusColor);
|
|
182
|
-
}, function (props) {
|
|
183
|
-
return props.selected ? props.theme.selectedDisabledBackgroundColor : props.theme.unselectedDisabledBackgroundColor;
|
|
184
|
-
}, function (props) {
|
|
185
|
-
return props.selected ? props.theme.selectedDisabledFontColor : props.theme.unselectedDisabledFontColor;
|
|
186
|
-
});
|
|
187
|
-
var LabelContainer = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n"])), function (props) {
|
|
188
|
-
return props.theme.optionLabelFontFamily;
|
|
189
|
-
}, function (props) {
|
|
190
|
-
return props.theme.optionLabelFontSize;
|
|
191
|
-
}, function (props) {
|
|
192
|
-
return props.theme.optionLabelFontStyle;
|
|
193
|
-
}, function (props) {
|
|
194
|
-
return props.theme.optionLabelFontWeight;
|
|
195
|
-
});
|
|
196
|
-
var IconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n margin-right: ", ";\n overflow: hidden;\n font-size: 24px;\n svg {\n height: 24px;\n width: 24px;\n }\n"])), function (props) {
|
|
197
|
-
return props.optionLabel && props.theme.iconMarginRight;
|
|
198
|
-
});
|
|
199
|
-
var _default = exports["default"] = DxcToggleGroup;
|