@nuskin/foundation-ui-components 1.1.0 → 1.2.0

package/src/common/button/NsButton.styled.tsx

@@ -4,6 +4,8 @@ import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
 import { ButtonConfig } from '@nuskin/foundation-theme/src/common/themes/types/button';
 
 import { NsButtonProps } from './types.d';
+import { generateContainedStyle, generateIconOnlyStyles, generateOutlinedStyle, generateTextStyles } from './helper';
+import { skipDarkModeEnabled } from '../util';
 
 const { buttonColor, paletteColor } = ColorUtils;
 
@@ -11,79 +13,60 @@ const getButtonConfig = (theme: FoundationTheme.Theme, attribute: keyof ButtonCo
     const { config } = theme || {};
     return config?.components?.button?.[attribute] || '';
 };
-
-const StyledButton = styled(MUIButton)<NsButtonProps>`
+const options = {
+    shouldForwardProp: skipDarkModeEnabled,
+};
+const StyledButton = styled(MUIButton, options)<NsButtonProps>`
     gap: 10px;
-    border-radius: ${({ theme }) => getButtonConfig(theme, 'borderRadius')} || 0;
-    :focus {
+    border-radius: ${({ theme }) => {
+        const borderRadius = getButtonConfig(theme, 'borderRadius');
+        return borderRadius || 0;
+    }};
+
+    &:focus {
         border: 1px solid ${({ theme }) => getButtonConfig(theme, 'focusColor')} !important;
     }
-    :disabled {
-        background-color: ${(btnProps) => buttonColor(btnProps?.color, 'disabled')};
-        color: ${(btnProps) => buttonColor(btnProps?.color, 'disabledText')};
+
+    &:disabled {
+        background-color: ${({ color }) => buttonColor(color, 'disabled')};
+        color: ${({ color }) => buttonColor(color, 'disabledText')};
     }
+
     ${({ theme: { config }, size }) => {
-        return size === 'medium' ? config?.components?.button?.size?.medium?.padding : '';
-    }}
-    ${({ theme: { config }, size }) => {
-        return size === 'large' ? config?.components?.button?.size?.large?.padding : '';
+        if (size === 'medium') {
+            return config?.components?.button?.size?.medium?.padding;
+        } else if (size === 'large') {
+            return config?.components?.button?.size?.large?.padding;
+        } else {
+            return '';
+        }
     }}
-    ${({ variant, theme, color = 'primary', darkModeEnabled }) => {
-        return variant === 'contained'
-            ? `
-                background-color: ${paletteColor(color)({ theme, darkModeEnabled })};
-                color: ${paletteColor(color, 'contrastText')({ theme, darkModeEnabled })} !important;
-                :hover {
-                    background-color: ${buttonColor(color, 'hovered')({ theme })};
-                }
-                :active {
-                    background-color: ${buttonColor(color, 'pressed')({ theme })};
-                }
-                :focus {
-                    background-color: ${buttonColor(color, 'focused')({ theme })};
-                }
-            `
-            : '';
+
+    ${({ variant, theme, color = 'primary', darkModeEnabled, iconOnly }) => {
+        if (variant === 'contained') {
+            const hovered = buttonColor(color, 'hovered')({ theme });
+            const pressed = buttonColor(color, 'pressed')({ theme });
+            const focused = buttonColor(color, 'focused')({ theme });
+            const textColor = paletteColor(color, 'contrastText')({ theme, darkModeEnabled });
+            const backgroundColor = paletteColor(color)({ theme, darkModeEnabled });
+            return generateContainedStyle({ backgroundColor, textColor, hovered, pressed, focused });
+        } else if (variant === 'outlined') {
+            const borderColor = paletteColor(color)({ theme, darkModeEnabled });
+            const activeColor = paletteColor(color)({ theme });
+            const hovered = buttonColor(color, 'hovered')({ theme });
+            const pressed = buttonColor(color, 'pressed')({ theme });
+            return generateOutlinedStyle({ borderColor, hovered, pressed, activeColor });
+        } else if (variant === 'text') {
+            const underlineColor = paletteColor(color)({ theme, darkModeEnabled });
+            const hovered = buttonColor(color, 'hovered')({ theme });
+            const pressed = buttonColor(color, 'pressed')({ theme });
+            return generateTextStyles({ underlineColor, hovered, pressed });
+        } else if (iconOnly) {
+            return generateIconOnlyStyles();
+        } else {
+            return '';
+        }
     }}
-  ${({ variant, theme, color = 'primary', darkModeEnabled }) =>
-        variant === 'outlined' &&
-        `
-            border-color: ${paletteColor(color)({ theme, darkModeEnabled })};
-            color: ${paletteColor(color)({ theme, darkModeEnabled })};
-            :hover {
-                border-color: ${buttonColor(color, 'hovered')({ theme })};
-                color: ${paletteColor(color)({ theme, darkModeEnabled })};
-            }
-            :active {
-                border-color: ${buttonColor(color, 'pressed')({ theme })};
-                color: ${paletteColor(color)({ theme })};
-            }
-        `}
-  ${({ variant, theme, color = 'primary', darkModeEnabled }) =>
-        variant === 'text' &&
-        `
-            text-decoration: underline 1px !important;
-            text-underline-offset: 4px;
-            padding: 0;
-            min-width: auto;
-            background-color: transparent !important;
-            text-decoration-color: ${paletteColor(color)({ theme, darkModeEnabled })};
-            color: ${paletteColor(color)({ theme, darkModeEnabled })};
-            :hover {
-                color:  ${buttonColor(color, 'hovered')({ theme })};
-                text-decoration-color:  ${buttonColor(color, 'hovered')({ theme })};
-            }
-            :active {
-                color: ${paletteColor(color)};
-                text-decoration-color:  ${buttonColor(color, 'pressed')({ theme })};
-            }
-        `}
-  ${({ iconOnly }) =>
-        iconOnly &&
-        `
-            padding: 10px;
-            min-width: unset;
-        `}
 `;
 
 export default StyledButton;

package/src/common/button/NsButton.tsx

@@ -4,12 +4,11 @@ import { useTheme } from '@mui/material/styles';
 import StyledButton from './NsButton.styled';
 
 import { NsButtonProps } from './types.d';
-import { FoundationTheme } from '@nuskin/foundation-theme';
 
 const NsButton = ({ children, darkModeEnabled = true, ...props }: PropsWithChildren<NsButtonProps>) => {
     const { color } = props;
     const { palette } = useTheme();
-    const btnColor = (color && palette?.[color] ? color : 'primary') as FoundationTheme.PaletteColors;
+    const btnColor = color && palette?.[color] ? color : 'primary';
     return (
         <StyledButton {...props} color={btnColor} disableRipple darkModeEnabled={darkModeEnabled}>
             {children}

package/src/common/button/helper.ts

@@ -0,0 +1,82 @@
+type ContainedParams = {
+    backgroundColor: string;
+    textColor: string;
+    hovered: string;
+    pressed: string;
+    focused: string;
+};
+
+export function generateContainedStyle({
+    backgroundColor,
+    textColor,
+    hovered,
+    pressed,
+    focused,
+}: ContainedParams): string {
+    return `
+		background-color: ${backgroundColor};
+		color: ${textColor} !important;
+		&:hover {
+			background-color: ${hovered};
+		}
+		&:active {
+			background-color: ${pressed};
+		}
+		&:focus {
+			background-color: ${focused};
+		}
+	`;
+}
+type OutlinedParams = {
+    borderColor: string;
+    hovered: string;
+    pressed: string;
+    activeColor: string;
+};
+export function generateOutlinedStyle({ borderColor, hovered, pressed, activeColor }: OutlinedParams) {
+    return `
+		border-color: ${borderColor};
+		color: ${borderColor};
+		&:hover {
+				border-color: ${hovered};
+				color: ${borderColor};
+		}
+		&:active {
+				border-color: ${pressed};
+				color: ${activeColor};
+		}
+`;
+}
+
+type TextParams = {
+    underlineColor: string;
+    hovered: string;
+    pressed: string;
+};
+
+export function generateTextStyles({ underlineColor, hovered, pressed }: TextParams): string {
+    return `
+    text-decoration: underline 1px !important;
+    text-underline-offset: 4px;
+    padding: 0;
+    min-width: auto;
+    background-color: transparent !important;
+    text-decoration-color: ${underlineColor};
+    color: ${underlineColor};
+    &:hover {
+      color: ${hovered};
+      text-decoration-color: ${hovered};
+    }
+    &:active {
+      color: ${underlineColor};
+      text-decoration-color: ${pressed};
+    }
+  `;
+}
+
+export function generateIconOnlyStyles() {
+    return `
+			padding: 10px;
+	    min-width: unset;
+    `;
+}

package/src/common/card/NsFfgCard.tsx

@@ -2,15 +2,21 @@ import { NsNextImage, NsLink } from '../';
 import { NsFfgStyled } from './styled/NsFfgStyled';
 import { NsFfgCardProps } from './types.d';
 
-const NsFfgCard = ({ actionText, actionLink, text, topImageUrl, topImageAlt, additionalProps }: NsFfgCardProps) => {
+const NsFfgCard = ({ cardLink, text, topImageUrl, topImageAlt, additionalProps, cslp, onClick }: NsFfgCardProps) => {
     return (
-        <NsFfgStyled data-testid={additionalProps?.testid}>
-            <div className="top-image">
+        <NsFfgStyled
+            data-testid={additionalProps?.testid}
+            onClick={onClick}
+            className={additionalProps?.className ?? ''}
+        >
+            <header className="top-image">
                 <NsNextImage height={192} width={288} alt={topImageAlt} src={topImageUrl} />
-            </div>
-            <div className="body-text">{text}</div>
-            <NsLink className="action-link" href={actionLink}>
-                {actionText || 'LEARN MORE'}
+            </header>
+            <article className="body-text" {...cslp?.card_text}>
+                {text}
+            </article>
+            <NsLink className="action-link" href={cardLink.href} additionalProps={cslp?.action_text}>
+                {cardLink.title || 'LEARN MORE'}
             </NsLink>
         </NsFfgStyled>
     );

package/src/common/card/specs/NsFfgCard.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import NsFfgCard from '../NsFfgCard';
 
 describe('NsFfgCard component', () => {
@@ -6,18 +6,28 @@ describe('NsFfgCard component', () => {
         topImageUrl: 'https://media.nuskin.com/m/6245528b8f76ad32/webimage-brand-ageLOC.png',
         topImageAlt: 'alt-text',
         text: 'card text',
-        actionLink: 'https://www.google.com',
+        cardLink: { href: 'https://www.google.com', title: 'Test' },
+        onClick: jest.fn(),
     };
-    it('renders with background image', () => {
+    it('1. renders with background image', () => {
         render(<NsFfgCard {...props} additionalProps={{ testid: 'ffg-card' }} />);
         const card = screen.getByTestId('ffg-card');
         expect(card).toHaveStyle(`
-    			background-color: #fff;
-    		`);
+          background-color: #fff;
+        `);
     });
-    it('renders with cover size', () => {
-        render(<NsFfgCard {...props} additionalProps={{ testid: 'ffg-card-1' }} actionText="Details" />);
-        const card = screen.getByText('Details');
+    it('2. renders with cover size', () => {
+        render(<NsFfgCard {...props} additionalProps={{ testid: 'ffg-card-1' }} />);
+        const card = screen.getByText(props.cardLink.title);
         expect(card).toBeInTheDocument();
     });
+    it('3. calls onclick', () => {
+        const handler = jest.fn();
+        const { getByTestId } = render(
+            <NsFfgCard {...props} onClick={handler} additionalProps={{ testid: 'ffg-card-1' }} />
+        );
+        const card = getByTestId('ffg-card-1');
+        fireEvent.click(card);
+        expect(handler).toHaveBeenCalled();
+    });
 });

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

@@ -11,30 +11,63 @@ type MetaStory = Meta<ComponentType>;
 export default {
     component: NsFfgCard,
     title: 'Components/Containers/Card/NsFfgCard',
-    argTypes: {},
+    argTypes: {
+        onClick: {
+            action: 'clicked',
+        },
+    },
     decorators: [withCenterDecorator],
 } as MetaStory;
 
+const text = `Every child deserves a chance to shine. Through our Nu Skin Force for Good Foundation,
+ we’re empowering children around the world with hope for a brighter future.`;
+const host = 'https://images.contentstack.io/v3/assets';
+
 export const Default: Story = {
     args: {
-        actionText: 'LEARN MORE',
-        actionLink: 'https://www.forceforgood.org/',
-        text: 'Every child deserves a chance to shine. Through our Nu Skin Force for Good Foundation, we’re empowering children around the world with hope for a brighter future.',
-        topImageUrl:
-            'https://images.contentstack.io/v3/assets/blt594f30e2dc643eae/blt34cdb300dc9b93ff/645ccaa7520ba1a1af13a08a/nsffg-foundation.webp',
+        cardLink: {
+            href: 'https://www.forceforgood.org/',
+            title: 'LEARN MORE',
+        },
+        text,
+        topImageUrl: `${host}/blt594f30e2dc643eae/blt34cdb300dc9b93ff/645ccaa7520ba1a1af13a08a/nsffg-foundation.webp`,
+        topImageAlt: 'Force for Good Foundation',
+        additionalProps: {
+            testid: 'ffg-card',
+        },
+        onClick: () => {
+            console.log('onClick called');
+        },
+    },
+    play: async ({ canvasElement }: any) => {
+        const canvas = within(canvasElement);
+        userEvent.hover(canvas.getByTestId('ffg-card'));
+        userEvent.hover(canvas.getByRole('link'));
+        expect(canvas.getByText(text)).toBeInTheDocument();
+    },
+};
+const d = { count: -1 };
+export const OnClick: Story = {
+    args: {
+        cardLink: {
+            href: 'https://www.forceforgood.org/',
+            title: 'LEARN MORE',
+        },
+        text,
+        topImageUrl: `${host}/blt594f30e2dc643eae/blt34cdb300dc9b93ff/645ccaa7520ba1a1af13a08a/nsffg-foundation.webp`,
         topImageAlt: 'Force for Good Foundation',
         additionalProps: {
             testid: 'ffg-card',
         },
+        onClick: () => {
+            d.count = 1;
+            console.log('on click called');
+        },
     },
-    play: async ({ canvasElement }) => {
+    play: async ({ canvasElement }: any) => {
+        d.count = 0;
         const canvas = within(canvasElement);
-        await userEvent.hover(canvas.getByTestId('ffg-card'));
-        await userEvent.hover(canvas.getByRole('link'));
-        await expect(
-            canvas.getByText(
-                'Every child deserves a chance to shine. Through our Nu Skin Force for Good Foundation, we’re empowering children around the world with hope for a brighter future.'
-            )
-        ).toBeInTheDocument();
+        userEvent.click(canvas.getByTestId('ffg-card'));
+        expect(d.count).toEqual(1);
     },
 };

package/src/common/card/styled/NsFfgStyled.tsx

@@ -1,8 +1,6 @@
 import { Box } from '@mui/material';
 import { styled } from '@nuskin/foundation-theme';
 
-const options = {};
-
 const Component = () => {
     return {
         backgroundClip: 'border-box',
@@ -10,9 +8,10 @@ const Component = () => {
         border: '1px solid #eff2f7',
         borderRadius: '1rem',
         boxShadow: '0 0.75rem 1.5rem rgba(18, 38, 63, .03)',
+        cursor: 'pointer',
         display: 'flex',
         flexDirection: 'column' as 'column', // https://github.com/cssinjs/jss/issues/1344
-        marginBottom: '2rem',
+        marginBottom: '16px',
         transition: 'all .2s ease',
         textAlign: 'center' as 'center',
         wordWrap: 'break-word' as 'break-word',
@@ -25,12 +24,15 @@ const Component = () => {
             },
         },
         '.body-text': {
-            padding: '0 1.5rem 3rem',
-            fontSize: '1rem',
+            padding: '0 1.5rem 4rem',
+            fontSize: '16px',
             color: '#8492a6',
         },
         '.top-image': {
-            padding: '1.5rem 3rem',
+            padding: '3rem 1.5rem',
+            img: {
+                maxWidth: '100%',
+            },
         },
         '.action-link': {
             color: '#3c4858',
@@ -41,4 +43,4 @@ const Component = () => {
         },
     };
 };
-export const NsFfgStyled = styled(Box, options)<{}>(Component);
+export const NsFfgStyled = styled(Box)(Component);

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

@@ -1,9 +1,12 @@
-import { AdditionalProps } from '../common.types';
-
+import { AdditionalProps, CslpTag } from '../common.types';
 export type NsFfgCardProps = AdditionalProps & {
     topImageUrl: string;
     topImageAlt: string;
     text: string;
-    actionLink: string;
-    actionText?: string;
+    cardLink: { href: string; title: string };
+    onClick(): void;
+    cslp?: {
+        card_text: CslpTag;
+        action_text: CslpTag;
+    };
 };

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

@@ -3,27 +3,16 @@ import { render, screen } from '@/test-utils/index';
 
 const { getByTestId } = screen;
 describe('NsCartIcon', () => {
-    it('renders Cart icon when item count is 0', () => {
+    it('1. renders Cart icon when item count is 0', () => {
         render(<NsCartIcon itemCount={0} color="primary" size="large" />);
-        const cartIcon = getByTestId('cart-icon');
+        const cartIcon = getByTestId('cart-badge-icon');
         expect(cartIcon).toBeInTheDocument();
     });
-    it('renders Cart icon with optional values', () => {
-        render(<NsCartIcon itemCount={0} />);
-        const cartIcon = getByTestId('cart-icon');
-        expect(cartIcon).toBeInTheDocument();
-    });
-
-    it('renders Cart Badge icon when item count is greater than 0', () => {
-        render(<NsCartIcon itemCount={5} color="primary" size="large" />);
-        const cartBadgeIcon = getByTestId('cart-badge-icon');
-        expect(cartBadgeIcon).toBeInTheDocument();
-    });
 
-    it('renders item count badge when item count is greater than 0', () => {
-        render(<NsCartIcon itemCount={5} color="primary" size="large" />);
-        const itemCountBadge = getByTestId('item-count-badge');
-        expect(itemCountBadge).toBeInTheDocument();
-        expect(itemCountBadge.textContent).toBe('5');
+    it('2. renders item count badge when item count is greater than 0', () => {
+        const itemCount = 5;
+        const { getByText } = render(<NsCartIcon itemCount={5} color="primary" size="large" />);
+        const badgeContentElement = getByText(itemCount.toString());
+        expect(badgeContentElement).toHaveTextContent('5'); // Adjust the value as per your badge content
     });
 });

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

@@ -19,7 +19,7 @@ export default {
         },
     },
     args: {
-        itemCount: 1,
+        itemCount: 5,
         color: 'primary',
         size: 'large',
     },

package/src/common/cart-icon/NsCartIcon.styled.ts

@@ -1,40 +1,14 @@
-import { Theme } from '@mui/material';
+import { Badge, Theme } from '@mui/material';
 import { styled, FoundationTheme } from '@nuskin/foundation-theme';
-import { NsIconSizeType } from '../icon/types';
 
 type ItemCountParams = {
-    size: NsIconSizeType;
-    color: FoundationTheme.PaletteColors;
     theme?: Theme;
+    bgcolor: FoundationTheme.PaletteColors;
 };
 
-export const CartIconContainer = styled.div`
-    position: relative;
-    display: inline-block;
-`;
-
-const BadgeFontSizeMap = {
-    small: '8px',
-    medium: '10px',
-    large: '12px',
-    xLarge: '14px',
-};
-
-const BadgePosMap = {
-    small: '-8px',
-    medium: '-6px',
-    large: '-4px',
-    xLarge: '-1px',
-};
-
-export const ItemCount = styled.span<ItemCountParams>`
-    color: ${({ color, theme }) => theme?.palette?.[color]?.main};
-    font-size: ${({ size }) => BadgeFontSizeMap[size]};
-    right: ${({ size }) => BadgePosMap[size]};
-    text-align: center;
-    font-weight: 600;
-    position: absolute;
-    width: 32px;
-    height: auto;
-    top: -4px;
+export const StyledBadge = styled(Badge) <ItemCountParams>`
+    & .MuiBadge-badge {
+        background-color: ${({ bgcolor, theme }) => theme?.palette?.[bgcolor]?.main};
+        color: ${({ bgcolor, theme }) => theme?.palette?.[bgcolor]?.contrastText};
+    }
 `;

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

@@ -1,21 +1,12 @@
 import { NsIcon } from '../icon';
-import { CartIconContainer, ItemCount } from './NsCartIcon.styled';
+import { StyledBadge } from './NsCartIcon.styled';
 import { NsCartIconProps } from './types.d';
 
-const NsCartIcon = ({ itemCount, size = 'large', color = 'primary' }: NsCartIconProps) => {
+const NsCartIcon = ({ itemCount = 0, size = 'large', color = 'primary', maxItemCount = 999 }: NsCartIconProps) => {
     return (
-        <CartIconContainer>
-            {itemCount > 0 ? (
-                <NsIcon testId="cart-badge-icon" name="cartBadge" color={color} size={size} />
-            ) : (
-                <NsIcon testId="cart-icon" name="cart" color={color} size={size} />
-            )}
-            {itemCount > 0 && (
-                <ItemCount data-testid="item-count-badge" color={color} size={size}>
-                    {itemCount}
-                </ItemCount>
-            )}
-        </CartIconContainer>
+        <StyledBadge badgeContent={itemCount} max={maxItemCount} bgcolor={color}>
+            <NsIcon testId="cart-badge-icon" name="cart" size={size} color={color} />
+        </StyledBadge>
     );
 };
 

package/src/common/cart-icon/types.d.ts

@@ -4,4 +4,5 @@ export type NsCartIconProps = {
     itemCount: number;
     size?: 'small' | 'medium' | 'large' | 'xLarge';
     color?: FoundationTheme.PaletteColors;
+    maxItemCount?:number;
 };

package/src/common/checkbox/NsCheckbox.styled.tsx

@@ -1,19 +1,18 @@
 /**
  * @author [vijayaprathap Kumar] (vpkumar@nuskin.com)
- * checkbox.tsx
  * @description Styled Components for Checkbox
  */
 import DoneIcon from '@mui/icons-material/Done';
 
-import { styled } from '@nuskin/foundation-theme';
+import { styled, ColorUtils } from '@nuskin/foundation-theme';
 import { NsFlag } from '../flag';
-
+const { paletteColor, buttonColor } = ColorUtils;
 /**
  * Wrapper BpIcon for checkbox.tsx
  * @params ( theme: { palette }) / Provide the color's to contaier from @nuskin/foundation-theme
  */
 
-export const BpIcon = styled(DoneIcon)(({ theme: { palette } }) => ({
+export const BpIcon = styled(DoneIcon)(({ theme }) => ({
     border: '1px solid #8C8C8C',
     path: {
         display: 'none',
@@ -25,31 +24,31 @@ export const BpIcon = styled(DoneIcon)(({ theme: { palette } }) => ({
         outline: '3px solid #94D6E9',
     },
     'input:disabled ~ &': {
-        background: palette?.primary?.buttonState?.hovered,
+        background: buttonColor('primary', 'hovered')({ theme }),
     },
 }));
 
 /**
  * Wrapper BpCheckedIcon for checkbox.tsx
- * @params ( theme: { palette }) / Provide the color's to contaier from @nuskin/foundation-theme
+ * @params ( theme: { palette }) / Provide the color's to container from @nuskin/foundation-theme
  */
 
-export const BpCheckedIcon = styled(BpIcon)(({ theme: { palette } }) => ({
+export const BpCheckedIcon = styled(BpIcon)(({ theme }) => ({
     path: {
         display: 'block',
     },
-    background: palette?.primary?.main ?? '#fff',
-    color: palette?.primary?.contrastText ?? '#000',
+    background: paletteColor('primary', 'main')({ theme }),
+    color: paletteColor('primary', 'contrastText')({ theme }),
 }));
 
-export const StyledLabel = styled('span')<{ $hasDisabled: boolean }>`
-    ${({ $hasDisabled, theme: { palette } }) =>
-        $hasDisabled &&
-        `
-    color: ${palette?.primary?.buttonState?.hovered};
-`}
-`;
+const getLabelColor = (isDisabled: boolean, color: string) => (!isDisabled ? '' : `color: ${color}`);
 
+export const StyledLabel = styled('span')<{ isDisabled: boolean }>`
+    ${({ isDisabled, theme }) => {
+        const color = buttonColor('primary', 'hovered')({ theme });
+        return getLabelColor(isDisabled, color);
+    }}
+`;
 export const StyledFlagLabel = styled(NsFlag)`
     margin-right: 16px;
 `;

package/src/common/checkbox/NsCheckbox.tsx

@@ -54,7 +54,7 @@ const NsCheckbox = (props: PropsWithChildren<NsCheckboxProps>) => {
         () => (
             <NsTypography variant="p-l">
                 <StyledFlagLabel {...flag} size={size} testId={`${name}-flag-label`} />
-                <StyledLabel className="checkbox-label-text" $hasDisabled={disabled}>
+                <StyledLabel className="checkbox-label-text" isDisabled={disabled}>
                     {label}
                 </StyledLabel>
             </NsTypography>