@lumx/react 3.1.5 → 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 (143) hide show
  1. package/_internal/types.d.ts +16 -5
  2. package/index.d.ts +45 -4
  3. package/index.js +609 -411
  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 +131 -293
  19. package/src/components/dialog/Dialog.test.tsx +0 -32
  20. package/src/components/dropdown/Dropdown.stories.tsx +1 -186
  21. package/src/components/flag/Flag.stories.tsx +33 -18
  22. package/src/components/flag/Flag.test.tsx +1 -8
  23. package/src/components/flex-box/FlexBox.stories.tsx +151 -238
  24. package/src/components/flex-box/FlexBox.test.tsx +9 -49
  25. package/src/components/generic-block/GenericBlock.stories.jsx +1 -1
  26. package/src/components/grid-column/GridColumn.stories.tsx +46 -0
  27. package/src/components/heading/Heading.stories.tsx +57 -95
  28. package/src/components/icon/Icon.stories.tsx +67 -70
  29. package/src/components/image-block/ImageBlock.stories.tsx +103 -47
  30. package/src/components/image-block/ImageBlock.test.tsx +12 -17
  31. package/src/components/inline-list/InlineList.stories.tsx +45 -29
  32. package/src/components/input-helper/InputHelper.stories.tsx +31 -25
  33. package/src/components/input-label/InputLabel.stories.tsx +33 -10
  34. package/src/components/lightbox/Lightbox.stories.tsx +39 -77
  35. package/src/components/lightbox/Lightbox.test.tsx +12 -17
  36. package/src/components/link/Link.stories.tsx +98 -128
  37. package/src/components/link-preview/LinkPreview.stories.tsx +48 -75
  38. package/src/components/list/List.stories.tsx +59 -84
  39. package/src/components/list/List.test.tsx +8 -17
  40. package/src/components/list/ListDivider.stories.tsx +9 -4
  41. package/src/components/list/ListDivider.test.tsx +12 -17
  42. package/src/components/list/ListItem.stories.tsx +97 -59
  43. package/src/components/list/ListItem.test.tsx +12 -17
  44. package/src/components/list/ListSubheader.stories.tsx +8 -5
  45. package/src/components/list/ListSubheader.test.tsx +12 -18
  46. package/src/components/message/Message.stories.tsx +51 -22
  47. package/src/components/mosaic/Mosaic.stories.tsx +78 -74
  48. package/src/components/mosaic/Mosaic.test.tsx +0 -31
  49. package/src/components/navigation/Navigation.stories.tsx +67 -0
  50. package/src/components/navigation/Navigation.test.tsx +58 -0
  51. package/src/components/navigation/Navigation.tsx +62 -0
  52. package/src/components/navigation/NavigationItem.test.tsx +37 -0
  53. package/src/components/navigation/NavigationItem.tsx +89 -0
  54. package/src/components/navigation/NavigationSection.test.tsx +126 -0
  55. package/src/components/navigation/NavigationSection.tsx +109 -0
  56. package/src/components/navigation/context.tsx +6 -0
  57. package/src/components/navigation/index.ts +1 -0
  58. package/src/components/notification/Notifications.stories.tsx +52 -47
  59. package/src/components/popover/Popover.stories.tsx +68 -201
  60. package/src/components/popover-dialog/PopoverDialog.stories.tsx +26 -65
  61. package/src/components/post-block/PostBlock.test.tsx +12 -17
  62. package/src/components/progress/ProgressCircular.stories.tsx +24 -12
  63. package/src/components/progress/ProgressLinear.stories.tsx +6 -2
  64. package/src/components/radio-button/RadioButton.stories.tsx +35 -24
  65. package/src/components/select/Select.stories.tsx +19 -23
  66. package/src/components/skeleton/SkeletonCircle.stories.tsx +37 -21
  67. package/src/components/skeleton/SkeletonCircle.test.tsx +12 -17
  68. package/src/components/skeleton/SkeletonRectangle.stories.tsx +74 -99
  69. package/src/components/skeleton/SkeletonRectangle.test.tsx +12 -17
  70. package/src/components/skeleton/SkeletonTypography.test.tsx +12 -17
  71. package/src/components/slider/Slider.stories.tsx +41 -25
  72. package/src/components/slider/Slider.test.tsx +12 -18
  73. package/src/components/slideshow/Slideshow.stories.tsx +31 -61
  74. package/src/components/slideshow/Slideshow.test.tsx +15 -23
  75. package/src/components/slideshow/SlideshowControls.stories.tsx +4 -6
  76. package/src/components/switch/Switch.stories.tsx +35 -32
  77. package/src/components/table/Table.test.tsx +12 -17
  78. package/src/components/tabs/Tabs.stories.tsx +4 -3
  79. package/src/components/text/Text.stories.tsx +130 -0
  80. package/src/components/text-field/TextField.stories.tsx +114 -148
  81. package/src/components/thumbnail/Thumbnail.stories.tsx +106 -255
  82. package/src/components/thumbnail/Thumbnail.test.tsx +12 -35
  83. package/src/components/tooltip/Tooltip.stories.tsx +51 -136
  84. package/src/components/user-block/UserBlock.stories.tsx +67 -56
  85. package/src/components/user-block/UserBlock.test.tsx +1 -5
  86. package/src/index.ts +1 -0
  87. package/src/stories/controls/color.ts +6 -0
  88. package/src/stories/controls/element.ts +6 -0
  89. package/src/stories/controls/focusPoint.ts +1 -0
  90. package/src/stories/controls/icons.ts +6 -0
  91. package/src/stories/{knobs → controls}/image.ts +6 -16
  92. package/src/stories/controls/selectArgType.ts +4 -0
  93. package/src/stories/controls/theme.ts +3 -0
  94. package/src/stories/controls/typography.ts +5 -0
  95. package/src/stories/controls/withUndefined.ts +1 -0
  96. package/src/stories/decorators/withChromaticForceScreenSize.tsx +8 -0
  97. package/src/stories/decorators/withCombinations.tsx +99 -0
  98. package/src/stories/decorators/withNestedProps.tsx +23 -0
  99. package/src/stories/{withResizableBox.tsx → decorators/withResizableBox.tsx} +6 -10
  100. package/src/stories/decorators/withValueOnChange.tsx +18 -0
  101. package/src/stories/decorators/withWrapper.tsx +19 -0
  102. package/src/stories/utils/CustomLink.tsx +8 -2
  103. package/src/stories/{knobs → utils}/lorem.ts +9 -9
  104. package/src/testing/utils/commonTestsSuiteRTL.ts +2 -3
  105. package/src/testing/utils/index.ts +0 -2
  106. package/src/untypped-modules.d.ts +0 -2
  107. package/src/utils/MaterialThemeSwitcher/MaterialThemeSwitcher.tsx +1 -1
  108. package/src/utils/ThemeContext.ts +4 -0
  109. package/src/utils/forwardRefPolymorphic.ts +9 -0
  110. package/src/utils/type.ts +28 -4
  111. package/src/components/alert-dialog/__snapshots__/AlertDialog.test.tsx.snap +0 -558
  112. package/src/components/avatar/__snapshots__/Avatar.test.tsx.snap +0 -681
  113. package/src/components/comment-block/__snapshots__/CommentBlock.test.tsx.snap +0 -92
  114. package/src/components/dialog/__snapshots__/Dialog.test.tsx.snap +0 -1133
  115. package/src/components/expansion-panel/ExpansionPanel.stories.tsx +0 -65
  116. package/src/components/flag/__snapshots__/Flag.test.tsx.snap +0 -133
  117. package/src/components/flex-box/__snapshots__/FlexBox.test.tsx.snap +0 -492
  118. package/src/components/grid-column/GridColumn.stories.jsx +0 -56
  119. package/src/components/image-block/__snapshots__/ImageBlock.test.tsx.snap +0 -64
  120. package/src/components/lightbox/__snapshots__/Lightbox.test.tsx.snap +0 -194
  121. package/src/components/list/__snapshots__/List.test.tsx.snap +0 -360
  122. package/src/components/list/__snapshots__/ListDivider.test.tsx.snap +0 -7
  123. package/src/components/list/__snapshots__/ListItem.test.tsx.snap +0 -160
  124. package/src/components/list/__snapshots__/ListSubheader.test.tsx.snap +0 -9
  125. package/src/components/mosaic/__snapshots__/Mosaic.test.tsx.snap +0 -357
  126. package/src/components/post-block/__snapshots__/PostBlock.test.tsx.snap +0 -139
  127. package/src/components/skeleton/__snapshots__/SkeletonCircle.test.tsx.snap +0 -54
  128. package/src/components/skeleton/__snapshots__/SkeletonRectangle.test.tsx.snap +0 -177
  129. package/src/components/skeleton/__snapshots__/SkeletonTypography.test.tsx.snap +0 -174
  130. package/src/components/slider/__snapshots__/Slider.test.tsx.snap +0 -122
  131. package/src/components/slideshow/__snapshots__/Slideshow.test.tsx.snap +0 -157
  132. package/src/components/table/__snapshots__/Table.test.tsx.snap +0 -263
  133. package/src/components/text/Text.stories.jsx +0 -75
  134. package/src/components/thumbnail/__snapshots__/Thumbnail.test.tsx.snap +0 -130
  135. package/src/components/user-block/__snapshots__/UserBlock.test.tsx.snap +0 -362
  136. package/src/stories/chromaticForceScreenSize.tsx +0 -7
  137. package/src/stories/knobs/buttonKnob.ts +0 -9
  138. package/src/stories/knobs/emphasisKnob.ts +0 -8
  139. package/src/stories/knobs/enumKnob.ts +0 -14
  140. package/src/stories/knobs/focusKnob.ts +0 -3
  141. package/src/stories/knobs/sizeKnob.ts +0 -5
  142. package/src/stories/knobs/thumbnailsKnob.ts +0 -9
  143. package/src/testing/utils/itShouldRenderStories.tsx +0 -103
@@ -1,160 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`<ListItem> Snapshots and structure should render story 'Button' 1`] = `
4
- <li
5
- className="lumx-list-item lumx-list-item--size-regular"
6
- >
7
- <a
8
- className="lumx-list-item__link"
9
- onClick={[Function]}
10
- onKeyDown={[Function]}
11
- role="button"
12
- tabIndex={0}
13
- >
14
- <div
15
- className="lumx-list-item__content"
16
- >
17
- Text
18
- </div>
19
- </a>
20
- </li>
21
- `;
22
-
23
- exports[`<ListItem> Snapshots and structure should render story 'ButtonDisabled' 1`] = `
24
- <li
25
- className="lumx-list-item lumx-list-item--size-regular"
26
- >
27
- <a
28
- aria-disabled={true}
29
- className="lumx-list-item__link lumx-list-item__link--is-disabled"
30
- onKeyDown={[Function]}
31
- role="button"
32
- >
33
- <div
34
- className="lumx-list-item__content"
35
- >
36
- Text
37
- </div>
38
- </a>
39
- </li>
40
- `;
41
-
42
- exports[`<ListItem> Snapshots and structure should render story 'Highlighted' 1`] = `
43
- <li
44
- className="lumx-list-item lumx-list-item--size-regular"
45
- >
46
- <a
47
- className="lumx-list-item__link lumx-list-item__link--is-highlighted"
48
- href="#"
49
- role="link"
50
- >
51
- <div
52
- className="lumx-list-item__content"
53
- >
54
- Text
55
- </div>
56
- </a>
57
- </li>
58
- `;
59
-
60
- exports[`<ListItem> Snapshots and structure should render story 'Link' 1`] = `
61
- <li
62
- className="lumx-list-item lumx-list-item--size-regular"
63
- >
64
- <a
65
- className="lumx-list-item__link"
66
- href="#"
67
- role="link"
68
- >
69
- <div
70
- className="lumx-list-item__content"
71
- >
72
- Text
73
- </div>
74
- </a>
75
- </li>
76
- `;
77
-
78
- exports[`<ListItem> Snapshots and structure should render story 'LinkDisabled' 1`] = `
79
- <li
80
- className="lumx-list-item lumx-list-item--size-regular"
81
- >
82
- <a
83
- aria-disabled={true}
84
- className="lumx-list-item__link lumx-list-item__link--is-disabled"
85
- role="link"
86
- >
87
- <div
88
- className="lumx-list-item__content"
89
- >
90
- Text
91
- </div>
92
- </a>
93
- </li>
94
- `;
95
-
96
- exports[`<ListItem> Snapshots and structure should render story 'NonClickable' 1`] = `
97
- <li
98
- className="lumx-list-item lumx-list-item--size-regular"
99
- >
100
- <div
101
- className="lumx-list-item__wrapper"
102
- >
103
- <div
104
- className="lumx-list-item__content"
105
- >
106
- Text
107
- </div>
108
- </div>
109
- </li>
110
- `;
111
-
112
- exports[`<ListItem> Snapshots and structure should render story 'Selected' 1`] = `
113
- <li
114
- className="lumx-list-item lumx-list-item--size-regular"
115
- >
116
- <a
117
- className="lumx-list-item__link lumx-list-item__link--is-selected"
118
- href="#"
119
- role="link"
120
- >
121
- <div
122
- className="lumx-list-item__content"
123
- >
124
- Text
125
- </div>
126
- </a>
127
- </li>
128
- `;
129
-
130
- exports[`<ListItem> Snapshots and structure should render story 'Sizes' 1`] = `
131
- <li
132
- className="lumx-list-item lumx-list-item--size-tiny"
133
- >
134
- <div
135
- className="lumx-list-item__wrapper"
136
- >
137
- <div
138
- className="lumx-list-item__content"
139
- >
140
- Text
141
- </div>
142
- </div>
143
- </li>
144
- `;
145
-
146
- exports[`<ListItem> Snapshots and structure should render story 'WithCustomLink' 1`] = `
147
- <li
148
- className="lumx-list-item lumx-list-item--size-regular"
149
- >
150
- <div
151
- className="lumx-list-item__wrapper"
152
- >
153
- <div
154
- className="lumx-list-item__content"
155
- >
156
- My custom link
157
- </div>
158
- </div>
159
- </li>
160
- `;
@@ -1,9 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`<ListSubheader> Snapshots and structure should render story 'Default' 1`] = `
4
- <li
5
- className="lumx-list-subheader"
6
- >
7
- Text
8
- </li>
9
- `;
@@ -1,357 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`<Mosaic> Snapshots and structure should render story FiveThumbnails 1`] = `
4
- <div
5
- className="lumx-mosaic lumx-mosaic--theme-light lumx-mosaic--has-4-thumbnails"
6
- >
7
- <div
8
- className="lumx-mosaic__wrapper"
9
- >
10
- <div
11
- className="lumx-mosaic__thumbnail"
12
- key="0"
13
- >
14
- <Thumbnail
15
- align="left"
16
- alt="Image 1"
17
- aspectRatio="free"
18
- fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
19
- fillHeight={true}
20
- image="/demo-assets/landscape1.jpg"
21
- loading="lazy"
22
- theme="light"
23
- />
24
- </div>
25
- <div
26
- className="lumx-mosaic__thumbnail"
27
- key="1"
28
- >
29
- <Thumbnail
30
- align="left"
31
- alt="Image 2"
32
- aspectRatio="free"
33
- fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
34
- fillHeight={true}
35
- image="/demo-assets/landscape1-s200.jpg"
36
- loading="lazy"
37
- theme="light"
38
- />
39
- </div>
40
- <div
41
- className="lumx-mosaic__thumbnail"
42
- key="2"
43
- >
44
- <Thumbnail
45
- align="left"
46
- alt="Image 3"
47
- aspectRatio="free"
48
- fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
49
- fillHeight={true}
50
- image="/demo-assets/landscape2.jpg"
51
- loading="lazy"
52
- theme="light"
53
- />
54
- </div>
55
- <div
56
- className="lumx-mosaic__thumbnail"
57
- key="3"
58
- >
59
- <Thumbnail
60
- align="left"
61
- alt="Image 4"
62
- aspectRatio="free"
63
- fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
64
- fillHeight={true}
65
- image="/demo-assets/landscape3.jpg"
66
- loading="lazy"
67
- theme="light"
68
- />
69
- <div
70
- className="lumx-mosaic__overlay"
71
- >
72
- <span>
73
- +
74
- 1
75
- </span>
76
- </div>
77
- </div>
78
- </div>
79
- </div>
80
- `;
81
-
82
- exports[`<Mosaic> Snapshots and structure should render story FourThumbnails 1`] = `
83
- <div
84
- className="lumx-mosaic lumx-mosaic--theme-light lumx-mosaic--has-4-thumbnails"
85
- >
86
- <div
87
- className="lumx-mosaic__wrapper"
88
- >
89
- <div
90
- className="lumx-mosaic__thumbnail"
91
- key="0"
92
- >
93
- <Thumbnail
94
- align="left"
95
- alt="Image 1"
96
- aspectRatio="free"
97
- fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
98
- fillHeight={true}
99
- image="/demo-assets/landscape1.jpg"
100
- loading="lazy"
101
- theme="light"
102
- />
103
- </div>
104
- <div
105
- className="lumx-mosaic__thumbnail"
106
- key="1"
107
- >
108
- <Thumbnail
109
- align="left"
110
- alt="Image 2"
111
- aspectRatio="free"
112
- fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
113
- fillHeight={true}
114
- image="/demo-assets/landscape1-s200.jpg"
115
- loading="lazy"
116
- theme="light"
117
- />
118
- </div>
119
- <div
120
- className="lumx-mosaic__thumbnail"
121
- key="2"
122
- >
123
- <Thumbnail
124
- align="left"
125
- alt="Image 3"
126
- aspectRatio="free"
127
- fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
128
- fillHeight={true}
129
- image="/demo-assets/landscape2.jpg"
130
- loading="lazy"
131
- theme="light"
132
- />
133
- </div>
134
- <div
135
- className="lumx-mosaic__thumbnail"
136
- key="3"
137
- >
138
- <Thumbnail
139
- align="left"
140
- alt="Image 4"
141
- aspectRatio="free"
142
- fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
143
- fillHeight={true}
144
- image="/demo-assets/landscape3.jpg"
145
- loading="lazy"
146
- theme="light"
147
- />
148
- </div>
149
- </div>
150
- </div>
151
- `;
152
-
153
- exports[`<Mosaic> Snapshots and structure should render story OneThumbnail 1`] = `
154
- <div
155
- className="lumx-mosaic lumx-mosaic--theme-light lumx-mosaic--has-1-thumbnail"
156
- >
157
- <div
158
- className="lumx-mosaic__wrapper"
159
- >
160
- <div
161
- className="lumx-mosaic__thumbnail"
162
- key="0"
163
- >
164
- <Thumbnail
165
- align="left"
166
- alt="Image 1"
167
- aspectRatio="free"
168
- fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
169
- fillHeight={true}
170
- image="/demo-assets/landscape1.jpg"
171
- loading="lazy"
172
- theme="light"
173
- />
174
- </div>
175
- </div>
176
- </div>
177
- `;
178
-
179
- exports[`<Mosaic> Snapshots and structure should render story SixThumbnails 1`] = `
180
- <div
181
- className="lumx-mosaic lumx-mosaic--theme-light lumx-mosaic--has-4-thumbnails"
182
- >
183
- <div
184
- className="lumx-mosaic__wrapper"
185
- >
186
- <div
187
- className="lumx-mosaic__thumbnail"
188
- key="0"
189
- >
190
- <Thumbnail
191
- align="left"
192
- alt="Image 1"
193
- aspectRatio="free"
194
- fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
195
- fillHeight={true}
196
- image="/demo-assets/landscape1.jpg"
197
- loading="lazy"
198
- onClick={[Function]}
199
- theme="light"
200
- />
201
- </div>
202
- <div
203
- className="lumx-mosaic__thumbnail"
204
- key="1"
205
- >
206
- <Thumbnail
207
- align="left"
208
- alt="Image 2"
209
- aspectRatio="free"
210
- fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
211
- fillHeight={true}
212
- image="/demo-assets/landscape1-s200.jpg"
213
- loading="lazy"
214
- onClick={[Function]}
215
- theme="light"
216
- />
217
- </div>
218
- <div
219
- className="lumx-mosaic__thumbnail"
220
- key="2"
221
- >
222
- <Thumbnail
223
- align="left"
224
- alt="Image 3"
225
- aspectRatio="free"
226
- fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
227
- fillHeight={true}
228
- image="/demo-assets/landscape2.jpg"
229
- loading="lazy"
230
- onClick={[Function]}
231
- theme="light"
232
- />
233
- </div>
234
- <div
235
- className="lumx-mosaic__thumbnail"
236
- key="3"
237
- >
238
- <Thumbnail
239
- align="left"
240
- alt="Image 4"
241
- aspectRatio="free"
242
- fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
243
- fillHeight={true}
244
- image="/demo-assets/landscape3.jpg"
245
- loading="lazy"
246
- onClick={[Function]}
247
- theme="light"
248
- />
249
- <div
250
- className="lumx-mosaic__overlay"
251
- >
252
- <span>
253
- +
254
- 2
255
- </span>
256
- </div>
257
- </div>
258
- </div>
259
- </div>
260
- `;
261
-
262
- exports[`<Mosaic> Snapshots and structure should render story ThreeThumbnails 1`] = `
263
- <div
264
- className="lumx-mosaic lumx-mosaic--theme-light lumx-mosaic--has-3-thumbnails"
265
- >
266
- <div
267
- className="lumx-mosaic__wrapper"
268
- >
269
- <div
270
- className="lumx-mosaic__thumbnail"
271
- key="0"
272
- >
273
- <Thumbnail
274
- align="left"
275
- alt="Image 1"
276
- aspectRatio="free"
277
- fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
278
- fillHeight={true}
279
- image="/demo-assets/landscape1.jpg"
280
- loading="lazy"
281
- theme="light"
282
- />
283
- </div>
284
- <div
285
- className="lumx-mosaic__thumbnail"
286
- key="1"
287
- >
288
- <Thumbnail
289
- align="left"
290
- alt="Image 2"
291
- aspectRatio="free"
292
- fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
293
- fillHeight={true}
294
- image="/demo-assets/landscape1-s200.jpg"
295
- loading="lazy"
296
- theme="light"
297
- />
298
- </div>
299
- <div
300
- className="lumx-mosaic__thumbnail"
301
- key="2"
302
- >
303
- <Thumbnail
304
- align="left"
305
- alt="Image 3"
306
- aspectRatio="free"
307
- fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
308
- fillHeight={true}
309
- image="/demo-assets/landscape2.jpg"
310
- loading="lazy"
311
- theme="light"
312
- />
313
- </div>
314
- </div>
315
- </div>
316
- `;
317
-
318
- exports[`<Mosaic> Snapshots and structure should render story TwoThumbnails 1`] = `
319
- <div
320
- className="lumx-mosaic lumx-mosaic--theme-light lumx-mosaic--has-2-thumbnails"
321
- >
322
- <div
323
- className="lumx-mosaic__wrapper"
324
- >
325
- <div
326
- className="lumx-mosaic__thumbnail"
327
- key="0"
328
- >
329
- <Thumbnail
330
- align="left"
331
- alt="Image 1"
332
- aspectRatio="free"
333
- fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
334
- fillHeight={true}
335
- image="/demo-assets/landscape1.jpg"
336
- loading="lazy"
337
- theme="light"
338
- />
339
- </div>
340
- <div
341
- className="lumx-mosaic__thumbnail"
342
- key="1"
343
- >
344
- <Thumbnail
345
- align="left"
346
- alt="Image 2"
347
- aspectRatio="free"
348
- fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
349
- fillHeight={true}
350
- image="/demo-assets/landscape1-s200.jpg"
351
- loading="lazy"
352
- theme="light"
353
- />
354
- </div>
355
- </div>
356
- </div>
357
- `;
@@ -1,139 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`<PostBlock> Snapshots and structure should render story 'Default' 1`] = `
4
- <div
5
- className="lumx-post-block lumx-post-block--orientation-horizontal lumx-post-block--theme-light"
6
- >
7
- <div
8
- className="lumx-post-block__thumbnail"
9
- >
10
- <Thumbnail
11
- alt="Landscape"
12
- fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
13
- image="/demo-assets/landscape1.jpg"
14
- loading="lazy"
15
- theme="light"
16
- variant="rounded"
17
- />
18
- </div>
19
- <div
20
- className="lumx-post-block__wrapper"
21
- >
22
- <div
23
- className="lumx-post-block__author"
24
- >
25
- <UserBlock
26
- avatarProps={
27
- {
28
- "alt": "Avatar",
29
- "image": "/demo-assets/avatar2.jpg",
30
- }
31
- }
32
- name="Matthias Manoukian"
33
- orientation="horizontal"
34
- size="s"
35
- theme="light"
36
- />
37
- </div>
38
- <button
39
- className="lumx-post-block__title"
40
- type="button"
41
- >
42
- Annual Bonus Payments
43
- </button>
44
- <span
45
- className="lumx-post-block__meta"
46
- >
47
- 1 day ago in community's name
48
- </span>
49
- <p
50
- className="lumx-post-block__text"
51
- dangerouslySetInnerHTML={
52
- {
53
- "__html": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus libero aliquet pharetra luctus. Fusce nisl turpis, posuere ac tellus at, euismod vulputate libero...",
54
- }
55
- }
56
- />
57
- <div
58
- className="lumx-post-block__attachments"
59
- >
60
- <UserBlock
61
- avatarProps={
62
- {
63
- "alt": "Avatar",
64
- "image": "/demo-assets/persona.png",
65
- }
66
- }
67
- fields={
68
- [
69
- "Head of Design",
70
- "Lyon",
71
- ]
72
- }
73
- name="Matthias Manoukian"
74
- orientation="vertical"
75
- size="l"
76
- theme="light"
77
- />
78
- </div>
79
- <div
80
- className="lumx-post-block__toolbar"
81
- >
82
- <div
83
- className="lumx-post-block__tags"
84
- >
85
- <ChipGroup
86
- align="left"
87
- >
88
- <Chip
89
- size="s"
90
- theme="light"
91
- >
92
- tag1
93
- </Chip>
94
- <Chip
95
- size="s"
96
- theme="light"
97
- >
98
- tag2
99
- </Chip>
100
- <Chip
101
- size="s"
102
- theme="light"
103
- >
104
- tag3
105
- </Chip>
106
- </ChipGroup>
107
- </div>
108
- <div
109
- className="lumx-post-block__actions"
110
- >
111
- <FlexBox
112
- orientation="horizontal"
113
- >
114
- <Button
115
- emphasis="low"
116
- leftIcon="M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9Z"
117
- size="s"
118
- theme="light"
119
- >
120
- <span>
121
- 16
122
- </span>
123
- </Button>
124
- <Button
125
- emphasis="low"
126
- 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"
127
- size="s"
128
- theme="light"
129
- >
130
- <span>
131
- 8
132
- </span>
133
- </Button>
134
- </FlexBox>
135
- </div>
136
- </div>
137
- </div>
138
- </div>
139
- `;