feat(Table): add table action

8base · Oct 10, 2018 · 1b6c09a · 1b6c09a
1 parent c980a77
commit 1b6c09a
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 49 deletions.
diff --git a/src/atoms/Table/Table.js b/src/atoms/Table/Table.js
@@ -7,6 +7,7 @@ import { TableBodyRow as BodyRow, theme as tableBodyRowTheme } from './TableBody
 import { TableFooter as Footer, theme as tableFooterTheme } from './TableFooter';
 import { TableHeaderCell as HeaderCell, theme as tableHeaderCellTheme } from './TableHeaderCell';
 import { TableBodyCell as BodyCell, theme as tableBodyCellTheme } from './TableBodyCell';
+import { TableAction as Action, theme as tableActionTheme } from './TableAction';
 
 const Table = {
   Plate,
@@ -16,6 +17,7 @@ const Table = {
   Footer,
   HeaderCell,
   BodyCell,
+  Action,
 };
 
 const theme = {
@@ -26,6 +28,7 @@ const theme = {
   ...tableFooterTheme,
   ...tableHeaderCellTheme,
   ...tableBodyCellTheme,
+  ...tableActionTheme,
 };
 
 export {

diff --git a/src/atoms/Table/Table.stories.js b/src/atoms/Table/Table.stories.js
@@ -215,7 +215,7 @@ const TABLE_DATA = [{
 }];
 
 export default (asStory) => {
-  asStory('ATOMS/Table', module, (story, { Table, Link, Dropdown, Button, Icon, Menu, Loader }) => {
+  asStory('ATOMS/Table', module, (story, { Table, Link, Dropdown, Icon, Menu, Loader }) => {
     story
       .add('table with scroll', () => (
         <div style={{ display: 'flex', height: '600px' }}>
@@ -265,10 +265,8 @@ export default (asStory) => {
                   )),
                 )
               }
+              <Table.Action onClick={ () => alert('Create') }>Create Client</Table.Action>
             </Table.Body>
-            <Table.Footer justifyContent="center">
-              <Button onClick={ () => alert('Create') }>Create Client</Button>
-            </Table.Footer>
           </Table.Plate>
         </div>
       ))
@@ -286,10 +284,8 @@ export default (asStory) => {
 
             <Table.Body>
               <Loader stretch />
+              <Table.Action onClick={ () => alert('Create') }>Create Client</Table.Action>
             </Table.Body>
-            <Table.Footer justifyContent="center">
-              <Button onClick={ () => alert('Create') }>Create Client</Button>
-            </Table.Footer>
           </Table.Plate>
         </div>
       ));

diff --git a/src/atoms/Table/TableAction.js b/src/atoms/Table/TableAction.js
@@ -0,0 +1,31 @@
+// @flow
+import React from 'react';
+
+import { Button, type ButtonProps } from '../Button';
+import { createStyledTag, createTheme } from '../../utils';
+
+type TableActionProps = ButtonProps;
+
+const name = 'tableAction';
+
+const theme = createTheme(name, {
+  modifiers: {
+  },
+  defaults: {
+  },
+});
+
+const TableActionTag = createStyledTag(name, () => ({
+  position: 'sticky',
+  display: 'flex',
+  justifyContent: 'center',
+  bottom: '2rem',
+  marginTop: '2rem',
+  marginBottom: '2rem',
+}));
+
+function TableAction(props: TableActionProps) {
+  return <TableActionTag tagName="div"><Button { ...props } /></TableActionTag>;
+}
+
+export { TableAction, theme };
diff --git a/src/atoms/Table/TableBody.js b/src/atoms/Table/TableBody.js
@@ -20,6 +20,8 @@ const theme = createTheme(name, {
 const TableBodyTag = createStyledTag(name, (props: *) => ({
   display: 'grid',
   overflowY: 'auto',
+  position: 'relative',
+  gridAutoRows: 'min-content',
   borderBottom: `1px solid ${props.theme.COLORS.LIGHT_GRAY1}`,
 }));
 

diff --git a/storybook/__tests__/__snapshots__/storyshots.test.js.snap b/storybook/__tests__/__snapshots__/storyshots.test.js.snap
@@ -15069,7 +15069,7 @@ exports[`Storyshots ATOMS/Table table with loader 1`] = `
   margin: 2rem;
 }
 
-.emotion-10 {
+.emotion-9 {
   outline: none;
   text-align: center;
   -webkit-text-decoration: none;
@@ -15106,11 +15106,11 @@ exports[`Storyshots ATOMS/Table table with loader 1`] = `
   padding: 0 4rem;
 }
 
-.emotion-10:hover {
+.emotion-9:hover {
   box-shadow: 0 1px 3px 0 rgba(50,50,93,.14),0 4px 6px 0 rgba(112,157,199,.08);
 }
 
-.emotion-10 > *:not(:last-child) {
+.emotion-9 > *:not(:last-child) {
   margin-right: .5rem;
 }
 
@@ -15174,28 +15174,29 @@ exports[`Storyshots ATOMS/Table table with loader 1`] = `
   font-weight: 700;
 }
 
-.emotion-9 {
+.emotion-11 {
   display: grid;
   display: grid;
   overflow-y: auto;
+  position: relative;
+  grid-auto-rows: min-content;
   border-bottom: 1px solid #d0d7dd;
 }
 
-.emotion-11 {
+.emotion-10 {
+  position: -webkit-sticky;
+  position: sticky;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  position: relative;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  display: grid;
-  padding: 2rem;
+  bottom: 2rem;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
 }
 
 <div
@@ -15246,7 +15247,7 @@ exports[`Storyshots ATOMS/Table table with loader 1`] = `
         />
       </div>
       <div
-        className="emotion-9"
+        className="emotion-11"
       >
         <div
           className="emotion-8"
@@ -15320,17 +15321,17 @@ exports[`Storyshots ATOMS/Table table with loader 1`] = `
             </g>
           </svg>
         </div>
-      </div>
-      <div
-        className="emotion-11"
-      >
-        <button
+        <div
           className="emotion-10"
-          onClick={[Function]}
-          type={undefined}
         >
-          Create Client
-        </button>
+          <button
+            className="emotion-9"
+            onClick={[Function]}
+            type={undefined}
+          >
+            Create Client
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -15358,7 +15359,7 @@ exports[`Storyshots ATOMS/Table table with scroll 1`] = `
   text-decoration: underline;
 }
 
-.emotion-368 {
+.emotion-367 {
   outline: none;
   text-align: center;
   -webkit-text-decoration: none;
@@ -15395,11 +15396,11 @@ exports[`Storyshots ATOMS/Table table with scroll 1`] = `
   padding: 0 4rem;
 }
 
-.emotion-368:hover {
+.emotion-367:hover {
   box-shadow: 0 1px 3px 0 rgba(50,50,93,.14),0 4px 6px 0 rgba(112,157,199,.08);
 }
 
-.emotion-368 > *:not(:last-child) {
+.emotion-367 > *:not(:last-child) {
   margin-right: .5rem;
 }
 
@@ -15471,10 +15472,12 @@ exports[`Storyshots ATOMS/Table table with scroll 1`] = `
   font-weight: 700;
 }
 
-.emotion-367 {
+.emotion-369 {
   display: grid;
   display: grid;
   overflow-y: auto;
+  position: relative;
+  grid-auto-rows: min-content;
   border-bottom: 1px solid #d0d7dd;
 }
 
@@ -15503,21 +15506,20 @@ exports[`Storyshots ATOMS/Table table with scroll 1`] = `
   word-break: break-all;
 }
 
-.emotion-369 {
+.emotion-368 {
+  position: -webkit-sticky;
+  position: sticky;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  position: relative;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  display: grid;
-  padding: 2rem;
+  bottom: 2rem;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
 }
 
 <div
@@ -15568,7 +15570,7 @@ exports[`Storyshots ATOMS/Table table with scroll 1`] = `
         />
       </div>
       <div
-        className="emotion-367"
+        className="emotion-369"
       >
         <div
           className="emotion-18"
@@ -17520,17 +17522,17 @@ exports[`Storyshots ATOMS/Table table with scroll 1`] = `
             </div>
           </div>
         </div>
-      </div>
-      <div
-        className="emotion-369"
-      >
-        <button
+        <div
           className="emotion-368"
-          onClick={[Function]}
-          type={undefined}
         >
-          Create Client
-        </button>
+          <button
+            className="emotion-367"
+            onClick={[Function]}
+            type={undefined}
+          >
+            Create Client
+          </button>
+        </div>
       </div>
     </div>
   </div>