@lumx/react 2.2.11 → 2.2.12-alpha.1

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.2.11",
-        "@lumx/icons": "^2.2.11",
+        "@lumx/core": "^2.2.12-alpha.1",
+        "@lumx/icons": "^2.2.12-alpha.1",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -120,6 +120,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "2.2.11",
-    "gitHead": "a223105b739e72009fde0ade1919b74b13c3e528"
+    "version": "2.2.12-alpha.1",
+    "gitHead": "85d4c80e91aabae08a93cd09e001768730bd1012"
 }

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

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { mdiEmail } from '@lumx/icons';
-import { ColorPalette, FlexBox, Icon, IconSizes, Size } from '@lumx/react';
+import { ColorPalette, ColorVariant, FlexBox, Icon, IconSizes, Size } from '@lumx/react';
 import { Orientation } from '..';
 
-export default { title: 'LumX components/icon/Icon' };
+export default { title: 'LumX components/icon/Icon', parameters: { hasGreyBackground: true } };
 
 const iconSizes: Array<IconSizes | undefined> = [
     undefined,
@@ -16,42 +16,49 @@ const iconSizes: Array<IconSizes | undefined> = [
     Size.xl,
     Size.xxl,
 ];
-const iconColors = [undefined, ...Object.values(ColorPalette)];
-const iconShapes = [false, true];
 
-export const AllIcon = ({ theme }: any) => {
+const TemplateSizeVariants = ({ hasShape, theme }: any) => (
+    <FlexBox orientation={Orientation.horizontal}>
+        {iconSizes.map((size) => (
+            <FlexBox fillSpace key={`${size}`}>
+                <h2>Size: {size || 'undefined'}</h2>
+                <Icon icon={mdiEmail} size={size} hasShape={hasShape} theme={theme} />
+            </FlexBox>
+        ))}
+    </FlexBox>
+);
+
+export const AllSize = ({ theme }: any) => TemplateSizeVariants({ theme });
+
+export const AllSizeWithShape = ({ theme }: any) => TemplateSizeVariants({ theme, hasShape: true });
+
+const TemplateColorVariants = ({ hasShape, theme }: any) => {
+    const withUndefined = (a: any) => [undefined].concat(Object.values(a));
     return (
-        <>
-            {iconShapes.map((hasShape) => {
-                return (
-                    <>
-                        <h1>{`With shape: ${hasShape}`}</h1>
-                        {iconSizes.map((size) => {
-                            return (
-                                <>
-                                    <h2>{`Size: ${size}`}</h2>
-                                    <FlexBox orientation={Orientation.horizontal}>
-                                        {iconColors.map((color) => {
-                                            return (
-                                                <FlexBox fillSpace key={color}>
-                                                    {`Color: ${color}`}
-                                                    <Icon
-                                                        hasShape={hasShape}
-                                                        icon={mdiEmail}
-                                                        color={color}
-                                                        size={size}
-                                                        theme={theme}
-                                                    />
-                                                </FlexBox>
-                                            );
-                                        })}
-                                    </FlexBox>
-                                </>
-                            );
-                        })}
-                    </>
-                );
-            })}
-        </>
+        <FlexBox orientation={Orientation.horizontal}>
+            {withUndefined(ColorPalette).map((color) => (
+                <FlexBox fillSpace key={`${color}`}>
+                    <small key={`${color}`}>Color: {color || 'undefined'}</small>
+                    <br />
+                    {withUndefined(Object.values(ColorVariant).reverse()).map((colorVariant) => (
+                        <Fragment key={`${colorVariant}`}>
+                            <small>Variant: {colorVariant || 'undefined'}</small>
+                            <Icon
+                                icon={mdiEmail}
+                                color={color}
+                                colorVariant={colorVariant}
+                                size="m"
+                                theme={theme}
+                                hasShape={hasShape}
+                            />
+                        </Fragment>
+                    ))}
+                </FlexBox>
+            ))}
+        </FlexBox>
     );
 };
+
+export const AllColors = ({ theme }: any) => TemplateColorVariants({ theme });
+
+export const AllColorsWithShape = ({ theme }: any) => TemplateColorVariants({ theme, hasShape: true });

package/src/components/icon/Icon.tsx

@@ -19,8 +19,8 @@ export interface IconProps extends GenericProps {
     /** Whether the icon has a shape. */
     hasShape?: boolean;
     /**
-     * Icon (SVG path).draw code (`d` property of the `<path>` SVG element).
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths}
+     * Icon (SVG path) draw code (`d` property of the `<path>` SVG element).
+     * See https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
      */
     icon: string;
     /** Size variant. */
@@ -58,19 +58,30 @@ export const Icon: Comp<IconProps, HTMLElement> = forwardRef((props, ref) => {
 
     let iconColor;
     let iconColorVariant;
+    let iconTheme;
     if (color) {
         iconColor = color;
-        iconColorVariant = colorVariant;
-    } else if (theme) {
-        iconColor = theme === Theme.light ? ColorPalette.dark : ColorPalette.light;
+        iconTheme = theme;
+    }
 
-        if (colorVariant) {
-            iconColorVariant = colorVariant;
+    if (hasShape) {
+        if (theme === Theme.dark && !iconColor) {
+            iconColor = ColorPalette.light;
+            iconTheme = theme;
         } else {
-            iconColorVariant = Theme.light ? 'L1' : 'N';
+            iconColor = iconColor || ColorPalette.dark;
+        }
+    } else if (!iconColor && theme) {
+        iconTheme = theme;
+        iconColor = iconColor || theme === Theme.light ? ColorPalette.dark : ColorPalette.light;
+    }
+
+    if (!iconColorVariant) {
+        if (hasShape && iconColor === ColorPalette.dark) {
+            iconColorVariant = colorVariant || 'L2';
+        } else {
+            iconColorVariant = colorVariant || (theme === Theme.dark ? 'N' : 'L1');
         }
-    } else if (hasShape) {
-        iconColor = ColorPalette.dark;
     }
 
     let iconSize;
@@ -101,6 +112,7 @@ export const Icon: Comp<IconProps, HTMLElement> = forwardRef((props, ref) => {
                     colorVariant: iconColorVariant,
                     hasShape,
                     prefix: CLASSNAME,
+                    theme: iconTheme,
                     size: iconSize,
                 }),
                 !hasShape && `${CLASSNAME}--no-shape`,

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

@@ -26,7 +26,7 @@ exports[`<Icon> Snapshots and structure should render color & color variant 1`]
 
 exports[`<Icon> Snapshots and structure should render correctly 1`] = `
 <i
-  className="lumx-icon lumx-icon--no-shape lumx-icon--path"
+  className="lumx-icon lumx-icon--color-variant-L1 lumx-icon--no-shape lumx-icon--path"
 >
   <svg
     aria-hidden="true"

package/types.d.ts

@@ -1171,8 +1171,8 @@ export interface IconProps extends GenericProps {
 	/** Whether the icon has a shape. */
 	hasShape?: boolean;
 	/**
-	 * Icon (SVG path).draw code (`d` property of the `<path>` SVG element).
-	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths}
+	 * Icon (SVG path) draw code (`d` property of the `<path>` SVG element).
+	 * See https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
 	 */
 	icon: string;
 	/** Size variant. */