refactor(community-preview-card): move styled components outside render

telus · May 13, 2019 · fbf87e2 · fbf87e2
1 parent 6ca0747
commit fbf87e2
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 57 deletions.
diff --git a/packages/PreviewCard/PreviewCard.jsx b/packages/PreviewCard/PreviewCard.jsx
@@ -8,78 +8,82 @@ import Text from '@tds/core-text'
 import { componentWithName } from '@tds/util-prop-types'
 import { colorTelusPurple, colorWhiteLilac } from '@tds/core-colours'
 
+const Anchor = styled.a`
+  text-decoration: none;
+  cursor: pointer;
+`
+
+const BoxContainer = styled.div`
+  opacity: 1;
+  border: 1px solid ${colorWhiteLilac};
+  border-radius: 4px;
+  width: ${props => (props.header || props.footer ? '100%' : '269px')};
+  max-width: 346px;
+  height: ${props => (props.header || props.footer ? '465px' : '305px')};
+  @media (max-width: 576px) {
+    height: auto;
+    width: 100%;
+  }
+  overflow: hidden;
+  &:hover {
+    box-shadow: 0 0 16px 0 rgba(213, 213, 213, 0.5);
+  }
+`
+
+const ContentContainer = styled.div`
+  line-height: ${props => (props.header && props.footer ? '21px' : undefined)};
+`
+
+const ImageContainer = styled.div`
+  border-radius: 4px 4px 0 0;
+  width: ${props => (props.header || props.footer ? '100%' : '268px')};
+  overflow: hidden;
+  line-height: 0px;
+  & > img {
+    transition: all 0.3s ease-in-out;
+    &:hover {
+      transform: scale(1.03);
+    }
+  }
+`
+
+const P = styled.p`
+  color: ${colorTelusPurple};
+`
+
 /**
  * The PreviewCard component creates the appearance of a page snippet, and can be used in a list format.
  * @version ./package.json
  */
 const PreviewCard = ({ category, other, image, body, footer, ...rest }) => {
-  let header = category || other
-  if (category && other) {
-    header = `${category} \u00B7 ${other}`
-  }
-
   let newBody = body
   if (body.length > 70) {
     newBody = `${body.substr(0, 70)}...`
   }
 
-  const Anchor = styled.a`
-    text-decoration: none;
-    cursor: pointer;
-  `
-
-  const BoxContainer = styled.div`
-    opacity: 1;
-    border: 1px solid ${colorWhiteLilac};
-    border-radius: 4px;
-    width: ${header || footer ? '100%' : '269px'};
-    max-width: 346px;
-    height: ${header || footer ? '465px' : '305px'};
-    @media (max-width: 576px) {
-      height: auto;
-      width: 100%;
-    }
-    overflow: hidden;
-    &:hover {
-      box-shadow: 0 0 16px 0 rgba(213, 213, 213, 0.5);
-    }
-  `
-
-  const ContentContainer = styled.div`
-    line-height: ${header && footer && '21px'};
-  `
-
-  const ImageContainer = styled.div`
-    border-radius: 4px 4px 0 0;
-    width: ${header || footer ? '100%' : '268px'};
-    overflow: hidden;
-    line-height: 0px;
-    & > img {
-      transition: all 0.3s ease-in-out;
-      &:hover {
-        transform: scale(1.03);
-      }
-    }
-  `
-
-  const P = styled.p`
-    color: ${colorTelusPurple};
-  `
+  let header = category || other
+  if (category && other) {
+    header = `${category} \u00B7 ${other}`
+  }
 
   return (
     <Anchor {...safeRest(rest)}>
-      <BoxContainer>
-        {image && <ImageContainer>{image}</ImageContainer>}
+      <BoxContainer header={header} footer={footer}>
+        {image && (
+          <ImageContainer header={header} footer={footer}>
+            {image}
+          </ImageContainer>
+        )}
         <Box horizontal={header || footer ? 4 : 3} vertical={header || footer ? 5 : 3}>
-          <ContentContainer data-testid="contentContainer">
+          <ContentContainer header={header} footer={footer} data-testid="contentContainer">
             {header && (
               <Box>
                 <Text size="small" bold>
                   {header}
                 </Text>
               </Box>
             )}
-            <Box vertical={header && 3}>
+            <Box vertical={header || footer ? 3 : undefined}>
               <P alt={body}>{newBody}</P>
             </Box>
             {footer && (

diff --git a/packages/PreviewCard/__tests__/__snapshots__/PreviewCard.spec.jsx.snap b/packages/PreviewCard/__tests__/__snapshots__/PreviewCard.spec.jsx.snap
@@ -4,8 +4,14 @@ exports[`PreviewCard renders with all props 1`] = `
 <styled.a
   href="#"
 >
-  <styled.div>
-    <styled.div>
+  <styled.div
+    footer="By Halo"
+    header="development · April 1st, 2019"
+  >
+    <styled.div
+      footer="By Halo"
+      header="development · April 1st, 2019"
+    >
       <Image
         alt="Image of co-workers collaborating"
         height={300}
@@ -21,6 +27,8 @@ exports[`PreviewCard renders with all props 1`] = `
     >
       <styled.div
         data-testid="contentContainer"
+        footer="By Halo"
+        header="development · April 1st, 2019"
       >
         <Box
           inline={false}
@@ -69,8 +77,12 @@ exports[`PreviewCard renders with category and other 1`] = `
 <styled.a
   href="#"
 >
-  <styled.div>
-    <styled.div>
+  <styled.div
+    header="development · April 1st, 2019"
+  >
+    <styled.div
+      header="development · April 1st, 2019"
+    >
       <Image
         alt="Image of co-workers collaborating"
         height={300}
@@ -86,6 +98,7 @@ exports[`PreviewCard renders with category and other 1`] = `
     >
       <styled.div
         data-testid="contentContainer"
+        header="development · April 1st, 2019"
       >
         <Box
           inline={false}
@@ -121,8 +134,12 @@ exports[`PreviewCard renders with footer 1`] = `
 <styled.a
   href="#"
 >
-  <styled.div>
-    <styled.div>
+  <styled.div
+    footer="By Halo"
+  >
+    <styled.div
+      footer="By Halo"
+    >
       <Image
         alt="Image of co-workers collaborating"
         height={300}
@@ -138,10 +155,12 @@ exports[`PreviewCard renders with footer 1`] = `
     >
       <styled.div
         data-testid="contentContainer"
+        footer="By Halo"
       >
         <Box
           inline={false}
           tag="div"
+          vertical={3}
         >
           <styled.p
             alt="Hello world!"