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

Commit a57f7fb

Browse files
author
Greg Rickaby
authored
Merge pull request #156 from WebDevStudios/feature/component-handling
Feature/component handling
2 parents 444f9dd + 7ecd806 commit a57f7fb

File tree

13 files changed

+227
-32
lines changed

13 files changed

+227
-32
lines changed

‎components/atoms/Columns/Columns.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import cn from 'classnames'
2+
import PropTypes from 'prop-types'
3+
import React from 'react'
4+
import styles from './Columns.module.css'
5+
6+
/**
7+
* Render the Columns component.
8+
*
9+
* @param {object} props Container component props.
10+
* @param {string} props.id Optional ID/Anchor.
11+
* @param {string} props.className Optional className.
12+
* @param {string} props.columnCount Total number of columns.
13+
* @param {object} props.children React children.
14+
* @return {Element} The Columns component.
15+
*/
16+
export default function Columns({id, className, columnCount, children}) {
17+
return (
18+
<div
19+
id={id || null}
20+
className={cn(
21+
styles.columns,
22+
columnCount && styles[`columns-${columnCount}`],
23+
className
24+
)}
25+
>
26+
{children && children}
27+
</div>
28+
)
29+
}
30+
31+
Columns.propTypes = {
32+
id: PropTypes.string,
33+
className: PropTypes.string,
34+
columnCount: PropTypes.number,
35+
children: PropTypes.node
36+
}
37+
Columns.defaultProps = {
38+
columnCount: 3
39+
}

‎components/atoms/Columns/Columns.module.css

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.columns {
2+
@apply grid gap-16 grid-cols-3;
3+
4+
&.columns-1 {
5+
@apply grid-cols-1;
6+
}
7+
8+
&.columns-2 {
9+
@apply grid-cols-2;
10+
}
11+
12+
&.columns-3 {
13+
@apply grid-cols-3;
14+
}
15+
16+
&.columns-4 {
17+
@apply grid-cols-4;
18+
}
19+
20+
&.columns-5 {
21+
@apply grid-cols-5;
22+
}
23+
24+
&.columns-6 {
25+
@apply grid-cols-6;
26+
}
27+
}

‎components/atoms/Columns/index.js

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

‎components/blocks/BlockButtons/BlockButtons.js

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,15 @@ import PropTypes from 'prop-types'
88
* The core Buttons block from Gutenberg.
99
*
1010
* @author WebDevStudios
11-
* @param {object} props The component prope
12-
* @param {object} props.options Option props object.
13-
* @param {string} props.options.anchor The anchor/id of the block.
14-
* @param {string} props.options.orientation The orientation of buttons.
15-
* @param {string} props.options.contentJustification The justification of the buttons.
16-
* @param {Array} props.innerBlocks The array of inner blocks to display.
17-
* @return {Element} The Buttons component.
11+
* @param {object} props The component properties.
12+
* @param props.options
13+
* @param {object} options Option props object.
14+
* @param {string} options.anchor The anchor/id of the block.
15+
* @param {string} options.orientation The orientation of buttons.
16+
* @param {string} options.contentJustification The justification of the buttons.
17+
* @param props.innerBlocks
18+
* @param {Array} innerBlocks The array of inner blocks to display.
19+
* @return {Element} The Buttons component.
1820
*/
1921
export default function BlockButtons({options, innerBlocks}) {
2022
return (

‎components/blocks/BlockColumns/BlockColumns.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import Columns from '@/components/atoms/Columns'
2+
import Blocks from '@/components/molecules/Blocks'
3+
import PropTypes from 'prop-types'
4+
5+
/**
6+
* Columns Block
7+
*
8+
* The core Columns block from Gutenberg.
9+
*
10+
* @author WebDevStudios
11+
* @param {object} props The component properties.
12+
* @param {string} options.anchor The optional anchor/id of the block.
13+
* @param {string} options.className The optional classname.
14+
* @param {Array} innerBlocks The array of inner blocks to display.
15+
* @return {Element} The Columns component.
16+
*/
17+
export default function BlockColumns({options, innerBlocks}) {
18+
return (
19+
<>
20+
{!!innerBlocks?.length && (
21+
<Columns
22+
id={options?.anchor}
23+
className={options?.className}
24+
columnCount={innerBlocks?.length}
25+
>
26+
{innerBlocks.map((block, index) => {
27+
return (
28+
<div key={`column-${index}`}>
29+
{!!block?.innerBlocks?.length && (
30+
<Blocks blocks={block.innerBlocks} />
31+
)}
32+
</div>
33+
)
34+
})}
35+
</Columns>
36+
)}
37+
</>
38+
)
39+
}
40+
41+
BlockColumns.propTypes = {
42+
options: PropTypes.shape({
43+
anchor: PropTypes.string,
44+
className: PropTypes.string
45+
}),
46+
innerBlocks: PropTypes.arrayOf(
47+
PropTypes.shape({
48+
name: PropTypes.string,
49+
attributes: PropTypes.object
50+
})
51+
)
52+
}

‎components/blocks/BlockColumns/index.js

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

‎components/blocks/BlockCover/BlockCover.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import Blocks from '@/components/molecules/Blocks'
2+
import Hero from '@/components/organisms/Hero'
3+
import PropTypes from 'prop-types'
4+
5+
/**
6+
* Cover Block
7+
*
8+
* The core Columns block from Gutenberg.
9+
*
10+
* @author WebDevStudios
11+
* @param {object} props The component properties.
12+
* @param {string} media.anchor The optional anchor/id of the block.
13+
* @param {string} media.url The background image URL.
14+
* @param {Array} innerBlocks The array of inner blocks to display.
15+
* @return {Element} The Cover component.
16+
*/
17+
export default function BlockCover({media, innerBlocks}) {
18+
return (
19+
<>
20+
{!!media?.url && (
21+
<Hero backgroundImage={media.url} id={media?.anchor}>
22+
{!!innerBlocks?.length && <Blocks blocks={innerBlocks} />}
23+
</Hero>
24+
)}
25+
</>
26+
)
27+
}
28+
29+
BlockCover.propTypes = {
30+
media: PropTypes.shape({
31+
anchor: PropTypes.string,
32+
url: PropTypes.string
33+
}),
34+
innerBlocks: PropTypes.arrayOf(
35+
PropTypes.shape({
36+
name: PropTypes.string,
37+
attributes: PropTypes.object
38+
})
39+
)
40+
}

‎components/blocks/BlockCover/index.js

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

‎components/blocks/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,5 @@ export {default as BlockCode} from './BlockCode'
1717
export {default as BlockMediaText} from './BlockMediaText'
1818
export {default as BlockButton} from './BlockButton'
1919
export {default as BlockButtons} from './BlockButtons'
20+
export {default as BlockColumns} from './BlockColumns'
21+
export {default as BlockCover} from './BlockCover'

‎components/organisms/Hero/Hero.js

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,36 +9,53 @@ import styles from './Hero.module.css'
99
*
1010
* @param {object} props Hero component props.
1111
* @param {string} props.backgroundImage The background image url.
12+
* @param {string} props.id Optional ID for component.
1213
* @param {string} props.body Text for the body.
1314
* @param {object} props.cta Object with text and url props for the CTA button.
1415
* @param {string} props.subtitle Text for the subtitle.
1516
* @param {string} props.title Text for the title.
17+
* @param {object} props.children React children.
1618
* @return {Element} The Hero component.
1719
*/
18-
export default function Hero({backgroundImage, body, cta, subtitle, title}) {
20+
export default function Hero({
21+
backgroundImage,
22+
id,
23+
body,
24+
cta,
25+
subtitle,
26+
title,
27+
children
28+
}) {
1929
return (
2030
<section
31+
id={id || null}
2132
className={styles.hero}
2233
style={{
2334
// These css custom properties are used inside the css module file to set the card's background image, tint overlay, and fallback bg color.
2435
'--image-url': `url(${backgroundImage})`,
25-
'--image-tint-color': `${tailwindConfig.theme.colors.black}50`,
36+
'--image-tint-color': `${tailwindConfig.theme.colors.black.DEFAULT}50`,
2637
'--image-fallback-color': `${tailwindConfig.theme.colors.grey['darkest']}`
2738
}}
2839
>
2940
<div className={styles.content}>
30-
{subtitle && <p className={styles.subtitle}>{subtitle}</p>}
31-
<h1 className={styles.title}>{title}</h1>
32-
{body && <p className={styles.body}>{body}</p>}
33-
{cta && (
34-
<Button
35-
className={styles.button}
36-
url={cta.url ? cta.url : null}
37-
icon={cta.icon ? cta.icon : null}
38-
text={cta.text ? cta.text : null}
39-
type="primary"
40-
size="md"
41-
/>
41+
{children ? (
42+
children
43+
) : (
44+
<>
45+
{subtitle && <p className={styles.subtitle}>{subtitle}</p>}
46+
<h1 className={styles.title}>{title}</h1>
47+
{body && <p className={styles.body}>{body}</p>}
48+
{cta && (
49+
<Button
50+
className={styles.button}
51+
url={cta.url ? cta.url : null}
52+
icon={cta.icon ? cta.icon : null}
53+
text={cta.text ? cta.text : null}
54+
type="primary"
55+
size="md"
56+
/>
57+
)}
58+
</>
4259
)}
4360
</div>
4461
</section>
@@ -47,12 +64,14 @@ export default function Hero({backgroundImage, body, cta, subtitle, title}) {
4764

4865
Hero.propTypes = {
4966
backgroundImage: PropTypes.string,
67+
id: PropTypes.string,
5068
body: PropTypes.string,
5169
cta: PropTypes.shape({
5270
icon: PropTypes.string,
5371
text: PropTypes.string,
5472
url: PropTypes.string
5573
}),
5674
subtitle: PropTypes.string,
57-
title: PropTypes.string.isRequired
75+
children: PropTypes.node,
76+
title: PropTypes.string
5877
}

0 commit comments

Comments
 (0)