@lumx/react 3.1.4 → 3.2.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 (144) hide show
  1. package/_internal/types.d.ts +16 -5
  2. package/index.d.ts +51 -4
  3. package/index.js +621 -417
  4. package/index.js.map +1 -1
  5. package/package.json +3 -3
  6. package/src/components/alert-dialog/AlertDialog.stories.tsx +96 -165
  7. package/src/components/alert-dialog/AlertDialog.test.tsx +15 -23
  8. package/src/components/avatar/Avatar.stories.tsx +91 -62
  9. package/src/components/avatar/Avatar.test.tsx +9 -24
  10. package/src/components/badge/Badge.stories.tsx +63 -38
  11. package/src/components/button/Button.stories.tsx +147 -139
  12. package/src/components/button/IconButton.stories.tsx +45 -0
  13. package/src/components/checkbox/Checkbox.stories.tsx +37 -30
  14. package/src/components/chip/Chip.stories.tsx +77 -15
  15. package/src/components/comment-block/CommentBlock.stories.tsx +90 -25
  16. package/src/components/comment-block/CommentBlock.test.tsx +12 -17
  17. package/src/components/date-picker/DatePickerField.stories.tsx +52 -83
  18. package/src/components/dialog/Dialog.stories.tsx +132 -240
  19. package/src/components/dialog/Dialog.test.tsx +6 -30
  20. package/src/components/dialog/Dialog.tsx +17 -3
  21. package/src/components/dropdown/Dropdown.stories.tsx +1 -186
  22. package/src/components/flag/Flag.stories.tsx +33 -18
  23. package/src/components/flag/Flag.test.tsx +1 -8
  24. package/src/components/flex-box/FlexBox.stories.tsx +151 -238
  25. package/src/components/flex-box/FlexBox.test.tsx +9 -49
  26. package/src/components/generic-block/GenericBlock.stories.jsx +1 -1
  27. package/src/components/grid-column/GridColumn.stories.tsx +46 -0
  28. package/src/components/heading/Heading.stories.tsx +57 -95
  29. package/src/components/icon/Icon.stories.tsx +67 -70
  30. package/src/components/image-block/ImageBlock.stories.tsx +103 -47
  31. package/src/components/image-block/ImageBlock.test.tsx +12 -17
  32. package/src/components/inline-list/InlineList.stories.tsx +45 -29
  33. package/src/components/input-helper/InputHelper.stories.tsx +31 -25
  34. package/src/components/input-label/InputLabel.stories.tsx +33 -10
  35. package/src/components/lightbox/Lightbox.stories.tsx +39 -77
  36. package/src/components/lightbox/Lightbox.test.tsx +12 -17
  37. package/src/components/link/Link.stories.tsx +98 -128
  38. package/src/components/link-preview/LinkPreview.stories.tsx +48 -75
  39. package/src/components/list/List.stories.tsx +59 -84
  40. package/src/components/list/List.test.tsx +8 -17
  41. package/src/components/list/ListDivider.stories.tsx +9 -4
  42. package/src/components/list/ListDivider.test.tsx +12 -17
  43. package/src/components/list/ListItem.stories.tsx +97 -59
  44. package/src/components/list/ListItem.test.tsx +12 -17
  45. package/src/components/list/ListSubheader.stories.tsx +8 -5
  46. package/src/components/list/ListSubheader.test.tsx +12 -18
  47. package/src/components/message/Message.stories.tsx +51 -22
  48. package/src/components/mosaic/Mosaic.stories.tsx +78 -74
  49. package/src/components/mosaic/Mosaic.test.tsx +0 -31
  50. package/src/components/navigation/Navigation.stories.tsx +67 -0
  51. package/src/components/navigation/Navigation.test.tsx +58 -0
  52. package/src/components/navigation/Navigation.tsx +62 -0
  53. package/src/components/navigation/NavigationItem.test.tsx +37 -0
  54. package/src/components/navigation/NavigationItem.tsx +89 -0
  55. package/src/components/navigation/NavigationSection.test.tsx +126 -0
  56. package/src/components/navigation/NavigationSection.tsx +109 -0
  57. package/src/components/navigation/context.tsx +6 -0
  58. package/src/components/navigation/index.ts +1 -0
  59. package/src/components/notification/Notifications.stories.tsx +52 -47
  60. package/src/components/popover/Popover.stories.tsx +68 -201
  61. package/src/components/popover-dialog/PopoverDialog.stories.tsx +26 -65
  62. package/src/components/post-block/PostBlock.test.tsx +12 -17
  63. package/src/components/progress/ProgressCircular.stories.tsx +24 -12
  64. package/src/components/progress/ProgressLinear.stories.tsx +6 -2
  65. package/src/components/radio-button/RadioButton.stories.tsx +35 -24
  66. package/src/components/select/Select.stories.tsx +19 -23
  67. package/src/components/skeleton/SkeletonCircle.stories.tsx +37 -21
  68. package/src/components/skeleton/SkeletonCircle.test.tsx +12 -17
  69. package/src/components/skeleton/SkeletonRectangle.stories.tsx +74 -99
  70. package/src/components/skeleton/SkeletonRectangle.test.tsx +12 -17
  71. package/src/components/skeleton/SkeletonTypography.test.tsx +12 -17
  72. package/src/components/slider/Slider.stories.tsx +41 -25
  73. package/src/components/slider/Slider.test.tsx +12 -18
  74. package/src/components/slideshow/Slideshow.stories.tsx +31 -61
  75. package/src/components/slideshow/Slideshow.test.tsx +15 -23
  76. package/src/components/slideshow/SlideshowControls.stories.tsx +4 -6
  77. package/src/components/switch/Switch.stories.tsx +35 -32
  78. package/src/components/table/Table.test.tsx +12 -17
  79. package/src/components/tabs/Tabs.stories.tsx +4 -3
  80. package/src/components/text/Text.stories.tsx +130 -0
  81. package/src/components/text-field/TextField.stories.tsx +114 -148
  82. package/src/components/thumbnail/Thumbnail.stories.tsx +106 -255
  83. package/src/components/thumbnail/Thumbnail.test.tsx +12 -35
  84. package/src/components/tooltip/Tooltip.stories.tsx +51 -136
  85. package/src/components/user-block/UserBlock.stories.tsx +67 -56
  86. package/src/components/user-block/UserBlock.test.tsx +1 -5
  87. package/src/index.ts +1 -0
  88. package/src/stories/controls/color.ts +6 -0
  89. package/src/stories/controls/element.ts +6 -0
  90. package/src/stories/controls/focusPoint.ts +1 -0
  91. package/src/stories/controls/icons.ts +6 -0
  92. package/src/stories/{knobs → controls}/image.ts +6 -16
  93. package/src/stories/controls/selectArgType.ts +4 -0
  94. package/src/stories/controls/theme.ts +3 -0
  95. package/src/stories/controls/typography.ts +5 -0
  96. package/src/stories/controls/withUndefined.ts +1 -0
  97. package/src/stories/decorators/withChromaticForceScreenSize.tsx +8 -0
  98. package/src/stories/decorators/withCombinations.tsx +99 -0
  99. package/src/stories/decorators/withNestedProps.tsx +23 -0
  100. package/src/stories/{withResizableBox.tsx → decorators/withResizableBox.tsx} +6 -10
  101. package/src/stories/decorators/withValueOnChange.tsx +18 -0
  102. package/src/stories/decorators/withWrapper.tsx +19 -0
  103. package/src/stories/utils/CustomLink.tsx +8 -2
  104. package/src/stories/{knobs → utils}/lorem.ts +9 -9
  105. package/src/testing/utils/commonTestsSuiteRTL.ts +2 -3
  106. package/src/testing/utils/index.ts +0 -2
  107. package/src/untypped-modules.d.ts +0 -2
  108. package/src/utils/MaterialThemeSwitcher/MaterialThemeSwitcher.tsx +1 -1
  109. package/src/utils/ThemeContext.ts +4 -0
  110. package/src/utils/forwardRefPolymorphic.ts +9 -0
  111. package/src/utils/type.ts +28 -4
  112. package/src/components/alert-dialog/__snapshots__/AlertDialog.test.tsx.snap +0 -551
  113. package/src/components/avatar/__snapshots__/Avatar.test.tsx.snap +0 -681
  114. package/src/components/comment-block/__snapshots__/CommentBlock.test.tsx.snap +0 -92
  115. package/src/components/dialog/__snapshots__/Dialog.test.tsx.snap +0 -960
  116. package/src/components/expansion-panel/ExpansionPanel.stories.tsx +0 -65
  117. package/src/components/flag/__snapshots__/Flag.test.tsx.snap +0 -133
  118. package/src/components/flex-box/__snapshots__/FlexBox.test.tsx.snap +0 -492
  119. package/src/components/grid-column/GridColumn.stories.jsx +0 -56
  120. package/src/components/image-block/__snapshots__/ImageBlock.test.tsx.snap +0 -64
  121. package/src/components/lightbox/__snapshots__/Lightbox.test.tsx.snap +0 -194
  122. package/src/components/list/__snapshots__/List.test.tsx.snap +0 -360
  123. package/src/components/list/__snapshots__/ListDivider.test.tsx.snap +0 -7
  124. package/src/components/list/__snapshots__/ListItem.test.tsx.snap +0 -160
  125. package/src/components/list/__snapshots__/ListSubheader.test.tsx.snap +0 -9
  126. package/src/components/mosaic/__snapshots__/Mosaic.test.tsx.snap +0 -357
  127. package/src/components/post-block/__snapshots__/PostBlock.test.tsx.snap +0 -139
  128. package/src/components/skeleton/__snapshots__/SkeletonCircle.test.tsx.snap +0 -54
  129. package/src/components/skeleton/__snapshots__/SkeletonRectangle.test.tsx.snap +0 -177
  130. package/src/components/skeleton/__snapshots__/SkeletonTypography.test.tsx.snap +0 -174
  131. package/src/components/slider/__snapshots__/Slider.test.tsx.snap +0 -122
  132. package/src/components/slideshow/__snapshots__/Slideshow.test.tsx.snap +0 -157
  133. package/src/components/table/__snapshots__/Table.test.tsx.snap +0 -263
  134. package/src/components/text/Text.stories.jsx +0 -75
  135. package/src/components/thumbnail/__snapshots__/Thumbnail.test.tsx.snap +0 -130
  136. package/src/components/user-block/__snapshots__/UserBlock.test.tsx.snap +0 -362
  137. package/src/stories/chromaticForceScreenSize.tsx +0 -7
  138. package/src/stories/knobs/buttonKnob.ts +0 -9
  139. package/src/stories/knobs/emphasisKnob.ts +0 -8
  140. package/src/stories/knobs/enumKnob.ts +0 -14
  141. package/src/stories/knobs/focusKnob.ts +0 -3
  142. package/src/stories/knobs/sizeKnob.ts +0 -5
  143. package/src/stories/knobs/thumbnailsKnob.ts +0 -9
  144. package/src/testing/utils/itShouldRenderStories.tsx +0 -103
package/src/components/comment-block/__snapshots__/CommentBlock.test.tsx.snap DELETED
@@ -1,92 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`<CommentBlock> Snapshots and structure should render story 'WithHeaderActions' 1`] = `
4
- <div
5
- className="lumx-comment-block lumx-comment-block--theme-light"
6
- >
7
- <div
8
- className="lumx-comment-block__wrapper"
9
- >
10
- <div
11
- className="lumx-comment-block__avatar"
12
- >
13
- <Avatar
14
- alt="Avatar"
15
- image="/demo-assets/avatar1.jpg"
16
- onKeyPress={[Function]}
17
- size="m"
18
- tabIndex={-1}
19
- theme="light"
20
- />
21
- </div>
22
- <div
23
- className="lumx-comment-block__container"
24
- >
25
- <div
26
- className="lumx-comment-block__content"
27
- >
28
- <div
29
- className="lumx-comment-block__meta"
30
- >
31
- <span
32
- className="lumx-comment-block__name"
33
- onKeyPress={[Function]}
34
- role="button"
35
- tabIndex={-1}
36
- >
37
- Emmitt O. Lum
38
- </span>
39
- <span
40
- className="lumx-comment-block__header-actions"
41
- >
42
- <IconButton
43
- emphasis="low"
44
- icon="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z"
45
- label="Actions"
46
- size="s"
47
- theme="light"
48
- />
49
- </span>
50
- </div>
51
- <div
52
- className="lumx-comment-block__text"
53
- >
54
- All the rumors have finally died down and many skeptics have tightened their lips, the iPod does support video format now on its fifth generation.
55
- </div>
56
- <Tooltip
57
- label="Monday, March 30, 2021 at 4:06 PM"
58
- placement="top"
59
- >
60
- <span
61
- className="lumx-comment-block__date"
62
- >
63
- 5 days
64
- </span>
65
- </Tooltip>
66
- </div>
67
- <div
68
- className="lumx-comment-block__actions"
69
- >
70
- <Button
71
- emphasis="low"
72
- key="button0"
73
- leftIcon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
74
- size="s"
75
- theme="light"
76
- >
77
- 24 likes
78
- </Button>
79
- <Button
80
- emphasis="low"
81
- key="button1"
82
- leftIcon="M10,9V5L3,12L10,19V14.9C15,14.9 18.5,16.5 21,20C20,15 17,10 10,9Z"
83
- size="s"
84
- theme="light"
85
- >
86
- Reply
87
- </Button>
88
- </div>
89
- </div>
90
- </div>
91
- </div>
92
- `;