@nuskin/foundation-ui-components 1.6.0 → 1.7.0

package/src/common/card/NsSmallFullCard.tsx

@@ -0,0 +1,90 @@
+import Box from '@mui/material/Box';
+import { styled } from '@nuskin/foundation-theme';
+import { NsImage, NsLink } from '../';
+
+type NsSmallFullCardProps = {
+    title: string;
+    subtitle: string;
+    backgroundImageUrl: string;
+    backgroundImageAlt: string;
+    cardLink: { href: string; title: string };
+};
+
+const CardContainer = styled(Box)(() => {
+    return {
+        backgroundColor: '#fff',
+        display: 'flex',
+        height: '320px',
+        width: '375px',
+        position: 'relative',
+        '.image': {
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+        },
+        '.gradientOverlay': {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            background: 'linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);',
+        },
+        '.content': {
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
+            padding: '40px 40px 25px 30px',
+            display: 'flex',
+            flexDirection: 'column',
+        },
+        '.subtitle': {
+            color: '#fff',
+            fontSize: '11px',
+            fontWeight: '400',
+            marginTop: 'auto',
+        },
+        '.title': {
+            color: '#fff',
+            fontSize: '26px',
+            fontWeight: '400',
+            marginTop: '20px',
+        },
+        '.action-link': {
+            display: 'flex',
+            justifyContent: 'center',
+            backgroundColor: '#252525',
+            color: '#fff',
+            marginTop: '20px',
+            borderRadius: '4px',
+            padding: '10px',
+            width: '70%',
+            ':hover': {
+                textDecoration: 'none',
+                backgroundColor: '#3e3e3e',
+            },
+        },
+    };
+});
+
+export default function NsSmallFullCard({
+    title,
+    subtitle,
+    backgroundImageUrl,
+    backgroundImageAlt,
+    cardLink,
+}: NsSmallFullCardProps) {
+    return (
+        <CardContainer role="small-full-card" component="div" data-testid="small-full-card">
+            <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="image" />
+            <div className="gradientOverlay"></div>
+            <div className="content">
+                <article className="subtitle">{subtitle}</article>
+                <article className="title">{title}</article>
+                <NsLink className="action-link" href={cardLink.href}>
+                    {cardLink.title}
+                </NsLink>
+            </div>
+        </CardContainer>
+    );
+}

package/src/common/card/NsXLargeCard.tsx

@@ -0,0 +1,80 @@
+import Box from '@mui/material/Box';
+import { styled } from '@nuskin/foundation-theme';
+import { NsButton, NsImage } from '..';
+
+type NsXLargeCardProps = {
+    title: string;
+    subtitle: string;
+    backgroundImageUrl: string;
+    backgroundImageAlt: string;
+    cardLink: { href: string; title: string };
+};
+
+const CardContainer = styled(Box)(() => {
+    return {
+        backgroundColor: '#fff',
+        display: 'flex',
+        height: '545px',
+        width: '375px',
+        position: 'relative',
+        '.image': {
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+        },
+        '.gradientOverlay': {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            background: 'linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);',
+        },
+        '.content': {
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
+            padding: '40px 40px 25px 30px',
+            display: 'flex',
+            flexDirection: 'column',
+        },
+        '.subtitle': {
+            color: '#fff',
+            fontSize: '11px',
+            fontWeight: '400',
+            marginTop: 'auto',
+        },
+        '.title': {
+            color: '#fff',
+            fontSize: '26px',
+            fontWeight: '400',
+            marginTop: '20px',
+        },
+        '.action-link': {
+            marginTop: '20px',
+            width: '70%',
+        },
+    };
+});
+
+export default function NsXLargeCard({
+    title,
+    subtitle,
+    backgroundImageUrl,
+    backgroundImageAlt,
+    cardLink,
+}: NsXLargeCardProps) {
+    return (
+        <CardContainer role="x-large-card" component="div" data-testid="x-large-card">
+            <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="image" />
+            <div className="gradientOverlay"></div>
+            <div className="content">
+                <article className="subtitle">{subtitle}</article>
+                <article className="title">{title}</article>
+                <NsButton className="action-link" variant="outlined" color="secondary" href={cardLink.href}>
+                    {cardLink.title}
+                </NsButton>
+            </div>
+        </CardContainer>
+    );
+}

package/src/common/card/cardSizes.ts

@@ -0,0 +1,12 @@
+const cardSizes = {
+    small: {
+        width: '165px',
+        height: '180px',
+    },
+    large: {
+        width: '190px',
+        height: '220px',
+    },
+};
+
+export default cardSizes;

package/src/common/card/index.ts

@@ -1,5 +1,13 @@
 export { default as NsBrandWrapper } from './NsBrandWrapper';
 export { default as NsBgCard } from './NsBgCard';
-export { default as NsFfgCard } from './NsFfgCard';
 export { default as NsBrandLogo } from './NsBrandLogo';
-export { default as NsBrandProductCard } from './NsBrandProductCard';
+export { default as NsHeroCardLevel1 } from './NsHeroCardLevel1';
+export { default as NsHeroCardLevel2 } from './NsHeroCardLevel2';
+export { default as NsPost } from './NsPost';
+export { default as NsBrandCard } from './NsBrandCard';
+export { default as NsIconText } from './NsIconText';
+export { default as NsCheckoutCard } from './NsCheckoutCard';
+export { default as NsSmallFullCard } from './NsSmallFullCard';
+export { default as NsXLargeCard } from './NsXLargeCard';
+export { default as NsLargeCard } from './NsLargeCard';
+export { default as NsMediumCard } from './NsMediumCard';

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

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
 import NsBrandLogo from '../NsBrandLogo';
 
 describe('BrandLogo component', () => {
-    it('renders with cover size', () => {
+    it('1. renders with cover size', () => {
         const { container } = render(<NsBrandLogo component="img" />);
         const cardElement = container.querySelector('img');
         expect(cardElement).toHaveStyle(`

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

@@ -5,14 +5,14 @@ describe('NsBgCard component', () => {
     const props = {
         backgroundImageUrl: 'https://media.nuskin.com/m/6245528b8f76ad32/webimage-brand-ageLOC.png',
     };
-    it('renders with background image', () => {
+    it('1. renders with background image', () => {
         const { container } = render(<NsBgCard {...props} />);
         const cardElement = container.querySelector('div');
         expect(cardElement).toHaveStyle(`
     background-image: url(${props.backgroundImageUrl});
     `);
     });
-    it('renders with cover size', () => {
+    it('2. renders with cover size', () => {
         const { container } = render(<NsBgCard {...props} />);
         const cardElement = container.querySelector('div');
         expect(cardElement).toHaveStyle(`

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

@@ -0,0 +1,97 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import NsBrandCard from '../NsBrandCard';
+
+describe('NsBrandCard component', () => {
+    const props = {
+        title: 'ageLOC LumiSpa',
+        backgroundImageUrl: 'https://media.nuskin.com/m/3604b5202b0b64c6/webimage-brand-lumispa-optweb.png',
+        brandImageUrl: 'https://media.nuskin.com/m/2571a0407433a6e8/webimage-brand-lumispa.png',
+        button: true,
+    };
+
+    it('1. renders with correct content and styles', () => {
+        render(<NsBrandCard {...props} />);
+
+        const brandCard = screen.getByTestId('brand-card');
+        expect(brandCard).toBeInTheDocument();
+
+        const brandTitle = screen.getByText('ageLOC LumiSpa');
+        expect(brandTitle).toBeInTheDocument();
+
+        const addToCartButton = screen.getByText('Add to Cart');
+        expect(addToCartButton).toBeInTheDocument();
+    });
+
+    it('2. does not render brand title when title is not provided', () => {
+        const { container } = render(<NsBrandCard {...{ ...props, title: undefined }} />);
+
+        const brandTitle = container.querySelector('.brand-title');
+        expect(brandTitle).toBeNull();
+    });
+
+    it('3. renders with "Add to Cart" button when button prop is true', () => {
+        render(<NsBrandCard {...props} />);
+
+        const addToCartButton = screen.getByText('Add to Cart');
+        expect(addToCartButton).toBeInTheDocument();
+    });
+
+    it('4. does not render button when button prop is false', () => {
+        const { container } = render(<NsBrandCard {...{ ...props, button: false }} />);
+
+        const addToCartButton = container.querySelector('.cta');
+        expect(addToCartButton).toBeNull();
+    });
+
+    it('5. calls onClick when the "Add to Cart" button is clicked', () => {
+        const onClickMock = jest.fn();
+        render(<NsBrandCard {...props} onClick={onClickMock} />);
+
+        const addToCartButton = screen.getByText('Add to Cart');
+        userEvent.click(addToCartButton);
+
+        expect(onClickMock).toHaveBeenCalled();
+    });
+
+    it('6. applies hover styles on mouseover', () => {
+        render(<NsBrandCard {...props} />);
+
+        const brandCard = screen.getByTestId('brand-card');
+        userEvent.hover(brandCard);
+
+        const brandTitle = screen.getByText('ageLOC LumiSpa');
+        expect(brandTitle).toHaveStyle('opacity: 0.7');
+    });
+
+    it('7. renders with correct styles when size is "small"', () => {
+        const { container } = render(<NsBrandCard {...props} size="small" />);
+
+        const cardContainer = container.firstChild;
+        const nsBgCardElement = cardContainer?.firstChild;
+        expect(cardContainer).toHaveStyle(`
+          width: 165px;
+        `);
+        expect(nsBgCardElement).toHaveStyle(`
+          width: 165px;
+          height: 180px;
+        `);
+    });
+
+    it('8. renders with correct styles when size is "large"', () => {
+        render(<NsBrandCard {...props} size="large" />);
+        const cardContainer = screen.getByTestId('brand-card') as HTMLElement;
+        const computedStyles = window.getComputedStyle(cardContainer);
+
+        expect(computedStyles.width).toBe('190px');
+    });
+
+    it('9. renders with default styles when size is not provided', () => {
+        render(<NsBrandCard {...props} />);
+        const cardContainer = screen.getByTestId('brand-card') as HTMLElement;
+        const computedStyles = window.getComputedStyle(cardContainer);
+
+        expect(computedStyles.width).toBe('190px');
+    });
+});

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import NsCheckoutCard from '../NsCheckoutCard';
+
+describe('NsCheckoutCard component', () => {
+    const props = {
+        title: 'Section Title',
+        address: 'Address',
+        icon: 'home' as 'home',
+        onClick: jest.fn(),
+    };
+
+    it('1. renders with correct content and styles', () => {
+        render(<NsCheckoutCard {...props} />);
+
+        const checkoutCard = screen.getByTestId('checkout-card');
+        expect(checkoutCard).toBeInTheDocument();
+
+        const titleElement = screen.getByText(props.title);
+        expect(titleElement).toBeInTheDocument();
+
+        const addressElement = screen.getByText(props.address);
+        expect(addressElement).toBeInTheDocument();
+
+        const changeLink = screen.getByText('CHANGE');
+        expect(changeLink).toBeInTheDocument();
+    });
+
+    it('2. toggles dropdown icon on click', () => {
+        render(<NsCheckoutCard {...props} />);
+
+        const dropdownIcon = screen.getByTestId('dropdown-icon');
+
+        fireEvent.click(dropdownIcon);
+        // expect(dropdownIcon).toHaveAttribute('name', 'arrowUp');
+
+        // fireEvent.click(dropdownIcon);
+        // expect(dropdownIcon).toHaveAttribute('name', 'arrowDown');
+    });
+
+    it('3. calls onClick when the card is clicked', () => {
+        render(<NsCheckoutCard {...props} />);
+
+        const checkoutCard = screen.getByTestId('checkout-card');
+        fireEvent.click(checkoutCard);
+
+        expect(props.onClick).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import NsHeroCardLevel1 from '../NsHeroCardLevel1';
+
+describe('NsHeroCardLevel1 component', () => {
+    const props = {
+        cardLink: {
+            href: 'https://www.forceforgood.org/',
+            title: 'SHOP NOW',
+        },
+        text: 'A skin ready for winter',
+        body: 'We have brought these discoveries to life through our powerful skin care products and supplements.',
+        backgroundImageUrl:
+            'https://media.nuskin.com/m/9734240cc191163/webimage-lash-brow-serum-carousel-image-launch.png',
+        backgroundImageAlt: 'lash brow serum carousel',
+        onClick: jest.fn(),
+        additionalProps: {
+            testid: 'hero-card-level-1',
+        },
+    };
+
+    it('1. renders with correct content and styles', () => {
+        render(<NsHeroCardLevel1 {...props} />);
+
+        const heroCard = screen.getByTestId('hero-card-level-1');
+        expect(heroCard).toBeInTheDocument();
+
+        const shopNowLink = screen.getByText('SHOP NOW');
+        expect(shopNowLink).toBeInTheDocument();
+    });
+
+    it('2. calls onClick when the card is clicked', () => {
+        render(<NsHeroCardLevel1 {...props} />);
+
+        const heroCard = screen.getByTestId('hero-card-level-1');
+        userEvent.click(heroCard);
+
+        expect(props.onClick).toHaveBeenCalled();
+    });
+
+    it('3. applies hover styles on mouseover', () => {
+        render(<NsHeroCardLevel1 {...props} />);
+
+        const heroCard = screen.getByTestId('hero-card-level-1');
+        userEvent.hover(heroCard);
+    });
+});

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { NsHeroCardLevel2 } from '../';
+
+describe('NsHeroCardLevel2 component', () => {
+    const props = {
+        brand: 'Beauty focus™',
+        text: 'Current shop deals',
+        body: 'Lumispa, sunscreen and more',
+        icon: 'home' as 'home',
+        cardLink: {
+            href: 'https://www.forceforgood.org/',
+            title: 'Discover more',
+        },
+        backgroundImageUrl: 'https://media.nuskin.com/m/5f1c423bb57589f0/webimage-autumn-sale-carousel.png',
+        backgroundImageAlt: 'lash brow serum carousel',
+        additionalProps: {
+            testid: 'hero-card-level-2',
+        },
+        onClick: jest.fn(),
+    };
+
+    it('1. renders with correct content and styles', () => {
+        render(<NsHeroCardLevel2 {...props} />);
+
+        const cardContainer = screen.getByTestId('hero-card-level-2');
+        expect(cardContainer).toBeInTheDocument();
+
+        const brandText = screen.getByText('Beauty focus™');
+        expect(brandText).toBeInTheDocument();
+
+        const textContent = screen.getByText('Current shop deals');
+        expect(textContent).toBeInTheDocument();
+
+        const bodyContent = screen.getByText('Lumispa, sunscreen and more');
+        expect(bodyContent).toBeInTheDocument();
+
+        const discoverMoreLink = screen.getByRole('link', { name: 'Discover more' });
+        expect(discoverMoreLink).toBeInTheDocument();
+    });
+
+    it('2. calls onClick when the card is clicked', () => {
+        render(<NsHeroCardLevel2 {...props} />);
+
+        const cardContainer = screen.getByTestId('hero-card-level-2');
+        userEvent.click(cardContainer);
+
+        expect(props.onClick).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { NsIconText } from '../';
+
+describe('NsIconText component', () => {
+    const props = {
+        text: 'Lorem ipsum',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Natoque lacus, in amet nunc. ',
+        additionalProps: {
+            testid: 'icon-text-card',
+        },
+    };
+
+    it('1. renders with correct content and styles', () => {
+        render(<NsIconText {...props} />);
+
+        const cardContainer = screen.getByTestId('icon-text-card');
+        expect(cardContainer).toBeInTheDocument();
+
+        const textContent = screen.getByText('Lorem ipsum');
+        expect(textContent).toBeInTheDocument();
+
+        const bodyContent = screen.getByText(
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Natoque lacus, in amet nunc.'
+        );
+        expect(bodyContent).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { NsLargeCard } from '../';
+
+describe('NsLargeCard component', () => {
+    const props = {
+        title: 'Title',
+        subtitle: 'Subtitle',
+        intro: 'Introduction sentence',
+        icon: 'cart' as 'cart',
+        cardLink: {
+            href: 'https://www.forceforgood.org/',
+            title: 'Button Text',
+        },
+        backgroundImageUrl: 'https://example.com/image.jpg',
+        backgroundImageAlt: 'Image Alt',
+    };
+
+    it('1. renders with correct content and styles', () => {
+        render(<NsLargeCard {...props} />);
+
+        expect(screen.getByText(props.title)).toBeInTheDocument();
+        expect(screen.getByText(props.subtitle)).toBeInTheDocument();
+    });
+
+    it('2. triggers the link when clicked', () => {
+        render(<NsLargeCard {...props} />);
+
+        userEvent.click(screen.getByRole('link'));
+    });
+
+    it('3. renders NsLink and NsIcon when isHorizontal is true', () => {
+        render(<NsLargeCard {...props} isHorizontal={true} />);
+
+        const actionLink = screen.getByText(props.cardLink.title);
+        expect(actionLink).toBeInTheDocument();
+
+        const parentDiv = actionLink.closest('.cta');
+        expect(parentDiv).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import NsMediumCard from '../NsMediumCard';
+
+describe('NsMediumCard component', () => {
+    const props = {
+        title: 'Sample Title',
+        subtitle: 'Sample Subtitle',
+        backgroundImageUrl: 'https://example.com/image.jpg',
+        backgroundImageAlt: 'Sample Alt Text',
+        cardLink: {
+            href: 'https://www.example.com',
+            title: 'Sample Link Text',
+        },
+    };
+
+    it('1. renders with correct content and styles', () => {
+        render(<NsMediumCard {...props} />);
+
+        const mediumCard = screen.getByTestId('medium-card');
+        expect(mediumCard).toBeInTheDocument();
+
+        const titleElement = screen.getByText('Sample Title');
+        expect(titleElement).toBeInTheDocument();
+
+        const subtitleElement = screen.getByText('Sample Subtitle');
+        expect(subtitleElement).toBeInTheDocument();
+
+        const imageElement = screen.getByAltText('Sample Alt Text');
+        expect(imageElement).toBeInTheDocument();
+
+        const linkElement = screen.getByText('Sample Link Text');
+        expect(linkElement).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import NsPost from '../NsPost';
+
+describe('NsPost component', () => {
+    const props = {
+        text: 'Sample Text',
+        body: 'Sample Body',
+        backgroundImageUrl: 'https://example.com/image.jpg',
+        backgroundImageAlt: 'Sample Alt Text',
+        additionalProps: {
+            testid: 'sample-post',
+        },
+    };
+
+    it('1. renders with correct content and styles', () => {
+        render(<NsPost {...props} />);
+
+        const postContainer = screen.getByTestId('sample-post');
+        expect(postContainer).toBeInTheDocument();
+
+        const textElement = screen.getByText('Sample Text');
+        expect(textElement).toBeInTheDocument();
+
+        const bodyElement = screen.getByText('Sample Body');
+        expect(bodyElement).toBeInTheDocument();
+
+        const imageElement = screen.getByAltText('Sample Alt Text');
+        expect(imageElement).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import NsSmallFullCard from '../NsSmallFullCard';
+
+describe('NsSmallFullCard component', () => {
+    const props = {
+        title: 'Sample Title',
+        subtitle: 'Sample Subtitle',
+        backgroundImageUrl: 'https://example.com/image.jpg',
+        backgroundImageAlt: 'Sample Alt Text',
+        cardLink: {
+            href: 'https://www.example.com',
+            title: 'Button Text',
+        },
+    };
+
+    it('1. renders with correct content and styles', () => {
+        render(<NsSmallFullCard {...props} />);
+
+        const cardContainer = screen.getByTestId('small-full-card');
+        expect(cardContainer).toBeInTheDocument();
+
+        const titleElement = screen.getByText('Sample Title');
+        expect(titleElement).toBeInTheDocument();
+
+        const subtitleElement = screen.getByText('Sample Subtitle');
+        expect(subtitleElement).toBeInTheDocument();
+
+        const imageElement = screen.getByAltText('Sample Alt Text');
+        expect(imageElement).toBeInTheDocument();
+
+        const linkElement = screen.getByText('Button Text');
+        expect(linkElement).toBeInTheDocument();
+        expect(linkElement).toHaveAttribute('href', 'https://www.example.com');
+    });
+});