@nuskin/foundation-ui-components 1.6.1 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.6.1",
+    "version": "1.7.0",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {

package/src/common/card/NsBrandCard.tsx

@@ -0,0 +1,94 @@
+import { ShoppingCart } from '@mui/icons-material';
+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';
+import NsButton from '../button/NsButton';
+import cardSizes from './cardSizes';
+
+type NsBrandCardProps = {
+    title?: string;
+    brandImageUrl: string;
+    backgroundImageUrl: string;
+    size?: 'small' | 'large';
+    button?: boolean;
+    onClick?: () => void;
+};
+
+const CardContainer = styled((props: any) => <Box {...props} />)(({ size }) => {
+    const { small, large } = cardSizes;
+    let width, height;
+
+    if (size === 'small') {
+        width = small.width;
+        height = small.height;
+    } else {
+        width = large.width;
+        height = large.height;
+    }
+
+    return {
+        width,
+        display: 'flex',
+        alignItems: 'start',
+        justifyContent: 'center',
+        position: 'relative',
+        flexDirection: 'column',
+        '.brand-title': {
+            marginTop: '15px',
+            fontSize: '20px',
+            display: 'inline-block',
+            wordBreak: 'break-word',
+        },
+        ':hover': {
+            '.brand-title': {
+                opacity: '0.7',
+            },
+        },
+        '.cta': {
+            marginTop: '15px',
+        },
+        '.image': {
+            width,
+            height,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+        },
+    };
+});
+export default function NsBrandCard({
+    title,
+    brandImageUrl,
+    backgroundImageUrl,
+    button,
+    size,
+    onClick,
+}: NsBrandCardProps) {
+    return (
+        <CardContainer role="brand-card" component="div" data-testid="brand-card" size={size} onClick={onClick}>
+            <NsBgCard backgroundImageUrl={backgroundImageUrl} className="image">
+                <NsBrandWrapper>
+                    <NsBrandLogo component="img" image={brandImageUrl} />
+                </NsBrandWrapper>
+            </NsBgCard>
+            {title ? (
+                <NsTypography variant="h3" className="brand-title">
+                    {title}
+                </NsTypography>
+            ) : null}
+            {button ? (
+                <NsButton
+                    className="cta"
+                    darkModeEnabled={false}
+                    variant="outlined"
+                    fullWidth={true}
+                    endIcon={<ShoppingCart />}
+                >
+                    Add to Cart
+                </NsButton>
+            ) : null}
+        </CardContainer>
+    );
+}

package/src/common/card/NsCheckoutCard.tsx

@@ -0,0 +1,92 @@
+import Box from '@mui/material/Box';
+import { styled } from '@nuskin/foundation-theme';
+import { NsIcon, NsIconNameType, NsLink } from '../';
+import { useState } from 'react';
+
+type NsCheckoutCardProps = {
+    icon: NsIconNameType;
+    title: string;
+    address: string;
+    onClick: () => void;
+};
+
+const CardContainer = styled(Box)(() => {
+    return {
+        backgroundColor: '#fff',
+        display: 'flex',
+        width: '345px',
+        height: 'auto',
+        border: '2px solid #B2B2B2',
+        borderRadius: '2px',
+        '.left-bar': {
+            width: '4px',
+            height: 'auto',
+            backgroundColor: '#22D55C',
+        },
+        '.content': {
+            display: 'flex',
+            flexDirection: 'row',
+            gap: '10px',
+            margin: '10px',
+            width: '100%',
+        },
+        '.text-content': {
+            width: '100%',
+        },
+        '.title': {
+            fontSize: '14px',
+            fontWeight: '700',
+        },
+        '.address': {
+            fontSize: '13px',
+            fontWeight: '400',
+        },
+        '.action-link': {
+            color: '#7123D9',
+            fontSize: '14px',
+            fontWeight: '700',
+            letterSpacing: '0.7',
+        },
+        '.icon-right': {
+            marginLeft: 'auto',
+        },
+        '.icon': {
+            ':hover': {
+                cursor: 'pointer',
+            },
+        },
+    };
+});
+
+export default function NsCheckoutCard({ title, address, icon, onClick }: NsCheckoutCardProps) {
+    const [dropdownIcon, setDropdownIcon] = useState(false);
+    const handleClick = () => {
+        setDropdownIcon(!dropdownIcon);
+    };
+
+    return (
+        <CardContainer role="checkout-card" component="div" data-testid="checkout-card" onClick={onClick}>
+            <div className="left-bar"></div>
+            <div className="content">
+                <span>
+                    <NsIcon name={icon} />
+                </span>
+                <div className="text-content">
+                    <article className="title">{title}</article>
+                    <article className="address">{address}</article>
+                    <NsLink className="action-link" href={''}>
+                        CHANGE
+                    </NsLink>
+                </div>
+                <span className="icon-right">
+                    <NsIcon
+                        name={dropdownIcon ? 'arrowUp' : 'arrowDown'}
+                        className="icon"
+                        onClick={handleClick}
+                        testId="dropdown-icon"
+                    />
+                </span>
+            </div>
+        </CardContainer>
+    );
+}

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;