Skip to content

Commit e407771

Browse files
MelSumnerMelSumner
authored
Merge pull request #218 from ember-learn/card-component
Update card component
2 parents 9e896a2 + b39a309 commit e407771

File tree

16 files changed

+253
-28
lines changed

16 files changed

+253
-28
lines changed

‎addon/components/es-card.js

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,5 @@
1-
import Component from '@ember/component';
2-
import layout from '../templates/components/es-card';
1+
import Component from 'sparkles-component';
32

4-
export default Component.extend({
5-
layout,
6-
classNames: ['es-card'],
7-
classNameBindings: ['hasBorder:border'],
3+
export default class EsCard extends Component {
84

9-
//accessibility support
10-
ariaDescribedby: null,
11-
ariaLabel: null,
12-
ariaRole: null,
13-
title: null,
14-
15-
hasBorder: false
16-
});
5+
}

‎addon/styles/components/es-card.css

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,52 @@
11
.card {
22
border: 1px solid var(--color-gray);
3-
margin-bottom: var(--spacing-2);
43
border-radius: 4px;
54
height: 100%;
65
overflow: hidden;
6+
position: relative;
7+
}
8+
9+
.card[card-link] h1 > a::after,
10+
.card[card-link] h2 > a::after,
11+
.card[card-link] h3 > a::after,
12+
.card[card-link] h4 > a::after {
13+
position: absolute;
14+
top:0;
15+
left: 0;
16+
right: 0;
17+
bottom: 0;
18+
content: '';
19+
}
20+
21+
.card[card-link] a {
22+
color: inherit;
23+
}
24+
25+
.card[card-link]:focus-within,
26+
.card[card-link]:hover {
27+
background-color: var(--color-muted);
28+
}
29+
30+
.card__image {
31+
display: block;
32+
max-width: 64px;
33+
max-height: 64px;
34+
35+
margin: var(--spacing-2);
36+
float: left;
37+
}
38+
39+
.card[vertical] .card__image {
40+
margin: var(--spacing-2) auto;
41+
float: none;
42+
}
43+
44+
.card[full-image] .card__image {
45+
max-width: 100%;
46+
max-height: inherit;
47+
margin: 0;
748
}
849

950
.card-content {
10-
padding: var(--spacing-2);
51+
margin: var(--spacing-2);
1152
}

‎addon/styles/global.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,15 @@ body {
6161
line-height: var(--line-height-2);
6262
}
6363

64+
a {
65+
color: var(--color-orange);
66+
text-decoration: none;
67+
}
68+
69+
a:active, .active {
70+
color: var(--color-dark);
71+
}
72+
6473
p {
6574
margin: 0 0 1rem 0;
6675
}

‎addon/styles/helpers.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -322,6 +322,12 @@
322322
padding-right: var(--spacing-5);
323323
}
324324

325+
.list-unstyled {
326+
list-style: none;
327+
padding: 0;
328+
margin: 0;
329+
}
330+
325331
.max-width {
326332
max-width: 100%;
327333
}

‎addon/styles/layout.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,16 @@
44
width: var(--max-width);
55
}
66

7+
.flex-row {
8+
display: flex;
9+
align-items: center;
10+
flex-direction: row;
11+
}
12+
13+
.justify-content-between {
14+
justify-content: space-between;
15+
}
16+
717
.layout-grid {
818
display: grid;
919
grid-template-columns: repeat(6,1fr);

‎addon/styles/typography.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,3 +134,7 @@ strong {
134134
.text-light {
135135
color: var(--color-light);
136136
}
137+
138+
.text-muted {
139+
color: var(--color-gray);
140+
}

‎addon/templates/components/es-card.hbs

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,8 @@
1-
{{yield}}
1+
<li class="card" ...attributes>
2+
{{#if @image}}
3+
<img class="card__image" src={{@image}} alt={{if @alt @alt ""}}>
4+
{{/if}}
5+
<div class="card-content">
6+
{{yield}}
7+
</div>
8+
</li>

‎app/components/es-card.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { default } from 'ember-styleguide/components/es-card';
1+
export { default } from 'ember-styleguide/components/es-card';

‎app/templates/components/es-card.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from 'ember-styleguide/templates/components/es-card';

‎docs/components/card.md

Lines changed: 151 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,156 @@
11
# Card
22

3-
```handlebars
4-
{{#es-card}}
5-
This is a card
6-
{{/es-card}}
3+
A card component that serves as a content container for images, text and links. When used within grid layouts cards are expected to share the same content structure and matching height. For accessibility reasons cards should always be implemented as lists, and for this reason the `<EsCard>` component's root element is a `<li>` so it should always be wrapped in a `<ul>`.
4+
5+
Here is an example of a card
6+
7+
```html
8+
<ul class="list-unstyled">
9+
<EsCard>
10+
This is a card
11+
</EsCard>
12+
</ul>
13+
```
14+
15+
You can also add an image to the card using the `@image` parameter:
16+
17+
18+
```html
19+
<ul class="list-unstyled">
20+
<EsCard @image="/ember-logo.png">
21+
This is a card
22+
</EsCard>
23+
</ul>
24+
```
25+
26+
By default images will be considered decorative and ignored by screen readers, but if you want to provide an alt text for the image you can provide it with the `@alt` parameter:
27+
28+
```html
29+
<ul class="list-unstyled">
30+
<EsCard @image="/ember-logo.png" @alt="Ember Logo">
31+
This is a card
32+
</EsCard>
33+
</ul>
34+
```
35+
36+
By default the card will have the image to the left of the content. If you want to make the card a **vertical** card you can apply the `vertical` attribute;
37+
38+
```html
39+
<ul class="list-unstyled">
40+
<EsCard @image="/ember-logo.png" vertical>
41+
This is a card
42+
</EsCard>
43+
</ul>
44+
```
45+
46+
It is unlikely that you will be using this vertical display of a card with a full width container so you might want to use a layout grid to contain the card:
47+
48+
49+
```html
50+
<ul class="list-unstyled layout-grid">
51+
<EsCard @image="/ember-logo.png" vertical class="col-2-large">
52+
this is a card
53+
</EsCard>
54+
<EsCard @image="/ember-logo.png" vertical class="col-2-large">
55+
this is another card
56+
</EsCard>
57+
</ul>
758
```
859

9-
```handlebars
10-
{{#es-card hasBorder=true}}
11-
This is a card
12-
{{/es-card}}
60+
If you want the image to take up the full available width of the card you can apply the `full-image` attribute:
61+
62+
```html
63+
<ul class="list-unstyled layout-grid">
64+
<EsCard @image="/ember-logo.png" vertical full-image class="col-2-large">
65+
this is a card
66+
</EsCard>
67+
<EsCard @image="/ember-logo.png" vertical full-image class="col-2-large">
68+
this is another card
69+
</EsCard>
70+
</ul>
71+
```
72+
73+
And here is a fuller example of a vertical, full-image card that has more structure in the card body
74+
75+
```html
76+
<ul class="list-unstyled layout-grid">
77+
<EsCard @image="/ember-logo.png" vertical full-image class="col-2-large">
78+
<h3>Ember.js</h3>
79+
<p>A framework for ambitious web developers. Try it out!</p>
80+
<div class="flex-row justify-content-between">
81+
<div><a href="#">Visit Website</a></div>
82+
<div class="xsmall text-muted">COPYRIGHT 2019 TILDE INC.</div>
83+
</div>
84+
</EsCard>
85+
</ul>
86+
```
87+
88+
You can also create a card that allows a link to an external resource using `<a href=""></a>` somewhere in the card body, most likely in the header:
89+
90+
91+
```html
92+
<ul class="list-unstyled">
93+
<EsCard @image="/images/icons/discuss-logo.svg">
94+
<h3>
95+
<a href="http://discuss.emberjs.com">Discussion Forum</a>
96+
</h3>
97+
<p>Post and search longer-form questions in our public forum.</p>
98+
</EsCard>
99+
</ul>
100+
```
101+
102+
But if you would like the whole card to become interactive and act as a link you can add the `card-link` attribute. This will stretch the link to be the full area of the card:
103+
104+
```html
105+
<ul class="list-unstyled">
106+
<EsCard @image="/images/icons/discuss-logo.svg" card-link>
107+
<h3>
108+
<a href="http://discuss.emberjs.com">Discussion Forum</a>
109+
</h3>
110+
<p>Post and search longer-form questions in our public forum.</p>
111+
</EsCard>
112+
</ul>
113+
```
114+
115+
And here is a full card based page layout that might be useful when building sites using this component:
116+
117+
```html
118+
<ul class="list-unstyled layout-grid">
119+
<EsCard class="col-3-large" @image="/images/icons/discuss-logo.svg" card-link>
120+
<h3>
121+
<a href="http://discuss.emberjs.com">Discussion Forum</a>
122+
</h3>
123+
<p>Post and search longer-form questions in our public forum.</p>
124+
</EsCard>
125+
<EsCard class="col-3-large" @image="/images/icons/discord-logo.svg" card-link>
126+
<h3>
127+
<a href="https://discord.gg/emberjs">Discord community chat</a>
128+
</h3>
129+
<p>Join our real-time chat server to connect with other developers and get answers.</p>
130+
</EsCard>
131+
</ul>
132+
133+
<p class="col-6-large">Beyond our core online channels, you can dig deeper with these learning resources from the community members</p>
134+
135+
<ul class="list-unstyled layout-grid">
136+
<EsCard class="col-2-large text-center" vertical @image="/images/icons/mic-icon.svg">
137+
<h3>Podcasts</h3>
138+
<ul class="list-unstyled">
139+
<li><a href="embermap somewhere">Ember Weekly</a></li>
140+
<li><a href="embermap somewhere">Ember Map Podcast</a></li>
141+
</ul>
142+
</EsCard>
143+
<EsCard class="col-2-large text-center" vertical @image="/images/icons/book-icon.svg">
144+
<h3>Books</h3>
145+
<ul class="list-unstyled">
146+
<li><a href="embermap somewhere">Rock and Roll with Ember.js</a></li>
147+
</ul>
148+
</EsCard>
149+
<EsCard class="col-2-large text-center" vertical @image="/images/icons/tv-icon.svg">
150+
<h3>Videos</h3>
151+
<ul class="list-unstyled">
152+
<li><a href="embermap somewhere">Ember Map</a></li>
153+
</ul>
154+
</EsCard>
155+
</ul>
13156
```

0 commit comments

Comments
 (0)