diff --git a/README.md b/README.md
index 32f5b3fcb..870b340c5 100644
--- a/README.md
+++ b/README.md
@@ -14,13 +14,13 @@ npm i base5-ui styled-components
## Running the component library locally
-base5-ui comes with its own documentation tool & development playground powered by [docz](https://www.docz.site/). To check it out locally, clone this repo to your local machine, install its dependencies (`npm i`), and finally run the following command:
+base5-ui comes with its own documentation tool & development playground powered by [Storybook](https://storybook.js.org/). To check it out locally, clone this repo to your local machine, install its dependencies (`npm i`), and finally run the following command:
```
-npm run docz:dev
+npm run storybook
```
-The documentation environment should then open in your browser at http://localhost:3000, letting you browse all available components to inspect their API and see usage examples.
+The documentation environment should then open in your browser at http://localhost:6006, letting you browse all available components to inspect their API, read documentation and see usage examples.
## Using base5-ui
@@ -52,9 +52,9 @@ ReactDOM.render(
-
- {dur => `${dur.hours}h ${dur.minutes}m ${dur.seconds}s`}
-
- {dur => `${dur.fullHours} hours`}
- {dur => `${dur.fullMinutes} mins`}
-
-
-## Props
-
-
+
+ {props =>
+
+ {props =>
+
+ {props =>
+
+ {props =>
+
+ {props =>
+ `${dur.hours}h ${dur.minutes}m ${dur.seconds}s`,
+ }}
+ >
+ {props =>
+ `${dur.fullHours} hours`,
+ }}
+ >
+ {props =>
+ `${dur.fullMinutes} mins`,
+ }}
+ >
+ {props => (
+ {dur => `${dur.fullMinutes} mins`}
+ )}
+
+
+
+## Props
+
+
-
-
- I take up all the free space and push other Boxes away! 👉
-
- 👀 I'm smol.
-
-
-
-
- Still taking up all free space.
-
- If there's no room for me I'll wrap onto a new line 👇
-
-
-
-
-## Props
-
-
+
+
+
+ I take up all the free space and push other Boxes to the side!
+ 👉
+
+ 👀 I'm smol.
+
+
+
+
+
+
+
+
+ Still taking up as much space as possible.
+
+
+ If there's no room for me I'll wrap onto a new line down below.
+
+
+
+
+
+## Props
+
+
- Hello up there 👆
-
- Welcome to the golden middle ✌️
-
- Hello down there 👇
-
-
-### Hiding inline content
-
-
- This text contains a hidden word{' '}
-
- that's
- {' '}
- only visible on wider viewports
-
-
-### Accessibly hiding content
-
-
-
- Choose location
-
-
-
-## Props
-
-
+
+ Hello up there 👆
+
+ Welcome to the golden middle ✌️
+
+ Hello down there 👇
+
+
+
+Renders a `div` by default, but as usual you can use the `as` prop to change that. Use the Boolean `inline` prop as a shortcut for `as="span"`.
+
+
+
+ <>This text contains a hidden word
+
+ that's
+
+ <> only visible on wider viewports
+
+
+
+The component can hide content completely (`display: none`, the default setting), or only visually, so that screen reader users can still access the content. Add the `accessible` prop to opt in to this mode.
+
+
+
+ <>
+
+ Choose location
+
+
+
+
+
+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.
+
+## Props
+
+
-
-
-
+
+
+
+
+
+
## Using individual icons
@@ -44,28 +46,30 @@ import SearchIcon from 'base5-ui/icons/Search';
and use them directly:
-
+
+
## Aligning icons with text
When placed next to or inside of text, icons tend to sit a bit too low compared to the text's baseline. They also often look darker than text, even if they "technically" have the same colour. The props `vAlign` and `dimmed` exist to compensate for these issues. Use the Boolean `vAlign` prop to nudge the icon up by a few pixels to visually align it with its surrounding text. Use `dimmed` to make the icon slightly transparent to match the text's appearance.
-
-
+
+ <>
+
## Transforming icons
You can both rotate and flip icons.
-
+
+
## Props
The following props are available on both the individual icon components as well as the `
-
-
-
-
- <>Milk
- <>Flour
- <>Sugar
- <>Eggs
-
-
-
- Home
- Projects
- About us
-
-
-
-
-
+
+ {props => (
+
+
+ )}
+
+
+
+
+
+ {props => (
+
+ <>Milk
+ <>Flour
+ <>Sugar
+ <>Eggs
+
+ )}
+
+
+
+
+
+ {props => (
+
+ Home
+ Projects
+ About us
+
+ )}
+
+
+
+## Props
+
+
- {() => {
- const [lastSelectedItem, setLastSelectedItem] = React.useState();
- const menuItems = [
- {id: 0, label: 'Insert', icon: 'plus'},
- {id: 1, label: 'Favourite', icon: 'star'},
- {
- id: 2,
- label: 'Reset progress',
- icon: 'trending',
- isDisabled: true,
- },
- {id: 3, label: 'Download', icon: 'download'},
- ];
- return (
- <>
-
-
- {lastSelectedItem && `Last action: "${lastSelectedItem}"`}
-
-
- );
- }}
-
-
-## Props
-
-### Menu
-
-
+
+ {props => {
+ const [lastSelectedItem, setLastSelectedItem] = React.useState();
+ const menuItems = [
+ {id: 0, label: 'Insert', icon: 'plus'},
+ {id: 1, label: 'Favourite', icon: 'star'},
+ {
+ id: 2,
+ label: 'Reset progress',
+ icon: 'trending',
+ isDisabled: true,
+ },
+ {id: 3, label: 'Download', icon: 'download'},
+ ];
+ return (
+ <>
+
+
+ More actions
+
+
+ {menuItems.map(item => (
+
+ setLastSelectedItem(item.label)
+ }
+ >
+ {item.label}
+
+ ))}
+
+
+
+ {lastSelectedItem &&
+ `Last action: "${lastSelectedItem}"`}
+
+
+ );
+ }}
+
+
+
+## Menu Props
+
+
- {() => {
- const [highlightedItem, setHighlightedItem] = React.useState(0);
- const [selectedItem, setSelectedItem] = React.useState(0);
- const menuItems = [
- {id: 0, label: 'Insert', icon: 'plus'},
- {id: 1, label: 'Favourite', icon: 'star'},
- {id: 2, label: 'Insights', icon: 'trending', isDisabled: true},
- {id: 3, label: 'Download', icon: 'download'},
- ];
- return (
-
-
- {menuItems.map((item, index) => (
-
- setHighlightedItem(item.id)}
- >
-
-
- ))}
-
-
- );
- }}
-
diff --git a/src/MenuList/README.stories.mdx b/src/MenuList/README.stories.mdx
new file mode 100644
index 000000000..a6df6da49
--- /dev/null
+++ b/src/MenuList/README.stories.mdx
@@ -0,0 +1,59 @@
+import {Meta, Story, Canvas, ArgsTable} from '@storybook/addon-docs/blocks';
+
+import PopoverCard from '../PopoverCard';
+import * as MenuList from './';
+
+
+
+ {() => {
+ const [highlightedItem, setHighlightedItem] = React.useState(0);
+ const [selectedItem, setSelectedItem] = React.useState(0);
+ const menuItems = [
+ {id: 0, label: 'Insert', icon: 'plus'},
+ {id: 1, label: 'Favourite', icon: 'star'},
+ {id: 2, label: 'Insights', icon: 'trending', isDisabled: true},
+ {id: 3, label: 'Download', icon: 'download'},
+ ];
+ return (
+
+
+ {menuItems.map((item, index) => (
+
+
+ setHighlightedItem(item.id)
+ }
+ >
+
+
+ ))}
+
+
+ );
+ }}
+
+
diff --git a/src/MenuList/index.js b/src/MenuList/index.js
index 220d61528..f4718c475 100644
--- a/src/MenuList/index.js
+++ b/src/MenuList/index.js
@@ -1,4 +1,5 @@
import React, {forwardRef} from 'react';
+import PropTypes from 'prop-types';
import styled, {css} from 'styled-components';
import {getBackgroundShade, pxToRem} from '../utils';
@@ -92,6 +93,12 @@ Link.defaultProps = {
stealthy: true,
};
+Link.propTypes = {
+ isActive: PropTypes.bool,
+ isDisabled: PropTypes.bool,
+ isHighlighted: PropTypes.bool,
+};
+
const IconWrapper = styled.span`
flex: none;
vertical-align: middle;
diff --git a/src/Meter/README.mdx b/src/Meter/README.mdx
deleted file mode 100644
index 7c341b08f..000000000
--- a/src/Meter/README.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
----
-name: Meter
-menu: Components
----
-
-import {Playground, Props} from 'docz';
-
-import Meter from './';
-
-# Meter
-
-A stand-in for the native `` HTML element built to ensure consistent visuals across browsers.
-
-## Examples
-
-
-
-
-## Props
-
-` HTML element built to ensure consistent visuals across browsers.
+
+If you don't define a color for the meter, it will look for color blocks named 'negative', 'neutral', and 'positive' in your global theme, and use them for the sections of the meter that were defined using the `low` and `high` props.
+
+You can also visually prevent the meter value from falling below a certain value by specifying the `visualMin` prop.
+
+## Examples
+
+
+
+ {props =>
+
+
+
+
+ {props =>
+
+
+
+
+ {props =>
+
+
+
+
+ {props =>
+
+
+## Props
+
+Esc key is pressed
-- Prevent scrolling "behind" the modal
+ - Contains keyboard and screen reader focus inside of the topmost modal
+ - Returns keyboard focus to the element that triggered the modal after it is closed
+- Closes the topmost modal when the Esc key is pressed
+- Prevents scrolling "behind" the modal
## Demo
@@ -35,8 +39,6 @@ Wrap your app with the `ModalManager` and `BodyScrollLock` components. `ModalMan
`BodyScrollLock` renders a `div` by default and should wrap the main content of your app. The HTML elements of your modals need to be rendered outside of this container. (If you use base5-ui's Portal or the built-in Modal component, this will be the case by default.) You can customise the rendered element using the `as` prop as seen below.
```jsx
-import {ModalManager, BodyScrollLock} from 'base5-ui/Modal';
-
function App() {
return (
@@ -71,8 +73,6 @@ Keep in mind that you're responsible for opening & closing your modals. We recom
#### Modal component example
```jsx
-import Modal from 'base5-ui/Modal';
-
function MyPage() {
const [hasModal, setHasModal] = useState(false);
@@ -103,7 +103,7 @@ function MyPage() {
#### Modal props
-
-
-
+
+
+ {props => (
+
+ Related links
+
+
+ Open-source essentials:
+
+
+ DuckDuckGo
+
+
+ Firefox
+
+
+ Bitwarden
+
+
+
+ )}
+
+
### Note on non-string menu items
@@ -56,20 +69,18 @@ When passing non-string children to `NavMenuItem`, please also provide a string-
This is needed to allow navigating the menu by typing the first letters of the item's label.
-## Props
-
-### NavMenu
+## NavMenu Props
-
-
- Regular pill
- Dimmed pill
- Pill with custom background colour
-
- Pill with icon
-
-
- Dimmed pill with icon
-
-
-
-
-## Interactive examples
-
-To make a Pill's body clickable, simply attach an `onClick` handler. You can also make the Pill a link: Use the `as` prop to choose which element to render, e.g. `"a"` or react-router's `{Link}`. You can then use the `href` or `to` prop to define the link's destination. All other link props will also be passed through to the clickable element.
-
-
-
- console.log('Delete')} deleteLabel="Delete">
- Regular, delete-able pill
-
- console.log('Delete')}
- deleteLabel="Delete"
- >
- Dimmed, delete-able pill
-
- console.log('Delete')}
- deleteLabel="Delete"
- >
- Delete-able Pill with icon
-
- console.log('Hello!')}>Clickable pill
- console.log('Hello!')}
- icon="external"
- iconColor="pink"
- >
- Clickable pill with icon
-
- console.log('Hello!')}
- icon="user"
- iconColor="positive"
- onDelete={() => console.log('Delete')}
- deleteLabel="Delete"
- >
- Clickable, delete-able pill
-
-
-
- console.log('Hello!')}
- icon="user"
- iconColor="positive"
- >
- Pill on a dark background
-
- console.log('Hello!')}
- icon="user"
- iconColor="positive"
- onDelete={() => console.log('Delete')}
- deleteLabel="Delete"
- >
- Pill with a long label that doesn't fit the parent container
-
-
-
-
-
-
-## Props
-
-In addition to the props below, the `Pill` component also supports
-the margin style props (e.g. `m`, `ml`, `mx` etc).
-
-
+
+
+ Regular pill
+ Dimmed pill
+
+ Pill with custom background colour
+
+
+ Pill with icon
+
+
+ Dimmed pill with icon
+
+
+
+
+
+## Interactive examples
+
+To make a Pill's body clickable, simply attach an `onClick` handler. You can also make the Pill a link: Use the `as` prop to choose which element to render, e.g. `"a"` or react-router's `{Link}`. You can then use the `href` or `to` prop to define the link's destination. All other link props will also be passed through to the clickable element.
+
+
+
+
+ console.log('Delete')} deleteLabel="Delete">
+ Regular, delete-able pill
+
+ console.log('Delete')}
+ deleteLabel="Delete"
+ >
+ Dimmed, delete-able pill
+
+ console.log('Delete')}
+ deleteLabel="Delete"
+ >
+ Delete-able Pill with icon
+
+ console.log('Hello!')}>Clickable pill
+ console.log('Hello!')}
+ icon="external"
+ iconColor="pink"
+ >
+ Clickable pill with icon
+
+ console.log('Hello!')}
+ icon="user"
+ iconColor="positive"
+ onDelete={() => console.log('Delete')}
+ deleteLabel="Delete"
+ >
+ Clickable, delete-able pill
+
+
+
+ console.log('Hello!')}
+ icon="user"
+ iconColor="positive"
+ >
+ Pill on a dark background
+
+ console.log('Hello!')}
+ icon="user"
+ iconColor="positive"
+ onDelete={() => console.log('Delete')}
+ deleteLabel="Delete"
+ >
+ Pill with a long label that doesn't fit the parent
+ container
+
+
+
+
+
+
+
+## Playground
+
+
+ console.log('Delete!'),
+ onClick: null,
+ }}
+ >
+ {props =>
+
+
+## Props
+
+In addition to the props below, the `Pill` component also supports
+the margin style props (e.g. `m`, `ml`, `mx` etc).
+
+
-
-
- {popover => I'm a reference element }
-
-
-
-
-# Props
-
-
+ (
+ I'm a reference element
+ ),
+ }}
+ >
+ {props => (
+
+
+ )}
+
+
+
+# Props
+
+
-
- Popover content
-
-
-
-# Props
-
-
+
+ {props => Popover content }
+
+
+
+# Props
+
+
+ Hello
+
+ );
+}
+```
+
+## Server-side rendering
+
+Note that while this component is safe to use while server-side rendering, its contents will not be rendered on the server.
+
+## Props
+
+
- {() => {
- const options = [
- 'Apple',
- 'Apricot',
- 'Banana',
- 'Blueberry',
- 'Cherry',
- 'Fig',
- 'Feijoa',
- 'Gooseberry',
- 'Jackfruit',
- 'Jujube',
- 'Kiwi',
- 'Kumquat',
- 'Lingonberry',
- 'Lychee',
- 'Mandarin',
- 'Mango',
- 'Melon',
- 'Nectarine',
- 'Orange',
- 'Papaya',
- 'Passion Fruit',
- 'Pear',
- 'Persimmon',
- 'Physalis',
- 'Pineapple',
- 'Plum',
- 'Pomegranate',
- 'Pomelo',
- 'Raspberry',
- 'Starfruit',
- 'Strawberry',
- 'Watermelon',
- 'Wumpa',
- ];
- const [selectedValue, setSelectedValue] = React.useState(options[7]);
- return (
- <>
-
-
-
- );
- }}
-
-
-## Props
-
-### Select
-
-
+
+ {props => {
+ const options = [
+ 'Apple',
+ 'Apricot',
+ 'Banana',
+ 'Blueberry',
+ 'Cherry',
+ 'Fig',
+ 'Feijoa',
+ 'Gooseberry',
+ 'Jackfruit',
+ 'Jujube',
+ 'Kiwi',
+ 'Kumquat',
+ 'Lingonberry',
+ 'Lychee',
+ 'Mandarin',
+ 'Mango',
+ 'Melon',
+ 'Nectarine',
+ 'Orange',
+ 'Papaya',
+ 'Passion Fruit',
+ 'Pear',
+ 'Persimmon',
+ 'Physalis',
+ 'Pineapple',
+ 'Plum',
+ 'Pomegranate',
+ 'Pomelo',
+ 'Raspberry',
+ 'Starfruit',
+ 'Strawberry',
+ 'Watermelon',
+ 'Wumpa',
+ ];
+ const [selectedValue, setSelectedValue] = React.useState(
+ options[7]
+ );
+ return (
+ <>
+
+
+
+ );
+ }}
+
+
+
+## Props
+
+### Select
+
+
-
- Home
- Projects
- About us
-
-
+
+
+ {props => (
+
+ Home
+ Projects
+ About us
+
+ )}
+
+
## Conditionally rendering Stack items
@@ -53,15 +67,22 @@ Please note that a nested falsy return as shown in the next example will **not**
Use the `Hidden` component to hide Stack items below or above a certain breakpoint.
The following list has a third list item that will be hidden on larger screens.
-
-
- Milch
- Eier
-
- Käse
-
-
-
+
+
+ {props => (
+
+ Milch
+ Eier
+
+ Käse
+
+
+ )}
+
+
## Granular list item rendering
@@ -77,15 +98,22 @@ All `Stack` props are now passed to the `StackWrapper` instead.
Instead of using the `Hidden` component to responsively hide items, you can pass the `hiddenBelow` or `hiddenAbove` props to items.
`StackItem` rejects all other custom props by default, but you can allow them to be passed through by attaching the `allowUnknownProps` prop.
-
-
- Development
- Marketing
- Sales
- Design
-
-
+
+
+ {props => (
+
+ Development
+ Marketing
+ Sales
+ Design
+
+ )}
+
+
## Props
-
- {() => {
- const [showConfirmation, setShowConfirmation] = React.useState(false);
- return (
- <>
- setShowConfirmation(v => !v)}
- >
- Click me
-
-
- {showConfirmation &&
- 'Congrats, you have clicked the button! This message will be read out by screen readers.'}
-
-
- );
- }}
-
+
+
+ {props => {
+ const [showConfirmation, setShowConfirmation] =
+ React.useState(false);
+ return (
+ <>
+ setShowConfirmation(v => !v)}
+ >
+ Click me
+
+
+ {showConfirmation &&
+ 'Congrats, you have clicked the button! This message will be read out by screen readers.'}
+
+
+ );
+ }}
+
+
## Usage note
@@ -54,4 +58,4 @@ The example below would not work:
## Props
-
-
- On:
-
-
-## Props
-
-
+
+ {props =>
+
+ {props =>
+
+ {props =>
+
+ {props =>
+
+
+## Props
+
+
+
-
- item.email.split('@')[1]}
- />
-
-
+
+
+
+ item.email.split('@')[1]}
+ />
+
+
+
### Simple example with object column config
@@ -81,52 +85,60 @@ You can also define your columns as an array of objects, if you prefer:
- Use the `pl` or `pr` props to specify left and right inner padding on the table, to visually align the first and last columns with the rest of the design without affecting horizontal rules
- Enable sortable columns by adding `
-
-
- {({data, sort: {column, order}, handleSort}) => (
-
- (
- {item.name} }
- />
-
- )}
-
-
-
+
+
+
+
+ {({data, sort: {column, order}, handleSort}) => (
+
+ (
+ {item.name} }
+ />
+
+ )}
+
+
+
+
### Sorting
@@ -143,30 +155,32 @@ Finally you'll need to tell the Table what to do when a header is clicked. That'
The table below uses both modes – on medium sized screens, columns that don't fit are hidden, while the mobile view is active on very small screens.
-
-
- (
- {item.name} }
- />
-
-
+
+
+
+ (
+ {item.name} }
+ />
+
+
+
### Empty state
@@ -174,25 +188,27 @@ When no `data` array is provided, or when its length is `0`, the message "No dat
Use the `CenterContent` component to make the content appear centred and take up a minimum height.
-
- Here be dragons
- }
- rowHeader="Name"
- >
-
-
+
+
+ Here be dragons
+ }
+ rowHeader="Name"
+ >
+
+
+
## Table props
-
-
- Extra-large text with a smaller line height
-
-
- A dimmed subtitle with a{' '}
-
- non-dimmed segment
-
-
-
- Bold text with some nested non-bold text
-
-
- this text is all-lowercase, but displays in uppercase
-
-
- this text is all-lowercase, but is displayed in title-case{' '}
- (unless overwritten)
-
-
- OverflowWrapWillMakeLongWordsWithNoSpacesForExampleUrlsBreakIntoANewLineInsteadOfGoingOnAndBreakingOutOfTheirContainerWhichUsuallyDoesntLookVeryGood.
-
-
- An overflow value of 'ellipsis' will prevent line-breaks and cut off
- overflowing text with an ellipsis (…). This only works with
- "block-level" elements (e.g. div, p). If you want to use it with a
- non-block element like `span`, set the `display` prop to 'block'.
-
-
-
-## Props
-
-
+
+
+ Extra-large text with a smaller line height
+
+
+ A dimmed subtitle with a{' '}
+
+ non-dimmed segment
+
+
+
+ Bold text with some nested non-bold text
+
+
+ this text is all-lowercase, but displays in uppercase
+
+
+ this text is all-lowercase, but is displayed in title-case{' '}
+ (unless overwritten)
+
+
+ OverflowWrapWillMakeLongWordsWithNoSpacesForExampleUrlsBreakIntoANewLineInsteadOfGoingOnAndBreakingOutOfTheirContainerWhichUsuallyDoesntLookVeryGood.
+
+
+ An overflow value of 'ellipsis' will prevent line-breaks and cut off
+ overflowing text with an ellipsis (…). This only works with
+ "block-level" elements (e.g. div, p). If you want to use it with a
+ non-block element like `span`, set the `display` prop to 'block'.
+
+
+
+
+## Props
+
+` tag by default, but you can use the `as` prop to render as a button or a router link, too.
`TextLink` supports the `disabled` or `isDisabled` prop whether it's used to render a button or a link. Since "disabled links" don't exist in HTML, we simply render them as `span` elements and remove all link-specific attributes from them.
-
-
- Hello, world!
+
+
+ {props => (
+
+ Hello, world!
+
+ )}
+
+
I'm bold
+
+
I blend in with my surroundings!
+
+
I'm actually a button
+
+
I can be disabled!
+
+
Even as a link!
-
-
+
+
## Props
-
+
+ {props => (
+
+
+ This is a simple box picking up its parent ThemeSection's
+ text and background colours.
+
+
+ )}
+
+
+
+## Props
+
+
-
-
- Hello
+
+
+
+
+ Hello
+
-
-
+
+
## Props
-` element with a `title` attribute that ensures that the full time is provided as a browser tooltip when holding a mouse cursor over it.
-## Props
-
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
## Invalid examples
-
+
+
+
+## Props
+
+
{dateString || 'n/a'}
@@ -52,20 +43,34 @@ function Time({dateTime, systemTime, readoutFunctions, locale, ...props}) {
Time.propTypes = {
/**
- * Any Date string recognized by `Date.parse()`.
+ * Date of the event. Any Date string recognized by `Date.parse()`.
* Suffix with `Z` to define the date as a UTC value or offset.
*/
dateTime: PropTypes.oneOfType([
PropTypes.instanceOf(Date),
PropTypes.string,
]).isRequired,
+ /**
+ * Base time (used in testing)
+ */
systemTime: PropTypes.oneOfType([
PropTypes.instanceOf(Date),
PropTypes.string,
]),
+ /**
+ * Locale of the user, otherwise uses agent default
+ */
locale: PropTypes.string,
- readoutFunctions: PropTypes.object,
+ /**
+ * Object containing callbacks for handling translations.
+ * The functions are called with the count of seconds or
+ * minutes respectively, and should return a string like
+ * 'X minute(s) ago'.
+ */
+ readoutFunctions: PropTypes.shape({
+ secondsAgoReadout: PropTypes.func,
+ minutesAgoReadout: PropTypes.func,
+ }),
};
-// @component
export default Time;
diff --git a/src/Tooltip/README.mdx b/src/Tooltip/README.mdx
deleted file mode 100644
index ba807b64a..000000000
--- a/src/Tooltip/README.mdx
+++ /dev/null
@@ -1,48 +0,0 @@
----
-name: Tooltip
-menu: Components
----
-
-import {Playground, Props} from 'docz';
-
-import Box from '../Box';
-import Button from '../Button';
-import Tooltip from '../Tooltip';
-
-# Tooltip
-
-Add a tooltip or dropdown menu to other interactive elements. This component is a combination of the `Popover` component and the `usePopoverState` hook which provides the open/close state and functionality.
-
-## Example
-
-The below is a simplified implementation of the [TooltipButton](/src-tooltip-button-readme) component.
-
-
-
-
- {popover => (
-
- Show tooltip
-
- )}
-
-
-
-
-## Props
-
-
+
+ {props => (
+
+ {popover => (
+
+ Hover or focus to show tooltip
+
+ )}
+
+ )}
+
+
+
+## Props
+
+
-
-
-
- Button with a label
-
-
-
-
-
-## Props
-
-
+
+ {props => Button with a label }
+
+
+ {props =>
+
+
+## Props
+
+
-
-
-## Props
-
-
+
+ {props =>
+
+
+
+
+ {props =>
+
+
+
+
+ {props =>
+
+
+## Props
+
+
+
+
+ Search
+
+
+ Search
+
+
+
+
+## Props
+
+
+
+
diff --git a/src/useBackLink/BackLinkProvider.js b/src/useBackLink/BackLinkProvider.js
index 31f4a6f70..fc30debfa 100644
--- a/src/useBackLink/BackLinkProvider.js
+++ b/src/useBackLink/BackLinkProvider.js
@@ -165,5 +165,4 @@ BackLinkProvider.propTypes = {
export {BackLinkContext};
-// @component
export default BackLinkProvider;