Add new files and update existing files

.gitignore

@@ -133,5 +133,8 @@ dist
 .docusaurus
 .parcel-cache
 build
-docs
+./docs/.docusaurus
+./docs/.docz
+./docs/vscode
+
 

docs/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

docs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

docs/docs/components/Radio.mdx

@@ -0,0 +1,47 @@
+---
+---
+
+import PropsTable from '../../src/components/props-table'
+import { getPropsTableData} from '../../src/components/helpers'
+
+# Radio
+
+```jsx live
+<Radio
+  visible={true}
+  height="80"
+  width="80"
+  ariaLabel="radio-loading"
+  wrapperStyle={{}}
+  wrapperClass="radio-wrapper"
+/>
+```
+
+## Props
+
+<PropsTable
+  properties={[
+    ...getPropsTableData('radio', ['colors']),
+    {
+      name: 'colors',
+      type: 'object',
+      default: '[#4fa94d, #4fa94d, #4fa94d]',
+      description: 'Customize colors of the component.',
+    }
+    ]}
+/>
+
+## More Example
+
+```jsx live
+<Radio
+  colors={['#8C5E58', '#2B061E', '#361134']}
+/>
+```
+
+```jsx live
+<Radio
+  colors={['#51E5FF', '#7DE2D1', '#FF7E6B']}
+/>
+```
+

docs/docs/components/_category_.json

@@ -0,0 +1,9 @@
+{
+  "label": "Components",
+  "position": 2,
+  "collapsed": false,
+  "link": {
+    "type": "generated-index",
+    "description": "View all spinner"
+  }
+}

docs/docs/components/audio.mdx

@@ -0,0 +1,23 @@
+---
+---
+import PropsTable from "../../src/components/props-table"
+import { getPropsTableData} from '../../src/components/helpers'
+
+# Audio
+
+```jsx live
+<Audio
+  height="100"
+  width="100"
+  color="#4fa94d"
+  ariaLabel="audio-loading"
+  wrapperStyle={{}}
+  wrapperClass="wrapper-class"
+  visible={true}
+/>
+```
+
+### Props
+<PropsTable
+  properties={[...getPropsTableData('audio', 'colors')]}
+/>

docs/docs/components/ball-traingle.mdx

@@ -0,0 +1,24 @@
+---
+---
+
+import PropsTable from '../../src/components/props-table'
+import { getPropsTableData} from '../../src/components/helpers'
+
+# Ball Triangle
+
+```jsx live
+<BallTriangle
+  height={100}
+  width={100}
+  radius={5}
+  color="#4fa94d"
+  ariaLabel="ball-triangle-loading"
+  wrapperClass={{}}
+  wrapperStyle=""
+  visible={true}
+/>
+```
+### Props
+<PropsTable
+  properties={[...getPropsTableData('ball-triangle', 'colors')]}
+/>

docs/docs/components/bars.mdx

@@ -0,0 +1,26 @@
+---
+---
+import PropsTable from '../../src/components/props-table'
+import { getPropsTableData} from '../../src/components/helpers'
+
+
+# Bars
+
+```jsx live
+<Bars
+  height="80"
+  width="80"
+  color="#4fa94d"
+  ariaLabel="bars-loading"
+  wrapperStyle={{}}
+  wrapperClass=""
+  visible={true}
+/>
+```
+
+## Props
+
+<PropsTable
+  properties={[...getPropsTableData('bars', 'colors')]}
+/>
+

docs/docs/components/blocks.mdx

@@ -0,0 +1,24 @@
+---
+---
+
+import PropsTable from '../../src/components/props-table'
+import { getPropsTableData} from '../../src/components/helpers'
+
+# Blocks
+
+```jsx live
+<Blocks
+  visible={true}
+  height="80"
+  width="80"
+  ariaLabel="blocks-loading"
+  wrapperStyle={{}}
+  wrapperClass="blocks-wrapper"
+/>
+```
+
+## Props
+
+<PropsTable
+  properties={[...getPropsTableData('blocks', ['colors'])]}
+/>

docs/docs/components/circles-with-bar.mdx

@@ -0,0 +1,91 @@
+---
+---
+
+import PropsTable from '../../src/components/props-table'
+
+# Circles With Bar
+
+```jsx live
+<CirclesWithBar
+  height="100"
+  width="100"
+  color="#4fa94d"
+  wrapperStyle={{}}
+  wrapperClass=""
+  visible={true}
+  outerCircleColor=""
+  innerCircleColor=""
+  barColor=""
+  ariaLabel='circles-with-bar-loading'
+/>
+```
+
+## Props
+
+<PropsTable
+  properties={[
+    {
+      name: 'wrapperStyle',
+      type: 'object',
+      default: 'undefined',
+      description: 'Styles to be applied to the wrapper. It should be a valid CSS object. It can be used for custom styling. It will override the default style.',
+    },
+    {
+      name: 'visible',
+      type: 'boolean',
+      default: 'true',
+      description: 'Whether the circles are visible',
+    },
+    {
+      name: 'wrapperClass',
+      type: 'string',
+      default: '',
+      description: 'CSS class name for the wrapper element',
+    },
+    {
+      name: 'height',
+      type: 'string | number',
+      default: '100',
+      description: 'Height of the wrapper element',
+    },
+    {
+      name: 'width',
+      type: 'string | number',
+      default: '100',
+      description: 'Width of the wrapper element',
+    },
+    {
+      name: 'color',
+      type: 'string',
+      default: '#4fa94d',
+      description: 'Color of the outer circle. It will also be used for the bar color if `barColor` is not specified.',
+    },
+    {
+      name: 'outerCircleColor',
+      type: 'string',
+      default: 'undefined',
+      description:
+        'Color of the outer circle. If not defined, it will be the same as color',
+    },
+    {
+      name: 'innerCircleColor',
+      type: 'string',
+      default: 'undefined',
+      description:
+        'Color of the inner circle. If not defined, it will be the same as color',
+    },
+    {
+      name: 'barColor',
+      type: 'string',
+      default: 'undefined',
+      description:
+        'Color of the bar. If not defined, it will be the same as color',
+    },
+    {
+      name: 'ariaLabel',
+      type: 'string',
+      default: 'circles-with-bar-loading',
+      description: 'Aria label for the wrapper element',
+    }
+  ]}
+/>

docs/docs/components/circles.mdx

@@ -0,0 +1,25 @@
+---
+---
+import PropsTable from '../../src/components/props-table'
+import { getPropsTableData} from '../../src/components/helpers'
+
+# Circles
+
+```jsx live
+<Circles
+  height="80"
+  width="80"
+  color="#4fa94d"
+  ariaLabel="circles-loading"
+  wrapperStyle={{}}
+  wrapperClass=""
+  visible={true}
+/>
+```
+
+### Props
+<PropsTable
+  properties={[
+    ...getPropsTableData('circles', ['colors'])
+  ]}
+/>

docs/docs/components/color-ring.mdx

@@ -0,0 +1,53 @@
+---
+---
+
+import PropsTable from '../../src/components/props-table'
+import { getPropsTableData } from '../../src/components/helpers'
+
+# Color Ring
+
+```jsx live
+<ColorRing
+  visible={true}
+  height="80"
+  width="80"
+  ariaLabel="blocks-loading"
+  wrapperStyle={{}}
+  wrapperClass="blocks-wrapper"
+  colors={['#e15b64', '#f47e60', '#f8b26a', '#abbd81', '#849b87']}
+/>
+```
+
+## Props
+
+<PropsTable
+  properties={[
+    ...getPropsTableData('color-ring', ['colors']),
+    {
+      name: 'colors',
+      type: 'array',
+      default: `[
+      "#e15b64",
+      "#f47e60",
+      "#f8b26a",
+      "#abbd81",
+      "#849b87"
+      ]`,
+      description: 'Array of colors to be used in the ring',
+    },
+  ]}
+/>
+
+## More example:
+
+```jsx live
+<ColorRing
+  visible={true}
+  height="80"
+  width="80"
+  ariaLabel="blocks-loading"
+  wrapperStyle={{}}
+  wrapperClass="blocks-wrapper"
+  colors={['#b8c480', '#B2A3B5', '#F4442E', '#51E5FF', '#429EA6']}
+/>
+```