@lumx/react 3.12.1-alpha.5 → 3.12.1-alpha.7

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.12.1-alpha.5",
-        "@lumx/icons": "^3.12.1-alpha.5",
+        "@lumx/core": "^3.12.1-alpha.7",
+        "@lumx/icons": "^3.12.1-alpha.7",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -110,5 +110,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.12.1-alpha.5"
+    "version": "3.12.1-alpha.7"
 }

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

@@ -1,14 +1,4 @@
-import {
-    ColorPalette,
-    ColorVariant,
-    FlexBox,
-    Icon,
-    Text,
-    Link,
-    Typography,
-    TypographyInterface,
-    TypographyTitleCustom,
-} from '@lumx/react';
+import { ColorPalette, ColorVariant, Link, Typography, TypographyInterface, TypographyTitleCustom } from '@lumx/react';
 import React from 'react';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 import { colorArgType, colorVariantArgType } from '@lumx/react/stories/controls/color';
@@ -16,10 +6,6 @@ import { iconArgType } from '@lumx/react/stories/controls/icons';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
 import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
-import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
-import { withThemedBackground } from '@lumx/react/stories/decorators/withThemedBackground';
-import { mdiEarth, mdiFoodApple, mdiPencil } from '@lumx/icons/override/generated';
-import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
 
 const linkTypographies = { ...TypographyInterface, ...TypographyTitleCustom };
 
@@ -43,6 +29,28 @@ export const Default = {
     args: { href: 'https://example.com', target: '_blank' },
 };
 
+/**
+ * Disabled
+ */
+export const Disabled = {
+    args: { ...Default.args, children: 'Link (disabled)', isDisabled: true },
+};
+
+/**
+ * Using onClick transforms the link into a <button> in DOM
+ */
+export const ButtonLink = {
+    argTypes: { onClick: { action: true } },
+    args: { children: 'Button link' },
+};
+
+/**
+ * Button link disabled
+ */
+export const ButtonLinkDisabled = {
+    args: { ...ButtonLink.args, children: 'Button link (disabled)', isDisabled: true },
+};
+
 /**
  * Use custom component instead of <a> or <button>
  */
@@ -68,51 +76,10 @@ export const WithCustomizableTypography = {
         </>
     ),
 };
-
-/**
- * Show state combinations
- */
-export const AllStates = {
-    argTypes: {
-        isDisabled: { control: false },
-    },
-    decorators: [
-        withThemedBackground(),
-        withCombinations({
-            combinations: {
-                sections: {
-                    Default: {},
-                    'with icon': {
-                        children: ['Link', <Icon key="icon" icon={mdiEarth} />, 'with icon'],
-                    },
-                },
-                cols: {
-                    Default: {},
-                    Disabled: { isDisabled: true },
-                    Focused: { 'data-focus-visible-added': true },
-                    Hovered: { 'data-lumx-hover': true },
-                },
-                rows: {
-                    Default: {},
-                    'color=red': { color: 'red' },
-                    'theme=dark': { theme: 'dark' },
-                    'theme=dark & color=red': { theme: 'dark', color: 'red' },
-                },
-            },
-        }),
-        withWrapper({ orientation: 'horizontal', vAlign: 'space-evenly', wrap: true, gap: 'huge' }, FlexBox),
-    ],
-};
-
 /**
  * Show all typographies
  */
 export const AllTypography = {
-    args: {
-        children: ['Link', <Icon key="icon" icon={mdiEarth} />, 'with icon'],
-        rightIcon: mdiPencil,
-        leftIcon: mdiFoodApple,
-    },
     argTypes: {
         typography: { control: false },
     },
@@ -142,33 +109,3 @@ export const AllColors = {
         }),
     ],
 };
-
-/**
- * Check how link inherit the parent typography & color
- */
-export const ParentTypographyAndColor = {
-    args: {
-        children: ['Link', <Icon key="icon" icon={mdiEarth} />, 'with icon'],
-        'parent.typography': undefined,
-        'parent.color': undefined,
-    },
-    render: ({ parent: { typography, color }, ...args }: any) => (
-        <Text as="p" color={color} typography={typography}>
-            <Link {...args} />
-        </Text>
-    ),
-    decorators: [
-        withNestedProps(),
-        withCombinations({
-            combinations: {
-                sections: { Button: {}, Link: { href: '#' } },
-                rows: {
-                    Default: {},
-                    'Parent typography=title': { 'parent.typography': 'title' },
-                    'Parent color=red': { 'parent.color': 'red' },
-                },
-            },
-        }),
-        withWrapper({ orientation: 'horizontal', vAlign: 'space-evenly', wrap: true, gap: 'huge' }, FlexBox),
-    ],
-};

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

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { ColorPalette, ColorVariant, Icon, Typography } from '@lumx/react';
+import { ColorPalette, ColorVariant, Typography } from '@lumx/react';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render, screen } from '@testing-library/react';
 import { mdiCheck, mdiPlus } from '@lumx/icons';
 import { Link, LinkProps } from './Link';
@@ -15,9 +15,11 @@ const CLASSNAME = Link.className as string;
 const setup = (props: LinkProps = {}) => {
     render(<Link {...props} />);
     const link = getByClassName(document.body, CLASSNAME);
+    const content = queryByClassName(link, `${CLASSNAME}__content`);
     const rightIcon = queryByClassName(link, `${CLASSNAME}__right-icon`);
     const leftIcon = queryByClassName(link, `${CLASSNAME}__left-icon`);
-    return { props, link, rightIcon, leftIcon };
+
+    return { props, link, content, rightIcon, leftIcon };
 };
 
 describe(`<${Link.displayName}>`, () => {
@@ -40,12 +42,14 @@ describe(`<${Link.displayName}>`, () => {
                 color: ColorPalette.primary,
                 colorVariant: ColorVariant.D1,
             });
-            expect(link.className).toBe('lumx-link lumx-link--color-primary lumx-link--color-variant-D1');
+            expect(link.className).toMatchInlineSnapshot(
+                '"lumx-link lumx-link--color-primary lumx-link--color-variant-D1"',
+            );
         });
 
         it('should render typography', () => {
-            const { link } = setup({ href: 'https://google.com', typography: Typography.title });
-            expect(link.className).toBe('lumx-link lumx-link--has-typography lumx-typography-title');
+            const { content } = setup({ href: 'https://google.com', typography: Typography.title });
+            expect(content?.className).toMatchInlineSnapshot('undefined');
         });
 
         it('should render a button', () => {
@@ -55,26 +59,10 @@ describe(`<${Link.displayName}>`, () => {
             expect(link).toBe(screen.queryByRole('button', { name }));
         });
 
-        it('should render disabled link as button', () => {
-            const name = 'Link';
-            const { link } = setup({ href: 'https://google.com', isDisabled: true, children: name });
-            expect(link).toBe(screen.queryByRole('button', { name }));
-        });
-
         it('should render with icons', () => {
-            const { link } = setup({
-                leftIcon: mdiCheck,
-                children: ['Link', <Icon key="icon" icon={mdiCheck} />, 'with icons'],
-                rightIcon: mdiPlus,
-            });
-            const icons = queryAllByClassName(link, Icon.className as string);
-            expect(icons).toHaveLength(3);
-
-            // Icons are all wrapped with spaces
-            for (const icon of icons) {
-                expect((icon.previousSibling as any).textContent).toEqual(' ');
-                expect((icon.nextSibling as any).textContent).toEqual(' ');
-            }
+            const { rightIcon, leftIcon } = setup({ rightIcon: mdiPlus, leftIcon: mdiCheck });
+            expect(rightIcon).toBeInTheDocument();
+            expect(leftIcon).toBeInTheDocument();
         });
     });
 

package/src/components/link/Link.tsx

@@ -1,12 +1,14 @@
-import React from 'react';
+import React, { RefObject, useMemo } from 'react';
+
+import isEmpty from 'lodash/isEmpty';
 
 import classNames from 'classnames';
 
-import { ColorPalette, ColorVariant, Icon, Typography } from '@lumx/react';
+import { ColorPalette, ColorVariant, Icon, Size, Typography } from '@lumx/react';
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, getTypographyClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { renderLink } from '@lumx/react/utils/react/renderLink';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { wrapChildrenIconWithSpaces } from '@lumx/react/utils/react/wrapChildrenIconWithSpaces';
 
 type HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
 
@@ -22,17 +24,11 @@ export interface LinkProps extends GenericProps {
     href?: HTMLAnchorProps['href'];
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
-    /**
-     * Left icon (SVG path).
-     * @deprecated Instead, simply nest `<Icon />` in the children
-     */
+    /** Left icon (SVG path). */
     leftIcon?: string;
     /** Custom react component for the link (can be used to inject react router Link). */
     linkAs?: 'a' | any;
-    /**
-     * Right icon (SVG path).
-     * @deprecated Instead, simply nest `<Icon />` in the children
-     */
+    /** Right icon (SVG path). */
     rightIcon?: string;
     /** Link target. */
     target?: HTMLAnchorProps['target'];
@@ -52,6 +48,36 @@ const COMPONENT_NAME = 'Link';
  */
 const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
+const getIconSize = (typography?: Typography) => {
+    switch (typography) {
+        case Typography.display1:
+            return Size.m;
+
+        case Typography.headline:
+        case Typography.title:
+        case Typography.custom.title1:
+        case Typography.custom.title2:
+        case Typography.custom.title3:
+        case Typography.custom.title4:
+        case Typography.custom.title5:
+        case Typography.custom.title6:
+        case Typography.body2:
+        case Typography.subtitle2:
+            return Size.s;
+
+        case Typography.body1:
+        case Typography.subtitle1:
+            return Size.xs;
+
+        case Typography.caption:
+        case Typography.overline:
+            return Size.xxs;
+
+        default:
+            return Size.s;
+    }
+};
+
 /**
  * Link component.
  *
@@ -75,37 +101,58 @@ export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>
         typography,
         ...forwardedProps
     } = props;
+    const renderedChildren = useMemo(
+        () => (
+            <>
+                {leftIcon && !isEmpty(leftIcon) && (
+                    <Icon icon={leftIcon} className={`${CLASSNAME}__left-icon`} size={getIconSize(typography)} />
+                )}
 
-    const isLink = linkAs || href;
-    const Component = isLink && !isDisabled ? linkAs || 'a' : 'button';
-    const baseProps: React.ComponentProps<typeof Component> = {};
-    if (Component === 'button') {
-        baseProps.type = 'button';
-        baseProps.disabled = isDisabled;
-    } else if (isLink) {
-        baseProps.href = href;
-        baseProps.target = target;
-    }
+                {children && (
+                    <span
+                        className={classNames(`${CLASSNAME}__content`, {
+                            [`lumx-typography-${typography}`]: typography,
+                        })}
+                    >
+                        {children}
+                    </span>
+                )}
+
+                {rightIcon && !isEmpty(rightIcon) && (
+                    <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} size={getIconSize(typography)} />
+                )}
+            </>
+        ),
+        [leftIcon, typography, children, rightIcon],
+    );
 
-    return (
-        <Component
-            ref={ref}
-            {...forwardedProps}
-            {...baseProps}
-            className={classNames(
-                className,
-                handleBasicClasses({ prefix: CLASSNAME, color, colorVariant, hasTypography: !!typography }),
-                typography && getTypographyClassName(typography),
-            )}
-        >
-            {wrapChildrenIconWithSpaces(
-                <>
-                    {leftIcon && <Icon icon={leftIcon} className={`${CLASSNAME}__left-icon`} />}
-                    {children && <span className={`${CLASSNAME}__content`}>{children}</span>}
-                    {rightIcon && <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} />}
-                </>,
-            )}
-        </Component>
+    /**
+     * If there is no linkAs prop and no href, we returned a <button> instead of a <a>.
+     * If the component is disabled, we also returned a <button> since disabled is not compatible with <a>.
+     */
+    if ((!linkAs && isEmpty(href)) || isDisabled) {
+        return (
+            <button
+                type="button"
+                {...forwardedProps}
+                ref={ref as RefObject<HTMLButtonElement>}
+                disabled={isDisabled}
+                className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, colorVariant }))}
+            >
+                {renderedChildren}
+            </button>
+        );
+    }
+    return renderLink(
+        {
+            linkAs,
+            ...forwardedProps,
+            href,
+            target,
+            className: classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, colorVariant })),
+            ref: ref as RefObject<HTMLAnchorElement>,
+        },
+        renderedChildren,
     );
 });
 Link.displayName = COMPONENT_NAME;

package/src/components/text/Text.test.tsx

@@ -4,7 +4,7 @@ import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { mdiEarth } from '@lumx/icons';
 import { Icon } from '@lumx/react';
 import { render } from '@testing-library/react';
-import { getByClassName, queryAllByClassName } from '@lumx/react/testing/utils/queries';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
 import { Text, TextProps } from '.';
 
 const setup = (props: Partial<TextProps> = {}) => {
@@ -69,14 +69,34 @@ describe(`<${Text.displayName}>`, () => {
 
         it('should wrap icons with spaces', () => {
             const { element } = setup({ children: ['Some text', <Icon key="icon" icon={mdiEarth} />, 'with icon'] });
-            const icons = queryAllByClassName(element, Icon.className as string);
-            expect(icons).toHaveLength(1);
-
-            // Icons are all wrapped with spaces
-            for (const icon of icons) {
-                expect((icon.previousSibling as any).textContent).toEqual(' ');
-                expect((icon.nextSibling as any).textContent).toEqual(' ');
-            }
+            // Spaces have been inserted around the icon.
+            expect(element).toMatchInlineSnapshot(`
+                <span
+                  class="lumx-text"
+                >
+                  Some text
+                   
+                  <i
+                    class="lumx-icon lumx-icon--no-shape lumx-icon--path"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      height="1em"
+                      preserveAspectRatio="xMidYMid meet"
+                      style="vertical-align: -0.125em;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M17.9 17.39A2 2 0 0 0 16 16h-1v-3a1 1 0 0 0-1-1H8v-2h2a1 1 0 0 0 1-1V7h2a2 2 0 0 0 2-2v-.41a7.98 7.98 0 0 1 2.9 12.8M11 19.93a8 8 0 0 1-6.79-9.72L9 15v1a2 2 0 0 0 2 2m1-16A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </i>
+                   
+                  with icon
+                </span>
+            `);
         });
 
         it('should render dangerouslySetInnerHTML', () => {

package/src/components/text/Text.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { Children, Fragment } from 'react';
 
 import classNames from 'classnames';
 
-import { ColorPalette, ColorVariant, Typography, WhiteSpace } from '@lumx/react';
-import { GenericProps, TextElement } from '@lumx/react/utils/type';
+import { Icon, ColorPalette, ColorVariant, Typography, WhiteSpace } from '@lumx/react';
+import { GenericProps, TextElement, isComponent } from '@lumx/react/utils/type';
 import {
     getFontColorClassName,
     getRootClassName,
@@ -13,7 +13,6 @@ import {
 import { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';
 import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { wrapChildrenIconWithSpaces } from '@lumx/react/utils/react/wrapChildrenIconWithSpaces';
 
 /**
  * Defines the props of the component.
@@ -133,7 +132,14 @@ export const Text = forwardRef<TextProps>((props, ref) => {
             style={{ ...truncateLinesStyle, ...whiteSpaceStyle, ...style }}
             {...forwardedProps}
         >
-            {wrapChildrenIconWithSpaces(children)}
+            {children &&
+                Children.toArray(children).map((child, index) => {
+                    // Force wrap spaces around icons to make sure they are never stuck against text.
+                    if (isComponent(Icon)(child)) {
+                        return <Fragment key={child.key || index}> {child} </Fragment>;
+                    }
+                    return child;
+                })}
         </Component>
     );
 });

package/src/stories/controls/icons.ts

@@ -63,7 +63,6 @@ import {
 export const iconArgType = {
     control: { type: 'select' },
     options: {
-        undefined,
         mdiAbTesting,
         mdiAbjadArabic,
         mdiAccount,

package/src/stories/generated/Link/Demos.stories.tsx

@@ -0,0 +1,8 @@
+/**
+ * File generated when storybook is started. Do not edit directly!
+ */
+export default { title: 'LumX components/link/Link Demos' };
+
+export { App as Default } from './default';
+export { App as Implicit } from './implicit';
+export { App as Sizes } from './sizes';

package/src/utils/react/wrapChildrenIconWithSpaces.test.tsx

@@ -1,37 +0,0 @@
-import React, { Fragment } from 'react';
-
-import { Icon } from '@lumx/react';
-import { mdiEarth, mdiFoodApple, mdiPencil } from '@lumx/icons';
-import { wrapChildrenIconWithSpaces } from './wrapChildrenIconWithSpaces';
-
-describe(wrapChildrenIconWithSpaces, () => {
-    it('should ignore null or undefined children', () => {
-        expect(wrapChildrenIconWithSpaces(undefined)).toBeUndefined();
-        expect(wrapChildrenIconWithSpaces(null)).toBeUndefined();
-    });
-
-    it('should wrap icons with spaces', () => {
-        expect(
-            wrapChildrenIconWithSpaces(
-                <>
-                    <Icon icon={mdiEarth} />a string
-                    <>
-                        some more string with
-                        <Icon icon={mdiFoodApple} />
-                    </>
-                    {['array with', <Icon key="custom-key" icon={mdiPencil} />]}
-                </>,
-            ),
-        ).toEqual([
-            // prettier-ignore
-            <Fragment key=".0">
-                {' '}
-                <Icon key=".0" icon={mdiEarth} />{' '}a string
-                <Fragment key=".2">
-                    some more string with{' '}<Icon key=".1" icon={mdiFoodApple} />{' '}
-                </Fragment>
-                array with{' '}<Icon key=".3:$custom-key" icon={mdiPencil} />{' '}
-            </Fragment>,
-        ]);
-    });
-});

package/src/utils/react/wrapChildrenIconWithSpaces.tsx

@@ -1,22 +0,0 @@
-import React, { Children } from 'react';
-import { isComponentType } from '@lumx/react/utils/type';
-import { Icon } from '@lumx/react';
-
-/** Force wrap spaces around icons to make sure they are never stuck against text. */
-export function wrapChildrenIconWithSpaces(children: React.ReactNode): React.ReactNode {
-    if (children === null || children === undefined) return undefined;
-    return Children.toArray(children).flatMap((child) => {
-        if (isComponentType(Icon)(child)) {
-            return [' ', child, ' '];
-        }
-        if (
-            React.isValidElement(child) &&
-            child.props &&
-            typeof child.props === 'object' &&
-            'children' in child.props
-        ) {
-            return React.cloneElement(child, undefined, wrapChildrenIconWithSpaces(child.props.children));
-        }
-        return child;
-    });
-}