docs(readme): 📝 add docs for all the components

docs-templates/Accordion.md

@@ -7,13 +7,14 @@ Accessible Accordion component. It follows the
 link_title: Accordion Example Live Demo
 js: src/accordion/stories/__js/AccordionBasic.component.jsx
 css: src/accordion/stories/AccordionStyled.css
+deps: [emotion]
 -->
 
-# Props
+## Props
 
 <!-- INJECT_PROPS src/accordion -->
 
-### Accessibility
+## Accessibility
 
 - `Accordion` extends the accessibility features of
   [Composite](https://github.com/reakit/reakit/blob/master/docs/composite/#accessibility).
@@ -30,11 +31,11 @@ css: src/accordion/stories/AccordionStyled.css
 - `AccordionPanel` extends the accessibility features of
   [DisclosureContent](https://github.com/reakit/reakit/blob/master/docs/disclosure).
 
-### Composition
+## Composition
 
 <!-- INJECT_COMPOSITION src/accordion -->
 
-### Example
+## Example
 
 ```js
 <!-- IMPORT_EXAMPLE src/accordion/stories/__js/AccordionBasic.component.jsx -->

docs-templates/Breadcrumb.md

@@ -4,22 +4,22 @@ 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
+## Props
 
 <!-- INJECT_PROPS src/breadcrumbs -->
 
-### Accessibilty
+## 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
+## Composition
 
 <!-- INJECT_COMPOSITION src/breadcrumbs -->
 
-### Example
+## Example
 
 ```js
 <!-- IMPORT_EXAMPLE src/breadcrumbs/stories/__js/Breadcrumbs.component.jsx -->

docs-templates/Calendar.md

@@ -14,23 +14,23 @@ js: src/calendar/stories/__js/CalendarRange.component.jsx
 css: src/calendar/stories/CalendarRange.css
 -->
 
-# Props
+## Props
 
 <!-- INJECT_PROPS src/calendar -->
 
-# Composition
+## Composition
 
 <!-- INJECT_COMPOSITION src/calendar -->
 
-### Example
+## Example
 
-#### Base Calendar
+### Base Calendar
 
 ```js
 <!-- IMPORT_EXAMPLE src/calendar/stories/__js/CalendarBase.component.jsx -->
 ```
 
-#### Range Calendar
+### Range Calendar
 
 ```js
 <!-- IMPORT_EXAMPLE src/calendar/stories/__js/CalendarRange.component.jsx -->

docs-templates/DatePicker.md

@@ -14,24 +14,24 @@ js: src/datepicker/stories/__js/DateRangePicker.component.jsx
 css: src/datepicker/stories/DatePickerRange.css
 -->
 
-# Props
+## Props
 
 <!-- INJECT_PROPS src/datepicker -->
 
-# Composition
+## Composition
 
 <!-- INJECT_COMPOSITION src/datepicker -->
 
-### Example
+## Example
 
-#### DatePicker
+### DatePicker
 
 ```js
-<!-- IMPORT_EXAMPLE src/datepicker/stories/__js/DatePicker.component.jsx -->
+<!-- IMPORT_EXAMPLE src/datepicker/stories/__js/DatePickerBase.component.jsx -->
 ```
 
-#### Range Date Picker
+### Range Date Picker
 
 ```js
-<!-- IMPORT_EXAMPLE src/datepicker/stories/__js/DateRangePicker.component.jsx -->
+<!-- IMPORT_EXAMPLE src/datepicker/stories/__js/DatePickerRange.component.jsx -->
 ```

docs-templates/Link.md

@@ -4,19 +4,19 @@ 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
+## Props
 
 <!-- INJECT_PROPS src/link -->
 
-### Accessibilty
+## Accessibilty
 
 - `Link` has role `link`.
 
-### Composition
+## Composition
 
 <!-- INJECT_COMPOSITION src/link -->
 
-### Example
+## Example
 
 ```js
 <!-- IMPORT_EXAMPLE src/link/stories/__js/Link.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/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 -->
+```

docs-templates/pagination.md

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

docs-templates/picker-base.md

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

docs-templates/progress.md

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

docs-templates/segment.md

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

docs-templates/select.md

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

docs-templates/slider.md

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

docs-templates/timepicker.md

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

docs-templates/toast.md

@@ -0,0 +1,16 @@
+## Toast
+
+Accessible `Toast` component.
+
+<!-- CODESANDBOX
+link_title: Toast - Open On Sandbox
+js: src/toast/stories/__js/ToastBasic.component.jsx
+utils: src/toast/stories/__js/Utils.component.jsx
+css: src/toast/stories/ToastBasic.css
+-->
+
+## Example
+
+```js
+<!-- IMPORT_EXAMPLE src/toast/stories/__js/ToastBasic.component.jsx -->
+```