Merge pull request #53 from comicrelief/feature/33_Card_childprops

Card with children props
comicrelief · Jul 16, 2019 · 5973bb7 · 5973bb7
2 parents a4c4892 + 60c8def
commit 5973bb7
Show file tree

Hide file tree

Showing 10 changed files with 214 additions and 17 deletions.
diff --git a/src/components/Atoms/Link/Link.js b/src/components/Atoms/Link/Link.js
@@ -1,19 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import StyledLink from './Link.style';
+import { StyledLink, WrapperLink } from './Link.style';
 
-const Link = ({ children, color, href, target, inline, ...rest }) => {
+const Link = ({ children, color, href, target, inline, wrapper, ...rest }) => {
   const window = target === 'blank' ? '_blank' : '_self';
 
-  return (
+  return wrapper ? (
+    <span>
+      <WrapperLink {...rest} color={color} inline={inline}>
+        {children}
+      </WrapperLink>
+    </span>
+  ) : (
     <span>
       <StyledLink
         {...rest}
         color={color}
         href={href}
         target={window}
         inline={inline}
+        as="a"
       >
         {children}
       </StyledLink>
@@ -24,6 +31,7 @@ const Link = ({ children, color, href, target, inline, ...rest }) => {
 Link.propTypes = {
   /** Inline is link style */
   inline: PropTypes.bool,
+  wrapper: PropTypes.bool,
   /** Button color style */
   color: PropTypes.string,
   /** link target */
@@ -36,7 +44,8 @@ Link.propTypes = {
 Link.defaultProps = {
   color: 'red',
   target: 'self',
-  inline: false
+  inline: false,
+  wrapper: false
 };
 
 export default Link;
diff --git a/src/components/Atoms/Link/Link.md b/src/components/Atoms/Link/Link.md
@@ -1,8 +1,14 @@
 ```js
 <div>
   <div style={{ display: 'block', marginBottom: '10px' }}>
-    <Link color="black" href="#anchor" target="self" inline={false}>
-      Link as button
+    <Link
+      color="black"
+      href="#anchor"
+      target="self"
+      inline={false}
+      wrapper={true}
+    >
+      <a href="#">Link as button</a>
     </Link>
   </div>
   <div style={{ display: 'block', marginBottom: '10px' }}>

diff --git a/src/components/Atoms/Link/Link.style.js b/src/components/Atoms/Link/Link.style.js
@@ -48,7 +48,7 @@ const buttonStyle = () => css`
       `)};
 `;
 
-const StyledLink = styled.a`
+export const StyledLink = styled.a`
   ${props =>
     props.inline
       ? css`
@@ -62,4 +62,18 @@ const StyledLink = styled.a`
       : buttonStyle}
 `;
 
-export default StyledLink;
+export const WrapperLink = styled.span`
+  a {
+    ${props =>
+      props.inline
+        ? css`
+            color: #000;
+            text-decoration: none;
+            display: inline-block;
+            padding: 0 2px 1px;
+            border-bottom: 2px solid;
+            border-bottom-color: #000;
+          `
+        : buttonStyle}
+  }
+`;
diff --git a/src/components/Molecules/ArticleTeaser/ArticleTeaser.js b/src/components/Molecules/ArticleTeaser/ArticleTeaser.js
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 
 import Text from '../../Atoms/Text/Text';
 import Picture from '../../Atoms/Picture/Picture';
-import StyledLink from '../../Atoms/Link/Link.style';
 
 /**
  * Article tag wrapper
@@ -16,11 +15,13 @@ const Wrapper = styled.article`
   background-color: #fff;
 `;
 
-const Link = styled(StyledLink)`
+const Link = styled.a`
   display: flex;
   height: 100%;
   border: 0;
   flex-direction: column;
+  text-decoration: none;
+  color: inherit;
   @media ${({ theme }) => theme.breakpoint('small')} {
     flex-direction: row;
   }

diff --git a/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js b/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js
@@ -46,13 +46,6 @@ it('renders correctly', () => {
     }
 
     .c1 {
-      color: #000;
-      -webkit-text-decoration: none;
-      text-decoration: none;
-      display: inline-block;
-      padding: 0 2px 1px;
-      border-bottom: 2px solid;
-      border-bottom-color: #000;
       display: -webkit-box;
       display: -webkit-flex;
       display: -ms-flexbox;
@@ -62,6 +55,9 @@ it('renders correctly', () => {
       -webkit-flex-direction: column;
       -ms-flex-direction: column;
       flex-direction: column;
+      -webkit-text-decoration: none;
+      text-decoration: none;
+      color: inherit;
     }
 
     .c2 {

diff --git a/src/components/Molecules/Card/Card.js b/src/components/Molecules/Card/Card.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import Picture from '../../Atoms/Picture/Picture';
+
+const Container = styled.div`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  justify-content: flex-end;
+  height: 100%;
+  background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
+`;
+
+const Image = styled.div`
+  height: 50%;
+`;
+
+const Copy = styled.div`
+  padding: 20px;
+  height: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+const Card = ({ backgroundColor, image, images, imageAltText, children }) => {
+  return (
+    <Container backgroundColor={backgroundColor}>
+      {image ? (
+        <Image>
+          <Picture
+            alt={imageAltText}
+            image={image}
+            images={images}
+            objectFit="cover"
+            width="100%"
+            height="100%"
+          />
+        </Image>
+      ) : null}
+      <Copy>{children}</Copy>
+    </Container>
+  );
+};
+
+Card.propTypes = {
+  backgroundColor: PropTypes.string,
+  image: PropTypes.string,
+  images: PropTypes.string,
+  imageAltText: PropTypes.string,
+  children: PropTypes.node.isRequired
+};
+
+Card.defaultProps = {
+  backgroundColor: 'white',
+  image: null,
+  images: null,
+  imageAltText: ''
+};
+
+export default Card;
diff --git a/src/components/Molecules/Card/Card.md b/src/components/Molecules/Card/Card.md
@@ -0,0 +1,14 @@
+Card
+
+```js
+const data = require('../../../styleguide/data/data').default;
+import Text from '../../Atoms/Text/Text';
+import Link from '../../Atoms/Link/Link';
+
+<Card image={data.image} images={data.image} backgroundColor="yellow">
+  <Text tag="h3" color="purple" size="xl">
+    Title
+  </Text>
+  <Text tag="p">Text body copy description</Text>
+</Card>;
+```
diff --git a/src/components/Molecules/Card/Card.test.js b/src/components/Molecules/Card/Card.test.js
@@ -0,0 +1,89 @@
+import React from 'react';
+import 'jest-styled-components';
+import renderWithTheme from '../../../hoc/shallowWithTheme';
+import Card from './Card';
+import data from '../../../styleguide/data/data';
+
+it('renders correctly', () => {
+  const tree = renderWithTheme(
+    <Card image={data.image} images={data.image} backgroundColor="yellow">
+      <h2>Title</h2>
+      <p>Description</p>
+    </Card>
+  ).toJSON();
+
+  expect(tree).toMatchInlineSnapshot(`
+    .c2 {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .c0 {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      position: relative;
+      -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+      flex-direction: column;
+      -webkit-box-pack: end;
+      -webkit-justify-content: flex-end;
+      -ms-flex-pack: end;
+      justify-content: flex-end;
+      height: 100%;
+      background: #fbef51;
+    }
+
+    .c1 {
+      height: 50%;
+    }
+
+    .c3 {
+      padding: 20px;
+      height: 50%;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+      flex-direction: column;
+      -webkit-box-pack: justify;
+      -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+      justify-content: space-between;
+    }
+
+    <div
+      className="c0"
+    >
+      <div
+        className="c1"
+      >
+        <img
+          alt=""
+          className="lazyload c2"
+          data-sizes="auto"
+          data-srcset="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w"
+          height="100%"
+          src="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w"
+          srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+          width="100%"
+        />
+      </div>
+      <div
+        className="c3"
+      >
+        <h2>
+          Title
+        </h2>
+        <p>
+          Description
+        </p>
+      </div>
+    </div>
+  `);
+});
diff --git a/src/index.js b/src/index.js
@@ -41,3 +41,4 @@ export {
 export {
   default as ArticleBlock
 } from './components/Molecules/ArticleTeaser/ArticleTeaser';
+export { default as Card } from './components/Molecules/Card/Card';
diff --git a/src/theme/shared/fonts.css b/src/theme/shared/fonts.css
@@ -10,6 +10,11 @@ html {
   box-sizing: inherit;
 }
 
+body {
+  margin: 0px;
+  padding: 0px;
+}
+
 h1,
 h2,
 h3,
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,6 +10,11 @@ html { @@
       box-sizing: inherit;
     }
+    body {
+      margin: 0px;
+      padding: 0px;
+    }
     h1,
     h2,
     h3,
@@ Expand Down @@