docs(accordion): 📝 finish docs

adaptui · Jul 21, 2022 · e99e583 · e99e583
1 parent df6e312
commit e99e583
Show file tree

Hide file tree

Showing 20 changed files with 1,068 additions and 769 deletions.
diff --git a/docs-templates/accordion.md b/docs-templates/accordion.md
@@ -1,12 +1,12 @@
 # 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)
+trigger button. It follows The
+[WAI-ARIA Accordion Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)
 for
-[keyboard interaction](https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction)
+[keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/#:~:text=at%20a%20time.-,Keyboard%20Interaction,-Enter)
 &
-[accessibiltiy properties](https://www.w3.org/TR/wai-aria-practices-1.2/#wai-aria-roles-states-and-properties).
+[accessibiltiy properties](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/#:~:text=last%20accordion%20header.-,WAI%2DARIA%20Roles%2C%20States%2C%20and%20Properties%3A,-The%20title%20of).
 
 <!-- INJECT_TOC -->
 
@@ -18,17 +18,32 @@ for
 link_title: Accordion
 js: src/accordion/stories/templates/AccordionBasicJsx.ts
 -->
+<!-- CODESANDBOX
+link_title: Accordion TS
+tsx: src/accordion/stories/templates/AccordionBasicTsx.ts
+-->
+
+## Other Examples
+
+<!-- CODESANDBOX
+link_title: Accordion Multiple
+js: src/accordion/stories/templates/AccordionMultipleJsx.ts
+-->
+<!-- CODESANDBOX
+link_title: Accordion Multiple TS
+tsx: src/accordion/stories/templates/AccordionMultipleTsx.ts
+-->
 
 <!-- CODESANDBOX
 link_title: Accordion Styled
 js: src/accordion/stories/templates/AccordionStyledJsx.ts
 css: src/accordion/stories/templates/AccordionStyledCss.ts
 -->
-
-## Accessibility Requirements
-
-- Each `AccordionTrigger` should be wrapped in an element with role `heading`
-  with proper aria-level.
+<!-- CODESANDBOX
+link_title: Accordion Styled TS
+tsx: src/accordion/stories/templates/AccordionStyledTsx.ts
+css: src/accordion/stories/templates/AccordionStyledCss.ts
+-->
 
 <!-- INJECT_COMPOSITION src/accordion -->
 

diff --git a/docs/accordion.md b/docs/accordion.md
diff --git a/docs/breadcrumb.md b/docs/breadcrumb.md
@@ -6,64 +6,24 @@ required aria attributes for it's links. It follows the
 for its
 [accessibility properties](https://www.w3.org/TR/wai-aria-practices-1.2/#wai-aria-roles-states-and-properties-2).
 
-## Table of Contents
-
-- [Usage](#usage)
-- [Accessibility Requirement](#accessibility-requirement)
+<!-- INJECT_TOC -->
 
 ## Usage
 
-```js
-import * as React from "react";
-
-import { BreadcrumbLink, Breadcrumbs } from "@adaptui/react";
-
-export const BreadcrumbsBasic = props => {
-  return (
-    <Breadcrumbs aria-label="Breadcrumb" className="breadcrumb">
-      <ol>
-        <li>
-          <BreadcrumbLink href="https://www.w3.org/TR/wai-aria-practices-1.1/">
-            WAI-ARIA Authoring Practices 1.1
-          </BreadcrumbLink>
-        </li>
-        <li>
-          <BreadcrumbLink href="https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex">
-            Design Patterns
-          </BreadcrumbLink>
-        </li>
-        <li>
-          <BreadcrumbLink
-            isCurrentPage
-            href="https://www.w3.org/TR/wai-aria-practices-1.1/#breadcrumb"
-          >
-            Breadcrumb Pattern
-          </BreadcrumbLink>
-        </li>
-        <li>
-          <BreadcrumbLink href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/breadcrumb/index.html">
-            Breadcrumb Example
-          </BreadcrumbLink>
-        </li>
-      </ol>
-    </Breadcrumbs>
-  );
-};
+<!-- IMPORT_EXAMPLE src/breadcrumbs/stories/templates/BreadcrumbsBasicJsx.ts -->
 
-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/4ywvzv)
+<!-- CODESANDBOX
+link_title: Breadcrumbs
+js: src/breadcrumbs/stories/templates/BreadcrumbsBasicJsx.ts
+css: src/breadcrumbs/stories/templates/BreadcrumbsBasicCss.ts
+-->
 
 ## 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.
 
-## Composition
-
-- BreadcrumbLink uses `useCommand`
-- Breadcrumbs uses
+<!-- INJECT_COMPOSITION src/breadcrumbs -->
 
-<!-- INJECT_PROPS src/breadcrumbs -->
+## Props
diff --git a/docs/calendar.md b/docs/calendar.md
diff --git a/docs/datefield.md b/docs/datefield.md
@@ -5,46 +5,16 @@
 [Native Input Date](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date)
 for the keyboard navigation & accessibility features.
 
-## Table of Contents
-
-- [Usage](#usage)
-  - [DateField](#datefield-1)
+<!-- INJECT_TOC -->
 
 ## Usage
 
 ### DateField
 
-```js
-import React from "react";
-
-import {
-  DateField,
-  DateSegment,
-  useDateFieldBaseState,
-  useDateFieldState,
-} from "@adaptui/react";
-
-export const DateFieldBasic = props => {
-  const state = useDateFieldBaseState({ ...props });
-  const datefield = useDateFieldState({ ...props, state });
-
-  return (
-    <DateField state={datefield} className="datepicker__field">
-      {state.segments.map((segment, i) => (
-        <DateSegment
-          key={i}
-          segment={segment}
-          state={state}
-          className="datepicker__field--item"
-        >
-          {segment.text}
-        </DateSegment>
-      ))}
-    </DateField>
-  );
-};
-
-export default DateFieldBasic;
-```
+<!-- IMPORT_EXAMPLE src/datefield/stories/templates/DateFieldBasicJsx.ts -->
 
-[![Edit CodeSandbox](https://img.shields.io/badge/DateField-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/mvnst9)
+<!-- CODESANDBOX
+link_title: DateField
+js: src/datefield/stories/templates/DateFieldBasicJsx.ts
+css: src/datefield/stories/templates/DateFieldBasicCss.ts
+-->