Skip to content
This repository was archived by the owner on Feb 27, 2024. It is now read-only.

Commit eebbd0d

Browse files
dcooneydcooney
committed
Adding Table component, block and storybook
1 parent c16856a commit eebbd0d

File tree

8 files changed

+316
-1
lines changed

8 files changed

+316
-1
lines changed

‎components/atoms/Table/Table.js

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import RichText from '@/components/atoms/RichText'
2+
import cn from 'classnames'
3+
import PropTypes from 'prop-types'
4+
import styles from './Table.module.css'
5+
6+
/**
7+
* Table Block
8+
*
9+
* @author WebDevStudios
10+
* @param {string} id Optional anchor/id.
11+
* @param {string} head The optional table head array.
12+
* @param {string} body The table body array.
13+
* @param {string} body The table body array.
14+
* @param {string} foot The optional table foorter array.
15+
* @param {string} caption Optional table caption.
16+
* @param {string} className Optional classnames.
17+
* @return {Element} The Table component.
18+
*/
19+
export default function Table({id, head, body, foot, caption, className}) {
20+
return (
21+
<>
22+
{!!body.length && (
23+
<div className={cn(styles.table, className)} id={id || null}>
24+
<table>
25+
{!!head?.length && (
26+
<thead>
27+
{head.map((row, index) => {
28+
return (
29+
<tr key={index}>
30+
{!!row?.cells &&
31+
row.cells.map((cell, index) => {
32+
return (
33+
<RichText
34+
tag="th"
35+
key={index}
36+
className={
37+
cell.align !== ''
38+
? `text-${cell.align}`
39+
: 'text-left'
40+
}
41+
>
42+
{cell.content}
43+
</RichText>
44+
)
45+
})}
46+
</tr>
47+
)
48+
})}
49+
</thead>
50+
)}
51+
<tbody>
52+
{body.map((row, index) => {
53+
return (
54+
<tr key={index}>
55+
{!!row?.cells &&
56+
row.cells.map((cell, index) => {
57+
return (
58+
<RichText
59+
tag="td"
60+
key={index}
61+
className={
62+
cell.align !== ''
63+
? `text-${cell.align}`
64+
: 'text-left'
65+
}
66+
>
67+
{cell.content}
68+
</RichText>
69+
)
70+
})}
71+
</tr>
72+
)
73+
})}
74+
</tbody>
75+
76+
{!!foot?.length && (
77+
<tfoot>
78+
{foot.map((row, index) => {
79+
return (
80+
<tr key={index}>
81+
{!!row?.cells &&
82+
row.cells.map((cell, index) => {
83+
return (
84+
<RichText
85+
tag="td"
86+
key={index}
87+
className={
88+
cell.align !== ''
89+
? `text-${cell.align}`
90+
: 'text-left'
91+
}
92+
>
93+
{cell.content}
94+
</RichText>
95+
)
96+
})}
97+
</tr>
98+
)
99+
})}
100+
</tfoot>
101+
)}
102+
</table>
103+
{!!caption && <RichText tag="p">{caption}</RichText>}
104+
</div>
105+
)}
106+
</>
107+
)
108+
}
109+
110+
Table.propTypes = {
111+
id: PropTypes.string,
112+
head: PropTypes.array,
113+
body: PropTypes.array,
114+
foot: PropTypes.array,
115+
caption: PropTypes.string,
116+
className: PropTypes.string
117+
}

‎components/atoms/Table/Table.module.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
.table {
2+
& table {
3+
@apply w-full border-collapse mb-20;
4+
5+
& td,
6+
& th {
7+
@apply p-12 font-primary text-root-em;
8+
}
9+
10+
& thead {
11+
& tr {
12+
@apply border-b border-tertiary-light;
13+
}
14+
15+
& th {
16+
@apply uppercase;
17+
}
18+
}
19+
20+
& tbody {
21+
& tr:nth-child(odd) {
22+
@apply bg-tertiary-lightest;
23+
}
24+
}
25+
26+
& tfoot {
27+
& tr {
28+
@apply border-t border-tertiary-light;
29+
}
30+
31+
& td {
32+
@apply font-primary text-xs;
33+
}
34+
}
35+
}
36+
37+
& p {
38+
@apply mb-20 text-center font-primary text-sm;
39+
}
40+
}

‎components/atoms/Table/Table.stories.mdx

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks'
2+
3+
import Table from '.'
4+
5+
export const head = [
6+
{
7+
cells: [
8+
{
9+
content: 'Table Head 1',
10+
tag: 'th'
11+
},
12+
{
13+
content: 'Table Head 2',
14+
tag: 'th'
15+
},
16+
{
17+
content: 'Table Head 3',
18+
tag: 'th'
19+
}
20+
]
21+
}
22+
]
23+
24+
export const body = [
25+
{
26+
cells: [
27+
{
28+
content: 'Integer venenatis dapibus posuere velit aliquet.',
29+
tag: 'td'
30+
},
31+
{
32+
content: 'Donec ullmetus auctor fringilla.',
33+
tag: 'td'
34+
},
35+
{
36+
content: 'Integer venenatis dapibus posuere velit aliquet.',
37+
tag: 'td'
38+
}
39+
]
40+
},
41+
{
42+
cells: [
43+
{
44+
content: 'Integer venenatis dapibus posuere velit aliquet.',
45+
tag: 'td'
46+
},
47+
{
48+
content: 'Donec ullmetus auctor fringilla.',
49+
tag: 'td'
50+
},
51+
{
52+
content: 'Integer venenatis dapibus posuere velit aliquet.',
53+
tag: 'td'
54+
}
55+
]
56+
},
57+
{
58+
cells: [
59+
{
60+
content: 'Integer venenatis dapibus posuere velit aliquet.',
61+
tag: 'td'
62+
},
63+
{
64+
content: 'Donec ullmetus auctor fringilla.',
65+
tag: 'td'
66+
},
67+
{
68+
content: 'Integer venenatis dapibus posuere velit aliquet.',
69+
tag: 'td'
70+
}
71+
]
72+
}
73+
]
74+
75+
export const foot = [
76+
{
77+
cells: [
78+
{
79+
content: 'Table Foot 1',
80+
tag: 'td'
81+
},
82+
{
83+
content: 'Table Foot 2',
84+
tag: 'td'
85+
},
86+
{
87+
content: 'Table Foot 3',
88+
tag: 'td'
89+
}
90+
]
91+
}
92+
]
93+
94+
<Meta title="Components/Atoms/Table" component={Table} />
95+
96+
# Table
97+
98+
Use this to display a Table.
99+
100+
<Canvas>
101+
<Story name="Component">
102+
<Table
103+
head={head}
104+
body={body}
105+
foot={foot}
106+
caption="This is a table caption"
107+
/>
108+
</Story>
109+
</Canvas>

‎components/atoms/Table/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export {default} from './Table'

‎components/blocks/BlockTable/BlockTable.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import Table from '@/components/atoms/Table'
2+
import PropTypes from 'prop-types'
3+
4+
/**
5+
* Paragraph Block
6+
*
7+
* The core Paragraph block from Gutenberg.
8+
*
9+
* @author WebDevStudios
10+
* @param {string} className Optional classnames.
11+
* @param {string} align Optional alignment style.
12+
* @param {string} anchor Optional anchor/id.
13+
* @param {string} content The content of the block.
14+
* @return {Element} The RichText component.
15+
*/
16+
export default function BlockTable({
17+
anchor,
18+
head,
19+
body,
20+
foot,
21+
caption,
22+
className
23+
}) {
24+
return (
25+
<Table
26+
id={anchor}
27+
className={className}
28+
tag="p"
29+
head={head}
30+
body={body}
31+
foot={foot}
32+
caption={caption}
33+
/>
34+
)
35+
}
36+
37+
BlockTable.propTypes = {
38+
anchor: PropTypes.string,
39+
className: PropTypes.string,
40+
head: PropTypes.array,
41+
body: PropTypes.array,
42+
foot: PropTypes.array,
43+
caption: PropTypes.string
44+
}

‎components/blocks/BlockTable/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export {default} from './BlockTable'

‎components/blocks/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,4 @@ export {default as BlockSeparator} from './BlockSeparator'
1212
export {default as BlockShortcode} from './BlockShortcode'
1313
export {default as BlockSpacer} from './BlockSpacer'
1414
export {default as BlockVideoEmbed} from './BlockVideoEmbed'
15+
export {default as BlockTable} from './BlockTable'

‎functions/displayBlock.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types'
77
* @author WebDevStudios
88
* @param {object} block The block data.
99
* @param {number} index A unique key required by React.
10-
* @return {Element} A block-based component.
10+
* @return {Element} A block-based component.
1111
*/
1212
export default function displayBlock(block, index) {
1313
const {attributes, name} = block
@@ -30,6 +30,8 @@ export default function displayBlock(block, index) {
3030
// return <Blocks.BlockImage {...attributes} key={index} />
3131
// case 'core/image-gallery':
3232
// return <Blocks.BlockImageGallery {...attributes} key={index} />
33+
case 'core/table':
34+
return <Blocks.BlockTable {...attributes} key={index} />
3335
case 'core/list':
3436
return <Blocks.BlockList {...attributes} key={index} />
3537
case 'core/paragraph':

0 commit comments

Comments
 (0)