docs: Fix internal links in docs, #135

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)
 	</Story>
 </Canvas>
 
-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 <LinkTo kind="Components/Box">Box component</LinkTo>, so all valid Box props can be used on the Hidden component.
 
 ## Props
 

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. ;) <LinkTo kind="base5-ui/Icons">View all available icons here</LinkTo>
 
 ## Using the Icon component
 

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 <LinkTo kind="Components/Menu (Nav)">NavMenu</LinkTo> 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.
 

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 <LinkTo kind="Components/Menu">Menu</LinkTo> and <LinkTo kind="Components/Menu (Nav)">NavMenu</LinkTo> components to see the MenuList component in use.
 
 <Canvas>
 	<Story name="MenuList">

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 <LinkTo kind="Components/Menu">Menu</LinkTo>) 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 <LinkTo kind="Components/Menu">Menu</LinkTo> 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:
 

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 <LinkTo kind="Components/Button">Button</LinkTo> component for this use case.
 
 ## Non-interactive examples
 

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 <LinkTo kind="Hooks/usePopover">usePopover</LinkTo> hook and the <LinkTo kind="Components/PopoverCard">PopoverCard</LinkTo> 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 <LinkTo kind="Hooks/usePopoverState">usePopoverState</LinkTo> for an easy way to control the open/closed state of a popover, and <LinkTo kind="Components/Tooltip">Tooltip</LinkTo> for a ready-made component combining the hook and this component.
 
 <Canvas>
 	<Story

src/Tooltip/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 Button from '../Button';
 import Tooltip from '../Tooltip';
@@ -15,7 +16,7 @@ Add a tooltip or dropdown menu to interactive elements. This component is a comb
 
 ## Example
 
-The below is a simplified implementation of the [TooltipButton](/src-tooltip-button-readme) component.
+The below is a simplified implementation of the <LinkTo kind="Components/TooltipButton">TooltipButton</LinkTo> component.
 
 <Canvas>
 	<Story

src/TooltipButton/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 TooltipButton from '../TooltipButton';
 
@@ -10,7 +11,7 @@ import TooltipButton from '../TooltipButton';
 import TooltipButton from 'base5-ui/TooltipButton';
 ```
 
-An extended version of the [Button](/src-button-readme) 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).
+An extended version of the <LinkTo kind="Components/Button">Button</LinkTo> 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
 

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';
 
 <Meta title="base5-ui/Icons" />
 
@@ -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 `<Icon />` component, define a `string` name for them in the icon map in `src/Icon/iconMap.js`
+3. To make new icons available from the <LinkTo kind="Components/Icon">Icon</LinkTo> 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.

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 <LinkTo kind="Hooks/useReturnToInitEffect">`useReturnToInitEffect` hook</LinkTo> in the parent component to explicitly set focus when the dialog is closed.
 
 ## Example
 

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 <LinkTo kind="Components/Arrow">Arrow</LinkTo> 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 <LinkTo kind="Components/Popover">Popover</LinkTo> component:
 
 ```jsx
 import React from 'react';