@nuskin/foundation-ui-components 1.6.1 → 1.7.0

package/src/common/card/NsBrandProductCard.tsx

@@ -1,47 +0,0 @@
-import Box from '@mui/material/Box';
-import { styled } from '@nuskin/foundation-theme';
-import { NsTypography } from '../';
-import NsBrandWrapper from './NsBrandWrapper';
-import NsBrandLogo from './NsBrandLogo';
-import NsBgCard from './NsBgCard';
-
-type NsBrandProductCardProps = {
-    title?: string;
-    brandImageUrl: string;
-    backgroundImageUrl: string;
-};
-const CardContainer = styled(Box)(() => {
-    return {
-        width: '256px',
-        display: 'flex',
-        alignItems: 'start',
-        justifyContent: 'center',
-        position: 'relative',
-        flexDirection: 'column',
-        '.brand-title': {
-            marginTop: '20px',
-            fontSize: '20px',
-        },
-        ':hover': {
-            '.brand-title': {
-                opacity: '0.7',
-            },
-        },
-    };
-});
-export default function NsBrandProductCard({ title, brandImageUrl, backgroundImageUrl }: NsBrandProductCardProps) {
-    return (
-        <CardContainer role="brand-card" component="div" data-testid="brand-product-card">
-            <NsBgCard backgroundImageUrl={backgroundImageUrl}>
-                <NsBrandWrapper>
-                    <NsBrandLogo component="img" image={brandImageUrl} />
-                </NsBrandWrapper>
-            </NsBgCard>
-            {title ? (
-                <NsTypography variant="h3" className="brand-title">
-                    {title}
-                </NsTypography>
-            ) : null}
-        </CardContainer>
-    );
-}

package/src/common/card/NsFfgCard.tsx

@@ -1,24 +0,0 @@
-import { NsLink, NsImage } from '../';
-import { NsFfgStyled } from './styled/NsFfgStyled';
-import { NsFfgCardProps } from './types.d';
-
-const NsFfgCard = ({ cardLink, text, topImageUrl, topImageAlt, additionalProps, cslp, onClick }: NsFfgCardProps) => {
-    return (
-        <NsFfgStyled
-            data-testid={additionalProps?.testid}
-            onClick={onClick}
-            className={additionalProps?.className ?? ''}
-        >
-            <header className="top-image">
-                <NsImage height={192} width={288} alt={topImageAlt} src={topImageUrl} />
-            </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>
-    );
-};
-export default NsFfgCard;

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

@@ -1,32 +0,0 @@
-import { render } from '@testing-library/react';
-import NsBrandProductCard from '../NsBrandProductCard';
-
-describe('NSBgCard component', () => {
-    const props = {
-        title: 'Nutricentials',
-        brandImageUrl: 'https://media.nuskin.com/m/f3a91129cbbae32/webimage-brand-nutricentials.png',
-        backgroundImageUrl: 'https://media.nuskin.com/m/298104036e885b40/webimage-brand-nutricentials.png',
-    };
-    it('render brand image', () => {
-        const { container } = render(<NsBrandProductCard {...props} />);
-        const img = container.querySelector('img');
-        expect(img).toHaveAttribute('src', props.brandImageUrl);
-    });
-    it('render background image', () => {
-        const { container } = render(<NsBrandProductCard {...props} />);
-        const card = container.querySelector('div.MuiPaper-root');
-        expect(card).toHaveStyle(`
-    background-image: url(${props.backgroundImageUrl});
-    `);
-    });
-    it('renders title', () => {
-        const { getByText } = render(<NsBrandProductCard {...props} />);
-        const cardElement = getByText(props.title);
-        expect(cardElement).toBeInTheDocument();
-    });
-    it('does not render title, when title is not passed', () => {
-        const { container } = render(<NsBrandProductCard {...{ ...props, title: undefined }} />);
-        const cardElement = container.querySelector('.brand-title');
-        expect(cardElement).toBeNull();
-    });
-});

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

@@ -1,33 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import NsFfgCard from '../NsFfgCard';
-
-describe('NsFfgCard component', () => {
-    const props = {
-        topImageUrl: 'https://media.nuskin.com/m/6245528b8f76ad32/webimage-brand-ageLOC.png',
-        topImageAlt: 'alt-text',
-        text: 'card text',
-        cardLink: { href: 'https://www.google.com', title: 'Test' },
-        onClick: jest.fn(),
-    };
-    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;
-        `);
-    });
-    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/NsBgCard.stories.tsx

@@ -1,20 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { NsBgCard } from '../';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-
-type ComponentType = typeof NsBgCard;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    component: NsBgCard,
-    title: 'Components/Containers/Card/NsBgCard',
-    argTypes: {},
-    args: {
-        title: 'ageLOC LumiSpa',
-        backgroundImageUrl: 'https://media.nuskin.com/m/3604b5202b0b64c6/webimage-brand-lumispa-optweb.png',
-    },
-    decorators: [withCenterDecorator],
-} as MetaStory;
-
-export const BgCard: Story = {};

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

@@ -1,73 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { within, userEvent } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsFfgCard } from '../';
-
-type ComponentType = typeof NsFfgCard;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    component: NsFfgCard,
-    title: 'Components/Containers/Card/NsFfgCard',
-    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: {
-        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 }: any) => {
-        d.count = 0;
-        const canvas = within(canvasElement);
-        userEvent.click(canvas.getByTestId('ffg-card'));
-        expect(d.count).toEqual(1);
-    },
-};

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

@@ -1,46 +0,0 @@
-import { Box } from '@mui/material';
-import { styled } from '@nuskin/foundation-theme';
-
-const Component = () => {
-    return {
-        backgroundClip: 'border-box',
-        backgroundColor: '#fff',
-        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: '16px',
-        transition: 'all .2s ease',
-        textAlign: 'center' as 'center',
-        wordWrap: 'break-word' as 'break-word',
-        ':hover': {
-            transform: 'translateY(-10px)',
-            boxShadow: '0 1rem 3rem rgba(31, 45, 61, .125) !important',
-            '.action-link': {
-                color: '#2CD5C4',
-                textDecoration: 'none',
-            },
-        },
-        '.body-text': {
-            padding: '0 1.5rem 4rem',
-            fontSize: '16px',
-            color: '#8492a6',
-        },
-        '.top-image': {
-            padding: '3rem 1.5rem',
-            img: {
-                maxWidth: '100%',
-            },
-        },
-        '.action-link': {
-            color: '#3c4858',
-            fontSize: '1.25rem',
-            padding: '0 1.5rem 3rem',
-            fontWeight: 600,
-            marginBottom: '0.67rem',
-        },
-    };
-};
-export const NsFfgStyled = styled(Box)(Component);