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

Commit c40fca2

Browse files
dcooneydcooney
committed
Adding Quote and PullQuote components.
1 parent 0304a48 commit c40fca2

File tree

18 files changed

+267
-66
lines changed

18 files changed

+267
-66
lines changed

‎components/atoms/PullQuote/PullQuote.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import cn from 'classnames'
2+
import PropTypes from 'prop-types'
3+
import RichText from '../RichText'
4+
import styles from './PullQuote.module.css'
5+
6+
/**
7+
* PullQuote Block
8+
*
9+
* @author WebDevStudios
10+
* @param {string} value The pull quote content of the block.
11+
* @param {string} citation The optional author citation.
12+
* @param {string} id Optional anchor/id.
13+
* @param {string} className Optional classnames.
14+
* @return {Element} The PullQuote component.
15+
*/
16+
export default function PullQuote({value, citation, id, className}) {
17+
return (
18+
<>
19+
{!!value && (
20+
<figure id={id ? id : null} className={cn(styles.pullquote, className)}>
21+
<blockquote>
22+
<div className={styles.content}>
23+
<RichText tag="div">{value}</RichText>
24+
</div>
25+
</blockquote>
26+
{!!citation && (
27+
<figcaption className={styles.cite}>~ {citation}</figcaption>
28+
)}
29+
</figure>
30+
)}
31+
</>
32+
)
33+
}
34+
35+
PullQuote.propTypes = {
36+
id: PropTypes.string,
37+
className: PropTypes.string,
38+
value: PropTypes.string,
39+
citation: PropTypes.string
40+
}

‎components/atoms/PullQuote/PullQuote.module.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.pullquote {
2+
@apply mb-24 p-20 px-40 text-center;
3+
4+
& p {
5+
@apply font-secondary text-h5;
6+
}
7+
8+
& > figcaption {
9+
@apply font-secondary text-sm italic;
10+
}
11+
}

‎components/atoms/PullQuote/PullQuote.stories.mdx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks'
2+
3+
import PullQuote from '.'
4+
5+
<Meta title="Components/Atoms/Pullquote" component={PullQuote} />
6+
7+
# Pull Quote
8+
9+
Use this to display a pull quote.
10+
11+
<Canvas>
12+
<Story name="Component">
13+
<PullQuote
14+
quote="I have no other view than to promote the public good, and am unambitious of honors not founded in the approbation of my country."
15+
citation="George Washington"
16+
/>
17+
</Story>
18+
</Canvas>
19+
20+
## Controls
21+
22+
Play around with `<PullQuote />` props in the [Canvas tab of the Controls story](?path=/story/design-system-molecules-pullquote--controls).
23+
24+
export const Template = (args) => <PullQuote {...args} />
25+
26+
<Canvas>
27+
<Story
28+
name="Controls"
29+
args={{
30+
quote:
31+
'I have no other view than to promote the public good, and am unambitious of honors not founded in the approbation of my country.',
32+
citation: 'George Washington',
33+
image:
34+
'https://upload.wikimedia.org/wikipedia/commons/b/b6/Gilbert_Stuart_Williamstown_Portrait_of_George_Washington.jpg',
35+
imageAlt: "George Washington's official portrait"
36+
}}
37+
>
38+
{Template.bind({})}
39+
</Story>
40+
</Canvas>

‎components/atoms/PullQuote/index.js

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

‎components/atoms/Quote/Quote.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import RichText from '@/components/atoms/RichText'
2+
import cn from 'classnames'
3+
import PropTypes from 'prop-types'
4+
import styles from './Quote.module.css'
5+
6+
/**
7+
* Quote Block
8+
*
9+
* The core Quote block from Gutenberg.
10+
*
11+
* @author WebDevStudios
12+
* @param {string} value The quote content of the block.
13+
* @param {string} citation The optional author citation.
14+
* @param {string} id Optional anchor/id.
15+
* @param {string} className Optional classnames.
16+
* @return {Element} The Quote component.
17+
*/
18+
export default function Quote({value, citation, id, className}) {
19+
return (
20+
<>
21+
{!!value && (
22+
<figure id={id ? id : null} className={cn(styles.quote, className)}>
23+
<blockquote>
24+
<div className={styles.content}>
25+
<RichText tag="div">{value}</RichText>
26+
</div>
27+
</blockquote>
28+
{!!citation && (
29+
<figcaption className={styles.cite}>~ {citation}</figcaption>
30+
)}
31+
</figure>
32+
)}
33+
</>
34+
)
35+
}
36+
37+
Quote.propTypes = {
38+
id: PropTypes.string,
39+
className: PropTypes.string,
40+
value: PropTypes.string,
41+
citation: PropTypes.string
42+
}

‎components/atoms/Quote/Quote.module.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.quote {
2+
@apply px-28 border-l mb-40;
3+
4+
& p {
5+
@apply font-secondary text-h5;
6+
}
7+
8+
& > figcaption {
9+
@apply font-secondary text-sm italic;
10+
}
11+
}

‎components/atoms/Quote/Quote.stories.mdx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks'
2+
3+
import Quote from '.'
4+
5+
<Meta title="Components/Atoms/Quote" component={Quote} />
6+
7+
# Quote
8+
9+
Give quoted text visual emphasis.
10+
11+
<Canvas>
12+
<Story name="Component">
13+
<Quote
14+
quote='"There are seasons in every country when noise and impudence pass current for worth; and in popular commotions especially, the clamors of interested and factious men are often mistaken for patriotism."'
15+
type="a"
16+
/>
17+
</Story>
18+
</Canvas>
19+
20+
## Controls
21+
22+
Play around with `<Quote />` props in the [Canvas tab of the Controls story](?path=/story/design-system-molecules-blockquote--controls).
23+
24+
export const Template = (args) => <Quote {...args} />
25+
26+
<Canvas>
27+
<Story
28+
name="Controls"
29+
args={{
30+
value:
31+
'"There are seasons in every country when noise and impudence pass current for worth; and in popular commotions especially, the clamors of interested and factious men are often mistaken for patriotism."',
32+
cite: 'Jeffery Smith, 28'
33+
}}
34+
>
35+
{Template.bind({})}
36+
</Story>
37+
</Canvas>

‎components/atoms/Quote/index.js

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

‎components/blocks/BlockBlockquote/BlockBlockquote.js

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

‎components/blocks/BlockBlockquote/index.js

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

0 commit comments

Comments
 (0)