Skip to content

Commit 9078164

Browse files
marijohannessenmarijohannessen
authored
feat(tile): Added Tile component (#298)
* feat(tile): started work on tiles * feat(tile): started work on tiles * feat(tile): finished up main part of making the tiles * feat(tile): added tests * feat(tile): added transition * feat(tile): added more to the expandable * feat(tile): fixed tests * feat(tile): fixed chevron on safari * feat(tile): fixed tile * feat(tile): added readme * feat(tile): addressed comments * feat(tile): fixed tests * feat(tile): addressed more comments * feat(tile): added back display block * feat(tile): added padding to clickable tile * feat(tile): more tests * feat(tile): fixed keyboard interaction * feat(tile): fixed lint error
1 parent ac54de5 commit 9078164

File tree

15 files changed

+730
-1773
lines changed

15 files changed

+730
-1773
lines changed

‎demo/scss/demo.scss‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,27 @@
1515
}
1616
}
1717

18+
.bx--tile-container {
19+
width: 100%;
20+
21+
.bx--tile {
22+
display: block;
23+
height: 100%;
24+
width: 100%;
25+
}
26+
27+
.bx--col {
28+
background: none;
29+
margin-bottom: 1rem;
30+
}
31+
}
32+
1833
.demo--container__panel {
1934
@include grid-container;
2035
width: 100%;
2136
max-width: 960px;
2237
height: 100%;
23-
// min-height: 2000px;
38+
min-height: 2000px;
2439
padding: 1em;
2540

2641
display: flex;

‎server.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,29 @@ app.get('/grid', (req, res) => {
172172
}
173173
});
174174

175+
app.get('/tile-demo', (req, res) => {
176+
const glob = 'src/components/tile/tile-demo.html';
177+
178+
if (path.relative('src/components', glob).substr(0, 2) === '..') {
179+
res.status(404).end();
180+
} else {
181+
Promise.all([getContent(glob)])
182+
.then(results => {
183+
if (typeof results[0] === 'undefined') {
184+
res.status(404).end();
185+
} else {
186+
res.render('demo-grid', {
187+
html: results[0],
188+
});
189+
}
190+
})
191+
.catch(error => {
192+
console.error(error.stack); // eslint-disable-line no-console
193+
res.status(500).end();
194+
});
195+
}
196+
});
197+
175198
app.listen(port, () => {
176199
console.log(`Listening on port: ${port}`); // eslint-disable-line no-console
177200
});

‎src/components/tile/README.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
### SCSS
2+
3+
#### Modifiers
4+
5+
Use these modifiers with `.bx--tile` class.
6+
7+
| Selector | Description |
8+
|--------------------------|---------------------------------------------------------------------|
9+
| .bx--tile--clickable | Adds specific styles and custom focus/hover states for a clickable tile |
10+
| .bx--tile--expandable | Adds specific styles and custom focus/hover states for a expandable tile |
11+
| .bx--tile--selectable | Adds specific styles and custom focus/hover states for a selectable tile |
12+
13+
### Javascript
14+
#### Options
15+
16+
| Option | Default Selector | Description |
17+
|--------------------------------|------------------------------|---------------------------------------------------------------------------|
18+
| `selectorInit` | `[data-tile]` | The selector to find the Tile element. |
19+
| `selectorAboveTheFold` | `[data-tile-atf]` | The selector to find the above the fold content for a expandable Tile element. |
20+
| `selectorTileInput` | `[data-tile-input]` | The selector to find the input field in a selectable Tile element. |
21+
| `classExpandedTile` | `.bx--tile--is-expanded` | The CSS modifier class triggered when a tile is expanded |
22+
| `classClickableTile` | `.bx--tile--is-clicked` | The CSS modifier class triggered when a tile is clicked |
23+
| `classSelectableTile` | `.bx--tile--is-selected` | The CSS modifier class triggered when a tile is selected |
24+
25+
### Tile types
26+
27+
#### Expandable Tiles
28+
29+
The expandable tile consists of two content container, one for the above the fold content and one for the below the fold content. Place the content you want to be displayed in the tile before it is expanded in the above the fold container, and the content that is to be revealed when a tile is expnaded in the below the fold container. The JavaScript attached to the expandable tile will automatically calculate the height needed to display both containers.
30+
31+
```html
32+
<div data-tile="expandable" class="bx--tile bx--tile--expandable" tabindex="0">
33+
<button class="bx--tile__chevron">
34+
<svg width="12" height="8" viewBox="0 0 12 8" fill-rule="evenodd">
35+
<path d="M10.6 0L6 4.7 1.4 0 0 1.4l6 6.1 6-6.1z"></path>
36+
</svg>
37+
</button>
38+
<div class="bx--tile-content">
39+
<span data-tile-atf class="bx--tile-content__above-the-fold">
40+
<!-- Above the fold content here -->
41+
</span>
42+
<span class="bx--tile-content__below-the-fold">
43+
<!-- Rest of the content here -->
44+
</span>
45+
</div>
46+
</div>
47+
```
48+
49+
#### Selectable Tiles
50+
51+
The selectable tile includes a hidden checkbox input element, and the value of the selected tile can be obtained using the same method as with any other checkbox element.
52+
53+
#### Clickable Tiles
54+
55+
The clickable tile is an anchor tag.

‎src/components/tile/_tile.scss‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
//-----------------------------
2+
// Tiles
3+
//-----------------------------
4+
5+
@import '../../globals/scss/colors';
6+
@import '../../globals/scss/layer';
7+
@import '../../globals/scss/typography';
8+
@import '../../globals/scss/import-once';
9+
@import '../../globals/scss/css--reset';
10+
@import '../../globals/scss/css--typography';
11+
12+
@include exports('tile') {
13+
.bx--tile {
14+
@include layer('raised');
15+
display: block;
16+
min-width: 8rem;
17+
min-height: 4rem;
18+
background-color: $ui-01;
19+
border: 1px solid $ui-03;
20+
position: relative;
21+
padding: 1rem;
22+
23+
&:focus {
24+
@include focus-outline('border');
25+
}
26+
}
27+
28+
.bx--tile--clickable,
29+
.bx--tile--selectable,
30+
.bx--tile--expandable {
31+
transition: $transition--base $bx--standard-easing;
32+
cursor: pointer;
33+
34+
&:hover {
35+
border: 1px solid $ui-04;
36+
}
37+
38+
&:hover,
39+
&:focus {
40+
.bx--tile__checkmark {
41+
opacity: 1;
42+
}
43+
44+
.bx--tile__chevron svg {
45+
fill: $brand-01;
46+
}
47+
}
48+
}
49+
50+
.bx--tile--clickable,
51+
.bx--tile--expandable {
52+
&:focus {
53+
@include focus-outline('border');
54+
}
55+
}
56+
57+
.bx--tile--selectable {
58+
padding-right: 3rem;
59+
}
60+
61+
.bx--tile--selectable:focus {
62+
outline: none;
63+
border: 1px solid $brand-01;
64+
}
65+
66+
.bx--tile--is-clicked {
67+
@include layer('flat');
68+
border: 1px solid $ui-04;
69+
}
70+
71+
.bx--tile__checkmark,
72+
.bx--tile__chevron {
73+
position: absolute;
74+
transition: $transition--base $bx--standard-easing;
75+
border: none;
76+
background: transparent;
77+
78+
&:focus {
79+
@include focus-outline;
80+
}
81+
}
82+
83+
.bx--tile__checkmark {
84+
height: 1rem;
85+
top: 1rem;
86+
right: 1rem;
87+
opacity: 0;
88+
89+
svg {
90+
fill: rgba($brand-01, .25);
91+
}
92+
}
93+
94+
.bx--tile__chevron {
95+
position: absolute;
96+
bottom: .5rem;
97+
right: .5rem;
98+
height: 1rem;
99+
100+
svg {
101+
transform-origin: center;
102+
transition: $transition--base $bx--standard-easing;
103+
fill: $ui-05;
104+
}
105+
106+
&:hover {
107+
cursor: pointer;
108+
}
109+
}
110+
111+
.bx--tile--expandable {
112+
overflow: hidden;
113+
cursor: default;
114+
transition: $transition--base $bx--standard-easing;
115+
}
116+
117+
.bx--tile-content__above-the-fold {
118+
display: block;
119+
}
120+
121+
.bx--tile-content__below-the-fold {
122+
display: block;
123+
opacity: 0;
124+
transition: $transition--base $bx--standard-easing;
125+
}
126+
127+
.bx--tile--is-expanded {
128+
overflow: visible;
129+
transition: $transition--base $bx--standard-easing;
130+
131+
.bx--tile__chevron svg {
132+
transform: rotate(-180deg) translateY(4px);
133+
}
134+
135+
.bx--tile-content__below-the-fold {
136+
opacity: 1;
137+
transition: $transition--base $bx--standard-easing;
138+
}
139+
}
140+
141+
.bx--tile--is-selected,
142+
.bx--tile--is-selected:hover,
143+
.bx--tile--is-selected:focus {
144+
border: 1px solid $brand-01;
145+
outline: none;
146+
}
147+
148+
.bx--tile-input:checked {
149+
& + .bx--tile__checkmark {
150+
opacity: 1;
151+
}
152+
153+
& + .bx--tile__checkmark svg {
154+
fill: $brand-01;
155+
}
156+
}
157+
158+
.bx--tile-content {
159+
width: 100%;
160+
height: 100%;
161+
}
162+
163+
.bx--tile-input {
164+
display: none;
165+
}
166+
}

‎src/components/tile/clickable-tile.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<a data-tile="clickable" class="bx--tile bx--tile--clickable" tabindex="0"></a>

‎src/components/tile/expandable-tile.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div data-tile="expandable" class="bx--tile bx--tile--expandable" tabindex="0">
2+
<button class="bx--tile__chevron">
3+
<svg width="12" height="8" viewBox="0 0 12 8" fill-rule="evenodd">
4+
<path d="M10.6 0L6 4.7 1.4 0 0 1.4l6 6.1 6-6.1z"></path>
5+
</svg>
6+
</button>
7+
<div class="bx--tile-content">
8+
<span data-tile-atf class="bx--tile-content__above-the-fold">
9+
<!-- Above the fold content here -->
10+
</span>
11+
<span class="bx--tile-content__below-the-fold">
12+
<!-- Rest of the content here -->
13+
</span>
14+
</div>
15+
</div>

‎src/components/tile/selectable-tile.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<label for="tile-id" aria-label="tile" class="bx--tile bx--tile--selectable" data-tile="selectable" tabindex="0">
2+
<input tabindex="-1" data-tile-input id="tile-id" class="bx--tile-input" value="tile" type="checkbox" name="tiles" title="tile" />
3+
<div class="bx--tile__checkmark">
4+
<svg width='16' height='16' viewBox='0 0 16 16' fill-rule='evenodd'>
5+
<path d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z'></path>
6+
</svg>
7+
</div>
8+
<div class="bx--tile-content">
9+
<!-- Tile content here -->
10+
</div>
11+
</label>

0 commit comments

Comments
 (0)