@nuskin/foundation-ui-components 1.9.2 → 1.9.4

package/src/common/card/NsHeroCardLevel1.tsx

@@ -1,29 +1,35 @@
-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;
+    imagePosition?: 'top' | 'bottom';
+};
+
+const CardContainer = styled((props: any) => <Box {...props} />)(({ imagePosition }) => {
+    const imageDirection = imagePosition === 'top' ? 'column' : 'column-reverse';
 
-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',
+        width: '100%',
+        height: '500px',
+        flexDirection: 'row',
         '.content': {
             width: '50%',
-            height: '100%',
+            minWidth: '300px',
+            height: '500px',
             padding: '50px',
             paddingLeft: '100px',
             display: 'flex',
@@ -33,10 +39,8 @@ const CardContainer = styled(Box)(() => {
             left: 0,
             boxSizing: 'border-box',
         },
-        '.image': {
-            width: 'auto',
-            height: '100%',
-            display: 'block',
+        '.bg-image': {
+            objectFit: 'cover',
         },
         '.body-title': {
             fontSize: '36px',
@@ -48,29 +52,19 @@ 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',
+            '.content': {
+                paddingLeft: '20px',
+            },
+        },
+        '@media (max-width: 430px)': {
             height: 'auto',
             backgroundColor: '#edece9',
+            flexDirection: imageDirection,
             '.content': {
+                height: 'auto',
                 position: 'static',
                 width: '100%',
                 padding: '20px',
@@ -79,28 +73,23 @@ const CardContainer = styled(Box)(() => {
     };
 });
 
-const NsHeroCardLevel1 = ({
-    text,
-    body,
-    cardLink,
+export default function NsHeroCardLevel1({
+    cardTitle,
+    cardDescription,
     backgroundImageUrl,
     backgroundImageAlt,
-    onClick,
-    additionalProps,
-}: NsHeroCardLevel1Props) => {
+    button,
+    className,
+    imagePosition = 'top',
+}: NsHeroCardLevel1Props) {
     return (
-        <CardContainer data-testid={additionalProps?.testid} onClick={onClick}>
-            <div className="image">
-                <NsImage height={'auto'} width={'100%'} alt={backgroundImageAlt} src={backgroundImageUrl} />
-            </div>
+        <CardContainer className={className} data-testid="hero-card-level-1" imagePosition={imagePosition}>
+            <NsImage variant="fill" alt={backgroundImageAlt} src={backgroundImageUrl} className="bg-image" />
             <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>
     );
-};
-export default NsHeroCardLevel1;
+}

package/src/common/card/NsHeroCardLevel2.tsx

@@ -1,28 +1,29 @@
-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',
-        height: 'auto',
+        height: '250px',
+        width: '100%',
         '.content': {
             height: '100%',
             padding: '50px',
@@ -33,10 +34,8 @@ const CardContainer = styled(Box)(() => {
             left: 0,
             boxSizing: 'border-box',
         },
-        '.image': {
-            width: 'auto',
-            height: '100%',
-            display: 'block',
+        '.bg-image': {
+            objectFit: 'cover',
         },
         '.brand-container': {
             backgroundColor: '#fff',
@@ -45,80 +44,42 @@ const CardContainer = styled(Box)(() => {
             paddingRight: '10px',
         },
         '.body-title': {
-            fontSize: '36px',
+            fontSize: '26px',
             lineHeight: '44px',
             marginBottom: '5px',
         },
         '.body-text': {
-            fontSize: '18px',
+            fontSize: '12px',
             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)': {
+        '@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,
+    brandName,
+    cardTitle,
+    cardDescription,
     backgroundImageUrl,
     backgroundImageAlt,
-    additionalProps,
-    icon,
-    onClick,
+    button,
+    className,
 }: NsHeroCardLevel2Props) => {
     return (
-        <CardContainer data-testid={additionalProps?.testid} onClick={onClick}>
-            <div className="image">
-                <NsImage height={'auto'} width={'100%'} alt={backgroundImageAlt} src={backgroundImageUrl} />
-            </div>
+        <CardContainer className={className} data-testid="hero-card-level-2">
+            <NsImage variant="fill" alt={backgroundImageAlt} src={backgroundImageUrl} className="bg-image" />
             <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,32 +1,35 @@
 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 }) => {
-    let width = '375px',
+const CardContainer = styled((props: any) => <Box {...props} />)(({ isHorizontal, matches }) => {
+    let width = '450px',
         paddingLeft = '0px',
         justifyContent,
         fontSizeSub = '16px',
-        fontSizeTitle = '26px';
+        fontSizeTitle = '26px',
+        imageWidth = '100%';
 
     if (isHorizontal) {
-        width = 'unset';
+        width = '600px';
         paddingLeft = '30px';
         justifyContent = 'center';
         fontSizeSub = '16px';
-        fontSizeTitle = '36px';
+        fontSizeTitle = '26px';
+        imageWidth = '50%';
     }
     let direction = isHorizontal ? ('row' as 'row') : ('column' as 'column');
 
@@ -35,10 +38,10 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ isHorizontal
         flexDirection: direction,
         position: 'relative',
         width,
-        '.image': {
-            width: '375px',
-            height: 'auto',
+        '.bg-image': {
             objectFit: 'cover',
+            height: '220px',
+            width: imageWidth,
         },
         '.content': {
             display: 'flex',
@@ -57,26 +60,10 @@ 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',
+        '@media (max-width: 768px)': {
+            width: '100%',
         },
     };
 });
@@ -86,39 +73,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}>
-            <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="image" />
+        <CardContainer
+            className={className}
+            role="large-card"
+            component="div"
+            data-testid="large-card"
+            isHorizontal={isHorizontal}
+        >
+            <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="bg-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,30 +7,36 @@ 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',
-        height: 'auto',
-        width: '200px',
+        height: '350px',
+        width: '210px',
         backgroundColor: '#fff',
         '.content': {
             padding: '10px',
             display: 'flex',
             flexDirection: 'column',
-            minHeight: '150px',
+            minHeight: '80px',
             justifyContent: 'space-between',
         },
         '.body-title': {
             fontSize: '18px',
             marginBottom: '5px',
             fontWeight: 600,
+            display: '-webkit-box',
+            '-webkit-box-orient': 'vertical',
+            '-webkit-line-clamp': '3',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
         },
         '.body-text': {
             fontSize: '12px',
@@ -41,9 +46,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,21 +1,24 @@
 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)(() => {
     return {
         backgroundColor: '#fff',
         display: 'flex',
-        height: '320px',
-        width: '375px',
+        height: '275px',
+        width: '250px',
         position: 'relative',
         '.image': {
             width: '100%',
@@ -46,23 +49,12 @@ const CardContainer = styled(Box)(() => {
         },
         '.title': {
             color: '#fff',
-            fontSize: '26px',
+            fontSize: '22px',
             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>
     );