@nuskin/foundation-ui-components 1.6.1 → 1.7.0

package/src/common/card/NsLargeCard.tsx

@@ -0,0 +1,120 @@
+import Box from '@mui/material/Box';
+import { styled } from '@nuskin/foundation-theme';
+import { NsButton, NsIcon, NsImage, NsLink, NsIconNameType } from '..';
+
+type NsLargeCardProps = {
+    title: string;
+    subtitle: string;
+    intro: string;
+    icon: NsIconNameType;
+    backgroundImageUrl: string;
+    backgroundImageAlt: string;
+    cardLink: { href: string; title: string };
+    isHorizontal?: boolean;
+};
+
+const CardContainer = styled((props: any) => <Box {...props} />)(({ isHorizontal }) => {
+    let width = 'fit-content',
+        paddingLeft = '0px',
+        justifyContent,
+        fontSizeSub = '11px',
+        fontSizeTitle = '26px';
+
+    if (isHorizontal) {
+        width = '400px';
+        paddingLeft = '30px';
+        justifyContent = 'space-around';
+        fontSizeSub = '16px';
+        fontSizeTitle = '36px';
+    }
+    let direction = isHorizontal ? ('row' as 'row') : ('column' as 'column');
+
+    return {
+        display: 'flex',
+        flexDirection: direction,
+        position: 'relative',
+        '.image': {
+            width: '375px',
+            height: '392px',
+            objectFit: 'cover',
+        },
+        '.content': {
+            display: 'flex',
+            flexDirection: 'column',
+            width,
+            paddingLeft,
+            justifyContent,
+        },
+        '.subtitle': {
+            fontSize: fontSizeSub,
+            fontWeight: '400',
+            marginTop: '10px',
+        },
+        '.title': {
+            fontSize: fontSizeTitle,
+            fontWeight: '400',
+            marginTop: '10px',
+        },
+        '.cta': {
+            display: 'flex',
+            flexDirection: 'column' as 'column',
+            width: 'fit-content',
+            borderBottom: '1px solid black',
+            ':hover': {
+                opacity: '0.8',
+            },
+        },
+        '.action-link': {
+            marginTop: '10px',
+            display: 'flex',
+            fontWeight: 600,
+            ':hover': {
+                textDecoration: 'none',
+            },
+        },
+        '.icon': {
+            marginLeft: '10px',
+        },
+    };
+});
+
+export default function NsLargeCard({
+    title,
+    subtitle,
+    backgroundImageUrl,
+    backgroundImageAlt,
+    cardLink,
+    intro,
+    icon,
+    isHorizontal,
+}: NsLargeCardProps) {
+    return (
+        <CardContainer role="large-card" component="div" data-testid="large-card" isHorizontal={isHorizontal}>
+            <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="image" />
+            <div className="content">
+                <article className="subtitle">{subtitle}</article>
+                <article className="title">{title}</article>
+                <article className="subtitle">{intro}</article>
+                {isHorizontal ? (
+                    <div className="cta">
+                        <NsLink className="action-link" href={cardLink.href}>
+                            {cardLink.title}
+                            <NsIcon className="icon" name={icon} />
+                        </NsLink>
+                    </div>
+                ) : (
+                    <NsButton
+                        className="action-link"
+                        variant="outlined"
+                        color="primary"
+                        href={cardLink.href}
+                        fullWidth={false}
+                        darkModeEnabled={false}
+                    >
+                        {cardLink.title}
+                    </NsButton>
+                )}
+            </div>
+        </CardContainer>
+    );
+}

package/src/common/card/NsMediumCard.tsx

@@ -0,0 +1,64 @@
+import Box from '@mui/material/Box';
+import { styled } from '@nuskin/foundation-theme';
+import { NsButton, NsImage } from '..';
+
+type NsMediumCardProps = {
+    title: string;
+    subtitle: string;
+    backgroundImageUrl: string;
+    backgroundImageAlt: string;
+    cardLink: { href: string; title: string };
+};
+
+const CardContainer = styled(Box)(() => {
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        position: 'relative',
+        '.image': {
+            width: '300px',
+            height: '300px',
+            objectFit: 'cover',
+        },
+        '.content': {
+            display: 'flex',
+            flexDirection: 'column',
+        },
+        '.subtitle': {
+            fontSize: '11px',
+            fontWeight: '400',
+            marginTop: '10px',
+        },
+        '.title': {
+            fontSize: '16px',
+            fontWeight: '400',
+            marginTop: '10px',
+        },
+        '.action-link': {
+            marginTop: '10px',
+            fontSize: '14px',
+            alignSelf: 'start',
+        },
+    };
+});
+
+export default function NsMediumCard({
+    title,
+    subtitle,
+    backgroundImageUrl,
+    backgroundImageAlt,
+    cardLink,
+}: NsMediumCardProps) {
+    return (
+        <CardContainer role="medium-card" component="div" data-testid="medium-card">
+            <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="image" />
+            <div className="content">
+                <article className="title">{title}</article>
+                <article className="subtitle">{subtitle}</article>
+                <NsButton className="action-link" variant="outlined" color="primary" href={cardLink.href}>
+                    {cardLink.title}
+                </NsButton>
+            </div>
+        </CardContainer>
+    );
+}

package/src/common/card/NsPost.tsx

@@ -0,0 +1,60 @@
+import Box from '@mui/material/Box';
+import { NsImage } from '../';
+import { AdditionalProps } from '../common.types';
+import { styled } from '@nuskin/foundation-theme';
+
+type NsPostProps = {
+    text: string;
+    body: string;
+    backgroundImageUrl: string;
+    backgroundImageAlt: string;
+} & AdditionalProps;
+
+const CardContainer = styled(Box)(() => {
+    return {
+        backgroundClip: 'border-box',
+        display: 'flex',
+        flexDirection: 'column' as 'column', // https://github.com/cssinjs/jss/issues/1344
+        wordWrap: 'break-word' as 'break-word',
+        position: 'relative',
+        overflow: 'hidden',
+        height: 'auto',
+        width: '165px',
+        backgroundColor: '#fff',
+        '.image': {
+            width: '100%',
+            height: '180px',
+            display: 'block',
+        },
+        '.content': {
+            padding: '20px',
+            display: 'flex',
+            flexDirection: 'column',
+        },
+        '.body-title': {
+            fontSize: '18px',
+            marginBottom: '5px',
+            fontWeight: 600,
+        },
+        '.body-text': {
+            fontSize: '12px',
+            color: '#8C8C8C',
+            marginBottom: '5px',
+        },
+    };
+});
+
+const NsPost = ({ text, body, backgroundImageUrl, backgroundImageAlt, additionalProps }: NsPostProps) => {
+    return (
+        <CardContainer data-testid={additionalProps?.testid}>
+            <div className="image">
+                <NsImage height="auto" width="100%" alt={backgroundImageAlt} src={backgroundImageUrl} />
+            </div>
+            <div className="content">
+                <article className="body-title">{text}</article>
+                <article className="body-text">{body}</article>
+            </div>
+        </CardContainer>
+    );
+};
+export default NsPost;

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);
+    });
+});