docs(docs): 📝 update documentation for multiple components (#393)

adaptui · Jul 7, 2022 · df6e312 · df6e312
1 parent caba05b
commit df6e312
Show file tree

Hide file tree

Showing 18 changed files with 450 additions and 1,377 deletions.
diff --git a/docs-templates/checkbox.md b/docs-templates/checkbox.md
diff --git a/docs-templates/datefield.md b/docs-templates/datefield.md
@@ -0,0 +1,20 @@
+# DateField
+
+`DateField` component provides a way to select a date 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.
+
+<!-- INJECT_TOC -->
+
+## Usage
+
+### DateField
+
+<!-- IMPORT_EXAMPLE src/datefield/stories/templates/DateFieldBasicJsx.ts -->
+
+<!-- CODESANDBOX
+link_title: DateField
+js: src/datefield/stories/templates/DateFieldBasicJsx.ts
+css: src/datefield/stories/templates/DateFieldBasicCss.ts
+-->
diff --git a/docs-templates/disclosure.md b/docs-templates/disclosure.md
@@ -10,23 +10,24 @@ for it's
 
 ## Usage
 
-<!-- IMPORT_EXAMPLE src/disclosure/stories/templates/DisclosureBasicJsx.ts -->
+### Horizontal Disclosure
+
+<!-- IMPORT_EXAMPLE src/disclosure/stories/templates/DisclosureHorizontalCollapseBasicJsx.ts -->
 
 <!-- CODESANDBOX
-link_title: Disclosure Basic
-js: src/disclosure/stories/templates/DisclosureBasicJsx.ts
+link_title: Disclosure Horizontal
+js: src/disclosure/stories/templates/DisclosureHorizontalCollapseBasicJsx.ts
 -->
 
-## Accessibility Requirement
+### Vertical Disclosure
+
+<!-- IMPORT_EXAMPLE src/disclosure/stories/templates/DisclosureVerticalCollapseBasicJsx.ts -->
 
-- `DisclosureButton` extends the accessibility features of
-  [Button](https://www.w3.org/TR/wai-aria-practices/#button).
-- `DisclosureButton` has a value specified for `aria-controls `that refers to
-  `DisclosureContent`.
-- When `DisclosureContent` is visible, `DisclosureButton` is `aria-expanded` set
-  to `true`.
-- When `DisclosureContent` is hidden, `DisclosureButton` is set to `false`.
+<!-- CODESANDBOX
+link_title: Disclosure Vertical
+js: src/disclosure/stories/templates/DisclosureVerticalCollapseBasicJsx.ts
+-->
 
-<!-- INJECT_COMPOSITION src/disclosure -->
+<!-- INJECT_COMPOSITION src/datepicker -->
 
-<!-- INJECT_PROPS src/disclosure -->
+<!-- INJECT_PROPS src/datepicker -->
diff --git a/docs-templates/drawer.md b/docs-templates/drawer.md
diff --git a/docs-templates/number-input.md → docs-templates/numberfield.md b/docs-templates/number-input.md → docs-templates/numberfield.md
@@ -1,6 +1,6 @@
-# NumberInput
+# NumberField
 
-`NumberInput` component is a form element used to select a number while
+`NumberField` 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
@@ -11,17 +11,17 @@ for the accessibility features.
 
 ## Usage
 
-<!-- IMPORT_EXAMPLE src/number-input/stories/templates/NumberInputBasicJsx.ts -->
+<!-- IMPORT_EXAMPLE src/numberfield/stories/templates/NumberFieldBasicJsx.ts -->
 
 <!-- CODESANDBOX
-link_title: NumberInput
-js: src/number-input/stories/templates/NumberInputBasicJsx.ts
+link_title: NumberField
+js: src/numberfield/stories/templates/NumberFieldBasicJsx.ts
 -->
 
 ## Accessibility Requirement
 
-- `NumberInput` should have `aria-label` or `aria-labelledby` attribute.
+- `NumberField` should have `aria-label` or `aria-labelledby` attribute.
 
-<!-- INJECT_COMPOSITION src/number-input -->
+<!-- INJECT_COMPOSITION src/numberfield -->
 
-<!-- INJECT_PROPS src/number-input -->
+<!-- INJECT_PROPS src/numberfield -->
diff --git a/docs/breadcrumb.md b/docs/breadcrumb.md
@@ -10,24 +10,17 @@ for its
 
 - [Usage](#usage)
 - [Accessibility Requirement](#accessibility-requirement)
-- [Composition](#composition)
-- [Props](#props)
-  - [`BreadcrumbLink`](#breadcrumblink)
-  - [`Breadcrumbs`](#breadcrumbs)
 
 ## Usage
 
 ```js
 import * as React from "react";
 
-import {
-  BreadcrumbLink,
-  Breadcrumbs as AdaptUIBreadcrumbs,
-} from "@adaptui/react";
+import { BreadcrumbLink, Breadcrumbs } from "@adaptui/react";
 
-export const Breadcrumbs = () => {
+export const BreadcrumbsBasic = props => {
   return (
-    <AdaptUIBreadcrumbs aria-label="Breadcrumb" className="breadcrumb">
+    <Breadcrumbs aria-label="Breadcrumb" className="breadcrumb">
       <ol>
         <li>
           <BreadcrumbLink href="https://www.w3.org/TR/wai-aria-practices-1.1/">
@@ -41,7 +34,7 @@ export const Breadcrumbs = () => {
         </li>
         <li>
           <BreadcrumbLink
-            isCurrent
+            isCurrentPage
             href="https://www.w3.org/TR/wai-aria-practices-1.1/#breadcrumb"
           >
             Breadcrumb Pattern
@@ -53,14 +46,14 @@ export const Breadcrumbs = () => {
           </BreadcrumbLink>
         </li>
       </ol>
-    </AdaptUIBreadcrumbs>
+    </Breadcrumbs>
   );
 };
 
-export default Breadcrumbs;
+export default BreadcrumbsBasic;
 ```
 
-[![Edit CodeSandbox](https://img.shields.io/badge/Breadcrumbs-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/z16je)
+[![Edit CodeSandbox](https://img.shields.io/badge/Breadcrumbs-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/4ywvzv)
 
 ## Accessibility Requirement
 
@@ -70,20 +63,7 @@ export default Breadcrumbs;
 
 ## Composition
 
-- BreadcrumbLink uses [useLink](./link.md)
-- Breadcrumbs uses [useRole](https://reakit.io/docs/role)
+- BreadcrumbLink uses `useCommand`
+- Breadcrumbs uses
 
-## Props
-
-### `BreadcrumbLink`
-
-| Name             | Type                              | Description                                                                                                                                                  |
-| :--------------- | :-------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`isCurrent`**  | <code>boolean \| undefined</code> | If true, sets `aria-current: "page"`                                                                                                                         |
-| **`disabled`**   | <code>boolean \| undefined</code> | Same as the HTML attribute.                                                                                                                                  |
-| **`focusable`**  | <code>boolean \| undefined</code> | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. |
-| **`isExternal`** | <code>boolean \| undefined</code> | Opens the link in a new tab                                                                                                                                  |
-
-### `Breadcrumbs`
-
-No props to show
+<!-- INJECT_PROPS src/breadcrumbs -->