@openedx/paragon 21.7.0 → 22.0.0-alpha.15
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 +36 -5
- package/bin/paragon-scripts.js +128 -10
- package/dist/ActionRow/_index.scss +2 -4
- package/dist/Alert/index.scss +41 -32
- package/dist/Annotation/_mixins.scss +104 -0
- package/dist/Annotation/index.scss +130 -103
- package/dist/Avatar/index.scss +18 -20
- package/dist/AvatarButton/index.scss +3 -5
- package/dist/Badge/index.scss +112 -2
- package/dist/Breadcrumb/index.scss +14 -16
- package/dist/Bubble/index.scss +25 -12
- package/dist/Button/_mixins.scss +14 -0
- package/dist/Button/button-group.scss +126 -0
- package/dist/Button/index.js +0 -2
- package/dist/Button/index.js.map +1 -1
- package/dist/Button/index.scss +855 -358
- package/dist/Card/card-bootstrap.scss +168 -0
- package/dist/Card/index.scss +78 -79
- package/dist/Carousel/index.scss +168 -2
- package/dist/Chip/index.scss +36 -34
- package/dist/ChipCarousel/index.scss +1 -3
- package/dist/CloseButton/index.scss +31 -2
- package/dist/Code/index.scss +47 -2
- package/dist/Collapsible/index.scss +15 -15
- package/dist/ColorPicker/index.scss +9 -11
- package/dist/DataTable/CollapsibleButtonGroup.js +2 -2
- package/dist/DataTable/CollapsibleButtonGroup.js.map +1 -1
- package/dist/DataTable/filters/TextFilter.js +2 -3
- package/dist/DataTable/filters/TextFilter.js.map +1 -1
- package/dist/DataTable/index.scss +48 -50
- package/dist/Dropdown/dropdown-bootstrap.scss +181 -0
- package/dist/Dropdown/index.js +0 -2
- package/dist/Dropdown/index.js.map +1 -1
- package/dist/Dropdown/index.scss +11 -12
- package/dist/Dropzone/index.scss +12 -14
- package/dist/Form/_FormText.scss +8 -8
- package/dist/Form/_bootstrap-custom-forms.scss +551 -0
- package/dist/Form/_bootstrap-forms.scss +381 -0
- package/dist/Form/_index.scss +165 -143
- package/dist/Form/_input-group.scss +188 -0
- package/dist/Form/_mixins.scss +216 -3
- package/dist/Hyperlink/index.scss +1 -1
- package/dist/Icon/index.scss +10 -12
- package/dist/IconButton/_mixins.scss +4 -0
- package/dist/IconButton/index.js +5 -11
- package/dist/IconButton/index.js.map +1 -1
- package/dist/IconButton/index.scss +387 -74
- package/dist/IconButtonToggle/index.scss +1 -1
- package/dist/Image/index.scss +53 -2
- package/dist/Menu/index.scss +25 -27
- package/dist/Modal/_ModalDialog.scss +51 -49
- package/dist/Modal/index.scss +6 -73
- package/dist/Nav/_mixins.scss +4 -4
- package/dist/Nav/index.scss +70 -66
- package/dist/Navbar/index.scss +276 -2
- package/dist/OverflowScroll/data/useOverflowScrollElementAttributes.js +3 -3
- package/dist/Overlay/index.js +2 -3
- package/dist/Overlay/index.js.map +1 -1
- package/dist/PageBanner/index.scss +17 -21
- package/dist/Pagination/index.scss +51 -46
- package/dist/Pagination/pagination-bootstrap.scss +83 -0
- package/dist/Popover/index.scss +9 -10
- package/dist/Popover/popover-bootstrap.scss +198 -0
- package/dist/ProductTour/Checkpoint.scss +71 -43
- package/dist/ProgressBar/_mixins.scss +22 -0
- package/dist/ProgressBar/bootstrap-progress.scss +49 -0
- package/dist/ProgressBar/index.scss +28 -36
- package/dist/Scrollable/index.scss +2 -2
- package/dist/SearchField/SearchFieldInput.js +2 -2
- package/dist/SearchField/SearchFieldInput.js.map +1 -1
- package/dist/SearchField/index.scss +19 -21
- package/dist/SelectableBox/index.scss +11 -13
- package/dist/Sheet/index.scss +10 -10
- package/dist/Spinner/index.scss +57 -2
- package/dist/Stack/index.scss +1 -3
- package/dist/Stepper/index.scss +19 -20
- package/dist/Sticky/index.scss +4 -6
- package/dist/Tabs/index.js +0 -2
- package/dist/Tabs/index.js.map +1 -1
- package/dist/Tabs/index.scss +23 -30
- package/dist/Toast/ToastContainer.scss +9 -11
- package/dist/Toast/bootstrap-toast.scss +46 -0
- package/dist/Toast/index.scss +9 -10
- package/dist/Tooltip/index.scss +136 -10
- package/dist/ValidationMessage/index.scss +1 -1
- package/dist/core.css +16706 -0
- package/dist/core.css.map +1 -0
- package/dist/core.min.css +2 -0
- package/dist/index.js +0 -14
- package/dist/index.scss +0 -4
- package/dist/light.css +4083 -0
- package/dist/light.css.map +1 -0
- package/dist/light.min.css +2 -0
- package/dist/theme-urls.json +21 -0
- package/dist/utils/breakpoints.js +1 -1
- package/lib/build-scss.js +188 -0
- package/lib/build-tokens.js +119 -0
- package/lib/help.js +36 -23
- package/lib/replace-variables.js +38 -0
- package/lib/utils.js +9 -0
- package/package.json +25 -11
- package/src/ActionRow/_index.scss +2 -4
- package/src/Alert/index.scss +41 -32
- package/src/Annotation/_mixins.scss +104 -0
- package/src/Annotation/index.scss +130 -103
- package/src/Avatar/index.scss +18 -20
- package/src/AvatarButton/index.scss +3 -5
- package/src/Badge/index.scss +112 -2
- package/src/Breadcrumb/index.scss +14 -16
- package/src/Bubble/index.scss +25 -12
- package/src/Button/README.md +0 -54
- package/src/Button/_mixins.scss +14 -0
- package/src/Button/button-group.scss +126 -0
- package/src/Button/index.jsx +0 -3
- package/src/Button/index.scss +855 -358
- package/src/Card/card-bootstrap.scss +168 -0
- package/src/Card/index.scss +78 -79
- package/src/Carousel/index.scss +168 -2
- package/src/Chip/index.scss +36 -34
- package/src/ChipCarousel/index.scss +1 -3
- package/src/CloseButton/index.scss +31 -2
- package/src/Code/index.scss +47 -2
- package/src/Collapsible/index.scss +15 -15
- package/src/ColorPicker/index.scss +9 -11
- package/src/DataTable/CollapsibleButtonGroup.jsx +2 -2
- package/src/DataTable/filters/TextFilter.jsx +2 -3
- package/src/DataTable/index.scss +48 -50
- package/src/Dropdown/README.md +0 -93
- package/src/Dropdown/dropdown-bootstrap.scss +181 -0
- package/src/Dropdown/index.jsx +0 -2
- package/src/Dropdown/index.scss +11 -12
- package/src/Dropzone/index.scss +12 -14
- package/src/Form/_FormText.scss +8 -8
- package/src/Form/_bootstrap-custom-forms.scss +551 -0
- package/src/Form/_bootstrap-forms.scss +381 -0
- package/src/Form/_index.scss +165 -143
- package/src/Form/_input-group.scss +188 -0
- package/src/Form/_mixins.scss +216 -3
- package/src/Hyperlink/index.scss +1 -1
- package/src/Icon/index.scss +10 -12
- package/src/IconButton/README.md +1 -15
- package/src/IconButton/__snapshots__/IconButton.test.jsx.snap +5 -26
- package/src/IconButton/_mixins.scss +4 -0
- package/src/IconButton/index.jsx +6 -13
- package/src/IconButton/index.scss +387 -74
- package/src/IconButtonToggle/index.scss +1 -1
- package/src/Image/index.scss +53 -2
- package/src/Menu/index.scss +25 -27
- package/src/Modal/_ModalDialog.scss +51 -49
- package/src/Modal/index.scss +6 -73
- package/src/Nav/_mixins.scss +4 -4
- package/src/Nav/index.scss +70 -66
- package/src/Navbar/index.scss +276 -2
- package/src/OverflowScroll/data/useOverflowScrollElementAttributes.js +3 -3
- package/src/Overlay/index.jsx +2 -3
- package/src/PageBanner/index.scss +17 -21
- package/src/Pagination/index.scss +51 -46
- package/src/Pagination/pagination-bootstrap.scss +83 -0
- package/src/Popover/index.scss +9 -10
- package/src/Popover/popover-bootstrap.scss +198 -0
- package/src/ProductTour/Checkpoint.scss +71 -43
- package/src/ProgressBar/_mixins.scss +22 -0
- package/src/ProgressBar/bootstrap-progress.scss +49 -0
- package/src/ProgressBar/index.scss +28 -36
- package/src/Scrollable/index.scss +2 -2
- package/src/SearchField/SearchFieldInput.jsx +2 -2
- package/src/SearchField/__snapshots__/SearchField.test.jsx.snap +12 -8
- package/src/SearchField/index.scss +19 -21
- package/src/SelectableBox/index.scss +11 -13
- package/src/Sheet/index.scss +10 -10
- package/src/Spinner/index.scss +57 -2
- package/src/Stack/index.scss +1 -3
- package/src/Stepper/index.scss +19 -20
- package/src/Sticky/index.scss +4 -6
- package/src/Tabs/README.md +1 -25
- package/src/Tabs/index.jsx +0 -3
- package/src/Tabs/index.scss +23 -30
- package/src/Toast/ToastContainer.scss +9 -11
- package/src/Toast/bootstrap-toast.scss +46 -0
- package/src/Toast/index.scss +9 -10
- package/src/Tooltip/index.scss +136 -10
- package/src/TransitionReplace/README.md +4 -4
- package/src/ValidationMessage/index.scss +1 -1
- package/src/index.js +0 -14
- package/src/index.scss +0 -4
- package/src/utils/breakpoints.js +1 -1
- package/styles/css/core/custom-media-breakpoints.css +17 -0
- package/styles/css/core/index.css +2 -0
- package/styles/css/core/variables.css +608 -0
- package/styles/css/themes/light/index.css +2 -0
- package/styles/css/themes/light/utility-classes.css +2454 -0
- package/styles/css/themes/light/variables.css +1629 -0
- package/{scss → styles/scss}/core/_functions.scss +1 -1
- package/styles/scss/core/_grid.scss +21 -0
- package/{scss → styles/scss}/core/_utilities.scss +17 -11
- package/styles/scss/core/_variables.scss +869 -0
- package/styles/scss/core/bootstrap-override/_functions.scss +104 -0
- package/styles/scss/core/bootstrap-override/_mixins.scss +4 -0
- package/styles/scss/core/bootstrap-override/_utilities.scss +4 -0
- package/styles/scss/core/bootstrap-override/bootstrap.scss +2 -0
- package/styles/scss/core/bootstrap-override/mixins/_grid-framework.scss +80 -0
- package/styles/scss/core/bootstrap-override/mixins/_grid.scss +69 -0
- package/styles/scss/core/bootstrap-override/mixins/_list-group.scss +22 -0
- package/styles/scss/core/bootstrap-override/utilities/_background.scss +7 -0
- package/styles/scss/core/bootstrap-override/utilities/_borders.scss +67 -0
- package/styles/scss/core/bootstrap-override/utilities/_spacing.scss +70 -0
- package/styles/scss/core/bootstrap-override/utilities/_text.scss +68 -0
- package/styles/scss/core/core.scss +20 -0
- package/{scss → styles/scss}/core/utilities-only.scss +1 -0
- package/tokens/README.md +158 -0
- package/tokens/css-utilities.js +56 -0
- package/tokens/map-scss-to-css.js +24 -0
- package/tokens/replace-variables.js +32 -0
- package/tokens/sass-helpers.js +98 -0
- package/tokens/src/core/alias/size.json +15 -0
- package/tokens/src/core/components/ActionRow.json +10 -0
- package/tokens/src/core/components/Alert.json +30 -0
- package/tokens/src/core/components/Annotation.json +25 -0
- package/tokens/src/core/components/Avatar.json +17 -0
- package/tokens/src/core/components/AvatarButton.json +11 -0
- package/tokens/src/core/components/Badge.json +33 -0
- package/tokens/src/core/components/Breadcrumb.json +37 -0
- package/tokens/src/core/components/Bubble.json +10 -0
- package/tokens/src/core/components/Button/core.json +101 -0
- package/tokens/src/core/components/Card.json +91 -0
- package/tokens/src/core/components/Carousel.json +37 -0
- package/tokens/src/core/components/Chip.json +19 -0
- package/tokens/src/core/components/ChipCarousel.json +9 -0
- package/tokens/src/core/components/CloseButton.json +14 -0
- package/tokens/src/core/components/Code.json +34 -0
- package/tokens/src/core/components/Collapsible.json +29 -0
- package/tokens/src/core/components/ColorPicker.json +8 -0
- package/tokens/src/core/components/Container.json +13 -0
- package/tokens/src/core/components/DataTable.json +27 -0
- package/tokens/src/core/components/Dropdown.json +67 -0
- package/tokens/src/core/components/Dropzone.json +25 -0
- package/tokens/src/core/components/Form/other.json +14 -0
- package/tokens/src/core/components/Form/size.json +233 -0
- package/tokens/src/core/components/Form/spacing.json +155 -0
- package/tokens/src/core/components/Form/transition.json +16 -0
- package/tokens/src/core/components/Form/typography.json +122 -0
- package/tokens/src/core/components/Icon.json +11 -0
- package/tokens/src/core/components/IconButton.json +15 -0
- package/tokens/src/core/components/Image.json +28 -0
- package/tokens/src/core/components/Menu.json +48 -0
- package/tokens/src/core/components/Modal.json +47 -0
- package/tokens/src/core/components/Nav.json +55 -0
- package/tokens/src/core/components/Navbar.json +70 -0
- package/tokens/src/core/components/Pagination.json +70 -0
- package/tokens/src/core/components/Popover.json +48 -0
- package/tokens/src/core/components/ProductTour.json +37 -0
- package/tokens/src/core/components/ProgressBar.json +44 -0
- package/tokens/src/core/components/SearchField.json +23 -0
- package/tokens/src/core/components/SelectableBox.json +9 -0
- package/tokens/src/core/components/Sheet.json +10 -0
- package/tokens/src/core/components/Spinner.json +19 -0
- package/tokens/src/core/components/Stack.json +7 -0
- package/tokens/src/core/components/Stepper.json +42 -0
- package/tokens/src/core/components/Sticky.json +7 -0
- package/tokens/src/core/components/Tab.json +18 -0
- package/tokens/src/core/components/Tabs.json +19 -0
- package/tokens/src/core/components/Toast.json +30 -0
- package/tokens/src/core/components/Tooltip.json +33 -0
- package/tokens/src/core/components/general/caret.json +13 -0
- package/tokens/src/core/components/general/headings.json +16 -0
- package/tokens/src/core/components/general/hr.json +10 -0
- package/tokens/src/core/components/general/input.json +51 -0
- package/tokens/src/core/components/general/link.json +30 -0
- package/tokens/src/core/components/general/list.json +26 -0
- package/tokens/src/core/components/general/text.json +24 -0
- package/tokens/src/core/global/breakpoints.json +12 -0
- package/tokens/src/core/global/display.json +21 -0
- package/tokens/src/core/global/elevation.json +19 -0
- package/tokens/src/core/global/other.json +4 -0
- package/tokens/src/core/global/spacing.json +35 -0
- package/tokens/src/core/global/transition.json +14 -0
- package/tokens/src/core/global/typography.json +91 -0
- package/tokens/src/core/utilities/color.json +12 -0
- package/tokens/src/themes/light/alias/color.json +114 -0
- package/tokens/src/themes/light/components/Alert.json +47 -0
- package/tokens/src/themes/light/components/Annotation.json +29 -0
- package/tokens/src/themes/light/components/Avatar.json +7 -0
- package/tokens/src/themes/light/components/Badge.json +186 -0
- package/tokens/src/themes/light/components/Breadcrumb.json +15 -0
- package/tokens/src/themes/light/components/Bubble.json +18 -0
- package/tokens/src/themes/light/components/Button/brand.json +260 -0
- package/tokens/src/themes/light/components/Button/core.json +24 -0
- package/tokens/src/themes/light/components/Button/danger.json +247 -0
- package/tokens/src/themes/light/components/Button/dark.json +230 -0
- package/tokens/src/themes/light/components/Button/info.json +238 -0
- package/tokens/src/themes/light/components/Button/light.json +236 -0
- package/tokens/src/themes/light/components/Button/primary.json +250 -0
- package/tokens/src/themes/light/components/Button/secondary.json +278 -0
- package/tokens/src/themes/light/components/Button/success.json +253 -0
- package/tokens/src/themes/light/components/Button/tertiary.json +109 -0
- package/tokens/src/themes/light/components/Button/warning.json +276 -0
- package/tokens/src/themes/light/components/Card.json +40 -0
- package/tokens/src/themes/light/components/Carousel.json +45 -0
- package/tokens/src/themes/light/components/Chip.json +19 -0
- package/tokens/src/themes/light/components/CloseButton.json +10 -0
- package/tokens/src/themes/light/components/Code.json +23 -0
- package/tokens/src/themes/light/components/DataTable.json +26 -0
- package/tokens/src/themes/light/components/Dropdown.json +36 -0
- package/tokens/src/themes/light/components/Dropzone.json +19 -0
- package/tokens/src/themes/light/components/Form/color.json +270 -0
- package/tokens/src/themes/light/components/Form/elevation.json +76 -0
- package/tokens/src/themes/light/components/Form/other.json +131 -0
- package/tokens/src/themes/light/components/IconButton.json +451 -0
- package/tokens/src/themes/light/components/Image.json +18 -0
- package/tokens/src/themes/light/components/Menu.json +30 -0
- package/tokens/src/themes/light/components/Modal.json +37 -0
- package/tokens/src/themes/light/components/Nav.json +145 -0
- package/tokens/src/themes/light/components/Navbar.json +136 -0
- package/tokens/src/themes/light/components/OverflowScroll.json +9 -0
- package/tokens/src/themes/light/components/PageBanner.json +24 -0
- package/tokens/src/themes/light/components/Pagination.json +40 -0
- package/tokens/src/themes/light/components/Popover.json +55 -0
- package/tokens/src/themes/light/components/ProductTour.json +35 -0
- package/tokens/src/themes/light/components/ProgressBar.json +20 -0
- package/tokens/src/themes/light/components/Scrollable.json +14 -0
- package/tokens/src/themes/light/components/SearchField.json +25 -0
- package/tokens/src/themes/light/components/Sheet.json +22 -0
- package/tokens/src/themes/light/components/Stepper.json +34 -0
- package/tokens/src/themes/light/components/Sticky.json +18 -0
- package/tokens/src/themes/light/components/Tab.json +55 -0
- package/tokens/src/themes/light/components/Toast.json +33 -0
- package/tokens/src/themes/light/components/Tooltip.json +30 -0
- package/tokens/src/themes/light/components/general/body.json +8 -0
- package/tokens/src/themes/light/components/general/headings.json +7 -0
- package/tokens/src/themes/light/components/general/hr.json +15 -0
- package/tokens/src/themes/light/components/general/input.json +18 -0
- package/tokens/src/themes/light/components/general/link.json +109 -0
- package/tokens/src/themes/light/components/general/list.json +38 -0
- package/tokens/src/themes/light/components/general/text.json +6 -0
- package/tokens/src/themes/light/global/color.json +1661 -0
- package/tokens/src/themes/light/global/elevation.json +201 -0
- package/tokens/src/themes/light/global/other.json +4 -0
- package/tokens/style-dictionary.js +223 -0
- package/tokens/utils.js +210 -0
- package/dist/ActionRow/_variables.scss +0 -2
- package/dist/Alert/_variables.scss +0 -24
- package/dist/Annotation/_variables.scss +0 -18
- package/dist/Avatar/_variables.scss +0 -10
- package/dist/AvatarButton/_variables.scss +0 -3
- package/dist/Badge/_variables.scss +0 -16
- package/dist/Breadcrumb/_variables.scss +0 -27
- package/dist/Bubble/_variables.scss +0 -8
- package/dist/Button/_variables.scss +0 -50
- package/dist/Button/deprecated/index.js +0 -128
- package/dist/Button/deprecated/index.js.map +0 -1
- package/dist/Card/_variables.scss +0 -56
- package/dist/Carousel/_variables.scss +0 -27
- package/dist/CheckBox/index.js +0 -72
- package/dist/CheckBox/index.js.map +0 -1
- package/dist/CheckBoxGroup/index.js +0 -15
- package/dist/CheckBoxGroup/index.js.map +0 -1
- package/dist/Chip/_variables.scss +0 -19
- package/dist/ChipCarousel/_variables.scss +0 -1
- package/dist/CloseButton/_variables.scss +0 -6
- package/dist/Code/_variables.scss +0 -17
- package/dist/Collapsible/_variables.scss +0 -12
- package/dist/ColorPicker/_variables.scss +0 -2
- package/dist/Container/_variables.scss +0 -5
- package/dist/DataTable/_variables.scss +0 -11
- package/dist/Dropdown/_variables.scss +0 -33
- package/dist/Dropdown/deprecated/DropdownButton.js +0 -48
- package/dist/Dropdown/deprecated/DropdownButton.js.map +0 -1
- package/dist/Dropdown/deprecated/DropdownItem.js +0 -34
- package/dist/Dropdown/deprecated/DropdownItem.js.map +0 -1
- package/dist/Dropdown/deprecated/DropdownMenu.js +0 -50
- package/dist/Dropdown/deprecated/DropdownMenu.js.map +0 -1
- package/dist/Dropdown/deprecated/index.js +0 -209
- package/dist/Dropdown/deprecated/index.js.map +0 -1
- package/dist/Dropzone/_variables.scss +0 -9
- package/dist/Fieldset/index.js +0 -92
- package/dist/Fieldset/index.js.map +0 -1
- package/dist/Fieldset/index.scss +0 -12
- package/dist/Form/_variables.scss +0 -267
- package/dist/Icon/_variables.scss +0 -7
- package/dist/Image/_variables.scss +0 -13
- package/dist/Input/index.js +0 -136
- package/dist/Input/index.js.map +0 -1
- package/dist/InputSelect/index.js +0 -78
- package/dist/InputSelect/index.js.map +0 -1
- package/dist/InputText/index.js +0 -43
- package/dist/InputText/index.js.map +0 -1
- package/dist/ListBox/index.js +0 -116
- package/dist/ListBox/index.js.map +0 -1
- package/dist/ListBoxOption/index.js +0 -71
- package/dist/ListBoxOption/index.js.map +0 -1
- package/dist/Menu/_variables.scss +0 -24
- package/dist/Modal/_variables.scss +0 -50
- package/dist/Modal/index.js +0 -260
- package/dist/Modal/index.js.map +0 -1
- package/dist/Nav/_variables.scss +0 -59
- package/dist/Navbar/_variables.scss +0 -40
- package/dist/OverflowScroll/_variables.scss +0 -5
- package/dist/OverflowScroll/index.scss +0 -1
- package/dist/Pagination/_variables.scss +0 -52
- package/dist/Popover/_variables.scss +0 -36
- package/dist/ProductTour/_variables.scss +0 -15
- package/dist/ProgressBar/_variables.scss +0 -23
- package/dist/RadioButtonGroup/index.js +0 -157
- package/dist/RadioButtonGroup/index.js.map +0 -1
- package/dist/SearchField/_variables.scss +0 -16
- package/dist/SelectableBox/_variables.scss +0 -5
- package/dist/Spinner/_variables.scss +0 -9
- package/dist/Stack/_variables.scss +0 -1
- package/dist/StatusAlert/index.js +0 -130
- package/dist/StatusAlert/index.js.map +0 -1
- package/dist/Stepper/_variables.scss +0 -18
- package/dist/Sticky/_variables.scss +0 -3
- package/dist/Table/_variables.scss +0 -34
- package/dist/Table/index.js +0 -198
- package/dist/Table/index.js.map +0 -1
- package/dist/Table/index.scss +0 -12
- package/dist/Tabs/_variables.scss +0 -24
- package/dist/Tabs/deprecated/Tabs.scss +0 -3
- package/dist/Tabs/deprecated/index.js +0 -90
- package/dist/Tabs/deprecated/index.js.map +0 -1
- package/dist/TextArea/index.js +0 -42
- package/dist/TextArea/index.js.map +0 -1
- package/dist/Toast/_variables.scss +0 -19
- package/dist/Tooltip/_variables.scss +0 -21
- package/dist/ValidationFormGroup/index.js +0 -105
- package/dist/ValidationFormGroup/index.js.map +0 -1
- package/dist/paragon.css +0 -39
- package/scss/core/_grid.scss +0 -21
- package/scss/core/_variables.scss +0 -875
- package/scss/core/core.scss +0 -21
- package/src/ActionRow/_variables.scss +0 -2
- package/src/Alert/_variables.scss +0 -24
- package/src/Annotation/_variables.scss +0 -18
- package/src/Avatar/_variables.scss +0 -10
- package/src/AvatarButton/_variables.scss +0 -3
- package/src/Badge/_variables.scss +0 -16
- package/src/Breadcrumb/_variables.scss +0 -27
- package/src/Bubble/_variables.scss +0 -8
- package/src/Button/_variables.scss +0 -50
- package/src/Button/deprecated/Button.test.jsx +0 -34
- package/src/Button/deprecated/index.jsx +0 -145
- package/src/Card/_variables.scss +0 -56
- package/src/Carousel/_variables.scss +0 -27
- package/src/CheckBox/CheckBox.test.jsx +0 -65
- package/src/CheckBox/README.md +0 -93
- package/src/CheckBox/index.jsx +0 -80
- package/src/CheckBoxGroup/CheckBoxGroup.test.jsx +0 -33
- package/src/CheckBoxGroup/README.md +0 -35
- package/src/CheckBoxGroup/index.jsx +0 -19
- package/src/Chip/_variables.scss +0 -19
- package/src/ChipCarousel/_variables.scss +0 -1
- package/src/CloseButton/_variables.scss +0 -6
- package/src/Code/_variables.scss +0 -17
- package/src/Collapsible/_variables.scss +0 -12
- package/src/ColorPicker/_variables.scss +0 -2
- package/src/Container/_variables.scss +0 -5
- package/src/DataTable/_variables.scss +0 -11
- package/src/Dropdown/_variables.scss +0 -33
- package/src/Dropdown/deprecated/Dropdown.test.jsx +0 -238
- package/src/Dropdown/deprecated/DropdownButton.jsx +0 -52
- package/src/Dropdown/deprecated/DropdownItem.jsx +0 -34
- package/src/Dropdown/deprecated/DropdownMenu.jsx +0 -50
- package/src/Dropdown/deprecated/__snapshots__/Dropdown.test.jsx.snap +0 -229
- package/src/Dropdown/deprecated/index.jsx +0 -222
- package/src/Dropzone/_variables.scss +0 -9
- package/src/Fieldset/Fieldset.test.jsx +0 -101
- package/src/Fieldset/README.md +0 -146
- package/src/Fieldset/index.jsx +0 -107
- package/src/Fieldset/index.scss +0 -12
- package/src/Form/_variables.scss +0 -267
- package/src/Icon/_variables.scss +0 -7
- package/src/Image/_variables.scss +0 -13
- package/src/Input/README.md +0 -74
- package/src/Input/__snapshots__/input.test.jsx.snap +0 -53
- package/src/Input/index.jsx +0 -151
- package/src/Input/input.test.jsx +0 -85
- package/src/InputSelect/README.md +0 -136
- package/src/InputSelect/index.jsx +0 -92
- package/src/InputText/InputText.test.jsx +0 -74
- package/src/InputText/README.md +0 -293
- package/src/InputText/index.jsx +0 -49
- package/src/ListBox/ListBox.test.jsx +0 -161
- package/src/ListBox/README.md +0 -185
- package/src/ListBox/index.jsx +0 -115
- package/src/ListBoxOption/ListBoxOption.test.jsx +0 -154
- package/src/ListBoxOption/index.jsx +0 -78
- package/src/Menu/_variables.scss +0 -24
- package/src/Modal/README.md +0 -148
- package/src/Modal/_variables.scss +0 -50
- package/src/Modal/index.jsx +0 -314
- package/src/Modal/tests/Modal.test.jsx +0 -261
- package/src/Nav/_variables.scss +0 -59
- package/src/Navbar/_variables.scss +0 -40
- package/src/OverflowScroll/_variables.scss +0 -5
- package/src/OverflowScroll/index.scss +0 -1
- package/src/Pagination/_variables.scss +0 -52
- package/src/Popover/_variables.scss +0 -36
- package/src/ProductTour/_variables.scss +0 -15
- package/src/ProgressBar/_variables.scss +0 -23
- package/src/RadioButtonGroup/README.md +0 -50
- package/src/RadioButtonGroup/RadioButtonGroup.test.jsx +0 -127
- package/src/RadioButtonGroup/index.jsx +0 -185
- package/src/SearchField/_variables.scss +0 -16
- package/src/SelectableBox/_variables.scss +0 -5
- package/src/Spinner/_variables.scss +0 -9
- package/src/Stack/_variables.scss +0 -1
- package/src/StatusAlert/README.md +0 -149
- package/src/StatusAlert/StatusAlert.test.jsx +0 -150
- package/src/StatusAlert/index.jsx +0 -144
- package/src/Stepper/_variables.scss +0 -18
- package/src/Sticky/_variables.scss +0 -3
- package/src/Table/README.md +0 -506
- package/src/Table/Table.test.jsx +0 -367
- package/src/Table/_variables.scss +0 -34
- package/src/Table/index.jsx +0 -264
- package/src/Table/index.scss +0 -12
- package/src/Tabs/_variables.scss +0 -24
- package/src/Tabs/deprecated/Tabs.scss +0 -3
- package/src/Tabs/deprecated/Tabs.test.jsx +0 -50
- package/src/Tabs/deprecated/index.jsx +0 -117
- package/src/TextArea/README.md +0 -63
- package/src/TextArea/index.jsx +0 -48
- package/src/Toast/_variables.scss +0 -19
- package/src/Tooltip/_variables.scss +0 -21
- package/src/ValidationFormGroup/README.md +0 -116
- package/src/ValidationFormGroup/ValidationFormGroup.test.jsx +0 -146
- package/src/ValidationFormGroup/__snapshots__/ValidationFormGroup.test.jsx.snap +0 -161
- package/src/ValidationFormGroup/index.jsx +0 -114
- /package/{scss → styles/scss}/core/_exports.module.scss +0 -0
- /package/{scss → styles/scss}/core/_typography.scss +0 -0
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
// Tables
|
|
2
|
-
//
|
|
3
|
-
// Customizes the `.table` component with basic values, each used across all table variations.
|
|
4
|
-
|
|
5
|
-
$table-cell-padding: .75rem !default;
|
|
6
|
-
$table-cell-padding-sm: .3rem !default;
|
|
7
|
-
|
|
8
|
-
$table-color: $body-color !default;
|
|
9
|
-
$table-bg: null !default;
|
|
10
|
-
$table-accent-bg: rgba($black, .05) !default;
|
|
11
|
-
$table-hover-color: $table-color !default;
|
|
12
|
-
$table-hover-bg: rgba($black, .075) !default;
|
|
13
|
-
$table-active-bg: $table-hover-bg !default;
|
|
14
|
-
|
|
15
|
-
$table-border-width: $border-width !default;
|
|
16
|
-
$table-border-color: $border-color !default;
|
|
17
|
-
|
|
18
|
-
$table-head-bg: theme-color("gray", "background") !default;
|
|
19
|
-
$table-head-color: theme-color("gray", "text") !default;
|
|
20
|
-
|
|
21
|
-
$table-dark-color: $white !default;
|
|
22
|
-
$table-dark-bg: theme-color("gray", "hover") !default;
|
|
23
|
-
$table-dark-accent-bg: rgba($white, .05) !default;
|
|
24
|
-
$table-dark-hover-color: $table-dark-color !default;
|
|
25
|
-
$table-dark-hover-bg: rgba($white, .075) !default;
|
|
26
|
-
$table-dark-border-color: lighten($table-dark-bg, 7.5%) !default;
|
|
27
|
-
$table-dark-color: $white !default;
|
|
28
|
-
|
|
29
|
-
$table-striped-order: odd !default;
|
|
30
|
-
|
|
31
|
-
$table-caption-color: $text-muted !default;
|
|
32
|
-
|
|
33
|
-
$table-bg-level: -9 !default;
|
|
34
|
-
$table-border-level: -6 !default;
|
package/dist/Table/index.js
DELETED
|
@@ -1,198 +0,0 @@
|
|
|
1
|
-
/* eslint-disable max-len */
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import classNames from 'classnames';
|
|
4
|
-
import isRequiredIf from 'react-proptype-conditional-require';
|
|
5
|
-
import PropTypes from 'prop-types';
|
|
6
|
-
import Button from '../Button';
|
|
7
|
-
import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
|
|
8
|
-
class Table extends React.Component {
|
|
9
|
-
constructor(props) {
|
|
10
|
-
super(props);
|
|
11
|
-
this.state = {
|
|
12
|
-
sortedColumn: props.tableSortable ? this.props.defaultSortedColumn : '',
|
|
13
|
-
sortDirection: props.tableSortable ? this.props.defaultSortDirection : ''
|
|
14
|
-
};
|
|
15
|
-
this.onSortClick = this.onSortClick.bind(this);
|
|
16
|
-
}
|
|
17
|
-
onSortClick(columnKey) {
|
|
18
|
-
let newDirection = 'desc';
|
|
19
|
-
if (this.state.sortedColumn === columnKey) {
|
|
20
|
-
newDirection = this.state.sortDirection === 'desc' ? 'asc' : 'desc';
|
|
21
|
-
}
|
|
22
|
-
this.setState({
|
|
23
|
-
sortedColumn: columnKey,
|
|
24
|
-
sortDirection: newDirection
|
|
25
|
-
});
|
|
26
|
-
const currentlySortedColumn = this.props.columns.find(column => columnKey === column.key);
|
|
27
|
-
currentlySortedColumn.onSort(newDirection);
|
|
28
|
-
}
|
|
29
|
-
getCaption() {
|
|
30
|
-
return this.props.caption && /*#__PURE__*/React.createElement("caption", null, this.props.caption);
|
|
31
|
-
}
|
|
32
|
-
getSortButtonScreenReaderText(columnKey) {
|
|
33
|
-
let text;
|
|
34
|
-
if (this.state.sortedColumn === columnKey) {
|
|
35
|
-
text = this.props.sortButtonsScreenReaderText[this.state.sortDirection];
|
|
36
|
-
} else {
|
|
37
|
-
text = this.props.sortButtonsScreenReaderText.defaultText;
|
|
38
|
-
}
|
|
39
|
-
return text;
|
|
40
|
-
}
|
|
41
|
-
getSortIcon(sortDirection) {
|
|
42
|
-
const sortIconClassName = ['fa-sort', sortDirection].filter(n => n).join('-');
|
|
43
|
-
return /*#__PURE__*/React.createElement("span", {
|
|
44
|
-
className: classNames('fa', sortIconClassName),
|
|
45
|
-
"aria-hidden": true
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
getTableHeading(column) {
|
|
49
|
-
let heading;
|
|
50
|
-
if (this.props.tableSortable && column.columnSortable) {
|
|
51
|
-
heading = /*#__PURE__*/React.createElement(Button, {
|
|
52
|
-
variant: "header",
|
|
53
|
-
onClick: () => this.onSortClick(column.key)
|
|
54
|
-
}, /*#__PURE__*/React.createElement("span", null, column.label, /*#__PURE__*/React.createElement("span", {
|
|
55
|
-
className: classNames('sr-only'),
|
|
56
|
-
"data-testid": "table-heading-sr"
|
|
57
|
-
}, ' ', this.getSortButtonScreenReaderText(column.key)), ' ', this.getSortIcon(column.key === this.state.sortedColumn ? this.state.sortDirection : '')));
|
|
58
|
-
} else if (column.hideHeader) {
|
|
59
|
-
heading = /*#__PURE__*/React.createElement("span", {
|
|
60
|
-
className: classNames('sr-only'),
|
|
61
|
-
"data-testid": "table-heading-sr"
|
|
62
|
-
}, column.label);
|
|
63
|
-
} else {
|
|
64
|
-
heading = column.label;
|
|
65
|
-
}
|
|
66
|
-
return heading;
|
|
67
|
-
}
|
|
68
|
-
getHeadings() {
|
|
69
|
-
return /*#__PURE__*/React.createElement("thead", {
|
|
70
|
-
className: classNames(...this.props.headingClassName, {
|
|
71
|
-
'd-inline': this.props.hasFixedColumnWidths
|
|
72
|
-
})
|
|
73
|
-
}, /*#__PURE__*/React.createElement("tr", {
|
|
74
|
-
className: classNames({
|
|
75
|
-
'd-flex': this.props.hasFixedColumnWidths
|
|
76
|
-
})
|
|
77
|
-
}, this.props.columns.map(col => /*#__PURE__*/React.createElement("th", {
|
|
78
|
-
className: classNames({
|
|
79
|
-
sortable: this.props.tableSortable && col.columnSortable
|
|
80
|
-
}, this.props.hasFixedColumnWidths ? col.width : null),
|
|
81
|
-
key: col.key,
|
|
82
|
-
scope: "col"
|
|
83
|
-
}, this.getTableHeading(col)))));
|
|
84
|
-
}
|
|
85
|
-
getBody() {
|
|
86
|
-
return /*#__PURE__*/React.createElement("tbody", {
|
|
87
|
-
className: classNames({
|
|
88
|
-
'd-inline': this.props.hasFixedColumnWidths
|
|
89
|
-
})
|
|
90
|
-
}, this.props.data.map((row, i) => /*#__PURE__*/React.createElement("tr", {
|
|
91
|
-
// eslint-disable-next-line react/no-array-index-key
|
|
92
|
-
key: i,
|
|
93
|
-
className: classNames({
|
|
94
|
-
'd-flex': this.props.hasFixedColumnWidths
|
|
95
|
-
})
|
|
96
|
-
}, this.props.columns.map(_ref => {
|
|
97
|
-
let {
|
|
98
|
-
key,
|
|
99
|
-
width
|
|
100
|
-
} = _ref;
|
|
101
|
-
return /*#__PURE__*/React.createElement(key === this.props.rowHeaderColumnKey ? 'th' : 'td', {
|
|
102
|
-
key,
|
|
103
|
-
className: classNames(this.props.hasFixedColumnWidths ? width : null),
|
|
104
|
-
scope: key === this.props.rowHeaderColumnKey ? 'row' : null
|
|
105
|
-
}, row[key]);
|
|
106
|
-
}))));
|
|
107
|
-
}
|
|
108
|
-
render() {
|
|
109
|
-
return /*#__PURE__*/React.createElement("table", {
|
|
110
|
-
className: classNames('table', this.props.className)
|
|
111
|
-
}, this.getCaption(), this.getHeadings(), this.getBody());
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
Table.propTypes = {
|
|
115
|
-
caption: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
|
116
|
-
className: PropTypes.string,
|
|
117
|
-
/** specifies the order and contents of the table's columns and provides display strings for each column's heading. It is composed of an ordered array of objects. Each object contains the following keys:
|
|
118
|
-
1. `label` (string or element; required) contains the display string for each column's heading.
|
|
119
|
-
2. `key` (string; required) maps that label to its corresponding datum for each row in `data`, to ensure table data are displayed in their appropriate columns.
|
|
120
|
-
3. `columnSortable` (boolean; optional) specifies at the column-level whether the column is sortable. If `columnSortable` is `true`, a sort button will be rendered in the column table heading. It is only required if `tableSortable` is set to `true`.
|
|
121
|
-
4. `onSort` (function; conditionally required) specifies what function is called when a sortable column is clicked. It is only required if the column's `columnSortable` is set to `true`.
|
|
122
|
-
5. `hideHeader` (boolean; optional) specifies at the column-level whether the column label is visible. A column that is sortable cannot have its label be hidden.
|
|
123
|
-
6. `width` (string; conditionally required) only if `hasFixedColumnWidths` is set to `true`, the `<td>` elements' `class` attributes will be set to this value. This allows restricting columns to specific widths. See [Bootstrap's grid documentation](https://getbootstrap.com/docs/4.0/layout/grid/) for `col` class names that can be used.
|
|
124
|
-
The order of objects in `columns` specifies the order of the columns in the table. */
|
|
125
|
-
data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
|
|
126
|
-
/** specifies the order and contents of the table's columns and provides display strings for each column's heading. It is composed of an ordered array of objects. Each object contains the following keys:
|
|
127
|
-
1. `label` (string or element; required) contains the display string for each column's heading.
|
|
128
|
-
2. `key` (string; required) maps that label to its corresponding datum for each row in `data`, to ensure table data are displayed in their appropriate columns.
|
|
129
|
-
3. `columnSortable` (boolean; optional) specifies at the column-level whether the column is sortable. If `columnSortable` is `true`, a sort button will be rendered in the column table heading. It is only required if `tableSortable` is set to `true`.
|
|
130
|
-
4. `onSort` (function; conditionally required) specifies what function is called when a sortable column is clicked. It is only required if the column's `columnSortable` is set to `true`.
|
|
131
|
-
5. `hideHeader` (boolean; optional) specifies at the column-level whether the column label is visible. A column that is sortable cannot have its label be hidden.
|
|
132
|
-
6. `width` (string; conditionally required) only if `hasFixedColumnWidths` is set to `true`, the `<td>` elements' `class` attributes will be set to this value. This allows restricting columns to specific widths. See [Bootstrap's grid documentation](https://getbootstrap.com/docs/4.0/layout/grid/) for `col` class names that can be used.
|
|
133
|
-
The order of objects in `columns` specifies the order of the columns in the table. */
|
|
134
|
-
columns: PropTypes.arrayOf(PropTypes.shape({
|
|
135
|
-
key: PropTypes.string.isRequired,
|
|
136
|
-
label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
|
|
137
|
-
columnSortable: isRequiredIf(PropTypes.bool, props => props.tableSortable),
|
|
138
|
-
onSort: isRequiredIf(PropTypes.func, props => props.columnSortable),
|
|
139
|
-
hideHeader: PropTypes.bool,
|
|
140
|
-
width: isRequiredIf(PropTypes.string, props => props.hasFixedColumnWidths)
|
|
141
|
-
})).isRequired,
|
|
142
|
-
/** Specifies Bootstrap class names to apply to the table heading. Options are detailed in [Bootstrap's docs](https://getbootstrap.com/docs/4.0/content/tables/#table-head-options).
|
|
143
|
-
*/
|
|
144
|
-
headingClassName: PropTypes.arrayOf(PropTypes.string),
|
|
145
|
-
/** Specifies whether the table is sortable. This setting supercedes column-level sortability, so if it is `false`, no sortable components will be rendered. */
|
|
146
|
-
tableSortable: PropTypes.bool,
|
|
147
|
-
/** Specifies whether the table's columns have fixed widths. Every element in `columns` must define a `width` if this is `true`.
|
|
148
|
-
*/
|
|
149
|
-
hasFixedColumnWidths: PropTypes.bool,
|
|
150
|
-
/* eslint-disable react/require-default-props */
|
|
151
|
-
/** Specifies the key of the column that is sorted by default. It is only required if `tableSortable` is set to `true`. */
|
|
152
|
-
defaultSortedColumn: isRequiredIf(PropTypes.string, props => props.tableSortable),
|
|
153
|
-
/* eslint-disable react/require-default-props */
|
|
154
|
-
/** Specifies the direction the `defaultSortedColumn` is sorted in by default; it will typically be either 'asc' or 'desc'. It is only required if `tableSortable` is set to `true`. */
|
|
155
|
-
defaultSortDirection: isRequiredIf(PropTypes.string, props => props.tableSortable),
|
|
156
|
-
/** Specifies the screen reader only text that accompanies the sort buttons for sortable columns. It takes the form of an object containing the following keys:
|
|
157
|
-
1. `asc`: (string) specifies the screen reader only text for sort buttons in the ascending state.
|
|
158
|
-
2. `desc`: (string) specifies the screen reader only text for sort buttons in the descending state.
|
|
159
|
-
3. `defaultText`: (string) specifies the screen reader only text for sort buttons that are not engaged.
|
|
160
|
-
It is only required if `tableSortable` is set to `true`.
|
|
161
|
-
Default:
|
|
162
|
-
```javascript
|
|
163
|
-
{
|
|
164
|
-
asc: 'sort ascending',
|
|
165
|
-
desc: 'sort descending',
|
|
166
|
-
defaultText: 'click to sort',
|
|
167
|
-
}
|
|
168
|
-
``` */
|
|
169
|
-
sortButtonsScreenReaderText: isRequiredIf(PropTypes.shape({
|
|
170
|
-
asc: PropTypes.string,
|
|
171
|
-
desc: PropTypes.string,
|
|
172
|
-
defaultText: PropTypes.string
|
|
173
|
-
}), props => props.tableSortable),
|
|
174
|
-
/** Specifies the key for the column that should act as a row header. Rather than rendering as `<td>` elements,
|
|
175
|
-
cells in this column will render as `<th scope="row">` */
|
|
176
|
-
rowHeaderColumnKey: PropTypes.string
|
|
177
|
-
};
|
|
178
|
-
Table.defaultProps = {
|
|
179
|
-
caption: null,
|
|
180
|
-
className: undefined,
|
|
181
|
-
headingClassName: [],
|
|
182
|
-
tableSortable: false,
|
|
183
|
-
hasFixedColumnWidths: false,
|
|
184
|
-
sortButtonsScreenReaderText: {
|
|
185
|
-
asc: 'sort ascending',
|
|
186
|
-
desc: 'sort descending',
|
|
187
|
-
defaultText: 'click to sort'
|
|
188
|
-
}
|
|
189
|
-
};
|
|
190
|
-
export default withDeprecatedProps(Table, 'TableDeprecated', {
|
|
191
|
-
className: {
|
|
192
|
-
deprType: DeprTypes.FORMAT,
|
|
193
|
-
expect: value => typeof value === 'string',
|
|
194
|
-
transform: value => Array.isArray(value) ? value.join(' ') : value,
|
|
195
|
-
message: 'It should be a string.'
|
|
196
|
-
}
|
|
197
|
-
});
|
|
198
|
-
//# sourceMappingURL=index.js.map
|
package/dist/Table/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","classNames","isRequiredIf","PropTypes","Button","withDeprecatedProps","DeprTypes","Table","Component","constructor","props","state","sortedColumn","tableSortable","defaultSortedColumn","sortDirection","defaultSortDirection","onSortClick","bind","columnKey","newDirection","setState","currentlySortedColumn","columns","find","column","key","onSort","getCaption","caption","createElement","getSortButtonScreenReaderText","text","sortButtonsScreenReaderText","defaultText","getSortIcon","sortIconClassName","filter","n","join","className","getTableHeading","heading","columnSortable","variant","onClick","label","hideHeader","getHeadings","headingClassName","hasFixedColumnWidths","map","col","sortable","width","scope","getBody","data","row","i","_ref","rowHeaderColumnKey","render","propTypes","oneOfType","string","element","arrayOf","shape","isRequired","bool","func","asc","desc","defaultProps","undefined","deprType","FORMAT","expect","value","transform","Array","isArray","message"],"sources":["../../src/Table/index.jsx"],"sourcesContent":["/* eslint-disable max-len */\nimport React from 'react';\nimport classNames from 'classnames';\nimport isRequiredIf from 'react-proptype-conditional-require';\nimport PropTypes from 'prop-types';\n\nimport Button from '../Button';\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\nclass Table extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n sortedColumn: props.tableSortable ? this.props.defaultSortedColumn : '',\n sortDirection: props.tableSortable ? this.props.defaultSortDirection : '',\n };\n\n this.onSortClick = this.onSortClick.bind(this);\n }\n\n onSortClick(columnKey) {\n let newDirection = 'desc';\n\n if (this.state.sortedColumn === columnKey) {\n newDirection = (this.state.sortDirection === 'desc' ? 'asc' : 'desc');\n }\n\n this.setState({\n sortedColumn: columnKey,\n sortDirection: newDirection,\n });\n\n const currentlySortedColumn = this.props.columns.find(column => (columnKey === column.key));\n currentlySortedColumn.onSort(newDirection);\n }\n\n getCaption() {\n return this.props.caption && (\n <caption>{this.props.caption}</caption>\n );\n }\n\n getSortButtonScreenReaderText(columnKey) {\n let text;\n\n if (this.state.sortedColumn === columnKey) {\n text = this.props.sortButtonsScreenReaderText[this.state.sortDirection];\n } else {\n text = this.props.sortButtonsScreenReaderText.defaultText;\n }\n\n return text;\n }\n\n getSortIcon(sortDirection) {\n const sortIconClassName = ['fa-sort', sortDirection].filter(n => n).join('-');\n\n return (\n <span\n className={classNames('fa', sortIconClassName)}\n aria-hidden\n />\n );\n }\n\n getTableHeading(column) {\n let heading;\n if (this.props.tableSortable && column.columnSortable) {\n heading = (\n <Button\n variant=\"header\"\n onClick={() => this.onSortClick(column.key)}\n >\n <span>\n {column.label}\n <span className={classNames('sr-only')} data-testid=\"table-heading-sr\">\n {' '}\n {this.getSortButtonScreenReaderText(column.key)}\n </span>\n {' '}\n {this.getSortIcon(column.key === this.state.sortedColumn ? this.state.sortDirection : '')}\n </span>\n </Button>\n );\n } else if (column.hideHeader) {\n heading = (<span className={classNames('sr-only')} data-testid=\"table-heading-sr\">{column.label}</span>);\n } else {\n heading = column.label;\n }\n\n return heading;\n }\n\n getHeadings() {\n return (\n <thead\n className={classNames(\n ...this.props.headingClassName,\n { 'd-inline': this.props.hasFixedColumnWidths },\n )}\n >\n <tr className={classNames({ 'd-flex': this.props.hasFixedColumnWidths })}>\n {this.props.columns.map(col => (\n <th\n className={classNames(\n { sortable: this.props.tableSortable && col.columnSortable },\n this.props.hasFixedColumnWidths ? col.width : null,\n )}\n key={col.key}\n scope=\"col\"\n >\n {this.getTableHeading(col)}\n </th>\n ))}\n </tr>\n </thead>\n );\n }\n\n getBody() {\n return (\n <tbody className={classNames({ 'd-inline': this.props.hasFixedColumnWidths })}>\n {this.props.data.map((row, i) => (\n <tr\n // eslint-disable-next-line react/no-array-index-key\n key={i}\n className={classNames({ 'd-flex': this.props.hasFixedColumnWidths })}\n >\n {this.props.columns.map(({ key, width }) => (\n React.createElement(\n (key === this.props.rowHeaderColumnKey) ? 'th' : 'td',\n {\n key,\n className: classNames(this.props.hasFixedColumnWidths ? width : null),\n scope: (key === this.props.rowHeaderColumnKey) ? 'row' : null,\n },\n row[key],\n )\n ))}\n </tr>\n ))}\n </tbody>\n );\n }\n\n render() {\n return (\n <table className={classNames(\n 'table',\n this.props.className,\n )}\n >\n {this.getCaption()}\n {this.getHeadings()}\n {this.getBody()}\n </table>\n );\n }\n}\n\nTable.propTypes = {\n caption: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.element,\n ]),\n className: PropTypes.string,\n /** specifies the order and contents of the table's columns and provides display strings for each column's heading. It is composed of an ordered array of objects. Each object contains the following keys:\n\n1. `label` (string or element; required) contains the display string for each column's heading.\n2. `key` (string; required) maps that label to its corresponding datum for each row in `data`, to ensure table data are displayed in their appropriate columns.\n3. `columnSortable` (boolean; optional) specifies at the column-level whether the column is sortable. If `columnSortable` is `true`, a sort button will be rendered in the column table heading. It is only required if `tableSortable` is set to `true`.\n4. `onSort` (function; conditionally required) specifies what function is called when a sortable column is clicked. It is only required if the column's `columnSortable` is set to `true`.\n5. `hideHeader` (boolean; optional) specifies at the column-level whether the column label is visible. A column that is sortable cannot have its label be hidden.\n6. `width` (string; conditionally required) only if `hasFixedColumnWidths` is set to `true`, the `<td>` elements' `class` attributes will be set to this value. This allows restricting columns to specific widths. See [Bootstrap's grid documentation](https://getbootstrap.com/docs/4.0/layout/grid/) for `col` class names that can be used.\n\nThe order of objects in `columns` specifies the order of the columns in the table. */\n data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n /** specifies the order and contents of the table's columns and provides display strings for each column's heading. It is composed of an ordered array of objects. Each object contains the following keys:\n\n1. `label` (string or element; required) contains the display string for each column's heading.\n2. `key` (string; required) maps that label to its corresponding datum for each row in `data`, to ensure table data are displayed in their appropriate columns.\n3. `columnSortable` (boolean; optional) specifies at the column-level whether the column is sortable. If `columnSortable` is `true`, a sort button will be rendered in the column table heading. It is only required if `tableSortable` is set to `true`.\n4. `onSort` (function; conditionally required) specifies what function is called when a sortable column is clicked. It is only required if the column's `columnSortable` is set to `true`.\n5. `hideHeader` (boolean; optional) specifies at the column-level whether the column label is visible. A column that is sortable cannot have its label be hidden.\n6. `width` (string; conditionally required) only if `hasFixedColumnWidths` is set to `true`, the `<td>` elements' `class` attributes will be set to this value. This allows restricting columns to specific widths. See [Bootstrap's grid documentation](https://getbootstrap.com/docs/4.0/layout/grid/) for `col` class names that can be used.\n\nThe order of objects in `columns` specifies the order of the columns in the table. */\n columns: PropTypes.arrayOf(PropTypes.shape({\n key: PropTypes.string.isRequired,\n label: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.element,\n ]).isRequired,\n columnSortable: isRequiredIf(PropTypes.bool, props => props.tableSortable),\n onSort: isRequiredIf(PropTypes.func, props => props.columnSortable),\n hideHeader: PropTypes.bool,\n width: isRequiredIf(PropTypes.string, props => props.hasFixedColumnWidths),\n })).isRequired,\n /** Specifies Bootstrap class names to apply to the table heading. Options are detailed in [Bootstrap's docs](https://getbootstrap.com/docs/4.0/content/tables/#table-head-options).\n */\n headingClassName: PropTypes.arrayOf(PropTypes.string),\n /** Specifies whether the table is sortable. This setting supercedes column-level sortability, so if it is `false`, no sortable components will be rendered. */\n tableSortable: PropTypes.bool,\n /** Specifies whether the table's columns have fixed widths. Every element in `columns` must define a `width` if this is `true`.\n */\n hasFixedColumnWidths: PropTypes.bool,\n /* eslint-disable react/require-default-props */\n /** Specifies the key of the column that is sorted by default. It is only required if `tableSortable` is set to `true`. */\n defaultSortedColumn: isRequiredIf(PropTypes.string, props => props.tableSortable),\n /* eslint-disable react/require-default-props */\n /** Specifies the direction the `defaultSortedColumn` is sorted in by default; it will typically be either 'asc' or 'desc'. It is only required if `tableSortable` is set to `true`. */\n defaultSortDirection: isRequiredIf(PropTypes.string, props => props.tableSortable),\n /** Specifies the screen reader only text that accompanies the sort buttons for sortable columns. It takes the form of an object containing the following keys:\n\n1. `asc`: (string) specifies the screen reader only text for sort buttons in the ascending state.\n2. `desc`: (string) specifies the screen reader only text for sort buttons in the descending state.\n3. `defaultText`: (string) specifies the screen reader only text for sort buttons that are not engaged.\n\nIt is only required if `tableSortable` is set to `true`.\n\nDefault:\n\n```javascript\n{\n asc: 'sort ascending',\n desc: 'sort descending',\n defaultText: 'click to sort',\n}\n``` */\n sortButtonsScreenReaderText: isRequiredIf(\n PropTypes.shape({\n asc: PropTypes.string,\n desc: PropTypes.string,\n defaultText: PropTypes.string,\n }),\n props => props.tableSortable,\n ),\n /** Specifies the key for the column that should act as a row header. Rather than rendering as `<td>` elements,\ncells in this column will render as `<th scope=\"row\">` */\n rowHeaderColumnKey: PropTypes.string,\n};\n\nTable.defaultProps = {\n caption: null,\n className: undefined,\n headingClassName: [],\n tableSortable: false,\n hasFixedColumnWidths: false,\n sortButtonsScreenReaderText: {\n asc: 'sort ascending',\n desc: 'sort descending',\n defaultText: 'click to sort',\n },\n};\n\nexport default withDeprecatedProps(Table, 'TableDeprecated', {\n className: {\n deprType: DeprTypes.FORMAT,\n expect: value => typeof value === 'string',\n transform: value => (Array.isArray(value) ? value.join(' ') : value),\n message: 'It should be a string.',\n },\n});\n"],"mappings":"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"}
|
package/dist/Table/index.scss
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
$tab-notification-height: 1rem !default;
|
|
2
|
-
$tab-notification-width: 1rem !default;
|
|
3
|
-
$tab-notification-font-size: $font-size-xs !default;
|
|
4
|
-
$tab-more-link-dropdown-toggle-padding-x: .7rem !default;
|
|
5
|
-
$tab-more-link-dropdown-toggle-padding-y: $spacer !default;
|
|
6
|
-
$tab-more-link-dropdown-toggle-focus-bg: $primary-500 !default;
|
|
7
|
-
$tab-more-link-dropdown-toggle-focus-border-color: $tab-more-link-dropdown-toggle-focus-bg !default;
|
|
8
|
-
$tab-more-link-dropdown-toggle-focus-color: $white !default;
|
|
9
|
-
$tab-more-link-dropdown-toggle-btn-focus-color: $tab-more-link-dropdown-toggle-focus-color !default;
|
|
10
|
-
$tab-more-link-dropdown-toggle-btn-focus-border-color: $tab-more-link-dropdown-toggle-focus-bg !default;
|
|
11
|
-
$tab-more-link-dropdown-toggle-active-color: $tab-more-link-dropdown-toggle-focus-color !default;
|
|
12
|
-
$tab-more-link-dropdown-toggle-hover-color: $tab-more-link-dropdown-toggle-focus-bg !default;
|
|
13
|
-
$tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem !default;
|
|
14
|
-
$tab-inverse-pills-link-dropdown-toggle-padding-y: $spacer !default;
|
|
15
|
-
$tab-inverse-pills-link-dropdown-toggle-focus-bg: $white !default;
|
|
16
|
-
$tab-inverse-pills-link-dropdown-toggle-focus-color: $primary-500 !default;
|
|
17
|
-
$tab-inverse-pills-link-dropdown-toggle-focus-border-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg !default;
|
|
18
|
-
$tab-inverse-pills-link-dropdown-toggle-active-color: $tab-inverse-pills-link-dropdown-toggle-focus-color !default;
|
|
19
|
-
$tab-inverse-pills-link-dropdown-toggle-active-hover-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg !default;
|
|
20
|
-
$tab-inverse-pills-link-dropdown-toggle-active-hover-bg: $primary-300 !default;
|
|
21
|
-
$tab-inverse-pills-link-dropdown-distance: 5px !default;
|
|
22
|
-
$tab-inverse-tabs-link-dropdown-toggle-padding-x: .625rem !default;
|
|
23
|
-
$tab-inverse-tabs-link-dropdown-toggle-padding-y: $spacer !default;
|
|
24
|
-
$tab-inverse-tabs-link-dropdown-toggle-hover-bg: transparent !default;
|
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
// TODO: @jaebradley fix these eslint errors
|
|
2
|
-
/* eslint-disable jsx-a11y/click-events-have-key-events */
|
|
3
|
-
/* eslint-disable jsx-a11y/anchor-is-valid */
|
|
4
|
-
/* eslint-disable max-len */
|
|
5
|
-
import React from 'react';
|
|
6
|
-
import classNames from 'classnames';
|
|
7
|
-
import PropTypes from 'prop-types';
|
|
8
|
-
import newId from '../../utils/newId';
|
|
9
|
-
class Tabs extends React.Component {
|
|
10
|
-
constructor(props) {
|
|
11
|
-
super(props);
|
|
12
|
-
this.toggle = this.toggle.bind(this);
|
|
13
|
-
this.state = {
|
|
14
|
-
activeTab: 0,
|
|
15
|
-
uuid: newId('tabInterface')
|
|
16
|
-
};
|
|
17
|
-
}
|
|
18
|
-
toggle(tab) {
|
|
19
|
-
if (this.state.activeTab !== tab) {
|
|
20
|
-
this.setState({
|
|
21
|
-
activeTab: tab
|
|
22
|
-
});
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
genLabelId(index) {
|
|
26
|
-
return `tab-label-${this.state.uuid}-${index}`;
|
|
27
|
-
}
|
|
28
|
-
genPanelId(index) {
|
|
29
|
-
return `tab-panel-${this.state.uuid}-${index}`;
|
|
30
|
-
}
|
|
31
|
-
buildLabels() {
|
|
32
|
-
return this.props.labels.map((label, i) => {
|
|
33
|
-
const selected = this.state.activeTab === i;
|
|
34
|
-
const labelId = this.genLabelId(i);
|
|
35
|
-
return /*#__PURE__*/React.createElement("li", {
|
|
36
|
-
key: labelId
|
|
37
|
-
}, /*#__PURE__*/React.createElement("button", {
|
|
38
|
-
role: "tab",
|
|
39
|
-
"aria-selected": selected,
|
|
40
|
-
"aria-controls": this.genPanelId(i),
|
|
41
|
-
id: labelId,
|
|
42
|
-
onClick: () => {
|
|
43
|
-
this.toggle(i);
|
|
44
|
-
},
|
|
45
|
-
className: classNames('nav-link nav-item', {
|
|
46
|
-
active: selected
|
|
47
|
-
})
|
|
48
|
-
}, label));
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
buildPanels() {
|
|
52
|
-
return this.props.children.map((panel, i) => {
|
|
53
|
-
const selected = this.state.activeTab === i;
|
|
54
|
-
const panelId = this.genPanelId(i);
|
|
55
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
56
|
-
"aria-hidden": !selected,
|
|
57
|
-
"aria-labelledby": this.genLabelId(i),
|
|
58
|
-
className: classNames('tab-pane', {
|
|
59
|
-
active: selected
|
|
60
|
-
}),
|
|
61
|
-
id: panelId,
|
|
62
|
-
key: panelId,
|
|
63
|
-
role: "tabpanel"
|
|
64
|
-
}, panel);
|
|
65
|
-
});
|
|
66
|
-
}
|
|
67
|
-
render() {
|
|
68
|
-
const labels = this.buildLabels();
|
|
69
|
-
const panels = this.buildPanels();
|
|
70
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
71
|
-
className: "tabs"
|
|
72
|
-
}, /*#__PURE__*/React.createElement("ul", {
|
|
73
|
-
role: "tablist",
|
|
74
|
-
className: classNames(['nav', 'nav-tabs'])
|
|
75
|
-
}, labels), /*#__PURE__*/React.createElement("div", {
|
|
76
|
-
role: "tabpanel",
|
|
77
|
-
className: "tab-content"
|
|
78
|
-
}, panels));
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
// TODO: custom validator that ensures labels and panels are the same length
|
|
82
|
-
Tabs.propTypes = {
|
|
83
|
-
/** specifies the list of elements that will be displayed within each of the tabbed views. It is the content relevant to each label. Children should not be passed as Props, but should instead be nested between the opening and closing `<Tabs> </Tabs>` tags. */
|
|
84
|
-
labels: PropTypes.arrayOf(PropTypes.node).isRequired,
|
|
85
|
-
/** specifies the list of headings that will appear on all of the tabs that will be created.
|
|
86
|
-
*/
|
|
87
|
-
children: PropTypes.arrayOf(PropTypes.element).isRequired
|
|
88
|
-
};
|
|
89
|
-
export default Tabs;
|
|
90
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","classNames","PropTypes","newId","Tabs","Component","constructor","props","toggle","bind","state","activeTab","uuid","tab","setState","genLabelId","index","genPanelId","buildLabels","labels","map","label","i","selected","labelId","createElement","key","role","id","onClick","className","active","buildPanels","children","panel","panelId","render","panels","propTypes","arrayOf","node","isRequired","element"],"sources":["../../../src/Tabs/deprecated/index.jsx"],"sourcesContent":["// TODO: @jaebradley fix these eslint errors\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/anchor-is-valid */\n/* eslint-disable max-len */\nimport React from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\n\nimport newId from '../../utils/newId';\n\nclass Tabs extends React.Component {\n constructor(props) {\n super(props);\n\n this.toggle = this.toggle.bind(this);\n this.state = {\n activeTab: 0,\n uuid: newId('tabInterface'),\n };\n }\n\n toggle(tab) {\n if (this.state.activeTab !== tab) {\n this.setState({\n activeTab: tab,\n });\n }\n }\n\n genLabelId(index) {\n return `tab-label-${this.state.uuid}-${index}`;\n }\n\n genPanelId(index) {\n return `tab-panel-${this.state.uuid}-${index}`;\n }\n\n buildLabels() {\n return this.props.labels.map((label, i) => {\n const selected = this.state.activeTab === i;\n const labelId = this.genLabelId(i);\n\n return (\n <li key={labelId}>\n {/* eslint-disable-next-line react/button-has-type */}\n <button\n role=\"tab\"\n aria-selected={selected}\n aria-controls={this.genPanelId(i)}\n id={labelId}\n onClick={() => { this.toggle(i); }}\n className={classNames('nav-link nav-item', {\n active: selected,\n })}\n >\n {label}\n </button>\n </li>\n );\n });\n }\n\n buildPanels() {\n return this.props.children.map((panel, i) => {\n const selected = this.state.activeTab === i;\n const panelId = this.genPanelId(i);\n\n return (\n <div\n aria-hidden={!selected}\n aria-labelledby={this.genLabelId(i)}\n className={classNames(\n 'tab-pane',\n { active: selected },\n )}\n id={panelId}\n key={panelId}\n role=\"tabpanel\"\n >\n {panel}\n </div>\n );\n });\n }\n\n render() {\n const labels = this.buildLabels();\n const panels = this.buildPanels();\n\n return (\n <div className=\"tabs\">\n <ul\n role=\"tablist\"\n className={classNames([\n 'nav',\n 'nav-tabs',\n ])}\n >\n {labels}\n </ul>\n <div role=\"tabpanel\" className=\"tab-content\">\n {panels}\n </div>\n </div>\n );\n }\n}\n// TODO: custom validator that ensures labels and panels are the same length\nTabs.propTypes = {\n /** specifies the list of elements that will be displayed within each of the tabbed views. It is the content relevant to each label. Children should not be passed as Props, but should instead be nested between the opening and closing `<Tabs> </Tabs>` tags. */\n labels: PropTypes.arrayOf(PropTypes.node).isRequired,\n /** specifies the list of headings that will appear on all of the tabs that will be created.\n */\n children: PropTypes.arrayOf(PropTypes.element).isRequired,\n};\n\nexport default Tabs;\n"],"mappings":"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"}
|
package/dist/TextArea/index.js
DELETED
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
const _excluded = ["className", "inputRef"];
|
|
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); }
|
|
3
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
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; }
|
|
5
|
-
/* eslint-disable max-len */
|
|
6
|
-
import React from 'react';
|
|
7
|
-
import PropTypes from 'prop-types';
|
|
8
|
-
import asInput from '../asInput';
|
|
9
|
-
import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
|
|
10
|
-
function Text(props) {
|
|
11
|
-
const {
|
|
12
|
-
className,
|
|
13
|
-
inputRef
|
|
14
|
-
} = props,
|
|
15
|
-
others = _objectWithoutProperties(props, _excluded);
|
|
16
|
-
return /*#__PURE__*/React.createElement("textarea", _extends({}, others, {
|
|
17
|
-
className: className,
|
|
18
|
-
ref: inputRef
|
|
19
|
-
}));
|
|
20
|
-
}
|
|
21
|
-
Text.propTypes = {
|
|
22
|
-
className: PropTypes.string,
|
|
23
|
-
/** specifies all of the properties that are necessary from the included `asInput` component. Please see details for input requirements within that component.
|
|
24
|
-
*/
|
|
25
|
-
inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
|
|
26
|
-
current: PropTypes.instanceOf(PropTypes.element)
|
|
27
|
-
})])
|
|
28
|
-
};
|
|
29
|
-
Text.defaultProps = {
|
|
30
|
-
className: undefined,
|
|
31
|
-
inputRef: undefined
|
|
32
|
-
};
|
|
33
|
-
const TextArea = asInput(withDeprecatedProps(Text, 'TextArea', {
|
|
34
|
-
className: {
|
|
35
|
-
deprType: DeprTypes.FORMAT,
|
|
36
|
-
expect: value => typeof value === 'string',
|
|
37
|
-
transform: value => Array.isArray(value) ? value.join(' ') : value,
|
|
38
|
-
message: 'It should be a string.'
|
|
39
|
-
}
|
|
40
|
-
}));
|
|
41
|
-
export default TextArea;
|
|
42
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","PropTypes","asInput","withDeprecatedProps","DeprTypes","Text","props","className","inputRef","others","_objectWithoutProperties","_excluded","createElement","_extends","ref","propTypes","string","oneOfType","func","shape","current","instanceOf","element","defaultProps","undefined","TextArea","deprType","FORMAT","expect","value","transform","Array","isArray","join","message"],"sources":["../../src/TextArea/index.jsx"],"sourcesContent":["/* eslint-disable max-len */\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nimport asInput from '../asInput';\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\nfunction Text(props) {\n const {\n className,\n inputRef,\n ...others\n } = props;\n\n return (\n <textarea\n {...others}\n className={className}\n ref={inputRef}\n />\n );\n}\n\nText.propTypes = {\n className: PropTypes.string,\n /** specifies all of the properties that are necessary from the included `asInput` component. Please see details for input requirements within that component.\n */\n inputRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.instanceOf(PropTypes.element) }),\n ]),\n};\n\nText.defaultProps = {\n className: undefined,\n inputRef: undefined,\n};\n\nconst TextArea = asInput(withDeprecatedProps(Text, 'TextArea', {\n className: {\n deprType: DeprTypes.FORMAT,\n expect: value => typeof value === 'string',\n transform: value => (Array.isArray(value) ? value.join(' ') : value),\n message: 'It should be a string.',\n },\n}));\n\nexport default TextArea;\n"],"mappings":";;;;AAAA;AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAElC,OAAOC,OAAO,MAAM,YAAY;AAChC,OAAOC,mBAAmB,IAAIC,SAAS,QAAQ,wBAAwB;AAEvE,SAASC,IAAIA,CAACC,KAAK,EAAE;EACnB,MAAM;MACJC,SAAS;MACTC;IAEF,CAAC,GAAGF,KAAK;IADJG,MAAM,GAAAC,wBAAA,CACPJ,KAAK,EAAAK,SAAA;EAET,oBACEX,KAAA,CAAAY,aAAA,aAAAC,QAAA,KACMJ,MAAM;IACVF,SAAS,EAAEA,SAAU;IACrBO,GAAG,EAAEN;EAAS,EACf,CAAC;AAEN;AAEAH,IAAI,CAACU,SAAS,GAAG;EACfR,SAAS,EAAEN,SAAS,CAACe,MAAM;EAC3B;AACF;EACER,QAAQ,EAAEP,SAAS,CAACgB,SAAS,CAAC,CAC5BhB,SAAS,CAACiB,IAAI,EACdjB,SAAS,CAACkB,KAAK,CAAC;IAAEC,OAAO,EAAEnB,SAAS,CAACoB,UAAU,CAACpB,SAAS,CAACqB,OAAO;EAAE,CAAC,CAAC,CACtE;AACH,CAAC;AAEDjB,IAAI,CAACkB,YAAY,GAAG;EAClBhB,SAAS,EAAEiB,SAAS;EACpBhB,QAAQ,EAAEgB;AACZ,CAAC;AAED,MAAMC,QAAQ,GAAGvB,OAAO,CAACC,mBAAmB,CAACE,IAAI,EAAE,UAAU,EAAE;EAC7DE,SAAS,EAAE;IACTmB,QAAQ,EAAEtB,SAAS,CAACuB,MAAM;IAC1BC,MAAM,EAAEC,KAAK,IAAI,OAAOA,KAAK,KAAK,QAAQ;IAC1CC,SAAS,EAAED,KAAK,IAAKE,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,GAAGA,KAAK,CAACI,IAAI,CAAC,GAAG,CAAC,GAAGJ,KAAM;IACpEK,OAAO,EAAE;EACX;AACF,CAAC,CAAC,CAAC;AAEH,eAAeT,QAAQ"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
// Toasts
|
|
2
|
-
|
|
3
|
-
$toast-max-width: 400px !default;
|
|
4
|
-
$toast-padding-x: .75rem !default;
|
|
5
|
-
$toast-padding-y: .25rem !default;
|
|
6
|
-
$toast-font-size: .875rem !default;
|
|
7
|
-
$toast-color: null !default;
|
|
8
|
-
$toast-background-color: $gray-700 !default;
|
|
9
|
-
$toast-border-width: 1px !default;
|
|
10
|
-
$toast-border-color: rgba(0, 0, 0, .1) !default;
|
|
11
|
-
$toast-border-radius: .25rem !default;
|
|
12
|
-
$toast-box-shadow: 0 1.25rem 2.5rem rgba($black, .15), 0 .5rem 3rem rgba($black, .15) !default;
|
|
13
|
-
|
|
14
|
-
$toast-header-color: $white !default;
|
|
15
|
-
$toast-header-background-color: $gray-700 !default;
|
|
16
|
-
$toast-header-border-color: rgba(0, 0, 0, .5) !default;
|
|
17
|
-
|
|
18
|
-
$toast-container-gutter-lg: 1.25rem !default;
|
|
19
|
-
$toast-container-gutter-sm: .625rem !default;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
// Tooltips
|
|
2
|
-
|
|
3
|
-
$tooltip-font-size: $font-size-sm !default;
|
|
4
|
-
$tooltip-max-width: 200px !default;
|
|
5
|
-
$tooltip-color: $white !default;
|
|
6
|
-
$tooltip-bg: $black !default;
|
|
7
|
-
$tooltip-border-radius: $border-radius !default;
|
|
8
|
-
$tooltip-opacity: 1 !default;
|
|
9
|
-
$tooltip-padding-y: .5rem !default;
|
|
10
|
-
$tooltip-padding-x: .5rem !default;
|
|
11
|
-
$tooltip-margin: 0 !default;
|
|
12
|
-
$tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
|
|
13
|
-
drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
|
|
14
|
-
|
|
15
|
-
$tooltip-arrow-width: .8rem !default;
|
|
16
|
-
$tooltip-arrow-height: .4rem !default;
|
|
17
|
-
$tooltip-arrow-color: $tooltip-bg !default;
|
|
18
|
-
|
|
19
|
-
$tooltip-color-light: $black !default;
|
|
20
|
-
$tooltip-bg-light: $white !default;
|
|
21
|
-
$tooltip-arrow-color-light: $white !default;
|
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import classNames from 'classnames';
|
|
4
|
-
import Input from '../Input';
|
|
5
|
-
import { FormControl } from '../Form';
|
|
6
|
-
const propTypes = {
|
|
7
|
-
/** Id of the form input that the validation is for */
|
|
8
|
-
for: PropTypes.string.isRequired,
|
|
9
|
-
/** Additional classnames for this component */
|
|
10
|
-
className: PropTypes.string,
|
|
11
|
-
/** Determines if invalid styles / message will be shown */
|
|
12
|
-
invalid: PropTypes.bool,
|
|
13
|
-
/** Determines if invalid styles / message will be shown */
|
|
14
|
-
valid: PropTypes.bool,
|
|
15
|
-
/** Message to display on valid input */
|
|
16
|
-
validMessage: PropTypes.node,
|
|
17
|
-
/** Message to display on invalid input */
|
|
18
|
-
invalidMessage: PropTypes.node,
|
|
19
|
-
/** Help text for the form input */
|
|
20
|
-
helpText: PropTypes.node,
|
|
21
|
-
/** Specifies contents of the component. */
|
|
22
|
-
children: PropTypes.node
|
|
23
|
-
};
|
|
24
|
-
const defaultProps = {
|
|
25
|
-
invalid: undefined,
|
|
26
|
-
valid: undefined,
|
|
27
|
-
validMessage: undefined,
|
|
28
|
-
invalidMessage: undefined,
|
|
29
|
-
helpText: undefined,
|
|
30
|
-
children: undefined,
|
|
31
|
-
className: undefined
|
|
32
|
-
};
|
|
33
|
-
function ValidationFormGroup(props) {
|
|
34
|
-
const {
|
|
35
|
-
className,
|
|
36
|
-
invalidMessage,
|
|
37
|
-
invalid,
|
|
38
|
-
valid,
|
|
39
|
-
validMessage,
|
|
40
|
-
helpText,
|
|
41
|
-
for: id,
|
|
42
|
-
children
|
|
43
|
-
} = props;
|
|
44
|
-
const renderChildren = () => React.Children.map(children, child => {
|
|
45
|
-
// Any non-user input element should pass through unmodified
|
|
46
|
-
if (['input', 'textarea', 'select', Input, FormControl].indexOf(child.type) === -1) {
|
|
47
|
-
return child;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
// Add validation class names and describedby values to input element
|
|
51
|
-
return /*#__PURE__*/React.cloneElement(child, {
|
|
52
|
-
className: classNames(child.props.className, {
|
|
53
|
-
'is-invalid': invalid,
|
|
54
|
-
'is-valid': valid
|
|
55
|
-
}),
|
|
56
|
-
// This is a non-standard use of the classNames package, but it's exactly the same use case.
|
|
57
|
-
'aria-describedby': classNames(child.props['aria-describedby'], {
|
|
58
|
-
[`${id}-help-text`]: Boolean(helpText),
|
|
59
|
-
[`${id}-invalid-feedback`]: invalid && invalidMessage,
|
|
60
|
-
[`${id}-valid-feedback`]: valid && validMessage
|
|
61
|
-
})
|
|
62
|
-
});
|
|
63
|
-
});
|
|
64
|
-
const renderHelpText = text => {
|
|
65
|
-
if (!text) {
|
|
66
|
-
return null;
|
|
67
|
-
}
|
|
68
|
-
return /*#__PURE__*/React.createElement("small", {
|
|
69
|
-
id: `${id}-help-text`,
|
|
70
|
-
className: "form-text text-muted"
|
|
71
|
-
}, text);
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
/**
|
|
75
|
-
* The red text conveys semantic emphasis using color and font weight. For WCAG 2.1, the
|
|
76
|
-
* semantics need to be exposed programmatically as well. To do this, we use <strong/>
|
|
77
|
-
* elements and attach the formatting classes to them.
|
|
78
|
-
*/
|
|
79
|
-
const renderInvalidFeedback = message => {
|
|
80
|
-
if (!message) {
|
|
81
|
-
return null;
|
|
82
|
-
}
|
|
83
|
-
return /*#__PURE__*/React.createElement("strong", {
|
|
84
|
-
id: `${id}-invalid-feedback`,
|
|
85
|
-
className: "invalid-feedback"
|
|
86
|
-
}, message);
|
|
87
|
-
};
|
|
88
|
-
const renderValidFeedback = message => {
|
|
89
|
-
if (!message) {
|
|
90
|
-
return null;
|
|
91
|
-
}
|
|
92
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
93
|
-
className: "valid-feedback",
|
|
94
|
-
id: `${id}-valid-feedback`
|
|
95
|
-
}, message);
|
|
96
|
-
};
|
|
97
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
98
|
-
className: classNames('form-group', className),
|
|
99
|
-
"data-testid": "validation-form-group"
|
|
100
|
-
}, renderChildren(), renderHelpText(helpText), renderInvalidFeedback(invalidMessage), renderValidFeedback(validMessage));
|
|
101
|
-
}
|
|
102
|
-
ValidationFormGroup.propTypes = propTypes;
|
|
103
|
-
ValidationFormGroup.defaultProps = defaultProps;
|
|
104
|
-
export default ValidationFormGroup;
|
|
105
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","PropTypes","classNames","Input","FormControl","propTypes","for","string","isRequired","className","invalid","bool","valid","validMessage","node","invalidMessage","helpText","children","defaultProps","undefined","ValidationFormGroup","props","id","renderChildren","Children","map","child","indexOf","type","cloneElement","Boolean","renderHelpText","text","createElement","renderInvalidFeedback","message","renderValidFeedback"],"sources":["../../src/ValidationFormGroup/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Input from '../Input';\nimport { FormControl } from '../Form';\n\nconst propTypes = {\n /** Id of the form input that the validation is for */\n for: PropTypes.string.isRequired,\n /** Additional classnames for this component */\n className: PropTypes.string,\n /** Determines if invalid styles / message will be shown */\n invalid: PropTypes.bool,\n /** Determines if invalid styles / message will be shown */\n valid: PropTypes.bool,\n /** Message to display on valid input */\n validMessage: PropTypes.node,\n /** Message to display on invalid input */\n invalidMessage: PropTypes.node,\n /** Help text for the form input */\n helpText: PropTypes.node,\n /** Specifies contents of the component. */\n children: PropTypes.node,\n};\n\nconst defaultProps = {\n invalid: undefined,\n valid: undefined,\n validMessage: undefined,\n invalidMessage: undefined,\n helpText: undefined,\n children: undefined,\n className: undefined,\n};\n\nfunction ValidationFormGroup(props) {\n const {\n className,\n invalidMessage,\n invalid,\n valid,\n validMessage,\n helpText,\n for: id,\n children,\n } = props;\n\n const renderChildren = () => React.Children.map(children, (child) => {\n // Any non-user input element should pass through unmodified\n if (['input', 'textarea', 'select', Input, FormControl].indexOf(child.type) === -1) { return child; }\n\n // Add validation class names and describedby values to input element\n return React.cloneElement(child, {\n className: classNames(child.props.className, {\n 'is-invalid': invalid,\n 'is-valid': valid,\n }),\n // This is a non-standard use of the classNames package, but it's exactly the same use case.\n 'aria-describedby': classNames(child.props['aria-describedby'], {\n [`${id}-help-text`]: Boolean(helpText),\n [`${id}-invalid-feedback`]: invalid && invalidMessage,\n [`${id}-valid-feedback`]: valid && validMessage,\n }),\n });\n });\n\n const renderHelpText = (text) => {\n if (!text) { return null; }\n return <small id={`${id}-help-text`} className=\"form-text text-muted\">{text}</small>;\n };\n\n /**\n * The red text conveys semantic emphasis using color and font weight. For WCAG 2.1, the\n * semantics need to be exposed programmatically as well. To do this, we use <strong/>\n * elements and attach the formatting classes to them.\n */\n const renderInvalidFeedback = (message) => {\n if (!message) { return null; }\n return (\n <strong\n id={`${id}-invalid-feedback`}\n className=\"invalid-feedback\"\n >\n {message}\n </strong>\n );\n };\n\n const renderValidFeedback = (message) => {\n if (!message) { return null; }\n return (\n <div\n className=\"valid-feedback\"\n id={`${id}-valid-feedback`}\n >\n {message}\n </div>\n );\n };\n\n return (\n <div className={classNames('form-group', className)} data-testid=\"validation-form-group\">\n {renderChildren()}\n {renderHelpText(helpText)}\n {renderInvalidFeedback(invalidMessage)}\n {renderValidFeedback(validMessage)}\n </div>\n );\n}\n\nValidationFormGroup.propTypes = propTypes;\nValidationFormGroup.defaultProps = defaultProps;\n\nexport default ValidationFormGroup;\n"],"mappings":"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"}
|