Skip to content
This repository was archived by the owner on Apr 28, 2025. It is now read-only.

Commit 52484ae

Browse files
ArtBlueArtBlue
committed
feat(item-tile, item-tile-group): created scaffolding of the new modules
1 parent d236dcc commit 52484ae

File tree

9 files changed

+538
-0
lines changed

9 files changed

+538
-0
lines changed

‎dist/item-tile-group/item-tile-group.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
.item-tile-group {
2+
display: flex;
3+
flex-wrap: wrap;
4+
gap: 16px;
5+
list-style: none;
6+
margin: 0;
7+
padding: 0;
8+
}
9+
/*
10+
Once the final specs are available, we can make these less abstract
11+
and more specific to the actual design. This specific pattern is
12+
more of a generic responsive layout pattern that can be used in
13+
various use cases, possible as an abstract responsive layout module
14+
*/
15+
.item-tile-group[data-tiles-per-row-xs="1"] {
16+
--item-tile-group-tiles-per-row-xs: 1;
17+
}
18+
.item-tile-group[data-tiles-per-row-xs="2"] {
19+
--item-tile-group-tiles-per-row-xs: 2;
20+
}
21+
.item-tile-group[data-tiles-per-row-sm="1"] {
22+
--item-tile-group-tiles-per-row-sm: 1;
23+
}
24+
.item-tile-group[data-tiles-per-row-sm="2"] {
25+
--item-tile-group-tiles-per-row-sm: 2;
26+
}
27+
.item-tile-group[data-tiles-per-row-sm="3"] {
28+
--item-tile-group-tiles-per-row-sm: 3;
29+
}
30+
.item-tile-group[data-tiles-per-row-md="1"] {
31+
--item-tile-group-tiles-per-row-sm: 1;
32+
}
33+
.item-tile-group[data-tiles-per-row-md="2"] {
34+
--item-tile-group-tiles-per-row-sm: 2;
35+
}
36+
.item-tile-group[data-tiles-per-row-md="3"] {
37+
--item-tile-group-tiles-per-row-sm: 3;
38+
}
39+
.item-tile-group[data-tiles-per-row-md="4"] {
40+
--item-tile-group-tiles-per-row-sm: 4;
41+
}
42+
.item-tile-group[data-tiles-per-row-md="5"] {
43+
--item-tile-group-tiles-per-row-sm: 5;
44+
}
45+
.item-tile-group li {
46+
width: calc(100% / var(--item-tile-group-tiles-per-row-xs));
47+
}
48+
@media screen and (min-width: 512px) {
49+
.item-tile-group li {
50+
width: calc(100% / var(--item-tile-group-tiles-per-row-sm));
51+
}
52+
}
53+
@media screen and (min-width: 768px) {
54+
.item-tile-group li {
55+
width: calc(100% / var(--item-tile-group-tiles-per-row-md));
56+
}
57+
}

‎dist/item-tile/item-tile.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
.item-tile {
2+
display: grid;
3+
font-size: 14px;
4+
grid-template-areas: "image" "signal" "title" "highlight";
5+
grid-template-rows: auto 29px 60px 1fr;
6+
}
7+
.item-tile__image {
8+
align-items: center;
9+
background-color: rgba(0, 0, 0, 0.055);
10+
border-radius: 12px;
11+
display: flex;
12+
grid-area: image;
13+
justify-content: center;
14+
margin-bottom: 4px;
15+
max-height: 200px;
16+
overflow: hidden;
17+
text-align: center;
18+
}
19+
.item-tile__image > img {
20+
height: 100%;
21+
object-fit: cover;
22+
width: 100%;
23+
}
24+
.item-tile__signal {
25+
grid-area: signal;
26+
}
27+
.item-tile__signal .signal {
28+
margin-bottom: 4px;
29+
}
30+
.item-tile__titles {
31+
grid-area: title;
32+
}
33+
/*
34+
multi-line truncation requires a few vendor-specific
35+
properties and values, so avoid stripping them out...
36+
*/
37+
/* autoprefixer: off */
38+
.item-tile__title {
39+
-webkit-box-orient: vertical;
40+
-moz-box-orient: vertical;
41+
display: -webkit-box;
42+
-webkit-line-clamp: 2;
43+
line-height: 20px;
44+
overflow: hidden;
45+
text-overflow: ellipsis;
46+
}
47+
/* autoprefixer: on */
48+
.item-tile__pricing {
49+
grid-area: highlight;
50+
}
51+
.item-tile__subtitle {
52+
color: #707070;
53+
line-height: 20px;
54+
}
55+
.item-tile__price {
56+
font-size: 16px;
57+
font-weight: bold;
58+
line-height: 24px;
59+
margin-bottom: 6px;
60+
margin-top: 3px;
61+
}
62+
.item-tile__list-price {
63+
color: #707070;
64+
font-size: 12px;
65+
font-weight: normal;
66+
line-height: 16px;
67+
text-decoration: line-through;
68+
}
69+
.item-tile__buy-links {
70+
line-height: 20px;
71+
}
72+
.item-tile__buy-links a {
73+
color: #000;
74+
text-decoration: none;
75+
}
76+
.item-tile__sponsored {
77+
color: #707070;
78+
font-size: 12px;
79+
line-height: 16px;
80+
}

‎docs/_data/modules.yaml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ list:
3030
- image-placeholder
3131
- infotip
3232
- inline-notice
33+
- item-tile
34+
- item-tile-group
3335
- less
3436
- lightbox-dialog
3537
- link

‎docs/_includes/item-tile-group.html‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
<div id="item-tile-group">
2+
{% include section-header.html name="item-tile-group" version=page.module_metadata.item-tile-group.ds-component.version %}
3+
4+
<p>Item tile group displays a set of <span class="highlight">item-tile</span> modules responsively.</p>
5+
6+
<p>Since item tiles are responsive, the width of each item tile set is based on how many item tiles should be displayed on a row of tiles (before wrapping to next line). The container size and the desired number of tiles at each breakpoint will largely decide the width.</p>
7+
8+
<div class="demo">
9+
<div class="demo__inner">
10+
<ul class="item-tile-group"
11+
data-tiles-per-row-xs="2"
12+
data-tiles-per-row-sm="3"
13+
data-tiles-per-row-md="4"
14+
>
15+
<li>
16+
<div class="item-tile">
17+
<div class="item-tile__image">
18+
<img src="{{ page.static_dir }}/img/tb-profile-pic.jpg" alt="">
19+
</div>
20+
<div class="item-tile__signal">
21+
<span class="signal signal--trustworthy">Great Price</span>
22+
</div>
23+
<div class="item-tile__titles">
24+
<div class="item-tile__title">
25+
Very Long Title That Will Wrap To The Next Line, But Will Be Truncated With An Ellipsis
26+
</div>
27+
<div class="item-tile__subtitle">
28+
Brand new &bull; Size 6
29+
</div>
30+
</div>
31+
<div class="item-tile__pricing">
32+
<div class="item-tile__price">
33+
$29.99 <span class="item-tile__list-price">$68.99</span>
34+
</div>
35+
<div class="item-tile__buy-links">
36+
<div><a href="">Buy it now</a></div>
37+
<div><a href="">Free shipping</a></div>
38+
</div>
39+
<div class="item-tile__sponsored">
40+
Sponsored
41+
</div>
42+
</div>
43+
</div>
44+
</li>
45+
46+
<li>
47+
<div class="item-tile">
48+
<div class="item-tile__image">
49+
<img src="{{ page.static_dir }}/img/tb-profile-pic.jpg" alt="">
50+
</div>
51+
<div class="item-tile__signal">
52+
<span class="signal signal--trustworthy">Great Price</span>
53+
</div>
54+
<div class="item-tile__titles">
55+
<div class="item-tile__title">
56+
Very Long Title That Will Wrap To The Next Line, But Will Be Truncated With An Ellipsis
57+
</div>
58+
<div class="item-tile__subtitle">
59+
Brand new &bull; Size 6
60+
</div>
61+
</div>
62+
<div class="item-tile__pricing">
63+
<div class="item-tile__price">
64+
$29.99 <span class="item-tile__list-price">$68.99</span>
65+
</div>
66+
<div class="item-tile__buy-links">
67+
<div><a href="">Buy it now</a></div>
68+
<div><a href="">Free shipping</a></div>
69+
</div>
70+
<div class="item-tile__sponsored">
71+
Sponsored
72+
</div>
73+
</div>
74+
</div>
75+
</li>
76+
77+
<li>
78+
<div class="item-tile">
79+
<div class="item-tile__image">
80+
<img src="{{ page.static_dir }}/img/tb-profile-pic.jpg" alt="">
81+
</div>
82+
<div class="item-tile__signal">
83+
<span class="signal signal--trustworthy">Great Price</span>
84+
</div>
85+
<div class="item-tile__titles">
86+
<div class="item-tile__title">
87+
Title That Will Wrap To The Next Line
88+
</div>
89+
<div class="item-tile__subtitle">
90+
Brand new &bull; Size 6
91+
</div>
92+
</div>
93+
<div class="item-tile__pricing">
94+
<div class="item-tile__price">
95+
$29.99 <span class="item-tile__list-price">$68.99</span>
96+
</div>
97+
<div class="item-tile__buy-links">
98+
<div><a href="">Buy it now</a></div>
99+
<div><a href="">Free shipping</a></div>
100+
</div>
101+
<div class="item-tile__sponsored">
102+
Sponsored
103+
</div>
104+
</div>
105+
</div>
106+
</li>
107+
108+
<li>
109+
<div class="item-tile">
110+
<div class="item-tile__image">
111+
<img src="{{ page.static_dir }}/img/tb-profile-pic.jpg" alt="">
112+
</div>
113+
<div class="item-tile__signal">
114+
<span class="signal signal--trustworthy">Great Price</span>
115+
</div>
116+
<div class="item-tile__titles">
117+
<div class="item-tile__title">
118+
Very Long Title That Will Wrap To The Next Line, But Will Be Truncated With An Ellipsis
119+
</div>
120+
<div class="item-tile__subtitle">
121+
Brand new &bull; Size 6
122+
</div>
123+
</div>
124+
<div class="item-tile__pricing">
125+
<div class="item-tile__price">
126+
$29.99 <span class="item-tile__list-price">$68.99</span>
127+
</div>
128+
<div class="item-tile__buy-links">
129+
<div><a href="">Buy it now</a></div>
130+
<div><a href="">Free shipping</a></div>
131+
</div>
132+
<div class="item-tile__sponsored">
133+
Sponsored
134+
</div>
135+
</div>
136+
</div>
137+
</li>
138+
139+
<li>
140+
<div class="item-tile">
141+
<div class="item-tile__image">
142+
<img src="{{ page.static_dir }}/img/tb-profile-pic.jpg" alt="">
143+
</div>
144+
<div class="item-tile__signal">
145+
<span class="signal signal--trustworthy">Great Price</span>
146+
</div>
147+
<div class="item-tile__titles">
148+
<div class="item-tile__title">
149+
Very Long Title That Will Wrap To The Next Line, But Will Be Truncated With An Ellipsis
150+
</div>
151+
<div class="item-tile__subtitle">
152+
Brand new &bull; Size 6
153+
</div>
154+
</div>
155+
<div class="item-tile__pricing">
156+
<div class="item-tile__price">
157+
$29.99 <span class="item-tile__list-price">$68.99</span>
158+
</div>
159+
<div class="item-tile__buy-links">
160+
<div><a href="">Buy it now</a></div>
161+
<div><a href="">Free shipping</a></div>
162+
</div>
163+
<div class="item-tile__sponsored">
164+
Sponsored
165+
</div>
166+
</div>
167+
</div>
168+
</li>
169+
</div>
170+
</ul>
171+
</div>
172+
</div>

‎docs/_includes/item-tile.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<div id="item-tile">
2+
{% include section-header.html name="item-tile" version=page.module_metadata.item-tile.ds-component.version %}
3+
4+
<p>Item tiles display an item preview with key details to further decision-making and quickly compare similar items.</p>
5+
6+
<p>Since item tiles are responsive, the width of each item tile set is based on how many item tiles should be displayed on a row of tiles (before wrapping to next line). The container size and the desired number of tiles at each breakpoint will largely decide the width. For more details regarding this, see <span class="highlight">item-tile-group</span>.</p>
7+
8+
<div class="demo">
9+
<div class="demo__inner">
10+
<div class="item-tile">
11+
<div class="item-tile__image">
12+
<img src="{{ page.static_dir }}/img/tb-profile-pic.jpg" alt="">
13+
</div>
14+
<div class="item-tile__signal">
15+
<span class="signal signal--trustworthy">Great Price</span>
16+
</div>
17+
<div class="item-tile__titles">
18+
<div class="item-tile__title">
19+
Very Long Title That Will Wrap To The Next Line, But Will Be Truncated With An Ellipsis
20+
</div>
21+
<div class="item-tile__subtitle">
22+
Brand new &bull; Size 6
23+
</div>
24+
</div>
25+
<div class="item-tile__pricing">
26+
<div class="item-tile__price">
27+
$29.99 <span class="item-tile__list-price">$68.99</span>
28+
</div>
29+
<div class="item-tile__buy-links">
30+
<div><a href="">Buy it now</a></div>
31+
<div><a href="">Free shipping</a></div>
32+
</div>
33+
<div class="item-tile__sponsored">
34+
Sponsored
35+
</div>
36+
</div>
37+
</div>
38+
</div>
39+
</div>
40+
</div>

‎docs/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,16 @@
158158
version: 2.2
159159
submodules:
160160
- icon
161+
item-tile:
162+
ds-component:
163+
name: item-tile
164+
version: 2.1
165+
item-tile-group:
166+
ds-component:
167+
name: item-tile
168+
version: 2.1
169+
submodules:
170+
- item-tile
161171
lightbox-dialog:
162172
ds-component:
163173
- name: modal

‎src/less/bundles/skin-headless.less‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@
3333
@import "../image-placeholder/image-placeholder.less";
3434
@import "../infotip/infotip.less";
3535
@import "../inline-notice/inline-notice.less";
36+
@import "../item-tile/item-tile.less";
37+
@import "../item-tile-group/item-tile-group.less";
3638
@import "../lightbox-dialog/lightbox-dialog.less";
3739
@import "../link/link.less";
3840
@import "../listbox/listbox.less";

0 commit comments

Comments
 (0)