@nuskin/foundation-ui-components 1.19.3 → 1.19.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.19.3",
+    "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/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

@@ -18,8 +18,8 @@ const CardContainer = styled(Box)(() => {
         wordWrap: 'break-word' as 'break-word',
         position: 'relative',
         overflow: 'hidden',
-        height: '350px',
-        width: '210px',
+        height: 'auto',
+        maxWidth: '165px',
         backgroundColor: '#fff',
         '.content': {
             paddingTop: '10px',
@@ -27,6 +27,7 @@ const CardContainer = styled(Box)(() => {
             flexDirection: 'column',
             minHeight: '80px',
             justifyContent: 'space-between',
+            padding: '20px',
         },
         '.body-title': {
             marginBottom: '5px',
@@ -35,10 +36,18 @@ const CardContainer = styled(Box)(() => {
             '-webkit-line-clamp': '3',
             overflow: 'hidden',
             textOverflow: 'ellipsis',
+            fontSize: '18px',
+            fontWeight: 600,
+            lineHeight: '22px',
+            fontFamily: 'Inter',
         },
         '.body-text': {
             color: '#8C8C8C',
-            marginBottom: '5px',
+            margin: '0px',
+            fontSize: '16px',
+            fontWeight: 600,
+            lineHeight: '16px',
+            fontFamily: 'Inter',
         },
     };
 });
@@ -50,8 +59,12 @@ const NsPost = ({ text, body, backgroundImageUrl, backgroundImageAlt, className
                 <NsImage height="auto" width="100%" 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>
+                <NsTypography weight="normal" className="body-title" variant="h5">
+                    {text}
+                </NsTypography>
+                <NsTypography className="body-text" variant="body-l">
+                    {body}
+                </NsTypography>
             </div>
         </CardContainer>
     );