@nuskin/foundation-ui-components 1.0.0-develop.1 → 1.0.0-develop.11

package/src/common/column-control/stories/NsGridColumns.stories.tsx

@@ -0,0 +1,63 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { NsGridColumns } from '..';
+import { DivArray, DivArrayRandom } from './DivArray';
+import { childrenMapping, selectDivOptions } from './common';
+
+type ComponentType = typeof NsGridColumns;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Data Display/Column/NsGridColumns',
+    component: NsGridColumns,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        columnClass: {
+            control: 'text',
+            defaultValue: 'ns-col-lg-1-1-1 ns-col-md-1-1 ns-col-sm-1',
+        },
+        gap: {
+            control: 'number',
+            defaultValue: 16,
+        },
+        children: {
+            control: {
+                type: 'select',
+                options: selectDivOptions,
+            },
+            defaultValue: <DivArrayRandom elementsCount={8} />,
+            mapping: childrenMapping,
+        },
+    },
+    args: {
+        columnClass: '',
+        children: <DivArrayRandom elementsCount={12} />,
+    },
+} as MetaStory;
+
+export const DefaultColumnControl: Story = {
+    args: {
+        children: <DivArray elementsCount={8} />,
+    },
+};
+export const TwoColumn11: Story = {
+    args: { columnClass: 'ns-col-lg-1-1' },
+};
+export const TwoColumn21: Story = {
+    args: { columnClass: 'ns-col-lg-2-1' },
+};
+
+export const ThreeColumn211: Story = {
+    args: { columnClass: 'ns-col-lg-2-1-1' },
+};
+export const ThreeColumn121: Story = {
+    args: { columnClass: 'ns-col-lg-1-2-1' },
+};
+export const ThreeColumn111: Story = {
+    args: { columnClass: 'ns-col-lg-1-1-1' },
+};
+
+export const FourColumn1111: Story = {
+    args: { columnClass: 'ns-col-lg-1-1-1-1' },
+};

package/src/common/column-control/stories/common.tsx

@@ -0,0 +1,14 @@
+import { DivArray } from './DivArray';
+
+/* an array from 1 to n */
+export const selectDivOptions = Array(16)
+    .fill(0)
+    .map((_, index) => index + 1);
+
+/* this component is used only as a utility to show column control in storybook */
+export const childrenMapping = selectDivOptions.reduce((childrenMappingObject, elementCount) => {
+    return {
+        ...childrenMappingObject,
+        [elementCount]: <DivArray elementsCount={elementCount} />,
+    };
+}, {});

package/src/common/column-control/styled/StyledFlex.tsx

@@ -0,0 +1,45 @@
+import { Box } from '@mui/material';
+import { styled } from '@nuskin/foundation-theme';
+import { sizeObjectType } from '../types';
+import { commonStyles, getPercentArray } from './common';
+
+const options = {
+    shouldForwardProp: (propKey: string) => !['sizes', 'gap', 'isFullWidth'].includes(propKey),
+};
+
+type StyledFlexProps = {
+    sizes: sizeObjectType;
+    gap?: number;
+    isFullWidth: boolean;
+};
+
+/* main wrapper for column control using css flex */
+export const StyledFlex = styled(
+    Box as any,
+    options
+)<StyledFlexProps>(({ sizes, gap, isFullWidth }: StyledFlexProps) => {
+    const gridGap = gap ? `${gap}px` : '2rem';
+    const fraction = getPercentArray(sizes.fractions);
+    const flexResponsive = { flexGrow: 1, flexShrink: 1 };
+    const maxWidth = isFullWidth ? '100%' : '1200px';
+    const style: any = {
+        gap: gridGap,
+        ...commonStyles,
+        maxWidth,
+        display: 'flex',
+        paddingInline: '20px',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        '> *': {
+            display: 'flex',
+            minWidth: '220px',
+        },
+    };
+    fraction.forEach((f, i) => {
+        style[`> :nth-of-type(${fraction.length}n+${i + 1})`] = {
+            flexBasis: `calc(${fraction[i]} - ${gridGap})`,
+            ...flexResponsive,
+        };
+    });
+    return style;
+});

package/src/common/column-control/styled/StyledGrid.tsx

@@ -0,0 +1,40 @@
+import { Box } from '@mui/material';
+import { styled } from '@nuskin/foundation-theme';
+import { sizeObjectType } from '../types';
+import { commonStyles, getPercentArray } from './common';
+
+type StyledGridProps = {
+    sizes: sizeObjectType;
+    gap?: number;
+    isFullWidth: boolean;
+};
+const options = {
+    shouldForwardProp: (propKey: string) => !['sizes', 'gap', 'isFullWidth'].includes(propKey),
+};
+
+/* main wrapper for column control using css grid */
+export const StyledGrid = styled(
+    Box as any,
+    options
+)<StyledGridProps>(({ sizes, gap, isFullWidth }: StyledGridProps) => {
+    const gridGap = gap ?? '2rem';
+    const maxWidth = isFullWidth ? '100%' : '1200px';
+    return {
+        gap: gridGap,
+        ...commonStyles,
+        maxWidth,
+        display: 'grid',
+        /* here we are creating gridTemplateColumns as calc(40% - 20px) calc(40% - 20px), */
+        gridTemplateColumns: getPercentArray(sizes.fractions)
+            ?.map((fractionPercent) => `calc(${fractionPercent} - 20px)`)
+            .join(''),
+        justifyContent: 'center',
+        '> *': {
+            minWidth: '220px',
+            width: 'auto !important',
+        },
+        '.span-2': {
+            gridColumn: 'span 2',
+        },
+    } as any;
+});

package/src/common/column-control/styled/common.ts

@@ -0,0 +1,27 @@
+const mobileBreakPoint = '600px';
+
+export const commonStyles = {
+    margin: '32px auto',
+
+    [`@media (max-width: ${mobileBreakPoint})`]: {
+        display: 'flex',
+        flexDirection: 'column',
+        flexWrap: 'wrap',
+        margin: '2rem 1rem',
+        '> * ': {
+            flex: '1 1 0 !important',
+        },
+    },
+};
+/*
+   we have kept extra margin by taking 80% instead of 100%, because margins and padding,
+   and gaps also take up space, so we should be left with appropriate space
+   example:
+   ['1','1'] => ['40%','40%']
+   ['1','2'] => ['27%','53%']
+ */
+export function getPercentArray(fractionArray?: string[] | number[]) {
+    const numbers = fractionArray?.map((numberString) => +numberString)?.filter((num) => 0 < num && num < 10) ?? [];
+    const sum = numbers.reduce((currentSum, currentNumber) => currentSum + currentNumber, 0);
+    return numbers.map((currentNumber) => ((currentNumber / sum) * 80).toFixed(2) + '%');
+}

package/src/common/column-control/types.d.ts

@@ -18,22 +18,7 @@ export type NsColumnControlProps = PropsWithChildren<{
      *  ns-col-md-(column-ratio) (for tablet screens >= 600px),
      *  and ns-col-sm-(column-ratio) (for mobile screens i.e < 600px)
      * sample values
-     * 'ns-col-lg-2-1',
-    'ns-col-lg-1-2',
-    'ns-col-lg-1-1',
-    'ns-col-lg-1-1-1',
-    'ns-col-lg-2-1-1',
-    'ns-col-lg-1-1-1-1',
-    'ns-col-md-1',
-    'ns-col-md-1-1',
-    'ns-col-md-1-2',
-    'ns-col-md-2-1',
-    'ns-col-md-1-1-1',
-    'ns-col-md-2-1-1',
-    'ns-col-sm-1',
-    'ns-col-sm-1-1',
-    'ns-col-sm-1-2',
-    'ns-col-sm-2-1',
+     * 'ns-col-lg-2-1', 'ns-col-lg-1-2', 'ns-col-lg-1-1',
      */
     columnClass: string;
     gap?: number;
@@ -45,3 +30,17 @@ export type sizeObjectType = {
     tabletFractions?: number[];
     mobileFractions?: number[];
 };
+
+export type NsFlexColumnsProps = PropsWithChildren<{
+    /**
+     * follows the convention of ns-col-lg-{column-ratio}
+     * sample value for column-ratio = 2-1 ==>ns-col-lg-2-1
+     */
+    columnClass: string;
+    gap: number;
+    /* when this boolean is true, column control takes full width of page instead of being restricted to 1200px */
+    isFullWidth?: boolean;
+}> &
+    AdditionalProps;
+
+export type NsGridColumnsProps = NsFlexColumnsProps;

package/src/common/column-control/utils.ts

@@ -1,5 +1,5 @@
 import { ValueOf } from 'next/dist/shared/lib/constants';
-import { NsColumnControlProps, sizeObjectType } from './types';
+import { NsColumnControlProps, sizeObjectType } from './types.d';
 
 export const columnClasses: NsColumnControlProps['columnClass'][] = [
     'ns-col-lg-2-1',
@@ -40,15 +40,15 @@ const sizeKeyMap: Record<ValueOf<typeof sizeKeyPrefix>, string> = {
  * @returns {fractions:['1','1','1'], tabletFractions:['1','1'], mobileFractions:['1'] }
  */
 export const getColumnSizes = (inputColumnClass: string): sizeObjectType => {
-    let columnClass = inputColumnClass.trim() as NsColumnControlProps['columnClass'];
+    const columnClass = inputColumnClass.trim();
     const validClasses = columnClass
         .split(' ')
         .filter((e) => Object.values(sizeKeyPrefix).some((prefix) => e.startsWith(prefix)));
     const sizeObject: sizeObjectType = validClasses.reduce((acc: any, current: string) => {
-        for (let key of Object.values(sizeKeyPrefix)) {
+        for (const key of Object.values(sizeKeyPrefix)) {
             if (current.startsWith(key)) {
-                let interClass = current.replace(key, '');
-                let sizes = interClass.split('-').filter((e) => /^[1-9]$/.test(e));
+                const interClass = current.replace(key, '');
+                const sizes = interClass.split('-').filter((e) => /^[1-9]$/.test(e));
                 acc[sizeKeyMap[key]] = sizes;
                 break;
             }

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

@@ -0,0 +1,21 @@
+import { FoundationTheme } from '@nuskin/foundation-theme';
+
+export type CslpTag = { 'data-cslp': string };
+
+export type AdditionalProps = {
+    additionalProps?: {
+        ariaLabel?: string;
+        testid?: string;
+        className?: string;
+        'data-testid'?: string;
+    } & Partial<CslpTag>;
+    cslp?: Record<string, CslpTag>;
+} & DarkModeEnabledOption;
+
+export type Themed = {
+    theme: FoundationTheme.Theme;
+};
+
+export type DarkModeEnabledOption = {
+    darkModeEnabled?: boolean;
+};

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent, screen, waitFor } from '../../../test-utils';
+import { render, fireEvent, screen, waitFor } from '@/test-utils/index';
 import NsDropdown from './NsDropdown';
 import NsDropdownOption from './NsDropdownOption';
 

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

@@ -1,5 +1,6 @@
 import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
-const { getPaletteColor, getAppColor } = ColorUtils;
+import { Themed } from '../common.types';
+const { color, paletteColor, isDarkMode } = ColorUtils;
 
 export const DropdownContainer = styled.div<{ disabled: boolean }>`
     position: relative;
@@ -7,15 +8,22 @@ export const DropdownContainer = styled.div<{ disabled: boolean }>`
     opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
 `;
 
+/** this function also used for SelectHead */
+export const getDropdownHeadBorder = ({ type, theme }: { type: string } & Themed) => {
+    if (type === 'outlined') {
+        const borderColor = color('primary', 'black')({ theme });
+        return `1px solid ${borderColor}`;
+    }
+    return 'none';
+};
 export const DropdownHead = styled.div<{ type: string; disabled: boolean }>`
     cursor: ${({ disabled }) => (disabled ? 'inherit' : 'pointer')};
     padding: 5px 10px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border: ${({ type, theme }) =>
-        type === 'outlined' ? `1px solid ${getAppColor(theme, 'primary', 'black')}` : 'none'};
-    color: ${({ theme }) => getPaletteColor(theme, 'primary')};
+    border: ${getDropdownHeadBorder}
+    color: ${paletteColor('primary')};
 `;
 
 export const DropdownButton = styled.div`
@@ -25,27 +33,19 @@ export const DropdownButton = styled.div`
 export const DropdownList = styled.div<{ borderColor: FoundationTheme.PaletteColors }>`
     position: absolute;
     z-index: 100;
-    border: 1px solid ${({ borderColor, theme }) => getPaletteColor(theme, borderColor)};
+    border: 1px solid ${({ borderColor, theme }) => paletteColor(borderColor)({ theme })};
     padding: 0;
     margin: 0;
     width: 100%;
-    color: ${({ theme }) => getPaletteColor(theme, 'primary', 'main')};
-    background-color: ${({ theme }) => getPaletteColor(theme, 'primary', 'contrastText')};
+    color: ${paletteColor('primary', 'main')};
+    background-color: ${paletteColor('primary', 'contrastText')};
 `;
-const getIsLight = (theme: FoundationTheme.Theme) => {
-    const { palette = { primary: { main: '', contrastText: '' } } } = theme;
-    return palette.primary.main === getAppColor(theme, 'primary', 'black');
-};
 
 const getDividerColor = (theme: FoundationTheme.Theme) => {
-    const isLight = getIsLight(theme);
-    const dividerColor = isLight ? getAppColor(theme, 'neutral', '30') : getAppColor(theme, 'neutral', '20');
-    return dividerColor;
+    return color('neutral', isDarkMode({ theme }) ? '20' : '30')({ theme });
 };
 const getListBgColor = (theme: FoundationTheme.Theme) => {
-    const isLight = getIsLight(theme);
-    const bgColor = isLight ? getAppColor(theme, 'accentColorB', '10') : getAppColor(theme, 'accentColorB', '50');
-    return bgColor;
+    return color('accentColorB', isDarkMode({ theme }) ? '50' : '10')({ theme });
 };
 export const ListItemContainer = styled.div<{ showListDivider: boolean }>`
     cursor: pointer;
@@ -61,7 +61,12 @@ export const ListItemContainer = styled.div<{ showListDivider: boolean }>`
     }
 `;
 
+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: ${({ isSelected, theme }) => (isSelected ? `2px solid ${getPaletteColor(theme, 'primary')}` : 'none')};
+    border-left: ${getBorder};
 `;

package/src/common/dropdown/NsDropdown.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { DropdownContainer, DropdownButton, DropdownList, DropdownHead } from './NsDropdown.styled';
 import { NsIcon } from '../icon';
-import { DropdownProps } from './types';
+import { DropdownProps } from './types.d';
 
 const NsDropdown: React.FC<DropdownProps> = ({
     selectedValue,

package/src/common/dropdown/NsDropdownOption.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ListItem, ListItemContainer } from './NsDropdown.styled';
-import { DropdownOptionProps } from './types';
+import { DropdownOptionProps } from './types.d';
 
 export const NsDropdownOption: React.FC<DropdownOptionProps> = ({
     value,

package/src/common/dropdown/index.ts

@@ -1,3 +1,3 @@
 export { default as NsDropdown } from './NsDropdown';
 export { default as NsDropdownOption } from './NsDropdownOption';
-export type { DropdownOptionProps, DropdownProps } from './types';
+export type { DropdownOptionProps, DropdownProps } from './types.d';

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

@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { NsDropdown, NsDropdownOption } from '../';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsDropdown;
 type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsDropdown',
+    title: 'Components/Inputs/NsDropdown',
     decorators: [withCenterDecorator],
     component: NsDropdown,
     argTypes: {

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

@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { NsDropdown, NsDropdownOption } from '../';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsDropdown;
 type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsDropdown',
+    title: 'Components/Inputs/NsDropdown',
     decorators: [withCenterDecorator],
     component: NsDropdown,
     argTypes: {

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

@@ -1,7 +1,9 @@
 import { ReactNode } from 'react';
 import { FoundationTheme } from '@nuskin/foundation-theme';
 
-export interface DropdownProps {
+import { AdditionalProps } from '../common.types';
+
+export interface DropdownProps extends AdditionalProps {
     selectedValue: string;
     selectedLabel: string;
     onSelect: (arg: string) => void; // eslint-disable-line

package/src/common/email-simple/NsEmailSimple.spec.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import { render, screen, act } from '@testing-library/react';
+import NsEmailSimple from './NsEmailSimple';
+import { userEvent } from '@storybook/testing-library';
+import { emailPattern } from '../validations/regex';
+
+describe('NsEmailSimple', () => {
+    let mockCheckEmail = jest.fn().mockResolvedValue([true, false]);
+    let propsData = {
+        disabled: false,
+        label: 'Email',
+        required: true,
+        maxLength: 50,
+        invalidEmailMessage: 'Please enter a valid email',
+        dupedEmailMessage: 'Email ID already exists',
+        requiredErrorMessage: 'Email field is required',
+        checkEmail: mockCheckEmail,
+    };
+    it('renders email field with invalid regex error', async () => {
+        render(<NsEmailSimple {...propsData} />);
+        const emailField = (await screen.findByTestId('email-field-test')) as HTMLInputElement;
+        expect(emailField).toBeInTheDocument;
+        const inputElement = emailField.querySelector('input');
+        if (!inputElement) {
+            return;
+        }
+        act(() => {
+            userEvent.type(inputElement, 'test');
+            userEvent.tab();
+        });
+
+        expect(inputElement).toHaveValue('test');
+
+        act(() => {
+            userEvent.clear(inputElement);
+            userEvent.type(inputElement, 'test@gm');
+            userEvent.tab();
+        });
+        expect(inputElement).toHaveValue('test@gm');
+
+        mockCheckEmail = jest.fn().mockResolvedValue([true, true]);
+        render(<NsEmailSimple {...propsData} />);
+        act(() => {
+            userEvent.clear(inputElement);
+            userEvent.type(inputElement, 'test!gmail');
+            userEvent.tab();
+        });
+        expect(inputElement).toHaveValue('test!gmail');
+        act(() => {
+            userEvent.clear(inputElement);
+            userEvent.tab();
+        });
+        expect(inputElement).toHaveValue('');
+
+        mockCheckEmail = jest.fn().mockResolvedValue([true, false]);
+        render(<NsEmailSimple {...propsData} />);
+        act(() => {
+            userEvent.clear(inputElement);
+            userEvent.type(inputElement, 'test@gmail.co');
+            userEvent.tab();
+        });
+        expect(inputElement).toHaveValue('test@gmail.co');
+    });
+    it('renders email field with invalid error', async () => {
+        let mockCheckEmail1 = jest.fn().mockResolvedValue([false, false]);
+        let propsData1 = {
+            disabled: false,
+            label: 'Email',
+            required: true,
+            maxLength: 50,
+            invalidEmailMessage: 'Please enter a valid email',
+            dupedEmailMessage: 'Email ID already exists',
+            requiredErrorMessage: 'Email field is required',
+            checkEmail: mockCheckEmail1,
+        };
+        render(<NsEmailSimple {...propsData1} />);
+        const emailField = (await screen.findByTestId('email-field-test')) as HTMLInputElement;
+        expect(emailField).toBeInTheDocument;
+        const inputElement = emailField.querySelector('input');
+        if (!inputElement) {
+            return;
+        }
+        act(() => {
+            userEvent.clear(inputElement);
+            userEvent.type(inputElement, 'test@gmail.com');
+            userEvent.tab();
+        });
+        expect(inputElement).toHaveValue('test@gmail.com');
+        expect(inputElement.value).toMatch(emailPattern);
+    });
+    it('renders email field without error', async () => {
+        let mockCheckEmail1 = jest.fn().mockResolvedValue([true, true]);
+        let propsData1 = {
+            disabled: false,
+            label: 'Email',
+            required: true,
+            maxLength: 50,
+            invalidEmailMessage: 'Please enter a valid email',
+            dupedEmailMessage: 'Email ID already exists',
+            requiredErrorMessage: 'Email field is required',
+            checkEmail: mockCheckEmail1,
+        };
+        render(<NsEmailSimple {...propsData1} />);
+        const emailField = (await screen.findByTestId('email-field-test')) as HTMLInputElement;
+        expect(emailField).toBeInTheDocument;
+        const inputElement = emailField.querySelector('input');
+        if (!inputElement) {
+            return;
+        }
+        act(() => {
+            userEvent.clear(inputElement);
+            userEvent.type(inputElement, 'test@gmail.com');
+            userEvent.tab();
+        });
+        expect(inputElement).toHaveValue('test@gmail.com');
+        expect(inputElement.value).toMatch(emailPattern);
+    });
+    it('renders email field with API error', async () => {
+        let mockCheckEmail1 = jest.fn().mockResolvedValue(undefined);
+        let propsData1 = {
+            disabled: false,
+            label: 'Email',
+            required: true,
+            maxLength: 50,
+            invalidEmailMessage: 'Please enter a valid email',
+            dupedEmailMessage: 'Email ID already exists',
+            requiredErrorMessage: 'Email field is required',
+            checkEmail: mockCheckEmail1,
+        };
+        render(<NsEmailSimple {...propsData1} />);
+        const emailField = (await screen.findByTestId('email-field-test')) as HTMLInputElement;
+        expect(emailField).toBeInTheDocument;
+        const inputElement = emailField.querySelector('input');
+        if (!inputElement) {
+            return;
+        }
+        act(() => {
+            userEvent.clear(inputElement);
+            userEvent.type(inputElement, 'test@gmail.com');
+            userEvent.tab();
+        });
+        expect(inputElement).toHaveValue('test@gmail.com');
+        expect(inputElement.value).toMatch(emailPattern);
+    });
+});

package/src/common/email-simple/NsEmailSimple.stories.tsx

@@ -0,0 +1,61 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import NsEmailSimple from './NsEmailSimple';
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+
+async function checkEmail() {
+    const isServiceValid = Promise.resolve(true);
+    const isEmailAvailable = Promise.resolve(true);
+    return [isServiceValid, isEmailAvailable];
+}
+type ComponentType = typeof NsEmailSimple;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    component: NsEmailSimple,
+    title: 'Components/Inputs/NsEmailSimple',
+    decorators: [withCenterDecorator],
+    play: ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const el = canvas.getByTestId('email-field-test');
+        expect(el).toBeInTheDocument();
+    },
+
+    argTypes: {
+        disabled: {
+            description: 'Indicates whether the email field is enabled/disabled',
+        },
+        label: {
+            description: 'Label of the email component',
+        },
+        required: {
+            description: 'Indicates whether the email field is mandatory or not',
+        },
+        maxLength: {
+            description: 'Maximum number of characters allowed',
+        },
+        invalidEmailMessage: {
+            description: 'Displayed when an invalid email is entered',
+        },
+        dupedEmailMessage: {
+            description: 'Displayed when a duplicate email is entered',
+        },
+        requiredErrorMessage: {
+            description: 'Displayed when email is not entered',
+        },
+    },
+    args: {
+        disabled: false,
+        label: 'Email',
+        required: true,
+        maxLength: 50,
+        invalidEmailMessage: 'Please enter a valid email',
+        dupedEmailMessage: 'Email ID already exists',
+        requiredErrorMessage: 'Email field is required',
+        checkEmail: checkEmail,
+    },
+} as MetaStory;
+
+export const NsEmail: Story = {};