@lumx/react 3.20.1-alpha.2 → 3.20.1-alpha.21

package/src/components/comment-block/CommentBlock.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 
 import { render } from '@testing-library/react';

package/src/components/comment-block/CommentBlock.tsx

@@ -1,4 +1,4 @@
-import React, { Children, ReactNode } from 'react';
+import { Children, ReactNode } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/date-picker/DatePicker.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { DatePickerProps } from '@lumx/react';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { getByClassName } from '@lumx/react/testing/utils/queries';
@@ -9,15 +7,15 @@ import { DatePicker } from '.';
 import { CLASSNAME } from './constants';
 
 const mockedDate = new Date(1487721600000);
-Date.now = jest.fn(() => mockedDate.valueOf());
-jest.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
+Date.now = vi.fn(() => mockedDate.valueOf());
+vi.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
     getYearDisplayName: () => 'année',
 }));
 
 const setup = (propsOverride: Partial<DatePickerProps> = {}) => {
     const props: DatePickerProps = {
         locale: 'fr',
-        onChange: jest.fn(),
+        onChange: vi.fn(),
         value: mockedDate,
         nextButtonProps: { label: 'Next month' },
         previousButtonProps: { label: 'Previous month' },

package/src/components/date-picker/DatePicker.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
 import { isDateValid } from '@lumx/react/utils/date/isDateValid';

package/src/components/date-picker/DatePickerControlled.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { render, screen, waitFor } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
@@ -10,8 +8,8 @@ import { DatePickerControlled, DatePickerControlledProps } from './DatePickerCon
 import { CLASSNAME } from './constants';
 
 const mockedDate = new Date(1487721600000);
-Date.now = jest.fn(() => mockedDate.valueOf());
-jest.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
+Date.now = vi.fn(() => mockedDate.valueOf());
+vi.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
     getYearDisplayName: () => 'année',
 }));
 
@@ -20,14 +18,14 @@ type SetupProps = Partial<DatePickerControlledProps>;
 const setup = (propsOverride: SetupProps = {}) => {
     const props: DatePickerControlledProps = {
         locale: 'fr',
-        onChange: jest.fn(),
-        onNextMonthChange: jest.fn(),
-        onPrevMonthChange: jest.fn(),
+        onChange: vi.fn(),
+        onNextMonthChange: vi.fn(),
+        onPrevMonthChange: vi.fn(),
         selectedMonth: mockedDate,
         value: mockedDate,
         nextButtonProps: { label: 'Next month' },
         previousButtonProps: { label: 'Previous month' },
-        onMonthChange: jest.fn(),
+        onMonthChange: vi.fn(),
         ...propsOverride,
     };
     render(<DatePickerControlled {...props} />);

package/src/components/date-picker/DatePickerField.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render, screen } from '@testing-library/react';
 import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
@@ -10,8 +8,8 @@ import { DatePickerField, DatePickerFieldProps } from './DatePickerField';
 import { CLASSNAME } from './constants';
 
 const mockedDate = new Date(1487721600000);
-Date.now = jest.fn(() => mockedDate.valueOf());
-jest.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
+Date.now = vi.fn(() => mockedDate.valueOf());
+vi.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
     getYearDisplayName: () => 'année',
 }));
 
@@ -19,7 +17,7 @@ const setup = (propsOverride: Partial<DatePickerFieldProps> = {}, { wrapper }: S
     const props: DatePickerFieldProps = {
         label: 'DatePickerField',
         locale: 'fr',
-        onChange: jest.fn(),
+        onChange: vi.fn(),
         value: mockedDate,
         nextButtonProps: { label: 'Next month' },
         previousButtonProps: { label: 'Previous month' },

package/src/components/dialog/Dialog.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Dialog, DialogProps } from '@lumx/react/components/dialog/Dialog';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render, screen } from '@testing-library/react';
@@ -51,7 +49,7 @@ describe(`<${Dialog.displayName}>`, () => {
 
     describe('Events', () => {
         it('should trigger `onClose` when pressing `escape` key', async () => {
-            const onClose = jest.fn();
+            const onClose = vi.fn();
             setup({ isOpen: true, onClose });
 
             await userEvent.keyboard('[Escape]');
@@ -59,7 +57,7 @@ describe(`<${Dialog.displayName}>`, () => {
         });
 
         it('should not trigger `onClose` when pressing any other key', async () => {
-            const onClose = jest.fn();
+            const onClose = vi.fn();
             setup({ isOpen: true, onClose });
 
             await userEvent.keyboard('a');
@@ -67,7 +65,7 @@ describe(`<${Dialog.displayName}>`, () => {
         });
 
         it('should not trigger `onClose` when pressing `escape` key with `preventAutoClose` set to `true`', async () => {
-            const onClose = jest.fn();
+            const onClose = vi.fn();
             setup({ isOpen: true, onClose, preventAutoClose: true });
 
             await userEvent.keyboard('[Escape]');
@@ -75,7 +73,7 @@ describe(`<${Dialog.displayName}>`, () => {
         });
 
         it('should not trigger `onClose` when pressing `escape` key with `preventCloseOnEscape` set to `true`', async () => {
-            const onClose = jest.fn();
+            const onClose = vi.fn();
             setup({ isOpen: true, onClose, preventCloseOnEscape: true });
 
             await userEvent.keyboard('[Escape]');

package/src/components/divider/Divider.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 
 import { Theme } from '@lumx/react';

package/src/components/divider/Divider.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';

package/src/components/drag-handle/DragHandle.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 
 import { render } from '@testing-library/react';

package/src/components/drag-handle/DragHandle.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { mdiDragVertical } from '@lumx/icons';

package/src/components/dropdown/Dropdown.stories.tsx

@@ -1,5 +1,5 @@
 import range from 'lodash/range';
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 
 import { Button, Dropdown, List, ListItem } from '@lumx/react';
 

package/src/components/dropdown/Dropdown.test.tsx

@@ -28,7 +28,7 @@ const setup = (propsOverride: Partial<DropdownProps> = {}) => {
 describe(`<${Dropdown.displayName}>`, () => {
     describe('Events', () => {
         it('should trigger `onClose` when pressing `escape` key', async () => {
-            const onClose = jest.fn();
+            const onClose = vi.fn();
             setup({
                 closeOnEscape: true,
                 onClose,
@@ -40,7 +40,7 @@ describe(`<${Dropdown.displayName}>`, () => {
         });
 
         it('should not trigger `onClose` when pressing any other key', async () => {
-            const onClose = jest.fn();
+            const onClose = vi.fn();
             setup({ isOpen: true, onClose, closeOnEscape: true });
 
             await userEvent.keyboard('a');
@@ -48,7 +48,7 @@ describe(`<${Dropdown.displayName}>`, () => {
         });
 
         it('should not trigger `onClose` when pressing `escape` key with `closeOnEscape` set to `false`', async () => {
-            const onClose = jest.fn();
+            const onClose = vi.fn();
             setup({ isOpen: true, onClose, closeOnEscape: false });
 
             await userEvent.keyboard('[Escape]');

package/src/components/dropdown/Dropdown.tsx

@@ -1,4 +1,4 @@
-import React, { cloneElement, useMemo, useRef } from 'react';
+import { cloneElement, useMemo, useRef } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/expansion-panel/ExpansionPanel.test.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-
+import { Mock } from 'vitest';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { queryByRole, render, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
@@ -11,7 +10,7 @@ import { ExpansionPanel, ExpansionPanelProps } from '.';
 
 const CLASSNAME = ExpansionPanel.className as string;
 
-jest.mock('@lumx/react/utils/browser/isFocusVisible');
+vi.mock('@lumx/react/utils/browser/isFocusVisible');
 
 const mockChildrenContent = 'children content';
 
@@ -55,7 +54,7 @@ const setup = (
 };
 
 describe(`<${ExpansionPanel.displayName}>`, () => {
-    (isFocusVisible as jest.Mock).mockReturnValue(false);
+    (isFocusVisible as Mock).mockReturnValue(false);
 
     describe('Render', () => {
         it('should render default', () => {
@@ -100,9 +99,9 @@ describe(`<${ExpansionPanel.displayName}>`, () => {
     });
 
     describe('Events', () => {
-        const onOpen = jest.fn();
-        const onClose = jest.fn();
-        const onToggleOpen = jest.fn();
+        const onOpen = vi.fn();
+        const onClose = vi.fn();
+        const onToggleOpen = vi.fn();
 
         beforeEach(onOpen.mockClear);
         beforeEach(onClose.mockClear);

package/src/components/flag/Flag.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { ColorPalette, Theme } from '@lumx/react';
 import { mdiAbTesting } from '@lumx/icons';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';

package/src/components/flag/Flag.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { ColorPalette, Icon, Size, Theme, Text } from '@lumx/react';

package/src/components/flex-box/FlexBox.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Alignment, Button, IconButton, Orientation, Size, Text } from '@lumx/react';
 
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';

package/src/components/flex-box/FlexBox.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 
 import { queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/flex-box/FlexBox.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import classNames from 'classnames';
 import castArray from 'lodash/castArray';

package/src/components/generic-block/GenericBlock.test.tsx

@@ -1,4 +1,4 @@
-import React, { createRef } from 'react';
+import { createRef } from 'react';
 
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';

package/src/components/grid/Grid.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { Alignment, Orientation, Size } from '@lumx/react';

package/src/components/grid/GridItem.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { Alignment } from '@lumx/react';

package/src/components/grid-column/GridColumn.stories.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/display-name */
-import React from 'react';
 import range from 'lodash/range';
 
 import { GridColumn, GridColumnProps } from '@lumx/react/components/grid-column/GridColumn';

package/src/components/grid-column/GridColumn.test.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { getByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/grid-column/GridColumn.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 
 import isInteger from 'lodash/isInteger';
 import classNames from 'classnames';

package/src/components/heading/Heading.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { headingElementArgType, HEADING_ELEMENTS } from '@lumx/react/stories/controls/element';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 import { ALL_TYPOGRAPHY } from '@lumx/react/stories/controls/typography';

package/src/components/heading/Heading.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { render, screen } from '@testing-library/react';
 
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';

package/src/components/heading/Heading.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { HeadingElement } from '@lumx/react/utils/type';

package/src/components/heading/HeadingLevelProvider.tsx

@@ -1,5 +1,5 @@
 import { HeadingElement } from '@lumx/react/utils/type';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { MAX_HEADING_LEVEL } from './constants';
 import { HeadingLevelContext } from './context';
 import { useHeadingLevel } from './useHeadingLevel';

package/src/components/icon/Icon.stories.tsx

@@ -1,21 +1,47 @@
-import DefaultStory, { SizeAndShape as DefaultSizeAndShape } from '@lumx/core/js/components/Icon/Stories';
 import { mdiEmail } from '@lumx/icons';
-import { ColorPalette, ColorVariant, GridColumn, Icon, Size } from '@lumx/react';
+import { ColorPalette, ColorVariant, GridColumn, Icon, IconSizes, Size } from '@lumx/react';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
+import { iconArgType } from '@lumx/react/stories/controls/icons';
+import { colorArgType, colorVariantArgType } from '@lumx/react/stories/controls/color';
 import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
 
+const iconSizes: Array<IconSizes> = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl];
+
 export default {
     title: 'LumX components/icon/Icon',
     component: Icon,
-    ...DefaultStory,
+    args: Icon.defaultProps,
+    argTypes: {
+        icon: iconArgType,
+        hasShape: { control: 'boolean' },
+        color: colorArgType,
+        colorVariant: colorVariantArgType,
+    },
 };
 
 /**
  * All combinations of size and shape
  */
 export const SizeAndShape = {
-    ...DefaultSizeAndShape,
+    args: {
+        icon: mdiEmail,
+    },
+    argTypes: {
+        hasShape: { control: false },
+        size: { control: false },
+    },
+    decorators: [
+        withCombinations({
+            combinations: {
+                cols: { key: 'size', options: withUndefined(iconSizes) },
+                rows: {
+                    Default: {},
+                    'Has shape': { hasShape: true },
+                },
+            },
+        }),
+    ],
 };
 
 /**

package/src/components/icon/Icon.test.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
-
+import { mdiAlertCircle } from '@lumx/icons';
+import { ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 
 import { getByClassName, getByTagName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
-import Tests from '@lumx/core/js/components/Icon/Tests';
 import { Icon, IconProps } from './Icon';
 
 const CLASSNAME = Icon.className as string;
@@ -28,7 +27,89 @@ const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions =
 };
 
 describe(`<${Icon.displayName}>`, () => {
-    Tests((props: IconProps, { wrapper }: any) => render(<Icon {...props} />, { wrapper }));
+    describe('Props', () => {
+        it('should render default', () => {
+            const { i, svg, path, props } = setup();
+
+            expect(i).toBeInTheDocument();
+            expect(i).toHaveClass(CLASSNAME);
+            expect(i?.className).toMatchInlineSnapshot('"lumx-icon lumx-icon--no-shape lumx-icon--path"');
+
+            expect(svg).toBeInTheDocument();
+            expect(svg).toHaveAttribute('aria-hidden', 'true');
+            expect(svg).not.toHaveAttribute('role');
+
+            expect(path).toBeInTheDocument();
+            expect(path).toHaveAttribute('d', props.icon);
+        });
+
+        it('should adapt svg with alternate text', () => {
+            const { svg, props } = setup({ alt: 'Alternate text' });
+            expect(svg).toHaveAttribute('aria-label', props.alt);
+            expect(svg).not.toHaveAttribute('aria-hidden');
+            expect(svg).toHaveAttribute('role');
+        });
+
+        describe('size', () => {
+            it('should render size', () => {
+                const { i } = setup({ size: Size.s });
+                expect(i).toHaveClass('lumx-icon--size-s');
+            });
+
+            it('should adapt xxs size with hasShape', () => {
+                const { i } = setup({ hasShape: true, size: Size.xxs });
+                expect(i).toHaveClass('lumx-icon--size-s');
+            });
+
+            it('should adapt xs size with hasShape', () => {
+                const { i } = setup({ hasShape: true, size: Size.xs });
+                expect(i).toHaveClass('lumx-icon--size-s');
+            });
+
+            it('should adapt xxl size with hasShape', () => {
+                const { i } = setup({ hasShape: true, size: Size.xxl });
+                expect(i).toHaveClass('lumx-icon--size-xl');
+            });
+
+            it('should add default size with hasShape', () => {
+                const { i } = setup({ hasShape: true });
+                expect(i).toHaveClass('lumx-icon--size-m');
+            });
+        });
+
+        describe('color', () => {
+            it('should render color and color variant', () => {
+                const { i } = setup({
+                    color: ColorPalette.primary,
+                    colorVariant: ColorVariant.D1,
+                });
+                expect(i).toHaveClass('lumx-icon--color-primary lumx-icon--color-variant-D1');
+            });
+
+            it('should improve yellow icon color contrast with alert circle icon', () => {
+                const { i } = setup({
+                    color: ColorPalette.yellow,
+                    icon: mdiAlertCircle,
+                });
+                expect(i).toHaveClass('lumx-icon--color-yellow lumx-icon--has-dark-layer');
+            });
+
+            it('should set a default color on dark theme', () => {
+                const { i } = setup({ theme: Theme.dark });
+                expect(i).toHaveClass('lumx-icon--color-light lumx-icon--theme-dark');
+            });
+
+            it('should set a default color on has shape', () => {
+                const { i } = setup({ hasShape: true });
+                expect(i).toHaveClass('lumx-icon--color-dark lumx-icon--has-shape');
+            });
+
+            it('should set a default color variant on has shape & dark color', () => {
+                const { i } = setup({ color: ColorPalette.dark, hasShape: true });
+                expect(i).toHaveClass('lumx-icon--color-variant-L2 lumx-icon--color-dark lumx-icon--has-shape');
+            });
+        });
+    });
 
     // Common tests suite.
     commonTestsSuiteRTL(setup, {