@lumx/react 3.1.4 → 3.2.0

package/src/components/skeleton/__snapshots__/SkeletonCircle.test.tsx.snap

@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<SkeletonCircle> Snapshots and structure should render story 'Circle' 1`] = `
-[
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-xxs lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-xs lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-s lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-m lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-l lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-xl lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-xxl lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-m lumx-skeleton-circle--color-primary lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-m lumx-skeleton-circle--color-secondary lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-m lumx-skeleton-circle--color-blue lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-m lumx-skeleton-circle--color-dark lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-m lumx-skeleton-circle--color-green lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-m lumx-skeleton-circle--color-yellow lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-m lumx-skeleton-circle--color-red lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-m lumx-skeleton-circle--color-light lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-m lumx-skeleton-circle--color-grey lumx-skeleton-circle--theme-light"
-  />,
-]
-`;

package/src/components/skeleton/__snapshots__/SkeletonRectangle.test.tsx.snap

@@ -1,177 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<SkeletonRectangle> Snapshots and structure should render story 'LoadingThumbnail' 1`] = `
-<div
-  className="lumx-skeleton-rectangle lumx-skeleton-rectangle--aspect-ratio-square lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl"
->
-  <div
-    className="lumx-skeleton-rectangle__inner"
-  />
-</div>
-`;
-
-exports[`<SkeletonRectangle> Snapshots and structure should render story 'Rectangle' 1`] = `
-[
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-xxs lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xxs"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-xs lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xs"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-s lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-s"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-m"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-l lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-l"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-xl lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-xxl lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xxl"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-rounded lumx-skeleton-rectangle--width-xl"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-pill lumx-skeleton-rectangle--width-xl"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--aspect-ratio-vertical lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--aspect-ratio-square lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--aspect-ratio-horizontal lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--aspect-ratio-wide lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl lumx-skeleton-rectangle--color-primary"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl lumx-skeleton-rectangle--color-secondary"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl lumx-skeleton-rectangle--color-blue"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl lumx-skeleton-rectangle--color-dark"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl lumx-skeleton-rectangle--color-green"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl lumx-skeleton-rectangle--color-yellow"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl lumx-skeleton-rectangle--color-red"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl lumx-skeleton-rectangle--color-light"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl lumx-skeleton-rectangle--color-grey"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-]
-`;

package/src/components/skeleton/__snapshots__/SkeletonTypography.test.tsx.snap

@@ -1,174 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<SkeletonTypography> Snapshots and structure should render story 'TextTypography' 1`] = `
-[
-  <div
-    className="lumx-spacing-margin-bottom lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-title"
-    style={
-      {
-        "width": "30%",
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1"
-    style={
-      {
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1"
-    style={
-      {
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1"
-    style={
-      {
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1"
-    style={
-      {
-        "width": "70%",
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-primary"
-    style={
-      {
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-secondary"
-    style={
-      {
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-blue"
-    style={
-      {
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-dark"
-    style={
-      {
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-green"
-    style={
-      {
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-yellow"
-    style={
-      {
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-red"
-    style={
-      {
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-light"
-    style={
-      {
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-grey"
-    style={
-      {
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-]
-`;

package/src/components/slider/__snapshots__/Slider.test.tsx.snap

@@ -1,122 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Slider> Snapshots and structure should render story 'DefaultSlider' 1`] = `
-<div
-  className="lumx-slider lumx-slider--theme-light lumx-slider--has-label"
-  onMouseDown={[Function]}
->
-  <InputLabel
-    className="lumx-slider__label"
-    htmlFor="slider-uid"
-    id="label-slider-uid"
-    theme="light"
-  >
-    Default
-  </InputLabel>
-  <div
-    className="lumx-slider__ui-wrapper"
-  >
-    <span
-      className="lumx-slider__value-label lumx-slider__value-label--min"
-    >
-      0
-    </span>
-    <div
-      className="lumx-slider__wrapper"
-    >
-      <div
-        className="lumx-slider__track lumx-slider__track--background"
-      />
-      <div
-        className="lumx-slider__track lumx-slider__track--active"
-        style={
-          {
-            "width": "50%",
-          }
-        }
-      />
-      <button
-        aria-labelledby="label-slider-uid"
-        className="lumx-slider__handle"
-        id="slider-uid"
-        onKeyDown={[Function]}
-        style={
-          {
-            "left": "50%",
-          }
-        }
-        type="button"
-      />
-    </div>
-    <span
-      className="lumx-slider__value-label lumx-slider__value-label--max"
-    >
-      10
-    </span>
-  </div>
-</div>
-`;
-
-exports[`<Slider> Snapshots and structure should render story 'WithHelperSlider' 1`] = `
-<div
-  className="lumx-slider lumx-slider--theme-light lumx-slider--has-label"
-  onMouseDown={[Function]}
->
-  <InputLabel
-    className="lumx-slider__label"
-    htmlFor="slider-uid"
-    id="label-slider-uid"
-    theme="light"
-  >
-    Default
-  </InputLabel>
-  <InputHelper
-    className="lumx-slider__helper"
-    kind="info"
-    theme="light"
-  >
-    This is an helper text
-  </InputHelper>
-  <div
-    className="lumx-slider__ui-wrapper"
-  >
-    <span
-      className="lumx-slider__value-label lumx-slider__value-label--min"
-    >
-      0
-    </span>
-    <div
-      className="lumx-slider__wrapper"
-    >
-      <div
-        className="lumx-slider__track lumx-slider__track--background"
-      />
-      <div
-        className="lumx-slider__track lumx-slider__track--active"
-        style={
-          {
-            "width": "50%",
-          }
-        }
-      />
-      <button
-        aria-labelledby="label-slider-uid"
-        className="lumx-slider__handle"
-        id="slider-uid"
-        onKeyDown={[Function]}
-        style={
-          {
-            "left": "50%",
-          }
-        }
-        type="button"
-      />
-    </div>
-    <span
-      className="lumx-slider__value-label lumx-slider__value-label--max"
-    >
-      10
-    </span>
-  </div>
-</div>
-`;

package/src/components/slideshow/__snapshots__/Slideshow.test.tsx.snap

@@ -1,157 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Slideshow> Snapshots and structure should render story 'Simple' 1`] = `
-[
-  <Slideshow
-    activeIndex={0}
-    afterSlides={
-      <div
-        className="lumx-slideshow__controls"
-      >
-        <SlideshowControls
-          activeIndex={0}
-          isAutoPlaying={false}
-          nextButtonProps={
-            {
-              "aria-controls": "slideshow-slides2",
-              "label": "Next",
-            }
-          }
-          onNextClick={[Function]}
-          onPaginationClick={[Function]}
-          onPreviousClick={[Function]}
-          paginationItemProps={[Function]}
-          parentRef={null}
-          previousButtonProps={
-            {
-              "aria-controls": "slideshow-slides2",
-              "label": "Previous",
-            }
-          }
-          slidesCount={6}
-          theme="light"
-        />
-      </div>
-    }
-    aria-label="Simple carousel example"
-    autoPlay={false}
-    groupBy={1}
-    hasControls={true}
-    id="slideshow1"
-    isAutoPlaying={false}
-    slideGroupLabel={[Function]}
-    slidesId="slideshow-slides2"
-    style={
-      {
-        "width": "50%",
-      }
-    }
-    theme="light"
-    toggleAutoPlay={[Function]}
-  >
-    <SlideshowItem
-      key="/demo-assets/landscape1.jpg-0"
-    >
-      <ImageBlock
-        align="left"
-        alt="Image 1"
-        captionPosition="below"
-        image="/demo-assets/landscape1.jpg"
-        theme="light"
-        thumbnailProps={
-          {
-            "aspectRatio": "horizontal",
-            "loading": "eager",
-          }
-        }
-      />
-    </SlideshowItem>
-    <SlideshowItem
-      key="/demo-assets/landscape1-s200.jpg-1"
-    >
-      <ImageBlock
-        align="left"
-        alt="Image 2"
-        captionPosition="below"
-        image="/demo-assets/landscape1-s200.jpg"
-        theme="light"
-        thumbnailProps={
-          {
-            "aspectRatio": "horizontal",
-            "loading": "eager",
-          }
-        }
-      />
-    </SlideshowItem>
-    <SlideshowItem
-      key="/demo-assets/landscape2.jpg-2"
-    >
-      <ImageBlock
-        align="left"
-        alt="Image 3"
-        captionPosition="below"
-        image="/demo-assets/landscape2.jpg"
-        theme="light"
-        thumbnailProps={
-          {
-            "aspectRatio": "horizontal",
-            "loading": "eager",
-          }
-        }
-      />
-    </SlideshowItem>
-    <SlideshowItem
-      key="/demo-assets/landscape3.jpg-3"
-    >
-      <ImageBlock
-        align="left"
-        alt="Image 4"
-        captionPosition="below"
-        image="/demo-assets/landscape3.jpg"
-        theme="light"
-        thumbnailProps={
-          {
-            "aspectRatio": "horizontal",
-            "loading": "eager",
-          }
-        }
-      />
-    </SlideshowItem>
-    <SlideshowItem
-      key="/demo-assets/portrait1.jpg-4"
-    >
-      <ImageBlock
-        align="left"
-        alt="Image 5"
-        captionPosition="below"
-        image="/demo-assets/portrait1.jpg"
-        theme="light"
-        thumbnailProps={
-          {
-            "aspectRatio": "horizontal",
-            "loading": "eager",
-          }
-        }
-      />
-    </SlideshowItem>
-    <SlideshowItem
-      key="/demo-assets/portrait1-s200.jpg-5"
-    >
-      <ImageBlock
-        align="left"
-        alt="Image 6"
-        captionPosition="below"
-        image="/demo-assets/portrait1-s200.jpg"
-        theme="light"
-        thumbnailProps={
-          {
-            "aspectRatio": "horizontal",
-            "loading": "eager",
-          }
-        }
-      />
-    </SlideshowItem>
-  </Slideshow>,
-  null,
-]
-`;