agroptima-design-system 0.9.3 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/atoms/Alert.scss +1 -0
- package/src/atoms/CardsTable.scss +99 -22
- package/src/atoms/CardsTableCell.tsx +2 -0
- package/src/settings/typography/_content.scss +8 -0
- package/src/stories/CardsTable.stories.js +85 -9
- package/src/stories/CardsTableList.stories.ts +1 -1
- package/src/stories/Changelog.stories.mdx +5 -0
- package/tests/CardsTable.spec.tsx +128 -0
package/package.json
CHANGED
package/src/atoms/Alert.scss
CHANGED
|
@@ -3,18 +3,19 @@
|
|
|
3
3
|
@use '../settings/config';
|
|
4
4
|
|
|
5
5
|
.cards-table-list {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
gap: config.$space-3x;
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
tbody {
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
gap: config.$space-3x;
|
|
12
14
|
}
|
|
13
15
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
text-overflow: ellipsis;
|
|
16
|
+
tr {
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-grow: 1;
|
|
18
19
|
}
|
|
19
20
|
|
|
20
21
|
.container {
|
|
@@ -22,11 +23,11 @@
|
|
|
22
23
|
flex-direction: row;
|
|
23
24
|
justify-content: space-between;
|
|
24
25
|
align-items: center;
|
|
26
|
+
width: 100%;
|
|
25
27
|
}
|
|
26
28
|
|
|
27
29
|
th {
|
|
28
30
|
padding: config.$space-2x config.$space-3x;
|
|
29
|
-
white-space: nowrap;
|
|
30
31
|
text-align: left;
|
|
31
32
|
|
|
32
33
|
&.sortable {
|
|
@@ -44,24 +45,16 @@
|
|
|
44
45
|
}
|
|
45
46
|
}
|
|
46
47
|
|
|
47
|
-
td {
|
|
48
|
-
padding: config.$space-5x config.$space-3x;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
48
|
.no-wrap {
|
|
52
49
|
white-space: nowrap;
|
|
53
50
|
}
|
|
54
51
|
|
|
55
52
|
.alignment-left {
|
|
56
|
-
|
|
53
|
+
justify-content: flex-start;
|
|
57
54
|
}
|
|
58
55
|
|
|
59
56
|
.alignment-center {
|
|
60
|
-
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.alignment-right {
|
|
64
|
-
text-align: right;
|
|
57
|
+
justify-content: center;
|
|
65
58
|
}
|
|
66
59
|
|
|
67
60
|
&.primary {
|
|
@@ -126,6 +119,10 @@
|
|
|
126
119
|
background: color_alias.$primary-color-50;
|
|
127
120
|
}
|
|
128
121
|
|
|
122
|
+
tr > td:first-child {
|
|
123
|
+
@include typography.cards-table-list-highlight-text;
|
|
124
|
+
}
|
|
125
|
+
|
|
129
126
|
tr.disabled {
|
|
130
127
|
background: color_alias.$neutral-color-50;
|
|
131
128
|
|
|
@@ -133,9 +130,89 @@
|
|
|
133
130
|
@include typography.cards-table-list-disabled-text;
|
|
134
131
|
}
|
|
135
132
|
}
|
|
133
|
+
}
|
|
136
134
|
|
|
137
|
-
|
|
138
|
-
|
|
135
|
+
// Media queries
|
|
136
|
+
$small: 375px;
|
|
137
|
+
$medium: 768px;
|
|
138
|
+
$large: 1200px;
|
|
139
|
+
|
|
140
|
+
// Mobile & tablet cases
|
|
141
|
+
@media only screen and (min-width: $small) and (max-width: $large) {
|
|
142
|
+
thead {
|
|
143
|
+
display: none;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
tr {
|
|
147
|
+
flex-direction: row;
|
|
148
|
+
flex-wrap: wrap;
|
|
149
|
+
position: relative;
|
|
150
|
+
gap: config.$space-1x;
|
|
151
|
+
padding: config.$space-3x;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
td {
|
|
155
|
+
width: 100%;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
td:first-child {
|
|
159
|
+
order: -2;
|
|
160
|
+
width: 50%;
|
|
161
|
+
margin-bottom: config.$space-2x;
|
|
162
|
+
}
|
|
163
|
+
td.actions {
|
|
164
|
+
order: -1;
|
|
165
|
+
width: 35%;
|
|
166
|
+
flex-grow: 1;
|
|
167
|
+
margin-bottom: config.$space-2x;
|
|
168
|
+
|
|
169
|
+
> div {
|
|
170
|
+
justify-content: flex-end;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.badge {
|
|
175
|
+
position: absolute;
|
|
176
|
+
inset: auto config.$space-3x config.$space-3x auto;
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
// Desktop case
|
|
180
|
+
@media only screen and (min-width: $large) {
|
|
181
|
+
thead {
|
|
182
|
+
display: flex;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
tr {
|
|
186
|
+
flex-direction: row;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
th,
|
|
190
|
+
td {
|
|
191
|
+
display: flex;
|
|
192
|
+
justify-content: flex-start;
|
|
193
|
+
align-items: center;
|
|
194
|
+
flex: 2;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
td {
|
|
198
|
+
padding: config.$space-5x config.$space-3x;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
th.actions {
|
|
202
|
+
flex: 1;
|
|
203
|
+
}
|
|
204
|
+
td.actions {
|
|
205
|
+
order: 0;
|
|
206
|
+
justify-content: center;
|
|
207
|
+
flex: 1;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
td:has(.badge) {
|
|
211
|
+
gap: config.$space-2x;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.alignment-right {
|
|
215
|
+
justify-content: flex-end;
|
|
139
216
|
}
|
|
140
217
|
}
|
|
141
218
|
}
|
|
@@ -17,12 +17,14 @@ export function CardsTableCell({
|
|
|
17
17
|
noWrap = false,
|
|
18
18
|
align = Alignment.Left,
|
|
19
19
|
children,
|
|
20
|
+
className,
|
|
20
21
|
...props
|
|
21
22
|
}: CardsTableCellProps): React.JSX.Element {
|
|
22
23
|
const cssClasses = [
|
|
23
24
|
'cell',
|
|
24
25
|
noWrap ? 'no-wrap' : '',
|
|
25
26
|
`alignment-${align}`,
|
|
27
|
+
className,
|
|
26
28
|
].join(' ')
|
|
27
29
|
return (
|
|
28
30
|
<td role="cell" className={cssClasses} {...props}>
|
|
@@ -115,6 +115,14 @@
|
|
|
115
115
|
text-decoration-line: underline;
|
|
116
116
|
}
|
|
117
117
|
|
|
118
|
+
@mixin body-link {
|
|
119
|
+
@include base;
|
|
120
|
+
font-weight: 400;
|
|
121
|
+
color: color_alias.$primary-color-600;
|
|
122
|
+
font-size: 1rem;
|
|
123
|
+
line-height: 1.5rem;
|
|
124
|
+
}
|
|
125
|
+
|
|
118
126
|
@mixin footnote-primary {
|
|
119
127
|
@include base;
|
|
120
128
|
font-weight: 400;
|
|
@@ -6,12 +6,21 @@ import { CardsTableHeader } from '../atoms/CardsTableHeader'
|
|
|
6
6
|
import { CardsTableRow } from '../atoms/CardsTableRow'
|
|
7
7
|
import { CardsTableBody } from '../atoms/CardsTableBody'
|
|
8
8
|
import { CardsTableCell } from '../atoms/CardsTableCell'
|
|
9
|
-
import {
|
|
9
|
+
import { IconButton } from '../atoms/IconButton'
|
|
10
|
+
import { Badge } from '../atoms/Badge'
|
|
11
|
+
|
|
12
|
+
const figmaPrimaryDesign = {
|
|
13
|
+
design: {
|
|
14
|
+
type: 'figma',
|
|
15
|
+
url: 'https://www.figma.com/file/DN2ova21vWqCRvPspBXgI1/Design-System?type=design&node-id=2331-990&mode=dev',
|
|
16
|
+
},
|
|
17
|
+
}
|
|
10
18
|
|
|
11
19
|
const meta = {
|
|
12
20
|
title: 'Design System/Atoms/CardsTable',
|
|
13
21
|
component: CardsTable,
|
|
14
22
|
tags: ['autodocs'],
|
|
23
|
+
parameters: figmaPrimaryDesign,
|
|
15
24
|
}
|
|
16
25
|
|
|
17
26
|
export default meta
|
|
@@ -24,34 +33,101 @@ export const Primary = {
|
|
|
24
33
|
<CardsTableHeader>Game title</CardsTableHeader>
|
|
25
34
|
<CardsTableHeader>Company address</CardsTableHeader>
|
|
26
35
|
<CardsTableHeader>Customer service email</CardsTableHeader>
|
|
36
|
+
<CardsTableHeader>Price</CardsTableHeader>
|
|
37
|
+
<CardsTableHeader className="actions">Actions</CardsTableHeader>
|
|
27
38
|
</CardsTableRow>
|
|
28
39
|
</CardsTableHead>
|
|
29
40
|
<CardsTableBody>
|
|
30
41
|
<CardsTableRow>
|
|
31
|
-
<CardsTableCell>
|
|
32
|
-
|
|
42
|
+
<CardsTableCell>
|
|
43
|
+
<span>Metal Gear Solid 5: The Phantom Pain</span>
|
|
44
|
+
<Badge
|
|
45
|
+
accessibilityLabel="Game is bought"
|
|
46
|
+
text="Bought"
|
|
47
|
+
variant="success-outlined"
|
|
48
|
+
/>
|
|
49
|
+
</CardsTableCell>
|
|
50
|
+
<CardsTableCell>
|
|
33
51
|
Konami Digital Entertainment Co., Ltd. 1-11-1, Ginza, Chuo-ku,
|
|
34
52
|
Tokyo, 104-0061 Japan
|
|
35
53
|
</CardsTableCell>
|
|
36
|
-
<CardsTableCell
|
|
54
|
+
<CardsTableCell>konami@fakemail.com</CardsTableCell>
|
|
55
|
+
<CardsTableCell align="right">6,99 €</CardsTableCell>
|
|
56
|
+
<CardsTableCell className="actions" align="center">
|
|
57
|
+
<div style={{ display: 'flex', gap: '1.75rem' }}>
|
|
58
|
+
<IconButton
|
|
59
|
+
icon="Edit"
|
|
60
|
+
accessibilityLabel="Edit game"
|
|
61
|
+
href="link.com"
|
|
62
|
+
/>
|
|
63
|
+
<IconButton
|
|
64
|
+
icon="Export"
|
|
65
|
+
accessibilityLabel="Export game"
|
|
66
|
+
href="link.com"
|
|
67
|
+
/>
|
|
68
|
+
<IconButton
|
|
69
|
+
icon="Delete"
|
|
70
|
+
accessibilityLabel="Delete game"
|
|
71
|
+
href="link.com"
|
|
72
|
+
/>
|
|
73
|
+
</div>
|
|
74
|
+
</CardsTableCell>
|
|
37
75
|
</CardsTableRow>
|
|
38
76
|
|
|
39
77
|
<CardsTableRow>
|
|
40
78
|
<CardsTableCell>The Witcher 3</CardsTableCell>
|
|
41
|
-
<CardsTableCell
|
|
79
|
+
<CardsTableCell>
|
|
42
80
|
CD PROJEKT S.A. ul. Jagiellońska 74 03-301 Warszawa Poland
|
|
43
81
|
</CardsTableCell>
|
|
44
|
-
<CardsTableCell
|
|
82
|
+
<CardsTableCell>cdprojekt@fakemail.com</CardsTableCell>
|
|
83
|
+
<CardsTableCell align="right">19,99 €</CardsTableCell>
|
|
84
|
+
<CardsTableCell className="actions" align="center">
|
|
85
|
+
<div style={{ display: 'flex', gap: '1.75rem' }}>
|
|
86
|
+
<IconButton
|
|
87
|
+
icon="Edit"
|
|
88
|
+
accessibilityLabel="Edit game"
|
|
89
|
+
href="link.com"
|
|
90
|
+
/>
|
|
91
|
+
<IconButton
|
|
92
|
+
icon="Export"
|
|
93
|
+
accessibilityLabel="Export game"
|
|
94
|
+
href="link.com"
|
|
95
|
+
/>
|
|
96
|
+
<IconButton
|
|
97
|
+
icon="Delete"
|
|
98
|
+
accessibilityLabel="Delete game"
|
|
99
|
+
href="link.com"
|
|
100
|
+
/>
|
|
101
|
+
</div>
|
|
102
|
+
</CardsTableCell>
|
|
45
103
|
</CardsTableRow>
|
|
46
104
|
|
|
47
105
|
<CardsTableRow>
|
|
48
106
|
<CardsTableCell>Tekken 8</CardsTableCell>
|
|
49
|
-
<CardsTableCell
|
|
107
|
+
<CardsTableCell>
|
|
50
108
|
Bandai Namco Studios Inc. ; Address: 2-37-25 Eitai, Koto-ku, Tokyo
|
|
51
109
|
135-0034, Japan
|
|
52
110
|
</CardsTableCell>
|
|
53
|
-
<CardsTableCell
|
|
54
|
-
|
|
111
|
+
<CardsTableCell>namco@fakemail.com</CardsTableCell>
|
|
112
|
+
<CardsTableCell align="right">79,99 €</CardsTableCell>
|
|
113
|
+
<CardsTableCell className="actions" align="center">
|
|
114
|
+
<div style={{ display: 'flex', gap: '1.75rem' }}>
|
|
115
|
+
<IconButton
|
|
116
|
+
icon="Edit"
|
|
117
|
+
accessibilityLabel="Edit game"
|
|
118
|
+
href="link.com"
|
|
119
|
+
/>
|
|
120
|
+
<IconButton
|
|
121
|
+
icon="Export"
|
|
122
|
+
accessibilityLabel="Export game"
|
|
123
|
+
href="link.com"
|
|
124
|
+
/>
|
|
125
|
+
<IconButton
|
|
126
|
+
icon="Delete"
|
|
127
|
+
accessibilityLabel="Delete game"
|
|
128
|
+
href="link.com"
|
|
129
|
+
/>
|
|
130
|
+
</div>
|
|
55
131
|
</CardsTableCell>
|
|
56
132
|
</CardsTableRow>
|
|
57
133
|
</CardsTableBody>
|
|
@@ -26,7 +26,7 @@ const meta = {
|
|
|
26
26
|
const figmaPrimaryDesign = {
|
|
27
27
|
design: {
|
|
28
28
|
type: 'figma',
|
|
29
|
-
url: 'https://www.figma.com/file/DN2ova21vWqCRvPspBXgI1/Design-System?type=design&node-id=
|
|
29
|
+
url: 'https://www.figma.com/file/DN2ova21vWqCRvPspBXgI1/Design-System?type=design&node-id=2331-990&mode=dev',
|
|
30
30
|
},
|
|
31
31
|
}
|
|
32
32
|
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { render } from '@testing-library/react'
|
|
3
|
+
import { CardsTable } from '@/atoms/CardsTable'
|
|
4
|
+
import { CardsTableHead } from '@/atoms/CardsTableHead'
|
|
5
|
+
import { CardsTableHeader } from '@/atoms/CardsTableHeader'
|
|
6
|
+
import { CardsTableRow } from '@/atoms/CardsTableRow'
|
|
7
|
+
import { CardsTableBody } from '@/atoms/CardsTableBody'
|
|
8
|
+
import { CardsTableCell, Alignment } from '@/atoms/CardsTableCell'
|
|
9
|
+
import { IconButton } from '@/atoms/IconButton'
|
|
10
|
+
import { Badge } from '@/atoms/Badge'
|
|
11
|
+
|
|
12
|
+
describe('CardsTable', () => {
|
|
13
|
+
it('renders', () => {
|
|
14
|
+
const { getAllByRole } = render(
|
|
15
|
+
<CardsTable>
|
|
16
|
+
<CardsTableHead>
|
|
17
|
+
<CardsTableRow>
|
|
18
|
+
<CardsTableHeader>Game title</CardsTableHeader>
|
|
19
|
+
<CardsTableHeader>Company address</CardsTableHeader>
|
|
20
|
+
<CardsTableHeader>Customer service email</CardsTableHeader>
|
|
21
|
+
<CardsTableHeader>Price</CardsTableHeader>
|
|
22
|
+
<CardsTableHeader className="actions">Actions</CardsTableHeader>
|
|
23
|
+
</CardsTableRow>
|
|
24
|
+
</CardsTableHead>
|
|
25
|
+
<CardsTableBody>
|
|
26
|
+
<CardsTableRow>
|
|
27
|
+
<CardsTableCell>
|
|
28
|
+
<span>Metal Gear Solid 5: The Phantom Pain</span>
|
|
29
|
+
<Badge
|
|
30
|
+
accessibilityLabel="Game is bought"
|
|
31
|
+
text="Bought"
|
|
32
|
+
variant="success-outlined"
|
|
33
|
+
/>
|
|
34
|
+
</CardsTableCell>
|
|
35
|
+
<CardsTableCell>
|
|
36
|
+
Konami Digital Entertainment Co., Ltd. 1-11-1, Ginza, Chuo-ku,
|
|
37
|
+
Tokyo, 104-0061 Japan
|
|
38
|
+
</CardsTableCell>
|
|
39
|
+
<CardsTableCell>konami@fakemail.com</CardsTableCell>
|
|
40
|
+
<CardsTableCell align={Alignment.Right}>6,99 €</CardsTableCell>
|
|
41
|
+
<CardsTableCell className="actions" align={Alignment.Center}>
|
|
42
|
+
<div style={{ display: 'flex', gap: '1.75rem' }}>
|
|
43
|
+
<IconButton
|
|
44
|
+
icon="Edit"
|
|
45
|
+
accessibilityLabel="Edit game"
|
|
46
|
+
href="link.com"
|
|
47
|
+
/>
|
|
48
|
+
<IconButton
|
|
49
|
+
icon="Export"
|
|
50
|
+
accessibilityLabel="Export game"
|
|
51
|
+
href="link.com"
|
|
52
|
+
/>
|
|
53
|
+
<IconButton
|
|
54
|
+
icon="Delete"
|
|
55
|
+
accessibilityLabel="Delete game"
|
|
56
|
+
href="link.com"
|
|
57
|
+
/>
|
|
58
|
+
</div>
|
|
59
|
+
</CardsTableCell>
|
|
60
|
+
</CardsTableRow>
|
|
61
|
+
|
|
62
|
+
<CardsTableRow>
|
|
63
|
+
<CardsTableCell>The Witcher 3</CardsTableCell>
|
|
64
|
+
<CardsTableCell>
|
|
65
|
+
CD PROJEKT S.A. ul. Jagiellońska 74 03-301 Warszawa Poland
|
|
66
|
+
</CardsTableCell>
|
|
67
|
+
<CardsTableCell>cdprojekt@fakemail.com</CardsTableCell>
|
|
68
|
+
<CardsTableCell align={Alignment.Right}>19,99 €</CardsTableCell>
|
|
69
|
+
<CardsTableCell className="actions" align={Alignment.Center}>
|
|
70
|
+
<div style={{ display: 'flex', gap: '1.75rem' }}>
|
|
71
|
+
<IconButton
|
|
72
|
+
icon="Edit"
|
|
73
|
+
accessibilityLabel="Edit game"
|
|
74
|
+
href="link.com"
|
|
75
|
+
/>
|
|
76
|
+
<IconButton
|
|
77
|
+
icon="Export"
|
|
78
|
+
accessibilityLabel="Export game"
|
|
79
|
+
href="link.com"
|
|
80
|
+
/>
|
|
81
|
+
<IconButton
|
|
82
|
+
icon="Delete"
|
|
83
|
+
accessibilityLabel="Delete game"
|
|
84
|
+
href="link.com"
|
|
85
|
+
/>
|
|
86
|
+
</div>
|
|
87
|
+
</CardsTableCell>
|
|
88
|
+
</CardsTableRow>
|
|
89
|
+
|
|
90
|
+
<CardsTableRow>
|
|
91
|
+
<CardsTableCell>Tekken 8</CardsTableCell>
|
|
92
|
+
<CardsTableCell>
|
|
93
|
+
Bandai Namco Studios Inc. ; Address: 2-37-25 Eitai, Koto-ku, Tokyo
|
|
94
|
+
135-0034, Japan
|
|
95
|
+
</CardsTableCell>
|
|
96
|
+
<CardsTableCell>namco@fakemail.com</CardsTableCell>
|
|
97
|
+
<CardsTableCell align={Alignment.Right}>79,99 €</CardsTableCell>
|
|
98
|
+
<CardsTableCell className="actions" align={Alignment.Center}>
|
|
99
|
+
<div style={{ display: 'flex', gap: '1.75rem' }}>
|
|
100
|
+
<IconButton
|
|
101
|
+
icon="Edit"
|
|
102
|
+
accessibilityLabel="Edit game"
|
|
103
|
+
href="link.com"
|
|
104
|
+
/>
|
|
105
|
+
<IconButton
|
|
106
|
+
icon="Export"
|
|
107
|
+
accessibilityLabel="Export game"
|
|
108
|
+
href="link.com"
|
|
109
|
+
/>
|
|
110
|
+
<IconButton
|
|
111
|
+
icon="Delete"
|
|
112
|
+
accessibilityLabel="Delete game"
|
|
113
|
+
href="link.com"
|
|
114
|
+
/>
|
|
115
|
+
</div>
|
|
116
|
+
</CardsTableCell>
|
|
117
|
+
</CardsTableRow>
|
|
118
|
+
</CardsTableBody>
|
|
119
|
+
</CardsTable>,
|
|
120
|
+
)
|
|
121
|
+
|
|
122
|
+
expect(getAllByRole('table').length).toBe(1)
|
|
123
|
+
expect(getAllByRole('rowgroup').length).toBe(2)
|
|
124
|
+
expect(getAllByRole('columnheader').length).toBeGreaterThan(1)
|
|
125
|
+
expect(getAllByRole('row').length).toBeGreaterThan(1)
|
|
126
|
+
expect(getAllByRole('cell').length).toBeGreaterThan(1)
|
|
127
|
+
})
|
|
128
|
+
})
|