@nuskin/foundation-ui-components 1.6.0 → 1.7.0

package/src/common/card/NsHeroCardLevel1.tsx

@@ -0,0 +1,106 @@
+import { NsLink, NsImage } from '../';
+import Box from '@mui/material/Box';
+import { AdditionalProps } from '../common.types';
+import { styled } from '@nuskin/foundation-theme';
+
+type NsHeroCardLevel1Props = {
+    text: string;
+    body: string;
+    cardLink: { href: string; title: string };
+    backgroundImageUrl: string;
+    backgroundImageAlt: string;
+    onClick: () => void;
+} & AdditionalProps;
+
+const CardContainer = styled(Box)(() => {
+    return {
+        backgroundClip: 'border-box',
+        display: 'flex',
+        flexDirection: 'row' as 'row', // https://github.com/cssinjs/jss/issues/1344
+        wordWrap: 'break-word' as 'break-word',
+        position: 'relative',
+        overflow: 'hidden',
+        height: 'auto',
+        '.content': {
+            width: '50%',
+            height: '100%',
+            padding: '50px',
+            paddingLeft: '100px',
+            display: 'flex',
+            flexDirection: 'column' as 'column',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            boxSizing: 'border-box',
+        },
+        '.image': {
+            width: 'auto',
+            height: '100%',
+            display: 'block',
+        },
+        '.body-title': {
+            fontSize: '36px',
+            lineHeight: '44px',
+            marginBottom: '20px',
+        },
+        '.body-text': {
+            fontSize: '18px',
+            marginBottom: '20px',
+        },
+        '.action-link': {
+            display: 'flex',
+            height: '44px',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: '10px',
+            flexShrink: 0,
+            alignSelf: 'stretch',
+            backgroundColor: '#252525',
+            color: '#fff',
+            marginTop: '10px',
+            borderRadius: '4px',
+
+            ':hover': {
+                textDecoration: 'none',
+                backgroundColor: '#252w16',
+            },
+        },
+        '@media (max-width: 768px)': {
+            display: 'block',
+            height: 'auto',
+            backgroundColor: '#edece9',
+            '.content': {
+                position: 'static',
+                width: '100%',
+                padding: '20px',
+            },
+        },
+    };
+});
+
+const NsHeroCardLevel1 = ({
+    text,
+    body,
+    cardLink,
+    backgroundImageUrl,
+    backgroundImageAlt,
+    onClick,
+    additionalProps,
+}: NsHeroCardLevel1Props) => {
+    return (
+        <CardContainer data-testid={additionalProps?.testid} onClick={onClick}>
+            <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>
+                <NsLink className="action-link" href={cardLink.href}>
+                    {cardLink.title}
+                </NsLink>
+            </div>
+        </CardContainer>
+    );
+};
+export default NsHeroCardLevel1;

package/src/common/card/NsHeroCardLevel2.tsx

@@ -0,0 +1,126 @@
+import { NsLink, NsImage, NsIcon, NsIconNameType } from '../';
+import Box from '@mui/material/Box';
+import { AdditionalProps } from '../common.types';
+import { styled } from '@nuskin/foundation-theme';
+
+type NsHeroCardLevel2Props = {
+    brand: string;
+    text: string;
+    body: string;
+    icon: NsIconNameType;
+    cardLink: { href: string; title: string };
+    backgroundImageUrl: string;
+    backgroundImageAlt: string;
+    onClick: () => void;
+} & AdditionalProps;
+
+const CardContainer = styled(Box)(() => {
+    return {
+        backgroundClip: 'border-box',
+        display: 'flex',
+        flexDirection: 'row' as 'row', // https://github.com/cssinjs/jss/issues/1344
+        wordWrap: 'break-word' as 'break-word',
+        position: 'relative',
+        overflow: 'hidden',
+        height: 'auto',
+        '.content': {
+            height: '100%',
+            padding: '50px',
+            display: 'flex',
+            flexDirection: 'column' as 'column',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            boxSizing: 'border-box',
+        },
+        '.image': {
+            width: 'auto',
+            height: '100%',
+            display: 'block',
+        },
+        '.brand-container': {
+            backgroundColor: '#fff',
+            width: 'fit-content',
+            paddingLeft: '10px',
+            paddingRight: '10px',
+        },
+        '.body-title': {
+            fontSize: '36px',
+            lineHeight: '44px',
+            marginBottom: '5px',
+        },
+        '.body-text': {
+            fontSize: '18px',
+            fontWeight: 700,
+            marginBottom: '5px',
+        },
+        '.cta': {
+            display: 'flex',
+            flexDirection: 'column' as 'column',
+            width: 'fit-content',
+            borderBottom: '1px solid black',
+            ':hover': {
+                opacity: '0.8',
+            },
+        },
+        '.action-link': {
+            display: 'flex',
+            fontWeight: 600,
+            ':hover': {
+                textDecoration: 'none',
+            },
+        },
+        '.icon': {
+            marginLeft: '10px',
+        },
+        '@media (max-width: 768px)': {
+            '.content': {
+                padding: '5%',
+            },
+            '.body-title': {
+                fontSize: '18px',
+                lineHeight: '44px',
+                marginBottom: '5px',
+            },
+            '.body-text': {
+                fontSize: '12px',
+                fontWeight: 700,
+                marginBottom: '5px',
+            },
+        },
+    };
+});
+
+const NsHeroCardLevel2 = ({
+    brand,
+    text,
+    body,
+    cardLink,
+    backgroundImageUrl,
+    backgroundImageAlt,
+    additionalProps,
+    icon,
+    onClick,
+}: NsHeroCardLevel2Props) => {
+    return (
+        <CardContainer data-testid={additionalProps?.testid} onClick={onClick}>
+            <div className="image">
+                <NsImage height={'auto'} width={'100%'} alt={backgroundImageAlt} src={backgroundImageUrl} />
+            </div>
+            <div className="content">
+                <div className="brand-container">
+                    <article>{brand}</article>
+                </div>
+                <article className="body-title">{text}</article>
+                <article className="body-text">{body}</article>
+                <div className="cta">
+                    <NsLink className="action-link" href={cardLink.href}>
+                        {cardLink.title}
+                        <NsIcon className="icon" name={icon} />
+                    </NsLink>
+                </div>
+            </div>
+        </CardContainer>
+    );
+};
+export default NsHeroCardLevel2;

package/src/common/card/NsIconText.tsx

@@ -0,0 +1,153 @@
+import Box from '@mui/material/Box';
+import { AdditionalProps } from '../common.types';
+import { styled } from '@nuskin/foundation-theme';
+
+type NsIconTextProps = {
+    text: string;
+    body: string;
+} & AdditionalProps;
+
+const CardContainer = styled(Box)(() => {
+    return {
+        backgroundClip: 'border-box',
+        display: 'flex',
+        flexDirection: 'column' as 'column',
+        wordWrap: 'break-word' as 'break-word',
+        position: 'relative',
+        overflow: 'hidden',
+        height: 'auto',
+        width: '222px',
+        backgroundColor: '#F5F5F5',
+        padding: '20px',
+        justifyContent: 'center',
+        gap: '30px',
+        '.icon': {
+            display: 'flex',
+            width: '100%',
+        },
+        '.divider': {
+            width: '182px',
+            height: '1px',
+            background: '#B2B2B2',
+        },
+        '.title': {
+            fontSize: '26px',
+            fontWeight: 400,
+            marginTop: '-10px',
+        },
+        '.text': {
+            fontWeight: 400,
+            fontSize: '14px',
+        },
+    };
+});
+
+const NsIconText = ({ text, body, additionalProps }: NsIconTextProps) => {
+    return (
+        <CardContainer data-testid={additionalProps?.testid}>
+            <div className="icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80" fill="none">
+                    <path
+                        d="M40 80C62.0914 80 80 62.0914 80 40C80 17.9086 62.0914 0 40 0C17.9086 0 0 17.9086 0 40C0 62.0914 17.9086 80 40 80Z"
+                        fill="white"
+                    />
+                    <path
+                        opacity="0.3"
+                        d="M43.7138 75.6844C62.5411 73.4233 73.528 54.1872 57.8386 44.0119C46.8517 37.2284 19.7234 38.6174 17.646 51.4899C15.0035 67.8672 29.589 77.9456 43.7138 75.6844Z"
+                        fill="#F56767"
+                    />
+                    <path
+                        d="M2.66699 40.4277H77.5603"
+                        stroke="#252525"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                    <path
+                        d="M16 60H64"
+                        stroke="#252525"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-dasharray="5 5"
+                    />
+                    <path
+                        d="M25.333 69.334L54.6663 69.334"
+                        stroke="#252525"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-dasharray="7 7"
+                    />
+                    <path
+                        d="M8 48.9556C9.73125 51.1044 23.5567 54.3276 41.6428 49.4257C58.2309 44.9938 70.7303 46.8336 73.3333 48.5258"
+                        stroke="#252525"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                    <path
+                        d="M24 22.668V25.3346"
+                        stroke="#252525"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                    <path
+                        d="M24 33.334V36.0007"
+                        stroke="#252525"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                    <path
+                        d="M50.6665 12V14.6667"
+                        stroke="#252525"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                    <path
+                        d="M50.6665 22.666V25.3327"
+                        stroke="#252525"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                    <path
+                        d="M17.3335 29.332H20.0002"
+                        stroke="#252525"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                    <path
+                        d="M28 29.332H30.6667"
+                        stroke="#252525"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                    <path
+                        d="M44 18.668H46.6667"
+                        stroke="#252525"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                    <path
+                        d="M54.6665 18.668H57.3332"
+                        stroke="#252525"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                </svg>
+            </div>
+            <article className="title">{text}</article>
+            <div className="divider"></div>
+            <article className="text">{body}</article>
+        </CardContainer>
+    );
+};
+export default NsIconText;

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;