Updated Docs

.all-contributorsrc

@@ -0,0 +1,42 @@
+{
+  "projectName": "renderless-components",
+  "projectOwner": "timelessco",
+  "repoType": "github",
+  "repoHost": "https://github.com",
+  "files": [
+    "README.md"
+  ],
+  "imageSize": 100,
+  "commit": true,
+  "commitConvention": "angular",
+  "contributors": [
+    {
+      "login": "navin-moorthy",
+      "name": "Navin Moorthy",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/39694575?v=4",
+      "profile": "https://navinmoorthy.me/",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "anuraghazra",
+      "name": "Anurag Hazra",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/35374649?v=4",
+      "profile": "http://anuraghazra.github.io/",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "sandeepprabhakaran",
+      "name": "Sandeep Prabhakaran",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/6380293?v=4",
+      "profile": "http://timeless.co/",
+      "contributions": [
+        "ideas"
+      ]
+    }
+  ],
+  "contributorsPerLine": 7
+}

README.md

@@ -1,16 +1,89 @@
-# Renderless Components
+<h1 align="center">Renderless Components</h1>
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
 
-Accessible, composable, customizable renderless components powered by Reakit
+<p align="center">
+  Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by <a href="https://reakit.io/">Reakit</a>
 System.
+<a href="https://renderless-components.netlify.app/"><strong>Explore all components »</strong></a>
+</p>
+
+<p align="center">
+  <a href="https://npmjs.org/package/renderless-components"><img alt="NPM version" src="https://img.shields.io/npm/v/renderless-components.svg" /></a>
+  <a href="https://npmjs.org/package/renderless-components"><img alt="NPM downloads" src="https://img.shields.io/npm/dm/renderless-components.svg"></a>
+  <a href="https://github.com/timelessco/renderless-components/actions"><img alt="Build Status" src="https://github.com/timelessco/renderless-components/workflows/Test/badge.svg?event=push&branch=master" /></a>
+  <a href="https://app.netlify.com/sites/renderless-components/deploys"><img alt="Netlify Status" src="https://api.netlify.com/api/v1/badges/42b9b82f-b8e7-441e-a6c3-9f301addd7ff/deploy-status" /></a><br/>
+  <a href="https://github.com/timelessco/renderless-components/blob/master/LICENSE"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="License"></a>
+</p>
 
 ## Features
 
-- WAI-ARIA compatible
-- Keyboard accessible
-- Single HTML tag components
-- React Hooks everywhere
-- Easy to style
-- Easy to compose
+- Accessible :wheelchair:
+- Composable :toolbox:
+- WAI-ARIA Compatible :spiral_notepad:
+- React Hooks Based :anchor:
+- Easy To Customize, Style & Extend :nail_care:
+
+## :rocket: Installation
+
+```sh
+# npm
+npm install renderless-components reakit
+
+# Yarn
+yarn add renderless-components reakit
+```
+
+> Make sure `react react-dom` is installed.
+
+## Getting started
+
+Check out our [getting started docs](/docs/getting-started.md)
+
+## Component Docs
+
+- [Accordion](docs/accordion.md)
+- [Breadcrumbs](docs/breadcrumb.md)
+- [Calendar](docs/calendar.md)
+- [Date Picker](docs/datepicker.md)
+- [Drawer](docs/drawer.md)
+- [Link](docs/Link.md)
+- [Meter](docs/meter.md)
+- [Number Input](docs/number-input.md)
+- [Pagination](docs/pagination.md)
+- [Picker Base](docs/picker-base.md)
+- [Progress](docs/progress.md)
+- [Segment](docs/segment.md)
+- [Select](docs/select.md)
+- [Slider](docs/slider.md)
+- [Time Picker](docs/timepicker.md)
+- [Toast](docs/toast.md)
+
+## Contributors ✨
+
+Thanks goes to these wonderful people
+([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="https://navinmoorthy.me/"><img src="https://avatars0.githubusercontent.com/u/39694575?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Navin Moorthy</b></sub></a><br /><a href="https://github.com/timelessco/renderless-components/commits?author=navin-moorthy" title="Code">💻</a></td>
+    <td align="center"><a href="http://anuraghazra.github.io/"><img src="https://avatars3.githubusercontent.com/u/35374649?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Anurag Hazra</b></sub></a><br /><a href="https://github.com/timelessco/renderless-components/commits?author=anuraghazra" title="Code">💻</a></td>
+    <td align="center"><a href="http://timeless.co/"><img src="https://avatars2.githubusercontent.com/u/6380293?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sandeep Prabhakaran</b></sub></a><br /><a href="#ideas-sandeepprabhakaran" title="Ideas, Planning, & Feedback">🤔</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the
+[all-contributors](https://github.com/all-contributors/all-contributors)
+specification. Contributions of any kind welcome!
 
 ## License
 

docs-templates/accordion.md

@@ -0,0 +1,42 @@
+## Accordion
+
+Accessible Accordion component. It follows the
+[WAI-ARIA Accordion Pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#accordion).
+
+<!-- CODESANDBOX
+link_title: Accordion Example Live Demo
+js: src/accordion/stories/__js/AccordionBasic.component.jsx
+css: src/accordion/stories/AccordionStyled.css
+deps: [emotion]
+-->
+
+## Props
+
+<!-- INJECT_PROPS src/accordion -->
+
+## Accessibility
+
+- `Accordion` extends the accessibility features of
+  [Composite](https://github.com/reakit/reakit/blob/master/docs/composite/#accessibility).
+- `AccordionTrigger` has role `button`.
+- `AccordionTrigger` has `aria-controls` referring to its associated
+  `AccordionPanel`.
+- `AccordionTrigger` has `aria-expanded` set to `true` when it's associated
+  `AccordionPanel` is expanded.
+- Each `AccordionTrigger` should be wrapped in an element with role `heading`.
+- `AccordionTrigger` extends the accessibility features of
+  [CompositeItem](https://github.com/reakit/reakit/blob/master/docs/composite/#accessibility).
+- `AccordionPanel` has `aria-labelledby` referring to its associated
+  `AccordionTrigger`.
+- `AccordionPanel` extends the accessibility features of
+  [DisclosureContent](https://github.com/reakit/reakit/blob/master/docs/disclosure).
+
+## Composition
+
+<!-- INJECT_COMPOSITION src/accordion -->
+
+## Example
+
+```js
+<!-- IMPORT_EXAMPLE src/accordion/stories/__js/AccordionBasic.component.jsx -->
+```

docs-templates/breadcrumb.md

@@ -0,0 +1,26 @@
+## Breadcrumb
+
+Accessible `Breadcrumb` component that provides the required aria attributes for
+it's links. It follows the
+[WAI-ARIA Breadcrumb Pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#breadcrumb).
+
+## Props
+
+<!-- INJECT_PROPS src/breadcrumbs -->
+
+## Accessibilty
+
+- `Breadcrumbs` should have `aria-label` or `aria-labelledby` attribute.
+- `BreadcrumbLink` should have `aria-current` set to `page` if the currenct page
+  is loaded.
+- `BreadcrumbLink` extends the accessibility features of [Link](#Link).
+
+## Composition
+
+<!-- INJECT_COMPOSITION src/breadcrumbs -->
+
+## Example
+
+```js
+<!-- IMPORT_EXAMPLE src/breadcrumbs/stories/__js/Breadcrumbs.component.jsx -->
+```

docs-templates/calendar.md

@@ -0,0 +1,37 @@
+## Calendar
+
+Accessible `Calendar` component.
+
+<!-- CODESANDBOX
+link_title: Calendar - Open On Sandbox
+js: src/calendar/stories/__js/CalendarBase.component.jsx
+css: src/calendar/stories/CalendarBase.css
+-->
+
+<!-- CODESANDBOX
+link_title: RangeCalendar - Open On Sandbox
+js: src/calendar/stories/__js/CalendarRange.component.jsx
+css: src/calendar/stories/CalendarRange.css
+-->
+
+## Props
+
+<!-- INJECT_PROPS src/calendar -->
+
+## Composition
+
+<!-- INJECT_COMPOSITION src/calendar -->
+
+## Example
+
+### Base Calendar
+
+```js
+<!-- IMPORT_EXAMPLE src/calendar/stories/__js/CalendarBase.component.jsx -->
+```
+
+### Range Calendar
+
+```js
+<!-- IMPORT_EXAMPLE src/calendar/stories/__js/CalendarRange.component.jsx -->
+```

docs-templates/datepicker.md

@@ -0,0 +1,37 @@
+## DatePicker
+
+Accessible `DatePicker` component.
+
+<!-- CODESANDBOX
+link_title: DatePicker - Open On Sandbox
+js: src/datepicker/stories/__js/DatePicker.component.jsx
+css: src/datepicker/stories/DatePickerBase.css
+-->
+
+<!-- CODESANDBOX
+link_title: RangeDatePicker - Open On Sandbox
+js: src/datepicker/stories/__js/DateRangePicker.component.jsx
+css: src/datepicker/stories/DatePickerRange.css
+-->
+
+## Props
+
+<!-- INJECT_PROPS src/datepicker -->
+
+## Composition
+
+<!-- INJECT_COMPOSITION src/datepicker -->
+
+## Example
+
+### DatePicker
+
+```js
+<!-- IMPORT_EXAMPLE src/datepicker/stories/__js/DatePickerBase.component.jsx -->
+```
+
+### Range Date Picker
+
+```js
+<!-- IMPORT_EXAMPLE src/datepicker/stories/__js/DatePickerRange.component.jsx -->
+```

docs-templates/drawer.md

@@ -0,0 +1,22 @@
+## Drawer
+
+Accessible `Drawer` component.
+
+<!-- CODESANDBOX
+link_title: Drawer - Open On Sandbox
+js: src/drawer/stories/__js/Drawer.component.jsx
+-->
+
+## Props
+
+<!-- INJECT_PROPS src/drawer -->
+
+## Composition
+
+<!-- INJECT_COMPOSITION src/drawer -->
+
+## Example
+
+```js
+<!-- IMPORT_EXAMPLE src/drawer/stories/__js/Drawer.component.jsx -->
+```

docs-templates/link.md

@@ -0,0 +1,23 @@
+## Link
+
+Accessible `Link` component that provides the required aria role when used under
+different compositions. It follows the
+[WAI-ARIA Link Pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#link).
+
+## Props
+
+<!-- INJECT_PROPS src/link -->
+
+## Accessibilty
+
+- `Link` has role `link`.
+
+## Composition
+
+<!-- INJECT_COMPOSITION src/link -->
+
+## Example
+
+```js
+<!-- IMPORT_EXAMPLE src/link/stories/__js/Link.component.jsx -->
+```

docs-templates/meter.md

@@ -0,0 +1,23 @@
+## Meter
+
+Accessible `Meter` component.
+
+<!-- CODESANDBOX
+link_title: Meter - Open On Sandbox
+js: src/meter/stories/__js/Meter.component.jsx
+deps: [emotion]
+-->
+
+## Props
+
+<!-- INJECT_PROPS src/meter -->
+
+## Composition
+
+<!-- INJECT_COMPOSITION src/meter -->
+
+## Example
+
+```js
+<!-- IMPORT_EXAMPLE src/meter/stories/__js/Meter.component.jsx -->
+```

docs-templates/number-input.md

@@ -0,0 +1,22 @@
+## NumberInput
+
+Accessible `NumberInput` component.
+
+<!-- CODESANDBOX
+link_title: NumberInput - Open On Sandbox
+js: src/number-input/stories/__js/NumberInput.component.jsx
+-->
+
+## Props
+
+<!-- INJECT_PROPS src/number-input -->
+
+## Composition
+
+<!-- INJECT_COMPOSITION src/number-input -->
+
+## Example
+
+```js
+<!-- IMPORT_EXAMPLE src/number-input/stories/__js/NumberInput.component.jsx -->
+```