@nuskin/foundation-ui-components 1.0.0-develop.3 → 1.0.0-develop.5

package/src/common/accordion/stories/NsAccordion.stories.tsx

@@ -0,0 +1,47 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import NsAccordion from '../NsAccordion';
+import { contentArray } from './data';
+import { AccordionVariant } from '../types.d';
+
+type ComponentType = typeof NsAccordion;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Accordion/NsAccordion',
+    component: NsAccordion,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        allowMultipleExpanded: {
+            control: 'boolean',
+            description: `if true, then multiple sections can remain open at a same time, and if false,
+            opening a section will close other sections of the accordion`,
+        },
+        contentArray: {
+            description: ` this should be an array of objects, each object should have 3 properties,
+            title, body and isDefaultOpen`,
+        },
+        variant: {
+            control: 'select',
+            options: [...Object.values(AccordionVariant)],
+        },
+    },
+    args: {
+        variant: AccordionVariant.Basic,
+    },
+} as MetaStory;
+
+export const SingleOpen: Story = {
+    args: {
+        allowMultipleExpanded: false,
+        contentArray,
+    },
+};
+
+export const MultipleOpen: Story = {
+    args: {
+        allowMultipleExpanded: true,
+        contentArray,
+    },
+};

package/src/common/accordion/stories/NsAccordionHeader.stories.tsx

@@ -0,0 +1,40 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { NsAccordionHeader, NsIconVariants } from '../..';
+
+type ComponentType = typeof NsAccordionHeader;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Accordion/NsAccordionHeader',
+    component: NsAccordionHeader,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        title: { control: 'string' },
+        openedIconName: {
+            control: 'select',
+            options: Object.keys(NsIconVariants),
+        },
+        closedIconName: {
+            control: 'select',
+            options: Object.keys(NsIconVariants),
+        },
+    },
+    args: {
+        title: 'Nuskin',
+        onClick: () => {
+            console.log('accordion header clicked');
+        },
+        openedIconName: 'arrowUp',
+        closedIconName: 'arrowDown',
+        isOpen: false,
+    },
+} as MetaStory;
+
+export const ClosedHeader: Story = {};
+export const OpenedHeader: Story = {
+    args: {
+        isOpen: true,
+    },
+};

package/src/common/accordion/stories/NsAccordionItem.stories.tsx

@@ -0,0 +1,40 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { NsAccordionItem } from '@/common/index';
+
+type ComponentType = typeof NsAccordionItem;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Accordion/NsAccordionItem',
+    component: NsAccordionItem,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        isOpen: {
+            control: 'boolean',
+            description: 'if true renders NsAccordionItem in open state, and close state otherwise',
+        },
+        content: {},
+        title: {
+            control: 'string',
+            description: 'text used for header of section',
+        },
+    },
+} as MetaStory;
+
+export const OpenSection: Story = {
+    args: {
+        isOpen: true,
+        content: 'Nuskin Description',
+        title: 'Nuskin',
+    },
+};
+
+export const ClosedSection: Story = {
+    args: {
+        isOpen: false,
+        content: 'Nuskin Description',
+        title: 'Nuskin',
+    },
+};

package/src/common/accordion/stories/NsCollapse.stories.tsx

@@ -0,0 +1,35 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { NsCollapse } from '../';
+
+type ComponentType = typeof NsCollapse;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Accordion/NsCollapse',
+    component: NsCollapse,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        isOpen: {
+            control: 'boolean',
+            description: 'if true renders NsCollapse in open state, and close state otherwise',
+        },
+        children: {
+            control: 'React Node',
+            description: 'Content for NsCollapse',
+        },
+    },
+} as MetaStory;
+export const Closed: Story = {
+    args: {
+        isOpen: false,
+        children: 'Nuskin Description',
+    },
+};
+export const Open: Story = {
+    args: {
+        isOpen: true,
+        children: 'Nuskin Description',
+    },
+};

package/src/common/accordion/stories/NsToggleSection.stories.tsx

@@ -0,0 +1,23 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { NsToggleSection } from '../..';
+
+type ComponentType = typeof NsToggleSection;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Accordion/NsToggleSection',
+    component: NsToggleSection,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        title: { control: 'string' },
+    },
+    args: {
+        title: 'Nuskin',
+        children: 'Nuskin Details',
+
+    },
+} as MetaStory;
+
+export const DefaultAccordion: Story = {};

package/src/common/accordion/stories/data.tsx

@@ -0,0 +1,22 @@
+import { NsAccordionProps } from '../types';
+
+export const contentArray: NsAccordionProps['contentArray'] = [
+    {
+        title: 'Nuskin',
+        body: <div>Nuskin Details</div>,
+        isDefaultOpen: true,
+    },
+    {
+        title: 'Nuskin',
+        body: <div>Nuskin Details</div>,
+        isDefaultOpen: true,
+    },
+    {
+        title: 'Nuskin',
+        body: <div>Nuskin Details</div>,
+    },
+    {
+        title: 'Nuskin',
+        body: <div>Nuskin Details</div>,
+    },
+];

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

@@ -0,0 +1,73 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { AdditionalProps } from '../common.types';
+import { NsIconNameType } from '../icon';
+import { Variants } from '../typography';
+
+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;
+    /** 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;
+};
+
+export type NsCollapseProps = AdditionalProps &
+    PropsWithChildren<{
+        isOpen: boolean;
+        variant: AccordionVariant;
+    }>;
+
+export type NsFramerCollapseProps = NsCollapseProps & {
+    transitionDetails?: {
+        duration?: number;
+        ease?: number[];
+    };
+};
+
+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 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
+}

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { render, fireEvent, screen, act } from '@/test-utils/index';
-// import { act } from 'react-dom/test-utils';
 import NsAlert from './NsAlert';
 
 const addEventListenerMock = jest.spyOn(window, 'addEventListener');

package/src/common/alert/NsAlert.styled.ts

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
-import { styled, css } from '@nuskin/foundation-theme';
-import { getAppColor } from '@nuskin/foundation-theme/src/utils/color-utils';
-import { FoundationTheme } from '@nuskin/foundation-theme/src/themes';
+import { styled, css, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
+
+const { color } = ColorUtils;
 
 import type { AlertContainerParams, AlertType, AlertParams, TypeMapCSS } from './types.d';
 const gutter_width = '10px';
@@ -43,7 +43,7 @@ export const AlertContainer = styled.div<AlertContainerParams>`
     }
     text-align: left;
 `;
-
+//[Todo-Arun] - Fonts should be driven through @next/font and according to theme
 const fontFamilyStyles = css`
     font-family: 'proxima-nova', 'OpenSans', 'Pridi', 'NotoSans', 'NotoSansSC', 'NotoSansHebrew', 'NotoSansJapanese',
         'Hiragino Kaku Gothic Pro', 'Yu Gothic Medium', 'Yu Gothic', Meiryo, 'source-han-sans-japanese',
@@ -57,11 +57,11 @@ export const Alert = styled.div<AlertParams>`
     grid-template-rows: [row1] auto;
     grid-auto-row: auto;
     grid-auto-flow: row;
-    background-color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
-    border: 1px solid ${({ theme }) => getAppColor(theme, 'primary', 'black')};
+    background-color: ${color('primary', 'white')};
+    border: 1px solid ${color('primary', 'black')};
     min-height: ${({ type }) => TypeMap?.[type]?.['min-height']};
     padding: ${({ type }) => TypeMap?.[type]?.['padding']};
-    color: ${({ context, theme }) => getAppColor(theme, contextType?.[context] as FoundationTheme.AppColors, '40')} };
+    color: ${(props) => color(contextType?.[props?.context] as FoundationTheme.AppColors, '40')(props)} };
 `;
 
 export const AlertCloseButton = styled.div`
@@ -92,7 +92,7 @@ export const AlertHead = styled.div`
     justify-content: center;
     span {
         ${fontFamilyStyles}
-        color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};
+        color: ${color('primary', 'black')};
         font-weight: 600;
         font-size: 18px;
         line-height: 20px;
@@ -101,14 +101,14 @@ export const AlertHead = styled.div`
 
 export const AlertContent = styled.div<{ type: AlertType }>`
     margin-top: 8px;
-    color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};
+    color: ${color('primary', 'black')};
     grid-column-start: ${({ type }) => TypeMap?.[type]?.['content-column-start']};
     grid-column-end: ${({ type }) => TypeMap?.[type]?.['content-column-end']};
 `;
 
 export const AlertFoot = styled.div<{ type: AlertType }>`
     margin-top: 8px;
-    color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};
+    color: ${color('primary', 'black')};
     display: ${({ type }) => TypeMap?.[type]?.['foot-display']};
     ${fontFamilyStyles}
     font-weight: 300;

package/src/common/alert/NsAlert.tsx

@@ -1,5 +1,6 @@
-/* eslint-disable react/require-default-props */
 import React, { useEffect, useState } from 'react';
+import { FoundationTheme } from '@nuskin/foundation-theme';
+
 import {
     AlertContainer,
     Alert,
@@ -13,7 +14,6 @@ import {
 import type { NsAlertProps, HeaderProps, ContextType, AlertType } from './types.d';
 import { NsIcon } from '../icon';
 import { NsIconNameType } from '../icon/types';
-import { FoundationTheme } from '@nuskin/foundation-theme/src/themes';
 
 const Header: React.FC<HeaderProps> = ({ children, head }) => (
     <>
@@ -57,7 +57,7 @@ export default function NsAlert({
     onDismiss = undefined,
 }: NsAlertProps) {
     const [alertType, setAlertType] = useState('banner');
-    const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+    const [windowWidth, setWindowWidth] = useState(0);
 
     const hasDismissListener = typeof onDismiss === 'function';
 
@@ -106,6 +106,7 @@ export default function NsAlert({
     }, [context, type]);
 
     useEffect(() => {
+        setWindowWidth(window?.innerWidth);
         window.addEventListener('resize', handleResize);
         return () => {
             window.removeEventListener('resize', handleResize);

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

@@ -1,15 +1,15 @@
 import { ReactNode, CSSProperties } from 'react';
 
 export interface NsAlertProps {
-    context?: string,
-    title?: string,
-    threshhold?: number,
-    type?: string,
-    visible?: boolean,
-    head?: ReactNode,
-    body?: ReactNode,
-    onDismiss?: () => void,
-    foot?: ReactNode
+    context?: string;
+    title?: string;
+    threshhold?: number; // TODO: update to threshold, i.e. remove extra h
+    type?: string;
+    visible?: boolean;
+    head?: ReactNode;
+    body?: ReactNode;
+    onDismiss?: () => void;
+    foot?: ReactNode;
 }
 
 export interface HeaderProps {
@@ -18,28 +18,28 @@ export interface HeaderProps {
 }
 
 export type AlertContainerParams = {
-    visible: boolean
+    visible: boolean;
 };
 
-export type ContextType = 'error' | 'info' | 'notice'| 'success' | 'warning';
+export type ContextType = 'error' | 'info' | 'notice' | 'success' | 'warning';
 export type AlertType = 'auto' | 'banner' | 'card';
 
 export type AlertParams = {
-    context: ContextType,
-    type: AlertType
-}
+    context: ContextType;
+    type: AlertType;
+};
 
 export type CustomCSSProperties = CSSProperties & {
     'min-height'?: string;
-    'content-column-start'? : string;
-    'content-column-end'? : string;
-    'bar-position'? : string;
-    'foot-visibility'? : string;
-    'foot-display'? : string;
+    'content-column-start'?: string;
+    'content-column-end'?: string;
+    'bar-position'?: string;
+    'foot-visibility'?: string;
+    'foot-display'?: string;
 };
 
 export interface TypeMapCSS {
-    banner: CustomCSSProperties,
-    card: CustomCSSProperties,
-    auto?: CustomCSSProperties
+    banner: CustomCSSProperties;
+    card: CustomCSSProperties;
+    auto?: CustomCSSProperties;
 }

package/src/common/auth-dropdown/NsAuthDropdown.styled.ts

@@ -1,9 +1,10 @@
 import { styled, ColorUtils } from '@nuskin/foundation-theme';
-import { getAppColor } from '@nuskin/foundation-theme/src/utils/color-utils';
-const { getPaletteColor } = ColorUtils;
 
+//[TODO-Arun] - Use from custom color variables
 const MAGENTA_COLOR = '#bb29bb';
 
+const { color, paletteColor } = ColorUtils;
+
 export const AuthDropdownContainer = styled.div`
     position: relative;
     display: inline-block;
@@ -19,7 +20,7 @@ export const AuthDropdown = styled.div`
     z-index: 600;
     top: calc(100% + 18px);
     right: 5%;
-    box-shadow: 0 0 5px 0 ${({ theme }) => getAppColor(theme, 'neutral', '20')};
+    box-shadow: 0 0 5px 0 ${color('neutral', '20')};
     transition: all 0.15s ease-in-out;
     padding: 25px;
 `;
@@ -39,21 +40,21 @@ export const Triangle = styled.div`
         position: absolute;
         width: 14px;
         height: 14px;
-        background-color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
+        background-color: ${color('primary', 'white')};
         transform: rotate(45deg);
         top: 17px;
         left: 5px;
-        box-shadow: 0 0 5px 0 ${({ theme }) => getAppColor(theme, 'neutral', '20')};
+        box-shadow: 0 0 5px 0 ${color('neutral', '20')};
     }
 `;
 
-export const AuthHead = styled.div`
+export const AuthHead = styled.div<{ darkModeEnabled: boolean }>`
     cursor: pointer;
     padding: 5px 10px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    color: ${({ theme }) => getPaletteColor(theme, 'primary')};
+    color: ${paletteColor('primary')};
 `;
 
 export const Button = styled.div`
@@ -69,17 +70,17 @@ export const SignInButton = styled(Link)`
     padding: 13px;
     width: 100%;
     background-color: ${MAGENTA_COLOR};
-    color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
+    color: ${color('primary', 'white')};
     border: 0;
     font-size: 16px;
     &:hover {
-        background-color: ${({ theme }) => getAppColor(theme, 'neutral', '70')};
+        background-color: ${color('neutral', '70')};
     }
 `;
 
 export const SignUpLinkContainer = styled.div`
     margin-top: 15px;
-    color: ${({ theme }) => getAppColor(theme, 'primary', 'main')};
+    color: ${color('primary', 'main')};
     font-size: 13px;
     line-height: 16px;
     text-align: left;
@@ -95,7 +96,7 @@ export const SignUpLink = styled(Link)`
     position: relative;
     transition: all 0.15s ease-in-out;
     &:hover {
-        color: ${({ theme }) => getAppColor(theme, 'neutral', '70')};
+        color: ${color('neutral', '70')};
         font-size: 14px;
     }
     &:hover::after {

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

@@ -20,6 +20,7 @@ const NsAuthDropdown = ({
     signUpLinkPrefixText,
     titleText,
     closeOnMouseLeave = false,
+    darkModeEnabled = true,
 }: NsAuthDropdownProps) => {
     const [isOpen, setIsOpen] = useState(false);
 
@@ -35,7 +36,7 @@ const NsAuthDropdown = ({
 
     return (
         <AuthDropdownContainer>
-            <AuthHead data-testid="auth-head" onClick={handleToggle}>
+            <AuthHead data-testid="auth-head" onClick={handleToggle} darkModeEnabled={darkModeEnabled}>
                 <Button>{titleText}</Button>
                 <NsIcon testId="chevron-icon" name={isOpen ? 'arrowUp' : 'arrowDown'} color="primary" />
                 {isOpen ? (

package/src/common/auth-dropdown/types.d.ts

@@ -1,3 +1,5 @@
+import { AdditionalProps } from '../common.types';
+
 export type NsAuthDropdownProps = {
     signInRedirectLink: string;
     signUpRedirectLink: string;
@@ -6,4 +8,4 @@ export type NsAuthDropdownProps = {
     signUpLinkPrefixText: string;
     titleText: string;
     closeOnMouseLeave?: boolean;
-};
+} & AdditionalProps;

package/src/common/autocomplete/NsAutocomplete.spec.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@/test-utils/index';
 import { NsAutocomplete } from '@/common/index';
 import { OptionUiComponent } from './mock/MockUI';
 import { AutocompleteMockList } from './mock/MockData';
 import userEvent from '@testing-library/user-event';
+import { act } from 'react-dom/test-utils';
 
 describe('CustomAutocomplete', () => {
     test('should render autocomplete component', () => {
@@ -29,11 +30,16 @@ describe('CustomAutocomplete', () => {
             />
         );
         const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
-        userEvent.type(autocompleteInput, 'GS Facial');
-        await waitFor(() => {
-            const option1 = screen.getByText('GS Facial Gels 2pk Subscription');
-            expect(option1).toBeInTheDocument();
+        act(() => {
+            userEvent.type(autocompleteInput, 'GS Facial');
         });
+        await waitFor(
+            () => {
+                const option1 = screen.getByText('GS Facial Gels 2pk Subscription');
+                expect(option1).toBeInTheDocument();
+            },
+            { timeout: 5000 }
+        );
     }, 40000);
 
     test('selects an option when clicking on it', async () => {
@@ -45,7 +51,9 @@ describe('CustomAutocomplete', () => {
             />
         );
         const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
-        userEvent.type(autocompleteInput, 'GS Facial');
+        act(() => {
+            userEvent.type(autocompleteInput, 'GS Facial');
+        });
         await waitFor(() => {
             const optionLi = screen.getByText('GS Facial Spa');
             userEvent.click(optionLi);
@@ -66,7 +74,9 @@ describe('CustomAutocomplete', () => {
             />
         );
         const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
-        userEvent.type(autocompleteInput, 'GS Facial');
+        act(() => {
+            userEvent.type(autocompleteInput, 'GS Facial');
+        });
         await waitFor(() => {
             const loadMoreButton = screen.getByTestId('autocomplete-loadmore-id');
             userEvent.click(loadMoreButton);
@@ -87,7 +97,9 @@ describe('CustomAutocomplete', () => {
             />
         );
         const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
-        userEvent.type(autocompleteInput, 'GS Facial');
+        act(() => {
+            userEvent.type(autocompleteInput, 'GS Facial');
+        });
         await waitFor(() => {
             const clearButton = screen.getByTestId('autocomplete-clear-id');
             userEvent.click(clearButton);

package/src/common/autocomplete/NsAutocomplete.stories.tsx

@@ -12,6 +12,7 @@ import { NsAutocomplete } from './';
 import { AutocompleteMockList } from './mock/MockData';
 import { OptionUiComponent } from './mock/MockUI';
 import { NsAutocompleteProps } from './types.d';
+import { NsIcon } from '../icon';
 
 type ComponentType = typeof NsAutocomplete;
 type Story = StoryObj<ComponentType>;
@@ -42,6 +43,8 @@ export default {
                 throw new Error('Function not implemented.');
             },
         },
+        iconStart: <NsIcon name="search" />,
+        iconEnd: <NsIcon name="close" size='small'/>,
         placeholder: 'search',
     },
 } as MetaStory;

package/src/common/autocomplete/NsAutocomplete.styled.tsx

@@ -0,0 +1,12 @@
+import { styled } from '@nuskin/foundation-theme';
+
+import { NsInputField } from '../input';
+
+export const StyledTextField = styled(NsInputField)`
+    .MuiAutocomplete-inputRoot {
+        padding-right: 10px !important;
+    }
+    .muiautocomplete-popupindicator {
+        display: none;
+    }
+`;