Skip to content

Commit 03047f8

Browse files
wesleyboarwesleyboar
authored
enhance(card): linked images (#419)
* enhance(card): table of contents for image cards * feat(x-link): block-link * docs(card): add linked images to demo * fix(card): linked image layout bugs and missing ux
1 parent 862bbd0 commit 03047f8

File tree

8 files changed

+167
-20
lines changed

8 files changed

+167
-20
lines changed

Diff for: ‎dist/components/c-card.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎dist/core-styles.cms.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎dist/core-styles.docs.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎src/lib/_imports/components/c-card.css

+27-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import url("../objects/o-section.selectors.css");
22
@import url("../tools/selectors.css");
3+
@import url("../tools/x-link.css");
34

45
@import url("./c-button.selectors.css");
56
@import url("./c-card.selectors.css");
@@ -128,7 +129,7 @@
128129
:--c-card > p > a:not(:--c-button):has(.icon):not(:last-child) {
129130
margin-right: 1rem;
130131
}
131-
:--c-card > :is(:--action) {
132+
:--c-card > :--action:not(:--c-card__image) {
132133
vertical-align: middle;
133134

134135
margin-bottom: 2rem; /* mimic <p> `margin-bottom` */
@@ -255,8 +256,8 @@
255256
/* Repeat many times, because element count is unknown */
256257
grid-template-rows: repeat(10, min-content);
257258
}
258-
:--c-card--image-left > img,
259-
:--c-card--image-right > img {
259+
:--c-card--image-left > :--c-card__image,
260+
:--c-card--image-right > :--c-card__image {
260261
grid-row-start: 1;
261262
grid-row-end: -1;
262263

@@ -267,15 +268,15 @@
267268
:--c-card--image-left {
268269
grid-template-columns: var(--image-width) 1fr; /* to overwrite `.c-card` */
269270
}
270-
:--c-card--image-left > img {
271+
:--c-card--image-left > :--c-card__image {
271272
grid-column-start: 1;
272273
grid-column-end: span 1;
273274
}
274275

275276
:--c-card--image-right {
276277
grid-template-columns: 1fr var(--image-width); /* to overwrite `.c-card` */
277278
}
278-
:--c-card--image-right > img {
279+
:--c-card--image-right > :--c-card__image {
279280
grid-column-start: 2;
280281
grid-column-end: span 1;
281282
}
@@ -295,35 +296,50 @@
295296
grid-template-columns: var(--global-space--pattern-pad) 1fr var(--global-space--pattern-pad);
296297
padding-inline: unset;
297298
}
298-
:--c-card--image-top > :not(img),
299-
:--c-card--image-bottom > :not(img) {
299+
:--c-card--image-top > :not(:--c-card__image),
300+
:--c-card--image-bottom > :not(:--c-card__image) {
300301
/* Span only columns for content */
301302
grid-column-start: 2;
302303
grid-column-end: -2;
303304
}
304-
:--c-card--image-top > img,
305-
:--c-card--image-bottom > img {
305+
:--c-card--image-top > :--c-card__image,
306+
:--c-card--image-bottom > :--c-card__image {
306307
/* Span all columns, padding and content */
307308
grid-column-start: 1;
308309
grid-column-end: -1;
309310
}
310311

311-
:--c-card--image-top > img {
312+
:--c-card--image-top > :--c-card__image {
312313
grid-row-start: 1;
313314
margin-bottom: var(--global-space--pattern-pad);
314315
}
315316
:--c-card--image-bottom > :is(h1, h2, h3, h4, h5):first-of-type {
316317
margin-top: unset; /* to avoid combining margin with image */
317318
}
318319

319-
:--c-card--image-bottom > img {
320+
:--c-card--image-bottom > :--c-card__image {
320321
grid-row-end: -1;
321322
margin-top: var(--global-space--pattern-pad);
322323
}
323324
:--c-card--image-bottom > p:last-of-type {
324325
margin-bottom: unset; /* to avoid combining margin with image */
325326
}
326327

328+
/* Image: Link */
329+
330+
:--c-card__image-link {
331+
@mixin block-link;
332+
}
333+
:--c-card__image-link:not([href]) {
334+
@mixin block-link--disabled;
335+
}
336+
:--c-card__image-link:hover {
337+
@mixin block-link--hover;
338+
}
339+
:--c-card__image-link:active {
340+
@mixin block-link--active;
341+
}
342+
327343
/* Image: Contact Card */
328344

329345
:--c-card--image-top h4 {

Diff for: ‎src/lib/_imports/components/c-card.selectors.css

+7
Original file line numberDiff line numberDiff line change
@@ -50,3 +50,10 @@
5050
@custom-selector :--c-card--image-right
5151
.c-card--image-right,
5252
.card--image-right;
53+
54+
@custom-selector :--c-card__image
55+
img,
56+
:--c-card__image-link;
57+
58+
@custom-selector :--c-card__image-link
59+
a:has(> img);

Diff for: ‎src/lib/_imports/components/c-card/_c-card--image.hbs

+23-2
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,27 @@
33

44
<h4><a href="#">Bender Rodríguez</a></h4>
55
<p>Planet Express Worker</p>
6-
<p>Anti-hero in Futurama</p>
6+
<p>(Anti-hero in Futurama)</p>
7+
<p><strong>
8+
{{#if image-link}}
9+
Image <em>IS</em> a link
10+
{{else}}
11+
Image is <em>NOT</em> a link
12+
{{/if}}
13+
</strong></p>
14+
{{#if image-link}}
15+
<a href="{{image-link}}">
16+
<img class="img-fluid" width="234px" height="293px"
17+
src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png"
18+
title="University of Texas at Austin" class="img-fluid"
19+
/>
20+
</a>
21+
{{else}}
722
<img class="img-fluid" width="234px" height="293px"
823
src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png"
924
title="University of Texas at Austin" class="img-fluid"
1025
/>
26+
{{/if}}
1127

1228
{{else}}
1329

@@ -16,7 +32,12 @@
1632
{{#if tall}}
1733
{{> @message tag="p" type="warning" scope="inline" content="Narrow images might not fill space available. Just use a wider image." }}
1834
{{/if}}
35+
{{#if image-link}}
36+
<a href="{{image-link}}">
37+
<img src="{{> @img-url wide=wide tall=tall medium=true }}" />
38+
</a>
39+
{{else}}
1940
<img src="{{> @img-url wide=wide tall=tall medium=true }}" />
20-
41+
{{/if}}
2142
{{/if}}
2243
</article>

Diff for: ‎src/lib/_imports/components/c-card/c-card--images.hbs

+77-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
<h2>Table of Contents</h2>
2+
<nav class="c-nav">
3+
<ul>
4+
<li><a href="#section--null">Section (Default)</a></li>
5+
<li><a href="#section--light">Section - Light</a></li>
6+
<li><a href="#section--muted">Section - Muted</a></li>
7+
<li><a href="#section--dark">Section - Dark</a></li>
8+
</ul>
9+
</nav>
10+
111
<h2 id="section--null">Section (Default a.k.a Unstyled a.k.a Transparent)</h2>
212
<section class="o-section">
313
<h3>Transparent Card Image</h3>
@@ -7,9 +17,17 @@
717
{{> @c-card--image position="right" tall=true variant="transparent" }}
818
{{> @c-card--image position="left" tall=true variant="transparent" }}
919
</section>
20+
<h3>Transparent Card Image with Link</h3>
21+
<section class="o-section s-image-grid">
22+
{{> @c-card--image position="top" wide=true variant="transparent" image-link="#" }}
23+
{{> @c-card--image position="bottom" wide=true variant="transparent" image-link="#" }}
24+
{{> @c-card--image position="right" tall=true variant="transparent" image-link="#" }}
25+
{{> @c-card--image position="left" tall=true variant="transparent" image-link="#" }}
26+
</section>
1027
<h3>Contact Card with Image - Transparent</h3>
1128
<section class="o-section s-image-grid">
1229
{{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
30+
{{> @c-card--image position="top" wide=true variant="transparent" is-staff=true image-link="#" }}
1331
</section>
1432

1533
<h3>Plain Card Image</h3>
@@ -19,13 +37,21 @@
1937
{{> @c-card--image position="right" tall=true variant="plain" }}
2038
{{> @c-card--image position="left" tall=true variant="plain" }}
2139
</section>
40+
<h3>Plain Card Image with Link</h3>
41+
<section class="o-section s-image-grid">
42+
{{> @c-card--image position="top" wide=true variant="plain" image-link="#" }}
43+
{{> @c-card--image position="bottom" wide=true variant="plain" image-link="#"}}
44+
{{> @c-card--image position="right" tall=true variant="plain" image-link="#" }}
45+
{{> @c-card--image position="left" tall=true variant="plain" image-link="#" }}
46+
</section>
2247
<h3>Contact Card with Image - Plain</h3>
2348
<section class="o-section s-image-grid">
2449
{{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
50+
{{> @c-card--image position="top" wide=true variant="plain" is-staff=true image-link="#" }}
2551
</section>
2652
</section>
2753
<hr>
28-
<h2 id="section--null">Section - Light</h2>
54+
<h2 id="section--light">Section - Light</h2>
2955
<section class="o-section o-section--style-light">
3056
<h3>Transparent Card Image</h3>
3157
<section class="o-section s-image-grid">
@@ -34,9 +60,17 @@
3460
{{> @c-card--image position="right" tall=true variant="transparent" }}
3561
{{> @c-card--image position="left" tall=true variant="transparent" }}
3662
</section>
63+
<h3>Transparent Card Image with Link</h3>
64+
<section class="o-section s-image-grid">
65+
{{> @c-card--image position="top" wide=true variant="transparent" image-link="#" }}
66+
{{> @c-card--image position="bottom" wide=true variant="transparent" image-link="#" }}
67+
{{> @c-card--image position="right" tall=true variant="transparent" image-link="#" }}
68+
{{> @c-card--image position="left" tall=true variant="transparent" image-link="#" }}
69+
</section>
3770
<h3>Contact Card with Image - Transparent</h3>
3871
<section class="o-section s-image-grid">
3972
{{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
73+
{{> @c-card--image position="top" wide=true variant="transparent" is-staff=true image-link="#" }}
4074
</section>
4175

4276
<h3>Plain Card Image</h3>
@@ -46,13 +80,21 @@
4680
{{> @c-card--image position="right" tall=true variant="plain" }}
4781
{{> @c-card--image position="left" tall=true variant="plain" }}
4882
</section>
83+
<h3>Plain Card Image with Link</h3>
84+
<section class="o-section s-image-grid">
85+
{{> @c-card--image position="top" wide=true variant="plain" image-link="#" }}
86+
{{> @c-card--image position="bottom" wide=true variant="plain" image-link="#" }}
87+
{{> @c-card--image position="right" tall=true variant="plain" image-link="#" }}
88+
{{> @c-card--image position="left" tall=true variant="plain" image-link="#" }}
89+
</section>
4990
<h3>Contact Card with Image - Plain</h3>
5091
<section class="o-section s-image-grid">
5192
{{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
93+
{{> @c-card--image position="top" wide=true variant="plain" is-staff=true image-link="#" }}
5294
</section>
5395
</section>
5496
<hr>
55-
<h2 id="section--null">Section - Muted</h2>
97+
<h2 id="section--muted">Section - Muted</h2>
5698
<section class="o-section o-section--style-muted">
5799
<h3>Transparent Card Image</h3>
58100
<section class="o-section s-image-grid">
@@ -61,9 +103,17 @@
61103
{{> @c-card--image position="right" tall=true variant="transparent" }}
62104
{{> @c-card--image position="left" tall=true variant="transparent" }}
63105
</section>
106+
<h3>Transparent Card Image with Link</h3>
107+
<section class="o-section s-image-grid">
108+
{{> @c-card--image position="top" wide=true variant="transparent" image-link="#" }}
109+
{{> @c-card--image position="bottom" wide=true variant="transparent" image-link="#" }}
110+
{{> @c-card--image position="right" tall=true variant="transparent" image-link="#" }}
111+
{{> @c-card--image position="left" tall=true variant="transparent" image-link="#" }}
112+
</section>
64113
<h3>Contact Card with Image - Transparent</h3>
65114
<section class="o-section s-image-grid">
66115
{{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
116+
{{> @c-card--image position="top" wide=true variant="transparent" is-staff=true image-link="#" }}
67117
</section>
68118

69119
<h3>Plain Card Image</h3>
@@ -73,13 +123,21 @@
73123
{{> @c-card--image position="right" tall=true variant="plain" }}
74124
{{> @c-card--image position="left" tall=true variant="plain" }}
75125
</section>
126+
<h3>Plain Card Image with Link</h3>
127+
<section class="o-section s-image-grid">
128+
{{> @c-card--image position="top" wide=true variant="plain" image-link="#" }}
129+
{{> @c-card--image position="bottom" wide=true variant="plain" image-link="#" }}
130+
{{> @c-card--image position="right" tall=true variant="plain" image-link="#" }}
131+
{{> @c-card--image position="left" tall=true variant="plain" image-link="#" }}
132+
</section>
76133
<h3>Contact Card with Image - Plain</h3>
77134
<section class="o-section s-image-grid">
78135
{{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
136+
{{> @c-card--image position="top" wide=true variant="plain" is-staff=true image-link="#" }}
79137
</section>
80138
</section>
81139
<hr>
82-
<h2 id="section--null">Section - Dark</h2>
140+
<h2 id="section--dark">Section - Dark</h2>
83141
<section class="o-section o-section--style-dark">
84142
<h3>Transparent Card Image</h3>
85143
<section class="o-section s-image-grid">
@@ -88,9 +146,17 @@
88146
{{> @c-card--image position="right" tall=true variant="transparent" }}
89147
{{> @c-card--image position="left" tall=true variant="transparent" }}
90148
</section>
149+
<h3>Transparent Card Image with Link</h3>
150+
<section class="o-section s-image-grid">
151+
{{> @c-card--image position="top" wide=true variant="transparent" image-link="#" }}
152+
{{> @c-card--image position="bottom" wide=true variant="transparent" image-link="#" }}
153+
{{> @c-card--image position="right" tall=true variant="transparent" image-link="#" }}
154+
{{> @c-card--image position="left" tall=true variant="transparent" image-link="#" }}
155+
</section>
91156
<h3>Contact Card with Image - Transparent</h3>
92157
<section class="o-section s-image-grid">
93158
{{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
159+
{{> @c-card--image position="top" wide=true variant="transparent" is-staff=true image-link="#" }}
94160
</section>
95161

96162
<h3>Plain Card Image</h3>
@@ -100,8 +166,16 @@
100166
{{> @c-card--image position="right" tall=true variant="plain" }}
101167
{{> @c-card--image position="left" tall=true variant="plain" }}
102168
</section>
169+
<h3>Plain Card Image with Link</h3>
170+
<section class="o-section s-image-grid">
171+
{{> @c-card--image position="top" wide=true variant="plain" image-link="#" }}
172+
{{> @c-card--image position="bottom" wide=true variant="plain" image-link="#" }}
173+
{{> @c-card--image position="right" tall=true variant="plain" image-link="#" }}
174+
{{> @c-card--image position="left" tall=true variant="plain" image-link="#" }}
175+
</section>
103176
<h3>Contact Card with Image - Plain</h3>
104177
<section class="o-section s-image-grid">
105178
{{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
179+
{{> @c-card--image position="top" wide=true variant="plain" is-staff=true image-link="#" }}
106180
</section>
107181
</section>

Diff for: ‎src/lib/_imports/tools/x-link.css

+30-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
/* Regular Links */
2+
13
@define-mixin link {
24
color: var(--global-color-accent--normal);
35

@@ -41,6 +43,10 @@
4143
@mixin link--active;
4244
}
4345

46+
47+
48+
/* Irregular Links */
49+
4450
@define-mixin link--irregular {
4551
@mixin link;
4652

@@ -59,7 +65,6 @@
5965
@mixin link--irregular--disabled;
6066
}
6167

62-
6368
@define-mixin link--irregular--hover {
6469
@mixin link--hover;
6570

@@ -79,3 +84,27 @@
7984
.x-link--irregular--active {
8085
@mixin link--irregular--active;
8186
}
87+
88+
89+
90+
/* Block Links */
91+
92+
@define-mixin block-link {
93+
--border-width: var(--global-border-width--thick);
94+
95+
outline-color: var(--global-color-accent--normal);
96+
97+
outline-width: var(--border-width);
98+
}
99+
100+
@define-mixin block-link--disabled {
101+
@mixin link--disabled;
102+
}
103+
104+
@define-mixin block-link--hover {
105+
outline-style: solid;
106+
}
107+
108+
@define-mixin block-link--active {
109+
outline-style: dotted;
110+
}

0 commit comments

Comments
 (0)