Permalink
Browse files

feat(expandable table): initial commit for expandable table component

  • Loading branch information...
lara-aigmueller committed Sep 12, 2016
1 parent 84c4cee commit 83d4fb53ccf0b8247a450ab4240f092cd50201f0
@@ -0,0 +1 @@
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="-703 445 512 512"><style>.st0{fill:#fff}</style><path class="st0" d="M-486.1 684.6c0-3.6 3-6.6 6.6-6.6h205.7c3.7 0 6.6 3 6.6 6.6v32.9c0 3.6-3 6.6-6.6 6.6h-205.7c-3.6 0-6.6-3-6.6-6.6v-32.9zM-486.1 601.1c0-3.6 3-6.6 6.6-6.6h205.7c3.7 0 6.6 3 6.6 6.6V634c0 3.7-3 6.6-6.6 6.6h-205.7c-3.6 0-6.6-3-6.6-6.6v-32.9zM-486.1 768c0-3.7 3-6.6 6.6-6.6h205.7c3.7 0 6.6 3 6.6 6.6v32.9c0 3.7-3 6.6-6.6 6.6h-205.7c-3.6 0-6.6-3-6.6-6.6V768zM-616 803.9c0 2 1.7 3.7 3.7 3.7h76.4c2 0 3.7-1.7 3.7-3.7v-76.4c0-2-1.7-3.7-3.7-3.7h-76.4c-2 0-3.7 1.7-3.7 3.7v76.4zM-616 674.5c0 2 1.7 3.7 3.7 3.7h76.4c2 0 3.7-1.7 3.7-3.7v-76.4c0-2-1.7-3.7-3.7-3.7h-76.4c-2 0-3.7 1.7-3.7 3.7v76.4z"/></svg>
View
@@ -18,6 +18,7 @@
@import "switch/switch";
@import "checkbox/checkbox";
@import "table/table";
@import "table-expandable/table-expandable";
@import "tabs/tabs";
@import "tile/tile";
@import "tag/tag";
No changes.
@@ -0,0 +1,68 @@
<table class="table table--expandable">
<thead>
<tr>
<th>Name</th>
<th>Service</th>
<th>Response time</th>
<th>Requests</th>
<th>Details</th>
</tr>
</thead>
<tbody class="expandable">
<tr>
<td>JavaScript</td>
<td>ip-172-31-35-213.ec2.internal:8079</td>
<td>4.55 ms</td>
<td>7.33/min</td>
<td><a href="#" class="expandable__trigger">more</a></td>
</tr>
<tr class="expandable__content">
<td colspan="5">
<div>
Some expandable content...
</div>
</td>
</tr>
</tbody>
<tbody class="expandable is-expanded">
<tr>
<td>Images</td>
<td>ip-172-31-35-213.ec2.internal:8079</td>
<td>5.59 ms</td>
<td>4.09/min</td>
<td><a href="#" class="expandable__trigger">more</a></td>
</tr>
<tr class="expandable__content">
<td colspan="5">
<div>
More expandable content...
</div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>JavaScript</td>
<td>ip-172-31-35-213.ec2.internal:8079</td>
<td>2.68 ms</td>
<td>5.13/min</td>
<td></td>
</tr>
</tbody>
<tbody class="expandable">
<tr>
<td>CSS</td>
<td>ip-172-31-35-213.ec2.internal:8079</td>
<td>173 ms</td>
<td>4.08/min</td>
<td><a href="#" class="expandable__trigger">more</a></td>
</tr>
<tr class="expandable__content">
<td colspan="5">
<div>
More expandable content...
</div>
</td>
</tr>
</tbody>
</table>
@@ -0,0 +1,70 @@
<div class="theme--blue">
<table class="table table--expandable">
<thead>
<tr>
<th>Name</th>
<th>Service</th>
<th>Response time</th>
<th>Requests</th>
<th>Details</th>
</tr>
</thead>
<tbody class="expandable">
<tr>
<td>JavaScript</td>
<td>ip-172-31-35-213.ec2.internal:8079</td>
<td>4.55 ms</td>
<td>7.33/min</td>
<td><a href="#" class="expandable__trigger">more</a></td>
</tr>
<tr class="expandable__content">
<td colspan="5">
<div>
Some expandable content...
</div>
</td>
</tr>
</tbody>
<tbody class="expandable is-expanded">
<tr>
<td>Images</td>
<td>ip-172-31-35-213.ec2.internal:8079</td>
<td>5.59 ms</td>
<td>4.09/min</td>
<td><a href="#" class="expandable__trigger">more</a></td>
</tr>
<tr class="expandable__content">
<td colspan="5">
<div>
More expandable content...
</div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>JavaScript</td>
<td>ip-172-31-35-213.ec2.internal:8079</td>
<td>2.68 ms</td>
<td>5.13/min</td>
<td></td>
</tr>
</tbody>
<tbody class="expandable">
<tr>
<td>CSS</td>
<td>ip-172-31-35-213.ec2.internal:8079</td>
<td>173 ms</td>
<td>4.08/min</td>
<td><a href="#" class="expandable__trigger">more</a></td>
</tr>
<tr class="expandable__content">
<td colspan="5">
<div>
More expandable content...
</div>
</td>
</tr>
</tbody>
</table>
</div>
@@ -0,0 +1,70 @@
<div class="theme--royalblue">
<table class="table table--expandable">
<thead>
<tr>
<th>Name</th>
<th>Service</th>
<th>Response time</th>
<th>Requests</th>
<th>Details</th>
</tr>
</thead>
<tbody class="expandable">
<tr>
<td>JavaScript</td>
<td>ip-172-31-35-213.ec2.internal:8079</td>
<td>4.55 ms</td>
<td>7.33/min</td>
<td><a href="#" class="expandable__trigger">more</a></td>
</tr>
<tr class="expandable__content">
<td colspan="5">
<div>
Some expandable content...
</div>
</td>
</tr>
</tbody>
<tbody class="expandable is-expanded">
<tr>
<td>Images</td>
<td>ip-172-31-35-213.ec2.internal:8079</td>
<td>5.59 ms</td>
<td>4.09/min</td>
<td><a href="#" class="expandable__trigger">more</a></td>
</tr>
<tr class="expandable__content">
<td colspan="5">
<div>
More expandable content...
</div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>JavaScript</td>
<td>ip-172-31-35-213.ec2.internal:8079</td>
<td>2.68 ms</td>
<td>5.13/min</td>
<td></td>
</tr>
</tbody>
<tbody class="expandable">
<tr>
<td>CSS</td>
<td>ip-172-31-35-213.ec2.internal:8079</td>
<td>173 ms</td>
<td>4.08/min</td>
<td><a href="#" class="expandable__trigger">more</a></td>
</tr>
<tr class="expandable__content">
<td colspan="5">
<div>
More expandable content...
</div>
</td>
</tr>
</tbody>
</table>
</div>
@@ -0,0 +1,70 @@
<div class="theme--green">
<table class="table table--expandable">
<thead>
<tr>
<th>Name</th>
<th>Service</th>
<th>Response time</th>
<th>Requests</th>
<th>Details</th>
</tr>
</thead>
<tbody class="expandable">
<tr>
<td>JavaScript</td>
<td>ip-172-31-35-213.ec2.internal:8079</td>
<td>4.55 ms</td>
<td>7.33/min</td>
<td><a href="#" class="expandable__trigger">more</a></td>
</tr>
<tr class="expandable__content">
<td colspan="5">
<div>
Some expandable content...
</div>
</td>
</tr>
</tbody>
<tbody class="expandable is-expanded">
<tr>
<td>Images</td>
<td>ip-172-31-35-213.ec2.internal:8079</td>
<td>5.59 ms</td>
<td>4.09/min</td>
<td><a href="#" class="expandable__trigger">more</a></td>
</tr>
<tr class="expandable__content">
<td colspan="5">
<div>
More expandable content...
</div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>JavaScript</td>
<td>ip-172-31-35-213.ec2.internal:8079</td>
<td>2.68 ms</td>
<td>5.13/min</td>
<td></td>
</tr>
</tbody>
<tbody class="expandable">
<tr>
<td>CSS</td>
<td>ip-172-31-35-213.ec2.internal:8079</td>
<td>173 ms</td>
<td>4.08/min</td>
<td><a href="#" class="expandable__trigger">more</a></td>
</tr>
<tr class="expandable__content">
<td colspan="5">
<div>
More expandable content...
</div>
</td>
</tr>
</tbody>
</table>
</div>
@@ -0,0 +1,24 @@
import $ from '../js-common-components/dollar';
const toggleClass = 'is-expanded';
const handleClick = (ev) => {
ev.preventDefault();
ev.stopPropagation();
const trigger = ev.target.closest('.expandable');
const expandables = trigger.parentNode.querySelectorAll('.expandable');
Array.prototype.forEach.call(expandables, (el) => {
if (el !== trigger) {
el.classList.remove(toggleClass);
}
return;
});
};
const init = () => {
$('.table--expandable .expandable__trigger').forEach(el => {
el.addEventListener('click', handleClick);
});
};
init();
@@ -0,0 +1,72 @@
@import "../common/variables";
$expandable-table-background-color: $purple-100;
$expandable-table-border-color: $purple-500;
.table--expandable tbody:nth-child(2n) tr:first-child {
background-color: $gray-100;
}
.table--expandable tbody.is-expanded tr:first-child {
background-color: $expandable-table-background-color;
}
.table--expandable tr.expandable__content {
background-color: $white;
}
.table--expandable .expandable__content > div {
display: block;
max-height: 0;
transition: max-height 2s;
}
.table--expandable .expandable__content td {
padding: 32px 10px 28px;
}
.table--expandable .is-expanded tr:first-child td {
border-top: 2px solid $expandable-table-border-color;
}
.table--expandable .is-expanded tr:last-child td {
border-bottom: 2px solid $expandable-table-border-color;
}
.table--expandable .is-expanded .expandable__content {
display: table-row;
}
.table--expandable .is-expanded .expandable__content > div {
max-height: 100%;
}
@mixin expandable-table-theme($table-background-color, $table-border-color) {
.table--expandable .is-expanded tr:first-child {
background-color: $table-background-color;
}
.table--expandable .is-expanded tr:first-child td {
border-top: 2px solid $table-border-color;
}
.table--expandable .is-expanded tr:last-child td {
border-bottom: 2px solid $table-border-color;
}
}
.theme--blue {
@include expandable-table-theme($blue-100, $blue-500);
}
.theme--royalblue {
@include expandable-table-theme($royalblue-100, $royalblue-500);
}
.theme--green {
@include expandable-table-theme($green-100, $green-500);
}

0 comments on commit 83d4fb5

Please sign in to comment.