@nuskin/foundation-ui-components 1.0.2 → 1.1.1

package/src/common/accordion/types.d.ts

@@ -1,73 +1,81 @@
-import { PropsWithChildren, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { AdditionalProps } from '../common.types';
-import { NsIconNameType } from '../icon';
+import { NsIconNameType, NsIconProps } from '../icon';
 import { Variants } from '../typography';
+import { AccordionContentType, AccordionVariantType } from './enums';
+
+export type AccordionItem = {
+    allowMultipleExpanded?: boolean;
+    type: AccordionContentType;
+    id: string;
+    content: string | AccordionItem[] | ReactElement;
+    icon?: NsIconProps;
+    title: string;
+    isDefaultOpen?: boolean;
+};
+
+export type NsAccordionProps = AdditionalProps & {
+    invert: boolean;
+    level: number;
+    variant: AccordionVariantType;
+    items?: AccordionItem[];
+    isChild?: boolean;
+    headerTypographyVariant?: Variants;
+    /** NsIcon's icon name to be shown in opened state */
+    openedIconName?: NsIconNameType;
+    /** NsIcon's icon name to be shown in closed state */
+    closedIconName?: NsIconNameType;
+    allowMultipleExpanded: boolean;
+};
+
+type CommonAccordionType = {
+    invert: boolean;
+    level: number;
+    variant: AccordionVariantType;
+    content: AccordionItem['content'];
+};
 
 export type NsAccordionHeaderProps = AdditionalProps & {
     title: string | ReactNode;
     // eslint-disable-next-line no-unused-vars
     onClick: (...args: any[]) => void;
     /** a flag for the header, based on which header can change properties */
-    isOpen?: boolean;
+    isOpen: boolean;
     /** NsIcon's icon name to be shown in opened state */
     openedIconName?: NsIconNameType;
     /** NsIcon's icon name to be shown in closed state */
     closedIconName?: NsIconNameType;
-    variant: AccordionVariant;
     headerTypographyVariant?: Variants;
-};
+    startIcon?: NsIconProps;
+} & Pick<CommonAccordionType, 'invert' | 'variant'>;
 
-export type NsCollapseProps = AdditionalProps &
-    PropsWithChildren<{
-        isOpen: boolean;
-        variant: AccordionVariant;
-    }>;
-
-export type NsFramerCollapseProps = NsCollapseProps & {
-    transitionDetails?: {
-        duration?: number;
-        ease?: number[];
-    };
-};
+export type NsCollapseProps = AdditionalProps & {
+    isOpen: boolean;
+    isChild: boolean;
+    allowMultipleExpanded?: boolean;
+    type: AccordionContentType;
+} & CommonAccordionType;
 
-export type NsToggleSectionProps = AdditionalProps &
-    PropsWithChildren<{
-        title: string | ReactNode;
-        /** if true, NsToggle is rendered in open state, that collapsible section is visible */
-        defaultOpen?: boolean;
-        variant: AccordionVariant;
-    }>;
+export type NsToggleSectionProps = AdditionalProps & {
+    title: string | ReactNode;
+    /** if true, NsToggle is rendered in open state, that collapsible section is visible */
+    defaultOpen?: boolean;
+    isChild: boolean;
+    type: AccordionContentType;
+} & Pick<CommonAccordionType, 'invert' | 'variant' | 'content'>;
 
 export type NsAccordionItemProps = AdditionalProps & {
     isOpen: boolean;
     // eslint-disable-next-line no-unused-vars
     toggleOpen(index: number, isOpen: boolean): void;
     title: string | ReactNode;
-    content: ReactNode;
-    variant: AccordionVariant;
     headerTypographyVariant?: Variants;
     /** NsIcon's icon name to be shown in opened state */
     openedIconName?: NsIconNameType;
     /** NsIcon's icon name to be shown in closed state */
     closedIconName?: NsIconNameType;
-};
-export type NsAccordionProps = AdditionalProps & {
-    allowMultipleExpanded: boolean;
-    contentArray: {
-        title: string | ReactNode;
-        body: ReactNode;
-        isDefaultOpen?: boolean;
-    }[];
-    variant: AccordionVariant;
-    headerTypographyVariant?: Variants;
-    /** NsIcon's icon name to be shown in opened state */
-    openedIconName?: NsIconNameType;
-    /** NsIcon's icon name to be shown in closed state */
-    closedIconName?: NsIconNameType;
-};
-export enum AccordionVariant {
-    // eslint-disable-next-line no-unused-vars
-    Basic = 'basic', // basic is as per figma
-    // eslint-disable-next-line no-unused-vars
-    Compact = 'compact', // compact is as per test.nuskin.com
-}
+    startIcon?: NsIconProps;
+    isChild: boolean;
+    type: AccordionContentType;
+    allowMultipleExpanded?: boolean;
+} & CommonAccordionType;

package/src/common/alert/Header.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { FoundationTheme } from '@nuskin/foundation-theme';
+
+import type { HeaderProps } from './types.d';
+import { NsIconNameType } from '../icon/types';
+
+export const colorMap: { [key: string]: FoundationTheme.PaletteColors } = {
+    error: 'error',
+    notice: 'info',
+    success: 'secondary',
+    warning: 'warning',
+    default: 'info',
+};
+
+export const iconMap: { [key: string]: NsIconNameType } = {
+    error: 'alertError',
+    success: 'success',
+    warning: 'warning',
+    default: 'infoFilled',
+};
+
+const Header: React.FC<HeaderProps> = ({ children, head }) => (
+    <>
+        {children}
+        {head}
+    </>
+);
+
+export default Header;

package/src/common/alert/NsAlert.spec.tsx

@@ -6,12 +6,12 @@ const addEventListenerMock = jest.spyOn(window, 'addEventListener');
 const removeEventListenerMock = jest.spyOn(window, 'removeEventListener');
 
 describe('NsAlert', () => {
-    test('renders alert with provided props', () => {
+    test('1. renders alert with provided props', () => {
         render(
             <NsAlert
                 context="error"
                 title="Error Alert"
-                threshhold={800}
+                threshold={800}
                 type="banner"
                 visible
                 head={<span>Alert Head</span>}
@@ -27,13 +27,13 @@ describe('NsAlert', () => {
         expect(screen.getByText('Dismiss')).toBeInTheDocument();
     });
 
-    test('calls onDismiss function when dismissed', () => {
+    test('2. calls onDismiss function when dismissed', () => {
         const onDismissMock = jest.fn();
         render(
             <NsAlert
                 context="info"
                 title="Info Alert"
-                threshhold={600}
+                threshold={600}
                 type="auto"
                 visible
                 head={<span>Alert Head</span>}
@@ -48,12 +48,12 @@ describe('NsAlert', () => {
         expect(onDismissMock).toHaveBeenCalled();
     });
 
-    test('hides alert when not visible', () => {
+    test('3. hides alert when not visible', () => {
         render(
             <NsAlert
                 context="success"
                 title="Success Alert"
-                threshhold={700}
+                threshold={700}
                 type="card"
                 visible={false}
                 head={<span>Alert Head</span>}
@@ -64,13 +64,13 @@ describe('NsAlert', () => {
         expect(screen.getByTestId('alert-container')).toHaveStyle('display: none');
     });
 
-    test('adds and removes event listener on mount/unmount', () => {
+    test('4. adds and removes event listener on mount/unmount', () => {
         act(() => {
             render(
                 <NsAlert
                     context="notice"
                     title="Success Alert"
-                    threshhold={700}
+                    threshold={700}
                     type="card"
                     visible={false}
                     head={<span>Alert Head</span>}
@@ -84,7 +84,22 @@ describe('NsAlert', () => {
         expect(removeEventListenerMock).toHaveBeenCalledWith('resize', expect.any(Function));
     });
 
-    test('updates windowWidth on resize', () => {
+    test('5. updates windowWidth on resize and auto type and greater threshold to select card', () => {
+        const originalInnerWidth = window.innerWidth;
+        window.innerWidth = 500; // Set a desired window width for testing
+
+        act(() => {
+            render(<NsAlert threshold={2000} type="auto" />);
+        });
+
+        // Simulate a resize event by restoring the original innerWidth
+        window.innerWidth = originalInnerWidth;
+
+        act(() => {
+            window.dispatchEvent(new Event('resize'));
+        });
+    });
+    test('6. updates windowWidth on resize', () => {
         const originalInnerWidth = window.innerWidth;
         window.innerWidth = 500; // Set a desired window width for testing
 
@@ -100,12 +115,12 @@ describe('NsAlert', () => {
         });
     });
 
-    test('get props error in console for types', () => {
+    test('7. get props error in console for types', () => {
         render(
             <NsAlert
                 context="warning"
                 title="warning Alert"
-                threshhold={800}
+                threshold={800}
                 type="noCard"
                 visible
                 head={<span>Alert Head</span>}
@@ -116,12 +131,12 @@ describe('NsAlert', () => {
         expect(screen.getByTestId('alert-container')).toHaveStyle('display: block');
     });
 
-    test('get props error in console for context', () => {
+    test('8. get props error in console for context', () => {
         render(
             <NsAlert
                 context="warningError"
                 title="warning Alert"
-                threshhold={800}
+                threshold={800}
                 type="card"
                 visible
                 head={<span>Alert Head</span>}
@@ -131,4 +146,22 @@ describe('NsAlert', () => {
 
         expect(screen.getByTestId('alert-container')).toHaveStyle('display: block');
     });
+    test('9. console.error to be called twice', () => {
+        const original = console.error;
+        console.error = jest.fn();
+        render(
+            <NsAlert
+                context=""
+                title="warning Alert"
+                threshold={2000}
+                type=""
+                visible
+                head={<span>Alert Head</span>}
+                body={<p>Alert Body</p>}
+            />
+        );
+        expect(console.error).toHaveBeenCalledTimes(2);
+        console.error = original;
+        expect(screen.getByTestId('alert-container')).toHaveStyle('display: block');
+    });
 });

package/src/common/alert/NsAlert.stories.tsx

@@ -8,7 +8,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsAlert',
+    title: 'Components/Feedback/NsAlert',
     component: NsAlert,
     decorators: [withCenterDecorator],
     argTypes: {
@@ -24,7 +24,7 @@ export default {
     args: {
         context: 'info',
         title: 'Information',
-        threshhold: 600,
+        threshold: 600,
         type: 'banner',
         visible: true,
         onDismiss: () => {},
@@ -40,4 +40,4 @@ export default {
     },
 } as MetaStory;
 
-export const AuthDropdown: Story = {};
+export const Alert: Story = {};

package/src/common/alert/{NsAlert.styled.ts → NsAlert.styled.tsx}

@@ -3,27 +3,27 @@ import { styled, css, ColorUtils, FoundationTheme } from '@nuskin/foundation-the
 
 const { color } = ColorUtils;
 
-import type { AlertContainerParams, AlertType, AlertParams, TypeMapCSS } from './types.d';
-const gutter_width = '10px';
-const close_button_width = '12px';
-const icon_width = '24px';
+import type { AlertContainerParams, AlertType, AlertParams, TypeMapCSS } from './types';
+const gutterWidth = '10px';
+const closeButtonWidth = '12px';
+const iconWidth = '24px';
 
 const TypeMap: TypeMapCSS = {
     banner: {
-        'min-height': '114px',
+        minHeight: '114px',
         padding: '15px 45px',
-        'content-column-start': 'row-center',
-        'content-column-end': 'row-center',
-        'bar-position': 'top',
-        'foot-visibility': 'block',
+        contentColumnStart: 'row-center',
+        contentColumnEnd: 'row-center',
+        barPosition: 'top',
+        footVisibility: 'block',
     },
     card: {
-        'min-height': '72px',
+        minHeight: '72px',
         padding: '24px 24px',
-        'content-column-start': 'row-left',
-        'content-column-end': 'row-right',
-        'bar-position': 'left',
-        'foot-display': 'none',
+        contentColumnStart: 'row-left',
+        contentColumnEnd: 'row-right',
+        barPosition: 'left',
+        footDisplay: 'none',
     },
 };
 
@@ -53,14 +53,14 @@ const fontFamilyStyles = css`
 export const Alert = styled.div<AlertParams>`
     position: relative;
     display: grid;
-    grid-template-columns: [row-left] ${icon_width} [space] ${gutter_width} [row-center] auto [space] ${gutter_width} [row-right] ${close_button_width};
+    grid-template-columns: [row-left] ${iconWidth} [space] ${gutterWidth} [row-center] auto [space] ${gutterWidth} [row-right] ${closeButtonWidth};
     grid-template-rows: [row1] auto;
     grid-auto-row: auto;
     grid-auto-flow: row;
     background-color: ${color('primary', 'white')};
     border: 1px solid ${color('primary', 'black')};
-    min-height: ${({ type }) => TypeMap?.[type]?.['min-height']};
-    padding: ${({ type }) => TypeMap?.[type]?.['padding']};
+    min-height: ${({ type }) => TypeMap?.[type]?.minHeight};
+    padding: ${({ type }) => TypeMap?.[type]?.padding};
     color: ${(props) => color(contextType?.[props?.context] as FoundationTheme.AppColors, '40')(props)} };
 `;
 
@@ -78,8 +78,8 @@ export const AlertIcon = styled.div`
     grid-column-end: row-left;
     grid-row-start: row1;
     grid-row-end: row1;
-    width: ${icon_width};
-    height: ${icon_width};
+    width: ${iconWidth};
+    height: ${iconWidth};
 `;
 
 export const AlertHead = styled.div`
@@ -102,14 +102,14 @@ export const AlertHead = styled.div`
 export const AlertContent = styled.div<{ type: AlertType }>`
     margin-top: 8px;
     color: ${color('primary', 'black')};
-    grid-column-start: ${({ type }) => TypeMap?.[type]?.['content-column-start']};
-    grid-column-end: ${({ type }) => TypeMap?.[type]?.['content-column-end']};
+    grid-column-start: ${({ type }) => TypeMap?.[type]?.contentColumnStart};
+    grid-column-end: ${({ type }) => TypeMap?.[type]?.contentColumnEnd};
 `;
 
 export const AlertFoot = styled.div<{ type: AlertType }>`
     margin-top: 8px;
     color: ${color('primary', 'black')};
-    display: ${({ type }) => TypeMap?.[type]?.['foot-display']};
+    display: ${({ type }) => TypeMap?.[type]?.['footDisplay']};
     ${fontFamilyStyles}
     font-weight: 300;
     font-size: 14px;

package/src/common/alert/NsAlert.tsx

@@ -1,6 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { FoundationTheme } from '@nuskin/foundation-theme';
-
 import {
     AlertContainer,
     Alert,
@@ -11,44 +9,15 @@ import {
     AlertFoot,
     AlertBody,
 } from './NsAlert.styled';
-import type { NsAlertProps, HeaderProps, ContextType, AlertType } from './types.d';
+import type { NsAlertProps, ContextType, AlertType } from './types.d';
 import { NsIcon } from '../icon';
-import { NsIconNameType } from '../icon/types';
-
-const Header: React.FC<HeaderProps> = ({ children, head }) => (
-    <>
-        {children}
-        {head}
-    </>
-);
-
-function isValidContextValue(value: string): boolean {
-    return (value as ContextType) !== undefined;
-}
-
-function isValidTypeValue(value: string): boolean {
-    return (value as AlertType) !== undefined;
-}
-
-const colorMap: { [key: string]: FoundationTheme.PaletteColors } = {
-    error: 'error',
-    notice: 'info',
-    success: 'secondary',
-    warning: 'warning',
-    default: 'info',
-};
-
-const iconMap: { [key: string]: NsIconNameType } = {
-    error: 'alertError',
-    success: 'success',
-    warning: 'warning',
-    default: 'infoFilled',
-};
+import Header, { colorMap, iconMap } from './Header';
+import useWindowSize from '../hooks/useWindowSize';
 
 export default function NsAlert({
     context = 'info',
     title = 'Information',
-    threshhold = 600,
+    threshold = 600,
     type = 'banner',
     visible = false,
     head,
@@ -57,76 +26,42 @@ export default function NsAlert({
     onDismiss = undefined,
 }: NsAlertProps) {
     const [alertType, setAlertType] = useState('banner');
-    const [windowWidth, setWindowWidth] = useState(0);
+    const windowSize = useWindowSize();
 
     const hasDismissListener = typeof onDismiss === 'function';
 
-    const getColor = () => {
-        return colorMap[context] || colorMap.default;
-    };
-
-    const getIcon = () => {
-        return iconMap[context] || iconMap.default;
-    };
-
-    const getTitleText = () => {
-        if (title) {
-            return title;
-        }
-    };
-
-    const handleDismiss = () => {
-        if (hasDismissListener) {
-            onDismiss();
-        }
-    };
-
-    const handleResize = () => {
-        setWindowWidth(window.innerWidth);
-    };
-
-    useEffect(() => {
-        let aType = '';
-        if (type === 'auto') {
-            aType = windowWidth < threshhold ? 'card' : 'banner';
-        } else {
-            aType = type;
-        }
-        setAlertType(aType);
-    }, [threshhold, type, windowWidth]);
-
     useEffect(() => {
-        if (!isValidContextValue(context)) {
+        if (!context) {
             console.error(`Invalid prop value for 'context': ${context}`);
         }
-
-        if (!isValidTypeValue(type)) {
+        if (!type) {
             console.error(`Invalid prop value for 'type': ${type}`);
         }
-    }, [context, type]);
-
-    useEffect(() => {
-        setWindowWidth(window?.innerWidth);
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, []);
+        if (type === 'auto') {
+            setAlertType(windowSize.width < threshold ? 'card' : 'banner');
+        } else {
+            setAlertType(type);
+        }
+    }, [threshold, type, windowSize.width, context]);
 
     return (
         <AlertContainer visible={visible} data-testid="alert-container">
             <Alert type={alertType as AlertType} context={context as ContextType}>
                 <AlertIcon>
-                    <NsIcon name={getIcon()} color={getColor()} size="large" />
+                    <NsIcon
+                        name={iconMap[context] || iconMap.default}
+                        color={colorMap[context] || colorMap.default}
+                        size="large"
+                    />
                 </AlertIcon>
                 <AlertHead>
-                    <Header head={<span>{getTitleText()}</span>}>{head}</Header>
+                    <Header head={<span>{title}</span>}>{head}</Header>
                 </AlertHead>
-                {hasDismissListener ? (
-                    <AlertCloseButton data-testid="alert-close-button" onClick={handleDismiss}>
+                {hasDismissListener && (
+                    <AlertCloseButton data-testid="alert-close-button" onClick={onDismiss}>
                         <NsIcon name="close" size="small" />
                     </AlertCloseButton>
-                ) : null}
+                )}
                 <AlertContent type={alertType as AlertType}>
                     <AlertBody>{body}</AlertBody>
                     {foot ? <AlertFoot type={alertType as AlertType}>{foot}</AlertFoot> : null}

package/src/common/alert/types.d.ts

@@ -3,7 +3,7 @@ import { ReactNode, CSSProperties } from 'react';
 export interface NsAlertProps {
     context?: string;
     title?: string;
-    threshhold?: number; // TODO: update to threshold, i.e. remove extra h
+    threshold?: number;
     type?: string;
     visible?: boolean;
     head?: ReactNode;
@@ -30,12 +30,12 @@ export type AlertParams = {
 };
 
 export type CustomCSSProperties = CSSProperties & {
-    'min-height'?: string;
-    'content-column-start'?: string;
-    'content-column-end'?: string;
-    'bar-position'?: string;
-    'foot-visibility'?: string;
-    'foot-display'?: string;
+    minHeight?: string;
+    contentColumnStart?: string;
+    contentColumnEnd?: string;
+    barPosition?: string;
+    footVisibility?: string;
+    footDisplay?: string;
 };
 
 export interface TypeMapCSS {

package/src/common/auth-dropdown/NsAuthDropdown.spec.tsx

@@ -10,27 +10,45 @@ describe('NsAuthDropdown', () => {
         signUpLinkText: 'Sign Up',
         signUpLinkPrefixText: 'Do not have an account?',
         titleText: 'Welcome',
-        closeOnMouseLeave: false,
     };
 
-    it('should render component with title text', () => {
+    it('1. should render component with title text', () => {
         render(<NsAuthDropdown {...props} />);
         expect(screen.getByText('Welcome')).toBeInTheDocument();
     });
 
-    it('should render the sign in button with text', () => {
+    it('2. should render the sign in button with text', () => {
         render(<NsAuthDropdown {...props} />);
         const authHead = screen.getByTestId('auth-head');
         fireEvent.click(authHead);
         expect(screen.getByTestId('sign-in-btn')).toBeInTheDocument();
-        expect(screen.getByTestId('sign-in-btn')).toHaveTextContent('Sign In');
+        expect(screen.getByTestId('sign-in-btn')).toHaveTextContent(props.signInBtnText);
+        expect(screen.getByTestId('signup-link')).toHaveTextContent(props.signUpLinkText);
     });
 
-    it('should have the correct href attribute in SignUpLink', () => {
+    it('3. should have the correct href attribute in SignUpLink', () => {
         render(<NsAuthDropdown {...props} />);
         const authHead = screen.getByTestId('auth-head');
         fireEvent.click(authHead);
         const signUpLink = screen.getByTestId('signup-link');
         expect(signUpLink).toHaveAttribute('href', '/signUp');
     });
+    it('4. should close dropdown on mouse leave', () => {
+        const { container } = render(<NsAuthDropdown {...props} closeOnMouseLeave={true} />);
+        const authHead = screen.getByTestId('auth-head');
+        fireEvent.click(authHead);
+        expect(screen.getByTestId('sign-in-btn')).toHaveTextContent('Sign In');
+        const wrapper = container.querySelector('.auth-wrapper');
+        if (wrapper) fireEvent.mouseLeave(wrapper);
+        expect(container.querySelector('.auth-wrapper')).toBeNull();
+    });
+    it('5. should not close dropdown on mouse leave', () => {
+        const { container } = render(<NsAuthDropdown {...props} closeOnMouseLeave={false} />);
+        const authHead = screen.getByTestId('auth-head');
+        fireEvent.click(authHead);
+        expect(screen.getByTestId('sign-in-btn')).toHaveTextContent('Sign In');
+        const wrapper = container.querySelector('.auth-wrapper');
+        if (wrapper) fireEvent.mouseLeave(wrapper);
+        expect(container.querySelector('.auth-wrapper')).not.toBeNull();
+    });
 });

package/src/common/auth-dropdown/NsAuthDropdown.stories.tsx

@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsAuthDropdown',
+    title: 'Components/Data Display/NsAuthDropdown',
     component: NsAuthDropdown,
     decorators: [withCenterDecorator],
     argTypes: {},