@lumx/react 3.20.1-alpha.20 → 3.20.1-alpha.22

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

@@ -0,0 +1,191 @@
+/* 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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,133 @@
+/* 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

@@ -0,0 +1,136 @@
+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',
+    });
+});