feat(docs): panel documentation (#137)

* feat(docs): panel documentation * Update packages/docs/pages/Panel/PanelPage.tsx Co-Authored-By: Daniel Almaguer <danielalmaguer@gmail.com>
bigcommerce · Aug 8, 2019 · f748544 · f748544
1 parent ee75768
commit f748544
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 54 deletions.
diff --git a/packages/docs/PropTables/PanelPropTable.tsx b/packages/docs/PropTables/PanelPropTable.tsx
@@ -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>&lt;div /&gt;</Code> element attributes.
+  </Text>
+);
diff --git a/packages/docs/PropTables/index.ts b/packages/docs/PropTables/index.ts
@@ -11,6 +11,7 @@ export * from './InputPropTable';
 export * from './MarginPropTable';
 export * from './ModalPropTable';
 export * from './PaddingPropTable';
+export * from './PanelPropTable';
 export * from './RadioPropTable';
 export * from './SelectPropTable';
 export * from './TabsPropTable';

diff --git a/packages/docs/components/Collapsible/index.tsx b/packages/docs/components/Collapsible/index.tsx
@@ -12,14 +12,26 @@ export const Collapsible: React.FC<CollapsibleProps> = ({ children, title }) =>
   const [isCollapsed, setCollapsed] = useState(true);
   const toggleIsCollapsed = () => setCollapsed(!isCollapsed);
 
+  const handleKeyPressed = e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      toggleIsCollapsed();
+    }
+  };
+
   return (
-    <>
-      <StyledFlex marginBottom="xLarge" alignItems="center" onClick={toggleIsCollapsed}>
+    <div>
+      <StyledFlex
+        marginBottom="xLarge"
+        alignItems="center"
+        onClick={toggleIsCollapsed}
+        onKeyPress={handleKeyPressed}
+        tabIndex={0}
+      >
         {isCollapsed ? <ChevronRightIcon title="Expand" /> : <ExpandMoreIcon title="Collapse" />}
         <Text>{title}</Text>
       </StyledFlex>
 
       {!isCollapsed && children}
-    </>
+    </div>
   );
 };
diff --git a/packages/docs/components/Collapsible/styled.tsx b/packages/docs/components/Collapsible/styled.tsx
@@ -3,4 +3,5 @@ import styled from 'styled-components';
 
 export const StyledFlex = styled(Flex)`
   cursor: pointer;
+  display: inline-flex;
 `;
diff --git a/packages/docs/pages/Panel/PanelPage.tsx b/packages/docs/pages/Panel/PanelPage.tsx
@@ -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>
+  </>
 );
diff --git a/packages/docs/pages/_app.tsx b/packages/docs/pages/_app.tsx
@@ -47,7 +47,7 @@ export default class MyApp extends App {
                 gridArea="main"
                 marginVertical="medium"
                 marginHorizontal="xxLarge"
-                style={{ maxWidth: '100%', overflow: 'hidden' }}
+                style={{ maxWidth: '100%' }}
               >
                 <StoryWrapper>
                   <Component {...pageProps} />