Skip to content

Commit

Permalink
feat(docs): update margin and padding pages to use new layout (#755)
Browse files Browse the repository at this point in the history 
* feat(docs): update margin and padding pages to use new layout

* feat(docs): update code base on code review

* feat(docs): update code base on code review

* feat(docs): update sentence for margin and padding

* feat(docs): update text in padding and margin
  • Loading branch information
@MariaJose
MariaJose authored Mar 14, 2022
1 parent 3c5da19 commit d32c2df
Show file tree
Hide file tree
Showing 4 changed files with 133 additions and 104 deletions.
14 changes: 7 additions & 7 deletions packages/docs/PropTables/MarginPropTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,37 @@ import { NextLink, Prop, PropTable, PropTableWrapper } from '../components';
const marginProps: Prop[] = [
{
name: 'margin',
types: <NextLink href="/margin">Margin</NextLink>,
types: <NextLink href="/spacing">Spacing</NextLink>,
description: 'Determines the margin to be applied.',
},
{
name: 'marginTop',
types: <NextLink href="/margin">Margin</NextLink>,
types: <NextLink href="/spacing">Spacing</NextLink>,
description: 'Determines the top margin to be applied.',
},
{
name: 'marginRight',
types: <NextLink href="/margin">Margin</NextLink>,
types: <NextLink href="/spacing">Spacing</NextLink>,
description: 'Determines the right margin to be applied.',
},
{
name: 'marginBottom',
types: <NextLink href="/margin">Margin</NextLink>,
types: <NextLink href="/spacing">Spacing</NextLink>,
description: 'Determines the bottom margin to be applied.',
},
{
name: 'marginLeft',
types: <NextLink href="/margin">Margin</NextLink>,
types: <NextLink href="/spacing">Spacing</NextLink>,
description: 'Determines the left margin to be applied.',
},
{
name: 'marginVertical',
types: <NextLink href="/margin">Margin</NextLink>,
types: <NextLink href="/spacing">Spacing</NextLink>,
description: 'Determines the top and bottom margin to be applied.',
},
{
name: 'marginHorizontal',
types: <NextLink href="/margin">Margin</NextLink>,
types: <NextLink href="/spacing">Spacing</NextLink>,
description: 'Determines the left and right margin to be applied.',
},
];
Expand Down
14 changes: 7 additions & 7 deletions packages/docs/PropTables/PaddingPropTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,39 +5,39 @@ import { NextLink, Prop, PropTable, PropTableWrapper } from '../components';
const paddingProps: Prop[] = [
{
name: 'padding',
types: <NextLink href="/padding">Padding</NextLink>,
types: <NextLink href="/spacing">Spacing</NextLink>,
description: 'Determines the padding to be applied.',
},
{
name: 'paddingTop',
types: <NextLink href="/padding">Padding</NextLink>,
types: <NextLink href="/spacing">Spacing</NextLink>,
description: 'Determines the top padding to be applied.',
},
{
name: 'paddingRight',
types: <NextLink href="/padding">Padding</NextLink>,
types: <NextLink href="/spacing">Spacing</NextLink>,
description: 'Determines the right padding to be applied.',
},
{
name: 'paddingBottom',
types: <NextLink href="/padding">Padding</NextLink>,
types: <NextLink href="/spacing">Spacing</NextLink>,
description: 'Determines the bottom padding to be applied.',
},
{
name: 'paddingLeft',
types: <NextLink href="/padding">Padding</NextLink>,
types: <NextLink href="/spacing">Spacing</NextLink>,

description: 'Determines the left padding to be applied.',
},
{
name: 'paddingVertical',
types: <NextLink href="/padding">Padding</NextLink>,
types: <NextLink href="/spacing">Spacing</NextLink>,

description: 'Determines the top and bottom padding to be applied.',
},
{
name: 'paddingHorizontal',
types: <NextLink href="/padding">Padding</NextLink>,
types: <NextLink href="/spacing">Spacing</NextLink>,

description: 'Determines the left and right padding to be applied.',
},
Expand Down
99 changes: 56 additions & 43 deletions packages/docs/pages/margin.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,68 @@
import { Button, H1, Panel, Text } from '@bigcommerce/big-design';
import React from 'react';
import React, { Fragment } from 'react';

import { CodePreview, NextLink, PageNavigation } from '../components';
import { Code, CodePreview, ContentRoutingTabs, NextLink } from '../components';
import { MarginPropTable } from '../PropTables';

const MarginPage = () => {
const items = [
{
id: 'examples',
title: 'Examples',
render: () => (
<>
<Panel>
<Text>
Some of our components expose a simple way to modify their margin. The following example showcases the
simples way to use the margin prop by giving it a <NextLink href="/spacing">Spacing</NextLink> value.
</Text>
<CodePreview>
{/* jsx-to-string:start */}
<Button margin="medium">Example</Button>
{/* jsx-to-string:end */}
</CodePreview>
</Panel>
<Panel header="Responsive breakpoints">
<Text>
You can also specify margins with an object to handle different margins with different{' '}
<NextLink href="/breakpoints">breakpoints</NextLink>. All values must be of{' '}
<NextLink href="/spacing">Spacing</NextLink> type.
</Text>

<CodePreview>
{/* jsx-to-string:start */}
<Button margin={{ mobile: 'none', tablet: 'medium', desktop: 'xLarge' }}>Example</Button>
{/* jsx-to-string:end */}
</CodePreview>
</Panel>
</>
),
},
{
id: 'props',
title: 'Props',
render: () => <MarginPropTable />,
},
];

return (
<>
<H1>Margin</H1>

<PageNavigation items={items} />
<Panel header="Overview" headerId="overview">
<Text>
BigDesign provides a <Code primary>margin</Code> prop which can be used for some of our components. Check out
a component's prop table to see if the component inherits this prop.
</Text>
</Panel>

<Panel header="Implementation" headerId="implementation">
<ContentRoutingTabs
id="implementation"
routes={[
{
id: 'basic',
title: 'Basic',
render: () => (
<Fragment key="basic">
<Text>
The following example showcases the simplest way to use the <Code primary>margin</Code> prop by
giving it a <NextLink href="/spacing">Spacing</NextLink> value.
</Text>
<CodePreview>
{/* jsx-to-string:start */}
<Button margin="medium">Example</Button>
{/* jsx-to-string:end */}
</CodePreview>
</Fragment>
),
},
{
id: 'responsive-breakpoints',
title: 'Responsive breakpoints',
render: () => (
<Fragment>
<Text>
You can also specify margins with an object to handle different margins with different{' '}
<NextLink href="/breakpoints">breakpoints</NextLink>. All values must be of{' '}
<NextLink href="/spacing">Spacing</NextLink> type.
</Text>

<CodePreview>
{/* jsx-to-string:start */}
<Button margin={{ mobile: 'none', tablet: 'medium', desktop: 'xLarge' }}>Example</Button>
{/* jsx-to-string:end */}
</CodePreview>
</Fragment>
),
},
]}
/>
</Panel>

<Panel header="Props" headerId="props">
<MarginPropTable renderPanel={false} />
</Panel>
</>
);
};
Expand Down
110 changes: 63 additions & 47 deletions packages/docs/pages/padding.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,75 @@
import { Box, H1, Panel, Text } from '@bigcommerce/big-design';
import React from 'react';
import React, { Fragment } from 'react';

import { CodePreview, NextLink, PageNavigation } from '../components';
import { Code, CodePreview, ContentRoutingTabs, NextLink } from '../components';
import { PaddingPropTable } from '../PropTables';

const PaddingPage = () => {
const items = [
{
id: 'examples',
title: 'Examples',
render: () => (
<>
<Panel>
<Text>
Some of our components expose a simple way to modify their padding. The following example showcases the
simples way to use the padding prop by giving it a <NextLink href="/spacing">Spacing</NextLink> value.
</Text>
<CodePreview>
{/* jsx-to-string:start */}
<Box padding="medium" backgroundColor="secondary20">
Example
</Box>
{/* jsx-to-string:end */}
</CodePreview>
</Panel>
<Panel header="Responsive breakpoints">
<Text>
You can also specify paddings with an object to handle different paddings with different{' '}
<NextLink href="/breakpoints">breakpoints</NextLink>. All values must be of{' '}
<NextLink href="/spacing">Spacing</NextLink> type.
</Text>

<CodePreview>
{/* jsx-to-string:start */}
<Box padding={{ mobile: 'none', tablet: 'medium', desktop: 'xLarge' }} backgroundColor="secondary20">
Example
</Box>
{/* jsx-to-string:end */}
</CodePreview>
</Panel>
</>
),
},
{
id: 'props',
title: 'Props',
render: () => <PaddingPropTable />,
},
];

return (
<>
<H1>Padding</H1>

<PageNavigation items={items} />
<Panel header="Overview" headerId="overview">
<Text>
BigDesign provides a <Code primary>padding</Code> prop which can be used for some of our components. Check out
a component's prop table to see if the component inherits this prop.
</Text>
</Panel>

<Panel header="Implementation" headerId="implementation">
<ContentRoutingTabs
id="implementation"
routes={[
{
id: 'basic',
title: 'Basic',
render: () => (
<Fragment key="basic">
<Text>
The following example showcases the simplest way to use the <Code primary>padding</Code> prop by
giving it a <NextLink href="/spacing">Spacing</NextLink> value.
</Text>
<CodePreview>
{/* jsx-to-string:start */}
<Box padding="medium" backgroundColor="secondary20">
Example
</Box>
{/* jsx-to-string:end */}
</CodePreview>
</Fragment>
),
},
{
id: 'responsive-breakpoints',
title: 'Responsive breakpoints',
render: () => (
<Fragment key="responsive-breakpoints">
<Text>
You can also specify paddings with an object to handle different paddings with different{' '}
<NextLink href="/breakpoints">breakpoints</NextLink>. All values must be of{' '}
<NextLink href="/spacing">Spacing</NextLink> type.
</Text>

<CodePreview>
{/* jsx-to-string:start */}
<Box
padding={{ mobile: 'none', tablet: 'medium', desktop: 'xLarge' }}
backgroundColor="secondary20"
>
Example
</Box>
{/* jsx-to-string:end */}
</CodePreview>
</Fragment>
),
},
]}
/>
</Panel>

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

0 comments on commit d32c2df

Please sign in to comment.