MIMIR-491 PictureCard interface (#216)

* PictureCard contrast background * Change prop from 'image' (object) to 'imageSrc' (url); add prop 'altText' * update test, snapshot
statisticsnorway · Jun 26, 2020 · a90ea10 · a90ea10
1 parent f0317a2
commit a90ea10
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 12 deletions.
diff --git a/src/components/PictureCard/README.md b/src/components/PictureCard/README.md
@@ -17,17 +17,18 @@ PictureCard
 
 #### React
 ```jsx harmony
-<PictureCard image={<img src={doge} alt="image" />} onClick={function} type="Type" title="Tittel" />
+<PictureCard imageSrc={url} altText="alt text" onClick={function} type="Type" title="Tittel" />
 ```
 ```jsx harmony
-<PictureCard image={<img src={doge} alt="image" />} link="./" type="Type" title="Tittel" />
+<PictureCard imageSrc={url} altText="alt text" link="./" type="Type" title="Tittel" />
 ```
 Available props:
 
 | Name       | Type           | Description  |
 | ---------- | ------------- | ----- |
 | className   | string | Optional container class|
-| image | required element | An image to be put as background |
+| imageSrc | required (url) | URL of the image to be used |
+| altText | required string | alt text for screen readers |
 | link | string | Link to be navigated to |
 | onClick | func | Function callback to be used instead of link |
 | title | string | Title text |

diff --git a/src/components/PictureCard/__snapshots__/pictureCard.test.jsx.snap b/src/components/PictureCard/__snapshots__/pictureCard.test.jsx.snap
@@ -9,7 +9,8 @@ exports[`ImageLink component Matches the snapshot 1`] = `
     className="image-background"
   >
     <img
-      alt=""
+      alt="img alt"
+      src=""
     />
   </div>
   <div

diff --git a/src/components/PictureCard/index.jsx b/src/components/PictureCard/index.jsx
@@ -29,7 +29,7 @@ export function useHover() {
 	return [hoverRef, value];
 }
 
-const PictureCard = ({ className, imageSrc, link, onClick, orientation, title, type }) => {
+const PictureCard = ({ className, imageSrc, altText, link, onClick, orientation, title, type }) => {
 	const [hoverRef, hovered] = useHover();
 	return (
 		<a
@@ -39,7 +39,7 @@ const PictureCard = ({ className, imageSrc, link, onClick, orientation, title, t
 			ref={hoverRef}
 		>
 			<div className="image-background">
-				<img src={imageSrc} alt="" />
+				<img src={imageSrc} alt={altText} />
 			</div>
 			<div className="overlay">
 				<span className="il-type">{type}</span>
@@ -60,7 +60,8 @@ PictureCard.defaultProps = {
 
 PictureCard.propTypes = {
 	className: PropTypes.string,
-	imageSrc: PropTypes.element.isRequired,
+	imageSrc: PropTypes.string.isRequired,
+	altText: PropTypes.string.isRequired,
 	link: PropTypes.string,
 	onClick: PropTypes.func,
 	orientation: PropTypes.oneOf(['horizontal', 'vertical']),

diff --git a/src/components/PictureCard/pictureCard.story.jsx b/src/components/PictureCard/pictureCard.story.jsx
@@ -10,8 +10,8 @@ const sup = (() => {
 
 storiesOf('Picture Card', module).addDecorator(centered)
 	.add('Default', () => (
-		<PictureCard imageSrc={cardImage} onClick={sup} type="Type" title="Tittel" />
+		<PictureCard imageSrc={cardImage} altText="img alt" onClick={sup} type="Type" title="Tittel" />
 	))
 	.add('Horizontal', () => (
-		<PictureCard orientation="horizontal" imageSrc={cardImage} onClick={sup} type="Type" title="Tittel" />
+		<PictureCard orientation="horizontal" imageSrc={cardImage} altText="img alt" onClick={sup} type="Type" title="Tittel" />
 	));
diff --git a/src/components/PictureCard/pictureCard.test.jsx b/src/components/PictureCard/pictureCard.test.jsx
@@ -5,15 +5,17 @@ import cardImage from './cards_bilde.jpg';
 
 describe('ImageLink component', () => {
 	test('Matches the snapshot', () => {
-		const wrapper = shallow(<PictureCard image={<img src={cardImage} alt="image" />} onClick={() => {}} type="Type" title="Tittel" />);
+		const wrapper = shallow(
+			<PictureCard imageSrc={cardImage} onClick={() => {}} type="Type" altText="img alt" title="Tittel" />
+		);
 		expect(wrapper).toMatchSnapshot();
 	});
 	test('Sets default orientation className', () => {
-		const wrapper = shallow(<PictureCard image={<img src={cardImage} alt="image" />} onClick={() => {}} type="Type" title="Tittel" />);
+		const wrapper = shallow(<PictureCard imageSrc={cardImage} altText="alt img" onClick={() => {}} type="Type" title="Tittel" />);
 		expect(wrapper.hasClass('vertical')).toEqual(true);
 	});
 	test('Switches className on orientation change', () => {
-		const wrapper = shallow(<PictureCard orientation="horizontal" image={<img src={cardImage} alt="image" />} onClick={() => {}} type="Type" title="Tittel" />);
+		const wrapper = shallow(<PictureCard orientation="horizontal" imageSrc={cardImage} altText="alt img" onClick={() => {}} type="Type" title="Tittel" />);
 		expect(wrapper.hasClass('horizontal')).toEqual(true);
 	});
 });