From 3a406d2768538785d747ff79b9a934490c170da7 Mon Sep 17 00:00:00 2001 From: Dionysos Dajka Date: Fri, 18 Jun 2021 13:23:24 +0200 Subject: [PATCH] docs: Fix internal links in docs, #135 --- src/Hidden/README.stories.mdx | 3 ++- src/Icon/README.stories.mdx | 3 ++- src/Menu/README.stories.mdx | 3 ++- src/MenuList/README.stories.mdx | 3 ++- src/NavMenu/README.stories.mdx | 5 +++-- src/Pill/README.stories.mdx | 3 ++- src/Popover/README.stories.mdx | 5 +++-- src/Tooltip/README.stories.mdx | 3 ++- src/TooltipButton/README.stories.mdx | 3 ++- src/docs/3-icons.stories.mdx | 5 +++-- src/useFocusOnMount/README.stories.mdx | 3 ++- src/usePopover/README.stories.mdx | 5 +++-- 12 files changed, 28 insertions(+), 16 deletions(-) diff --git a/src/Hidden/README.stories.mdx b/src/Hidden/README.stories.mdx index 31bb4473..42cd40af 100644 --- a/src/Hidden/README.stories.mdx +++ b/src/Hidden/README.stories.mdx @@ -1,4 +1,5 @@ import {Meta, Story, Canvas, ArgsTable} from '@storybook/addon-docs/blocks'; +import LinkTo from '@storybook/addon-links/react'; import Hidden from './'; import Icon from '../Icon'; @@ -53,7 +54,7 @@ The component can hide content completely (`display: none`, the default setting) -Built on top of the [Box component](https://5app.github.io/base5-ui/src-box-readme), so all valid Box props can be used on the Hidden component. +Built on top of the Box component, so all valid Box props can be used on the Hidden component. ## Props diff --git a/src/Icon/README.stories.mdx b/src/Icon/README.stories.mdx index fe36d4ab..23ae9d47 100644 --- a/src/Icon/README.stories.mdx +++ b/src/Icon/README.stories.mdx @@ -1,4 +1,5 @@ import {Meta, Story, Canvas, ArgsTable} from '@storybook/addon-docs/blocks'; +import LinkTo from '@storybook/addon-links/react'; import Icon from './'; import Text from '../Text'; @@ -17,7 +18,7 @@ import XIcon from '../icons/X'; import Icon from 'base5-ui/Icon'; ``` -An image says more than a thousand words. ;) [View all available icons here](/src-icons-readme) +An image says more than a thousand words. ;) View all available icons here ## Using the Icon component diff --git a/src/Menu/README.stories.mdx b/src/Menu/README.stories.mdx index 4e362e51..70db9d66 100644 --- a/src/Menu/README.stories.mdx +++ b/src/Menu/README.stories.mdx @@ -1,4 +1,5 @@ import {Meta, Story, Canvas, ArgsTable} from '@storybook/addon-docs/blocks'; +import LinkTo from '@storybook/addon-links/react'; import {Menu, MenuButton, MenuList, MenuItem} from './'; @@ -13,7 +14,7 @@ import {Menu, MenuButton, MenuList, MenuItem} from 'base5-ui/Menu'; An implementation of the menu button pattern as described in the [WAI-ARIA guidelines](https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton). Only use this component when your menu items can best be described as immediate actions for your users to take. -If your menu items contain links or other textual content, you probably want to use the [NavMenu](src-nav-menu-readme) component instead, which provides a similar design & functionality, but doesn't override the roles of links or buttons in your menu items. (See [this](https://adrianroselli.com/2017/10/dont-use-aria-menu-roles-for-site-nav.html) and [this article](https://www.marcozehe.de/wai-aria-menus-use-with-care/) for more information.) +If your menu items contain links or other textual content, you probably want to use the NavMenu component instead, which provides a similar design & functionality, but doesn't override the roles of links or buttons in your menu items. (See [this](https://adrianroselli.com/2017/10/dont-use-aria-menu-roles-for-site-nav.html) and [this article](https://www.marcozehe.de/wai-aria-menus-use-with-care/) for more information.) This component doesn't support the `menuitemradio` or `menuitemcheckbox` roles at this point. diff --git a/src/MenuList/README.stories.mdx b/src/MenuList/README.stories.mdx index a6df6da4..c66d78dc 100644 --- a/src/MenuList/README.stories.mdx +++ b/src/MenuList/README.stories.mdx @@ -1,4 +1,5 @@ import {Meta, Story, Canvas, ArgsTable} from '@storybook/addon-docs/blocks'; +import LinkTo from '@storybook/addon-links/react'; import PopoverCard from '../PopoverCard'; import * as MenuList from './'; @@ -20,7 +21,7 @@ MenuList is a set of components used for building dropdown menus: - MenuList.ItemIcon - MenuList.Link -They don't come with any built-in behaviour. Check out the [Menu](src-menu-readme) and [NavMenu](src-nav-menu-readme) components to see the MenuList component in use. +They don't come with any built-in behaviour. Check out the Menu and NavMenu components to see the MenuList component in use. diff --git a/src/NavMenu/README.stories.mdx b/src/NavMenu/README.stories.mdx index 1d0975a8..6b9aab2d 100644 --- a/src/NavMenu/README.stories.mdx +++ b/src/NavMenu/README.stories.mdx @@ -1,4 +1,5 @@ import {Meta, Story, Canvas, ArgsTable} from '@storybook/addon-docs/blocks'; +import LinkTo from '@storybook/addon-links/react'; import Text from '../Text'; import {NavMenu, NavMenuButton, NavMenuList, NavMenuItem} from './'; @@ -16,13 +17,13 @@ import { } from 'base5-ui/NavMenu'; ``` -An accessible dropdown menu to be used when the regular menu button pattern (see [Menu](src-menu-readme)) is not the right choice. +An accessible dropdown menu to be used when the regular menu button pattern (see Menu) is not the right choice. This is the case when: - Your menu contains regular navigation links, or both buttons and links - Your menu contains other content besides menu items (e.g. hint text) -Unlike the normal [Menu](src-menu-readme) component, the items in this menu can be navigated using the Tab key in addition to the arrow keys. Focus will not be moved to the menu automatically, and tabbing away from the menu will not close it (but _clicking_ outside of it will). +Unlike the normal Menu component, the items in this menu can be navigated using the Tab key in addition to the arrow keys. Focus will not be moved to the menu automatically, and tabbing away from the menu will not close it (but _clicking_ outside of it will). This component is inspired and based on patterns described in the following resources: diff --git a/src/Pill/README.stories.mdx b/src/Pill/README.stories.mdx index 2c026614..274b4e8d 100644 --- a/src/Pill/README.stories.mdx +++ b/src/Pill/README.stories.mdx @@ -1,4 +1,5 @@ import {Meta, Story, Canvas, ArgsTable} from '@storybook/addon-docs/blocks'; +import LinkTo from '@storybook/addon-links/react'; import Card from '../Card'; import Stack from '../Stack'; @@ -17,7 +18,7 @@ The Pill component is great for representing simple items in the UI: assets, tag Pills can have an icon and an optional "Delete" button which should remove the associated item from the list it's in. -Pills can be made clickable, but should never be used as action buttons (think "Confirm" or "Cancel" buttons). Use the [Button](/src-button-readme) component for this use case. +Pills can be made clickable, but should never be used as action buttons (think "Confirm" or "Cancel" buttons). Use the Button component for this use case. ## Non-interactive examples diff --git a/src/Popover/README.stories.mdx b/src/Popover/README.stories.mdx index 88004c58..ccd71491 100644 --- a/src/Popover/README.stories.mdx +++ b/src/Popover/README.stories.mdx @@ -1,4 +1,5 @@ import {Meta, Story, Canvas, ArgsTable} from '@storybook/addon-docs/blocks'; +import LinkTo from '@storybook/addon-links/react'; import Box from '../Box'; import Text from '../Text'; @@ -35,9 +36,9 @@ import Popover from 'base5-ui/Popover'; A Popover is a an element that's positioned so that it appears right next to another element (the 'reference element'). This component is a low-level building block used for building dropdown menus, tooltips, and similar UI patterns. -The Popover component included in base5-ui is a simple wrapper around the [usePopover](/src-use-popover-readme) hook and the [PopoverCard](/src-use-popover-card-readme) component. You can easily customise the look and feel of your Popover by replacing `PopoverCard` with your own implementation and keeping the hook to control the placement. +The Popover component included in base5-ui is a simple wrapper around the usePopover hook and the PopoverCard component. You can easily customise the look and feel of your Popover by replacing `PopoverCard` with your own implementation and keeping the hook to control the placement. -Also see the hook [usePopoverState](/src-use-popover-state-readme) for an easy way to control the open/closed state of a popover, and [Tooltip](/src-tooltip-readme) for a ready-made component combining the hook and this component. +Also see the hook usePopoverState for an easy way to control the open/closed state of a popover, and Tooltip for a ready-made component combining the hook and this component. TooltipButton component. Button component with a built-in tooltip. The tooltip content will be used as the button's accessible label when the button doesn't have a label of its own (e.g. icon-only buttons). If the button already has a label, the tooltip content will be made available to assistive technologies as a description (using the `aria-describedby` attribute). ## Example diff --git a/src/docs/3-icons.stories.mdx b/src/docs/3-icons.stories.mdx index 54a1be64..1d8fc7bc 100644 --- a/src/docs/3-icons.stories.mdx +++ b/src/docs/3-icons.stories.mdx @@ -1,4 +1,5 @@ import {Meta, Story, Canvas, ArgsTable} from '@storybook/addon-docs/blocks'; +import LinkTo from '@storybook/addon-links/react'; @@ -97,9 +98,9 @@ import Icon from '../Icon'; 1. Add new SVG icons to `/src-icons/svg` 2. Add any new icons as an export inside of `src/icons/index.js` -3. To make new icons available from the `` component, define a `string` name for them in the icon map in `src/Icon/iconMap.js` +3. To make new icons available from the Icon component, define a `string` name for them in the icon map in `src/Icon/iconMap.js` 4. Add new icons to this Storybook page for documentation (you'll find it inside of `/src/docs`) -Once that's done, run `npm run build-icons` to convert the SVGs to standalone React components inside of [src/icons](/src/icons). +Once that's done, run `npm run build-icons` to convert the SVGs to standalone React components inside of `src/icons`. After that, you can follow the normal instructions for updating/publishing this repo found in the base5-UI Introduction. diff --git a/src/useFocusOnMount/README.stories.mdx b/src/useFocusOnMount/README.stories.mdx index 9f0bd438..a15b22e4 100644 --- a/src/useFocusOnMount/README.stories.mdx +++ b/src/useFocusOnMount/README.stories.mdx @@ -1,4 +1,5 @@ import {Meta, Canvas, Story, ArgsTable} from '@storybook/addon-docs/blocks'; +import LinkTo from '@storybook/addon-links/react'; import Button from '../Button'; import Stack from '../Stack'; @@ -18,7 +19,7 @@ A hook that will focus a chosen element when the component it is in is mounted, This is useful for moving focus into non-modal dialogs (for modal dialogs, please use the Modal component). -Note: This hook can only restore focus to the previously focused element if that element has not been unmounted or replaced by the dialog. If your design requires this, you can additionally use the [`useReturnToInitEffect` hook](src-use-return-to-init-effect-readme) in the parent component to explicitly set focus when the dialog is closed. +Note: This hook can only restore focus to the previously focused element if that element has not been unmounted or replaced by the dialog. If your design requires this, you can additionally use the `useReturnToInitEffect` hook in the parent component to explicitly set focus when the dialog is closed. ## Example diff --git a/src/usePopover/README.stories.mdx b/src/usePopover/README.stories.mdx index 6cfbda8b..378cd175 100644 --- a/src/usePopover/README.stories.mdx +++ b/src/usePopover/README.stories.mdx @@ -1,4 +1,5 @@ import {Meta} from '@storybook/addon-docs/blocks'; +import LinkTo from '@storybook/addon-links/react'; import usePopover from './'; @@ -10,9 +11,9 @@ import usePopover from './'; import usePopover from 'base5-ui/usePopover'; ``` -The `usePopover` hook uses [react-popper](https://github.com/FezVrasta/react-popper) and the [Arrow component](https://5app.github.io/base5-ui/src-arrow-readme) to make it easy to create your own Popover component. +The `usePopover` hook uses [react-popper](https://github.com/FezVrasta/react-popper) and the Arrow component to make it easy to create your own Popover component. -Here's a simple implementation of a Popover using `usePopover`, not dissimilar to the [Popover](/src-popover-readme) component: +Here's a simple implementation of a Popover using `usePopover`, not dissimilar to the Popover component: ```jsx import React from 'react';