@nuskin/foundation-ui-components 1.9.1 → 1.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.9.1",
+    "version": "1.9.3",
     "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/CardButton.tsx

@@ -0,0 +1,31 @@
+import { NsButton, NsIcon } from '..';
+import { NsCardButton } from './types';
+
+const CardButton = ({
+    url,
+    endIcon,
+    buttonText,
+    showButton = true,
+    buttonVariant = 'outlined',
+    buttonColor = 'secondary',
+    fullWidth = false,
+}: NsCardButton) => {
+    if (showButton && url) {
+        return (
+            <div className="cta">
+                <NsButton
+                    href={url}
+                    color={buttonColor}
+                    variant={buttonVariant}
+                    fullWidth={fullWidth}
+                    endIcon={endIcon ? <NsIcon name={endIcon} color={buttonColor} /> : null}
+                >
+                    {buttonText}
+                </NsButton>
+            </div>
+        );
+    }
+    return null;
+};
+
+export default CardButton;

package/src/common/card/NsAwardCard.tsx

@@ -1,6 +1,6 @@
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
-import { NsImage } from '..';
+import { NsImage } from '../';
 
 type NsAwardCardProps = {
     title: string;
@@ -8,6 +8,7 @@ type NsAwardCardProps = {
     mediaOutlet: string;
     backgroundImageUrl: string;
     backgroundImageAlt: string;
+    className?: string;
 };
 
 const CardContainer = styled(Box)(() => {
@@ -57,9 +58,10 @@ export default function NsAwardCard({
     mediaOutlet,
     backgroundImageUrl,
     backgroundImageAlt,
+    className,
 }: NsAwardCardProps) {
     return (
-        <CardContainer role="award-card" component="div" data-testid="award-card">
+        <CardContainer className={className} role="award-card" component="div" data-testid="award-card">
             <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="image" />
             <div className="content">
                 <article className="title">{title}</article>

package/src/common/card/NsBrandCard.tsx

@@ -1,20 +1,20 @@
-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';
+import CardButton from './CardButton';
+import { NsCardButton } from './types';
 
 type NsBrandCardProps = {
     title?: string;
     brandImageUrl: string;
     backgroundImageUrl: string;
     size?: 'small' | 'large';
-    button?: boolean;
-    onClick?: () => void;
+    button?: NsCardButton;
+    className?: string;
 };
 
 const CardContainer = styled((props: any) => <Box {...props} />)(({ size }) => {
@@ -64,10 +64,10 @@ export default function NsBrandCard({
     backgroundImageUrl,
     button,
     size,
-    onClick,
+    className,
 }: NsBrandCardProps) {
     return (
-        <CardContainer role="brand-card" component="div" data-testid="brand-card" size={size} onClick={onClick}>
+        <CardContainer className={className} role="brand-card" component="div" data-testid="brand-card" size={size}>
             <NsBgCard backgroundImageUrl={backgroundImageUrl} className="image">
                 <NsBrandWrapper>
                     <NsBrandLogo component="img" image={brandImageUrl} />
@@ -78,17 +78,7 @@ export default function NsBrandCard({
                     {title}
                 </NsTypography>
             ) : null}
-            {button ? (
-                <NsButton
-                    className="cta"
-                    darkModeEnabled={false}
-                    variant="outlined"
-                    fullWidth={true}
-                    endIcon={<ShoppingCart />}
-                >
-                    Add to Cart
-                </NsButton>
-            ) : null}
+            {button ? <CardButton {...button} /> : null}
         </CardContainer>
     );
 }

package/src/common/card/NsCheckoutCard.tsx

@@ -6,8 +6,9 @@ import { useState } from 'react';
 type NsCheckoutCardProps = {
     icon: NsIconNameType;
     title: string;
-    address: string;
-    onClick: () => void;
+    linkText: string;
+    url: string;
+    className?: string;
 };
 
 const CardContainer = styled(Box)(() => {
@@ -58,14 +59,14 @@ const CardContainer = styled(Box)(() => {
     };
 });
 
-export default function NsCheckoutCard({ title, address, icon, onClick }: NsCheckoutCardProps) {
+export default function NsCheckoutCard({ title, icon, linkText, url, className }: NsCheckoutCardProps) {
     const [dropdownIcon, setDropdownIcon] = useState(false);
     const handleClick = () => {
         setDropdownIcon(!dropdownIcon);
     };
 
     return (
-        <CardContainer role="checkout-card" component="div" data-testid="checkout-card" onClick={onClick}>
+        <CardContainer className={className} role="checkout-card" component="div" data-testid="checkout-card">
             <div className="left-bar"></div>
             <div className="content">
                 <span>
@@ -73,9 +74,9 @@ export default function NsCheckoutCard({ title, address, icon, onClick }: NsChec
                 </span>
                 <div className="text-content">
                     <article className="title">{title}</article>
-                    <article className="address">{address}</article>
-                    <NsLink className="action-link" href={''}>
-                        CHANGE
+                    <article className="address">Address</article>
+                    <NsLink className="action-link" href={url}>
+                        {linkText}
                     </NsLink>
                 </div>
                 <span className="icon-right">

package/src/common/card/NsHeroCardLevel1.tsx

@@ -1,22 +1,23 @@
-import { NsLink, NsImage } from '../';
+import { NsImage } from '../';
 import Box from '@mui/material/Box';
-import { AdditionalProps } from '../common.types';
 import { styled } from '@nuskin/foundation-theme';
+import CardButton from './CardButton';
+import { NsCardButton } from './types';
 
 type NsHeroCardLevel1Props = {
-    text: string;
-    body: string;
-    cardLink: { href: string; title: string };
+    cardTitle: string;
+    cardDescription: string;
     backgroundImageUrl: string;
     backgroundImageAlt: string;
-    onClick: () => void;
-} & AdditionalProps;
+    button?: NsCardButton;
+    className?: string;
+};
 
 const CardContainer = styled(Box)(() => {
     return {
         backgroundClip: 'border-box',
         display: 'flex',
-        flexDirection: 'row' as 'row', // https://github.com/cssinjs/jss/issues/1344
+        flexDirection: 'row' as 'row',
         wordWrap: 'break-word' as 'break-word',
         position: 'relative',
         overflow: 'hidden',
@@ -48,23 +49,7 @@ const CardContainer = styled(Box)(() => {
             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',
@@ -80,25 +65,22 @@ const CardContainer = styled(Box)(() => {
 });
 
 const NsHeroCardLevel1 = ({
-    text,
-    body,
-    cardLink,
+    cardTitle,
+    cardDescription,
     backgroundImageUrl,
     backgroundImageAlt,
-    onClick,
-    additionalProps,
+    button,
+    className,
 }: NsHeroCardLevel1Props) => {
     return (
-        <CardContainer data-testid={additionalProps?.testid} onClick={onClick}>
+        <CardContainer className={className} data-testid="hero-card-level-1">
             <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>
+                <article className="body-title">{cardTitle}</article>
+                <article className="body-text">{cardDescription}</article>
+                {button ? <CardButton {...button} /> : null}
             </div>
         </CardContainer>
     );

package/src/common/card/NsHeroCardLevel2.tsx

@@ -1,24 +1,24 @@
-import { NsLink, NsImage, NsIcon, NsIconNameType } from '../';
+import { NsImage } from '../';
 import Box from '@mui/material/Box';
-import { AdditionalProps } from '../common.types';
 import { styled } from '@nuskin/foundation-theme';
+import CardButton from './CardButton';
+import { NsCardButton } from './types';
 
 type NsHeroCardLevel2Props = {
-    brand: string;
-    text: string;
-    body: string;
-    icon: NsIconNameType;
-    cardLink: { href: string; title: string };
+    brandName: string;
+    cardTitle: string;
+    cardDescription: string;
     backgroundImageUrl: string;
     backgroundImageAlt: string;
-    onClick: () => void;
-} & AdditionalProps;
+    button?: NsCardButton;
+    className?: string;
+};
 
 const CardContainer = styled(Box)(() => {
     return {
         backgroundClip: 'border-box',
         display: 'flex',
-        flexDirection: 'row' as 'row', // https://github.com/cssinjs/jss/issues/1344
+        flexDirection: 'row' as 'row',
         wordWrap: 'break-word' as 'break-word',
         position: 'relative',
         overflow: 'hidden',
@@ -54,25 +54,6 @@ const CardContainer = styled(Box)(() => {
             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%',
@@ -92,33 +73,26 @@ const CardContainer = styled(Box)(() => {
 });
 
 const NsHeroCardLevel2 = ({
-    brand,
-    text,
-    body,
-    cardLink,
+    brandName,
+    cardTitle,
+    cardDescription,
     backgroundImageUrl,
     backgroundImageAlt,
-    additionalProps,
-    icon,
-    onClick,
+    button,
+    className,
 }: NsHeroCardLevel2Props) => {
     return (
-        <CardContainer data-testid={additionalProps?.testid} onClick={onClick}>
+        <CardContainer className={className} data-testid="hero-card-level-2">
             <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>
+                    <article>{brandName}</article>
                 </div>
+                <article className="body-title">{cardTitle}</article>
+                <article className="body-text">{cardDescription}</article>
+                <div>{button ? <CardButton {...button} /> : null}</div>
             </div>
         </CardContainer>
     );

package/src/common/card/NsIconText.tsx

@@ -1,11 +1,11 @@
 import Box from '@mui/material/Box';
-import { AdditionalProps } from '../common.types';
 import { styled } from '@nuskin/foundation-theme';
 
 type NsIconTextProps = {
     text: string;
     body: string;
-} & AdditionalProps;
+    className?: string;
+};
 
 const CardContainer = styled(Box)(() => {
     return {
@@ -42,9 +42,9 @@ const CardContainer = styled(Box)(() => {
     };
 });
 
-const NsIconText = ({ text, body, additionalProps }: NsIconTextProps) => {
+const NsIconText = ({ text, body, className }: NsIconTextProps) => {
     return (
-        <CardContainer data-testid={additionalProps?.testid}>
+        <CardContainer className={className} data-testid="icon-text-card">
             <div className="icon">
                 <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80" fill="none">
                     <path

package/src/common/card/NsLargeCard.tsx

@@ -1,17 +1,18 @@
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
-import { NsButton, NsIcon, NsImage, NsLink, NsIconNameType } from '..';
+import { NsImage } from '../';
+import CardButton from './CardButton';
+import { NsCardButton } from './types';
 
 type NsLargeCardProps = {
     title: string;
     subtitle?: string;
     intro: string;
-    icon?: NsIconNameType;
-    buttonVariant: 'text' | 'outlined' | 'contained';
     backgroundImageUrl: string;
     backgroundImageAlt: string;
-    cardLink: { href: string; title: string };
     isHorizontal?: boolean;
+    button?: NsCardButton;
+    className?: string;
 };
 
 const CardContainer = styled((props: any) => <Box {...props} />)(({ isHorizontal }) => {
@@ -57,26 +58,7 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ isHorizontal
             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,
-            width: 'fit-content',
-            ':hover': {
-                textDecoration: 'none',
-            },
-        },
-        '.icon': {
-            marginLeft: '10px',
         },
     };
 });
@@ -86,39 +68,25 @@ export default function NsLargeCard({
     subtitle,
     backgroundImageUrl,
     backgroundImageAlt,
-    cardLink,
-    buttonVariant,
     intro,
-    icon,
     isHorizontal,
+    button,
+    className,
 }: NsLargeCardProps) {
     return (
-        <CardContainer role="large-card" component="div" data-testid="large-card" isHorizontal={isHorizontal}>
+        <CardContainer
+            className={className}
+            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={buttonVariant}
-                        color="primary"
-                        href={cardLink.href}
-                        fullWidth={false}
-                        darkModeEnabled={false}
-                        endIcon={buttonVariant !== 'contained' ? <NsIcon className="icon" name={icon} /> : null}
-                    >
-                        {cardLink.title}
-                    </NsButton>
-                )}
+                {button ? <CardButton {...button} /> : null}
             </div>
         </CardContainer>
     );

package/src/common/card/NsMediumCard.tsx

@@ -1,16 +1,17 @@
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
-import { NsButton, NsIcon, NsIconNameType, NsImage, NsTypography } from '..';
+import { NsImage, NsTypography } from '../';
+import CardButton from './CardButton';
+import { NsCardButton } from './types';
 
 type NsMediumCardProps = {
     title: string;
     titleFontWeight?: 'bold' | 'normal' | 'light';
     subtitle: string;
-    icon?: NsIconNameType;
     backgroundImageUrl: string;
     backgroundImageAlt: string;
-    buttonVariant: 'text' | 'outlined' | 'contained';
-    cardLink: { href: string; title: string };
+    button?: NsCardButton;
+    className?: string;
 };
 
 const CardContainer = styled(Box)(() => {
@@ -37,10 +38,8 @@ const CardContainer = styled(Box)(() => {
             fontSize: '20px',
             marginTop: '10px',
         },
-        '.action-link': {
+        '.cta': {
             marginTop: '10px',
-            fontSize: '14px',
-            alignSelf: 'start',
         },
     };
 });
@@ -51,28 +50,18 @@ export default function NsMediumCard({
     subtitle,
     backgroundImageUrl,
     backgroundImageAlt,
-    cardLink,
-    icon,
-    buttonVariant,
+    button,
+    className,
 }: NsMediumCardProps) {
     return (
-        <CardContainer role="medium-card" component="div" data-testid="medium-card">
+        <CardContainer className={className} role="medium-card" component="div" data-testid="medium-card">
             <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="image" />
             <div className="content">
                 <NsTypography variant="h5" color="primary" className="title" weight={titleFontWeight}>
                     {title}
                 </NsTypography>
                 <article className="subtitle">{subtitle}</article>
-                <NsButton
-                    className="action-link"
-                    variant={buttonVariant}
-                    color="primary"
-                    href={cardLink.href}
-                    fullWidth={false}
-                    endIcon={buttonVariant !== 'contained' ? <NsIcon className="icon" name={icon} /> : null}
-                >
-                    {cardLink.title}
-                </NsButton>
+                {button ? <CardButton {...button} /> : null}
             </div>
         </CardContainer>
     );

package/src/common/card/NsPost.tsx

@@ -1,6 +1,5 @@
 import Box from '@mui/material/Box';
 import { NsImage } from '../';
-import { AdditionalProps } from '../common.types';
 import { styled } from '@nuskin/foundation-theme';
 
 type NsPostProps = {
@@ -8,13 +7,14 @@ type NsPostProps = {
     body: string;
     backgroundImageUrl: string;
     backgroundImageAlt: string;
-} & AdditionalProps;
+    className?: string;
+};
 
 const CardContainer = styled(Box)(() => {
     return {
         backgroundClip: 'border-box',
         display: 'flex',
-        flexDirection: 'column' as 'column', // https://github.com/cssinjs/jss/issues/1344
+        flexDirection: 'column' as 'column',
         wordWrap: 'break-word' as 'break-word',
         position: 'relative',
         overflow: 'hidden',
@@ -41,9 +41,9 @@ const CardContainer = styled(Box)(() => {
     };
 });
 
-const NsPost = ({ text, body, backgroundImageUrl, backgroundImageAlt, additionalProps }: NsPostProps) => {
+const NsPost = ({ text, body, backgroundImageUrl, backgroundImageAlt, className }: NsPostProps) => {
     return (
-        <CardContainer data-testid={additionalProps?.testid}>
+        <CardContainer className={className} data-testid="post-card">
             <div className="image">
                 <NsImage height="auto" width="100%" alt={backgroundImageAlt} src={backgroundImageUrl} />
             </div>

package/src/common/card/NsSmallFullCard.tsx

@@ -1,13 +1,16 @@
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
-import { NsImage, NsLink } from '../';
+import { NsImage } from '../';
+import { NsCardButton } from './types';
+import CardButton from './CardButton';
 
 type NsSmallFullCardProps = {
     title: string;
     subtitle: string;
     backgroundImageUrl: string;
     backgroundImageAlt: string;
-    cardLink: { href: string; title: string };
+    button?: NsCardButton;
+    className?: string;
 };
 
 const CardContainer = styled(Box)(() => {
@@ -50,19 +53,8 @@ const CardContainer = styled(Box)(() => {
             fontWeight: '400',
             marginTop: '20px',
         },
-        '.action-link': {
-            display: 'flex',
-            justifyContent: 'center',
-            backgroundColor: '#252525',
-            color: '#fff',
+        '.cta': {
             marginTop: '20px',
-            borderRadius: '4px',
-            padding: '10px',
-            width: '70%',
-            ':hover': {
-                textDecoration: 'none',
-                backgroundColor: '#3e3e3e',
-            },
         },
     };
 });
@@ -72,18 +64,17 @@ export default function NsSmallFullCard({
     subtitle,
     backgroundImageUrl,
     backgroundImageAlt,
-    cardLink,
+    button,
+    className,
 }: NsSmallFullCardProps) {
     return (
-        <CardContainer role="small-full-card" component="div" data-testid="small-full-card">
+        <CardContainer className={className} 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>
+                {button ? <CardButton {...button} /> : null}
             </div>
         </CardContainer>
     );