@nuskin/foundation-ui-components 1.9.3 → 1.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.9.3",
+    "version": "1.9.4",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {
@@ -42,12 +42,12 @@
     "dependencies": {
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
-        "@mui/icons-material": "^5.14.14",
-        "@mui/material": "5.14.14",
-        "@mui/utils": "^5.14.14",
+        "@mui/icons-material": "^5.14.16",
+        "@mui/material": "5.14.16",
+        "@mui/utils": "^5.14.16",
         "@next/font": "13.5.6",
         "@nuskin/foundation-theme": "1.2.0",
-        "@types/react": "^18.2.30",
+        "@types/react": "^18.2.34",
         "@types/react-dom": "^18.2.14",
         "cliui": "^8.0.1",
         "framer-motion": "^10.16.4",
@@ -79,7 +79,7 @@
         "@testing-library/jest-dom": "^6.1.4",
         "@testing-library/react": "^14.0.0",
         "@testing-library/react-hooks": "^8.0.1",
-        "@types/jest": "^29.5.6",
+        "@types/jest": "^29.5.7",
         "@types/lodash": "^4.14.200",
         "@types/node": "^20.8.7",
         "@types/ramda": "^0.29.7",

package/src/common/autocomplete/NsAutocomplete.spec.tsx

@@ -2,9 +2,9 @@ import { render, screen, waitFor } from '@/test-utils/index';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
-import { AutocompleteMockList } from './mock/MockData';
-import { OptionUiComponent } from './mock/MockUI';
-import NsAutocomplete from './NsAutocomplete';
+import { AutocompleteMockList } from '../autocomplete/mock/MockData';
+import { OptionUiComponent } from '../autocomplete/mock/MockUI';
+import NsAutocomplete from '../autocomplete/NsAutocomplete';
 
 const commonProps = {
     value: '',
@@ -14,6 +14,7 @@ const commonProps = {
     options: AutocompleteMockList,
     placeholder: 'autocomplete-input',
     OptionsUI: OptionUiComponent,
+    // renderOption: (props: any) => <li {...props}>{props.value}</li>,
 };
 describe('CustomAutocomplete', () => {
     it('1. should render autocomplete component', () => {
@@ -47,7 +48,7 @@ describe('CustomAutocomplete', () => {
     it('4. selects an option when clicking on it', async () => {
         const onChangeMock = jest.fn();
         render(<NsAutocomplete {...commonProps} onChange={onChangeMock} />);
-        const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
+        const autocompleteInput = screen.getByPlaceholderText(commonProps.placeholder);
         await userEvent.type(autocompleteInput, 'GS Facial');
         await waitFor(async () => {
             const optionLi = screen.getByText('GS Facial Spa');
@@ -57,39 +58,32 @@ describe('CustomAutocomplete', () => {
     }, 40000);
 
     it('5. should load more options when clicking load more button', async () => {
-        render(
-            <NsAutocomplete
-                seeMore={{
-                    text: '',
-                    show: true,
-                    onSeeMore: () => ({}),
-                }}
-                {...commonProps}
-            />
-        );
-        const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
+        const seeMore = {
+            text: 'See More',
+            show: true,
+            onSeeMore: jest.fn(),
+        };
+        render(<NsAutocomplete seeMore={seeMore} {...commonProps} />);
+        const autocompleteInput = screen.getByPlaceholderText(commonProps.placeholder);
         await userEvent.type(autocompleteInput, 'GS Facial');
         await waitFor(async () => {
-            const loadMoreButton = screen.getByTestId('autocomplete-loadmore-id');
+            const loadMoreButton = screen.getByText(seeMore.text);
             await userEvent.click(loadMoreButton);
         });
+        expect(seeMore.onSeeMore).toHaveBeenCalled();
     }, 40000);
 
     it('6. should clear options when clicking clear button', async () => {
-        render(
-            <NsAutocomplete
-                clear={{
-                    text: '',
-                    show: true,
-                    onClear: () => ({}),
-                }}
-                {...commonProps}
-            />
-        );
-        const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
+        const clear = {
+            text: 'Clear All',
+            show: true,
+            onClear: jest.fn(),
+        };
+        render(<NsAutocomplete clear={clear} {...commonProps} />);
+        const autocompleteInput = screen.getByPlaceholderText(commonProps.placeholder);
         await userEvent.type(autocompleteInput, 'GS Facial');
         await waitFor(async () => {
-            const clearButton = screen.getByTestId('autocomplete-clear-id');
+            const clearButton = screen.getByText(clear.text);
             await userEvent.click(clearButton);
         });
     }, 40000);

package/src/common/autocomplete/NsAutocomplete.styled.tsx

@@ -1,18 +1,16 @@
-import { styled } from '@nuskin/foundation-theme';
-
+import { styled, ColorUtils } from '@nuskin/foundation-theme';
 import { NsInputField } from '../input';
+const { getGenomeColor } = ColorUtils;
 
-// TODO: why is .muiautocomplete-popupindicator added?
-// TODO: ${({ theme }) => getGenomeColor(theme, 'N100')}; use forceMode light
 export const StyledTextField = styled(NsInputField)`
     .MuiAutocomplete-inputRoot {
         padding-right: 10px !important;
     }
-    .muiautocomplete-popupindicator {
-        display: none;
-    }
     .styled-text-field.MuiOutlinedInput-root input#custom_autocomplete_dropdown::placeholder {
         opacity: 1;
-        color: #252525;
+        color: ${({ theme }) => getGenomeColor(theme, 'N100', 'light')};
     }
 `;
+// .muiautocomplete-popupindicator {
+//     display: none;
+// }

package/src/common/autocomplete/NsAutocomplete.tsx

@@ -1,7 +1,8 @@
 import { Autocomplete, AutocompleteRenderInputParams } from '@mui/material';
 import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
 
-import { AutoCompleteButton } from './helper/AutoCompleteButton';
+import { LineLoader } from './helper/LineLoader';
+import { RecentClearAll } from './helper/RecentClearAll';
 import { renderGroupBy, renderGroupName, renderOptionLabel } from './helper/renderGroupName';
 import { SeeMoreButton } from './helper/SeeMoreButton';
 import { StyledTextField } from './NsAutocomplete.styled';
@@ -48,11 +49,14 @@ const NsAutocomplete = ({
         />
     );
 
-    const renderOption = (props: ComponentBoxProps, option: OptionsProps) => (
-        <li {...props} key={props.id}>
-            {OptionsUI ? <OptionsUI {...props} option={option} /> : null}
-        </li>
-    );
+    const renderOption = (props: ComponentBoxProps, option: OptionsProps) =>
+        OptionsUI ? (
+            <OptionsUI {...props} option={option} key={props.id} />
+        ) : (
+            <li {...props} key={props.id}>
+                {option.value}
+            </li>
+        );
 
     const renderListBoxComponent = ({ children, ...rest }: ComponentBoxProps) => {
         return (
@@ -64,11 +68,12 @@ const NsAutocomplete = ({
                 className={rest.className}
                 ref={listboxRef}
             >
-                <AutoCompleteButton
+                <RecentClearAll
                     show={clear?.show ?? false}
                     text={clear?.text ?? 'Clear All'}
                     onClick={clear?.onClear ?? noop}
                     testId="autocomplete-clear-id"
+                    recentSearchText={clear?.recentSearchText ?? 'Your Recent Searches'}
                 />
                 {children}
                 <SeeMoreButton
@@ -82,10 +87,11 @@ const NsAutocomplete = ({
             </ul>
         );
     };
-
     return (
         <>
+            <LineLoader show={loading ?? false} />
             <Autocomplete
+                openOnFocus
                 id={id}
                 disablePortal
                 className={className}

package/src/common/autocomplete/helper/LineLoader.tsx

@@ -0,0 +1,37 @@
+import { styled } from '@nuskin/foundation-theme';
+
+const StyledLine = styled.div`
+    position: fixed;
+    top: 0px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: #fff;
+    z-index: 99999;
+    overflow: hidden;
+    .dot {
+        position: absolute;
+        height: 100%;
+        width: 150px;
+        background: #f00;
+        animation: dotleft 1s cubic-bezier(0.72, 0.03, 0.75, 0.54) infinite;
+    }
+    @keyframes dotleft {
+        0% {
+            left: 0%;
+            width: 150px;
+        }
+        100% {
+            left: 100%;
+            width: 900px;
+        }
+    }
+`;
+
+export const LineLoader = ({ show }: { show: boolean }) => {
+    return (
+        <StyledLine className={`${show ? '' : 'hidden '} line`}>
+            <div className="dot">{show}</div>
+        </StyledLine>
+    );
+};

package/src/common/autocomplete/helper/RecentClearAll.tsx

@@ -0,0 +1,36 @@
+import { styled } from '@nuskin/foundation-theme';
+import { NsTypography } from '../../typography';
+
+type AutoCompleteButtonProps = {
+    text: string;
+    show: boolean;
+    onClick(): void;
+    testId?: string;
+    recentSearchText: string;
+};
+export const StyledClear = styled(NsTypography)`
+    :hover {
+        opacity: 0.5;
+    }
+`;
+export const RecentClearAll = (props: AutoCompleteButtonProps) => {
+    const { show, onClick, text, testId, recentSearchText } = props;
+    if (!show) {
+        return null;
+    }
+    return (
+        <li className="justify-between flex p-3" onClick={onClick}>
+            <NsTypography data-testid={testId} variant="body-m" weight="bold">
+                {recentSearchText}
+            </NsTypography>
+            <StyledClear
+                data-testid={testId}
+                variant="body-m"
+                weight="bold"
+                className="cursor-pointer hover:opacity-40"
+            >
+                {text}
+            </StyledClear>
+        </li>
+    );
+};

package/src/common/autocomplete/helper/SeeMoreButton.tsx

@@ -1,7 +1,20 @@
 import { Dispatch, MutableRefObject, SetStateAction, useCallback } from 'react';
+import { styled, ColorUtils } from '@nuskin/foundation-theme';
 
-import { OptionsProps } from '../..';
-import { AutoCompleteButton } from './AutoCompleteButton';
+import { NsTypography, OptionsProps } from '../..';
+const { getGenomeColor } = ColorUtils;
+export const ListStyled = styled.div`
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+    padding: 4px 12px;
+    cursor: pointer;
+    &:hover {
+        background: ${({ theme }) => getGenomeColor(theme, 'A10')};
+    }
+`;
 
 type SeeMoreButtonProps = {
     text?: string;
@@ -30,9 +43,23 @@ export const SeeMoreButton = (props: SeeMoreButtonProps) => {
                 setScrollTopPosition(lastScrollPosition);
             }
         }
-        if (onSeeMore && typeof onSeeMore === 'function') {
+        if (typeof onSeeMore === 'function') {
             onSeeMore();
         }
     }, [listboxRef, onSeeMore, options?.length, setScrollTopPosition]);
-    return <AutoCompleteButton show={show} text={text} onClick={handleSeeMore} testId="autocomplete-loadmore-id" />;
+    if (!show) {
+        return null;
+    }
+    return (
+        <ListStyled className="text-left p-3" onClick={handleSeeMore}>
+            <NsTypography
+                data-testid="autocomplete-loadmore-id"
+                variant="body-m"
+                decoration="underline"
+                className="cursor-pointer"
+            >
+                {text}
+            </NsTypography>
+        </ListStyled>
+    );
 };

package/src/common/autocomplete/helper/index.ts

@@ -0,0 +1,4 @@
+export { LineLoader } from './LineLoader';
+export { RecentClearAll } from './RecentClearAll';
+export * from './renderGroupName';
+export {} from './SeeMoreButton';

package/src/common/autocomplete/helper/renderGroupName.tsx

@@ -1,5 +1,4 @@
 import { AutocompleteRenderGroupParams } from '@mui/material';
-
 import { NsTypography, OptionsProps } from '../..';
 
 export const renderGroupName = ({ key, group, children }: AutocompleteRenderGroupParams) => (

package/src/common/autocomplete/mock/MockData.ts

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import { OptionsProps } from '../types';
 
 export const AutocompleteMockList: OptionsProps[] = [
@@ -6,19 +5,19 @@ export const AutocompleteMockList: OptionsProps[] = [
         id: '1',
         value: 'GS Facial Gels 2pk Subscription',
         group: 'Popular Searches',
-        image: 'https://www.nuskin.com/content/products/86/99/01/86990168/_jcr_content/fullImage.img.160.160.png.64.64.png',
+        image: 'https://www.nuskin.com/content/products/86/99/01/86990168/_jcr_content/fullImage.img.160.160.png.64.64.png'
     },
     {
         id: '2',
         value: 'GS Facial',
         group: 'Popular Searches',
-        image: 'https://www.nuskin.com/content/products/01/55/00/01550014/_jcr_content/fullImage.img.160.160.png.64.64.png',
+        image: 'https://www.nuskin.com/content/products/01/55/00/01550014/_jcr_content/fullImage.img.160.160.png.64.64.png'
     },
     {
         id: '3',
         value: 'GS Facial Spa',
         group: 'Popular Searches',
-        image: 'https://www.nuskin.com/content/products/01/10/12/01101251/_jcr_content/fullImage.img.160.160.png.64.64.png',
+        image: 'https://www.nuskin.com/content/products/01/10/12/01101251/_jcr_content/fullImage.img.160.160.png.64.64.png'
     },
     {
         id: '4',
@@ -26,7 +25,7 @@ export const AutocompleteMockList: OptionsProps[] = [
         group: 'Popular Searches',
         image: 'https://www.nuskin.com/content/products/01/55/00/01550013/_jcr_content/fullImage.img.160.160.png.64.64.png',
         icon: 'cart',
-        groupBgColor: '#000',
+        groupBgColor: '#000'
     },
     {
         id: '5',
@@ -34,7 +33,7 @@ export const AutocompleteMockList: OptionsProps[] = [
         group: 'Popular Searches',
         image: 'https://www.nuskin.com/content/products/86/99/01/86990100/_jcr_content/fullImage.img.160.160.png.64.64.png',
         icon: 'cart',
-        groupBgColor: '#000',
+        groupBgColor: '#000'
     },
     {
         id: '6',
@@ -42,26 +41,26 @@ export const AutocompleteMockList: OptionsProps[] = [
         group: 'Popular Searches',
         image: 'https://www.nuskin.com/content/products/01/00/16/01001647/jcr:content/fullImage.img.160.160.png/1611763135883-cache.png.64.64.png',
         icon: 'cart',
-        groupBgColor: '#000',
+        groupBgColor: '#000'
     },
 
     {
         id: '7',
         value: 'Rejuvenating Cream',
         group: 'Popular Searches',
-        image: 'https://www.nuskin.com/content/products/86/99/01/86990168/_jcr_content/fullImage.img.160.160.png.64.64.png',
+        image: 'https://www.nuskin.com/content/products/86/99/01/86990168/_jcr_content/fullImage.img.160.160.png.64.64.png'
     },
     {
         id: '8',
         value: 'Epoch® Firewalker® Foot Cream',
         group: 'Popular Searches',
-        image: 'https://www.nuskin.com/content/products/01/55/00/01550014/_jcr_content/fullImage.img.160.160.png.64.64.png',
+        image: 'https://www.nuskin.com/content/products/01/55/00/01550014/_jcr_content/fullImage.img.160.160.png.64.64.png'
     },
     {
         id: '9',
         value: 'Tri-Phasic White® Night Cream',
         group: 'Popular Searches',
-        image: 'https://www.nuskin.com/content/products/01/10/12/01101251/_jcr_content/fullImage.img.160.160.png.64.64.png',
+        image: 'https://www.nuskin.com/content/products/01/10/12/01101251/_jcr_content/fullImage.img.160.160.png.64.64.png'
     },
     {
         id: '10',
@@ -69,7 +68,7 @@ export const AutocompleteMockList: OptionsProps[] = [
         group: 'Popular Searches',
         image: 'https://www.nuskin.com/content/products/01/55/00/01550013/_jcr_content/fullImage.img.160.160.png.64.64.png',
         icon: 'cart',
-        groupBgColor: '#000',
+        groupBgColor: '#000'
     },
     {
         id: '11',
@@ -77,7 +76,7 @@ export const AutocompleteMockList: OptionsProps[] = [
         group: 'Popular Searches',
         image: 'https://www.nuskin.com/content/products/86/99/01/86990100/_jcr_content/fullImage.img.160.160.png.64.64.png',
         icon: 'cart',
-        groupBgColor: '#000',
+        groupBgColor: '#000'
     },
     {
         id: '12',
@@ -85,6 +84,6 @@ export const AutocompleteMockList: OptionsProps[] = [
         group: 'Popular Searches',
         image: 'https://www.nuskin.com/content/products/01/00/16/01001647/jcr:content/fullImage.img.160.160.png/1611763135883-cache.png.64.64.png',
         icon: 'cart',
-        groupBgColor: '#000',
-    },
+        groupBgColor: '#000'
+    }
 ];

package/src/common/autocomplete/mock/MockUI.tsx

@@ -1,12 +1,11 @@
 /* eslint-disable @next/next/no-img-element */
+import { ListUiProps, NsIcon, NsTypography } from '../..';
 import { ListStyled } from './Mock.styled';
-import { NsTypography } from '../../typography';
-import { NsIcon } from '../../icon';
-import { ListUiProps } from '../types';
 
-const OptionUiComponent = ({ option }: ListUiProps) => {
+const OptionUiComponent = (props: ListUiProps) => {
+    const { option } = props;
     return (
-        <ListStyled>
+        <ListStyled {...props}>
             <div className="item-description" role="link" tabIndex={0}>
                 <NsTypography aria-label="Nu Skin Tumbler" variant="body-m" colorOverride="#63666A">
                     <img src={option.image} alt="No-image" />

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

@@ -32,6 +32,7 @@ export type NsAutocompleteProps = {
         text?: string;
         show?: boolean; //default to false
         onClear: () => void;
+        recentSearchText?: string;
     };
     seeMore?: {
         text?: string;

package/src/common/card/CardButton.tsx

@@ -7,7 +7,7 @@ const CardButton = ({
     buttonText,
     showButton = true,
     buttonVariant = 'outlined',
-    buttonColor = 'secondary',
+    buttonColor = 'primary',
     fullWidth = false,
 }: NsCardButton) => {
     if (showButton && url) {

package/src/common/card/NsAwardCard.tsx

@@ -16,17 +16,18 @@ const CardContainer = styled(Box)(() => {
         display: 'flex',
         flexDirection: 'column',
         position: 'relative',
-        backgroundColor: '#fff',
         alignItems: 'center',
+        width: '160px',
+        height: 'auto',
         '.image': {
-            width: '150px',
+            width: '160px',
             height: 'auto',
             objectFit: 'cover',
-            backgroundColor: 'red',
         },
         '.content': {
             display: 'flex',
             flexDirection: 'column',
+            textAlign: 'center',
             alignItems: 'center',
         },
         '.title': {

package/src/common/card/NsBrandCard.tsx

@@ -49,6 +49,7 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ size }) => {
         },
         '.cta': {
             marginTop: '15px',
+            width: '100%',
         },
         '.image': {
             width,

package/src/common/card/NsHeroCardLevel1.tsx

@@ -11,20 +11,25 @@ type NsHeroCardLevel1Props = {
     backgroundImageAlt: string;
     button?: NsCardButton;
     className?: string;
+    imagePosition?: 'top' | 'bottom';
 };
 
-const CardContainer = styled(Box)(() => {
+const CardContainer = styled((props: any) => <Box {...props} />)(({ imagePosition }) => {
+    const imageDirection = imagePosition === 'top' ? 'column' : 'column-reverse';
+
     return {
         backgroundClip: 'border-box',
         display: 'flex',
-        flexDirection: 'row' as 'row',
         wordWrap: 'break-word' as 'break-word',
         position: 'relative',
         overflow: 'hidden',
-        height: 'auto',
+        width: '100%',
+        height: '500px',
+        flexDirection: 'row',
         '.content': {
             width: '50%',
-            height: '100%',
+            minWidth: '300px',
+            height: '500px',
             padding: '50px',
             paddingLeft: '100px',
             display: 'flex',
@@ -34,10 +39,8 @@ const CardContainer = styled(Box)(() => {
             left: 0,
             boxSizing: 'border-box',
         },
-        '.image': {
-            width: 'auto',
-            height: '100%',
-            display: 'block',
+        '.bg-image': {
+            objectFit: 'cover',
         },
         '.body-title': {
             fontSize: '36px',
@@ -52,10 +55,16 @@ const CardContainer = styled(Box)(() => {
             marginTop: '10px',
         },
         '@media (max-width: 768px)': {
-            display: 'block',
+            '.content': {
+                paddingLeft: '20px',
+            },
+        },
+        '@media (max-width: 430px)': {
             height: 'auto',
             backgroundColor: '#edece9',
+            flexDirection: imageDirection,
             '.content': {
+                height: 'auto',
                 position: 'static',
                 width: '100%',
                 padding: '20px',
@@ -64,19 +73,18 @@ const CardContainer = styled(Box)(() => {
     };
 });
 
-const NsHeroCardLevel1 = ({
+export default function NsHeroCardLevel1({
     cardTitle,
     cardDescription,
     backgroundImageUrl,
     backgroundImageAlt,
     button,
     className,
-}: NsHeroCardLevel1Props) => {
+    imagePosition = 'top',
+}: NsHeroCardLevel1Props) {
     return (
-        <CardContainer className={className} data-testid="hero-card-level-1">
-            <div className="image">
-                <NsImage height={'auto'} width={'100%'} alt={backgroundImageAlt} src={backgroundImageUrl} />
-            </div>
+        <CardContainer className={className} data-testid="hero-card-level-1" imagePosition={imagePosition}>
+            <NsImage variant="fill" alt={backgroundImageAlt} src={backgroundImageUrl} className="bg-image" />
             <div className="content">
                 <article className="body-title">{cardTitle}</article>
                 <article className="body-text">{cardDescription}</article>
@@ -84,5 +92,4 @@ const NsHeroCardLevel1 = ({
             </div>
         </CardContainer>
     );
-};
-export default NsHeroCardLevel1;
+}

package/src/common/card/NsHeroCardLevel2.tsx

@@ -22,7 +22,8 @@ const CardContainer = styled(Box)(() => {
         wordWrap: 'break-word' as 'break-word',
         position: 'relative',
         overflow: 'hidden',
-        height: 'auto',
+        height: '250px',
+        width: '100%',
         '.content': {
             height: '100%',
             padding: '50px',
@@ -33,10 +34,8 @@ const CardContainer = styled(Box)(() => {
             left: 0,
             boxSizing: 'border-box',
         },
-        '.image': {
-            width: 'auto',
-            height: '100%',
-            display: 'block',
+        '.bg-image': {
+            objectFit: 'cover',
         },
         '.brand-container': {
             backgroundColor: '#fff',
@@ -45,29 +44,19 @@ const CardContainer = styled(Box)(() => {
             paddingRight: '10px',
         },
         '.body-title': {
-            fontSize: '36px',
+            fontSize: '26px',
             lineHeight: '44px',
             marginBottom: '5px',
         },
         '.body-text': {
-            fontSize: '18px',
+            fontSize: '12px',
             fontWeight: 700,
             marginBottom: '5px',
         },
-        '@media (max-width: 768px)': {
+        '@media (max-width:768px)': {
             '.content': {
                 padding: '5%',
             },
-            '.body-title': {
-                fontSize: '18px',
-                lineHeight: '44px',
-                marginBottom: '5px',
-            },
-            '.body-text': {
-                fontSize: '12px',
-                fontWeight: 700,
-                marginBottom: '5px',
-            },
         },
     };
 });
@@ -83,9 +72,7 @@ const NsHeroCardLevel2 = ({
 }: NsHeroCardLevel2Props) => {
     return (
         <CardContainer className={className} data-testid="hero-card-level-2">
-            <div className="image">
-                <NsImage height={'auto'} width={'100%'} alt={backgroundImageAlt} src={backgroundImageUrl} />
-            </div>
+            <NsImage variant="fill" alt={backgroundImageAlt} src={backgroundImageUrl} className="bg-image" />
             <div className="content">
                 <div className="brand-container">
                     <article>{brandName}</article>

package/src/common/card/NsLargeCard.tsx

@@ -15,19 +15,21 @@ type NsLargeCardProps = {
     className?: string;
 };
 
-const CardContainer = styled((props: any) => <Box {...props} />)(({ isHorizontal }) => {
-    let width = '375px',
+const CardContainer = styled((props: any) => <Box {...props} />)(({ isHorizontal, matches }) => {
+    let width = '450px',
         paddingLeft = '0px',
         justifyContent,
         fontSizeSub = '16px',
-        fontSizeTitle = '26px';
+        fontSizeTitle = '26px',
+        imageWidth = '100%';
 
     if (isHorizontal) {
-        width = 'unset';
+        width = '600px';
         paddingLeft = '30px';
         justifyContent = 'center';
         fontSizeSub = '16px';
-        fontSizeTitle = '36px';
+        fontSizeTitle = '26px';
+        imageWidth = '50%';
     }
     let direction = isHorizontal ? ('row' as 'row') : ('column' as 'column');
 
@@ -36,10 +38,10 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ isHorizontal
         flexDirection: direction,
         position: 'relative',
         width,
-        '.image': {
-            width: '375px',
-            height: 'auto',
+        '.bg-image': {
             objectFit: 'cover',
+            height: '220px',
+            width: imageWidth,
         },
         '.content': {
             display: 'flex',
@@ -60,6 +62,9 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ isHorizontal
         '.cta': {
             marginTop: '10px',
         },
+        '@media (max-width: 768px)': {
+            width: '100%',
+        },
     };
 });
 
@@ -81,7 +86,7 @@ export default function NsLargeCard({
             data-testid="large-card"
             isHorizontal={isHorizontal}
         >
-            <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="image" />
+            <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="bg-image" />
             <div className="content">
                 <article className="subtitle">{subtitle}</article>
                 <article className="title">{title}</article>

package/src/common/card/NsPost.tsx

@@ -18,20 +18,25 @@ const CardContainer = styled(Box)(() => {
         wordWrap: 'break-word' as 'break-word',
         position: 'relative',
         overflow: 'hidden',
-        height: 'auto',
-        width: '200px',
+        height: '350px',
+        width: '210px',
         backgroundColor: '#fff',
         '.content': {
             padding: '10px',
             display: 'flex',
             flexDirection: 'column',
-            minHeight: '150px',
+            minHeight: '80px',
             justifyContent: 'space-between',
         },
         '.body-title': {
             fontSize: '18px',
             marginBottom: '5px',
             fontWeight: 600,
+            display: '-webkit-box',
+            '-webkit-box-orient': 'vertical',
+            '-webkit-line-clamp': '3',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
         },
         '.body-text': {
             fontSize: '12px',

package/src/common/card/NsSmallFullCard.tsx

@@ -17,8 +17,8 @@ const CardContainer = styled(Box)(() => {
     return {
         backgroundColor: '#fff',
         display: 'flex',
-        height: '320px',
-        width: '375px',
+        height: '275px',
+        width: '250px',
         position: 'relative',
         '.image': {
             width: '100%',
@@ -49,7 +49,7 @@ const CardContainer = styled(Box)(() => {
         },
         '.title': {
             color: '#fff',
-            fontSize: '26px',
+            fontSize: '22px',
             fontWeight: '400',
             marginTop: '20px',
         },

package/src/common/card/NsXLargeCard.tsx

@@ -17,8 +17,8 @@ const CardContainer = styled(Box)(() => {
     return {
         backgroundColor: '#fff',
         display: 'flex',
-        height: '545px',
-        width: '375px',
+        height: '620px',
+        width: '450px',
         position: 'relative',
         '.image': {
             width: '100%',

package/src/common/card/cardSizes.ts

@@ -1,11 +1,11 @@
 const cardSizes = {
     small: {
-        width: '165px',
-        height: '180px',
+        width: '180px',
+        height: '200px',
     },
     large: {
-        width: '190px',
-        height: '220px',
+        width: '220px',
+        height: '250px',
     },
 };
 

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

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

@@ -26,6 +26,7 @@ export const Default: Story = {
             buttonColor: 'primary',
             endIcon: 'cart',
             url: '#',
+            fullWidth: true,
         },
     },
 };

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

@@ -27,5 +27,6 @@ export const Default: Story = {
             buttonColor: 'primary',
             url: '#',
         },
+        imagePosition: 'bottom',
     },
 };

package/src/common/autocomplete/helper/AutoCompleteButton.tsx

@@ -1,24 +0,0 @@
-import { NsButton, NsTypography } from '../..';
-
-type AutoCompleteButtonProps = {
-    text: string;
-    show: boolean;
-    onClick(): void;
-    testId?: string;
-};
-
-export const AutoCompleteButton = (props: AutoCompleteButtonProps) => {
-    const { show, onClick, text, testId } = props;
-    if (!show) {
-        return null;
-    }
-    return (
-        <li className="text-right p-3">
-            <NsButton onClick={onClick} data-testid={testId}>
-                <NsTypography variant="body-xs" weight="bold">
-                    {text}
-                </NsTypography>
-            </NsButton>
-        </li>
-    );
-};