Merge pull request #43 from comicrelief/feature/29_single_message

feat: Single message copy as children props
comicrelief · Jul 8, 2019 · a4c2afa · a4c2afa
2 parents 8056d4b + a5de3cd
commit a4c2afa
Show file tree

Hide file tree

Showing 7 changed files with 341 additions and 149 deletions.
diff --git a/src/components/Atoms/Picture/Picture.js b/src/components/Atoms/Picture/Picture.js
@@ -1,6 +1,3 @@
-/* eslint-disable react/forbid-prop-types */
-/* eslint-disable react/prop-types */
-/* fix theme, breakpoint and object types */
 import React from 'react';
 import styled, { withTheme } from 'styled-components';
 import PropTypes from 'prop-types';
@@ -58,7 +55,10 @@ const Picture = ({ images, alt, theme, width, height, objectFit }) => {
 };
 
 Picture.propTypes = {
-  images: PropTypes.object.isRequired,
+  images: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.shape({ picture: PropTypes.string })
+  ]).isRequired,
   alt: PropTypes.string,
   objectFit: PropTypes.oneOf([
     'none',
@@ -68,7 +68,10 @@ Picture.propTypes = {
     'scale-down'
   ]),
   width: PropTypes.string,
-  height: PropTypes.string
+  height: PropTypes.string,
+  theme: PropTypes.shape({
+    breakpoint: PropTypes.func
+  }).isRequired
 };
 
 Picture.defaultProps = {

diff --git a/src/components/Atoms/RadioButton/RadioButton.js b/src/components/Atoms/RadioButton/RadioButton.js
@@ -62,7 +62,7 @@ const Label = styled.label.attrs(({ label }) => ({
 
 const RadioButton = ({ label, name, value, ...rest }) => {
   return (
-    <Label htmlFor={label}>
+    <Label htmlFor={label.toLowerCase()}>
       <StyledInput
         type="radio"
         {...rest}
@@ -71,9 +71,7 @@ const RadioButton = ({ label, name, value, ...rest }) => {
         id={value}
       />
       <span />
-      <Text weight="bold" for={label}>
-        {label}
-      </Text>
+      <Text weight="bold">{label}</Text>
     </Label>
   );
 };

diff --git a/src/components/Atoms/RadioButton/RadioButton.test.js b/src/components/Atoms/RadioButton/RadioButton.test.js
@@ -75,7 +75,7 @@ it('renders correctly', () => {
 
     <label
         className="c0"
-        htmlFor="Male"
+        htmlFor="male"
       >
         <input
           className="c1"
@@ -88,7 +88,6 @@ it('renders correctly', () => {
         <span
           className="c2"
           color="inherit"
-          for="Male"
         >
           Male
         </span>
@@ -155,7 +154,7 @@ it('renders correctly', () => {
 
     <label
         className="c0"
-        htmlFor="Female"
+        htmlFor="female"
       >
         <input
           className="c1"
@@ -168,7 +167,6 @@ it('renders correctly', () => {
         <span
           className="c2"
           color="inherit"
-          for="Female"
         >
           Female
         </span>

diff --git a/src/components/Molecules/SingleMessage/SingleMessage.js b/src/components/Molecules/SingleMessage/SingleMessage.js
@@ -1,12 +1,11 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
 import Picture from '../../Atoms/Picture/Picture';
-import Text from '../../Atoms/Text/Text';
-import Link from '../../Atoms/Link/Link';
 
 const Container = styled.div`
   display: flex;
+  position: relative;
   flex-direction: column;
   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
   @media ${({ theme }) => theme.breakpoint('small')} {
@@ -18,73 +17,85 @@ const Container = styled.div`
 const Copy = styled.div`
   padding: 20px;
   flex: 0 0 50%;
+  ${props =>
+    props.fullImage &&
+    css`
+      position: absolute;
+      width: 100%;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      ${
+        props.copyFirst
+          ? css`
+              left: 0;
+            `
+          : null
+      }
+      @media ${({ theme }) => theme.breakpoint('small')} {
+        width: 50%;
+      }
+    `};
+  ${props =>
+    props.hasImage
+      ? css`
+          flex: 0 0 50%;
+        `
+      : css`
+          flex: 0 0 60%;
+          margin: auto;
+          padding: 100px 20px;
+        `}
+`;
+
+const Image = styled.div`
+  width: 100%;
 `;
 
 const SingleMessage = ({
-  title,
-  text,
-  copyFirst,
-  textColor,
-  ctaText,
-  ctaLink,
-  ctaColor,
-  ctaTarget,
   backgroundColor,
+  copyFirst,
   imageSet,
-  imageAltText
+  imageAltText,
+  children,
+  fullImage
 }) => {
+  const hasImage = imageSet || false;
+
   return (
     <Container backgroundColor={backgroundColor} copyFirst={copyFirst}>
-      <Picture
-        alt={imageAltText}
-        images={imageSet}
-        objectFit="cover"
-        width="100%"
-        height="100%"
-      />
-      <Copy>
-        <Text tag="h2" size="xxl" color={textColor}>
-          {title}
-        </Text>
-        {text ? (
-          <Text tag="p" size="m" color={textColor}>
-            {text}
-          </Text>
-        ) : null}
-        {ctaLink ? (
-          <Link color={ctaColor} href={ctaLink} target={ctaTarget}>
-            {ctaText}
-          </Link>
-        ) : null}
+      {imageSet ? (
+        <Image>
+          <Picture
+            alt={imageAltText}
+            images={imageSet}
+            objectFit="cover"
+            width="100%"
+            height="100%"
+          />
+        </Image>
+      ) : null}
+      <Copy fullImage={fullImage} hasImage={hasImage} copyFirst={copyFirst}>
+        {children}
       </Copy>
     </Container>
   );
 };
 
 SingleMessage.propTypes = {
-  title: PropTypes.string.isRequired,
-  text: PropTypes.string,
-  copyFirst: PropTypes.bool,
-  textColor: PropTypes.string,
-  ctaText: PropTypes.string,
-  ctaLink: PropTypes.string,
-  ctaColor: PropTypes.string,
-  ctaTarget: PropTypes.string,
   backgroundColor: PropTypes.string,
+  copyFirst: PropTypes.bool,
+  fullImage: PropTypes.bool,
   // eslint-disable-next-line react/forbid-prop-types
   imageSet: PropTypes.object,
-  imageAltText: PropTypes.string
+  imageAltText: PropTypes.string,
+  children: PropTypes.node.isRequired
 };
 
 SingleMessage.defaultProps = {
-  text: null,
-  copyFirst: false,
-  textColor: 'inherit',
-  ctaText: null,
-  ctaLink: null,
-  ctaColor: null,
-  ctaTarget: null,
   backgroundColor: 'white',
+  copyFirst: false,
+  fullImage: false,
   imageSet: null,
   imageAltText: ''
 };

diff --git a/src/components/Molecules/SingleMessage/SingleMessage.md b/src/components/Molecules/SingleMessage/SingleMessage.md
@@ -2,18 +2,62 @@ Single Message
 
 ```js
 const data = require('../../../styleguide/data/data').default;
+import Text from '../../Atoms/Text/Text';
+import Link from '../../Atoms/Link/Link';
 
 <SingleMessage
-  title={data.title}
-  text={data.text}
-  textColor="white"
-  ctaText={data.ctaText}
-  ctaLink="/"
-  ctaColor="red"
-  ctaTarget="self"
   backgroundColor="purple"
   imageSet={data.pictures}
   imageAltText=""
   copyFirst={false}
-/>;
+>
+  <Text tag="h1" color="white" size="xxl">
+    title
+  </Text>
+  <Text tag="p" color="white">
+    description
+  </Text>
+  <Link href="/" color="white">
+    CTA
+  </Link>
+</SingleMessage>;
+```
+
+Single Message fullImage
+
+```js
+const data = require('../../../styleguide/data/data').default;
+import Text from '../../Atoms/Text/Text';
+import Link from '../../Atoms/Link/Link';
+
+<SingleMessage
+  backgroundColor="purple"
+  imageSet={data.pictures}
+  imageAltText=""
+  copyFirst={false}
+  fullImage={true}
+>
+  <Text tag="h1" color="white" size="xxl">
+    title
+  </Text>
+  <Text tag="p" color="white">
+    description
+  </Text>
+  <Link href="/" color="white">
+    CTA
+  </Link>
+</SingleMessage>;
+```
+
+Single Message with no Image
+
+```js
+import Text from '../../Atoms/Text/Text';
+
+<SingleMessage backgroundColor="purple" copyFirst={false}>
+  <Text tag="p" color="white" size="xxl">
+    “The creativity that goes into helping people have a better life is
+    extraordinary.”
+  </Text>
+</SingleMessage>;
 ```