@sproutsocial/racine 12.24.0 → 13.1.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 (858) hide show
  1. package/CHANGELOG.md +65 -0
  2. package/__flow__/Avatar/index.flow.js +16 -0
  3. package/__flow__/Avatar/index.js +33 -77
  4. package/__flow__/Badge/constants.js +9 -15
  5. package/__flow__/Badge/index.flow.js +17 -0
  6. package/__flow__/Badge/index.js +12 -53
  7. package/__flow__/Badge/styles.js +17 -27
  8. package/__flow__/Banner/index.flow.js +9 -0
  9. package/__flow__/Banner/index.js +16 -42
  10. package/__flow__/Banner/styles.js +8 -14
  11. package/__flow__/Box/index.flow.js +7 -0
  12. package/__flow__/Box/index.js +7 -9
  13. package/__flow__/Box/styles.js +9 -25
  14. package/__flow__/Breadcrumb/index.flow.js +15 -0
  15. package/__flow__/Breadcrumb/index.js +35 -60
  16. package/__flow__/Breadcrumb/styles.js +11 -14
  17. package/__flow__/Button/index.flow.js +26 -0
  18. package/__flow__/Button/index.js +9 -75
  19. package/__flow__/Button/styles.js +27 -47
  20. package/__flow__/Card/index.flow.js +19 -0
  21. package/__flow__/Card/index.js +8 -37
  22. package/__flow__/Card/styles.js +8 -11
  23. package/__flow__/CharacterCounter/index.flow.js +10 -0
  24. package/__flow__/CharacterCounter/index.js +13 -15
  25. package/__flow__/CharacterCounter/styles.js +9 -17
  26. package/__flow__/ChartLegend/index.flow.js +14 -0
  27. package/__flow__/ChartLegend/index.js +16 -31
  28. package/__flow__/ChartLegend/styles.js +10 -18
  29. package/__flow__/Checkbox/index.flow.js +22 -0
  30. package/__flow__/Checkbox/index.js +16 -93
  31. package/__flow__/Checkbox/styles.js +48 -101
  32. package/__flow__/Collapsible/index.flow.js +11 -0
  33. package/__flow__/Collapsible/index.js +45 -72
  34. package/__flow__/Collapsible/styles.js +11 -12
  35. package/__flow__/DatePicker/DateRangePicker.flow.js +15 -0
  36. package/__flow__/DatePicker/DateRangePicker.js +17 -32
  37. package/__flow__/DatePicker/SingleDatePicker.flow.js +12 -0
  38. package/__flow__/DatePicker/SingleDatePicker.js +17 -26
  39. package/__flow__/DatePicker/StatefulDateRangePicker.js +19 -33
  40. package/__flow__/DatePicker/StatefulSingleDatePicker.js +10 -16
  41. package/__flow__/DatePicker/common.flow.js +20 -0
  42. package/__flow__/DatePicker/common.js +19 -41
  43. package/__flow__/DatePicker/index.js +3 -4
  44. package/__flow__/DatePicker/styles.js +87 -72
  45. package/__flow__/Drawer/SlideTransition.js +22 -14
  46. package/__flow__/Drawer/index.flow.js +38 -0
  47. package/__flow__/Drawer/index.js +72 -184
  48. package/__flow__/Drawer/styles.js +9 -13
  49. package/__flow__/EmptyState/index.flow.js +15 -0
  50. package/__flow__/EmptyState/index.js +18 -46
  51. package/__flow__/EnumIconNames.js +1 -1
  52. package/__flow__/EnumIllustrationNames.js +1 -1
  53. package/__flow__/EnumLogoNames.js +1 -1
  54. package/__flow__/Fieldset/index.flow.js +10 -0
  55. package/__flow__/Fieldset/index.js +23 -54
  56. package/__flow__/Fieldset/styles.js +6 -12
  57. package/__flow__/FormField/index.flow.js +28 -0
  58. package/__flow__/FormField/index.js +28 -72
  59. package/__flow__/Icon/deprecatedIcons.js +4 -3
  60. package/__flow__/Icon/index.flow.js +34 -0
  61. package/__flow__/Icon/index.js +21 -80
  62. package/__flow__/Icon/styles.js +9 -15
  63. package/__flow__/IconViewBoxes.js +378 -1
  64. package/__flow__/IllustrationViewBoxes.js +121 -1
  65. package/__flow__/Image/index.flow.js +15 -0
  66. package/__flow__/Image/index.js +24 -52
  67. package/__flow__/Image/styles.js +6 -11
  68. package/__flow__/Indicator/index.flow.js +6 -0
  69. package/__flow__/Indicator/index.js +16 -20
  70. package/__flow__/Indicator/styles.js +9 -12
  71. package/__flow__/Input/index.flow.js +60 -0
  72. package/__flow__/Input/index.js +50 -188
  73. package/__flow__/Input/styles.js +49 -70
  74. package/__flow__/KeyboardKey/index.flow.js +7 -0
  75. package/__flow__/KeyboardKey/index.js +14 -14
  76. package/__flow__/KeyboardKey/styles.js +10 -13
  77. package/__flow__/Label/index.flow.js +14 -0
  78. package/__flow__/Label/index.js +12 -30
  79. package/__flow__/Link/constants.js +4 -7
  80. package/__flow__/Link/index.flow.js +18 -0
  81. package/__flow__/Link/index.js +11 -44
  82. package/__flow__/Link/styles.js +15 -22
  83. package/__flow__/Listbox/index.flow.js +20 -0
  84. package/__flow__/Listbox/index.js +51 -70
  85. package/__flow__/Loader/index.flow.js +12 -0
  86. package/__flow__/Loader/index.js +19 -26
  87. package/__flow__/Loader/styles.js +13 -28
  88. package/__flow__/LoaderButton/index.flow.js +7 -0
  89. package/__flow__/LoaderButton/index.js +19 -47
  90. package/__flow__/LogoViewBoxes.js +94 -1
  91. package/__flow__/Menu/constants.js +3 -4
  92. package/__flow__/Menu/descendants.js +140 -240
  93. package/__flow__/Menu/hooks.js +86 -115
  94. package/__flow__/Menu/index.flow.js +23 -31
  95. package/__flow__/Menu/index.js +146 -340
  96. package/__flow__/Menu/names.js +1 -4947
  97. package/__flow__/Menu/styles.js +31 -51
  98. package/__flow__/Message/constants.js +9 -0
  99. package/__flow__/Message/index.flow.js +17 -0
  100. package/__flow__/Message/index.js +69 -115
  101. package/__flow__/Message/styles.js +62 -76
  102. package/__flow__/Modal/index.flow.js +46 -0
  103. package/__flow__/Modal/index.js +55 -129
  104. package/__flow__/Modal/styles.js +39 -62
  105. package/__flow__/Numeral/constants.js +3 -3
  106. package/__flow__/Numeral/index.flow.js +19 -0
  107. package/__flow__/Numeral/index.js +53 -71
  108. package/__flow__/Numeral/styles.js +4 -7
  109. package/__flow__/Numeral/tests/testNumeral.js +22 -30
  110. package/__flow__/OverflowList/index.flow.js +6 -8
  111. package/__flow__/OverflowList/index.js +52 -89
  112. package/__flow__/OverflowList/styles.js +8 -18
  113. package/__flow__/PartnerLogo/TypePartnerNames.js +1 -38
  114. package/__flow__/PartnerLogo/index.flow.js +19 -0
  115. package/__flow__/PartnerLogo/index.js +18 -37
  116. package/__flow__/PartnerLogo/styles.js +8 -12
  117. package/__flow__/Popout/index.flow.js +89 -0
  118. package/__flow__/Popout/index.js +114 -274
  119. package/__flow__/Popout/styles.js +4 -6
  120. package/__flow__/Portal/index.flow.js +10 -0
  121. package/__flow__/Portal/index.js +18 -25
  122. package/__flow__/Radio/index.flow.js +19 -0
  123. package/__flow__/Radio/index.js +10 -42
  124. package/__flow__/Radio/styles.js +27 -43
  125. package/__flow__/SegmentedControl/index.flow.js +20 -0
  126. package/__flow__/SegmentedControl/index.js +24 -73
  127. package/__flow__/SegmentedControl/styles.js +26 -36
  128. package/__flow__/Select/index.flow.js +25 -0
  129. package/__flow__/Select/index.js +14 -55
  130. package/__flow__/Select/styles.js +53 -62
  131. package/__flow__/Skeleton/index.js +6 -10
  132. package/__flow__/SpotIllustration/illustrationNames.js +1 -121
  133. package/__flow__/SpotIllustration/index.flow.js +9 -0
  134. package/__flow__/SpotIllustration/index.js +24 -41
  135. package/__flow__/Stack/index.flow.js +24 -0
  136. package/__flow__/Stack/index.js +57 -81
  137. package/__flow__/Switch/index.flow.js +16 -0
  138. package/__flow__/Switch/index.js +21 -34
  139. package/__flow__/Switch/styles.js +28 -34
  140. package/__flow__/Table/index.flow.js +30 -0
  141. package/__flow__/Table/index.js +44 -85
  142. package/__flow__/Table/styles.js +5 -8
  143. package/__flow__/TableCell/index.flow.js +19 -0
  144. package/__flow__/TableCell/index.js +18 -31
  145. package/__flow__/TableCell/styles.js +11 -12
  146. package/__flow__/TableHeaderCell/constants.js +6 -0
  147. package/__flow__/TableHeaderCell/index.flow.js +24 -0
  148. package/__flow__/TableHeaderCell/index.js +32 -59
  149. package/__flow__/TableHeaderCell/styles.js +10 -16
  150. package/__flow__/TableRowAccordion/index.flow.js +13 -0
  151. package/__flow__/TableRowAccordion/index.js +26 -44
  152. package/__flow__/TableRowAccordion/styles.js +9 -17
  153. package/__flow__/Tabs/index.flow.js +20 -0
  154. package/__flow__/Tabs/index.js +48 -78
  155. package/__flow__/Tabs/styles.js +21 -40
  156. package/__flow__/Text/index.flow.js +13 -0
  157. package/__flow__/Text/index.js +38 -65
  158. package/__flow__/Text/styles.js +8 -15
  159. package/__flow__/Textarea/index.flow.js +48 -0
  160. package/__flow__/Textarea/index.js +12 -96
  161. package/__flow__/Textarea/styles.js +27 -46
  162. package/__flow__/ThemeProvider/index.js +5 -11
  163. package/__flow__/Toast/index.flow.js +20 -0
  164. package/__flow__/Toast/index.js +45 -99
  165. package/__flow__/Toast/styles.js +14 -20
  166. package/__flow__/ToggleHint/index.flow.js +13 -0
  167. package/__flow__/ToggleHint/index.js +17 -31
  168. package/__flow__/ToggleHint/styles.js +10 -18
  169. package/__flow__/Token/index.flow.js +15 -0
  170. package/__flow__/Token/index.js +15 -44
  171. package/__flow__/Token/styles.js +25 -22
  172. package/__flow__/TokenInput/index.flow.js +67 -2
  173. package/__flow__/TokenInput/index.js +108 -221
  174. package/__flow__/TokenInput/styles.js +36 -54
  175. package/__flow__/TokenInput/util.js +6 -11
  176. package/__flow__/Tooltip/index.flow.js +22 -0
  177. package/__flow__/Tooltip/index.js +38 -126
  178. package/__flow__/Tooltip/styles.js +6 -8
  179. package/__flow__/VisuallyHidden/index.js +4 -6
  180. package/__flow__/dataviz/index.js +6 -9
  181. package/__flow__/index.js +152 -76
  182. package/__flow__/systemProps/background.js +4 -15
  183. package/__flow__/systemProps/border.js +4 -35
  184. package/__flow__/systemProps/color.js +5 -15
  185. package/__flow__/systemProps/custom.js +7 -14
  186. package/__flow__/systemProps/flexbox.js +4 -21
  187. package/__flow__/systemProps/grid.js +4 -22
  188. package/__flow__/systemProps/index.js +14 -15
  189. package/__flow__/systemProps/layout.js +4 -22
  190. package/__flow__/systemProps/position.js +4 -16
  191. package/__flow__/systemProps/shadow.js +4 -9
  192. package/__flow__/systemProps/space.js +4 -25
  193. package/__flow__/systemProps/systemProps.js +15 -40
  194. package/__flow__/systemProps/tests/types.flow.js +2 -6
  195. package/__flow__/systemProps/types.flow.js +6 -14
  196. package/__flow__/systemProps/typography.js +5 -18
  197. package/__flow__/systemProps/variant.js +8 -12
  198. package/__flow__/themes/dark/dataviz-palette.js +4 -26
  199. package/__flow__/themes/dark/decorative-palettes.js +12 -23
  200. package/__flow__/themes/dark/theme.js +60 -74
  201. package/__flow__/themes/extendedThemes/sproutTheme/dark/theme.js +65 -70
  202. package/__flow__/themes/extendedThemes/sproutTheme/index.js +2 -2
  203. package/__flow__/themes/extendedThemes/sproutTheme/light/theme.js +65 -70
  204. package/__flow__/themes/light/dataviz-palette.js +4 -26
  205. package/__flow__/themes/light/decorative-palettes.js +12 -23
  206. package/__flow__/themes/light/literal-colors.js +13 -15
  207. package/__flow__/themes/light/theme.js +71 -107
  208. package/__flow__/types/styled-components.flow.js +1 -1
  209. package/__flow__/types/system-props.flow.js +5 -25
  210. package/__flow__/types/theme.colors.flow.js +32 -46
  211. package/__flow__/types/theme.flow.js +7 -25
  212. package/__flow__/utils/a11yTest.js +2 -3
  213. package/__flow__/utils/chartColors.js +6 -71
  214. package/__flow__/utils/constants.js +1 -1
  215. package/__flow__/utils/dataQaLabelQueries.js +14 -37
  216. package/__flow__/utils/hooks.js +77 -114
  217. package/__flow__/utils/index.js +6 -12
  218. package/__flow__/utils/innerText.js +3 -15
  219. package/__flow__/utils/mixins.js +5 -14
  220. package/__flow__/utils/react-testing-library.js +15 -42
  221. package/__flow__/utils/responsiveProps/index.js +6 -19
  222. package/__flow__/utils/system-props.js +11 -77
  223. package/__flow__/utils/useInteractiveColor.js +4 -7
  224. package/commonjs/{Stack/TypeSpaceLiterals.js → Avatar/index.flow.js} +0 -0
  225. package/commonjs/Avatar/index.js +31 -28
  226. package/commonjs/Badge/index.flow.js +6 -0
  227. package/commonjs/Badge/index.js +1 -1
  228. package/commonjs/Badge/styles.js +1 -1
  229. package/commonjs/Banner/index.flow.js +6 -0
  230. package/commonjs/Banner/index.js +15 -17
  231. package/commonjs/Box/index.flow.js +8 -0
  232. package/commonjs/Breadcrumb/index.flow.js +8 -0
  233. package/commonjs/Breadcrumb/index.js +21 -19
  234. package/commonjs/Button/index.flow.js +6 -0
  235. package/commonjs/Button/index.js +1 -7
  236. package/commonjs/Button/styles.js +1 -1
  237. package/commonjs/Card/index.flow.js +7 -0
  238. package/commonjs/Card/styles.js +1 -1
  239. package/commonjs/CharacterCounter/index.flow.js +1 -0
  240. package/commonjs/ChartLegend/index.flow.js +1 -0
  241. package/commonjs/ChartLegend/index.js +10 -6
  242. package/commonjs/Checkbox/index.flow.js +1 -0
  243. package/commonjs/Checkbox/index.js +27 -24
  244. package/commonjs/Checkbox/styles.js +1 -1
  245. package/commonjs/Collapsible/index.flow.js +6 -0
  246. package/commonjs/Collapsible/index.js +1 -1
  247. package/commonjs/DatePicker/DateRangePicker.flow.js +1 -0
  248. package/commonjs/DatePicker/SingleDatePicker.flow.js +1 -0
  249. package/commonjs/DatePicker/StatefulDateRangePicker.js +10 -7
  250. package/commonjs/DatePicker/StatefulSingleDatePicker.js +7 -4
  251. package/commonjs/DatePicker/common.flow.js +1 -0
  252. package/commonjs/DatePicker/common.js +1 -1
  253. package/commonjs/DatePicker/styles.js +1 -1
  254. package/commonjs/Drawer/index.flow.js +6 -0
  255. package/commonjs/Drawer/index.js +24 -20
  256. package/commonjs/EmptyState/index.flow.js +6 -0
  257. package/commonjs/EmptyState/index.js +1 -1
  258. package/commonjs/Fieldset/index.flow.js +6 -0
  259. package/commonjs/FormField/index.flow.js +9 -0
  260. package/commonjs/FormField/index.js +1 -1
  261. package/commonjs/Icon/deprecatedIcons.js +2 -2
  262. package/commonjs/Icon/index.flow.js +4 -0
  263. package/commonjs/Icon/index.js +19 -15
  264. package/commonjs/Icon/styles.js +1 -1
  265. package/commonjs/IconViewBoxes.js +3 -0
  266. package/commonjs/Image/index.flow.js +1 -0
  267. package/commonjs/Image/index.js +18 -14
  268. package/commonjs/Indicator/index.flow.js +1 -0
  269. package/commonjs/Indicator/index.js +12 -9
  270. package/commonjs/Indicator/styles.js +1 -1
  271. package/commonjs/Input/index.flow.js +6 -0
  272. package/commonjs/Input/index.js +52 -49
  273. package/commonjs/Input/styles.js +1 -1
  274. package/commonjs/KeyboardKey/index.flow.js +1 -0
  275. package/commonjs/Label/index.flow.js +8 -0
  276. package/commonjs/Label/index.js +9 -6
  277. package/commonjs/Link/index.flow.js +6 -0
  278. package/commonjs/Link/styles.js +1 -1
  279. package/commonjs/Listbox/index.flow.js +9 -0
  280. package/commonjs/Listbox/index.js +2 -2
  281. package/commonjs/Loader/index.flow.js +1 -0
  282. package/commonjs/Loader/index.js +13 -9
  283. package/commonjs/Loader/styles.js +2 -2
  284. package/commonjs/LoaderButton/index.flow.js +1 -0
  285. package/commonjs/LoaderButton/index.js +2 -6
  286. package/commonjs/LogoViewBoxes.js +4 -0
  287. package/commonjs/Menu/index.js +28 -29
  288. package/commonjs/Menu/styles.js +1 -1
  289. package/commonjs/Message/constants.js +15 -0
  290. package/commonjs/Message/index.flow.js +7 -0
  291. package/commonjs/Message/index.js +12 -17
  292. package/commonjs/Message/styles.js +14 -14
  293. package/commonjs/Modal/index.flow.js +8 -0
  294. package/commonjs/Modal/index.js +31 -29
  295. package/commonjs/Modal/styles.js +9 -6
  296. package/commonjs/Numeral/index.flow.js +1 -0
  297. package/commonjs/Numeral/index.js +9 -10
  298. package/commonjs/Numeral/tests/testNumeral.js +12 -14
  299. package/commonjs/OverflowList/index.js +2 -2
  300. package/commonjs/OverflowList/styles.js +1 -1
  301. package/commonjs/PartnerLogo/index.flow.js +1 -0
  302. package/commonjs/PartnerLogo/index.js +18 -15
  303. package/commonjs/PartnerLogo/styles.js +1 -1
  304. package/commonjs/Popout/index.flow.js +6 -0
  305. package/commonjs/Popout/index.js +25 -23
  306. package/commonjs/Portal/index.flow.js +6 -0
  307. package/commonjs/Radio/index.flow.js +1 -0
  308. package/commonjs/Radio/styles.js +2 -2
  309. package/commonjs/SegmentedControl/index.flow.js +6 -0
  310. package/commonjs/SegmentedControl/index.js +21 -19
  311. package/commonjs/SegmentedControl/styles.js +1 -1
  312. package/commonjs/Select/index.flow.js +6 -0
  313. package/commonjs/Select/index.js +1 -1
  314. package/commonjs/Select/styles.js +1 -1
  315. package/commonjs/Skeleton/index.js +1 -1
  316. package/commonjs/SpotIllustration/illustrationNames.js +1 -1
  317. package/commonjs/SpotIllustration/index.flow.js +1 -0
  318. package/commonjs/SpotIllustration/index.js +1 -1
  319. package/commonjs/Stack/index.flow.js +6 -0
  320. package/commonjs/Stack/index.js +1 -1
  321. package/commonjs/Switch/index.flow.js +1 -0
  322. package/commonjs/Switch/index.js +19 -15
  323. package/commonjs/Switch/styles.js +1 -1
  324. package/commonjs/Table/index.flow.js +6 -0
  325. package/commonjs/TableCell/index.flow.js +6 -0
  326. package/commonjs/TableHeaderCell/constants.js +12 -0
  327. package/commonjs/TableHeaderCell/index.flow.js +3 -0
  328. package/commonjs/TableHeaderCell/index.js +17 -9
  329. package/commonjs/TableRowAccordion/index.flow.js +6 -0
  330. package/commonjs/TableRowAccordion/index.js +1 -1
  331. package/commonjs/Tabs/index.flow.js +6 -0
  332. package/commonjs/Tabs/index.js +1 -2
  333. package/commonjs/Text/index.flow.js +6 -0
  334. package/commonjs/Text/index.js +1 -1
  335. package/commonjs/Textarea/index.flow.js +6 -0
  336. package/commonjs/Textarea/index.js +42 -38
  337. package/commonjs/Textarea/styles.js +1 -1
  338. package/commonjs/Toast/index.flow.js +6 -0
  339. package/commonjs/Toast/index.js +2 -2
  340. package/commonjs/Toast/styles.js +2 -1
  341. package/commonjs/ToggleHint/index.flow.js +1 -0
  342. package/commonjs/ToggleHint/index.js +8 -5
  343. package/commonjs/ToggleHint/styles.js +1 -1
  344. package/commonjs/Token/index.flow.js +6 -0
  345. package/commonjs/Token/index.js +28 -24
  346. package/commonjs/Token/styles.js +1 -1
  347. package/commonjs/TokenInput/index.flow.js +6 -1
  348. package/commonjs/TokenInput/index.js +42 -39
  349. package/commonjs/TokenInput/styles.js +1 -1
  350. package/commonjs/Tooltip/index.flow.js +6 -0
  351. package/commonjs/Tooltip/index.js +19 -15
  352. package/commonjs/VisuallyHidden/index.js +1 -1
  353. package/commonjs/dataviz/index.js +1 -1
  354. package/commonjs/index.js +113 -97
  355. package/commonjs/themes/dark/theme.js +1 -1
  356. package/commonjs/themes/light/theme.js +4 -9
  357. package/commonjs/utils/hooks.js +2 -2
  358. package/commonjs/utils/mixins.js +1 -1
  359. package/commonjs/utils/react-testing-library.js +9 -12
  360. package/dist/icon.svg +1 -1
  361. package/dist/iconList.js +1 -1
  362. package/dist/logo.svg +1 -1
  363. package/dist/logoList.js +1 -1
  364. package/lib/{Stack/TypeSpaceLiterals.js → Avatar/index.flow.js} +0 -0
  365. package/lib/Avatar/index.js +31 -28
  366. package/lib/Badge/index.flow.js +2 -0
  367. package/lib/Badge/index.js +1 -1
  368. package/lib/Badge/styles.js +1 -1
  369. package/lib/Banner/index.flow.js +2 -0
  370. package/lib/Banner/index.js +15 -23
  371. package/lib/Box/index.flow.js +3 -0
  372. package/lib/Breadcrumb/index.flow.js +3 -0
  373. package/lib/Breadcrumb/index.js +22 -21
  374. package/lib/Button/index.flow.js +2 -0
  375. package/lib/Button/index.js +1 -13
  376. package/lib/Button/styles.js +1 -1
  377. package/lib/Card/index.flow.js +3 -0
  378. package/lib/Card/styles.js +1 -1
  379. package/lib/CharacterCounter/index.flow.js +0 -0
  380. package/lib/ChartLegend/index.flow.js +0 -0
  381. package/lib/ChartLegend/index.js +10 -6
  382. package/lib/Checkbox/index.flow.js +0 -0
  383. package/lib/Checkbox/index.js +27 -24
  384. package/lib/Checkbox/styles.js +1 -1
  385. package/lib/Collapsible/index.flow.js +2 -0
  386. package/lib/Collapsible/index.js +1 -1
  387. package/lib/DatePicker/DateRangePicker.flow.js +0 -0
  388. package/lib/DatePicker/SingleDatePicker.flow.js +0 -0
  389. package/lib/DatePicker/StatefulDateRangePicker.js +10 -7
  390. package/lib/DatePicker/StatefulSingleDatePicker.js +7 -4
  391. package/lib/DatePicker/common.flow.js +0 -0
  392. package/lib/DatePicker/common.js +1 -1
  393. package/lib/DatePicker/styles.js +2 -1
  394. package/lib/Drawer/index.flow.js +2 -0
  395. package/lib/Drawer/index.js +24 -21
  396. package/lib/EmptyState/index.flow.js +2 -0
  397. package/lib/EmptyState/index.js +1 -1
  398. package/lib/Fieldset/index.flow.js +2 -0
  399. package/lib/FormField/index.flow.js +4 -0
  400. package/lib/FormField/index.js +1 -3
  401. package/lib/Icon/deprecatedIcons.js +3 -2
  402. package/lib/Icon/index.flow.js +3 -0
  403. package/lib/Icon/index.js +19 -15
  404. package/lib/Icon/styles.js +1 -1
  405. package/lib/IconViewBoxes.js +3 -0
  406. package/lib/Image/index.flow.js +0 -0
  407. package/lib/Image/index.js +18 -14
  408. package/lib/Indicator/index.flow.js +0 -0
  409. package/lib/Indicator/index.js +12 -9
  410. package/lib/Indicator/styles.js +1 -1
  411. package/lib/Input/index.flow.js +2 -0
  412. package/lib/Input/index.js +52 -49
  413. package/lib/Input/styles.js +1 -1
  414. package/lib/KeyboardKey/index.flow.js +0 -0
  415. package/lib/Label/index.flow.js +3 -0
  416. package/lib/Label/index.js +9 -6
  417. package/lib/Link/index.flow.js +2 -0
  418. package/lib/Link/styles.js +1 -1
  419. package/lib/Listbox/index.flow.js +4 -0
  420. package/lib/Listbox/index.js +2 -2
  421. package/lib/Loader/index.flow.js +0 -0
  422. package/lib/Loader/index.js +13 -9
  423. package/lib/Loader/styles.js +2 -2
  424. package/lib/LoaderButton/index.flow.js +0 -0
  425. package/lib/LoaderButton/index.js +3 -8
  426. package/lib/LogoViewBoxes.js +4 -0
  427. package/lib/Menu/index.js +29 -30
  428. package/lib/Menu/styles.js +1 -1
  429. package/lib/Message/constants.js +9 -0
  430. package/lib/Message/index.flow.js +3 -0
  431. package/lib/Message/index.js +5 -10
  432. package/lib/Message/styles.js +2 -2
  433. package/lib/Modal/index.flow.js +3 -0
  434. package/lib/Modal/index.js +31 -29
  435. package/lib/Modal/styles.js +9 -6
  436. package/lib/Numeral/constants.js +1 -0
  437. package/lib/Numeral/index.flow.js +0 -0
  438. package/lib/Numeral/index.js +2 -3
  439. package/lib/Numeral/tests/testNumeral.js +11 -13
  440. package/lib/OverflowList/index.js +1 -1
  441. package/lib/OverflowList/styles.js +1 -1
  442. package/lib/PartnerLogo/index.flow.js +0 -0
  443. package/lib/PartnerLogo/index.js +18 -15
  444. package/lib/PartnerLogo/styles.js +1 -1
  445. package/lib/Popout/index.flow.js +2 -0
  446. package/lib/Popout/index.js +25 -24
  447. package/lib/Portal/index.flow.js +2 -0
  448. package/lib/Radio/index.flow.js +0 -0
  449. package/lib/Radio/styles.js +2 -2
  450. package/lib/SegmentedControl/index.flow.js +2 -0
  451. package/lib/SegmentedControl/index.js +21 -19
  452. package/lib/SegmentedControl/styles.js +1 -1
  453. package/lib/Select/index.flow.js +2 -0
  454. package/lib/Select/index.js +1 -1
  455. package/lib/Select/styles.js +1 -1
  456. package/lib/Skeleton/index.js +1 -1
  457. package/lib/SpotIllustration/illustrationNames.js +1 -1
  458. package/lib/SpotIllustration/index.flow.js +0 -0
  459. package/lib/SpotIllustration/index.js +1 -1
  460. package/lib/Stack/index.flow.js +2 -0
  461. package/lib/Stack/index.js +1 -1
  462. package/lib/Switch/index.flow.js +0 -0
  463. package/lib/Switch/index.js +19 -15
  464. package/lib/Switch/styles.js +1 -1
  465. package/lib/Table/index.flow.js +2 -0
  466. package/lib/TableCell/index.flow.js +2 -0
  467. package/lib/TableHeaderCell/constants.js +6 -0
  468. package/lib/TableHeaderCell/index.flow.js +3 -0
  469. package/lib/TableHeaderCell/index.js +7 -5
  470. package/lib/TableRowAccordion/index.flow.js +2 -0
  471. package/lib/TableRowAccordion/index.js +1 -1
  472. package/lib/Tabs/index.flow.js +2 -0
  473. package/lib/Tabs/index.js +1 -2
  474. package/lib/Text/index.flow.js +2 -0
  475. package/lib/Text/index.js +1 -1
  476. package/lib/Textarea/index.flow.js +2 -0
  477. package/lib/Textarea/index.js +42 -38
  478. package/lib/Textarea/styles.js +1 -1
  479. package/lib/Toast/index.flow.js +2 -0
  480. package/lib/Toast/index.js +2 -2
  481. package/lib/Toast/styles.js +2 -3
  482. package/lib/ToggleHint/index.flow.js +0 -0
  483. package/lib/ToggleHint/index.js +8 -5
  484. package/lib/ToggleHint/styles.js +1 -1
  485. package/lib/Token/index.flow.js +2 -0
  486. package/lib/Token/index.js +28 -24
  487. package/lib/Token/styles.js +1 -1
  488. package/lib/TokenInput/index.flow.js +2 -0
  489. package/lib/TokenInput/index.js +41 -39
  490. package/lib/TokenInput/styles.js +1 -1
  491. package/lib/Tooltip/index.flow.js +2 -0
  492. package/lib/Tooltip/index.js +19 -15
  493. package/lib/VisuallyHidden/index.js +1 -1
  494. package/lib/dataviz/index.js +1 -1
  495. package/lib/index.js +74 -47
  496. package/lib/themes/dark/theme.js +4 -2
  497. package/lib/themes/extendedThemes/sproutTheme/dark/theme.js +3 -0
  498. package/lib/themes/extendedThemes/sproutTheme/light/theme.js +3 -0
  499. package/lib/themes/light/theme.js +4 -10
  500. package/lib/utils/hooks.js +1 -1
  501. package/lib/utils/mixins.js +1 -1
  502. package/lib/utils/react-testing-library.js +8 -6
  503. package/package.json +14 -6
  504. package/__flow__/Avatar/__tests__/features.test.js +0 -98
  505. package/__flow__/Avatar/index.stories.js +0 -62
  506. package/__flow__/Badge/index.stories.js +0 -49
  507. package/__flow__/Badge/index.test.js +0 -67
  508. package/__flow__/Banner/index.stories.js +0 -108
  509. package/__flow__/Banner/index.test.js +0 -68
  510. package/__flow__/Box/index.stories.js +0 -135
  511. package/__flow__/Box/index.test.js +0 -12
  512. package/__flow__/Breadcrumb/index.stories.js +0 -76
  513. package/__flow__/Breadcrumb/index.test.js +0 -62
  514. package/__flow__/Button/index.stories.js +0 -153
  515. package/__flow__/Card/index.stories.js +0 -67
  516. package/__flow__/CharacterCounter/index.stories.js +0 -42
  517. package/__flow__/CharacterCounter/index.test.js +0 -24
  518. package/__flow__/ChartLegend/index.stories.js +0 -66
  519. package/__flow__/ChartLegend/index.test.js +0 -55
  520. package/__flow__/Checkbox/index.stories.js +0 -137
  521. package/__flow__/Checkbox/index.test.js +0 -91
  522. package/__flow__/Collapsible/index.stories.js +0 -182
  523. package/__flow__/Collapsible/index.test.js +0 -68
  524. package/__flow__/DatePicker/DateRangePicker.stories.js +0 -101
  525. package/__flow__/DatePicker/DateRangePicker.test.js +0 -123
  526. package/__flow__/DatePicker/SingleDatePicker.stories.js +0 -64
  527. package/__flow__/DatePicker/SingleDatePicker.test.js +0 -89
  528. package/__flow__/Drawer/index.stories.js +0 -336
  529. package/__flow__/Drawer/index.test.js +0 -158
  530. package/__flow__/EmptyState/index.stories.js +0 -108
  531. package/__flow__/EmptyState/index.test.js +0 -124
  532. package/__flow__/Fieldset/index.stories.js +0 -135
  533. package/__flow__/Fieldset/index.test.js +0 -34
  534. package/__flow__/FormField/index.stories.js +0 -116
  535. package/__flow__/FormField/index.test.js +0 -71
  536. package/__flow__/Icon/index.stories.js +0 -175
  537. package/__flow__/Icon/index.test.js +0 -25
  538. package/__flow__/Image/index.stories.js +0 -30
  539. package/__flow__/Image/index.test.js +0 -86
  540. package/__flow__/Indicator/index.stories.js +0 -16
  541. package/__flow__/Indicator/index.test.js +0 -11
  542. package/__flow__/Input/index.stories.js +0 -216
  543. package/__flow__/Input/index.test.js +0 -405
  544. package/__flow__/KeyboardKey/index.stories.js +0 -25
  545. package/__flow__/KeyboardKey/index.test.js +0 -12
  546. package/__flow__/Label/index.stories.js +0 -15
  547. package/__flow__/Label/index.test.js +0 -16
  548. package/__flow__/Link/index.stories.js +0 -115
  549. package/__flow__/Link/index.test.js +0 -110
  550. package/__flow__/Listbox/index.stories.js +0 -238
  551. package/__flow__/Listbox/index.test.js +0 -291
  552. package/__flow__/Loader/index.stories.js +0 -40
  553. package/__flow__/Loader/index.test.js +0 -26
  554. package/__flow__/LoaderButton/index.stories.js +0 -84
  555. package/__flow__/LoaderButton/index.test.js +0 -35
  556. package/__flow__/Menu/__snapshots__/index.test.js.snap +0 -115
  557. package/__flow__/Menu/index.stories.js +0 -261
  558. package/__flow__/Menu/index.test.js +0 -103
  559. package/__flow__/Message/index.stories.js +0 -73
  560. package/__flow__/Message/index.test.js +0 -12
  561. package/__flow__/Modal/index.stories.js +0 -409
  562. package/__flow__/Modal/index.test.js +0 -129
  563. package/__flow__/Numeral/index.stories.js +0 -183
  564. package/__flow__/Numeral/tests/A11y.test.js +0 -12
  565. package/__flow__/Numeral/tests/abbreviate.test.js +0 -72
  566. package/__flow__/Numeral/tests/currency.test.js +0 -40
  567. package/__flow__/Numeral/tests/defaults.test.js +0 -33
  568. package/__flow__/Numeral/tests/invalid.test.js +0 -12
  569. package/__flow__/Numeral/tests/locale.test.js +0 -83
  570. package/__flow__/Numeral/tests/precision.test.js +0 -126
  571. package/__flow__/Numeral/tests/zero.test.js +0 -11
  572. package/__flow__/OverflowList/index.stories.js +0 -69
  573. package/__flow__/OverflowList/index.test.js +0 -79
  574. package/__flow__/PartnerLogo/index.stories.js +0 -124
  575. package/__flow__/PartnerLogo/partnerLogos/bigcommerce-dark.svg +0 -5
  576. package/__flow__/PartnerLogo/partnerLogos/bigcommerce-lockup-dark.svg +0 -14
  577. package/__flow__/PartnerLogo/partnerLogos/bigcommerce-lockup.svg +0 -14
  578. package/__flow__/PartnerLogo/partnerLogos/bigcommerce.svg +0 -5
  579. package/__flow__/PartnerLogo/partnerLogos/bitly-dark.svg +0 -1
  580. package/__flow__/PartnerLogo/partnerLogos/bitly.svg +0 -1
  581. package/__flow__/PartnerLogo/partnerLogos/canva-dark.svg +0 -1
  582. package/__flow__/PartnerLogo/partnerLogos/canva.svg +0 -1
  583. package/__flow__/PartnerLogo/partnerLogos/dropbox-dark.svg +0 -1
  584. package/__flow__/PartnerLogo/partnerLogos/dropbox-lockup-dark.svg +0 -7
  585. package/__flow__/PartnerLogo/partnerLogos/dropbox-lockup.svg +0 -7
  586. package/__flow__/PartnerLogo/partnerLogos/dropbox-wordmark-dark.svg +0 -3
  587. package/__flow__/PartnerLogo/partnerLogos/dropbox-wordmark.svg +0 -3
  588. package/__flow__/PartnerLogo/partnerLogos/dropbox.svg +0 -1
  589. package/__flow__/PartnerLogo/partnerLogos/facebook-audience-network-dark.svg +0 -3
  590. package/__flow__/PartnerLogo/partnerLogos/facebook-audience-network.svg +0 -3
  591. package/__flow__/PartnerLogo/partnerLogos/facebook-dark.svg +0 -1
  592. package/__flow__/PartnerLogo/partnerLogos/facebook-groups-dark.svg +0 -3
  593. package/__flow__/PartnerLogo/partnerLogos/facebook-groups.svg +0 -3
  594. package/__flow__/PartnerLogo/partnerLogos/facebook-shops-dark.svg +0 -1
  595. package/__flow__/PartnerLogo/partnerLogos/facebook-shops.svg +0 -1
  596. package/__flow__/PartnerLogo/partnerLogos/facebook.svg +0 -1
  597. package/__flow__/PartnerLogo/partnerLogos/feedly-dark.svg +0 -3
  598. package/__flow__/PartnerLogo/partnerLogos/feedly.svg +0 -3
  599. package/__flow__/PartnerLogo/partnerLogos/glassdoor-dark.svg +0 -1
  600. package/__flow__/PartnerLogo/partnerLogos/glassdoor.svg +0 -1
  601. package/__flow__/PartnerLogo/partnerLogos/google-analytics-dark.svg +0 -1
  602. package/__flow__/PartnerLogo/partnerLogos/google-analytics.svg +0 -1
  603. package/__flow__/PartnerLogo/partnerLogos/google-business-messages-dark.svg +0 -1
  604. package/__flow__/PartnerLogo/partnerLogos/google-business-messages.svg +0 -1
  605. package/__flow__/PartnerLogo/partnerLogos/google-drive-dark.svg +0 -1
  606. package/__flow__/PartnerLogo/partnerLogos/google-drive.svg +0 -1
  607. package/__flow__/PartnerLogo/partnerLogos/google-my-business-dark.svg +0 -1
  608. package/__flow__/PartnerLogo/partnerLogos/google-my-business.svg +0 -1
  609. package/__flow__/PartnerLogo/partnerLogos/hubspot-dark.svg +0 -1
  610. package/__flow__/PartnerLogo/partnerLogos/hubspot.svg +0 -1
  611. package/__flow__/PartnerLogo/partnerLogos/instagram-dark.svg +0 -1
  612. package/__flow__/PartnerLogo/partnerLogos/instagram.svg +0 -1
  613. package/__flow__/PartnerLogo/partnerLogos/linkedin-audience-network-dark.svg +0 -3
  614. package/__flow__/PartnerLogo/partnerLogos/linkedin-audience-network.svg +0 -3
  615. package/__flow__/PartnerLogo/partnerLogos/linkedin-dark.svg +0 -1
  616. package/__flow__/PartnerLogo/partnerLogos/linkedin.svg +0 -1
  617. package/__flow__/PartnerLogo/partnerLogos/marketo-dark.svg +0 -1
  618. package/__flow__/PartnerLogo/partnerLogos/marketo.svg +0 -1
  619. package/__flow__/PartnerLogo/partnerLogos/messenger-dark.svg +0 -1
  620. package/__flow__/PartnerLogo/partnerLogos/messenger.svg +0 -1
  621. package/__flow__/PartnerLogo/partnerLogos/microsoft-dynamics-dark.svg +0 -1
  622. package/__flow__/PartnerLogo/partnerLogos/microsoft-dynamics.svg +0 -1
  623. package/__flow__/PartnerLogo/partnerLogos/pinterest-dark.svg +0 -1
  624. package/__flow__/PartnerLogo/partnerLogos/pinterest.svg +0 -1
  625. package/__flow__/PartnerLogo/partnerLogos/reddit-dark.svg +0 -1
  626. package/__flow__/PartnerLogo/partnerLogos/reddit.svg +0 -1
  627. package/__flow__/PartnerLogo/partnerLogos/salesforce-dark.svg +0 -1
  628. package/__flow__/PartnerLogo/partnerLogos/salesforce.svg +0 -1
  629. package/__flow__/PartnerLogo/partnerLogos/shopify-dark.svg +0 -1
  630. package/__flow__/PartnerLogo/partnerLogos/shopify.svg +0 -1
  631. package/__flow__/PartnerLogo/partnerLogos/slack-dark.svg +0 -1
  632. package/__flow__/PartnerLogo/partnerLogos/slack.svg +0 -1
  633. package/__flow__/PartnerLogo/partnerLogos/sproutsocial-dark.svg +0 -7
  634. package/__flow__/PartnerLogo/partnerLogos/sproutsocial-lockup-dark.svg +0 -19
  635. package/__flow__/PartnerLogo/partnerLogos/sproutsocial-lockup.svg +0 -19
  636. package/__flow__/PartnerLogo/partnerLogos/sproutsocial-wordmark-dark.svg +0 -14
  637. package/__flow__/PartnerLogo/partnerLogos/sproutsocial-wordmark.svg +0 -14
  638. package/__flow__/PartnerLogo/partnerLogos/sproutsocial.svg +0 -7
  639. package/__flow__/PartnerLogo/partnerLogos/tiktok-dark.svg +0 -1
  640. package/__flow__/PartnerLogo/partnerLogos/tiktok.svg +0 -1
  641. package/__flow__/PartnerLogo/partnerLogos/tripadvisor-dark.svg +0 -1
  642. package/__flow__/PartnerLogo/partnerLogos/tripadvisor.svg +0 -1
  643. package/__flow__/PartnerLogo/partnerLogos/tumblr-dark.svg +0 -1
  644. package/__flow__/PartnerLogo/partnerLogos/tumblr.svg +0 -1
  645. package/__flow__/PartnerLogo/partnerLogos/twitter-audience-network-dark.svg +0 -3
  646. package/__flow__/PartnerLogo/partnerLogos/twitter-audience-network.svg +0 -3
  647. package/__flow__/PartnerLogo/partnerLogos/twitter-dark.svg +0 -1
  648. package/__flow__/PartnerLogo/partnerLogos/twitter.svg +0 -1
  649. package/__flow__/PartnerLogo/partnerLogos/whatsapp-dark.svg +0 -1
  650. package/__flow__/PartnerLogo/partnerLogos/whatsapp.svg +0 -1
  651. package/__flow__/PartnerLogo/partnerLogos/woocommerce-dark.svg +0 -1
  652. package/__flow__/PartnerLogo/partnerLogos/woocommerce.svg +0 -1
  653. package/__flow__/PartnerLogo/partnerLogos/yelp-dark.svg +0 -1
  654. package/__flow__/PartnerLogo/partnerLogos/yelp.svg +0 -1
  655. package/__flow__/PartnerLogo/partnerLogos/youtube-dark.svg +0 -1
  656. package/__flow__/PartnerLogo/partnerLogos/youtube.svg +0 -1
  657. package/__flow__/PartnerLogo/partnerLogos/zendesk-dark.svg +0 -1
  658. package/__flow__/PartnerLogo/partnerLogos/zendesk-lockup-dark.svg +0 -28
  659. package/__flow__/PartnerLogo/partnerLogos/zendesk-lockup.svg +0 -28
  660. package/__flow__/PartnerLogo/partnerLogos/zendesk-wordmark-dark.svg +0 -9
  661. package/__flow__/PartnerLogo/partnerLogos/zendesk-wordmark.svg +0 -9
  662. package/__flow__/PartnerLogo/partnerLogos/zendesk.svg +0 -1
  663. package/__flow__/Popout/__snapshots__/index.test.js.snap +0 -121
  664. package/__flow__/Popout/index.stories.js +0 -471
  665. package/__flow__/Popout/index.test.js +0 -179
  666. package/__flow__/Portal/index.stories.js +0 -42
  667. package/__flow__/Radio/index.stories.js +0 -75
  668. package/__flow__/Radio/index.test.js +0 -47
  669. package/__flow__/SegmentedControl/index.stories.js +0 -44
  670. package/__flow__/SegmentedControl/index.test.js +0 -74
  671. package/__flow__/Select/index.stories.js +0 -42
  672. package/__flow__/Select/index.test.js +0 -44
  673. package/__flow__/Skeleton/index.stories.js +0 -31
  674. package/__flow__/SpotIllustration/index.stories.js +0 -135
  675. package/__flow__/SpotIllustration/spotIllustrations/abacus.svg +0 -21
  676. package/__flow__/SpotIllustration/spotIllustrations/analytics-offering.svg +0 -11
  677. package/__flow__/SpotIllustration/spotIllustrations/asset-cards.svg +0 -16
  678. package/__flow__/SpotIllustration/spotIllustrations/astronaut.svg +0 -15
  679. package/__flow__/SpotIllustration/spotIllustrations/binoculars.svg +0 -11
  680. package/__flow__/SpotIllustration/spotIllustrations/brand-keyword.svg +0 -10
  681. package/__flow__/SpotIllustration/spotIllustrations/browser-doc.svg +0 -10
  682. package/__flow__/SpotIllustration/spotIllustrations/business.svg +0 -23
  683. package/__flow__/SpotIllustration/spotIllustrations/calendar-event.svg +0 -11
  684. package/__flow__/SpotIllustration/spotIllustrations/calendar-reporting.svg +0 -13
  685. package/__flow__/SpotIllustration/spotIllustrations/cat-error.svg +0 -4
  686. package/__flow__/SpotIllustration/spotIllustrations/cat-no-access.svg +0 -13
  687. package/__flow__/SpotIllustration/spotIllustrations/cat.svg +0 -4
  688. package/__flow__/SpotIllustration/spotIllustrations/checkbox-alert.svg +0 -11
  689. package/__flow__/SpotIllustration/spotIllustrations/coffee-cup.svg +0 -11
  690. package/__flow__/SpotIllustration/spotIllustrations/competitors.svg +0 -29
  691. package/__flow__/SpotIllustration/spotIllustrations/compose-window.svg +0 -21
  692. package/__flow__/SpotIllustration/spotIllustrations/compose.svg +0 -5
  693. package/__flow__/SpotIllustration/spotIllustrations/computer-error.svg +0 -15
  694. package/__flow__/SpotIllustration/spotIllustrations/connect.svg +0 -11
  695. package/__flow__/SpotIllustration/spotIllustrations/contact.svg +0 -87
  696. package/__flow__/SpotIllustration/spotIllustrations/conversation.svg +0 -15
  697. package/__flow__/SpotIllustration/spotIllustrations/custom-branding.svg +0 -7
  698. package/__flow__/SpotIllustration/spotIllustrations/customer-service.svg +0 -13
  699. package/__flow__/SpotIllustration/spotIllustrations/dashboard.svg +0 -13
  700. package/__flow__/SpotIllustration/spotIllustrations/exclamation-mark.svg +0 -11
  701. package/__flow__/SpotIllustration/spotIllustrations/face-happy.svg +0 -10
  702. package/__flow__/SpotIllustration/spotIllustrations/find-bookmark.svg +0 -12
  703. package/__flow__/SpotIllustration/spotIllustrations/flask.svg +0 -10
  704. package/__flow__/SpotIllustration/spotIllustrations/general-topic.svg +0 -9
  705. package/__flow__/SpotIllustration/spotIllustrations/global-features.svg +0 -17
  706. package/__flow__/SpotIllustration/spotIllustrations/global-trend.svg +0 -5
  707. package/__flow__/SpotIllustration/spotIllustrations/grow-large.svg +0 -12
  708. package/__flow__/SpotIllustration/spotIllustrations/grow.svg +0 -5
  709. package/__flow__/SpotIllustration/spotIllustrations/hands-raised.svg +0 -8
  710. package/__flow__/SpotIllustration/spotIllustrations/headset.svg +0 -8
  711. package/__flow__/SpotIllustration/spotIllustrations/heartbeat-connection.svg +0 -14
  712. package/__flow__/SpotIllustration/spotIllustrations/instagram-links.svg +0 -28
  713. package/__flow__/SpotIllustration/spotIllustrations/invoice.svg +0 -13
  714. package/__flow__/SpotIllustration/spotIllustrations/jewel.svg +0 -11
  715. package/__flow__/SpotIllustration/spotIllustrations/keyword-tracking.svg +0 -26
  716. package/__flow__/SpotIllustration/spotIllustrations/lightbulb-alt.svg +0 -5
  717. package/__flow__/SpotIllustration/spotIllustrations/lightbulb.svg +0 -4
  718. package/__flow__/SpotIllustration/spotIllustrations/like-conversation.svg +0 -11
  719. package/__flow__/SpotIllustration/spotIllustrations/link-broken.svg +0 -18
  720. package/__flow__/SpotIllustration/spotIllustrations/link-messages.svg +0 -10
  721. package/__flow__/SpotIllustration/spotIllustrations/link-sections.svg +0 -13
  722. package/__flow__/SpotIllustration/spotIllustrations/link-upload.svg +0 -12
  723. package/__flow__/SpotIllustration/spotIllustrations/listening-pendo.svg +0 -14
  724. package/__flow__/SpotIllustration/spotIllustrations/listening-sentiment.svg +0 -27
  725. package/__flow__/SpotIllustration/spotIllustrations/listening-topic-templates.svg +0 -26
  726. package/__flow__/SpotIllustration/spotIllustrations/listening-tour.svg +0 -18
  727. package/__flow__/SpotIllustration/spotIllustrations/listening.svg +0 -9
  728. package/__flow__/SpotIllustration/spotIllustrations/loading.svg +0 -4
  729. package/__flow__/SpotIllustration/spotIllustrations/mailbox-empty.svg +0 -18
  730. package/__flow__/SpotIllustration/spotIllustrations/mailbox-full.svg +0 -8
  731. package/__flow__/SpotIllustration/spotIllustrations/megaphone.svg +0 -7
  732. package/__flow__/SpotIllustration/spotIllustrations/message.svg +0 -6
  733. package/__flow__/SpotIllustration/spotIllustrations/molecule.svg +0 -14
  734. package/__flow__/SpotIllustration/spotIllustrations/network-data.svg +0 -25
  735. package/__flow__/SpotIllustration/spotIllustrations/no-messages-found.svg +0 -20
  736. package/__flow__/SpotIllustration/spotIllustrations/no-notifications.svg +0 -4
  737. package/__flow__/SpotIllustration/spotIllustrations/note.svg +0 -6
  738. package/__flow__/SpotIllustration/spotIllustrations/notification.svg +0 -10
  739. package/__flow__/SpotIllustration/spotIllustrations/notifications-onboarding.svg +0 -23
  740. package/__flow__/SpotIllustration/spotIllustrations/organize-message.svg +0 -64
  741. package/__flow__/SpotIllustration/spotIllustrations/outbox-queue.svg +0 -12
  742. package/__flow__/SpotIllustration/spotIllustrations/outbox-reviews.svg +0 -10
  743. package/__flow__/SpotIllustration/spotIllustrations/pdf.svg +0 -5
  744. package/__flow__/SpotIllustration/spotIllustrations/planning.svg +0 -28
  745. package/__flow__/SpotIllustration/spotIllustrations/podium.svg +0 -13
  746. package/__flow__/SpotIllustration/spotIllustrations/pointer.svg +0 -4
  747. package/__flow__/SpotIllustration/spotIllustrations/publish-assets.svg +0 -15
  748. package/__flow__/SpotIllustration/spotIllustrations/publish-links.svg +0 -11
  749. package/__flow__/SpotIllustration/spotIllustrations/publishing.svg +0 -29
  750. package/__flow__/SpotIllustration/spotIllustrations/puzzle-piece.svg +0 -4
  751. package/__flow__/SpotIllustration/spotIllustrations/question-mark.svg +0 -11
  752. package/__flow__/SpotIllustration/spotIllustrations/reporting-folder.svg +0 -13
  753. package/__flow__/SpotIllustration/spotIllustrations/reporting.svg +0 -12
  754. package/__flow__/SpotIllustration/spotIllustrations/review-location.svg +0 -11
  755. package/__flow__/SpotIllustration/spotIllustrations/review.svg +0 -10
  756. package/__flow__/SpotIllustration/spotIllustrations/robot-assembly.svg +0 -12
  757. package/__flow__/SpotIllustration/spotIllustrations/robot-error.svg +0 -19
  758. package/__flow__/SpotIllustration/spotIllustrations/robot-happy.svg +0 -13
  759. package/__flow__/SpotIllustration/spotIllustrations/rocket.svg +0 -9
  760. package/__flow__/SpotIllustration/spotIllustrations/schedule-date.svg +0 -11
  761. package/__flow__/SpotIllustration/spotIllustrations/schedule-messages.svg +0 -10
  762. package/__flow__/SpotIllustration/spotIllustrations/search-keywords.svg +0 -9
  763. package/__flow__/SpotIllustration/spotIllustrations/search-success.svg +0 -8
  764. package/__flow__/SpotIllustration/spotIllustrations/search-trends.svg +0 -23
  765. package/__flow__/SpotIllustration/spotIllustrations/search.svg +0 -86
  766. package/__flow__/SpotIllustration/spotIllustrations/security.svg +0 -12
  767. package/__flow__/SpotIllustration/spotIllustrations/sentiment.svg +0 -12
  768. package/__flow__/SpotIllustration/spotIllustrations/shopping-bag.svg +0 -4
  769. package/__flow__/SpotIllustration/spotIllustrations/spark-line.svg +0 -11
  770. package/__flow__/SpotIllustration/spotIllustrations/stamp.svg +0 -9
  771. package/__flow__/SpotIllustration/spotIllustrations/storefront.svg +0 -10
  772. package/__flow__/SpotIllustration/spotIllustrations/success.svg +0 -9
  773. package/__flow__/SpotIllustration/spotIllustrations/tag-message.svg +0 -15
  774. package/__flow__/SpotIllustration/spotIllustrations/tag.svg +0 -6
  775. package/__flow__/SpotIllustration/spotIllustrations/team-roles.svg +0 -17
  776. package/__flow__/SpotIllustration/spotIllustrations/team.svg +0 -16
  777. package/__flow__/SpotIllustration/spotIllustrations/telescope.svg +0 -15
  778. package/__flow__/SpotIllustration/spotIllustrations/tha-mel.svg +0 -15
  779. package/__flow__/SpotIllustration/spotIllustrations/thumbs-up.svg +0 -11
  780. package/__flow__/SpotIllustration/spotIllustrations/toggle-switch.svg +0 -11
  781. package/__flow__/SpotIllustration/spotIllustrations/toolset-strength.svg +0 -13
  782. package/__flow__/SpotIllustration/spotIllustrations/tracking-time.svg +0 -6
  783. package/__flow__/SpotIllustration/spotIllustrations/twitter-messages.svg +0 -11
  784. package/__flow__/SpotIllustration/spotIllustrations/twitter-profiles.svg +0 -12
  785. package/__flow__/SpotIllustration/spotIllustrations/under-construction.svg +0 -12
  786. package/__flow__/SpotIllustration/spotIllustrations/unsubscribe.svg +0 -10
  787. package/__flow__/SpotIllustration/spotIllustrations/upward-trend.svg +0 -4
  788. package/__flow__/SpotIllustration/spotIllustrations/user-task.svg +0 -58
  789. package/__flow__/SpotIllustration/spotIllustrations/view-connections.svg +0 -13
  790. package/__flow__/SpotIllustration/spotIllustrations/vip-list.svg +0 -13
  791. package/__flow__/SpotIllustration/spotIllustrations/warning.svg +0 -4
  792. package/__flow__/SpotIllustration/spotIllustrations/wifi.svg +0 -6
  793. package/__flow__/SpotIllustration/spotIllustrations/workflow-steps.svg +0 -28
  794. package/__flow__/Stack/TypeSpaceLiterals.js +0 -13
  795. package/__flow__/Stack/index.stories.js +0 -91
  796. package/__flow__/Stack/index.test.js +0 -22
  797. package/__flow__/Switch/index.stories.js +0 -42
  798. package/__flow__/Switch/index.test.js +0 -44
  799. package/__flow__/Table/index.stories.js +0 -293
  800. package/__flow__/Table/index.test.js +0 -91
  801. package/__flow__/TableCell/index.stories.js +0 -33
  802. package/__flow__/TableCell/index.test.js +0 -20
  803. package/__flow__/TableHeaderCell/index.stories.js +0 -54
  804. package/__flow__/TableHeaderCell/index.test.js +0 -28
  805. package/__flow__/TableRowAccordion/index.stories.js +0 -129
  806. package/__flow__/TableRowAccordion/index.test.js +0 -82
  807. package/__flow__/Tabs/index.stories.js +0 -84
  808. package/__flow__/Tabs/index.test.js +0 -242
  809. package/__flow__/Text/index.stories.js +0 -132
  810. package/__flow__/Text/index.test.js +0 -49
  811. package/__flow__/Textarea/index.stories.js +0 -90
  812. package/__flow__/Textarea/index.test.js +0 -86
  813. package/__flow__/Toast/index.stories.js +0 -118
  814. package/__flow__/ToggleHint/index.test.js +0 -16
  815. package/__flow__/Token/index.stories.js +0 -89
  816. package/__flow__/Token/index.test.js +0 -75
  817. package/__flow__/TokenInput/index.stories.js +0 -242
  818. package/__flow__/TokenInput/tests/default/clicking.test.js +0 -38
  819. package/__flow__/TokenInput/tests/default/deleting.test.js +0 -101
  820. package/__flow__/TokenInput/tests/default/focusing.test.js +0 -39
  821. package/__flow__/TokenInput/tests/default/inputting.test.js +0 -57
  822. package/__flow__/TokenInput/tests/default/pasting.test.js +0 -216
  823. package/__flow__/TokenInput/tests/default/rendering.test.js +0 -140
  824. package/__flow__/Tooltip/index.stories.js +0 -175
  825. package/__flow__/Tooltip/index.test.js +0 -182
  826. package/__flow__/building-stories.stories.mdx +0 -121
  827. package/__flow__/code-guidelines.mdx +0 -244
  828. package/__flow__/dataviz/dataviz.stories.js +0 -13
  829. package/__flow__/overview.stories.js +0 -60
  830. package/__flow__/setupTests.js +0 -22
  831. package/__flow__/systemProps/tests/__snapshots__/background.test.js.snap +0 -96
  832. package/__flow__/systemProps/tests/__snapshots__/border.test.js.snap +0 -469
  833. package/__flow__/systemProps/tests/__snapshots__/color.test.js.snap +0 -55
  834. package/__flow__/systemProps/tests/__snapshots__/custom.test.js.snap +0 -36
  835. package/__flow__/systemProps/tests/__snapshots__/flexbox.test.js.snap +0 -239
  836. package/__flow__/systemProps/tests/__snapshots__/grid.test.js.snap +0 -166
  837. package/__flow__/systemProps/tests/__snapshots__/layout.test.js.snap +0 -204
  838. package/__flow__/systemProps/tests/__snapshots__/position.test.js.snap +0 -115
  839. package/__flow__/systemProps/tests/__snapshots__/shadow.test.js.snap +0 -25
  840. package/__flow__/systemProps/tests/__snapshots__/space.test.js.snap +0 -39
  841. package/__flow__/systemProps/tests/__snapshots__/typography.test.js.snap +0 -166
  842. package/__flow__/systemProps/tests/__snapshots__/variant.test.js.snap +0 -17
  843. package/__flow__/systemProps/tests/background.test.js +0 -90
  844. package/__flow__/systemProps/tests/border.test.js +0 -299
  845. package/__flow__/systemProps/tests/color.test.js +0 -49
  846. package/__flow__/systemProps/tests/custom.test.js +0 -38
  847. package/__flow__/systemProps/tests/flexbox.test.js +0 -150
  848. package/__flow__/systemProps/tests/grid.test.js +0 -123
  849. package/__flow__/systemProps/tests/layout.test.js +0 -126
  850. package/__flow__/systemProps/tests/position.test.js +0 -78
  851. package/__flow__/systemProps/tests/shadow.test.js +0 -30
  852. package/__flow__/systemProps/tests/space.test.js +0 -32
  853. package/__flow__/systemProps/tests/typography.test.js +0 -93
  854. package/__flow__/systemProps/tests/variant.test.js +0 -25
  855. package/__flow__/themes/extendedThemes/README.md +0 -6
  856. package/__flow__/themes/utils/_themed.scss +0 -119
  857. package/__flow__/utils/responsiveProps/index.test.js +0 -31
  858. package/__flow__/writing-good-stories.stories.mdx +0 -3
package/__flow__/Modal/index.stories.js DELETED
@@ -1,409 +0,0 @@
1
- // @flow
2
- import React from 'react';
3
- import Component from '@reach/component-component';
4
- import Modal from './';
5
- import Box from '../Box';
6
- import Button from '../Button';
7
- import Input from '../Input';
8
- import Text from '../Text';
9
- import FormField from '../FormField';
10
-
11
- export default {
12
- title: 'Components/Modal',
13
- };
14
-
15
- export const defaultStory = () => (
16
- <Component initialState={{isOpen: false}}>
17
- {({setState, state}) => (
18
- <div>
19
- <button onClick={() => setState({isOpen: !state.isOpen})}>
20
- Open Modal
21
- </button>
22
- <Box height="2000px">Really tall box.</Box>
23
- <Modal
24
- appElementSelector="#root"
25
- isOpen={state.isOpen}
26
- onClose={() => setState({isOpen: !state.isOpen})}
27
- closeButtonLabel="Close this dialog"
28
- label="Example Modal"
29
- >
30
- <React.Fragment>
31
- <Modal.Header
32
- title="Assign Chatbot"
33
- subtitle="The chatbot will respond to customers from this profile."
34
- />
35
- <Modal.Content>
36
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
37
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem
38
- ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
39
- tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum
40
- dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
41
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
42
- amet, consectetur adipiscing elit, sed do eiusmod tempor
43
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
44
- amet, consectetur adipiscing elit, sed do eiusmod tempor
45
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
46
- amet, consectetur adipiscing elit, sed do eiusmod tempor
47
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
48
- amet, consectetur adipiscing elit, sed do eiusmod tempor
49
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
50
- amet, consectetur adipiscing elit, sed do eiusmod tempor
51
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
52
- amet, consectetur adipiscing elit, sed do eiusmod tempor
53
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
54
- amet, consectetur adipiscing elit, sed do eiusmod tempor
55
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
56
- amet, consectetur adipiscing elit, sed do eiusmod tempor
57
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
58
- amet, consectetur adipiscing elit, sed do eiusmod tempor
59
- incididunt ut labore et dolore magna aliqua.
60
- </Modal.Content>
61
- <Modal.Footer>
62
- <Button appearance="primary" width={1}>
63
- Full-Width Button
64
- </Button>
65
- </Modal.Footer>
66
- </React.Fragment>
67
- </Modal>
68
- </div>
69
- )}
70
- </Component>
71
- );
72
-
73
- defaultStory.story = {
74
- name: 'Default',
75
- };
76
-
77
- export const notCloseable = () => (
78
- <Component initialState={{isOpen: false}}>
79
- {({setState, state}) => (
80
- <div>
81
- <button onClick={() => setState({isOpen: !state.isOpen})}>
82
- Open Modal
83
- </button>
84
- <Box height="2000px">Really tall box.</Box>
85
- <Modal
86
- appElementSelector="#root"
87
- isOpen={state.isOpen}
88
- closeButtonLabel="n/a"
89
- label="Example Modal"
90
- >
91
- <React.Fragment>
92
- <Modal.Content>
93
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
94
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem
95
- ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
96
- tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum
97
- dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
98
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
99
- amet, consectetur adipiscing elit, sed do eiusmod tempor
100
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
101
- amet, consectetur adipiscing elit, sed do eiusmod tempor
102
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
103
- amet, consectetur adipiscing elit, sed do eiusmod tempor
104
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
105
- amet, consectetur adipiscing elit, sed do eiusmod tempor
106
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
107
- amet, consectetur adipiscing elit, sed do eiusmod tempor
108
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
109
- amet, consectetur adipiscing elit, sed do eiusmod tempor
110
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
111
- amet, consectetur adipiscing elit, sed do eiusmod tempor
112
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
113
- amet, consectetur adipiscing elit, sed do eiusmod tempor
114
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
115
- amet, consectetur adipiscing elit, sed do eiusmod tempor
116
- incididunt ut labore et dolore magna aliqua.
117
- </Modal.Content>
118
- <Modal.Footer>
119
- <Button
120
- appearance="primary"
121
- width={1}
122
- onClick={() => setState({isOpen: !state.isOpen})}
123
- >
124
- Must click to close
125
- </Button>
126
- </Modal.Footer>
127
- </React.Fragment>
128
- </Modal>
129
- </div>
130
- )}
131
- </Component>
132
- );
133
- notCloseable.story = {
134
- name: 'Not Closeable',
135
- };
136
-
137
- export const customHeader = () => (
138
- <Component initialState={{isOpen: false}}>
139
- {({setState, state}) => (
140
- <div>
141
- <button onClick={() => setState({isOpen: !state.isOpen})}>
142
- Open Modal
143
- </button>
144
- <Modal
145
- appElementSelector="#root"
146
- isOpen={state.isOpen}
147
- onClose={() => setState({isOpen: !state.isOpen})}
148
- closeButtonLabel="Close this dialog"
149
- label="Example Modal"
150
- >
151
- <React.Fragment>
152
- <Modal.Header title="" subtitle="" bordered>
153
- <Box width="100%" bg="purple.400">
154
- Custom header
155
- </Box>
156
- </Modal.Header>
157
- <Modal.Content>
158
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
159
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem
160
- ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
161
- tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum
162
- dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
163
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
164
- amet, consectetur adipiscing elit, sed do eiusmod tempor
165
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
166
- amet, consectetur adipiscing elit, sed do eiusmod tempor
167
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
168
- amet, consectetur adipiscing elit, sed do eiusmod tempor
169
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
170
- amet, consectetur adipiscing elit, sed do eiusmod tempor
171
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
172
- amet, consectetur adipiscing elit, sed do eiusmod tempor
173
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
174
- amet, consectetur adipiscing elit, sed do eiusmod tempor
175
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
176
- amet, consectetur adipiscing elit, sed do eiusmod tempor
177
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
178
- amet, consectetur adipiscing elit, sed do eiusmod tempor
179
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
180
- amet, consectetur adipiscing elit, sed do eiusmod tempor
181
- incididunt ut labore et dolore magna aliqua.
182
- </Modal.Content>
183
- <Modal.Footer>
184
- <Button appearance="primary" width={1}>
185
- Full-Width Button
186
- </Button>
187
- </Modal.Footer>
188
- </React.Fragment>
189
- </Modal>
190
- </div>
191
- )}
192
- </Component>
193
- );
194
- export const noFooter = () => (
195
- <Component initialState={{isOpen: false}}>
196
- {({setState, state}) => (
197
- <div>
198
- <button onClick={() => setState({isOpen: !state.isOpen})}>
199
- Open Modal
200
- </button>
201
- <Modal
202
- appElementSelector="#root"
203
- isOpen={state.isOpen}
204
- onClose={() => setState({isOpen: !state.isOpen})}
205
- closeButtonLabel="Close this dialog"
206
- label="Example Modal"
207
- >
208
- <React.Fragment>
209
- <Modal.Header bordered>
210
- <Box>
211
- <Text as="h1" fontSize={400} fontWeight="semibold">
212
- Assign Chatbot
213
- </Text>
214
- <Text as="div" fontSize={200}>
215
- The chatbot will respond to customers from this profile.
216
- </Text>
217
- </Box>
218
- <Box>
219
- <button>dummy button 1</button>
220
- <button>dummy button 2</button>
221
- <Modal.CloseButton />
222
- </Box>
223
- </Modal.Header>
224
- <Modal.Content>
225
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
226
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem
227
- ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
228
- tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum
229
- dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
230
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
231
- amet, consectetur adipiscing elit, sed do eiusmod tempor
232
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
233
- amet, consectetur adipiscing elit, sed do eiusmod tempor
234
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
235
- amet, consectetur adipiscing elit, sed do eiusmod tempor
236
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
237
- amet, consectetur adipiscing elit, sed do eiusmod tempor
238
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
239
- amet, consectetur adipiscing elit, sed do eiusmod tempor
240
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
241
- amet, consectetur adipiscing elit, sed do eiusmod tempor
242
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
243
- amet, consectetur adipiscing elit, sed do eiusmod tempor
244
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
245
- amet, consectetur adipiscing elit, sed do eiusmod tempor
246
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
247
- amet, consectetur adipiscing elit, sed do eiusmod tempor
248
- incididunt ut labore et dolore magna aliqua.
249
- </Modal.Content>
250
- </React.Fragment>
251
- </Modal>
252
- </div>
253
- )}
254
- </Component>
255
- );
256
- noFooter.story = {
257
- name: 'No footer',
258
- };
259
-
260
- export const noTitle = () => (
261
- <Component initialState={{isOpen: false}}>
262
- {({setState, state}) => (
263
- <div>
264
- <button onClick={() => setState({isOpen: !state.isOpen})}>
265
- Open Modal
266
- </button>
267
- <Modal
268
- appElementSelector="#root"
269
- isOpen={state.isOpen}
270
- onClose={() => setState({isOpen: !state.isOpen})}
271
- closeButtonLabel="Close this dialog"
272
- label="Example Modal"
273
- >
274
- <React.Fragment>
275
- <Modal.Header />
276
- <Modal.Content>
277
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
278
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem
279
- ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
280
- tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum
281
- dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
282
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
283
- amet, consectetur adipiscing elit, sed do eiusmod tempor
284
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
285
- amet, consectetur adipiscing elit, sed do eiusmod tempor
286
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
287
- amet, consectetur adipiscing elit, sed do eiusmod tempor
288
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
289
- amet, consectetur adipiscing elit, sed do eiusmod tempor
290
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
291
- amet, consectetur adipiscing elit, sed do eiusmod tempor
292
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
293
- amet, consectetur adipiscing elit, sed do eiusmod tempor
294
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
295
- amet, consectetur adipiscing elit, sed do eiusmod tempor
296
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
297
- amet, consectetur adipiscing elit, sed do eiusmod tempor
298
- incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
299
- amet, consectetur adipiscing elit, sed do eiusmod tempor
300
- incididunt ut labore et dolore magna aliqua.
301
- </Modal.Content>
302
- <Modal.Footer>
303
- <Button appearance="primary" width={1}>
304
- Full-Width Button
305
- </Button>
306
- </Modal.Footer>
307
- </React.Fragment>
308
- </Modal>
309
- </div>
310
- )}
311
- </Component>
312
- );
313
-
314
- noTitle.story = {
315
- name: 'No title',
316
- };
317
-
318
- export const withForm = () => (
319
- <Component initialState={{isOpen: false}}>
320
- {({setState, state}) => (
321
- <div>
322
- <button onClick={() => setState({isOpen: !state.isOpen})}>
323
- Open Modal
324
- </button>
325
- <Modal
326
- width="500px"
327
- appElementSelector="#root"
328
- isOpen={state.isOpen}
329
- onClose={() => setState({isOpen: !state.isOpen})}
330
- closeButtonLabel="Close this dialog"
331
- label="Example Modal"
332
- >
333
- <React.Fragment>
334
- <Modal.Header
335
- title="Create Share Link"
336
- subtitle="Anyone with this link will be able to view its contents."
337
- />
338
- <Modal.Content>
339
- <FormField
340
- label="Label"
341
- helperText="This is some helpful helper text"
342
- >
343
- {(props) => (
344
- <Input
345
- placeholder="Type the things..."
346
- name="title"
347
- id="title"
348
- />
349
- )}
350
- </FormField>
351
- </Modal.Content>
352
- <Modal.Footer>
353
- <Box display="flex" justifyContent="flex-end">
354
- <Button appearance="primary">Create Link</Button>
355
- </Box>
356
- </Modal.Footer>
357
- </React.Fragment>
358
- </Modal>
359
- </div>
360
- )}
361
- </Component>
362
- );
363
-
364
- withForm.story = {
365
- name: 'With Form',
366
- };
367
-
368
- export const customBackgroundColor = () => (
369
- <Component initialState={{isOpen: false}}>
370
- {({setState, state}) => (
371
- <div>
372
- <button onClick={() => setState({isOpen: !state.isOpen})}>
373
- Open Modal
374
- </button>
375
- <Modal
376
- bg="container.background.decorative.purple"
377
- width="500px"
378
- appElementSelector="#root"
379
- isOpen={state.isOpen}
380
- onClose={() => setState({isOpen: !state.isOpen})}
381
- closeButtonLabel="Close this dialog"
382
- label="Example Modal"
383
- >
384
- <React.Fragment>
385
- <Modal.Header
386
- title="Create Share Link"
387
- subtitle="Anyone with this link will be able to view its contents."
388
- />
389
- <Modal.Content>
390
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
391
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem
392
- ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
393
- tempor incididunt ut labore et dolore magna aliqua.
394
- </Modal.Content>
395
- <Modal.Footer>
396
- <Box display="flex" justifyContent="flex-end">
397
- <Button appearance="primary">Create Link</Button>
398
- </Box>
399
- </Modal.Footer>
400
- </React.Fragment>
401
- </Modal>
402
- </div>
403
- )}
404
- </Component>
405
- );
406
-
407
- customBackgroundColor.story = {
408
- name: 'Custom Background Color',
409
- };
package/__flow__/Modal/index.test.js DELETED
@@ -1,129 +0,0 @@
1
- // @flow
2
- import 'jest-styled-components';
3
- import React from 'react';
4
- import {render, fireEvent, cleanup} from '../utils/react-testing-library';
5
- import Modal from './';
6
- import {COLOR_PURPLE_300} from '@sproutsocial/seeds-color';
7
-
8
- afterEach(() => cleanup());
9
-
10
- describe('Modal', () => {
11
- it('renders a custom background color', () => {
12
- // Use baseElement since it renders in a Portal
13
- const {baseElement} = render(
14
- <Modal
15
- isOpen={true}
16
- label="Label"
17
- bg={COLOR_PURPLE_300}
18
- onClose={() => {}}
19
- closeButtonLabel="Close this dialog"
20
- >
21
- ajdsfljasdlfjlasdjf
22
- </Modal>
23
- );
24
- expect(baseElement.querySelector('.ReactModal__Content')).toHaveStyleRule(
25
- 'background-color',
26
- COLOR_PURPLE_300
27
- );
28
- });
29
-
30
- it('should close on overlay click and esc', () => {
31
- const onClose = jest.fn();
32
- const {baseElement, getByText, getByLabelText} = render(
33
- <Modal
34
- isOpen={true}
35
- label="Label"
36
- bg={COLOR_PURPLE_300}
37
- onClose={onClose}
38
- closeButtonLabel="Close this dialog"
39
- >
40
- <Modal.Header>
41
- <Modal.CloseButton />
42
- </Modal.Header>
43
- ajdsfljasdlfjlasdjf
44
- </Modal>
45
- );
46
-
47
- fireEvent.click(baseElement.querySelector('.ReactModal__Overlay'));
48
- expect(onClose).toHaveBeenCalled();
49
-
50
- onClose.mockClear();
51
- fireEvent.keyDown(getByText('ajdsfljasdlfjlasdjf'), {
52
- key: 'Escape',
53
- keyCode: 27,
54
- });
55
- expect(onClose).toHaveBeenCalled();
56
-
57
- onClose.mockClear();
58
- fireEvent.click(getByLabelText('Close this dialog'));
59
- expect(onClose).toHaveBeenCalled();
60
- });
61
-
62
- it('should NOT close on overlay click and esc if onClick is not provided', () => {
63
- const onClose = jest.fn();
64
- const {baseElement, getByText, queryByLabelText} = render(
65
- <Modal
66
- isOpen={true}
67
- label="Label"
68
- bg={COLOR_PURPLE_300}
69
- closeButtonLabel="Close this dialog"
70
- >
71
- ajdsfljasdlfjlasdjf
72
- </Modal>
73
- );
74
-
75
- expect(queryByLabelText('Close this dialog')).toBe(null);
76
-
77
- fireEvent.click(baseElement.querySelector('.ReactModal__Overlay'));
78
- expect(onClose).not.toHaveBeenCalled();
79
-
80
- onClose.mockClear();
81
- fireEvent.keyDown(getByText('ajdsfljasdlfjlasdjf'), {
82
- key: 'Escape',
83
- keyCode: 27,
84
- });
85
- expect(onClose).not.toHaveBeenCalled();
86
- });
87
-
88
- describe('Modal.Header', () => {
89
- it('should have an aria-label on the close button', () => {
90
- const {getByLabelText} = render(
91
- <Modal
92
- isOpen={true}
93
- label="Label"
94
- bg={COLOR_PURPLE_300}
95
- onClose={() => {}}
96
- closeButtonLabel="Close this dialog"
97
- >
98
- <Modal.Header>
99
- <Modal.CloseButton />
100
- </Modal.Header>
101
- ajdsfljasdlfjlasdjf
102
- </Modal>
103
- );
104
-
105
- expect(getByLabelText('Close this dialog')).toBeTruthy();
106
- });
107
-
108
- it('should accept the onClose handler from ModalContext', () => {
109
- const onClose = jest.fn();
110
- const {getByLabelText} = render(
111
- <Modal
112
- isOpen={true}
113
- label="Label"
114
- bg={COLOR_PURPLE_300}
115
- onClose={onClose}
116
- closeButtonLabel="Close this dialog"
117
- >
118
- <Modal.Header>
119
- <Modal.CloseButton />
120
- </Modal.Header>
121
- ajdsfljasdlfjlasdjf
122
- </Modal>
123
- );
124
-
125
- fireEvent.click(getByLabelText('Close this dialog'));
126
- expect(onClose).toHaveBeenCalled();
127
- });
128
- });
129
- });