@nuskin/foundation-ui-components 1.20.0 → 1.20.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.20.0",
+    "version": "1.20.1",
     "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,6 +51,7 @@ export const StyledButton = styled(MUIButton)<NsButtonProps>(
             },
             ...buttonStyles,
             ...sizeStyle,
+            textTransform: 'none',
         };
     }
 );

package/src/common/card/CardButton.tsx

@@ -1,5 +1,18 @@
+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,
@@ -14,21 +27,27 @@ const CardButton = ({
     if (showButton && url) {
         return (
             <div className="cta">
-                <NsButton
-                    href={url}
-                    color={buttonColor}
-                    variant={buttonVariant}
-                    fullWidth={fullWidth}
-                    endIcon={
-                        showArrowWithText && buttonVariant === 'text' ? (
+                {buttonVariant === 'text' ? (
+                    <ButtonTextVariant href={url}>
+                        {buttonText}
+                        {showArrowWithText ? (
                             <NsIcon name="arrowRight" size="small" color="primary" />
                         ) : endIcon ? (
-                            <NsIcon name={endIcon} color={buttonColor} />
-                        ) : null
-                    }
-                >
-                    {buttonText}
-                </NsButton>
+                            <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>
+                )}
             </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 width, height;
+    let maxWidth, maxHeight;
 
     if (size === 'small') {
-        width = small.width;
-        height = small.height;
+        maxWidth = small.maxWidth;
+        maxHeight = small.maxHeight;
     } else {
-        width = large.width;
-        height = large.height;
+        maxWidth = large.maxWidth;
+        maxHeight = large.maxHeight;
     }
 
     return {
-        width,
+        maxWidth,
         display: 'flex',
         alignItems: 'start',
         justifyContent: 'center',
@@ -38,6 +38,9 @@ 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',
         },
@@ -46,13 +49,9 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ size }) => {
                 opacity: '0.7',
             },
         },
-        '.cta': {
-            marginTop: '15px',
-            width: '100%',
-        },
         '.image': {
-            width,
-            height,
+            maxWidth,
+            maxHeight,
             backgroundSize: 'cover',
             backgroundPosition: 'center',
         },
@@ -74,7 +73,7 @@ export default function NsBrandCard({
                 </NsBrandWrapper>
             </NsBgCard>
             {title ? (
-                <NsTypography weight='normal' variant="h5" className="brand-title">
+                <NsTypography variant="h3" className="brand-title">
                     {title}
                 </NsTypography>
             ) : null}

package/src/common/card/NsPost.tsx

@@ -1,5 +1,5 @@
 import Box from '@mui/material/Box';
-import { NsImage, NsTypography } from '../';
+import { NsImage } from '../';
 import { styled } from '@nuskin/foundation-theme';
 
 type NsPostProps = {
@@ -18,36 +18,40 @@ 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': {
-            paddingTop: '10px',
+            padding: '20px',
             display: 'flex',
             flexDirection: 'column',
-            minHeight: '80px',
-            justifyContent: 'space-between',
-            padding: '20px',
+            minHeight: '92px',
+            maxHeight: '92px',
+            justifyContent: 'space-around',
         },
         '.body-title': {
-            marginBottom: '5px',
+            fontSize: '18px',
+            fontWeight: 600,
             display: '-webkit-box',
             '-webkit-box-orient': 'vertical',
-            '-webkit-line-clamp': '3',
+            '-webkit-line-clamp': '1',
             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',
         },
     };
 });
@@ -56,15 +60,11 @@ const NsPost = ({ text, body, backgroundImageUrl, backgroundImageAlt, className
     return (
         <CardContainer className={className} data-testid="post-card">
             <div className="image">
-                <NsImage height="auto" width="100%" alt={backgroundImageAlt} src={backgroundImageUrl} />
+                <NsImage height={'100%'} width={'auto'} alt={backgroundImageAlt} src={backgroundImageUrl} />
             </div>
             <div className="content">
-                <NsTypography weight="normal" className="body-title" variant="h5">
-                    {text}
-                </NsTypography>
-                <NsTypography className="body-text" variant="body-l">
-                    {body}
-                </NsTypography>
+                <article className="body-title">{text}</article>
+                <article className="body-text">{body}</article>
             </div>
         </CardContainer>
     );

package/src/common/card/NsSmallFullCard.tsx

@@ -17,8 +17,9 @@ const CardContainer = styled(Box)(() => {
     return {
         backgroundColor: '#fff',
         display: 'flex',
-        height: '275px',
-        width: '250px',
+        maxHeight: '320px',
+        maxWidth: '375px',
+        overflow: 'hidden',
         position: 'relative',
         '.image': {
             width: '100%',
@@ -49,12 +50,15 @@ const CardContainer = styled(Box)(() => {
         },
         '.title': {
             color: '#fff',
-            fontSize: '22px',
+            fontSize: '26px',
             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: {
-        width: '180px',
-        height: '200px',
+        maxWidth: '160px',
+        maxHeight: '179px',
     },
     large: {
-        width: '220px',
-        height: '250px',
+        maxWidth: '190px',
+        maxHeight: '211px',
     },
 };
 

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(`
-          width: 180px;
+          maxWidth: 160px;
         `);
         expect(nsBgCardElement).toHaveStyle(`
-          width: 180px;
-          height: 200px;
+          maxWidth: 160px;
+          maxHeight: 179px;
         `);
     });
 
@@ -71,7 +71,7 @@ describe('NsBrandCard component', () => {
         const cardContainer = screen.getByTestId('brand-card') as HTMLElement;
         const computedStyles = window.getComputedStyle(cardContainer);
 
-        expect(computedStyles.width).toBe('220px');
+        expect(computedStyles.maxWidth).toBe('190px');
     });
 
     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.width).toBe('220px');
+        expect(computedStyles.maxWidth).toBe('190px');
     });
 });

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

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

package/src/common/dropdown/NsDropdown.styled.tsx

@@ -36,7 +36,7 @@ export const DropdownButton = styled.div`
 
 export const DropdownList = styled.div<{ borderColor: FoundationTheme.PaletteColors }>`
     position: absolute;
-    z-index: 100;
+    z-index: 999;
     border: 1px solid ${({ borderColor, theme }) => paletteColor(borderColor)({ theme })};
     margin-top: 10px;
     width: 100%;