Skip to content

Commit 1212ed2

Browse files
tillywoodfieldtillywoodfield
authored
Merge pull request #50 from agilecollective/feature/table
Table component
2 parents a31f1ff + 6d4621c commit 1212ed2

File tree

4 files changed

+168
-54
lines changed

4 files changed

+168
-54
lines changed

‎src/scss/components/table/_table.scss

+36-19
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,46 @@
22
@use "../../tokens/font" as *;
33
@use "../../tokens/spacing" as *;
44

5-
table {
6-
border-collapse: collapse;
7-
display: inline-block;
8-
max-width: 100%;
9-
overflow: auto;
10-
11-
thead,
5+
.iati-table {
6+
overflow-x: auto;
7+
table {
8+
border-collapse: collapse;
9+
max-width: 100%;
10+
width: 100%;
11+
font-weight: 500;
12+
font-size: 0.8rem;
13+
border: 1px solid $color-teal-60;
14+
}
15+
tbody {
16+
border: 1px solid $color-teal-60;
17+
}
1218
th {
13-
background-color: $color-grey-10;
14-
15-
&,
16-
p {
17-
font-weight: $font-weight-body-strong;
18-
}
19+
text-transform: uppercase;
20+
background-color: #{$color-green-30}cc;
21+
color: $color-grey-90;
22+
}
23+
td,
24+
th {
25+
border-right: 1px solid $color-teal-60;
26+
text-align: left;
27+
min-width: 20ch;
1928
}
20-
2129
th,
2230
td {
23-
border: 1px solid $color-grey-20;
24-
padding: 0.5rem;
31+
padding: 0.5rem 1rem;
2532
}
26-
27-
caption {
28-
margin: $padding-block 0;
33+
tr {
34+
border-bottom: 1px solid $color-teal-30;
35+
&:last-of-type {
36+
border-bottom: 1px solid $color-teal-60;
37+
}
38+
}
39+
thead {
40+
border-bottom: 1px solid $color-teal-60;
41+
}
42+
tfoot {
43+
font-weight: 700;
44+
border-top: 1px solid $color-teal-60;
45+
text-transform: uppercase;
2946
}
3047
}

‎src/scss/components/table/table.stories.ts

+73-35
Original file line numberDiff line numberDiff line change
@@ -10,47 +10,85 @@ type Story = StoryObj;
1010

1111
export const Default: Story = {
1212
render: () => html`
13-
<table>
14-
<tr>
15-
<th>Column 1</th>
16-
<th>Column 2</th>
17-
<th>Column 3</th>
18-
<th>Column 4</th>
19-
<th>Column 5</th>
20-
</tr>
21-
<tr>
22-
<td>Cell 1</td>
23-
<td>Cell 2</td>
24-
<td>Cell 3</td>
25-
<td>Cell 4</td>
26-
<td>Cell 5</td>
27-
</tr>
28-
</table>
13+
<div class="iati-table">
14+
<table class="iati-table__table">
15+
<thead>
16+
<tr>
17+
<th>Column 1</th>
18+
<th>Column 2</th>
19+
<th>Column 3</th>
20+
<th>Column 4</th>
21+
<th>Column 5</th>
22+
</tr>
23+
</thead>
24+
<tbody>
25+
<tr>
26+
<td>Cell 1</td>
27+
<td>Cell 2</td>
28+
<td>Cell 3</td>
29+
<td>Cell 4</td>
30+
<td>Cell 5</td>
31+
</tr>
32+
<tr>
33+
<td>Cell 1</td>
34+
<td>Cell 2</td>
35+
<td>Cell 3</td>
36+
<td>Cell 4</td>
37+
<td>Cell 5</td>
38+
</tr>
39+
<tr>
40+
<td>Cell 1</td>
41+
<td>Cell 2</td>
42+
<td>Cell 3</td>
43+
<td>Cell 4</td>
44+
<td>Cell 5</td>
45+
</tr>
46+
<tr>
47+
<td>Cell 1</td>
48+
<td>Cell 2</td>
49+
<td>Cell 3</td>
50+
<td>Cell 4</td>
51+
<td>Cell 5</td>
52+
</tr>
53+
</tbody>
54+
<tfoot>
55+
<tr>
56+
<td>Total</td>
57+
<td>Cell 2</td>
58+
<td>Cell 3</td>
59+
<td>Cell 4</td>
60+
<td>Cell 5</td>
61+
</tr>
62+
</tfoot>
63+
</table>
64+
</div>
2965
`,
3066
};
3167

3268
export const Scrolling: Story = {
3369
render: () => html`
3470
<div style="width: 300px;">
35-
<table>
36-
<caption>
37-
This table should scroll within its fixed-width container.
38-
</caption>
39-
<tr>
40-
<th>Column 1</th>
41-
<th>Column 2</th>
42-
<th>Column 3</th>
43-
<th>Column 4</th>
44-
<th>Column 5</th>
45-
</tr>
46-
<tr>
47-
<td>Cell 1</td>
48-
<td>Cell 2</td>
49-
<td>Cell 3</td>
50-
<td>Cell 4</td>
51-
<td>Cell 5</td>
52-
</tr>
53-
</table>
71+
<div class="iati-table">
72+
<table class="iati-table__table">
73+
<caption>
74+
This table should scroll within its fixed-width container.
75+
</caption>
76+
<tr>
77+
<th>Column 1</th>
78+
<th>Column 2</th>
79+
<th>Column 3</th>
80+
<th>Column 4</th>
81+
<th>Column 5</th>
82+
</tr>
83+
<tr>
84+
<td>Cell 1</td>
85+
<td>Cell 2</td>
86+
<td>Cell 3</td>
87+
<td>Cell 4</td>
88+
<td>Cell 5</td>
89+
</tr>
90+
</table>
91+
</div>
5492
</div>
5593
`,
5694
};

‎src/scss/typography/_body.scss

+28
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,34 @@ a {
3939
}
4040
}
4141

42+
table:not([class]) {
43+
border-collapse: collapse;
44+
display: inline-block;
45+
max-width: 100%;
46+
width: 100%;
47+
overflow: auto;
48+
49+
thead,
50+
th {
51+
background-color: $color-grey-10;
52+
53+
&,
54+
p {
55+
font-weight: $font-weight-body-strong;
56+
}
57+
}
58+
59+
th,
60+
td {
61+
border: 1px solid $color-grey-20;
62+
padding: 0.5rem;
63+
}
64+
65+
caption {
66+
margin: $padding-block 0;
67+
}
68+
}
69+
4270
.iati-quote {
4371
border-left: 4px solid $color-grey-90;
4472
padding: 0 $padding-block;

‎src/scss/typography/typography.stories.ts

+31
Original file line numberDiff line numberDiff line change
@@ -131,3 +131,34 @@ export const Code: Story = {
131131
</p>
132132
`,
133133
};
134+
135+
export const Table: Story = {
136+
render: () => html`
137+
<table>
138+
<thead>
139+
<tr>
140+
<th>Column 1</th>
141+
<th>Column 2</th>
142+
<th>Column 3</th>
143+
</tr>
144+
</thead>
145+
<tbody>
146+
<tr>
147+
<td>Lorem Ipsum</td>
148+
<td>Dolor sit amet</td>
149+
<td>Consectetur adipiscing</td>
150+
</tr>
151+
<tr>
152+
<td>Vivamus luctus</td>
153+
<td>Tempor incididunt</td>
154+
<td>Magna aliqua</td>
155+
</tr>
156+
<tr>
157+
<td>Ut enim ad</td>
158+
<td>Minim veniam</td>
159+
<td>Quis nostrud exercitation</td>
160+
</tr>
161+
</tbody>
162+
</table>
163+
`,
164+
};

0 commit comments

Comments
 (0)