fix(community-story-card): add media queries

telus · Jun 28, 2021 · ba19936 · ba19936
1 parent 6ccecf3
commit ba19936
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 11 deletions.
diff --git a/packages/StoryCard/StoryCard.jsx b/packages/StoryCard/StoryCard.jsx
@@ -31,7 +31,7 @@ const StoryCard = ({ storyType, date, title, description, imgUrl, href }) => {
         return <Clipboard size={20} />
       }
     }
-    return undefined
+    return <News size={20} />
   }
 
   return (
@@ -53,7 +53,7 @@ const StoryCard = ({ storyType, date, title, description, imgUrl, href }) => {
           <StyledDescription>{description}</StyledDescription>
         </StyledTextBox>
         <StyledImageContainer>
-          <StyledImage src={imgUrl} alt={description} width="100%" />
+          <StyledImage src={imgUrl} alt={description} />
         </StyledImageContainer>
       </StyledCard>
     </StyledLink>
@@ -78,7 +78,7 @@ StoryCard.propTypes = {
    */
   href: PropTypes.string.isRequired,
   /**
-   * The type of story, if it is one of Article, Podcast or Video, an icon will render beside it. If it is something else, there will be no icon.
+   * The type of story, one of Article, Podcast or Video. Default is Article
    */
   storyType: PropTypes.string,
   /**
@@ -88,7 +88,7 @@ StoryCard.propTypes = {
 }
 
 StoryCard.defaultProps = {
-  storyType: undefined,
+  storyType: 'Article',
   date: undefined,
 }
 

diff --git a/packages/StoryCard/StoryCard.md b/packages/StoryCard/StoryCard.md
@@ -7,7 +7,6 @@ The StoryCard component is meant to display a snippet of an Article, Podcast or
 
 ```jsx
 <StoryCard
-  storyType="Article"
   date="May 11th, 2021"
   title="Crisis Text Line provides mental health support for youth during lockdown"
   description="With the help of a Foundation grant, Kids Help Line was able to expand its mental health resources to include a Crisis Text Line in greater Edmonton."

diff --git a/packages/StoryCard/__tests__/__snapshots__/StoryCard.spec.jsx.snap b/packages/StoryCard/__tests__/__snapshots__/StoryCard.spec.jsx.snap
@@ -35,7 +35,6 @@ exports[`StoryCard renders with all props 1`] = `
       <style__StyledImage
         alt="With the help of a Foundation grant"
         src="blog-example.jpg"
-        width="100%"
       />
     </style__StyledImageContainer>
   </style__StyledCard>
@@ -51,7 +50,14 @@ exports[`StoryCard renders without required prop 1`] = `
     <style__StyledTextBox>
       <style__StyledInfoBox>
         <style__StyledIconTypeBox>
-          <style__StyledType />
+          <style__StyledIconBox>
+            <DecorativeIcon
+              size={20}
+            />
+          </style__StyledIconBox>
+          <style__StyledType>
+            Article
+          </style__StyledType>
         </style__StyledIconTypeBox>
         <style__StyledDate />
       </style__StyledInfoBox>
@@ -68,7 +74,6 @@ exports[`StoryCard renders without required prop 1`] = `
       <style__StyledImage
         alt="With the help of a Foundation grant"
         src="blog-example.jpg"
-        width="100%"
       />
     </style__StyledImageContainer>
   </style__StyledCard>

diff --git a/packages/StoryCard/style.js b/packages/StoryCard/style.js
@@ -16,6 +16,14 @@ export const StyledCard = styled.div`
     transform: scale(103%);
     border: 0.125rem solid ${colorTelusPurple};
   }
+  @media (max-width: 414px) {
+    max-width: 20rem;
+    min-height: 33rem;
+  }
+  @media (max-width: 320px) {
+    max-width: 18rem;
+    min-height: 32rem;
+  }
 `
 
 export const StyledLink = styled.a`
@@ -24,12 +32,19 @@ export const StyledLink = styled.a`
 `
 
 export const StyledTextBox = styled.div`
-  padding: 1.5rem 1rem;
+  padding: 0 1rem;
 `
 
 export const StyledInfoBox = styled.div`
   display: flex;
   justify-content: space-between;
+  padding: 2rem 0;
+  @media (max-width: 414px) {
+    padding: 1.5rem 0 2rem 0;
+  }
+  @media (max-width: 320px) {
+    padding: 1.5rem 0 1rem 0;
+  }
 `
 
 export const StyledType = styled.p`
@@ -48,7 +63,10 @@ export const StyledHeading = styled.h2`
 `
 
 export const StyledHeadingBox = styled.div`
-  padding: 1.5rem 0;
+  padding-bottom: 1.5rem;
+  @media (max-width: 320px) {
+    padding-bottom: 1rem;
+  }
 `
 
 export const StyledIconBox = styled.div`
@@ -59,15 +77,23 @@ export const StyledImageContainer = styled.div``
 
 export const StyledDescription = styled.p`
   font-size: 0.875rem;
+  padding-bottom: 1.5rem;
+  @media (max-width: 414px) {
+    padding-bottom: 1rem;
+  }
 `
 
 export const StyledIconTypeBox = styled.div`
   display: flex;
   border-bottom: 1px solid ${colorTelusPurple};
-  padding-bottom: 8px;
+  padding-bottom: 1rem;
+  @media (max-width: 414px) {
+    padding-bottom: 0.5rem;
+  }
 `
 
 export const StyledImage = styled.img`
   display: block;
   border-radius: 0 0 2px 2px;
+  width: 100%;
 `