-
Notifications
You must be signed in to change notification settings - Fork 64
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(docs): panel documentation (#137)
* feat(docs): panel documentation * Update packages/docs/pages/Panel/PanelPage.tsx Co-Authored-By: Daniel Almaguer <danielalmaguer@gmail.com>
- Loading branch information
1 parent
ee75768
commit f748544
Showing
6 changed files
with
87 additions
and
54 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import { Text } from '@bigcommerce/big-design'; | ||
import React from 'react'; | ||
|
||
import { Code } from '../components'; | ||
|
||
export const PanelPropTable: React.FC = () => ( | ||
<Text> | ||
A <Code>Panel</Code> can use all <Code>Box</Code> props, besides <Code primary>backgroundColor</Code>,{' '} | ||
<Code primary>shadow</Code>, and any <Code primary>padding</Code> props. Otherwise, supports all native{' '} | ||
<Code><div /></Code> element attributes. | ||
</Text> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,54 +1,61 @@ | ||
import { Box, Button, Flex, H2, Panel, Text } from '@bigcommerce/big-design'; | ||
import { Button, Flex, H0, H1, H2, Link, Panel, Text } from '@bigcommerce/big-design'; | ||
import React from 'react'; | ||
|
||
import { CodePreview, Collapsible } from '../../components'; | ||
import { BoxPropTable, MarginPropTable, PanelPropTable } from '../../PropTables'; | ||
|
||
export default () => ( | ||
<Box marginVertical="xxxLarge" marginHorizontal={{ tablet: 'xxxLarge' }}> | ||
<Panel> | ||
<Flex justifyContent="space-between"> | ||
<H2>Panel header - h2</H2> | ||
<Button variant="secondary">Button</Button> | ||
</Flex> | ||
<Text>Text -p</Text> | ||
</Panel> | ||
|
||
<Panel> | ||
<H2>Panel header - h2</H2> | ||
<Text>Text -p</Text> | ||
</Panel> | ||
|
||
<Panel> | ||
<Flex justifyContent="space-between"> | ||
<H2>Panel header - h2</H2> | ||
<Button variant="secondary">Button</Button> | ||
</Flex> | ||
<Text> | ||
Occaecat eiusmod elit laboris pariatur aute esse dolore nostrud ipsum laboris qui. Reprehenderit exercitation | ||
nisi consectetur deserunt tempor fugiat sunt eiusmod consectetur nisi magna. Consequat aute magna aliquip | ||
deserunt in magna labore cillum nisi aliquip sit irure anim exercitation. | ||
</Text> | ||
<Text> | ||
Eu occaecat mollit laborum pariatur pariatur excepteur. Voluptate eiusmod ea sit ad deserunt dolore consectetur | ||
nulla veniam in est aliquip anim adipisicing. Aute sit est mollit commodo qui et anim eu officia proident et. | ||
Deserunt ipsum et cupidatat magna consectetur aute ad fugiat enim fugiat. Nisi nisi labore anim occaecat non | ||
aliqua dolor sit nostrud. Do nulla enim proident proident. Fugiat consectetur culpa exercitation veniam culpa | ||
Lorem irure. | ||
</Text> | ||
</Panel> | ||
|
||
<Panel marginBottom="none"> | ||
<H2>Panel header - h2</H2> | ||
<Text> | ||
Occaecat eiusmod elit laboris pariatur aute esse dolore nostrud ipsum laboris qui. Reprehenderit exercitation | ||
nisi consectetur deserunt tempor fugiat sunt eiusmod consectetur nisi magna. Consequat aute magna aliquip | ||
deserunt in magna labore cillum nisi aliquip sit irure anim exercitation. | ||
</Text> | ||
<Text> | ||
Eu occaecat mollit laborum pariatur pariatur excepteur. Voluptate eiusmod ea sit ad deserunt dolore consectetur | ||
nulla veniam in est aliquip anim adipisicing. Aute sit est mollit commodo qui et anim eu officia proident et. | ||
Deserunt ipsum et cupidatat magna consectetur aute ad fugiat enim fugiat. Nisi nisi labore anim occaecat non | ||
aliqua dolor sit nostrud. Do nulla enim proident proident. Fugiat consectetur culpa exercitation veniam culpa | ||
Lorem irure. | ||
</Text> | ||
</Panel> | ||
</Box> | ||
<> | ||
<H0>Panels</H0> | ||
|
||
<Text> | ||
The panel component is used to contain content in a structured format.{' '} | ||
<Link href="https://design.bigcommerce.com/components/panels">Panel Design Guidlines</Link> | ||
</Text> | ||
|
||
<CodePreview> | ||
{/* jsx-to-string:start */} | ||
<Panel> | ||
<Flex justifyContent="space-between" flexDirection="row"> | ||
<Flex.Item> | ||
<H2>Panel header</H2> | ||
</Flex.Item> | ||
<Flex.Item> | ||
<Button variant="secondary">Button</Button> | ||
</Flex.Item> | ||
</Flex> | ||
<Text> | ||
Lorem ipsum dolor amet officia humblebrag selvage, subway tile vexillologist id pickled adaptogen fashion axe. | ||
Ennui meh pitchfork banh mi. Keffiyeh PBRB echo park gastropub. Pop-up neutra brunch ullamco affogato shaman | ||
vexillologist quinoa post-ironic locavore. Retro selfies proident synth ethical quinoa marfa chartreuse dolor | ||
vexillologist gochujang. Tempor poke unicorn, readymade crucifix fugiat culpa. Kinfolk hella asymmetrical, | ||
meggings et consectetur lomo farm-to-table exercitation DIY. | ||
</Text> | ||
<Text> | ||
Leggings consectetur heirloom, sustainable 90's scenester sartorial sint meditation portland health goth | ||
bespoke gastropub authentic. Flannel iceland narwhal, laborum adaptogen paleo glossier reprehenderit. Ethical | ||
ugh copper mug voluptate brooklyn velit 3 wolf moon tacos. Bushwick vexillologist air plant, veniam jianbing | ||
poke semiotics wayfarers. Typewriter single-origin coffee cray, thundercats asymmetrical succulents green | ||
juice irure cred taxidermy celiac. | ||
</Text> | ||
</Panel> | ||
{/* jsx-to-string:end */} | ||
</CodePreview> | ||
|
||
<H1>API</H1> | ||
|
||
<H2>Panel</H2> | ||
|
||
<PanelPropTable /> | ||
|
||
<H2>Inherited Props</H2> | ||
|
||
<Collapsible title="Box Props"> | ||
<BoxPropTable /> | ||
</Collapsible> | ||
|
||
<Collapsible title="Margin Props"> | ||
<MarginPropTable /> | ||
</Collapsible> | ||
</> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters