npm - @lumx/react - Versions diffs - 3.1.5 → 3.2.1-alpha.0 - Mend

@lumx/react 3.1.5 → 3.2.1-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 (147) hide show

package/_internal/types.d.ts +16 -5
package/index.d.ts +45 -4
package/index.js +632 -423
package/index.js.map +1 -1
package/package.json +3 -3
package/src/components/alert-dialog/AlertDialog.stories.tsx +96 -165
package/src/components/alert-dialog/AlertDialog.test.tsx +15 -23
package/src/components/avatar/Avatar.stories.tsx +91 -62
package/src/components/avatar/Avatar.test.tsx +9 -24
package/src/components/badge/Badge.stories.tsx +63 -38
package/src/components/button/Button.stories.tsx +147 -139
package/src/components/button/IconButton.stories.tsx +45 -0
package/src/components/checkbox/Checkbox.stories.tsx +37 -30
package/src/components/chip/Chip.stories.tsx +77 -15
package/src/components/comment-block/CommentBlock.stories.tsx +90 -25
package/src/components/comment-block/CommentBlock.test.tsx +12 -17
package/src/components/date-picker/DatePickerField.stories.tsx +52 -83
package/src/components/dialog/Dialog.stories.tsx +131 -293
package/src/components/dialog/Dialog.test.tsx +0 -32
package/src/components/dropdown/Dropdown.stories.tsx +1 -186
package/src/components/flag/Flag.stories.tsx +33 -18
package/src/components/flag/Flag.test.tsx +1 -8
package/src/components/flex-box/FlexBox.stories.tsx +151 -238
package/src/components/flex-box/FlexBox.test.tsx +9 -49
package/src/components/generic-block/GenericBlock.stories.jsx +1 -1
package/src/components/grid-column/GridColumn.stories.tsx +46 -0
package/src/components/heading/Heading.stories.tsx +57 -95
package/src/components/icon/Icon.stories.tsx +67 -70
package/src/components/image-block/ImageBlock.stories.tsx +103 -47
package/src/components/image-block/ImageBlock.test.tsx +12 -17
package/src/components/inline-list/InlineList.stories.tsx +45 -29
package/src/components/input-helper/InputHelper.stories.tsx +31 -25
package/src/components/input-label/InputLabel.stories.tsx +33 -10
package/src/components/lightbox/Lightbox.stories.tsx +39 -77
package/src/components/lightbox/Lightbox.test.tsx +12 -17
package/src/components/link/Link.stories.tsx +98 -128
package/src/components/link-preview/LinkPreview.stories.tsx +48 -75
package/src/components/list/List.stories.tsx +59 -84
package/src/components/list/List.test.tsx +8 -17
package/src/components/list/ListDivider.stories.tsx +9 -4
package/src/components/list/ListDivider.test.tsx +12 -17
package/src/components/list/ListItem.stories.tsx +97 -59
package/src/components/list/ListItem.test.tsx +12 -17
package/src/components/list/ListSubheader.stories.tsx +8 -5
package/src/components/list/ListSubheader.test.tsx +12 -18
package/src/components/message/Message.stories.tsx +51 -22
package/src/components/mosaic/Mosaic.stories.tsx +78 -74
package/src/components/mosaic/Mosaic.test.tsx +0 -31
package/src/components/navigation/Navigation.stories.tsx +67 -0
package/src/components/navigation/Navigation.test.tsx +58 -0
package/src/components/navigation/Navigation.tsx +62 -0
package/src/components/navigation/NavigationItem.test.tsx +37 -0
package/src/components/navigation/NavigationItem.tsx +89 -0
package/src/components/navigation/NavigationSection.test.tsx +126 -0
package/src/components/navigation/NavigationSection.tsx +109 -0
package/src/components/navigation/context.tsx +6 -0
package/src/components/navigation/index.ts +1 -0
package/src/components/notification/Notifications.stories.tsx +52 -47
package/src/components/popover/Popover.stories.tsx +68 -201
package/src/components/popover/Popover.tsx +7 -9
package/src/components/popover-dialog/PopoverDialog.stories.tsx +26 -65
package/src/components/post-block/PostBlock.test.tsx +12 -17
package/src/components/progress/ProgressCircular.stories.tsx +24 -12
package/src/components/progress/ProgressLinear.stories.tsx +6 -2
package/src/components/radio-button/RadioButton.stories.tsx +35 -24
package/src/components/select/Select.stories.tsx +19 -23
package/src/components/select/SelectMultiple.stories.tsx +105 -2
package/src/components/select/WithSelectContext.tsx +10 -4
package/src/components/skeleton/SkeletonCircle.stories.tsx +37 -21
package/src/components/skeleton/SkeletonCircle.test.tsx +12 -17
package/src/components/skeleton/SkeletonRectangle.stories.tsx +74 -99
package/src/components/skeleton/SkeletonRectangle.test.tsx +12 -17
package/src/components/skeleton/SkeletonTypography.test.tsx +12 -17
package/src/components/slider/Slider.stories.tsx +41 -25
package/src/components/slider/Slider.test.tsx +12 -18
package/src/components/slideshow/Slideshow.stories.tsx +31 -61
package/src/components/slideshow/Slideshow.test.tsx +15 -23
package/src/components/slideshow/SlideshowControls.stories.tsx +4 -6
package/src/components/switch/Switch.stories.tsx +35 -32
package/src/components/table/Table.test.tsx +12 -17
package/src/components/tabs/Tabs.stories.tsx +4 -3
package/src/components/text/Text.stories.tsx +130 -0
package/src/components/text-field/TextField.stories.tsx +114 -148
package/src/components/thumbnail/Thumbnail.stories.tsx +106 -255
package/src/components/thumbnail/Thumbnail.test.tsx +12 -35
package/src/components/tooltip/Tooltip.stories.tsx +51 -136
package/src/components/user-block/UserBlock.stories.tsx +67 -56
package/src/components/user-block/UserBlock.test.tsx +1 -5
package/src/hooks/useFocusTrap.ts +2 -2
package/src/index.ts +1 -0
package/src/stories/controls/color.ts +6 -0
package/src/stories/controls/element.ts +6 -0
package/src/stories/controls/focusPoint.ts +1 -0
package/src/stories/controls/icons.ts +6 -0
package/src/stories/{knobs → controls}/image.ts +6 -16
package/src/stories/controls/selectArgType.ts +4 -0
package/src/stories/controls/theme.ts +3 -0
package/src/stories/controls/typography.ts +5 -0
package/src/stories/controls/withUndefined.ts +1 -0
package/src/stories/decorators/withChromaticForceScreenSize.tsx +8 -0
package/src/stories/decorators/withCombinations.tsx +99 -0
package/src/stories/decorators/withNestedProps.tsx +23 -0
package/src/stories/{withResizableBox.tsx → decorators/withResizableBox.tsx} +6 -10
package/src/stories/decorators/withValueOnChange.tsx +18 -0
package/src/stories/decorators/withWrapper.tsx +19 -0
package/src/stories/utils/CustomLink.tsx +8 -2
package/src/stories/{knobs → utils}/lorem.ts +9 -9
package/src/testing/utils/commonTestsSuiteRTL.ts +2 -3
package/src/testing/utils/index.ts +0 -2
package/src/untypped-modules.d.ts +0 -2
package/src/utils/MaterialThemeSwitcher/MaterialThemeSwitcher.tsx +1 -1
package/src/utils/ThemeContext.ts +4 -0
package/src/utils/forwardRefPolymorphic.ts +9 -0
package/src/utils/type.ts +28 -4
package/src/components/alert-dialog/__snapshots__/AlertDialog.test.tsx.snap +0 -558
package/src/components/avatar/__snapshots__/Avatar.test.tsx.snap +0 -681
package/src/components/comment-block/__snapshots__/CommentBlock.test.tsx.snap +0 -92
package/src/components/dialog/__snapshots__/Dialog.test.tsx.snap +0 -1133
package/src/components/expansion-panel/ExpansionPanel.stories.tsx +0 -65
package/src/components/flag/__snapshots__/Flag.test.tsx.snap +0 -133
package/src/components/flex-box/__snapshots__/FlexBox.test.tsx.snap +0 -492
package/src/components/grid-column/GridColumn.stories.jsx +0 -56
package/src/components/image-block/__snapshots__/ImageBlock.test.tsx.snap +0 -64
package/src/components/lightbox/__snapshots__/Lightbox.test.tsx.snap +0 -194
package/src/components/list/__snapshots__/List.test.tsx.snap +0 -360
package/src/components/list/__snapshots__/ListDivider.test.tsx.snap +0 -7
package/src/components/list/__snapshots__/ListItem.test.tsx.snap +0 -160
package/src/components/list/__snapshots__/ListSubheader.test.tsx.snap +0 -9
package/src/components/mosaic/__snapshots__/Mosaic.test.tsx.snap +0 -357
package/src/components/post-block/__snapshots__/PostBlock.test.tsx.snap +0 -139
package/src/components/skeleton/__snapshots__/SkeletonCircle.test.tsx.snap +0 -54
package/src/components/skeleton/__snapshots__/SkeletonRectangle.test.tsx.snap +0 -177
package/src/components/skeleton/__snapshots__/SkeletonTypography.test.tsx.snap +0 -174
package/src/components/slider/__snapshots__/Slider.test.tsx.snap +0 -122
package/src/components/slideshow/__snapshots__/Slideshow.test.tsx.snap +0 -157
package/src/components/table/__snapshots__/Table.test.tsx.snap +0 -263
package/src/components/text/Text.stories.jsx +0 -75
package/src/components/thumbnail/__snapshots__/Thumbnail.test.tsx.snap +0 -130
package/src/components/user-block/__snapshots__/UserBlock.test.tsx.snap +0 -362
package/src/stories/chromaticForceScreenSize.tsx +0 -7
package/src/stories/knobs/buttonKnob.ts +0 -9
package/src/stories/knobs/emphasisKnob.ts +0 -8
package/src/stories/knobs/enumKnob.ts +0 -14
package/src/stories/knobs/focusKnob.ts +0 -3
package/src/stories/knobs/sizeKnob.ts +0 -5
package/src/stories/knobs/thumbnailsKnob.ts +0 -9
package/src/testing/utils/itShouldRenderStories.tsx +0 -103

package/src/components/list/__snapshots__/ListItem.test.tsx.snap DELETED Viewed

@@ -1,160 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`<ListItem> Snapshots and structure should render story 'Button' 1`] = `
-<li
-  className="lumx-list-item lumx-list-item--size-regular"
->
-  <a
-    className="lumx-list-item__link"
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    role="button"
-    tabIndex={0}
-  >
-    <div
-      className="lumx-list-item__content"
-    >
-      Text
-    </div>
-  </a>
-</li>
-`;
-exports[`<ListItem> Snapshots and structure should render story 'ButtonDisabled' 1`] = `
-<li
-  className="lumx-list-item lumx-list-item--size-regular"
->
-  <a
-    aria-disabled={true}
-    className="lumx-list-item__link lumx-list-item__link--is-disabled"
-    onKeyDown={[Function]}
-    role="button"
-  >
-    <div
-      className="lumx-list-item__content"
-    >
-      Text
-    </div>
-  </a>
-</li>
-`;
-exports[`<ListItem> Snapshots and structure should render story 'Highlighted' 1`] = `
-<li
-  className="lumx-list-item lumx-list-item--size-regular"
->
-  <a
-    className="lumx-list-item__link lumx-list-item__link--is-highlighted"
-    href="#"
-    role="link"
-  >
-    <div
-      className="lumx-list-item__content"
-    >
-      Text
-    </div>
-  </a>
-</li>
-`;
-exports[`<ListItem> Snapshots and structure should render story 'Link' 1`] = `
-<li
-  className="lumx-list-item lumx-list-item--size-regular"
->
-  <a
-    className="lumx-list-item__link"
-    href="#"
-    role="link"
-  >
-    <div
-      className="lumx-list-item__content"
-    >
-      Text
-    </div>
-  </a>
-</li>
-`;
-exports[`<ListItem> Snapshots and structure should render story 'LinkDisabled' 1`] = `
-<li
-  className="lumx-list-item lumx-list-item--size-regular"
->
-  <a
-    aria-disabled={true}
-    className="lumx-list-item__link lumx-list-item__link--is-disabled"
-    role="link"
-  >
-    <div
-      className="lumx-list-item__content"
-    >
-      Text
-    </div>
-  </a>
-</li>
-`;
-exports[`<ListItem> Snapshots and structure should render story 'NonClickable' 1`] = `
-<li
-  className="lumx-list-item lumx-list-item--size-regular"
->
-  <div
-    className="lumx-list-item__wrapper"
-  >
-    <div
-      className="lumx-list-item__content"
-    >
-      Text
-    </div>
-  </div>
-</li>
-`;
-exports[`<ListItem> Snapshots and structure should render story 'Selected' 1`] = `
-<li
-  className="lumx-list-item lumx-list-item--size-regular"
->
-  <a
-    className="lumx-list-item__link lumx-list-item__link--is-selected"
-    href="#"
-    role="link"
-  >
-    <div
-      className="lumx-list-item__content"
-    >
-      Text
-    </div>
-  </a>
-</li>
-`;
-exports[`<ListItem> Snapshots and structure should render story 'Sizes' 1`] = `
-<li
-  className="lumx-list-item lumx-list-item--size-tiny"
->
-  <div
-    className="lumx-list-item__wrapper"
-  >
-    <div
-      className="lumx-list-item__content"
-    >
-      Text
-    </div>
-  </div>
-</li>
-`;
-exports[`<ListItem> Snapshots and structure should render story 'WithCustomLink' 1`] = `
-<li
-  className="lumx-list-item lumx-list-item--size-regular"
->
-  <div
-    className="lumx-list-item__wrapper"
-  >
-    <div
-      className="lumx-list-item__content"
-    >
-      My custom link
-    </div>
-  </div>
-</li>
-`;

package/src/components/list/__snapshots__/ListSubheader.test.tsx.snap DELETED Viewed

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`<ListSubheader> Snapshots and structure should render story 'Default' 1`] = `
-<li
-  className="lumx-list-subheader"
->
-  Text
-</li>
-`;

package/src/components/mosaic/__snapshots__/Mosaic.test.tsx.snap DELETED Viewed

@@ -1,357 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`<Mosaic> Snapshots and structure should render story FiveThumbnails 1`] = `
-<div
-  className="lumx-mosaic lumx-mosaic--theme-light lumx-mosaic--has-4-thumbnails"
->
-  <div
-    className="lumx-mosaic__wrapper"
-  >
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="0"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 1"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape1.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="1"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 2"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape1-s200.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="2"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 3"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape2.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="3"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 4"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape3.jpg"
-        loading="lazy"
-        theme="light"
-      />
-      <div
-        className="lumx-mosaic__overlay"
-      >
-        <span>
-          +
-          1
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-exports[`<Mosaic> Snapshots and structure should render story FourThumbnails 1`] = `
-<div
-  className="lumx-mosaic lumx-mosaic--theme-light lumx-mosaic--has-4-thumbnails"
->
-  <div
-    className="lumx-mosaic__wrapper"
-  >
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="0"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 1"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape1.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="1"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 2"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape1-s200.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="2"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 3"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape2.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="3"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 4"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape3.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-  </div>
-</div>
-`;
-exports[`<Mosaic> Snapshots and structure should render story OneThumbnail 1`] = `
-<div
-  className="lumx-mosaic lumx-mosaic--theme-light lumx-mosaic--has-1-thumbnail"
->
-  <div
-    className="lumx-mosaic__wrapper"
-  >
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="0"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 1"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape1.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-  </div>
-</div>
-`;
-exports[`<Mosaic> Snapshots and structure should render story SixThumbnails 1`] = `
-<div
-  className="lumx-mosaic lumx-mosaic--theme-light lumx-mosaic--has-4-thumbnails"
->
-  <div
-    className="lumx-mosaic__wrapper"
-  >
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="0"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 1"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape1.jpg"
-        loading="lazy"
-        onClick={[Function]}
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="1"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 2"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape1-s200.jpg"
-        loading="lazy"
-        onClick={[Function]}
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="2"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 3"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape2.jpg"
-        loading="lazy"
-        onClick={[Function]}
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="3"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 4"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape3.jpg"
-        loading="lazy"
-        onClick={[Function]}
-        theme="light"
-      />
-      <div
-        className="lumx-mosaic__overlay"
-      >
-        <span>
-          +
-          2
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-exports[`<Mosaic> Snapshots and structure should render story ThreeThumbnails 1`] = `
-<div
-  className="lumx-mosaic lumx-mosaic--theme-light lumx-mosaic--has-3-thumbnails"
->
-  <div
-    className="lumx-mosaic__wrapper"
-  >
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="0"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 1"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape1.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="1"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 2"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape1-s200.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="2"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 3"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape2.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-  </div>
-</div>
-`;
-exports[`<Mosaic> Snapshots and structure should render story TwoThumbnails 1`] = `
-<div
-  className="lumx-mosaic lumx-mosaic--theme-light lumx-mosaic--has-2-thumbnails"
->
-  <div
-    className="lumx-mosaic__wrapper"
-  >
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="0"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 1"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape1.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-mosaic__thumbnail"
-      key="1"
-    >
-      <Thumbnail
-        align="left"
-        alt="Image 2"
-        aspectRatio="free"
-        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"
-        fillHeight={true}
-        image="/demo-assets/landscape1-s200.jpg"
-        loading="lazy"
-        theme="light"
-      />
-    </div>
-  </div>
-</div>
-`;

package/src/components/post-block/__snapshots__/PostBlock.test.tsx.snap DELETED Viewed

@@ -1,139 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`<PostBlock> Snapshots and structure should render story 'Default' 1`] = `
-<div
-  className="lumx-post-block lumx-post-block--orientation-horizontal lumx-post-block--theme-light"
->
-  <div
-    className="lumx-post-block__thumbnail"
-  >
-    <Thumbnail
-      alt="Landscape"
-      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"
-      image="/demo-assets/landscape1.jpg"
-      loading="lazy"
-      theme="light"
-      variant="rounded"
-    />
-  </div>
-  <div
-    className="lumx-post-block__wrapper"
-  >
-    <div
-      className="lumx-post-block__author"
-    >
-      <UserBlock
-        avatarProps={
-          {
-            "alt": "Avatar",
-            "image": "/demo-assets/avatar2.jpg",
-          }
-        }
-        name="Matthias Manoukian"
-        orientation="horizontal"
-        size="s"
-        theme="light"
-      />
-    </div>
-    <button
-      className="lumx-post-block__title"
-      type="button"
-    >
-      Annual Bonus Payments
-    </button>
-    <span
-      className="lumx-post-block__meta"
-    >
-      1 day ago in community's name
-    </span>
-    <p
-      className="lumx-post-block__text"
-      dangerouslySetInnerHTML={
-        {
-          "__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...",
-        }
-      }
-    />
-    <div
-      className="lumx-post-block__attachments"
-    >
-      <UserBlock
-        avatarProps={
-          {
-            "alt": "Avatar",
-            "image": "/demo-assets/persona.png",
-          }
-        }
-        fields={
-          [
-            "Head of Design",
-            "Lyon",
-          ]
-        }
-        name="Matthias Manoukian"
-        orientation="vertical"
-        size="l"
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-post-block__toolbar"
-    >
-      <div
-        className="lumx-post-block__tags"
-      >
-        <ChipGroup
-          align="left"
-        >
-          <Chip
-            size="s"
-            theme="light"
-          >
-            tag1
-          </Chip>
-          <Chip
-            size="s"
-            theme="light"
-          >
-            tag2
-          </Chip>
-          <Chip
-            size="s"
-            theme="light"
-          >
-            tag3
-          </Chip>
-        </ChipGroup>
-      </div>
-      <div
-        className="lumx-post-block__actions"
-      >
-        <FlexBox
-          orientation="horizontal"
-        >
-          <Button
-            emphasis="low"
-            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"
-            size="s"
-            theme="light"
-          >
-            <span>
-              16
-            </span>
-          </Button>
-          <Button
-            emphasis="low"
-            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"
-            size="s"
-            theme="light"
-          >
-            <span>
-              8
-            </span>
-          </Button>
-        </FlexBox>
-      </div>
-    </div>
-  </div>
-</div>
-`;