@nuskin/foundation-ui-components 1.0.0-develop.7 → 1.0.0-develop.9

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

@@ -1,5 +1,5 @@
 import { NsIconProps } from '../..';
-import { AccordionItem, ItemContent } from '../types';
+import { AccordionItem } from '../types';
 
 const getItem = () => {
     return {
@@ -14,8 +14,8 @@ const getIcon = (name = '', color = '') => {
 };
 export const getTextContent = (text = '') => {
     return {
-        type: 'text' as ItemContent['type'],
-        data: text || dummyText,
+        type: 'text' as AccordionItem['type'],
+        content: text || dummyText,
     };
 };
 const getJsxContent = (text = '') => {
@@ -33,6 +33,7 @@ function createAccordionItem1(): AccordionItem {
         icon: getIcon(),
         title: 'Example - 1 JSX',
         content: getJsxContent(),
+        type: 'jsx',
         isDefaultOpen: true,
     };
 }
@@ -42,18 +43,17 @@ function createAccordionItem2(): AccordionItem {
         isDefaultOpen: true,
         icon: getIcon(),
         title: 'Example - 2',
-        content: {
-            type: 'accordion',
-            data: [
-                { ...getItem(), title: 'Example - 2.1', content: getTextContent() },
-                {
-                    ...getItem(),
-                    icon: getIcon('hamburgerIcon', 'success'),
-                    title: 'Example - 2.2',
-                    content: <div className="p-2">Example 2.2 Content</div>,
-                },
-            ],
-        },
+        type: 'accordion',
+        content: [
+            { ...getItem(), title: 'Example - 2.1', ...getTextContent() },
+            {
+                ...getItem(),
+                icon: getIcon('hamburgerIcon', 'success'),
+                title: 'Example - 2.2',
+                type: 'jsx',
+                content: <div className="p-2">Example 2.2 Content</div>,
+            },
+        ],
     };
 }
 function createAccordionItem3(): AccordionItem {
@@ -61,21 +61,17 @@ function createAccordionItem3(): AccordionItem {
         ...getItem(),
         icon: getIcon('hamburgerIcon', 'success'),
         title: 'Example - 3',
-        content: {
-            type: 'accordion',
-            data: [
-                createAccordionItem3_1(),
-                {
-                    ...getItem(),
+        type: 'accordion',
+        content: [
+            createAccordionItem3_1(),
+            {
+                ...getItem(),
 
-                    title: 'Example - 3.2',
-                    content: {
-                        type: 'text',
-                        data: dummyText,
-                    },
-                },
-            ],
-        },
+                title: 'Example - 3.2',
+                type: 'text',
+                content: dummyText,
+            },
+        ],
     };
 }
 
@@ -83,28 +79,22 @@ export function createAccordionItem3_1(): AccordionItem {
     return {
         ...getItem(),
         title: 'Example - 3.1',
-        content: {
-            type: 'accordion',
-            allowMultipleExpanded: true,
-            data: [
-                {
-                    ...getItem(),
-                    title: 'Example - 3.1.1',
-                    content: {
-                        type: 'text',
-                        data: dummyText,
-                    },
-                },
-                {
-                    ...getItem(),
-                    title: 'Example - 3.1.2',
-                    content: {
-                        type: 'text',
-                        data: dummyText,
-                    },
-                },
-            ],
-        },
+        allowMultipleExpanded: true,
+        type: 'accordion',
+        content: [
+            {
+                ...getItem(),
+                title: 'Example - 3.1.1',
+                type: 'text',
+                content: dummyText,
+            },
+            {
+                ...getItem(),
+                title: 'Example - 3.1.2',
+                type: 'text',
+                content: dummyText,
+            },
+        ],
     };
 }
 
@@ -113,20 +103,16 @@ function createAccordionItem4(): AccordionItem {
         ...getItem(),
         icon: getIcon(),
         title: 'Example - 4',
-        content: {
-            type: 'accordion',
-            data: [
-                createAccordionItem4_1(),
-                {
-                    ...getItem(),
-                    title: 'Example - 4.2',
-                    content: {
-                        type: 'html',
-                        data: '<h2>Lorem ipsum dolor sit amet.</h2>',
-                    },
-                },
-            ],
-        },
+        type: 'accordion',
+        content: [
+            createAccordionItem4_1(),
+            {
+                ...getItem(),
+                title: 'Example - 4.2',
+                type: 'html',
+                content: '<h2>Lorem ipsum dolor sit amet.</h2>',
+            },
+        ],
     };
 }
 
@@ -134,25 +120,22 @@ function createAccordionItem4_1(): AccordionItem {
     return {
         ...getItem(),
         title: 'Example - 4.1',
-        content: {
-            type: 'accordion',
-            data: [
-                {
-                    ...getItem(),
+        type: 'accordion',
+        content: [
+            {
+                ...getItem(),
 
-                    title: 'Example - 4.1.1',
-                    content: {
-                        type: 'text',
-                        data: dummyText,
-                    },
-                },
-                {
-                    ...getItem(),
-                    content: <div className="p-3">Example 4.1.2. content</div>,
-                    title: 'Example - 4.1.2',
-                },
-            ],
-        },
+                title: 'Example - 4.1.1',
+                type: 'text',
+                content: dummyText,
+            },
+            {
+                ...getItem(),
+                type: 'jsx',
+                content: <div className="p-3">Example 4.1.2. content</div>,
+                title: 'Example - 4.1.2',
+            },
+        ],
     };
 }
 export function getAccordionData(): AccordionItem[] {

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

@@ -1,18 +1,14 @@
-import {ReactElement, ReactNode} from 'react';
-import {AdditionalProps} from '../common.types';
-import {NsIconNameType, NsIconProps} from '../icon';
-import {Variants} from '../typography';
-import {AccordionVariantType} from './enums';
-
-export interface ItemContent {
-    type: 'text' | 'html' | 'accordion' | 'jsx';
-    allowMultipleExpanded?: boolean;
-    data: string | AccordionItem[];
-}
+import { ReactElement, ReactNode } from 'react';
+import { AdditionalProps } from '../common.types';
+import { NsIconNameType, NsIconProps } from '../icon';
+import { Variants } from '../typography';
+import { AccordionVariantType } from './enums';
 
 export type AccordionItem = {
+    allowMultipleExpanded?: boolean;
+    type: 'text' | 'html' | 'accordion' | 'jsx';
     id: string;
-    content: ItemContent | ReactElement;
+    content: string | AccordionItem[] | ReactElement;
     icon?: NsIconProps;
     title: string;
     isDefaultOpen?: boolean;
@@ -56,6 +52,8 @@ export type NsAccordionHeaderProps = AdditionalProps & {
 export type NsCollapseProps = AdditionalProps & {
     isOpen: boolean;
     isChild: boolean;
+    allowMultipleExpanded?: boolean;
+    type: 'text' | 'html' | 'accordion' | 'jsx';
 } & CommonAccordionType;
 
 export type NsToggleSectionProps = AdditionalProps & {
@@ -63,6 +61,7 @@ export type NsToggleSectionProps = AdditionalProps & {
     /** if true, NsToggle is rendered in open state, that collapsible section is visible */
     defaultOpen?: boolean;
     isChild: boolean;
+    type: 'text' | 'html' | 'accordion' | 'jsx';
 } & Pick<CommonAccordionType, 'invert' | 'variant' | 'content'>;
 
 export type NsAccordionItemProps = AdditionalProps & {
@@ -77,4 +76,6 @@ export type NsAccordionItemProps = AdditionalProps & {
     closedIconName?: NsIconNameType;
     startIcon?: NsIconProps;
     isChild: boolean;
+    type: 'text' | 'html' | 'accordion' | 'jsx';
+    allowMultipleExpanded?: boolean;
 } & CommonAccordionType;

package/src/common/card/NsFfgCard.tsx

@@ -2,15 +2,21 @@ import { NsNextImage, NsLink } from '../';
 import { NsFfgStyled } from './styled/NsFfgStyled';
 import { NsFfgCardProps } from './types.d';
 
-const NsFfgCard = ({ actionText, actionLink, text, topImageUrl, topImageAlt, additionalProps }: NsFfgCardProps) => {
+const NsFfgCard = ({ cardLink, text, topImageUrl, topImageAlt, additionalProps, cslp, onClick }: NsFfgCardProps) => {
     return (
-        <NsFfgStyled data-testid={additionalProps?.testid}>
-            <div className="top-image">
+        <NsFfgStyled
+            data-testid={additionalProps?.testid}
+            onClick={onClick}
+            className={additionalProps?.className ?? ''}
+        >
+            <header className="top-image">
                 <NsNextImage height={192} width={288} alt={topImageAlt} src={topImageUrl} />
-            </div>
-            <div className="body-text">{text}</div>
-            <NsLink className="action-link" href={actionLink}>
-                {actionText || 'LEARN MORE'}
+            </header>
+            <article className="body-text" {...cslp?.card_text}>
+                {text}
+            </article>
+            <NsLink className="action-link" href={cardLink.href} additionalProps={cslp?.action_text}>
+                {cardLink.title || 'LEARN MORE'}
             </NsLink>
         </NsFfgStyled>
     );

package/src/common/card/specs/NsFfgCard.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import NsFfgCard from '../NsFfgCard';
 
 describe('NsFfgCard component', () => {
@@ -6,18 +6,28 @@ describe('NsFfgCard component', () => {
         topImageUrl: 'https://media.nuskin.com/m/6245528b8f76ad32/webimage-brand-ageLOC.png',
         topImageAlt: 'alt-text',
         text: 'card text',
-        actionLink: 'https://www.google.com',
+        cardLink: { href: 'https://www.google.com', title: 'Test' },
+        onClick: jest.fn(),
     };
-    it('renders with background image', () => {
+    it('1. renders with background image', () => {
         render(<NsFfgCard {...props} additionalProps={{ testid: 'ffg-card' }} />);
         const card = screen.getByTestId('ffg-card');
         expect(card).toHaveStyle(`
-    			background-color: #fff;
-    		`);
+          background-color: #fff;
+        `);
     });
-    it('renders with cover size', () => {
-        render(<NsFfgCard {...props} additionalProps={{ testid: 'ffg-card-1' }} actionText="Details" />);
-        const card = screen.getByText('Details');
+    it('2. renders with cover size', () => {
+        render(<NsFfgCard {...props} additionalProps={{ testid: 'ffg-card-1' }} />);
+        const card = screen.getByText(props.cardLink.title);
         expect(card).toBeInTheDocument();
     });
+    it('3. calls onclick', () => {
+        const handler = jest.fn();
+        const { getByTestId } = render(
+            <NsFfgCard {...props} onClick={handler} additionalProps={{ testid: 'ffg-card-1' }} />
+        );
+        const card = getByTestId('ffg-card-1');
+        fireEvent.click(card);
+        expect(handler).toHaveBeenCalled();
+    });
 });

package/src/common/card/stories/NsFfgCard.stories.tsx

@@ -11,33 +11,63 @@ type MetaStory = Meta<ComponentType>;
 export default {
     component: NsFfgCard,
     title: 'Components/Containers/Card/NsFfgCard',
-    argTypes: {},
+    argTypes: {
+        onClick: {
+            action: 'clicked',
+        },
+    },
     decorators: [withCenterDecorator],
 } as MetaStory;
 
+const text = `Every child deserves a chance to shine. Through our Nu Skin Force for Good Foundation,
+ we’re empowering children around the world with hope for a brighter future.`;
+const host = 'https://images.contentstack.io/v3/assets';
+
 export const Default: Story = {
     args: {
-        actionText: 'LEARN MORE',
-        actionLink: 'https://www.forceforgood.org/',
-        // eslint-disable-next-line max-len
-        text: 'Every child deserves a chance to shine. Through our Nu Skin Force for Good Foundation, we’re empowering children around the world with hope for a brighter future.',
-        topImageUrl:
-            // eslint-disable-next-line max-len
-            'https://images.contentstack.io/v3/assets/blt594f30e2dc643eae/blt34cdb300dc9b93ff/645ccaa7520ba1a1af13a08a/nsffg-foundation.webp',
+        cardLink: {
+            href: 'https://www.forceforgood.org/',
+            title: 'LEARN MORE',
+        },
+        text,
+        topImageUrl: `${host}/blt594f30e2dc643eae/blt34cdb300dc9b93ff/645ccaa7520ba1a1af13a08a/nsffg-foundation.webp`,
+        topImageAlt: 'Force for Good Foundation',
+        additionalProps: {
+            testid: 'ffg-card',
+        },
+        onClick: () => {
+            console.log('onClick called');
+        },
+    },
+    play: async ({ canvasElement }: any) => {
+        const canvas = within(canvasElement);
+        userEvent.hover(canvas.getByTestId('ffg-card'));
+        userEvent.hover(canvas.getByRole('link'));
+        expect(canvas.getByText(text)).toBeInTheDocument();
+    },
+};
+const d = { count: -1 };
+export const OnClick: Story = {
+    args: {
+        cardLink: {
+            href: 'https://www.forceforgood.org/',
+            title: 'LEARN MORE',
+        },
+        text,
+        topImageUrl: `${host}/blt594f30e2dc643eae/blt34cdb300dc9b93ff/645ccaa7520ba1a1af13a08a/nsffg-foundation.webp`,
         topImageAlt: 'Force for Good Foundation',
         additionalProps: {
             testid: 'ffg-card',
         },
+        onClick: () => {
+            d.count = 1;
+            console.log('on click called');
+        },
     },
-    play: async ({ canvasElement }) => {
+    play: async ({ canvasElement }: any) => {
+        d.count = 0;
         const canvas = within(canvasElement);
-        await userEvent.hover(canvas.getByTestId('ffg-card'));
-        await userEvent.hover(canvas.getByRole('link'));
-        expect(
-            canvas.getByText(
-                // eslint-disable-next-line max-len
-                'Every child deserves a chance to shine. Through our Nu Skin Force for Good Foundation, we’re empowering children around the world with hope for a brighter future.'
-            )
-        ).toBeInTheDocument();
+        userEvent.click(canvas.getByTestId('ffg-card'));
+        expect(d.count).toEqual(1);
     },
 };

package/src/common/card/styled/NsFfgStyled.tsx

@@ -1,8 +1,6 @@
 import { Box } from '@mui/material';
 import { styled } from '@nuskin/foundation-theme';
 
-const options = {};
-
 const Component = () => {
     return {
         backgroundClip: 'border-box',
@@ -10,9 +8,10 @@ const Component = () => {
         border: '1px solid #eff2f7',
         borderRadius: '1rem',
         boxShadow: '0 0.75rem 1.5rem rgba(18, 38, 63, .03)',
+        cursor: 'pointer',
         display: 'flex',
         flexDirection: 'column' as 'column', // https://github.com/cssinjs/jss/issues/1344
-        marginBottom: '2rem',
+        marginBottom: '16px',
         transition: 'all .2s ease',
         textAlign: 'center' as 'center',
         wordWrap: 'break-word' as 'break-word',
@@ -25,12 +24,15 @@ const Component = () => {
             },
         },
         '.body-text': {
-            padding: '0 1.5rem 3rem',
-            fontSize: '1rem',
+            padding: '0 1.5rem 4rem',
+            fontSize: '16px',
             color: '#8492a6',
         },
         '.top-image': {
-            padding: '1.5rem 3rem',
+            padding: '3rem 1.5rem',
+            img: {
+                maxWidth: '100%',
+            },
         },
         '.action-link': {
             color: '#3c4858',
@@ -41,4 +43,4 @@ const Component = () => {
         },
     };
 };
-export const NsFfgStyled = styled(Box, options)(Component);
+export const NsFfgStyled = styled(Box)(Component);

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

@@ -1,9 +1,12 @@
-import { AdditionalProps } from '../common.types';
-
+import { AdditionalProps, CslpTag } from '../common.types';
 export type NsFfgCardProps = AdditionalProps & {
     topImageUrl: string;
     topImageAlt: string;
     text: string;
-    actionLink: string;
-    actionText?: string;
+    cardLink: { href: string; title: string };
+    onClick(): void;
+    cslp?: {
+        card_text: CslpTag;
+        action_text: CslpTag;
+    };
 };

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

@@ -1,8 +1,6 @@
 import { FoundationTheme } from '@nuskin/foundation-theme';
 
-export type ContentStackLiveTags = {
-    'data-cslp'?: string;
-};
+export type CslpTag = { 'data-cslp': string };
 
 export type AdditionalProps = {
     additionalProps?: {
@@ -10,7 +8,8 @@ export type AdditionalProps = {
         testid?: string;
         className?: string;
         'data-testid'?: string;
-    } & ContentStackLiveTags;
+    } & Partial<CslpTag>;
+    cslp?: Record<string, CslpTag>;
 } & DarkModeEnabledOption;
 
 export type Themed = {

package/src/common/index.ts

@@ -13,6 +13,7 @@ export * from './column-control';
 export * from './checkbox';
 export * from './common.types.d';
 export * from './dropdown';
+export * from './email-simple';
 export * from './flag';
 export * from './hooks';
 export * from './icon';
@@ -20,11 +21,12 @@ export * from './image';
 export * from './input';
 export * from './label';
 export * from './link';
+export * from './modal';
 export * from './nav-tab';
 export * from './nav-product-card';
+export * from './radiogroup';
+export * from './spinner';
 export * from './text-strip';
 export * from './table';
 export * from './typography';
-export * from './email-simple';
-export * from './radiogroup';
-export * from './spinner';
+export * from './utility';

package/src/common/modal/NsModal.spec.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render } from '@/test-utils/index';
+import NsModal from './NsModal';
+import { NsModalData } from './stories/mock';
+import { NsModalProps } from './types';
+
+describe('NsModal', () => {
+    const onHandleClose = jest.fn();
+
+    const NsModalProp = NsModalData as NsModalProps;
+
+    test('1. check NsModal component open', () => {
+        const { getByTestId } = render(<NsModal {...NsModalProp} handleClose={onHandleClose} />);
+        expect(getByTestId('nsmodal-dialog')).toBeInTheDocument();
+    });
+
+    test('2. should render NsModal default component', () => {
+        const { getByTestId } = render(<NsModal {...NsModalProp} handleClose={onHandleClose} />);
+        expect(getByTestId('modal-default')).toBeInTheDocument();
+    });
+
+    test('3. should render NsModal status component', () => {
+        const VariantProps: NsModalProps = {
+            ...NsModalProp,
+            variant: 'info',
+        };
+        const { getByTestId } = render(<NsModal {...VariantProps} handleClose={onHandleClose} />);
+        expect(getByTestId('modal-status')).toBeInTheDocument();
+    });
+
+    test('4. should render NsModal title with close button', () => {
+        const { getByTestId } = render(<NsModal {...NsModalProp} handleClose={onHandleClose} />);
+        expect(getByTestId('modal-title')).toBeInTheDocument();
+        expect(getByTestId('modal-close-button')).toBeInTheDocument();
+    });
+
+    test('5. should render NsModal body content', () => {
+        const { getByTestId } = render(<NsModal {...NsModalProp} handleClose={onHandleClose} />);
+        expect(getByTestId('modal-body-content')).toBeInTheDocument();
+    });
+
+    test('6. should render NsModal footer', () => {
+        const { getByTestId } = render(<NsModal {...NsModalProp} handleClose={onHandleClose} />);
+        expect(getByTestId('modal-footer')).toBeInTheDocument();
+    });
+});

package/src/common/modal/NsModal.styled.tsx

@@ -0,0 +1,28 @@
+import { styled } from '@nuskin/foundation-theme';
+import { NsButton } from '../button';
+import { DialogActions } from '@mui/material';
+
+export const NsInfoWrapper = styled.div`
+    display: flex;
+    .status-icon {
+        padding: 16px 0px 0px 24px;
+    }
+    .title-icon {
+        padding-right: 10px;
+    }
+`;
+
+export const CloseButton = styled(NsButton)`
+    position: absolute;
+    right: 8px;
+    top: 8px;
+`;
+
+export const ModalFooter = styled(DialogActions)`
+    display: flex;
+    justify-content: space-around;
+    padding: 20px 0px 10px 0px;
+    button {
+        width: 100%;
+    }
+`;

package/src/common/modal/NsModal.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import Dialog from '@mui/material/Dialog';
+import { useMediaQuery } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { ModalVariantMap } from './model/NsModalVariantMap';
+import { NsModalProps } from './types';
+
+const NsModal = (props: NsModalProps) => {
+    const { open, handleClose, header, body, additionalProps, footer, statusInfo, variant = 'default' } = props;
+
+    const { className, scrollType = 'paper', ariaLabel } = additionalProps || {};
+
+    const { ariaLabelledby = 'alert-dialog-title', ariaDescribedby = 'alert-dialog-description' } = ariaLabel || {};
+
+    const theme = useTheme();
+
+    const fullScreen: boolean = useMediaQuery(theme.breakpoints.down('md'));
+
+    const Component = ModalVariantMap[variant];
+
+    return (
+        <Dialog
+            data-testid="nsmodal-dialog"
+            fullScreen={fullScreen}
+            open={open}
+            scroll={scrollType}
+            onClose={handleClose}
+            aria-labelledby={ariaLabelledby}
+            aria-describedby={ariaDescribedby}
+            className={className}
+        >
+            <Component {...{ header, handleClose, body, footer, additionalProps, statusInfo, variant, open }} />
+        </Dialog>
+    );
+};
+
+export default NsModal;

package/src/common/modal/helper-component/NsModalContentBox.tsx

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+import { DialogContent } from '@mui/material';
+import { NsModalComponentProps } from '../types';
+import NsModalTitle from './NsModalTitle';
+import { NsTypography } from '../..';
+
+const NsModalContentBox = ({ handleClose, statusInfo }: NsModalComponentProps) => {
+    const { title, description } = statusInfo || {};
+
+    const header = useMemo(() => {
+        return {
+            show: true,
+            children: (
+                <NsTypography variant="h5" weight="bold">
+                    {title}
+                </NsTypography>
+            ),
+            isCloseIcon: true,
+        };
+    }, [title]);
+
+    return (
+        <div>
+            <NsModalTitle header={header} handleClose={handleClose} />
+            <DialogContent>
+                <NsTypography variant="p-xs">{description}</NsTypography>
+            </DialogContent>
+        </div>
+    );
+};
+
+export default NsModalContentBox;