@lumx/core 3.20.1-alpha.3 → 3.20.1-alpha.4

package/js/components/Icon/Stories.js

@@ -0,0 +1,40 @@
+import { mdiEmail } from '@lumx/icons';
+
+import { Size } from '@lumx/core/js/constants';
+import { iconArgType } from '@lumx/core/stories/controls/icons';
+import { colorArgType, colorVariantArgType } from '@lumx/react/stories/controls/color';
+import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
+import { Icon } from '.';
+
+const iconSizes = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl];
+
+export default {
+    argTypes: {
+        icon: iconArgType,
+        hasShape: { control: 'boolean' },
+        color: colorArgType,
+        colorVariant: colorVariantArgType,
+    },
+    args: Icon.defaultProps,
+};
+
+export const SizeAndShape = {
+    args: {
+        icon: mdiEmail,
+    },
+    argTypes: {
+        hasShape: { control: false },
+        size: { control: false },
+    },
+    getDecorators: ({ withCombinations }) => [
+        withCombinations({
+            combinations: {
+                cols: { key: 'size', options: withUndefined(iconSizes) },
+                rows: {
+                    Default: {},
+                    'Has shape': { hasShape: true },
+                },
+            },
+        }),
+    ],
+};

package/js/components/Icon/Tests.tsx

@@ -0,0 +1,120 @@
+import { mdiAlertCircle } from '@lumx/icons';
+import { ColorPalette, ColorVariant, Size, Theme } from '@lumx/core/js/constants';
+
+import { getByClassName, getByTagName } from '@lumx/react/testing/utils/queries';
+import { IconProps, Icon } from '.';
+
+const CLASSNAME = Icon.className as string;
+
+type SetupProps = Partial<IconProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propsOverride: SetupProps = {}, { wrapper, render }: any = {}) => {
+    const props: IconProps = {
+        icon: 'mdiPlus',
+        ...propsOverride,
+    };
+
+    render(props, { wrapper });
+
+    const i = getByClassName(document.body, CLASSNAME);
+    const svg = getByTagName(i, 'svg');
+    const path = getByTagName(svg, 'path');
+
+    return { i, svg, path, props };
+};
+
+export default (render: any) => {
+    describe(`<${Icon.displayName}>`, () => {
+        describe('Props', () => {
+            it('should render default', () => {
+                const { i, svg, path, props } = setup({}, { render });
+                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' }, { render });
+                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 }, { render });
+                    expect(i).toHaveClass('lumx-icon--size-s');
+                });
+
+                it('should adapt xxs size with hasShape', () => {
+                    const { i } = setup({ hasShape: true, size: Size.xxs }, { render });
+                    expect(i).toHaveClass('lumx-icon--size-s');
+                });
+
+                it('should adapt xs size with hasShape', () => {
+                    const { i } = setup({ hasShape: true, size: Size.xs }, { render });
+                    expect(i).toHaveClass('lumx-icon--size-s');
+                });
+
+                it('should adapt xxl size with hasShape', () => {
+                    const { i } = setup({ hasShape: true, size: Size.xxl }, { render });
+                    expect(i).toHaveClass('lumx-icon--size-xl');
+                });
+
+                it('should add default size with hasShape', () => {
+                    const { i } = setup({ hasShape: true }, { render });
+                    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,
+                        },
+                        { render },
+                    );
+                    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,
+                        },
+                        { render },
+                    );
+                    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 }, { render });
+                    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 }, { render });
+                    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 }, { render });
+                    expect(i).toHaveClass('lumx-icon--color-variant-L2 lumx-icon--color-dark lumx-icon--has-shape');
+                });
+            });
+        });
+    });
+};

package/js/components/Icon/index.tsx

@@ -64,6 +64,7 @@ export const Icon = (props: IconProps) => {
         ref,
         ...forwardedProps
     } = props;
+
     const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
 
     // Color

package/package.json

@@ -6,7 +6,7 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/icons": "3.19.0",
+        "@lumx/icons": "^3.20.1-alpha.4",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.17.21",
@@ -34,15 +34,18 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "3.20.1-alpha.3",
+    "version": "3.20.1-alpha.4",
     "devDependencies": {
         "@rollup/plugin-commonjs": "^19.0.2",
         "@rollup/plugin-terser": "^0.4.4",
         "@rollup/plugin-typescript": "^12.1.4",
+        "@testing-library/dom": "^9.3.4",
+        "@testing-library/jest-dom": "^5.16.4",
         "@types/react": "^17.0.2",
         "autoprefixer": "^9.7.4",
         "glob": "^7.1.6",
         "postcss": "^8.5.6",
+        "react": "^17.0.2",
         "rollup": "^2.79.1",
         "rollup-plugin-cleaner": "^1.0.0",
         "rollup-plugin-copy": "^3.5.0",

package/stories/controls/color.ts

@@ -0,0 +1,7 @@
+import { ColorPalette, ColorVariant } from '@lumx/core/js/constants';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
+
+export const ALL_COLORS = Object.values(ColorPalette);
+export const colorArgType = getSelectArgType(withUndefined(ALL_COLORS));
+export const colorVariantArgType = getSelectArgType(ColorVariant);

package/stories/controls/icons.ts

@@ -0,0 +1,126 @@
+import {
+    mdiAbTesting,
+    mdiAbjadArabic,
+    mdiAccount,
+    mdiAccountBox,
+    mdiAlert,
+    mdiAlertCircle,
+    mdiArrowDown,
+    mdiArrowUp,
+    mdiAtom,
+    mdiBee,
+    mdiBell,
+    mdiBullhornOutline,
+    mdiCheck,
+    mdiCheckCircle,
+    mdiChevronDown,
+    mdiChevronLeft,
+    mdiChevronRight,
+    mdiChevronUp,
+    mdiClose,
+    mdiCloseCircle,
+    mdiDelete,
+    mdiDotsHorizontal,
+    mdiDragVertical,
+    mdiEarth,
+    mdiEmail,
+    mdiEye,
+    mdiFileEdit,
+    mdiFlag,
+    mdiFolder,
+    mdiFolderGoogleDrive,
+    mdiFoodApple,
+    mdiGoogleCirclesExtended,
+    mdiHeart,
+    mdiHome,
+    mdiImageBroken,
+    mdiInformation,
+    mdiLink,
+    mdiMagnifyMinusOutline,
+    mdiMagnifyPlusOutline,
+    mdiMenuDown,
+    mdiMessageTextOutline,
+    mdiMinus,
+    mdiOpenInNew,
+    mdiPauseCircleOutline,
+    mdiPencil,
+    mdiPlay,
+    mdiPlayCircleOutline,
+    mdiPlus,
+    mdiRadioboxBlank,
+    mdiRadioboxMarked,
+    mdiReply,
+    mdiSend,
+    mdiStar,
+    mdiTextBox,
+    mdiTextBoxPlus,
+    mdiTram,
+    mdiTranslate,
+    mdiViewList,
+} from '@lumx/icons';
+
+// Small selection of mdi icons to
+export const iconArgType = {
+    control: { type: 'select' },
+    options: {
+        undefined,
+        mdiAbTesting,
+        mdiAbjadArabic,
+        mdiAccount,
+        mdiAccountBox,
+        mdiAlert,
+        mdiAlertCircle,
+        mdiArrowDown,
+        mdiArrowUp,
+        mdiAtom,
+        mdiBee,
+        mdiBell,
+        mdiBullhornOutline,
+        mdiCheck,
+        mdiCheckCircle,
+        mdiChevronDown,
+        mdiChevronLeft,
+        mdiChevronRight,
+        mdiChevronUp,
+        mdiClose,
+        mdiCloseCircle,
+        mdiDelete,
+        mdiDotsHorizontal,
+        mdiDragVertical,
+        mdiEarth,
+        mdiEmail,
+        mdiEye,
+        mdiFileEdit,
+        mdiFlag,
+        mdiFolder,
+        mdiFolderGoogleDrive,
+        mdiFoodApple,
+        mdiGoogleCirclesExtended,
+        mdiHeart,
+        mdiHome,
+        mdiImageBroken,
+        mdiInformation,
+        mdiLink,
+        mdiMagnifyMinusOutline,
+        mdiMagnifyPlusOutline,
+        mdiMenuDown,
+        mdiMessageTextOutline,
+        mdiMinus,
+        mdiOpenInNew,
+        mdiPauseCircleOutline,
+        mdiPencil,
+        mdiPlay,
+        mdiPlayCircleOutline,
+        mdiPlus,
+        mdiRadioboxBlank,
+        mdiRadioboxMarked,
+        mdiReply,
+        mdiSend,
+        mdiStar,
+        mdiTextBox,
+        mdiTextBoxPlus,
+        mdiTram,
+        mdiTranslate,
+        mdiViewList,
+    },
+};

package/stories/controls/selectArgType.ts

@@ -0,0 +1,8 @@
+export const getSelectArgType = <E>(
+    options: Array<E> | Record<string, E>,
+    type: 'select' | 'inline-radio' = 'inline-radio',
+) => ({
+    control: { type },
+    options: Object.values(options),
+    mapping: !Array.isArray(options) ? options : undefined,
+});

package/stories/controls/withUndefined.ts

@@ -0,0 +1 @@
+export const withUndefined = <E>(options: Array<E> | Record<string, E>) => [undefined, ...Object.values(options)];

package/testing/utils/queries.ts

@@ -0,0 +1,19 @@
+import { buildQueries } from '@testing-library/dom';
+
+export const queryAllByClassName = (container: HTMLElement, className: string) =>
+    Array.from(container.getElementsByClassName(className) as HTMLCollectionOf<HTMLElement>);
+
+export const [queryByClassName, getAllByClassName, getByClassName, findAllByClassName, findByClassName] = buildQueries(
+    queryAllByClassName,
+    (_, className) => `Multiple \`.${className}\` found`,
+    (_, className) => `No \`.${className}\` found`,
+);
+
+export const queryAllByTagName = (container: HTMLElement, tagName: string) =>
+    Array.from(container.getElementsByTagName(tagName) as HTMLCollectionOf<HTMLElement>);
+
+export const [queryByTagName, getAllByTagName, getByTagName, findAllByTagName, findByTagName] = buildQueries(
+    queryAllByTagName,
+    (_, tagName) => `Multiple \`${tagName}\` found`,
+    (_, tagName) => `No \`${tagName}\` found`,
+);