Skip to content

Commit

Permalink
fix: changed stacked variant to lined between rows
Browse files Browse the repository at this point in the history
  • Loading branch information
@ifrost1
ifrost1 committed Jul 18, 2022
1 parent 1a6904e commit ff9a507
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 203 deletions.
8 changes: 3 additions & 5 deletions src/components/Table/Table.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,10 +100,8 @@
.table--stacked > .table__body & {
display: block;
width: 100%;
border: var(--eds-theme-border-width) solid
border-bottom: var(--eds-theme-border-width) solid
var(--eds-theme-color-border-neutral-subtle);
border-radius: var(--eds-border-radius-md);
margin-bottom: var(--eds-size-2);

@media all and (min-width: $eds-bp-md) {
display: table-row;
Expand Down Expand Up @@ -247,8 +245,8 @@
display: flex;
gap: var(--eds-size-1);
width: 100%;
padding-left: var(--eds-size-2);
padding-right: var(--eds-size-2);
padding-left: 0;
padding-right: 0;

&:before {
content: attr(data-heading); /* 1 */
Expand Down
24 changes: 9 additions & 15 deletions src/components/Table/Table.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,8 +102,16 @@ export const Default: StoryObj<Args> = {
},
};

export const StackedTemplate: StoryObj<Args> = {
export const Zebra: StoryObj<Args> = {
args: {
...Default.args,
variant: 'zebra',
},
};

export const Stacked: StoryObj<Args> = {
args: {
behavior: 'stacked',
children: (
<>
<Table.Header>
Expand Down Expand Up @@ -146,20 +154,6 @@ export const StackedTemplate: StoryObj<Args> = {
},
};

export const Zebra: StoryObj<Args> = {
args: {
...Default.args,
variant: 'zebra',
},
};

export const Stacked: StoryObj<Args> = {
args: {
...StackedTemplate.args,
behavior: 'stacked',
},
};

export const AlignTableCellContentCenter: StoryObj<Args> = {
args: {
caption: 'This is a table caption and it is required',
Expand Down
183 changes: 0 additions & 183 deletions src/components/Table/__snapshots__/Table.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -716,189 +716,6 @@ exports[`<Table /> Stacked story renders snapshot 1`] = `
</table>
`;

exports[`<Table /> StackedTemplate story renders snapshot 1`] = `
<table
class="table"
>
<caption
class="table__caption u-is-vishidden"
/>
<thead
class="table__header"
>
<tr
class="table__row"
>
<th
class="table__cell"
>
Name
</th>
<th
class="table__cell"
>
Status
</th>
<th
class="table__cell"
>
Chart
</th>
<th
class="table__cell"
>
Window
</th>
<th
class="table__cell"
>
Last Update
</th>
</tr>
</thead>
<tbody
class="table__body"
>
<tr
class="table__row"
>
<td
class="table__cell"
data-heading="Name"
>
Table Row 1, Table Cell 1
</td>
<td
class="table__cell"
data-heading="Status"
>
Table Row 1, Table Cell 2
</td>
<td
class="table__cell"
data-heading="Chart"
>
Table Row 1, Table Cell 3
</td>
<td
class="table__cell"
data-heading="Window"
>
Table Row 1, Table Cell 4
</td>
<td
class="table__cell"
data-heading="Last Update"
>
Table Row 1, Table Cell 5
</td>
</tr>
<tr
class="table__row"
>
<td
class="table__cell"
data-heading="Name"
>
Table Row 2, Table Cell 1
</td>
<td
class="table__cell"
data-heading="Status"
>
Table Row 2, Table Cell 2
</td>
<td
class="table__cell"
data-heading="Chart"
>
Table Row 2, Table Cell 3
</td>
<td
class="table__cell"
data-heading="Window"
>
Table Row 2, Table Cell 4
</td>
<td
class="table__cell"
data-heading="Last Update"
>
Table Row 2, Table Cell 5
</td>
</tr>
<tr
class="table__row"
>
<td
class="table__cell"
data-heading="Name"
>
Table Row 3, Table Cell 1
</td>
<td
class="table__cell"
data-heading="Status"
>
Table Row 3, Table Cell 2
</td>
<td
class="table__cell"
data-heading="Chart"
>
Table Row 3, Table Cell 3
</td>
<td
class="table__cell"
data-heading="Window"
>
Table Row 3, Table Cell 4
</td>
<td
class="table__cell"
data-heading="Last Update"
>
Table Row 3, Table Cell 5
</td>
</tr>
<tr
class="table__row"
>
<td
class="table__cell"
data-heading="Name"
>
Table Row 4, Table Cell 1
</td>
<td
class="table__cell"
data-heading="Status"
>
Table Row 4, Table Cell 2
</td>
<td
class="table__cell"
data-heading="Chart"
>
Table Row 4, Table Cell 3
</td>
<td
class="table__cell"
data-heading="Window"
>
Table Row 4, Table Cell 4
</td>
<td
class="table__cell"
data-heading="Last Update"
>
Table Row 4, Table Cell 5
</td>
</tr>
</tbody>
</table>
`;

exports[`<Table /> Zebra story renders snapshot 1`] = `
<table
class="table table--zebra"
Expand Down

0 comments on commit ff9a507

Please sign in to comment.