@lumx/react 3.20.1-alpha.14 → 3.20.1-alpha.15

package/src/components/side-navigation/SideNavigation.stories.tsx

@@ -1,191 +0,0 @@
-/* eslint-disable no-script-url */
-import React from 'react';
-
-import { mdiAccount } from '@lumx/icons';
-import { Emphasis, SideNavigation, SideNavigationItem } from '@lumx/react';
-
-export default { title: 'LumX components/side-navigation/Side Navigation' };
-
-const CustomLink: React.FC<{ children?: React.ReactNode }> = ({ children, ...props }) =>
-    React.createElement('a', { ...props, style: { color: 'red' } }, children);
-
-export const Simple = () => (
-    <SideNavigation>
-        <SideNavigationItem label="Navigation item" emphasis={Emphasis.low} toggleButtonProps={{ label: 'Toggle' }} />
-        <SideNavigationItem label="Navigation item" emphasis={Emphasis.low} toggleButtonProps={{ label: 'Toggle' }} />
-        <SideNavigationItem label="Navigation item" emphasis={Emphasis.low} toggleButtonProps={{ label: 'Toggle' }} />
-        <SideNavigationItem
-            label="Navigation item"
-            emphasis={Emphasis.low}
-            linkProps={{ href: 'https://www.google.com' }}
-            toggleButtonProps={{ label: 'Toggle' }}
-        />
-        <SideNavigationItem
-            label="Navigation item"
-            emphasis={Emphasis.low}
-            linkProps={{ href: 'https://www.google.com/not-visited' }}
-            toggleButtonProps={{ label: 'Toggle' }}
-        />
-        <SideNavigationItem
-            label="Navigation item (custom link)"
-            emphasis={Emphasis.low}
-            linkAs={CustomLink}
-            linkProps={{ href: 'https://www.google.com/not-visited-1' }}
-            toggleButtonProps={{ label: 'Toggle' }}
-        />
-        <SideNavigationItem label="Navigation item" emphasis={Emphasis.low} toggleButtonProps={{ label: 'Toggle' }} />
-    </SideNavigation>
-);
-
-export const With3Levels = () => {
-    const [l1IsOpen, setL1IsOpen] = React.useState(true);
-    const [l2IsOpen, setL2IsOpen] = React.useState(true);
-    const toggleL1 = () => setL1IsOpen(!l1IsOpen);
-    const toggleL2 = () => setL2IsOpen(!l2IsOpen);
-
-    return (
-        <SideNavigation>
-            <SideNavigationItem
-                label="Level 1"
-                emphasis={Emphasis.high}
-                isOpen={l1IsOpen}
-                onClick={toggleL1}
-                toggleButtonProps={{ label: 'Toggle' }}
-            >
-                <SideNavigationItem
-                    label="Level 2"
-                    emphasis={Emphasis.medium}
-                    isOpen={l2IsOpen}
-                    onClick={toggleL2}
-                    toggleButtonProps={{ label: 'Toggle' }}
-                >
-                    <SideNavigationItem
-                        label="Level 3"
-                        emphasis={Emphasis.low}
-                        toggleButtonProps={{ label: 'Toggle' }}
-                    />
-                </SideNavigationItem>
-            </SideNavigationItem>
-        </SideNavigation>
-    );
-};
-
-export const With3LevelsAndIcons = () => {
-    const [l1IsOpen, setL1IsOpen] = React.useState(true);
-    const [l2IsOpen, setL2IsOpen] = React.useState(true);
-    const toggleL1 = () => setL1IsOpen(!l1IsOpen);
-    const toggleL2 = () => setL2IsOpen(!l2IsOpen);
-
-    return (
-        <SideNavigation>
-            <SideNavigationItem
-                label="Level 1"
-                emphasis={Emphasis.high}
-                isOpen={l1IsOpen}
-                onClick={toggleL1}
-                icon={mdiAccount}
-                toggleButtonProps={{ label: 'Toggle' }}
-            >
-                <SideNavigationItem
-                    label="Level 2"
-                    emphasis={Emphasis.medium}
-                    isOpen={l2IsOpen}
-                    onClick={toggleL2}
-                    icon={mdiAccount}
-                    toggleButtonProps={{ label: 'Toggle' }}
-                >
-                    <SideNavigationItem
-                        label="Level 3.1"
-                        emphasis={Emphasis.low}
-                        isSelected
-                        toggleButtonProps={{ label: 'Toggle' }}
-                    />
-                    <SideNavigationItem
-                        label="Level 3.2"
-                        emphasis={Emphasis.low}
-                        icon={mdiAccount}
-                        toggleButtonProps={{ label: 'Toggle' }}
-                    />
-                    <SideNavigationItem
-                        label="Level 3.3"
-                        emphasis={Emphasis.low}
-                        icon={mdiAccount}
-                        toggleButtonProps={{ label: 'Toggle' }}
-                    />
-                </SideNavigationItem>
-            </SideNavigationItem>
-        </SideNavigation>
-    );
-};
-
-export const With3LevelsAndMultiActions = () => {
-    const [l1IsOpen, setL1IsOpen] = React.useState(true);
-    const [l2IsOpen, setL2IsOpen] = React.useState(true);
-    const toggleL1 = () => setL1IsOpen(!l1IsOpen);
-    const toggleL2 = () => setL2IsOpen(!l2IsOpen);
-    const alertMessage = (message: string) => () => alert(message);
-
-    return (
-        <SideNavigation>
-            <SideNavigationItem
-                label="Level 1"
-                emphasis={Emphasis.high}
-                isOpen={l1IsOpen}
-                linkProps={{ href: 'javascript:alert("Level 1")' }}
-                icon={mdiAccount}
-                onActionClick={toggleL1}
-                toggleButtonProps={{ label: 'Toggle' }}
-            >
-                <SideNavigationItem
-                    label="Level 2"
-                    emphasis={Emphasis.medium}
-                    isOpen={l2IsOpen}
-                    linkProps={{ href: 'javascript:alert("Level 2")' }}
-                    onActionClick={toggleL2}
-                    toggleButtonProps={{ label: 'Toggle' }}
-                >
-                    <SideNavigationItem
-                        label="Level 3.1"
-                        emphasis={Emphasis.low}
-                        linkProps={{ href: 'javascript:alert("Level 3.1 item is clicked")' }}
-                        onActionClick={alertMessage('Level 3.1 action is clicked')}
-                        toggleButtonProps={{ label: 'Toggle' }}
-                    />
-                    <SideNavigationItem
-                        label="Level 3.2"
-                        emphasis={Emphasis.low}
-                        onClick={alertMessage('Level 3.2 item is clicked')}
-                        onActionClick={alertMessage('Level 3.2 action is clicked')}
-                        toggleButtonProps={{ label: 'Toggle' }}
-                    />
-                </SideNavigationItem>
-            </SideNavigationItem>
-        </SideNavigation>
-    );
-};
-
-/** Using closeMode="hide" keeps children in DOM on close */
-export const CloseModeHide = () => {
-    const [isOpen, setIsOpen] = React.useState(false);
-    const toggleL1 = () => setIsOpen(!isOpen);
-
-    return (
-        <SideNavigation>
-            <SideNavigationItem
-                closeMode="hide"
-                label="Level 1"
-                emphasis={Emphasis.high}
-                isOpen={isOpen}
-                onClick={toggleL1}
-                toggleButtonProps={{ label: 'Toggle' }}
-            >
-                <SideNavigationItem
-                    closeMode="hide"
-                    label="Level 2"
-                    emphasis={Emphasis.medium}
-                    toggleButtonProps={{ label: 'Toggle' }}
-                />
-            </SideNavigationItem>
-        </SideNavigation>
-    );
-};

package/src/components/side-navigation/SideNavigation.test.tsx

@@ -1,37 +0,0 @@
-import { render } from '@testing-library/react';
-import { getByClassName } from '@lumx/react/testing/utils/queries';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { Theme } from '@lumx/react';
-
-import { SideNavigation, SideNavigationProps } from './SideNavigation';
-
-const CLASSNAME = SideNavigation.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<SideNavigationProps> = {}) => {
-    render(<SideNavigation {...(props as any)} />);
-    const sideNavigation = getByClassName(document.body, CLASSNAME);
-    return { props, sideNavigation };
-};
-
-describe(`<${SideNavigation.displayName}>`, () => {
-    it('should render default', () => {
-        const { sideNavigation } = setup();
-        expect(sideNavigation.className).toMatchInlineSnapshot('"lumx-side-navigation"');
-    });
-
-    it('should render dark theme', () => {
-        const { sideNavigation } = setup({ theme: Theme.dark });
-        expect(sideNavigation.className).toMatchInlineSnapshot('"lumx-color-font-light-N lumx-side-navigation"');
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'sideNavigation',
-        forwardAttributes: 'sideNavigation',
-        forwardRef: 'sideNavigation',
-    });
-});

package/src/components/side-navigation/SideNavigation.tsx

@@ -1,52 +0,0 @@
-import { Children, ReactNode } from 'react';
-
-import classNames from 'classnames';
-
-import { SideNavigationItem, Theme } from '@lumx/react';
-import { GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-/**
- * Defines the props of the component.
- */
-export interface SideNavigationProps extends GenericProps, HasTheme {
-    /** SideNavigationItem elements. */
-    children: ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'SideNavigation';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * SideNavigation component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const SideNavigation = forwardRef<SideNavigationProps, HTMLUListElement>((props, ref) => {
-    const defaultTheme = useTheme();
-    const { children, className, theme = defaultTheme, ...forwardedProps } = props;
-    const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
-
-    return (
-        <ul
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, theme === Theme.dark && 'lumx-color-font-light-N', CLASSNAME)}
-        >
-            {content}
-        </ul>
-    );
-});
-SideNavigation.displayName = COMPONENT_NAME;
-SideNavigation.className = CLASSNAME;

package/src/components/side-navigation/SideNavigationItem.stories.tsx

@@ -1,133 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks,import/no-extraneous-dependencies */
-import React from 'react';
-import pick from 'lodash/pick';
-
-import { Emphasis, GridColumn, SideNavigation, SideNavigationItem } from '@lumx/react';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { withTheming } from '@lumx/react/stories/utils/theming';
-import { DESIGN_TOKENS } from '@lumx/core/js/constants/design-tokens';
-import { disableArgTypes } from '@lumx/react/stories/utils/disableArgTypes';
-import { iconArgType } from '@lumx/react/stories/controls/icons';
-import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
-import { action } from 'storybook/actions';
-
-const EMPHASIS = [Emphasis.high, Emphasis.medium, Emphasis.low];
-
-export default {
-    title: 'LumX components/side-navigation/Side Navigation Item',
-    component: SideNavigationItem,
-    args: {
-        label: 'Item',
-        'toggleButtonProps.label': 'Toggle',
-    },
-    argTypes: {
-        emphasis: getSelectArgType(EMPHASIS),
-        icon: iconArgType,
-        closeMode: { control: { type: 'inline-radio' }, if: { arg: 'children', exists: true } },
-        isOpen: { if: { arg: 'children', exists: true } },
-        onClick: { action: true, table: { disable: true } },
-        ...disableArgTypes(['ref', 'children', 'linkAs', 'linkProps', 'toggleButtonProps', 'onActionClick']),
-    },
-    render: (args: any) => {
-        const [isOpen, setIsOpen] = React.useState<boolean | undefined>(undefined);
-
-        const toggleCallback = args.onActionClick ? 'onActionClick' : 'onClick';
-        const toggle: React.MouseEventHandler = (event) => {
-            args?.[toggleCallback]?.(event);
-            setIsOpen((wasOpen) => !wasOpen);
-        };
-        return (
-            <SideNavigation>
-                <SideNavigationItem {...args} {...{ [toggleCallback]: toggle }} isOpen={isOpen} />
-            </SideNavigation>
-        );
-    },
-};
-
-const STATE_COMBINATIONS = withCombinations({
-    combinations: {
-        cols: {
-            Default: {},
-            Hover: { 'linkProps.data-lumx-hover': true },
-            Active: { 'linkProps.data-lumx-active': true },
-        },
-        rows: {
-            Default: {},
-            Focused: { 'linkProps.data-focus-visible-added': true },
-            Selected: { isSelected: true },
-            'Selected & Focused': { isSelected: true, 'linkProps.data-focus-visible-added': true },
-        },
-    },
-});
-
-/**
- * Demonstrate item & section variants
- */
-export const ItemsAndSections = {
-    argTypes: { ...disableArgTypes(['isSelected']) },
-    decorators: [
-        withNestedProps(),
-        STATE_COMBINATIONS,
-        withCombinations({
-            combinations: {
-                rows: {
-                    '': {},
-                    'With children': {
-                        children: <SideNavigationItem label="Item 1" toggleButtonProps={{ label: 'Open' }} />,
-                    },
-                },
-                cols: {
-                    '': {},
-                    'With action click': {
-                        onActionClick: action('onActionClick'),
-                    },
-                },
-            },
-        }),
-    ],
-};
-
-/**
- * Demonstrate emphasis variants
- */
-export const EmphasisVariants = {
-    argTypes: { ...disableArgTypes(['emphasis', 'isSelected']) },
-    decorators: [
-        withNestedProps(),
-        STATE_COMBINATIONS,
-        withCombinations({
-            combinations: {
-                sections: { key: 'emphasis', options: EMPHASIS },
-            },
-        }),
-        withWrapper({ itemMinWidth: 300, maxColumns: 3 }, GridColumn),
-    ],
-};
-
-/**
- * Test CSS variable theming
- */
-export const Theming = {
-    ...ItemsAndSections,
-    decorators: [
-        ...ItemsAndSections.decorators,
-        withTheming({
-            properties: pick(DESIGN_TOKENS, ['side-navigation']),
-            values: `
-            --lumx-side-navigation-item-emphasis-selected-state-default-border-width: 2px;
-            --lumx-side-navigation-item-emphasis-selected-state-default-theme-light-border-color: red;
-            --lumx-side-navigation-item-emphasis-selected-state-default-theme-light-background-color: orange;
-
-            --lumx-side-navigation-item-emphasis-selected-state-hover-border-width: 3px;
-            --lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-border-color: green;
-            --lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-background-color: red;
-
-            --lumx-side-navigation-item-emphasis-selected-state-active-border-width: 4px;
-            --lumx-side-navigation-item-emphasis-selected-state-active-theme-light-border-color: orange;
-            --lumx-side-navigation-item-emphasis-selected-state-active-theme-light-background-color: violet;
-            `,
-        }),
-    ],
-};

package/src/components/side-navigation/SideNavigationItem.test.tsx

@@ -1,136 +0,0 @@
-import { getAllByClassName, queryAllByClassName } from '@lumx/react/testing/utils/queries';
-import { render, screen } from '@testing-library/react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-
-import { SideNavigationItem, SideNavigationItemProps } from './SideNavigationItem';
-
-const CLASSNAME = SideNavigationItem.className as string;
-
-const toggleButtonProps = { label: 'Toggle' };
-
-vi.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: Partial<SideNavigationItemProps> = {}) => {
-    const props = { label: 'Label', toggleButtonProps, ...propsOverride };
-    render(<SideNavigationItem {...props} />);
-    const sideNavigation = getAllByClassName(document.body, CLASSNAME)[0];
-    return {
-        chevron: queryAllByClassName(sideNavigation, `${CLASSNAME}__chevron`)[0] || null,
-        toggle: queryAllByClassName(sideNavigation, `${CLASSNAME}__toggle`)[0] || null,
-        children: queryAllByClassName(sideNavigation, `${CLASSNAME}__children`)[0] || null,
-        icon: queryAllByClassName(sideNavigation, `${CLASSNAME}__icon`)[0],
-        label: queryAllByClassName(sideNavigation, `${CLASSNAME}__link span`)[0],
-        link: queryAllByClassName(sideNavigation, `${CLASSNAME}__link`)[0],
-        props,
-        sideNavigation,
-    };
-};
-
-describe(`<${SideNavigationItem.displayName}>`, () => {
-    it('should render default', () => {
-        const label = 'Side navigation item';
-        const { sideNavigation, link } = setup({ label });
-        expect(sideNavigation).toBeInTheDocument();
-        expect(sideNavigation).toBe(screen.queryByRole('listitem'));
-
-        expect(link).toBeInTheDocument();
-        expect(link).toBe(screen.queryByRole('button', { name: label }));
-        expect(link).not.toHaveAttribute('aria-expanded');
-    });
-
-    it('should render a link', () => {
-        const label = 'Side navigation item';
-        const { props, link } = setup({ linkProps: { href: 'https://example.com' }, label });
-        expect(link).toBe(screen.queryByRole('link', { name: label }));
-        expect(link).toHaveAttribute('href', props.linkProps?.href);
-        expect(link).not.toHaveAttribute('aria-expanded');
-    });
-
-    describe('children', () => {
-        it('should render with children closed unmount', () => {
-            const label = 'Side navigation item';
-            const { chevron, link, children } = setup({
-                label,
-                children: [
-                    <SideNavigationItem key="1" label="Child 1" toggleButtonProps={toggleButtonProps} />,
-                    <SideNavigationItem key="3" label="Child 2" toggleButtonProps={toggleButtonProps} />,
-                ],
-            });
-            expect(link).toHaveTextContent(label);
-            expect(link).toHaveAttribute('aria-expanded', 'false');
-            expect(link).not.toHaveAttribute('aria-controls');
-            expect(chevron).toBeInTheDocument();
-            expect(children).not.toBeInTheDocument();
-        });
-
-        it('should render with children closed hidden', () => {
-            const label = 'Side navigation item';
-            const { chevron, link, children } = setup({
-                label,
-                closeMode: 'hide',
-                children: [
-                    <SideNavigationItem key="1" label="Child 1" toggleButtonProps={toggleButtonProps} />,
-                    <SideNavigationItem key="3" label="Child 2" toggleButtonProps={toggleButtonProps} />,
-                ],
-            });
-            expect(link).toHaveTextContent(label);
-            expect(link).toHaveAttribute('aria-expanded', 'false');
-            expect(link).toHaveAttribute('aria-controls', children?.id);
-            expect(chevron).toBeInTheDocument();
-            // Children are in DOM but hidden in CSS (can't test that here)
-            expect(children).toBeInTheDocument();
-        });
-
-        it('should render with children opened', () => {
-            const label = 'Side navigation item';
-            const { chevron, link, children } = setup({
-                label,
-                isOpen: true,
-                children: [
-                    <SideNavigationItem key="1" label="Child 1" toggleButtonProps={toggleButtonProps} />,
-                    <SideNavigationItem key="3" label="Child 2" toggleButtonProps={toggleButtonProps} />,
-                ],
-            });
-            expect(link).toHaveTextContent(label);
-            expect(link).toHaveAttribute('aria-expanded', 'true');
-            expect(link).toHaveAttribute('aria-controls', children?.id);
-            expect(chevron).toBeInTheDocument();
-            expect(children).toBeInTheDocument();
-        });
-    });
-
-    describe('children and link', () => {
-        it('should render with children and link', () => {
-            const onActionClick = vi.fn();
-            const label = 'Side navigation item';
-            const { props, toggle, link } = setup({
-                label,
-                linkProps: { href: 'https://example.com' },
-                onActionClick,
-                children: [
-                    <SideNavigationItem key="1" label="Child 1" toggleButtonProps={toggleButtonProps} />,
-                    <SideNavigationItem key="3" label="Child 2" toggleButtonProps={toggleButtonProps} />,
-                ],
-            });
-            // Link
-            expect(link).toBe(screen.queryByRole('link', { name: label }));
-            expect(link).toHaveAttribute('href', props.linkProps?.href);
-
-            // Toggle button
-            expect(toggle).toBe(screen.queryByRole('button', { name: toggleButtonProps.label }));
-            expect(toggle).toHaveAttribute('aria-expanded', 'false');
-            expect(toggle).not.toHaveAttribute('aria-controls');
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'sideNavigation',
-        forwardAttributes: 'sideNavigation',
-        forwardRef: 'sideNavigation',
-    });
-});