@nuskin/foundation-ui-components 1.0.0-cft-35.4 → 1.0.0-cft-35.5

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [1.0.0-cft-35.5](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/compare/v1.0.0-cft-35.4...v1.0.0-cft-35.5) (2023-03-29)
+
+
+### Fix
+
+* Lint fixed ([929112c](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/929112ce66e5e5e86dcf3a64ee50288cfe244e27))
+
+### New
+
+* adding card component for showing brands ([e5aad64](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/e5aad64b0704f0054028d0eacc0ce603bbb814e4))
+* Brand and Live Tag ([4913a03](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/4913a031130fc28b3259038e6ab87d487690ac63))
+
 # [1.0.0-cft-35.4](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/compare/v1.0.0-cft-35.3...v1.0.0-cft-35.4) (2023-03-28)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuskin/foundation-ui-components",
-  "version": "1.0.0-cft-35.4",
+  "version": "1.0.0-cft-35.5",
   "description": "It is a foundation library written in react, that provides commom components to all UI pages",
   "private": false,
   "main": "src/common/index.ts",
@@ -27,7 +27,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "start-storybook -p 6007",
     "test": "jest",
     "test:coverage": "yarn test --coverage",
     "test:watch": "jest --watch",
@@ -45,6 +45,9 @@
     "next": "13.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-material-ui-carousel": "^3.4.2",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "^1.8.1",
     "typescript": "4.9.5"
   },
   "devDependencies": {
@@ -68,6 +71,7 @@
     "@types/node": "18.15.0",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
+    "@types/react-slick": "^0.23.10",
     "@types/react-test-renderer": "^18.0.0",
     "@types/testing-library__jest-dom": "^5.14.5",
     "babel-jest": "^29.5.0",

package/src/common/brand-components/BrandComponent.tsx

@@ -8,18 +8,18 @@ import LogoContainer from './BrandContanier.styled';
 import { BrandComponentProps } from './types';
 
 const VariantMap = {
-    'stacked': NSLogoStacked,
-    'horizontal': NSLogoHorizontal,
-    'wordmark': NSLogoWordMark,
-    'logomark': NSLogoMark,
-    'poweredBy': NSLogoPoweredBy,
+    stacked: NSLogoStacked,
+    horizontal: NSLogoHorizontal,
+    wordmark: NSLogoWordMark,
+    logomark: NSLogoMark,
+    poweredBy: NSLogoPoweredBy,
 };
 
 const BrandComponent = (props: PropsWithChildren<BrandComponentProps>) => {
-    const { variant = 'stacked', size = '108px' } = props;
+    const { variant = 'stacked', size = '108px', color = 'primary' } = props;
     const renderBrand = useCallback(() => {
         const BrandComponent = VariantMap[variant || 'stacked'];
-        return <BrandComponent color='primary' />
+        return <BrandComponent color={color as any} />;
     }, [variant]);
     return <LogoContainer size={size}>{renderBrand()}</LogoContainer>;
 };

package/src/common/brand-components/types.d.ts

@@ -1,7 +1,9 @@
+import { PaletteColorNames } from '@nuskin/foundation-theme/src/themes/types';
 
 export type BrandComponentProps = {
     variant?: 'stacked' | 'horizontal' | 'poweredBy' | 'logomark' | 'wordmark';
     size?: string;
+    color?: PaletteColorNames;
 }
 
 export type SVGLogoProps = {

package/src/common/button/Button.spec.tsx

@@ -10,7 +10,7 @@ describe('<Button />', () => {
         test('should render default button styles', () => {
             render(
                 <Button color="primary" variant="contained">
-          Click Me
+                    Click Me
                 </Button>
             );
 
@@ -25,7 +25,7 @@ describe('<Button />', () => {
         test('should render default button styles', () => {
             render(
                 <Button color="success" variant="contained" size="large">
-          Click Me
+                    Click Me
                 </Button>
             );
 
@@ -40,7 +40,7 @@ describe('<Button />', () => {
         test('should render outlined sucess button', () => {
             render(
                 <Button color="success" variant="outlined" size="large">
-          Click Me
+                    Click Me
                 </Button>
             );
 
@@ -55,7 +55,7 @@ describe('<Button />', () => {
         test('should render outlined sucess button', () => {
             render(
                 <Button color="accentColorA" variant="outlined" size="large">
-          Click Me
+                    Click Me
                 </Button>
             );
 
@@ -63,9 +63,7 @@ describe('<Button />', () => {
 
             expect(button).toBeInTheDocument();
             expect(button).toHaveStyle(`color: ${palette?.accentColorA?.main}`);
-            expect(button).toHaveStyle(
-                `border-color: ${palette?.accentColorA?.main}`
-            );
+            expect(button).toHaveStyle(`border-color: ${palette?.accentColorA?.main}`);
         });
     });
 });

package/src/common/button/Button.stories.tsx

@@ -6,11 +6,7 @@ import { ShoppingCart } from '@mui/icons-material';
 export default {
     title: 'Components/Button',
     component: Button,
-    decorators: [
-        (story) => (
-            <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>
-        ),
-    ],
+    decorators: [(story) => <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>],
     argTypes: {
         children: {
             control: 'text',
@@ -32,9 +28,7 @@ export default {
     },
 } as ComponentMeta<typeof Button>;
 
-export const button: ComponentStory<typeof Button> = (args) => (
-    <Button {...args} />
-);
+export const button: ComponentStory<typeof Button> = (args) => <Button {...args} />;
 
 export const IconOnlyButton: ComponentStory<typeof Button> = (args) => (
     <Button {...args} iconOnly>

package/src/common/card/NsBgCard.tsx

@@ -0,0 +1,24 @@
+import Card from '@mui/material/Card';
+import { styled } from '@nuskin/foundation-theme';
+
+type NsBgCardProps = {
+    backgroundImageUrl: string;
+};
+const options = {
+    shouldForwardProp: (propKey: string) => propKey !== 'backgroundImageUrl',
+};
+const Component = ({ backgroundImageUrl }: NsBgCardProps) => {
+    const width = 256;
+    return {
+        backgroundImage: `url("${backgroundImageUrl}")`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        height: width * 1.2,
+        width,
+    };
+};
+/*
+This styled component shows the background image on a card
+*/
+const NsBgCard = styled(Card, options)<NsBgCardProps>(Component);
+export default NsBgCard;

package/src/common/card/NsBrandLogo.tsx

@@ -0,0 +1,16 @@
+import CardMedia from '@mui/material/CardMedia';
+import { styled } from '@nuskin/foundation-theme';
+
+const NsBrandLogo = styled(CardMedia)<{
+    component: 'img';
+}>({
+    width: 'auto',
+    height: 'auto',
+    maxWidth: '80%',
+    maxHeight: '80%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+});
+
+export default NsBrandLogo;

package/src/common/card/NsBrandProductCard.tsx

@@ -0,0 +1,47 @@
+import Box from '@mui/material/Box';
+import { styled } from '@nuskin/foundation-theme';
+import { Typography } from '../index';
+import NsBrandWrapper from './NsBrandWrapper';
+import NsBrandLogo from './NsBrandLogo';
+import NsBgCard from './NsBgCard';
+
+type NsBrandProductCardProps = {
+    title?: string;
+    brandImageUrl: string;
+    backgroundImageUrl: string;
+};
+const CardContainer = styled(Box)(() => {
+    return {
+        width: '256px',
+        display: 'flex',
+        alignItems: 'start',
+        justifyContent: 'center',
+        position: 'relative',
+        flexDirection: 'column',
+        '.brand-title': {
+            marginTop: '20px',
+            fontSize: '20px',
+        },
+        ':hover': {
+            '.brand-title': {
+                opacity: '0.7',
+            },
+        },
+    };
+});
+export default function NsBrandProductCard({ title, brandImageUrl, backgroundImageUrl }: NsBrandProductCardProps) {
+    return (
+        <CardContainer role="brand-card" component="div" data-testid="brand-product-card">
+            <NsBgCard backgroundImageUrl={backgroundImageUrl}>
+                <NsBrandWrapper>
+                    <NsBrandLogo component="img" image={brandImageUrl} />
+                </NsBrandWrapper>
+            </NsBgCard>
+            {title ? (
+                <Typography variant="h3" className="brand-title">
+                    {title}
+                </Typography>
+            ) : null}
+        </CardContainer>
+    );
+}

package/src/common/card/NsBrandWrapper.tsx

@@ -0,0 +1,26 @@
+import Box from '@mui/material/Box';
+import { PropsWithChildren } from 'react';
+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',
+            },
+        },
+    };
+});
+
+export default function NsBrandWrapper({ children }: PropsWithChildren) {
+    return <Wrapper className="logo-wrapper">{children}</Wrapper>;
+}

package/src/common/card/index.ts

@@ -0,0 +1,4 @@
+export { default as NsBrandWrapper } from './NsBrandWrapper';
+export { default as NsBgCard } from './NsBgCard';
+export { default as NsBrandLogo } from './NsBrandLogo';
+export { default as NsBrandProductCard } from './NsBrandProductCard';

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

@@ -0,0 +1,19 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import NsBgCard from '../NsBgCard';
+
+export default {
+    component: NsBgCard,
+    title: 'Components/Card/NsBgCard',
+    argTypes: {},
+    decorators: [(story) => <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>],
+} as ComponentMeta<typeof NsBgCard>;
+
+const Template: ComponentStory<typeof NsBgCard> = (args: any) => <NsBgCard {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    title: 'ageLOC LumiSpa',
+    backgroundImageUrl: 'https://media.nuskin.com/m/3604b5202b0b64c6/webimage-brand-lumispa-optweb.png',
+    // brandImageUrl:
+    // 'https://media.nuskin.com/m/2571a0407433a6e8/webimage-brand-lumispa.png',
+};

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

@@ -0,0 +1,18 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import NsBrandProductCard from '../NsBrandProductCard';
+
+export default {
+    component: NsBrandProductCard,
+    title: 'Components/Card/NsBrandProductCard',
+    argTypes: {},
+    decorators: [(story) => <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>],
+} as ComponentMeta<typeof NsBrandProductCard>;
+
+const Template: ComponentStory<typeof NsBrandProductCard> = (args: any) => <NsBrandProductCard {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    title: 'ageLOC LumiSpa',
+    backgroundImageUrl: 'https://media.nuskin.com/m/3604b5202b0b64c6/webimage-brand-lumispa-optweb.png',
+    brandImageUrl: 'https://media.nuskin.com/m/2571a0407433a6e8/webimage-brand-lumispa.png',
+};

package/src/common/card/stories/data.js

@@ -0,0 +1,67 @@
+export const brandImages = [
+    'https://media.nuskin.com/m/63a454ff90d038b4/webimage-brand-epoch.png',
+    'https://media.nuskin.com/m/3eb406f465d4b0fe/webimage-brand-sunright.png',
+    'https://media.nuskin.com/m/2d3276518912283b/webimage-brand-nu_colour.png',
+    'https://media.nuskin.com/m/3855d3836d920639/webimage-brand-nuskin180.png',
+    'https://media.nuskin.com/m/6245528b8f76ad32/webimage-brand-ageLOC.png',
+    'https://media.nuskin.com/m/2571a0407433a6e8/webimage-brand-lumispa.png',
+    'https://media.nuskin.com/m/4bd7ab9b46bd456d/webimage-brand-pharmanex.png',
+    'https://media.nuskin.com/m/501d638a8af80087/webimage-brand-ap24.png',
+    'https://media.nuskin.com/m/f3a91129cbbae32/webimage-brand-nutricentials.png',
+    'https://media.nuskin.com/m/63a454ff90d038b4/webimage-brand-epoch.png',
+    'https://media.nuskin.com/m/3eb406f465d4b0fe/webimage-brand-sunright.png',
+    'https://media.nuskin.com/m/2d3276518912283b/webimage-brand-nu_colour.png',
+    'https://media.nuskin.com/m/3855d3836d920639/webimage-brand-nuskin180.png',
+    'https://media.nuskin.com/m/6245528b8f76ad32/webimage-brand-ageLOC.png',
+    'https://media.nuskin.com/m/2571a0407433a6e8/webimage-brand-lumispa.png',
+    'https://media.nuskin.com/m/4bd7ab9b46bd456d/webimage-brand-pharmanex.png',
+    'https://media.nuskin.com/m/501d638a8af80087/webimage-brand-ap24.png',
+];
+
+export const brandBackImages = [
+    'https://media.nuskin.com/m/549aa3e5184434d8/webimage-brand-epoch-optweb.png',
+    'https://media.nuskin.com/m/14e238d7599e1811/webimage-brand-sunright.png',
+    'https://media.nuskin.com/m/2543e79419276727/webimage-brand-nu_colour-optweb.png',
+    'https://media.nuskin.com/m/446c7a2aad513f58/webimage-brand-nu_skin_180-optweb.png',
+    'https://media.nuskin.com/m/42911c8b05600476/webimage-brand-ageloc-optweb.png',
+    'https://media.nuskin.com/m/3604b5202b0b64c6/webimage-brand-lumispa-optweb.png',
+    'https://media.nuskin.com/m/4a1245a63c595262/webimage-brand-pharmanex-optweb.png',
+    'https://media.nuskin.com/m/14a0fd6ef63e5dbb/webimage-brand-ap_24.png',
+    'https://media.nuskin.com/m/298104036e885b40/webimage-brand-nutricentials.png',
+    'https://media.nuskin.com/m/549aa3e5184434d8/webimage-brand-epoch-optweb.png',
+    'https://media.nuskin.com/m/14e238d7599e1811/webimage-brand-sunright.png',
+    'https://media.nuskin.com/m/2543e79419276727/webimage-brand-nu_colour-optweb.png',
+    'https://media.nuskin.com/m/446c7a2aad513f58/webimage-brand-nu_skin_180-optweb.png',
+    'https://media.nuskin.com/m/42911c8b05600476/webimage-brand-ageloc-optweb.png',
+    'https://media.nuskin.com/m/3604b5202b0b64c6/webimage-brand-lumispa-optweb.png',
+    'https://media.nuskin.com/m/4a1245a63c595262/webimage-brand-pharmanex-optweb.png',
+    'https://media.nuskin.com/m/14a0fd6ef63e5dbb/webimage-brand-ap_24.png',
+];
+
+export const brandTitles = [
+    'Epoch',
+    'Sunright',
+    'Nu Colour',
+    '180 System',
+    'ageLOC',
+    'ageLOC LumiSpa',
+    'Pharmanex',
+    'AP 24',
+    'Nutricentials',
+    'Epoch',
+    'Sunright',
+    'Nu Colour',
+    '180 System',
+    'ageLOC',
+    'ageLOC LumiSpa',
+    'Pharmanex',
+    'AP 24',
+];
+export const brandEntries = brandTitles.map((title, index) => {
+    return {
+        title,
+        backgroundImage: brandBackImages[index],
+        brandImage: brandImages[index],
+        id: index,
+    };
+});

package/src/common/card/tests/BrandLogo.spec.tsx

@@ -0,0 +1,13 @@
+import { render } from '@testing-library/react';
+import NsBrandLogo from '../NsBrandLogo';
+
+describe('BrandLogo component', () => {
+    it('renders with cover size', () => {
+        const { container } = render(<NsBrandLogo component="img" />);
+        const cardElement = container.querySelector('img');
+        expect(cardElement).toHaveStyle(`
+		align-items: center;
+		justify-content: center;
+    `);
+    });
+});

package/src/common/card/tests/NsBgCard.spec.tsx

@@ -0,0 +1,23 @@
+import { render } from '@testing-library/react';
+import NsBgCard from '../NsBgCard';
+
+describe('NsBgCard component', () => {
+    const props = {
+        backgroundImageUrl: 'https://media.nuskin.com/m/6245528b8f76ad32/webimage-brand-ageLOC.png',
+    };
+    it('renders with background image', () => {
+        const { container } = render(<NsBgCard {...props} />);
+        const cardElement = container.querySelector('div');
+        expect(cardElement).toHaveStyle(`
+    background-image: url(${props.backgroundImageUrl});
+    `);
+    });
+    it('renders with cover size', () => {
+        const { container } = render(<NsBgCard {...props} />);
+        const cardElement = container.querySelector('div');
+        expect(cardElement).toHaveStyle(`
+      background-size: cover;
+      background-position: center;
+    `);
+    });
+});

package/src/common/card/tests/NsBrandProductCard.spec.tsx

@@ -0,0 +1,32 @@
+import { render } from '@testing-library/react';
+import NsBrandProductCard from '../NsBrandProductCard';
+
+describe('NSBgCard component', () => {
+    const props = {
+        title: 'Nutricentials',
+        brandImageUrl: 'https://media.nuskin.com/m/f3a91129cbbae32/webimage-brand-nutricentials.png',
+        backgroundImageUrl: 'https://media.nuskin.com/m/298104036e885b40/webimage-brand-nutricentials.png',
+    };
+    it('render brand image', () => {
+        const { container } = render(<NsBrandProductCard {...props} />);
+        const img = container.querySelector('img');
+        expect(img).toHaveAttribute('src', props.brandImageUrl);
+    });
+    it('render background image', () => {
+        const { container } = render(<NsBrandProductCard {...props} />);
+        const card = container.querySelector('div.MuiPaper-root');
+        expect(card).toHaveStyle(`
+    background-image: url(${props.backgroundImageUrl});
+    `);
+    });
+    it('renders title', () => {
+        const { getByText } = render(<NsBrandProductCard {...props} />);
+        const cardElement = getByText(props.title);
+        expect(cardElement).toBeInTheDocument();
+    });
+    it('does not render title, when title is not passed', () => {
+        const { container } = render(<NsBrandProductCard {...{ ...props, title: undefined }} />);
+        const cardElement = container.querySelector('.brand-title');
+        expect(cardElement).toBeNull();
+    });
+});

package/src/common/common.types.ts

@@ -8,4 +8,3 @@ export type AdditionalProps = {
         testid?: string;
     } & ContentStackLiveTags;
 };
-

package/src/common/link/NsLink.styled.tsx

@@ -53,13 +53,16 @@ const getLinkStyles = ({ disabled, $underlineOnHover = true }: StyledProps) => {
     }
     return '';
 };
+const options = {
+    shouldForwardProp: (propKey: string) => propKey !== '$underlineOnHover',
+};
 
-export const StyledNextLink = styled(NextLink)<StyledProps>`
+export const StyledNextLink = styled(NextLink, options)<StyledProps>`
     ${linkDefaultStyles};
     ${getLinkStyles}
 `;
 
-export const StyledLink = styled(MUILink)<StyledProps>`
+export const StyledLink = styled(MUILink, options)<StyledProps>`
     ${linkDefaultStyles};
     ${getLinkStyles}
 `;

package/src/common/nav-tab/NsNavTab.styled.tsx

@@ -3,6 +3,7 @@ import { PaletteColorNames } from '@nuskin/foundation-theme/src/themes/types';
 import { motion } from 'framer-motion';
 
 export const NavTabContainer = styled.div`
+
     .shadow {
         box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
     }
@@ -38,7 +39,7 @@ export const NavDrawer = styled.div`
     width: 100%;
     max-height: 590px;
 
-    background-color: #fff;
+    background-color: ${({ theme }) => theme?.palette?.primary.contrastText};
     box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
     transition: all 0.15s ease-in-out;
     overflow: hidden;
@@ -55,7 +56,7 @@ export const NavDrawerContainer = styled(motion.div)`
         z-index: 1;
     }
     box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-    background-color: #fff;
+    background-color: ${({ theme }) => theme?.palette?.primary.contrastText};
     width: 100%;
     text-align: left;
     max-height: 590px;

package/src/common/nav-tab/NsNavTab.tsx

@@ -40,7 +40,8 @@ export const NsNavTabComponent = (props: PropsWithChildren<NSNavTabComponentProp
                                         >
                                             <Typography
                                                 variant={tab.textVariant}
-                                                className={`mb-2  ${tabTitleClassName ? tabTitleClassName : null}`}
+                                                additionalProps={{ ...tab?.liveTag }}
+                                                className={`mb-2  ${tabTitleClassName} ${!active ? 'opacity-8' : ''}`}
                                                 color={tab.tabName === active ? tab.activeColor : tab.color}
                                             >
                                                 {tab.tabName}

package/src/common/nav-tab/types.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { PaletteColorNames } from '@nuskin/foundation-theme/src/themes/types';
 import { Variants } from '../typography/types';
-import { AdditionalProps } from '../common.types';
+import { AdditionalProps, ContentStackLiveTags } from '../common.types';
 
 export type NavTabs = {
     tabName: string;
@@ -9,6 +9,7 @@ export type NavTabs = {
     activeColor: PaletteColorNames;
     color?: PaletteColorNames;
     textVariant: Variants;
+    liveTag?: ContentStackLiveTags;
 };
 
 export type NSNavTabComponentProps = {

package/src/common/slick/CarousalControl.tsx

@@ -0,0 +1,44 @@
+import { styled } from '@nuskin/foundation-theme';
+import LeftChevron from './LeftChevron';
+import IconWrapper from './IconWrapper';
+import RightChevron from './RightChevron';
+import { Typography } from '../';
+import Link from 'next/link';
+interface CarousalControlProps {
+    next(): void;
+    prev(): void;
+    viewAllUrl: string;
+}
+/*
+This component is visible over the carousal and it has prev and next buttons and view all link
+*/
+const Wrapper = styled.div`
+    display: flex;
+    justify-content: flex-end;
+    padding: 0 30px;
+    margin: 10px 20px;
+`;
+const InnerWrapper = styled.div`
+    display: flex;
+    width: 220px;
+    gap: 20px;
+    align-items: center;
+`;
+const CarousalControl = ({ next, prev, viewAllUrl }: CarousalControlProps) => {
+    return (
+        <Wrapper>
+            <InnerWrapper>
+                <Link href={viewAllUrl}>
+                    <Typography variant={'h5'}>View All</Typography>
+                </Link>
+                <IconWrapper onClick={prev} className="carousal-prev-button">
+                    <LeftChevron />
+                </IconWrapper>
+                <IconWrapper onClick={next} className="carousal-next-button">
+                    <RightChevron />
+                </IconWrapper>
+            </InnerWrapper>
+        </Wrapper>
+    );
+};
+export default CarousalControl;

package/src/common/slick/IconWrapper.tsx

@@ -0,0 +1,32 @@
+import { PropsWithChildren } from 'react';
+import { styled } from '@nuskin/foundation-theme';
+import { Box } from '@mui/material';
+
+type IconWrapperProps = PropsWithChildren<{
+    onClick(): void;
+    className?: string;
+}>;
+const options = {};
+const Wrapper = styled(
+    Box,
+    options
+)(({ theme }) => {
+    const strokeColor = theme.palette?.primary?.main ?? '#252525';
+    return {
+        display: 'flex',
+        height: '20px',
+        width: '20px',
+        border: `2px solid ${strokeColor}`,
+        borderRadius: '3px',
+        cursor: 'pointer',
+        padding: '10px',
+    };
+});
+const IconWrapper = ({ children, onClick, className }: IconWrapperProps) => {
+    return (
+        <Wrapper component="span" className={className || ''} onClick={onClick}>
+            {children}
+        </Wrapper>
+    );
+};
+export default IconWrapper;

package/src/common/slick/LeftChevron.tsx

@@ -0,0 +1,34 @@
+import { useTheme } from '@mui/material/styles';
+
+const LeftChevron = () => {
+    const { palette } = useTheme();
+    const strokeColor = palette.primary.main;
+    return (
+        <svg
+            data-testid="prev-chevron"
+            viewBox="0 0 24 24"
+            preserveAspectRatio="xMidYMid meet"
+            focusable="false"
+            style={{ pointerEvents: 'none', display: 'block' }}
+        >
+            <g
+                id="icon-narrow-angle-left-24"
+                stroke="none"
+                strokeWidth="1"
+                fill="none"
+                fillRule="evenodd"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            >
+                <g transform="translate(-196, -226)" stroke={strokeColor}>
+                    <polyline
+                        // eslint-disable-next-line max-len
+                        transform="translate(209.000000, 237.500000) scale(-1.2, 1.2) rotate(90.000000) translate(-209.000000, -237.500000)"
+                        points="200 242 209 233 218 242"
+                    ></polyline>
+                </g>
+            </g>
+        </svg>
+    );
+};
+export default LeftChevron;

package/src/common/slick/NsCarousal.tsx

@@ -0,0 +1,51 @@
+import Box from '@mui/material/Box';
+import { styled } from '@nuskin/foundation-theme';
+import { useRef, useCallback, ReactNode } from 'react';
+import Slider from 'react-slick';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+import defaultCarousalSettings from './slickSetting';
+import CarousalControl from './CarousalControl';
+
+const SlickContainer = styled(Box)(() => {
+    return {
+        padding: '20px 0 50px',
+        '.slick-slide': {
+            display: 'flex',
+            justifyContent: 'center',
+        },
+    };
+});
+interface CarousalProps<T = any> {
+    entries: T[];
+    // eslint-disable-next-line no-unused-vars
+    renderEntry(entry: T, index: number): ReactNode;
+    allEntryLink: string;
+    settings: any;
+}
+
+export default function NsCarousal({ entries, renderEntry, allEntryLink, settings }: CarousalProps) {
+    const sliderRef = useRef();
+    const prev = useCallback(() => {
+        if (sliderRef.current) {
+            const slider = sliderRef.current as any;
+            slider.slickPrev();
+        }
+    }, [sliderRef]);
+    const next = useCallback(() => {
+        if (sliderRef.current) {
+            const slider = sliderRef.current as any;
+            slider.slickNext();
+        }
+    }, [sliderRef]);
+    return (
+        <SlickContainer className="brand-carousal">
+            <CarousalControl prev={prev} next={next} viewAllUrl={allEntryLink} />
+            <Slider {...{ ...defaultCarousalSettings, ...settings }} ref={sliderRef as any}>
+                {entries.map((entry, index) => {
+                    return renderEntry(entry, index);
+                })}
+            </Slider>
+        </SlickContainer>
+    );
+}

package/src/common/slick/RenderBrand.tsx

@@ -0,0 +1,18 @@
+import NsBrandProductCard from '../card/NsBrandProductCard';
+
+interface BrandType {
+    title: string;
+    backgroundImage: string;
+    brandImage: string;
+}
+export const RenderBrand = (entry: BrandType, index: number) => {
+    const { title, backgroundImage, brandImage } = entry;
+    return (
+        <NsBrandProductCard
+            key={title + index}
+            backgroundImageUrl={backgroundImage}
+            title={title}
+            brandImageUrl={brandImage}
+        />
+    );
+};

package/src/common/slick/RightChevron.tsx

@@ -0,0 +1,36 @@
+import { useTheme } from '@mui/material/styles';
+
+export const RightChevron = () => {
+    const { palette } = useTheme();
+    const strokeColor = palette.primary.main;
+
+    return (
+        <svg
+            data-testid="next-chevron"
+            viewBox="0 0 24 24"
+            preserveAspectRatio="xMidYMid meet"
+            focusable="false"
+            style={{ pointerEvents: 'none', display: 'block' }}
+        >
+            <g
+                id="icon-narrow-angle-right-24"
+                stroke="none"
+                strokeWidth="1"
+                fill="none"
+                fillRule="evenodd"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            >
+                <g transform="translate(-196, -226)" stroke={strokeColor}>
+                    <polyline
+                        // eslint-disable-next-line max-len
+                        transform="translate(209.000000, 237.500000) scale(-1.2, 1.2) rotate(-90.000000) translate(-209.000000, -237.500000)"
+                        points="200 242 209 233 218 242"
+                    ></polyline>
+                </g>
+            </g>
+        </svg>
+    );
+};
+
+export default RightChevron;

package/src/common/slick/index.ts

@@ -0,0 +1,2 @@
+export { default as NsCarousal } from './NsCarousal';
+export { default as NsDefaultCarousalSettings } from './slickSetting';

package/src/common/slick/slickSetting.ts

@@ -0,0 +1,61 @@
+const settings = {
+    dots: true,
+    infinite: false,
+    speed: 2000,
+    slidesToShow: 6,
+    slidesToScroll: 1,
+    swipeToSlide: true,
+    responsive: [
+        {
+            breakpoint: 1800,
+            settings: {
+                slidesToShow: 5,
+                slidesToScroll: 1,
+                infinite: true,
+                dots: true,
+            },
+        },
+        {
+            breakpoint: 1480,
+            settings: {
+                slidesToShow: 4,
+                slidesToScroll: 1,
+                infinite: true,
+                dots: true,
+            },
+        },
+        {
+            breakpoint: 1160,
+            settings: {
+                slidesToShow: 3,
+                slidesToScroll: 1,
+                infinite: true,
+                dots: true,
+            },
+        },
+        {
+            breakpoint: 840,
+            settings: {
+                slidesToShow: 2,
+                slidesToScroll: 1,
+                initialSlide: 1,
+            },
+        },
+        {
+            breakpoint: 580,
+            settings: {
+                slidesToShow: 1.5,
+                slidesToScroll: 1,
+            },
+        },
+        {
+            breakpoint: 440,
+            settings: {
+                slidesToShow: 1,
+                slidesToScroll: 1,
+            },
+        },
+    ],
+};
+
+export default settings;

package/src/common/slick/stories/NSCarousal.stories.tsx

@@ -0,0 +1,21 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import NsCarousal from '../NsCarousal';
+import { brandEntries } from '../../card/stories/data';
+import { RenderBrand } from '../RenderBrand';
+import settings from '../slickSetting';
+
+export default {
+    title: 'Components/NsCarousal/Brand',
+    component: NsCarousal,
+    argTypes: {},
+} as ComponentMeta<typeof NsCarousal>;
+
+const Template: ComponentStory<typeof NsCarousal> = (args: any) => <NsCarousal {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    entries: brandEntries,
+    renderEntry: RenderBrand,
+    allEntryLink: '',
+    settings: settings,
+};

package/src/common/slick/tests/Chevron.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+import IconWrapper from '../IconWrapper';
+
+describe('IconCover', () => {
+    it('render the component', () => {
+        const { container } = render(<IconWrapper className="icon-cover" onClick={() => {}} />);
+        const element = container.querySelector('.icon-cover');
+        expect(element).toBeInTheDocument();
+    });
+});

package/src/common/slick/tests/NsCarousal.spec.tsx

@@ -0,0 +1,106 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import NsCarousal from '../NsCarousal';
+
+const mockEntries = [
+    { id: 1, title: 'First entry' },
+    { id: 2, title: 'Second entry' },
+    { id: 3, title: 'Third entry' },
+    { id: 4, title: 'Fourth entry' },
+    { id: 5, title: 'Fifth entry' },
+];
+
+const mockRenderEntry = (entry: any, index: number) => {
+    return <div key={index}>{entry.title}</div>;
+};
+const mockAllEntryLink = '/view-all';
+const mockSettings = {
+    slidesToShow: 2,
+    slidesToScroll: 1,
+};
+describe('NsCarousal', () => {
+    it('should have prev and next chevron', () => {
+        const { getByTestId } = render(
+            <NsCarousal
+                entries={[]}
+                renderEntry={mockRenderEntry}
+                allEntryLink={mockAllEntryLink}
+                settings={mockSettings}
+            />
+        );
+        const prevSvg = getByTestId('prev-chevron');
+        const nextSvg = getByTestId('next-chevron');
+        expect(prevSvg).toBeInTheDocument();
+        expect(nextSvg).toBeInTheDocument();
+    });
+
+    it('should view all link with correct href and slides', () => {
+        const { container } = render(
+            <NsCarousal
+                entries={mockEntries}
+                renderEntry={mockRenderEntry}
+                allEntryLink={mockAllEntryLink}
+                settings={mockSettings}
+            />
+        );
+
+        const viewAllLink = screen.getByRole('link', { name: /view all/i });
+        const slides = container.querySelectorAll('.slick-slide');
+
+        expect(viewAllLink).toBeInTheDocument();
+        expect(viewAllLink).toHaveAttribute('href', mockAllEntryLink);
+        expect(slides).toHaveLength(mockEntries.length);
+        expect(slides[0]).toHaveTextContent('First entry');
+        expect(slides[1]).toHaveTextContent('Second entry');
+        expect(slides[2]).toHaveTextContent('Third entry');
+    });
+
+    it('should change slides when clicking on prev or next buttons', () => {
+        const { container } = render(
+            <NsCarousal
+                entries={mockEntries}
+                renderEntry={mockRenderEntry}
+                allEntryLink="/view-all"
+                settings={mockSettings}
+            />
+        );
+
+        let currentSlide = container.querySelector('.slick-slide.slick-current');
+        expect(currentSlide!.attributes['data-index' as any].value).toEqual('0');
+
+        /* this is library's button, not our button, it is used for changing slides,
+      clicking svg is not making any slide change in this test */
+        const nextButton = screen.getByRole('button', { name: /next/i });
+        fireEvent.click(nextButton);
+
+        let slickTrack = container.querySelector('.slick-track');
+        currentSlide = slickTrack!.querySelector('.slick-slide.slick-current');
+        expect(currentSlide!.attributes['data-index' as any].value).toEqual('1');
+
+        /* below code is commented because prev button is not working as expected in tests */
+        // const prevButton = screen.getByRole('button', { name: /prev/i })
+        // fireEvent.click(prevButton)
+        // screen.debug(prevButton)
+        // let slickList = container.querySelector('.slick-list')
+        // currentSlide = slickList!.querySelector('.slick-slide.slick-current')
+        // expect(currentSlide!.attributes['data-index' as any].value).toEqual('0')
+
+        // // currentSlide = screen.getByText(mockEntries[0].title)
+        // currentSlide = slickTrack!.querySelector('.slick-slide.slick-current')
+        // expect(currentSlide!.attributes['data-index' as any].value).toEqual('0')
+    });
+
+    it('should change slides when clicking on prev or next buttons', () => {
+        const { container } = render(
+            <NsCarousal
+                entries={mockEntries}
+                renderEntry={mockRenderEntry}
+                allEntryLink="/view-all"
+                settings={mockSettings}
+            />
+        );
+        let next = container.querySelector('.carousal-next-button');
+        let prev = container.querySelector('.carousal-prev-button');
+        fireEvent.click(next!);
+        fireEvent.click(prev!);
+    });
+});

package/src/common/slick/tests/RenderBrand.spec.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import { RenderBrand } from '../RenderBrand';
+
+const mockEntry = {
+    title: 'Epoch',
+    backgroundImage: 'https://media.nuskin.com/m/549aa3e5184434d8/webimage-brand-epoch-optweb.png',
+    brandImage: 'https://media.nuskin.com/m/63a454ff90d038b4/webimage-brand-epoch.png',
+};
+
+const mockIndex = 0;
+
+describe('RenderBrand function', () => {
+    it('should render a BrandProductCard component with given props', () => {
+        render(RenderBrand(mockEntry, mockIndex));
+
+        const card = screen.getByRole('brand-card');
+        const title = screen.getByText(mockEntry.title);
+
+        expect(card).toBeInTheDocument();
+        expect(title).toBeInTheDocument();
+    });
+});

package/src/common/typography/Typography.styled.tsx

@@ -15,7 +15,8 @@ const variantStyles = {
     'p-l': 'font-size: 18px; line-height: 24px',
     'p-m': 'font-size: 16px; line-height: 22px',
     'p-s': 'font-size: 14px; line-height: 20px',
-    'p-xs': 'font-size: 11px; line-height: 16px',
+    'p-xs': 'font-size: 12px; line-height: 16px',
+    'p-xxs': 'font-size: 11px; line-height: 14px',
     CTA: 'font-size: 11px; line-height: 16px',
 };
 

package/src/common/typography/types.d.ts

@@ -15,6 +15,7 @@ export type Variants =
   | 'p-m'
   | 'p-s'
   | 'p-xs'
+  | 'p-xxs'
   | 'CTA';
 
 export type TypographyProps = {
@@ -23,5 +24,6 @@ export type TypographyProps = {
   fontStyle?: 'italic' | 'normal';
   weight?: 'bold' | 'normal' | 'light';
   color?: PaletteColorNames;
+  component?: 'div' | 'span' | 'p'
   className?: string;
-} & AdditionalProps;
+} & AdditionalProps;