Merge pull request #48 from HardJoe/master

Add Spinner doc and modify Carousel alt text

docusaurus/docs/carousel.md

@@ -32,9 +32,9 @@ const content3 = "/img/carousel-card-img.png"
     prevButton={(<img src="/img/carousel_prev.svg" alt="prev button"/>)}
     nextButton={(<img src="/img/carousel_next.svg" alt="next button"/>)}
 >
-<div className="first-content" style={{ color: "blue" }}>tes</div>
-<div className="second-content" style={{ color: "yellow" }}>tes</div>
-<div className="third-content" style={{ color: "red" }}>tes</div>
+<div className="first-content" style={{ color: "blue" }}>content 1</div>
+<div className="second-content" style={{ color: "yellow" }}>content 2</div>
+<div className="third-content" style={{ color: "red" }}>content 3</div>
 </Carousel>
 
 ### Props

docusaurus/docs/spinner.md

@@ -0,0 +1,147 @@
+---
+id: spinner
+title: Spinner
+---
+
+import { Spinner, Button } from 'jasper-ui'
+
+Spinner is a component that functions as a progress indicator while some content is being loaded, useful to show the loading state in your projects.
+
+## Usage
+
+Spinner will show at the center of a loading screen. Their appearance, alignment, and sizing can be easily customized in order to enhance visibility.
+
+## Animations
+
+The animation style can be configured with the `animation` property. Specifying the `animation` property is optional and by default is set to `linear`.
+
+### Linear Spinner - `linear`
+
+<div style={{ display: "flex", height: "120px", width: "auto" }}>
+    <Spinner animation="linear" />
+</div>
+
+```jsx
+<Spinner animation="linear" />
+```
+
+### Ease Spinner - `ease`
+
+<div style={{ display: "flex", height: "120px", width: "auto" }}>
+    <Spinner animation="ease" />
+</div>
+
+```jsx
+<Spinner animation="ease" />
+```
+
+### Bouncy Spinner - `bouncy`
+
+<div style={{ display: "flex", height: "120px", width: "auto" }}>
+    <Spinner animation="bouncy" />
+</div>
+
+```jsx
+<Spinner animation="bouncy" />
+```
+
+## Variants
+
+Two visual variants are available for all animation styles by setting the `variant` property.
+
+<div style={{ display: "flex", height: "120px", width: "auto" }}>
+    <Spinner variant="default" animation="linear" />
+    <Spinner variant="regular" animation="linear" />
+    <Spinner variant="default" animation="ease" />
+    <Spinner variant="regular" animation="ease" />
+    <Spinner variant="default" animation="bouncy" />
+    <Spinner variant="regular" animation="bouncy" />
+</div>
+
+```jsx
+<>
+    <Spinner variant="default" animation="linear" />
+    <Spinner variant="regular" animation="linear" />
+    <Spinner variant="default" animation="ease" />
+    <Spinner variant="regular" animation="ease" />
+    <Spinner variant="default" animation="bouncy" />
+    <Spinner variant="regular" animation="bouncy" />
+</>
+```
+
+## Sizes
+
+In addition to the standard size, additional preconfigured sizes are available by configuring the `size` property.
+
+<div style={{ display: "flex", height: "240px", width: "auto" }}>
+    <Spinner variant="default" size="sm" />
+    <Spinner variant="default" size="lg" />
+    <Spinner variant="regular" size="sm" />
+    <Spinner variant="regular" size="lg" />
+</div>
+
+```jsx
+<>
+    <Spinner variant="default" size="sm" />
+    <Spinner variant="default" size="lg" />
+    <Spinner variant="regular" size="sm" />
+    <Spinner variant="regular" size="lg" />
+</>
+```
+
+## Speed
+
+The rotation speed of a Spinner can be altered using the `speed` property.
+
+<div style={{ display: "flex", height: "120px", width: "auto" }}>
+    <Spinner speed="slow" animation="linear" />
+    <Spinner speed="normal" animation="linear" />
+    <Spinner speed="fast" animation="linear" />
+    <Spinner speed="slow" animation="ease" />
+    <Spinner speed="normal" animation="ease" />
+    <Spinner speed="fast" animation="ease" />
+    <Spinner speed="slow" animation="bouncy" />
+    <Spinner speed="normal" animation="bouncy" />
+    <Spinner speed="fast" animation="bouncy" />
+</div>
+
+```jsx
+<>
+    <Spinner speed="slow" animation="linear" />
+    <Spinner speed="normal" animation="linear" />
+    <Spinner speed="fast" animation="linear" />
+    <Spinner speed="slow" animation="ease" />
+    <Spinner speed="normal" animation="ease" />
+    <Spinner speed="fast" animation="ease" />
+    <Spinner speed="slow" animation="bouncy" />
+    <Spinner speed="normal" animation="bouncy" />
+    <Spinner speed="fast" animation="bouncy" />
+</>
+```
+
+## Buttons
+
+Spinner can also be used with buttons. To use this component out-of-the-box you just need to wrap it with a `Button` component.
+
+<div style={{ display: "flex", height: "auto", width: "auto" }}>
+    <Button>
+        <Spinner variant="regular" animation="linear" />
+    </Button>
+</div>
+
+```jsx
+<>
+    <Button>
+        <Spinner variant="regular" animation="linear" />
+    </Button>
+</>
+```
+
+## Props
+
+|     Name     |   Type   |  Default  |                                                           Description                                                                   |
+|--------------|----------|-----------|-----------------------------------------------------------------------------------------------------------------------------------------|
+| `variant`    | `String` | `default` | Customize Spinner theme between `default` and `regular`                                                                                 |
+| `size`       | `String` | `md`      | Specify the size of Spinner using `xs`, `sm`, `md`, `lg`, or `xl`.                                                                      |
+| `speed`      | `String` | `normal`  | Speed up or slow down Spinner rotating speed using `slow`, `normal`, or `fast`                                                          |
+| `animation`  | `String` | `linear`  | Change Spinner animation type.<br/><br/>Spinner may use one of a variety of animation variants such as:<br/>`linear`, `ease`, `bouncy`. |

docusaurus/sidebars.js

@@ -6,10 +6,11 @@ module.exports = {
       "alert-box",
       "button",
       "card",
+      "carousel",
       "footer",
       "form-fields",
       "small-nav",
-      "carousel"
+      "spinner"
     ],
     Info: ["about"]
   }