Skip to content

Commit

Permalink
feat(docs): update flex page to use new layout (#666)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorgemoya
jorgemoya authored Jan 19, 2022
1 parent 0a71bfb commit 4e6a6f6
Showing 1 changed file with 234 additions and 144 deletions.
378 changes: 234 additions & 144 deletions packages/docs/pages/flex.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Box, Flex, FlexItem, H1, Panel, Text } from '@bigcommerce/big-design';
import { Box, Flex, FlexItem, H1, Link, Panel, Text } from '@bigcommerce/big-design';
import React from 'react';

import { Code, CodePreview, PageNavigation } from '../components';
import { Code, CodePreview, ContentRoutingTabs, GuidelinesTable, List, NextLink } from '../components';
import {
BoxPropTable,
DisplayPropTable,
Expand All @@ -24,153 +24,243 @@ const ExampleBox: React.FC<{ vertical?: boolean }> = ({ children, vertical }) =>
);

const FlexPage = () => {
const items = [
{
id: 'examples',
title: 'Examples',
render: () => (
<>
<Panel>
<Text>A flex container used for customizable layouts.</Text>
<CodePreview scope={{ ExampleBox }}>
{/* jsx-to-string:start */}
<Flex
alignContent="stretch"
alignItems="stretch"
flexDirection="row"
justifyContent="flex-start"
flexWrap="nowrap"
>
<FlexItem alignSelf="auto" flexBasis="auto" flexGrow={0} flexOrder={0} flexShrink={1}>
<ExampleBox>Item 1</ExampleBox>
</FlexItem>
<FlexItem alignSelf="auto" flexBasis="auto" flexGrow={0} flexOrder={0} flexShrink={1}>
<ExampleBox>Item 2</ExampleBox>
</FlexItem>
<FlexItem alignSelf="auto" flexBasis="auto" flexGrow={0} flexOrder={0} flexShrink={1}>
<ExampleBox>Item 3</ExampleBox>
</FlexItem>
<FlexItem alignSelf="auto" flexBasis="auto" flexGrow={0} flexOrder={0} flexShrink={1}>
<ExampleBox>Item 4</ExampleBox>
</FlexItem>
</Flex>
{/* jsx-to-string:end */}
</CodePreview>
</Panel>
<Panel header="Justify content">
<Text>
Flex container's can space their element with uniform spacing in-between each flex item using the{' '}
<Code primary>justifyContent</Code> prop.
</Text>
return (
<>
<H1>Flex</H1>

<CodePreview scope={{ ExampleBox }}>
{/* jsx-to-string:start */}
<Flex justifyContent="space-between">
<FlexItem>
<ExampleBox>Item 1</ExampleBox>
</FlexItem>
<FlexItem>
<ExampleBox>Item 2</ExampleBox>
</FlexItem>
<FlexItem>
<ExampleBox>Item 3</ExampleBox>
</FlexItem>
<FlexItem>
<ExampleBox>Item 4</ExampleBox>
</FlexItem>
</Flex>
{/* jsx-to-string:end */}
</CodePreview>
</Panel>
<Panel header="Column layout">
<Text>
One way of creating a column based layout is using a combination of the <Code primary>flexWrap</Code> prop
on the flex container with an additional <Code primary>flexBasis</Code> prop on the flex items.
</Text>
<Panel header="Overview" headerId="overview">
<Text>
The <Code primary>Flex</Code> component extends the <Code primary>Box</Code> utility component and provides a{' '}
<Link
href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex"
external
target="_blank"
rel="external nofollow noreferrer"
>
CSS flexbox
</Link>{' '}
container alongside flexbox properties.
</Text>

<CodePreview scope={{ ExampleBox }}>
{/* jsx-to-string:start */}
<Flex flexWrap="wrap">
<FlexItem flexBasis="100%">
<ExampleBox vertical>Item 1</ExampleBox>
</FlexItem>
<FlexItem flexBasis="100%">
<ExampleBox vertical>Item 2</ExampleBox>
</FlexItem>
<FlexItem flexBasis="100%">
<ExampleBox vertical>Item 3</ExampleBox>
</FlexItem>
<FlexItem flexBasis="100%">
<ExampleBox vertical>Item 4</ExampleBox>
</FlexItem>
</Flex>
{/* jsx-to-string:end */}
</CodePreview>
</Panel>
<Panel header="Sort content">
<Text>
Using the <Code primary>flexOrder</Code> prop you can reorganize content based on the size generated by
setting the <Code primary>flexGrow</Code> prop. <Code primary>flexGrow</Code> allows the flex items to
grow relative to the flex container's width.
</Text>
<Text bold>When to use:</Text>
<List>
<List.Item>Want to lay a collection of items out in one direction or another.</List.Item>
<List.Item>
Want to control the dimensions of the items in that one dimension, or control the spacing between items.
</List.Item>
<List.Item>Justify or vertically align items as needed.</List.Item>
<List.Item>Mostly used for simple one dimensional layouts.</List.Item>
</List>
</Panel>

<CodePreview scope={{ ExampleBox }}>
{/* jsx-to-string:start */}
<Flex>
<FlexItem flexGrow={2} flexOrder={2}>
<ExampleBox>Item 1</ExampleBox>
</FlexItem>
<FlexItem flexOrder={4}>
<ExampleBox>Item 2</ExampleBox>
</FlexItem>
<FlexItem flexGrow={4} flexOrder={1}>
<ExampleBox>Item 3</ExampleBox>
</FlexItem>
<FlexItem flexGrow={1} flexOrder={3}>
<ExampleBox>Item 4</ExampleBox>
</FlexItem>
</Flex>
{/* jsx-to-string:end */}
</CodePreview>
</Panel>
</>
),
},
{
id: 'props',
title: 'Props',
render: () => (
<>
<FlexPropTable
inheritedProps={
<>
<BoxPropTable collapsible />
<DisplayPropTable collapsible />
<MarginPropTable collapsible />
<PaddingPropTable collapsible />
</>
}
/>
<FlexItemPropTable
inheritedProps={
<>
<BoxPropTable collapsible />
<DisplayPropTable collapsible />
<MarginPropTable collapsible />
<PaddingPropTable collapsible />
</>
}
/>
</>
),
},
];
<Panel header="Implementation" headerId="implementation">
<ContentRoutingTabs
id="implementation"
routes={[
{
id: 'basic',
title: 'Basic',
render: () => (
<CodePreview scope={{ ExampleBox }}>
{/* jsx-to-string:start */}
<Flex
alignContent="stretch"
alignItems="stretch"
flexDirection="row"
justifyContent="flex-start"
flexWrap="nowrap"
>
<FlexItem alignSelf="auto" flexBasis="auto" flexGrow={0} flexOrder={0} flexShrink={1}>
<ExampleBox>Item 1</ExampleBox>
</FlexItem>
<FlexItem alignSelf="auto" flexBasis="auto" flexGrow={0} flexOrder={0} flexShrink={1}>
<ExampleBox>Item 2</ExampleBox>
</FlexItem>
<FlexItem alignSelf="auto" flexBasis="auto" flexGrow={0} flexOrder={0} flexShrink={1}>
<ExampleBox>Item 3</ExampleBox>
</FlexItem>
<FlexItem alignSelf="auto" flexBasis="auto" flexGrow={0} flexOrder={0} flexShrink={1}>
<ExampleBox>Item 4</ExampleBox>
</FlexItem>
</Flex>
{/* jsx-to-string:end */}
</CodePreview>
),
},
{
id: 'justify-content',
title: 'Justify content',
render: () => (
<>
<Text>
Flex container's can space their element with uniform spacing in-between each flex item using the{' '}
<Code primary>justifyContent</Code> prop.
</Text>

return (
<>
<H1>Flex</H1>
<CodePreview scope={{ ExampleBox }}>
{/* jsx-to-string:start */}
<Flex justifyContent="space-between">
<FlexItem>
<ExampleBox>Item 1</ExampleBox>
</FlexItem>
<FlexItem>
<ExampleBox>Item 2</ExampleBox>
</FlexItem>
<FlexItem>
<ExampleBox>Item 3</ExampleBox>
</FlexItem>
<FlexItem>
<ExampleBox>Item 4</ExampleBox>
</FlexItem>
</Flex>
{/* jsx-to-string:end */}
</CodePreview>
</>
),
},
{
id: 'column-layout',
title: 'Column layout',
render: () => (
<>
<Text>
One way of creating a column based layout is using a combination of the{' '}
<Code primary>flexWrap</Code> prop on the flex container with an additional{' '}
<Code primary>flexBasis</Code> prop on the flex items.
</Text>

<CodePreview scope={{ ExampleBox }}>
{/* jsx-to-string:start */}
<Flex flexWrap="wrap">
<FlexItem flexBasis="100%">
<ExampleBox vertical>Item 1</ExampleBox>
</FlexItem>
<FlexItem flexBasis="100%">
<ExampleBox vertical>Item 2</ExampleBox>
</FlexItem>
<FlexItem flexBasis="100%">
<ExampleBox vertical>Item 3</ExampleBox>
</FlexItem>
<FlexItem flexBasis="100%">
<ExampleBox vertical>Item 4</ExampleBox>
</FlexItem>
</Flex>
{/* jsx-to-string:end */}
</CodePreview>
</>
),
},
{
id: 'sort-content',
title: 'Sort content',
render: () => (
<>
<Text>
Using the <Code primary>flexOrder</Code> prop you can reorganize content based on the size generated
by setting the <Code primary>flexGrow</Code> prop. <Code primary>flexGrow</Code> allows the flex
items to grow relative to the flex container's width.
</Text>

<CodePreview scope={{ ExampleBox }}>
{/* jsx-to-string:start */}
<Flex>
<FlexItem flexGrow={2} flexOrder={2}>
<ExampleBox>Item 1</ExampleBox>
</FlexItem>
<FlexItem flexOrder={4}>
<ExampleBox>Item 2</ExampleBox>
</FlexItem>
<FlexItem flexGrow={4} flexOrder={1}>
<ExampleBox>Item 3</ExampleBox>
</FlexItem>
<FlexItem flexGrow={1} flexOrder={3}>
<ExampleBox>Item 4</ExampleBox>
</FlexItem>
</Flex>
{/* jsx-to-string:end */}
</CodePreview>
</>
),
},
]}
/>
</Panel>

<PageNavigation items={items} />
<Panel header="Props" headerId="props">
<ContentRoutingTabs
id="props"
routes={[
{
id: 'flex',
title: 'Flex',
render: () => (
<FlexPropTable
renderPanel={false}
inheritedProps={
<>
<BoxPropTable collapsible />
<DisplayPropTable collapsible />
<MarginPropTable collapsible />
<PaddingPropTable collapsible />
</>
}
/>
),
},
{
id: 'flex-item',
title: 'FlexItem',
render: () => (
<FlexItemPropTable
renderPanel={false}
inheritedProps={
<>
<BoxPropTable collapsible />
<DisplayPropTable collapsible />
<MarginPropTable collapsible />
<PaddingPropTable collapsible />
</>
}
/>
),
},
]}
/>
</Panel>

<Panel header="Do's and Don'ts" headerId="guidelines">
<GuidelinesTable
recommended={[
<>
Use <Code primary>Flex</Code> when focusing on 1-dimensional or content flow.
</>,
<>
Use <Code primary>FlexItem</Code> when children need specific flex properties.
</>,
<>
Use{' '}
<Link
href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/"
external
target="_blank"
rel="external nofollow noreferrer"
>
CSS-Tricks complete guide
</Link>{' '}
to flexbox.
</>,
]}
discouraged={[
<>
Don’t use <Code primary>Flex</Code> when focusing on 2-dimensional flow. Use{' '}
<NextLink href="grid">Grid</NextLink> instead.
</>,
<>
Don't use <Code primary>FlexItem</Code> if children don't have specific flex properties.
</>,
]}
/>
</Panel>
</>
);
};
Expand Down

0 comments on commit 4e6a6f6

Please sign in to comment.