@nuskin/foundation-ui-components 1.33.0-1253-feature.3 → 2.0.0

package/src/common/card/NsLargeCard.tsx

@@ -1,108 +0,0 @@
-import { ReactElement } from 'react';
-
-import Box from '@mui/material/Box';
-import { styled } from '@nuskin/foundation-theme';
-
-import { BynderMedia } from '../image/BynderMedia';
-import { BynderImageDataType } from '../image/types';
-import CardButton from './CardButton';
-import { NsCardButton } from './types';
-
-type NsLargeCardProps = {
-    title: string;
-    subtitle?: string;
-    intro: string;
-    backgroundImageDetail: BynderImageDataType;
-    isHorizontal?: boolean;
-    button?: NsCardButton;
-    className?: string;
-    fontColor?: 'primary' | 'secondary';
-};
-
-const CardContainer = styled((props: any) => <Box {...props} />)(({ isHorizontal, matches }) => {
-    let width = '450px',
-        paddingLeft = '0px',
-        justifyContent,
-        fontSizeSub = '16px',
-        fontSizeTitle = '26px',
-        imageWidth = '100%';
-
-    if (isHorizontal) {
-        width = '600px';
-        paddingLeft = '30px';
-        justifyContent = 'center';
-        fontSizeSub = '16px';
-        fontSizeTitle = '26px';
-        imageWidth = '50%';
-    }
-    let direction = isHorizontal ? ('row' as 'row') : ('column' as 'column');
-
-    return {
-        display: 'flex',
-        flexDirection: direction,
-        position: 'relative',
-        width,
-        '.bg-image': {
-            objectFit: 'cover',
-            height: '220px',
-            width: imageWidth,
-        },
-        '.content': {
-            display: 'flex',
-            flexDirection: 'column',
-            paddingLeft,
-            justifyContent,
-        },
-        '.subtitle': {
-            fontSize: fontSizeSub,
-            fontWeight: '400',
-            marginTop: '10px',
-        },
-        '.title': {
-            fontSize: fontSizeTitle,
-            fontWeight: '400',
-            marginTop: '10px',
-        },
-        '.primary': {
-            color: '#fff',
-        },
-        '.secondary': {
-            color: '#000',
-        },
-        '.cta': {
-            marginTop: '10px',
-        },
-        '@media (max-width: 768px)': {
-            width: '100%',
-        },
-    };
-});
-
-export default function NsLargeCard({
-    title,
-    subtitle,
-    backgroundImageDetail,
-    intro,
-    isHorizontal,
-    button,
-    className,
-    fontColor,
-}: NsLargeCardProps): ReactElement {
-    return (
-        <CardContainer
-            className={className}
-            role="large-card"
-            component="div"
-            data-testid="large-card"
-            isHorizontal={isHorizontal}
-        >
-            <BynderMedia className="bg-image" imageDetail={backgroundImageDetail} />
-            <div className="content">
-                <article className={`subtitle ${fontColor}`}>{subtitle}</article>
-                <article className={`title ${fontColor}`}>{title}</article>
-                <article className={`subtitle ${fontColor}`}>{intro}</article>
-                {button ? <CardButton {...button} /> : null}
-            </div>
-        </CardContainer>
-    );
-}

package/src/common/card/NsMediumCard.tsx

@@ -1,110 +0,0 @@
-import { ReactElement } from 'react';
-
-import Box from '@mui/material/Box';
-import { styled } from '@nuskin/foundation-theme';
-
-import { NsTypography } from '../';
-import { BynderMedia } from '../image/BynderMedia';
-import { BynderImageDataType } from '../image/types';
-import CardButton from './CardButton';
-import { NsCardButton } from './types';
-
-type NsMediumCardProps = {
-    title: string;
-    titleFontWeight?: 'bold' | 'normal' | 'light';
-    subtitle: string;
-    backgroundImageDetail: BynderImageDataType;
-    button?: NsCardButton;
-    className?: string;
-    fluid?: boolean;
-    showArrowWithButtonText?: boolean;
-    fontColor?: 'primary' | 'secondary';
-};
-const textVariantButton = {
-    padding: '0 0 4px',
-    gap: '7px',
-    span: {
-        margin: 0,
-    },
-    '> div': {
-        margin: 0,
-    },
-    '.MuiButton-endIcon': {
-        svg: {
-            g: {
-                strokeWidth: 2,
-            },
-        },
-    },
-};
-const buttonVariantStyle = (variant: string) => (variant === 'text' ? { a: textVariantButton } : {});
-const CardContainer = styled(Box)<{ fluid: boolean; variant: string }>(({ fluid, variant }) => {
-    const textVariantCssModification = buttonVariantStyle(variant);
-
-    return {
-        display: 'flex',
-        flexDirection: 'column',
-        position: 'relative',
-        '.image': {
-            width: fluid ? '100%' : '300px',
-            height: '300px',
-            objectFit: 'cover',
-        },
-        '.content': {
-            display: 'flex',
-            width: fluid ? '100%' : '300px',
-            flexDirection: 'column',
-            flexGrow: 1,
-        },
-        '.subtitle': {
-            fontSize: '16px',
-            fontWeight: '400',
-        },
-        '.title': {
-            fontSize: '20px',
-            marginTop: '10px',
-        },
-        '.primary': {
-            color: '#fff',
-        },
-        '.secondary': {
-            color: '#000',
-        },
-        '.cta': {
-            marginTop: 'auto',
-            ...textVariantCssModification,
-        },
-    };
-});
-
-export default function NsMediumCard({
-    title,
-    titleFontWeight,
-    subtitle,
-    backgroundImageDetail,
-    button,
-    className,
-    fluid,
-    showArrowWithButtonText = false,
-    fontColor,
-}: NsMediumCardProps): ReactElement {
-    return (
-        <CardContainer
-            className={className}
-            role="medium-card"
-            component="div"
-            data-testid="medium-card"
-            fluid={fluid || false}
-            variant={button?.buttonVariant ?? ''}
-        >
-            <BynderMedia className="image" imageDetail={backgroundImageDetail} />
-            <div className="content">
-                <NsTypography variant="h5" color={fontColor} className="title" weight={titleFontWeight}>
-                    {title}
-                </NsTypography>
-                <article className={`subtitle mt-3 mb-5 ${fontColor}`}>{subtitle}</article>
-                {button ? <CardButton {...button} showArrowWithText={showArrowWithButtonText} /> : null}
-            </div>
-        </CardContainer>
-    );
-}

package/src/common/card/NsPost.tsx

@@ -1,78 +0,0 @@
-import { ReactElement } from 'react';
-
-import Box from '@mui/material/Box';
-import { styled } from '@nuskin/foundation-theme';
-
-import { BynderMedia } from '../image/BynderMedia';
-import { BynderImageDataType } from '../image/types';
-
-type NsPostProps = {
-    text: string;
-    body: string;
-    backgroundImageDetail: BynderImageDataType;
-    className?: string;
-    fontColor?: 'primary' | 'secondary';
-};
-
-const CardContainer = styled(Box)`
-    background-clip: border-box;
-    display: flex;
-    flex-direction: column;
-    word-wrap: break-word;
-    position: relative;
-    overflow: hidden;
-    max-width: 165px;
-    height: 272px;
-    background-color: #fff;
-    .image {
-        height: 180px;
-        overflow: hidden;
-        object-fit: contain;
-    }
-    .content {
-        padding: 20px;
-        display: flex;
-        flex-direction: column;
-        min-height: 92px;
-        max-height: 92px;
-        justify-content: space-around;
-    }
-    .body-title {
-        font-size: 18px;
-        font-weight: 600;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        margin: 0;
-    }
-    .body-text {
-        font-size: 12px;
-        font-weight: 700;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        color: #8c8c8c;
-        margin: 0;
-    }
-`;
-
-const NsPost = ({ text, body, backgroundImageDetail, className, fontColor }: NsPostProps): ReactElement => {
-    return (
-        <CardContainer className={className} data-testid="post-card">
-            <BynderMedia className="image" imageDetail={backgroundImageDetail} />
-            <article className="content">
-                <h2 className={`body-title ${fontColor}`} title={text}>
-                    {text}
-                </h2>
-                <p className={`body-text ${fontColor}`} title={body?.substring(0, 80)}>
-                    {body}
-                </p>
-            </article>
-        </CardContainer>
-    );
-};
-export default NsPost;

package/src/common/card/NsSmallFullCard.tsx

@@ -1,93 +0,0 @@
-import { ReactElement } from 'react';
-
-import Box from '@mui/material/Box';
-import { styled } from '@nuskin/foundation-theme';
-
-import { BynderMedia } from '../image/BynderMedia';
-import { BynderImageDataType } from '../image/types';
-import CardButton from './CardButton';
-import { NsCardButton } from './types';
-
-type NsSmallFullCardProps = {
-    title: string;
-    subtitle: string;
-    backgroundImageDetail: BynderImageDataType;
-    button?: NsCardButton;
-    className?: string;
-    fontColor?: 'primary' | 'secondary';
-};
-
-const CardContainer = styled(Box)`
-    background-color: #fff;
-    display: flex;
-    max-height: 320px;
-    max-width: 375px;
-    overflow: hidden;
-    position: relative;
-    .image {
-        width: 100%;
-        height: 100%;
-        object-fit: 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;
-        flex-direction: column;
-    }
-    .subtitle {
-        color: #fff;
-        font-size: 11px;
-        font-weight: 400;
-        margin-top: auto;
-    }
-    .title {
-        color: #fff;
-        font-size: 26px;
-        font-weight: 400;
-        margin-top: 20px;
-    }
-    .cta {
-        margin-top: 20px;
-        max-width: 208px;
-        border-radius: 4px;
-        overflow: hidden;
-    }
-    .primary {
-        color: #fff;
-    }
-    .secondary {
-        color: #000;
-    }
-`;
-
-export default function NsSmallFullCard({
-    title,
-    subtitle,
-    backgroundImageDetail,
-    button,
-    className,
-    fontColor,
-}: NsSmallFullCardProps): ReactElement {
-    return (
-        <CardContainer className={className} role="small-full-card" component="div" data-testid="small-full-card">
-            <BynderMedia className="image" imageDetail={backgroundImageDetail} />
-            <div className="gradientOverlay"></div>
-            <div className="content">
-                <article className={`subtitle ${fontColor}`}>{subtitle}</article>
-                <article className={`title ${fontColor}`}>{title}</article>
-                {button ? <CardButton {...button} /> : null}
-            </div>
-        </CardContainer>
-    );
-}

package/src/common/card/NsXLargeCard.tsx

@@ -1,89 +0,0 @@
-import { ReactElement } from 'react';
-
-import Box from '@mui/material/Box';
-import { styled } from '@nuskin/foundation-theme';
-
-import { BynderMedia } from '../image/BynderMedia';
-import { BynderImageDataType } from '../image/types';
-import CardButton from './CardButton';
-import { NsCardButton } from './types';
-
-type NsXLargeCardProps = {
-    title: string;
-    subtitle: string;
-    backgroundImageDetail: BynderImageDataType;
-    button?: NsCardButton;
-    className?: string;
-    fontColor?: 'primary' | 'secondary';
-};
-
-const CardContainer = styled(Box)`
-    background-color: #fff;
-    display: flex;
-    height: 620px;
-    width: 450px;
-    position: relative;
-    .image {
-        width: 100%;
-        height: 100%;
-        object-fit: 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;
-        flex-direction: column;
-    }
-    .subtitle {
-        color: #fff;
-        font-size: 11px;
-        font-weight: 400;
-        margin-top: auto;
-    }
-    .title {
-        color: #fff;
-        font-size: 26px;
-        font-weight: 400;
-        margin-top: 20px;
-    }
-    .primary {
-        color: #fff;
-    }
-    .secondary {
-        color: #000;
-    }
-    .cta {
-        margin-top: 20px;
-    }
-`;
-
-export default function NsXLargeCard({
-    title,
-    subtitle,
-    backgroundImageDetail,
-    button,
-    className,
-    fontColor,
-}: NsXLargeCardProps): ReactElement {
-    return (
-        <CardContainer className={className} role="x-large-card" component="div" data-testid="x-large-card">
-            <BynderMedia className="image" imageDetail={backgroundImageDetail} />
-            <div className="gradientOverlay"></div>
-            <div className="content">
-                <article className={`subtitle ${fontColor}`}>{subtitle}</article>
-                <article className={`title ${fontColor}`}>{title}</article>
-                {button ? <CardButton {...button} /> : null}
-            </div>
-        </CardContainer>
-    );
-}

package/src/common/card/cardSizes.ts

@@ -1,12 +0,0 @@
-const cardSizes = {
-    small: {
-        maxWidth: '160px',
-        maxHeight: '179px',
-    },
-    large: {
-        maxWidth: '190px',
-        maxHeight: '211px',
-    },
-};
-
-export default cardSizes;

package/src/common/card/fixtures/ImageData1.ts

@@ -1,38 +0,0 @@
-import { BynderImageDataType } from '../../image/types';
-
-export const ImageData1: BynderImageDataType = {
-    previewUrls: [],
-    selected: {
-        url: 'https://media.nuskin.com/transform/88d32408-ba18-4b7d-a688-4b91839bae4a/nu-skin-ageloc-lumispa-io-face-cleansing-beauty-device-usage-woman-blue-background-image',
-        width: null,
-        height: null,
-        fileSize: null,
-        imageType: 'transformBaseUrl',
-        altText: 'image-alt-text',
-        type: 'IMAGE',
-        fit: 'cover',
-        position: 'center center',
-        bgColor: '#ffffff',
-    },
-    isPublic: false,
-    type: 'IMAGE',
-    id: 'KEFzc2V0X2lkIDg4RDMyNDA4LUJBMTgtNEI3RC1BNjg4NEI5MTgzOUJBRTRBKQ==',
-    files: {
-        transformBaseUrl: {
-            url: 'https://media.nuskin.com/transform/88d32408-ba18-4b7d-a688-4b91839bae4a/nu-skin-ageloc-lumispa-io-face-cleansing-beauty-device-usage-woman-blue-background-image',
-            width: null,
-            height: null,
-            fileSize: null,
-        },
-        thumbnail: {
-            url: 'https://media.nuskin.com/m/3f1f52fbf00a552c/thul-nu-skin-ageloc-lumispa-io-face-cleansing-beauty-device-usage-woman-blue-background-image.png',
-            width: 250,
-            height: 250,
-            fileSize: null,
-        },
-    },
-    databaseId: '88D32408-BA18-4B7D-A6884B91839BAE4A',
-    name: 'nu-skin-ageloc-lumispa-io-face-cleansing-beauty-device-usage-woman-blue-background-image',
-    description: null,
-};
-export const ImageData1Text = JSON.stringify(ImageData1);

package/src/common/card/fixtures/ImageData2.ts

@@ -1,38 +0,0 @@
-import { BynderImageDataType } from '../../image/types';
-
-export const ImageData2: BynderImageDataType = {
-    previewUrls: [],
-    selected: {
-        url: 'https://media.nuskin.com/transform/88d32408-ba18-4b7d-a688-4b91839bae4a/nu-skin-ageloc-lumispa-io-face-cleansing-beauty-device-usage-woman-blue-background-image',
-        width: null,
-        height: null,
-        fileSize: null,
-        imageType: 'transformBaseUrl',
-        altText: 'image-alt-text',
-        type: 'IMAGE',
-        fit: 'cover',
-        position: 'center center',
-        bgColor: '#ffffff',
-    },
-    isPublic: false,
-    type: 'IMAGE',
-    id: 'KEFzc2V0X2lkIDg4RDMyNDA4LUJBMTgtNEI3RC1BNjg4NEI5MTgzOUJBRTRBKQ==',
-    files: {
-        transformBaseUrl: {
-            url: 'https://media.nuskin.com/transform/88d32408-ba18-4b7d-a688-4b91839bae4a/nu-skin-ageloc-lumispa-io-face-cleansing-beauty-device-usage-woman-blue-background-image',
-            width: null,
-            height: null,
-            fileSize: null,
-        },
-        thumbnail: {
-            url: 'https://media.nuskin.com/m/3f1f52fbf00a552c/thul-nu-skin-ageloc-lumispa-io-face-cleansing-beauty-device-usage-woman-blue-background-image.png',
-            width: 250,
-            height: 250,
-            fileSize: null,
-        },
-    },
-    databaseId: '88D32408-BA18-4B7D-A6884B91839BAE4A',
-    name: 'nu-skin-ageloc-lumispa-io-face-cleansing-beauty-device-usage-woman-blue-background-image',
-    description: null,
-};
-export const ImageData2Text = JSON.stringify(ImageData2);

package/src/common/card/index.ts

@@ -1,15 +0,0 @@
-export { default as NsBrandWrapper } from './NsBrandWrapper';
-export { default as NsBgCard } from './NsBgCard';
-export { default as NsBrandLogo } from './NsBrandLogo';
-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';
-export { default as NsAwardCard } from './NsAwardCard';
-export * from './types.d';

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

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

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

@@ -1,29 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import NsAwardCard from '../NsAwardCard';
-import { ImageData1 } from '../fixtures/ImageData1';
-
-describe('NsHeroCardLevel1 component', () => {
-    const props = {
-        title: 'AgeLoc LumiSpa iO',
-        awardName: '2023 Bronze Winner',
-        mediaOutlet: 'Edison Awards',
-        backgroundImageDetail: ImageData1,
-    };
-
-    it('1. renders with correct content and styles', () => {
-        render(<NsAwardCard {...props} />);
-
-        const awardCard = screen.getByTestId('award-card');
-        expect(awardCard).toBeInTheDocument();
-
-        const title = screen.queryByText('AgeLoc LumiSpa iO');
-        expect(title).toBeInTheDocument();
-
-        const awardName = screen.queryByText('2023 Bronze Winner');
-        expect(awardName).toBeInTheDocument();
-
-        const mediaOutlet = screen.queryByText('Edison Awards');
-        expect(mediaOutlet).toBeInTheDocument();
-    });
-});

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

@@ -1,23 +0,0 @@
-import { render } from '@testing-library/react';
-import NsBgCard from '../NsBgCard';
-
-describe('NsBgCard component', () => {
-    const props = {
-        backgroundImageUrl: 'https://media.nuskin.com/m/6245528b8f76ad32/webimage-brand-ageLOC.png',
-    };
-    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('2. renders with cover size', () => {
-        const { container } = render(<NsBgCard {...props} />);
-        const cardElement = container.querySelector('div');
-        expect(cardElement).toHaveStyle(`
-      background-size: cover;
-      background-position: center;
-    `);
-    });
-});