Skip to content

Commit d45d2d8

Browse files
author
Celeste Glavin
authored
feat(card): add ray-card--row (#101)
* feat(card): add a card--horizontal modifier * fix(card): change name to row instead of horiztonal * fix(card): remove some unneeded custom styles * fix(card): fix typo and add a story * fix(card): oop forgot to add image * fix(card-row): add image on right support, add heading h2 styles * fix(card-row): stack on mobile/tablet * fix(ray-card): add support for all ratios * fix(ray-card): add support for bg images * chore: add responsive snapshots
1 parent a9488ef commit d45d2d8

File tree

4 files changed

+155
-8
lines changed

4 files changed

+155
-8
lines changed

‎docs/components/card.md

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,24 @@ title: Card
55

66
<page-intro>Cards are a unit of content, they typically have an image, a heading, and a small amount of copy. They are often used as links.</page-intro>
77

8-
<component
8+
<component
99
name="Card"
1010
component="card"
11-
variation="card"
11+
variation="card"
1212
>
1313
</component>
1414

15-
<component
15+
<component
16+
name="Card as a row"
17+
component="card"
18+
variation="card--row"
19+
>
20+
</component>
21+
22+
<component
1623
name="Card as a link"
1724
component="card"
18-
variation="card--link"
25+
variation="card--link"
1926
>
2027
</component>
2128

@@ -26,3 +33,4 @@ Use these modifiers with `.ray-card` class.
2633
| Selector | Description |
2734
| ----------------- | ------------------------------------------- |
2835
| `.ray-card--link` | Selector for applying link and hover styles |
36+
| `.ray-card--row` | Selector for applying row direction |

‎docs/html/card/card--row.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<div class="ray-card ray-card--row">
2+
<div class="ray-card__image ray-image ray-image--16by9">
3+
<img
4+
src="https://source.unsplash.com/random/800x450?minimalist"
5+
alt="card graphic"
6+
/>
7+
</div>
8+
9+
<div class="ray-card__content">
10+
<div class="ray-card__heading">Better Together</div>
11+
<div>
12+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem atque
13+
minima itaque sint! Doloremque odio quia saepe.
14+
</div>
15+
</div>
16+
</div>

‎packages/core/src/components/card/_card.scss

Lines changed: 70 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,20 +40,86 @@
4040
}
4141
}
4242

43+
$ray-image-ratio-map-half: (
44+
4by3: calc(50% / (4 / 3)),
45+
3by4: calc(50% / (3 / 4)),
46+
1by1: calc(50% / 1),
47+
16by9: calc(50% / (16 / 9)),
48+
cinema: calc(50% / 2.4)
49+
);
50+
51+
&--row {
52+
@media (min-width: map-get($ray-layout-grid-breakpoints, desktop)) {
53+
@each $ratio, $value in $ray-image-ratio-map-half {
54+
.#{$ray-class-prefix}image--#{$ratio} {
55+
padding-bottom: $value;
56+
}
57+
}
58+
59+
@each $ratio, $value in $ray-image-ratio-map-half {
60+
.#{$ray-class-prefix}bg--#{$ratio} {
61+
padding-bottom: $value;
62+
}
63+
}
64+
65+
.#{$ray-class-prefix}card__content {
66+
padding: 2.5rem;
67+
68+
&:first-child {
69+
border: $ray-border-width solid $ray-color-gray-10;
70+
border-right: 0;
71+
border-bottom-right-radius: 0;
72+
border-bottom-left-radius: $ray-border-radius;
73+
border-top-right-radius: 0;
74+
border-top-left-radius: $ray-border-radius;
75+
}
76+
77+
&:last-child {
78+
border-top: $ray-border-width solid $ray-color-gray-10;
79+
border-bottom-right-radius: $ray-border-radius;
80+
border-top-right-radius: $ray-border-radius;
81+
border-bottom-left-radius: 0;
82+
border-left: 0;
83+
}
84+
}
85+
86+
flex-direction: row;
87+
88+
.#{$ray-class-prefix}card__image,
89+
.#{$ray-class-prefix}card__content {
90+
width: 50%;
91+
}
92+
93+
.#{$ray-class-prefix}card__heading {
94+
@include ray-h2;
95+
}
96+
97+
.#{$ray-class-prefix}card__image {
98+
&:first-child {
99+
border-top-right-radius: 0;
100+
}
101+
102+
&:last-child {
103+
border-bottom-left-radius: 0;
104+
}
105+
}
106+
}
107+
}
108+
43109
&__content {
44110
flex-grow: 1;
45111
padding: $card-padding;
46-
border-left: 1px solid $ray-color-gray-10;
47-
border-right: 1px solid $ray-color-gray-10;
112+
border-left: $ray-border-width solid $ray-color-gray-10;
113+
border-right: $ray-border-width solid $ray-color-gray-10;
48114

49115
&:first-child {
50-
border-top: 1px solid $ray-color-gray-10;
116+
border-top: $ray-border-width solid $ray-color-gray-10;
51117
border-top-left-radius: $ray-border-radius;
52118
border-top-right-radius: $ray-border-radius;
53119
}
54120

55121
&:last-child {
56-
border-bottom: 1px solid $ray-color-gray-10;
122+
border-bottom: $ray-border-width solid $ray-color-gray-10;
57123
border-bottom-left-radius: $ray-border-radius;
58124
border-bottom-right-radius: $ray-border-radius;
59125
}

‎packages/core/stories/card.stories.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,14 @@ import React from 'react';
22
import { storiesOf } from '@storybook/react';
33

44
import getPlaceholderURL from './util/placeholder';
5+
import settings from '../src/global/js/settings';
6+
7+
const viewports = Object.values(settings.breakpointsInPixels).filter(Boolean);
58

69
storiesOf('Card', module)
10+
.addParameters({
11+
chromatic: { viewports }
12+
})
713
.add('card, link, image on top', () => (
814
<a
915
href="https://wework.com"
@@ -110,4 +116,55 @@ storiesOf('Card', module)
110116
<button className="ray-link">Share</button>
111117
</div>
112118
</div>
119+
))
120+
.add('card, as a row, image on left', () => (
121+
<div className="ray-card ray-card--row">
122+
<div className="ray-card__image ray-image ray-image--16by9">
123+
<img
124+
src="https://source.unsplash.com/random/800x450?minimalist"
125+
alt="card graphic"
126+
/>
127+
</div>
128+
<div className="ray-card__content">
129+
<div className="ray-card__heading">Better Together</div>
130+
<p className="ray-text--body">
131+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem
132+
atque minima itaque sint! Doloremque odio quia saepe.
133+
</p>
134+
</div>
135+
</div>
136+
))
137+
.add('card, as a row, image on right', () => (
138+
<div className="ray-card ray-card--row">
139+
<div className="ray-card__content">
140+
<div className="ray-card__heading">Better Together</div>
141+
<p className="ray-text--body">
142+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem
143+
atque minima itaque sint! Doloremque odio quia saepe.
144+
</p>
145+
</div>
146+
<div className="ray-card__image ray-image ray-image--16by9">
147+
<img
148+
src="https://source.unsplash.com/random/800x450?minimalist"
149+
alt="card graphic"
150+
/>
151+
</div>
152+
</div>
153+
))
154+
.add('card, as a row, 4x3 image on left', () => (
155+
<div className="ray-card ray-card--row">
156+
<div className="ray-card__image ray-image ray-image--4by3">
157+
<img
158+
src="https://source.unsplash.com/random/800x600?minimalist"
159+
alt="card graphic"
160+
/>
161+
</div>
162+
<div className="ray-card__content">
163+
<div className="ray-card__heading">Better Together</div>
164+
<p className="ray-text--body">
165+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem
166+
atque minima itaque sint! Doloremque odio quia saepe.
167+
</p>
168+
</div>
169+
</div>
113170
));

0 commit comments

Comments
 (0)