@coinbase/cds-mobile 8.16.1 → 8.16.3

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 (13) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dts/cells/ListCell.d.ts +41 -36
  3. package/dts/cells/ListCell.d.ts.map +1 -1
  4. package/dts/cells/ListCellFallback.d.ts +1 -1
  5. package/dts/cells/ListCellFallback.d.ts.map +1 -1
  6. package/esm/cells/ListCell.js +16 -15
  7. package/esm/cells/ListCellFallback.js +5 -5
  8. package/esm/cells/__stories__/ListCell.stories.js +118 -119
  9. package/esm/cells/__stories__/ListCellFallback.stories.js +53 -53
  10. package/esm/stepper/Stepper.js +1 -1
  11. package/esm/stepper/__stories__/StepperHorizontal.stories.js +7 -0
  12. package/esm/stepper/__stories__/StepperVertical.stories.js +27 -0
  13. package/package.json +3 -3
package/esm/cells/__stories__/ListCellFallback.stories.js CHANGED
@@ -15,191 +15,191 @@ const Fallbacks = () => {
15
15
  children: [/*#__PURE__*/_jsx(ListCellFallback, {
16
16
  disableRandomRectWidth: true,
17
17
  title: true,
18
- layoutSpacing: "hug"
18
+ spacingVariant: "condensed"
19
19
  }), /*#__PURE__*/_jsx(ListCellFallback, {
20
20
  description: true,
21
21
  disableRandomRectWidth: true,
22
22
  title: true,
23
- layoutSpacing: "hug"
23
+ spacingVariant: "condensed"
24
24
  }), /*#__PURE__*/_jsx(ListCellFallback, {
25
25
  detail: true,
26
26
  disableRandomRectWidth: true,
27
27
  title: true,
28
- layoutSpacing: "hug"
28
+ spacingVariant: "condensed"
29
29
  }), /*#__PURE__*/_jsx(ListCellFallback, {
30
30
  disableRandomRectWidth: true,
31
31
  subdetail: true,
32
32
  title: true,
33
- layoutSpacing: "hug"
33
+ spacingVariant: "condensed"
34
34
  }), /*#__PURE__*/_jsx(ListCellFallback, {
35
35
  description: true,
36
36
  detail: true,
37
37
  disableRandomRectWidth: true,
38
38
  title: true,
39
- layoutSpacing: "hug"
39
+ spacingVariant: "condensed"
40
40
  }), /*#__PURE__*/_jsx(ListCellFallback, {
41
41
  description: true,
42
42
  detail: true,
43
43
  disableRandomRectWidth: true,
44
44
  subdetail: true,
45
45
  title: true,
46
- layoutSpacing: "hug"
46
+ spacingVariant: "condensed"
47
47
  }), /*#__PURE__*/_jsx(ListCellFallback, {
48
48
  disableRandomRectWidth: true,
49
49
  title: true,
50
- layoutSpacing: "hug",
51
- media: "icon"
50
+ media: "icon",
51
+ spacingVariant: "condensed"
52
52
  }), /*#__PURE__*/_jsx(ListCellFallback, {
53
53
  description: true,
54
54
  disableRandomRectWidth: true,
55
55
  title: true,
56
- layoutSpacing: "hug",
57
- media: "asset"
56
+ media: "asset",
57
+ spacingVariant: "condensed"
58
58
  }), /*#__PURE__*/_jsx(ListCellFallback, {
59
59
  detail: true,
60
60
  disableRandomRectWidth: true,
61
61
  title: true,
62
- layoutSpacing: "hug",
63
- media: "image"
62
+ media: "image",
63
+ spacingVariant: "condensed"
64
64
  }), /*#__PURE__*/_jsx(ListCellFallback, {
65
65
  disableRandomRectWidth: true,
66
66
  subdetail: true,
67
67
  title: true,
68
- layoutSpacing: "hug",
69
- media: "avatar"
68
+ media: "avatar",
69
+ spacingVariant: "condensed"
70
70
  }), /*#__PURE__*/_jsx(ListCellFallback, {
71
71
  description: true,
72
72
  detail: true,
73
73
  disableRandomRectWidth: true,
74
74
  title: true,
75
- layoutSpacing: "hug",
76
- media: "icon"
75
+ media: "icon",
76
+ spacingVariant: "condensed"
77
77
  }), /*#__PURE__*/_jsx(ListCellFallback, {
78
78
  description: true,
79
79
  detail: true,
80
80
  disableRandomRectWidth: true,
81
81
  subdetail: true,
82
82
  title: true,
83
- layoutSpacing: "hug",
84
- media: "asset"
83
+ media: "asset",
84
+ spacingVariant: "condensed"
85
85
  }), /*#__PURE__*/_jsx(ListCellFallback, {
86
86
  description: true,
87
87
  detail: true,
88
88
  subdetail: true,
89
89
  title: true,
90
- layoutSpacing: "hug",
91
90
  media: "asset",
92
- rectWidthVariant: 0
91
+ rectWidthVariant: 0,
92
+ spacingVariant: "condensed"
93
93
  }), /*#__PURE__*/_jsx(ListCellFallback, {
94
94
  description: true,
95
95
  detail: true,
96
96
  subdetail: true,
97
97
  title: true,
98
- layoutSpacing: "hug",
99
98
  media: "asset",
100
- rectWidthVariant: 1
99
+ rectWidthVariant: 1,
100
+ spacingVariant: "condensed"
101
101
  }), /*#__PURE__*/_jsx(ListCellFallback, {
102
102
  description: true,
103
103
  detail: true,
104
104
  subdetail: true,
105
105
  title: true,
106
- layoutSpacing: "hug",
107
106
  media: "asset",
108
- rectWidthVariant: 2
107
+ rectWidthVariant: 2,
108
+ spacingVariant: "condensed"
109
109
  }), /*#__PURE__*/_jsx(ListCellFallback, {
110
110
  disableRandomRectWidth: true,
111
111
  title: true,
112
- layoutSpacing: "compact"
112
+ spacingVariant: "compact"
113
113
  }), /*#__PURE__*/_jsx(ListCellFallback, {
114
114
  description: true,
115
115
  disableRandomRectWidth: true,
116
116
  title: true,
117
- layoutSpacing: "compact"
117
+ spacingVariant: "compact"
118
118
  }), /*#__PURE__*/_jsx(ListCellFallback, {
119
119
  detail: true,
120
120
  disableRandomRectWidth: true,
121
121
  title: true,
122
- layoutSpacing: "compact"
122
+ spacingVariant: "compact"
123
123
  }), /*#__PURE__*/_jsx(ListCellFallback, {
124
124
  disableRandomRectWidth: true,
125
125
  subdetail: true,
126
126
  title: true,
127
- layoutSpacing: "compact"
127
+ spacingVariant: "compact"
128
128
  }), /*#__PURE__*/_jsx(ListCellFallback, {
129
129
  description: true,
130
130
  detail: true,
131
131
  disableRandomRectWidth: true,
132
132
  title: true,
133
- layoutSpacing: "compact"
133
+ spacingVariant: "compact"
134
134
  }), /*#__PURE__*/_jsx(ListCellFallback, {
135
135
  description: true,
136
136
  detail: true,
137
137
  disableRandomRectWidth: true,
138
138
  subdetail: true,
139
139
  title: true,
140
- layoutSpacing: "compact"
140
+ spacingVariant: "compact"
141
141
  }), /*#__PURE__*/_jsx(ListCellFallback, {
142
142
  disableRandomRectWidth: true,
143
143
  title: true,
144
- layoutSpacing: "compact",
145
- media: "icon"
144
+ media: "icon",
145
+ spacingVariant: "compact"
146
146
  }), /*#__PURE__*/_jsx(ListCellFallback, {
147
147
  description: true,
148
148
  disableRandomRectWidth: true,
149
149
  title: true,
150
- layoutSpacing: "compact",
151
- media: "asset"
150
+ media: "asset",
151
+ spacingVariant: "compact"
152
152
  }), /*#__PURE__*/_jsx(ListCellFallback, {
153
153
  detail: true,
154
154
  disableRandomRectWidth: true,
155
155
  title: true,
156
- layoutSpacing: "compact",
157
- media: "image"
156
+ media: "image",
157
+ spacingVariant: "compact"
158
158
  }), /*#__PURE__*/_jsx(ListCellFallback, {
159
159
  disableRandomRectWidth: true,
160
160
  subdetail: true,
161
161
  title: true,
162
- layoutSpacing: "compact",
163
- media: "avatar"
162
+ media: "avatar",
163
+ spacingVariant: "compact"
164
164
  }), /*#__PURE__*/_jsx(ListCellFallback, {
165
165
  description: true,
166
166
  detail: true,
167
167
  disableRandomRectWidth: true,
168
168
  title: true,
169
- layoutSpacing: "compact",
170
- media: "icon"
169
+ media: "icon",
170
+ spacingVariant: "compact"
171
171
  }), /*#__PURE__*/_jsx(ListCellFallback, {
172
172
  description: true,
173
173
  detail: true,
174
174
  disableRandomRectWidth: true,
175
175
  subdetail: true,
176
176
  title: true,
177
- layoutSpacing: "compact",
178
- media: "asset"
177
+ media: "asset",
178
+ spacingVariant: "compact"
179
179
  }), /*#__PURE__*/_jsx(ListCellFallback, {
180
180
  description: true,
181
181
  detail: true,
182
182
  subdetail: true,
183
183
  title: true,
184
- layoutSpacing: "compact",
185
184
  media: "asset",
186
- rectWidthVariant: 0
185
+ rectWidthVariant: 0,
186
+ spacingVariant: "compact"
187
187
  }), /*#__PURE__*/_jsx(ListCellFallback, {
188
188
  description: true,
189
189
  detail: true,
190
190
  subdetail: true,
191
191
  title: true,
192
- layoutSpacing: "compact",
193
192
  media: "asset",
194
- rectWidthVariant: 1
193
+ rectWidthVariant: 1,
194
+ spacingVariant: "compact"
195
195
  }), /*#__PURE__*/_jsx(ListCellFallback, {
196
196
  description: true,
197
197
  detail: true,
198
198
  subdetail: true,
199
199
  title: true,
200
- layoutSpacing: "compact",
201
200
  media: "asset",
202
- rectWidthVariant: 2
201
+ rectWidthVariant: 2,
202
+ spacingVariant: "compact"
203
203
  }), /*#__PURE__*/_jsx(ListCellFallback, {
204
204
  disableRandomRectWidth: true,
205
205
  title: true,
@@ -208,12 +208,12 @@ const Fallbacks = () => {
208
208
  }), /*#__PURE__*/_jsx(ListCellFallback, {
209
209
  disableRandomRectWidth: true,
210
210
  helperText: true,
211
- layoutSpacing: "hug"
211
+ spacingVariant: "condensed"
212
212
  }), /*#__PURE__*/_jsx(ListCellFallback, {
213
213
  disableRandomRectWidth: true,
214
214
  helperText: true,
215
215
  title: true,
216
- layoutSpacing: "hug"
216
+ spacingVariant: "condensed"
217
217
  }), /*#__PURE__*/_jsx(ListCellFallback, {
218
218
  description: true,
219
219
  detail: true,
@@ -221,8 +221,8 @@ const Fallbacks = () => {
221
221
  helperText: true,
222
222
  subdetail: true,
223
223
  title: true,
224
- layoutSpacing: "compact",
225
224
  media: "image",
225
+ spacingVariant: "compact",
226
226
  styles: {
227
227
  helperText: {
228
228
  paddingLeft: 64
@@ -232,8 +232,8 @@ const Fallbacks = () => {
232
232
  disableRandomRectWidth: true,
233
233
  helperText: true,
234
234
  title: true,
235
- layoutSpacing: "compact",
236
235
  media: "icon",
236
+ spacingVariant: "compact",
237
237
  styles: {
238
238
  helperText: {
239
239
  paddingLeft: 48
@@ -243,8 +243,8 @@ const Fallbacks = () => {
243
243
  disableRandomRectWidth: true,
244
244
  helperText: true,
245
245
  title: true,
246
- layoutSpacing: "compact",
247
246
  media: "icon",
247
+ spacingVariant: "compact",
248
248
  styles: {
249
249
  helperText: {
250
250
  paddingLeft: 48
package/esm/stepper/Stepper.js CHANGED
@@ -107,7 +107,7 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
107
107
  const previousComplete = (_usePreviousValue = usePreviousValue(complete)) != null ? _usePreviousValue : false;
108
108
  const previousActiveStepIndex = (_usePreviousValue2 = usePreviousValue(activeStepIndex)) != null ? _usePreviousValue2 : -1;
109
109
  const [progressSprings, progressSpringsApi] = useSprings(steps.length, index => ({
110
- progress: complete ? 1 : 0,
110
+ progress: complete || activeStepIndex >= 0 && index <= activeStepIndex ? 1 : 0,
111
111
  config: progressSpringConfig,
112
112
  immediate: !animate || disableAnimateOnMount && !hasMounted
113
113
  }));
package/esm/stepper/__stories__/StepperHorizontal.stories.js CHANGED
@@ -248,6 +248,13 @@ const StepperHorizontalScreen = () => {
248
248
  }), /*#__PURE__*/_jsx(Example, {
249
249
  title: "No Active Step",
250
250
  children: /*#__PURE__*/_jsx(NoActiveStep, {})
251
+ }), /*#__PURE__*/_jsx(Example, {
252
+ title: "Initial Active Step",
253
+ children: /*#__PURE__*/_jsx(Stepper, {
254
+ activeStepId: basicSteps[1].id,
255
+ direction: "horizontal",
256
+ steps: basicSteps
257
+ })
251
258
  }), /*#__PURE__*/_jsx(Example, {
252
259
  title: "No Label Text",
253
260
  children: /*#__PURE__*/_jsx(StepperHorizontalExample, {
package/esm/stepper/__stories__/StepperVertical.stories.js CHANGED
@@ -192,6 +192,30 @@ const NoActiveStep = () => {
192
192
  });
193
193
  };
194
194
 
195
+ // ------------------------------------------------------------
196
+ // Initial active step
197
+ // ------------------------------------------------------------
198
+ const InitialActiveStep = () => {
199
+ const steps = [{
200
+ id: 'first-step',
201
+ label: 'First step'
202
+ }, {
203
+ id: 'second-step',
204
+ label: 'Second step'
205
+ }, {
206
+ id: 'third-step',
207
+ label: 'Third step'
208
+ }, {
209
+ id: 'final-step',
210
+ label: 'Final step'
211
+ }];
212
+ return /*#__PURE__*/_jsx(Stepper, {
213
+ activeStepId: steps[1].id,
214
+ direction: "vertical",
215
+ steps: steps
216
+ });
217
+ };
218
+
195
219
  // ------------------------------------------------------------
196
220
  // Nested Steps
197
221
  // ------------------------------------------------------------
@@ -557,6 +581,9 @@ const StepperVerticalScreen = () => {
557
581
  }), /*#__PURE__*/_jsx(Example, {
558
582
  title: "No Active Step",
559
583
  children: /*#__PURE__*/_jsx(NoActiveStep, {})
584
+ }), /*#__PURE__*/_jsx(Example, {
585
+ title: "Initial Active Step",
586
+ children: /*#__PURE__*/_jsx(InitialActiveStep, {})
560
587
  }), /*#__PURE__*/_jsx(Example, {
561
588
  title: "Nested Steps",
562
589
  children: /*#__PURE__*/_jsx(NestedSteps, {})
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-mobile",
3
- "version": "8.16.1",
3
+ "version": "8.16.3",
4
4
  "description": "Coinbase Design System - Mobile",
5
5
  "repository": {
6
6
  "type": "git",
@@ -150,9 +150,9 @@
150
150
  "react-native-svg": "^14.1.0"
151
151
  },
152
152
  "dependencies": {
153
- "@coinbase/cds-common": "^8.16.1",
153
+ "@coinbase/cds-common": "^8.16.3",
154
154
  "@coinbase/cds-icons": "^5.4.2",
155
- "@coinbase/cds-illustrations": "^4.23.1",
155
+ "@coinbase/cds-illustrations": "^4.24.0",
156
156
  "@coinbase/cds-lottie-files": "^3.3.2",
157
157
  "@coinbase/cds-utils": "^2.3.3",
158
158
  "@floating-ui/react-native": "^0.10.5",