@coinbase/cds-mobile 8.15.0 → 8.16.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.
Files changed (19) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dts/cells/Cell.d.ts +29 -2
  3. package/dts/cells/Cell.d.ts.map +1 -1
  4. package/dts/cells/CellDetail.d.ts +4 -0
  5. package/dts/cells/CellDetail.d.ts.map +1 -1
  6. package/dts/cells/CellMedia.d.ts +4 -0
  7. package/dts/cells/CellMedia.d.ts.map +1 -1
  8. package/dts/cells/ListCell.d.ts +58 -4
  9. package/dts/cells/ListCell.d.ts.map +1 -1
  10. package/dts/cells/ListCellFallback.d.ts +1 -1
  11. package/dts/cells/ListCellFallback.d.ts.map +1 -1
  12. package/esm/cells/Cell.js +32 -16
  13. package/esm/cells/CellDetail.js +3 -2
  14. package/esm/cells/CellMedia.js +4 -0
  15. package/esm/cells/ListCell.js +53 -15
  16. package/esm/cells/ListCellFallback.js +10 -3
  17. package/esm/cells/__stories__/ListCell.stories.js +595 -110
  18. package/esm/cells/__stories__/ListCellFallback.stories.js +49 -30
  19. package/package.json +2 -2
package/esm/cells/__stories__/ListCellFallback.stories.js CHANGED
@@ -14,54 +14,65 @@ const Fallbacks = () => {
14
14
  return /*#__PURE__*/_jsxs(_Fragment, {
15
15
  children: [/*#__PURE__*/_jsx(ListCellFallback, {
16
16
  disableRandomRectWidth: true,
17
- title: true
17
+ title: true,
18
+ layoutSpacing: "hug"
18
19
  }), /*#__PURE__*/_jsx(ListCellFallback, {
19
20
  description: true,
20
21
  disableRandomRectWidth: true,
21
- title: true
22
+ title: true,
23
+ layoutSpacing: "hug"
22
24
  }), /*#__PURE__*/_jsx(ListCellFallback, {
23
25
  detail: true,
24
26
  disableRandomRectWidth: true,
25
- title: true
27
+ title: true,
28
+ layoutSpacing: "hug"
26
29
  }), /*#__PURE__*/_jsx(ListCellFallback, {
27
30
  disableRandomRectWidth: true,
28
31
  subdetail: true,
29
- title: true
32
+ title: true,
33
+ layoutSpacing: "hug"
30
34
  }), /*#__PURE__*/_jsx(ListCellFallback, {
31
35
  description: true,
32
36
  detail: true,
33
37
  disableRandomRectWidth: true,
34
- title: true
38
+ title: true,
39
+ layoutSpacing: "hug"
35
40
  }), /*#__PURE__*/_jsx(ListCellFallback, {
36
41
  description: true,
37
42
  detail: true,
38
43
  disableRandomRectWidth: true,
39
44
  subdetail: true,
40
- title: true
45
+ title: true,
46
+ layoutSpacing: "hug"
41
47
  }), /*#__PURE__*/_jsx(ListCellFallback, {
42
48
  disableRandomRectWidth: true,
43
49
  title: true,
50
+ layoutSpacing: "hug",
44
51
  media: "icon"
45
52
  }), /*#__PURE__*/_jsx(ListCellFallback, {
46
53
  description: true,
47
54
  disableRandomRectWidth: true,
48
55
  title: true,
56
+ layoutSpacing: "hug",
49
57
  media: "asset"
50
58
  }), /*#__PURE__*/_jsx(ListCellFallback, {
51
59
  detail: true,
52
60
  disableRandomRectWidth: true,
53
61
  title: true,
62
+ layoutSpacing: "hug",
54
63
  media: "image"
55
64
  }), /*#__PURE__*/_jsx(ListCellFallback, {
56
65
  disableRandomRectWidth: true,
57
66
  subdetail: true,
58
67
  title: true,
68
+ layoutSpacing: "hug",
59
69
  media: "avatar"
60
70
  }), /*#__PURE__*/_jsx(ListCellFallback, {
61
71
  description: true,
62
72
  detail: true,
63
73
  disableRandomRectWidth: true,
64
74
  title: true,
75
+ layoutSpacing: "hug",
65
76
  media: "icon"
66
77
  }), /*#__PURE__*/_jsx(ListCellFallback, {
67
78
  description: true,
@@ -69,12 +80,14 @@ const Fallbacks = () => {
69
80
  disableRandomRectWidth: true,
70
81
  subdetail: true,
71
82
  title: true,
83
+ layoutSpacing: "hug",
72
84
  media: "asset"
73
85
  }), /*#__PURE__*/_jsx(ListCellFallback, {
74
86
  description: true,
75
87
  detail: true,
76
88
  subdetail: true,
77
89
  title: true,
90
+ layoutSpacing: "hug",
78
91
  media: "asset",
79
92
  rectWidthVariant: 0
80
93
  }), /*#__PURE__*/_jsx(ListCellFallback, {
@@ -82,6 +95,7 @@ const Fallbacks = () => {
82
95
  detail: true,
83
96
  subdetail: true,
84
97
  title: true,
98
+ layoutSpacing: "hug",
85
99
  media: "asset",
86
100
  rectWidthVariant: 1
87
101
  }), /*#__PURE__*/_jsx(ListCellFallback, {
@@ -89,100 +103,101 @@ const Fallbacks = () => {
89
103
  detail: true,
90
104
  subdetail: true,
91
105
  title: true,
106
+ layoutSpacing: "hug",
92
107
  media: "asset",
93
108
  rectWidthVariant: 2
94
109
  }), /*#__PURE__*/_jsx(ListCellFallback, {
95
- compact: true,
96
110
  disableRandomRectWidth: true,
97
- title: true
111
+ title: true,
112
+ layoutSpacing: "compact"
98
113
  }), /*#__PURE__*/_jsx(ListCellFallback, {
99
- compact: true,
100
114
  description: true,
101
115
  disableRandomRectWidth: true,
102
- title: true
116
+ title: true,
117
+ layoutSpacing: "compact"
103
118
  }), /*#__PURE__*/_jsx(ListCellFallback, {
104
- compact: true,
105
119
  detail: true,
106
120
  disableRandomRectWidth: true,
107
- title: true
121
+ title: true,
122
+ layoutSpacing: "compact"
108
123
  }), /*#__PURE__*/_jsx(ListCellFallback, {
109
- compact: true,
110
124
  disableRandomRectWidth: true,
111
125
  subdetail: true,
112
- title: true
126
+ title: true,
127
+ layoutSpacing: "compact"
113
128
  }), /*#__PURE__*/_jsx(ListCellFallback, {
114
- compact: true,
115
129
  description: true,
116
130
  detail: true,
117
131
  disableRandomRectWidth: true,
118
- title: true
132
+ title: true,
133
+ layoutSpacing: "compact"
119
134
  }), /*#__PURE__*/_jsx(ListCellFallback, {
120
- compact: true,
121
135
  description: true,
122
136
  detail: true,
123
137
  disableRandomRectWidth: true,
124
138
  subdetail: true,
125
- title: true
139
+ title: true,
140
+ layoutSpacing: "compact"
126
141
  }), /*#__PURE__*/_jsx(ListCellFallback, {
127
- compact: true,
128
142
  disableRandomRectWidth: true,
129
143
  title: true,
144
+ layoutSpacing: "compact",
130
145
  media: "icon"
131
146
  }), /*#__PURE__*/_jsx(ListCellFallback, {
132
- compact: true,
133
147
  description: true,
134
148
  disableRandomRectWidth: true,
135
149
  title: true,
150
+ layoutSpacing: "compact",
136
151
  media: "asset"
137
152
  }), /*#__PURE__*/_jsx(ListCellFallback, {
138
- compact: true,
139
153
  detail: true,
140
154
  disableRandomRectWidth: true,
141
155
  title: true,
156
+ layoutSpacing: "compact",
142
157
  media: "image"
143
158
  }), /*#__PURE__*/_jsx(ListCellFallback, {
144
- compact: true,
145
159
  disableRandomRectWidth: true,
146
160
  subdetail: true,
147
161
  title: true,
162
+ layoutSpacing: "compact",
148
163
  media: "avatar"
149
164
  }), /*#__PURE__*/_jsx(ListCellFallback, {
150
- compact: true,
151
165
  description: true,
152
166
  detail: true,
153
167
  disableRandomRectWidth: true,
154
168
  title: true,
169
+ layoutSpacing: "compact",
155
170
  media: "icon"
156
171
  }), /*#__PURE__*/_jsx(ListCellFallback, {
157
- compact: true,
158
172
  description: true,
159
173
  detail: true,
160
174
  disableRandomRectWidth: true,
161
175
  subdetail: true,
162
176
  title: true,
177
+ layoutSpacing: "compact",
163
178
  media: "asset"
164
179
  }), /*#__PURE__*/_jsx(ListCellFallback, {
165
- compact: true,
166
180
  description: true,
167
181
  detail: true,
168
182
  subdetail: true,
169
183
  title: true,
184
+ layoutSpacing: "compact",
170
185
  media: "asset",
171
186
  rectWidthVariant: 0
172
187
  }), /*#__PURE__*/_jsx(ListCellFallback, {
173
- compact: true,
174
188
  description: true,
175
189
  detail: true,
176
190
  subdetail: true,
177
191
  title: true,
192
+ layoutSpacing: "compact",
178
193
  media: "asset",
179
194
  rectWidthVariant: 1
180
195
  }), /*#__PURE__*/_jsx(ListCellFallback, {
181
- compact: true,
182
196
  description: true,
183
197
  detail: true,
184
198
  subdetail: true,
185
199
  title: true,
200
+ layoutSpacing: "compact",
186
201
  media: "asset",
187
202
  rectWidthVariant: 2
188
203
  }), /*#__PURE__*/_jsx(ListCellFallback, {
@@ -192,11 +207,13 @@ const Fallbacks = () => {
192
207
  outerSpacing: outerSpacing
193
208
  }), /*#__PURE__*/_jsx(ListCellFallback, {
194
209
  disableRandomRectWidth: true,
195
- helperText: true
210
+ helperText: true,
211
+ layoutSpacing: "hug"
196
212
  }), /*#__PURE__*/_jsx(ListCellFallback, {
197
213
  disableRandomRectWidth: true,
198
214
  helperText: true,
199
- title: true
215
+ title: true,
216
+ layoutSpacing: "hug"
200
217
  }), /*#__PURE__*/_jsx(ListCellFallback, {
201
218
  description: true,
202
219
  detail: true,
@@ -204,6 +221,7 @@ const Fallbacks = () => {
204
221
  helperText: true,
205
222
  subdetail: true,
206
223
  title: true,
224
+ layoutSpacing: "compact",
207
225
  media: "image",
208
226
  styles: {
209
227
  helperText: {
@@ -214,6 +232,7 @@ const Fallbacks = () => {
214
232
  disableRandomRectWidth: true,
215
233
  helperText: true,
216
234
  title: true,
235
+ layoutSpacing: "compact",
217
236
  media: "icon",
218
237
  styles: {
219
238
  helperText: {
@@ -221,10 +240,10 @@ const Fallbacks = () => {
221
240
  }
222
241
  }
223
242
  }), /*#__PURE__*/_jsx(ListCellFallback, {
224
- compact: true,
225
243
  disableRandomRectWidth: true,
226
244
  helperText: true,
227
245
  title: true,
246
+ layoutSpacing: "compact",
228
247
  media: "icon",
229
248
  styles: {
230
249
  helperText: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-mobile",
3
- "version": "8.15.0",
3
+ "version": "8.16.1",
4
4
  "description": "Coinbase Design System - Mobile",
5
5
  "repository": {
6
6
  "type": "git",
@@ -150,7 +150,7 @@
150
150
  "react-native-svg": "^14.1.0"
151
151
  },
152
152
  "dependencies": {
153
- "@coinbase/cds-common": "^8.15.0",
153
+ "@coinbase/cds-common": "^8.16.1",
154
154
  "@coinbase/cds-icons": "^5.4.2",
155
155
  "@coinbase/cds-illustrations": "^4.23.1",
156
156
  "@coinbase/cds-lottie-files": "^3.3.2",