@lumx/react 3.1.4 → 3.2.0

package/src/components/table/__snapshots__/Table.test.tsx.snap

@@ -1,263 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Table> Snapshots and structure should render story 'Default' 1`] = `
-<table
-  className="lumx-table lumx-table--has-dividers lumx-table--theme-light"
-  style={
-    {
-      "minWidth": 620,
-    }
-  }
->
-  <TableHeader>
-    <TableRow>
-      <TableCell
-        isSortable={true}
-        key="dessert"
-        onHeaderClick={[Function]}
-        variant="head"
-      >
-        Dessert
-      </TableCell>
-      <TableCell
-        isSortable={true}
-        key="calories"
-        onHeaderClick={[Function]}
-        variant="head"
-        width="100"
-      >
-        Calories
-      </TableCell>
-      <TableCell
-        isSortable={true}
-        key="fat"
-        onHeaderClick={[Function]}
-        sortOrder="asc"
-        variant="head"
-        width="100"
-      >
-        Fat (g)
-      </TableCell>
-      <TableCell
-        icon="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,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10Z"
-        isSortable={false}
-        key="comments"
-        onHeaderClick={[Function]}
-        variant="head"
-        width="150"
-      >
-        Comments
-      </TableCell>
-    </TableRow>
-  </TableHeader>
-  <TableBody>
-    <TableRow
-      key="1"
-    >
-      <TableCell
-        variant="body"
-      >
-        <FlexBox
-          hAlign="center"
-          orientation="horizontal"
-        >
-          <Thumbnail
-            alt="Frozen yogurt"
-            aspectRatio="square"
-            className="lumx-spacing-margin-right-big"
-            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"
-            size="m"
-            theme="light"
-            variant="rounded"
-          />
-          <Link
-            color="dark"
-            href="./"
-          >
-            <span
-              className="lumx-typography-subtitle1"
-            >
-              Frozen yogurt
-            </span>
-          </Link>
-          <FlexBox
-            hAlign="center"
-            marginAuto="left"
-            orientation="horizontal"
-          >
-            <IconButton
-              emphasis="low"
-              icon="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
-              label="Informations"
-              size="m"
-              theme="light"
-            />
-            <IconButton
-              emphasis="low"
-              icon="M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z"
-              label="More options"
-              size="m"
-              theme="light"
-            />
-          </FlexBox>
-        </FlexBox>
-      </TableCell>
-      <TableCell
-        variant="body"
-      >
-        159
-      </TableCell>
-      <TableCell
-        variant="body"
-      >
-        6
-      </TableCell>
-      <TableCell
-        variant="body"
-      >
-        Lorem ipsum
-      </TableCell>
-    </TableRow>
-    <TableRow
-      key="2"
-    >
-      <TableCell
-        variant="body"
-      >
-        <FlexBox
-          hAlign="center"
-          orientation="horizontal"
-        >
-          <Thumbnail
-            alt="Ice cream sandwich"
-            aspectRatio="square"
-            className="lumx-spacing-margin-right-big"
-            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/landscape2.jpg"
-            loading="lazy"
-            size="m"
-            theme="light"
-            variant="rounded"
-          />
-          <Link
-            color="dark"
-            href="./"
-          >
-            <span
-              className="lumx-typography-subtitle1"
-            >
-              Ice cream sandwich
-            </span>
-          </Link>
-          <FlexBox
-            hAlign="center"
-            marginAuto="left"
-            orientation="horizontal"
-          >
-            <IconButton
-              emphasis="low"
-              icon="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
-              label="Informations"
-              size="m"
-              theme="light"
-            />
-            <IconButton
-              emphasis="low"
-              icon="M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z"
-              label="More options"
-              size="m"
-              theme="light"
-            />
-          </FlexBox>
-        </FlexBox>
-      </TableCell>
-      <TableCell
-        variant="body"
-      >
-        237
-      </TableCell>
-      <TableCell
-        variant="body"
-      >
-        9
-      </TableCell>
-      <TableCell
-        variant="body"
-      >
-        Lorem ipsum
-      </TableCell>
-    </TableRow>
-    <TableRow
-      key="3"
-    >
-      <TableCell
-        variant="body"
-      >
-        <FlexBox
-          hAlign="center"
-          orientation="horizontal"
-        >
-          <Thumbnail
-            alt="Eclair"
-            aspectRatio="square"
-            className="lumx-spacing-margin-right-big"
-            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/landscape3.jpg"
-            loading="lazy"
-            size="m"
-            theme="light"
-            variant="rounded"
-          />
-          <Link
-            color="dark"
-            href="./"
-          >
-            <span
-              className="lumx-typography-subtitle1"
-            >
-              Eclair
-            </span>
-          </Link>
-          <FlexBox
-            hAlign="center"
-            marginAuto="left"
-            orientation="horizontal"
-          >
-            <IconButton
-              emphasis="low"
-              icon="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
-              label="Informations"
-              size="m"
-              theme="light"
-            />
-            <IconButton
-              emphasis="low"
-              icon="M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z"
-              label="More options"
-              size="m"
-              theme="light"
-            />
-          </FlexBox>
-        </FlexBox>
-      </TableCell>
-      <TableCell
-        variant="body"
-      >
-        262
-      </TableCell>
-      <TableCell
-        variant="body"
-      >
-        16
-      </TableCell>
-      <TableCell
-        variant="body"
-      >
-        Lorem ipsum
-      </TableCell>
-    </TableRow>
-  </TableBody>
-</table>
-`;

package/src/components/text/Text.stories.jsx

@@ -1,75 +0,0 @@
-import React from 'react';
-import { ColorPalette, ColorVariant, Icon, TypographyCustom, TypographyInterface } from '@lumx/react';
-import { mdiEarth, mdiHeart } from '@lumx/icons';
-import { withResizableBox } from '@lumx/react/stories/withResizableBox';
-import { Text } from './Text';
-
-export default { title: 'LumX components/text/Text' };
-
-export const Default = () => <Text as="p">Some text</Text>;
-
-export const WithIcon = (args) => (
-    <Text as="p" {...args}>
-        Some text <Icon icon={mdiHeart} /> with icons <Icon icon={mdiEarth} />
-    </Text>
-);
-
-export const LongText = (args) => (
-    <Text as="p" {...args}>
-        Some very very very very very very very very very long text
-    </Text>
-);
-LongText.decorators = [withResizableBox()];
-
-export const NoWrap = LongText.bind({});
-NoWrap.args = { noWrap: true };
-NoWrap.decorators = [withResizableBox()];
-
-export const Truncate = LongText.bind({});
-Truncate.args = { truncate: true };
-Truncate.decorators = [withResizableBox()];
-
-export const TruncateMultiline = LongText.bind({});
-TruncateMultiline.args = { truncate: { lines: 2 } };
-TruncateMultiline.decorators = [withResizableBox()];
-
-export const AllTypography = () => {
-    const typographies = [undefined, ...Object.values(TypographyInterface), ...Object.values(TypographyCustom)];
-    return (
-        <table>
-            {typographies.map((typography) => (
-                <tr key={typography}>
-                    <td>{typography}</td>
-                    <td>
-                        <WithIcon typography={typography} />
-                    </td>
-                </tr>
-            ))}
-        </table>
-    );
-};
-
-export const AllColor = () => {
-    const colorVariants = [undefined, ...Object.values(ColorVariant)];
-    const colors = [undefined, ...Object.values(ColorPalette)];
-    return (
-        <table style={{ borderCollapse: 'separate', borderSpacing: 5 }}>
-            <tr>
-                <td />
-                {colorVariants.map((colorVariant) => (
-                    <td key={colorVariant}>{colorVariant}</td>
-                ))}
-            </tr>
-            {colors.map((color) => (
-                <tr key={color}>
-                    <td>{color}</td>
-                    {colorVariants.map((colorVariant) => (
-                        <td key={colorVariant}>
-                            <WithIcon color={color} colorVariant={colorVariant} />
-                        </td>
-                    ))}
-                </tr>
-            ))}
-        </table>
-    );
-};

package/src/components/thumbnail/__snapshots__/Thumbnail.test.tsx.snap

@@ -1,130 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Thumbnail> Snapshots and structure should render story 'Clickable' 1`] = `
-<button
-  aria-label="Click me"
-  className="lumx-thumbnail lumx-thumbnail--aspect-ratio-original lumx-thumbnail--size-xxl lumx-thumbnail--theme-light lumx-thumbnail--is-clickable lumx-thumbnail--is-loading"
-  onClick={[Function]}
-  type="button"
->
-  <div
-    className="lumx-thumbnail__background"
-  >
-    <img
-      alt="Click me"
-      className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
-      loading="lazy"
-      src="/demo-assets/landscape1.jpg"
-      style={{}}
-    />
-  </div>
-</button>
-`;
-
-exports[`<Thumbnail> Snapshots and structure should render story 'ClickableCustomLink' 1`] = `
-<CustomLink
-  className="custom-class-name lumx-thumbnail lumx-thumbnail--aspect-ratio-original lumx-thumbnail--size-xxl lumx-thumbnail--theme-light lumx-thumbnail--is-clickable lumx-thumbnail--is-loading"
-  href="https://google.fr"
->
-  <div
-    className="lumx-thumbnail__background"
-  >
-    <img
-      alt="Click me"
-      className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
-      loading="lazy"
-      src="/demo-assets/landscape1.jpg"
-      style={{}}
-    />
-  </div>
-</CustomLink>
-`;
-
-exports[`<Thumbnail> Snapshots and structure should render story 'ClickableLink' 1`] = `
-<a
-  className="lumx-thumbnail lumx-thumbnail--aspect-ratio-original lumx-thumbnail--size-xxl lumx-thumbnail--theme-light lumx-thumbnail--is-clickable lumx-thumbnail--is-loading"
-  href="https://google.fr"
->
-  <div
-    className="lumx-thumbnail__background"
-  >
-    <img
-      alt="Click me"
-      className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
-      loading="lazy"
-      src="/demo-assets/landscape1.jpg"
-      style={{}}
-    />
-  </div>
-</a>
-`;
-
-exports[`<Thumbnail> Snapshots and structure should render story 'Default' 1`] = `
-<div
-  className="lumx-thumbnail lumx-thumbnail--aspect-ratio-original lumx-thumbnail--theme-light lumx-thumbnail--variant-squared lumx-thumbnail--is-loading"
->
-  <div
-    className="lumx-thumbnail__background"
-  >
-    <img
-      alt="Image alt text"
-      className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
-      loading="lazy"
-      src="/demo-assets/landscape1.jpg"
-      style={{}}
-    />
-  </div>
-</div>
-`;
-
-exports[`<Thumbnail> Snapshots and structure should render story 'WithBadge' 1`] = `
-<div
-  className="lumx-thumbnail lumx-thumbnail--aspect-ratio-square lumx-thumbnail--size-l lumx-thumbnail--theme-light lumx-thumbnail--variant-rounded lumx-thumbnail--is-loading lumx-thumbnail--has-badge"
->
-  <div
-    className="lumx-thumbnail__background"
-  >
-    <img
-      alt="Image alt text"
-      className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
-      loading="lazy"
-      src="/demo-assets/landscape1.jpg"
-      style={{}}
-    />
-  </div>
-  <Badge
-    className="lumx-thumbnail__badge"
-    color="primary"
-  >
-    <Icon
-      icon="M4 2A2 2 0 0 0 2 4V12H4V8H6V12H8V4A2 2 0 0 0 6 2H4M4 4H6V6H4M22 15.5V14A2 2 0 0 0 20 12H16V22H20A2 2 0 0 0 22 20V18.5A1.54 1.54 0 0 0 20.5 17A1.54 1.54 0 0 0 22 15.5M20 20H18V18H20V20M20 16H18V14H20M5.79 21.61L4.21 20.39L18.21 2.39L19.79 3.61Z"
-    />
-  </Badge>
-</div>
-`;
-
-exports[`<Thumbnail> Snapshots and structure should render story 'WithCustomImageClassName' 1`] = `
-<div
-  className="lumx-thumbnail lumx-thumbnail--aspect-ratio-square lumx-thumbnail--size-l lumx-thumbnail--theme-light lumx-thumbnail--variant-rounded lumx-thumbnail--is-loading lumx-thumbnail--has-badge"
->
-  <div
-    className="lumx-thumbnail__background"
-  >
-    <img
-      alt="Image alt text"
-      className="lumx-thumbnail__image lumx-thumbnail__image--is-loading custom-image-class-name"
-      loading="lazy"
-      src="/demo-assets/landscape1.jpg"
-      style={{}}
-    />
-  </div>
-  <Badge
-    className="lumx-thumbnail__badge"
-    color="primary"
-  >
-    <Icon
-      icon="M4 2A2 2 0 0 0 2 4V12H4V8H6V12H8V4A2 2 0 0 0 6 2H4M4 4H6V6H4M22 15.5V14A2 2 0 0 0 20 12H16V22H20A2 2 0 0 0 22 20V18.5A1.54 1.54 0 0 0 20.5 17A1.54 1.54 0 0 0 22 15.5M20 20H18V18H20V20M20 16H18V14H20M5.79 21.61L4.21 20.39L18.21 2.39L19.79 3.61Z"
-    />
-  </Badge>
-</div>
-`;