Skip to content

Commit dbd3bc2

Browse files
Julia Dufresnejraff
Julia Dufresne
authored and
jraff
committed
fix(community-story-card): update height styling and remove div
1 parent 503ee31 commit dbd3bc2

File tree

3 files changed

+89
-96
lines changed

3 files changed

+89
-96
lines changed

‎packages/StoryCard/StoryCard.jsx‎

Lines changed: 20 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
StyledHeading,
1212
StyledDescription,
1313
StyledIconTypeBox,
14-
StyledLink,
1514
StyledIconBox,
1615
StyledImageContainer,
1716
StyledImage,
@@ -35,28 +34,26 @@ const StoryCard = ({ storyType, date, title, description, imgUrl, href }) => {
3534
}
3635

3736
return (
38-
<StyledLink href={href} title={title}>
39-
<StyledCard>
40-
<StyledTextBox>
41-
<StyledInfoBox>
42-
<StyledIconTypeBox>
43-
{selectIcon(storyType) !== undefined && (
44-
<StyledIconBox>{selectIcon(storyType)}</StyledIconBox>
45-
)}
46-
<StyledType>{storyType}</StyledType>
47-
</StyledIconTypeBox>
48-
<StyledDate>{date}</StyledDate>
49-
</StyledInfoBox>
50-
<StyledHeadingBox>
51-
<StyledHeading>{title}</StyledHeading>
52-
</StyledHeadingBox>
53-
<StyledDescription>{description}</StyledDescription>
54-
</StyledTextBox>
55-
<StyledImageContainer>
56-
<StyledImage src={imgUrl} alt={description} />
57-
</StyledImageContainer>
58-
</StyledCard>
59-
</StyledLink>
37+
<StyledCard href={href} title={title}>
38+
<StyledTextBox>
39+
<StyledInfoBox>
40+
<StyledIconTypeBox>
41+
{selectIcon(storyType) !== undefined && (
42+
<StyledIconBox>{selectIcon(storyType)}</StyledIconBox>
43+
)}
44+
<StyledType>{storyType}</StyledType>
45+
</StyledIconTypeBox>
46+
<StyledDate>{date}</StyledDate>
47+
</StyledInfoBox>
48+
<StyledHeadingBox>
49+
<StyledHeading>{title}</StyledHeading>
50+
</StyledHeadingBox>
51+
<StyledDescription>{description}</StyledDescription>
52+
</StyledTextBox>
53+
<StyledImageContainer>
54+
<StyledImage src={imgUrl} alt={description} />
55+
</StyledImageContainer>
56+
</StyledCard>
6057
)
6158
}
6259

‎packages/StoryCard/__tests__/__snapshots__/StoryCard.spec.jsx.snap‎

Lines changed: 64 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,77 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`StoryCard renders with all props 1`] = `
4-
<style__StyledLink
4+
<style__StyledCard
55
href="kids-help-line"
66
title="Crisis Text Line provides mental health support for youth during lockdown"
77
>
8-
<style__StyledCard>
9-
<style__StyledTextBox>
10-
<style__StyledInfoBox>
11-
<style__StyledIconTypeBox>
12-
<style__StyledIconBox>
13-
<DecorativeIcon
14-
size={20}
15-
/>
16-
</style__StyledIconBox>
17-
<style__StyledType>
18-
Article
19-
</style__StyledType>
20-
</style__StyledIconTypeBox>
21-
<style__StyledDate>
22-
May 11th, 2021
23-
</style__StyledDate>
24-
</style__StyledInfoBox>
25-
<style__StyledHeadingBox>
26-
<style__StyledHeading>
27-
Crisis Text Line provides mental health support for youth during lockdown
28-
</style__StyledHeading>
29-
</style__StyledHeadingBox>
30-
<style__StyledDescription>
31-
With the help of a Foundation grant
32-
</style__StyledDescription>
33-
</style__StyledTextBox>
34-
<style__StyledImageContainer>
35-
<style__StyledImage
36-
alt="With the help of a Foundation grant"
37-
src="blog-example.jpg"
38-
/>
39-
</style__StyledImageContainer>
40-
</style__StyledCard>
41-
</style__StyledLink>
8+
<style__StyledTextBox>
9+
<style__StyledInfoBox>
10+
<style__StyledIconTypeBox>
11+
<style__StyledIconBox>
12+
<DecorativeIcon
13+
size={20}
14+
/>
15+
</style__StyledIconBox>
16+
<style__StyledType>
17+
Article
18+
</style__StyledType>
19+
</style__StyledIconTypeBox>
20+
<style__StyledDate>
21+
May 11th, 2021
22+
</style__StyledDate>
23+
</style__StyledInfoBox>
24+
<style__StyledHeadingBox>
25+
<style__StyledHeading>
26+
Crisis Text Line provides mental health support for youth during lockdown
27+
</style__StyledHeading>
28+
</style__StyledHeadingBox>
29+
<style__StyledDescription>
30+
With the help of a Foundation grant
31+
</style__StyledDescription>
32+
</style__StyledTextBox>
33+
<style__StyledImageContainer>
34+
<style__StyledImage
35+
alt="With the help of a Foundation grant"
36+
src="blog-example.jpg"
37+
/>
38+
</style__StyledImageContainer>
39+
</style__StyledCard>
4240
`;
4341

4442
exports[`StoryCard renders without required prop 1`] = `
45-
<style__StyledLink
43+
<style__StyledCard
4644
href="kids-help-line"
4745
title="Crisis Text Line provides mental health support for youth during lockdown"
4846
>
49-
<style__StyledCard>
50-
<style__StyledTextBox>
51-
<style__StyledInfoBox>
52-
<style__StyledIconTypeBox>
53-
<style__StyledIconBox>
54-
<DecorativeIcon
55-
size={20}
56-
/>
57-
</style__StyledIconBox>
58-
<style__StyledType>
59-
Article
60-
</style__StyledType>
61-
</style__StyledIconTypeBox>
62-
<style__StyledDate />
63-
</style__StyledInfoBox>
64-
<style__StyledHeadingBox>
65-
<style__StyledHeading>
66-
Crisis Text Line provides mental health support for youth during lockdown
67-
</style__StyledHeading>
68-
</style__StyledHeadingBox>
69-
<style__StyledDescription>
70-
With the help of a Foundation grant
71-
</style__StyledDescription>
72-
</style__StyledTextBox>
73-
<style__StyledImageContainer>
74-
<style__StyledImage
75-
alt="With the help of a Foundation grant"
76-
src="blog-example.jpg"
77-
/>
78-
</style__StyledImageContainer>
79-
</style__StyledCard>
80-
</style__StyledLink>
47+
<style__StyledTextBox>
48+
<style__StyledInfoBox>
49+
<style__StyledIconTypeBox>
50+
<style__StyledIconBox>
51+
<DecorativeIcon
52+
size={20}
53+
/>
54+
</style__StyledIconBox>
55+
<style__StyledType>
56+
Article
57+
</style__StyledType>
58+
</style__StyledIconTypeBox>
59+
<style__StyledDate />
60+
</style__StyledInfoBox>
61+
<style__StyledHeadingBox>
62+
<style__StyledHeading>
63+
Crisis Text Line provides mental health support for youth during lockdown
64+
</style__StyledHeading>
65+
</style__StyledHeadingBox>
66+
<style__StyledDescription>
67+
With the help of a Foundation grant
68+
</style__StyledDescription>
69+
</style__StyledTextBox>
70+
<style__StyledImageContainer>
71+
<style__StyledImage
72+
alt="With the help of a Foundation grant"
73+
src="blog-example.jpg"
74+
/>
75+
</style__StyledImageContainer>
76+
</style__StyledCard>
8177
`;

‎packages/StoryCard/style.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import styled from 'styled-components'
22
import { colorGreyGainsboro, colorTelusPurple, colorWhite, colorShark } from '@tds/core-colours'
33

4-
export const StyledCard = styled.div`
4+
export const StyledCard = styled.a`
5+
flex: 1;
6+
text-decoration: none;
7+
color: inherit;
58
margin: 0;
6-
max-width: 29.188rem;
7-
min-height: 625.75px;
9+
max-width: 30rem;
810
background: ${colorWhite};
911
border-radius: 3px;
1012
border: 1px solid ${colorGreyGainsboro};
@@ -19,11 +21,9 @@ export const StyledCard = styled.div`
1921
}
2022
@media (max-width: 414px) {
2123
max-width: 20rem;
22-
min-height: 33rem;
2324
}
2425
@media (max-width: 320px) {
2526
max-width: 18rem;
26-
min-height: 32rem;
2727
}
2828
`
2929

0 commit comments

Comments
 (0)