@nuskin/foundation-ui-components 1.16.0 → 1.18.0

package/package.json

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

@@ -1,6 +1,6 @@
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
-import { NsImage } from '../';
+import { NsImage, NsTypography } from '../';
 
 type NsAwardCardProps = {
     title: string;
@@ -29,25 +29,13 @@ const CardContainer = styled(Box)(() => {
             flexDirection: 'column',
             textAlign: 'center',
             alignItems: 'center',
+            marginTop: '25px',
         },
-        '.title': {
-            fontSize: '16px',
-            fontWeight: 'bold',
-            marginTop: '30px',
-        },
-        '.awardName': {
-            fontSize: '16px',
-            fontWeight: '400',
-            marginTop: '20px',
-        },
-        '.mediaOutlet': {
-            fontSize: '11px',
-            fontWeight: '400',
+        '.content-text': {
             marginTop: '20px',
         },
         '.action-link': {
             marginTop: '10px',
-            fontSize: '14px',
             alignSelf: 'start',
         },
     };
@@ -65,9 +53,15 @@ export default function NsAwardCard({
         <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>
-                <article className="awardName">{awardName}</article>
-                <article className="mediaOutlet">{mediaOutlet}</article>
+                <NsTypography weight='normal' className="title" variant="h5">
+                    {title}
+                </NsTypography>
+                <NsTypography className="content-text" variant="body-l">
+                    {awardName}
+                </NsTypography>
+                <NsTypography className="content-text" variant="body-l">
+                    {mediaOutlet}
+                </NsTypography>
             </div>
         </CardContainer>
     );

package/src/common/card/NsBrandCard.tsx

@@ -38,7 +38,6 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ size }) => {
         flexDirection: 'column',
         '.brand-title': {
             marginTop: '15px',
-            fontSize: '20px',
             display: 'inline-block',
             wordBreak: 'break-word',
         },
@@ -75,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/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 = {
@@ -22,16 +22,14 @@ const CardContainer = styled(Box)(() => {
         width: '210px',
         backgroundColor: '#fff',
         '.content': {
-            padding: '10px',
+            paddingTop: '10px',
             display: 'flex',
             flexDirection: 'column',
             minHeight: '80px',
             justifyContent: 'space-between',
         },
         '.body-title': {
-            fontSize: '18px',
             marginBottom: '5px',
-            fontWeight: 600,
             display: '-webkit-box',
             '-webkit-box-orient': 'vertical',
             '-webkit-line-clamp': '3',
@@ -39,7 +37,6 @@ const CardContainer = styled(Box)(() => {
             textOverflow: 'ellipsis',
         },
         '.body-text': {
-            fontSize: '12px',
             color: '#8C8C8C',
             marginBottom: '5px',
         },
@@ -53,8 +50,8 @@ const NsPost = ({ text, body, backgroundImageUrl, backgroundImageAlt, className
                 <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/carousal/CarousalControl.tsx

@@ -14,8 +14,6 @@ This component is visible over the carousal and it has prev and next buttons and
 const Wrapper = styled.div`
     display: flex;
     justify-content: flex-end;
-    padding: 0 30px;
-    margin: 30px 20px;
 `;
 const InnerWrapper = styled.div`
     display: flex;
@@ -28,7 +26,7 @@ const CarousalControl = ({ next, prev, viewAllUrl, viewAllLabel }: CarousalContr
             <InnerWrapper>
                 {viewAllUrl ? (
                     <NsLink href={viewAllUrl} underlineOnHover={false}>
-                        <NsTypography decoration="underline" variant={'h5'}>
+                        <NsTypography decoration="underline" variant="body-l">
                             {viewAllLabel}
                         </NsTypography>
                     </NsLink>

package/src/common/carousal/IconWrapper.tsx

@@ -18,7 +18,7 @@ const Wrapper = styled(
         border: `2px solid ${strokeColor}`,
         borderRadius: '3px',
         cursor: 'pointer',
-        padding: '6px 10px',
+        padding: '9px',
         boxSizing: 'content-box',
     };
 });

package/src/common/carousal/NsCarousal.tsx

@@ -11,7 +11,7 @@ import 'slick-carousel/slick/slick.css';
 
 const SlickContainer = styled(Box)(() => {
     return {
-        padding: '20px 0 50px',
+        padding: '30px 0 60px',
         '.slick-slide': {
             display: 'flex',
             justifyContent: 'center',
@@ -55,7 +55,6 @@ export default function NsCarousal({
             ) : null}
             <Slider {...{ ...defaultCarousalSettings, ...settings }} ref={sliderRef as any}>
                 {entries.map((entry, index) => {
-                    
                     return renderEntry(entry, index);
                 })}
             </Slider>

package/src/common/cart-icon/NsCartIcon.tsx

@@ -1,12 +1,15 @@
+import { IconButton } from '@mui/material';
 import { NsIcon } from '../icon';
 import { StyledBadge } from './NsCartIcon.styled';
 import { NsCartIconProps } from './types.d';
 
 const NsCartIcon = ({ itemCount = 0, size = 'large', color = 'primary', maxItemCount = 999 }: NsCartIconProps) => {
     return (
-        <StyledBadge badgeContent={itemCount} max={maxItemCount} bgcolor={color} showZero>
-            <NsIcon testId="cart-badge-icon" name="cart" size={size} color={color} />
-        </StyledBadge>
+        <IconButton aria-label="cart">
+            <StyledBadge badgeContent={itemCount} max={maxItemCount} bgcolor={color} showZero>
+                <NsIcon testId="cart-badge-icon" name="cart" size={size} color={color} />
+            </StyledBadge>
+        </IconButton>
     );
 };