adaptui · navin-moorthy · Dec 3, 2020 · Dec 2, 2020 · Dec 3, 2020 · Dec 3, 2020
diff --git a/docs-templates/accordion.md b/docs-templates/accordion.md
@@ -1,42 +1,35 @@
-## Accordion
+# Accordion
 
-Accessible Accordion component. It follows the
-[WAI-ARIA Accordion Pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#accordion).
+`Accordion` component expands/collapses to show more information on clicking the
+trigger button. It follows the
+[WAI-ARIA Accordion Pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#accordion)
+for
+[keyboard interaction](https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction)
+&
+[accessibiltiy properties](https://www.w3.org/TR/wai-aria-practices-1.2/#wai-aria-roles-states-and-properties).
+
+<!-- INJECT_TOC -->
+
+## Usage
+
+<!-- IMPORT_EXAMPLE src/accordion/stories/__js/AccordionBasic.component.jsx -->
 
 <!-- CODESANDBOX
-link_title: Accordion Example Live Demo
-js: src/accordion/stories/__js/AccordionBasic.component.jsx
+link_title: Accordion Styled - Open on Sandbox
+js: src/accordion/stories/__js/AccordionStyled.component.jsx
 css: src/accordion/stories/AccordionStyled.css
-deps: [emotion]
 -->
 
-## Props
+<!-- CODESANDBOX
+link_title: Accordion Basic - Open on Sandbox
+js: src/accordion/stories/__js/AccordionBasic.component.jsx
+-->
 
-<!-- INJECT_PROPS src/accordion -->
+## Accessibility Requirements
 
-## 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
+- Each `AccordionTrigger` should be wrapped in an element with role `heading`
+  with proper aria-level.
 
 <!-- INJECT_COMPOSITION src/accordion -->
 
-## Example
-
-```js
-<!-- IMPORT_EXAMPLE src/accordion/stories/__js/AccordionBasic.component.jsx -->
-```
+<!-- INJECT_PROPS src/accordion -->
diff --git a/docs-templates/breadcrumb.md b/docs-templates/breadcrumb.md
@@ -1,26 +1,29 @@
-## Breadcrumb
+# 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).
+`Breadcrumb` component is used for the page navigation and it 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)
+for its
+[accessibility properties](https://www.w3.org/TR/wai-aria-practices-1.2/#wai-aria-roles-states-and-properties-2).
 
-## Props
+<!-- INJECT_TOC -->
 
-<!-- INJECT_PROPS src/breadcrumbs -->
+## Usage
+
+<!-- IMPORT_EXAMPLE src/breadcrumbs/stories/__js/Breadcrumbs.component.jsx -->
+
+<!-- CODESANDBOX
+link_title: Breadcrumbs Basic - Open on Sandbox
+js: src/breadcrumbs/stories/__js/Breadcrumbs.component.jsx
+css: src/breadcrumbs/stories/Breadcrumbs.css
+-->
 
-## Accessibilty
+## Accessibility Requirement
 
 - `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 -->
-```
+<!-- INJECT_PROPS src/breadcrumbs -->
diff --git a/docs-templates/calendar.md b/docs-templates/calendar.md
@@ -1,37 +1,35 @@
-## Calendar
+# Calendar
 
-Accessible `Calendar` component.
+`Calendar` component provides a way to select a date or a range of dates while
+allowing you to style them however. All the date, month & year calculations are
+done internally to provide the ease of use. It follows the
+[Grid Pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#grid) for the
+keyboard navigaiton & focus management.
 
-<!-- CODESANDBOX
-link_title: Calendar - Open On Sandbox
-js: src/calendar/stories/__js/CalendarBase.component.jsx
-css: src/calendar/stories/CalendarBase.css
--->
+<!-- INJECT_TOC -->
+
+## Usage
+
+### Base Calendar
+
+<!-- IMPORT_EXAMPLE src/calendar/stories/__js/CalendarBase.component.jsx -->
+
+### Range Calendar
+
+<!-- IMPORT_EXAMPLE src/calendar/stories/__js/CalendarRange.component.jsx -->
 
 <!-- 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
+<!-- CODESANDBOX
+link_title: Calendar - Open On Sandbox
+js: src/calendar/stories/__js/CalendarBase.component.jsx
+css: src/calendar/stories/CalendarBase.css
+-->
 
 <!-- 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 -->
-```
+<!-- INJECT_PROPS src/calendar -->
diff --git a/docs-templates/datepicker.md b/docs-templates/datepicker.md
@@ -1,37 +1,34 @@
-## DatePicker
+# DatePicker
 
-Accessible `DatePicker` component.
+`DatePicker` component provides a way to select a date or a range of dates with
+the help of [Calendar](./calendar.md) component. It follows the
+[Native Input Date](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date)
+for the keyboard navigation & accessibility features.
 
-<!-- CODESANDBOX
-link_title: DatePicker - Open On Sandbox
-js: src/datepicker/stories/__js/DatePicker.component.jsx
-css: src/datepicker/stories/DatePickerBase.css
--->
+<!-- INJECT_TOC -->
+
+## Usage
+
+### DatePicker
+
+<!-- IMPORT_EXAMPLE src/datepicker/stories/__js/DatePickerBase.component.jsx -->
+
+### Range DatePicker
+
+<!-- IMPORT_EXAMPLE src/datepicker/stories/__js/DatePickerRange.component.jsx -->
 
 <!-- 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
+<!-- CODESANDBOX
+link_title: DatePicker - Open On Sandbox
+js: src/datepicker/stories/__js/DatePicker.component.jsx
+css: src/datepicker/stories/DatePickerBase.css
+-->
 
 <!-- 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 -->
-```
+<!-- INJECT_PROPS src/datepicker -->
diff --git a/docs-templates/drawer.md b/docs-templates/drawer.md
@@ -1,22 +1,20 @@
-## Drawer
+# Drawer
 
-Accessible `Drawer` component.
+`Drawer` component was built on top of [Dialog](https://reakit.io/docs/dialog/)
+component to provide the drawer ability from four ends. It follows the
+[Dialog Accessibility](https://reakit.io/docs/dialog/#accessibility) features.
+
+<!-- INJECT_TOC -->
+
+## Usage
+
+<!-- IMPORT_EXAMPLE src/drawer/stories/__js/Drawer.component.jsx -->
 
 <!-- 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 -->
-```
+<!-- INJECT_PROPS src/drawer -->
diff --git a/docs-templates/link.md b/docs-templates/link.md
@@ -1,23 +1,23 @@
-## Link
+# 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).
+[WAI-ARIA Link Pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#link) for
+[keyboard interactions](https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-10)
+and
+[accessibilty properties](https://www.w3.org/TR/wai-aria-practices-1.2/#wai-aria-roles-states-and-properties-11)
 
-## Props
+<!-- INJECT_TOC -->
 
-<!-- INJECT_PROPS src/link -->
-
-## Accessibilty
+## Usage
 
-- `Link` has role `link`.
+<!-- IMPORT_EXAMPLE src/link/stories/__js/Link.component.jsx -->
 
-## Composition
+<!-- CODESANDBOX
+link_title: Link - Open on Sandbox
+js: src/link/stories/__js/Link.component.jsx
+-->
 
 <!-- INJECT_COMPOSITION src/link -->
 
-## Example
-
-```js
-<!-- IMPORT_EXAMPLE src/link/stories/__js/Link.component.jsx -->
-```
+<!-- INJECT_PROPS src/link -->
diff --git a/docs-templates/meter.md b/docs-templates/meter.md
@@ -1,23 +1,31 @@
-## Meter
+# Meter
 
-Accessible `Meter` component.
+`Meter` component can be used to provide a graphical display of a numeric value
+that varies within a defined range. It follows the
+[WAI-ARIA Meter Pattern](https://w3c.github.io/aria-practices/#meter) for it's
+[accessibility properties](https://w3c.github.io/aria-practices/#wai-aria-roles-states-and-properties-15)
+
+<!-- INJECT_TOC -->
+
+## Usage
+
+<!-- IMPORT_EXAMPLE src/meter/stories/__js/Meter.component.jsx -->
 
 <!-- CODESANDBOX
 link_title: Meter - Open On Sandbox
 js: src/meter/stories/__js/Meter.component.jsx
-deps: [emotion]
+deps: ['@emotion/css']
 -->
 
-## Props
+## Accessibility Requirement
 
-<!-- INJECT_PROPS src/meter -->
-
-## Composition
+- `Meter` should have `aria-label` or `aria-labelledby` attribute.
+- `Meter` should not be used to represent a value like the current world
+  population since it does not have a meaningful maximum limit.
+- `Meter` should not be used to indicate progress, such as loading or percent
+  completion of a task. To communicate progress, use the progressbar role
+  instead.
 
 <!-- INJECT_COMPOSITION src/meter -->
 
-## Example
-
-```js
-<!-- IMPORT_EXAMPLE src/meter/stories/__js/Meter.component.jsx -->
-```
+<!-- INJECT_PROPS src/meter -->
diff --git a/docs-templates/number-input.md b/docs-templates/number-input.md
@@ -1,22 +1,27 @@
-## NumberInput
+# NumberInput
 
-Accessible `NumberInput` component.
+`NumberInput` component is a form element used to select a number while
+following the keyboard interactions & accessibility properties like the
+[Native Number Input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number).
+It follows
+[WAI-ARIA Spin Button Pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#spinbutton)
+for the accessibility features.
+
+<!-- INJECT_TOC -->
+
+## Usage
+
+<!-- IMPORT_EXAMPLE src/number-input/stories/__js/NumberInput.component.jsx -->
 
 <!-- CODESANDBOX
 link_title: NumberInput - Open On Sandbox
 js: src/number-input/stories/__js/NumberInput.component.jsx
 -->
 
-## Props
+## Accessibility Requirement
 
-<!-- INJECT_PROPS src/number-input -->
-
-## Composition
+- `NumberInput` should have `aria-label` or `aria-labelledby` attribute.
 
 <!-- INJECT_COMPOSITION src/number-input -->
 
-## Example
-
-```js
-<!-- IMPORT_EXAMPLE src/number-input/stories/__js/NumberInput.component.jsx -->
-```
+<!-- INJECT_PROPS src/number-input -->