@lumx/react 3.10.1-alpha.4 → 3.10.1-alpha.5

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.10.1-alpha.4",
-        "@lumx/icons": "^3.10.1-alpha.4",
+        "@lumx/core": "^3.10.1-alpha.5",
+        "@lumx/icons": "^3.10.1-alpha.5",
         "@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.10.1-alpha.4"
+    "version": "3.10.1-alpha.5"
 }

package/src/components/autocomplete/Autocomplete.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { Dropdown, DropdownProps, IconButtonProps, Offset, Placement, TextField, TextFieldProps } from '@lumx/react';
 
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { useFocus } from '@lumx/react/hooks/useFocus';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
@@ -245,16 +245,7 @@ export const Autocomplete = forwardRef<AutocompleteProps, HTMLDivElement>((props
     useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);
 
     return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                }),
-            )}
-        >
+        <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
             <TextField
                 {...textFieldProps}
                 chips={chips}

package/src/components/autocomplete/AutocompleteMultiple.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { mdiClose } from '@lumx/icons';
 
 import { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
@@ -114,12 +114,7 @@ export const AutocompleteMultiple = forwardRef<AutocompleteMultipleProps, HTMLDi
             ref={ref}
             {...forwardedProps}
             anchorToInput={anchorToInput}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                }),
-            )}
+            className={classNames(className, CLASSNAME)}
             name={name}
             value={value}
             onChange={onChange}

package/src/components/badge/BadgeWrapper.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { DEFAULT_PROPS } from '@lumx/react/components/select/WithSelectContext';
 import { GenericProps } from '@lumx/react/utils/type';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
@@ -28,7 +28,7 @@ export const BadgeWrapper = forwardRef<BadgeWrapperProps, HTMLDivElement>((props
     const { badge, children, className, ...forwardedProps } = props;
 
     return (
-        <div ref={ref} {...forwardedProps} className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}>
+        <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
             {children}
             {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}
         </div>

package/src/components/chip/ChipGroup.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { HorizontalAlignment } from '@lumx/react/components';
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useChipGroupNavigation } from '@lumx/react/hooks/useChipGroupNavigation';
@@ -46,12 +46,9 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const InternalChipGroup = forwardRef<ChipGroupProps, HTMLDivElement>((props, ref) => {
     const { align, children, className, ...forwardedProps } = props;
-    const chipGroupClassName = handleBasicClasses({
-        prefix: CLASSNAME,
-    });
 
     return (
-        <div ref={ref} {...forwardedProps} className={classNames(className, chipGroupClassName)}>
+        <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
             {children}
         </div>
     );

package/src/components/dropdown/Dropdown.tsx

@@ -6,7 +6,7 @@ import { List, ListProps } from '@lumx/react/components/list/List';
 import { Popover, PopoverProps } from '@lumx/react/components/popover/Popover';
 import { useInfiniteScroll } from '@lumx/react/hooks/useInfiniteScroll';
 import { GenericProps, isComponent } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { Offset, Placement } from '@lumx/react/components/popover/constants';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -162,7 +162,7 @@ export const Dropdown = forwardRef<DropdownProps, HTMLDivElement>((props, ref) =
             {...forwardedProps}
             focusAnchorOnClose={focusAnchorOnClose}
             anchorRef={anchorRef}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
+            className={classNames(className, CLASSNAME)}
             elevation={0 as any}
             closeOnClickAway={closeOnClickAway}
             closeOnEscape={closeOnEscape}

package/src/components/grid-column/GridColumn.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { Size } from '@lumx/react';
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 export type GridColumnGapSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
@@ -65,12 +65,7 @@ export const GridColumn = forwardRef<GridColumnProps>((props, ref): ReactElement
         <Component
             {...forwardedProps}
             ref={ref as React.Ref<any>}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                }),
-            )}
+            className={classNames(className, CLASSNAME)}
             style={{
                 ...style,
                 ['--lumx-grid-column-item-min-width' as any]: Number.isInteger(itemMinWidth) && `${itemMinWidth}px`,

package/src/components/heading/Heading.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { HeadingElement } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { Text, TextProps } from '../text';
@@ -48,12 +48,7 @@ export const Heading = forwardRef<HeadingProps>((props, ref) => {
     return (
         <Text
             ref={ref}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                }),
-            )}
+            className={classNames(className, CLASSNAME)}
             as={computedHeadingElement}
             typography={DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]}
             {...forwardedProps}

package/src/components/list/ListDivider.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -31,13 +31,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 export const ListDivider = forwardRef<ListDividerProps, HTMLLIElement>((props, ref) => {
     const { className, ...forwardedProps } = props;
 
-    return (
-        <li
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
-        />
-    );
+    return <li ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)} />;
 });
 ListDivider.displayName = COMPONENT_NAME;
 ListDivider.className = CLASSNAME;

package/src/components/list/ListSubheader.tsx

@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -35,7 +35,7 @@ export const ListSubheader = forwardRef<ListSubheaderProps, HTMLLIElement>((prop
     const { children, className, ...forwardedProps } = props;
 
     return (
-        <li ref={ref} {...forwardedProps} className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}>
+        <li ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
             {children}
         </li>
     );

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

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { HasAriaLabelOrLabelledBy } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { Popover, PopoverProps } from '../popover/Popover';
@@ -51,7 +51,7 @@ export const PopoverDialog = forwardRef<PopoverDialogProps, HTMLDivElement>((pro
         <Popover
             {...forwardedProps}
             ref={ref}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
+            className={classNames(className, CLASSNAME)}
             role="dialog"
             aria-modal="true"
             /**

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

@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -61,11 +61,7 @@ export const ProgressTracker = forwardRef<ProgressTrackerProps, HTMLDivElement>(
         numberOfSteps > 0 ? ((100 / (numberOfSteps - 1)) * (state?.activeTabIndex || 0)) / 100 : 0;
 
     return (
-        <div
-            ref={mergeRefs(ref, stepListRef)}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
-        >
+        <div ref={mergeRefs(ref, stepListRef)} {...forwardedProps} className={classNames(className, CLASSNAME)}>
             <div className={`${CLASSNAME}__steps`} role="tablist" aria-label={ariaLabel}>
                 {children}
             </div>

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

@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -35,16 +35,7 @@ export const RadioGroup = forwardRef<RadioGroupProps, HTMLDivElement>((props, re
     const { children, className, ...forwardedProps } = props;
 
     return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                }),
-            )}
-        >
+        <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
             {children}
         </div>
     );

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

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { SideNavigationItem, Theme } from '@lumx/react';
 import { GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -42,11 +42,7 @@ export const SideNavigation = forwardRef<SideNavigationProps, HTMLUListElement>(
         <ul
             ref={ref}
             {...forwardedProps}
-            className={classNames(
-                className,
-                theme === Theme.dark && 'lumx-color-font-light-N',
-                handleBasicClasses({ prefix: CLASSNAME }),
-            )}
+            className={classNames(className, theme === Theme.dark && 'lumx-color-font-light-N', CLASSNAME)}
         >
             {content}
         </ul>

package/src/components/slideshow/SlideshowItem.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -34,16 +34,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 export const SlideshowItem = forwardRef<SlideshowItemProps, HTMLDivElement>((props, ref) => {
     const { className, children, ...forwardedProps } = props;
     return (
-        <div
-            ref={ref}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                }),
-            )}
-            {...forwardedProps}
-        >
+        <div ref={ref} className={classNames(className, CLASSNAME)} {...forwardedProps}>
             {children}
         </div>
     );

package/src/components/slideshow/SlideshowItemGroup.tsx

@@ -3,9 +3,8 @@ import React from 'react';
 import classNames from 'classnames';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
 import { useSlideFocusManagement } from './useSlideFocusManagement';
 
 /**
@@ -46,12 +45,7 @@ export const SlideshowItemGroup = forwardRef<SlideshowItemGroupProps, HTMLDivEle
         <div
             ref={mergeRefs(groupRef, ref)}
             role={role}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                }),
-            )}
+            className={classNames(className, CLASSNAME)}
             aria-roledescription="slide"
             aria-label={label}
             {...forwardedProps}

package/src/components/table/TableBody.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -32,11 +32,7 @@ export const TableBody = forwardRef<TableBodyProps, HTMLTableSectionElement>((pr
     const { children, className, ...forwardedProps } = props;
 
     return (
-        <tbody
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
-        >
+        <tbody ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
             {children}
         </tbody>
     );

package/src/components/table/TableCell.tsx

@@ -109,10 +109,7 @@ export const TableCell = forwardRef<TableCellProps, HTMLTableCellElement>((props
             )}
 
             {variant === TableCellVariant.body && (
-                <td
-                    {...forwardedProps}
-                    className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }), `${CLASSNAME}--body`)}
-                >
+                <td {...forwardedProps} className={classNames(className, CLASSNAME, `${CLASSNAME}--body`)}>
                     <div className={`${CLASSNAME}-content`}>{children}</div>
                 </td>
             )}

package/src/components/table/TableHeader.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -37,11 +37,7 @@ export const TableHeader = forwardRef<TableHeaderProps, HTMLTableSectionElement>
     const { children, className, ...forwardedProps } = props;
 
     return (
-        <thead
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
-        >
+        <thead ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
             {children}
         </thead>
     );

package/src/utils/className/getBasicClass.test.ts

@@ -0,0 +1,20 @@
+import { getBasicClass } from '@lumx/core/js/utils';
+
+describe(getBasicClass, () => {
+    it('should return correct basic CSS class for different types and values', () => {
+        // Test cases with different inputs
+        expect(getBasicClass({ prefix: 'test', type: 'color', value: 'primary' })).toBe('test--color-primary');
+        expect(getBasicClass({ prefix: 'test', type: 'variant', value: 'button' })).toBe('test--variant-button');
+        expect(getBasicClass({ prefix: 'test', type: 'isDark', value: true })).toBe('test--is-dark');
+        expect(getBasicClass({ prefix: 'test', type: 'dark', value: true })).toBe('test--is-dark');
+        expect(getBasicClass({ prefix: 'test', type: 'hasDark', value: true })).toBe('test--has-dark');
+        expect(getBasicClass({ prefix: 'test', type: 'isActive', value: false })).toBe('');
+
+        // Additional tests for boolean types
+        expect(getBasicClass({ prefix: 'test', type: 'hasBorder', value: true })).toBe('test--has-border');
+        expect(getBasicClass({ prefix: 'test', type: 'isVisible', value: false })).toBe('');
+
+        // Tests for undefined
+        expect(getBasicClass({ prefix: 'test', type: 'variant', value: undefined })).toBe('test--variant-undefined');
+    });
+});

package/src/utils/className/getFontColorClassName.test.ts

@@ -0,0 +1,11 @@
+import { getFontColorClassName } from '@lumx/react/utils/className/getFontColorClassName';
+
+describe(getFontColorClassName, () => {
+    it('should get lumx class for font color', () => {
+        expect(getFontColorClassName('dark')).toBe('lumx-color-font-dark-N');
+    });
+
+    it('should get lumx class for font color with variant', () => {
+        expect(getFontColorClassName('red', 'L2')).toBe('lumx-color-font-red-L2');
+    });
+});

package/src/utils/className/getRootClassName.test.ts

@@ -0,0 +1,11 @@
+import { getRootClassName } from '@lumx/react/utils/className/getRootClassName';
+
+describe(getRootClassName, () => {
+    it('should transform the component name into a lumx class', () => {
+        expect(getRootClassName('Table')).toBe('lumx-table');
+    });
+
+    it('should transform the sub component name into a lumx class', () => {
+        expect(getRootClassName('TableBody', true)).toBe('lumx-table__body');
+    });
+});

package/src/utils/className/getTypographyClassName.test.ts

@@ -0,0 +1,7 @@
+import { getTypographyClassName } from '@lumx/react/utils/className/getTypographyClassName';
+
+describe(getTypographyClassName, () => {
+    it('should generate lumx typography class', () => {
+        expect(getTypographyClassName('title')).toBe('lumx-typography-title');
+    });
+});

package/src/utils/className/handleBasicClasses.test.ts

@@ -0,0 +1,28 @@
+import { handleBasicClasses } from '@lumx/core/js/utils';
+
+describe(handleBasicClasses, () => {
+    it('should return correct combined CSS classes based on props', () => {
+        const className = handleBasicClasses({
+            prefix: 'test',
+            // Undefined
+            undefined,
+            // Null
+            null: null,
+            // Empty string
+            emptyString: '',
+            // Empty array
+            emptyArray: [],
+            // Empty object
+            emptyObject: {},
+            // String
+            color: 'red',
+            // False property
+            isDisabled: false,
+            // Boolean without a prefix (is or has)
+            visible: true,
+            // Has prefix
+            hasButton: true,
+        });
+        expect(className).toBe('test test--color-red test--is-visible test--has-button');
+    });
+});