@lumx/react 3.1.1 → 3.1.3-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (500) hide show
  1. package/{dist/CONTRIBUTING.md → CONTRIBUTING.md} +0 -0
  2. package/{dist/LICENSE.md → LICENSE.md} +0 -0
  3. package/{dist/_internal → _internal}/ClickAwayProvider.js +0 -0
  4. package/{dist/_internal → _internal}/ClickAwayProvider.js.map +0 -0
  5. package/{dist/_internal → _internal}/types.d.ts +1 -1
  6. package/{dist/index.d.ts → index.d.ts} +5 -5
  7. package/{dist/index.js → index.js} +4 -4
  8. package/{dist/index.js.map → index.js.map} +1 -1
  9. package/package.json +3 -3
  10. package/src/components/expansion-panel/ExpansionPanel.stories.tsx +65 -0
  11. package/src/components/expansion-panel/ExpansionPanel.test.tsx +2 -2
  12. package/src/components/expansion-panel/ExpansionPanel.tsx +8 -8
  13. package/{dist/utils → utils}/index.d.ts +0 -0
  14. package/{dist/utils → utils}/index.js +0 -0
  15. package/{dist/utils → utils}/index.js.map +0 -0
  16. package/dist/README.md +0 -38
  17. package/dist/package.json +0 -117
  18. package/dist/src/components/alert-dialog/AlertDialog.stories.tsx +0 -196
  19. package/dist/src/components/alert-dialog/AlertDialog.test.tsx +0 -43
  20. package/dist/src/components/alert-dialog/AlertDialog.tsx +0 -185
  21. package/dist/src/components/alert-dialog/__snapshots__/AlertDialog.test.tsx.snap +0 -551
  22. package/dist/src/components/alert-dialog/index.ts +0 -1
  23. package/dist/src/components/autocomplete/Autocomplete.stories.tsx +0 -70
  24. package/dist/src/components/autocomplete/Autocomplete.test.tsx +0 -181
  25. package/dist/src/components/autocomplete/Autocomplete.tsx +0 -292
  26. package/dist/src/components/autocomplete/AutocompleteMultiple.stories.tsx +0 -170
  27. package/dist/src/components/autocomplete/AutocompleteMultiple.test.tsx +0 -94
  28. package/dist/src/components/autocomplete/AutocompleteMultiple.tsx +0 -156
  29. package/dist/src/components/autocomplete/__mockData__/index.ts +0 -34
  30. package/dist/src/components/autocomplete/__snapshots__/Autocomplete.test.tsx.snap +0 -213
  31. package/dist/src/components/autocomplete/__snapshots__/AutocompleteMultiple.test.tsx.snap +0 -88
  32. package/dist/src/components/autocomplete/index.ts +0 -2
  33. package/dist/src/components/avatar/Avatar.stories.tsx +0 -92
  34. package/dist/src/components/avatar/Avatar.test.tsx +0 -39
  35. package/dist/src/components/avatar/Avatar.tsx +0 -112
  36. package/dist/src/components/avatar/__snapshots__/Avatar.test.tsx.snap +0 -681
  37. package/dist/src/components/avatar/index.ts +0 -1
  38. package/dist/src/components/badge/Badge.stories.tsx +0 -45
  39. package/dist/src/components/badge/Badge.test.tsx +0 -91
  40. package/dist/src/components/badge/Badge.tsx +0 -55
  41. package/dist/src/components/badge/__snapshots__/Badge.test.tsx.snap +0 -11
  42. package/dist/src/components/badge/index.ts +0 -1
  43. package/dist/src/components/button/Button.stories.tsx +0 -156
  44. package/dist/src/components/button/Button.test.tsx +0 -152
  45. package/dist/src/components/button/Button.tsx +0 -81
  46. package/dist/src/components/button/ButtonGroup.test.tsx +0 -66
  47. package/dist/src/components/button/ButtonGroup.tsx +0 -46
  48. package/dist/src/components/button/ButtonRoot.test.tsx +0 -203
  49. package/dist/src/components/button/ButtonRoot.tsx +0 -190
  50. package/dist/src/components/button/IconButton.test.tsx +0 -103
  51. package/dist/src/components/button/IconButton.tsx +0 -80
  52. package/dist/src/components/button/__snapshots__/Button.test.tsx.snap +0 -96
  53. package/dist/src/components/button/__snapshots__/ButtonGroup.test.tsx.snap +0 -22
  54. package/dist/src/components/button/__snapshots__/ButtonRoot.test.tsx.snap +0 -160
  55. package/dist/src/components/button/__snapshots__/IconButton.test.tsx.snap +0 -83
  56. package/dist/src/components/button/index.ts +0 -4
  57. package/dist/src/components/checkbox/Checkbox.stories.tsx +0 -37
  58. package/dist/src/components/checkbox/Checkbox.test.tsx +0 -114
  59. package/dist/src/components/checkbox/Checkbox.tsx +0 -145
  60. package/dist/src/components/checkbox/__snapshots__/Checkbox.test.tsx.snap +0 -141
  61. package/dist/src/components/checkbox/index.ts +0 -1
  62. package/dist/src/components/chip/Chip.stories.tsx +0 -21
  63. package/dist/src/components/chip/Chip.test.tsx +0 -199
  64. package/dist/src/components/chip/Chip.tsx +0 -154
  65. package/dist/src/components/chip/ChipGroup.test.tsx +0 -29
  66. package/dist/src/components/chip/ChipGroup.tsx +0 -62
  67. package/dist/src/components/chip/__snapshots__/Chip.test.tsx.snap +0 -12
  68. package/dist/src/components/chip/__snapshots__/ChipGroup.test.tsx.snap +0 -29
  69. package/dist/src/components/chip/index.ts +0 -2
  70. package/dist/src/components/comment-block/CommentBlock.stories.tsx +0 -30
  71. package/dist/src/components/comment-block/CommentBlock.test.tsx +0 -28
  72. package/dist/src/components/comment-block/CommentBlock.tsx +0 -174
  73. package/dist/src/components/comment-block/__snapshots__/CommentBlock.test.tsx.snap +0 -92
  74. package/dist/src/components/comment-block/index.ts +0 -1
  75. package/dist/src/components/date-picker/DatePicker.test.tsx +0 -41
  76. package/dist/src/components/date-picker/DatePicker.tsx +0 -56
  77. package/dist/src/components/date-picker/DatePickerControlled.test.tsx +0 -44
  78. package/dist/src/components/date-picker/DatePickerControlled.tsx +0 -128
  79. package/dist/src/components/date-picker/DatePickerField.stories.tsx +0 -93
  80. package/dist/src/components/date-picker/DatePickerField.test.tsx +0 -47
  81. package/dist/src/components/date-picker/DatePickerField.tsx +0 -141
  82. package/dist/src/components/date-picker/__snapshots__/DatePicker.test.tsx.snap +0 -22
  83. package/dist/src/components/date-picker/__snapshots__/DatePickerControlled.test.tsx.snap +0 -597
  84. package/dist/src/components/date-picker/__snapshots__/DatePickerField.test.tsx.snap +0 -43
  85. package/dist/src/components/date-picker/constants.ts +0 -11
  86. package/dist/src/components/date-picker/index.ts +0 -4
  87. package/dist/src/components/date-picker/types.ts +0 -28
  88. package/dist/src/components/dialog/Dialog.stories.tsx +0 -426
  89. package/dist/src/components/dialog/Dialog.test.tsx +0 -93
  90. package/dist/src/components/dialog/Dialog.tsx +0 -263
  91. package/dist/src/components/dialog/__snapshots__/Dialog.test.tsx.snap +0 -960
  92. package/dist/src/components/dialog/index.ts +0 -1
  93. package/dist/src/components/divider/Divider.test.tsx +0 -93
  94. package/dist/src/components/divider/Divider.tsx +0 -51
  95. package/dist/src/components/divider/__snapshots__/Divider.test.tsx.snap +0 -9
  96. package/dist/src/components/divider/index.ts +0 -1
  97. package/dist/src/components/drag-handle/DragHandle.tsx +0 -50
  98. package/dist/src/components/drag-handle/index.ts +0 -1
  99. package/dist/src/components/dropdown/Dropdown.stories.tsx +0 -216
  100. package/dist/src/components/dropdown/Dropdown.test.tsx +0 -97
  101. package/dist/src/components/dropdown/Dropdown.tsx +0 -184
  102. package/dist/src/components/dropdown/__snapshots__/Dropdown.test.tsx.snap +0 -35
  103. package/dist/src/components/dropdown/index.ts +0 -1
  104. package/dist/src/components/expansion-panel/ExpansionPanel.test.tsx +0 -116
  105. package/dist/src/components/expansion-panel/ExpansionPanel.tsx +0 -170
  106. package/dist/src/components/expansion-panel/index.ts +0 -1
  107. package/dist/src/components/flag/Flag.stories.tsx +0 -23
  108. package/dist/src/components/flag/Flag.test.tsx +0 -86
  109. package/dist/src/components/flag/Flag.tsx +0 -47
  110. package/dist/src/components/flag/__snapshots__/Flag.test.tsx.snap +0 -133
  111. package/dist/src/components/flag/index.ts +0 -1
  112. package/dist/src/components/flex-box/FlexBox.stories.tsx +0 -245
  113. package/dist/src/components/flex-box/FlexBox.test.tsx +0 -65
  114. package/dist/src/components/flex-box/FlexBox.tsx +0 -98
  115. package/dist/src/components/flex-box/__snapshots__/FlexBox.test.tsx.snap +0 -492
  116. package/dist/src/components/flex-box/index.ts +0 -1
  117. package/dist/src/components/generic-block/GenericBlock.stories.jsx +0 -128
  118. package/dist/src/components/generic-block/GenericBlock.test.tsx +0 -152
  119. package/dist/src/components/generic-block/GenericBlock.tsx +0 -222
  120. package/dist/src/components/generic-block/constants.ts +0 -9
  121. package/dist/src/components/generic-block/index.ts +0 -2
  122. package/dist/src/components/grid/Grid.tsx +0 -73
  123. package/dist/src/components/grid/GridItem.tsx +0 -54
  124. package/dist/src/components/grid/index.ts +0 -2
  125. package/dist/src/components/grid-column/GridColumn.stories.jsx +0 -56
  126. package/dist/src/components/grid-column/GridColumn.test.jsx +0 -58
  127. package/dist/src/components/grid-column/GridColumn.tsx +0 -90
  128. package/dist/src/components/grid-column/index.ts +0 -1
  129. package/dist/src/components/heading/Heading.stories.tsx +0 -108
  130. package/dist/src/components/heading/Heading.test.tsx +0 -82
  131. package/dist/src/components/heading/Heading.tsx +0 -63
  132. package/dist/src/components/heading/HeadingLevelProvider.tsx +0 -30
  133. package/dist/src/components/heading/constants.ts +0 -16
  134. package/dist/src/components/heading/context.tsx +0 -13
  135. package/dist/src/components/heading/index.ts +0 -3
  136. package/dist/src/components/heading/useHeadingLevel.tsx +0 -8
  137. package/dist/src/components/icon/Icon.stories.tsx +0 -76
  138. package/dist/src/components/icon/Icon.test.tsx +0 -102
  139. package/dist/src/components/icon/Icon.tsx +0 -121
  140. package/dist/src/components/icon/__snapshots__/Icon.test.tsx.snap +0 -49
  141. package/dist/src/components/icon/index.ts +0 -1
  142. package/dist/src/components/image-block/ImageBlock.stories.tsx +0 -52
  143. package/dist/src/components/image-block/ImageBlock.test.tsx +0 -28
  144. package/dist/src/components/image-block/ImageBlock.tsx +0 -151
  145. package/dist/src/components/image-block/__snapshots__/ImageBlock.test.tsx.snap +0 -64
  146. package/dist/src/components/image-block/index.ts +0 -1
  147. package/dist/src/components/index.ts +0 -176
  148. package/dist/src/components/inline-list/InlineList.stories.tsx +0 -40
  149. package/dist/src/components/inline-list/InlineList.test.tsx +0 -41
  150. package/dist/src/components/inline-list/InlineList.tsx +0 -82
  151. package/dist/src/components/inline-list/index.ts +0 -1
  152. package/dist/src/components/input-helper/InputHelper.stories.tsx +0 -29
  153. package/dist/src/components/input-helper/InputHelper.test.tsx +0 -107
  154. package/dist/src/components/input-helper/InputHelper.tsx +0 -61
  155. package/dist/src/components/input-helper/__snapshots__/InputHelper.test.tsx.snap +0 -9
  156. package/dist/src/components/input-helper/constants.ts +0 -11
  157. package/dist/src/components/input-helper/index.ts +0 -1
  158. package/dist/src/components/input-label/InputLabel.stories.tsx +0 -15
  159. package/dist/src/components/input-label/InputLabel.test.tsx +0 -86
  160. package/dist/src/components/input-label/InputLabel.tsx +0 -59
  161. package/dist/src/components/input-label/__snapshots__/InputLabel.test.tsx.snap +0 -10
  162. package/dist/src/components/input-label/index.ts +0 -1
  163. package/dist/src/components/lightbox/Lightbox.stories.tsx +0 -83
  164. package/dist/src/components/lightbox/Lightbox.test.tsx +0 -30
  165. package/dist/src/components/lightbox/Lightbox.tsx +0 -153
  166. package/dist/src/components/lightbox/__snapshots__/Lightbox.test.tsx.snap +0 -194
  167. package/dist/src/components/lightbox/index.ts +0 -1
  168. package/dist/src/components/link/Link.stories.tsx +0 -141
  169. package/dist/src/components/link/Link.test.tsx +0 -60
  170. package/dist/src/components/link/Link.tsx +0 -156
  171. package/dist/src/components/link/__snapshots__/Link.test.tsx.snap +0 -29
  172. package/dist/src/components/link/index.ts +0 -1
  173. package/dist/src/components/link-preview/LinkPreview.stories.tsx +0 -88
  174. package/dist/src/components/link-preview/LinkPreview.test.tsx +0 -102
  175. package/dist/src/components/link-preview/LinkPreview.tsx +0 -158
  176. package/dist/src/components/link-preview/index.ts +0 -1
  177. package/dist/src/components/list/List.stories.tsx +0 -141
  178. package/dist/src/components/list/List.test.tsx +0 -29
  179. package/dist/src/components/list/List.tsx +0 -94
  180. package/dist/src/components/list/ListDivider.stories.tsx +0 -7
  181. package/dist/src/components/list/ListDivider.test.tsx +0 -29
  182. package/dist/src/components/list/ListDivider.tsx +0 -42
  183. package/dist/src/components/list/ListItem.stories.tsx +0 -62
  184. package/dist/src/components/list/ListItem.test.tsx +0 -29
  185. package/dist/src/components/list/ListItem.tsx +0 -154
  186. package/dist/src/components/list/ListSubheader.stories.tsx +0 -8
  187. package/dist/src/components/list/ListSubheader.test.tsx +0 -29
  188. package/dist/src/components/list/ListSubheader.tsx +0 -43
  189. package/dist/src/components/list/__snapshots__/List.test.tsx.snap +0 -360
  190. package/dist/src/components/list/__snapshots__/ListDivider.test.tsx.snap +0 -7
  191. package/dist/src/components/list/__snapshots__/ListItem.test.tsx.snap +0 -160
  192. package/dist/src/components/list/__snapshots__/ListSubheader.test.tsx.snap +0 -9
  193. package/dist/src/components/list/index.ts +0 -4
  194. package/dist/src/components/list/useInteractiveList.tsx +0 -202
  195. package/dist/src/components/message/Message.stories.tsx +0 -27
  196. package/dist/src/components/message/Message.test.tsx +0 -76
  197. package/dist/src/components/message/Message.tsx +0 -74
  198. package/dist/src/components/message/__snapshots__/Message.test.tsx.snap +0 -15
  199. package/dist/src/components/message/index.ts +0 -1
  200. package/dist/src/components/mosaic/Mosaic.stories.tsx +0 -85
  201. package/dist/src/components/mosaic/Mosaic.test.tsx +0 -120
  202. package/dist/src/components/mosaic/Mosaic.tsx +0 -95
  203. package/dist/src/components/mosaic/__snapshots__/Mosaic.test.tsx.snap +0 -357
  204. package/dist/src/components/mosaic/index.ts +0 -1
  205. package/dist/src/components/notification/Notification.test.tsx +0 -108
  206. package/dist/src/components/notification/Notification.tsx +0 -130
  207. package/dist/src/components/notification/Notifications.stories.tsx +0 -77
  208. package/dist/src/components/notification/__snapshots__/Notification.test.tsx.snap +0 -34
  209. package/dist/src/components/notification/constants.ts +0 -28
  210. package/dist/src/components/notification/index.ts +0 -1
  211. package/dist/src/components/popover/Popover.stories.tsx +0 -386
  212. package/dist/src/components/popover/Popover.test.tsx +0 -30
  213. package/dist/src/components/popover/Popover.tsx +0 -382
  214. package/dist/src/components/popover/__snapshots__/Popover.test.tsx.snap +0 -343
  215. package/dist/src/components/popover/index.ts +0 -1
  216. package/dist/src/components/popover-dialog/PopoverDialog.stories.tsx +0 -75
  217. package/dist/src/components/popover-dialog/PopoverDialog.test.tsx +0 -65
  218. package/dist/src/components/popover-dialog/PopoverDialog.tsx +0 -65
  219. package/dist/src/components/popover-dialog/index.tsx +0 -1
  220. package/dist/src/components/post-block/PostBlock.test.tsx +0 -28
  221. package/dist/src/components/post-block/PostBlock.tsx +0 -123
  222. package/dist/src/components/post-block/__snapshots__/PostBlock.test.tsx.snap +0 -139
  223. package/dist/src/components/post-block/index.ts +0 -1
  224. package/dist/src/components/progress/Progress.tsx +0 -68
  225. package/dist/src/components/progress/ProgressCircular.stories.tsx +0 -18
  226. package/dist/src/components/progress/ProgressCircular.test.tsx +0 -49
  227. package/dist/src/components/progress/ProgressCircular.tsx +0 -68
  228. package/dist/src/components/progress/ProgressLinear.stories.tsx +0 -8
  229. package/dist/src/components/progress/ProgressLinear.test.tsx +0 -37
  230. package/dist/src/components/progress/ProgressLinear.tsx +0 -52
  231. package/dist/src/components/progress/index.ts +0 -3
  232. package/dist/src/components/progress-tracker/ProgressTracker.stories.tsx +0 -145
  233. package/dist/src/components/progress-tracker/ProgressTracker.test.tsx +0 -57
  234. package/dist/src/components/progress-tracker/ProgressTracker.tsx +0 -89
  235. package/dist/src/components/progress-tracker/ProgressTrackerProvider.test.tsx +0 -42
  236. package/dist/src/components/progress-tracker/ProgressTrackerProvider.tsx +0 -66
  237. package/dist/src/components/progress-tracker/ProgressTrackerStep.test.tsx +0 -128
  238. package/dist/src/components/progress-tracker/ProgressTrackerStep.tsx +0 -159
  239. package/dist/src/components/progress-tracker/ProgressTrackerStepPanel.test.tsx +0 -73
  240. package/dist/src/components/progress-tracker/ProgressTrackerStepPanel.tsx +0 -67
  241. package/dist/src/components/progress-tracker/__snapshots__/ProgressTracker.test.tsx.snap +0 -41
  242. package/dist/src/components/progress-tracker/__snapshots__/ProgressTrackerStep.test.tsx.snap +0 -141
  243. package/dist/src/components/progress-tracker/__snapshots__/ProgressTrackerStepPanel.test.tsx.snap +0 -25
  244. package/dist/src/components/progress-tracker/index.ts +0 -4
  245. package/dist/src/components/radio-button/RadioButton.stories.tsx +0 -28
  246. package/dist/src/components/radio-button/RadioButton.test.tsx +0 -123
  247. package/dist/src/components/radio-button/RadioButton.tsx +0 -141
  248. package/dist/src/components/radio-button/RadioGroup.stories.tsx +0 -42
  249. package/dist/src/components/radio-button/RadioGroup.test.tsx +0 -77
  250. package/dist/src/components/radio-button/RadioGroup.tsx +0 -52
  251. package/dist/src/components/radio-button/__snapshots__/RadioButton.test.tsx.snap +0 -113
  252. package/dist/src/components/radio-button/__snapshots__/RadioGroup.test.tsx.snap +0 -26
  253. package/dist/src/components/radio-button/index.ts +0 -2
  254. package/dist/src/components/select/Select.stories.tsx +0 -399
  255. package/dist/src/components/select/Select.test.tsx +0 -359
  256. package/dist/src/components/select/Select.tsx +0 -193
  257. package/dist/src/components/select/SelectMultiple.stories.tsx +0 -227
  258. package/dist/src/components/select/SelectMultiple.test.tsx +0 -405
  259. package/dist/src/components/select/SelectMultiple.tsx +0 -198
  260. package/dist/src/components/select/WithSelectContext.tsx +0 -143
  261. package/dist/src/components/select/__snapshots__/Select.test.tsx.snap +0 -43
  262. package/dist/src/components/select/__snapshots__/SelectMultiple.test.tsx.snap +0 -87
  263. package/dist/src/components/select/constants.ts +0 -53
  264. package/dist/src/components/select/index.ts +0 -2
  265. package/dist/src/components/side-navigation/SideNavigation.stories.tsx +0 -191
  266. package/dist/src/components/side-navigation/SideNavigation.test.tsx +0 -52
  267. package/dist/src/components/side-navigation/SideNavigation.tsx +0 -54
  268. package/dist/src/components/side-navigation/SideNavigationItem.test.tsx +0 -175
  269. package/dist/src/components/side-navigation/SideNavigationItem.tsx +0 -162
  270. package/dist/src/components/side-navigation/__snapshots__/SideNavigation.test.tsx.snap +0 -7
  271. package/dist/src/components/side-navigation/__snapshots__/SideNavigationItem.test.tsx.snap +0 -30
  272. package/dist/src/components/side-navigation/index.ts +0 -2
  273. package/dist/src/components/skeleton/SkeletonCircle.stories.tsx +0 -25
  274. package/dist/src/components/skeleton/SkeletonCircle.test.tsx +0 -28
  275. package/dist/src/components/skeleton/SkeletonCircle.tsx +0 -52
  276. package/dist/src/components/skeleton/SkeletonRectangle.stories.tsx +0 -107
  277. package/dist/src/components/skeleton/SkeletonRectangle.test.tsx +0 -28
  278. package/dist/src/components/skeleton/SkeletonRectangle.tsx +0 -78
  279. package/dist/src/components/skeleton/SkeletonTypography.stories.tsx +0 -26
  280. package/dist/src/components/skeleton/SkeletonTypography.test.tsx +0 -28
  281. package/dist/src/components/skeleton/SkeletonTypography.tsx +0 -57
  282. package/dist/src/components/skeleton/__snapshots__/SkeletonCircle.test.tsx.snap +0 -54
  283. package/dist/src/components/skeleton/__snapshots__/SkeletonRectangle.test.tsx.snap +0 -177
  284. package/dist/src/components/skeleton/__snapshots__/SkeletonTypography.test.tsx.snap +0 -174
  285. package/dist/src/components/skeleton/index.ts +0 -3
  286. package/dist/src/components/slider/Slider.stories.tsx +0 -29
  287. package/dist/src/components/slider/Slider.test.tsx +0 -31
  288. package/dist/src/components/slider/Slider.tsx +0 -299
  289. package/dist/src/components/slider/__snapshots__/Slider.test.tsx.snap +0 -122
  290. package/dist/src/components/slider/index.ts +0 -2
  291. package/dist/src/components/slideshow/Slides.tsx +0 -124
  292. package/dist/src/components/slideshow/Slideshow.stories.tsx +0 -212
  293. package/dist/src/components/slideshow/Slideshow.test.tsx +0 -39
  294. package/dist/src/components/slideshow/Slideshow.tsx +0 -170
  295. package/dist/src/components/slideshow/SlideshowControls.stories.tsx +0 -112
  296. package/dist/src/components/slideshow/SlideshowControls.tsx +0 -241
  297. package/dist/src/components/slideshow/SlideshowItem.tsx +0 -52
  298. package/dist/src/components/slideshow/SlideshowItemGroup.tsx +0 -64
  299. package/dist/src/components/slideshow/__snapshots__/Slideshow.test.tsx.snap +0 -157
  300. package/dist/src/components/slideshow/constants.ts +0 -24
  301. package/dist/src/components/slideshow/index.ts +0 -4
  302. package/dist/src/components/slideshow/useKeyNavigate.ts +0 -28
  303. package/dist/src/components/slideshow/usePaginationVisibleRange.ts +0 -37
  304. package/dist/src/components/slideshow/useSlideFocusManagement.tsx +0 -92
  305. package/dist/src/components/slideshow/useSwipeNavigate.ts +0 -18
  306. package/dist/src/components/switch/Switch.stories.tsx +0 -36
  307. package/dist/src/components/switch/Switch.test.tsx +0 -189
  308. package/dist/src/components/switch/Switch.tsx +0 -141
  309. package/dist/src/components/switch/__snapshots__/Switch.test.tsx.snap +0 -179
  310. package/dist/src/components/switch/index.ts +0 -1
  311. package/dist/src/components/table/Table.test.tsx +0 -28
  312. package/dist/src/components/table/Table.tsx +0 -59
  313. package/dist/src/components/table/TableBody.test.tsx +0 -22
  314. package/dist/src/components/table/TableBody.tsx +0 -44
  315. package/dist/src/components/table/TableCell.test.tsx +0 -23
  316. package/dist/src/components/table/TableCell.tsx +0 -125
  317. package/dist/src/components/table/TableHeader.test.tsx +0 -22
  318. package/dist/src/components/table/TableHeader.tsx +0 -50
  319. package/dist/src/components/table/TableRow.test.tsx +0 -22
  320. package/dist/src/components/table/TableRow.tsx +0 -68
  321. package/dist/src/components/table/__snapshots__/Table.test.tsx.snap +0 -263
  322. package/dist/src/components/table/index.ts +0 -5
  323. package/dist/src/components/tabs/Tab.test.tsx +0 -116
  324. package/dist/src/components/tabs/Tab.tsx +0 -120
  325. package/dist/src/components/tabs/TabList.test.tsx +0 -80
  326. package/dist/src/components/tabs/TabList.tsx +0 -82
  327. package/dist/src/components/tabs/TabPanel.test.tsx +0 -74
  328. package/dist/src/components/tabs/TabPanel.tsx +0 -65
  329. package/dist/src/components/tabs/TabProvider.test.tsx +0 -42
  330. package/dist/src/components/tabs/TabProvider.tsx +0 -59
  331. package/dist/src/components/tabs/Tabs.stories.tsx +0 -134
  332. package/dist/src/components/tabs/__snapshots__/Tab.test.tsx.snap +0 -62
  333. package/dist/src/components/tabs/__snapshots__/TabList.test.tsx.snap +0 -22
  334. package/dist/src/components/tabs/__snapshots__/TabPanel.test.tsx.snap +0 -25
  335. package/dist/src/components/tabs/index.ts +0 -4
  336. package/dist/src/components/tabs/state.ts +0 -116
  337. package/dist/src/components/tabs/test.mocks.ts +0 -33
  338. package/dist/src/components/text/Text.stories.jsx +0 -75
  339. package/dist/src/components/text/Text.test.tsx +0 -108
  340. package/dist/src/components/text/Text.tsx +0 -121
  341. package/dist/src/components/text/index.ts +0 -1
  342. package/dist/src/components/text-field/TextField.stories.tsx +0 -169
  343. package/dist/src/components/text-field/TextField.test.tsx +0 -171
  344. package/dist/src/components/text-field/TextField.tsx +0 -432
  345. package/dist/src/components/text-field/__snapshots__/TextField.test.tsx.snap +0 -42
  346. package/dist/src/components/text-field/index.ts +0 -1
  347. package/dist/src/components/thumbnail/Thumbnail.stories.tsx +0 -510
  348. package/dist/src/components/thumbnail/Thumbnail.test.tsx +0 -46
  349. package/dist/src/components/thumbnail/Thumbnail.tsx +0 -222
  350. package/dist/src/components/thumbnail/__snapshots__/Thumbnail.test.tsx.snap +0 -130
  351. package/dist/src/components/thumbnail/index.ts +0 -3
  352. package/dist/src/components/thumbnail/types.ts +0 -39
  353. package/dist/src/components/thumbnail/useFocusPointStyle.test.ts +0 -92
  354. package/dist/src/components/thumbnail/useFocusPointStyle.tsx +0 -111
  355. package/dist/src/components/thumbnail/useImageLoad.ts +0 -40
  356. package/dist/src/components/toolbar/Toolbar.tsx +0 -67
  357. package/dist/src/components/toolbar/index.ts +0 -1
  358. package/dist/src/components/tooltip/Tooltip.stories.tsx +0 -172
  359. package/dist/src/components/tooltip/Tooltip.test.tsx +0 -105
  360. package/dist/src/components/tooltip/Tooltip.tsx +0 -122
  361. package/dist/src/components/tooltip/__snapshots__/Tooltip.test.tsx.snap +0 -233
  362. package/dist/src/components/tooltip/index.ts +0 -1
  363. package/dist/src/components/tooltip/useInjectTooltipRef.tsx +0 -44
  364. package/dist/src/components/tooltip/useTooltipOpen.tsx +0 -113
  365. package/dist/src/components/uploader/Uploader.test.tsx +0 -87
  366. package/dist/src/components/uploader/Uploader.tsx +0 -105
  367. package/dist/src/components/uploader/__snapshots__/Uploader.test.tsx.snap +0 -14
  368. package/dist/src/components/uploader/index.ts +0 -1
  369. package/dist/src/components/user-block/UserBlock.stories.tsx +0 -76
  370. package/dist/src/components/user-block/UserBlock.test.tsx +0 -38
  371. package/dist/src/components/user-block/UserBlock.tsx +0 -179
  372. package/dist/src/components/user-block/__snapshots__/UserBlock.test.tsx.snap +0 -362
  373. package/dist/src/components/user-block/index.ts +0 -1
  374. package/dist/src/constants.ts +0 -17
  375. package/dist/src/hooks/useBooleanState.tsx +0 -13
  376. package/dist/src/hooks/useCallbackOnEscape.ts +0 -34
  377. package/dist/src/hooks/useChipGroupNavigation.tsx +0 -75
  378. package/dist/src/hooks/useClickAway.tsx +0 -47
  379. package/dist/src/hooks/useDisableBodyScroll.ts +0 -28
  380. package/dist/src/hooks/useEventCallback.tsx +0 -17
  381. package/dist/src/hooks/useFocus.tsx +0 -21
  382. package/dist/src/hooks/useFocusTrap.ts +0 -85
  383. package/dist/src/hooks/useFocusWithin.ts +0 -33
  384. package/dist/src/hooks/useInfiniteScroll.tsx +0 -60
  385. package/dist/src/hooks/useIntersectionObserver.tsx +0 -43
  386. package/dist/src/hooks/useInterval.tsx +0 -31
  387. package/dist/src/hooks/useKeyboardListNavigation.tsx +0 -204
  388. package/dist/src/hooks/useListenFocus.tsx +0 -26
  389. package/dist/src/hooks/useOnResize.ts +0 -41
  390. package/dist/src/hooks/useRovingTabIndex.tsx +0 -90
  391. package/dist/src/hooks/useSlideshowControls.ts +0 -243
  392. package/dist/src/hooks/useStopPropagation.ts +0 -21
  393. package/dist/src/hooks/useTransitionVisibility.ts +0 -54
  394. package/dist/src/index.ts +0 -58
  395. package/dist/src/stories/chromaticForceScreenSize.tsx +0 -7
  396. package/dist/src/stories/generated/Autocomplete/Demos.stories.tsx +0 -7
  397. package/dist/src/stories/generated/Avatar/Demos.stories.tsx +0 -7
  398. package/dist/src/stories/generated/Badge/Demos.stories.tsx +0 -9
  399. package/dist/src/stories/generated/Button/Demos.stories.tsx +0 -11
  400. package/dist/src/stories/generated/Checkbox/Demos.stories.tsx +0 -6
  401. package/dist/src/stories/generated/Chip/Demos.stories.tsx +0 -11
  402. package/dist/src/stories/generated/CommentBlock/Demos.stories.tsx +0 -8
  403. package/dist/src/stories/generated/DatePicker/Demos.stories.tsx +0 -8
  404. package/dist/src/stories/generated/Dialog/Demos.stories.tsx +0 -10
  405. package/dist/src/stories/generated/Divider/Demos.stories.tsx +0 -6
  406. package/dist/src/stories/generated/Dropdown/Demos.stories.tsx +0 -8
  407. package/dist/src/stories/generated/ExpansionPanel/Demos.stories.tsx +0 -9
  408. package/dist/src/stories/generated/Flag/Demos.stories.tsx +0 -6
  409. package/dist/src/stories/generated/GenericBlock/Demos.stories.tsx +0 -8
  410. package/dist/src/stories/generated/Heading/Demos.stories.tsx +0 -6
  411. package/dist/src/stories/generated/Icon/Demos.stories.tsx +0 -8
  412. package/dist/src/stories/generated/ImageBlock/Demos.stories.tsx +0 -9
  413. package/dist/src/stories/generated/Lightbox/Demos.stories.tsx +0 -6
  414. package/dist/src/stories/generated/Link/Demos.stories.tsx +0 -8
  415. package/dist/src/stories/generated/LinkPreview/Demos.stories.tsx +0 -7
  416. package/dist/src/stories/generated/List/Demos.stories.tsx +0 -11
  417. package/dist/src/stories/generated/Message/Demos.stories.tsx +0 -10
  418. package/dist/src/stories/generated/Mosaic/Demos.stories.tsx +0 -9
  419. package/dist/src/stories/generated/Notification/Demos.stories.tsx +0 -6
  420. package/dist/src/stories/generated/Popover/Demos.stories.tsx +0 -11
  421. package/dist/src/stories/generated/PopoverDialog/Demos.stories.tsx +0 -6
  422. package/dist/src/stories/generated/PostBlock/Demos.stories.tsx +0 -6
  423. package/dist/src/stories/generated/Progress/Demos.stories.tsx +0 -7
  424. package/dist/src/stories/generated/ProgressTracker/Demos.stories.tsx +0 -9
  425. package/dist/src/stories/generated/RadioButton/Demos.stories.tsx +0 -6
  426. package/dist/src/stories/generated/Select/Demos.stories.tsx +0 -14
  427. package/dist/src/stories/generated/SideNavigation/Demos.stories.tsx +0 -10
  428. package/dist/src/stories/generated/Skeleton/Demos.stories.tsx +0 -9
  429. package/dist/src/stories/generated/Slider/Demos.stories.tsx +0 -9
  430. package/dist/src/stories/generated/Slideshow/Demos.stories.tsx +0 -8
  431. package/dist/src/stories/generated/Switch/Demos.stories.tsx +0 -6
  432. package/dist/src/stories/generated/Table/Demos.stories.tsx +0 -6
  433. package/dist/src/stories/generated/Tabs/Demos.stories.tsx +0 -8
  434. package/dist/src/stories/generated/TextField/Demos.stories.tsx +0 -19
  435. package/dist/src/stories/generated/Thumbnail/Demos.stories.tsx +0 -12
  436. package/dist/src/stories/generated/Toolbar/Demos.stories.tsx +0 -10
  437. package/dist/src/stories/generated/Tooltip/Demos.stories.tsx +0 -8
  438. package/dist/src/stories/generated/Uploader/Demos.stories.tsx +0 -8
  439. package/dist/src/stories/generated/UserBlock/Demos.stories.tsx +0 -10
  440. package/dist/src/stories/knobs/buttonKnob.ts +0 -9
  441. package/dist/src/stories/knobs/emphasisKnob.ts +0 -8
  442. package/dist/src/stories/knobs/enumKnob.ts +0 -14
  443. package/dist/src/stories/knobs/focusKnob.ts +0 -3
  444. package/dist/src/stories/knobs/image.ts +0 -69
  445. package/dist/src/stories/knobs/lorem.ts +0 -59
  446. package/dist/src/stories/knobs/sizeKnob.ts +0 -5
  447. package/dist/src/stories/knobs/thumbnailsKnob.ts +0 -9
  448. package/dist/src/stories/utils/CustomLink.tsx +0 -7
  449. package/dist/src/stories/withResizableBox.tsx +0 -18
  450. package/dist/src/testing/utils/commonTestsSuite.ts +0 -71
  451. package/dist/src/testing/utils/commonTestsSuiteRTL.ts +0 -55
  452. package/dist/src/testing/utils/index.ts +0 -4
  453. package/dist/src/testing/utils/itShouldRenderStories.tsx +0 -103
  454. package/dist/src/testing/utils/queries.ts +0 -19
  455. package/dist/src/untypped-modules.d.ts +0 -7
  456. package/dist/src/utils/ClickAwayProvider/ClickAwayProvider.stories.jsx +0 -58
  457. package/dist/src/utils/ClickAwayProvider/ClickAwayProvider.tsx +0 -65
  458. package/dist/src/utils/ClickAwayProvider/index.ts +0 -1
  459. package/dist/src/utils/MaterialThemeSwitcher/MaterialThemeSwitcher.tsx +0 -54
  460. package/dist/src/utils/MaterialThemeSwitcher/index.ts +0 -1
  461. package/dist/src/utils/browserDoesNotSupportHover.test.js +0 -24
  462. package/dist/src/utils/browserDoesNotSupportHover.ts +0 -2
  463. package/dist/src/utils/clamp.ts +0 -17
  464. package/dist/src/utils/className.ts +0 -44
  465. package/dist/src/utils/event.ts +0 -1
  466. package/dist/src/utils/flattenChildren.test.tsx +0 -58
  467. package/dist/src/utils/flattenChildren.ts +0 -27
  468. package/dist/src/utils/focus/constants.ts +0 -5
  469. package/dist/src/utils/focus/getFirstAndLastFocusable.test.ts +0 -134
  470. package/dist/src/utils/focus/getFirstAndLastFocusable.ts +0 -21
  471. package/dist/src/utils/focus/getFocusableElements.test.ts +0 -151
  472. package/dist/src/utils/focus/getFocusableElements.ts +0 -7
  473. package/dist/src/utils/index.ts +0 -5
  474. package/dist/src/utils/isInternetExplorer.ts +0 -15
  475. package/dist/src/utils/makeListenerTowerContext.ts +0 -32
  476. package/dist/src/utils/mergeRefs.ts +0 -22
  477. package/dist/src/utils/partitionMulti.ts +0 -28
  478. package/dist/src/utils/renderLink.tsx +0 -17
  479. package/dist/src/utils/type.ts +0 -113
  480. package/dist/src/utils/userHasReducedMotion.ts +0 -7
  481. package/dist/src/utils/utils.test.ts +0 -48
  482. package/jest/__mocks__/@storybook/addon-actions.js +0 -3
  483. package/jest/__mocks__/@storybook/addon-knobs.js +0 -6
  484. package/jest/__mocks__/emptyFileMockTransformer.js +0 -8
  485. package/jest/__mocks__/emptyModuleMock.js +0 -1
  486. package/jest/configure.js +0 -6
  487. package/jest/index.js +0 -36
  488. package/jest/transform.js +0 -6
  489. package/rollup.config.js +0 -98
  490. package/storybook/build +0 -4
  491. package/storybook/generate-demo-stories.js +0 -59
  492. package/storybook/main.js +0 -67
  493. package/storybook/package.json +0 -13
  494. package/storybook/preview.js +0 -11
  495. package/storybook/start +0 -4
  496. package/storybook/story-block/StoryBlock.tsx +0 -49
  497. package/storybook/story-block/decorator.jsx +0 -7
  498. package/storybook/story-block/index.scss +0 -27
  499. package/storybook/yarn.lock +0 -13192
  500. package/tsconfig.json +0 -3
@@ -1,510 +0,0 @@
1
- import React from 'react';
2
-
3
- import { mdiAbTesting } from '@lumx/icons';
4
- import {
5
- Alignment,
6
- AspectRatio,
7
- Badge,
8
- ColorPalette,
9
- FlexBox,
10
- Icon,
11
- Size,
12
- Thumbnail,
13
- ThumbnailVariant,
14
- } from '@lumx/react';
15
- import { IMAGE_SIZES, imageKnob, IMAGES } from '@lumx/react/stories/knobs/image';
16
- import { boolean, select, text } from '@storybook/addon-knobs';
17
- import { enumKnob } from '@lumx/react/stories/knobs/enumKnob';
18
- import { focusKnob } from '@lumx/react/stories/knobs/focusKnob';
19
- import { sizeKnob } from '@lumx/react/stories/knobs/sizeKnob';
20
- import { action } from '@storybook/addon-actions';
21
- import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
22
-
23
- export default { title: 'LumX components/thumbnail/Thumbnail' };
24
-
25
- const Resizable = ({ initialSize: { width, height }, children }: any) => (
26
- <div style={{ border: '1px solid red', overflow: 'hidden', resize: 'both', width, height }}>{children}</div>
27
- );
28
-
29
- /** Default thumbnail props (editable via knobs) */
30
- export const Default = ({ theme }: any) => {
31
- const alt = text('Alternative text', 'Image alt text');
32
- const align = enumKnob(
33
- 'Alignment',
34
- [undefined, Alignment.center, Alignment.left, Alignment.right] as const,
35
- undefined,
36
- );
37
- const aspectRatio = enumKnob('Aspect ratio', [undefined, ...Object.values(AspectRatio)], undefined);
38
- const fillHeight = boolean('Fill Height', false);
39
- const focusPoint = { x: focusKnob('Focus X'), y: focusKnob('Focus Y') };
40
- const image = imageKnob('Image', IMAGES.landscape1);
41
- const variant = select('Variant', ThumbnailVariant, ThumbnailVariant.squared);
42
- const size = sizeKnob('Size', undefined);
43
- const onClick = boolean('clickable?', false) ? action('onClick') : undefined;
44
- const isLoading = boolean('Force loading', false);
45
- const forceError = boolean('Force error', false);
46
-
47
- return (
48
- <Thumbnail
49
- alt={alt}
50
- align={align}
51
- aspectRatio={aspectRatio}
52
- fillHeight={fillHeight}
53
- focusPoint={focusPoint}
54
- image={forceError ? 'foo' : image}
55
- size={size}
56
- theme={theme}
57
- variant={variant}
58
- onClick={onClick}
59
- isLoading={isLoading}
60
- />
61
- );
62
- };
63
-
64
- export const WithBadge = () => {
65
- const thumbnailSize = sizeKnob('Size', Size.l);
66
- const variant = select('Variant', ThumbnailVariant, ThumbnailVariant.rounded);
67
- const badgeColor = select('Badge color', ColorPalette, ColorPalette.primary);
68
- const activateFallback = boolean('Activate fallback', false);
69
- const image = imageKnob();
70
- return (
71
- <Thumbnail
72
- alt="Image alt text"
73
- image={activateFallback ? '' : image}
74
- variant={variant}
75
- aspectRatio={AspectRatio.square}
76
- size={thumbnailSize}
77
- badge={
78
- <Badge color={badgeColor}>
79
- <Icon icon={mdiAbTesting} />
80
- </Badge>
81
- }
82
- />
83
- );
84
- };
85
-
86
- export const WithCustomImageClassName = () => {
87
- const thumbnailSize = sizeKnob('Size', Size.l);
88
- const variant = select('Variant', ThumbnailVariant, ThumbnailVariant.rounded);
89
- const badgeColor = select('Badge color', ColorPalette, ColorPalette.primary);
90
- const activateFallback = boolean('Activate fallback', false);
91
- const image = imageKnob();
92
- return (
93
- <Thumbnail
94
- alt="Image alt text"
95
- image={activateFallback ? '' : image}
96
- variant={variant}
97
- aspectRatio={AspectRatio.square}
98
- size={thumbnailSize}
99
- badge={
100
- <Badge color={badgeColor}>
101
- <Icon icon={mdiAbTesting} />
102
- </Badge>
103
- }
104
- imgProps={{
105
- className: 'custom-image-class-name',
106
- }}
107
- />
108
- );
109
- };
110
-
111
- export const FocusPoint = () => {
112
- const focusPoint = { x: focusKnob('Focus X ', -0.2), y: focusKnob('Focus Y', -0.3) };
113
- const aspectRatio = enumKnob('Aspect ratio', [undefined, ...Object.values(AspectRatio)], AspectRatio.wide);
114
- const fillHeight = aspectRatio === AspectRatio.free;
115
- return (
116
- <>
117
- <small>Focus point will delay the display of the image if the original image size is not accessible.</small>
118
- <Resizable initialSize={{ height: 200, width: 300 }}>
119
- <Thumbnail
120
- alt="Image"
121
- image={IMAGES.portrait1s200}
122
- aspectRatio={aspectRatio}
123
- fillHeight={fillHeight}
124
- focusPoint={focusPoint}
125
- style={{ width: '100%' }}
126
- />
127
- </Resizable>
128
-
129
- <small>Providing the width & height in imgProps should avoid the delay shown above</small>
130
- <Resizable initialSize={{ height: 200, width: 300 }}>
131
- <Thumbnail
132
- alt="Image"
133
- image={IMAGES.portrait2}
134
- imgProps={IMAGE_SIZES.portrait2}
135
- fillHeight={fillHeight}
136
- aspectRatio={aspectRatio}
137
- focusPoint={focusPoint}
138
- style={{ width: '100%' }}
139
- />
140
- </Resizable>
141
- </>
142
- );
143
- };
144
-
145
- export const Clickable = () => (
146
- <Thumbnail alt="Click me" image={imageKnob()} size={sizeKnob('Size', Size.xxl)} onClick={action('onClick')} />
147
- );
148
-
149
- export const ClickableLink = () => (
150
- <Thumbnail
151
- alt="Click me"
152
- image={imageKnob()}
153
- size={sizeKnob('Size', Size.xxl)}
154
- linkProps={{ href: 'https://google.fr' }}
155
- />
156
- );
157
-
158
- export const ClickableCustomLink = () => (
159
- <Thumbnail
160
- alt="Click me"
161
- image={imageKnob()}
162
- size={sizeKnob('Size', Size.xxl)}
163
- linkAs={CustomLink}
164
- linkProps={{ href: 'https://google.fr', className: 'custom-class-name' }}
165
- />
166
- );
167
-
168
- export const FillHeight = () => {
169
- const parentStyle = {
170
- width: 600,
171
- height: 240,
172
- border: '1px solid red',
173
- overflow: 'hidden',
174
- resize: 'both',
175
- } as const;
176
- return (
177
- <>
178
- <h2>Default</h2>
179
- <div style={parentStyle}>
180
- <Thumbnail alt="" image={IMAGES.landscape1s200} fillHeight />
181
- </div>
182
- <h2>Ratio wide</h2>
183
- <div style={parentStyle}>
184
- <Thumbnail alt="" image={IMAGES.landscape1s200} fillHeight aspectRatio="wide" />
185
- </div>
186
- <h2>Ratio vertical</h2>
187
- <div style={parentStyle}>
188
- <Thumbnail alt="" image={IMAGES.landscape1s200} fillHeight aspectRatio="vertical" />
189
- </div>
190
- <h2>Ratio free</h2>
191
- <div style={parentStyle}>
192
- <Thumbnail alt="" image={IMAGES.landscape1s200} fillHeight aspectRatio="free" />
193
- </div>
194
- </>
195
- );
196
- };
197
-
198
- export const Original = () => (
199
- <>
200
- <h1>Ratio: Original</h1>
201
- <h2>Default</h2>
202
- <table>
203
- <tr>
204
- <th>Landscape</th>
205
- <th>
206
- Landscape <small>(with original size)</small>
207
- </th>
208
- <th>Portrait</th>
209
- <th>
210
- Portrait <small>(with original size)</small>
211
- </th>
212
- </tr>
213
- <tr>
214
- <td>
215
- <Thumbnail alt="" image={IMAGES.landscape1} />
216
- </td>
217
- <td>
218
- <Thumbnail alt="" image={IMAGES.landscape1} imgProps={IMAGE_SIZES.landscape1} />
219
- </td>
220
- <td>
221
- <Thumbnail alt="" image={IMAGES.portrait1} />
222
- </td>
223
- <td>
224
- <Thumbnail alt="" image={IMAGES.portrait1} imgProps={IMAGE_SIZES.portrait1} />
225
- </td>
226
- </tr>
227
- </table>
228
- <h2>Constrained parent size</h2>
229
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
230
- <div className="parent" style={{ width: 220 }}>
231
- <Thumbnail alt="" image={IMAGES.landscape1} />
232
- </div>
233
- <div className="parent" style={{ width: 220 }}>
234
- <Thumbnail alt="" image={IMAGES.portrait1} />
235
- </div>
236
- </FlexBox>
237
- <h2>With size</h2>
238
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
239
- <Thumbnail alt="" image={IMAGES.landscape1} size="xxl" />
240
- <Thumbnail alt="" image={IMAGES.portrait1} size="xxl" />
241
- </FlexBox>
242
- <h2>With size & smaller image</h2>
243
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
244
- <Thumbnail alt="" image={IMAGES.landscape1s200} size="xxl" />
245
- <Thumbnail alt="" image={IMAGES.portrait1s200} size="xxl" />
246
- </FlexBox>
247
- <h2>With size & smaller image & fill height</h2>
248
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
249
- <Thumbnail alt="" image={IMAGES.landscape1s200} size="xxl" fillHeight />
250
- <Thumbnail alt="" image={IMAGES.portrait1s200} size="xxl" fillHeight />
251
- </FlexBox>
252
- <h2>Constrained parent size & smaller image & fill height</h2>
253
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
254
- <div className="parent" style={{ width: 220 }}>
255
- <Thumbnail alt="" image={IMAGES.landscape1s200} fillHeight />
256
- </div>
257
- <div className="parent" style={{ width: 220 }}>
258
- <Thumbnail alt="" image={IMAGES.portrait1s200} fillHeight />
259
- </div>
260
- </FlexBox>
261
- </>
262
- );
263
-
264
- export const Vertical = () => (
265
- <>
266
- <h1>Ratio: vertical</h1>
267
- <h2>Default</h2>
268
- <small>Unsupported use case (thumbnail size is undefined)</small>
269
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
270
- <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.landscape1} />
271
- <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.portrait1} />
272
- </FlexBox>
273
- <h2>Constraint parent size</h2>
274
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
275
- <div className="parent" style={{ width: 220 }}>
276
- <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.landscape1} />
277
- </div>
278
- <div className="parent" style={{ width: 220 }}>
279
- <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.portrait1} />
280
- </div>
281
- </FlexBox>
282
- <h2>Constraint parent size & smaller image</h2>
283
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
284
- <div className="parent" style={{ width: 220 }}>
285
- <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.landscape1s200} />
286
- </div>
287
- <div className="parent" style={{ width: 220 }}>
288
- <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.portrait1s200} />
289
- </div>
290
- </FlexBox>
291
- <h2>With size</h2>
292
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
293
- <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.landscape1} size="xxl" />
294
- <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.portrait1} size="xxl" />
295
- </FlexBox>
296
- <h2>With size & smaller image</h2>
297
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
298
- <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.landscape1s200} size="xxl" />
299
- <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.portrait1s200} size="xxl" />
300
- </FlexBox>
301
- <h2>With size & smaller image & fill height</h2>
302
- <small>Unsupported use case (use ratio free with fill height)</small>
303
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
304
- <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.landscape1s200} size="xxl" fillHeight />
305
- <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.portrait1s200} size="xxl" fillHeight />
306
- </FlexBox>
307
- <h2>Constrained parent size & smaller image & fill height</h2>
308
- <small>Unsupported use case (use ratio free with fill height)</small>
309
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
310
- <div className="parent" style={{ width: 220 }}>
311
- <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.landscape1s200} fillHeight />
312
- </div>
313
- <div className="parent" style={{ width: 220 }}>
314
- <Thumbnail alt="" aspectRatio="vertical" image={IMAGES.portrait1s200} fillHeight />
315
- </div>
316
- </FlexBox>
317
- </>
318
- );
319
-
320
- export const Wide = () => (
321
- <>
322
- <h1>Ratio: wide</h1>
323
- <h2>Default</h2>
324
- <small>Unsupported use case (thumbnail size is undefined)</small>
325
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
326
- <Thumbnail alt="" aspectRatio="wide" image={IMAGES.landscape1} />
327
- <Thumbnail alt="" aspectRatio="wide" image={IMAGES.portrait1} />
328
- </FlexBox>
329
- <h2>Constrained parent size</h2>
330
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
331
- <div className="parent" style={{ width: 220 }}>
332
- <Thumbnail alt="" aspectRatio="wide" image={IMAGES.landscape1} />
333
- </div>
334
- <div className="parent" style={{ width: 220 }}>
335
- <Thumbnail alt="" aspectRatio="wide" image={IMAGES.portrait1} />
336
- </div>
337
- </FlexBox>
338
- <h2>Constrained parent size & smaller image</h2>
339
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
340
- <div className="parent" style={{ width: 220 }}>
341
- <Thumbnail alt="" aspectRatio="wide" image={IMAGES.landscape1s200} />
342
- </div>
343
- <div className="parent" style={{ width: 220 }}>
344
- <Thumbnail alt="" aspectRatio="wide" image={IMAGES.portrait1s200} />
345
- </div>
346
- </FlexBox>
347
- <h2>With size</h2>
348
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
349
- <Thumbnail alt="" aspectRatio="wide" image={IMAGES.landscape1} size="xxl" />
350
- <Thumbnail alt="" aspectRatio="wide" image={IMAGES.portrait1} size="xxl" />
351
- </FlexBox>
352
- <h2>With size & smaller image</h2>
353
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
354
- <Thumbnail alt="" aspectRatio="wide" image={IMAGES.landscape1s200} size="xxl" />
355
- <Thumbnail alt="" aspectRatio="wide" image={IMAGES.portrait1s200} size="xxl" />
356
- </FlexBox>
357
- <h2>With size & smaller image & fill height</h2>
358
- <small>Unsupported use case (use ratio free with fill height)</small>
359
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
360
- <Thumbnail alt="" aspectRatio="wide" image={IMAGES.landscape1s200} size="xxl" fillHeight />
361
- <Thumbnail alt="" aspectRatio="wide" image={IMAGES.portrait1s200} size="xxl" fillHeight />
362
- </FlexBox>
363
- <h2>Constrained parent size & smaller image & fill height</h2>
364
- <small>Unsupported use case (use ratio free with fill height)</small>
365
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
366
- <div className="parent" style={{ width: 220 }}>
367
- <Thumbnail alt="" aspectRatio="wide" image={IMAGES.landscape1s200} fillHeight />
368
- </div>
369
- <div className="parent" style={{ width: 220 }}>
370
- <Thumbnail alt="" aspectRatio="wide" image={IMAGES.portrait1s200} fillHeight />
371
- </div>
372
- </FlexBox>
373
- </>
374
- );
375
-
376
- export const Square = () => (
377
- <>
378
- <h1>Ratio: square</h1>
379
- <h2>Default</h2>
380
- <small>Unsupported use case (thumbnail size is undefined)</small>
381
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
382
- <Thumbnail alt="" aspectRatio="square" image={IMAGES.landscape1} />
383
- <Thumbnail alt="" aspectRatio="square" image={IMAGES.portrait1} />
384
- </FlexBox>
385
- <h2>Constrained parent size</h2>
386
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
387
- <div className="parent" style={{ width: 220 }}>
388
- <Thumbnail alt="" aspectRatio="square" image={IMAGES.landscape1} />
389
- </div>
390
- <div className="parent" style={{ width: 220 }}>
391
- <Thumbnail alt="" aspectRatio="square" image={IMAGES.portrait1} />
392
- </div>
393
- </FlexBox>
394
- <h2>Constrained parent size & smaller image</h2>
395
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
396
- <div className="parent" style={{ width: 220 }}>
397
- <Thumbnail alt="" aspectRatio="square" image={IMAGES.landscape1s200} />
398
- </div>
399
- <div className="parent" style={{ width: 220 }}>
400
- <Thumbnail alt="" aspectRatio="square" image={IMAGES.portrait1s200} />
401
- </div>
402
- </FlexBox>
403
- <h2>With size</h2>
404
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
405
- <Thumbnail alt="" aspectRatio="square" image={IMAGES.landscape1} size="xxl" />
406
- <Thumbnail alt="" aspectRatio="square" image={IMAGES.portrait1} size="xxl" />
407
- </FlexBox>
408
- <h2>With size & smaller image</h2>
409
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
410
- <Thumbnail alt="" aspectRatio="square" image={IMAGES.landscape1s200} size="xxl" />
411
- <Thumbnail alt="" aspectRatio="square" image={IMAGES.portrait1s200} size="xxl" />
412
- </FlexBox>
413
- <h2>With size & smaller image & fill height</h2>
414
- <small>Unsupported use case (use ratio free with fill height)</small>
415
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
416
- <Thumbnail alt="" aspectRatio="square" image={IMAGES.landscape1s200} size="xxl" fillHeight />
417
- <Thumbnail alt="" aspectRatio="square" image={IMAGES.portrait1s200} size="xxl" fillHeight />
418
- </FlexBox>
419
- <h2>Constrained parent size & smaller image & fill height</h2>
420
- <small>Unsupported use case (use ratio free with fill height)</small>
421
- <FlexBox orientation="horizontal" vAlign="center" gap="huge">
422
- <div className="parent" style={{ width: 220 }}>
423
- <Thumbnail alt="" aspectRatio="square" image={IMAGES.landscape1s200} fillHeight />
424
- </div>
425
- <div className="parent" style={{ width: 220 }}>
426
- <Thumbnail alt="" aspectRatio="square" image={IMAGES.portrait1s200} fillHeight />
427
- </div>
428
- </FlexBox>
429
- </>
430
- );
431
-
432
- export const IsLoading = ({ theme }: any) => (
433
- <FlexBox
434
- orientation="horizontal"
435
- vAlign="center"
436
- marginAuto={['left', 'right']}
437
- style={{ border: '1px solid red', width: 900, height: 700, resize: 'both', overflow: 'auto' }}
438
- >
439
- <Thumbnail
440
- theme={theme}
441
- alt="Image alt text"
442
- image={IMAGES.landscape2}
443
- isLoading={boolean('Force loading', true)}
444
- fillHeight={boolean('Fill Height', false)}
445
- size={sizeKnob('Size', undefined)}
446
- />
447
- </FlexBox>
448
- );
449
-
450
- export const ErrorFallbackVariants = ({ theme }: any) => {
451
- const isLoading = boolean('Force loading', false);
452
- const variant = select('Variant', ThumbnailVariant, undefined);
453
- const base = { alt: 'foo', image: 'foo', isLoading, variant, theme } as const;
454
- const imageFallback = <img src="/logo.svg" alt="logo" />;
455
- const imgProps = { width: 50, height: 50 };
456
-
457
- return (
458
- <>
459
- <h2>Default</h2>
460
- <FlexBox orientation="horizontal" gap="big">
461
- <Thumbnail {...base} />
462
- <Thumbnail {...base} fallback={mdiAbTesting} />
463
- <Thumbnail {...base} fallback={imageFallback} />
464
- </FlexBox>
465
- <h2>
466
- With original image size <small>(50x50)</small>
467
- </h2>
468
- <FlexBox orientation="horizontal" gap="big">
469
- <Thumbnail {...base} imgProps={imgProps} />
470
- <Thumbnail {...base} fallback={mdiAbTesting} imgProps={imgProps} />
471
- <Thumbnail {...base} fallback={imageFallback} imgProps={imgProps} />
472
- </FlexBox>
473
- <h2>With size</h2>
474
- <FlexBox orientation="horizontal" gap="big">
475
- <Thumbnail {...base} size="xl" />
476
- <Thumbnail {...base} size="xl" fallback={mdiAbTesting} />
477
- <Thumbnail {...base} size="xl" fallback={imageFallback} />
478
- </FlexBox>
479
- <h2>With size & ratio</h2>
480
- <FlexBox orientation="horizontal" gap="big">
481
- <Thumbnail {...base} size="xl" aspectRatio="wide" />
482
- <Thumbnail {...base} size="xl" aspectRatio="wide" fallback={mdiAbTesting} />
483
- <Thumbnail {...base} size="xl" aspectRatio="wide" fallback={imageFallback} />
484
- </FlexBox>
485
- <h2>
486
- With original size <small>(50x50)</small> & ratio
487
- </h2>
488
- <small>Unsupported use case (thumbnail size is undefined)</small>
489
- <FlexBox orientation="horizontal" gap="big">
490
- <Thumbnail {...base} imgProps={imgProps} aspectRatio="wide" />
491
- <Thumbnail {...base} imgProps={imgProps} aspectRatio="wide" fallback={mdiAbTesting} />
492
- <Thumbnail {...base} imgProps={imgProps} aspectRatio="wide" fallback={imageFallback} />
493
- </FlexBox>
494
- <h2>
495
- With original size <small>(50x50)</small> & ratio & constrained parent size
496
- </h2>
497
- <FlexBox orientation="horizontal" gap="big">
498
- <div className="parent" style={{ width: 220 }}>
499
- <Thumbnail {...base} imgProps={imgProps} aspectRatio="wide" />
500
- </div>
501
- <div className="parent" style={{ width: 220 }}>
502
- <Thumbnail {...base} imgProps={imgProps} aspectRatio="wide" fallback={mdiAbTesting} />
503
- </div>
504
- <div className="parent" style={{ width: 220 }}>
505
- <Thumbnail {...base} imgProps={imgProps} aspectRatio="wide" fallback={imageFallback} />
506
- </div>
507
- </FlexBox>
508
- </>
509
- );
510
- };
@@ -1,46 +0,0 @@
1
- import React from 'react';
2
-
3
- import { mount, shallow } from 'enzyme';
4
- import 'jest-enzyme';
5
- import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
6
-
7
- import { Thumbnail, ThumbnailProps } from './Thumbnail';
8
- import {
9
- Clickable,
10
- ClickableCustomLink,
11
- ClickableLink,
12
- Default,
13
- WithBadge,
14
- WithCustomImageClassName,
15
- } from './Thumbnail.stories';
16
-
17
- const CLASSNAME = Thumbnail.className as string;
18
-
19
- /**
20
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
21
- */
22
- const setup = (props: Partial<ThumbnailProps> = {}, shallowRendering = true) => {
23
- const renderer: any = shallowRendering ? shallow : mount;
24
- const wrapper: any = renderer(<Thumbnail {...(props as any)} />);
25
- return { props, wrapper };
26
- };
27
-
28
- describe(`<${Thumbnail.displayName}>`, () => {
29
- // 1. Test render via snapshot.
30
- describe('Snapshots and structure', () => {
31
- itShouldRenderStories(
32
- {
33
- Default,
34
- Clickable,
35
- ClickableLink,
36
- ClickableCustomLink,
37
- WithBadge,
38
- WithCustomImageClassName,
39
- },
40
- Thumbnail,
41
- );
42
- });
43
-
44
- // Common tests suite.
45
- commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
46
- });