@coinbase/cds-mobile 9.10.4 → 9.11.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 (9) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dts/accordion/AccordionHeader.d.ts +10 -1
  3. package/dts/accordion/AccordionHeader.d.ts.map +1 -1
  4. package/dts/accordion/AccordionItem.d.ts +1 -0
  5. package/dts/accordion/AccordionItem.d.ts.map +1 -1
  6. package/esm/accordion/AccordionHeader.js +11 -4
  7. package/esm/accordion/AccordionItem.js +2 -0
  8. package/esm/accordion/__stories__/Accordion.stories.js +42 -0
  9. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 9.11.0 (8/7/2026 PST)
12
+
13
+ #### 🚀 Updates
14
+
15
+ - Feat: add a tertiary-level header to AccordionItem. [[#830](https://github.com/coinbase/cds/pull/830)]
16
+
11
17
  ## 9.10.4 (8/6/2026 PST)
12
18
 
13
19
  #### 🐞 Fixes
package/dts/accordion/AccordionHeader.d.ts CHANGED
@@ -14,6 +14,10 @@ export type AccordionTitleBaseProps = {
14
14
  * Subtitle of the accordion item
15
15
  */
16
16
  subtitle?: string;
17
+ /**
18
+ * Tertiary text of the accordion item. Uses the CDS `legal` font.
19
+ */
20
+ tertiaryTitle?: string;
17
21
  };
18
22
  export type AccordionIconBaseProps = Pick<CollapsibleBaseProps, 'collapsed'>;
19
23
  export type AccordionHeaderBaseProps = SharedProps &
@@ -37,7 +41,11 @@ export declare const AccordionMedia: React.MemoExoticComponent<
37
41
  >;
38
42
  export type AccordionTitleProps = AccordionTitleBaseProps;
39
43
  export declare const AccordionTitle: React.MemoExoticComponent<
40
- ({ title, subtitle }: AccordionTitleProps) => import('react/jsx-runtime').JSX.Element
44
+ ({
45
+ title,
46
+ subtitle,
47
+ tertiaryTitle,
48
+ }: AccordionTitleProps) => import('react/jsx-runtime').JSX.Element
41
49
  >;
42
50
  export type AccordionIconProps = AccordionIconBaseProps;
43
51
  export declare const AccordionIcon: React.MemoExoticComponent<
@@ -54,6 +62,7 @@ export declare const AccordionHeader: React.MemoExoticComponent<
54
62
  itemKey,
55
63
  title,
56
64
  subtitle,
65
+ tertiaryTitle,
57
66
  onPress,
58
67
  media,
59
68
  collapsed,
package/dts/accordion/AccordionHeader.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AccordionHeader.d.ts","sourceRoot":"","sources":["../../src/accordion/AccordionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAOzC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAE1E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AASvE,MAAM,MAAM,uBAAuB,GAAG;IAEpC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,oBAAoB,EAAE,WAAW,CAAC,CAAC;AAE7E,MAAM,MAAM,wBAAwB,GAAG,WAAW,GAChD,uBAAuB,GACvB,uBAAuB,GACvB,sBAAsB,GAAG;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEJ,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,CAAC;AAE1D,eAAO,MAAM,cAAc,wCAAoB,mBAAmB,6CAAwB,CAAC;AAE3F,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,CAAC;AAE1D,eAAO,MAAM,cAAc,kDAA8B,mBAAmB,6CAW1E,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,CAAC;AAExD,eAAO,MAAM,aAAa,4CAAwB,kBAAkB,6CAMlE,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,wBAAwB,CAAC;AAE5D;;;GAGG;AACH,eAAO,MAAM,eAAe,kHAUvB,oBAAoB,GAAG;IACxB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;CACvB,6CA8BF,CAAC"}
1
+ {"version":3,"file":"AccordionHeader.d.ts","sourceRoot":"","sources":["../../src/accordion/AccordionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAOzC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAE1E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AASvE,MAAM,MAAM,uBAAuB,GAAG;IAEpC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,oBAAoB,EAAE,WAAW,CAAC,CAAC;AAE7E,MAAM,MAAM,wBAAwB,GAAG,WAAW,GAChD,uBAAuB,GACvB,uBAAuB,GACvB,sBAAsB,GAAG;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEJ,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,CAAC;AAE1D,eAAO,MAAM,cAAc,wCAAoB,mBAAmB,6CAAwB,CAAC;AAE3F,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,CAAC;AAE1D,eAAO,MAAM,cAAc,iEAA6C,mBAAmB,6CAgBzF,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,CAAC;AAExD,eAAO,MAAM,aAAa,4CAAwB,kBAAkB,6CAMlE,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,wBAAwB,CAAC;AAE5D;;;GAGG;AACH,eAAO,MAAM,eAAe,iIAWvB,oBAAoB,GAAG;IACxB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;CACvB,6CA8BF,CAAC"}
package/dts/accordion/AccordionItem.d.ts CHANGED
@@ -19,6 +19,7 @@ export declare const AccordionItem: React.MemoExoticComponent<
19
19
  itemKey,
20
20
  title,
21
21
  subtitle,
22
+ tertiaryTitle,
22
23
  children,
23
24
  onPress,
24
25
  media,
package/dts/accordion/AccordionItem.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../src/accordion/AccordionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMpD,OAAO,EAAmB,KAAK,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AACnF,OAAO,EAAkB,KAAK,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAEhF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GAC3D,IAAI,CAAC,wBAAwB,EAAE,WAAW,CAAC,GAC3C,IAAI,CAAC,uBAAuB,EAAE,WAAW,CAAC,GAAG;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;CACzC,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,CAAC;AAExD;;;;GAIG;AACH,eAAO,MAAM,aAAa,0HAYrB,kBAAkB,6CA2BtB,CAAC"}
1
+ {"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../src/accordion/AccordionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMpD,OAAO,EAAmB,KAAK,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AACnF,OAAO,EAAkB,KAAK,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAEhF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GAC3D,IAAI,CAAC,wBAAwB,EAAE,WAAW,CAAC,GAC3C,IAAI,CAAC,uBAAuB,EAAE,WAAW,CAAC,GAAG;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;CACzC,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,CAAC;AAExD;;;;GAIG;AACH,eAAO,MAAM,aAAa,yIAarB,kBAAkB,6CA4BtB,CAAC"}
package/esm/accordion/AccordionHeader.js CHANGED
@@ -22,7 +22,8 @@ export const AccordionMedia = /*#__PURE__*/memo(_ref => {
22
22
  export const AccordionTitle = /*#__PURE__*/memo(_ref2 => {
23
23
  let {
24
24
  title,
25
- subtitle
25
+ subtitle,
26
+ tertiaryTitle
26
27
  } = _ref2;
27
28
  return /*#__PURE__*/_jsx(Box, {
28
29
  flexGrow: 1,
@@ -33,9 +34,13 @@ export const AccordionTitle = /*#__PURE__*/memo(_ref2 => {
33
34
  font: "headline",
34
35
  children: title
35
36
  }), !!subtitle && /*#__PURE__*/_jsx(Text, {
36
- color: "fgMuted",
37
- font: "body",
37
+ color: tertiaryTitle ? undefined : 'fgMuted',
38
+ font: "label2",
38
39
  children: subtitle
40
+ }), !!tertiaryTitle && /*#__PURE__*/_jsx(Text, {
41
+ color: "fgMuted",
42
+ font: "legal",
43
+ children: tertiaryTitle
39
44
  })]
40
45
  })
41
46
  });
@@ -61,6 +66,7 @@ export const AccordionHeader = /*#__PURE__*/memo(_ref4 => {
61
66
  itemKey,
62
67
  title,
63
68
  subtitle,
69
+ tertiaryTitle,
64
70
  onPress,
65
71
  media,
66
72
  collapsed,
@@ -71,7 +77,7 @@ export const AccordionHeader = /*#__PURE__*/memo(_ref4 => {
71
77
  activeKey
72
78
  } = useAccordionContext();
73
79
  const spacing = useCellSpacing();
74
- const accessibilityLabel = subtitle ? title + ", " + subtitle : title;
80
+ const accessibilityLabel = [title, subtitle, tertiaryTitle].filter(Boolean).join(', ');
75
81
  const handlePress = useCallback(() => {
76
82
  onPress == null || onPress(itemKey);
77
83
  setActiveKey(itemKey === activeKey ? null : itemKey);
@@ -98,6 +104,7 @@ export const AccordionHeader = /*#__PURE__*/memo(_ref4 => {
98
104
  media: media
99
105
  }), /*#__PURE__*/_jsx(AccordionTitle, {
100
106
  subtitle: subtitle,
107
+ tertiaryTitle: tertiaryTitle,
101
108
  title: title
102
109
  }), /*#__PURE__*/_jsx(AccordionIcon, {
103
110
  collapsed: collapsed
package/esm/accordion/AccordionItem.js CHANGED
@@ -15,6 +15,7 @@ export const AccordionItem = /*#__PURE__*/memo(_ref => {
15
15
  itemKey,
16
16
  title,
17
17
  subtitle,
18
+ tertiaryTitle,
18
19
  children,
19
20
  onPress,
20
21
  media,
@@ -38,6 +39,7 @@ export const AccordionItem = /*#__PURE__*/memo(_ref => {
38
39
  media: media,
39
40
  onPress: onPress,
40
41
  subtitle: subtitle,
42
+ tertiaryTitle: tertiaryTitle,
41
43
  testID: testID && testID + "-header",
42
44
  title: title
43
45
  }), /*#__PURE__*/_jsx(AccordionPanel, {
package/esm/accordion/__stories__/Accordion.stories.js CHANGED
@@ -25,6 +25,7 @@ const BasicAccordion = () => {
25
25
  onChange: handlePress,
26
26
  children: [/*#__PURE__*/_jsx(AccordionItem, {
27
27
  itemKey: "1",
28
+ tertiaryTitle: "tertiaryTitle1",
28
29
  media: /*#__PURE__*/_jsx(CellMedia, {
29
30
  active: true,
30
31
  name: "wallet",
@@ -40,6 +41,7 @@ const BasicAccordion = () => {
40
41
  })
41
42
  }), /*#__PURE__*/_jsx(AccordionItem, {
42
43
  itemKey: "2",
44
+ tertiaryTitle: "tertiaryTitle2",
43
45
  media: /*#__PURE__*/_jsx(CellMedia, {
44
46
  active: true,
45
47
  name: "wallet",
@@ -114,6 +116,42 @@ const NoSubtitle = () => {
114
116
  })]
115
117
  });
116
118
  };
119
+ const SubtitleWithoutTertiaryTitle = () => {
120
+ return /*#__PURE__*/_jsxs(Accordion, {
121
+ defaultActiveKey: "1",
122
+ onChange: handlePress,
123
+ children: [/*#__PURE__*/_jsx(AccordionItem, {
124
+ itemKey: "1",
125
+ media: /*#__PURE__*/_jsx(CellMedia, {
126
+ active: true,
127
+ name: "wallet",
128
+ type: "icon"
129
+ }),
130
+ subtitle: "subtitle1",
131
+ title: "Accordion #1",
132
+ children: /*#__PURE__*/_jsx(TextInput, {
133
+ compact: true,
134
+ label: "Amount",
135
+ placeholder: "8293323.23",
136
+ suffix: "USD"
137
+ })
138
+ }), /*#__PURE__*/_jsx(AccordionItem, {
139
+ itemKey: "2",
140
+ media: /*#__PURE__*/_jsx(CellMedia, {
141
+ active: true,
142
+ name: "wallet",
143
+ type: "icon"
144
+ }),
145
+ onPress: handlePress,
146
+ subtitle: "subtitle2",
147
+ title: "Accordion #2",
148
+ children: /*#__PURE__*/_jsx(Text, {
149
+ font: "body",
150
+ children: "Accordion Content"
151
+ })
152
+ })]
153
+ });
154
+ };
117
155
  const TitleOnly = () => {
118
156
  return /*#__PURE__*/_jsxs(Accordion, {
119
157
  defaultActiveKey: "2",
@@ -193,6 +231,10 @@ const AccordionScreen = () => {
193
231
  inline: true,
194
232
  title: "No subtitle",
195
233
  children: /*#__PURE__*/_jsx(NoSubtitle, {})
234
+ }), /*#__PURE__*/_jsx(AccordionExample, {
235
+ inline: true,
236
+ title: "Subtitle without tertiary title",
237
+ children: /*#__PURE__*/_jsx(SubtitleWithoutTertiaryTitle, {})
196
238
  }), /*#__PURE__*/_jsx(AccordionExample, {
197
239
  inline: true,
198
240
  title: "Title only",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-mobile",
3
- "version": "9.10.4",
3
+ "version": "9.11.0",
4
4
  "description": "Coinbase Design System - Mobile",
5
5
  "repository": {
6
6
  "type": "git",
@@ -218,7 +218,7 @@
218
218
  "react-native-worklets": "0.5.2"
219
219
  },
220
220
  "dependencies": {
221
- "@coinbase/cds-common": "^9.10.4",
221
+ "@coinbase/cds-common": "^9.11.0",
222
222
  "@coinbase/cds-icons": "^5.21.0",
223
223
  "@coinbase/cds-illustrations": "^4.46.0",
224
224
  "@coinbase/cds-lottie-files": "^3.3.4",