@nuskin/foundation-ui-components 1.19.4-cx130-1001.1 → 1.19.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.19.4-cx130-1001.1",
+    "version": "1.19.4",
     "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/button/NsButton.styled.tsx

@@ -51,7 +51,6 @@ export const StyledButton = styled(MUIButton)<NsButtonProps>(
             },
             ...buttonStyles,
             ...sizeStyle,
-            textTransform: 'none',
         };
     }
 );

package/src/common/card/CardButton.tsx

@@ -1,18 +1,5 @@
-import { Button } from '@mui/material';
 import { NsButton, NsIcon } from '../';
 import { NsCardButton } from './types';
-import { styled } from '@nuskin/foundation-theme';
-
-const ButtonTextVariant = styled(Button)(() => {
-    return {
-        padding: 0,
-        borderBottom: '1px solid black',
-        borderRadius: 0,
-        textTransform: 'none',
-        fontSize: '14px',
-        fontWeight: 600,
-    };
-});
 
 const CardButton = ({
     url,
@@ -27,27 +14,21 @@ const CardButton = ({
     if (showButton && url) {
         return (
             <div className="cta">
-                {buttonVariant === 'text' ? (
-                    <ButtonTextVariant href={url}>
-                        {buttonText}
-                        {showArrowWithText ? (
+                <NsButton
+                    href={url}
+                    color={buttonColor}
+                    variant={buttonVariant}
+                    fullWidth={fullWidth}
+                    endIcon={
+                        showArrowWithText && buttonVariant === 'text' ? (
                             <NsIcon name="arrowRight" size="small" color="primary" />
                         ) : endIcon ? (
-                            <NsIcon name={endIcon} size="small" color="primary" />
-                        ) : null}
-                    </ButtonTextVariant>
-                ) : (
-                    <NsButton
-                        href={url}
-                        color={buttonColor}
-                        variant={buttonVariant}
-                        fullWidth={fullWidth}
-                        endIcon={endIcon ? <NsIcon name={endIcon} color={buttonColor} /> : null}
-                        className="cta-text"
-                    >
-                        {buttonText}
-                    </NsButton>
-                )}
+                            <NsIcon name={endIcon} color={buttonColor} />
+                        ) : null
+                    }
+                >
+                    {buttonText}
+                </NsButton>
             </div>
         );
     }

package/src/common/card/NsBrandCard.tsx

@@ -19,18 +19,18 @@ type NsBrandCardProps = {
 
 const CardContainer = styled((props: any) => <Box {...props} />)(({ size }) => {
     const { small, large } = cardSizes;
-    let maxWidth, maxHeight;
+    let width, height;
 
     if (size === 'small') {
-        maxWidth = small.maxWidth;
-        maxHeight = small.maxHeight;
+        width = small.width;
+        height = small.height;
     } else {
-        maxWidth = large.maxWidth;
-        maxHeight = large.maxHeight;
+        width = large.width;
+        height = large.height;
     }
 
     return {
-        maxWidth,
+        width,
         display: 'flex',
         alignItems: 'start',
         justifyContent: 'center',
@@ -38,9 +38,6 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ size }) => {
         flexDirection: 'column',
         '.brand-title': {
             marginTop: '15px',
-            fontSize: '18px',
-            fontWeight: 600,
-            lineHeight: '26px',
             display: 'inline-block',
             wordBreak: 'break-word',
         },
@@ -49,9 +46,13 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ size }) => {
                 opacity: '0.7',
             },
         },
+        '.cta': {
+            marginTop: '15px',
+            width: '100%',
+        },
         '.image': {
-            maxWidth,
-            maxHeight,
+            width,
+            height,
             backgroundSize: 'cover',
             backgroundPosition: 'center',
         },
@@ -73,7 +74,7 @@ export default function NsBrandCard({
                 </NsBrandWrapper>
             </NsBgCard>
             {title ? (
-                <NsTypography variant="h3" className="brand-title">
+                <NsTypography weight='normal' variant="h5" className="brand-title">
                     {title}
                 </NsTypography>
             ) : null}

package/src/common/card/NsCheckoutCard.tsx

@@ -15,7 +15,7 @@ const CardContainer = styled(Box)(() => {
     return {
         backgroundColor: '#fff',
         display: 'flex',
-        width: '345px',
+        maxWidth: '345px',
         height: 'auto',
         border: '2px solid #B2B2B2',
         borderRadius: '2px',

package/src/common/card/NsHeroCardLevel1.tsx

@@ -23,8 +23,8 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ imagePositio
         wordWrap: 'break-word' as 'break-word',
         position: 'relative',
         overflow: 'hidden',
-        width: '100%',
-        height: '500px',
+        maxWidth: '820px',
+        height: '532px',
         flexDirection: 'row',
         '.content': {
             width: '50%',

package/src/common/card/NsHeroCardLevel2.tsx

@@ -22,8 +22,8 @@ const CardContainer = styled(Box)(() => {
         wordWrap: 'break-word' as 'break-word',
         position: 'relative',
         overflow: 'hidden',
-        height: '250px',
-        width: '100%',
+        height: '236px',
+        maxWidth: '536px',
         '.content': {
             height: '100%',
             padding: '50px',

package/src/common/card/NsIconText.tsx

@@ -16,7 +16,7 @@ const CardContainer = styled(Box)(() => {
         position: 'relative',
         overflow: 'hidden',
         height: 'auto',
-        width: '222px',
+        maxWidth: '222px',
         backgroundColor: '#F5F5F5',
         padding: '20px',
         justifyContent: 'center',

package/src/common/card/NsPost.tsx

@@ -1,5 +1,5 @@
 import Box from '@mui/material/Box';
-import { NsImage } from '../';
+import { NsImage, NsTypography } from '../';
 import { styled } from '@nuskin/foundation-theme';
 
 type NsPostProps = {
@@ -18,40 +18,36 @@ const CardContainer = styled(Box)(() => {
         wordWrap: 'break-word' as 'break-word',
         position: 'relative',
         overflow: 'hidden',
+        height: 'auto',
         maxWidth: '165px',
-        height: '272px',
         backgroundColor: '#fff',
-        '.image': {
-            height: '180px',
-            overflow: 'hidden',
-            objectFit: 'contain',
-        },
         '.content': {
-            padding: '20px',
+            paddingTop: '10px',
             display: 'flex',
             flexDirection: 'column',
-            minHeight: '92px',
-            maxHeight: '92px',
-            justifyContent: 'space-around',
+            minHeight: '80px',
+            justifyContent: 'space-between',
+            padding: '20px',
         },
         '.body-title': {
-            fontSize: '18px',
-            fontWeight: 600,
+            marginBottom: '5px',
             display: '-webkit-box',
             '-webkit-box-orient': 'vertical',
-            '-webkit-line-clamp': '1',
+            '-webkit-line-clamp': '3',
             overflow: 'hidden',
             textOverflow: 'ellipsis',
+            fontSize: '18px',
+            fontWeight: 600,
+            lineHeight: '22px',
+            fontFamily: 'Inter',
         },
         '.body-text': {
-            fontSize: '12px',
-            fontWeight: 700,
-            display: '-webkit-box',
-            '-webkit-box-orient': 'vertical',
-            '-webkit-line-clamp': '1',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
             color: '#8C8C8C',
+            margin: '0px',
+            fontSize: '16px',
+            fontWeight: 600,
+            lineHeight: '16px',
+            fontFamily: 'Inter',
         },
     };
 });
@@ -60,11 +56,15 @@ const NsPost = ({ text, body, backgroundImageUrl, backgroundImageAlt, className
     return (
         <CardContainer className={className} data-testid="post-card">
             <div className="image">
-                <NsImage height={'100%'} width={'auto'} alt={backgroundImageAlt} src={backgroundImageUrl} />
+                <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>
+                <NsTypography weight="normal" className="body-title" variant="h5">
+                    {text}
+                </NsTypography>
+                <NsTypography className="body-text" variant="body-l">
+                    {body}
+                </NsTypography>
             </div>
         </CardContainer>
     );

package/src/common/card/NsSmallFullCard.tsx

@@ -17,9 +17,8 @@ const CardContainer = styled(Box)(() => {
     return {
         backgroundColor: '#fff',
         display: 'flex',
-        maxHeight: '320px',
-        maxWidth: '375px',
-        overflow: 'hidden',
+        height: '275px',
+        width: '250px',
         position: 'relative',
         '.image': {
             width: '100%',
@@ -50,15 +49,12 @@ const CardContainer = styled(Box)(() => {
         },
         '.title': {
             color: '#fff',
-            fontSize: '26px',
+            fontSize: '22px',
             fontWeight: '400',
             marginTop: '20px',
         },
         '.cta': {
             marginTop: '20px',
-            maxWidth: '208px',
-            borderRadius: '4px',
-            overflow: 'hidden',
         },
     };
 });

package/src/common/card/cardSizes.ts

@@ -1,11 +1,11 @@
 const cardSizes = {
     small: {
-        maxWidth: '160px',
-        maxHeight: '179px',
+        width: '180px',
+        height: '200px',
     },
     large: {
-        maxWidth: '190px',
-        maxHeight: '211px',
+        width: '220px',
+        height: '250px',
     },
 };
 

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

@@ -58,11 +58,11 @@ describe('NsBrandCard component', () => {
         const cardContainer = container.firstChild;
         const nsBgCardElement = cardContainer?.firstChild;
         expect(cardContainer).toHaveStyle(`
-          maxWidth: 160px;
+          width: 180px;
         `);
         expect(nsBgCardElement).toHaveStyle(`
-          maxWidth: 160px;
-          maxHeight: 179px;
+          width: 180px;
+          height: 200px;
         `);
     });
 
@@ -71,7 +71,7 @@ describe('NsBrandCard component', () => {
         const cardContainer = screen.getByTestId('brand-card') as HTMLElement;
         const computedStyles = window.getComputedStyle(cardContainer);
 
-        expect(computedStyles.maxWidth).toBe('190px');
+        expect(computedStyles.width).toBe('220px');
     });
 
     it('7. renders with default styles when size is not provided', () => {
@@ -79,6 +79,6 @@ describe('NsBrandCard component', () => {
         const cardContainer = screen.getByTestId('brand-card') as HTMLElement;
         const computedStyles = window.getComputedStyle(cardContainer);
 
-        expect(computedStyles.maxWidth).toBe('190px');
+        expect(computedStyles.width).toBe('220px');
     });
 });

package/src/common/card/stories/NsSmallFullCard.stories.tsx

@@ -27,7 +27,6 @@ export const Default: Story = {
             buttonVariant: 'contained',
             buttonColor: 'primary',
             url: '#',
-            fullWidth: true,
         },
     },
 };