Skip to content

Commit

Permalink
feat(table): new module (#2423)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArtBlue
ArtBlue authored Aug 28, 2024
1 parent f02c56e commit 632ccc2
Show file tree
Hide file tree
Showing 12 changed files with 1,755 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .changeset/happy-coins-stare.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@ebay/skin": minor
---

feat(table): new module
62 changes: 62 additions & 0 deletions dist/table/table.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
:root {
--density-compact-cell-height: 36px;
--density-default-cell-height: 48px;
--density-relaxed-cell-height: 56px;
}

.table {
overflow-x: auto;
position: relative;
}

.table table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}

.table td,
.table th {
background-color: var(--color-background-primary);
border-bottom: 1px solid var(--color-stroke-subtle);
box-sizing: border-box;
height: var(--density-default-cell-height);
max-width: 400px;
min-width: 124px;
padding-block: var(--spacing-100);
padding-inline: var(--spacing-200);
}

.table__cell {
text-align: left;
}

.table [data-type="numeric"],
.table__cell--numeric {
text-align: right;
}

.table td:last-child,
.table th:last-child {
-webkit-padding-end: 0;
padding-inline-end: 0;
}

.table--density-compact td,
.table--density-compact th {
height: var(--density-compact-cell-height);
}

.table--density-relaxed td,
.table--density-relaxed th {
height: var(--density-relaxed-cell-height);
}

.table--mode-selection td:first-child,
.table--mode-selection th:first-child {
min-width: unset;
}

.table tbody th {
font-weight: 400;
}
1 change: 1 addition & 0 deletions dist/tokens/evo-dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,7 @@
var(--color-ai-solid-green-subtle) 0%,
var(--color-ai-solid-blue-subtle) 154.5%
);
--color-loading-overlay: var(--color-neutral-900-rgb), 0.7;
--color-loading-fill: #2d2d2d;
--color-loading-shimmer: linear-gradient(
270deg,
Expand Down
1 change: 1 addition & 0 deletions dist/tokens/evo-light.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@
--shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);
--shadow-strong: 0px 5px 17px 0px rgba(0, 0, 0, 0.2),
0px 2px 7px 0px rgba(0, 0, 0, 0.15);
--color-loading-overlay: var(--color-neutral-100-rgb), 0.7;
--color-loading-fill: #ededed;
--color-loading-shimmer: linear-gradient(
270deg,
Expand Down
3 changes: 3 additions & 0 deletions src/components/section-header.marko
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ $ if (dsComponent.length > 0) {
<if(input.beta === "true")>
<sup>BETA</sup>
</if>
<else-if(input.alpha === "true")>
<sup>ALPHA</sup>
</else-if>
</macro>
<div class="section-header">
<if(input.header === "h3")>
Expand Down
947 changes: 947 additions & 0 deletions src/modules/table.marko
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions src/sass/bundles/skin-headless.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@
@import "../star-rating/star-rating";
@import "../star-rating-select/star-rating-select";
@import "../switch/switch";
@import "../table/table";
@import "../tabs/tabs";
@import "../textbox/textbox";
@import "../toast-dialog/toast-dialog";
Expand Down
409 changes: 409 additions & 0 deletions src/sass/table/stories/table.selection.stories.js
View file

Large diffs are not rendered by default.

254 changes: 254 additions & 0 deletions src/sass/table/stories/table.stories.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,254 @@
export default { title: "Skin/Table" };

export const base = () => `
<div class="table" role="group" aria-label="Video games for sale" tabindex="0">
<table>
<thead>
<tr>
<th>Seller</th>
<th>Item</th>
<th>Image</th>
<th class="table__cell table__cell--numeric">List Price</th>
<th class="table__cell table__cell--numeric">Quantity Available</th>
<th class="table__cell table__cell--numeric">Quantity Sold</th>
<th class="table__cell table__cell--numeric">Watchers</th>
<th class="table__cell table__cell--numeric">Protection</th>
<th>Shipping</th>
<th>Delivery</th>
</tr>
</thead>
<tbody>
<tr>
<th class="table__cell>Nintendo</th>
<td class="table__cell>Switch</td>
<td class="table__cell></td>
<td class="table__cell table__cell--numeric">$287.96</td>
<td class="table__cell table__cell--numeric">300</td>
<td class="table__cell table__cell--numeric">207</td>
<td class="table__cell table__cell--numeric">95</td>
<td class="table__cell table__cell--numeric">$17.99</td>
<td class="table__cell>FREE</td>
<td class="table__cell>4/1 - 4/5</td>
</tr>
<tr>
<th class="table__cell>Nintendo</th>
<td class="table__cell>SNES</td>
<td class="table__cell></td>
<td class="table__cell table__cell--numeric">$89.85</td>
<td class="table__cell table__cell--numeric">45</td>
<td class="table__cell table__cell--numeric">17</td>
<td class="table__cell table__cell--numeric">5</td>
<td class="table__cell table__cell--numeric">$18.95</td>
<td class="table__cell>FREE</td>
<td class="table__cell>4/11 - 4/15</td>
</tr>
<tr>
<th class="table__cell>Microsoft</th>
<td class="table__cell>XBOX 360</td>
<td class="table__cell></td>
<td class="table__cell table__cell--numeric">$499.99</td>
<td class="table__cell table__cell--numeric">345</td>
<td class="table__cell table__cell--numeric">455</td>
<td class="table__cell table__cell--numeric">205</td>
<td class="table__cell table__cell--numeric">$17.99</td>
<td class="table__cell>FREE</td>
<td class="table__cell>4/17 - 4/25</td>
</tr>
<tr>
<th class="table__cell>Microsoft</th>
<td class="table__cell>XBOX One</td>
<td class="table__cell></td>
<td class="table__cell table__cell--numeric">$499.99</td>
<td class="table__cell table__cell--numeric">399</td>
<td class="table__cell table__cell--numeric">407</td>
<td class="table__cell table__cell--numeric">305</td>
<td class="table__cell table__cell--numeric">$27.99</td>
<td class="table__cell>FREE</td>
<td class="table__cell>4/9 - 4/11</td>
</tr>
<tr>
<th class="table__cell>Sony</th>
<td class="table__cell>Playstation 5</td>
<td class="table__cell></td>
<td class="table__cell table__cell--numeric">$519.99</td>
<td class="table__cell table__cell--numeric">205</td>
<td class="table__cell table__cell--numeric">265</td>
<td class="table__cell table__cell--numeric">199</td>
<td class="table__cell table__cell--numeric">$29.99</td>
<td class="table__cell>FREE</td>
<td class="table__cell>4/11 - 4/15</td>
</tr>
</tbody>
</table>
</div>
`;

export const compact = () => `
<div class="table table--density-compact" role="group" aria-label="Video games for sale" tabindex="0">
<table>
<thead>
<tr>
<th>Seller</th>
<th>Item</th>
<th>Image</th>
<th class="table__cell table__cell--numeric">List Price</th>
<th class="table__cell table__cell--numeric">Quantity Available</th>
<th class="table__cell table__cell--numeric">Quantity Sold</th>
<th class="table__cell table__cell--numeric">Watchers</th>
<th class="table__cell table__cell--numeric">Protection</th>
<th>Shipping</th>
<th>Delivery</th>
</tr>
</thead>
<tbody>
<tr>
<th class="table__cell>Nintendo</th>
<td class="table__cell>Switch</td>
<td class="table__cell></td>
<td class="table__cell table__cell--numeric">$287.96</td>
<td class="table__cell table__cell--numeric">300</td>
<td class="table__cell table__cell--numeric">207</td>
<td class="table__cell table__cell--numeric">95</td>
<td class="table__cell table__cell--numeric">$17.99</td>
<td class="table__cell>FREE</td>
<td class="table__cell>4/1 - 4/5</td>
</tr>
<tr>
<th class="table__cell>Nintendo</th>
<td class="table__cell>SNES</td>
<td class="table__cell></td>
<td class="table__cell table__cell--numeric">
$89.85
</td>
<td class="table__cell table__cell--numeric">45</td>
<td class="table__cell table__cell--numeric">17</td>
<td class="table__cell table__cell--numeric">5</td>
<td class="table__cell table__cell--numeric">$18.95</td>
<td class="table__cell>FREE</td>
<td class="table__cell>4/11 - 4/15</td>
</tr>
<tr>
<th class="table__cell>Microsoft</th>
<td class="table__cell>XBOX 360</td>
<td class="table__cell></td>
<td class="table__cell table__cell--numeric">$499.99</td>
<td class="table__cell table__cell--numeric">345</td>
<td class="table__cell table__cell--numeric">455</td>
<td class="table__cell table__cell--numeric">205</td>
<td class="table__cell table__cell--numeric">$17.99</td>
<td class="table__cell>FREE</td>
<td class="table__cell>4/17 - 4/25</td>
</tr>
<tr>
<th class="table__cell>Microsoft</th>
<td class="table__cell>XBOX One</td>
<td class="table__cell></td>
<td class="table__cell table__cell--numeric">$499.99</td>
<td class="table__cell table__cell--numeric">399</td>
<td class="table__cell table__cell--numeric">407</td>
<td class="table__cell table__cell--numeric">305</td>
<td class="table__cell table__cell--numeric">$27.99</td>
<td class="table__cell>FREE</td>
<td class="table__cell>4/9 - 4/11</td>
</tr>
<tr>
<th class="table__cell>Sony</th>
<td class="table__cell>Playstation 5</td>
<td class="table__cell></td>
<td class="table__cell table__cell--numeric">$519.99</td>
<td class="table__cell table__cell--numeric">205</td>
<td class="table__cell table__cell--numeric">265</td>
<td class="table__cell table__cell--numeric">199</td>
<td class="table__cell table__cell--numeric">$29.99</td>
<td class="table__cell>FREE</td>
<td class="table__cell>4/11 - 4/15</td>
</tr>
</tbody>
</table>
</div>
`;

export const relaxed = () => `
<div class="table table--density-relaxed" role="group" aria-label="Video games for sale" tabindex="0">
<table>
<thead>
<tr>
<th>Seller</th>
<th>Item</th>
<th>Image</th>
<th class="table__cell table__cell--numeric">List Price</th>
<th class="table__cell table__cell--numeric">Quantity Available</th>
<th class="table__cell table__cell--numeric">Quantity Sold</th>
<th class="table__cell table__cell--numeric">Watchers</th>
<th class="table__cell table__cell--numeric">Protection</th>
<th>Shipping</th>
<th>Delivery</th>
</tr>
</thead>
<tbody>
<tr>
<th class="table__cell>Nintendo</th>
<td class="table__cell>Switch</td>
<td class="table__cell></td>
<td class="table__cell table__cell--numeric">$287.96</td>
<td class="table__cell table__cell--numeric">300</td>
<td class="table__cell table__cell--numeric">207</td>
<td class="table__cell table__cell--numeric">95</td>
<td class="table__cell table__cell--numeric">$17.99</td>
<td class="table__cell>FREE</td>
<td class="table__cell>4/1 - 4/5</td>
</tr>
<tr>
<th class="table__cell>Nintendo</th>
<td class="table__cell>SNES</td>
<td class="table__cell></td>
<td class="table__cell table__cell--numeric">
$89.85
</td>
<td class="table__cell table__cell--numeric">45</td>
<td class="table__cell table__cell--numeric">17</td>
<td class="table__cell table__cell--numeric">5</td>
<td class="table__cell table__cell--numeric">$18.95</td>
<td class="table__cell>FREE</td>
<td class="table__cell>4/11 - 4/15</td>
</tr>
<tr>
<th class="table__cell>Microsoft</th>
<td class="table__cell>XBOX 360</td>
<td class="table__cell></td>
<td class="table__cell table__cell--numeric">$499.99</td>
<td class="table__cell table__cell--numeric">345</td>
<td class="table__cell table__cell--numeric">455</td>
<td class="table__cell table__cell--numeric">205</td>
<td class="table__cell table__cell--numeric">$17.99</td>
<td class="table__cell>FREE</td>
<td class="table__cell>4/17 - 4/25</td>
</tr>
<tr>
<th class="table__cell>Microsoft</th>
<td class="table__cell>XBOX One</td>
<td class="table__cell></td>
<td class="table__cell table__cell--numeric">$499.99</td>
<td class="table__cell table__cell--numeric">399</td>
<td class="table__cell table__cell--numeric">407</td>
<td class="table__cell table__cell--numeric">305</td>
<td class="table__cell table__cell--numeric">$27.99</td>
<td class="table__cell>FREE</td>
<td class="table__cell>4/9 - 4/11</td>
</tr>
<tr>
<th class="table__cell>Sony</th>
<td class="table__cell>Playstation 5</td>
<td class="table__cell></td>
<td class="table__cell table__cell--numeric">$519.99</td>
<td class="table__cell table__cell--numeric">205</td>
<td class="table__cell table__cell--numeric">265</td>
<td class="table__cell table__cell--numeric">199</td>
<td class="table__cell table__cell--numeric">$29.99</td>
<td class="table__cell>FREE</td>
<td class="table__cell>4/11 - 4/15</td>
</tr>
</tbody>
</table>
</div>
`;
Loading

0 comments on commit 632ccc2

Please sign in to comment.