From 822eea94d29650b01ce28017600ab440f17c0c7c Mon Sep 17 00:00:00 2001 From: Benji <64439681+benjitrosch@users.noreply.github.com> Date: Fri, 15 Apr 2022 13:14:23 -0400 Subject: [PATCH] chore(Table): added footer and stories (#91) --- src/Table/Table.stories.tsx | 267 +++++++++++++++++++++++++++++++++++- src/Table/Table.tsx | 2 + src/Table/TableFooter.tsx | 25 ++++ 3 files changed, 293 insertions(+), 1 deletion(-) create mode 100644 src/Table/TableFooter.tsx diff --git a/src/Table/Table.stories.tsx b/src/Table/Table.stories.tsx index 89066870..9f22828a 100644 --- a/src/Table/Table.stories.tsx +++ b/src/Table/Table.stories.tsx @@ -2,13 +2,18 @@ import React from 'react' import { Story, Meta } from '@storybook/react' import Table, { TableProps } from '.' +import Checkbox from '../Checkbox' +import Avatar from '../Avatar' +import Mask from '../Mask' +import Badge from '../Badge' +import Button from '../Button' export default { title: 'Data Display/Table', component: Table, } as Meta -export const Default: Story = (args) => { +const Template: Story = (args) => { return ( @@ -44,4 +49,264 @@ export const Default: Story = (args) => { ) } +export const Default = Template.bind({}) Default.args = {} + +export const Zebra = Template.bind({}) +Zebra.args = { + zebra: true +} + +export const Hover: Story = (args) => { + return ( +
+ + + Name + Job + Favorite Color + + + + + 1 + Cy Ganderton + Quality Control Specialist + Blue + + + + 2 + Hart Hagerty + Desktop Support Technician + Purple + + + + 3 + Brice Swyre + Tax Accountant + Red + + +
+ ) +} +Hover.args = {} + +export const WithVisualElements: Story = (args) => { + return ( + + + + Name + Job + Favorite Color + + + + + +
+ +
+
Hart Hagerty
+
United States
+
+
+
+ Zemlak, Daniel and Leannon +
+ Desktop Support Technician +
+
Purple
+ + + + + +
+ +
+
Brice Swyre
+
China
+
+
+
+ Carrol Group +
+ Tax Accountant +
+
Red
+ + + + + +
+ +
+
Marjy Ferencz
+
Russia
+
+
+
+ Rowe-Schoen +
+ Office Assistant I +
+
Crimson
+ + + + + +
+ +
+
Yancy Tear
+
Brazil
+
+
+
+ Wyman-Ledner +
+ Community Outreach Specialist +
+
Indigo
+ + + + + +   + Name + Job + Favorite Color +   + +
+ ) +} +WithVisualElements.args = {} + +export const Compact: Story = (args) => { + return ( + + + + Name + Job + Company + Location + Last Login + Favorite Color + + + + + 1 + Cy Ganderton + Quality Control Specialist + Littel, Schaden and Vandervort + Canada + 12/16/2020 + Blue + + + + 2 + Hart Hagerty + Desktop Support Technician + Zemlak, Daniel and Leannon + United States + 12/5/2020 + Purple + + + + 3 + Brice Swyre + Tax Accountant + Carroll Group + China + 8/15/2020 + Red + + + + 4 + Marjy Ferencz + Office Assistant I + Rowe-Schoen + Russia + 3/25/2021 + Crimson + + + + 5 + Yancy Tear + Community Outreach Specialist + Wyman-Ledner + Brazil + 5/22/2020 + Indigo + + + + 6 + Irma Vasilik + Editor + Wiza, Bins and Emard + Venezuela + 12/8/2020 + Purple + + + + 7 + Meghann Durtnal + Staff Accountant IV + Schuster-Schimmel + Philippines + 2/17/2021 + Yellow + + + + 8 + Sammy Seston + Accountant I + O'Hara, Welch and Keebler + Indonesia + 5/23/2020 + Crimson + + + + 9 + Lesya Tinham + Safety Technician IV + Turner-Kuhlman + Philippines + 2/21/2021 + Maroon + + + + 10 + Zaneta Tewkesbury + VP Marketing + Sauer LLC + Chad + 6/23/2020 + Green + + +
+ ) +} +Compact.args = { + compact: true +} diff --git a/src/Table/Table.tsx b/src/Table/Table.tsx index c24044e6..e25b2df7 100644 --- a/src/Table/Table.tsx +++ b/src/Table/Table.tsx @@ -7,6 +7,7 @@ import { IComponentBaseProps } from '../types' import TableHead from './TableHead' import TableBody from './TableBody' import TableRow from './TableRow' +import TableFooter from './TableFooter' export type TableProps = React.TableHTMLAttributes & IComponentBaseProps & { @@ -40,4 +41,5 @@ export default Object.assign(Table, { Head: TableHead, Body: TableBody, Row: TableRow, + Footer: TableFooter, }) diff --git a/src/Table/TableFooter.tsx b/src/Table/TableFooter.tsx new file mode 100644 index 00000000..0067b6b4 --- /dev/null +++ b/src/Table/TableFooter.tsx @@ -0,0 +1,25 @@ +import React, { ReactElement } from 'react' + +import { IComponentBaseProps } from '../types' + +export type TableFooterProps = React.TableHTMLAttributes & + IComponentBaseProps & { + children?: ReactElement[] + } + + const TableFooter = React.forwardRef( + ({ children, ...props }, ref): JSX.Element => { + + return ( + + + {children?.map((child) => { + return {child} + })} + + + ) + } + ) + +export default TableFooter