- 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.
-
- );
- }
-}
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.
- );
- }
-}
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,
-};`}
-
-
- 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
- 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.
-
- 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
-
-`}
-
-
- 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.
-
-
-{`
-
- 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,
-};`}
-
-
-
-{`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
-}`}
-
-
-
-{`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,
- }`
- }
-
-
-
-
-
-
-
-
-
- {ListGroupBadgeExampleSource}
-
-
-
-
-
-
-
-
-
- {ListGroupDisabledItemsExampleSource}
-
-
-
-
-
-
Note: you need add action props to make these buttons fit the list.
-
-
-
-
- {ListGroupAnchorsAndButtonsExampleSource}
-
-
-
-
-
-
-
-
-
- {ListGroupContextualClassesExampleSource}
-
-
-
-
-
-
-
-
-
- {ListGroupCustomContentExampleSource}
-
-
-
-
-
-
-
-
-
- {ListGroupFlushExampleSource}
-
-
-
-
-
-
-
-
-
- {ListGroupHorizontalExampleSource}
-
-
-
-
-
-
-
-
-
- {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 (
-
- );
- }
-}
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 NavbarTogglerafterNavbarBrand 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 (
-
-
-{`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])
-}`}
-
-
-
-{`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 (
-
- );
- }
-}
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
-
-
-{`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 (
-
- 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:
-
- 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.
-
- 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 (
-
- 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:{' '}
- {''}
-
- Easily clear floats by adding
- {' '}.clearfix{' '}
- to the parent element.
- Utilizes
- the micro clearfix as popularized by Nicolas Gallagher.
- Can also be used as a mixin.
-
- Convey meaning through color with a handful of emphasis utility
- classes. These may also be applied to links and will darken on hover
- just like our default link styles.
-
- );
-}
-
-export default Example;
diff --git a/docs/lib/examples/import-basic.js b/docs/lib/examples/import-basic.js
deleted file mode 100644
index 6f91ac6eb..000000000
--- a/docs/lib/examples/import-basic.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import { Button } from 'reactstrap';
-
-export default (props) => {
- return (
-
- );
-};
diff --git a/docs/lib/routes.js b/docs/lib/routes.js
deleted file mode 100644
index f43a8f080..000000000
--- a/docs/lib/routes.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import React from 'react';
-import { Route, IndexRoute, IndexRedirect } from 'react-router';
-import Home from './Home';
-import PremiumThemes from './PremiumThemes';
-import LayoutPage from './Components/LayoutPage';
-import NavsPage from './Components/NavsPage';
-import NavbarPage from './Components/NavbarPage';
-import OffcanvasPage from './Components/OffcanvasPage';
-import BreadcrumbsPage from './Components/BreadcrumbsPage';
-import ButtonsPage from './Components/ButtonsPage';
-import ButtonGroupPage from './Components/ButtonGroupPage';
-import ButtonDropdownPage from './Components/ButtonDropdownPage';
-import DropdownsPage from './Components/DropdownsPage';
-import FadePage from './Components/FadePage';
-import FormPage from './Components/FormPage';
-import InputGroupPage from './Components/InputGroupPage';
-import PopoversPage from './Components/PopoversPage';
-import ProgressPage from './Components/ProgressPage';
-import TooltipsPage from './Components/TooltipsPage';
-import BadgePage from './Components/BadgePage';
-import AccordionPage from './Components/AccordionPage';
-import MediaPage from './Components/MediaPage';
-import ModalsPage from './Components/ModalsPage';
-import CardPage from './Components/CardPage';
-import TablesPage from './Components/TablesPage';
-import PaginationPage from './Components/PaginationPage';
-import TabsPage from './Components/TabsPage';
-import AlertsPage from './Components/AlertsPage';
-import ToastsPage from './Components/ToastsPage';
-import CollapsePage from './Components/CollapsePage';
-import CarouselPage from './Components/CarouselPage';
-import ListGroupPage from './Components/ListGroupPage';
-import ListPage from './Components/ListPage';
-import SpinnersPage from './Components/SpinnersPage';
-import PlaceholderPage from './Components/PlaceholderPage';
-import ClearfixPage from './Utilities/ClearfixPage';
-import ColorsPage from './Utilities/ColorsPage';
-import NotFound from './NotFound';
-import Components from './Components';
-import Utilities from './Utilities';
-import UI from './UI';
-
-const routes = (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-);
-
-export default routes;
diff --git a/docs/static/256x186.svg b/docs/static/256x186.svg
deleted file mode 100644
index 212e588d3..000000000
--- a/docs/static/256x186.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/static/318x180.svg b/docs/static/318x180.svg
deleted file mode 100644
index b3a008ad3..000000000
--- a/docs/static/318x180.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/static/318x270.svg b/docs/static/318x270.svg
deleted file mode 100644
index 35e9bfa4a..000000000
--- a/docs/static/318x270.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/static/docs.css b/docs/static/docs.css
deleted file mode 100644
index bf4b95ce9..000000000
--- a/docs/static/docs.css
+++ /dev/null
@@ -1,451 +0,0 @@
-.container-fluid {
- max-width: 1200px;
-}
-
-.nav-tabs .nav-link {
- cursor: pointer;
-}
-
-@media (max-width: 575px) {
- .navbar-toggleable > .container {
- width: 100%;
- padding-right: 15px;
- padding-left: 15px;
- }
-}
-
-.jumbotron-header, .jumbotron-header p:last-child, .navbar {
- margin-bottom: 0
-}
-
-.jumbotron-header .btn {
- margin-right: 1rem;
-}
-
-.jumbotron-header .btn:last-child {
- margin-right: 0;
-}
-
-@media (max-width: 543px) {
- .jumbotron-header .btn {
- display: block;
- margin: 0 0 1rem 0;
- }
-}
-
-.content {
- margin-top: 2rem;
-}
-
-@media(min-width: 768px) {
- html,body,#app,#app > .wrapper,#app >.wrapper > .container, #app >.wrapper > .container > .row{
- height:100%;
- }
- .docSearch-navigation, .docSearch-content {
- overflow-y: auto;
- height:100%;
- }
-}
-
-
-.header .navbar-nav .nav-link.active {
- color: #333;
-}
-
-.header.navbar {
- padding-left: 0;
- padding-right: 0;
-}
-
-.footer {
- margin-top: 2rem;
- padding: 2rem 0;
- border-top: 1px solid #e7e7e7;
-}
-
-.footer .social {
- margin-bottom: 0;
-}
-
-.footer .social a {
- display: inline-block;
-}
-
-.footer .social img {
- display: block;
-}
-
-.navbar-collapse .container-fluid {
- padding: 2rem 2.5rem;
- border-bottom: 1px solid #55595c
-}
-.navbar-collapse .text-muted, .navbar-collapse h4 {
- color: #818a91
-}
-.about {
- float: left;
- max-width: 30rem;
- margin-right: 3rem
-}
-.social a {
- font-weight: 500;
- color: #eceeef
-}
-.social a:hover {
- color: #fff
-}
-.jumbotron-header {
- padding-top: 2rem;
- padding-bottom: 2rem;
- background-color: #fff
-}
-.jumbotron-heading {
- font-weight: 300
-}
-
-footer {
- padding-top: 3rem;
- padding-bottom: 3rem
-}
-footer p {
- margin-bottom: .25rem
-}
-
-h1,h2,h3,h4,h5,h6,strong,b {
- font-weight: 300;
-}
-
-h1,h2,h3 {
- margin-bottom: 1rem;
-}
-
-.docs-example {
- position: relative;
- padding: 3em 1em 1em;
- border: 1px solid #d8d8d8;
- margin: 1.5rem 0 0;
-}
-
-.docs-example::before {
- position: absolute;
- left: 0;
- top: 0;
- padding: 1em;
- color: #aaa;
- font-size: smaller;
- font-weight: 500;
- content: 'EXAMPLE';
-}
-
-.docs-example::after {
- clear: both;
- content: " ";
- display: table;
-}
-
-.docs-example .card {
- max-width: 320px;
-}
-
-pre, code {
- background: #f5f5f5;
- border-radius: 0;
- border-color: #d8d8d8;
- margin: 0;
-}
-
-.docs-example + pre {
- border: 1px solid #d8d8d8;
- border-top: none;
- padding: 1em;
- margin-top: 0 !important;
- clear: both;
-}
-
-.docs-sidebar .nav-item {
- padding: .2rem 0 .2rem 0;
-}
-
-.docs-sidebar .nav-link {
- color: #888;
- padding: .3rem .5rem .3rem 1rem;
- border-left: 2px solid transparent;
-}
-
-.docs-sidebar .nav-link:hover {
- color: #777
-}
-
-.docs-sidebar .nav-link.active {
- color: #666;
- border-left: 2px solid #d9534f;
-}
-
-.docs-example > .container .row {
- margin-bottom: 1rem;
-}
-
-.docs-example > .container .row > [class^="col"] {
- padding-top: .75rem;
- padding-bottom: .75rem;
- background-color: #E5EDF5;
- border: 1px solid #C9C1D5;
- color: #5F5F5F;
-}
-
-.docs-example .form-control + .form-control {
- margin-top: .5rem;
-}
-
-.docs-example .nav-tabs {
- margin-bottom: 1rem;
-}
-
-.docs-example .progress {
- margin-bottom: 1rem;
-}
-
-.docs-example .themed-container {
- padding: 15px;
- margin-bottom: 30px;
- background-color: rgba(0, 123, 255, .15);
- border: 1px solid rgba(0, 123, 255, .2);
-}
-
-/* Use fixed widths to illustrate responsive container behavior in the narrow content area */
-@media (min-width: 576px) {
- .themed-container.container,
- .themed-container.container-sm {
- max-width: 400px;
- }
-}
-
-@media (min-width: 768px) {
- .themed-container.container,
- .themed-container.container-sm,
- .themed-container.container-md {
- max-width: 440px;
- }
-}
-
-@media (min-width: 992px) {
- .themed-container.container,
- .themed-container.container-sm,
- .themed-container.container-md,
- .themed-container.container-lg {
- max-width: 580px;
- }
-}
-
-@media (min-width: 1200px) {
- .themed-container.container,
- .themed-container.container-sm,
- .themed-container.container-md,
- .themed-container.container-lg,
- .themed-container.container-xl {
- max-width: 620px;
- }
-}
-.premium-section + .premium-section {
- border-top: 1px solid lightgrey;
- padding-top: 3em;
-}
-
-/* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+bash+jsx&plugins=autolinker */
-/**
- * okaidia theme for JavaScript, CSS and HTML
- * Loosely based on Monokai textmate theme by http://www.monokai.nl/
- * @author ocodia
- */
-
- code[class*="language-"],
- pre[class*="language-"] {
- color: #f8f8f2;
- background: none;
- text-shadow: 0 1px rgba(0, 0, 0, 0.3);
- text-align: left;
- white-space: pre;
- word-spacing: normal;
- word-break: normal;
- word-wrap: normal;
- line-height: 1.5;
-
- -moz-tab-size: 4;
- -o-tab-size: 4;
- tab-size: 4;
-
- -webkit-hyphens: none;
- -moz-hyphens: none;
- -ms-hyphens: none;
- hyphens: none;
- }
-
- /* Code blocks */
- pre[class*="language-"] {
- padding: 1em;
- margin: 1.5em 0;
- overflow: auto;
- }
-
- :not(pre) > code[class*="language-"],
- pre[class*="language-"] {
- background: #272822;
- }
-
- /* Inline code */
- :not(pre) > code[class*="language-"] {
- padding: .1em;
- border-radius: .3em;
- white-space: normal;
- }
-
- .token.comment,
- .token.prolog,
- .token.doctype,
- .token.cdata {
- color: slategray;
- }
-
- .token.punctuation {
- color: #f8f8f2;
- }
-
- .namespace {
- opacity: .7;
- }
-
- .token.property,
- .token.tag,
- .token.constant,
- .token.symbol,
- .token.deleted {
- color: #f92672;
- }
-
- .token.boolean,
- .token.number {
- color: #ae81ff;
- }
-
- .token.selector,
- .token.attr-name,
- .token.string,
- .token.char,
- .token.builtin,
- .token.inserted {
- color: #a6e22e;
- }
-
- .token.operator,
- .token.entity,
- .token.url,
- .language-css .token.string,
- .style .token.string,
- .token.variable {
- color: #f8f8f2;
- }
-
- .token.atrule,
- .token.attr-value,
- .token.function {
- color: #e6db74;
- }
-
- .token.keyword {
- color: #66d9ef;
- }
-
- .token.regex,
- .token.important {
- color: #fd971f;
- }
-
- .token.important,
- .token.bold {
- font-weight: bold;
- }
- .token.italic {
- font-style: italic;
- }
-
- .token.entity {
- cursor: help;
- }
-
- .token a {
- color: inherit;
- }
-
-code .tag {
- font-size: inherit;
- padding: 0;
- display: inherit;
-}
-
-.bg-docs-transparent-grid {
- background: url(./transparent.svg);
-}
-
-#carbonads {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
- Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-#carbonads {
- display: flex;
- max-width: 330px;
- background-color: hsl(0, 0%, 98%);
- box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, .1);
- margin-bottom: 16px;
- margin-top: 2px;
-}
-
-#carbonads a {
- color: inherit;
- text-decoration: none;
-}
-
-#carbonads a:hover {
- color: inherit;
-}
-
-#carbonads span {
- position: relative;
- display: block;
- overflow: hidden;
-}
-
-#carbonads .carbon-wrap {
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-
-.carbon-img {
- margin: 0;
- line-height: 1;
- margin-top: 10px;
-}
-
-.carbon-img img {
- display: block;
-}
-
-.carbon-text {
- font-size: 13px;
- padding: 10px;
- line-height: 1.5;
- text-align: center;
-}
-
-.carbon-poweredby {
- display: block;
- padding: 8px 10px;
- background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4);
- text-align: center;
- text-transform: uppercase;
- letter-spacing: .5px;
- font-weight: 600;
- font-size: 9px;
- line-height: 1;
-}
diff --git a/docs/static/favicon.ico b/docs/static/favicon.ico
deleted file mode 100644
index a117a65ae..000000000
Binary files a/docs/static/favicon.ico and /dev/null differ
diff --git a/docs/static/logo.png b/docs/static/logo.png
deleted file mode 100644
index b507429db..000000000
Binary files a/docs/static/logo.png and /dev/null differ
diff --git a/docs/static/prism.js b/docs/static/prism.js
deleted file mode 100644
index c79fda5a3..000000000
--- a/docs/static/prism.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+bash+jsx&plugins=autolinker */
-var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={manual:_self.Prism&&_self.Prism.manual,util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)return;if(!(w instanceof s)){h.lastIndex=0;var _=h.exec(w),P=1;if(!_&&m&&b!=t.length-1){if(h.lastIndex=k,_=h.exec(e),!_)break;for(var A=_.index+(d?_[1].length:0),j=_.index+_[0].length,x=b,O=k,S=t.length;S>x&&(j>O||!t[x].type&&!t[x-1].greedy);++x)O+=t[x].length,A>=O&&(++b,k=O);if(t[b]instanceof s||t[x-1].greedy)continue;P=x-b,w=e.slice(k,O),_.index-=k}if(_){d&&(p=_[1].length);var A=_.index+p,_=_[0].slice(p),j=A+_.length,N=w.slice(0,A),C=w.slice(j),E=[b,P];N&&(++b,k+=N.length,E.push(N));var L=new s(u,f?n.tokenize(_,f):_,y,_,m);if(E.push(L),C&&E.push(C),Array.prototype.splice.apply(t,E),1!=P&&n.matchGrammar(e,t,a,b,k,!0,u),l)break}else if(l)break}}}}},tokenize:function(e,t){var a=[e],r=t.rest;if(r){for(var i in r)t[i]=r[i];delete t.rest}return n.matchGrammar(e,a,t,0,0,!1),a},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.length=0|(a||"").length,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var i={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}n.hooks.run("wrap",i);var o=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(o?" "+o:"")+">"+i.content+""+i.tag+">"},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,i=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),i&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,!document.addEventListener||n.manual||r.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
-Prism.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\s\S])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\s\S]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/?[\da-z]{1,8};/i},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
-Prism.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:{pattern:/("|')(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/logo.svg b/static/logo.svg
new file mode 100644
index 000000000..00572bb4d
--- /dev/null
+++ b/static/logo.svg
@@ -0,0 +1,78 @@
+
\ No newline at end of file
diff --git a/stories/Accordion.stories.js b/stories/Accordion.stories.js
new file mode 100644
index 000000000..bc43df743
--- /dev/null
+++ b/stories/Accordion.stories.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+export default {
+ title: 'Components/Accordion',
+ parameters: {
+ docs: {
+ description: {
+ component: `
+[Bootstrap Accordion](https://getbootstrap.com/docs/5.1/components/accordion/)
+
+Used to build vertically collapsing accordions.
+ `,
+ }
+ }
+ }
+};
+
+export { default as Accordion } from './examples/Accordion';
+export { default as Flush } from './examples/AccordionFlush';
+export { default as Uncontrolled } from './examples/UncontrolledAccordion';
+export { default as StayOpen } from './examples/UncontrolledAccordionStayOpen';
+export { default as Props } from './examples/AccordionProps';
\ No newline at end of file
diff --git a/stories/Alert.stories.js b/stories/Alert.stories.js
new file mode 100644
index 000000000..0af8d8b94
--- /dev/null
+++ b/stories/Alert.stories.js
@@ -0,0 +1,23 @@
+import React from 'react';
+
+export default {
+ title: 'Components/Alert',
+ parameters: {
+ docs: {
+ description: {
+ component: `
+[Bootstrap Alert](https://getbootstrap.com/docs/5.1/components/alerts/)
+
+Provide contextual feedback messages for typical user actions.
+ `,
+ }
+ }
+ }
+};
+
+export { default as Alert } from './examples/Alert';
+export { default as AlertContent } from './examples/AlertContent';
+export { default as Dismiss } from './examples/AlertDismiss';
+export { default as AlertLink } from './examples/AlertLink';
+export { default as UncontrolledDismiss } from './examples/AlertUncontrolledDismiss';
+export { default as Props } from './examples/AlertProps';
\ No newline at end of file
diff --git a/stories/Badge.stories.js b/stories/Badge.stories.js
new file mode 100644
index 000000000..814143b87
--- /dev/null
+++ b/stories/Badge.stories.js
@@ -0,0 +1,23 @@
+import React from 'react';
+
+export default {
+ title: 'Components/Badge',
+ parameters: {
+ docs: {
+ description: {
+ component: `
+[Bootstrap Badge](https://getbootstrap.com/docs/5.1/components/badge/)
+
+A small count and labeling component.
+ `,
+ }
+ }
+ }
+};
+
+export { default as Badge } from './examples/Badge';
+export { default as Links } from './examples/BadgeLinks';
+export { default as Pills } from './examples/BadgePills';
+export { default as Sizing } from './examples/Badge';
+export { default as Variations } from './examples/BadgeVariations';
+export { default as Props } from './examples/BadgeProps';
\ No newline at end of file
diff --git a/stories/Breadcrumb.stories.js b/stories/Breadcrumb.stories.js
new file mode 100644
index 000000000..4ca06148c
--- /dev/null
+++ b/stories/Breadcrumb.stories.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default {
+ title: 'Components/Breadcrumb',
+ parameters: {
+ docs: {
+ description: {
+ component: `
+[Bootstrap Breadcrumb](https://getbootstrap.com/docs/5.1/components/breadcrumb/)
+
+Indicate the current page’s location within a navigational hierarchy that automatically adds separators.
+ `,
+ }
+ }
+ }
+};
+
+export { default as Breadcrumb } from './examples/Breadcrumb';
+export { default as NoList } from './examples/BreadcrumbNoList';
+export { default as Props } from './examples/BreadcrumbProps';
\ No newline at end of file
diff --git a/stories/Button.stories.js b/stories/Button.stories.js
new file mode 100644
index 000000000..6e195f389
--- /dev/null
+++ b/stories/Button.stories.js
@@ -0,0 +1,28 @@
+import React from 'react';
+
+export default {
+ title: 'Components/Button',
+ parameters: {
+ docs: {
+ description: {
+ component: `
+[Bootstrap Buttons](https://getbootstrap.com/docs/5.1/components/buttons/)
+
+Custom Buttons for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
+ `,
+ }
+ }
+ }
+};
+
+export { default as Button } from './examples/Button';
+export { default as Outline } from './examples/ButtonOutline';
+export { default as CheckboxAndRadio } from './examples/ButtonStateful';
+export { default as Close } from './examples/ButtonCloseIcon';
+export { default as ButtonGroup } from './examples/ButtonGroup';
+export { default as ButtonDropdown } from './examples/ButtonDropdown';
+export { default as ButtonDropdownMulti } from './examples/ButtonDropdownMulti';
+export { default as ButtonDropdownMultiSplit } from './examples/ButtonDropdownMultiSplit';
+export { default as ButtonDropdownUncontrolled } from './examples/ButtonDropdownUncontrolled';
+export { default as ButtonToolbar } from './examples/ButtonToolbar';
+export { default as Props } from './examples/ButtonProps';
\ No newline at end of file
diff --git a/stories/Card.stories.js b/stories/Card.stories.js
new file mode 100644
index 000000000..db9c8a993
--- /dev/null
+++ b/stories/Card.stories.js
@@ -0,0 +1,29 @@
+import React from 'react';
+
+export default {
+ title: 'Components/Card',
+ parameters: {
+ docs: {
+ description: {
+ component: `
+[Bootstrap Card](https://getbootstrap.com/docs/5.1/components/card/)
+
+Cards provide a flexible and extensible content container with multiple variants and options.
+ `,
+ }
+ }
+ }
+};
+
+export { default as Card } from './examples/Card';
+export { default as Alignment } from './examples/CardAlignment';
+export { default as Backgrounds } from './examples/CardBackgrounds';
+export { default as CardColumns } from './examples/CardColumns';
+export { default as ContentTypes } from './examples/CardContentTypes';
+export { default as CardGroups } from './examples/CardGroups';
+export { default as HeadersAndFooters } from './examples/CardHeaderFooter';
+export { default as ImageCaps } from './examples/CardImageCaps';
+export { default as ImageOverlay } from './examples/CardImageOverlay';
+export { default as Outline } from './examples/CardOutline';
+export { default as Sizing } from './examples/CardSizing';
+export { default as Props } from './examples/CardProps';
\ No newline at end of file
diff --git a/stories/Carousel.stories.js b/stories/Carousel.stories.js
new file mode 100644
index 000000000..e72f80758
--- /dev/null
+++ b/stories/Carousel.stories.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+export default {
+ title: 'Components/Carousel',
+ parameters: {
+ docs: {
+ description: {
+ component: `
+ [Bootstrap Carousel](https://getbootstrap.com/docs/5.1/components/carousel/)
+
+ A slideshow component for cycling through elements, images, or slides of text — like a carousel.
+ `,
+ }
+ }
+ }
+};
+
+export { default as Carousel } from './examples/Carousel';
+export { default as CustomTag } from './examples/CarouselCustomTag';
+export { default as Uncontrolled } from './examples/CarouselUncontrolled';
+export { default as Props } from './examples/CarouselProps';
\ No newline at end of file
diff --git a/stories/Collapse.stories.js b/stories/Collapse.stories.js
new file mode 100644
index 000000000..4540ef1f0
--- /dev/null
+++ b/stories/Collapse.stories.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+export default {
+ title: 'Components/Collapse',
+ parameters: {
+ docs: {
+ description: {
+ component: `
+ [Bootstrap Collapse](https://getbootstrap.com/docs/5.1/components/collapse/)
+
+ Toggle the visibility of content across your project with Collapse.
+ `
+ }
+ }
+ }
+};
+
+export { default as Collapse } from './examples/Collapse';
+export { default as CollapseEvents } from './examples/CollapseEvents';
+export { default as CollapseHorizontal } from './examples/CollapseHorizontal';
+export { default as CollapseUncontrolled } from './examples/CollapseUncontrolled';
+export { default as Props } from './examples/CollapseProps';
\ No newline at end of file
diff --git a/stories/Dropdown.stories.js b/stories/Dropdown.stories.js
new file mode 100644
index 000000000..f9ea11f5b
--- /dev/null
+++ b/stories/Dropdown.stories.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+export default {
+ title: 'Components/Dropdown',
+ parameters: {
+ docs: {
+ description: {
+ component: `
+ [Bootstrap Dropdowns](https://getbootstrap.com/docs/5.1/components/dropdowns/)
+
+ Toggle contextual overlays for displaying lists of links and more with Dropdowns.
+ `
+ }
+ }
+ }
+};
+
+export { default as Dropdown } from './examples/Dropdown';
+export { default as Container } from './examples/DropdownContainer';
+export { default as SetActiveFromChild } from './examples/DropdownSetActiveFromChild';
+export { default as Sizing } from './examples/DropdownSizing';
+export { default as Uncontrolled } from './examples/DropdownUncontrolled';
+export { default as CustomDropdown } from './examples/CustomDropdown';
+export { default as Props } from './examples/DropdownProps';
\ No newline at end of file
diff --git a/stories/Fade.stories.js b/stories/Fade.stories.js
new file mode 100644
index 000000000..723061e92
--- /dev/null
+++ b/stories/Fade.stories.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default {
+ title: 'Components/Fade',
+};
+
+export { default as Fade } from './examples/Fade';
+export { default as Props } from './examples/FadeProps';
+
+
+
diff --git a/stories/Forms.stories.js b/stories/Forms.stories.js
new file mode 100644
index 000000000..18e5e88e6
--- /dev/null
+++ b/stories/Forms.stories.js
@@ -0,0 +1,29 @@
+import React from 'react';
+
+export default {
+ title: 'Components/Forms',
+ parameters: {
+ docs: {
+ description: {
+ component: `
+ [Bootstrap Forms](https://getbootstrap.com/docs/5.1/forms/overview/)
+
+ Form controls, layout options, and custom components for creating a wide variety of forms.
+ `
+ }
+ }
+ }
+};
+
+export { default as Input } from './examples/Input';
+export { default as Form } from './examples/Form';
+export { default as FormFeedback } from './examples/FormFeedback';
+export { default as FormGrid } from './examples/FormGrid';
+export { default as FormGridFormRow } from './examples/FormGridFormRow';
+export { default as FormInline } from './examples/FormInline';
+export { default as LabelHidden } from './examples/LabelHidden';
+export { default as InlineCheckboxes } from './examples/InlineCheckboxes';
+export { default as InputGridSizing } from './examples/InputGridSizing';
+export { default as InputSizing } from './examples/InputSizing';
+export { default as InputType } from './examples/InputType';
+export { default as Props } from './examples/FormProps';
\ No newline at end of file
diff --git a/stories/Index.stories.mdx b/stories/Index.stories.mdx
new file mode 100644
index 000000000..ef8660f92
--- /dev/null
+++ b/stories/Index.stories.mdx
@@ -0,0 +1,96 @@
+import { Meta } from '@storybook/addon-docs';
+import { Button } from 'reactstrap';
+
+
+
+![Reactstrap](logo.svg)
+
+### Reactstrap is a [React](https://reactjs.org) component library for [Bootstrap](https://getbootstrap.com)
+
+Reactstrap is currently compatible with Bootstrap 5.1. If you are using Bootstrap 4, you'll need to use [Reactstrap v8](./v4)
+
+## Getting Started
+
+### Install Reactstrap:
+
+```sh
+npm install reactstrap react react-dom
+```
+
+Reactstrap currently requires React 16.8 or higher.
+
+### Include Bootstrap
+
+Either:
+
+1. Import Bootstrap in your application code:
+
+```sh
+npm install --save bootstrap
+```
+```javascript
+import 'bootstrap/dist/css/bootstrap.min.css';
+```
+
+2. or include Bootstrap from a CDN URL in your HTML layout:
+
+```html
+
+
+
+```
+
+### Import components:
+
+```jsx
+import React from 'react';
+import { Button } from 'reactstrap';
+
+export default (props) => {
+ return (
+
+ );
+};
+```
+
+## About
+
+Unlike some component libraries, Reactstrap does not embed its own styles, and instead depends on the Bootstrap CSS framework for its styles and theme.
+This allows you to have consistent styles across your React-based components and static parts of your site, and allows you to include your own custom Bootstrap theme when needed.
+
+Unlike using Bootstrap in HTML, Reactstrap exports all the correct Bootstrap classes automatically, and don't need to use or include Bootstrap's JavaScript files or add data attributes to trigger functionality. Instead, components are defined in React-friendly components with appropriate props for you to control.
+
+So instead of:
+
+```html
+
+
+
+
+
+
Modal title
+
+
+
+
Modal body text goes here.
+
+
+
+
+```
+
+You can use:
+```jsx
+// React
+import { Modal, ModalBody, ModalHeader } from 'reactstrap';
+...
+ setOpen(false)}>
+
+ Modal title
+
+
+ Modal body text goes here.
+
+
+
+```
diff --git a/stories/InputGroup.stories.js b/stories/InputGroup.stories.js
new file mode 100644
index 000000000..33bcba552
--- /dev/null
+++ b/stories/InputGroup.stories.js
@@ -0,0 +1,23 @@
+import React from 'react';
+
+export default {
+ title: 'Components/InputGroup',
+ parameters: {
+ docs: {
+ description: {
+ component: `
+ [Bootstrap InputGroup](https://getbootstrap.com/docs/5.1/forms/input-group/)
+
+ Extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
+ `
+ }
+ }
+ }
+};
+
+export { default as InputGroup } from './examples/InputGroupOverview';
+export { default as InputGroupAddon } from './examples/InputGroupAddon';
+export { default as InputGroupButton } from './examples/InputGroupButton';
+export { default as InputGroupButtonShorthand } from './examples/InputGroupButtonShorthand';
+export { default as Sizing } from './examples/InputGroupSizing';
+export { default as Props } from './examples/InputGroupProps';
\ No newline at end of file
diff --git a/stories/Layout.stories.js b/stories/Layout.stories.js
new file mode 100644
index 000000000..20b13a711
--- /dev/null
+++ b/stories/Layout.stories.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+export default {
+ title: 'Components/Layout',
+ parameters: {
+ docs: {
+ description: {
+ component: `
+ [Bootstrap Layout](https://getbootstrap.com/docs/5.1/layout/grid/)
+
+ Powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers.
+ `
+ }
+ }
+ }
+};
+
+export { default as Layout } from './examples/Layout';
+export { default as LayoutRowCols } from './examples/LayoutRowCols';
+export { default as ContainerResponsive } from './examples/ContainerResponsive';
+export { default as Props } from './examples/LayoutProps';
\ No newline at end of file
diff --git a/stories/List.stories.js b/stories/List.stories.js
new file mode 100644
index 000000000..ea438eab5
--- /dev/null
+++ b/stories/List.stories.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default {
+ title: 'Components/List',
+ parameters: {
+ docs: {
+ description: {
+ component: '[Bootstrap Lists](https://getbootstrap.com/docs/5.1/content/typography/#lists)'
+ }
+ }
+ }
+};
+
+export { default as List } from './examples/ListInline';
+export { default as Unstyled } from './examples/ListUnstyled';
+export { default as Props } from './examples/ListProps';
+
\ No newline at end of file
diff --git a/stories/ListGroup.stories.js b/stories/ListGroup.stories.js
new file mode 100644
index 000000000..37bc6f652
--- /dev/null
+++ b/stories/ListGroup.stories.js
@@ -0,0 +1,27 @@
+import React from 'react';
+
+export default {
+ title: 'Components/ListGroup',
+ parameters: {
+ docs: {
+ description: {
+ component: `
+ [Bootstrap ListGroup](https://getbootstrap.com/docs/5.1/components/list-group/)
+
+ A flexible and powerful component for displaying a series of content.
+ `
+ }
+ }
+ }
+};
+
+export { default as ListGroup } from './examples/ListGroup';
+export { default as AnchorsAndButtons } from './examples/ListGroupAnchorsAndButtons';
+export { default as Badge } from './examples/ListGroupBadge';
+export { default as ContextualClasses } from './examples/ListGroupContextualClasses';
+export { default as CustomContent } from './examples/ListGroupCustomContent';
+export { default as DisabledItems } from './examples/ListGroupDisabledItems';
+export { default as Flush } from './examples/ListGroupFlush';
+export { default as Horizontal } from './examples/ListGroupHorizontal';
+export { default as Numbered } from './examples/ListGroupNumbered';
+export { default as Props } from './examples/ListGroupProps';
\ No newline at end of file
diff --git a/stories/Modal.stories.js b/stories/Modal.stories.js
new file mode 100644
index 000000000..f689b926b
--- /dev/null
+++ b/stories/Modal.stories.js
@@ -0,0 +1,29 @@
+import React from 'react';
+
+export default {
+ title: 'Components/Modal',
+ parameters: {
+ docs: {
+ description: {
+ component: `
+ [Bootstrap Modal](https://getbootstrap.com/docs/5.1/components/modal/)
+
+ Add dialogs to your site for lightboxes, user notifications, or completely custom content.
+ `
+ }
+ }
+ }
+};
+
+export { default as Modal } from './examples/Modal';
+export { default as Backdrop } from './examples/ModalBackdrop';
+export { default as CustomCloseButton } from './examples/ModalCustomCloseButton';
+export { default as CustomCloseIcon } from './examples/ModalCustomCloseIcon';
+export { default as CustomTimeout } from './examples/ModalCustomTimeout';
+export { default as Destructuring } from './examples/ModalDestructuring';
+export { default as External } from './examples/ModalExternal';
+export { default as Fadeless } from './examples/ModalFadeless';
+export { default as FocusAfterClose } from './examples/ModalFocusAfterClose';
+export { default as Fullscreen } from './examples/ModalFullscreen';
+export { default as Nested } from './examples/ModalNested';
+export { default as Props } from './examples/ModalProps';
\ No newline at end of file
diff --git a/stories/Nav.stories.js b/stories/Nav.stories.js
new file mode 100644
index 000000000..b4fa92585
--- /dev/null
+++ b/stories/Nav.stories.js
@@ -0,0 +1,23 @@
+import React from 'react';
+
+export default {
+ title: 'Components/Nav',
+ parameters: {
+ docs: {
+ description: {
+ component: `
+ [Bootstrap Navs](https://getbootstrap.com/docs/5.1/components/navs-tabs/)
+
+ Bootstrap’s navigation components.
+ `
+ }
+ }
+ }
+};
+
+export { default as Navs } from './examples/Navs';
+export { default as Pills } from './examples/NavPills';
+export { default as Tabs } from './examples/NavTabs';
+export { default as TabPane } from './examples/Tabs';
+export { default as Vertical } from './examples/NavVertical';
+export { default as Props } from './examples/NavProps';
\ No newline at end of file
diff --git a/stories/Navbar.stories.js b/stories/Navbar.stories.js
new file mode 100644
index 000000000..7b9f5b17f
--- /dev/null
+++ b/stories/Navbar.stories.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default {
+ title: 'Components/Navbar',
+ parameters: {
+ docs: {
+ description: {
+ component: `
+ [Bootstrap Navbar](https://getbootstrap.com/docs/5.1/components/navbar/)
+
+ Bootstrap’s powerful, responsive navigation header. Includes support for branding, navigation, and more.
+ `
+ }
+ }
+ }
+};
+
+export { default as Navbar } from './examples/Navbar';
+export { default as NavbarToggler } from './examples/NavbarToggler';
+export { default as Props } from './examples/NavbarProps';
\ No newline at end of file
diff --git a/stories/Offcanvas.stories.js b/stories/Offcanvas.stories.js
new file mode 100644
index 000000000..9ce6149cb
--- /dev/null
+++ b/stories/Offcanvas.stories.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+export default {
+ title: 'Components/Offcanvas',
+ parameters: {
+ docs: {
+ description: {
+ component: `
+ [Bootstrap Offcanvas](https://getbootstrap.com/docs/5.1/components/offcanvas/)
+
+ Add hidden sidebars into your project for navigation, shopping carts, and more.
+ `
+ }
+ }
+ }
+};
+
+export { default as Offcanvas } from './examples/Offcanvas';
+export { default as Props } from './examples/OffcanvasProps';
diff --git a/stories/Pagination.stories.js b/stories/Pagination.stories.js
new file mode 100644
index 000000000..a18e29344
--- /dev/null
+++ b/stories/Pagination.stories.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+export default {
+ title: 'Components/Pagination',
+ parameters: {
+ docs: {
+ description: {
+ component: `
+ [Bootstrap Pagination](https://getbootstrap.com/docs/5.1/components/pagination/)
+
+ Use Pagination to indicate that a series of related content exists across multiple pages.
+ `
+ }
+ }
+ }
+};
+
+export { default as Pagination } from './examples/Pagination';
+export { default as Large } from './examples/PaginationSizingLarge';
+export { default as Small } from './examples/PaginationSizingSmall';
+export { default as State } from './examples/PaginationState';
+export { default as Props } from './examples/PaginationProps';
\ No newline at end of file
diff --git a/stories/Popover.stories.js b/stories/Popover.stories.js
new file mode 100644
index 000000000..3f5b14a35
--- /dev/null
+++ b/stories/Popover.stories.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+export default {
+ title: 'Components/Popover',
+ parameters: {
+ docs: {
+ description: {
+ component: '[Bootstrap Popovers](https://getbootstrap.com/docs/5.1/components/popovers/)'
+ }
+ }
+ }
+};
+
+export { default as Popover } from './examples/Popover';
+export { default as Focus } from './examples/PopoverFocus';
+export { default as Multi } from './examples/PopoverMulti';
+export { default as Uncontrolled } from './examples/PopoverUncontrolled';
+export { default as Update } from './examples/PopoverUpdate';
+export { default as Props } from './examples/PopoverProps';
\ No newline at end of file
diff --git a/stories/Progress.stories.js b/stories/Progress.stories.js
new file mode 100644
index 000000000..76992622f
--- /dev/null
+++ b/stories/Progress.stories.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+export default {
+ title: 'Components/Progress',
+ parameters: {
+ docs: {
+ description: {
+ component: '[Bootstrap Progress](https://getbootstrap.com/docs/5.1/components/progress/)'
+ }
+ }
+ }
+};
+
+export { default as Progress } from './examples/Progress';
+export { default as Animated } from './examples/ProgressAnimated';
+export { default as Color } from './examples/ProgressColor';
+export { default as Labels } from './examples/ProgressLabels';
+export { default as Max } from './examples/ProgressMax';
+export { default as Multi } from './examples/ProgressMulti';
+export { default as Striped } from './examples/ProgressStriped';
+export { default as Props } from './examples/ProgressProps';
\ No newline at end of file
diff --git a/stories/Spinner.stories.js b/stories/Spinner.stories.js
new file mode 100644
index 000000000..3ab8c4af0
--- /dev/null
+++ b/stories/Spinner.stories.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default {
+ title: 'Components/Spinner',
+ parameters: {
+ docs: {
+ description: {
+ component: `
+ [Bootstrap Spinners](https://getbootstrap.com/docs/5.1/components/spinners/)
+
+ Indicate the loading state of a component or page with Spinners.
+ `
+ }
+ }
+ }
+};
+
+export { default as Spinner } from './examples/Spinner';
+export { default as SpinnerGrower } from './examples/SpinnerGrower';
+export { default as Props } from './examples/SpinnerProps';
\ No newline at end of file
diff --git a/stories/Table.stories.js b/stories/Table.stories.js
new file mode 100644
index 000000000..5c1ca2d18
--- /dev/null
+++ b/stories/Table.stories.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+export default {
+ title: 'Components/Table',
+ parameters: {
+ docs: {
+ description: {
+ component: '[Bootstrap Tables](https://getbootstrap.com/docs/5.1/content/tables/)'
+ }
+ }
+ }
+};
+
+export { default as Table } from './examples/Table';
+export { default as Bordered } from './examples/TableBordered';
+export { default as Borderless } from './examples/TableBorderless';
+export { default as Dark } from './examples/TableDark';
+export { default as Hover } from './examples/TableHover';
+export { default as Responsive } from './examples/TableResponsive';
+export { default as Sizing } from './examples/TableSizing';
+export { default as Striped } from './examples/TableStriped';
+export { default as Props } from './examples/TableProps';
\ No newline at end of file
diff --git a/stories/Toast.stories.js b/stories/Toast.stories.js
new file mode 100644
index 000000000..c90569ced
--- /dev/null
+++ b/stories/Toast.stories.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+export default {
+ title: 'Components/Toast',
+ parameters: {
+ docs: {
+ description: {
+ component: `
+ [Bootstrap Toasts](https://getbootstrap.com/docs/5.1/components/toasts/)
+
+ Push notifications to your visitors with a Toast, a lightweight and easily customizable alert message.
+ `
+ }
+ }
+ }
+};
+
+export { default as Toast } from './examples/Toast';
+export { default as ToastDismiss } from './examples/ToastDismiss';
+export { default as ToastHeaderIcon } from './examples/ToastHeaderIcon';
+export { default as Props } from './examples/ToastProps';
\ No newline at end of file
diff --git a/stories/Tooltip.stories.js b/stories/Tooltip.stories.js
new file mode 100644
index 000000000..2a21289d7
--- /dev/null
+++ b/stories/Tooltip.stories.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+export default {
+ title: 'Components/Tooltip',
+ parameters: {
+ docs: {
+ description: {
+ component: '[Bootstrap Tooltips](https://getbootstrap.com/docs/5.1/components/tooltips/)'
+ }
+ }
+ }
+};
+
+export { default as Tooltip } from './examples/Tooltip';
+export { default as AutoHide } from './examples/TooltipAutoHide';
+export { default as Multi } from './examples/TooltipMulti';
+export { default as Uncontrolled } from './examples/TooltipUncontrolled';
+export { default as Update } from './examples/TooltipUpdate';
+export { default as Props } from './examples/TooltipProps';
\ No newline at end of file
diff --git a/stories/Upgrading.stories.mdx b/stories/Upgrading.stories.mdx
new file mode 100644
index 000000000..e3a2f73cd
--- /dev/null
+++ b/stories/Upgrading.stories.mdx
@@ -0,0 +1,33 @@
+import { Meta } from '@storybook/addon-docs';
+
+
+
+# Upgrading to Reactstrap 9
+
+Reactstrap 9+ now requires on [Bootstrap 5.1+](https://getbootstrap.com/docs/5.1/getting-started/introduction/).
+Do not upgrade to Reactstrap v9 if you are using Bootstrap version 4.
+
+Please see the Bootstrap [Migration Guide](https://getbootstrap.com/docs/5.1/migration/#components) for more details.
+
+### Removed components
+
+- InputGroupAddon -
+ This in no longer needed in Bootstrap 5, you can now add Buttons, Inputs directly to InputGroups in the order you wish.
+- InputGroupButtonDropdown -
+ This can now be replaced with a regular Dropdown component.
+- CustomInput -
+ These are no longer needed in Bootstrap 5, since all form inputs will be styled by Bootstrap instead of browser default.
+ The existing Input component now supports file, select, switch, and range types.
+- Jumbotron -
+ Jumbotrons have been removed from Bootstrap 5, can be replaced with `
`.
+ Jumbotron fluid can be replaced with `
`
+
+### Components with breaking changes:
+- Tooltip/Popover/DropdownMenu -
+ The `modifiers` prop will now conform to the new popper2 modifiers, which take an array instead of an object.
+ `offset` prop is now an array of 2 numbers that represent skidding and distance. See [popper docs](https://popper.js.org/docs/v2/modifiers/) for more details.
+- ModalHeader/ToastHeader -
+ Bootstrap 5 no longer supports custom close icons, so this feature was removed from ModalHeader and ToastHeader.
+- Dropdown/DropdownMenu -
+ The `left` and `right` properties are deprecated, but still supported for backwards compatibility.
+ Now replaced with `start` and `end` in Bootstrap 5.
\ No newline at end of file
diff --git a/docs/lib/examples/Accordion.js b/stories/examples/Accordion.js
similarity index 100%
rename from docs/lib/examples/Accordion.js
rename to stories/examples/Accordion.js
diff --git a/docs/lib/examples/AccordionFlush.js b/stories/examples/AccordionFlush.js
similarity index 100%
rename from docs/lib/examples/AccordionFlush.js
rename to stories/examples/AccordionFlush.js
diff --git a/stories/examples/AccordionProps.js b/stories/examples/AccordionProps.js
new file mode 100644
index 000000000..1403b40bd
--- /dev/null
+++ b/stories/examples/AccordionProps.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from 'reactstrap';
+import Props from './Props';
+
+const Example = () => (
+
+);
+
+export default Example;
diff --git a/stories/examples/Alert.js b/stories/examples/Alert.js
new file mode 100644
index 000000000..c5d767c66
--- /dev/null
+++ b/stories/examples/Alert.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Alert } from 'reactstrap';
+import { colors } from './options';
+
+const Example = (args) => {
+ return (
+
+
+
+ );
+};
+
+Example.args = {
+ children: 'Hey! Pay attention.',
+ color: 'primary',
+ dismissible: false
+};
+
+Example.argTypes = {
+ color: {
+ control: { type: 'select' },
+ options: colors
+ }
+};
+
+export default Example;
diff --git a/docs/lib/examples/Alert.js b/stories/examples/AlertColors.js
similarity index 90%
rename from docs/lib/examples/Alert.js
rename to stories/examples/AlertColors.js
index 150acd65e..ff847f3b0 100644
--- a/docs/lib/examples/Alert.js
+++ b/stories/examples/AlertColors.js
@@ -1,5 +1,6 @@
import React from 'react';
import { Alert } from 'reactstrap';
+import { ArgsTable } from '@storybook/addon-docs';
const Example = (props) => {
return (
@@ -28,6 +29,8 @@ const Example = (props) => {
This is a dark alert — check it out!
+
+
);
};
diff --git a/docs/lib/examples/AlertContent.js b/stories/examples/AlertContent.js
similarity index 100%
rename from docs/lib/examples/AlertContent.js
rename to stories/examples/AlertContent.js
diff --git a/docs/lib/examples/AlertDismiss.js b/stories/examples/AlertDismiss.js
similarity index 100%
rename from docs/lib/examples/AlertDismiss.js
rename to stories/examples/AlertDismiss.js
diff --git a/docs/lib/examples/AlertFadeless.js b/stories/examples/AlertFadeless.js
similarity index 100%
rename from docs/lib/examples/AlertFadeless.js
rename to stories/examples/AlertFadeless.js
diff --git a/docs/lib/examples/AlertLink.js b/stories/examples/AlertLink.js
similarity index 100%
rename from docs/lib/examples/AlertLink.js
rename to stories/examples/AlertLink.js
diff --git a/stories/examples/AlertProps.js b/stories/examples/AlertProps.js
new file mode 100644
index 000000000..0620d4a1f
--- /dev/null
+++ b/stories/examples/AlertProps.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Alert } from 'reactstrap';
+import Props from './Props';
+
+const Example = () => (
+
+);
+
+export default Example;
diff --git a/docs/lib/examples/AlertUncontrolledDismiss.js b/stories/examples/AlertUncontrolledDismiss.js
similarity index 78%
rename from docs/lib/examples/AlertUncontrolledDismiss.js
rename to stories/examples/AlertUncontrolledDismiss.js
index 1f596ba57..fe4fc494b 100644
--- a/docs/lib/examples/AlertUncontrolledDismiss.js
+++ b/stories/examples/AlertUncontrolledDismiss.js
@@ -1,7 +1,7 @@
import React from 'react';
import { UncontrolledAlert } from 'reactstrap';
-function AlertExample() {
+const Example = (props) => {
return (
I am an alert and I can be dismissed!
@@ -9,4 +9,4 @@ function AlertExample() {
);
}
-export default AlertExample;
+export default Example;
diff --git a/stories/examples/Badge.js b/stories/examples/Badge.js
new file mode 100644
index 000000000..6719b2a8f
--- /dev/null
+++ b/stories/examples/Badge.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Badge } from 'reactstrap';
+import { colors } from './options';
+
+const Example = (args) => {
+ return (
+
+
+
+ );
+}
+
+Example.args = {
+ children: 'New',
+ color: 'primary',
+ pill: false
+};
+
+Example.argTypes = {
+ color: {
+ control: { type: 'select' },
+ options: colors
+ }
+};
+
+export default Example;
diff --git a/docs/lib/examples/BadgeButton.js b/stories/examples/BadgeButton.js
similarity index 100%
rename from docs/lib/examples/BadgeButton.js
rename to stories/examples/BadgeButton.js
diff --git a/docs/lib/examples/BadgeLinks.js b/stories/examples/BadgeLinks.js
similarity index 100%
rename from docs/lib/examples/BadgeLinks.js
rename to stories/examples/BadgeLinks.js
diff --git a/docs/lib/examples/BadgePills.js b/stories/examples/BadgePills.js
similarity index 100%
rename from docs/lib/examples/BadgePills.js
rename to stories/examples/BadgePills.js
diff --git a/stories/examples/BadgeProps.js b/stories/examples/BadgeProps.js
new file mode 100644
index 000000000..c2e41d792
--- /dev/null
+++ b/stories/examples/BadgeProps.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Badge } from 'reactstrap';
+import Props from './Props';
+
+const Example = () => (
+
+);
+
+export default Example;
diff --git a/docs/lib/examples/BadgeVariations.js b/stories/examples/BadgeVariations.js
similarity index 100%
rename from docs/lib/examples/BadgeVariations.js
rename to stories/examples/BadgeVariations.js
diff --git a/docs/lib/examples/Breadcrumb.js b/stories/examples/Breadcrumb.js
similarity index 100%
rename from docs/lib/examples/Breadcrumb.js
rename to stories/examples/Breadcrumb.js
diff --git a/docs/lib/examples/BreadcrumbNoList.js b/stories/examples/BreadcrumbNoList.js
similarity index 100%
rename from docs/lib/examples/BreadcrumbNoList.js
rename to stories/examples/BreadcrumbNoList.js
diff --git a/stories/examples/BreadcrumbProps.js b/stories/examples/BreadcrumbProps.js
new file mode 100644
index 000000000..9941830e6
--- /dev/null
+++ b/stories/examples/BreadcrumbProps.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Breadcrumb, BreadcrumbItem } from 'reactstrap';
+import Props from './Props';
+
+const Example = () => (
+
+);
+
+export default Example;
diff --git a/stories/examples/Button.js b/stories/examples/Button.js
new file mode 100644
index 000000000..37da18422
--- /dev/null
+++ b/stories/examples/Button.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Button } from 'reactstrap';
+import { colors } from './options';
+
+const Example = (args) => {
+ return (
+
+);
+
+export default Example;
diff --git a/docs/lib/examples/Button.js b/stories/examples/ButtonColors.js
similarity index 100%
rename from docs/lib/examples/Button.js
rename to stories/examples/ButtonColors.js
diff --git a/docs/lib/examples/ButtonDropdown.js b/stories/examples/ButtonDropdown.js
similarity index 100%
rename from docs/lib/examples/ButtonDropdown.js
rename to stories/examples/ButtonDropdown.js
diff --git a/docs/lib/examples/ButtonDropdownMulti.js b/stories/examples/ButtonDropdownMulti.js
similarity index 97%
rename from docs/lib/examples/ButtonDropdownMulti.js
rename to stories/examples/ButtonDropdownMulti.js
index ee18337c4..403aeb574 100644
--- a/docs/lib/examples/ButtonDropdownMulti.js
+++ b/stories/examples/ButtonDropdownMulti.js
@@ -9,7 +9,7 @@ const Example = (props) => {
return (
- {props.text}
+ Click Me
Header
diff --git a/docs/lib/examples/ButtonDropdownMultiSplit.js b/stories/examples/ButtonDropdownMultiSplit.js
similarity index 91%
rename from docs/lib/examples/ButtonDropdownMultiSplit.js
rename to stories/examples/ButtonDropdownMultiSplit.js
index f72684241..4735b4db3 100644
--- a/docs/lib/examples/ButtonDropdownMultiSplit.js
+++ b/stories/examples/ButtonDropdownMultiSplit.js
@@ -8,7 +8,7 @@ const Example = (props) => {
return (
-
+
Header
diff --git a/docs/lib/examples/ButtonDropdownUncontrolled.js b/stories/examples/ButtonDropdownUncontrolled.js
similarity index 91%
rename from docs/lib/examples/ButtonDropdownUncontrolled.js
rename to stories/examples/ButtonDropdownUncontrolled.js
index 09d25b72d..b2bb4cbb0 100644
--- a/docs/lib/examples/ButtonDropdownUncontrolled.js
+++ b/stories/examples/ButtonDropdownUncontrolled.js
@@ -2,7 +2,7 @@
import React from 'react';
import { UncontrolledButtonDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap';
-const Example = () => {
+const Example = (props) => {
return (
diff --git a/docs/lib/examples/ButtonGroup.js b/stories/examples/ButtonGroup.js
similarity index 100%
rename from docs/lib/examples/ButtonGroup.js
rename to stories/examples/ButtonGroup.js
diff --git a/docs/lib/examples/ButtonOutline.js b/stories/examples/ButtonOutline.js
similarity index 100%
rename from docs/lib/examples/ButtonOutline.js
rename to stories/examples/ButtonOutline.js
diff --git a/stories/examples/ButtonProps.js b/stories/examples/ButtonProps.js
new file mode 100644
index 000000000..0f920d93a
--- /dev/null
+++ b/stories/examples/ButtonProps.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Button, ButtonDropdown, ButtonGroup, ButtonToolbar } from 'reactstrap';
+import Props from './Props';
+
+const Example = () => (
+
+);
+
+export default Example;
diff --git a/docs/lib/examples/ButtonStateful.js b/stories/examples/ButtonStateful.js
similarity index 100%
rename from docs/lib/examples/ButtonStateful.js
rename to stories/examples/ButtonStateful.js
diff --git a/docs/lib/examples/ButtonToolbar.js b/stories/examples/ButtonToolbar.js
similarity index 100%
rename from docs/lib/examples/ButtonToolbar.js
rename to stories/examples/ButtonToolbar.js
diff --git a/docs/lib/examples/Card.js b/stories/examples/Card.js
similarity index 62%
rename from docs/lib/examples/Card.js
rename to stories/examples/Card.js
index e919c6724..44ea9b890 100644
--- a/docs/lib/examples/Card.js
+++ b/stories/examples/Card.js
@@ -1,14 +1,14 @@
import React from 'react';
import {
- Card, CardImg, CardText, CardBody,
+ Card, CardText, CardBody,
CardTitle, CardSubtitle, Button
} from 'reactstrap';
+import { colors } from './options';
-const Example = (props) => {
+const Example = (args) => {
return (
-
-
+ Card titleCard subtitle
@@ -20,4 +20,18 @@ const Example = (props) => {
);
};
+Example.args = {
+ color: undefined,
+ outline: false,
+ inverse: false,
+ body: false,
+};
+
+Example.argTypes = {
+ color: {
+ control: { type: 'select' },
+ options: colors
+ }
+};
+
export default Example;
diff --git a/docs/lib/examples/CardAlignment.js b/stories/examples/CardAlignment.js
similarity index 100%
rename from docs/lib/examples/CardAlignment.js
rename to stories/examples/CardAlignment.js
diff --git a/docs/lib/examples/CardBackgrounds.js b/stories/examples/CardBackgrounds.js
similarity index 100%
rename from docs/lib/examples/CardBackgrounds.js
rename to stories/examples/CardBackgrounds.js
diff --git a/docs/lib/examples/CardColumns.js b/stories/examples/CardColumns.js
similarity index 87%
rename from docs/lib/examples/CardColumns.js
rename to stories/examples/CardColumns.js
index 6beb22d8e..1f5bbc9b2 100644
--- a/docs/lib/examples/CardColumns.js
+++ b/stories/examples/CardColumns.js
@@ -8,7 +8,7 @@ const Example = (props) => {
return (
-
+ Card titleCard subtitle
@@ -17,7 +17,7 @@ const Example = (props) => {
-
+
@@ -33,7 +33,7 @@ const Example = (props) => {
-
+ Card titleCard subtitle
diff --git a/docs/lib/examples/CardContentTypes.js b/stories/examples/CardContentTypes.js
similarity index 88%
rename from docs/lib/examples/CardContentTypes.js
rename to stories/examples/CardContentTypes.js
index 5cb54496b..425869cba 100644
--- a/docs/lib/examples/CardContentTypes.js
+++ b/stories/examples/CardContentTypes.js
@@ -12,7 +12,7 @@ const Example = (props) => {
Card titleCard subtitle
-
+
Some quick example text to build on the card title and make up the bulk of the card's content.Card Link
diff --git a/docs/lib/examples/CardDecks.js b/stories/examples/CardDecks.js
similarity index 83%
rename from docs/lib/examples/CardDecks.js
rename to stories/examples/CardDecks.js
index 6be7fe7e9..b05514d1a 100644
--- a/docs/lib/examples/CardDecks.js
+++ b/stories/examples/CardDecks.js
@@ -8,7 +8,7 @@ const Example = (props) => {
return (
-
+ Card titleCard subtitle
@@ -17,7 +17,7 @@ const Example = (props) => {
-
+ Card titleCard subtitle
@@ -26,7 +26,7 @@ const Example = (props) => {
-
+ Card titleCard subtitle
diff --git a/docs/lib/examples/CardGroups.js b/stories/examples/CardGroups.js
similarity index 83%
rename from docs/lib/examples/CardGroups.js
rename to stories/examples/CardGroups.js
index 8f3ba1503..d5fc3eb79 100644
--- a/docs/lib/examples/CardGroups.js
+++ b/stories/examples/CardGroups.js
@@ -7,7 +7,7 @@ const Example = (props) => {
return (
-
+ Card titleCard subtitle
@@ -16,7 +16,7 @@ const Example = (props) => {
-
+ Card titleCard subtitle
@@ -25,7 +25,7 @@ const Example = (props) => {
-
+ Card titleCard subtitle
diff --git a/docs/lib/examples/CardHeaderFooter.js b/stories/examples/CardHeaderFooter.js
similarity index 100%
rename from docs/lib/examples/CardHeaderFooter.js
rename to stories/examples/CardHeaderFooter.js
diff --git a/docs/lib/examples/CardImageCaps.js b/stories/examples/CardImageCaps.js
similarity index 83%
rename from docs/lib/examples/CardImageCaps.js
rename to stories/examples/CardImageCaps.js
index 64986f539..3d9e732c7 100644
--- a/docs/lib/examples/CardImageCaps.js
+++ b/stories/examples/CardImageCaps.js
@@ -5,7 +5,7 @@ const Example = (props) => {
return (
-
+ Card TitleThis is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
@@ -22,7 +22,7 @@ const Example = (props) => {
Last updated 3 mins ago
-
+
);
diff --git a/docs/lib/examples/CardImageOverlay.js b/stories/examples/CardImageOverlay.js
similarity index 87%
rename from docs/lib/examples/CardImageOverlay.js
rename to stories/examples/CardImageOverlay.js
index c949b3b76..d5f542c80 100644
--- a/docs/lib/examples/CardImageOverlay.js
+++ b/stories/examples/CardImageOverlay.js
@@ -5,7 +5,7 @@ const Example = (props) => {
return (