@lumx/react 3.20.1-alpha.9 → 3.21.0

package/src/components/icon/Icon.tsx

@@ -1,9 +1,52 @@
-import { Icon as UI, IconProps, IconSizes } from '@lumx/core/js/components/Icon';
+import React from 'react';
 
+import classNames from 'classnames';
+
+import { mdiAlertCircle } from '@lumx/icons';
+import { ColorPalette, ColorVariant, ColorWithVariants, Size, Theme } from '@lumx/react';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses, resolveColorWithVariants } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
-export type { IconProps, IconSizes };
+export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+
+/**
+ * Defines the props of the component.
+ */
+export interface IconProps extends GenericProps, HasTheme {
+    /** Color variant. */
+    color?: ColorWithVariants;
+    /** Lightened or darkened variant of the selected icon color. */
+    colorVariant?: ColorVariant;
+    /** Whether the icon has a shape. */
+    hasShape?: boolean;
+    /**
+     * 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. */
+    size?: IconSizes;
+    /** Sets an alternative text on the svg. Will set an `img` role to the svg. */
+    alt?: string;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Icon';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<IconProps> = {};
+
 /**
  * Icon component.
  *
@@ -13,10 +56,80 @@ export type { IconProps, IconSizes };
  */
 export const Icon = forwardRef<IconProps, HTMLElement>((props, ref) => {
     const defaultTheme = useTheme();
+    const {
+        className,
+        color: propColor,
+        colorVariant: propColorVariant,
+        hasShape,
+        icon,
+        size,
+        theme = defaultTheme,
+        alt,
+        ...forwardedProps
+    } = props;
+    const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
 
-    return <UI ref={ref} {...props} theme={props.theme || defaultTheme} />;
-});
+    // Color
+    let iconColor = color;
+    if (!iconColor && (hasShape || theme)) {
+        iconColor = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
+    }
+
+    // Color variant
+    let iconColorVariant = colorVariant;
+    if (!iconColorVariant && hasShape && iconColor === ColorPalette.dark) {
+        iconColorVariant = 'L2';
+    }
 
-Icon.displayName = UI.displayName;
-Icon.className = UI.className;
-Icon.defaultProps = UI.defaultProps;
+    // Size
+    let iconSize = size;
+    if (size && hasShape) {
+        if (size === Size.xxs || size === Size.xs) {
+            iconSize = Size.s;
+        } else if (size === Size.xxl) {
+            iconSize = Size.xl;
+        }
+    } else if (hasShape) {
+        iconSize = Size.m;
+    }
+
+    return (
+        <i
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    color: iconColor,
+                    colorVariant: iconColorVariant,
+                    hasShape,
+                    prefix: CLASSNAME,
+                    theme,
+                    size: iconSize,
+                }),
+                !hasShape && `${CLASSNAME}--no-shape`,
+                !hasShape &&
+                    iconColor === ColorPalette.yellow &&
+                    icon === mdiAlertCircle &&
+                    `${CLASSNAME}--has-dark-layer`,
+                `${CLASSNAME}--path`,
+            )}
+        >
+            <svg
+                aria-hidden={alt ? undefined : 'true'}
+                role={alt ? 'img' : undefined}
+                aria-label={alt}
+                height="1em"
+                preserveAspectRatio="xMidYMid meet"
+                style={{ verticalAlign: '-0.125em' }}
+                viewBox="0 0 24 24"
+                width="1em"
+            >
+                <path d={icon} fill="currentColor" />
+            </svg>
+        </i>
+    );
+});
+Icon.displayName = COMPONENT_NAME;
+Icon.className = CLASSNAME;
+Icon.defaultProps = DEFAULT_PROPS;

package/src/components/image-block/ImageBlock.stories.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {
     Alignment,
     AspectRatio,

package/src/components/image-block/ImageBlock.test.tsx

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

package/src/components/image-block/ImageBlock.tsx

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

package/src/components/image-block/ImageCaption.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 
 import { FlexBox, HorizontalAlignment, Text, TextProps, useTheme } from '@lumx/react';
 import { HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';

package/src/components/image-lightbox/ImageLightbox.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { IMAGES } from '@lumx/react/stories/controls/image';
 import { Button, Mosaic, ImageLightbox, ImageLightboxProps, Chip, ChipGroup } from '@lumx/react';
 import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';

package/src/components/image-lightbox/ImageLightbox.test.tsx

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

package/src/components/image-lightbox/types.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { IconButtonProps, LightboxProps, SlideshowProps, ThumbnailProps } from '@lumx/react';
 import type { HasClassName } from '@lumx/react/utils/type';
 import type { ImageCaptionMetadata } from '@lumx/react/components/image-block/ImageCaption';

package/src/components/inline-list/InlineList.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { mdiEarth } from '@lumx/icons';
 import { Icon, Text } from '@lumx/react';
 import { withResizableBox } from '@lumx/react/stories/decorators/withResizableBox';

package/src/components/inline-list/InlineList.test.tsx

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

package/src/components/inline-list/InlineList.tsx

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

package/src/components/input-helper/InputHelper.test.tsx

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

package/src/components/input-helper/InputHelper.tsx

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

package/src/components/input-label/InputLabel.stories.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Typography } from '@lumx/react';
 
 import { InputLabel } from './InputLabel';

package/src/components/input-label/InputLabel.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Theme, Typography } from '@lumx/react';
 import { getByClassName } from '@lumx/react/testing/utils/queries';
 import { getTypographyClassName } from '@lumx/core/js/utils/className';

package/src/components/input-label/InputLabel.tsx

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

package/src/components/lightbox/Lightbox.test.tsx

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

package/src/components/lightbox/Lightbox.tsx

@@ -1,4 +1,4 @@
-import { RefObject, useRef, useEffect, AriaAttributes } from 'react';
+import React, { RefObject, useRef, useEffect, AriaAttributes } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/link/Link.stories.tsx

@@ -10,6 +10,7 @@ import {
     TypographyTitleCustom,
     GenericBlock,
 } from '@lumx/react';
+import React from 'react';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 import { colorArgType, colorVariantArgType } from '@lumx/react/stories/controls/color';
 import { iconArgType } from '@lumx/react/stories/controls/icons';

package/src/components/link/Link.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { ColorPalette, ColorVariant, Icon, Typography } from '@lumx/react';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/link/Link.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { ColorVariant, ColorWithVariants, Icon, Typography } from '@lumx/react';

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

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

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

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

package/src/components/list/List.stories.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import React, { useRef } from 'react';
 
 import { mdiAccount, mdiOpenInNew } from '@lumx/icons';
 import { Icon, ListDivider, ListProps, ListSubheader, Size } from '@lumx/react';

package/src/components/list/List.test.tsx

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

package/src/components/list/List.tsx

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

package/src/components/list/ListDivider.test.tsx

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

package/src/components/list/ListDivider.tsx

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

package/src/components/list/ListItem.test.tsx

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

package/src/components/list/ListItem.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, Ref, SyntheticEvent, useMemo } from 'react';
+import React, { ReactNode, Ref, SyntheticEvent, useMemo } from 'react';
 
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';

package/src/components/list/ListSubheader.test.tsx

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

package/src/components/list/ListSubheader.tsx

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

package/src/components/message/Message.test.tsx

@@ -1,6 +1,7 @@
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { Kind } from '@lumx/react';
 
+import React from 'react';
 import { queryByRole, render } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { mdiAbTesting } from '@lumx/icons';

package/src/components/message/Message.tsx

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

package/src/components/mosaic/Mosaic.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Mosaic, MosaicProps } from '@lumx/react/components/mosaic/Mosaic';
 import { render, screen, within } from '@testing-library/react';
 import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/mosaic/Mosaic.tsx

@@ -1,4 +1,4 @@
-import { MouseEventHandler, useMemo } from 'react';
+import React, { MouseEventHandler, useMemo } from 'react';
 
 import classNames from 'classnames';
 import take from 'lodash/take';

package/src/components/navigation/Navigation.stories.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {
     mdiHome,
     mdiMessageTextOutline,

package/src/components/navigation/Navigation.test.tsx

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

package/src/components/navigation/Navigation.tsx

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

package/src/components/navigation/NavigationItem.test.tsx

@@ -1,3 +1,5 @@
+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/navigation/NavigationItem.tsx

@@ -1,4 +1,4 @@
-import { ElementType, ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import { Icon, Placement, Size, Tooltip, Text } from '@lumx/react';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { ComponentRef, HasClassName, HasPolymorphicAs, HasRequiredLinkHref, HasTheme } from '@lumx/react/utils/type';

package/src/components/navigation/NavigationSection.test.tsx

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

package/src/components/navigation/NavigationSection.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useContext } from 'react';
+import React, { useRef, useState, useContext } from 'react';
 
 import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 import { Icon, Size, Text, Orientation, Popover, Placement, Theme } from '@lumx/react';

package/src/components/notification/Notification.test.tsx

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

package/src/components/notification/Notification.tsx

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

package/src/components/popover/Popover.test.tsx

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

package/src/components/popover/Popover.tsx

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

package/src/components/popover/usePopoverStyle.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import memoize from 'lodash/memoize';
 import { detectOverflow } from '@popperjs/core';
 

package/src/components/popover-dialog/PopoverDialog.test.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 

package/src/components/popover-dialog/PopoverDialog.tsx

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

package/src/components/post-block/PostBlock.test.tsx

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

package/src/components/post-block/PostBlock.tsx

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

package/src/components/progress/Progress.tsx

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

package/src/components/progress/ProgressCircular.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ProgressCircular, ProgressCircularSize, Size, Text } from '@lumx/react';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';

package/src/components/progress/ProgressCircular.test.tsx

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

package/src/components/progress/ProgressCircular.tsx

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

package/src/components/progress/ProgressLinear.test.tsx

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

package/src/components/progress/ProgressLinear.tsx

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

package/src/components/progress-tracker/ProgressTracker.stories.tsx

@@ -10,7 +10,7 @@ import {
 } from '@lumx/react';
 import cloneDeep from 'lodash/cloneDeep';
 import set from 'lodash/set';
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 export default { title: 'LumX components/progress-tracker/Progress Tracker' };
 

package/src/components/progress-tracker/ProgressTracker.test.tsx

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

package/src/components/progress-tracker/ProgressTrackerProvider.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {
     ProgressTracker,
     ProgressTrackerProvider,

package/src/components/progress-tracker/ProgressTrackerProvider.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useReducer } from 'react';
+import React, { ReactNode, useEffect, useReducer } from 'react';
 import { INIT_STATE, TabProviderContext, reducer } from '../tabs/state';
 
 export interface ProgressTrackerProviderProps {

package/src/components/progress-tracker/ProgressTrackerStep.test.tsx

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

package/src/components/progress-tracker/ProgressTrackerStep.tsx

@@ -1,4 +1,4 @@
-import { FocusEventHandler, KeyboardEventHandler, useCallback } from 'react';
+import React, { FocusEventHandler, KeyboardEventHandler, useCallback } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/progress-tracker/ProgressTrackerStepPanel.test.tsx

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

package/src/components/progress-tracker/ProgressTrackerStepPanel.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { useTabProviderContext } from '@lumx/react/components/tabs/state';

package/src/components/radio-button/RadioButton.test.tsx

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

package/src/components/radio-button/RadioButton.tsx

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