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

Commit 1da1c38

Browse files
author
Greg Rickaby
authored
Merge pull request #116 from WebDevStudios/feature/component-handling
Feature/component handling
2 parents fa4820b + eef86e8 commit 1da1c38

File tree

23 files changed

+430
-101
lines changed

23 files changed

+430
-101
lines changed

‎components/atoms/Logo/Logo.js

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
import Link from 'next/link'
22

3+
/**
4+
* Render the Logo component.
5+
*
6+
* @author WebDevStudios
7+
* @return {Element} The Blocks component.
8+
*/
39
// TODO: Create Storybook for this component.
4-
510
export default function Logo() {
611
return (
712
<Link href="/">
813
<a>
914
<img
10-
src="/logo.svg"
11-
alt="site logo"
15+
src="/images/wds-logo-inverse.svg"
16+
alt="Site logo"
1217
loading="lazy"
1318
height="128"
1419
width="128"

‎components/atoms/RichText/RichText.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import createMarkup from '@/functions/createMarkup'
2+
import cn from 'classnames'
3+
import PropTypes from 'prop-types'
4+
import React from 'react'
5+
import styles from './RichText.module.css'
6+
7+
/**
8+
* Render the RichText component.
9+
*
10+
* @param {object} props RichText component props.
11+
* @param {string} props.attributes Optional element attributes.
12+
* @param {string} props.children Child component(s) to render.
13+
* @param {string} props.className Optional classNames.
14+
* @param {string} props.id Optional element ID.
15+
* @param {string} props.tag The type of element to render.
16+
* @return {Element} The RichText component.
17+
*/
18+
export default function RichText({attributes, children, className, id, tag}) {
19+
const tagClassName = tag !== 'div' ? tag : ''
20+
return React.createElement(tag, {
21+
...attributes,
22+
className: cn(styles.richtext, styles?.[tagClassName], className),
23+
id: id || null,
24+
dangerouslySetInnerHTML: createMarkup(children)
25+
})
26+
}
27+
28+
RichText.propTypes = {
29+
attributes: PropTypes.object,
30+
children: PropTypes.string.isRequired,
31+
className: PropTypes.string,
32+
id: PropTypes.string,
33+
tag: PropTypes.string
34+
}
35+
36+
RichText.defaultProps = {
37+
tag: 'div'
38+
}

‎components/atoms/RichText/RichText.module.css

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.richtext {
2+
&.center {
3+
@apply text-center;
4+
}
5+
6+
/* Paragraph, List Styles */
7+
& p,
8+
&.p {
9+
@apply font-primary text-root-em mb-20;
10+
11+
& > a {
12+
@apply text-primary;
13+
}
14+
}
15+
16+
/* Heading Styles */
17+
& h1,
18+
&.h1 {
19+
@apply font-secondary text-h1 mb-20;
20+
}
21+
22+
& h2,
23+
&.h2 {
24+
@apply font-secondary text-h2 mb-20;
25+
}
26+
27+
& h3,
28+
&.h3 {
29+
@apply font-secondary text-h3 mb-20;
30+
}
31+
32+
& h4,
33+
&.h4 {
34+
@apply font-secondary text-h4 mb-12;
35+
}
36+
37+
& h5,
38+
&.h5 {
39+
@apply font-secondary text-h5 mb-12;
40+
}
41+
}

‎components/atoms/RichText/RichText.stories.mdx

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks'
2+
import RichText from '.'
3+
4+
<Meta title="Components/Atoms/RichText" component={RichText} />
5+
6+
# RichText
7+
8+
The RichText component is a wrapper component surrounding `children` elements. The wrapper will apply generic styles to the wrapper element and children elements. This component uses is setup to use `dangerouslySetInnerHTML`.
9+
10+
Note: The content passed into the component must be a string.
11+
12+
<Canvas>
13+
<Story name="Component">
14+
<RichText>
15+
{`<p>Example mixed content <strong>with bold text</strong> and <a href="https://example.com">linked content</a>.</p>`}
16+
</RichText>
17+
</Story>
18+
</Canvas>
19+
20+
## Content Samples
21+
22+
The following shows examples that have generic styles applied.
23+
24+
<Canvas>
25+
<Story name="ContentSamples">
26+
<RichText tag="div">
27+
{`<h1>H1</h1>
28+
<h2>H2</h2>
29+
<h3>H3</h3>
30+
<h3>H3</h3>
31+
<h4>H4</h4>
32+
<h5>H5</h5>
33+
<h6>H6</h6>
34+
<p>Paragraph tag <strong>with</strong> <a href="https://example.com">linked content</a>.</p>
35+
<ul>
36+
<li>UL List item 1</li>
37+
<li>UL List item 2
38+
<ul>
39+
<li>UL List item 1</li>
40+
<li>UL List item 2</li>
41+
<li>UL List item 3</li>
42+
</ul>
43+
</li>
44+
<li>UL List item 3</li>
45+
</ul>
46+
<ol>
47+
<li>OL List item 1</li>
48+
<li>OL List item 2
49+
<ol>
50+
<li>OL List item 1</li>
51+
<li>OL List item 2</li>
52+
<li>OL List item 3</li>
53+
</ol>
54+
</li>
55+
<li>OL List item 3</li>
56+
</ol>`}
57+
</RichText>
58+
</Story>
59+
</Canvas>
60+
61+
## Tag
62+
63+
In certain cases the wrapper element should change according to the content needs. This can be done using `tag` prop.
64+
65+
<Canvas>
66+
<Story name="Tag">
67+
<RichText tag="h2">
68+
{`This heading has <strong>Bold Content</strong> and <i>Italics</i>`}
69+
</RichText>
70+
</Story>
71+
</Canvas>
72+
73+
## Attributes
74+
75+
Arbitrary HTML attributes can be added to the RichText component with the `attributes` prop.
76+
77+
<Canvas>
78+
<Story name="Attributes">
79+
<RichText
80+
tag="h2"
81+
attributes={{
82+
'data-att': true
83+
}}
84+
>
85+
{`This heading has <strong>Bold Content</strong> and <i>Italics</i>`}
86+
</RichText>
87+
</Story>
88+
</Canvas>
89+
90+
## Controls
91+
92+
Play around with `<RichText />` props in the [Canvas tab of the Controls story](?path=/story/design-system-atoms-richtext--controls).
93+
94+
export const Template = (args) => <Icon {...args} />
95+
96+
<Canvas>
97+
<Story
98+
name="Controls"
99+
args={{
100+
id: 'component-id',
101+
className: 'component-class',
102+
children: <p>Paragraph content.</p>
103+
}}
104+
>
105+
{Template.bind({})}
106+
</Story>
107+
</Canvas>

‎components/atoms/RichText/index.js

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

‎components/blocks/BlockAlgolia/BlockAlgolia.js

Lines changed: 0 additions & 41 deletions
This file was deleted.

‎components/blocks/BlockAlgolia/index.js

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎components/blocks/BlockHeadings/BlockHeadings.js

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
import RichText from '@/components/atoms/RichText'
12
import cn from 'classnames'
23
import PropTypes from 'prop-types'
4+
import React from 'react'
35

46
/**
57
* Headings Block
@@ -14,24 +16,21 @@ export default function BlockHeadings({props}) {
1416
const alignment = !align ? 'left' : align
1517

1618
return (
17-
<h1
19+
<RichText
1820
tag={'h' + level}
19-
className={cn('container container--sm', `text-${alignment}`, className)}
21+
className={cn(`text-${alignment}`, className)}
2022
id={anchor}
2123
>
2224
{content}
23-
</h1>
25+
</RichText>
2426
)
2527
}
2628

2729
BlockHeadings.propTypes = {
2830
props: PropTypes.object.isRequired,
2931
anchor: PropTypes.string,
3032
align: PropTypes.string,
31-
backgroundColor: PropTypes.string,
3233
className: PropTypes.string,
3334
content: PropTypes.string,
34-
fontSize: PropTypes.string,
35-
level: PropTypes.string,
36-
textColor: PropTypes.string
35+
level: PropTypes.string
3736
}

‎components/blocks/BlockParagraph/BlockParagraph.js

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import RichText from '@/components/atoms/RichText'
12
import cn from 'classnames'
23
import PropTypes from 'prop-types'
34

@@ -14,18 +15,13 @@ export default function BlockParagraph({props}) {
1415
// TODO Add settings for unused props in default WP Paragraph Block
1516
const alignment = !align ? 'left' : align
1617
return (
17-
<p
18-
className={cn(
19-
'container',
20-
'container--sm',
21-
`text-${alignment}`,
22-
className
23-
)}
18+
<RichText
19+
className={cn(`text-${alignment}`, className)}
2420
id={anchor}
2521
tag="p"
2622
>
2723
{content}
28-
</p>
24+
</RichText>
2925
)
3026
}
3127

‎components/blocks/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
// Create default exports for each Block.
22
export {default as BlockAccordions} from './BlockAccordions'
3-
export {default as BlockAlgolia} from './BlockAlgolia'
43
export {default as BlockBlockquote} from './BlockBlockquote'
54
export {default as BlockImage} from './BlockImage'
65
export {default as BlockImageGallery} from './BlockImageGallery'
76
export {default as BlockList} from './BlockList'
87
export {default as BlockNetflixCarousel} from './BlockNetflixCarousel'
98
export {default as BlockParagraph} from './BlockParagraph'
9+
export {default as BlockHeadings} from './BlockHeadings'
1010
export {default as BlockSeparator} from './BlockSeparator'
1111
export {default as BlockShortcode} from './BlockShortcode'
1212
export {default as BlockSpacer} from './BlockSpacer'

0 commit comments

Comments
 (0)