Merge pull request #2544 from illiteratewriter/spinner-docs-update

docs(Spinner): update Spinner docs to follow Bootstrap documentaion

src/Spinner.js

@@ -4,12 +4,19 @@ import classNames from 'classnames';
 import { mapToCssModules, tagPropType } from './utils';
 
 const propTypes = {
+  /** Set a custom element for this component */
   tag: tagPropType,
-  type: PropTypes.string,
-  size: PropTypes.string,
-  color: PropTypes.string,
+  /** Change animation of spinner */
+  type: PropTypes.oneOf(['border', 'grow']),
+  /** Change size of spinner */
+  size: PropTypes.oneOf(['sm']),
+  /** Change color of spinner */
+  color: PropTypes.oneOf(['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']),
+  /** Add custom class */
   className: PropTypes.string,
+  /** Change existing className with a new className */
   cssModule: PropTypes.object,
+  /** Pass children so this component can wrap the child elements*/
   children: PropTypes.string
 };
 

stories/Spinner.stories.js

@@ -16,5 +16,10 @@ export default {
 };
 
 export { default as Spinner } from './examples/Spinner';
-export { default as SpinnerGrower } from './examples/SpinnerGrower';
+export { default as Colors } from './examples/SpinnerColors'
+export { default as GrowingSpinner } from './examples/SpinnerGrower';
+export { default as Alignment } from './examples/SpinnerAlignment';
+export { default as Size } from './examples/SpinnerSize';
+export { default as CustomSize } from './examples/SpinnerCustomSize';
+export { default as Buttons } from './examples/SpinnerButton';
 export { default as Props } from './examples/SpinnerProps';

stories/examples/SpinnerAlignment.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Spinner } from 'reactstrap';
+
+const Example = (props) => {
+  return (
+    <Spinner className="m-5" color="primary" />
+  );
+}
+
+export default Example;
+
+Example.parameters = {
+  docs: {
+    description: {
+      story: 'Spinners in Bootstrap are built with rems, currentColor, and display: inline-flex. This means they can easily be resized, recolored, and quickly aligned.\
+\n\n\
+Use margin utilities like `.m-5` for easy spacing'
+    }
+  }
+}

stories/examples/SpinnerButton.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Spinner, Button } from 'reactstrap';
+
+const Example = (args) => {
+  return (
+    <>
+      <Button disabled color="primary">
+        <Spinner size="sm" />
+        <span> Loading</span>
+      </Button>
+    </>
+  );
+}
+
+export default Example;
+
+
+Example.parameters = {
+  docs: {
+    description: {
+      story: 'Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.'
+    }
+  }
+}

stories/examples/SpinnerColors.js

@@ -0,0 +1,25 @@
+
+import React from 'react';
+import { Spinner } from 'reactstrap';
+import { colors } from './options';
+
+const Example = (args) => {
+  return (
+    <>
+      {colors.map((color) => (
+        <Spinner color={color} key={color} />
+      ))}
+    </>
+  );
+}
+
+export default Example;
+
+
+Example.parameters = {
+  docs: {
+    description: {
+      story: 'All standard visual variant colors can be applied for the spinner.'
+    }
+  }
+}

stories/examples/SpinnerCustomSize.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Spinner } from 'reactstrap';
+
+const Example = (props) => {
+  return (
+    <>
+      <Spinner color="primary" style={{ width: '3rem', height: '3rem' }} />
+      <Spinner type="grow" color="primary" style={{ width: '3rem', height: '3rem' }} />
+    </>
+  );
+}
+
+export default Example;
+
+Example.parameters = {
+  docs: {
+    description: {
+      story: 'Or use custom css as needed'
+    }
+  }
+}

stories/examples/SpinnerGrower.js

@@ -1,19 +1,23 @@
 import React from 'react';
 import { Spinner } from 'reactstrap';
+import { colors } from './options';
 
 const Example = (props) => {
   return (
-    <div>
-      <Spinner type="grow" color="primary" />
-      <Spinner type="grow" color="secondary" />
-      <Spinner type="grow" color="success" />
-      <Spinner type="grow" color="danger" />
-      <Spinner type="grow" color="warning" />
-      <Spinner type="grow" color="info" />
-      <Spinner type="grow" color="light" />
-      <Spinner type="grow" color="dark" />
-    </div>
+    <>
+      {colors.map((color) => (
+        <Spinner type="grow" color={color} key={color} />
+      ))}
+    </>
   );
 }
 
 export default Example;
+
+Example.parameters = {
+  docs: {
+    description: {
+      story: 'If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow! Once again you can apply all the colors as above.'
+    }
+  }
+}

stories/examples/SpinnerSize.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Spinner } from 'reactstrap';
+
+const Example = (props) => {
+  return (
+    <>
+      <Spinner color="primary" size="sm" />
+      <Spinner type="grow" color="primary" size="sm" />
+    </>
+  );
+}
+
+export default Example;
+
+Example.parameters = {
+  docs: {
+    description: {
+      story: 'Add `size="sm` to make a smaller spinner that can quickly be used within other components.'
+    }
+  }
+}