@coinbase/cds-mobile 9.1.3 → 9.2.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 (242) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dts/alpha/index.d.ts +1 -0
  3. package/dts/alpha/index.d.ts.map +1 -1
  4. package/dts/alpha/select/DefaultSelectControl.d.ts +9 -9
  5. package/dts/alpha/select/DefaultSelectControl.d.ts.map +1 -1
  6. package/dts/alpha/select/Select.d.ts.map +1 -1
  7. package/dts/alpha/select/types.d.ts +25 -8
  8. package/dts/alpha/select/types.d.ts.map +1 -1
  9. package/dts/alpha/tabbed-chips/index.d.ts +2 -0
  10. package/dts/alpha/tabbed-chips/index.d.ts.map +1 -0
  11. package/dts/visualizations/chart/bar/PercentageBarChart.d.ts +2 -2
  12. package/esm/alpha/index.js +2 -1
  13. package/esm/alpha/select/DefaultSelectControl.js +34 -17
  14. package/esm/alpha/select/Select.js +59 -47
  15. package/esm/alpha/tabbed-chips/index.js +1 -0
  16. package/esm/system/__stories__/componentConfigStickerSheet/customComponentConfig.js +17 -11
  17. package/esm/system/__stories__/componentConfigStickerSheet/examples/Select.js +7 -0
  18. package/package.json +7 -3
  19. package/dts/accordion/__figma__/Accordion.figma.d.ts +0 -2
  20. package/dts/accordion/__figma__/Accordion.figma.d.ts.map +0 -1
  21. package/dts/alpha/__figma__/Select.figma.d.ts +0 -2
  22. package/dts/alpha/__figma__/Select.figma.d.ts.map +0 -1
  23. package/dts/alpha/data-card/__figma__/DataCard.figma.d.ts +0 -2
  24. package/dts/alpha/data-card/__figma__/DataCard.figma.d.ts.map +0 -1
  25. package/dts/buttons/__figma__/AvatarButton.figma.d.ts +0 -2
  26. package/dts/buttons/__figma__/AvatarButton.figma.d.ts.map +0 -1
  27. package/dts/buttons/__figma__/Button.figma.d.ts +0 -2
  28. package/dts/buttons/__figma__/Button.figma.d.ts.map +0 -1
  29. package/dts/buttons/__figma__/ButtonGroup.figma.d.ts +0 -2
  30. package/dts/buttons/__figma__/ButtonGroup.figma.d.ts.map +0 -1
  31. package/dts/buttons/__figma__/IconButton.figma.d.ts +0 -2
  32. package/dts/buttons/__figma__/IconButton.figma.d.ts.map +0 -1
  33. package/dts/buttons/__figma__/SlideButton.figma.d.ts +0 -2
  34. package/dts/buttons/__figma__/SlideButton.figma.d.ts.map +0 -1
  35. package/dts/cards/ContentCard/__figma__/ContentCard.figma.d.ts +0 -2
  36. package/dts/cards/ContentCard/__figma__/ContentCard.figma.d.ts.map +0 -1
  37. package/dts/cards/MediaCard/__figma__/MediaCard.figma.d.ts +0 -2
  38. package/dts/cards/MediaCard/__figma__/MediaCard.figma.d.ts.map +0 -1
  39. package/dts/cards/MessagingCard/__figma__/MessagingCard.figma.d.ts +0 -2
  40. package/dts/cards/MessagingCard/__figma__/MessagingCard.figma.d.ts.map +0 -1
  41. package/dts/cards/__figma__/AnnouncementCard.figma.d.ts +0 -2
  42. package/dts/cards/__figma__/AnnouncementCard.figma.d.ts.map +0 -1
  43. package/dts/cards/__figma__/ContainedAssetCard.figma.d.ts +0 -2
  44. package/dts/cards/__figma__/ContainedAssetCard.figma.d.ts.map +0 -1
  45. package/dts/cards/__figma__/FloatingAssetCard.figma.d.ts +0 -2
  46. package/dts/cards/__figma__/FloatingAssetCard.figma.d.ts.map +0 -1
  47. package/dts/cards/__figma__/NudgeCard.figma.d.ts +0 -2
  48. package/dts/cards/__figma__/NudgeCard.figma.d.ts.map +0 -1
  49. package/dts/cards/__figma__/UpsellCard.figma.d.ts +0 -2
  50. package/dts/cards/__figma__/UpsellCard.figma.d.ts.map +0 -1
  51. package/dts/carousel/__figma__/Carousel.figma.d.ts +0 -2
  52. package/dts/carousel/__figma__/Carousel.figma.d.ts.map +0 -1
  53. package/dts/cells/__figma__/ContentCell.figma.d.ts +0 -2
  54. package/dts/cells/__figma__/ContentCell.figma.d.ts.map +0 -1
  55. package/dts/cells/__figma__/ListCell.figma.d.ts +0 -2
  56. package/dts/cells/__figma__/ListCell.figma.d.ts.map +0 -1
  57. package/dts/chips/__figma__/InputChip.figma.d.ts +0 -2
  58. package/dts/chips/__figma__/InputChip.figma.d.ts.map +0 -1
  59. package/dts/chips/__figma__/SelectChip.figma.d.ts +0 -2
  60. package/dts/chips/__figma__/SelectChip.figma.d.ts.map +0 -1
  61. package/dts/chips/__figma__/TabbedChips.figma.d.ts +0 -2
  62. package/dts/chips/__figma__/TabbedChips.figma.d.ts.map +0 -1
  63. package/dts/coachmark/__figma__/Coachmark.figma.d.ts +0 -2
  64. package/dts/coachmark/__figma__/Coachmark.figma.d.ts.map +0 -1
  65. package/dts/controls/__figma__/Checkbox.figma.d.ts +0 -2
  66. package/dts/controls/__figma__/Checkbox.figma.d.ts.map +0 -1
  67. package/dts/controls/__figma__/CheckboxCell.figma.d.ts +0 -2
  68. package/dts/controls/__figma__/CheckboxCell.figma.d.ts.map +0 -1
  69. package/dts/controls/__figma__/CheckboxGroup.figma.d.ts +0 -2
  70. package/dts/controls/__figma__/CheckboxGroup.figma.d.ts.map +0 -1
  71. package/dts/controls/__figma__/RadioCell.figma.d.ts +0 -2
  72. package/dts/controls/__figma__/RadioCell.figma.d.ts.map +0 -1
  73. package/dts/controls/__figma__/RadioGroup.figma.d.ts +0 -2
  74. package/dts/controls/__figma__/RadioGroup.figma.d.ts.map +0 -1
  75. package/dts/controls/__figma__/SearchInput.figma.d.ts +0 -2
  76. package/dts/controls/__figma__/SearchInput.figma.d.ts.map +0 -1
  77. package/dts/controls/__figma__/SelectOption.figma.d.ts +0 -2
  78. package/dts/controls/__figma__/SelectOption.figma.d.ts.map +0 -1
  79. package/dts/controls/__figma__/Switch.figma.d.ts +0 -2
  80. package/dts/controls/__figma__/Switch.figma.d.ts.map +0 -1
  81. package/dts/controls/__figma__/TextInput.figma.d.ts +0 -2
  82. package/dts/controls/__figma__/TextInput.figma.d.ts.map +0 -1
  83. package/dts/dates/__figma__/DatePicker.figma.d.ts +0 -2
  84. package/dts/dates/__figma__/DatePicker.figma.d.ts.map +0 -1
  85. package/dts/dots/__figma__/DotCount.figma.d.ts +0 -2
  86. package/dts/dots/__figma__/DotCount.figma.d.ts.map +0 -1
  87. package/dts/dots/__figma__/DotStatusColor.figma.d.ts +0 -2
  88. package/dts/dots/__figma__/DotStatusColor.figma.d.ts.map +0 -1
  89. package/dts/dots/__figma__/DotSymbol.figma.d.ts +0 -2
  90. package/dts/dots/__figma__/DotSymbol.figma.d.ts.map +0 -1
  91. package/dts/icons/__figma__/Icon.figma.d.ts +0 -2
  92. package/dts/icons/__figma__/Icon.figma.d.ts.map +0 -1
  93. package/dts/icons/__figma__/LogoMark.figma.d.ts +0 -2
  94. package/dts/icons/__figma__/LogoMark.figma.d.ts.map +0 -1
  95. package/dts/icons/__figma__/LogoWordmark.figma.d.ts +0 -2
  96. package/dts/icons/__figma__/LogoWordmark.figma.d.ts.map +0 -1
  97. package/dts/icons/__figma__/SubBrandLogoMark.figma.d.ts +0 -2
  98. package/dts/icons/__figma__/SubBrandLogoMark.figma.d.ts.map +0 -1
  99. package/dts/icons/__figma__/SubBrandLogoWordmark.figma.d.ts +0 -2
  100. package/dts/icons/__figma__/SubBrandLogoWordmark.figma.d.ts.map +0 -1
  101. package/dts/illustrations/__figma__/HeroSquare.figma.d.ts +0 -2
  102. package/dts/illustrations/__figma__/HeroSquare.figma.d.ts.map +0 -1
  103. package/dts/illustrations/__figma__/Pictogram.figma.d.ts +0 -2
  104. package/dts/illustrations/__figma__/Pictogram.figma.d.ts.map +0 -1
  105. package/dts/illustrations/__figma__/SpotIcon.figma.d.ts +0 -2
  106. package/dts/illustrations/__figma__/SpotIcon.figma.d.ts.map +0 -1
  107. package/dts/illustrations/__figma__/SpotRectangle.figma.d.ts +0 -2
  108. package/dts/illustrations/__figma__/SpotRectangle.figma.d.ts.map +0 -1
  109. package/dts/illustrations/__figma__/SpotSquare.figma.d.ts +0 -2
  110. package/dts/illustrations/__figma__/SpotSquare.figma.d.ts.map +0 -1
  111. package/dts/layout/__figma__/Divider.figma.d.ts +0 -2
  112. package/dts/layout/__figma__/Divider.figma.d.ts.map +0 -1
  113. package/dts/layout/__figma__/Fallback.figma.d.ts +0 -2
  114. package/dts/layout/__figma__/Fallback.figma.d.ts.map +0 -1
  115. package/dts/media/__figma__/Avatar.figma.d.ts +0 -2
  116. package/dts/media/__figma__/Avatar.figma.d.ts.map +0 -1
  117. package/dts/multi-content-module/__figma__/MultiContentModule.figma.d.ts +0 -2
  118. package/dts/multi-content-module/__figma__/MultiContentModule.figma.d.ts.map +0 -1
  119. package/dts/navigation/__figma__/BrowserBar.figma.d.ts +0 -2
  120. package/dts/navigation/__figma__/BrowserBar.figma.d.ts.map +0 -1
  121. package/dts/navigation/__figma__/TopNavBar.figma.d.ts +0 -2
  122. package/dts/navigation/__figma__/TopNavBar.figma.d.ts.map +0 -1
  123. package/dts/numpad/__figma__/Numpad.figma.d.ts +0 -2
  124. package/dts/numpad/__figma__/Numpad.figma.d.ts.map +0 -1
  125. package/dts/overlays/__figma__/Alert.figma.d.ts +0 -2
  126. package/dts/overlays/__figma__/Alert.figma.d.ts.map +0 -1
  127. package/dts/overlays/__figma__/Toast.figma.d.ts +0 -2
  128. package/dts/overlays/__figma__/Toast.figma.d.ts.map +0 -1
  129. package/dts/overlays/modal/__figma__/Modal.figma.d.ts +0 -2
  130. package/dts/overlays/modal/__figma__/Modal.figma.d.ts.map +0 -1
  131. package/dts/overlays/tooltip/__figma__/Tooltip.figma.d.ts +0 -2
  132. package/dts/overlays/tooltip/__figma__/Tooltip.figma.d.ts.map +0 -1
  133. package/dts/overlays/tray/__figma__/Tray.figma.d.ts +0 -2
  134. package/dts/overlays/tray/__figma__/Tray.figma.d.ts.map +0 -1
  135. package/dts/page/__figma__/PageFooter.figma.d.ts +0 -2
  136. package/dts/page/__figma__/PageFooter.figma.d.ts.map +0 -1
  137. package/dts/page/__figma__/PageHeader.figma.d.ts +0 -2
  138. package/dts/page/__figma__/PageHeader.figma.d.ts.map +0 -1
  139. package/dts/perf/component-config/Button.component-config.perf-test.d.ts +0 -2
  140. package/dts/perf/component-config/Button.component-config.perf-test.d.ts.map +0 -1
  141. package/dts/perf/component-config/ComponentConfigProvider.perf-test.d.ts +0 -2
  142. package/dts/perf/component-config/ComponentConfigProvider.perf-test.d.ts.map +0 -1
  143. package/dts/perf/component-config/ComponentConfigStickerSheet.perf-test.d.ts +0 -2
  144. package/dts/perf/component-config/ComponentConfigStickerSheet.perf-test.d.ts.map +0 -1
  145. package/dts/section-header/__figma__/SectionHeader.figma.d.ts +0 -2
  146. package/dts/section-header/__figma__/SectionHeader.figma.d.ts.map +0 -1
  147. package/dts/sticky-footer/__figma__/StickyFooter.figma.d.ts +0 -2
  148. package/dts/sticky-footer/__figma__/StickyFooter.figma.d.ts.map +0 -1
  149. package/dts/tabs/__figma__/SegmentedTabs.figma.d.ts +0 -2
  150. package/dts/tabs/__figma__/SegmentedTabs.figma.d.ts.map +0 -1
  151. package/dts/tabs/__figma__/TabNavigation.figma.d.ts +0 -2
  152. package/dts/tabs/__figma__/TabNavigation.figma.d.ts.map +0 -1
  153. package/dts/tag/__figma__/Tag.figma.d.ts +0 -2
  154. package/dts/tag/__figma__/Tag.figma.d.ts.map +0 -1
  155. package/dts/typography/__figma__/Link.figma.d.ts +0 -2
  156. package/dts/typography/__figma__/Link.figma.d.ts.map +0 -1
  157. package/dts/visualizations/__figma__/ProgressBar.figma.d.ts +0 -2
  158. package/dts/visualizations/__figma__/ProgressBar.figma.d.ts.map +0 -1
  159. package/dts/visualizations/__figma__/ProgressCircle.figma.d.ts +0 -2
  160. package/dts/visualizations/__figma__/ProgressCircle.figma.d.ts.map +0 -1
  161. package/dts/visualizations/sparkline/__figma__/Sparkline.figma.d.ts +0 -2
  162. package/dts/visualizations/sparkline/__figma__/Sparkline.figma.d.ts.map +0 -1
  163. package/dts/visualizations/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.d.ts +0 -2
  164. package/dts/visualizations/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.d.ts.map +0 -1
  165. package/dts/visualizations/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.d.ts +0 -2
  166. package/dts/visualizations/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.d.ts.map +0 -1
  167. package/esm/accordion/__figma__/Accordion.figma.js +0 -42
  168. package/esm/alpha/__figma__/Select.figma.js +0 -63
  169. package/esm/alpha/data-card/__figma__/DataCard.figma.js +0 -29
  170. package/esm/buttons/__figma__/AvatarButton.figma.js +0 -25
  171. package/esm/buttons/__figma__/Button.figma.js +0 -65
  172. package/esm/buttons/__figma__/ButtonGroup.figma.js +0 -48
  173. package/esm/buttons/__figma__/IconButton.figma.js +0 -29
  174. package/esm/buttons/__figma__/SlideButton.figma.js +0 -27
  175. package/esm/cards/ContentCard/__figma__/ContentCard.figma.js +0 -35
  176. package/esm/cards/MediaCard/__figma__/MediaCard.figma.js +0 -46
  177. package/esm/cards/MessagingCard/__figma__/MessagingCard.figma.js +0 -38
  178. package/esm/cards/__figma__/AnnouncementCard.figma.js +0 -19
  179. package/esm/cards/__figma__/ContainedAssetCard.figma.js +0 -39
  180. package/esm/cards/__figma__/FloatingAssetCard.figma.js +0 -30
  181. package/esm/cards/__figma__/NudgeCard.figma.js +0 -54
  182. package/esm/cards/__figma__/UpsellCard.figma.js +0 -48
  183. package/esm/carousel/__figma__/Carousel.figma.js +0 -36
  184. package/esm/cells/__figma__/ContentCell.figma.js +0 -35
  185. package/esm/cells/__figma__/ListCell.figma.js +0 -74
  186. package/esm/chips/__figma__/InputChip.figma.js +0 -27
  187. package/esm/chips/__figma__/SelectChip.figma.js +0 -38
  188. package/esm/chips/__figma__/TabbedChips.figma.js +0 -55
  189. package/esm/coachmark/__figma__/Coachmark.figma.js +0 -41
  190. package/esm/controls/__figma__/Checkbox.figma.js +0 -27
  191. package/esm/controls/__figma__/CheckboxCell.figma.js +0 -38
  192. package/esm/controls/__figma__/CheckboxGroup.figma.js +0 -23
  193. package/esm/controls/__figma__/RadioCell.figma.js +0 -78
  194. package/esm/controls/__figma__/RadioGroup.figma.js +0 -47
  195. package/esm/controls/__figma__/SearchInput.figma.js +0 -35
  196. package/esm/controls/__figma__/SelectOption.figma.js +0 -35
  197. package/esm/controls/__figma__/Switch.figma.js +0 -16
  198. package/esm/controls/__figma__/TextInput.figma.js +0 -125
  199. package/esm/dates/__figma__/DatePicker.figma.js +0 -43
  200. package/esm/dots/__figma__/DotCount.figma.js +0 -16
  201. package/esm/dots/__figma__/DotStatusColor.figma.js +0 -23
  202. package/esm/dots/__figma__/DotSymbol.figma.js +0 -45
  203. package/esm/icons/__figma__/Icon.figma.js +0 -3906
  204. package/esm/icons/__figma__/LogoMark.figma.js +0 -20
  205. package/esm/icons/__figma__/LogoWordmark.figma.js +0 -32
  206. package/esm/icons/__figma__/SubBrandLogoMark.figma.js +0 -47
  207. package/esm/icons/__figma__/SubBrandLogoWordmark.figma.js +0 -48
  208. package/esm/illustrations/__figma__/HeroSquare.figma.js +0 -2104
  209. package/esm/illustrations/__figma__/Pictogram.figma.js +0 -1774
  210. package/esm/illustrations/__figma__/SpotIcon.figma.js +0 -340
  211. package/esm/illustrations/__figma__/SpotRectangle.figma.js +0 -1102
  212. package/esm/illustrations/__figma__/SpotSquare.figma.js +0 -1192
  213. package/esm/jest.d.js +0 -12
  214. package/esm/layout/__figma__/Divider.figma.js +0 -27
  215. package/esm/layout/__figma__/Fallback.figma.js +0 -21
  216. package/esm/media/__figma__/Avatar.figma.js +0 -56
  217. package/esm/multi-content-module/__figma__/MultiContentModule.figma.js +0 -31
  218. package/esm/navigation/__figma__/BrowserBar.figma.js +0 -58
  219. package/esm/navigation/__figma__/TopNavBar.figma.js +0 -319
  220. package/esm/numpad/__figma__/Numpad.figma.js +0 -63
  221. package/esm/overlays/__figma__/Alert.figma.js +0 -32
  222. package/esm/overlays/__figma__/Toast.figma.js +0 -51
  223. package/esm/overlays/modal/__figma__/Modal.figma.js +0 -74
  224. package/esm/overlays/tooltip/__figma__/Tooltip.figma.js +0 -92
  225. package/esm/overlays/tray/__figma__/Tray.figma.js +0 -220
  226. package/esm/page/__figma__/PageFooter.figma.js +0 -61
  227. package/esm/page/__figma__/PageHeader.figma.js +0 -58
  228. package/esm/perf/component-config/Button.component-config.perf-test.js +0 -35
  229. package/esm/perf/component-config/ComponentConfigProvider.perf-test.js +0 -147
  230. package/esm/perf/component-config/ComponentConfigStickerSheet.perf-test.js +0 -326
  231. package/esm/perf/component-config/README.md +0 -8
  232. package/esm/section-header/__figma__/SectionHeader.figma.js +0 -50
  233. package/esm/sticky-footer/__figma__/StickyFooter.figma.js +0 -26
  234. package/esm/tabs/__figma__/SegmentedTabs.figma.js +0 -79
  235. package/esm/tabs/__figma__/TabNavigation.figma.js +0 -83
  236. package/esm/tag/__figma__/Tag.figma.js +0 -86
  237. package/esm/typography/__figma__/Link.figma.js +0 -28
  238. package/esm/visualizations/__figma__/ProgressBar.figma.js +0 -99
  239. package/esm/visualizations/__figma__/ProgressCircle.figma.js +0 -26
  240. package/esm/visualizations/sparkline/__figma__/Sparkline.figma.js +0 -22
  241. package/esm/visualizations/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.js +0 -85
  242. package/esm/visualizations/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.js +0 -104
package/esm/jest.d.js DELETED
@@ -1,12 +0,0 @@
1
- /// <reference types='react-native-gesture-handler/jestSetup' />
2
-
3
- /**
4
- * Custom accessibility matcher type declaration.
5
- * Replaces the react-native-accessibility-engine types.
6
- */
7
-
8
- // Implicit Jest global `expect`.
9
-
10
- // Explicit `@jest/globals` `expect` matchers.
11
-
12
- export {};
@@ -1,27 +0,0 @@
1
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2
- import React from 'react';
3
- import { figma } from '@figma/code-connect';
4
- import { Divider } from '../Divider';
5
- import { jsx as _jsx } from "react/jsx-runtime";
6
- figma.connect(Divider, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=283-19869&m=dev', {
7
- imports: ["import { Divider } from '@coinbase/cds-mobile/layout/Divider'"],
8
- props: {
9
- color: figma.enum('type', {
10
- line: 'bgLine',
11
- lineHeavy: 'bgLineHeavy'
12
- })
13
- },
14
- example: props => /*#__PURE__*/_jsx(Divider, _extends({}, props))
15
- });
16
- figma.connect(Divider, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=60-654&m=dev', {
17
- imports: ["import { Divider } from '@coinbase/cds-mobile/layout/Divider'"],
18
- props: {
19
- color: figma.enum('type', {
20
- line: 'bgLine',
21
- lineHeavy: 'bgLineHeavy'
22
- })
23
- },
24
- example: props => /*#__PURE__*/_jsx(Divider, _extends({
25
- direction: "vertical"
26
- }, props))
27
- });
@@ -1,21 +0,0 @@
1
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2
- import React from 'react';
3
- import { figma } from '@figma/code-connect';
4
- import { Fallback } from '../Fallback';
5
- import { jsx as _jsx } from "react/jsx-runtime";
6
- figma.connect(Fallback, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=731-14951&m=dev', {
7
- imports: ["import { Fallback } from '@coinbase/cds-mobile/layout/Fallback'"],
8
- props: {
9
- shape: figma.enum('shape', {
10
- circle: 'circle',
11
- rectangle: 'rectangle'
12
- }),
13
- width: figma.enum('shape', {
14
- circle: 32,
15
- rectangle: 150
16
- })
17
- },
18
- example: props => /*#__PURE__*/_jsx(Fallback, _extends({
19
- height: 32
20
- }, props))
21
- });
@@ -1,56 +0,0 @@
1
- const _excluded = ["variant", "shape"];
2
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
3
- function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
4
- import React from 'react';
5
- import { figma } from '@figma/code-connect';
6
- import { Avatar } from '../Avatar';
7
- import { jsx as _jsx } from "react/jsx-runtime";
8
- figma.connect(Avatar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=60-643&m=dev', {
9
- imports: ["import {Avatar} from '@coinbase/cds-mobile/media/Avatar'"],
10
- props: {
11
- shape: figma.enum('shape', {
12
- circle: 'circle',
13
- square: 'square',
14
- polygon: 'polygon'
15
- }),
16
- size: figma.enum('size', {
17
- 'm (24)': 'm',
18
- 'l (32)': 'l',
19
- 'xl (40)': 'xl',
20
- 'xxl (48)': 'xxl',
21
- 'xxxl (56)': 'xxxl'
22
- }),
23
- colorScheme: figma.enum('color scheme', {
24
- teal: 'teal',
25
- purple: 'purple',
26
- pink: 'pink',
27
- green: 'green',
28
- gray: 'gray',
29
- NA: 'blue',
30
- blue: 'blue'
31
- }),
32
- variant: figma.enum('variant', {
33
- image: 'image',
34
- initial: 'initial',
35
- NFT: 'nft'
36
- }),
37
- name: figma.enum('variant', {
38
- initial: figma.string('initial')
39
- }),
40
- src: figma.enum('variant', {
41
- image: 'url'
42
- })
43
- },
44
- // @ts-expect-error shape mapping issue
45
- example: _ref => {
46
- let {
47
- variant,
48
- shape
49
- } = _ref,
50
- props = _objectWithoutPropertiesLoose(_ref, _excluded);
51
- return /*#__PURE__*/_jsx(Avatar, _extends({}, props, {
52
- alt: variant,
53
- shape: shape
54
- }));
55
- }
56
- });
@@ -1,31 +0,0 @@
1
- function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
2
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
3
- import React from 'react';
4
- import { figma } from '@figma/code-connect';
5
- import { MultiContentModule } from '../MultiContentModule';
6
- import { jsx as _jsx } from "react/jsx-runtime";
7
- figma.connect(MultiContentModule, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=14727%3A26365', {
8
- imports: ["import { MultiContentModule } from '@coinbase/cds-mobile/multi-content-module/MultiContentModule'"],
9
- props: {
10
- title: figma.string('headline'),
11
- description: figma.boolean('show description', {
12
- true: figma.string('description'),
13
- false: undefined
14
- }),
15
- pictogram: figma.boolean('show illustration', {
16
- true: figma.instance('↳ illustration type'),
17
- false: undefined
18
- }),
19
- children: figma.instance('↳ content type'),
20
- action: figma.enum('action type', {
21
- button: figma.instance('action type'),
22
- 'button group': figma.instance('action type'),
23
- 'button + secondary content': figma.instance('action type'),
24
- none: undefined
25
- })
26
- },
27
- example: _ref => {
28
- let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
29
- return /*#__PURE__*/_jsx(MultiContentModule, _extends({}, props));
30
- }
31
- });
@@ -1,58 +0,0 @@
1
- import { useMemo } from 'react';
2
- import { figma } from '@figma/code-connect';
3
- import { Divider, HStack, VStack } from '../../layout';
4
- import { BrowserBar, BrowserBarSearchInput } from '../../navigation';
5
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
6
- figma.connect(BrowserBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=49598-4224', {
7
- imports: ["import { BrowserBar } from '@coinbase/cds-mobile/navigation/BrowserBar'", "import { BrowserBarSearchInput } from '@coinbase/cds-mobile/navigation/BrowserBarSearchInput'", "import { Divider } from '@coinbase/cds-mobile/layout/Divider'", "import { VStack } from '@coinbase/cds-mobile/layout/VStack'", "import { HStack } from '@coinbase/cds-mobile/layout/HStack'"],
8
- props: {
9
- leftAction: figma.boolean('show left action', {
10
- true: figma.instance('↳ left action'),
11
- false: undefined
12
- }),
13
- rightAction1: figma.boolean('show 1st right action', {
14
- true: figma.instance('↳ 1st right action'),
15
- false: undefined
16
- }),
17
- rightAction2: figma.boolean('show 2nd right action', {
18
- true: figma.instance('↳ 2nd right action'),
19
- false: undefined
20
- }),
21
- rightAction3: figma.boolean('show 3rd right action', {
22
- true: figma.instance('↳ 3rd right action'),
23
- false: undefined
24
- }),
25
- divider: figma.boolean('show divider', {
26
- true: /*#__PURE__*/_jsx(Divider, {}),
27
- false: undefined
28
- })
29
- },
30
- example: function Example(_ref) {
31
- let {
32
- leftAction,
33
- rightAction1,
34
- rightAction2,
35
- rightAction3,
36
- divider
37
- } = _ref;
38
- const end = useMemo(() => {
39
- if (rightAction1 || rightAction2 || rightAction3) {
40
- return /*#__PURE__*/_jsxs(HStack, {
41
- alignItems: "center",
42
- gap: 0.25,
43
- children: [rightAction1, rightAction2, rightAction3]
44
- });
45
- }
46
- }, [rightAction1, rightAction2, rightAction3]);
47
- return /*#__PURE__*/_jsxs(VStack, {
48
- children: [/*#__PURE__*/_jsx(BrowserBar, {
49
- end: end,
50
- start: leftAction,
51
- children: /*#__PURE__*/_jsx(BrowserBarSearchInput, {
52
- onChangeText: () => {},
53
- value: ""
54
- })
55
- }), divider]
56
- });
57
- }
58
- });
@@ -1,319 +0,0 @@
1
- import { figma } from '@figma/code-connect';
2
- import { Divider, HStack, VStack } from '../../layout';
3
- import { BrowserBar, BrowserBarSearchInput, NavigationSubtitle, NavigationTitle, NavigationTitleSelect } from '../../navigation';
4
- import { TopNavBar } from '../TopNavBar';
5
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
6
- figma.connect(TopNavBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=49598-4137', {
7
- variant: {
8
- type: 'title + subtitle'
9
- },
10
- imports: ["import { TopNavBar } from '@coinbase/cds-mobile/navigation/TopNavBar'", "import { Divider } from '@coinbase/cds-mobile/layout/Divider'", "import { VStack } from '@coinbase/cds-mobile/layout/VStack'", "import { HStack } from '@coinbase/cds-mobile/layout/HStack'", "import { NavigationTitle } from '@coinbase/cds-mobile/navigation/NavigationTitle'", "import { NavigationSubtitle } from '@coinbase/cds-mobile/navigation/NavigationSubtitle'"],
11
- props: {
12
- title: figma.string('↳ title'),
13
- subtitle: figma.boolean('↳ show subtitle', {
14
- true: figma.string('↳ subtitle'),
15
- false: undefined
16
- }),
17
- startAction: figma.boolean('show left action', {
18
- true: figma.instance('left action'),
19
- false: undefined
20
- }),
21
- endAction1: figma.boolean('show right action', {
22
- true: figma.instance('right action'),
23
- false: undefined
24
- }),
25
- endAction2: figma.boolean('show 2nd right action', {
26
- true: figma.instance('2nd right action'),
27
- false: undefined
28
- }),
29
- endAction3: figma.boolean('show 3rd right action', {
30
- true: figma.instance('3rd right action'),
31
- false: undefined
32
- }),
33
- divider: figma.boolean('show divider', {
34
- true: /*#__PURE__*/_jsx(Divider, {}),
35
- false: undefined
36
- })
37
- },
38
- example: function Example(_ref) {
39
- let {
40
- startAction,
41
- title,
42
- subtitle,
43
- endAction1,
44
- endAction2,
45
- endAction3,
46
- divider
47
- } = _ref;
48
- return /*#__PURE__*/_jsxs(VStack, {
49
- children: [/*#__PURE__*/_jsx(TopNavBar, {
50
- end: /*#__PURE__*/_jsxs(HStack, {
51
- alignItems: "center",
52
- gap: 0.25,
53
- children: [endAction3, endAction2, endAction1]
54
- }),
55
- start: startAction,
56
- children: /*#__PURE__*/_jsxs(VStack, {
57
- alignItems: "center",
58
- children: [/*#__PURE__*/_jsx(NavigationTitle, {
59
- children: title
60
- }), /*#__PURE__*/_jsx(NavigationSubtitle, {
61
- children: subtitle
62
- })]
63
- })
64
- }), divider]
65
- });
66
- }
67
- });
68
- figma.connect(TopNavBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=49598-4137', {
69
- variant: {
70
- type: 'dropdown'
71
- },
72
- imports: ["import { TopNavBar } from '@coinbase/cds-mobile/navigation/TopNavBar'", "import { Divider } from '@coinbase/cds-mobile/layout/Divider'", "import { VStack } from '@coinbase/cds-mobile/layout/VStack'", "import { HStack } from '@coinbase/cds-mobile/layout/HStack'", "import { NavigationTitleSelect } from '@coinbase/cds-mobile/navigation/NavigationTitleSelect'"],
73
- props: {
74
- title: figma.string('↳ title'),
75
- startAction: figma.boolean('show left action', {
76
- true: figma.instance('left action'),
77
- false: undefined
78
- }),
79
- endAction1: figma.boolean('show right action', {
80
- true: figma.instance('right action'),
81
- false: undefined
82
- }),
83
- endAction2: figma.boolean('show 2nd right action', {
84
- true: figma.instance('2nd right action'),
85
- false: undefined
86
- }),
87
- endAction3: figma.boolean('show 3rd right action', {
88
- true: figma.instance('3rd right action'),
89
- false: undefined
90
- }),
91
- divider: figma.boolean('show divider', {
92
- true: /*#__PURE__*/_jsx(Divider, {}),
93
- false: undefined
94
- })
95
- },
96
- example: function Example(_ref2) {
97
- let {
98
- startAction,
99
- title,
100
- endAction1,
101
- endAction2,
102
- endAction3,
103
- divider
104
- } = _ref2;
105
- return /*#__PURE__*/_jsxs(VStack, {
106
- children: [/*#__PURE__*/_jsx(TopNavBar, {
107
- end: /*#__PURE__*/_jsxs(HStack, {
108
- alignItems: "center",
109
- gap: 0.25,
110
- children: [endAction3, endAction2, endAction1]
111
- }),
112
- start: startAction,
113
- children: /*#__PURE__*/_jsx(NavigationTitleSelect, {
114
- onChange: () => {},
115
- options: [{
116
- id: 'title',
117
- label: title
118
- }],
119
- value: "title"
120
- })
121
- }), divider]
122
- });
123
- }
124
- });
125
- figma.connect(TopNavBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=49598-4137', {
126
- variant: {
127
- type: 'with search'
128
- },
129
- imports: ["import { Divider } from '@coinbase/cds-mobile/layout/Divider'", "import { VStack } from '@coinbase/cds-mobile/layout/VStack'", "import { HStack } from '@coinbase/cds-mobile/layout/HStack'", "import { BrowserBar } from '@coinbase/cds-mobile/navigation/BrowserBar'", "import { BrowserBarSearchInput } from '@coinbase/cds-mobile/navigation/BrowserBarSearchInput'"],
130
- props: {
131
- startAction: figma.boolean('show left action', {
132
- true: figma.instance('left action'),
133
- false: undefined
134
- }),
135
- endAction1: figma.boolean('show right action', {
136
- true: figma.instance('right action'),
137
- false: undefined
138
- }),
139
- endAction2: figma.boolean('show 2nd right action', {
140
- true: figma.instance('2nd right action'),
141
- false: undefined
142
- }),
143
- endAction3: figma.boolean('show 3rd right action', {
144
- true: figma.instance('3rd right action'),
145
- false: undefined
146
- }),
147
- divider: figma.boolean('show divider', {
148
- true: /*#__PURE__*/_jsx(Divider, {}),
149
- false: undefined
150
- })
151
- },
152
- example: function Example(_ref3) {
153
- let {
154
- startAction,
155
- endAction1,
156
- endAction2,
157
- endAction3,
158
- divider
159
- } = _ref3;
160
- return /*#__PURE__*/_jsxs(VStack, {
161
- children: [/*#__PURE__*/_jsx(BrowserBar, {
162
- end: /*#__PURE__*/_jsxs(HStack, {
163
- alignItems: "center",
164
- gap: 0.25,
165
- children: [endAction3, endAction2, endAction1]
166
- }),
167
- start: startAction,
168
- children: /*#__PURE__*/_jsx(BrowserBarSearchInput, {
169
- onChangeText: () => {},
170
- value: "Search"
171
- })
172
- }), divider]
173
- });
174
- }
175
- });
176
- figma.connect(TopNavBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=49598-4137', {
177
- variant: {
178
- type: 'empty'
179
- },
180
- imports: ["import { TopNavBar } from '@coinbase/cds-mobile/navigation/TopNavBar'", "import { Divider } from '@coinbase/cds-mobile/layout/Divider'", "import { VStack } from '@coinbase/cds-mobile/layout/VStack'", "import { HStack } from '@coinbase/cds-mobile/layout/HStack'"],
181
- props: {
182
- startAction: figma.boolean('show left action', {
183
- true: figma.instance('left action'),
184
- false: undefined
185
- }),
186
- endAction1: figma.boolean('show right action', {
187
- true: figma.instance('right action'),
188
- false: undefined
189
- }),
190
- endAction2: figma.boolean('show 2nd right action', {
191
- true: figma.instance('2nd right action'),
192
- false: undefined
193
- }),
194
- endAction3: figma.boolean('show 3rd right action', {
195
- true: figma.instance('3rd right action'),
196
- false: undefined
197
- }),
198
- divider: figma.boolean('show divider', {
199
- true: /*#__PURE__*/_jsx(Divider, {}),
200
- false: undefined
201
- })
202
- },
203
- example: function Example(_ref4) {
204
- let {
205
- startAction,
206
- endAction1,
207
- endAction2,
208
- endAction3,
209
- divider
210
- } = _ref4;
211
- return /*#__PURE__*/_jsxs(VStack, {
212
- children: [/*#__PURE__*/_jsx(TopNavBar, {
213
- end: /*#__PURE__*/_jsxs(HStack, {
214
- alignItems: "center",
215
- gap: 0.25,
216
- children: [endAction3, endAction2, endAction1]
217
- }),
218
- start: startAction
219
- }), divider]
220
- });
221
- }
222
- });
223
- figma.connect(TopNavBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=49598-4137', {
224
- variant: {
225
- type: 'stepper'
226
- },
227
- imports: ["import { TopNavBar } from '@coinbase/cds-mobile/navigation/TopNavBar'", "import { Divider } from '@coinbase/cds-mobile/layout/Divider'", "import { VStack } from '@coinbase/cds-mobile/layout/VStack'", "import { HStack } from '@coinbase/cds-mobile/layout/HStack'"],
228
- props: {
229
- startAction: figma.boolean('show left action', {
230
- true: figma.instance('left action'),
231
- false: undefined
232
- }),
233
- endAction1: figma.boolean('show right action', {
234
- true: figma.instance('right action'),
235
- false: undefined
236
- }),
237
- endAction2: figma.boolean('show 2nd right action', {
238
- true: figma.instance('2nd right action'),
239
- false: undefined
240
- }),
241
- endAction3: figma.boolean('show 3rd right action', {
242
- true: figma.instance('3rd right action'),
243
- false: undefined
244
- }),
245
- divider: figma.boolean('show divider', {
246
- true: /*#__PURE__*/_jsx(Divider, {}),
247
- false: undefined
248
- })
249
- },
250
- example: function Example(_ref5) {
251
- let {
252
- startAction,
253
- endAction1,
254
- endAction2,
255
- endAction3,
256
- divider
257
- } = _ref5;
258
- return /*#__PURE__*/_jsxs(VStack, {
259
- children: [/*#__PURE__*/_jsx(TopNavBar, {
260
- end: /*#__PURE__*/_jsxs(HStack, {
261
- alignItems: "center",
262
- gap: 0.25,
263
- children: [endAction3, endAction2, endAction1]
264
- }),
265
- start: startAction
266
- }), divider]
267
- });
268
- }
269
- });
270
- figma.connect(TopNavBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=49598-4137', {
271
- variant: {
272
- type: 'Market Selector'
273
- },
274
- imports: ["import { TopNavBar } from '@coinbase/cds-mobile/navigation/TopNavBar'", "import { Divider } from '@coinbase/cds-mobile/layout/Divider'", "import { VStack } from '@coinbase/cds-mobile/layout/VStack'", "import { HStack } from '@coinbase/cds-mobile/layout/HStack'"],
275
- props: {
276
- children: figma.children('SelectChip'),
277
- startAction: figma.boolean('show left action', {
278
- true: figma.instance('left action'),
279
- false: undefined
280
- }),
281
- endAction1: figma.boolean('show right action', {
282
- true: figma.instance('right action'),
283
- false: undefined
284
- }),
285
- endAction2: figma.boolean('show 2nd right action', {
286
- true: figma.instance('2nd right action'),
287
- false: undefined
288
- }),
289
- endAction3: figma.boolean('show 3rd right action', {
290
- true: figma.instance('3rd right action'),
291
- false: undefined
292
- }),
293
- divider: figma.boolean('show divider', {
294
- true: /*#__PURE__*/_jsx(Divider, {}),
295
- false: undefined
296
- })
297
- },
298
- example: function Example(_ref6) {
299
- let {
300
- children,
301
- startAction,
302
- endAction1,
303
- endAction2,
304
- endAction3,
305
- divider
306
- } = _ref6;
307
- return /*#__PURE__*/_jsxs(VStack, {
308
- children: [/*#__PURE__*/_jsx(TopNavBar, {
309
- end: /*#__PURE__*/_jsxs(HStack, {
310
- alignItems: "center",
311
- gap: 0.25,
312
- children: [endAction3, endAction2, endAction1]
313
- }),
314
- start: startAction,
315
- children: children
316
- }), divider]
317
- });
318
- }
319
- });
@@ -1,63 +0,0 @@
1
- const _excluded = ["accessory", "action"];
2
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
3
- function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
4
- import React from 'react';
5
- import { figma } from '@figma/code-connect';
6
- import { Button } from '../../buttons';
7
- import { HStack } from '../../layout';
8
- import { Numpad } from '../Numpad';
9
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
10
- figma.connect(Numpad, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=14012%3A4589', {
11
- imports: ["import { Numpad } from '@coinbase/cds-mobile/numpad/Numpad'", "import { HStack } from '@coinbase/cds-mobile/layout/HStack'"],
12
- props: {
13
- disabled: figma.boolean('disabled'),
14
- accessory: figma.enum('accessory', {
15
- none: undefined,
16
- '1-accessory': /*#__PURE__*/_jsx(Button, {
17
- variant: "secondary",
18
- children: "Button"
19
- }),
20
- '2-accessory': /*#__PURE__*/_jsxs(HStack, {
21
- justifyContent: "space-between",
22
- children: [/*#__PURE__*/_jsx(Button, {
23
- variant: "secondary",
24
- children: "Button"
25
- }), /*#__PURE__*/_jsx(Button, {
26
- variant: "secondary",
27
- children: "Button"
28
- })]
29
- }),
30
- '3-accessory': /*#__PURE__*/_jsxs(HStack, {
31
- justifyContent: "space-between",
32
- children: [/*#__PURE__*/_jsx(Button, {
33
- variant: "secondary",
34
- children: "Button"
35
- }), /*#__PURE__*/_jsx(Button, {
36
- variant: "secondary",
37
- children: "Button"
38
- }), /*#__PURE__*/_jsx(Button, {
39
- variant: "secondary",
40
- children: "Button"
41
- })]
42
- })
43
- }),
44
- action: figma.boolean('show action button', {
45
- true: /*#__PURE__*/_jsx(Button, {
46
- children: "Button"
47
- }),
48
- false: undefined
49
- })
50
- },
51
- example: _ref => {
52
- let {
53
- accessory,
54
- action
55
- } = _ref,
56
- props = _objectWithoutPropertiesLoose(_ref, _excluded);
57
- return /*#__PURE__*/_jsx(Numpad, _extends({}, props, {
58
- accessory: accessory,
59
- action: action,
60
- onPress: () => {}
61
- }));
62
- }
63
- });
@@ -1,32 +0,0 @@
1
- function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
2
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
3
- import React from 'react';
4
- import { figma } from '@figma/code-connect';
5
- import { Alert } from '../Alert';
6
- import { jsx as _jsx } from "react/jsx-runtime";
7
- figma.connect(Alert, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=35-698&m=dev', {
8
- imports: ["import { Alert } from '@coinbase/cds-mobile/overlays/Alert'"],
9
- props: {
10
- body: figma.string('body'),
11
- title: figma.string('title'),
12
- pictogram: figma.boolean('illustration', {
13
- true: figma.instance('spotsquare'),
14
- false: undefined
15
- }),
16
- dismissActionLabel: figma.enum('footer', {
17
- 'single action': '',
18
- stacked: 'Button'
19
- }),
20
- preferredActionVariant: figma.enum('type', {
21
- default: 'primary',
22
- destructive: 'negative'
23
- })
24
- },
25
- // @ts-expect-error pictogram mapping issue
26
- example: _ref => {
27
- let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
28
- return /*#__PURE__*/_jsx(Alert, _extends({}, props, {
29
- preferredActionLabel: "Button"
30
- }));
31
- }
32
- });
@@ -1,51 +0,0 @@
1
- /* eslint-disable react-hooks/rules-of-hooks */
2
- import React, { useCallback } from 'react';
3
- import { useToast } from '@coinbase/cds-mobile/overlays/useToast';
4
- import { figma } from '@figma/code-connect';
5
- import { Button } from '../../buttons';
6
- import { PortalProvider } from '../PortalProvider';
7
- import { Toast } from '../Toast';
8
- import { jsx as _jsx } from "react/jsx-runtime";
9
- figma.connect(Toast, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=8500%3A674', {
10
- imports: ["import { useToast } from '@coinbase/cds-mobile/overlays/useToast'"],
11
- props: {
12
- hideCloseButton: figma.boolean('close', {
13
- true: undefined,
14
- false: true
15
- }),
16
- content: figma.nestedProps('string.toast', {
17
- string: figma.enum('Ready-made', {
18
- Custom: figma.string('string'),
19
- Transaction: figma.textContent('toast-label'),
20
- 'Copied to clipboard': figma.textContent('toast-label'),
21
- Reward: figma.textContent('toast-label')
22
- })
23
- }),
24
- action: figma.boolean('action', {
25
- true: {
26
- label: 'Button',
27
- onPress: () => {}
28
- },
29
- false: undefined
30
- })
31
- },
32
- example: () => {
33
- const toast = useToast();
34
- const handleShowToast = useCallback(() => {
35
- toast.show('Toast content', {
36
- action: {
37
- label: 'Action',
38
- onPress: () => {}
39
- },
40
- onWillHide: () => {},
41
- onDidHide: () => {}
42
- });
43
- }, [toast]);
44
- return /*#__PURE__*/_jsx(PortalProvider, {
45
- children: /*#__PURE__*/_jsx(Button, {
46
- onPress: handleShowToast,
47
- children: "Show Toast"
48
- })
49
- });
50
- }
51
- });