Skip to content

Commit

Permalink
feat(docs): update tooltip page to use new layout (#628)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorgemoya
jorgemoya authored Oct 12, 2021
1 parent 3988dfb commit 6990132
Showing 1 changed file with 104 additions and 81 deletions.
185 changes: 104 additions & 81 deletions packages/docs/pages/tooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,98 +2,121 @@ import { Box, Button, Flex, Grid, H1, Panel, Text, Tooltip } from '@bigcommerce/
import { WarningIcon } from '@bigcommerce/big-design-icons';
import React from 'react';

import { Code, CodePreview, PageNavigation } from '../components';
import { Code, CodePreview, ContentRoutingTabs, List } from '../components';
import { TooltipPropTable } from '../PropTables';

const TooltipPage = () => {
const items = [
{
id: 'examples',
title: 'Examples',
render: () => (
<>
<Panel>
<Text>
Tooltips contain information to help users understand actions or page elements. They are short, and
triggered by a user hovering with their keyboard or mouse over a UI element.
</Text>
<CodePreview>
{/* jsx-to-string:start */}
<Tooltip trigger={<Button>Hover</Button>} placement="right">
Tooltip Content
</Tooltip>
{/* jsx-to-string:end */}
</CodePreview>
</Panel>
<Panel header="Anchor">
<Text>
Tooltips can wrap any <Code>Element</Code>. Tooltip will show on hover.
</Text>
return (
<>
<H1>Tooltip</H1>

<CodePreview>
{/* jsx-to-string:start */}
<Flex alignItems="center">
<Box marginRight="medium">
<Tooltip trigger={<Button>Button</Button>} placement="right">
Tooltip Content
</Tooltip>
</Box>
<Panel header="Overview" headerId="overview">
<Text>
<Code primary>Tooltip</Code>s contain information to help users understand actions or page elements.
</Text>
<Text bold>When to use:</Text>
<List>
<List.Item>
They are short, and triggered by a user hovering with their keyboard or mouse over a UI element.
</List.Item>
<List.Item>They are used to help reduce information density on otherwise crowded pages or forms.</List.Item>
<List.Item>
Use tooltips to explain columns in a table, explain buttons (e.g. add, edit) on page or alongisde a help
icon.
</List.Item>
</List>
</Panel>

<Box marginRight="medium">
<Tooltip trigger={<WarningIcon />} placement="right">
<Panel header="Implementation" headerId="implementation">
<ContentRoutingTabs
id="implementation"
routes={[
{
id: 'basic',
title: 'Basic',
render: () => (
<CodePreview>
{/* jsx-to-string:start */}
<Tooltip trigger={<Button>Hover</Button>} placement="right">
Tooltip Content
</Tooltip>
</Box>
<Box marginRight="medium">
<Tooltip trigger={<span>Span</span>} placement="right">
Tooltip Content
</Tooltip>
</Box>
</Flex>
{/* jsx-to-string:end */}
</CodePreview>
</Panel>
<Panel header="Placement">
<Text>
Tooltip can be anchored in different directions with the <Code primary>placement</Code> property. It will
automatically find a position if there's not enough space in the chosen direction.
</Text>
{/* jsx-to-string:end */}
</CodePreview>
),
},
{
id: 'anchor',
title: 'Anchor',
render: () => (
<>
<Text>
Tooltips can wrap any <Code>Element</Code>. Tooltip will show on hover.
</Text>

<CodePreview>
{/* jsx-to-string:start */}
<Grid gridColumns="repeat(4, min-content)">
<Tooltip trigger={<Button>Right</Button>} placement="right">
Tooltip Content
</Tooltip>
<Tooltip trigger={<Button>Top</Button>} placement="top">
Tooltip Content
</Tooltip>
<Tooltip trigger={<Button>Left</Button>} placement="left">
Tooltip Content
</Tooltip>
<Tooltip trigger={<Button>Bottom</Button>} placement="bottom">
Tooltip Content
</Tooltip>
</Grid>
<CodePreview>
{/* jsx-to-string:start */}
<Flex alignItems="center">
<Box marginRight="medium">
<Tooltip trigger={<Button>Button</Button>} placement="right">
Tooltip Content
</Tooltip>
</Box>

{/* jsx-to-string:end */}
</CodePreview>
</Panel>
</>
),
},
{
id: 'props',
title: 'Props',
render: () => <TooltipPropTable />,
},
];
<Box marginRight="medium">
<Tooltip trigger={<WarningIcon />} placement="right">
Tooltip Content
</Tooltip>
</Box>
<Box marginRight="medium">
<Tooltip trigger={<span>Span</span>} placement="right">
Tooltip Content
</Tooltip>
</Box>
</Flex>
{/* jsx-to-string:end */}
</CodePreview>
</>
),
},
{
id: 'placement',
title: 'Placement',
render: () => (
<>
<Text>
Tooltip can be anchored in different directions with the <Code primary>placement</Code> property. It
will automatically find a position if there's not enough space in the chosen direction.
</Text>

return (
<>
<H1>Tooltip</H1>
<CodePreview>
{/* jsx-to-string:start */}
<Grid gridColumns="repeat(4, min-content)">
<Tooltip trigger={<Button>Right</Button>} placement="right">
Tooltip Content
</Tooltip>
<Tooltip trigger={<Button>Top</Button>} placement="top">
Tooltip Content
</Tooltip>
<Tooltip trigger={<Button>Left</Button>} placement="left">
Tooltip Content
</Tooltip>
<Tooltip trigger={<Button>Bottom</Button>} placement="bottom">
Tooltip Content
</Tooltip>
</Grid>

{/* jsx-to-string:end */}
</CodePreview>
</>
),
},
]}
/>
</Panel>

<PageNavigation items={items} />
<Panel header="Props" headerId="props">
<TooltipPropTable renderPanel={false} />
</Panel>
</>
);
};
Expand Down

0 comments on commit 6990132

Please sign in to comment.