@nuskin/foundation-ui-components 1.30.0 → 1.30.2

package/package.json

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

@@ -6,16 +6,14 @@ import { styled } from '@nuskin/foundation-theme';
 import { NsButton, NsIcon } from '../';
 import { NsCardButton } from './types';
 
-const ButtonTextVariant = styled(Button)(() => {
-    return {
-        padding: 0,
-        borderBottom: '1px solid black',
-        borderRadius: 0,
-        textTransform: 'none',
-        fontSize: '14px',
-        fontWeight: 600,
-    };
-});
+const ButtonTextVariant = styled(Button)`
+    padding: 0;
+    border-bottom: 1px solid black;
+    border-radius: 0;
+    text-transform: none;
+    font-size: 14px;
+    font-weight: 600;
+`;
 
 const CardButton = ({
     url,

package/src/common/card/NsAwardCard.tsx

@@ -15,35 +15,33 @@ type NsAwardCardProps = {
     className?: string;
 };
 
-const CardContainer = styled(Box)(() => {
-    return {
-        display: 'flex',
-        flexDirection: 'column',
-        position: 'relative',
-        alignItems: 'center',
-        width: '160px',
-        height: 'auto',
-        '.image': {
-            width: '160px',
-            height: 'auto',
-            objectFit: 'cover',
-        },
-        '.content': {
-            display: 'flex',
-            flexDirection: 'column',
-            textAlign: 'center',
-            alignItems: 'center',
-            marginTop: '25px',
-        },
-        '.content-text': {
-            marginTop: '20px',
-        },
-        '.action-link': {
-            marginTop: '10px',
-            alignSelf: 'start',
-        },
-    };
-});
+const CardContainer = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    align-items: center;
+    width: 160px;
+    height: auto;
+    .image {
+        width: 160px;
+        height: auto;
+        object-fit: cover;
+    }
+    .content {
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        align-items: center;
+        margin-top: 25px;
+    }
+    .content-text: {
+        margin-top: 20px;
+    }
+    .action-link {
+        margin-top: 10px;
+        align-self: start;
+    },
+`;
 
 export default function NsAwardCard({
     title,

package/src/common/card/NsBrandWrapper.tsx

@@ -3,24 +3,22 @@ import { PropsWithChildren, ReactElement } from 'react';
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
 
-const Wrapper = styled(Box)(() => {
-    return {
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        width: '100%',
-        height: '100%',
-        zIndex: 100,
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        '&:hover': {
-            backgroundColor: 'rgba(0, 0, 0, 0)',
-            '& img': {
-                visibility: 'hidden',
-            },
-        },
-    };
-});
+const Wrapper = styled(Box)`
+    background-color: rgba(0, 0, 0, 0.5);
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    &:hover {
+        background-color: rgba(0, 0, 0, 0);
+        & img {
+            visibility: hidden;
+        }
+    }
+`;
 
 export default function NsBrandWrapper({ children }: PropsWithChildren): ReactElement {
     return <Wrapper className="logo-wrapper">{children}</Wrapper>;

package/src/common/card/NsCheckoutCard.tsx

@@ -13,54 +13,52 @@ type NsCheckoutCardProps = {
     className?: string;
 };
 
-const CardContainer = styled(Box)(() => {
-    return {
-        backgroundColor: '#fff',
-        display: 'flex',
-        maxWidth: '345px',
-        height: 'auto',
-        border: '2px solid #B2B2B2',
-        borderRadius: '2px',
-        '.left-bar': {
-            width: '4px',
-            height: 'auto',
-            backgroundColor: '#22D55C',
-        },
-        '.content': {
-            display: 'flex',
-            flexDirection: 'row',
-            gap: '10px',
-            margin: '10px',
-            width: '100%',
-        },
-        '.text-content': {
-            width: '100%',
-        },
-        '.title': {
-            fontSize: '14px',
-            fontWeight: '700',
-        },
-        '.address': {
-            fontSize: '13px',
-            fontWeight: '400',
-        },
-        '.action-link': {
-            color: '#7123D9',
-            fontSize: '14px',
-            fontWeight: '700',
-            letterSpacing: '0.7',
-        },
-        '.icon-right': {
-            marginLeft: 'auto',
-        },
-        '.icon': {
-            ':hover': {
-                cursor: 'pointer',
-            },
-        },
-    };
-});
-
+const CardContainer = styled(Box)`
+    background-color: #fff;
+    display: flex;
+    max-width: 345px;
+    height: auto;
+    border: 2px solid #B2B2B2;
+    border-radius: 2px;
+    .left-bar {
+        width: 4px;
+        height: auto;
+        background-color: #22D55C;
+    }
+    .content {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        margin: 10px;
+        width: 100%;
+    }
+    .text-content {
+        width: 100%;
+    }
+    .title {
+        font-size: 14px;
+        font-weight: 700;
+    }
+    .address {
+        font-size: 13px;
+        font-weight: 400;
+    }
+    .action-link {
+        color: #7123D9;
+        font-size: 14px;
+        font-weight: 700;
+        letter-spacing: 0.7;
+    }
+    .icon-right {
+        margin-left: auto;
+    }
+    .icon {
+        &:hover {
+            cursor: pointer;
+        }
+    }
+`;
+    
 export default function NsCheckoutCard({ title, icon, linkText, url, className }: NsCheckoutCardProps): ReactElement {
     const [dropdownIcon, setDropdownIcon] = useState(false);
     const handleClick = () => {

package/src/common/card/NsHeroCardLevel2.tsx

@@ -17,52 +17,50 @@ type NsHeroCardLevel2Props = {
     className?: string;
 };
 
-const CardContainer = styled(Box)(() => {
-    return {
-        backgroundClip: 'border-box',
-        display: 'flex',
-        flexDirection: 'row' as 'row',
-        wordWrap: 'break-word' as 'break-word',
-        position: 'relative',
-        overflow: 'hidden',
-        height: '236px',
-        maxWidth: '536px',
-        '.content': {
-            height: '100%',
-            padding: '50px',
-            display: 'flex',
-            flexDirection: 'column' as 'column',
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            boxSizing: 'border-box',
-        },
-        '.bg-image': {
-            objectFit: 'cover',
-        },
-        '.brand-container': {
-            backgroundColor: '#fff',
-            width: 'fit-content',
-            paddingLeft: '10px',
-            paddingRight: '10px',
-        },
-        '.body-title': {
-            fontSize: '26px',
-            lineHeight: '44px',
-            marginBottom: '5px',
-        },
-        '.body-text': {
-            fontSize: '12px',
-            fontWeight: 700,
-            marginBottom: '5px',
-        },
-        '@media (max-width:768px)': {
-            '.content': {
-                padding: '5%',
-            },
-        },
-    };
-});
+const CardContainer = styled(Box)`
+    background-clip: border-box;
+    display: flex;
+    flex-direction: row;
+    word-wrap: break-word;
+    position: relative;
+    overflow: hidden;
+    height: 236px;
+    max-width: 536px;
+    .content {
+        height: 100%;
+        padding: 50px;
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 0;
+        left: 0;
+        box-sizing: border-box;
+    }
+    .bg-image {
+        object-fit: cover;
+    }
+    .brand-container {
+        background-color: #fff;
+        width: fit-content;
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+    .body-title {
+        font-size: 26px;
+        line-height: 44px;
+        margin-bottom: 5px;
+    }
+    .body-text {
+        font-size: 12px;
+        font-weight: 700;
+        margin-bottom: 5px;
+    }
+    @media (max-width:768px) {
+        .content {
+            padding: 5%;
+        }
+    }
+`
 
 const NsHeroCardLevel2 = ({
     brandName,

package/src/common/card/NsIconText.tsx

@@ -9,40 +9,38 @@ type NsIconTextProps = {
     className?: string;
 };
 
-const CardContainer = styled(Box)(() => {
-    return {
-        backgroundClip: 'border-box',
-        display: 'flex',
-        flexDirection: 'column' as 'column',
-        wordWrap: 'break-word' as 'break-word',
-        position: 'relative',
-        overflow: 'hidden',
-        height: 'auto',
-        maxWidth: '222px',
-        backgroundColor: '#F5F5F5',
-        padding: '20px',
-        justifyContent: 'center',
-        gap: '30px',
-        '.icon': {
-            display: 'flex',
-            width: '100%',
-        },
-        '.divider': {
-            width: '182px',
-            height: '1px',
-            background: '#B2B2B2',
-        },
-        '.title': {
-            fontSize: '26px',
-            fontWeight: 400,
-            marginTop: '-10px',
-        },
-        '.text': {
-            fontWeight: 400,
-            fontSize: '14px',
-        },
-    };
-});
+const CardContainer = styled(Box)`
+    background-clip: border-box;
+    display: flex;
+    flex-direction: column;
+    word-wrap: break-word;
+    position: relative;
+    overflow: hidden;
+    height: auto;
+    max-width: 222px;
+    background-color: #F5F5F5;
+    padding: 20px;
+    justify-content: center;
+    gap: 30px;
+    .icon {
+        display: flex;
+        width: 100%;
+    }
+    .divider {
+        width: 182px;
+        height: 1px;
+        background: #B2B2B2;
+    }
+    .title {
+        font-size: 26px;
+        font-weight: 400;
+        margin-top: -10px;
+    }
+    .text {
+        font-weight: 400;
+        font-size: 14px;
+    }
+`;
 
 const Icon = (): ReactElement => {
     return (

package/src/common/card/NsPost.tsx

@@ -13,60 +13,64 @@ type NsPostProps = {
     className?: string;
 };
 
-const CardContainer = styled(Box)(() => {
-    return {
-        backgroundClip: 'border-box',
-        display: 'flex',
-        flexDirection: 'column' as 'column',
-        wordWrap: 'break-word' as 'break-word',
-        position: 'relative',
-        overflow: 'hidden',
-        maxWidth: '165px',
-        height: '272px',
-        backgroundColor: '#fff',
-        '.image': {
-            height: '180px',
-            overflow: 'hidden',
-            objectFit: 'contain',
-        },
-        '.content': {
-            padding: '20px',
-            display: 'flex',
-            flexDirection: 'column',
-            minHeight: '92px',
-            maxHeight: '92px',
-            justifyContent: 'space-around',
-        },
-        '.body-title': {
-            fontSize: '18px',
-            fontWeight: 600,
-            display: '-webkit-box',
-            '-webkit-box-orient': 'vertical',
-            '-webkit-line-clamp': '1',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-        },
-        '.body-text': {
-            fontSize: '12px',
-            fontWeight: 700,
-            display: '-webkit-box',
-            '-webkit-box-orient': 'vertical',
-            '-webkit-line-clamp': '1',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            color: '#8C8C8C',
-        },
-    };
-});
+const CardContainer = styled(Box)`
+    background-clip: border-box;
+    display: flex;
+    flex-direction: column;
+    word-wrap: break-word;
+    position: relative;
+    overflow: hidden;
+    max-width: 165px;
+    height: 272px;
+    background-color: #fff;
+    .image {
+        height: 180px;
+        overflow: hidden;
+        object-fit: contain
+    }
+    .content {
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        min-height: 92px;
+        max-height: 92px;
+        justify-content: space-around
+    }
+    .body-title {
+        font-size: 18px;
+        font-weight: 600;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin: 0
+    }
+    .body-text {
+        font-size: 12px;
+        font-weight: 700;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: #8C8C8C;
+        margin: 0
+    }
+`;
 
 const NsPost = ({ text, body, backgroundImageDetail, className }: NsPostProps): ReactElement => {
     return (
         <CardContainer className={className} data-testid="post-card">
             <BynderMedia className="image" imageDetail={backgroundImageDetail} />
-            <div className="content">
-                <article className="body-title">{text}</article>
-                <article className="body-text">{body}</article>
-            </div>
+            <article className="content">
+                <h2 className="body-title" title={text}>
+                    {text}
+                </h2>
+                <p className="body-text" title={body?.substring(0, 80)}>
+                    {body}
+                </p>
+            </article>
         </CardContainer>
     );
 };

package/src/common/card/NsSmallFullCard.tsx

@@ -16,55 +16,53 @@ type NsSmallFullCardProps = {
     className?: string;
 };
 
-const CardContainer = styled(Box)(() => {
-    return {
-        backgroundColor: '#fff',
-        display: 'flex',
-        maxHeight: '320px',
-        maxWidth: '375px',
-        overflow: 'hidden',
-        position: 'relative',
-        '.image': {
-            width: '100%',
-            height: '100%',
-            objectFit: 'cover',
-        },
-        '.gradientOverlay': {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            background: 'linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);',
-        },
-        '.content': {
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
-            padding: '40px 40px 25px 30px',
-            display: 'flex',
-            flexDirection: 'column',
-        },
-        '.subtitle': {
-            color: '#fff',
-            fontSize: '11px',
-            fontWeight: '400',
-            marginTop: 'auto',
-        },
-        '.title': {
-            color: '#fff',
-            fontSize: '26px',
-            fontWeight: '400',
-            marginTop: '20px',
-        },
-        '.cta': {
-            marginTop: '20px',
-            maxWidth: '208px',
-            borderRadius: '4px',
-            overflow: 'hidden',
-        },
-    };
-});
+const CardContainer = styled(Box)`
+    background-color: #fff;
+    display: flex;
+    max-height: 320px;
+    max-width: 375px;
+    overflow: hidden;
+    position: relative;
+    .image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover
+    }
+    .gradientOverlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
+    }
+    .content {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        padding: 40px 40px 25px 30px;
+        display: flex;
+        flex-direction: column
+    }
+    .subtitle {
+        color: #fff;
+        font-size: 11px;
+        font-weight: 400;
+        margin-top: auto
+    }
+    .title {
+        color: #fff;
+        font-size: 26px;
+        font-weight: 400;
+        margin-top: 20px
+    }
+    .cta {
+        margin-top: 20px;
+        max-width: 208px;
+        border-radius: 4px;
+        overflow: hidden
+    }
+`
 
 export default function NsSmallFullCard({
     title,

package/src/common/card/NsXLargeCard.tsx

@@ -16,51 +16,49 @@ type NsXLargeCardProps = {
     className?: string;
 };
 
-const CardContainer = styled(Box)(() => {
-    return {
-        backgroundColor: '#fff',
-        display: 'flex',
-        height: '620px',
-        width: '450px',
-        position: 'relative',
-        '.image': {
-            width: '100%',
-            height: '100%',
-            objectFit: 'cover',
-        },
-        '.gradientOverlay': {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            background: 'linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);',
-        },
-        '.content': {
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
-            padding: '40px 40px 25px 30px',
-            display: 'flex',
-            flexDirection: 'column',
-        },
-        '.subtitle': {
-            color: '#fff',
-            fontSize: '11px',
-            fontWeight: '400',
-            marginTop: 'auto',
-        },
-        '.title': {
-            color: '#fff',
-            fontSize: '26px',
-            fontWeight: '400',
-            marginTop: '20px',
-        },
-        '.cta': {
-            marginTop: '20px',
-        },
-    };
-});
+const CardContainer = styled(Box)`
+    background-color: #fff;
+    display: flex;
+    height: 620px;
+    width: 450px;
+    position: relative;
+    .image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+    .gradientOverlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
+    }
+    .content {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        padding: 40px 40px 25px 30px;
+        display: flex;
+        flex-direction: column;
+    }
+    .subtitle {
+        color: #fff;
+        font-size: 11px;
+        font-weight: 400;
+        margin-top: auto;
+    }
+    .title {
+        color: #fff;
+        font-size: 26px;
+        font-weight: 400;
+        margin-top: 20px;
+    }
+    .cta {
+        margin-top: 20px;
+    }
+`
 
 export default function NsXLargeCard({
     title,

package/src/common/image/BynderMedia.tsx

@@ -20,19 +20,20 @@ export const BynderMedia = ({ imageDetail, suffix, className, testId, liveTag }:
     let transformedMediaUrl = getUrlBasedOnDerivative(mediaUrl, imageDerivativeType, suffix ?? '');
     if (type === 'VIDEO') {
         return (
-            <video
-                loop
-                autoPlay
-                muted
-                width="100%"
-                {...liveTag}
-                style={{ backgroundColor: bgColor, objectFit: fit, objectPosition: position }}
-                className={`${className || ''} bynder-image`}
-                data-testid={testId || 'test-bynder-video'}
-            >
-                <source src={transformedMediaUrl} type="video/mp4" />
-                <source src={transformedMediaUrl} type="video/ogg" />
-            </video>
+            <div {...liveTag}>
+                <video
+                    loop
+                    autoPlay
+                    muted
+                    width="100%"
+                    style={{ backgroundColor: bgColor, objectFit: fit, objectPosition: position }}
+                    className={`${className || ''} bynder-image`}
+                    data-testid={testId || 'test-bynder-video'}
+                >
+                    <source src={transformedMediaUrl} type="video/mp4" />
+                    <source src={transformedMediaUrl} type="video/ogg" />
+                </video>
+            </div>
         );
     }
     return (

package/src/common/input/InputFieldWrapper.tsx

@@ -5,7 +5,7 @@ const { color, paletteColor } = ColorUtils;
 const InputFieldWrapper = styled(Stack)(({ theme }: any) => {
     return {
         display: 'flex',
-        flexDirection: 'column',
+        flexDirection: 'column' as 'column',
         gap: '7px',
         '.MuiFormHelperText-root': {
             fontSize: '11px',

package/src/common/progress/NsProgress.styled.tsx

@@ -32,26 +32,25 @@ export const StyledLinearProgress = styled(LinearProgress)<Omit<NsProgressProps,
         },
     })
 );
-export const StyledProgress = styled('div')(() => {
-    return {
-        display: 'grid',
-        gridTemplateRows: '30px 30px',
-        '.progress-info': {
-            justifyContent: 'flex-end',
-            display: 'flex',
-            alignItems: 'center',
-        },
-        '.progress-bar': {
-            display: 'flex',
-            alignItems: 'center',
-            '.MuiSvgIcon-root': {
-                padding: '0',
-                margin: '0',
-                height: '100%',
-                position: 'relative',
-                left: '-4px',
-                scale: '1.3',
-            },
-        },
-    };
-});
+export const StyledProgress = styled('div')`
+    display: grid;
+    grid-template-rows: 30px 30px;
+    .progress-info {
+        justify-content: flex-end;
+        display: flex;
+        align-items: center;
+    }
+    .progress-bar {
+        display: flex;
+        align-items: center;
+        .MuiSvgIcon-root {
+            padding: 0;
+            margin: 0;
+            height: 100%;
+            position: relative;
+            left: -4px;
+            scale: 1.3
+        }
+    }
+`;
+

package/src/common/search-bar/NsSearchBar.tsx

@@ -12,14 +12,14 @@ const Search = styled('div')`
     width: 100%;
 )`;
 
-const SearchIconWrapper = styled('div')(() => ({
-    height: '100%',
-    position: 'absolute',
-    pointerEvents: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-}));
+const SearchIconWrapper = styled('div')`
+    height: 100%;
+    position: absolute;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
 
 const StyledInputBase = styled(InputBase)(() => ({
     color: 'inherit',