@nuskin/foundation-ui-components 1.16.0-cx130-990.2 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.16.0-cx130-990.2",
+    "version": "1.17.0",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {
@@ -102,6 +102,5 @@
     "files": [
         "src/common"
     ],
-    "readme": "./README.md",
-    "packageManager": "yarn@3.6.3"
+    "readme": "./README.md"
 }

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/dropdown/NsDropdown.spec.tsx

@@ -4,12 +4,15 @@ import NsDropdown from './NsDropdown';
 import NsDropdownOption from './NsDropdownOption';
 
 function createDropdownOptions(options: { value: string; label: string }[]) {
-    return options.map((option) => <NsDropdownOption key={option.value} value={option.value} label={option.label} />);
+    return options.map((option) => (
+        <NsDropdownOption key={option.value} value={option.value}>
+            {option.label}
+        </NsDropdownOption>
+    ));
 }
 
 describe('NsDropdown', () => {
     const onSelect = jest.fn();
-    const selectedValue = '';
     const selectedLabel = '';
 
     const options = [
@@ -18,14 +21,9 @@ describe('NsDropdown', () => {
         { value: 'Option 3', label: 'Option 3' },
     ];
 
-    it('renders the placeholder text when no value is selected', () => {
+    it('1. Should render the placeholder text when no value is selected', () => {
         render(
-            <NsDropdown
-                placeholder="Select an option"
-                selectedValue={selectedValue}
-                selectedLabel={selectedLabel}
-                onSelect={onSelect}
-            >
+            <NsDropdown placeholder="Select an option" selectedLabel={selectedLabel} onSelect={onSelect}>
                 {createDropdownOptions(options)}
             </NsDropdown>
         );
@@ -33,20 +31,23 @@ describe('NsDropdown', () => {
         expect(screen.getByText('Select an option')).toBeInTheDocument();
     });
 
-    it('renders the selected value label', () => {
-        const selectedLabel = 'Option 1';
+    it('2. Should render the selected value label', () => {
         render(
-            <NsDropdown selectedValue="Option 1" selectedLabel={selectedLabel} onSelect={onSelect}>
+            <NsDropdown selectedLabel={selectedLabel} onSelect={onSelect}>
                 {createDropdownOptions(options)}
             </NsDropdown>
         );
+        const dropdownHead = screen.getByTestId('dropdown-head');
+        fireEvent.click(dropdownHead);
+        const dropdownOptionContainer = screen.getByTestId('dropdown-option-container-0');
 
-        expect(screen.getByText(selectedLabel)).toBeInTheDocument();
+        fireEvent.click(dropdownOptionContainer);
+        expect(onSelect).toHaveBeenCalledWith('Option 1');
     });
 
-    it('dropdown opens and closes on click', () => {
+    it('3. Should open and close Dropdown on click', () => {
         render(
-            <NsDropdown selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect}>
+            <NsDropdown selectedLabel={selectedLabel} onSelect={onSelect}>
                 {createDropdownOptions(options)}
             </NsDropdown>
         );
@@ -64,14 +65,9 @@ describe('NsDropdown', () => {
         expect(screen.queryByTestId('option-Option 3')).not.toBeInTheDocument();
     });
 
-    it('dropdown closes on mouse leave when closeOnMouseLeave is set to true', async () => {
+    it('4. Should close dropdown on mouse leave when closeOnMouseLeave is set to true', async () => {
         render(
-            <NsDropdown
-                closeOnMouseLeave
-                selectedValue={selectedValue}
-                selectedLabel={selectedLabel}
-                onSelect={onSelect}
-            >
+            <NsDropdown closeOnMouseLeave selectedLabel={selectedLabel} onSelect={onSelect}>
                 {createDropdownOptions(options)}
             </NsDropdown>
         );
@@ -88,14 +84,9 @@ describe('NsDropdown', () => {
             expect(screen.queryByTestId('option-Option 3')).not.toBeInTheDocument();
         });
     });
-    it('dropdown does not close on mouse leave when closeOnMouseLeave is set to false', () => {
+    it('5. Should not close dropdown on mouse leave when closeOnMouseLeave is set to false', () => {
         render(
-            <NsDropdown
-                selectedValue={selectedValue}
-                selectedLabel={selectedLabel}
-                onSelect={onSelect}
-                closeOnMouseLeave={false}
-            >
+            <NsDropdown selectedLabel={selectedLabel} onSelect={onSelect} closeOnMouseLeave={false}>
                 {createDropdownOptions(options)}
             </NsDropdown>
         );
@@ -110,9 +101,9 @@ describe('NsDropdown', () => {
         expect(screen.getByTestId('option-Option 2')).toBeInTheDocument();
         expect(screen.getByTestId('option-Option 3')).toBeInTheDocument();
     });
-    it('dropdown does not open when disabled', () => {
+    it('6. Should not open dropdown when disabled is set to true', () => {
         render(
-            <NsDropdown selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect} disabled>
+            <NsDropdown selectedLabel={selectedLabel} onSelect={onSelect} disabled>
                 {createDropdownOptions(options)}
             </NsDropdown>
         );
@@ -122,4 +113,14 @@ describe('NsDropdown', () => {
 
         expect(screen.queryByTestId('dropdown-list')).not.toBeInTheDocument();
     });
+    it('7. Should apply no border style when type is not outlined', () => {
+        render(
+            <NsDropdown selectedLabel={selectedLabel} onSelect={onSelect} type="unfilled">
+                {createDropdownOptions(options)}
+            </NsDropdown>
+        );
+
+        const dropdownHead = screen.getByTestId('dropdown-head');
+        expect(dropdownHead).toHaveStyle('border: none');
+    });
 });

package/src/common/dropdown/NsDropdown.styled.tsx

@@ -6,6 +6,7 @@ export const DropdownContainer = styled.div<{ disabled: boolean }>`
     position: relative;
     display: inline-block;
     opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
+    cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
 `;
 
 /** this function also used for SelectHead */
@@ -22,7 +23,7 @@ export const DropdownHead = styled.div<{ type: string; disabled: boolean }>`
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border: ${getDropdownHeadBorder}
+    border: ${getDropdownHeadBorder};
     color: ${paletteColor('primary')};
 `;
 
@@ -37,39 +38,29 @@ export const DropdownList = styled.div<{ borderColor: FoundationTheme.PaletteCol
     position: absolute;
     z-index: 100;
     border: 1px solid ${({ borderColor, theme }) => paletteColor(borderColor)({ theme })};
-    padding: 0;
-    margin: 0;
+    margin-top: 10px;
     width: 100%;
     color: ${paletteColor('primary', 'main')};
     background-color: ${paletteColor('primary', 'contrastText')};
 `;
 
-const getDividerColor = (theme: FoundationTheme.Theme) => {
-    return color('neutral', isDarkMode({ theme }) ? '20' : '30')({ theme });
-};
 const getListBgColor = (theme: FoundationTheme.Theme) => {
     return color('accentColorB', isDarkMode({ theme }) ? '50' : '10')({ theme });
 };
-export const ListItemContainer = styled.div<{ showListDivider: boolean }>`
-    cursor: pointer;
-    padding: 5px 0;
-    border-bottom: 1px solid ${({ showListDivider, theme }) => (showListDivider ? getDividerColor(theme) : 'none')};
-
-    &:hover {
-        background-color: ${({ theme }) => getListBgColor(theme)};
-    }
 
+export const DropdownOptionContainer = styled.div`
+    cursor: pointer;
     &:last-child {
         border-bottom: none;
     }
 `;
 
-const getBorder = ({ isSelected, theme }: { isSelected: boolean } & Themed) => {
-    const borderColor = paletteColor('primary')({ theme });
-    return isSelected ? `2px solid ${borderColor}` : 'none';
-};
-
-export const ListItem = styled.span<{ isSelected: boolean }>`
-    padding: 5px 10px;
-    border-left: ${getBorder};
+export const ListItem = styled.div`
+    &:hover {
+        background-color: ${({ theme }) => getListBgColor(theme)};
+    }
+    &:active {
+        background-color: #7de3e8;
+    }
+    padding: 10px;
 `;

package/src/common/dropdown/NsDropdown.tsx

@@ -1,24 +1,28 @@
 import React, { useCallback, useRef, useState } from 'react';
 
-import { DropdownContainer, DropdownButton, DropdownList, DropdownHead } from './NsDropdown.styled';
+import {
+    DropdownContainer,
+    DropdownButton,
+    DropdownList,
+    DropdownHead,
+    DropdownOptionContainer,
+} from './NsDropdown.styled';
 import { NsIcon } from '../icon';
 import { DropdownProps } from './types.d';
 import { useOnClickOutside } from '../hooks/useOnClickOutside';
 
 const NsDropdown: React.FC<DropdownProps> = ({
-    selectedValue,
     selectedLabel,
     onSelect,
     children,
     disabled = false,
     type = 'outlined',
-    placeholder = 'Select',
     dropdownBorderColor = 'accentColorB',
     closeOnMouseLeave = false,
-    showListDivider = true,
+    className,
+    placeholder,
 }) => {
     const [isOpen, setIsOpen] = useState(false);
-    const [value, setValue] = useState(selectedValue || '');
     const dropdownRef = useRef<HTMLDivElement | null>(null);
 
     const handleToggle = useCallback(() => {
@@ -41,31 +45,45 @@ const NsDropdown: React.FC<DropdownProps> = ({
     const handleSelect = (input: string) => {
         onSelect(input);
         setIsOpen(false);
-        setValue(input);
     };
 
     return (
-        <DropdownContainer disabled={disabled} ref={dropdownRef}>
-            <DropdownHead data-testid="dropdown-head" disabled={disabled} type={type} onClick={handleToggle}>
+        <DropdownContainer disabled={disabled} ref={dropdownRef} className={className}>
+            <DropdownHead
+                data-testid="dropdown-head"
+                id="dropdown-head"
+                disabled={disabled}
+                type={type}
+                onClick={handleToggle}
+            >
                 <DropdownButton>{selectedLabel || placeholder}</DropdownButton>
-                <NsIcon testId="chevron-icon" name="arrowDown" color="primary" />
+                <NsIcon
+                    testId="chevron-icon"
+                    id="chevron-icon"
+                    name="arrowDown"
+                    color="primary"
+                    cursor={disabled ? 'not-allowed' : 'pointer'}
+                />
             </DropdownHead>
             {isOpen ? (
                 <DropdownList
                     data-testid="dropdown-list"
+                    id="dropdown-list"
                     onMouseLeave={handleOnMouseLeave}
                     borderColor={dropdownBorderColor}
                 >
-                    {React.Children.map(children, (child) => {
-                        if (React.isValidElement(child)) {
-                            return React.cloneElement(child, {
-                                // @ts-ignore
-                                onSelect: handleSelect,
-                                selectedValue: value,
-                                showListDivider,
-                            });
-                        }
-                        return null;
+                    {children.map((child, key) => {
+                        const value = React.isValidElement(child) ? child.props.value : child;
+                        return (
+                            <DropdownOptionContainer
+                                data-testid={`dropdown-option-container-${key}`}
+                                className="dropdown-option-container"
+                                key={key}
+                                onClick={() => handleSelect(value)}
+                            >
+                                {child}
+                            </DropdownOptionContainer>
+                        );
                     })}
                 </DropdownList>
             ) : null}

package/src/common/dropdown/NsDropdownOption.tsx

@@ -1,24 +1,12 @@
 import React from 'react';
-import { ListItem, ListItemContainer } from './NsDropdown.styled';
 import { DropdownOptionProps } from './types.d';
+import { ListItem } from './NsDropdown.styled';
 
-export const NsDropdownOption: React.FC<DropdownOptionProps> = ({
-    value,
-    label,
-    onSelect,
-    selectedValue,
-    showListDivider = true,
-}) => {
-    const handleClick = () => {
-        if (onSelect && typeof onSelect === 'function') {
-            onSelect(value);
-        }
-    };
-
+export const NsDropdownOption: React.FC<DropdownOptionProps> = ({ value, children }) => {
     return (
-        <ListItemContainer data-testid={`option-${value}`} showListDivider={showListDivider} onClick={handleClick}>
-            <ListItem isSelected={value === selectedValue}>{label}</ListItem>
-        </ListItemContainer>
+        <ListItem data-testid={`option-${value}`} id="dropdown-item">
+            {children}
+        </ListItem>
     );
 };
 export default NsDropdownOption;

package/src/common/dropdown/stories/NsDropdown.stories.tsx

@@ -20,7 +20,6 @@ export default {
         },
         placeholder: { control: 'text' },
         closeOnMouseLeave: { control: 'boolean' },
-        showListDivider: { control: 'boolean' },
     },
     parameters: {
         options: [
@@ -34,19 +33,16 @@ export default {
         disabled: false,
         dropdownBorderColor: 'primary',
         closeOnMouseLeave: false,
-        showListDivider: true,
-        selectedValue: '',
         selectedLabel: '',
+        placeholder: 'options',
     },
 } as MetaStory;
 
 const RenderStory = (args: any, context: any) => {
     const [selectedLabel, setSelectedLabel] = useState(args.selectedLabel);
-    const [selectedValue, setSelectedValue] = useState(args.selectedValue);
 
     const options = context.parameters.options;
     const handleSelect = (value: string) => {
-        setSelectedValue(value);
         options.find((option: any) => {
             if (option.value === value) {
                 setSelectedLabel(option.label);
@@ -55,9 +51,11 @@ const RenderStory = (args: any, context: any) => {
     };
 
     return (
-        <NsDropdown {...args} selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={handleSelect}>
+        <NsDropdown {...args} selectedLabel={selectedLabel} onSelect={handleSelect}>
             {options.map((option: any) => (
-                <NsDropdownOption key={option.value} value={option.value} label={option.label} />
+                <NsDropdownOption key={option.value} value={option.value}>
+                    {option.label}
+                </NsDropdownOption>
             ))}
         </NsDropdown>
     );

package/src/common/dropdown/stories/NsDropdownCountry.stories.tsx

@@ -20,7 +20,6 @@ export default {
         },
         placeholder: { control: 'text' },
         closeOnMouseLeave: { control: 'boolean' },
-        showListDivider: { control: 'boolean' },
     },
     parameters: {
         options: [
@@ -30,23 +29,19 @@ export default {
         ],
     },
     args: {
-        selectedValue: 'english',
         selectedLabel: 'United States (US) | English',
         type: 'unfilled',
         disabled: false,
         dropdownBorderColor: 'accentColorB',
         closeOnMouseLeave: true,
-        showListDivider: true,
     },
 } as MetaStory;
 
 const RenderStory = (args: any, context: any) => {
     const [selectedLabel, setSelectedLabel] = useState(args.selectedLabel);
-    const [selectedValue, setSelectedValue] = useState(args.selectedValue);
 
     const options = context.parameters.options;
     const handleSelect = (value: string) => {
-        setSelectedValue(value);
         options.find((option: any) => {
             if (option.value === value) {
                 setSelectedLabel(`${option.country} | ${option.label}`);
@@ -55,9 +50,11 @@ const RenderStory = (args: any, context: any) => {
     };
 
     return (
-        <NsDropdown {...args} selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={handleSelect}>
+        <NsDropdown {...args} selectedLabel={selectedLabel} onSelect={handleSelect}>
             {options.map((option: any) => (
-                <NsDropdownOption key={option.value} value={option.value} label={option.label} />
+                <NsDropdownOption key={option.value} value={option.value}>
+                    {option.label}
+                </NsDropdownOption>
             ))}
         </NsDropdown>
     );

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

@@ -4,22 +4,20 @@ import { FoundationTheme } from '@nuskin/foundation-theme';
 import { AdditionalProps } from '../common.types';
 
 export interface DropdownProps extends AdditionalProps {
-    selectedValue: string;
-    selectedLabel: string;
-    onSelect: (arg: string) => void; // eslint-disable-line
-    children: ReactNode;
+    selectedLabel: ReactNode;
+    onSelect: (arg: ReactNode) => void; // eslint-disable-line
+    children: ReactNode[];
     disabled?: boolean;
     type?: 'outlined' | 'unfilled';
     placeholder?: string;
     dropdownBorderColor?: FoundationTheme.PaletteColors;
     closeOnMouseLeave?: boolean;
     showListDivider?: boolean;
+    className?: string;
+    placeholder?: string;
 }
 
 export interface DropdownOptionProps {
     value: string;
-    label: string;
-    selectedValue?: string;
-    onSelect?: (arg: string) => void; // eslint-disable-line
-    showListDivider?: boolean;
+    children: ReactNode;
 }

package/src/common/text-strip/NsTextStrip.tsx

@@ -33,7 +33,7 @@ const NsTextStrip = (props: NsTextStripProps) => {
 
     return (
         <StyledHeader className={`${className} items-${alignment}`}>
-            <NsTypography variant="title-l">
+            <NsTypography variant="title-m" className="tracking-normal">
                 {text}
             </NsTypography>
             <NsTypography variant="body-xs">

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

@@ -170,7 +170,7 @@ const getVariantStyle = (
 
 export const StyledTypography = styled('div')<NsTypographyProps>(
     ({ theme, weight, variant, noSpacing, decoration, color, colorOverride }) => {
-        const fontStyles: TypographyConfig = getVariantStyle(theme.fonts.typographyVariants, variant) || {};
+        const fontStyles: TypographyConfig = getVariantStyle(theme?.fonts?.typographyVariants, variant) || {};
         if (noSpacing) {
             fontStyles.paragraphSpacing = 0;
         }