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

Commit 222ac67

Browse files
dcooneydcooney
committed
Adding Image component and changes to pull and blocquotes
1 parent 5ebd805 commit 222ac67

File tree

12 files changed

+216
-31
lines changed

12 files changed

+216
-31
lines changed

‎components/atoms/Image/Image.js

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import Link from 'next/link'
2+
import PropTypes from 'prop-types'
3+
import React from 'react'
4+
import RichText from '../RichText'
5+
import styles from './Image.module.css'
6+
import cn from 'classnames'
7+
8+
/**
9+
* Render the Image component.
10+
*
11+
* @author WebDevStudios
12+
* @param {string} anchor The anchor/id of the block.
13+
* @param {string} alt The image alt text.
14+
* @param {string} caption The image caption.
15+
* @param {string} className The image class.
16+
* @param {string} id The image ID.
17+
* @param {string} href The URL of the link.
18+
* @param {string} linkTarget Target for the link.
19+
* @param {string} linkClass Class for the link.
20+
* @param {string} rel The rel attribute for the link.
21+
* @param {string} sizeSlug The WP image size.
22+
* @param {string} url The full URL path of the image.
23+
* @return {Element} The Image component.
24+
*/
25+
export default function Image({
26+
alt,
27+
anchor,
28+
caption,
29+
className,
30+
id,
31+
href,
32+
linkTarget,
33+
linkClass,
34+
rel,
35+
url
36+
}) {
37+
return (
38+
<>
39+
{!!url && (
40+
<div id={anchor || null} className={styles.image}>
41+
{href ? (
42+
<Link href={href}>
43+
<a
44+
target={linkTarget || null}
45+
rel={rel || null}
46+
className={linkClass || null}
47+
>
48+
<img
49+
src={url}
50+
alt={alt}
51+
className={cn(className, `image-${id}`)}
52+
/>
53+
</a>
54+
</Link>
55+
) : (
56+
<img src={url} alt={alt} className={cn(className, `image-${id}`)} />
57+
)}
58+
{!!caption && (
59+
<div className={styles.caption}>
60+
<RichText tag="span">{caption}</RichText>
61+
</div>
62+
)}
63+
</div>
64+
)}
65+
</>
66+
)
67+
}
68+
69+
Image.propTypes = {
70+
alt: PropTypes.string,
71+
anchor: PropTypes.string,
72+
caption: PropTypes.string,
73+
className: PropTypes.string,
74+
id: PropTypes.number,
75+
href: PropTypes.string,
76+
linkClass: PropTypes.string,
77+
linkTarget: PropTypes.string,
78+
rel: PropTypes.string,
79+
sizeSlug: PropTypes.string,
80+
url: PropTypes.string
81+
}

‎components/atoms/Image/Image.module.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.image {
2+
@apply mb-20;
3+
4+
& img {
5+
@apply block;
6+
}
7+
8+
& .caption {
9+
@apply text-center font-secondary text-xs pt-12;
10+
}
11+
}

‎components/atoms/Image/Image.stories.mdx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks'
2+
3+
import Image from '.'
4+
5+
<Meta title="Components/Atoms/Image" component={Image} />
6+
7+
# Image
8+
9+
Use this component to display a image.
10+
11+
<Canvas>
12+
<Story name="Component">
13+
<Image
14+
url="https://images.unsplash.com/photo-1611149469739-cf4647d61f07?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"
15+
alt="Image alt text"
16+
caption="This is the image caption"
17+
/>
18+
</Story>
19+
</Canvas>
20+
21+
## Image + Link
22+
23+
Add a link to the image using the `href` prop.
24+
25+
<Canvas>
26+
<Story name="Image + Link">
27+
<Image
28+
url="https://images.unsplash.com/photo-1611149469739-cf4647d61f07?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"
29+
alt="Image alt text"
30+
caption="This is the image caption"
31+
href="https://google.com"
32+
/>
33+
</Story>
34+
</Canvas>
35+
36+
## Controls
37+
38+
Play around with `<Image />` props in the [Canvas tab of the Controls story](?path=/story/components-atoms-image--controls).
39+
40+
export const Template = (args) => <Image {...args} />
41+
42+
<Canvas>
43+
<Story
44+
name="Controls"
45+
args={{
46+
url:
47+
'https://images.unsplash.com/photo-1611149469739-cf4647d61f07?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
48+
caption: 'Jeffery Smith, 28'
49+
}}
50+
>
51+
{Template.bind({})}
52+
</Story>
53+
</Canvas>

‎components/atoms/Image/index.js

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

‎components/atoms/PullQuote/PullQuote.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import styles from './PullQuote.module.css'
1111
* @param {string} citation The optional author citation.
1212
* @param {string} id Optional anchor/id.
1313
* @param {string} className Optional classnames.
14-
* @return {Element} The PullQuote component.
14+
* @return {Element} The PullQuote component.
1515
*/
1616
export default function PullQuote({value, citation, id, className}) {
1717
return (
@@ -24,7 +24,9 @@ export default function PullQuote({value, citation, id, className}) {
2424
</div>
2525
</blockquote>
2626
{!!citation && (
27-
<figcaption className={styles.cite}>~ {citation}</figcaption>
27+
<figcaption className={styles.cite}>
28+
~ <RichText tag="span">{citation}</RichText>
29+
</figcaption>
2830
)}
2931
</figure>
3032
)}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66
}
77

88
& > figcaption {
9-
@apply font-secondary text-sm italic;
9+
@apply font-secondary text-xs pt-12;
1010
}
1111
}

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

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Use this to display a pull quote.
1111
<Canvas>
1212
<Story name="Component">
1313
<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."
14+
value="I have no other view than to promote the public good, and am unambitious of honors not founded in the approbation of my country."
1515
citation="George Washington"
1616
/>
1717
</Story>
@@ -27,12 +27,9 @@ export const Template = (args) => <PullQuote {...args} />
2727
<Story
2828
name="Controls"
2929
args={{
30-
quote:
30+
value:
3131
'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"
32+
citation: 'George Washington'
3633
}}
3734
>
3835
{Template.bind({})}

‎components/atoms/Quote/Quote.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import styles from './Quote.module.css'
1313
* @param {string} citation The optional author citation.
1414
* @param {string} id Optional anchor/id.
1515
* @param {string} className Optional classnames.
16-
* @return {Element} The Quote component.
16+
* @return {Element} The Quote component.
1717
*/
1818
export default function Quote({value, citation, id, className}) {
1919
return (
@@ -26,7 +26,9 @@ export default function Quote({value, citation, id, className}) {
2626
</div>
2727
</blockquote>
2828
{!!citation && (
29-
<figcaption className={styles.cite}>~ {citation}</figcaption>
29+
<figcaption className={styles.cite}>
30+
~ <RichText tag="span">{citation}</RichText>
31+
</figcaption>
3032
)}
3133
</figure>
3234
)}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66
}
77

88
& > figcaption {
9-
@apply font-secondary text-sm italic;
9+
@apply font-secondary text-xs pt-12;
1010
}
1111
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ Give quoted text visual emphasis.
1111
<Canvas>
1212
<Story name="Component">
1313
<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"
14+
value='"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+
citation="Jeffery Smith, 28"
1616
/>
1717
</Story>
1818
</Canvas>
@@ -29,7 +29,7 @@ export const Template = (args) => <Quote {...args} />
2929
args={{
3030
value:
3131
'"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'
32+
citation: 'Jeffery Smith, 28'
3333
}}
3434
>
3535
{Template.bind({})}

0 commit comments

Comments
 (0)