@lumx/react 2.1.8 → 2.1.9-alpha.0

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

@@ -19,8 +19,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="blue"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -35,8 +33,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="dark"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -51,8 +47,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="green"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -67,8 +61,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="primary"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -83,8 +75,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="red"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -99,8 +89,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="secondary"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -115,8 +103,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="yellow"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -135,7 +121,6 @@ exports[`<Flag /> Snapshots and structure should render story 'withIcon' 1`] = `
 >
   <Icon
     className="lumx-flag__icon"
-    colorVariant="D2"
     icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
     size="xxs"
   />

package/src/components/icon/Icon.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 
 import { Color, ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { mdiAlertCircle } from '@lumx/icons';
 
 export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
 
@@ -52,11 +53,20 @@ const DEFAULT_PROPS: Partial<IconProps> = {};
  */
 export const Icon: Comp<IconProps, HTMLElement> = forwardRef((props, ref) => {
     const { className, color, colorVariant, hasShape, icon, size, theme, ...forwardedProps } = props;
+
     let iconColor;
+    let iconColorVariant;
     if (color) {
         iconColor = color;
+        iconColorVariant = colorVariant;
     } else if (theme) {
         iconColor = theme === Theme.light ? ColorPalette.dark : ColorPalette.light;
+
+        if (colorVariant) {
+            iconColorVariant = colorVariant;
+        } else {
+            iconColorVariant = Theme.light ? 'L1' : 'N';
+        }
     } else if (hasShape) {
         iconColor = ColorPalette.dark;
     }
@@ -86,12 +96,16 @@ export const Icon: Comp<IconProps, HTMLElement> = forwardRef((props, ref) => {
                 className,
                 handleBasicClasses({
                     color: iconColor,
-                    colorVariant,
+                    colorVariant: iconColorVariant,
                     hasShape,
                     prefix: CLASSNAME,
                     size: iconSize,
                 }),
                 !hasShape && `${CLASSNAME}--no-shape`,
+                !hasShape &&
+                    iconColor === ColorPalette.yellow &&
+                    icon === mdiAlertCircle &&
+                    `${CLASSNAME}--has-dark-layer`,
                 `${CLASSNAME}--path`,
             )}
         >

package/src/components/link-preview/LinkPreview.tsx

@@ -115,7 +115,7 @@ export const LinkPreview: Comp<LinkPreviewProps, HTMLDivElement> = forwardRef((p
                             className={classNames(`${CLASSNAME}__link`, linkProps?.className)}
                             target="_blank"
                             href={link}
-                            color={theme === Theme.light ? ColorPalette.blue : ColorPalette.light}
+                            color={theme === Theme.light ? ColorPalette.primary : ColorPalette.light}
                             colorVariant={ColorVariant.N}
                         >
                             {link}

package/src/components/link-preview/__snapshots__/LinkPreview.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`<LinkPreview> Snapshots and structure should render correctly 1`] = `
       >
         <Link
           className="lumx-link-preview__link"
-          color="blue"
+          color="primary"
           colorVariant="N"
           target="_blank"
         />
@@ -40,7 +40,7 @@ exports[`<LinkPreview> Snapshots and structure should render correctly 2`] = `
       >
         <Link
           className="lumx-link-preview__link"
-          color="blue"
+          color="primary"
           colorVariant="N"
           target="_blank"
         />

package/src/components/message/Message.tsx

@@ -62,8 +62,10 @@ export const Message: Comp<MessageProps, HTMLDivElement> = forwardRef((props, re
             )}
             {...forwardedProps}
         >
-            {(customIcon || icon) && <Icon className="lumx-message__icon" icon={customIcon || icon} size={Size.xs} />}
-            <div className="lumx-message__text">{children}</div>
+            {(customIcon || icon) && (
+                <Icon className={`${CLASSNAME}__icon`} icon={customIcon || icon} size={Size.xs} color={color} />
+            )}
+            <div className={`${CLASSNAME}__text`}>{children}</div>
         </div>
     );
 });

package/esm/_internal/mdi.js

@@ -1,22 +0,0 @@
-// Material Design Icons v5.8.55
-var mdiAlert = "M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z";
-var mdiAlertCircle = "M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z";
-var mdiArrowDown = "M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z";
-var mdiArrowUp = "M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z";
-var mdiCheck = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z";
-var mdiCheckCircle = "M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z";
-var mdiChevronDown = "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z";
-var mdiChevronLeft = "M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z";
-var mdiChevronRight = "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z";
-var mdiChevronUp = "M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z";
-var mdiClose = "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z";
-var mdiCloseCircle = "M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z";
-var mdiDragVertical = "M9,3H11V5H9V3M13,3H15V5H13V3M9,7H11V9H9V7M13,7H15V9H13V7M9,11H11V13H9V11M13,11H15V13H13V11M9,15H11V17H9V15M13,15H15V17H13V15M9,19H11V21H9V19M13,19H15V21H13V19Z";
-var mdiImageBrokenVariant = "M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41";
-var mdiInformation = "M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z";
-var mdiMenuDown = "M7,10L12,15L17,10H7Z";
-var mdiRadioboxBlank = "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 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,2Z";
-var mdiRadioboxMarked = "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 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,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z";
-
-export { mdiInformation as a, mdiCheckCircle as b, mdiAlertCircle as c, mdiClose as d, mdiCheck as e, mdiChevronRight as f, mdiChevronLeft as g, mdiDragVertical as h, mdiChevronUp as i, mdiChevronDown as j, mdiRadioboxMarked as k, mdiRadioboxBlank as l, mdiAlert as m, mdiCloseCircle as n, mdiMenuDown as o, mdiArrowUp as p, mdiArrowDown as q, mdiImageBrokenVariant as r };
-//# sourceMappingURL=mdi.js.map