@lumx/react 3.9.5 → 3.9.6-alpha.0

package/src/components/date-picker/DatePicker.stories.tsx

@@ -3,6 +3,7 @@ import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnCha
 import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
+import { withTheming } from '@lumx/react/stories/utils/theming';
 
 export default {
     title: 'LumX components/date-picker/DatePicker',
@@ -36,3 +37,82 @@ export const LocalesVariations = {
         withWrapper({ maxColumns: 5, itemMinWidth: 300 }, GridColumn),
     ],
 };
+
+/**
+ * Demo LumX CSS theming variables
+ */
+export const Theming = {
+    args: { ...Default.args, value: new Date('2023-02-15') },
+    decorators: [
+        withTheming({
+            values: `
+            --lumx-button-border-radius: 10px;
+
+            /////////////
+            --lumx-button-emphasis-low-state-default-padding-horizontal: 1px;
+            --lumx-button-emphasis-low-state-default-border-width: 1px;
+            --lumx-button-emphasis-low-state-hover-padding-horizontal: 2px;
+            --lumx-button-emphasis-low-state-hover-border-width: 1px;
+            --lumx-button-emphasis-low-state-active-padding-horizontal: 3px;
+            --lumx-button-emphasis-low-state-active-border-width: 1px;
+
+            --lumx-button-emphasis-low-state-default-theme-light-background-color: rgb(from green r g b / 10%);
+            --lumx-button-emphasis-low-state-default-theme-light-color: black;
+            --lumx-button-emphasis-low-state-default-theme-light-border-color: transparent;
+            --lumx-button-emphasis-low-state-hover-theme-light-background-color: rgb(from darkslategray r g b / 50%);
+            --lumx-button-emphasis-low-state-hover-theme-light-color: crimson;
+            --lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent;
+            --lumx-button-emphasis-low-state-active-theme-light-background-color: rgb(from blanchedalmond r g b / 50%);
+            --lumx-button-emphasis-low-state-active-theme-light-color: firebrick;
+            --lumx-button-emphasis-low-state-active-theme-light-border-color: transparent;
+
+            /////////////
+            --lumx-button-emphasis-selected-state-default-padding-horizontal: 1px;
+            --lumx-button-emphasis-selected-state-default-border-width: 1px;
+            --lumx-button-emphasis-selected-state-hover-padding-horizontal: 2px;
+            --lumx-button-emphasis-selected-state-hover-border-width: 1px;
+            --lumx-button-emphasis-selected-state-active-padding-horizontal: 3px;
+            --lumx-button-emphasis-selected-state-active-border-width: 1px;
+
+            --lumx-button-emphasis-selected-state-default-theme-light-background-color: rgb(from green r g b / 50%);
+            --lumx-button-emphasis-selected-state-default-theme-light-color: green;
+            --lumx-button-emphasis-selected-state-default-theme-light-border-color: currentcolor;
+            --lumx-button-emphasis-selected-state-hover-theme-light-background-color: rgb(from darkslategray r g b / 50%);
+            --lumx-button-emphasis-selected-state-hover-theme-light-color: crimson;
+            --lumx-button-emphasis-selected-state-hover-theme-light-border-color: currentcolor;
+            --lumx-button-emphasis-selected-state-active-theme-light-background-color: rgb(from blanchedalmond r g b / 50%);
+            --lumx-button-emphasis-selected-state-active-theme-light-color: firebrick;
+            --lumx-button-emphasis-selected-state-active-theme-light-border-color: currentcolor;
+
+            /////////
+            --lumx-text-field-input-min-height: 26px;
+            --lumx-text-field-input-padding-horizontal: 5px;
+            --lumx-text-field-input-border-radius: 10px;
+            --lumx-text-field-state-default-input-border-top-width: 0;
+            --lumx-text-field-state-default-input-border-right-width: 0;
+            --lumx-text-field-state-default-input-border-bottom-width: 0;
+            --lumx-text-field-state-default-input-border-left-width: 0;
+            --lumx-text-field-state-default-theme-light-header-label-color: var(--lumx-color-dark-N);
+            --lumx-text-field-state-default-theme-light-input-background-color: rgb(from green r g b / 10%);
+            --lumx-text-field-state-default-theme-light-input-border-color: var(--lumx-color-dark-L4);
+            --lumx-text-field-state-default-theme-light-input-content-color: var(--lumx-color-dark-N);
+            --lumx-text-field-state-hover-input-border-top-width: 1px;
+            --lumx-text-field-state-hover-input-border-right-width: 1px;
+            --lumx-text-field-state-hover-input-border-bottom-width: 1px;
+            --lumx-text-field-state-hover-input-border-left-width: 1px;
+            --lumx-text-field-state-hover-theme-light-header-label-color: var(--lumx-color-dark-N);
+            --lumx-text-field-state-hover-theme-light-input-background-color: rgb(from green r g b / 30%);
+            --lumx-text-field-state-hover-theme-light-input-border-color: green;
+            --lumx-text-field-state-hover-theme-light-input-content-color: var(--lumx-color-dark-N);
+            --lumx-text-field-state-focus-input-border-top-width: 2px;
+            --lumx-text-field-state-focus-input-border-right-width: 2px;
+            --lumx-text-field-state-focus-input-border-bottom-width: 2px;
+            --lumx-text-field-state-focus-input-border-left-width: 2px;
+            --lumx-text-field-state-focus-theme-light-header-label-color: var(--lumx-color-dark-N);
+            --lumx-text-field-state-focus-theme-light-input-background-color: rgb(from green r g b / 50%);
+            --lumx-text-field-state-focus-theme-light-input-border-color: green;
+            --lumx-text-field-state-focus-theme-light-input-content-color: var(--lumx-color-dark-N);
+        `,
+        }),
+    ],
+};

package/src/components/date-picker/DatePickerControlled.test.tsx

@@ -59,7 +59,7 @@ describe(`<${DatePickerControlled.displayName}>`, () => {
         expect(queries.getAccessibleMonthYear(toolbar)).toBeInTheDocument();
         expect(queries.getAccessibleMonthYear(toolbar)).toHaveTextContent('février 2017');
 
-        const selected = queryByClassName(datePickerControlled, `${CLASSNAME}__month-day--is-selected`);
+        const selected = queryByClassName(datePickerControlled, `lumx-button--is-selected`);
         expect(selected).toBe(screen.queryByRole('button', { name: /22 février 2017/i }));
     });
 

package/src/components/date-picker/DatePickerControlled.tsx

@@ -1,6 +1,16 @@
 import React, { KeyboardEventHandler, forwardRef } from 'react';
 import classNames from 'classnames';
-import { DatePickerProps, Emphasis, FlexBox, IconButton, Text, TextField, TextFieldProps, Toolbar } from '@lumx/react';
+import {
+    Button,
+    DatePickerProps,
+    Emphasis,
+    FlexBox,
+    IconButton,
+    Text,
+    TextField,
+    TextFieldProps,
+    Toolbar,
+} from '@lumx/react';
 import { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';
 import { Comp } from '@lumx/react/utils/type';
 import { getMonthCalendar } from '@lumx/react/utils/date/getMonthCalendar';
@@ -56,6 +66,7 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
         todayOrSelectedDateRef,
         value,
         onMonthChange,
+        style,
     } = props;
     const { weeks, weekDays } = React.useMemo(() => {
         const localeObj = parseLocale(locale) as Locale;
@@ -127,7 +138,7 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
     const yearLabel = getYearDisplayName(locale);
 
     return (
-        <div ref={ref} className={`${CLASSNAME}`}>
+        <div ref={ref} className={`${CLASSNAME}`} style={style}>
             <Toolbar
                 className={`${CLASSNAME}__toolbar`}
                 after={
@@ -212,14 +223,14 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
                             return (
                                 <div key={key} className={`${CLASSNAME}__day-wrapper`}>
                                     {date && (
-                                        <button
+                                        <Button
                                             ref={isSelected || (!value && isToday) ? todayOrSelectedDateRef : null}
                                             className={classNames(`${CLASSNAME}__month-day`, {
-                                                [`${CLASSNAME}__month-day--is-selected`]: isSelected,
                                                 [`${CLASSNAME}__month-day--is-today`]: isToday,
                                             })}
                                             disabled={isOutOfRange}
-                                            type="button"
+                                            isSelected={isSelected}
+                                            emphasis="low"
                                             onClick={() => onChange(date)}
                                         >
                                             <span aria-hidden>{formatDayNumber(locale, date)}</span>
@@ -230,7 +241,7 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
                                                     year: 'numeric',
                                                 })}
                                             </span>
-                                        </button>
+                                        </Button>
                                     )}
                                 </div>
                             );

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

@@ -9,59 +9,228 @@ import {
     mdiGoogleCirclesExtended,
     mdiFolder,
 } from '@lumx/icons';
-import { Navigation, Orientation } from '@lumx/react';
+import { Navigation, Orientation, Theme } from '@lumx/react';
 import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+import { withThemedBackground } from '@lumx/react/stories/decorators/withThemedBackground';
+import { withTheming } from '@lumx/react/stories/utils/theming';
+import pick from 'lodash/pick';
+import { DESIGN_TOKENS } from '@lumx/core/js/constants/design-tokens';
+import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
+import { iconArgType } from '@lumx/react/stories/controls/icons';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 
-export default { title: 'LumX components/navigation/Navigation' };
+export default {
+    title: 'LumX components/navigation/Navigation',
+    component: Navigation,
+    argTypes: {
+        'itemProps.onClick': { action: true, table: { disable: true } },
+    },
+};
 
-export const Default = ({ theme, onClick, orientation }: any) => {
-    return (
-        <Navigation theme={theme} aria-label="navigation" orientation={orientation}>
-            <Navigation.Item isCurrentPage label="Homepage" icon={mdiHome} href="#" />
-            <Navigation.Item
-                label="Some very very very very very very very very very very very very very very very very very very very very very very very very very very very long text"
-                href="#"
-            />
-            <Navigation.Item
-                label="Custom link element"
-                icon={mdiMessageTextOutline}
-                as={CustomLink}
-                // `to` prop is required in CustomLink
-                to="#"
-            />
-            <Navigation.Item as="button" label="Button element" icon={mdiFolderGoogleDrive} onClick={onClick} />
-            <Navigation.Section label="Section 1" icon={mdiFolder}>
-                <Navigation.Item label="A content" href="#content" />
-                <Navigation.Item label="A button" icon={mdiLink} href="https://www.google.com" />
+/**
+ * Demonstrate a full-featured navigation
+ */
+export const FullFeatured = {
+    render({ theme, itemProps, orientation }: any) {
+        return (
+            <Navigation theme={theme} aria-label="navigation" orientation={orientation}>
+                <Navigation.Item isCurrentPage label="Homepage" icon={mdiHome} href="#" {...itemProps} />
                 <Navigation.Item
                     label="Some very very very very very very very very very very very very very very very very very very very very very very very very very very very long text"
-                    icon={mdiTextBox}
-                    href="#content"
+                    href="#"
+                    {...itemProps}
+                />
+                <Navigation.Item
+                    label="Custom link element"
+                    icon={mdiMessageTextOutline}
+                    as={CustomLink}
+                    // `to` prop is required in CustomLink
+                    to="#"
+                    {...itemProps}
                 />
-                <Navigation.Item label="A community" icon={mdiGoogleCirclesExtended} href="#community" />
-                <Navigation.Section label="Section 1.1" icon={mdiFolder}>
-                    <Navigation.Item label="A content" icon={mdiTextBox} href="#content" />
+                <Navigation.Item as="button" label="Button element" icon={mdiFolderGoogleDrive} {...itemProps} />
+                <Navigation.Section label="Section 1" icon={mdiFolder} {...itemProps}>
+                    <Navigation.Item label="A content" href="#content" {...itemProps} />
+                    <Navigation.Item label="A button" icon={mdiLink} href="https://www.google.com" {...itemProps} />
                     <Navigation.Item
                         label="Some very very very very very very very very very very very very very very very very very very very very very very very very very very very long text"
                         icon={mdiTextBox}
                         href="#content"
+                        {...itemProps}
                     />
-                    <Navigation.Item label="A link" icon={mdiLink} href="https://www.google.com" />
-                    <Navigation.Item label="A community" icon={mdiGoogleCirclesExtended} href="#community" />
+                    <Navigation.Item
+                        label="A community"
+                        icon={mdiGoogleCirclesExtended}
+                        href="#community"
+                        {...itemProps}
+                    />
+                    <Navigation.Section label="Section 1.1" icon={mdiFolder} {...itemProps}>
+                        <Navigation.Item label="A content" icon={mdiTextBox} href="#content" {...itemProps} />
+                        <Navigation.Item
+                            label="Some very very very very very very very very very very very very very very very very very very very very very very very very very very very long text"
+                            icon={mdiTextBox}
+                            href="#content"
+                            {...itemProps}
+                        />
+                        <Navigation.Item label="A link" icon={mdiLink} href="https://www.google.com" {...itemProps} />
+                        <Navigation.Item
+                            label="A community"
+                            icon={mdiGoogleCirclesExtended}
+                            href="#community"
+                            {...itemProps}
+                        />
+                    </Navigation.Section>
                 </Navigation.Section>
-            </Navigation.Section>
-            <Navigation.Section label="Section 2" icon={mdiFolder}>
-                <Navigation.Item label="A content" icon={mdiTextBox} href="#content" />
-                <Navigation.Item label="A link" icon={mdiLink} href="https://www.google.com" />
-                <Navigation.Item label="A community" icon={mdiGoogleCirclesExtended} href="#community" />
-            </Navigation.Section>
+                <Navigation.Section label="Section 2" icon={mdiFolder} {...itemProps}>
+                    <Navigation.Item label="A content" icon={mdiTextBox} href="#content" {...itemProps} />
+                    <Navigation.Item label="A link" icon={mdiLink} href="https://www.google.com" {...itemProps} />
+                    <Navigation.Item
+                        label="A community"
+                        icon={mdiGoogleCirclesExtended}
+                        href="#community"
+                        {...itemProps}
+                    />
+                </Navigation.Section>
+            </Navigation>
+        );
+    },
+    decorators: [withNestedProps()],
+};
+
+/**
+ * Horizontal navigation
+ */
+export const FullFeaturedHorizontal = { ...FullFeatured, args: { orientation: Orientation.horizontal } };
+
+/**
+ * Demonstrate all item variants
+ */
+export const ItemVariants = {
+    args: {
+        'itemProps.icon': mdiHome,
+        'itemProps.as': 'button',
+    },
+    argTypes: {
+        'itemProps.icon': iconArgType,
+        'itemProps.as': getSelectArgType(['button', 'a']),
+        'itemProps.href': { control: 'text', if: { arg: 'itemProps.as', eq: 'a' } },
+    },
+    render: ({ itemProps, ...args }: any) => (
+        <Navigation aria-label="navigation" {...args}>
+            {Object.entries({
+                '': {},
+                Current: { isCurrentPage: true },
+            }).map(([key1, currentProps]) =>
+                Object.entries({
+                    Item: {},
+                    'Item (hover)': { 'data-lumx-hover': true },
+                    'Item (active)': { 'data-lumx-active': true },
+                }).map(([key2, stateProps]) => (
+                    <Navigation.Item
+                        key={key1 + key2}
+                        label={`${key1} ${key2}`}
+                        {...currentProps}
+                        {...stateProps}
+                        {...itemProps}
+                    />
+                )),
+            )}
+
+            {Object.entries({
+                Section: {},
+                'Section (hover)': { 'data-lumx-hover': true },
+                'Section (active)': { 'data-lumx-active': true },
+            }).map(([key2, stateProps]) => (
+                <Navigation.Section key={key2} label={key2} {...stateProps} {...itemProps}>
+                    <Navigation.Item as="button" label="SubItem 1" />
+                    <Navigation.Item as="button" label="SubItem 2" />
+                </Navigation.Section>
+            ))}
         </Navigation>
-    );
+    ),
+    decorators: [
+        withNestedProps(),
+        withThemedBackground(),
+        withCombinations({
+            sectionStyle: { display: 'inline-block' },
+            combinations: {
+                cols: { '': {}, Focused: { 'itemProps.data-focus-visible-added': true } },
+                sections: {
+                    'Theme light': { theme: undefined },
+                    'Theme dark': { theme: Theme.dark },
+                },
+            },
+        }),
+    ],
 };
-Default.argTypes = { onClick: { action: true } };
 
-export const VerticalWithSection: any = Default.bind({});
-VerticalWithSection.args = { orientation: Orientation.vertical };
+/**
+ * Test CSS variable theming
+ */
+export const Theming = {
+    ...ItemVariants,
+    decorators: [
+        ...ItemVariants.decorators,
+        withTheming({
+            properties: pick(DESIGN_TOKENS, ['navigation']),
+            values: `
+            --lumx-navigation-item-emphasis-low-state-default-border-top-width: 5px;
+            --lumx-navigation-item-emphasis-low-state-default-border-right-width: 2px;
+            --lumx-navigation-item-emphasis-low-state-default-border-bottom-width: 3px;
+            --lumx-navigation-item-emphasis-low-state-default-border-left-width: 4px;
+            --lumx-navigation-item-emphasis-low-state-default-theme-light-border-color: lightcoral;
+            --lumx-navigation-item-emphasis-low-state-default-theme-light-background-color: lightsalmon;
+            --lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: lightsalmon;
+            --lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: lightcoral;
+
+            --lumx-navigation-item-emphasis-low-state-hover-border-top-width: 4px;
+            --lumx-navigation-item-emphasis-low-state-hover-border-right-width: 5px;
+            --lumx-navigation-item-emphasis-low-state-hover-border-bottom-width: 2px;
+            --lumx-navigation-item-emphasis-low-state-hover-border-left-width: 3px;
+            --lumx-navigation-item-emphasis-low-state-hover-theme-light-border-color: lightgreen;
+            --lumx-navigation-item-emphasis-low-state-hover-theme-light-background-color: lightpink;
+            --lumx-navigation-item-emphasis-low-state-hover-theme-dark-border-color: lightpink;
+            --lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: lightgreen;
 
-export const HorizontalWithSection: any = Default.bind({});
-HorizontalWithSection.args = { orientation: Orientation.horizontal };
+            --lumx-navigation-item-emphasis-low-state-active-border-top-width: 3px;
+            --lumx-navigation-item-emphasis-low-state-active-border-right-width: 4px;
+            --lumx-navigation-item-emphasis-low-state-active-border-bottom-width: 5px;
+            --lumx-navigation-item-emphasis-low-state-active-border-left-width: 2px;
+            --lumx-navigation-item-emphasis-low-state-active-theme-light-border-color: lemonchiffon;
+            --lumx-navigation-item-emphasis-low-state-active-theme-light-background-color: lavenderblush;
+            --lumx-navigation-item-emphasis-low-state-active-theme-dark-border-color: lavenderblush;
+            --lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: lemonchiffon;
+
+            ////
+
+            --lumx-navigation-item-emphasis-selected-state-default-border-top-width: 2px;
+            --lumx-navigation-item-emphasis-selected-state-default-border-right-width: 3px;
+            --lumx-navigation-item-emphasis-selected-state-default-border-bottom-width: 4px;
+            --lumx-navigation-item-emphasis-selected-state-default-border-left-width: 5px;
+            --lumx-navigation-item-emphasis-selected-state-default-theme-light-border-color: red;
+            --lumx-navigation-item-emphasis-selected-state-default-theme-light-background-color: orange;
+            --lumx-navigation-item-emphasis-selected-state-default-theme-dark-border-color: blue;
+            --lumx-navigation-item-emphasis-selected-state-default-theme-dark-background-color: violet;
+
+            --lumx-navigation-item-emphasis-selected-state-hover-border-top-width: 3px;
+            --lumx-navigation-item-emphasis-selected-state-hover-border-right-width: 4px;
+            --lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width: 5px;
+            --lumx-navigation-item-emphasis-selected-state-hover-border-left-width: 2px;
+            --lumx-navigation-item-emphasis-selected-state-hover-theme-light-border-color: green;
+            --lumx-navigation-item-emphasis-selected-state-hover-theme-light-background-color: violet;
+            --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-border-color: violet;
+            --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-background-color: green;
+
+            --lumx-navigation-item-emphasis-selected-state-active-border-top-width: 4px;
+            --lumx-navigation-item-emphasis-selected-state-active-border-right-width: 5px;
+            --lumx-navigation-item-emphasis-selected-state-active-border-bottom-width: 2px;
+            --lumx-navigation-item-emphasis-selected-state-active-border-left-width: 3px;
+            --lumx-navigation-item-emphasis-selected-state-active-theme-light-border-color: orange;
+            --lumx-navigation-item-emphasis-selected-state-active-theme-light-background-color: pink;
+            --lumx-navigation-item-emphasis-selected-state-active-theme-dark-border-color: pink;
+            --lumx-navigation-item-emphasis-selected-state-active-theme-dark-background-color: orange;
+            `,
+        }),
+    ],
+};

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

@@ -18,10 +18,10 @@ type SetupProps = Partial<NavigationSectionProps>;
  */
 
 const setup = (propsOverride: SetupProps = {}, orientation: Orientation = Orientation.vertical) => {
-    const props = { ...propsOverride };
+    const props = { label: 'Section 1', ...propsOverride };
     const { container } = render(
         <NavigationContext.Provider value={{ orientation }}>
-            <NavigationSection label="Section 1" {...props}>
+            <NavigationSection {...props}>
                 <NavigationItem label="A content" href="" />
                 <NavigationItem label="A link" href="" />
                 <NavigationItem label="A community" href="" />
@@ -29,17 +29,16 @@ const setup = (propsOverride: SetupProps = {}, orientation: Orientation = Orient
         </NavigationContext.Provider>,
     );
 
+    const query = {
+        button: () => screen.getByRole('button', { name: props.label as string }),
+        content: () => queryByClassName(container, `${CLASSNAME}__drawer`),
+        popover: () => queryByClassName(container, `${CLASSNAME}__drawer--popover`),
+    };
     return {
         container,
         element: getByClassName(container, CLASSNAME),
-        query: {
-            button: () =>
-                screen.getByRole('button', {
-                    name: /section 1/i,
-                }),
-            content: () => queryByClassName(container, `${CLASSNAME}__drawer`),
-            popover: () => queryByClassName(container, `${CLASSNAME}__drawer--popover`),
-        },
+        button: query.button(),
+        query,
         props,
     };
 };
@@ -122,5 +121,5 @@ describe(`<${NavigationSection.displayName}>`, () => {
     });
 
     // Common tests suite.
-    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'element', forwardAttributes: 'element' });
+    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'element', forwardAttributes: 'button' });
 });

package/src/components/navigation/NavigationSection.tsx

@@ -11,7 +11,7 @@ import { useId } from '@lumx/react/hooks/useId';
 import { CLASSNAME as ITEM_CLASSNAME } from './NavigationItem';
 import { NavigationContext } from './context';
 
-export interface NavigationSectionProps extends React.ComponentPropsWithoutRef<'li'>, HasClassName {
+export interface NavigationSectionProps extends React.ComponentPropsWithoutRef<'button'>, HasClassName {
     /** Items inside the section */
     children: ReactNode;
     /** Icon (SVG path). */
@@ -51,9 +51,9 @@ export const NavigationSection = Object.assign(
                     }),
                 )}
                 ref={ref}
-                {...forwardedProps}
             >
                 <button
+                    {...forwardedProps}
                     aria-controls={sectionId}
                     aria-expanded={isOpen}
                     className={classNames(`${ITEM_CLASSNAME}__link`)}

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/addon-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/stories/controls/color.ts

@@ -1,6 +1,7 @@
 import { ColorPalette, ColorVariant } from '@lumx/react';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
 
 export const ALL_COLORS = Object.values(ColorPalette);
-export const colorArgType = getSelectArgType(ALL_COLORS);
+export const colorArgType = getSelectArgType(withUndefined(ALL_COLORS));
 export const colorVariantArgType = getSelectArgType(ColorVariant);