docs(progress): 📝 finish docs

adaptui · Jul 25, 2022 · a5134fb · a5134fb
1 parent 3912ea0
commit a5134fb
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 34 deletions.
diff --git a/docs-templates/progress.md b/docs-templates/progress.md
@@ -15,18 +15,35 @@ link_title: Progress Basic
 js: src/progress/stories/templates/ProgressBasicJsx.ts
 css: src/progress/stories/templates/ProgressBasicCss.ts
 -->
+<!-- CODESANDBOX
+link_title: Progress Basic TS
+tsx: src/progress/stories/templates/ProgressBasicTsx.ts
+css: src/progress/stories/templates/ProgressBasicCss.ts
+-->
+
+## Other Examples
 
 <!-- CODESANDBOX
 link_title: Progress Linear
 js: src/progress/stories/templates/LinearProgressJsx.ts
 deps: ['@emotion/css']
 -->
+<!-- CODESANDBOX
+link_title: Progress Linear TS
+tsx: src/progress/stories/templates/LinearProgressTsx.ts
+deps: ['@emotion/css']
+-->
 
 <!-- CODESANDBOX
 link_title: Progress Circular
 js: src/progress/stories/templates/CircularProgressJsx.ts
 deps: ['@emotion/css']
 -->
+<!-- CODESANDBOX
+link_title: Progress Circular TS
+tsx: src/progress/stories/templates/CircularProgressTsx.ts
+deps: ['@emotion/css']
+-->
 
 ## Accessibility Requirement
 

diff --git a/docs-templates/slider.md b/docs-templates/slider.md
@@ -2,11 +2,13 @@
 
 `Slider` component is a form element used to select a number by sliding through
 the given range with complete freedom of styling. It follows
-[WAI-ARIA Slider Pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#slider)
+[WAI-ARIA Slider Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slidertwothumb/)
 for the
-[keyboard navigation](https://www.w3.org/TR/wai-aria-practices-1.2/#slider_kbd_interaction)
+[keyboard navigation](https://www.w3.org/WAI/ARIA/apg/patterns/slidertwothumb/#:~:text=a%20hotel%20reservation.-,Keyboard%20Interaction,-Each%20thumb%20is)
 &
-[accessibility properties](https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props)
+[accessibility properties](https://www.w3.org/WAI/ARIA/apg/patterns/slidertwothumb/#:~:text=does%20not%20change.-,WAI%2DARIA%20Roles%2C%20States%2C%20and%20Properties,-Each%20element%20serving).
+Support all the features as React Aria's
+[useSlider](https://react-spectrum.adobe.com/react-aria/useSlider.html#features).
 
 <!-- ADD_TOC -->
 
@@ -19,6 +21,13 @@ link_title: Single Slider
 js: src/slider/stories/templates/SliderBasicJsx.ts
 css: src/slider/stories/templates/SliderBasicCss.ts
 -->
+<!-- CODESANDBOX
+link_title: Single Slider TS
+tsx: src/slider/stories/templates/SliderBasicTsx.ts
+css: src/slider/stories/templates/SliderBasicCss.ts
+-->
+
+## Other Examples
 
 <!-- CODESANDBOX
 link_title: Single Origin Slider
@@ -50,10 +59,6 @@ js: src/slider/stories/templates/SliderMultiJsx.ts
 css: src/slider/stories/templates/SliderBasicCss.ts
 -->
 
-## Accessibility Requirement
-
-- `SliderInput` should have `aria-label` or `aria-labelledby` attribute.
-
 <!-- ADD_COMPOSITION src/slider -->
 
 <!-- ADD_PROPS src/slider -->
diff --git a/docs/progress.md b/docs/progress.md
@@ -4,46 +4,71 @@
 of time to load. It follows
 [WAI-ARIA Progressbar Pattern](https://www.w3.org/TR/wai-aria-1.2/#progressbar)
 
-<!-- ADD_TOC -->
+## Table of Contents
+
+- [Usage](#usage)
+- [Other Examples](#other-examples)
+- [Accessibility Requirement](#accessibility-requirement)
+- [Composition](#composition)
+- [Props](#props)
+  - [`ProgressOptions`](#progressoptions)
+  - [`ProgressStateProps`](#progressstateprops)
 
 ## Usage
 
-<!-- ADD_EXAMPLE src/progress/stories/templates/ProgressBasicJsx.ts -->
+```js
+import * as React from "react";
+
+import { Progress, useProgressState } from "@adaptui/react";
+
+export const ProgressBasic = props => {
+  const state = useProgressState({ value: 50, ...props });
+  const { percent, isIndeterminate } = state;
+
+  return (
+    <div className="progress">
+      <Progress
+        state={state}
+        aria-label="progress"
+        style={{ width: `${percent}%` }}
+        className={`progressbar ${isIndeterminate ? "indeterminate" : ""}`}
+      />
+    </div>
+  );
+};
 
-<!-- CODESANDBOX
-link_title: Progress Basic
-js: src/progress/stories/templates/ProgressBasicJsx.ts
-css: src/progress/stories/templates/ProgressBasicCss.ts
--->
+export default ProgressBasic;
+```
 
-<!-- CODESANDBOX
-link_title: Progress Linear
-js: src/progress/stories/templates/LinearProgressJsx.ts
-deps: ['@emotion/css']
--->
+[![Edit CodeSandbox](https://img.shields.io/badge/Progress%20Basic-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/8gl7td)
+[![Edit CodeSandbox](https://img.shields.io/badge/Progress%20Basic%20TS-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/7lf4is)
 
-<!-- CODESANDBOX
-link_title: Progress Circular
-js: src/progress/stories/templates/CircularProgressJsx.ts
-deps: ['@emotion/css']
--->
+## Other Examples
+
+[![Edit CodeSandbox](https://img.shields.io/badge/Progress%20Linear-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/bf2db0)
+[![Edit CodeSandbox](https://img.shields.io/badge/Progress%20Linear%20TS-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/7bjws5)
+
+[![Edit CodeSandbox](https://img.shields.io/badge/Progress%20Circular-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/3i6nvw)
+[![Edit CodeSandbox](https://img.shields.io/badge/Progress%20Circular%20TS-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/itn0j4)
 
 ## Accessibility Requirement
 
 - If the `Progress` is describing the loading progress of a particular region of
   a page, you should use `aria-describedby` to point to the status, and set the
   `aria-busy `attribute to `true` on the region until it is finished loading.
 
-<!-- ADD_COMPOSITION src/progress -->
+## Composition
+
+- Progress uses `Role`
+- useProgressState uses its own state
 
 ## Props
 
 ### `ProgressOptions`
 
-| Name        | Type                                                                                                                                                                             | Description                                     |
-| :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------- |
-| **`as`**    | <code>T \| undefined</code>                                                                                                                                                      |                                                 |
-| **`state`** | <code title="{ value: number \| null; min: number; max: number; isIndeterminate: boolean; percent: number \| null; }">{ value: number \| null; min: number; max: numbe...</code> | Object returned by the `useProgressState` hook. |
+| Name        | Type                       | Description                                     |
+| :---------- | :------------------------- | :---------------------------------------------- |
+| **`state`** | <code>ProgressState</code> | Object returned by the `useProgressState` hook. |
 
 ### `ProgressStateProps`
 

diff --git a/docs/slider.md b/docs/slider.md
@@ -2,11 +2,12 @@
 
 `Slider` component is a form element used to select a number by sliding through
 the given range with complete freedom of styling. It follows
-[WAI-ARIA Slider Pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#slider)
+[WAI-ARIA Slider Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slidertwothumb/)
 for the
-[keyboard navigation](https://www.w3.org/TR/wai-aria-practices-1.2/#slider_kbd_interaction)
+[keyboard navigation](https://www.w3.org/WAI/ARIA/apg/patterns/slidertwothumb/#:~:text=a%20hotel%20reservation.-,Keyboard%20Interaction,-Each%20thumb%20is)
 &
-[accessibility properties](https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props)
+[accessibility properties](https://www.w3.org/WAI/ARIA/apg/patterns/slidertwothumb/#:~:text=does%20not%20change.-,WAI%2DARIA%20Roles%2C%20States%2C%20and%20Properties,-Each%20element%20serving). Support all the features as React Aria's
+[useSlider](https://react-spectrum.adobe.com/react-aria/useSlider.html#features).
 
 ## Table of Contents
 

diff --git a/src/progress/stories/ProgressBasic.component.tsx b/src/progress/stories/ProgressBasic.component.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { Progress, ProgressStateProps, useProgressState } from "../../index";
 
 export const ProgressBasic: React.FC<ProgressStateProps> = props => {
-  const state = useProgressState(props);
+  const state = useProgressState({ value: 50, ...props });
   const { percent, isIndeterminate } = state;
 
   return (

diff --git a/src/progress/stories/ProgressBasic.stories.tsx b/src/progress/stories/ProgressBasic.stories.tsx
@@ -21,6 +21,6 @@ export default {
   },
 } as Meta;
 
-export const Default: Story = { args: { value: 50 } };
+export const Default: Story = { args: {} };
 
 export const IsIndeterminate = { args: { value: null } };