agroptima-design-system 0.9.2 → 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.
Files changed (10) hide show
  1. package/package.json +1 -1
  2. package/src/atoms/Alert.scss +1 -2
  3. package/src/atoms/CardsTable.scss +99 -22
  4. package/src/atoms/CardsTableCell.tsx +2 -0
  5. package/src/settings/_depth.scss +1 -2
  6. package/src/settings/typography/_content.scss +8 -0
  7. package/src/stories/CardsTable.stories.js +85 -9
  8. package/src/stories/CardsTableList.stories.ts +1 -1
  9. package/src/stories/Changelog.stories.mdx +9 -0
  10. package/tests/CardsTable.spec.tsx +128 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "agroptima-design-system",
3
- "version": "0.9.2",
3
+ "version": "0.10.0",
4
4
  "scripts": {
5
5
  "dev": "npm run storybook",
6
6
  "storybook": "storybook dev -p 6006 --ci",
package/src/atoms/Alert.scss CHANGED
@@ -6,12 +6,11 @@
6
6
  .alert {
7
7
  display: flex;
8
8
  justify-content: space-between;
9
- width: 100%;
10
- margin: auto;
11
9
  padding: config.$space-2x config.$space-3x;
12
10
  align-items: center;
13
11
  gap: config.$space-2x;
14
12
  border-radius: config.$corner-radius-xxs;
13
+ pointer-events: none;
15
14
 
16
15
  &.fit-content {
17
16
  width: fit-content;
package/src/atoms/CardsTable.scss CHANGED
@@ -3,18 +3,19 @@
3
3
  @use '../settings/config';
4
4
 
5
5
  .cards-table-list {
6
- width: 100%;
7
- border-collapse: separate;
8
- border-spacing: 0 config.$space-3x;
6
+ display: flex;
7
+ flex-direction: column;
8
+ gap: config.$space-3x;
9
9
 
10
- thead {
11
- background: transparent;
10
+ tbody {
11
+ display: flex;
12
+ flex-direction: column;
13
+ gap: config.$space-3x;
12
14
  }
13
15
 
14
- th,
15
- td {
16
- overflow: hidden;
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
- text-align: left;
53
+ justify-content: flex-start;
57
54
  }
58
55
 
59
56
  .alignment-center {
60
- text-align: center;
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
- tr > td:first-child {
138
- @include typography.cards-table-list-highlight-text;
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
  }
package/src/atoms/CardsTableCell.tsx CHANGED
@@ -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}>
package/src/settings/_depth.scss CHANGED
@@ -6,5 +6,4 @@ $above: 1; // use this for all values above the base
6
6
  $below: -1; // and this for all values below the base
7
7
 
8
8
  $z-dropdown-options: $base + $above;
9
- $z-alert: $z-dropdown-options + $above;
10
- $z-modal: $z-alert + $above;
9
+ $z-modal: $z-dropdown-options + $above;
package/src/settings/typography/_content.scss CHANGED
@@ -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;
package/src/stories/CardsTable.stories.js CHANGED
@@ -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 { Button } from '../atoms/Button'
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>Metal Gear Solid 5: The Phantom Pain</CardsTableCell>
32
- <CardsTableCell noWrap>
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 align="right">konami@fakemail.com</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 noWrap>
79
+ <CardsTableCell>
42
80
  CD PROJEKT S.A. ul. Jagiellońska 74 03-301 Warszawa Poland
43
81
  </CardsTableCell>
44
- <CardsTableCell align="right">cdprojekt@fakemail.com</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 noWrap>
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 align="right">
54
- namco@fakemail.com <Button label="click" />
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>
package/src/stories/CardsTableList.stories.ts CHANGED
@@ -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=1272-1328&mode=dev',
29
+ url: 'https://www.figma.com/file/DN2ova21vWqCRvPspBXgI1/Design-System?type=design&node-id=2331-990&mode=dev',
30
30
  },
31
31
  }
32
32
 
package/src/stories/Changelog.stories.mdx CHANGED
@@ -3,6 +3,15 @@ import { Meta } from "@storybook/addon-docs";
3
3
  <Meta title="Changelog" />
4
4
  # Changelog
5
5
 
6
+ ## 0.10.0
7
+
8
+ - Cards Table components now are responsive.
9
+ - Added Link style to Typography.
10
+
11
+ ## 0.9.3
12
+
13
+ - Fix alert component width.
14
+
6
15
  ## 0.9.2
7
16
 
8
17
  - Alert component can be rendered with fit-content width or 100% depending on the container.
package/tests/CardsTable.spec.tsx ADDED
@@ -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
+ })