agroptima-design-system 0.13.0 → 0.13.1
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
CHANGED
|
@@ -58,6 +58,11 @@
|
|
|
58
58
|
justify-content: center;
|
|
59
59
|
}
|
|
60
60
|
|
|
61
|
+
.actions {
|
|
62
|
+
display: flex;
|
|
63
|
+
gap: config.$space-7x;
|
|
64
|
+
}
|
|
65
|
+
|
|
61
66
|
&.primary {
|
|
62
67
|
thead > tr {
|
|
63
68
|
@include typography.cards-table-list-header;
|
|
@@ -135,7 +140,7 @@
|
|
|
135
140
|
|
|
136
141
|
// Media queries
|
|
137
142
|
// Mobile & tablet cases
|
|
138
|
-
@media only screen and (
|
|
143
|
+
@media only screen and (max-width: breakpoints.$large) {
|
|
139
144
|
thead {
|
|
140
145
|
display: none;
|
|
141
146
|
}
|
|
@@ -154,18 +159,25 @@
|
|
|
154
159
|
|
|
155
160
|
td:first-child {
|
|
156
161
|
order: -2;
|
|
157
|
-
width: 50%;
|
|
158
162
|
margin-bottom: config.$space-2x;
|
|
159
163
|
}
|
|
164
|
+
|
|
165
|
+
.title-actions-3 {
|
|
166
|
+
width: calc(100% - 3 * config.$icon-size-5x - 2 * config.$space-7x - 8px);
|
|
167
|
+
}
|
|
168
|
+
.title-actions-2 {
|
|
169
|
+
width: calc(100% - 2 * config.$icon-size-5x - 1 * config.$space-7x - 8px);
|
|
170
|
+
}
|
|
171
|
+
.title-actions-1 {
|
|
172
|
+
width: calc(100% - 1 * config.$icon-size-5x - 8px);
|
|
173
|
+
}
|
|
174
|
+
|
|
160
175
|
td.actions {
|
|
161
176
|
order: -1;
|
|
162
|
-
width: 35%;
|
|
163
177
|
flex-grow: 1;
|
|
164
178
|
margin-bottom: config.$space-2x;
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
justify-content: flex-end;
|
|
168
|
-
}
|
|
179
|
+
justify-content: flex-end;
|
|
180
|
+
flex-basis: content;
|
|
169
181
|
}
|
|
170
182
|
|
|
171
183
|
.badge {
|
|
@@ -178,7 +190,6 @@
|
|
|
178
190
|
thead {
|
|
179
191
|
display: flex;
|
|
180
192
|
}
|
|
181
|
-
|
|
182
193
|
tr {
|
|
183
194
|
flex-direction: row;
|
|
184
195
|
}
|
|
@@ -190,14 +201,14 @@
|
|
|
190
201
|
align-items: center;
|
|
191
202
|
flex: 2;
|
|
192
203
|
}
|
|
193
|
-
|
|
204
|
+
th.actions {
|
|
205
|
+
justify-content: center;
|
|
206
|
+
flex: 1;
|
|
207
|
+
}
|
|
194
208
|
td {
|
|
195
209
|
padding: config.$space-5x config.$space-3x;
|
|
196
210
|
}
|
|
197
211
|
|
|
198
|
-
th.actions {
|
|
199
|
-
flex: 1;
|
|
200
|
-
}
|
|
201
212
|
td.actions {
|
|
202
213
|
order: 0;
|
|
203
214
|
justify-content: center;
|
|
@@ -12,18 +12,31 @@ export interface CardsTableCellProps
|
|
|
12
12
|
extends React.ComponentPropsWithoutRef<'td'> {
|
|
13
13
|
noWrap?: boolean
|
|
14
14
|
align?: Alignment
|
|
15
|
+
actions?: boolean
|
|
16
|
+
titleWithActions?: number
|
|
15
17
|
}
|
|
16
18
|
|
|
17
19
|
export function CardsTableCell({
|
|
18
20
|
noWrap = false,
|
|
21
|
+
actions = false,
|
|
22
|
+
titleWithActions = 0,
|
|
19
23
|
align = Alignment.Left,
|
|
20
24
|
children,
|
|
21
25
|
className,
|
|
22
26
|
...props
|
|
23
27
|
}: CardsTableCellProps): React.JSX.Element {
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
|
|
28
|
+
const titleActions =
|
|
29
|
+
titleWithActions > 0 ? `title-actions-${titleWithActions}` : ''
|
|
30
|
+
const cssClasses = classNames(
|
|
31
|
+
'cell',
|
|
32
|
+
`alignment-${align}`,
|
|
33
|
+
titleActions,
|
|
34
|
+
className,
|
|
35
|
+
{
|
|
36
|
+
'no-wrap': noWrap,
|
|
37
|
+
actions,
|
|
38
|
+
},
|
|
39
|
+
)
|
|
27
40
|
return (
|
|
28
41
|
<td role="cell" className={cssClasses} {...props}>
|
|
29
42
|
{children}
|
|
@@ -1,14 +1,22 @@
|
|
|
1
1
|
import { classNames } from '../utils/classNames'
|
|
2
|
+
import { Alignment } from './CardsTableCell'
|
|
2
3
|
|
|
3
4
|
export interface CardsTableHeaderProps
|
|
4
|
-
extends React.ComponentPropsWithoutRef<'th'> {
|
|
5
|
+
extends React.ComponentPropsWithoutRef<'th'> {
|
|
6
|
+
align?: Alignment
|
|
7
|
+
actions?: boolean
|
|
8
|
+
}
|
|
5
9
|
|
|
6
10
|
export function CardsTableHeader({
|
|
7
11
|
children,
|
|
8
12
|
className,
|
|
13
|
+
align = Alignment.Left,
|
|
14
|
+
actions = false,
|
|
9
15
|
...props
|
|
10
16
|
}: CardsTableHeaderProps) {
|
|
11
|
-
const cssClasses = classNames('header', className
|
|
17
|
+
const cssClasses = classNames('header', `alignment-${align}`, className, {
|
|
18
|
+
actions,
|
|
19
|
+
})
|
|
12
20
|
return (
|
|
13
21
|
<th scope="col" role="columnheader" className={cssClasses} {...props}>
|
|
14
22
|
{children}
|
|
@@ -34,12 +34,12 @@ export const Primary = {
|
|
|
34
34
|
<CardsTableHeader>Company address</CardsTableHeader>
|
|
35
35
|
<CardsTableHeader>Customer service email</CardsTableHeader>
|
|
36
36
|
<CardsTableHeader>Price</CardsTableHeader>
|
|
37
|
-
<CardsTableHeader
|
|
37
|
+
<CardsTableHeader actions>Actions</CardsTableHeader>
|
|
38
38
|
</CardsTableRow>
|
|
39
39
|
</CardsTableHead>
|
|
40
40
|
<CardsTableBody>
|
|
41
41
|
<CardsTableRow>
|
|
42
|
-
<CardsTableCell>
|
|
42
|
+
<CardsTableCell titleWithActions={3}>
|
|
43
43
|
<span>Metal Gear Solid 5: The Phantom Pain</span>
|
|
44
44
|
<Badge
|
|
45
45
|
accessibilityLabel="Game is bought"
|
|
@@ -53,81 +53,60 @@ export const Primary = {
|
|
|
53
53
|
</CardsTableCell>
|
|
54
54
|
<CardsTableCell>konami@fakemail.com</CardsTableCell>
|
|
55
55
|
<CardsTableCell align="right">6,99 €</CardsTableCell>
|
|
56
|
-
<CardsTableCell
|
|
57
|
-
<
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
/>
|
|
73
|
-
</div>
|
|
56
|
+
<CardsTableCell actions>
|
|
57
|
+
<IconButton
|
|
58
|
+
icon="Edit"
|
|
59
|
+
accessibilityLabel="Edit game"
|
|
60
|
+
href="link.com"
|
|
61
|
+
/>
|
|
62
|
+
<IconButton
|
|
63
|
+
icon="Export"
|
|
64
|
+
accessibilityLabel="Export game"
|
|
65
|
+
href="link.com"
|
|
66
|
+
/>
|
|
67
|
+
<IconButton
|
|
68
|
+
icon="Delete"
|
|
69
|
+
accessibilityLabel="Delete game"
|
|
70
|
+
href="link.com"
|
|
71
|
+
/>
|
|
74
72
|
</CardsTableCell>
|
|
75
73
|
</CardsTableRow>
|
|
76
74
|
|
|
77
75
|
<CardsTableRow>
|
|
78
|
-
<CardsTableCell>The Witcher 3</CardsTableCell>
|
|
76
|
+
<CardsTableCell titleWithActions={2}>The Witcher 3</CardsTableCell>
|
|
79
77
|
<CardsTableCell>
|
|
80
78
|
CD PROJEKT S.A. ul. Jagiellońska 74 03-301 Warszawa Poland
|
|
81
79
|
</CardsTableCell>
|
|
82
80
|
<CardsTableCell>cdprojekt@fakemail.com</CardsTableCell>
|
|
83
81
|
<CardsTableCell align="right">19,99 €</CardsTableCell>
|
|
84
|
-
<CardsTableCell
|
|
85
|
-
<
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
/>
|
|
96
|
-
<IconButton
|
|
97
|
-
icon="Delete"
|
|
98
|
-
accessibilityLabel="Delete game"
|
|
99
|
-
href="link.com"
|
|
100
|
-
/>
|
|
101
|
-
</div>
|
|
82
|
+
<CardsTableCell actions>
|
|
83
|
+
<IconButton
|
|
84
|
+
icon="Edit"
|
|
85
|
+
accessibilityLabel="Edit game"
|
|
86
|
+
href="link.com"
|
|
87
|
+
/>
|
|
88
|
+
<IconButton
|
|
89
|
+
icon="Export"
|
|
90
|
+
accessibilityLabel="Export game"
|
|
91
|
+
href="link.com"
|
|
92
|
+
/>
|
|
102
93
|
</CardsTableCell>
|
|
103
94
|
</CardsTableRow>
|
|
104
95
|
|
|
105
96
|
<CardsTableRow>
|
|
106
|
-
<CardsTableCell>Tekken 8</CardsTableCell>
|
|
97
|
+
<CardsTableCell titleWithActions={1}>Tekken 8</CardsTableCell>
|
|
107
98
|
<CardsTableCell>
|
|
108
99
|
Bandai Namco Studios Inc. ; Address: 2-37-25 Eitai, Koto-ku, Tokyo
|
|
109
100
|
135-0034, Japan
|
|
110
101
|
</CardsTableCell>
|
|
111
102
|
<CardsTableCell>namco@fakemail.com</CardsTableCell>
|
|
112
103
|
<CardsTableCell align="right">79,99 €</CardsTableCell>
|
|
113
|
-
<CardsTableCell
|
|
114
|
-
<
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
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>
|
|
104
|
+
<CardsTableCell actions>
|
|
105
|
+
<IconButton
|
|
106
|
+
icon="Edit"
|
|
107
|
+
accessibilityLabel="Edit game"
|
|
108
|
+
href="link.com"
|
|
109
|
+
/>
|
|
131
110
|
</CardsTableCell>
|
|
132
111
|
</CardsTableRow>
|
|
133
112
|
</CardsTableBody>
|