@nuskin/foundation-ui-components 1.0.0-develop.6 → 1.0.0-develop.8

package/src/common/breadcrumb/data.ts

@@ -1,7 +1,10 @@
-import { ItemProps } from './types';
+import {ItemProps} from './types';
 export const breadcrumbItems: ItemProps[] = [
-    { label: 'Home', href: '/', icon: 'home' },
-    { label: 'Products', href: '/products' },
-    { label: 'Shirts', href: '/products/shirts' },
-    { label: 'Blue shirt', href: '/products/shirts/blue' },
+    {label: 'Home', href: '/', icon: 'home'},
+    {label: 'Products', href: '/products'},
+    {label: 'Shirts', href: '/products/shirts'},
+    {label: 'Blue shirt', href: '/products/shirts/blue'},
 ];
+export const dummyItems: ItemProps[] = [
+    {label: 'Home', icon: 'home'}
+]

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

@@ -1,68 +1,84 @@
 import React from 'react';
 import { render, screen } from '@/test-utils/index';
+import { NsButton } from '../';
 import { nuskinTheme } from '@nuskin/foundation-theme';
-import Button from './NsButton';
 
 const { palette } = nuskinTheme;
 
 describe('<Button />', () => {
-    describe(' button primary', () => {
-        test('should render default button styles', () => {
-            const text = 'Click Me';
-            render(
-                <Button color="primary" variant="contained">
-                    {text}
-                </Button>
-            );
+    it('1. should render default primary button styles ', () => {
+        const text = 'Click Me';
+        render(
+            <NsButton color="primary" variant="contained">
+                {text}
+            </NsButton>
+        );
 
-            const button = screen.getByText(text);
-            expect(button).toBeInTheDocument();
-            expect(button).toHaveStyle(`color: ${palette?.primary?.contrastText ?? ''}`);
-            expect(button).toHaveStyle(`background-color: ${palette?.primary?.main ?? ''}`);
-        });
+        const button = screen.getByText(text);
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveStyle(`color: ${palette?.primary?.contrastText}`);
+        expect(button).toHaveStyle(`background-color: ${palette?.primary?.buttonState?.pressed}`);
     });
-    describe('button secondary', () => {
-        test('should render default button styles', () => {
-            const text = 'Click Me';
-            render(
-                <Button color="success" variant="contained" size="large">
-                    {text}
-                </Button>
-            );
+    it('2. should render default secondary button styles', () => {
+        const text = 'Click Me';
+        render(
+            <NsButton color="success" variant="contained" size="large">
+                {text}
+            </NsButton>
+        );
 
-            const button = screen.getByText(text);
+        const button = screen.getByText(text);
 
-            expect(button).toBeInTheDocument();
-            expect(button).toHaveStyle(`color: ${palette.success.contrastText}`);
-            expect(button).toHaveStyle(`background-color: ${palette.success.main}`);
-        });
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveStyle(`color: ${palette.success.contrastText}`);
+        expect(button).toHaveStyle(`background-color: ${palette.success.buttonState?.pressed}`);
     });
-    describe('button outline success', () => {
-        test('should render outlined success button', () => {
-            render(
-                <Button color="success" variant="outlined" size="large">
-                    Click Me
-                </Button>
-            );
+    it('3. should render outlined success button', () => {
+        render(
+            <NsButton color="success" variant="outlined" size="large">
+                Click Me
+            </NsButton>
+        );
 
-            const button = screen.getByText('Click Me');
+        const button = screen.getByText('Click Me');
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveStyle(`color: ${palette.success.main}`);
+    });
+    it('4. should render outlined accentColorA button', () => {
+        render(
+            <NsButton color="accentColorA" variant="outlined" size="large">
+                Click Me
+            </NsButton>
+        );
+
+        const button = screen.getByText('Click Me');
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveStyle(`color: ${palette?.accentColorA?.main}`);
+    });
+    it('5. should render text button styles', () => {
+        const text = 'Click Me';
+        render(
+            <NsButton color="success" variant="text" size="large">
+                {text}
+            </NsButton>
+        );
+
+        const button = screen.getByText(text);
 
-            expect(button).toBeInTheDocument();
-            expect(button).toHaveStyle(`color: ${palette.success.main}`);
-        });
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveStyle(`color: ${palette.success.main}`);
     });
-    describe('button outline accentColorA', () => {
-        test('should render outlined success button', () => {
-            render(
-                <Button color="accentColorA" variant="outlined" size="large">
-                    Click Me
-                </Button>
-            );
+    it('6. iconOnly variant', () => {
+        const text = 'Click Me';
+        render(
+            <NsButton color="success" variant="text" size="large" iconOnly>
+                {text}
+            </NsButton>
+        );
 
-            const button = screen.getByText('Click Me');
+        const button = screen.getByText(text);
 
-            expect(button).toBeInTheDocument();
-            expect(button).toHaveStyle(`color: ${palette?.accentColorA?.main}`);
-        });
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveStyle(`color: ${palette.success.main}`);
     });
 });

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

@@ -3,13 +3,18 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { NsButton } from './';
 import { ShoppingCart } from '@mui/icons-material';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { nuskinTheme } from '@nuskin/foundation-theme';
+
+const { palette } = nuskinTheme;
 
 type ComponentType = typeof NsButton;
 type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsButton',
+    title: 'Components/Inputs/NsButton',
     component: NsButton,
     decorators: [withCenterDecorator],
     argTypes: {
@@ -21,6 +26,7 @@ export default {
         color: { name: 'Color Variants' },
         disabled: { control: 'boolean' },
         fullWidth: { control: 'boolean' },
+
         iconOnly: { control: 'hide' },
     },
     args: {
@@ -30,13 +36,15 @@ export default {
         disabled: false,
         variant: 'contained',
         fullWidth: false,
+        startIcon: '',
+        endIcon: '',
     },
 } as MetaStory;
 
 export const button: Story = {};
 
 export const IconOnlyButton: Story = {
-    render: (args) => (
+    render: (args: any) => (
         <NsButton {...args} iconOnly darkModeEnabled={false}>
             <ShoppingCart />
         </NsButton>
@@ -53,3 +61,52 @@ export const IconOnlyButton: Story = {
         iconOnly: { control: 'hide' },
     },
 };
+export const ButtonWithIcon: Story = {
+    render: (args: any) => (
+        <NsButton {...args} darkModeEnabled={false} startIcon={<ShoppingCart />}>
+            Add to Cart
+        </NsButton>
+    ),
+    argTypes: {
+        children: {
+            control: 'hide',
+        },
+        color: { name: 'Color Variants' },
+        disabled: { control: 'boolean' },
+        fullWidth: { control: 'boolean' },
+        iconOnly: { control: 'hide' },
+    },
+};
+
+export const TextVariant: Story = {
+    args: {
+        color: 'success',
+        variant: 'text',
+        size: 'large',
+        children: 'click me! icon',
+    },
+    play: ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const button = canvas.getByText('click me! icon');
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveStyle(`color: ${palette.success.main}`);
+        expect(button).toHaveStyle('background-color: rgba(0, 0, 0, 0);');
+    },
+};
+
+export const IconOnly: Story = {
+    args: {
+        iconOnly: true,
+        color: 'success',
+        variant: 'text',
+        size: 'large',
+        children: 'click me! icon',
+    },
+    play: ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const button = canvas.getByText('click me! icon');
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveStyle(`color: ${palette.success.main}`);
+        expect(button).toHaveStyle('background-color: rgba(0, 0, 0, 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/button/types.d.ts

@@ -14,6 +14,8 @@ export type NsButtonProps = Pick<
   | 'onFocus'
   | 'aria-label'
   | 'className'
+  | 'startIcon'
+  | 'endIcon'
 > & {
   iconOnly?: boolean;
   darkModeEnabled?: boolean;

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

@@ -8,7 +8,7 @@ type MetaStory = Meta<ComponentType>;
 
 export default {
     component: NsBgCard,
-    title: 'Components/NsCard/NsBgCard',
+    title: 'Components/Containers/Card/NsBgCard',
     argTypes: {},
     args: {
         title: 'ageLOC LumiSpa',

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

@@ -8,7 +8,7 @@ type MetaStory = Meta<ComponentType>;
 
 export default {
     component: NsBrandProductCard,
-    title: 'Components/NsCard/NsBrandProductCard',
+    title: 'Components/Containers/Card/NsBrandProductCard',
     argTypes: {},
     decorators: [withCenterDecorator],
 } as MetaStory;

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

@@ -10,7 +10,7 @@ type MetaStory = Meta<ComponentType>;
 
 export default {
     component: NsFfgCard,
-    title: 'Components/NsCard/NsFfgCard',
+    title: 'Components/Containers/Card/NsFfgCard',
     argTypes: {},
     decorators: [withCenterDecorator],
 } as MetaStory;
@@ -19,8 +19,10 @@ export const Default: Story = {
     args: {
         actionText: 'LEARN MORE',
         actionLink: 'https://www.forceforgood.org/',
+        // eslint-disable-next-line max-len
         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:
+            // eslint-disable-next-line max-len
             'https://images.contentstack.io/v3/assets/blt594f30e2dc643eae/blt34cdb300dc9b93ff/645ccaa7520ba1a1af13a08a/nsffg-foundation.webp',
         topImageAlt: 'Force for Good Foundation',
         additionalProps: {
@@ -31,8 +33,9 @@ export const Default: Story = {
         const canvas = within(canvasElement);
         await userEvent.hover(canvas.getByTestId('ffg-card'));
         await userEvent.hover(canvas.getByRole('link'));
-        await expect(
+        expect(
             canvas.getByText(
+                // eslint-disable-next-line max-len
                 '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();

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

@@ -41,4 +41,4 @@ const Component = () => {
         },
     };
 };
-export const NsFfgStyled = styled(Box, options)<{}>(Component);
+export const NsFfgStyled = styled(Box, options)(Component);

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

@@ -9,7 +9,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsCarousal/Brand',
+    title: 'Components/Containers/NsCarousal/Brand',
     component: NsCarousal,
     argTypes: {},
 } as MetaStory;

package/src/common/carousal/stories/NsScrollingCarousal.stories.tsx

@@ -34,7 +34,7 @@ export const slides = [
     },
 ];
 export default {
-    title: 'Components/NsCarousal/NsScrollingCarousal',
+    title: 'Components/Containers/NsCarousal/NsScrollingCarousal',
     component: NsScrollingCarousal,
     decorators: [withCenterDecorator],
     argTypes: {},

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

@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsCartIcon',
+    title: 'Components/Data Display/NsCartIcon',
     component: NsCartIcon,
     decorators: [withCenterDecorator],
     argTypes: {

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

@@ -13,7 +13,7 @@ type MetaStory = Meta<ComponentType>;
 const labelText = 'Checkbox Label';
 // In this case, we're only passing the label prop.
 export default {
-    title: 'Components/NsCheckbox',
+    title: 'Components/Inputs/NsCheckbox',
     component: NsCheckbox,
     decorators: [withCenterDecorator],
     argTypes: {

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;
 `;