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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.0.0-develop.8",
+    "version": "1.0.0-develop.9",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "private": false,
     "main": "src/common/index.ts",

package/src/common/accordion/NsAccordion.tsx

@@ -44,6 +44,8 @@ const NsAccordion: FC<NsAccordionProps> = ({
                 const isOpen = itemStateMap[key] ?? false;
                 return (
                     <NsAccordionItem
+                        allowMultipleExpanded={item.allowMultipleExpanded}
+                        type={item.type}
                         closedIconName={closedIconName}
                         content={item.content}
                         headerTypographyVariant={headerTypographyVariant}

package/src/common/accordion/NsAccordionHeader.tsx

@@ -43,6 +43,7 @@ const NsAccordionHeader = ({
     headerTypographyVariant,
     startIcon,
     invert,
+    cslp,
 }: NsAccordionHeaderProps) => {
     return (
         <StyledHeader
@@ -55,7 +56,7 @@ const NsAccordionHeader = ({
         >
             <HeaderIcon {...startIcon} />
             {typeof title === 'string' ? (
-                <NsTypography variant={headerTypographyVariant ?? 'h4'} weight="bold">
+                <NsTypography variant={headerTypographyVariant ?? 'h4'} weight="bold" {...(cslp?.header ?? {})}>
                     {title}
                 </NsTypography>
             ) : (

package/src/common/accordion/NsAccordionItem.tsx

@@ -6,6 +6,7 @@ import { StyledToggleSection } from './ToggleSection.styled';
 /**
  * this component is used by accordion to pass title
  * and content
+ * cslp:{header:CslpTag, content:CslpTag}
  */
 const NsAccordionItem = ({
     isOpen,
@@ -21,6 +22,9 @@ const NsAccordionItem = ({
     level,
     additionalProps,
     invert,
+    type,
+    cslp,
+    allowMultipleExpanded,
 }: NsAccordionItemProps) => {
     return (
         <StyledToggleSection variant={variant}>
@@ -35,14 +39,18 @@ const NsAccordionItem = ({
                 title={title}
                 variant={variant}
                 startIcon={startIcon}
+                cslp={cslp}
             />
             <NsCollapse
+                type={type}
                 isChild={isChild}
                 isOpen={isOpen}
                 variant={variant}
                 level={level}
                 invert={invert}
                 content={content}
+                cslp={cslp}
+                allowMultipleExpanded={allowMultipleExpanded}
             />
         </StyledToggleSection>
     );

package/src/common/accordion/NsCollapse.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@nuskin/foundation-theme';
-import { AccordionVariant, AccordionVariantType, NsCollapseProps, ItemContent, AccordionItem, NsAccordion } from '../';
+import { AccordionVariant, AccordionVariantType, NsCollapseProps, AccordionItem, NsAccordion } from '../';
 import { getAccordionColor } from './colorMap';
 import { ReactElement, isValidElement, useMemo } from 'react';
 
@@ -52,31 +52,49 @@ export const StyledCollapse = styled(
  * NsCollapse component adds css animation while showing children items if prop `isOpen` is true,
  * and while removing children if prop `isOpen` is false
  */
-const NsCollapse = ({ isOpen, content, additionalProps, variant, level, invert, isChild }: NsCollapseProps) => {
+const NsCollapse = ({
+    isOpen,
+    content,
+    additionalProps,
+    variant,
+    level,
+    invert,
+    isChild,
+    type,
+    cslp,
+    allowMultipleExpanded,
+}: NsCollapseProps) => {
     const body = useMemo(() => {
         if (isValidElement(content)) {
             return content as ReactElement;
         }
-        const contentVar = content as unknown as ItemContent;
-        if (contentVar?.type === 'html') {
+        if (type === 'html') {
             return (
-                <div className="nsa-content-padded" dangerouslySetInnerHTML={{ __html: contentVar?.data as string }} />
+                <div
+                    className="nsa-content-padded"
+                    dangerouslySetInnerHTML={{ __html: content as string }}
+                    {...(cslp?.content ?? {})}
+                />
+            );
+        } else if (type === 'text') {
+            return (
+                <div className="p-4" {...(cslp?.content ?? {})}>
+                    {content as string}
+                </div>
             );
-        } else if (contentVar?.type === 'text') {
-            return <div className="p-4">{contentVar?.data as string}</div>;
-        } else if (contentVar?.type === 'accordion') {
+        } else if (type === 'accordion') {
             return (
                 <NsAccordion
                     isChild={true}
                     invert={invert}
                     level={level}
                     variant={AccordionVariant.Gray}
-                    items={contentVar?.data as AccordionItem[]}
-                    allowMultipleExpanded={contentVar?.allowMultipleExpanded ?? false}
+                    items={content as AccordionItem[]}
+                    allowMultipleExpanded={allowMultipleExpanded ?? false}
                 />
             );
         }
-    }, [content, invert, level]);
+    }, [allowMultipleExpanded, content, cslp?.content, invert, level, type]);
     return (
         <StyledCollapse
             isChild={isChild}

package/src/common/accordion/NsToggleSection.tsx

@@ -17,6 +17,7 @@ const NsToggleSection = ({
     variant,
     invert,
     isChild,
+    type,
 }: NsToggleSectionProps) => {
     const [isExpanded, setIsExpanded] = useState(defaultOpen ?? false);
 
@@ -25,6 +26,7 @@ const NsToggleSection = ({
     };
     return (
         <NsAccordionItem
+            type={type}
             level={2}
             variant={variant}
             additionalProps={additionalProps}

package/src/common/accordion/specs/NsAccordion.spec.tsx

@@ -9,6 +9,7 @@ const generateContentArray = (count: number, isDefaultOpen = true) => {
             title: `Title ${i}`,
             content: <div className="p-2">Content {i}</div>,
             isDefaultOpen,
+            type:'jsx',
             id: `Test ${i}`,
         });
     }

package/src/common/accordion/specs/NsAccordionItem.spec.tsx

@@ -9,6 +9,7 @@ describe('NsAccordionItem', () => {
     it('1. renders title correctly', () => {
         const { getByText } = render(
             <NsAccordionItem
+                type="jsx"
                 variant={AccordionVariant.Basic}
                 isOpen={false}
                 toggleOpen={() => {}}
@@ -26,6 +27,7 @@ describe('NsAccordionItem', () => {
         const toggleOpen = jest.fn();
         const { getByText } = render(
             <NsAccordionItem
+                type="jsx"
                 variant={AccordionVariant.Basic}
                 isOpen={false}
                 toggleOpen={toggleOpen}
@@ -47,6 +49,7 @@ describe('NsAccordionItem', () => {
                 isOpen={true}
                 toggleOpen={() => {}}
                 title={title}
+                type="jsx"
                 content={contentElement}
                 isChild={false}
                 invert={false}
@@ -59,6 +62,7 @@ describe('NsAccordionItem', () => {
     it('4. when isOpen is false, renders jsx dom content within container with 0 height', () => {
         const { queryByText } = render(
             <NsAccordionItem
+                type="jsx"
                 variant={AccordionVariant.Basic}
                 isOpen={false}
                 toggleOpen={() => {}}

package/src/common/accordion/specs/NsCollapse.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@/test-utils/index';
-import { NsCollapse, AccordionVariant, ItemContent } from '@/common/index';
-import { createAccordionItem3_1, getTextContent } from '../stories/data';
+import { NsCollapse, AccordionVariant, AccordionItem } from '@/common/index';
+import { createAccordionItem3_1 } from '../stories/data';
 
 describe('NsCollapse', () => {
     it('1. renders children when isOpen is true', () => {
@@ -15,6 +15,7 @@ describe('NsCollapse', () => {
                         <div>Child 2</div>
                     </>
                 }
+                type="jsx"
                 isChild={false}
                 invert={false}
                 level={0}
@@ -24,11 +25,11 @@ describe('NsCollapse', () => {
         expect(getByText('Child 2')).toBeInTheDocument();
     });
     it('2. renders children when isOpen is true and isChild is true', () => {
-        const text = '1. Theme can be set';
-        const content = { ...getTextContent(text) };
+        const content = 'renders children when isOpen is true and isChild is true';
         const { getByText } = render(
             <NsCollapse
                 isOpen
+                type="text"
                 variant={AccordionVariant.Basic}
                 content={content}
                 isChild={true}
@@ -36,60 +37,62 @@ describe('NsCollapse', () => {
                 level={0}
             />
         );
-        expect(getByText(text)).toBeInTheDocument();
+        expect(getByText(content)).toBeInTheDocument();
     });
     it('3. renders children when isOpen is true and variant is compact and content is of type accordion', () => {
+        const accItem = createAccordionItem3_1();
+        const content = accItem.content as AccordionItem[];
         const { getByText } = render(
             <NsCollapse
                 isOpen
                 variant={AccordionVariant.Compact}
-                content={createAccordionItem3_1().content}
+                content={content}
+                type={accItem.type}
                 isChild={true}
                 invert={false}
                 level={0}
             />
         );
-        expect(getByText('Example - 3.1.1')).toBeInTheDocument();
-        expect(getByText('Example - 3.1.2')).toBeInTheDocument();
+        expect(getByText(content[0].title)).toBeInTheDocument();
+        expect(getByText(content[1].title)).toBeInTheDocument();
     });
 
     it('4. does not render children when isOpen is false', () => {
+        const content = '<h2>Lorem ipsum dolor sit amet.</h2>';
         render(
             <NsCollapse
                 isOpen={false}
                 variant={AccordionVariant.Basic}
-                content={{
-                    type: 'html',
-                    data: '<h2>Lorem ipsum dolor sit amet.</h2>',
-                }}
+                type="html"
+                content={content}
                 isChild={false}
                 invert={true}
                 level={0}
             />
         );
-        expect(screen.queryByText('Lorenm')).toBeNull();
+        expect(screen.queryByText(content)).toBeNull();
     });
     it('5. renders html children when isOpen is true', () => {
+        const content = '<h2>Lorem ipsum dolor sit amet.</h2>';
         render(
             <NsCollapse
                 isOpen={true}
                 variant={AccordionVariant.Compact}
-                content={{
-                    type: 'html',
-                    data: '<h2>Lorem ipsum dolor sit amet.</h2>',
-                }}
+                type="html"
+                content={content}
                 isChild={false}
                 invert={true}
                 level={0}
             />
         );
-        expect(screen.queryByText('Lorem')).toBeDefined();
+        expect(screen.queryByText(content)).toBeDefined();
     });
 
     it('6. renders with additional class name', () => {
         const additionalClassName = 'custom-class';
         const { container } = render(
             <NsCollapse
+                type="jsx"
                 isOpen
                 variant={AccordionVariant.Gray}
                 content={
@@ -107,11 +110,11 @@ describe('NsCollapse', () => {
         expect(container.querySelector('section')).toHaveClass(`ns-collapse ${additionalClassName}`);
     });
     it('7. skipping allowMultipleExpanded in child data', () => {
-        const { content } = createAccordionItem3_1();
-        delete (content as ItemContent).allowMultipleExpanded;
+        const { content, type } = createAccordionItem3_1();
         const additionalClassName = 'custom-class';
         const { container } = render(
             <NsCollapse
+                type={type}
                 isOpen
                 variant={AccordionVariant.Gray}
                 content={content}

package/src/common/accordion/specs/NsToggleSection.spec.tsx

@@ -16,6 +16,7 @@ describe('NsToggleSection', () => {
                 content={content}
                 invert={false}
                 isChild={false}
+                type="jsx"
             />
         );
         expect(getByText(title)).toBeInTheDocument();
@@ -28,6 +29,7 @@ describe('NsToggleSection', () => {
                 content={content}
                 invert={false}
                 isChild={false}
+                type="jsx"
             />
         );
         expect(getByText(title)).toBeInTheDocument();
@@ -41,6 +43,7 @@ describe('NsToggleSection', () => {
                 content={content}
                 invert={false}
                 isChild={false}
+                type="jsx"
             />
         );
         const el = queryByText(contentText);
@@ -62,6 +65,7 @@ describe('NsToggleSection', () => {
                 invert={false}
                 isChild={false}
                 defaultOpen
+                type="jsx"
             />
         );
 

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

@@ -1,6 +1,6 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsAccordionHeader, NsIconVariants } from '../..';
+import { AccordionVariant, NsAccordionHeader, NsIconVariants } from '../..';
 
 type ComponentType = typeof NsAccordionHeader;
 type Story = StoryObj<ComponentType>;
@@ -23,6 +23,7 @@ export default {
     },
     args: {
         title: 'Nuskin',
+        variant: AccordionVariant.Compact,
         onClick: () => {
             console.log('accordion header clicked');
         },

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

@@ -1,6 +1,7 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsAccordionItem } from '@/common/index';
+import { AccordionVariant, NsAccordionItem } from '../../';
+import NsAccordionStory from './NsAccordion.stories';
 
 type ComponentType = typeof NsAccordionItem;
 type Story = StoryObj<ComponentType>;
@@ -20,11 +21,14 @@ export default {
             control: 'string',
             description: 'text used for header of section',
         },
+        level: NsAccordionStory.argTypes.level,
+        variant: NsAccordionStory.argTypes.variant,
     },
 } as MetaStory;
 
 export const OpenSection: Story = {
     args: {
+        variant: AccordionVariant.Compact,
         isOpen: true,
         content: <div className="p-2">Nuskin Description</div>,
         title: 'Nuskin',
@@ -33,6 +37,7 @@ export const OpenSection: Story = {
 
 export const ClosedSection: Story = {
     args: {
+        variant: AccordionVariant.Compact,
         isOpen: false,
         content: <div className="p-2">Nuskin Description</div>,
         title: 'Nuskin',

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

@@ -1,6 +1,7 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsCollapse } from '../';
+import { AccordionVariant, NsCollapse } from '../';
+import NsAccordionStory from './NsAccordion.stories';
 
 type ComponentType = typeof NsCollapse;
 type Story = StoryObj<ComponentType>;
@@ -15,10 +16,24 @@ export default {
             control: 'boolean',
             description: 'if true renders NsCollapse in open state, and close state otherwise',
         },
-        children: {
+        content: {
             control: 'React Node',
             description: 'Content for NsCollapse',
         },
+        allowMultipleExpanded: {
+            control: 'boolean',
+            description: 'This prop is useful when content is an array of accordion items',
+        },
+        type: {
+            control: 'select',
+            values: ['jsx', 'html', 'text', 'accordion'],
+            description: 'This type should exactly match the content type to have accordion work correctly',
+        },
+        level: NsAccordionStory.argTypes.level,
+        variant: NsAccordionStory.argTypes.variant,
+    },
+    args: {
+        variant: AccordionVariant.Compact,
     },
 } as MetaStory;
 export const Closed: Story = {

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

@@ -1,6 +1,7 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsToggleSection } from '../..';
+import { AccordionVariant, NsToggleSection } from '../..';
+import NsAccordionStory from './NsAccordion.stories';
 
 type ComponentType = typeof NsToggleSection;
 type Story = StoryObj<ComponentType>;
@@ -11,9 +12,12 @@ export default {
     component: NsToggleSection,
     decorators: [withCenterDecorator],
     argTypes: {
+        level: NsAccordionStory.argTypes.level,
+        variant: NsAccordionStory.argTypes.variant,
         title: { control: 'string' },
     },
     args: {
+        variant: AccordionVariant.Compact,
         title: 'Nuskin',
         content: <div className="p-2">Nuskin Details</div>,
     },

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/nav-tab/types.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { FoundationTheme } from '@nuskin/foundation-theme';
 import { Variants } from '../typography/types';
-import { AdditionalProps, ContentStackLiveTags } from '../common.types';
+import { AdditionalProps, CslpTag } from '../common.types';
 
 export type NavTabs = {
     tabName: string;
@@ -9,7 +9,7 @@ export type NavTabs = {
     activeColor: FoundationTheme.PaletteColors;
     color?: FoundationTheme.PaletteColors;
     textVariant: Variants;
-    liveTag?: ContentStackLiveTags;
+    liveTag?: CslpTag;
 };
 
 export type NSNavTabComponentProps = {