docs: 📝 finish docs

adaptui · Jul 25, 2022 · 0b4333e · 0b4333e
1 parent 5117025
commit 0b4333e
Show file tree

Hide file tree

Showing 6 changed files with 114 additions and 64 deletions.
diff --git a/docs-templates/link.md b/docs-templates/link.md
@@ -1,11 +1,11 @@
 # 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) for
-[keyboard interactions](https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-10)
+`Link` component that provides the required aria role when used under different
+compositions. It follows the
+[WAI-ARIA Link Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/link/) for
+[keyboard interactions](https://www.w3.org/WAI/ARIA/apg/patterns/link/#:~:text=and%20img%20elements.-,Keyboard%20Interaction,-Enter)
 and
-[accessibilty properties](https://www.w3.org/TR/wai-aria-practices-1.2/#wai-aria-roles-states-and-properties-11)
+[accessibilty properties](https://www.w3.org/WAI/ARIA/apg/patterns/link/#:~:text=for%20the%20link.-,WAI%2DARIA%20Roles%2C%20States%2C%20and%20Properties,-The%20element%20containing)
 
 <!-- ADD_TOC -->
 
@@ -17,6 +17,21 @@ and
 link_title: Link
 js: src/link/stories/templates/LinkBasicJsx.ts
 -->
+<!-- CODESANDBOX
+link_title: Link TS
+tsx: src/link/stories/templates/LinkBasicTsx.ts
+-->
+
+## Other Examples
+
+<!-- CODESANDBOX
+link_title: Link Span
+js: src/link/stories/templates/LinkSpanJsx.ts
+-->
+<!-- CODESANDBOX
+link_title: Link Span TS
+tsx: src/link/stories/templates/LinkSpanTsx.ts
+-->
 
 <!-- ADD_COMPOSITION src/link -->
 

diff --git a/docs/link.md b/docs/link.md
@@ -1,23 +1,69 @@
 # 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) for
-[keyboard interactions](https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-10)
+`Link` component that provides the required aria role when used under different
+compositions. It follows the
+[WAI-ARIA Link Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/link/) for
+[keyboard interactions](https://www.w3.org/WAI/ARIA/apg/patterns/link/#:~:text=and%20img%20elements.-,Keyboard%20Interaction,-Enter)
 and
-[accessibilty properties](https://www.w3.org/TR/wai-aria-practices-1.2/#wai-aria-roles-states-and-properties-11)
+[accessibilty properties](https://www.w3.org/WAI/ARIA/apg/patterns/link/#:~:text=for%20the%20link.-,WAI%2DARIA%20Roles%2C%20States%2C%20and%20Properties,-The%20element%20containing)
 
-<!-- ADD_TOC -->
+## Table of Contents
+
+- [Usage](#usage)
+- [Other Examples](#other-examples)
+- [Composition](#composition)
+- [Props](#props)
+  - [`LinkOptions`](#linkoptions)
 
 ## Usage
 
-<!-- ADD_EXAMPLE src/link/stories/templates/LinkBasicJsx.ts -->
+```js
+import * as React from "react";
+
+import { Link } from "@adaptui/react";
+
+export const LinkBasic = props => {
+  return (
+    <Link href="https://timeless.co/" isExternal {...props}>
+      Timeless
+    </Link>
+  );
+};
+
+export default LinkBasic;
+```
+
+[![Edit CodeSandbox](https://img.shields.io/badge/Link-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/qgsgpy)
+[![Edit CodeSandbox](https://img.shields.io/badge/Link%20TS-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/jprz2b)
+
+## Other Examples
 
-<!-- CODESANDBOX
-link_title: Link
-js: src/link/stories/templates/LinkBasicJsx.ts
--->
+[![Edit CodeSandbox](https://img.shields.io/badge/Link%20Span-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/gs4enr)
+[![Edit CodeSandbox](https://img.shields.io/badge/Link%20Span%20TS-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/vpb6l5)
 
-<!-- ADD_COMPOSITION src/link -->
+## Composition
+
+- Link uses `useCommand`
 
 ## Props
+
+### `LinkOptions`
+
+| Name             | Type                              | Description                 |
+| :--------------- | :-------------------------------- | :-------------------------- |
+| **`isExternal`** | <code>boolean \| undefined</code> | Opens the link in a new tab |
+
+<details><summary>CommandOptions props</summary>
+> These props are returned by the other props You can also provide these props.
+
+| Name                         | Type                                                                                                                                                           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| :--------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`disabled`**               | <code>boolean \| undefined</code>                                                                                                                              | Determines whether the focusable element is disabled. If the focusableelement doesn't support the native `disabled` attribute, the`aria-disabled` attribute will be used instead.                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| **`autoFocus`**              | <code>boolean \| undefined</code>                                                                                                                              | Automatically focus the element when it is mounted. It works similarly tothe native `autoFocus` prop, but solves an issue where the element isgiven focus before React effects can run.                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| **`focusable`**              | <code>boolean \| undefined</code>                                                                                                                              | Whether the element should be focusable.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **`accessibleWhenDisabled`** | <code>boolean \| undefined</code>                                                                                                                              | Determines whether the element should be focusable even when it isdisabled.This is important when discoverability is a concern. For example:> A toolbar in an editor contains a set of special smart paste functionsthat are disabled when the clipboard is empty or when the function is notapplicable to the current content of the clipboard. It could be helpful tokeep the disabled buttons focusable if the ability to discover theirfunctionality is primarily via their presence on the toolbar.Learn more on [Focusability of disabledcontrols](https://www.w3.org/TR/wai-aria-practices-1.2/#kbd_disabled_controls). |
+| **`onFocusVisible`**         | <code title="((event: SyntheticEvent&#60;Element, Event&#62;) =&#62; void) \| undefined">((event: SyntheticEvent&#60;Element, Event&#62;) =&#62; voi...</code> | Custom event handler that is called when the element is focused via thekeyboard or when a key is pressed while the element is focused.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| **`clickOnEnter`**           | <code>boolean \| undefined</code>                                                                                                                              | If true, pressing the enter key will trigger a click on the button.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| **`clickOnSpace`**           | <code>boolean \| undefined</code>                                                                                                                              | If true, pressing the space key will trigger a click on the button.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+
+</details>
diff --git a/src/link/stories/LinkBasic.component.tsx b/src/link/stories/LinkBasic.component.tsx
@@ -5,7 +5,11 @@ import { Link, LinkProps } from "../../index";
 export type LinkBasicProps = LinkProps & {};
 
 export const LinkBasic: React.FC<LinkBasicProps> = props => {
-  return <Link {...props} />;
+  return (
+    <Link href="https://timeless.co/" isExternal {...props}>
+      Timeless
+    </Link>
+  );
 };
 
 export default LinkBasic;
diff --git a/src/link/stories/LinkBasic.stories.tsx b/src/link/stories/LinkBasic.stories.tsx
@@ -18,23 +18,8 @@ export default {
   },
 } as Meta;
 
-export const Default: Story = {
-  args: { href: "https://timeless.co/", children: "Timeless" },
-};
+export const Default: Story = { args: {} };
 
-export const ExternalLink: Story = {
-  args: {
-    children: "Timeless",
-    href: "https://timeless.co/",
-    isExternal: true,
-  },
-};
-
-export const DisabledExternalLink: Story = {
-  args: {
-    children: "Timeless",
-    href: "https://timeless.co/",
-    isExternal: true,
-    disabled: true,
-  },
+export const DisabledLink: Story = {
+  args: { disabled: true },
 };
diff --git a/src/link/stories/LinkSpan.component.tsx b/src/link/stories/LinkSpan.component.tsx
@@ -5,7 +5,32 @@ import { Link, LinkProps } from "../../index";
 export type LinkSpanProps = LinkProps & {};
 
 export const LinkSpan: React.FC<LinkSpanProps> = props => {
-  return <Link as="span" {...props} />;
+  return (
+    <Link
+      as="span"
+      onClick={(event: React.MouseEvent) =>
+        goToLink(event, "https://timeless.co/")
+      }
+      onKeyDown={(event: React.KeyboardEvent) =>
+        goToLink(event, "https://timeless.co/")
+      }
+      {...props}
+    >
+      Timeless
+    </Link>
+  );
 };
 
 export default LinkSpan;
+
+function goToLink(event: React.MouseEvent | React.KeyboardEvent, url: string) {
+  var type = event.type;
+
+  // @ts-ignore
+  if (type === "click" || (type === "keydown" && event.key === "Enter")) {
+    window.location.href = url;
+
+    event.preventDefault();
+    event.stopPropagation();
+  }
+}
diff --git a/src/link/stories/LinkSpan.stories.tsx b/src/link/stories/LinkSpan.stories.tsx
@@ -18,31 +18,6 @@ export default {
   },
 } as Meta;
 
-export const Default: Story = {
-  args: {
-    children: "Timeless",
-    onClick: event => goToLink(event, "https://timeless.co/"),
-    onKeyDown: event => goToLink(event, "https://timeless.co/"),
-  },
-};
-
-export const DisabledLink: Story = {
-  args: {
-    children: "Timeless",
-    onClick: event => goToLink(event, "https://timeless.co/"),
-    onKeyDown: event => goToLink(event, "https://timeless.co/"),
-    disabled: true,
-  },
-};
-
-function goToLink(event: React.MouseEvent | React.KeyboardEvent, url: string) {
-  var type = event.type;
-
-  // @ts-ignore
-  if (type === "click" || (type === "keydown" && event.key === "Enter")) {
-    window.location.href = url;
+export const Default: Story = { args: {} };
 
-    event.preventDefault();
-    event.stopPropagation();
-  }
-}
+export const DisabledLink: Story = { args: { disabled: true } };