@nuskin/foundation-ui-components 1.0.0-cft-35.13 → 1.0.0-develop.10

package/src/common/banner/NsBanner.spec.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { NsBanner } from './';
+import { NsBanner } from '@/common/';
 
 describe('Hero component', () => {
-    it('renders banner image and title', () => {
-        const childText = 'Welcome to My Website';
-        const imageURL = 'https://example.com/banner.jpg';
+    const childText = 'Welcome to My Website';
+    const imageURL = 'https://example.com/banner.jpg';
+    it('1. renders banner image and title', () => {
         const { getByAltText, getByText } = render(
             <NsBanner imageUrl={imageURL} altText="Banner image">
                 <h1>{childText}</h1>
@@ -16,4 +16,13 @@ describe('Hero component', () => {
         expect(childElement).toBeInTheDocument();
         expect(imageElement).toBeInTheDocument();
     });
+    it('2. renders banner image and title without altText', () => {
+        const { getByAltText } = render(
+            <NsBanner imageUrl={imageURL}>
+                <h1>{childText}</h1>
+            </NsBanner>
+        );
+        const imageElement = getByAltText('NsBanner');
+        expect(imageElement).toBeInTheDocument();
+    });
 });

package/src/common/banner/NsBanner.stories.tsx

@@ -7,14 +7,14 @@
 import React from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { NsBanner, NsTypography, NsButton } from '../';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsBanner;
 type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsBanner',
+    title: 'Components/Data Display/NsBanner',
     component: NsBanner,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/banner/NsBanner.styled.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@nuskin/foundation-theme';
-import { AlignmentType } from './types';
+import { AlignmentType } from './types.d';
 
 export const StyledBanner = styled.section`
     position: relative;

package/src/common/banner/NsBanner.tsx

@@ -6,7 +6,7 @@
 
 import React, { PropsWithChildren } from 'react';
 
-import { NsBannerProps } from './types';
+import { NsBannerProps } from './types.d';
 import { StyledBanner, StyledHeroText } from './NsBanner.styled';
 import { NsImage } from '../';
 

package/src/common/banner/index.ts

@@ -1,2 +1,2 @@
 export { default as NsBanner } from './NsBanner';
-export type { NsBannerProps } from './types';
+export type { NsBannerProps } from './types.d';

package/src/common/brand-components/NsBrand.stories.tsx

@@ -1,13 +1,13 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { NsBrandComponent } from './';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsBrandComponent;
 type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsBrandComponent',
+    title: 'Components/Data Display/NsBrandComponent',
     component: NsBrandComponent,
     decorators: [withCenterDecorator],
     argTypes: {

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

@@ -1,11 +1,13 @@
 import React, { PropsWithChildren, useCallback } from 'react';
+
 import NSLogoHorizontal from './icons/NSLogoHorizontal';
 import NSLogoMark from './icons/NSLogoMark';
 import NSLogoPoweredBy from './icons/NSLogoPoweredBy';
 import NSLogoStacked from './icons/NSLogoStacked';
 import NSLogoWordMark from './icons/NSWordMark';
-import LogoContainer from './NsBrandContanier.styled';
-import { NsBrandComponentProps } from './types';
+import LogoContainer from './NsBrandContainer.styled';
+
+import { NsBrandComponentProps } from './types.d';
 
 const VariantMap = {
     stacked: NSLogoStacked,
@@ -18,7 +20,8 @@ const VariantMap = {
 const NsBrandComponent = (props: PropsWithChildren<NsBrandComponentProps>) => {
     const { variant = 'stacked', size = '108px', color = 'primary' } = props;
     const renderBrand = useCallback(() => {
-        const BrandComponent = VariantMap[variant || 'stacked'];
+        const BrandComponent = VariantMap[variant];
+        // [Todo - Add neutral as FoundationTheme.PaletteColor]
         return <BrandComponent color={color as any} />;
     }, [color, variant]);
     return <LogoContainer size={size}>{renderBrand()}</LogoContainer>;

package/src/common/brand-components/index.ts

@@ -1,2 +1,2 @@
 export { default as NsBrandComponent } from './NsBrandComponent';
-export type { NsBrandComponentProps } from './types';
+export type { NsBrandComponentProps } from './types.d';

package/src/common/breadcrumb/NsBreadcrumb.spec.tsx

@@ -1,17 +1,11 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { NsBreadcrumb } from './';
-import { ItemProps } from './types';
+import { breadcrumbItems, dummyItems } from './data';
 const { getByText } = screen;
-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' },
-];
 
 describe('Breadcrumb', () => {
-    it('renders breadcrumb items', () => {
+    it('1. renders breadcrumb items', () => {
         render(<NsBreadcrumb items={breadcrumbItems} />);
         expect(getByText('Home')).toBeInTheDocument();
         expect(getByText('Products')).toBeInTheDocument();
@@ -19,11 +13,16 @@ describe('Breadcrumb', () => {
         expect(getByText('Blue shirt')).toBeInTheDocument();
     });
 
-    it('renders breadcrumb items with navigation icons', () => {
+    it('2. renders breadcrumb items with navigation icons', () => {
         render(<NsBreadcrumb items={breadcrumbItems} iconVisibility />);
         expect(getByText('Home')).toBeInTheDocument();
         expect(getByText('Products')).toBeInTheDocument();
         expect(getByText('Shirts')).toBeInTheDocument();
         expect(getByText('Blue shirt')).toBeInTheDocument();
     });
+
+    it('3. renders breadcrumb items with navigation icons', () => {
+        render(<NsBreadcrumb items={dummyItems} iconVisibility />);
+        expect(getByText('Home')).toBeInTheDocument();
+    });
 });

package/src/common/breadcrumb/NsBreadcrumb.stories.tsx

@@ -1,21 +1,19 @@
 /**
- * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
- * NsBanner.stories.tsx
  * @description NsBanner component.
  */
 
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { NsBreadcrumb } from './';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
-import { breadcrumbItems } from './NsBreadcrumb.spec';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { breadcrumbItems } from './data';
 
 type ComponentType = typeof NsBreadcrumb;
 type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsBreadcrumb',
+    title: 'Components/Navigation/NsBreadcrumb',
     component: NsBreadcrumb,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/breadcrumb/NsBreadcrumb.tsx

@@ -8,16 +8,18 @@ import { PropsWithChildren } from 'react';
 
 import { BreadcrumbContainer, BreadcrumbItem, BreadcrumbList } from './NsBreadcrumb.styled';
 import { NsTypography, NsLink, NsIcon } from '../';
-import { NsBreadcrumbProps, ItemProps } from './types';
+import { NsBreadcrumbProps, ItemProps } from './types.d';
 import { useTheme } from '@mui/material/styles';
 import { ColorUtils } from '@nuskin/foundation-theme';
 
+const { color } = ColorUtils;
+
 const NsBreadcrumb = (props: PropsWithChildren<NsBreadcrumbProps>) => {
     const { items, iconVisibility } = props;
 
     const theme = useTheme();
-    const neutral80 = ColorUtils.getAppColor(theme, 'neutral', '80') as string;
-    const neutral60 = ColorUtils.getAppColor(theme, 'neutral', '60') as string;
+    const neutral80 = color('neutral', '80')({ theme });
+    const neutral60 = color('neutral', '60')({ theme });
 
     const getLabel = (item: ItemProps) => {
         if (item?.href) {

package/src/common/breadcrumb/data.ts

@@ -0,0 +1,10 @@
+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'},
+];
+export const dummyItems: ItemProps[] = [
+    {label: 'Home', icon: 'home'}
+]

package/src/common/breadcrumb/index.ts

@@ -1,2 +1,2 @@
 export { default as NsBreadcrumb } from './NsBreadcrumb';
-export type { NsBreadcrumbProps } from './types';
+export type { NsBreadcrumbProps } from './types.d';

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

@@ -1,69 +1,84 @@
 import React from 'react';
-import { render, screen } from '../../../test-utils/index';
-import nuskinTheme from '@nuskin/foundation-theme/src/themes/genome-foundation';
-import Button from './NsButton';
+import { render, screen } from '@/test-utils/index';
+import { NsButton } from '../';
+import { nuskinTheme } from '@nuskin/foundation-theme';
 
 const { palette } = nuskinTheme;
 
 describe('<Button />', () => {
-    describe(' button primary', () => {
-        test('should render default button styles', () => {
-            render(
-                <Button color="primary" variant="contained">
-                    Click Me
-                </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('Click Me');
+        const button = screen.getByText(text);
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveStyle(`color: ${palette?.primary?.contrastText}`);
+        expect(button).toHaveStyle(`background-color: ${palette?.primary?.buttonState?.pressed}`);
+    });
+    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);
 
-            expect(button).toBeInTheDocument();
-            expect(button).toHaveStyle(`color: ${palette.primary.contrastText}`);
-            expect(button).toHaveStyle(`background-color: ${palette.primary.main}`);
-        });
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveStyle(`color: ${palette.success.contrastText}`);
+        expect(button).toHaveStyle(`background-color: ${palette.success.buttonState?.pressed}`);
     });
-    describe('button secondary', () => {
-        test('should render default button styles', () => {
-            render(
-                <Button color="success" variant="contained" 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>
+        );
 
-            expect(button).toBeInTheDocument();
-            expect(button).toHaveStyle(`color: ${palette.success.contrastText}`);
-            expect(button).toHaveStyle(`background-color: ${palette.success.main}`);
-        });
+        const button = screen.getByText('Click Me');
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveStyle(`color: ${palette?.accentColorA?.main}`);
     });
-    describe('button outline success', () => {
-        test('should render outlined sucess button', () => {
-            render(
-                <Button color="success" variant="outlined" size="large">
-                    Click Me
-                </Button>
-            );
+    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('Click Me');
+        const button = screen.getByText(text);
 
-            expect(button).toBeInTheDocument();
-            expect(button).toHaveStyle(`color: ${palette.success.main}`);
-            expect(button).toHaveStyle(`border-color: ${palette.success.main}`);
-        });
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveStyle(`color: ${palette.success.main}`);
     });
-    describe('button outline accentColorA', () => {
-        test('should render outlined sucess 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).toHaveStyle(`border-color: ${palette?.accentColorA?.main}`);
-        });
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveStyle(`color: ${palette.success.main}`);
     });
 });

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

@@ -2,14 +2,19 @@ import React from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { NsButton } from './';
 import { ShoppingCart } from '@mui/icons-material';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+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,14 +36,16 @@ export default {
         disabled: false,
         variant: 'contained',
         fullWidth: false,
+        startIcon: '',
+        endIcon: '',
     },
 } as MetaStory;
 
 export const button: Story = {};
 
 export const IconOnlyButton: Story = {
-    render: (args) => (
-        <NsButton {...args} iconOnly>
+    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

@@ -1,90 +1,72 @@
 import { Button as MUIButton } from '@mui/material';
 
 import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
-import { ButtonConfig } from '@nuskin/foundation-theme/src/themes/types/button';
-import { NsButtonProps } from './types';
+import { ButtonConfig } from '@nuskin/foundation-theme/src/common/themes/types/button';
 
-const {
-    getPaletteColor,
-    getButtonStateColor,
-} = ColorUtils;
+import { NsButtonProps } from './types.d';
+import { generateContainedStyle, generateIconOnlyStyles, generateOutlinedStyle, generateTextStyles } from './helper';
+import { skipDarkModeEnabled } from '../util';
+
+const { buttonColor, paletteColor } = ColorUtils;
 
 const getButtonConfig = (theme: FoundationTheme.Theme, attribute: keyof ButtonConfig) => {
     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: 1px solid  ${({ theme}) => getButtonConfig(theme, 'focusColor')} !important;
+    border-radius: ${({ theme }) => {
+        const borderRadius = getButtonConfig(theme, 'borderRadius');
+        return borderRadius || 0;
+    }};
+
+    &:focus {
+        border: 1px solid ${({ theme }) => getButtonConfig(theme, 'focusColor')} !important;
     }
-    :disabled {
-        background-color: ${({ theme, color }) => getButtonStateColor(theme, color, 'disabled')};
-        color: ${({ theme, color }) => getButtonStateColor(theme, 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 : ''
+        if (size === 'medium') {
+            return config?.components?.button?.size?.medium?.padding;
+        } else if (size === 'large') {
+            return config?.components?.button?.size?.large?.padding;
+        } else {
+            return '';
+        }
     }}
-    ${({ theme: { config}, size }) => {
-        return size === 'large' ? config?.components?.button?.size?.large?.padding : ''
-    }}
-    ${({ variant, theme, color = 'primary' }) => {
-        return variant === 'contained' ?
-            `
-                background-color: ${getPaletteColor(theme, color)};
-                :hover {
-                    background-color: ${getButtonStateColor(theme, color, 'hovered')};
-                }
-                :active {
-                    background-color: ${getButtonStateColor(theme, color, 'pressed')};
-                }
-                :focus {
-                    background-color: ${getButtonStateColor(theme, color, 'focused')};
-                }
-            `
-            : ''
+
+    ${({ 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' }) =>
-        variant === 'outlined' &&
-        `
-            border-color: ${getPaletteColor(theme, color)};
-            color: ${getPaletteColor(theme, color)};
-            :hover {
-                border-color: ${getButtonStateColor(theme, color, 'hovered')};
-                color: ${getPaletteColor(theme, color)};
-            }
-            :active {
-                border-color: ${getButtonStateColor(theme, color, 'pressed')};
-                color: ${getPaletteColor(theme, color)};
-            }
-        `}
-  ${({ variant, theme, color = 'primary' }) =>
-        variant === 'text' &&
-        `
-            text-decoration: underline 1px !important;
-            text-underline-offset: 4px;
-            padding: 0;
-            min-width: auto;
-            background-color: transparent !important;
-            text-decoration-color: ${getPaletteColor(theme, color)};
-            color: ${getPaletteColor(theme, color)};
-            :hover {
-                color:  ${getButtonStateColor(theme, color, 'hovered')};
-                text-decoration-color:  ${getButtonStateColor(theme, color, 'hovered')};
-            }
-            :active {
-                color: ${getPaletteColor(theme, color)};
-                text-decoration-color:  ${getButtonStateColor(theme, color, 'pressed')};
-            }
-        `}
-  ${({ iconOnly }) =>
-        iconOnly &&
-        `
-            padding: 10px;
-            min-width: unset;
-        `}
 `;
 
 export default StyledButton;

package/src/common/button/NsButton.tsx

@@ -1,10 +1,16 @@
 import { PropsWithChildren } from 'react';
+import { useTheme } from '@mui/material/styles';
+
 import StyledButton from './NsButton.styled';
-import { NsButtonProps } from './types';
 
-const NsButton = ({ children, ...props }: PropsWithChildren<NsButtonProps>) => {
+import { NsButtonProps } from './types.d';
+
+const NsButton = ({ children, darkModeEnabled = true, ...props }: PropsWithChildren<NsButtonProps>) => {
+    const { color } = props;
+    const { palette } = useTheme();
+    const btnColor = color && palette?.[color] ? color : 'primary';
     return (
-        <StyledButton {...props} disableRipple>
+        <StyledButton {...props} color={btnColor} disableRipple darkModeEnabled={darkModeEnabled}>
             {children}
         </StyledButton>
     );