From 94b49e2ba28ff6168e1d746ea70a17fe6554f756 Mon Sep 17 00:00:00 2001 From: bestguy <7zark7@gmail.com> Date: Tue, 14 Sep 2021 13:03:12 -0700 Subject: [PATCH] chore(docs): Convert docs to storybook (#2291) * Convert docs to storybook * Correct show source in stories * Update home page * Update theme * Correct missing Button labels * Add story headers Include links to Bootstrap docs * Add Home page docs * Disable source open * Correct missing text * Add ArgTables * Correct component props * Reorder Home * Add controls to stories * Improve Layout story styles * Correct Breadcrumb props * Add color stories * Update CarouselUncontrolled.js * Remove unused control * Add remaining controls * Split intro docs * Update Upgrading.stories.mdx * Correct Layout story styles * Add Input story * Correct close story * Reformat fade story * Add migration link * Update migration Add InputGroupAddon * Update Upgrading.stories.mdx --- .gitignore | 1 + .storybook/main.cjs | 10 + .storybook/manager.cjs | 13 + .storybook/preview-head.html | 13 + .storybook/preview.cjs | 15 + .storybook/webpack.config.cjs | 11 + docs/.eslintrc.js | 7 - docs/lib/Components/AccordionPage.js | 182 - docs/lib/Components/AlertsPage.js | 117 - docs/lib/Components/BadgePage.js | 77 - docs/lib/Components/BreadcrumbsPage.js | 62 - docs/lib/Components/ButtonDropdownPage.js | 266 - docs/lib/Components/ButtonGroupPage.js | 187 - docs/lib/Components/ButtonsPage.js | 184 - docs/lib/Components/CardPage.js | 239 - docs/lib/Components/CarouselPage.js | 158 - docs/lib/Components/CollapsePage.js | 94 - docs/lib/Components/DropdownsPage.js | 464 -- docs/lib/Components/FadePage.js | 76 - docs/lib/Components/FormPage.js | 213 - docs/lib/Components/InputGroupPage.js | 126 - docs/lib/Components/LayoutPage.js | 105 - docs/lib/Components/ListGroupPage.js | 139 - docs/lib/Components/ListPage.js | 62 - docs/lib/Components/MediaPage.js | 81 - docs/lib/Components/ModalsPage.js | 280 -- docs/lib/Components/NavbarPage.js | 85 - docs/lib/Components/NavsPage.js | 98 - docs/lib/Components/OffcanvasPage.js | 80 - docs/lib/Components/PaginationPage.js | 98 - docs/lib/Components/PlaceholderPage.js | 97 - docs/lib/Components/PopoversPage.js | 142 - docs/lib/Components/ProgressPage.js | 150 - docs/lib/Components/SpinnersPage.js | 70 - docs/lib/Components/TablesPage.js | 127 - docs/lib/Components/TabsPage.js | 24 - docs/lib/Components/ToastsPage.js | 73 - docs/lib/Components/TooltipsPage.js | 156 - docs/lib/Components/index.js | 135 - docs/lib/Home/index.js | 262 - docs/lib/NotFound/index.js | 31 - docs/lib/PremiumThemes/index.js | 90 - docs/lib/PremiumThemes/premium.js | 150 - docs/lib/UI/Banner.js | 20 - docs/lib/UI/Carbon.js | 20 - docs/lib/UI/Content.js | 42 - docs/lib/UI/DocSearch.js | 17 - docs/lib/UI/Footer.js | 22 - docs/lib/UI/Layout.js | 25 - docs/lib/UI/Nav.js | 50 - docs/lib/UI/PageTitle.js | 21 - docs/lib/UI/SectionTitle.js | 17 - docs/lib/UI/index.js | 9 - docs/lib/Utilities/ClearfixPage.js | 32 - docs/lib/Utilities/ColorsPage.js | 28 - docs/lib/Utilities/index.js | 21 - docs/lib/app.js | 94 - docs/lib/examples/Badge.js | 17 - docs/lib/examples/ButtonCloseIcon.js | 38 - docs/lib/examples/ButtonToggle.js | 19 - docs/lib/examples/Carousel.js | 76 - docs/lib/examples/CarouselUncontrolled.js | 30 - docs/lib/examples/ContainerResponsive.js | 18 - docs/lib/examples/Dropdown.js | 28 - docs/lib/examples/Fade.js | 19 - docs/lib/examples/InputGroupButton.js | 59 - docs/lib/examples/Layout.js | 44 - docs/lib/examples/LayoutRowCols.js | 41 - docs/lib/examples/Navbar.js | 60 - docs/lib/examples/Navs.js | 31 - docs/lib/examples/Offcanvas.js | 60 - docs/lib/examples/Placeholder.js | 22 - docs/lib/examples/PlaceholderAnimation.js | 17 - docs/lib/examples/PlaceholderColor.js | 20 - docs/lib/examples/PlaceholderSizing.js | 15 - docs/lib/examples/PlaceholderWidth.js | 13 - docs/lib/examples/Progress.js | 29 - docs/lib/examples/Spinner.js | 19 - docs/lib/examples/Tooltip.js | 20 - docs/lib/examples/import-basic.js | 8 - docs/lib/routes.js | 90 - docs/static/256x186.svg | 1 - docs/static/318x180.svg | 1 - docs/static/318x270.svg | 1 - docs/static/docs.css | 451 -- docs/static/favicon.ico | Bin 41566 -> 0 bytes docs/static/logo.png | Bin 57318 -> 0 bytes docs/static/prism.js | 9 - ...h-react-admin-dashboard-reactstrap-pro.jpg | Bin 108140 -> 0 bytes docs/static/transparent.svg | 11 - package.json | 10 +- src/Accordion.js | 2 +- src/List.js | 1 + src/ListInlineItem.js | 1 + static/logo-white.svg | 78 + static/logo.svg | 78 + stories/Accordion.stories.js | 22 + stories/Alert.stories.js | 23 + stories/Badge.stories.js | 23 + stories/Breadcrumb.stories.js | 20 + stories/Button.stories.js | 28 + stories/Card.stories.js | 29 + stories/Carousel.stories.js | 21 + stories/Collapse.stories.js | 22 + stories/Dropdown.stories.js | 24 + stories/Fade.stories.js | 11 + stories/Forms.stories.js | 29 + stories/Index.stories.mdx | 96 + stories/InputGroup.stories.js | 23 + stories/Layout.stories.js | 21 + stories/List.stories.js | 17 + stories/ListGroup.stories.js | 27 + stories/Modal.stories.js | 29 + stories/Nav.stories.js | 23 + stories/Navbar.stories.js | 20 + stories/Offcanvas.stories.js | 19 + stories/Pagination.stories.js | 22 + stories/Popover.stories.js | 19 + stories/Progress.stories.js | 21 + stories/Spinner.stories.js | 20 + stories/Table.stories.js | 22 + stories/Toast.stories.js | 21 + stories/Tooltip.stories.js | 19 + stories/Upgrading.stories.mdx | 33 + {docs/lib => stories}/examples/Accordion.js | 0 .../examples/AccordionFlush.js | 0 stories/examples/AccordionProps.js | 9 + stories/examples/Alert.js | 26 + .../examples/AlertColors.js | 3 + .../lib => stories}/examples/AlertContent.js | 0 .../lib => stories}/examples/AlertDismiss.js | 0 .../lib => stories}/examples/AlertFadeless.js | 0 {docs/lib => stories}/examples/AlertLink.js | 0 stories/examples/AlertProps.js | 9 + .../examples/AlertUncontrolledDismiss.js | 4 +- stories/examples/Badge.js | 26 + {docs/lib => stories}/examples/BadgeButton.js | 0 {docs/lib => stories}/examples/BadgeLinks.js | 0 {docs/lib => stories}/examples/BadgePills.js | 0 stories/examples/BadgeProps.js | 9 + .../examples/BadgeVariations.js | 0 {docs/lib => stories}/examples/Breadcrumb.js | 0 .../examples/BreadcrumbNoList.js | 0 stories/examples/BreadcrumbProps.js | 9 + stories/examples/Button.js | 34 + stories/examples/ButtonCloseIcon.js | 10 + .../examples/ButtonColors.js | 0 .../examples/ButtonDropdown.js | 0 .../examples/ButtonDropdownMulti.js | 2 +- .../examples/ButtonDropdownMultiSplit.js | 2 +- .../examples/ButtonDropdownUncontrolled.js | 2 +- {docs/lib => stories}/examples/ButtonGroup.js | 0 .../lib => stories}/examples/ButtonOutline.js | 0 stories/examples/ButtonProps.js | 9 + .../examples/ButtonStateful.js | 0 .../lib => stories}/examples/ButtonToolbar.js | 0 {docs/lib => stories}/examples/Card.js | 22 +- .../lib => stories}/examples/CardAlignment.js | 0 .../examples/CardBackgrounds.js | 0 {docs/lib => stories}/examples/CardColumns.js | 6 +- .../examples/CardContentTypes.js | 2 +- {docs/lib => stories}/examples/CardDecks.js | 6 +- {docs/lib => stories}/examples/CardGroups.js | 6 +- .../examples/CardHeaderFooter.js | 0 .../lib => stories}/examples/CardImageCaps.js | 4 +- .../examples/CardImageOverlay.js | 2 +- {docs/lib => stories}/examples/CardOutline.js | 0 stories/examples/CardProps.js | 9 + {docs/lib => stories}/examples/CardSizing.js | 0 stories/examples/Carousel.js | 85 + .../examples/CarouselCustomTag.js | 0 stories/examples/CarouselProps.js | 15 + stories/examples/CarouselUncontrolled.js | 27 + {docs/lib => stories}/examples/Clearfix.js | 2 +- {docs/lib => stories}/examples/Collapse.js | 16 +- .../examples/CollapseEvents.js | 0 .../examples/CollapseHorizontal.js | 2 +- stories/examples/CollapseProps.js | 9 + .../examples/CollapseUncontrolled.js | 2 +- {docs/lib => stories}/examples/Color.js | 2 +- stories/examples/ContainerResponsive.js | 17 + .../examples/CustomDropdown.js | 2 +- stories/examples/Dropdown.js | 43 + .../examples/DropdownContainer.js | 0 stories/examples/DropdownProps.js | 9 + .../examples/DropdownSetActiveFromChild.js | 2 +- .../examples/DropdownSizing.js | 0 .../examples/DropdownUncontrolled.js | 0 stories/examples/Fade.js | 19 + stories/examples/FadeProps.js | 9 + {docs/lib => stories}/examples/Form.js | 12 +- .../lib => stories}/examples/FormFeedback.js | 0 {docs/lib => stories}/examples/FormGrid.js | 16 +- .../examples/FormGridFormRow.js | 0 {docs/lib => stories}/examples/FormInline.js | 8 +- stories/examples/FormProps.js | 9 + .../examples/InlineCheckboxes.js | 11 +- stories/examples/Input.js | 59 + .../examples/InputGridSizing.js | 0 .../examples/InputGroupAddon.js | 0 stories/examples/InputGroupButton.js | 63 + .../examples/InputGroupButtonShorthand.js | 0 .../examples/InputGroupOverview.js | 6 - stories/examples/InputGroupProps.js | 9 + .../examples/InputGroupSizing.js | 0 {docs/lib => stories}/examples/InputSizing.js | 0 {docs/lib => stories}/examples/InputType.js | 15 +- {docs/lib => stories}/examples/LabelHidden.js | 0 stories/examples/Layout.js | 44 + stories/examples/LayoutProps.js | 9 + stories/examples/LayoutRowCols.js | 46 + {docs/lib => stories}/examples/ListGroup.js | 11 +- .../examples/ListGroupAnchorsAndButtons.js | 0 .../examples/ListGroupBadge.js | 0 .../examples/ListGroupContextualClasses.js | 0 .../examples/ListGroupCustomContent.js | 0 .../examples/ListGroupDisabledItems.js | 0 .../examples/ListGroupFlush.js | 0 .../examples/ListGroupHorizontal.js | 0 .../examples/ListGroupNumbered.js | 0 stories/examples/ListGroupProps.js | 9 + {docs/lib => stories}/examples/ListInline.js | 0 stories/examples/ListProps.js | 9 + .../lib => stories}/examples/ListUnstyled.js | 0 {docs/lib => stories}/examples/Media.js | 2 +- .../examples/MediaAlignment.js | 2 +- {docs/lib => stories}/examples/MediaList.js | 2 +- {docs/lib => stories}/examples/MediaNested.js | 2 +- {docs/lib => stories}/examples/Modal.js | 33 +- .../lib => stories}/examples/ModalBackdrop.js | 2 +- .../examples/ModalCustomCloseButton.js | 2 +- .../examples/ModalCustomCloseIcon.js | 2 +- .../examples/ModalCustomTimeout.js | 2 +- .../examples/ModalDestructuring.js | 2 +- .../lib => stories}/examples/ModalExternal.js | 2 +- .../lib => stories}/examples/ModalFadeless.js | 2 +- .../examples/ModalFocusAfterClose.js | 0 .../examples/ModalFullscreen.js | 2 +- {docs/lib => stories}/examples/ModalNested.js | 2 +- stories/examples/ModalProps.js | 9 + {docs/lib => stories}/examples/NavPills.js | 0 stories/examples/NavProps.js | 9 + {docs/lib => stories}/examples/NavTabs.js | 0 {docs/lib => stories}/examples/NavVertical.js | 0 stories/examples/Navbar.js | 88 + stories/examples/NavbarProps.js | 14 + .../lib => stories}/examples/NavbarToggler.js | 4 +- stories/examples/Navs.js | 30 + stories/examples/Offcanvas.js | 43 + stories/examples/OffcanvasProps.js | 9 + {docs/lib => stories}/examples/Pagination.js | 13 +- stories/examples/PaginationProps.js | 9 + .../examples/PaginationSizingLarge.js | 0 .../examples/PaginationSizingSmall.js | 0 .../examples/PaginationState.js | 0 {docs/lib => stories}/examples/Popover.js | 15 +- .../lib => stories}/examples/PopoverFocus.js | 0 .../lib => stories}/examples/PopoverMulti.js | 2 +- stories/examples/PopoverProps.js | 9 + .../examples/PopoverUncontrolled.js | 0 .../lib => stories}/examples/PopoverUpdate.js | 14 +- stories/examples/Progress.js | 31 + .../examples/ProgressAnimated.js | 0 .../lib => stories}/examples/ProgressColor.js | 0 .../examples/ProgressLabels.js | 0 {docs/lib => stories}/examples/ProgressMax.js | 0 .../lib => stories}/examples/ProgressMulti.js | 0 stories/examples/ProgressProps.js | 9 + .../examples/ProgressStriped.js | 0 stories/examples/Props.js | 20 + stories/examples/Spinner.js | 29 + .../lib => stories}/examples/SpinnerGrower.js | 0 stories/examples/SpinnerProps.js | 9 + {docs/lib => stories}/examples/Table.js | 20 +- .../lib => stories}/examples/TableBordered.js | 0 .../examples/TableBorderless.js | 0 {docs/lib => stories}/examples/TableDark.js | 0 {docs/lib => stories}/examples/TableHover.js | 0 stories/examples/TableProps.js | 9 + .../examples/TableResponsive.js | 0 {docs/lib => stories}/examples/TableSizing.js | 0 .../lib => stories}/examples/TableStriped.js | 0 {docs/lib => stories}/examples/Tabs.js | 0 stories/examples/TabsProps copy.js | 9 + {docs/lib => stories}/examples/Toast.js | 0 .../lib => stories}/examples/ToastDismiss.js | 2 +- .../examples/ToastHeaderIcon.js | 0 stories/examples/ToastProps.js | 9 + stories/examples/Tooltip.js | 34 + .../examples/TooltipAutoHide.js | 0 .../lib => stories}/examples/TooltipMulti.js | 2 +- stories/examples/TooltipProps.js | 9 + .../examples/TooltipUncontrolled.js | 2 +- .../lib => stories}/examples/TooltipUpdate.js | 16 +- .../examples/UncontrolledAccordion.js | 0 .../examples/UncontrolledAccordionStayOpen.js | 0 stories/examples/options.js | 4 + yarn.lock | 4423 ++++++++++++++++- 298 files changed, 6407 insertions(+), 6974 deletions(-) create mode 100644 .storybook/main.cjs create mode 100644 .storybook/manager.cjs create mode 100644 .storybook/preview-head.html create mode 100644 .storybook/preview.cjs create mode 100644 .storybook/webpack.config.cjs delete mode 100644 docs/.eslintrc.js delete mode 100644 docs/lib/Components/AccordionPage.js delete mode 100644 docs/lib/Components/AlertsPage.js delete mode 100644 docs/lib/Components/BadgePage.js delete mode 100644 docs/lib/Components/BreadcrumbsPage.js delete mode 100644 docs/lib/Components/ButtonDropdownPage.js delete mode 100644 docs/lib/Components/ButtonGroupPage.js delete mode 100644 docs/lib/Components/ButtonsPage.js delete mode 100644 docs/lib/Components/CardPage.js delete mode 100644 docs/lib/Components/CarouselPage.js delete mode 100644 docs/lib/Components/CollapsePage.js delete mode 100644 docs/lib/Components/DropdownsPage.js delete mode 100644 docs/lib/Components/FadePage.js delete mode 100644 docs/lib/Components/FormPage.js delete mode 100644 docs/lib/Components/InputGroupPage.js delete mode 100644 docs/lib/Components/LayoutPage.js delete mode 100644 docs/lib/Components/ListGroupPage.js delete mode 100644 docs/lib/Components/ListPage.js delete mode 100644 docs/lib/Components/MediaPage.js delete mode 100644 docs/lib/Components/ModalsPage.js delete mode 100644 docs/lib/Components/NavbarPage.js delete mode 100644 docs/lib/Components/NavsPage.js delete mode 100644 docs/lib/Components/OffcanvasPage.js delete mode 100644 docs/lib/Components/PaginationPage.js delete mode 100644 docs/lib/Components/PlaceholderPage.js delete mode 100644 docs/lib/Components/PopoversPage.js delete mode 100644 docs/lib/Components/ProgressPage.js delete mode 100644 docs/lib/Components/SpinnersPage.js delete mode 100644 docs/lib/Components/TablesPage.js delete mode 100644 docs/lib/Components/TabsPage.js delete mode 100644 docs/lib/Components/ToastsPage.js delete mode 100644 docs/lib/Components/TooltipsPage.js delete mode 100644 docs/lib/Components/index.js delete mode 100644 docs/lib/Home/index.js delete mode 100644 docs/lib/NotFound/index.js delete mode 100644 docs/lib/PremiumThemes/index.js delete mode 100644 docs/lib/PremiumThemes/premium.js delete mode 100644 docs/lib/UI/Banner.js delete mode 100644 docs/lib/UI/Carbon.js delete mode 100644 docs/lib/UI/Content.js delete mode 100644 docs/lib/UI/DocSearch.js delete mode 100644 docs/lib/UI/Footer.js delete mode 100644 docs/lib/UI/Layout.js delete mode 100644 docs/lib/UI/Nav.js delete mode 100644 docs/lib/UI/PageTitle.js delete mode 100644 docs/lib/UI/SectionTitle.js delete mode 100644 docs/lib/UI/index.js delete mode 100644 docs/lib/Utilities/ClearfixPage.js delete mode 100644 docs/lib/Utilities/ColorsPage.js delete mode 100644 docs/lib/Utilities/index.js delete mode 100644 docs/lib/app.js delete mode 100644 docs/lib/examples/Badge.js delete mode 100644 docs/lib/examples/ButtonCloseIcon.js delete mode 100644 docs/lib/examples/ButtonToggle.js delete mode 100644 docs/lib/examples/Carousel.js delete mode 100644 docs/lib/examples/CarouselUncontrolled.js delete mode 100644 docs/lib/examples/ContainerResponsive.js delete mode 100644 docs/lib/examples/Dropdown.js delete mode 100644 docs/lib/examples/Fade.js delete mode 100644 docs/lib/examples/InputGroupButton.js delete mode 100644 docs/lib/examples/Layout.js delete mode 100644 docs/lib/examples/LayoutRowCols.js delete mode 100644 docs/lib/examples/Navbar.js delete mode 100644 docs/lib/examples/Navs.js delete mode 100644 docs/lib/examples/Offcanvas.js delete mode 100644 docs/lib/examples/Placeholder.js delete mode 100644 docs/lib/examples/PlaceholderAnimation.js delete mode 100644 docs/lib/examples/PlaceholderColor.js delete mode 100644 docs/lib/examples/PlaceholderSizing.js delete mode 100644 docs/lib/examples/PlaceholderWidth.js delete mode 100644 docs/lib/examples/Progress.js delete mode 100644 docs/lib/examples/Spinner.js delete mode 100644 docs/lib/examples/Tooltip.js delete mode 100644 docs/lib/examples/import-basic.js delete mode 100644 docs/lib/routes.js delete mode 100644 docs/static/256x186.svg delete mode 100644 docs/static/318x180.svg delete mode 100644 docs/static/318x270.svg delete mode 100644 docs/static/docs.css delete mode 100644 docs/static/favicon.ico delete mode 100644 docs/static/logo.png delete mode 100644 docs/static/prism.js delete mode 100644 docs/static/themes/bamburgh-react-admin-dashboard-reactstrap-pro.jpg delete mode 100644 docs/static/transparent.svg create mode 100644 static/logo-white.svg create mode 100644 static/logo.svg create mode 100644 stories/Accordion.stories.js create mode 100644 stories/Alert.stories.js create mode 100644 stories/Badge.stories.js create mode 100644 stories/Breadcrumb.stories.js create mode 100644 stories/Button.stories.js create mode 100644 stories/Card.stories.js create mode 100644 stories/Carousel.stories.js create mode 100644 stories/Collapse.stories.js create mode 100644 stories/Dropdown.stories.js create mode 100644 stories/Fade.stories.js create mode 100644 stories/Forms.stories.js create mode 100644 stories/Index.stories.mdx create mode 100644 stories/InputGroup.stories.js create mode 100644 stories/Layout.stories.js create mode 100644 stories/List.stories.js create mode 100644 stories/ListGroup.stories.js create mode 100644 stories/Modal.stories.js create mode 100644 stories/Nav.stories.js create mode 100644 stories/Navbar.stories.js create mode 100644 stories/Offcanvas.stories.js create mode 100644 stories/Pagination.stories.js create mode 100644 stories/Popover.stories.js create mode 100644 stories/Progress.stories.js create mode 100644 stories/Spinner.stories.js create mode 100644 stories/Table.stories.js create mode 100644 stories/Toast.stories.js create mode 100644 stories/Tooltip.stories.js create mode 100644 stories/Upgrading.stories.mdx rename {docs/lib => stories}/examples/Accordion.js (100%) rename {docs/lib => stories}/examples/AccordionFlush.js (100%) create mode 100644 stories/examples/AccordionProps.js create mode 100644 stories/examples/Alert.js rename docs/lib/examples/Alert.js => stories/examples/AlertColors.js (90%) rename {docs/lib => stories}/examples/AlertContent.js (100%) rename {docs/lib => stories}/examples/AlertDismiss.js (100%) rename {docs/lib => stories}/examples/AlertFadeless.js (100%) rename {docs/lib => stories}/examples/AlertLink.js (100%) create mode 100644 stories/examples/AlertProps.js rename {docs/lib => stories}/examples/AlertUncontrolledDismiss.js (78%) create mode 100644 stories/examples/Badge.js rename {docs/lib => stories}/examples/BadgeButton.js (100%) rename {docs/lib => stories}/examples/BadgeLinks.js (100%) rename {docs/lib => stories}/examples/BadgePills.js (100%) create mode 100644 stories/examples/BadgeProps.js rename {docs/lib => stories}/examples/BadgeVariations.js (100%) rename {docs/lib => stories}/examples/Breadcrumb.js (100%) rename {docs/lib => stories}/examples/BreadcrumbNoList.js (100%) create mode 100644 stories/examples/BreadcrumbProps.js create mode 100644 stories/examples/Button.js create mode 100644 stories/examples/ButtonCloseIcon.js rename docs/lib/examples/Button.js => stories/examples/ButtonColors.js (100%) rename {docs/lib => stories}/examples/ButtonDropdown.js (100%) rename {docs/lib => stories}/examples/ButtonDropdownMulti.js (97%) rename {docs/lib => stories}/examples/ButtonDropdownMultiSplit.js (91%) rename {docs/lib => stories}/examples/ButtonDropdownUncontrolled.js (91%) rename {docs/lib => stories}/examples/ButtonGroup.js (100%) rename {docs/lib => stories}/examples/ButtonOutline.js (100%) create mode 100644 stories/examples/ButtonProps.js rename {docs/lib => stories}/examples/ButtonStateful.js (100%) rename {docs/lib => stories}/examples/ButtonToolbar.js (100%) rename {docs/lib => stories}/examples/Card.js (62%) rename {docs/lib => stories}/examples/CardAlignment.js (100%) rename {docs/lib => stories}/examples/CardBackgrounds.js (100%) rename {docs/lib => stories}/examples/CardColumns.js (87%) rename {docs/lib => stories}/examples/CardContentTypes.js (88%) rename {docs/lib => stories}/examples/CardDecks.js (83%) rename {docs/lib => stories}/examples/CardGroups.js (83%) rename {docs/lib => stories}/examples/CardHeaderFooter.js (100%) rename {docs/lib => stories}/examples/CardImageCaps.js (83%) rename {docs/lib => stories}/examples/CardImageOverlay.js (87%) rename {docs/lib => stories}/examples/CardOutline.js (100%) create mode 100644 stories/examples/CardProps.js rename {docs/lib => stories}/examples/CardSizing.js (100%) create mode 100644 stories/examples/Carousel.js rename {docs/lib => stories}/examples/CarouselCustomTag.js (100%) create mode 100644 stories/examples/CarouselProps.js create mode 100644 stories/examples/CarouselUncontrolled.js rename {docs/lib => stories}/examples/Clearfix.js (92%) rename {docs/lib => stories}/examples/Collapse.js (55%) rename {docs/lib => stories}/examples/CollapseEvents.js (100%) rename {docs/lib => stories}/examples/CollapseHorizontal.js (96%) create mode 100644 stories/examples/CollapseProps.js rename {docs/lib => stories}/examples/CollapseUncontrolled.js (95%) rename {docs/lib => stories}/examples/Color.js (96%) create mode 100644 stories/examples/ContainerResponsive.js rename {docs/lib => stories}/examples/CustomDropdown.js (96%) create mode 100644 stories/examples/Dropdown.js rename {docs/lib => stories}/examples/DropdownContainer.js (100%) create mode 100644 stories/examples/DropdownProps.js rename {docs/lib => stories}/examples/DropdownSetActiveFromChild.js (94%) rename {docs/lib => stories}/examples/DropdownSizing.js (100%) rename {docs/lib => stories}/examples/DropdownUncontrolled.js (100%) create mode 100644 stories/examples/Fade.js create mode 100644 stories/examples/FadeProps.js rename {docs/lib => stories}/examples/Form.js (87%) rename {docs/lib => stories}/examples/FormFeedback.js (100%) rename {docs/lib => stories}/examples/FormGrid.js (87%) rename {docs/lib => stories}/examples/FormGridFormRow.js (100%) rename {docs/lib => stories}/examples/FormInline.js (67%) create mode 100644 stories/examples/FormProps.js rename {docs/lib => stories}/examples/InlineCheckboxes.js (51%) create mode 100644 stories/examples/Input.js rename {docs/lib => stories}/examples/InputGridSizing.js (100%) rename {docs/lib => stories}/examples/InputGroupAddon.js (100%) create mode 100644 stories/examples/InputGroupButton.js rename {docs/lib => stories}/examples/InputGroupButtonShorthand.js (100%) rename {docs/lib => stories}/examples/InputGroupOverview.js (81%) create mode 100644 stories/examples/InputGroupProps.js rename {docs/lib => stories}/examples/InputGroupSizing.js (100%) rename {docs/lib => stories}/examples/InputSizing.js (100%) rename {docs/lib => stories}/examples/InputType.js (89%) rename {docs/lib => stories}/examples/LabelHidden.js (100%) create mode 100644 stories/examples/Layout.js create mode 100644 stories/examples/LayoutProps.js create mode 100644 stories/examples/LayoutRowCols.js rename {docs/lib => stories}/examples/ListGroup.js (76%) rename {docs/lib => stories}/examples/ListGroupAnchorsAndButtons.js (100%) rename {docs/lib => stories}/examples/ListGroupBadge.js (100%) rename {docs/lib => stories}/examples/ListGroupContextualClasses.js (100%) rename {docs/lib => stories}/examples/ListGroupCustomContent.js (100%) rename {docs/lib => stories}/examples/ListGroupDisabledItems.js (100%) rename {docs/lib => stories}/examples/ListGroupFlush.js (100%) rename {docs/lib => stories}/examples/ListGroupHorizontal.js (100%) rename {docs/lib => stories}/examples/ListGroupNumbered.js (100%) create mode 100644 stories/examples/ListGroupProps.js rename {docs/lib => stories}/examples/ListInline.js (100%) create mode 100644 stories/examples/ListProps.js rename {docs/lib => stories}/examples/ListUnstyled.js (100%) rename {docs/lib => stories}/examples/Media.js (95%) rename {docs/lib => stories}/examples/MediaAlignment.js (98%) rename {docs/lib => stories}/examples/MediaList.js (99%) rename {docs/lib => stories}/examples/MediaNested.js (97%) rename {docs/lib => stories}/examples/Modal.js (67%) rename {docs/lib => stories}/examples/ModalBackdrop.js (97%) rename {docs/lib => stories}/examples/ModalCustomCloseButton.js (95%) rename {docs/lib => stories}/examples/ModalCustomCloseIcon.js (94%) rename {docs/lib => stories}/examples/ModalCustomTimeout.js (95%) rename {docs/lib => stories}/examples/ModalDestructuring.js (95%) rename {docs/lib => stories}/examples/ModalExternal.js (95%) rename {docs/lib => stories}/examples/ModalFadeless.js (94%) rename {docs/lib => stories}/examples/ModalFocusAfterClose.js (100%) rename {docs/lib => stories}/examples/ModalFullscreen.js (94%) rename {docs/lib => stories}/examples/ModalNested.js (96%) create mode 100644 stories/examples/ModalProps.js rename {docs/lib => stories}/examples/NavPills.js (100%) create mode 100644 stories/examples/NavProps.js rename {docs/lib => stories}/examples/NavTabs.js (100%) rename {docs/lib => stories}/examples/NavVertical.js (100%) create mode 100644 stories/examples/Navbar.js create mode 100644 stories/examples/NavbarProps.js rename {docs/lib => stories}/examples/NavbarToggler.js (85%) create mode 100644 stories/examples/Navs.js create mode 100644 stories/examples/Offcanvas.js create mode 100644 stories/examples/OffcanvasProps.js rename {docs/lib => stories}/examples/Pagination.js (85%) create mode 100644 stories/examples/PaginationProps.js rename {docs/lib => stories}/examples/PaginationSizingLarge.js (100%) rename {docs/lib => stories}/examples/PaginationSizingSmall.js (100%) rename {docs/lib => stories}/examples/PaginationState.js (100%) rename {docs/lib => stories}/examples/Popover.js (70%) rename {docs/lib => stories}/examples/PopoverFocus.js (100%) rename {docs/lib => stories}/examples/PopoverMulti.js (98%) create mode 100644 stories/examples/PopoverProps.js rename {docs/lib => stories}/examples/PopoverUncontrolled.js (100%) rename {docs/lib => stories}/examples/PopoverUpdate.js (68%) create mode 100644 stories/examples/Progress.js rename {docs/lib => stories}/examples/ProgressAnimated.js (100%) rename {docs/lib => stories}/examples/ProgressColor.js (100%) rename {docs/lib => stories}/examples/ProgressLabels.js (100%) rename {docs/lib => stories}/examples/ProgressMax.js (100%) rename {docs/lib => stories}/examples/ProgressMulti.js (100%) create mode 100644 stories/examples/ProgressProps.js rename {docs/lib => stories}/examples/ProgressStriped.js (100%) create mode 100644 stories/examples/Props.js create mode 100644 stories/examples/Spinner.js rename {docs/lib => stories}/examples/SpinnerGrower.js (100%) create mode 100644 stories/examples/SpinnerProps.js rename {docs/lib => stories}/examples/Table.js (72%) rename {docs/lib => stories}/examples/TableBordered.js (100%) rename {docs/lib => stories}/examples/TableBorderless.js (100%) rename {docs/lib => stories}/examples/TableDark.js (100%) rename {docs/lib => stories}/examples/TableHover.js (100%) create mode 100644 stories/examples/TableProps.js rename {docs/lib => stories}/examples/TableResponsive.js (100%) rename {docs/lib => stories}/examples/TableSizing.js (100%) rename {docs/lib => stories}/examples/TableStriped.js (100%) rename {docs/lib => stories}/examples/Tabs.js (100%) create mode 100644 stories/examples/TabsProps copy.js rename {docs/lib => stories}/examples/Toast.js (100%) rename {docs/lib => stories}/examples/ToastDismiss.js (93%) rename {docs/lib => stories}/examples/ToastHeaderIcon.js (100%) create mode 100644 stories/examples/ToastProps.js create mode 100644 stories/examples/Tooltip.js rename {docs/lib => stories}/examples/TooltipAutoHide.js (100%) rename {docs/lib => stories}/examples/TooltipMulti.js (94%) create mode 100644 stories/examples/TooltipProps.js rename {docs/lib => stories}/examples/TooltipUncontrolled.js (91%) rename {docs/lib => stories}/examples/TooltipUpdate.js (53%) rename {docs/lib => stories}/examples/UncontrolledAccordion.js (100%) rename {docs/lib => stories}/examples/UncontrolledAccordionStayOpen.js (100%) create mode 100644 stories/examples/options.js diff --git a/.gitignore b/.gitignore index 3bd1d38db..30f9261b8 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,7 @@ node_modules /build /lib /es +.DS_Store .idea .history npm-debug.log diff --git a/.storybook/main.cjs b/.storybook/main.cjs new file mode 100644 index 000000000..980b79fd7 --- /dev/null +++ b/.storybook/main.cjs @@ -0,0 +1,10 @@ +module.exports = { + stories: [ + '../stories/*.stories.mdx', + '../stories/*.stories.js' + ], + addons: [ + '@storybook/addon-links', + '@storybook/addon-docs' + ] +}; diff --git a/.storybook/manager.cjs b/.storybook/manager.cjs new file mode 100644 index 000000000..e5489b5f2 --- /dev/null +++ b/.storybook/manager.cjs @@ -0,0 +1,13 @@ +import { addons } from '@storybook/addons'; +import { create } from '@storybook/theming'; + +const theme = create({ + base: 'light', + brandTitle: 'Reactstrap', + brandUrl: '/', + brandImage: 'logo.svg', +}); + +addons.setConfig({ + theme +}); diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html new file mode 100644 index 000000000..adfb667a5 --- /dev/null +++ b/.storybook/preview-head.html @@ -0,0 +1,13 @@ + + + \ No newline at end of file diff --git a/.storybook/preview.cjs b/.storybook/preview.cjs new file mode 100644 index 000000000..446600083 --- /dev/null +++ b/.storybook/preview.cjs @@ -0,0 +1,15 @@ +export const parameters = { + actions: { argTypesRegex: "^on[A-Z].*" }, + controls: { + hideNoControlsWarning: true, + matchers: { + date: /Date$/ + }, + }, + options: { + storySort: { + order: ['Home', '*'] + } + }, + viewMode: 'docs' +} diff --git a/.storybook/webpack.config.cjs b/.storybook/webpack.config.cjs new file mode 100644 index 000000000..21208aa9a --- /dev/null +++ b/.storybook/webpack.config.cjs @@ -0,0 +1,11 @@ +const path = require('path'); + +module.exports = async ({ config }) => { + config.resolve = { + alias: { + reactstrap: path.resolve(__dirname, '../src/') + }, + }; + + return config; +}; diff --git a/docs/.eslintrc.js b/docs/.eslintrc.js deleted file mode 100644 index ae93a4928..000000000 --- a/docs/.eslintrc.js +++ /dev/null @@ -1,7 +0,0 @@ -var rules = { - 'import/no-extraneous-dependencies': 0, -}; - -module.exports = { - rules: rules, -}; diff --git a/docs/lib/Components/AccordionPage.js b/docs/lib/Components/AccordionPage.js deleted file mode 100644 index 0e06e0523..000000000 --- a/docs/lib/Components/AccordionPage.js +++ /dev/null @@ -1,182 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import PageTitle from '../UI/PageTitle'; -import SectionTitle from '../UI/SectionTitle'; -import AccordionExample from '../examples/Accordion'; -import AccordionFlushExample from '../examples/AccordionFlush'; -import UncontrolledAccordionExample from '../examples/UncontrolledAccordion'; -import UncontrolledAccordionStayOpenExample from '../examples/UncontrolledAccordionStayOpen'; - -const AccordionExampleSource = require('!!raw-loader!../examples/Accordion'); -const AccordionFlushExampleSource = require('!!raw-loader!../examples/AccordionFlush'); -const UncontrolledAccordionExampleSource = require('!!raw-loader!../examples/UncontrolledAccordion'); -const UncontrolledAccordionStayOpenExampleSource = - require('!!raw-loader!../examples/UncontrolledAccordionStayOpen'); - -export default class AccordionPage extends React.Component { - render() { - return ( -
- -
- -
- 
-          
-            { AccordionExampleSource}
-          
-
- Properties - 
-          
-{`Accordion.propTypes = {
-    openId: Proptypes.string.isRequired,
-    toggle: Proptypes.func.isRequired,
-    tag: tagPropType,
-    className: PropTypes.string,
-    flush: PropTypes.boolean,
-    cssModule: PropTypes.object,
-    innerRef: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string,
-      PropTypes.func,
-    ]),
-    children: PropTypes.node,
-};
-
-AccordionBody.propTypes = {
-  tag: tagPropType,
-  className: PropTypes.string,
-  cssModule: PropTypes.object,
-  innerRef: PropTypes.oneOfType([
-    PropTypes.object,
-    PropTypes.string,
-    PropTypes.func,
-  ]),
-  children: PropTypes.node,
-  accordionId: PropTypes.string.isRequired,
-};
-
-AccordionHeader.propTypes = {
-  tag: tagPropType,
-  className: PropTypes.string,
-  cssModule: PropTypes.object,
-  innerRef: PropTypes.oneOfType([
-    PropTypes.object,
-    PropTypes.string,
-    PropTypes.func,
-  ]),
-  children: PropTypes.node,
-  targetId: PropTypes.string.isRequired,
-};
-
-AccordionItem.propTypes = {
-  tag: tagPropType,
-  className: PropTypes.string,
-  cssModule: PropTypes.object,
-  innerRef: PropTypes.oneOfType([
-    PropTypes.object,
-    PropTypes.string,
-    PropTypes.func,
-  ]),
-  children: PropTypes.node,
-};
-`}
-          
-
- - Flush -

- Add flush to remove the default background-color, some borders, - and some rounded corners to render Accordions edge-to-edge with their parent container. -

-
- -
- 
-          {AccordionFlushExampleSource}
-
- - Uncontrolled -
- -
- 
-          
-            { UncontrolledAccordionExampleSource }
-          
-
- - Stay Open -

- Add the stayOpen prop to make accordion items stay open when another item is opened. -

-
- -
- 
-          
-            { UncontrolledAccordionStayOpenExampleSource }
-          
-
- - Properties - 
-          
-{`UncontrolledAccordion.propTypes = {
-    tag: tagPropType,
-    className: PropTypes.string,
-    cssModule: PropTypes.object,
-    innerRef: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string,
-      PropTypes.func,
-    ]),
-    children: PropTypes.node,
-};
-
-AccordionBody.propTypes = {
-  tag: tagPropType,
-  className: PropTypes.string,
-  cssModule: PropTypes.object,
-  innerRef: PropTypes.oneOfType([
-    PropTypes.object,
-    PropTypes.string,
-    PropTypes.func,
-  ]),
-  children: PropTypes.node,
-  accordionId: PropTypes.string.isRequired,
-};
-
-AccordionHeader.propTypes = {
-  tag: tagPropType,
-  className: PropTypes.string,
-  cssModule: PropTypes.object,
-  innerRef: PropTypes.oneOfType([
-    PropTypes.object,
-    PropTypes.string,
-    PropTypes.func,
-  ]),
-  children: PropTypes.node,
-  targetId: PropTypes.string.isRequired,
-};
-
-AccordionItem.propTypes = {
-  tag: tagPropType,
-  className: PropTypes.string,
-  cssModule: PropTypes.object,
-  innerRef: PropTypes.oneOfType([
-    PropTypes.object,
-    PropTypes.string,
-    PropTypes.func,
-  ]),
-  children: PropTypes.node,
-};
-`}
-          
-
-
- ); - } -} diff --git a/docs/lib/Components/AlertsPage.js b/docs/lib/Components/AlertsPage.js deleted file mode 100644 index 805811a60..000000000 --- a/docs/lib/Components/AlertsPage.js +++ /dev/null @@ -1,117 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import { Alert } from 'reactstrap'; -import PageTitle from '../UI/PageTitle'; -import SectionTitle from '../UI/SectionTitle'; - -import AlertExample from '../examples/Alert'; -const AlertExampleSource = require('!!raw-loader!../examples/Alert'); - -import AlertLinkExample from '../examples/AlertLink'; -const AlertLinkExampleSource = require('!!raw-loader!../examples/AlertLink'); - -import AlertContentExample from '../examples/AlertContent'; -const AlertContentExampleSource = require('!!raw-loader!../examples/AlertContent'); - -import AlertDismissExample from '../examples/AlertDismiss'; -const AlertDismissExampleSource = require('!!raw-loader!../examples/AlertDismiss'); - -import AlertUncontrolledDismissExample from '../examples/AlertUncontrolledDismiss'; -const AlertUncontrolledDismissExampleSource = require('!!raw-loader!../examples/AlertUncontrolledDismiss'); - -import {AlertFadelessExample, UncontrolledAlertFadelessExample} from '../examples/AlertFadeless'; -const AlertFadelessExampleSource = require('!!raw-loader!../examples/AlertFadeless'); - -export default class AlertsPage extends React.Component { - render() { - return ( -
- -
- -
- 
-          
-            {AlertExampleSource}
-          
-
- - Properties - 
-          
-{`Alert.propTypes = {
-  className: PropTypes.string,
-  closeClassName: PropTypes.string,
-  color: PropTypes.string, // default: 'success'
-  isOpen: PropTypes.bool,  // default: true
-  toggle: PropTypes.func,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  fade: PropTypes.bool, // default: true
-  // Controls the transition of the alert fading in and out
-  // See [Fade](/components/fade/) for more details
-  transition: PropTypes.shape(Fade.propTypes),
-}`}
-          
-
- - Link color -
- -
- 
-          
-            {AlertLinkExampleSource}
-          
-
- - Additional content -
- -
- 
-          
-            {AlertContentExampleSource}
-          
-
- - Dismissing -
- -
- 
-          
-            {AlertDismissExampleSource}
-          
-
- - Uncontrolled [disable] Alerts -

- For the most basic use-case an uncontrolled component can provide the functionality wanted without the need to manage/control the state of the component. UncontrolledAlert does not require isOpen nor toggle props to work. -

-
- -
- 
-          
-            {AlertUncontrolledDismissExampleSource}
-          
-
- - Alerts without fade -

- Fade can be disabled using fade=false. -

-
- - -
- 
-          
-            {AlertFadelessExampleSource}
-          
-
-
- ); - } -} diff --git a/docs/lib/Components/BadgePage.js b/docs/lib/Components/BadgePage.js deleted file mode 100644 index b0e0f11e7..000000000 --- a/docs/lib/Components/BadgePage.js +++ /dev/null @@ -1,77 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import PageTitle from '../UI/PageTitle'; -import SectionTitle from '../UI/SectionTitle'; - -import BadgeExample from '../examples/Badge'; -const BadgeExampleSource = require('!!raw-loader!../examples/Badge'); - -import BadgeButtonExample from '../examples/BadgeButton'; -const BadgeButtonExampleSource = require('!!raw-loader!../examples/BadgeButton'); - -import BadgePillsExample from '../examples/BadgePills'; -const BadgePillsExampleSource = require('!!raw-loader!../examples/BadgePills'); - -import BadgeVariationsExample from '../examples/BadgeVariations'; -const BadgeVariationsExampleSource = require('!!raw-loader!../examples/BadgeVariations'); - -import BadgeLinksExample from '../examples/BadgeLinks'; -const BadgeLinksExampleSource = require('!!raw-loader!../examples/BadgeLinks'); - -export default class BadgesPage extends React.Component { - render() { - return ( -
- -
-

Scale to parent

-
- -
- 
-          
-            {BadgeExampleSource}
-          
-
-

Badges can be used as part of links or buttons to provide a counter.

-
- -
- 
-          
-            {BadgeButtonExampleSource}
-          
-
- Contextual variations -
- -
- 
-          
-            {BadgeVariationsExampleSource}
-          
-
- Pills -
- -
- 
-          
-            {BadgePillsExampleSource}
-          
-
- Links -

Adding the href prop (without specifying a tag prop) will default the badge to a link.

-
- -
- 
-          
-            {BadgeLinksExampleSource}
-          
-
-
- ); - } -} diff --git a/docs/lib/Components/BreadcrumbsPage.js b/docs/lib/Components/BreadcrumbsPage.js deleted file mode 100644 index 57070c046..000000000 --- a/docs/lib/Components/BreadcrumbsPage.js +++ /dev/null @@ -1,62 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import PageTitle from '../UI/PageTitle'; -import SectionTitle from '../UI/SectionTitle'; - -import BreadcrumbExample from '../examples/Breadcrumb'; -const BreadcrumbExampleSource = require('!!raw-loader!../examples/Breadcrumb'); - -import BreadcrumbNoListExample from '../examples/BreadcrumbNoList'; -const BreadcrumbNoListExampleSource = require('!!raw-loader!../examples/BreadcrumbNoList'); - -export default class BreadcrumbsPage extends React.Component { - render() { - return ( -
- -
- -
- 
-          
-            {BreadcrumbExampleSource}
-          
-
-

Properties

- 
-          
-{`Breadcrumb.propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  listTag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string,
-  listClassName: PropTypes.string,
-  cssModule: PropTypes.object,
-  children: PropTypes.node,
-  'aria-label': PropTypes.string
-};
-
-BreadcrumbItem.propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  active: PropTypes.bool,
-  className: PropTypes.string,
-  cssModule: PropTypes.object,
-};
-`}
-          
-
- No list -
-

Breadcrumbs can work without the usage of list markup.

-
- -
- 
-          
-            {BreadcrumbNoListExampleSource}
-          
-
-
- ); - } -} diff --git a/docs/lib/Components/ButtonDropdownPage.js b/docs/lib/Components/ButtonDropdownPage.js deleted file mode 100644 index 952631ea8..000000000 --- a/docs/lib/Components/ButtonDropdownPage.js +++ /dev/null @@ -1,266 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import PageTitle from '../UI/PageTitle'; -import { - ButtonDropdown, - DropdownToggle, - DropdownItem, - DropdownMenu } from 'reactstrap'; -import Example from '../examples/ButtonDropdownMulti'; -import ExampleSplit from '../examples/ButtonDropdownMultiSplit'; -import ButtonDropdownExample from '../examples/ButtonDropdown'; -import ButtonDropdownUncontrolledExample from '../examples/ButtonDropdownUncontrolled' -import SectionTitle from '../UI/SectionTitle'; - -const ButtonDropdownExampleSource = require('!!raw-loader!../examples/ButtonDropdown'); - -export default class ButtonDropdownPage extends React.Component { - constructor(props) { - super(props); - - this.toggle = this.toggle.bind(this); - this.state = { - dropdownOpen: false - }; - } - - toggle() { - this.setState({ - dropdownOpen: !this.state.dropdownOpen - }); - } - - render() { - return ( -
- -
- -
- 
-          
-            {ButtonDropdownExampleSource}
-          
-
-

Properties

- 
-          
-{`ButtonDropdown.propTypes = {
-  disabled: PropTypes.bool,
-  direction: PropTypes.oneOf(['up', 'down', 'start', 'end']),
-  group: PropTypes.bool,
-  isOpen: PropTypes.bool,
-  tag: PropTypes.string,
-  toggle: PropTypes.func
-};
-
-DropdownToggle.propTypes = {
-  caret: PropTypes.bool,
-  color: PropTypes.string,
-  disabled: PropTypes.bool,
-  onClick: PropTypes.func,
-  'data-toggle': PropTypes.string,
-  'aria-haspopup': PropTypes.bool
-};`}
-          
-
- Single button dropdowns -
-
- - - - - - -
-
- 
-          
-{`
-  
-    Text
-  
-  
-    Header
-    Action
-    Another Action
-    
-    Another Action
-  
-`}
-          
-
- Split button dropdowns -
-
- - - - - - -
-
- 
-          
-{`
-  
-  
-  
-    Header
-    Action
-    Another Action
-    
-    Another Action
-  
-`}
-          
-
- Sizing -
-
- { this.setState({ btnLg: !this.state.btnLg }); }}> - - Large Button - - - Another Action - Another Action - - -
-
- { this.setState({ btnSm: !this.state.btnSm }); }}> - - Small Button - - - Another Action - Another Action - - -
-
- 
-          
-{`
-  
-    Large Button
-  
-  
-    Another Action
-    Another Action
-  
-
-
-
-  
-    Small Button
-  
-  
-    Another Action
-    Another Action
-  
-`}
-          
-
- Uncontrolled Dropdown -
- -
- 
-          
-{`import React from 'react';
-import { UncontrolledButtonDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap';
-
-export default function Example () => {
-  return (
-    
-      
-        Dropdown
-      
-      
-        Header
-        Action
-        Another Action
-        
-        Another Action
-      
-    
-  );
-}`}
-          
-
- Drop direction variations -
-
- { this.setState({ btnDropup: !this.state.btnDropup }); }}> - - Dropup - - - Another Action - Another Action - - - {' '} - { this.setState({ btnDropleft: !this.state.btnDropleft }); }}> - - Dropleft - - - Another Action - Another Action - - - {' '} - { this.setState({ btnDropright: !this.state.btnDropright }); }}> - - Dropright - - - Another Action - Another Action - - -
-
- 
-          
-{`
-  
-    Dropup
-  
-  
-    Another Action
-    Another Action
-  
-
-
- { this.setState({ btnDropleft: !this.state.btnDropleft }); }}>
-  
-    Dropleft
-  
-  
-    Another Action
-    Another Action
-  
-
-
- { this.setState({ btnDropright: !this.state.btnDropright }); }}>
-  
-    Dropright
-  
-  
-    Another Action
-    Another Action
-  
-`}
-          
-
-
- ); - } -} diff --git a/docs/lib/Components/ButtonGroupPage.js b/docs/lib/Components/ButtonGroupPage.js deleted file mode 100644 index 51ab48ef0..000000000 --- a/docs/lib/Components/ButtonGroupPage.js +++ /dev/null @@ -1,187 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import { - Button, - ButtonGroup, - ButtonDropdown, - DropdownToggle, - DropdownItem, - DropdownMenu } from 'reactstrap'; -import { Link } from 'react-router'; -import PageTitle from '../UI/PageTitle'; -import SectionTitle from '../UI/SectionTitle'; - -import ButtonGroupExample from '../examples/ButtonGroup'; -const ButtonGroupExampleSource = require('!!raw-loader!../examples/ButtonGroup'); - -import ButtonToolbarExample from '../examples/ButtonToolbar'; -const ButtonToolbarExampleSource = require('!!raw-loader!../examples/ButtonToolbar'); - - -export default class ButtonGroupPage extends React.Component { - constructor(props) { - super(props); - - this.toggle = this.toggle.bind(this); - this.state = { - dropdownOpen: false - }; - } - - toggle() { - this.setState({ - dropdownOpen: !this.state.dropdownOpen - }); - } - - render() { - return ( -
- -
-
- -
-
- 
-          
-            {ButtonGroupExampleSource}
-          
-
-

Properties

- 
-          
-{`ButtonGroup.propTypes = {
-  ariaLabel: PropTypes.string,
-  className: PropTypes.string,
-  role: PropTypes.string,
-  size: PropTypes.string,
-  vertical: PropTypes.bool
-};`}
-          
-
- Button Toolbar -
- -
- 
-          
-            {ButtonToolbarExampleSource}
-          
-
- Sizing -
-
- - - - - -
- - - - - -
- - - - - -
-
- 
-          
-{`
-  
-  
-  
-
-
-
-  
-  
-  
-
-
-
-  
-  
-  
-`}
-          
-
- Nesting -
-
- - - - - - Dropdown - - - Dropdown Link - Dropdown Link - - - -
-
- 
-          
-{`
-  
-  
-  
-    
-      Dropdown
-    
-    
-      Dropdown Link
-      Dropdown Link
-    
-  
-`}
-          
-
- Vertical variation -
- - - - - - Dropdown - - - Dropdown Link - Dropdown Link - - - -
- 
-          
-{`
-  
-  
-  
-    
-      Dropdown
-    
-    
-      Dropdown Link
-      Dropdown Link
-    
-  
-`}
-          
-
-
- ); - } -} diff --git a/docs/lib/Components/ButtonsPage.js b/docs/lib/Components/ButtonsPage.js deleted file mode 100644 index 5032395f1..000000000 --- a/docs/lib/Components/ButtonsPage.js +++ /dev/null @@ -1,184 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import { Button } from 'reactstrap'; -import PageTitle from '../UI/PageTitle'; -import SectionTitle from '../UI/SectionTitle'; -import ButtonExample from '../examples/Button'; -const ButtonExampleSource = require('!!raw-loader!../examples/Button'); - -import ButtonOutline from '../examples/ButtonOutline'; -const ButtonOutlineSource = require('!!raw-loader!../examples/ButtonOutline'); - -import ButtonStateful from '../examples/ButtonStateful'; -const ButtonStatefulSource = require('!!raw-loader!../examples/ButtonStateful'); - -import ButtonCloseIcon from '../examples/ButtonCloseIcon'; -const ButtonCloseIconSource = require('!!raw-loader!../examples/ButtonCloseIcon'); - -import ButtonToggle from '../examples/ButtonToggle'; -const ButtonToggleSource = require('!!raw-loader!../examples/ButtonToggle'); - -export default class ButtonsPage extends React.Component { - render() { - return ( -
- -
- -
- 
-          
-            {ButtonExampleSource}
-          
-
-

Properties

- 
-          
-{`Button.propTypes = {
-  active: PropTypes.bool,
-  'aria-label': PropTypes.string,
-  block: PropTypes.bool,
-  color: PropTypes.string, // default: 'secondary'
-  disabled: PropTypes.bool,
-  outline: PropTypes.bool,
-
-  // Pass in a Component to override default button element
-  // example: react-router Link
-  // default: 'button'
-  tag: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.string,
-    PropTypes.shape({ $$typeof: PropTypes.symbol, render: PropTypes.func }),
-    PropTypes.arrayOf(PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.string,
-      PropTypes.shape({ $$typeof: PropTypes.symbol, render: PropTypes.func }),
-    ]))
-  ]),
-
-  // ref will only get you a reference to the Button component, use innerRef to get a reference to the DOM element (for things like focus management).
-  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
-
-  onClick: PropTypes.func,
-  size: PropTypes.string,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  cssModule: PropTypes.object,
-
-  // use close prop for BS4 close icon utility
-  close: PropTypes.bool,
-}
-
-Button.defaultProps = {
-  color: 'secondary',
-  tag: 'button',
-}`}
-          
-
- Outline Buttons -
- -
- 
-          
-            {ButtonOutlineSource}
-          
-
- Sizes -
- {' '} - -
- 
-          
-{`{' '}
-`}
-          
-
-
- {' '} - -
- 
-          
-{`{' '}
-`}
-          
-
-
- - -
- 
-          
-{`
-`}
-          
-
- Active State -
- {' '} - -
- 
-          
-{`{' '}
-`}
-          
-
- Disabled State -
- {' '} - -
- 
-          
-{`{' '}
-`}
-          
-
- - Checkbox and Radio Buttons (Stateful Buttons) -

- In order to have checkbox and radio buttons, your component needs to manage the state of which button(s) are active/select. It is not in the opinion of this library to manage state within it's components so it is left up to you. Below is a simple example showcasing how this could be done using the components which already exist in this library. -

-
- -
- 
-          
-            {ButtonStatefulSource}
-          
-
- - Close icon -

- Use a generic close icon to dismiss content. Use <Button close /> for the default icon. Otherwise, custom content for the button - may be defined. (e.g. JSX: <Button close><span aria-hidden="true">–</span></Button>) The default aria-label is "Close". -

-
- -
- 
-          
-            {ButtonCloseIconSource}
-          
-
- - Button Toggle -

- Button toggle state -

-
- -
- 
-          
-            {ButtonToggleSource}
-          
-
-
- ); - } -} diff --git a/docs/lib/Components/CardPage.js b/docs/lib/Components/CardPage.js deleted file mode 100644 index 220e6554b..000000000 --- a/docs/lib/Components/CardPage.js +++ /dev/null @@ -1,239 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import PageTitle from '../UI/PageTitle'; -import SectionTitle from '../UI/SectionTitle'; - -import CardExample from '../examples/Card'; -import CardContentExample from '../examples/CardContentTypes'; -import CardSizingExample from '../examples/CardSizing'; -import CardAlignmentExample from '../examples/CardAlignment'; -import CardHeaderFooterExample from '../examples/CardHeaderFooter'; -import CardImageCapsExample from '../examples/CardImageCaps'; -import CardImageOverlayExample from '../examples/CardImageOverlay'; -import CardBackgroundsExample from '../examples/CardBackgrounds'; -import CardOutlineExample from '../examples/CardOutline'; -import CardGroupsExample from '../examples/CardGroups'; -import CardDecksExample from '../examples/CardDecks'; -import CardColumnsExample from '../examples/CardColumns'; - -const CardExampleSource = require('!!raw-loader!../examples/Card'); -const CardContentExampleSource = require('!!raw-loader!../examples/CardContentTypes'); -const CardSizingExampleSource = require('!!raw-loader!../examples/CardSizing'); -const CardAlignmentExampleSource = require('!!raw-loader!../examples/CardAlignment'); -const CardHeaderFooterExampleSource = require('!!raw-loader!../examples/CardHeaderFooter'); -const CardImageCapsExampleSource = require('!!raw-loader!../examples/CardImageCaps'); -const CardImageOverlayExampleSource = require('!!raw-loader!../examples/CardImageOverlay'); -const CardBackgroundsExampleSource = require('!!raw-loader!../examples/CardBackgrounds'); -const CardOutlineExampleSource = require('!!raw-loader!../examples/CardOutline'); -const CardGroupsExampleSource = require('!!raw-loader!../examples/CardGroups'); -const CardDecksExampleSource = require('!!raw-loader!../examples/CardDecks'); -const CardColumnsExampleSource = require('!!raw-loader!../examples/CardColumns'); - -export default class CardPage extends React.Component { - render() { - return ( -
- -
-
- -
- 
-          
-            {CardExampleSource}
-          
-
-

Properties

- 
-          
-{`Card.propTypes = {
-  // Pass in a Component to override default element
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  inverse: PropTypes.bool,
-  color: PropTypes.string,
-  body: PropTypes.bool,
-  className: PropTypes.string
-};
-
-CardBody.propTypes = {
-  // Pass in a Component to override default element
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string
-};
-
-CardColumns.propTypes = {
-  // Pass in a Component to override default element
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string
-};
-
-CardDeck.propTypes = {
-  // Pass in a Component to override default element
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string
-};
-
-CardFooter.propTypes = {
-  // Pass in a Component to override default element
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string
-};
-
-CardGroup.propTypes = {
-  // Pass in a Component to override default element
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string
-};
-
-CardHeader.propTypes = {
-  // Pass in a Component to override default element
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string
-};
-
-CardImg.propTypes = {
-  // Pass in a Component to override default element
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string,
-  // Use top or bottom to position image via "card-img-top" or "card-img-bottom"
-  top: PropTypes.bool,
-  bottom: PropTypes.bool
-};
-
-CardImgOverlay.propTypes = {
-  // Pass in a Component to override default element
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string
-};
-
-CardLink.propTypes = {
-  // Pass in a Component to override default element
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string,
-  // ref will only get you a reference to the CardLink component, use innerRef to get a reference to the DOM element (for things like focus management).
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
-};
-
-CardSubtitle.propTypes = {
-  // Pass in a Component to override default element
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string
-};
-
-CardText.propTypes = {
-  // Pass in a Component to override default element
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string
-};
-
-CardTitle.propTypes = {
-  // Pass in a Component to override default element
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string
-};`}
-          
-
- Content Types -
- -
- 
-          
-            {CardContentExampleSource}
-          
-
- Sizing -
- -
- 
-          
-            {CardSizingExampleSource}
-          
-
- Text alignment -
- -
- 
-          
-            {CardAlignmentExampleSource}
-          
-
- Header and Footer -
- -
- 
-          
-            {CardHeaderFooterExampleSource}
-          
-
- Image caps -
- -
- 
-          
-            {CardImageCapsExampleSource}
-          
-
- Image overlays -
- -
- 
-          
-            {CardImageOverlayExampleSource}
-          
-
- Background variants -
- -
- 
-          
-            {CardBackgroundsExampleSource}
-          
-
- Outline variants -
- -
- 
-          
-            {CardOutlineExampleSource}
-          
-
- Groups -
- -
- 
-          
-            {CardGroupsExampleSource}
-          
-
- Decks -
- -
- 
-          
-            {CardDecksExampleSource}
-          
-
- Columns -
- -
- 
-          
-            {CardColumnsExampleSource}
-          
-
-
- ); - } -} diff --git a/docs/lib/Components/CarouselPage.js b/docs/lib/Components/CarouselPage.js deleted file mode 100644 index 2c972a1ca..000000000 --- a/docs/lib/Components/CarouselPage.js +++ /dev/null @@ -1,158 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import PageTitle from '../UI/PageTitle'; -import SectionTitle from '../UI/SectionTitle'; -import CarouselExample from '../examples/Carousel'; -const CarouselExampleSource = require('!!raw-loader!../examples/Carousel'); -import CarouselUncontrolledExample from '../examples/CarouselUncontrolled'; -const CarouselUncontrolledExampleSource = require('!!raw-loader!../examples/CarouselUncontrolled'); -import CarouselCustomTagExample from '../examples/CarouselCustomTag'; -const CarouselCustomTagExampleSource = require('!!raw-loader!../examples/CarouselCustomTag'); - -export default class CarouselPage extends React.Component { - render() { - return ( -
- -
- -
- 
-          
-            {CarouselExampleSource}
-          
-
- - Carousel Properties - 
-          
-{`Carousel.propTypes = {
-  // the current active slide of the carousel
-  activeIndex: PropTypes.number,
-  // a function which should advance the carousel to the next slide (via activeIndex)
-  next: PropTypes.func.isRequired,
-  // a function which should advance the carousel to the previous slide (via activeIndex)
-  previous: PropTypes.func.isRequired,
-  // controls if the left and right arrow keys should control the carousel
-  keyboard: PropTypes.bool,
-  /* If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on
-   * mouseleave. If set to false, hovering over the carousel won't pause it. (default: "hover")
-   */
-  pause: PropTypes.oneOf(['hover', false]),
-  // Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.
-  // This is how bootstrap defines it... I would prefer a bool named autoplay or something...
-  ride: PropTypes.oneOf(['carousel']),
-  // the interval at which the carousel automatically cycles (default: 5000)
-  // If set to false, carousel will not Autoplay (i.e. will not automatically cycle).
-  interval: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string,
-    PropTypes.bool,
-  ]),
-  children: PropTypes.array,
-  // called when the mouse enters the Carousel
-  mouseEnter: PropTypes.func,
-  // called when the mouse exits the Carousel
-  mouseLeave: PropTypes.func,
-  // controls whether the slide animation on the Carousel works or not
-  slide: PropTypes.bool,
-  // make the controls, indicators and captions dark on the Carousel
-  dark: PropTypes.bool, 
-  cssModule: PropTypes.object,
-  // controls whether the touch gestures on the Carousel works or not (default: true)
-  enableTouch: PropTypes.bool,
-};`}
-          
-
- - CarouselItem Properties - 
-          
-{`CarouselItem.propTypes = {
-  ...Transition.propTypes,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  in: PropTypes.bool,
-  cssModule: PropTypes.object,
-  children: PropTypes.node,
-  slide: PropTypes.bool,
-};`}
-          
-
- - CarouselControl Properties - 
-          
-{`CarouselControl.propTypes = {
-  direction: PropTypes.oneOf(['prev', 'next']).isRequired,
-  onClickHandler: PropTypes.func.isRequired,
-  cssModule: PropTypes.object,
-  directionText: PropTypes.string
-};`}
-          
-
- - CarouselIndicators Properties - 
-          
-{`CarouselIndicators.propTypes = {
-  items: PropTypes.array.isRequired,
-  activeIndex: PropTypes.number.isRequired,
-  cssModule: PropTypes.object,
-  onClickHandler: PropTypes.func.isRequired
-};`}
-          
-
- - CarouselCaption Properties - 
-          
-{`CarouselCaption.propTypes = {
-  captionHeader: PropTypes.node,
-  captionText: PropTypes.node.isRequired,
-  cssModule: PropTypes.object
-};`}
-          
-
- - Uncontrolled Carousel -

- For the most basic use-case an uncontrolled component can provide the functionality wanted without the need to manage/control the state of the component. UncontrolledCarousel does not require previous, next nor activeIndex props to work. - Anything provided to a normal Carousel can also be provided to UncontrolledCarousel, overriding the control UncontrolledCarousel provides. Additionally, you can hide the controls by passing false to the controls prop - and you can disable the indicators by passing false to the indicators prop; both are visible by default. Autoplay (ride="carousel") is enabled by default, you can disable it by passing false to the autoPlay prop. -

-
- -
- 
-          
-            {CarouselUncontrolledExampleSource}
-          
-
- - Uncontrolled Carousel Properties -

Same as Carousel (except children) can be overridden plus the following

- 
-          
-{`UncontrolledCarousel.propTypes = {
-  items: PropTypes.array.isRequired,
-  indicators: PropTypes.bool, // default: true
-  controls: PropTypes.bool, // default: true
-  autoPlay: PropTypes.bool, // default: true
-};`}
-          
-
- - Carousel using a tag and classname -
- -
- 
-          
-            {CarouselCustomTagExampleSource}
-          
-
-
- ); - } -} diff --git a/docs/lib/Components/CollapsePage.js b/docs/lib/Components/CollapsePage.js deleted file mode 100644 index e4881292c..000000000 --- a/docs/lib/Components/CollapsePage.js +++ /dev/null @@ -1,94 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import PageTitle from '../UI/PageTitle'; -import SectionTitle from '../UI/SectionTitle'; - -import CollapseExample from '../examples/Collapse'; -import CollapseHorizontalExample from '../examples/CollapseHorizontal'; -import UncontrolledCollapseExample from '../examples/CollapseUncontrolled'; - -import CollapseEventsExample from '../examples/CollapseEvents'; - -const CollapseExampleSource = require('!!raw-loader!../examples/Collapse'); -const CollapseHorizontalExampleSource = require('!!raw-loader!../examples/CollapseHorizontal'); -const CollapseEventsExampleSource = require('!!raw-loader!../examples/CollapseEvents'); - -const UncontrolledCollapseExampleSource = require('!!raw-loader!../examples/CollapseUncontrolled'); - -export default class CollapsePage extends React.Component { - render() { - return ( -
- -
- -
- 
-          {CollapseExampleSource}
-
- - Properties - 
-          
-            {`Collapse.propTypes = {
-  ...Transition.propTypes, // see note below
-  horizontal: PropTypes.bool,
-  isOpen: PropTypes.bool,
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node
-  ]),
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.node,
-  navbar: PropTypes.bool,
-  cssModule: PropTypes.object,
-  innerRef: PropTypes.object,
-};`}
-          
-
-

- Collapse is wrapped in a Transition component - from react-transition-group/transition. Transition props are passed through to - this wrapper. Refer to the Transition documentation for details: - http://reactcommunity.org/react-transition-group/transition/. -

- - Horizontal -
- -
- 
-          {CollapseHorizontalExampleSource}
-
- - Events -

- Use the onEnter, onEntering, onEntered, onExiting and onExited props for - callbacks when the Collapse has finished opening (entering) or closing (exiting). -

-
- -
- 
-          {CollapseEventsExampleSource}
-
- Uncontrolled Collapse -

- For the most basic use-case, an uncontrolled component can provide the functionality - wanted without the need to manage/control the state of the component.{' '} - UncontrolledCollapse does not require an isOpen prop. Instead - pass a toggler prop. The toggler prop is a string which will run - querySelectorAll to find dom elements which will trigger toggle. The defaultOpen - prop controls the initial state. -

-
- -
- 
-          {UncontrolledCollapseExampleSource}
-
-
- ); - } -} diff --git a/docs/lib/Components/DropdownsPage.js b/docs/lib/Components/DropdownsPage.js deleted file mode 100644 index 98ac097f6..000000000 --- a/docs/lib/Components/DropdownsPage.js +++ /dev/null @@ -1,464 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { Link } from 'react-router'; -import { PrismCode } from 'react-prism'; -import PageTitle from '../UI/PageTitle'; -import { - Row, - Col, - Dropdown, - DropdownToggle, - DropdownItem, - DropdownMenu, - UncontrolledDropdown } from 'reactstrap'; -import SectionTitle from '../UI/SectionTitle'; -import DropdownExample from '../examples/Dropdown'; -import DropdownSizingExample from '../examples/DropdownSizing'; -import CustomDropdownExample from '../examples/CustomDropdown'; -import DropdownUncontrolledExample from '../examples/DropdownUncontrolled'; -import DropdownSetActiveFromChildExample from '../examples/DropdownSetActiveFromChild'; -import DropdownContainerExample from '../examples/DropdownContainer'; - -const DropdownExampleSource = require('!!raw-loader!../examples/Dropdown'); -const CustomDropdownExampleSource = require('!!raw-loader!../examples/CustomDropdown'); -const DropdownUncontrolledExampleSource = require('!!raw-loader!../examples/DropdownUncontrolled'); -const DropdownSetActiveFromChildSource = require('!!raw-loader!../examples/DropdownSetActiveFromChild'); -const DropdownContainerSource = require('!!raw-loader!../examples/DropdownContainer'); - -export default class DropdownPage extends React.Component { - constructor(props) { - super(props); - - this.toggleExample2 = this.toggle.bind(this); - this.state = { - example2: false - }; - } - - toggle() { - this.setState({ - example2: !this.state.example2 - }); - } - - render() { - return ( -
- -

- The Dropdown component is used to pass the isOpen & toggle props via context to the following components: DropdownToggle, DropdownMenu. The DropdownToggle uses the Button component internally, meaning it also accepts all the props the Button component accepts. -

-
- -
- 
-          
-            {DropdownExampleSource}
-          
-
-

Properties

- 
-          
-{`Dropdown.propTypes = {
-  a11y: PropTypes.bool, // defaults to true. Set to false to enable more bootstrap like tabbing behavior
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  direction: PropTypes.oneOf(['up', 'down', 'start', 'end']),
-  group: PropTypes.bool,
-  isOpen: PropTypes.bool,
-  // For Dropdown usage inside a Nav
-  nav: PropTypes.bool,
-  active: PropTypes.bool,
-  // For Dropdown usage inside a Navbar (disables popper)
-  inNavbar: PropTypes.bool,
-  tag: PropTypes.string, // default: 'div' unless nav=true, then 'li'
-  toggle: PropTypes.func,
-  setActiveFromChild: PropTypes.bool
-};
-
-DropdownToggle.propTypes = {
-  caret: PropTypes.bool,
-  color: PropTypes.string,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  onClick: PropTypes.func,
-  'data-toggle': PropTypes.string,
-  'aria-haspopup': PropTypes.bool,
-  // For DropdownToggle usage inside a Nav
-  nav: PropTypes.bool,
-  // Defaults to Button component
-  tag: PropTypes.any
-};
-
-DropdownMenu.propTypes = {
-  tag: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  dark: PropTypes.bool,
-  end: PropTypes.bool,
-  flip: PropTypes.bool, // default: true,
-  className: PropTypes.string,
-  cssModule: PropTypes.object,
-  // Custom modifiers that are passed to Popper.js, see https://popper.js.org/docs/v2/modifiers/
-  modifiers: PropTypes.array,
-  persist: PropTypes.bool, // presist the popper, even when closed. See #779 for reasoning
-  // passed to popper, see https://popper.js.org/docs/v2/constructors/#strategy
-  strategy: PropTypes.string,
-  // Element to place the menu in. Used to show the menu as a child of 'body'
-  // or other elements in the DOM instead of where it naturally is. This can be
-  // used to make the Dropdown escape a container with overflow: hidden
-  container: PropTypes.oneOfType([PropTypes.string, PropTypes.func, DOMElement]),
-};
-
-DropdownItem.propTypes = {
-  children: PropTypes.node,
-  active: PropTypes.bool,
-  disabled: PropTypes.bool,
-  divider: PropTypes.bool,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  header: PropTypes.bool,
-  onClick: PropTypes.func,
-  className: PropTypes.string,
-  cssModule: PropTypes.object,
-  toggle: PropTypes.bool, // default: true
-  text: PropTypes.bool
-};`}
-          
-
- Alignment -

To align the DropdownMenu to the right, add a right prop to Dropdown.

-
-
- - - Dropdown's menu is right-aligned - - - Header - Action - Another Action - - Another Really Really Long Action (Really!) - - -
-
- 
-          
-{`
-  
-    Dropdown's menu is right-aligned
-  
-  
-    Header
-    Action
-    Another Action
-    
-    Another Really Really Long Action (Really!)
-  
-`}
-          
-
- Dark dropdowns -

To opt into darker DropdownMenu to match a dark Navbar, add a dark prop to DropdownMenu.

-
-
- - - Dropdown's menu is dark - - - Header - Active Action - Another Action - - -
-
- 
-          
-{`
-  
-    Dropdown's menu is dark
-  
-  
-    Header
-    Active Action
-    Another Action
-  
-`}
-          
-
- Menu Headers - 
-          
-{'Header'}
-          
-
- Menu Dividers - 
-          
-{''}
-          
-
- Menu Items - 
-          
-{'Action'}
-          
-
- Disabled Menu Items - 
-          
-{'Action'}
-          
-
- Plaintext Menu Items - 
-          
-{'Dropdown item text'}
-          
-
- Sizing -
-
- - - -
-
- 
-          
-{`
-  
-    Dropdown
-  
-  
-    ...
-  
-
-
-
-  
-    Dropdown
-  
-  
-    ...
-  
-
-
-
-  
-    Dropdown
-  
-  
-    ...
-  
-`}
-          
-
-

Custom Dropdown

-
- -
- 
-          
-            {CustomDropdownExampleSource}
-          
-
- - Uncontrolled Dropdown -

- For the most basic use-case an uncontrolled component can provide the functionality wanted without the need to manage/control the state of the component. UncontrolledDropdown does not require isOpen nor toggle props to work. For the ButtonDropdown flavor, an uncontrolled component have been made as well; UncontrolledButtonDropdown. -

-
- -
- 
-          
-            {DropdownUncontrolledExampleSource}
-          
-
- Drop direction variations -
- - - { this.setState({ ddDropup: !this.state.ddDropup }); }}> - - Dropup - - - Another Action - Another Action - - - - - { this.setState({ ddDropleft: !this.state.ddDropleft }); }}> - - Dropleft - - - Another Action - Another Action - - - - - { this.setState({ ddDropright: !this.state.ddDropright }); }}> - - Dropright - - - Another Action - Another Action - - - - -
- 
-          
-{`
-  
-    Dropup
-  
-  
-    Another Action
-    Another Action
-  
-
-
- { this.setState({ btnDropleft: !this.state.btnDropleft }); }}>
-  
-    Dropleft
-  
-  
-    Another Action
-    Another Action
-  
-
-
- { this.setState({ btnDropright: !this.state.btnDropright }); }}>
-  
-    Dropright
-  
-  
-    Another Action
-    Another Action
-  
-`}
-          
-
- - Modifiers -
- - - { this.setState({ ddModifiers: !this.state.ddModifiers }); }} - > - - Dropdown - - { - return { - ...data, - styles: { - ...data.styles, - overflow: 'auto', - maxHeight: '100px', - }, - }; - }, - }, - }} - > - Another Action - Another Action - Another Action - Another Action - Another Action - Another Action - Another Action - Another Action - Another Action - Another Action - - - - -
- 
-          
-{`
-  
-    Dropdown
-  
-   {
-          return {
-            ...data,
-            styles: {
-              ...data.styles,
-              overflow: 'auto',
-              maxHeight: '100px',
-            },
-          };
-        },
-      },
-    }}
-  >
-    Another Action
-    Another Action
-    Another Action
-    Another Action
-    Another Action
-    Another Action
-    Another Action
-    Another Action
-    Another Action
-    Another Action
-  
-`}
-          
-
- - setActiveFromChild -

- Use setActiveFromChild prop to automatically set the dropdown to active when any of the dropdown menu items are active. Note: this prop will not work in conjunction with react-router Link and activeClassName. -

-
- -
- 
-          
-            {DropdownSetActiveFromChildSource}
-          
-
- - container -

- Use the container prop to allow the dropdown menu to be placed inside an alternate container through a React Portal. This can be used to allow the dropdown menu to escape a container with the style overflow: hidden. -

-
- -
- 
-          
-            {DropdownContainerSource}
-          
-
-
- ); - } -} diff --git a/docs/lib/Components/FadePage.js b/docs/lib/Components/FadePage.js deleted file mode 100644 index 15cd5c4e4..000000000 --- a/docs/lib/Components/FadePage.js +++ /dev/null @@ -1,76 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import { Alert } from 'reactstrap'; -import PageTitle from '../UI/PageTitle'; -import SectionTitle from '../UI/SectionTitle'; - -import FadeExample from '../examples/Fade'; -const FadeExampleSource = require('!!raw-loader!../examples/Fade'); - -export default class FadePage extends React.Component { - render() { - return ( -
- -
- -
- 
-          
-            {FadeExampleSource}
-          
-
- - Properties - 
-          
-{`Fade.propTypes = {
-    // Controls if the fade is currently showing or not (default: true)
-    in: PropTypes.bool, 
-
-    // All of these match [react-transition-group/Transition](https://reactcommunity.org/react-transition-group/#Transition) props
-    mountOnEnter: PropTypes.bool,
-    unmountOnExit: PropTypes.bool,
-    appear: PropTypes.bool, // (default: true)
-    enter: PropTypes.bool,  // (default: true)
-    exit: PropTypes.bool,   // (default: true)
-    timeout: PropTypes.oneOfType([ // (default: 150)
-        PropTypes.number,
-        PropTypes.shape({
-            enter: PropTypes.number,
-            exit: PropTypes.number,
-        }).isRequired,
-    ]),
-    addEndListener: PropTypes.func,
-    onEnter: PropTypes.func,
-    onEntering: PropTypes.func,
-    onEntered: PropTypes.func,
-    onExit: PropTypes.func,
-    onExiting: PropTypes.func,
-    onExited: PropTypes.func,
-
-    // The component(s) that should be faded
-    children: PropTypes.oneOfType([
-        PropTypes.arrayOf(PropTypes.node),
-        PropTypes.node
-    ]),
-    // Pass in a component or primitive component name to override the default element
-    // (default: 'div')
-    tag: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-    // Class always applied to the Fade element (default: 'fade')
-    baseClass: PropTypes.string,
-    // Class applied to transition the Fade element in (default: 'show')
-    baseClassActive: PropTypes.string,
-    // Other classes that should always be applied
-    className: PropTypes.string,
-    cssModule: PropTypes.object,
-
-    // Any other props provided will be applied to the element created (specified by tag)
-}`}
-          
-
-
- ); - } -} diff --git a/docs/lib/Components/FormPage.js b/docs/lib/Components/FormPage.js deleted file mode 100644 index 24ad36686..000000000 --- a/docs/lib/Components/FormPage.js +++ /dev/null @@ -1,213 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import PageTitle from '../UI/PageTitle'; -import SectionTitle from '../UI/SectionTitle'; - -import FormExample from '../examples/Form'; -const FormExampleSource = require('!!raw-loader!../examples/Form'); - -import FormGridExample from '../examples/FormGrid'; -const FormGridExampleSource = require('!!raw-loader!../examples/FormGrid'); - -import FormGridFormRowExample from '../examples/FormGridFormRow'; -const FormGridFormRowExampleSource = require('!!raw-loader!../examples/FormGridFormRow'); - -import FormInlineExample from '../examples/FormInline'; -const FormInlineExampleSource = require('!!raw-loader!../examples/FormInline'); - -import FormFeedbackExample from '../examples/FormFeedback'; -const FormFeedbackExampleSource = require('!!raw-loader!../examples/FormFeedback'); - -import InputTypeExample from '../examples/InputType'; -const InputTypeExampleSource = require('!!raw-loader!../examples/InputType'); - -import InlineCheckboxesExample from '../examples/InlineCheckboxes'; -const InlineCheckboxesExampleSource = require('!!raw-loader!../examples/InlineCheckboxes'); - -import InputSizingExample from '../examples/InputSizing'; -const InputSizingExampleSource = require('!!raw-loader!../examples/InputSizing'); - -import InputGridSizingExample from '../examples/InputGridSizing'; -const InputGridSizingExampleSource = require('!!raw-loader!../examples/InputGridSizing'); - -import LabelHiddenExample from '../examples/LabelHidden'; -const LabelHiddenExampleSource = require('!!raw-loader!../examples/LabelHidden'); - -export default class FormPage extends React.Component { - render() { - return ( -
- -
- -
- 
-          
-            {FormExampleSource}
-          
-
- - Properties - 
-          
-{`Input.propTypes = {
-  children: PropTypes.node,
-  // type can be things like text, password, (typical input types) as well as select and textarea, providing children as you normally would to those.
-  type: PropTypes.string,
-  size: PropTypes.string,
-  bsSize: PropTypes.string,
-  state: deprecated(PropTypes.string, 'Please use the prop "valid"'),
-  valid: PropTypes.bool, // applied the is-valid class when true, does nothing when false
-  invalid: PropTypes.bool, // applied the is-invalid class when true, does nothing when false
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  // ref will only get you a reference to the Input component, use innerRef to get a reference to the DOM input (for things like focus management).
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  static: deprecated(PropTypes.bool, 'Please use the prop "plaintext"'),
-  plaintext: PropTypes.bool,
-  addon: PropTypes.bool,
-  className: PropTypes.string,
-  cssModule: PropTypes.object,
-};
-
-Form.propTypes = {
-  children: PropTypes.node,
-  inline: PropTypes.bool,
-  // Pass in a Component to override default element
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), // default: 'form'
-  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
-  className: PropTypes.string,
-  cssModule: PropTypes.object,
-};
-
-FormFeedback.propTypes = {
-  children: PropTypes.node,
-  // Pass in a Component to override default element
-  tag: PropTypes.string, // default: 'div'
-  className: PropTypes.string,
-  cssModule: PropTypes.object,
-  valid: PropTypes.bool, // default: undefined
-  // The parent element must contain the 'position: relative' style to work
-  tooltip: PropTypes.bool
-};
-
-FormGroup.propTypes = {
-  children: PropTypes.node,
-  // Applied the row class when true, does nothing when false
-  row: PropTypes.bool,
-  // Applied the form-check class when true, mb-3 when false
-  check: PropTypes.bool,
-  inline: PropTypes.bool,
-  // Applied the disabled class when the check and disabled props are true, does nothing when false
-  disabled: PropTypes.bool,
-  // Pass in a Component to override default element
-  tag: PropTypes.string, // default: 'div'
-  className: PropTypes.string,
-  cssModule: PropTypes.object,
-};
-
-FormText.propTypes = {
-  children: PropTypes.node,
-  inline: PropTypes.bool,
-  // Pass in a Component to override default element
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), // default: 'small'
-  color: PropTypes.string, // default: 'muted'
-  className: PropTypes.string,
-  cssModule: PropTypes.object,
-};`}
-          
-
- - Form Grid -
- -
- 
-          
-            {FormGridExampleSource}
-          
-
- - Form Grid with Form Row -
- -
- 
-          
-            {FormGridFormRowExampleSource}
-          
-
- - Inline Form -
- -
- 
-          
-            {FormInlineExampleSource}
-          
-
- - Form Validation -
- -
- 
-          
-            {FormFeedbackExampleSource}
-          
-
- - Input Types -
- -
- 
-          
-            {InputTypeExampleSource}
-          
-
- - Inline checkboxes -
- -
- 
-          
-            {InlineCheckboxesExampleSource}
-          
-
- - Input Sizing -
- -
- 
-          
-            {InputSizingExampleSource}
-          
-
- - Input Grid Sizing -
- -
- 
-          
-            {InputGridSizingExampleSource}
-          
-
- - Hidden Labels -
- -
- 
-          
-            {LabelHiddenExampleSource}
-          
-
-
- ); - } -} diff --git a/docs/lib/Components/InputGroupPage.js b/docs/lib/Components/InputGroupPage.js deleted file mode 100644 index 1206b66f5..000000000 --- a/docs/lib/Components/InputGroupPage.js +++ /dev/null @@ -1,126 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import PageTitle from '../UI/PageTitle'; -import SectionTitle from '../UI/SectionTitle'; -import OverviewExample from '../examples/InputGroupOverview'; -const OverviewExampleSource = require('!!raw-loader!../examples/InputGroupOverview'); -import AddonExample from '../examples/InputGroupAddon'; -const AddonExampleSource = require('!!raw-loader!../examples/InputGroupAddon'); -import AddonSizingExample from '../examples/InputGroupSizing'; -const AddonSizingExampleSource = require('!!raw-loader!../examples/InputGroupSizing'); -import ButtonExample from '../examples/InputGroupButton'; -const ButtonExampleSource = require('!!raw-loader!../examples/InputGroupButton'); -import ButtonShorthandExample from '../examples/InputGroupButtonShorthand'; -const ButtonShorthandExampleSource = require('!!raw-loader!../examples/InputGroupButtonShorthand'); - -export default class InputGroupPage extends React.Component { - constructor(props) { - super(props); - - this.toggle = this.toggle.bind(this); - this.state = { - dropdownOpen: false - }; - } - - toggle() { - this.setState({ - dropdownOpen: !this.state.dropdownOpen - }); - } - - render() { - return ( -
- -
- -
- 
-          
-            {OverviewExampleSource}
-          
-
-

Properties

- 
-          
-{`InputGroup.propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  size: PropTypes.string,
-  className: PropTypes.string
-};
-
-InputGroupButton.propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  addonType: PropTypes.oneOf(['prepend', 'append']).isRequired,
-  children: PropTypes.node,
-  groupClassName: PropTypes.string, // only used in shorthand
-  groupAttributes: PropTypes.object, // only used in shorthand
-  className: PropTypes.string
-};`}
-          
-
- Addons -
-
- -
-
- 
-          
-            {AddonExampleSource}
-          
-
- - Input Group Sizing -
-
- -
-
- 
-          
-            {AddonSizingExampleSource}
-          
-
- - Buttons / Dropdowns -
-
- -
-
- 
-          
-            {ButtonExampleSource}
-          
-
- - Button Shorthand (DEPRECATED) -

- Button shorthand is deprecated. Below are the updated examples of how to use InputGroupAddon to - accomplish the same output. -

-

- Button shorthand is a convenience method for adding just a button. It is triggered when only a single string - is the child. A Button will be created and all of the props will be passed to it with the exception of - groupClassName and groupAttributes, which are used to added classes and attributes - to the wrapping container. This means you can add your onClick and other handlers directly to - InputGroupButton. If you want your string to not be wrapped in a button, then you really want to - use InputGroupAddon (see Addons above for that). -

-
-
- -
-
- 
-          
-            {ButtonShorthandExampleSource}
-          
-
-
- ); - } -} diff --git a/docs/lib/Components/LayoutPage.js b/docs/lib/Components/LayoutPage.js deleted file mode 100644 index 402bc9b4f..000000000 --- a/docs/lib/Components/LayoutPage.js +++ /dev/null @@ -1,105 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import PageTitle from '../UI/PageTitle'; -import SectionTitle from '../UI/SectionTitle'; -import LayoutExample from '../examples/Layout'; -import LayoutRowColsExample from '../examples/LayoutRowCols'; -import ContainerResponsiveExample from '../examples/ContainerResponsive'; - -const LayoutExampleSource = require('!!raw-loader!../examples/Layout'); -const LayoutRowColsExampleSource = require('!!raw-loader!../examples/LayoutRowCols'); -const ContainerResponsiveExampleSource = require('!!raw-loader!../examples/ContainerResponsive'); - -export default class LayoutsPage extends React.Component { - render() { - return ( -
- -
- -
- 
-          
-            {LayoutExampleSource}
-          
-
-

Container Properties

- 
-          
-{`Container.propTypes = {
-  fluid: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
-  // applies .container-fluid class if bool or .container-{breakpoint} if string
-}`}
-          
-
-

Row Properties

- 
-          
-{`Row.propTypes = {
-  noGutters: PropTypes.bool,
-  // see https://reactstrap.github.io/components/form Form Grid with Form Row
-  form: PropTypes.bool,
-  xs: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  sm: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  md: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  lg: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  xl: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  xxl: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-}`}
-          
-
-

Col Properties

- 
-          
-{`const stringOrNumberProp = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
-const columnProps = PropTypes.oneOfType([
-  PropTypes.string,
-  PropTypes.number,
-  PropTypes.bool,
-  PropTypes.shape({
-    size: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
-    // example size values:
-    // 12 || "12" => col-12 or col-\`width\`-12
-    // auto => col-auto or col-\`width\`-auto
-    // true => col or col-\`width\`
-    order: stringOrNumberProp,
-    offset: stringOrNumberProp
-  })
-]);
-
-Col.propTypes = {
-  xs: columnProps,
-  sm: columnProps,
-  md: columnProps,
-  lg: columnProps,
-  xl: columnProps,
-  xxl: columnProps,
-  // override the predefined width (the ones above) with your own custom widths.
-  // see https://github.com/reactstrap/reactstrap/issues/297#issuecomment-273556116
-  widths: PropTypes.array,
-}`}
-          
-
-

Container

-
- -
- 
-          
-            {ContainerResponsiveExampleSource}
-          
-
-

Row Columns

-
- -
- 
-          
-            {LayoutRowColsExampleSource}
-          
-
-
- ); - } -} diff --git a/docs/lib/Components/ListGroupPage.js b/docs/lib/Components/ListGroupPage.js deleted file mode 100644 index bdd21b9ed..000000000 --- a/docs/lib/Components/ListGroupPage.js +++ /dev/null @@ -1,139 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import PageTitle from '../UI/PageTitle'; -import SectionTitle from '../UI/SectionTitle'; -import ListGroupExample from '../examples/ListGroup'; -import ListGroupBadgeExample from '../examples/ListGroupBadge'; -import ListGroupDisabledItemsExample from '../examples/ListGroupDisabledItems'; -import ListGroupAnchorsAndButtonsExample from '../examples/ListGroupAnchorsAndButtons'; -import ListGroupContextualClassesExample from '../examples/ListGroupContextualClasses'; -import ListGroupCustomContentExample from '../examples/ListGroupCustomContent'; -import ListGroupFlushExample from '../examples/ListGroupFlush'; -import ListGroupHorizontalExample from '../examples/ListGroupHorizontal'; -import ListGroupNumberedExample from '../examples/ListGroupNumbered'; - -const ListGroupBadgeExampleSource = require('!!raw-loader!../examples/ListGroupBadge'); -const ListGroupExampleSource = require('!!raw-loader!../examples/ListGroup'); -const ListGroupDisabledItemsExampleSource = require('!!raw-loader!../examples/ListGroupDisabledItems'); -const ListGroupAnchorsAndButtonsExampleSource = require('!!raw-loader!../examples/ListGroupAnchorsAndButtons'); -const ListGroupContextualClassesExampleSource = require('!!raw-loader!../examples/ListGroupContextualClasses'); -const ListGroupCustomContentExampleSource = require('!!raw-loader!../examples/ListGroupCustomContent'); -const ListGroupFlushExampleSource = require('!!raw-loader!../examples/ListGroupFlush') -const ListGroupHorizontalExampleSource = require("!!raw-loader!../examples/ListGroupHorizontal"); -const ListGroupNumberedExampleSource = require("!!raw-loader!../examples/ListGroupNumbered"); - -export default class ListGroupPage extends React.Component { - render() { - return ( -
- -
- -
- 
-          
-            {ListGroupExampleSource}
-          
-
-

Properties

- 
-          
-{
-  `ListGroup.propTypes = {
-    tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-    // boolean to render list group items edge-to-edge in a parent container
-    flush: PropTypes.bool,
-    // boolean to render list group items horizontal. string for specific breakpoint, or true to be always horizontal
-    horizontal: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-    className: PropTypes.string,
-    cssModule: PropTypes.object,
-  }`
-            }
-          
-
- - Tags -
- -
- 
-          
-            {ListGroupBadgeExampleSource}
-          
-
- - Disabled items -
- -
- 
-          
-            {ListGroupDisabledItemsExampleSource}
-          
-
- - Anchors and buttons -
-

Note: you need add action props to make these buttons fit the list.

- -
- 
-          
-            {ListGroupAnchorsAndButtonsExampleSource}
-          
-
- - Contextual classes -
- -
- 
-          
-            {ListGroupContextualClassesExampleSource}
-          
-
- - Custom content -
- -
- 
-          
-            {ListGroupCustomContentExampleSource}
-          
-
- - Flush -
- -
- 
-          
-            {ListGroupFlushExampleSource}
-          
-
- - Horizontal -
- -
- 
-          
-            {ListGroupHorizontalExampleSource}
-          
-
- - Numbered -
- -
- 
-          
-            {ListGroupNumberedExampleSource}
-          
-
-
- ); - } -} diff --git a/docs/lib/Components/ListPage.js b/docs/lib/Components/ListPage.js deleted file mode 100644 index b8f391fb4..000000000 --- a/docs/lib/Components/ListPage.js +++ /dev/null @@ -1,62 +0,0 @@ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import PageTitle from '../UI/PageTitle'; -import ListInlineExample from '../examples/ListInline'; -import ListUnstyledExample from '../examples/ListUnstyled'; - -const ListInlineExampleSource = require('!!raw-loader!../examples/ListInline'); -const ListUnstyledExampleSource = require('!!raw-loader!../examples/ListUnstyled'); - -export default class ListPage extends React.Component { - render() { - return ( -
- -
- -
- 
-          
-            {ListUnstyledExampleSource}
-          
-
- - Inline -
- -
- 
-          
-            {ListInlineExampleSource}
-          
-
- -

List Properties

- 
-          
-{
-`List.propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string,
-  cssModule: PropTypes.object,
-  type: PropTypes.string
-};`
-            }
-          
-
-

ListInlineItem Properties

- 
-          
-{
-`ListInlineItem.propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string,
-  cssModule: PropTypes.object
-};`
-            }
-          
-
-
- ); - } -} diff --git a/docs/lib/Components/MediaPage.js b/docs/lib/Components/MediaPage.js deleted file mode 100644 index 9f583ab42..000000000 --- a/docs/lib/Components/MediaPage.js +++ /dev/null @@ -1,81 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import PageTitle from '../UI/PageTitle'; -import SectionTitle from '../UI/SectionTitle'; - -import MediaExample from '../examples/Media'; -const MediaExampleSource = require('!!raw-loader!../examples/Media'); - -import MediaNestedExample from '../examples/MediaNested'; -const MediaNestedExampleSource = require('!!raw-loader!../examples/MediaNested'); - -import MediaAlignmentExample from '../examples/MediaAlignment'; -const MediaAlignmentExampleSource = require('!!raw-loader!../examples/MediaAlignment'); - -import MediaListExample from '../examples/MediaList'; -const MediaListExampleSource = require('!!raw-loader!../examples/MediaList'); - -export default class MediaPage extends React.Component { - render() { - return ( -
- -
- -
- 
-          
-            {MediaExampleSource}
-          
-
-

Properties

- 
-          
-{`Media.propTypes = {
-  body: PropTypes.bool,
-  bottom: PropTypes.bool,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  heading: PropTypes.bool,
-  left: PropTypes.bool,
-  list: PropTypes.bool,
-  middle: PropTypes.bool,
-  object: PropTypes.bool,
-  right: PropTypes.bool,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  top: PropTypes.bool,
-};`}
-          
-
-

Nesting

-
- -
- 
-          
-            {MediaNestedExampleSource}
-          
-
-

Alignment

-
- -
- 
-          
-            {MediaAlignmentExampleSource}
-          
-
-

Media list

-
- -
- 
-          
-            {MediaListExampleSource}
-          
-
-
- ); - } -} diff --git a/docs/lib/Components/ModalsPage.js b/docs/lib/Components/ModalsPage.js deleted file mode 100644 index 4d6d63e77..000000000 --- a/docs/lib/Components/ModalsPage.js +++ /dev/null @@ -1,280 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { PrismCode } from 'react-prism'; - -import PageTitle from '../UI/PageTitle'; -import ModalExample from '../examples/Modal'; -import ModalBackdropExample from '../examples/ModalBackdrop'; -import ModalNestedExample from '../examples/ModalNested'; -import ModalCustomTimeoutExample from '../examples/ModalCustomTimeout'; -import ModalFadelessExample from '../examples/ModalFadeless'; -import ModalFullscreenExample from '../examples/ModalFullscreen'; -import ModalExternalExample from '../examples/ModalExternal'; -import ModalCustomCloseIconExample from '../examples/ModalCustomCloseIcon'; -import ModalCustomCloseButtonExample from '../examples/ModalCustomCloseButton'; -import ModalDestructuringExample from '../examples/ModalDestructuring'; -import ModalFocusAfterClose from '../examples/ModalFocusAfterClose'; - -const ModalBackdropExampleSource = require('!!raw-loader!../examples/ModalBackdrop'); -const ModalCustomCloseButtonExampleSource = require('!!raw-loader!../examples/ModalCustomCloseButton'); -const ModalCustomCloseIconExampleSource = require('!!raw-loader!../examples/ModalCustomCloseIcon'); -const ModalCustomTimeoutExampleSource = require('!!raw-loader!../examples/ModalCustomTimeout'); -const ModalExampleSource = require('!!raw-loader!../examples/Modal'); -const ModalExternalExampleSource = require('!!raw-loader!../examples/ModalExternal'); -const ModalFadelessExampleSource = require('!!raw-loader!../examples/ModalFadeless'); -const ModalFullscreenExampleSource = require('!!raw-loader!../examples/ModalFullscreen'); - -const ModalNestedExampleSource = require('!!raw-loader!../examples/ModalNested'); -const ModalDestructuringExampleSource = require('!!raw-loader!../examples/ModalDestructuring'); -const ModalFocusOnDestroyExampleSource = require('!!raw-loader!../examples/ModalFocusAfterClose'); - -const ModalsPage = () => { - return ( -
- -
-
-
- -
-
- -
-
-
- 
-        
-          {ModalExampleSource}
-        
-
-

Properties

- 
-        
-          {`Modal.propTypes = {
-  // boolean to control the state of the popover
-  isOpen:  PropTypes.bool,
-  autoFocus: PropTypes.bool,
-  // if modal should be centered vertically in viewport
-  centered: PropTypes.bool,
-  // if modal should be fullscreen
-  fullscreen: PropTypes.oneOfType([
-    PropTypes.bool, // always fullscreen
-    PropTypes.oneOf(['sm', 'md', 'lg', 'xl']), // fullscreen below breakpoints
-  ]),
-  // corresponds to bootstrap's modal sizes, ie. 'lg' or 'sm'
-  size: PropTypes.string,
-  // callback for toggling isOpen in the controlling component
-  toggle:  PropTypes.func,
-  role: PropTypes.string, // defaults to "dialog"
-  // used to reference the ID of the title element in the modal
-  labelledBy: PropTypes.string,
-  keyboard: PropTypes.bool,
-  // control backdrop, see http://v4-alpha.getbootstrap.com/components/modal/#options
-  backdrop: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.oneOf(['static'])
-  ]),
-  // if body of modal should be scrollable when content is long
-  scrollable: PropTypes.bool,
-  // allows for a node/component to exist next to the modal (outside of it). Useful for external close buttons
-  external: PropTypes.node,
-  // called on componentDidMount
-  onEnter: PropTypes.func,
-  // called on componentWillUnmount
-  onExit: PropTypes.func,
-  // called when done transitioning in
-  onOpened: PropTypes.func,
-  // called when done transitioning out
-  onClosed: PropTypes.func,
-  className: PropTypes.string,
-  wrapClassName: PropTypes.string,
-  modalClassName: PropTypes.string,
-  backdropClassName: PropTypes.string,
-  contentClassName: PropTypes.string,
-  // boolean to control whether the fade transition occurs (default: true)
-  fade: PropTypes.bool,
-  cssModule: PropTypes.object,
-  // zIndex defaults to 1000.
-  zIndex: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string,
-  ]),
-  // backdropTransition - controls backdrop transition
-  // timeout is 150ms by default to match bootstrap
-  // see [Fade](/components/fade/) for more details
-  backdropTransition: PropTypes.shape(Fade.propTypes),
-  // modalTransition - controls modal transition
-  // timeout is 300ms by default to match bootstrap
-  // see [Fade](/components/fade/) for more details
-  modalTransition: PropTypes.shape(Fade.propTypes),
-  innerRef: PropTypes.object,
-  // if modal should be destructed/removed from DOM after closing
-  unmountOnClose: PropTypes.bool, // defaults to true
-  // if the element which triggered the modal to open should focused after the modal closes (see example somewhere below)
-  returnFocusAfterClose: PropTypes.bool, // defaults to true
-  // container to append the modal to
-  container: PropTypes.oneOfType([PropTypes.string, PropTypes.func, DOMElement]),
-  trapFocus: PropTypes.bool // Traps focus within modal
-}`}
-        
-
- -

Fullscreen Modals

- -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
- 
-        
-          {ModalFullscreenExampleSource}
-        
-
- -

Backdrop

-
-
-
- -
-
-
- 
-        
-          {ModalBackdropExampleSource}
-        
-
- -

Nested Modals

-
-
-
- -
-
-
- 
-        
-          {ModalNestedExampleSource}
-        
-
- -

Modals with Custom Transition Timeouts

-
-
-
- -
-
-
- 
-        
-          {ModalCustomTimeoutExampleSource}
-        
-
- -

Modals without Fade Effect

-
-
-
- -
-
-
- 
-        
-          {ModalFadelessExampleSource}
-        
-
- -

Modals with external button

-
-
-
- -
-
-
- 
-        
-          {ModalExternalExampleSource}
-        
-
- -

Modals with custom close icon

-
-
-
- -
-
-
- 
-        
-          {ModalCustomCloseIconExampleSource}
-        
-
-

Modals with custom close button

-
-
-
- -
-
-
- 
-        
-          {ModalCustomCloseButtonExampleSource}
-        
-
- -

Destructuring

-
-
-
- -
-
-
- 
-        
-          {ModalDestructuringExampleSource}
-        
-
- -

Focus after close

-
-
-
- -
-
-
- 
-         
-           {ModalFocusOnDestroyExampleSource}
-         
-
-
- ); -}; - -export default ModalsPage; diff --git a/docs/lib/Components/NavbarPage.js b/docs/lib/Components/NavbarPage.js deleted file mode 100644 index 83ea9a6b2..000000000 --- a/docs/lib/Components/NavbarPage.js +++ /dev/null @@ -1,85 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { Link } from 'react-router'; -import { PrismCode } from 'react-prism'; -import PageTitle from '../UI/PageTitle'; -import SectionTitle from '../UI/SectionTitle'; -import NavbarExample from '../examples/Navbar'; -const NavbarExampleSource = require('!!raw-loader!../examples/Navbar'); -import NavbarTogglerExample from '../examples/NavbarToggler'; -const NavbarTogglerExampleSource = require('!!raw-loader!../examples/NavbarToggler'); - -export default class NavsPage extends React.Component { - render() { - return ( -
- -
- -
- 
-          
-            {NavbarExampleSource}
-          
-
-

Navbar Properties

-

See also Navs for additional components and PropTypes.

- 
-          
-{`Navbar.propTypes = {
-  light: PropTypes.bool,
-  dark: PropTypes.bool,
-  fixed: PropTypes.string,
-  color: PropTypes.string,
-  role: PropTypes.string,
-  expand: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
-  // pass in custom element to use
-}`}
-          
-
-

NavbarBrand Properties

- 
-          
-{`NavbarBrand.propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
-  // pass in custom element to use
-}`}
-          
-
-

NavbarText Properties

- 
-          
-{`NavbarText.propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
-  // pass in custom element to use
-}`}
-          
-
- NavbarToggler -

- Place the NavbarToggler after NavbarBrand to have it appear on the right (typical setup). - Reverse the order to have it appear on the left -

-
- -
- 
-          
-            {NavbarTogglerExampleSource}
-          
-
-

NavbarToggler Properties

- 
-          
-{`NavbarToggler.propTypes = {
-  type: PropTypes.string,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
-  // pass in custom element to use
-}`}
-          
-
-
- ); - } -} diff --git a/docs/lib/Components/NavsPage.js b/docs/lib/Components/NavsPage.js deleted file mode 100644 index b5e07a453..000000000 --- a/docs/lib/Components/NavsPage.js +++ /dev/null @@ -1,98 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import PageTitle from '../UI/PageTitle'; -import SectionTitle from '../UI/SectionTitle'; -import NavsExample from '../examples/Navs'; -const NavsExampleSource = require('!!raw-loader!../examples/Navs'); -import NavVerticalExample from '../examples/NavVertical'; -const NavVerticalExampleSource = require('!!raw-loader!../examples/NavVertical'); -import NavTabsExample from '../examples/NavTabs'; -const NavTabsExampleSource = require('!!raw-loader!../examples/NavTabs'); -import NavPillsExample from '../examples/NavPills'; -const NavPillsExampleSource = require('!!raw-loader!../examples/NavPills'); - -export default class NavssPage extends React.Component { - render() { - return ( -
- -
- -
- 
-          
-            {NavsExampleSource}
-          
-
-

Nav Properties

- 
-          
-{`Nav.propTypes = {
-  tabs: PropTypes.bool,
-  pills: PropTypes.bool,
-  card: PropTypes.bool,
-  justified: PropTypes.bool,
-  fill: PropTypes.bool,
-  vertical: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  horizontal: PropTypes.string,
-  navbar: PropTypes.bool,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
-  // pass in custom element to use
-}`}
-          
-
-

NavItem Properties

- 
-          
-{`NavItem.propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  active: PropTypes.bool,
-  // pass in custom element to use
-}`}
-          
-
-

NavLink Properties

- 
-          
-{`NavLink.propTypes = {
-  disabled: PropTypes.bool,
-  active: PropTypes.bool,
-  // pass in custom element to use
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  // ref will only get you a reference to the NavLink component, use innerRef to get a reference to the DOM element (for things like focus management).
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
-}`}
-          
-
- Vertical -
- -
- 
-          
-            {NavVerticalExampleSource}
-          
-
- Tabs -
- -
- 
-          
-            {NavTabsExampleSource}
-          
-
- Pills -
- -
- 
-          
-            {NavPillsExampleSource}
-          
-
-
- ); - } -} diff --git a/docs/lib/Components/OffcanvasPage.js b/docs/lib/Components/OffcanvasPage.js deleted file mode 100644 index d5f9eeeae..000000000 --- a/docs/lib/Components/OffcanvasPage.js +++ /dev/null @@ -1,80 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import PageTitle from '../UI/PageTitle'; -import SectionTitle from '../UI/SectionTitle'; - -import OffcanvasExample from '../examples/Offcanvas'; -const OffcanvasExampleSource = require('!!raw-loader!../examples/Offcanvas'); - -export default class OffcanvasPage extends React.Component { - render() { - return ( -
- -
- -
- 
-          
-            {OffcanvasExampleSource}
-          
-
- Properties - 
-          
-{`
-Offcanvas.propTypes = {
-  autoFocus: PropTypes.bool,
-  backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['static'])]),
-  backdropClassName: PropTypes.string,
-  backdropTransition: FadePropTypes,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  container: targetPropType,
-  cssModule: PropTypes.object,
-  direction: PropTypes.oneOf(['start', 'end', 'bottom', 'left', 'right']),
-  fade: PropTypes.bool,
-  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func,]),
-  isOpen: PropTypes.bool,
-  keyboard: PropTypes.bool,
-  labelledBy: PropTypes.string,
-  offcanvasClassName: PropTypes.string,
-  offcanvasTransition: FadePropTypes,
-  onClosed: PropTypes.func,
-  onEnter: PropTypes.func,
-  onExit: PropTypes.func,
-  onOpened: PropTypes.func,
-  returnFocusAfterClose: PropTypes.bool,
-  role: PropTypes.string,
-  scrollable: PropTypes.bool,
-  toggle: PropTypes.func,
-  trapFocus: PropTypes.bool,
-  unmountOnClose: PropTypes.bool,
-  wrapClassName: PropTypes.string,
-  zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string,])
-}
-
-OffcanvasBody.propTypes = {
-  tag: tagPropType,
-  className: PropTypes.string,
-  cssModule: PropTypes.object,
-}
-
-OffcanvasHeader.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  close: PropTypes.object,
-  closeAriaLabel: PropTypes.string,
-  cssModule: PropTypes.object,
-  tag: tagPropType,
-  toggle: PropTypes.func,
-  wrapTag: tagPropType
-}
-`}
-          
-
-
- ); - } -} diff --git a/docs/lib/Components/PaginationPage.js b/docs/lib/Components/PaginationPage.js deleted file mode 100644 index 1d5131600..000000000 --- a/docs/lib/Components/PaginationPage.js +++ /dev/null @@ -1,98 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import PageTitle from '../UI/PageTitle'; -import SectionTitle from '../UI/SectionTitle'; - -import PaginationExample from '../examples/Pagination'; -const PaginationExampleSource = require('!!raw-loader!../examples/Pagination'); - -import PaginationStateExample from '../examples/PaginationState'; -const PaginationStateExampleSource = require('!!raw-loader!../examples/PaginationState'); - -import PaginationSizingLargeExample from '../examples/PaginationSizingLarge'; -const PaginationSizingLargeExampleSource = require('!!raw-loader!../examples/PaginationSizingLarge'); - -import PaginationSizingSmallExample from '../examples/PaginationSizingSmall'; -const PaginationSizingSmallExampleSource = require('!!raw-loader!../examples/PaginationSizingSmall'); - -export default class PaginationPage extends React.Component { - render() { - return ( -
- -
- -
- 
-          
-            {PaginationExampleSource}
-          
-
-

Properties

- 
-          
-{`Pagination.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  listClassName: PropTypes.string,
-  cssModule: PropTypes.object,
-  size: PropTypes.string,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  listTag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  'aria-label': PropTypes.string
-};
-
-PaginationItem.propTypes = {
-  active: PropTypes.bool,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  cssModule: PropTypes.object,
-  disabled: PropTypes.bool,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-};
-
-PaginationLink.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  cssModule: PropTypes.object,
-  next: PropTypes.bool,
-  previous: PropTypes.bool,
-  first: PropTypes.bool,
-  last: PropTypes.bool,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  'aria-label': PropTypes.string
-};
-`}
-          
-
- Disabled and active states -
- -
- 
-          
-            {PaginationStateExampleSource}
-          
-
- Sizing -
- -
- 
-          
-            {PaginationSizingLargeExampleSource}
-          
-
-
- -
- 
-          
-            {PaginationSizingSmallExampleSource}
-          
-
-
- ); - } -} diff --git a/docs/lib/Components/PlaceholderPage.js b/docs/lib/Components/PlaceholderPage.js deleted file mode 100644 index 31a602641..000000000 --- a/docs/lib/Components/PlaceholderPage.js +++ /dev/null @@ -1,97 +0,0 @@ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import PageTitle from '../UI/PageTitle'; -import SectionTitle from '../UI/SectionTitle'; - -import PlaceholderExample from '../examples/Placeholder' -const PlaceholderExampleSource = require('!!raw-loader!../examples/Placeholder') - -import PlaceholderWidthExample from '../examples/PlaceholderWidth'; -const PlaceholderWidthExampleSource = require('!!raw-loader!../examples/PlaceholderWidth'); - -import PlaceholderColorExample from '../examples/PlaceholderColor'; -const PlaceholderColorExampleSource = require('!!raw-loader!../examples/PlaceholderColor'); - -import PlaceholderSizingExample from '../examples/PlaceholderSizing'; -const PlaceholderSizingExampleSource = require('!!raw-loader!../examples/PlaceholderSizing'); - -import PlaceholderAnimationExample from '../examples/PlaceholderAnimation'; -const PlaceholderAnimationExampleSource = require('!!raw-loader!../examples/PlaceholderAnimation'); - -export default class Placeholder extends React.Component { - render() { - return ( -
- -
- -
- 
-          
-            {PlaceholderExampleSource}
-          
-
-

Properties

- 
-          
-            {`
-Placeholder.propTypes = {
-  color: PropTypes.string,
-  tag: tagPropType,
-  animation: PropTypes.oneOf(['glow', 'wave']),
-  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
-  className: PropTypes.string,
-  size: PropTypes.oneOf(['lg', 'sm', 'xs']),
-  widths: PropTypes.array,
-};
-
-PlaceholderButton.propTypes = {
-  size: PropTypes.string,
-  color: PropTypes.string,
-  outline: PropTypes.bool,
-  className: PropTypes.string,
-  tag: tagPropType
-}
-            `}
-          
-
- Width -
- -
- 
-          
-            {PlaceholderWidthExampleSource}
-          
-
- Animation -
- -
- 
-          
-            {PlaceholderAnimationExampleSource}
-          
-
- Color -
- -
- 
-          
-            {PlaceholderColorExampleSource}
-          
-
- Sizing -
- -
- 
-          
-            {PlaceholderSizingExampleSource}
-          
-
-
- ) - } -} \ No newline at end of file diff --git a/docs/lib/Components/PopoversPage.js b/docs/lib/Components/PopoversPage.js deleted file mode 100644 index 863bfa284..000000000 --- a/docs/lib/Components/PopoversPage.js +++ /dev/null @@ -1,142 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import PageTitle from '../UI/PageTitle'; -import SectionTitle from '../UI/SectionTitle'; -import PopoverExample from '../examples/Popover'; -const PopoverExampleSource = require('!!raw-loader!../examples/Popover'); -import PopoverExampleMulti from '../examples/PopoverMulti'; -const PopoverExampleMultiSource = require('!!raw-loader!../examples/PopoverMulti'); -import PopoverFocusExample from '../examples/PopoverFocus'; -const PopoverFocusExampleSource = require('!!raw-loader!../examples/PopoverFocus'); -import UncontrolledPopoverExample from '../examples/PopoverUncontrolled'; -const UncontrolledPopoverExampleSource = require('!!raw-loader!../examples/PopoverUncontrolled'); -import PopoverUpdateExample from '../examples/PopoverUpdate'; -const PopoverUpdateExampleSource = require('!!raw-loader!../examples/PopoverUpdate'); - -export default class PopoversPage extends React.Component { - render() { - return ( -
- -

Popovers are built with https://popper.js.org/ via https://github.com/popperjs/react-popper.

-
- -
- 
-          
-            {PopoverExampleSource}
-          
-
-

Properties

- 
-          
-{`Popover.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  // space separated list of triggers (e.g. "click hover focus")
-  trigger: PropTypes.string,
-  // boolean to control the state of the popover
-  isOpen:  PropTypes.bool,
-  // callback for toggling isOpen in the controlling component
-  toggle:  PropTypes.func,
-  // boundaries for popper, can be scrollParent, window, viewport, or any DOM element
-  boundariesElement: PropTypes.oneOfType([PropTypes.string, DOMElement]),
-  target:  PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.func,
-    DOMElement, // instanceof Element (https://developer.mozilla.org/en-US/docs/Web/API/Element)
-  ]).isRequired,
-  // Where to inject the popper DOM node, default to body
-  container: PropTypes.oneOfType([PropTypes.string, PropTypes.func, DOMElement]),
-  className: PropTypes.string,
-  // Apply class to the popper component
-  popperClassName: PropTypes.string,
-  // Apply class to the inner-popover
-  innerClassName: PropTypes.string,
-  disabled: PropTypes.bool,
-  hideArrow: PropTypes.bool,
-  placementPrefix: PropTypes.string,
-  delay: PropTypes.oneOfType([
-    PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }),
-    PropTypes.number,
-  ]),
-  placement: PropTypes.oneOf([
-    'auto',
-    'auto-start',
-    'auto-end',
-    'top',
-    'top-start',
-    'top-end',
-    'right',
-    'right-start',
-    'right-end',
-    'bottom',
-    'bottom-start',
-    'bottom-end',
-    'left',
-    'left-start',
-    'left-end',
-  ]),
-  // Custom modifiers that are passed to Popper.js, see https://popper.js.org/docs/v2/modifiers/
-  modifiers: PropTypes.array,
-  // https://popper.js.org/docs/v2/constructors/#strategy
-  strategy: PropTypes.string,
-  offset: PropTypes.arrayOf(PropTypes.number),
-
-  // Whether to show/hide the popover with a fade effect
-  // (default: true)
-  fade: PropTypes.bool,
-
-  // Whether to flip the direction of the popover if too close to
-  // the container edge
-  // (default: true)
-  flip: PropTypes.bool,
-}`}
-          
-
- Popovers Trigger -

Trigger each popover to see information about the trigger

-
- -
- 
-          
-            {PopoverFocusExampleSource}
-          
-
- Popovers Placements -
- -
- 
-          
-            {PopoverExampleMultiSource}
-          
-
- UncontrolledPopovers -
- -
- 
-          
-            {UncontrolledPopoverExampleSource}
-          
-
- Repositioning Popovers -

- If you need to reposition a popover due to content changes or target placement changes, use - the update function to manually reposition it. This function is exposed - as a render prop for children. -

-
- -
- 
-          
-            {PopoverUpdateExampleSource}
-          
-
-
- ); - } -} diff --git a/docs/lib/Components/ProgressPage.js b/docs/lib/Components/ProgressPage.js deleted file mode 100644 index 44f27a15e..000000000 --- a/docs/lib/Components/ProgressPage.js +++ /dev/null @@ -1,150 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import PageTitle from '../UI/PageTitle'; -import { Card, CardText } from 'reactstrap'; -import SectionTitle from '../UI/SectionTitle'; -import ProgressExample from '../examples/Progress'; -const ProgressExampleSource = require('!!raw-loader!../examples/Progress'); -import ProgressColorExample from '../examples/ProgressColor'; -const ProgressColorExampleSource = require('!!raw-loader!../examples/ProgressColor'); -import ProgressLabelsExample from '../examples/ProgressLabels'; -const ProgressLabelsExampleSource = require('!!raw-loader!../examples/ProgressLabels'); -import ProgressAnimatedExample from '../examples/ProgressAnimated'; -const ProgressAnimatedExampleSource = require('!!raw-loader!../examples/ProgressAnimated'); -import ProgressStripedExample from '../examples/ProgressStriped'; -const ProgressStripedExampleSource = require('!!raw-loader!../examples/ProgressStriped'); -import ProgressMultiExample from '../examples/ProgressMulti'; -const ProgressMultiExampleSource = require('!!raw-loader!../examples/ProgressMulti'); -import ProgressMaxExample from '../examples/ProgressMax'; -const ProgressMaxExampleSource = require('!!raw-loader!../examples/ProgressMax'); - -export default class ProgressPage extends React.Component { - render() { - return ( -
- -
- -
- 
-          
-            {ProgressExampleSource}
-          
-
-

Properties

- 
-          
-{`Progress.propTypes = {
-  multi: PropTypes.bool,
-  bar: PropTypes.bool, // used in combination with multi
-  tag: PropTypes.string,
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
-  min: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
-  max: PropTypes.oneOf([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
-  animated: PropTypes.bool,
-  striped: PropTypes.bool,
-  color: PropTypes.string,
-  className: PropTypes.string,
-  barStyle: PropTypes.object, // used to add style to the inner progress-bar element
-  barClassName: PropTypes.string, // used to add class to the inner progress-bar element
-  barAriaValueText: PropTypes.string,
-  barAriaLabelledBy: PropTypes.string,
-};
-
-Progress.defaultProps = {
-  tag: 'progress',
-  value: 0,
-  max: 100,
-};`}
-          
-
- - Color Variants -
-
- -
-
- 
-          
-            {ProgressColorExampleSource}
-          
-
- - Labels -
-
- -
-
- 
-          
-            {ProgressLabelsExampleSource}
-          
-
- - Striped -
-
- -
-
- 
-          
-            {ProgressStripedExampleSource}
-          
-
- - Animated -

- The animated prop also adds the striped prop; there is no need to pass both. -

-
-
- -
-
- 
-          
-            {ProgressAnimatedExampleSource}
-          
-
- - Multiple bars / Stacked -
-
- -
-
- 
-          
-            {ProgressMultiExampleSource}
-          
-
- - Max value -
-
- -
-
- 
-          
-            {ProgressMaxExampleSource}
-          
-
- -
- ); - } -} diff --git a/docs/lib/Components/SpinnersPage.js b/docs/lib/Components/SpinnersPage.js deleted file mode 100644 index 2eed19ec2..000000000 --- a/docs/lib/Components/SpinnersPage.js +++ /dev/null @@ -1,70 +0,0 @@ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import { Spinner } from 'reactstrap'; -import PageTitle from '../UI/PageTitle'; -import SectionTitle from '../UI/SectionTitle'; - -import SpinnerExample from '../examples/Spinner'; - -import SpinnerGrowerExample from '../examples/SpinnerGrower'; -const SpinnerExampleSource = require('!!raw-loader!../examples/Spinner'); -const SpinnerGrowerExampleSource = require('!!raw-loader!../examples/SpinnerGrower'); -export default class SpinnersPage extends React.Component { - render() { - return ( -
- -
- -
- 
-          {SpinnerExampleSource}
-
-

Properties

- 
-          
-            {`Spinner.propTypes = {
-  type: PropTypes.string, // default: 'border'
-  size: PropTypes.string,
-  color: PropTypes.string,
-  className: PropTypes.string,
-  cssModule: PropTypes.object,
-  children: PropTypes.string, // default: 'Loading...'
-};
-`}
-          
-
- Growing Spinner -
- -
- 
-          
-            {SpinnerGrowerExampleSource}
-          
-
- Sizes -
- {' '} - -
- 
-          
-            {`{' '}
-`}
-          
-
-
- {' '} - -
- 
-          
-            {`{' '}
-`}
-          
-
-
- ); - } -} diff --git a/docs/lib/Components/TablesPage.js b/docs/lib/Components/TablesPage.js deleted file mode 100644 index 04f172439..000000000 --- a/docs/lib/Components/TablesPage.js +++ /dev/null @@ -1,127 +0,0 @@ -/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ -import React from 'react'; -import { PrismCode } from 'react-prism'; -import PageTitle from '../UI/PageTitle'; -import SectionTitle from '../UI/SectionTitle'; - -import TableExample from '../examples/Table'; -import TableBorderedExample from '../examples/TableBordered'; -import TableBorderlessExample from '../examples/TableBorderless'; -import TableHoverExample from '../examples/TableHover'; -import TableDarkExample from '../examples/TableDark'; -import TableResponsiveExample from '../examples/TableResponsive'; -import TableSizingExample from '../examples/TableSizing'; -import TableStripedExample from '../examples/TableStriped'; - -const TableExampleSource = require('!!raw-loader!../examples/Table'); -const TableBorderedExampleSource = require('!!raw-loader!../examples/TableBordered'); -const TableBorderlessExampleSource = require('!!raw-loader!../examples/TableBorderless'); -const TableHoverExampleSource = require('!!raw-loader!../examples/TableHover'); -const TableDarkExampleSource = require('!!raw-loader!../examples/TableDark'); -const TableResponsiveExampleSource = require('!!raw-loader!../examples/TableResponsive'); -const TableSizingExampleSource = require('!!raw-loader!../examples/TableSizing'); -const TableStripedExampleSource = require('!!raw-loader!../examples/TableStriped'); - -export default class TablesPage extends React.Component { - render() { - return ( -
- -
-
- -
- 
-          
-            {TableExampleSource}
-          
-
-

Properties

- 
-        
-{`Table.propTypes = {
-// Pass in a Component to override default element
-tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-size: PropTypes.string,
-bordered: PropTypes.bool,
-borderless: PropTypes.bool,
-striped: PropTypes.bool,
-dark: PropTypes.bool,
-hover: PropTypes.bool,
-responsive: PropTypes.bool,
-// Custom ref handler that will be assigned to the "ref" of the inner  element
-innerRef: PropTypes.oneOfType([
-  PropTypes.func,
-  PropTypes.string,
-  PropTypes.object
-])
-};`}
-        
-        
-        Dark table
-        

-          
-        

-        
-          
-            {TableDarkExampleSource}
-          
-        

-        Striped rows
-        

-          
-        

-        
-          
-            {TableStripedExampleSource}
-          
-        

-        Bordered table
-        

-          
-        

-        
-          
-            {TableBorderedExampleSource}
-          
-        

-        Borderless table
-        

-          
-        

-        
-          
-            {TableBorderlessExampleSource}
-          
-        

-        Hoverable rows
-        

-          
-        

-        
-          
-            {TableHoverExampleSource}
-          
-        

-        Small table
-        

-          
-        

-        
-          
-            {TableSizingExampleSource}
-          
-        

-        Responsive table
-        

-          
-        

-        
-          
-            {TableResponsiveExampleSource}
-          
-        

-      
-    );
-  }
-}
diff --git a/docs/lib/Components/TabsPage.js b/docs/lib/Components/TabsPage.js
deleted file mode 100644
index fc62e660b..000000000
--- a/docs/lib/Components/TabsPage.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
-import React from 'react';
-import { PrismCode } from 'react-prism';
-import PageTitle from '../UI/PageTitle';
-
-import TabsExample from '../examples/Tabs';
-const TabsExampleSource = require('!!raw-loader!../examples/Tabs');
-
-export default function TabsPage() {
-  return (
-    

-      
-      

-      

-        
-      

-      
-        
-          {TabsExampleSource}
-        
-      

-    

-  );
-}
diff --git a/docs/lib/Components/ToastsPage.js b/docs/lib/Components/ToastsPage.js
deleted file mode 100644
index 6a79b5f00..000000000
--- a/docs/lib/Components/ToastsPage.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
-import React from 'react';
-import { PrismCode } from 'react-prism';
-import PageTitle from '../UI/PageTitle';
-import SectionTitle from '../UI/SectionTitle';
-
-import ToastExample from '../examples/Toast';
-const ToastExampleSource = require('!!raw-loader!../examples/Toast');
-
-import ToastHeaderIconExample from '../examples/ToastHeaderIcon';
-const ToastHeaderIconExampleSource = require('!!raw-loader!../examples/ToastHeaderIcon');
-
-import ToastDismissExample from '../examples/ToastDismiss';
-const ToastDismissExampleSource = require('!!raw-loader!../examples/ToastDismiss');
-
-import AlertUncontrolledDismissExample from '../examples/AlertUncontrolledDismiss';
-const AlertUncontrolledDismissExampleSource = require('!!raw-loader!../examples/AlertUncontrolledDismiss');
-
-import { AlertFadelessExample, UncontrolledAlertFadelessExample } from '../examples/AlertFadeless';
-const AlertFadelessExampleSource = require('!!raw-loader!../examples/AlertFadeless');
-
-export default class ToastsPage extends React.Component {
-  render() {
-    return (
-      

-        
-        

-          
-        

-        
-          
-            {ToastExampleSource}
-          
-        

-
-        Properties
-        
-          
-{`Toast.propTypes = {
-  className: PropTypes.string,
-  color: PropTypes.string, // default: 'success'
-  isOpen: PropTypes.bool,  // default: true
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  // Controls the transition of the toast fading in and out
-  // See [Fade](/components/fade/) for more details
-  transition: PropTypes.shape(Fade.propTypes),
-}`}
-          
-        

-
-        Header icons
-        

-          
-        

-        
-          
-            {ToastHeaderIconExampleSource}
-          
-        

-
-        Dismissing
-        

-          
-        

-        
-          
-            {ToastDismissExampleSource}
-          
-        

-      

-    );
-  }
-}
diff --git a/docs/lib/Components/TooltipsPage.js b/docs/lib/Components/TooltipsPage.js
deleted file mode 100644
index 688bc0027..000000000
--- a/docs/lib/Components/TooltipsPage.js
+++ /dev/null
@@ -1,156 +0,0 @@
-/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
-import React from 'react';
-import { PrismCode } from 'react-prism';
-import PageTitle from '../UI/PageTitle';
-import SectionTitle from '../UI/SectionTitle';
-import TooltipExample from '../examples/Tooltip';
-const TooltipExampleSource = require('!!raw-loader!../examples/Tooltip');
-import TooltipAutoHideExample from '../examples/TooltipAutoHide';
-const TooltipExampleAutoHideSource = require('!!raw-loader!../examples/TooltipAutoHide');
-import TooltipExampleMulti from '../examples/TooltipMulti';
-const TooltipExampleMultiSource = require('!!raw-loader!../examples/TooltipMulti');
-import TooltipExampleUncontrolled from '../examples/TooltipUncontrolled';
-const TooltipExampleUncontrolledSource = require('!!raw-loader!../examples/TooltipUncontrolled');
-import TooltipUpdateExample from '../examples/TooltipUpdate';
-const TooltipUpdateExampleSource = require('!!raw-loader!../examples/TooltipUpdate');
-
-export default class TooltipsPage extends React.Component {
-  render() {
-    return (
-      

-        
-        
Tooltips are built with https://popper.js.org/ via https://github.com/popperjs/react-popper.

-        

-          
-        

-        
-          
-            {TooltipExampleSource}
-          
-        

-        
Properties

-        
-          
-{`Tooltip.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  // space separated list of triggers (e.g. "click hover focus")
-  trigger: PropTypes.string,
-  // boundaries for popper, can be scrollParent, window, viewport, or any DOM element
-  boundariesElement: PropTypes.oneOfType([PropTypes.string, DOMElement]),
-  // boolean to control the state of the tooltip
-  isOpen: PropTypes.bool,
-  hideArrow: PropTypes.bool,
-  // callback for toggling isOpen in the controlling component. It will receive an object with info about the event that triggered it
-  toggle: PropTypes.func,
-  // target element or element ID, popover is attached to this element
-  target:  PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.func,
-    DOMElement, // instanceof Element (https://developer.mozilla.org/en-US/docs/Web/API/Element)
-  ]).isRequired,
-  // Where to inject the popper DOM node, default to body
-  container: PropTypes.oneOfType([PropTypes.string, PropTypes.func, DOMElement]),
-  // optionally override show/hide delays - default { show: 0, hide: 50 }
-  delay: PropTypes.oneOfType([
-    PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }),
-    PropTypes.number
-  ]),
-  className: PropTypes.string,
-  // Apply class to the popper component
-  popperClassName: PropTypes.string,
-  // Apply class to the inner-tooltip
-  innerClassName: PropTypes.string,
-  // Apply class to the arrow-tooltip ('arrow' by default)
-  arrowClassName: PropTypes.string,
-  // optionally hide tooltip when hovering over tooltip content - default true
-  autohide: PropTypes.bool,
-  // convenience attachments for popover
-  placement: PropTypes.oneOf([
-    'auto',
-    'auto-start',
-    'auto-end',
-    'top',
-    'top-start',
-    'top-end',
-    'right',
-    'right-start',
-    'right-end',
-    'bottom',
-    'bottom-start',
-    'bottom-end',
-    'left',
-    'left-start',
-    'left-end',
-  ]),
-  // Custom modifiers that are passed to Popper.js, see https://popper.js.org/docs/v2/modifiers/
-  modifiers: PropTypes.array,
-  // Whether the element the tooltip is pointing to has "position: fixed" styling. This is passed to Popper.js and
-  // will make the tooltip itself have "position: fixed" as well
-  positionFixed: PropTypes.bool,
-  offset: PropTypes.arrayOf(PropTypes.number),
-  // Custom ref handler that will be assigned to the "ref" of the 
 wrapping the tooltip elements
-  innerRef: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.string,
-    PropTypes.object
-  ]),
-
-  // Whether to show/hide the popover with a fade effect
-  // (default: true)
-  fade: PropTypes.bool,
-
-  // Whether to flip the direction of the popover if too close to
-  // the container edge
-  // (default: true)
-  flip: PropTypes.bool,
-}`}
-          
-        

-        Tooltip Disable Autohide
-        

-          
-        

-        
-          
-            {TooltipExampleAutoHideSource}
-          
-        

-        Tooltips List
-        

-          
-        

-        
-          
-            {TooltipExampleMultiSource}
-          
-        

-        Uncontrolled Tooltip
-        

-          For the most basic use-case an uncontrolled component can provide the functionality wanted without the need to manage/control the state of the component. UncontrolledTooltip does not require isOpen nor toggle props to work.
-        

-        

-          
-        

-        
-          
-            {TooltipExampleUncontrolledSource}
-          
-        

-        Repositioning Tooltips
-        

-          If you need to reposition a tooltip due to content changes or target placement changes, use
-          the update function to manually reposition it. This function is exposed
-          as a render prop for children.
-        

-        

-          
-        

-        
-          
-            {TooltipUpdateExampleSource}
-          
-        

-      

-    );
-  }
-}
diff --git a/docs/lib/Components/index.js b/docs/lib/Components/index.js
deleted file mode 100644
index 4421613ad..000000000
--- a/docs/lib/Components/index.js
+++ /dev/null
@@ -1,135 +0,0 @@
-import React from 'react';
-import Content from '../UI/Content';
-
-const items = [
-  {
-    name: 'Accordion',
-    to: '/components/accordion/'
-  },
-  {
-    name: 'Alerts',
-    to: '/components/alerts/'
-  },
-  {
-    name: 'Badge',
-    to: '/components/badge/'
-  },
-  {
-    name: 'Breadcrumbs',
-    to: '/components/breadcrumbs/'
-  },
-  {
-    name: 'Buttons',
-    to: '/components/buttons/'
-  },
-  {
-    name: 'Button Dropdown',
-    to: '/components/button-dropdown/'
-  },
-  {
-    name: 'Button Group',
-    to: '/components/button-group/'
-  },
-  {
-    name: 'Card',
-    to: '/components/card/'
-  },
-  {
-    name: 'Carousel',
-    to: '/components/carousel/'
-  },
-  {
-    name: 'Collapse',
-    to: '/components/collapse/'
-  },
-  {
-    name: 'Dropdowns',
-    to: '/components/dropdowns/'
-  },
-  {
-    name: 'Fade',
-    to: '/components/fade/'
-  },
-  {
-    name: 'Form',
-    to: '/components/form/'
-  },
-  {
-    name: 'Input Group',
-    to: '/components/input-group/'
-  },
-  {
-    name: 'Layout',
-    to: '/components/layout/'
-  },
-  {
-    name: 'List',
-    to: '/components/list/'
-  },
-  {
-    name: 'List Group',
-    to: '/components/listgroup/'
-  },
-  {
-    name: 'Media',
-    to: '/components/media/'
-  },
-  {
-    name: 'Modals',
-    to: '/components/modals/'
-  },
-  {
-    name: 'Navbar',
-    to: '/components/navbar/'
-  },
-  {
-    name: 'Navs',
-    to: '/components/navs/'
-  },
-  {
-    name: 'Offcanvas',
-    to: '/components/offcanvas/'
-  },
-  {
-    name: 'Placeholder',
-    to: '/components/placeholder/'
-  },
-  {
-    name: 'Spinners',
-    to: '/components/spinners/'
-  },
-  {
-    name: 'Toasts',
-    to: '/components/toasts/'
-  },
-  {
-    name: 'Pagination',
-    to: '/components/pagination/'
-  },
-  {
-    name: 'Popovers',
-    to: '/components/popovers/'
-  },
-  {
-    name: 'Progress',
-    to: '/components/progress/'
-  },
-  {
-    name: 'Tables',
-    to: '/components/tables/'
-  },
-  {
-    name: 'Tabs',
-    to: '/components/tabs/'
-  },
-  {
-    name: 'Tooltips',
-    to: '/components/tooltips/'
-  }
-];
-
-function Components(props) {
-  return ;
-}
-
-export default Components;
diff --git a/docs/lib/Home/index.js b/docs/lib/Home/index.js
deleted file mode 100644
index 1e9502e29..000000000
--- a/docs/lib/Home/index.js
+++ /dev/null
@@ -1,262 +0,0 @@
-import React from 'react';
-import { PrismCode } from 'react-prism';
-import { Button, Container, Row, Col } from 'reactstrap';
-import { Link } from 'react-router';
-import Example from '../examples/import-basic';
-
-const importBasic = require('!!raw-loader!../examples/import-basic');
-
-export default () => {
-  return (
-    

-      

-        
-          
-            
-              

-                
-              

-              
reactstrap

-              
Easy to use React Bootstrap 4 components

-              

-                
-                
-                
-              

-            
-          
-        
-      
-      
-        
-          -            
Installation

-            

-            
NPM

-            
Install reactstrap and peer dependencies via NPM

-            
-              
-                npm install --save reactstrap react react-dom
-              
-            

-            
Import the components you need

-            

-              
-            

-            
-              {importBasic}
-            

-            
Getting Started with Create React App

-            

-              Follow the{' '}
-              
-                Create React App instructions
-              {' '}
-              and then follow the{' '}
-              
-                Adding Bootstrap instructions
-              
-              .
-            

-            
tl;dr

-            
-              
-                {`npx create-react-app my-app
-cd my-app
-npm start`}
-              
-            

-            

-              Then open{' '}
-              
-                http://localhost:3000/
-              {' '}
-              to see your app. The initial structure of your app is setup. Next,
-              let's add reactstrap and bootstrap.
-            

-            
Adding Bootstrap

-            

-              Install reactstrap and Bootstrap from NPM. Reactstrap does not
-              include Bootstrap CSS so this needs to be installed as well:
-            

-            
-              
-                {`npm install --save bootstrap
-npm install --save reactstrap react react-dom`}
-              
-            

-            

-              Import Bootstrap CSS in the src/index.js file:
-            

-            
-              
-                import 'bootstrap/dist/css/bootstrap.min.css';
-              
-            

-            

-              Import required reactstrap components within{' '}
-              src/App.js file or your custom component files:
-            

-            
-              
-                {`import { Button } from 'reactstrap';`}
-              
-            

-            

-              Now you are ready to use the imported reactstrap components within
-              your component hierarchy defined in the render method. Here is an
-              example{' '}
-              
-                App.js
-              {' '}
-              redone using reactstrap.
-            

-            
CDN

-            

-              Reactstrap can be included directly in your application's bundle
-              or excluded during compilation and linked directly to a CDN.
-            

-            
-              
-                https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.js
-              
-            

-            

-              

-                Note: When using the external CDN library, be
-                sure to include the required dependencies as necessary{' '}
-                prior to the Reactstrap library:
-              

-              
-            

-            

-              Check out the demo{' '}
-              here
-            

-            
About the Project

-            

-            

-              This library contains React Bootstrap 4 components that favor
-              composition and control. The library does not depend on jQuery or
-              Bootstrap javascript. However,{' '}
-              https://popper.js.org/ via{' '}
-              
-                https://github.com/popperjs/react-popper
-              {' '}
-              is relied upon for advanced positioning of content like Tooltips,
-              Popovers, and auto-flipping Dropdowns.
-            

-            

-              There are a few core concepts to understand in order to make the
-              most out of this library.
-            

-            

-              1) Your content is expected to be composed via props.children
-              rather than using named props to pass in Components.
-            

-            
-              
-                {`// Content passed in via props
-const Example = (props) => {
-  return (
-    
This is a tooltip example!

-  );
-}
-
-// Content passed in as children (Preferred)
-const PreferredExample = (props) => {
-  return (
-    

-      This is a tooltip example.
-      
-        
-      
-    

-  );
-}`}
-              
-            

-            

-              2) Attributes in this library are used to pass in state,
-              conveniently apply modifier classes, enable advanced functionality
-              (like popperjs), or automatically include non-content based
-              elements.
-            

-            
Examples:

-            
    
-              
  • 
-                isOpen - current state for items like dropdown,
-                popover, tooltip
-              
    • 
-              
  • 
-                toggle - callback for toggling isOpen in the
-                controlling component
-              
    • 
-              
  • 
-                color - applies color classes, ex:{' '}
-                {'
    • 
-              
  • 
-                size for controlling size classes. ex:{' '}
-                {'
    • 
-              
  • 
-                tag - customize component output by passing in an
-                element name or Component
-              
    • 
-              
  • 
-                boolean based props (attributes) when possible for alternative
-                style classes or visually-hidden content
-              
    • 
-            

-          
-        
-      
-    
-  );
-};
diff --git a/docs/lib/NotFound/index.js b/docs/lib/NotFound/index.js
deleted file mode 100644
index ebc40c91b..000000000
--- a/docs/lib/NotFound/index.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { Button, Container, Row, Col } from 'reactstrap';
-import { Link } from 'react-router';
-import Helmet from 'react-helmet';
-
-export default () => {
-  return (
-    

-      
-      

-        
-          
-            
-              

-                
-              

-              
404 - Not Found

-              

-                Can't find what you're looking for? Open up an issue.
-              

-              

-                
-                
-              

-            
-          
-        
-      
-    
-  );
-};
diff --git a/docs/lib/PremiumThemes/index.js b/docs/lib/PremiumThemes/index.js
deleted file mode 100644
index c3b2822e3..000000000
--- a/docs/lib/PremiumThemes/index.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import React from 'react';
-import {
-  Card,
-  Button,
-  CardBody,
-  CardHeader,
-  Container,
-  Row,
-  Col,
-} from 'reactstrap';
-import premiumThemes from './premium';
-
-export default () => {
-  return (
-    

-      

-        

-          
-        

-        
Reactstrap Themes & Templates

-        

-          A collection of free and premium React templates and themes powered by
-          Reactstrap
-        

-      

-      {premiumThemes.map(company => (
-        
-          
{company.creator.name}

-          
{company.creator.tagLine}

-          
-            {company.products.map(product => {
-              return (
-                
-                  
-                    
-                      

-                        
-                          {product.title}
-                        
-                      

-                      
{product.tagLine}

-                    
-                    
-                      
-                        
-                      
-                    
-                  
-                
-              );
-            })}
-            {company.products.length % 2 !== 0 && (
-              -                
-                  
More themes will be added soon !

-                
-              
-            )}
-          
-          

-            
-          

-        
-      ))}
-    
-  );
-};
diff --git a/docs/lib/PremiumThemes/premium.js b/docs/lib/PremiumThemes/premium.js
deleted file mode 100644
index b53a1d881..000000000
--- a/docs/lib/PremiumThemes/premium.js
+++ /dev/null
@@ -1,150 +0,0 @@
-export default [
-  {
-    creator: {
-      name: 'UiFort',
-      tagLine:
-        'Check out some examples that our partners from UiFort created using the Reactstrap components library.',
-      link: 'https://uifort.com',
-    },
-    products: [
-      {
-        title: 'Bamburgh React Admin Dashboard with Reactstrap PRO',
-        tagLine: 'Premium React Admin Template',
-        imgUrl:
-          '/assets/themes/bamburgh-react-admin-dashboard-reactstrap-pro.jpg',
-        link:
-          'https://uifort.com/template/bamburgh-react-admin-dashboard-reactstrap-pro/?ref=reactstrap.github.io',
-      },
-    ],
-  },
-  {
-    creator: {
-      name: 'Creative Tim',
-      tagLine:
-        'Check out some examples that our partners from Creative Tim created using the Reactstrap components library.',
-      link: 'https://www.creative-tim.com',
-    },
-    products: [
-      {
-        title: 'Now UI Kit PRO with Reactstrap',
-        tagLine: 'Premium Kit Template for Bootstrap 4 and Reactstrap',
-        imgUrl:
-          'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/now-ui-kit-pro-react/opt_nukp_react_thumbnail.jpg',
-        link: 'https://www.creative-tim.com/product/now-ui-kit-pro-react',
-      },
-      {
-        title: 'Now UI Dashboard PRO with Reactstrap',
-        tagLine: 'Premium Reactstrap (Bootstrap 4) Admin Template',
-        imgUrl:
-          'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/now-ui-dashboard-pro-react/now-ui-dashboard-pro-react.jpg',
-        link: 'https://www.creative-tim.com/product/now-ui-dashboard-pro-react',
-      },
-      {
-        title: 'Argon Design System with Reactstrap',
-        tagLine: 'Free Design System for Bootstrap 4 and Reactstrap',
-        imgUrl:
-          'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/argon-design-system-react/argon-design-system-react.jpg',
-        link: 'https://www.creative-tim.com/product/argon-design-system-react',
-      },
-      {
-        title: 'Argon Dashboard PRO with Reactstrap',
-        tagLine: 'Premium Reactstrap (Bootstrap 4) Admin Template',
-        imgUrl:
-          'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/argon-dashboard-pro-react/argon-dashboard-pro-react.jpg',
-        link: 'https://www.creative-tim.com/product/argon-dashboard-pro-react',
-      },
-      {
-        title: 'Paper Kit PRO with Reactstrap',
-        tagLine: 'Premium Kit Template for Bootstrap 4 and Reactstrap',
-        imgUrl:
-          'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/paper-kit-pro-react/opt_pkp_react_thumbnail.jpg',
-        link: 'https://www.creative-tim.com/product/paper-kit-pro-react',
-      },
-      {
-        title: 'Paper Dashboard PRO with Reactstrap',
-        tagLine: 'Premium Reactstrap (Bootstrap 4) Admin Template',
-        imgUrl:
-          'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/paper-dashboard-2-pro-react/opt_pdp_react.jpg',
-        link: 'https://www.creative-tim.com/product/paper-dashboard-pro-react',
-      },
-      {
-        title: 'BLK• Design System PRO with Reactstrap',
-        tagLine: 'Premium Design System for Bootstrap 4 and Reactstrap',
-        imgUrl:
-          'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/blk-design-system-pro-react/blk-design-system-pro-react.jpg',
-        link:
-          'https://www.creative-tim.com/product/blk-design-system-pro-react',
-      },
-      {
-        title: 'Black Dashboard PRO with Reactstrap',
-        tagLine: 'Premium Reactstrap (Bootstrap 4) Admin Template',
-        imgUrl:
-          'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/black-dashboard-pro-react/black-dashboard-pro-react.jpg',
-        link: 'https://www.creative-tim.com/product/black-dashboard-pro-react',
-      },
-    ],
-  },
-   {
-    creator: {
-      name: 'WrapPixel',
-      tagLine:
-        'Check out some examples that our partners from WrapPixel created using the Reactstrap components library.',
-      link: 'https://www.wrappixel.com',
-    },
-    products: [
-      {
-        title: 'MaterialPro Admin with Reactstrap',
-        tagLine: 'Premium Admin Template for Bootstrap 4 and Reactstrap',
-        imgUrl:
-          'https://www.wrappixel.com/wp-content/uploads/edd/2020/04/materialpro-react-admin-y.jpg',
-        link: 'https://www.wrappixel.com/templates/materialpro-react-redux-admin/',
-      },
-      {
-        title: 'Xtreme Admin & Dashboard Template with Reactstrap',
-        tagLine: 'Premium Reactstrap (Bootstrap 4) Admin Template',
-        imgUrl:
-          'https://www.wrappixel.com/wp-content/uploads/edd/2020/04/xtreme-react-admin-template-y.jpg',
-        link: 'https://www.wrappixel.com/templates/xtreme-react-redux-admin/',
-      },
-      {
-        title: 'AdminPro React Admin Template with Reactstrap',
-        tagLine: 'Best admin templates for Bootstrap 4 and Reactstrap',
-        imgUrl:
-          'https://www.wrappixel.com/wp-content/uploads/edd/2020/04/adminpro-react-dashboard-y.jpg',
-        link: 'https://www.wrappixel.com/templates/adminpro-react-redux-admin/',
-      },
-      ],
-   }, 
-  {
-    creator: {
-      name: 'PIXINVENT',
-      tagLine: 'PIXINVENT provides high quality, creative design and easy to use Premium & Free Bootstrap Admin Template',
-      link: 'https://1.envato.market/pixinvent_portfolio',
-    },
-    products: [
-      {
-        title: 'Vuexy - Vuejs, React, HTML & Laravel Admin Dashboard Template',
-        tagLine: 'Best selling, Production Ready, Carefully Crafted Admin Template',
-        imgUrl: 'https://www.pixinvent.com/demo/vuexy-html-bootstrap-admin-template/item-page/reactstrap.jpg',
-        link: 'https://1.envato.market/vuexy_admin',
-      },
-    ],
-  },
-  {
-    creator: {
-      name: 'MDBootstrap',
-      tagLine:
-        'Check out some examples that our partners from MDBootstrap created using the Reactstrap components library.',
-      link: 'https://mdbootstrap.com/',
-    },
-    products: [
-      {
-        title: 'Material Design for Bootstrap 5 & React 17',
-        tagLine: '700+ components, stunning templates, 1-min installation, extensive tutorials & huge community.',
-        imgUrl:
-          'https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/react/about/assets/mdb5-react.jpg',
-        link: 'https://mdbootstrap.com/docs/b5/react/',
-      },
-      ],
-   }, 
-];
diff --git a/docs/lib/UI/Banner.js b/docs/lib/UI/Banner.js
deleted file mode 100644
index a83b548a6..000000000
--- a/docs/lib/UI/Banner.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-
-export default function Banner() {
-  return (
-    

-      Black Lives Matter.
-      
-        Support the Equal Justice Initiative.
-      
-    

-  );
-}
diff --git a/docs/lib/UI/Carbon.js b/docs/lib/UI/Carbon.js
deleted file mode 100644
index 407ac5d5d..000000000
--- a/docs/lib/UI/Carbon.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { Component } from 'react';
-
-class Carbon extends Component {
-    componentDidMount() {
-        const carbon_wrapper = document.querySelector('.carbon-adds-wrapper');
-        const script = document.createElement("script");
-        script.src = '//cdn.carbonads.com/carbon.js?serve=CE7IPK3E&placement=reactstrapgithubio';
-        script.async = true;
-        script.id = "_carbonads_js"
-        carbon_wrapper.appendChild(script);
-    }
-
-    render() {
-        return (
-            

-        );
-    }
-}
-
-export default Carbon;
diff --git a/docs/lib/UI/Content.js b/docs/lib/UI/Content.js
deleted file mode 100644
index fd42497d8..000000000
--- a/docs/lib/UI/Content.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router';
-import PropTypes from 'prop-types';
-import { Container, Row, Col, Nav, NavItem, NavLink } from 'reactstrap';
-
-import Carbon from './Carbon';
-
-const propTypes = {
-  children: PropTypes.node,
-  items: PropTypes.array,
-  title: PropTypes.string,
-};
-
-function Content({ items, children, title }) {
-  return (
-    
-      
-        
-          

-            
-            
{title}

-            
-          

-        
-        -          {children}
-        
-      
-    
-  );
-}
-
-Content.propTypes = propTypes;
-export default Content;
diff --git a/docs/lib/UI/DocSearch.js b/docs/lib/UI/DocSearch.js
deleted file mode 100644
index 06a86da0b..000000000
--- a/docs/lib/UI/DocSearch.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { Form, Input } from 'reactstrap';
-
-export default () => {
-  return (
-    
-      
-    
-  );
-};
diff --git a/docs/lib/UI/Footer.js b/docs/lib/UI/Footer.js
deleted file mode 100644
index 609a140d1..000000000
--- a/docs/lib/UI/Footer.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import { Container, Row, Col } from 'reactstrap';
-
-export default () => {
-  return (
-    

-      
-        
-          
-            

-