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

Commit fe7fb28

Browse files
dcooneydcooney
committed
Adding Storybook and updated prop in displayBlock.
1 parent d7ab4a1 commit fe7fb28

File tree

20 files changed

+381
-101
lines changed

20 files changed

+381
-101
lines changed

‎components/atoms/Logo/Logo.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ export default function Logo() {
77
<Link href="/">
88
<a>
99
<img
10-
src="/logo.svg"
11-
alt="site logo"
10+
src="/images/wds-logo-inverse.svg"
11+
alt="Site logo"
1212
loading="lazy"
1313
height="128"
1414
width="128"

‎components/atoms/RichText/RichText.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
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+
export default function RichText({attributes, children, className, id, tag}) {
8+
const tagClassName = tag !== 'div' ? tag : ''
9+
10+
return React.createElement(tag, {
11+
...attributes,
12+
className: cn(styles.richtext, styles?.[tagClassName], className),
13+
id: id || null,
14+
dangerouslySetInnerHTML: createMarkup(children)
15+
})
16+
}
17+
18+
RichText.propTypes = {
19+
attributes: PropTypes.object,
20+
children: PropTypes.string.isRequired,
21+
className: PropTypes.string,
22+
id: PropTypes.string,
23+
tag: PropTypes.string
24+
}
25+
26+
RichText.defaultProps = {
27+
tag: 'div'
28+
}

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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+
12+
/* Heading Styles */
13+
& h1,
14+
&.h1 {
15+
@apply font-secondary text-h1 mb-20;
16+
}
17+
18+
& h2,
19+
&.h2 {
20+
@apply font-secondary text-h2 mb-20;
21+
}
22+
23+
& h3,
24+
&.h3 {
25+
@apply font-secondary text-h3 mb-20;
26+
}
27+
28+
& h4,
29+
&.h4 {
30+
@apply font-secondary text-h4 mb-12;
31+
}
32+
33+
& h5,
34+
&.h5 {
35+
@apply font-secondary text-h5 mb-12;
36+
}
37+
}

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

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks'
2+
import RichText from '.'
3+
4+
<Meta title="Design System/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+
{
28+
`<h1>H1</h1>
29+
<h2>H2</h2>
30+
<h3>H3</h3>
31+
<h3>H3</h3>
32+
<h4>H4</h4>
33+
<h5>H5</h5>
34+
<h6>H6</h6>
35+
<p>Paragraph tag <strong>with</strong> <a href="https://example.com">linked content</a>.</p>
36+
<ul>
37+
<li>UL List item 1</li>
38+
<li>UL List item 2
39+
<ul>
40+
<li>UL List item 1</li>
41+
<li>UL List item 2</li>
42+
<li>UL List item 3</li>
43+
</ul>
44+
</li>
45+
<li>UL List item 3</li>
46+
</ul>
47+
<ol>
48+
<li>OL List item 1</li>
49+
<li>OL List item 2
50+
<ol>
51+
<li>OL List item 1</li>
52+
<li>OL List item 2</li>
53+
<li>OL List item 3</li>
54+
</ol>
55+
</li>
56+
<li>OL List item 3</li>
57+
</ol>`
58+
}
59+
</RichText>
60+
</Story>
61+
</Canvas>
62+
63+
## Tag
64+
65+
In certain cases the wrapper element should change according to the content needs. This can be done using `tag` prop.
66+
67+
<Canvas>
68+
<Story name="Tag">
69+
<RichText tag='h2'>
70+
{`This heading has <strong>Bold Content</strong> and <i>Italics</i>`}
71+
</RichText>
72+
</Story>
73+
</Canvas>
74+
75+
## Attributes
76+
77+
Arbitrary HTML attributes can be added to the RichText component with the `attributes` prop.
78+
79+
<Canvas>
80+
<Story name="Attributes">
81+
<RichText
82+
tag='h2'
83+
attributes={{
84+
'data-att': true,
85+
}}
86+
>
87+
{`This heading has <strong>Bold Content</strong> and <i>Italics</i>`}
88+
</RichText>
89+
</Story>
90+
</Canvas>
91+
92+
## Controls
93+
94+
Play around with `<RichText />` props in the [Canvas tab of the Controls story](?path=/story/design-system-atoms-richtext--controls).
95+
96+
export const Template = (args) => <Icon {...args} />
97+
98+
<Canvas>
99+
<Story
100+
name="Controls"
101+
args={{
102+
id: 'component-id',
103+
className: 'component-class',
104+
children: <p>Paragraph content.</p>,
105+
}}
106+
>
107+
{Template.bind({})}
108+
</Story>
109+
</Canvas>
110+

‎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/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: 7 additions & 2 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,9 +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 className={cn(`text-${alignment}`, className)} id={anchor !== null}>
18+
<RichText
19+
className={cn(`text-${alignment}`, className)}
20+
id={anchor}
21+
tag="p"
22+
>
1823
{content}
19-
</p>
24+
</RichText>
2025
)
2126
}
2227

‎components/blocks/index.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
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'

‎components/molecules/BlockRender/Alert.module.css

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

‎components/molecules/BlockRender/Alert.stories.mdx

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

0 commit comments

Comments
 (0)