@lumx/react 3.0.7 → 3.1.0

package/dist/src/components/skeleton/SkeletonCircle.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { FlexBox, Orientation, Size, SkeletonCircle, ColorPalette } from '@lumx/react';
+
+export default { title: 'LumX components/skeleton/Skeleton Circle' };
+
+const sizes = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl] as const;
+const colors = Object.values(ColorPalette);
+
+export const Circle = ({ theme }: any) => (
+    <>
+        Sizes:
+        <FlexBox orientation={Orientation.horizontal}>
+            {sizes.map((size) => (
+                <SkeletonCircle theme={theme} key={size} size={size} className="lumx-spacing-margin" />
+            ))}
+        </FlexBox>
+        Colors:
+        <FlexBox orientation={Orientation.horizontal}>
+            {colors.map((color) => (
+                <SkeletonCircle theme={theme} size={Size.m} key={color} color={color} className="lumx-spacing-margin" />
+            ))}
+        </FlexBox>
+    </>
+);

package/dist/src/components/skeleton/SkeletonCircle.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
+
+import { SkeletonCircle, SkeletonCircleProps } from './SkeletonCircle';
+import * as stories from './SkeletonCircle.stories';
+
+const CLASSNAME = SkeletonCircle.className as string;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (props: Partial<SkeletonCircleProps> = {}, shallowRendering = true) => {
+    const renderer: any = shallowRendering ? shallow : mount;
+    const wrapper: any = renderer(<SkeletonCircle {...(props as any)} />);
+    return { props, wrapper };
+};
+
+describe(`<${SkeletonCircle.displayName}>`, () => {
+    // 1. Test render via snapshot.
+    describe('Snapshots and structure', () => {
+        itShouldRenderStories(stories, SkeletonCircle);
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+});

package/dist/src/components/skeleton/SkeletonCircle.tsx

@@ -0,0 +1,52 @@
+import classNames from 'classnames';
+import React, { forwardRef } from 'react';
+
+import { GlobalSize, Theme, ColorPalette } from '@lumx/react';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+
+/**
+ * Defines the props of the component.
+ */
+export interface SkeletonCircleProps extends GenericProps, HasTheme {
+    /** Size variant. */
+    size: GlobalSize;
+    /** The color of the skeleton. */
+    color?: ColorPalette;
+}
+
+const DEFAULT_PROPS: Partial<SkeletonCircleProps> = {
+    theme: Theme.light,
+};
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'SkeletonCircle';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * SkeletonCircle component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const SkeletonCircle: Comp<SkeletonCircleProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const { className, size, color, theme, ...forwardedProps } = props;
+
+    return (
+        <div
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, color, theme }))}
+        />
+    );
+});
+SkeletonCircle.displayName = COMPONENT_NAME;
+SkeletonCircle.defaultProps = DEFAULT_PROPS;
+SkeletonCircle.className = CLASSNAME;

package/dist/src/components/skeleton/SkeletonRectangle.stories.tsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from 'react';
+
+import {
+    Alignment,
+    AspectRatio,
+    Button,
+    FlexBox,
+    Orientation,
+    Size,
+    SkeletonRectangle,
+    SkeletonRectangleVariant,
+    Thumbnail,
+    ColorPalette,
+} from '@lumx/react';
+import { imageKnob } from '@lumx/react/stories/knobs/image';
+
+export default { title: 'LumX components/skeleton/Skeleton Rectangle' };
+
+const variants = [
+    SkeletonRectangleVariant.squared,
+    SkeletonRectangleVariant.rounded,
+    SkeletonRectangleVariant.pill,
+] as const;
+const sizes = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl] as const;
+const aspectRatios = [AspectRatio.vertical, AspectRatio.square, AspectRatio.horizontal, AspectRatio.wide] as const;
+const colors = Object.values(ColorPalette);
+
+export const Rectangle = ({ theme }: any) => (
+    <>
+        Sizes:
+        <FlexBox orientation={Orientation.horizontal}>
+            {sizes.map((size) => (
+                <SkeletonRectangle
+                    key={size}
+                    className="lumx-spacing-margin"
+                    theme={theme}
+                    height={size}
+                    width={size}
+                />
+            ))}
+        </FlexBox>
+        Variants:
+        <FlexBox orientation={Orientation.horizontal}>
+            {variants.map((variant) => (
+                <SkeletonRectangle
+                    key={variant}
+                    className="lumx-spacing-margin"
+                    theme={theme}
+                    width={Size.xl}
+                    height={Size.m}
+                    variant={variant}
+                />
+            ))}
+        </FlexBox>
+        Ratios:
+        <FlexBox orientation={Orientation.horizontal} hAlign={Alignment.top}>
+            {aspectRatios.map((aspectRatio) => (
+                <SkeletonRectangle
+                    key={aspectRatio}
+                    className="lumx-spacing-margin"
+                    theme={theme}
+                    width={Size.xl}
+                    aspectRatio={aspectRatio}
+                />
+            ))}
+        </FlexBox>
+        Colors:
+        <FlexBox orientation={Orientation.horizontal} hAlign={Alignment.top}>
+            {colors.map((color) => (
+                <SkeletonRectangle
+                    key={color}
+                    className="lumx-spacing-margin"
+                    theme={theme}
+                    width={Size.xl}
+                    height={Size.m}
+                    color={color}
+                />
+            ))}
+        </FlexBox>
+    </>
+);
+
+export const LoadingThumbnail = ({ theme }: any) => {
+    const [loading, setLoading] = useState(true);
+    const fakeLoad = () => {
+        setLoading(true);
+        setTimeout(() => {
+            setLoading(false);
+        }, 2000);
+    };
+    useEffect(fakeLoad, []);
+    const size = Size.xl;
+
+    return (
+        <>
+            <Button onClick={fakeLoad}>Reload</Button> (fake 2sec loading)
+            <Thumbnail
+                image={imageKnob()}
+                alt="Image"
+                style={{ display: loading ? 'none' : undefined }}
+                aspectRatio={AspectRatio.square}
+                size={size}
+            />
+            {loading && <SkeletonRectangle theme={theme} width={size} aspectRatio={AspectRatio.square} />}
+        </>
+    );
+};

package/dist/src/components/skeleton/SkeletonRectangle.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
+
+import { SkeletonRectangle, SkeletonRectangleProps } from './SkeletonRectangle';
+import * as stories from './SkeletonRectangle.stories';
+
+const CLASSNAME = SkeletonRectangle.className as string;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (props: Partial<SkeletonRectangleProps> = {}, shallowRendering = true) => {
+    const renderer: any = shallowRendering ? shallow : mount;
+    const wrapper: any = renderer(<SkeletonRectangle {...(props as any)} />);
+    return { props, wrapper };
+};
+
+describe(`<${SkeletonRectangle.displayName}>`, () => {
+    // 1. Test render via snapshot.
+    describe('Snapshots and structure', () => {
+        itShouldRenderStories(stories, SkeletonRectangle);
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+});

package/dist/src/components/skeleton/SkeletonRectangle.tsx

@@ -0,0 +1,78 @@
+import classNames from 'classnames';
+import React, { forwardRef } from 'react';
+
+import { AspectRatio, GlobalSize, Theme, ColorPalette } from '@lumx/react';
+import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+
+/**
+ * Skeleton variants.
+ */
+export const SkeletonRectangleVariant = { squared: 'squared', rounded: 'rounded', pill: 'pill' } as const;
+export type SkeletonRectangleVariant = ValueOf<typeof SkeletonRectangleVariant>;
+
+/**
+ * Defines the props of the component.
+ */
+export interface SkeletonRectangleProps extends GenericProps, HasTheme {
+    /** Aspect ratio (use with width and not height). */
+    aspectRatio?: Extract<AspectRatio, 'square' | 'horizontal' | 'vertical' | 'wide'>;
+    /** Height size. */
+    height?: GlobalSize;
+    /** Border variant. */
+    variant?: SkeletonRectangleVariant;
+    /** Width size. */
+    width?: GlobalSize;
+    /** The color of the skeleton. */
+    color?: ColorPalette;
+}
+
+const DEFAULT_PROPS: Partial<SkeletonRectangleProps> = {
+    theme: Theme.light,
+    variant: SkeletonRectangleVariant.squared,
+};
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'SkeletonRectangle';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * SkeletonRectangle component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const SkeletonRectangle: Comp<SkeletonRectangleProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const { aspectRatio, className, height, theme, variant, width, color, ...forwardedProps } = props;
+
+    return (
+        <div
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    prefix: CLASSNAME,
+                    aspectRatio,
+                    height: aspectRatio ? undefined : height,
+                    theme,
+                    variant,
+                    width,
+                    color,
+                }),
+            )}
+        >
+            <div className={`${CLASSNAME}__inner`} />
+        </div>
+    );
+});
+SkeletonRectangle.displayName = COMPONENT_NAME;
+SkeletonRectangle.className = CLASSNAME;
+SkeletonRectangle.defaultProps = DEFAULT_PROPS;

package/dist/src/components/skeleton/SkeletonTypography.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { SkeletonTypography, Typography, ColorPalette } from '@lumx/react';
+
+export default { title: 'LumX components/skeleton/Skeleton Typography' };
+
+const colors = Object.values(ColorPalette);
+
+export const TextTypography = ({ theme }: any) => (
+    <>
+        <SkeletonTypography
+            theme={theme}
+            typography={Typography.title}
+            width="30%"
+            className="lumx-spacing-margin-bottom"
+        />
+        <SkeletonTypography theme={theme} typography={Typography.body1} />
+        <SkeletonTypography theme={theme} typography={Typography.body1} />
+        <SkeletonTypography theme={theme} typography={Typography.body1} />
+        <SkeletonTypography theme={theme} typography={Typography.body1} width="70%" />
+        Colors:
+        {colors.map((color) => (
+            <SkeletonTypography key={color} color={color} theme={theme} typography={Typography.body1} />
+        ))}
+    </>
+);

package/dist/src/components/skeleton/SkeletonTypography.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
+
+import { SkeletonTypography, SkeletonTypographyProps } from './SkeletonTypography';
+import * as stories from './SkeletonTypography.stories';
+
+const CLASSNAME = SkeletonTypography.className as string;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (props: Partial<SkeletonTypographyProps> = {}, shallowRendering = true) => {
+    const renderer: any = shallowRendering ? shallow : mount;
+    const wrapper: any = renderer(<SkeletonTypography {...(props as any)} />);
+    return { props, wrapper };
+};
+
+describe(`<${SkeletonTypography.displayName}>`, () => {
+    // 1. Test render via snapshot.
+    describe('Snapshots and structure', () => {
+        itShouldRenderStories(stories, SkeletonTypography);
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+});

package/dist/src/components/skeleton/SkeletonTypography.tsx

@@ -0,0 +1,57 @@
+import classNames from 'classnames';
+import React, { CSSProperties, forwardRef } from 'react';
+
+import { Theme, TypographyInterface, ColorPalette } from '@lumx/react';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+
+/**
+ * Defines the props of the component.
+ */
+export interface SkeletonTypographyProps extends GenericProps, HasTheme {
+    /** Typography variant. */
+    typography: TypographyInterface;
+    /** Width CSS property. */
+    width?: CSSProperties['width'];
+    /** The color of the skeleton. */
+    color?: ColorPalette;
+}
+
+const DEFAULT_PROPS: Partial<SkeletonTypographyProps> = {
+    theme: Theme.light,
+};
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'SkeletonTypography';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * SkeletonTypography component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const SkeletonTypography: Comp<SkeletonTypographyProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const { className, theme, typography, width, color, ...forwardedProps } = props;
+
+    return (
+        <div
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme, typography, color }))}
+            style={{ ...forwardedProps.style, width }}
+        >
+            <div className={`${CLASSNAME}__inner`} />
+        </div>
+    );
+});
+SkeletonTypography.displayName = COMPONENT_NAME;
+SkeletonTypography.defaultProps = DEFAULT_PROPS;
+SkeletonTypography.className = CLASSNAME;

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

@@ -0,0 +1,54 @@
+// 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/dist/src/components/skeleton/__snapshots__/SkeletonRectangle.test.tsx.snap

@@ -0,0 +1,177 @@
+// 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>,
+]
+`;