@nuskin/foundation-ui-components 1.0.0-develop.2 → 1.0.0-develop.4

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

@@ -8,28 +8,29 @@ const { palette } = nuskinTheme;
 describe('<Button />', () => {
     describe(' button primary', () => {
         test('should render default button styles', () => {
+            const text = 'Click Me';
             render(
                 <Button color="primary" variant="contained">
-                    Click Me
+                    {text}
                 </Button>
             );
 
-            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.main}`);
+            expect(button).toHaveStyle(`color: ${palette?.primary?.contrastText ?? ''}`);
+            expect(button).toHaveStyle(`background-color: ${palette?.primary?.main ?? ''}`);
         });
     });
     describe('button secondary', () => {
         test('should render default button styles', () => {
+            const text = 'Click Me';
             render(
                 <Button color="success" variant="contained" size="large">
-                    Click Me
+                    {text}
                 </Button>
             );
 
-            const button = screen.getByText('Click Me');
+            const button = screen.getByText(text);
 
             expect(button).toBeInTheDocument();
             expect(button).toHaveStyle(`color: ${palette.success.contrastText}`);
@@ -37,7 +38,7 @@ describe('<Button />', () => {
         });
     });
     describe('button outline success', () => {
-        test('should render outlined sucess button', () => {
+        test('should render outlined success button', () => {
             render(
                 <Button color="success" variant="outlined" size="large">
                     Click Me
@@ -48,11 +49,10 @@ describe('<Button />', () => {
 
             expect(button).toBeInTheDocument();
             expect(button).toHaveStyle(`color: ${palette.success.main}`);
-            expect(button).toHaveStyle(`border-color: ${palette.success.main}`);
         });
     });
     describe('button outline accentColorA', () => {
-        test('should render outlined sucess button', () => {
+        test('should render outlined success button', () => {
             render(
                 <Button color="accentColorA" variant="outlined" size="large">
                     Click Me
@@ -63,7 +63,6 @@ describe('<Button />', () => {
 
             expect(button).toBeInTheDocument();
             expect(button).toHaveStyle(`color: ${palette?.accentColorA?.main}`);
-            expect(button).toHaveStyle(`border-color: ${palette?.accentColorA?.main}`);
         });
     });
 });

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

@@ -2,7 +2,7 @@ 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';
 
 type ComponentType = typeof NsButton;
 type Story = StoryObj<ComponentType>;

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

@@ -1,6 +1,26 @@
 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,
@@ -8,6 +28,7 @@ const NsScrollingCarousal = ({
     stillSeconds,
     renderSlide,
     settings,
+    dotsBottomPixel,
     additionalProps,
 }: NsScrollingCarousalProps) => {
     const defaultSettings = useMemo(() => {
@@ -28,9 +49,12 @@ const NsScrollingCarousal = ({
         };
     }, [stillSeconds, scrollSeconds, settings]);
     return (
-        <div data-testid={additionalProps?.testid ?? 'scrolling-carousal-test-id'}>
+        <StyledDiv
+            dotsBottomPixel={dotsBottomPixel}
+            data-testid={additionalProps?.testid ?? 'scrolling-carousal-test-id'}
+        >
             <Slider {...defaultSettings}>{slides.map(renderSlide)}</Slider>
-        </div>
+        </StyledDiv>
     );
 };
 

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

@@ -4,7 +4,7 @@
  */
 
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsScrollingCarousal, NsTextStrip } from '@/common/';
 
 type ComponentType = typeof NsScrollingCarousal;

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

@@ -18,4 +18,6 @@ export type NsScrollingCarousalProps<T = any> = {
     /* 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.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/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.styled.tsx

@@ -38,8 +38,8 @@ export const BpCheckedIcon = styled(BpIcon)(({ theme: { palette } }) => ({
     path: {
         display: 'block',
     },
-    background: palette.primary.main,
-    color: palette.primary.contrastText,
+    background: palette?.primary?.main ?? '#fff',
+    color: palette?.primary?.contrastText ?? '#000',
 }));
 
 export const StyledLabel = styled('span')<{ $hasDisabled: boolean }>`

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

@@ -1,23 +1,18 @@
-import { PropsWithChildren, useMemo } from 'react';
+import { useMemo } from 'react';
 import { getColumnSizes } from './utils';
 import { StyledFlex } from './styled/StyledFlex';
-import { AdditionalProps } from '../common.types';
+import { NsFlexColumnsProps } from './types';
 
-type NsFlexColumnsProps = PropsWithChildren<{
-    columnClass: string;
-    gap: number;
-}> &
-    AdditionalProps;
-
-const NsFlexColumns = ({ columnClass, children, gap, additionalProps }: NsFlexColumnsProps) => {
+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="styled-flex"
+            className="ns-flex-columns"
             data-testid={additionalProps?.testid ?? 'ns-flex-columns'}
         >
             {children}

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

@@ -1,23 +1,18 @@
-import { PropsWithChildren, useMemo } from 'react';
+import { useMemo } from 'react';
 import { getColumnSizes } from './utils';
 import { StyledGrid } from './styled/StyledGrid';
-import { AdditionalProps } from '../common.types';
+import { NsGridColumnsProps } from './types';
 
-type NsGridColumnsProps = PropsWithChildren<{
-    columnClass: string;
-    gap: number;
-}> &
-    AdditionalProps;
-
-const NsGridColumns = ({ columnClass, children, gap, additionalProps }: NsGridColumnsProps) => {
+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="styled-grid"
+            className="ns-grid-columns"
             data-testid={additionalProps?.testid ?? 'ns-grid-columns'}
         >
             {children}

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

@@ -1,6 +1,6 @@
 import { NsColumnControl } from '@/common/index';
-import { DivArray } from '../stories/NDivs.story';
 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

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

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

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

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 = {};

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

@@ -0,0 +1,63 @@
+import { PropsWithChildren } from 'react';
+
+type DivArrayProps = {
+    elementsCount: number;
+};
+
+const getRandom = (n: number) => (Math.random() * n).toFixed(0);
+
+type DivComponentProps = PropsWithChildren<{ style: Record<string, any>; index: number }>;
+export const DivComponent = ({ style, index, children }: DivComponentProps) => {
+    const borderWidth = `${getRandom(5)}px`;
+    const padding = `${getRandom(20)}px`;
+    return (
+        <div
+            style={{
+                padding,
+                border: `${borderWidth} solid`,
+                borderColor: `hsl(${getRandom(359)},100%, 50%)`,
+                background: `hsla(${getRandom(359)},100%, 50%,0.3)`,
+                ...style,
+            }}
+        >
+            {index}
+            {children}
+        </div>
+    );
+};
+/**
+ * this component return a fragment containing n number of div, with each div numbered as per its index
+ * @param n: number of div to render
+ * @returns
+ */
+export const DivArray = ({ elementsCount }: DivArrayProps) => (
+    <>
+        {Array(elementsCount)
+            .fill(0)
+            .map((_, index) => (
+                <DivComponent key={index} index={index + 1} style={{}} />
+            ))}
+    </>
+);
+export const DivArrayRandom = ({ elementsCount }: DivArrayProps) => (
+    <>
+        {Array(elementsCount)
+            .fill(0)
+            .map((_, index) => {
+                const width = `${getRandom(700)}px`;
+                const height = `${getRandom(400)}px`;
+                return (
+                    <DivComponent
+                        key={index}
+                        index={index + 1}
+                        style={{
+                            width,
+                            height,
+                        }}
+                    >
+                        item no = {index + 1} with width = {width} and height = {height}
+                    </DivComponent>
+                );
+            })}
+    </>
+);

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

@@ -1,7 +1,7 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsColumnControl } from '@/common/index';
-import { DivArray } from './NDivs.story';
+import { DivArray } from './DivArray';
 import { childrenMapping, selectDivOptions } from './common';
 
 type ComponentType = typeof NsColumnControl;
@@ -32,7 +32,10 @@ export default {
     },
 } as MetaStory;
 
-export const SingleColumnControl: Story = {};
+export const ResponsiveColumnControl: Story = {};
+export const SingleColumnControl: Story = {
+    args: { columnClass: '' },
+};
 export const TwoColumn11: Story = {
     args: { columnClass: 'ns-col-lg-1-1' },
 };

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

@@ -1,8 +1,8 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsFlexColumns } from '..';
-import { DivArray } from './NDivs.story';
-import {childrenMapping,  selectDivOptions } from './common';
+import { DivArray, DivArrayRandom } from './DivArray';
+import { childrenMapping, selectDivOptions } from './common';
 
 type ComponentType = typeof NsFlexColumns;
 type Story = StoryObj<ComponentType>;
@@ -26,17 +26,21 @@ export default {
                 type: 'select',
                 options: selectDivOptions,
             },
-            defaultValue: <DivArray elementsCount={8} />,
+            defaultValue: <DivArrayRandom elementsCount={8} />,
             mapping: childrenMapping,
         },
     },
     args: {
-        columnClass: 'ns-col-lg-1-1-1',
-        children: <DivArray elementsCount={12} />,
+        columnClass: '',
+        children: <DivArrayRandom elementsCount={12} />,
     },
 } as MetaStory;
 
-export const SingleColumnControl: Story = {};
+export const DefaultColumnControl: Story = {
+    args: {
+        children: <DivArray elementsCount={8} />,
+    },
+};
 export const TwoColumn11: Story = {
     args: { columnClass: 'ns-col-lg-1-1' },
 };
@@ -50,10 +54,10 @@ export const ThreeColumn211: Story = {
 export const ThreeColumn121: Story = {
     args: { columnClass: 'ns-col-lg-1-2-1' },
 };
-export const ThreeColumn111Responsive: Story = {
+export const ThreeColumn111: Story = {
     args: { columnClass: 'ns-col-lg-1-1-1' },
 };
 
-export const FourColumn1111Responsive: Story = {
+export const FourColumn1111: Story = {
     args: { columnClass: 'ns-col-lg-1-1-1-1' },
 };

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

@@ -1,7 +1,7 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsGridColumns } from '..';
-import { DivArray } from './NDivs.story';
+import { DivArray, DivArrayRandom } from './DivArray';
 import { childrenMapping, selectDivOptions } from './common';
 
 type ComponentType = typeof NsGridColumns;
@@ -26,17 +26,21 @@ export default {
                 type: 'select',
                 options: selectDivOptions,
             },
-            defaultValue: <DivArray elementsCount={8} />,
+            defaultValue: <DivArrayRandom elementsCount={8} />,
             mapping: childrenMapping,
         },
     },
     args: {
-        columnClass: 'ns-col-lg-1-1-1',
-        children: <DivArray elementsCount={12} />,
+        columnClass: '',
+        children: <DivArrayRandom elementsCount={12} />,
     },
 } as MetaStory;
 
-export const SingleColumnControl: Story = {};
+export const DefaultColumnControl: Story = {
+    args: {
+        children: <DivArray elementsCount={8} />,
+    },
+};
 export const TwoColumn11: Story = {
     args: { columnClass: 'ns-col-lg-1-1' },
 };
@@ -50,10 +54,10 @@ export const ThreeColumn211: Story = {
 export const ThreeColumn121: Story = {
     args: { columnClass: 'ns-col-lg-1-2-1' },
 };
-export const ThreeColumn111Responsive: Story = {
+export const ThreeColumn111: Story = {
     args: { columnClass: 'ns-col-lg-1-1-1' },
 };
 
-export const FourColumn1111Responsive: Story = {
+export const FourColumn1111: Story = {
     args: { columnClass: 'ns-col-lg-1-1-1-1' },
 };

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

@@ -1,4 +1,4 @@
-import { DivArray } from './NDivs.story';
+import { DivArray } from './DivArray';
 
 /* an array from 1 to n */
 export const selectDivOptions = Array(16)

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

@@ -4,31 +4,35 @@ import { sizeObjectType } from '../types';
 import { commonStyles, getPercentArray } from './common';
 
 const options = {
-    shouldForwardProp: (propKey: string) => propKey !== 'sizes | gap',
+    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 }: StyledFlexProps) => {
+)<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) => {

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

@@ -6,26 +6,33 @@ import { commonStyles, getPercentArray } from './common';
 type StyledGridProps = {
     sizes: sizeObjectType;
     gap?: number;
+    isFullWidth: boolean;
 };
 const options = {
-    shouldForwardProp: (propKey: string) => propKey !== 'sizes | gap',
+    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 }: StyledGridProps) => {
+)<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',
         },

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

@@ -1,8 +1,8 @@
 const mobileBreakPoint = '600px';
-// TODO: we need to add a prop in the to allow full width of page instead of 1200px
+
 export const commonStyles = {
-    maxWidth: '1200px',
     margin: '32px auto',
+
     [`@media (max-width: ${mobileBreakPoint})`]: {
         display: 'flex',
         flexDirection: 'column',