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

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

@@ -2,12 +2,9 @@ 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 { NsButtonProps } from './types.d';
 
-const {
-    getPaletteColor,
-    getButtonStateColor,
-} = ColorUtils;
+const { getPaletteColor, getButtonStateColor } = ColorUtils;
 
 const getButtonConfig = (theme: FoundationTheme.Theme, attribute: keyof ButtonConfig) => {
     const { config } = theme || {};
@@ -16,23 +13,23 @@ const getButtonConfig = (theme: FoundationTheme.Theme, attribute: keyof ButtonCo
 
 const StyledButton = styled(MUIButton)<NsButtonProps>`
     gap: 10px;
-    border-radius: ${({ theme}) => getButtonConfig(theme, 'borderRadius')} || 0;
+    border-radius: ${({ theme }) => getButtonConfig(theme, 'borderRadius')} || 0;
     :focus {
-        border: 1px solid  ${({ theme}) => getButtonConfig(theme, 'focusColor')} !important;
+        border: 1px solid ${({ theme }) => getButtonConfig(theme, 'focusColor')} !important;
     }
     :disabled {
         background-color: ${({ theme, color }) => getButtonStateColor(theme, color, 'disabled')};
         color: ${({ theme, color }) => getButtonStateColor(theme, color, 'disabledText')};
     }
     ${({ theme: { config }, size }) => {
-        return size === 'medium' ? config?.components?.button?.size?.medium?.padding : ''
+        return size === 'medium' ? config?.components?.button?.size?.medium?.padding : '';
     }}
-    ${({ theme: { config}, size }) => {
-        return size === 'large' ? config?.components?.button?.size?.large?.padding : ''
+    ${({ theme: { config }, size }) => {
+        return size === 'large' ? config?.components?.button?.size?.large?.padding : '';
     }}
     ${({ variant, theme, color = 'primary' }) => {
-        return variant === 'contained' ?
-            `
+        return variant === 'contained'
+            ? `
                 background-color: ${getPaletteColor(theme, color)};
                 :hover {
                     background-color: ${getButtonStateColor(theme, color, 'hovered')};
@@ -44,7 +41,7 @@ const StyledButton = styled(MUIButton)<NsButtonProps>`
                     background-color: ${getButtonStateColor(theme, color, 'focused')};
                 }
             `
-            : ''
+            : '';
     }}
   ${({ variant, theme, color = 'primary' }) =>
         variant === 'outlined' &&

package/src/common/button/NsButton.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import StyledButton from './NsButton.styled';
-import { NsButtonProps } from './types';
+import { NsButtonProps } from './types.d';
 
 const NsButton = ({ children, ...props }: PropsWithChildren<NsButtonProps>) => {
     return (

package/src/common/button/index.ts

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

package/src/common/card/NsFfgCard.tsx

@@ -1,6 +1,6 @@
 import { NsNextImage, NsLink } from '../';
 import { NsFfgStyled } from './styled/NsFfgStyled';
-import { NsFfgCardProps } from './types';
+import { NsFfgCardProps } from './types.d';
 
 const NsFfgCard = ({ actionText, actionLink, text, topImageUrl, topImageAlt, additionalProps }: NsFfgCardProps) => {
     return (

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { NsBgCard } from '../';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsBgCard;
 type Story = StoryObj<ComponentType>;
@@ -13,8 +13,6 @@ export default {
     args: {
         title: 'ageLOC LumiSpa',
         backgroundImageUrl: 'https://media.nuskin.com/m/3604b5202b0b64c6/webimage-brand-lumispa-optweb.png',
-        // brandImageUrl:
-        // 'https://media.nuskin.com/m/2571a0407433a6e8/webimage-brand-lumispa.png',
     },
     decorators: [withCenterDecorator],
 } as MetaStory;

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

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsBrandProductCard } from '../';
 
 type ComponentType = typeof NsBrandProductCard;

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

@@ -1,7 +1,7 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { within, userEvent } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsFfgCard } from '../';
 
 type ComponentType = typeof NsFfgCard;

package/src/common/card/stories/{data.js → data.ts}

@@ -8,14 +8,6 @@ export const brandImages = [
     'https://media.nuskin.com/m/4bd7ab9b46bd456d/webimage-brand-pharmanex.png',
     'https://media.nuskin.com/m/501d638a8af80087/webimage-brand-ap24.png',
     'https://media.nuskin.com/m/f3a91129cbbae32/webimage-brand-nutricentials.png',
-    'https://media.nuskin.com/m/63a454ff90d038b4/webimage-brand-epoch.png',
-    'https://media.nuskin.com/m/3eb406f465d4b0fe/webimage-brand-sunright.png',
-    'https://media.nuskin.com/m/2d3276518912283b/webimage-brand-nu_colour.png',
-    'https://media.nuskin.com/m/3855d3836d920639/webimage-brand-nuskin180.png',
-    'https://media.nuskin.com/m/6245528b8f76ad32/webimage-brand-ageLOC.png',
-    'https://media.nuskin.com/m/2571a0407433a6e8/webimage-brand-lumispa.png',
-    'https://media.nuskin.com/m/4bd7ab9b46bd456d/webimage-brand-pharmanex.png',
-    'https://media.nuskin.com/m/501d638a8af80087/webimage-brand-ap24.png',
 ];
 
 export const brandBackImages = [
@@ -28,34 +20,18 @@ export const brandBackImages = [
     'https://media.nuskin.com/m/4a1245a63c595262/webimage-brand-pharmanex-optweb.png',
     'https://media.nuskin.com/m/14a0fd6ef63e5dbb/webimage-brand-ap_24.png',
     'https://media.nuskin.com/m/298104036e885b40/webimage-brand-nutricentials.png',
-    'https://media.nuskin.com/m/549aa3e5184434d8/webimage-brand-epoch-optweb.png',
-    'https://media.nuskin.com/m/14e238d7599e1811/webimage-brand-sunright.png',
-    'https://media.nuskin.com/m/2543e79419276727/webimage-brand-nu_colour-optweb.png',
-    'https://media.nuskin.com/m/446c7a2aad513f58/webimage-brand-nu_skin_180-optweb.png',
-    'https://media.nuskin.com/m/42911c8b05600476/webimage-brand-ageloc-optweb.png',
-    'https://media.nuskin.com/m/3604b5202b0b64c6/webimage-brand-lumispa-optweb.png',
-    'https://media.nuskin.com/m/4a1245a63c595262/webimage-brand-pharmanex-optweb.png',
-    'https://media.nuskin.com/m/14a0fd6ef63e5dbb/webimage-brand-ap_24.png',
 ];
 
 export const brandTitles = [
     'Epoch',
     'Sunright',
-    'Nu Colour',
+    'Nu Color',
     '180 System',
     'ageLOC',
     'ageLOC LumiSpa',
     'Pharmanex',
     'AP 24',
     'Nutricentials',
-    'Epoch',
-    'Sunright',
-    'Nu Colour',
-    '180 System',
-    'ageLOC',
-    'ageLOC LumiSpa',
-    'Pharmanex',
-    'AP 24',
 ];
 export const brandEntries = brandTitles.map((title, index) => {
     return {

package/src/common/carousal/NsScrollingCarousal.tsx

@@ -0,0 +1,61 @@
+import React, { useMemo } from 'react';
+import Slider from 'react-slick';
+import { NsScrollingCarousalProps } from '../';
+import { styled } from '@nuskin/foundation-theme';
+
+const options = {
+    shouldForwardProp: (prop: string) => prop !== 'dotsBottomPixel',
+};
+
+const StyledDiv = styled(
+    'div',
+    options
+)<{
+    dotsBottomPixel?: number;
+}>(({ dotsBottomPixel }) => {
+    return {
+        '.slick-dots': {
+            zIndex: 9,
+            bottom: `${dotsBottomPixel ?? -25}px`,
+            opacity: '0.5',
+        },
+    };
+});
+
+const NsScrollingCarousal = ({
+    slides,
+    scrollSeconds,
+    stillSeconds,
+    renderSlide,
+    settings,
+    dotsBottomPixel,
+    additionalProps,
+}: NsScrollingCarousalProps) => {
+    const defaultSettings = useMemo(() => {
+        return {
+            ...settings,
+            autoplay: true,
+            autoplaySpeed: stillSeconds * 1000 || 2000, // autoplaySpeed = delay between scroll in milliseconds
+            accessibility: true,
+            adaptiveHeight: true,
+            arrows: true,
+            draggable: true,
+            dots: true,
+            infinite: true,
+            speed: scrollSeconds * 1000 || 500, // speed = animation speed in milliseconds
+            slidesToShow: 1,
+            slidesToScroll: 1,
+            swipeToSlide: true,
+        };
+    }, [stillSeconds, scrollSeconds, settings]);
+    return (
+        <StyledDiv
+            dotsBottomPixel={dotsBottomPixel}
+            data-testid={additionalProps?.testid ?? 'scrolling-carousal-test-id'}
+        >
+            <Slider {...defaultSettings}>{slides.map(renderSlide)}</Slider>
+        </StyledDiv>
+    );
+};
+
+export default NsScrollingCarousal;

package/src/common/carousal/index.ts

@@ -1,2 +1,5 @@
 export { default as NsCarousal } from './NsCarousal';
+export { default as NsScrollingCarousal } from './NsScrollingCarousal';
 export { default as NsDefaultCarousalSettings } from './slickSetting';
+
+export type { NsCarousalProps, NsScrollingCarousalProps } from './types.d';

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { NsCarousal } from '../';
+import { NsCarousal } from '@/common/';
 import { brandEntries } from '../../card/stories/data';
 import { RenderBrand } from '../RenderBrand';
 import settings from '../slickSetting';

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

@@ -0,0 +1,52 @@
+/**
+ * NsScrollingText.stories.tsx
+ * @description NsScrollingText component.
+ */
+
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { NsScrollingCarousal, NsTextStrip } from '@/common/';
+
+type ComponentType = typeof NsScrollingCarousal;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export const renderSlide = (slide: any, i: number) => <NsTextStrip key={i} {...slide} />;
+
+export const slides = [
+    {
+        text: 'Hello Nike App',
+        description: 'Download the app to access everything Nike',
+        link: { href: 'https://www.nike.com/in/help/a/shipping-delivery-gs', title: 'Get Your Great' },
+        alignment: 'center',
+    },
+    {
+        text: 'New Styles on Sale: Up to 40% Off',
+        // description: 'Download the app to access everything Nike',
+        link: { href: 'https://www.nike.com/in/help/a/shipping-delivery-gs', title: 'Shop All Our New Markdowns' },
+        alignment: 'center',
+    },
+    {
+        text: 'Free Delivery',
+        // description: 'Applies to orders of ₹ 14 000.00 or more. ',
+        // link: { href: 'https://www.nike.com/in/help/a/shipping-delivery-gs', title: 'View Details' },
+        alignment: 'center',
+    },
+];
+export default {
+    title: 'Components/NsCarousal/NsScrollingCarousal',
+    component: NsScrollingCarousal,
+    decorators: [withCenterDecorator],
+    argTypes: {},
+    args: {
+        slides,
+        renderSlide,
+        stillSeconds: 3,
+        scrollSeconds: 1,
+        additionalProps: {
+            testid: 'scrolling-carousal',
+        },
+    },
+} as MetaStory;
+
+export const ScrollingText: Story = {};

package/src/common/carousal/tests/NsCarousal.spec.tsx

@@ -1,5 +1,5 @@
-import { render, screen, fireEvent } from '../../../../test-utils';
-import NsCarousal from '../NsCarousal';
+import { render, screen, fireEvent } from '@/test-utils/index';
+import { NsCarousal } from '@/common/';
 
 const mockEntries = [
     { id: 1, title: 'First entry' },

package/src/common/carousal/tests/NsScrollingCarousal.spec.tsx

@@ -0,0 +1,61 @@
+import { render, screen, fireEvent } from '@/test-utils/index';
+import { NsScrollingCarousal } from '@/common/';
+
+const mockEntries = [
+    { id: 1, title: 'First entry' },
+    { id: 2, title: 'Second entry' },
+    { id: 3, title: 'Third entry' },
+    { id: 4, title: 'Fourth entry' },
+    { id: 5, title: 'Fifth entry' },
+];
+
+const mockRenderEntry = (entry: any, index: number) => {
+    return <div key={index}>{entry.title}</div>;
+};
+const mockSettings = {
+    slidesToShow: 2,
+    slidesToScroll: 1,
+};
+const testId = 'scrolling-carousal';
+describe('NsScrollingCarousal', () => {
+    it('should have slides', () => {
+        render(
+            <NsScrollingCarousal
+                slides={mockEntries}
+                renderSlide={mockRenderEntry}
+                settings={mockSettings}
+                scrollSeconds={1}
+                stillSeconds={9}
+                additionalProps={{
+                    testid: testId,
+                }}
+            />
+        );
+        const el = screen.getAllByText(mockEntries[0].title);
+        expect(el).toHaveLength(2);
+    });
+
+    it('should change slides when clicking on prev or next buttons', () => {
+        const { container } = render(
+            <NsScrollingCarousal
+                slides={mockEntries}
+                renderSlide={mockRenderEntry}
+                settings={mockSettings}
+                scrollSeconds={1}
+                stillSeconds={9}
+            />
+        );
+
+        let currentSlide = container.querySelector('.slick-slide.slick-current');
+        expect(currentSlide!.attributes['data-index' as any].value).toEqual('0');
+
+        /* this is library's button, not our button, it is used for changing slides,
+      clicking svg is not making any slide change in this test */
+        const nextButton = screen.getByRole('button', { name: /next/i });
+        fireEvent.click(nextButton);
+
+        let slickTrack = container.querySelector('.slick-track');
+        currentSlide = slickTrack!.querySelector('.slick-slide.slick-current');
+        expect(currentSlide!.attributes['data-index' as any].value).toEqual('1');
+    });
+});

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

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { AdditionalProps } from '../common.types';
+
+export type NsCarousalProps<T = any> = {
+    entries: T[];
+    // eslint-disable-next-line no-unused-vars
+    renderEntry(entry: T, index: number): ReactNode;
+    allEntryLink: string;
+    settings: any;
+};
+
+export type NsScrollingCarousalProps<T = any> = {
+    slides: T;
+    // eslint-disable-next-line no-unused-vars
+    renderSlide(slide: T, index: number): ReactNode;
+    /* time it takes while scrolling */
+    scrollSeconds: number;
+    /* time for which slide stays still before scrolling */
+    stillSeconds: number;
+    settings: any;
+    /* value in number, specifying how much the dots should be from bottom of slides container */
+    dotsBottomPixel?: number;
+} & AdditionalProps;

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

@@ -1,5 +1,5 @@
 import { NsCartIcon } from './';
-import { render, screen } from '../../../test-utils';
+import { render, screen } from '@/test-utils/index';
 
 const { getByTestId } = screen;
 describe('NsCartIcon', () => {

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

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsCartIcon } from './';
 
 type ComponentType = typeof NsCartIcon;

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

@@ -1,6 +1,6 @@
 import { NsIcon } from '../icon';
 import { CartIconContainer, ItemCount } from './NsCartIcon.styled';
-import { NsCartIconProps } from './types';
+import { NsCartIconProps } from './types.d';
 
 const NsCartIcon = ({ itemCount, size = 'large', color = 'primary' }: NsCartIconProps) => {
     return (

package/src/common/cart-icon/index.ts

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

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

@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { render, fireEvent, noop } from '../../../test-utils';
+import { render, fireEvent, noop } from '@/test-utils/index';
 import NsCheckbox from './NsCheckbox';
 
 // Test suite for CustomCheckbox
@@ -54,4 +54,4 @@ describe('CustomCheckbox', () => {
         // Assert that the handleChange function has been called
         expect(handleChange).toHaveBeenCalled();
     });
-});
+});

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { within } from '@testing-library/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import type { StoryObj, Meta } from '@storybook/react';
 import { expect } from '@storybook/jest';
 

package/src/common/checkbox/NsCheckbox.tsx

@@ -9,7 +9,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import { default as MUICheckbox } from '@mui/material/Checkbox';
 
 import { BpCheckedIcon, BpIcon, StyledLabel, StyledFlagLabel } from './NsCheckbox.styled';
-import { NsCheckboxProps } from './types';
+import { NsCheckboxProps } from './types.d';
 
 import { NsTypography } from '../';
 

package/src/common/checkbox/index.ts

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

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

@@ -1,15 +1,9 @@
-/**
- * @author [vijayaprathap Kumar] (vpkumar@nuskin.com)
- * types.d.ts
- * @description NsCheckbox Props extending Mui CheckboxProps interface.
- */
-
 import { CheckboxProps as MUICheckboxProps } from '@material-ui/core/Checkbox';
 
 import { NsFlagProps } from '../flag';
 
 // Define the props for the custom checkbox component
-export type NsCheckboxProps = Pick<MUICheckboxProps, 'label' | 'onChange'> & {
+export type NsCheckboxProps = Partial<Pick<MUICheckboxProps, 'label' | 'onChange'>> & {
     name: string;
     className?: string;
     checked: boolean;

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

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '@nuskin/foundation-theme';
-import { NsColumnControlProps, sizeObjectType } from './types';
+import { NsColumnControlProps, sizeObjectType } from './types.d';
 import { getColumnSizes } from './utils';
 
 const options = {

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

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+import { getColumnSizes } from './utils';
+import { StyledFlex } from './styled/StyledFlex';
+import { NsFlexColumnsProps } from './types';
+
+const NsFlexColumns = ({ columnClass, children, gap, additionalProps, isFullWidth }: NsFlexColumnsProps) => {
+    const sizes = useMemo(() => {
+        return getColumnSizes(columnClass ?? 'ns-col-lg-1-1');
+    }, [columnClass]);
+    return (
+        <StyledFlex
+            isFullWidth={isFullWidth || false}
+            gap={gap}
+            sizes={sizes}
+            className="ns-flex-columns"
+            data-testid={additionalProps?.testid ?? 'ns-flex-columns'}
+        >
+            {children}
+        </StyledFlex>
+    );
+};
+export default NsFlexColumns;

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

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+import { getColumnSizes } from './utils';
+import { StyledGrid } from './styled/StyledGrid';
+import { NsGridColumnsProps } from './types';
+
+const NsGridColumns = ({ columnClass, children, gap, isFullWidth, additionalProps }: NsGridColumnsProps) => {
+    const sizes = useMemo(() => {
+        return getColumnSizes(columnClass ?? 'ns-col-lg-1-1');
+    }, [columnClass]);
+    return (
+        <StyledGrid
+            isFullWidth={isFullWidth || false}
+            gap={gap}
+            sizes={sizes}
+            className="ns-grid-columns"
+            data-testid={additionalProps?.testid ?? 'ns-grid-columns'}
+        >
+            {children}
+        </StyledGrid>
+    );
+};
+export default NsGridColumns;

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

@@ -1,2 +1,4 @@
 export { default as NsColumnControl } from './NsColumnControl';
-export type { NsColumnControlProps } from './types';
+export { default as NsFlexColumns } from './NsFlexColumns';
+export { default as NsGridColumns } from './NsGridColumns';
+export type { NsColumnControlProps } from './types.d';

package/src/common/column-control/{NsColumnControl.spec.tsx → specs/NsColumnControl.spec.tsx}

@@ -1,6 +1,6 @@
-import { render, screen } from '../../../test-utils';
-import { NsColumnControl } from './';
-import { DivArray } from './NDivs.story';
+import { NsColumnControl } from '@/common/index';
+import { render, screen } from '@/test-utils/index';
+import { DivArray } from '../stories/DivArray';
 
 describe('NsColumnControl component', () => {
     it('renders an column with proper grid value for tablet', () => {

package/src/common/column-control/specs/NsFlexColumns.spec.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '../../../../test-utils';
+import { NsFlexColumns } from '@/common/index';
+import { DivArray } from '../stories/DivArray';
+
+describe('NsFlexColumns component', () => {
+    it('renders an column with proper grid value for tablet', () => {
+        render(
+            <NsFlexColumns columnClass="ns-col-lg-1-1-1" gap={16}>
+                <DivArray elementsCount={4} />
+            </NsFlexColumns>
+        );
+        const element = screen.getByTestId('ns-flex-columns');
+        expect(element).toBeInTheDocument();
+    });
+    it('renders an column with proper grid value', () => {
+        console.warn = jest.fn();
+        render(
+            <NsFlexColumns columnClass="" gap={16}>
+                <DivArray elementsCount={4} />
+            </NsFlexColumns>
+        );
+        expect(console.warn).toHaveBeenCalledWith(expect.stringContaining('Received invalid className'));
+    });
+});

package/src/common/column-control/specs/NsGridColumns.spec.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '../../../../test-utils';
+import { NsGridColumns } from '@/common/index';
+import { DivArray } from '../stories/DivArray';
+
+describe('NsGridColumns component', () => {
+    it('renders an column with proper grid value for tablet', () => {
+        render(
+            <NsGridColumns columnClass="ns-col-lg-1-1-1" gap={16}>
+                <DivArray elementsCount={4} />
+            </NsGridColumns>
+        );
+        const element = screen.getByTestId('ns-grid-columns');
+        expect(element).toBeInTheDocument();
+    });
+    it('renders an column with proper grid value', () => {
+        console.warn = jest.fn();
+        render(
+            <NsGridColumns columnClass="" gap={16}>
+                <DivArray elementsCount={4} />
+            </NsGridColumns>
+        );
+        expect(console.warn).toHaveBeenCalledWith(expect.stringContaining('Received invalid className'));
+    });
+});

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

@@ -0,0 +1,18 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import {DivArray} from './DivArray';
+
+type ComponentType = typeof DivArray;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Column/NDivs',
+    component: DivArray,
+    decorators: [withCenterDecorator],
+    args: {
+        elementsCount: 2,
+    },
+} as MetaStory;
+
+export const Basic: Story = {};