From d9da606efb9bc4321284c0830d5f625e196d5c36 Mon Sep 17 00:00:00 2001
From: Gundu Mahidhar Reddy <MAHIDHAR001@e.ntu.edu.sg>
Date: Thu, 19 Sep 2024 11:18:15 +0800
Subject: [PATCH 1/6] [CCUBE-1548][MAHI]Set up ColDiv for layout with its tests
 and storybook and add theme capability for Layout component

---
 src/layout/col-div.style.tsx           | 119 +++++++++++++++++++++++++
 src/layout/col-div.tsx                 | 107 ++++++++++++++++++++++
 src/layout/index.ts                    |   2 +
 src/layout/types.ts                    |  68 ++++++++++++++
 stories/layout-test/Coldiv.stories.tsx |  94 +++++++++++++++++++
 tests/layout/layout-coldiv.spec.tsx    | 110 +++++++++++++++++++++++
 6 files changed, 500 insertions(+)
 create mode 100644 src/layout/col-div.style.tsx
 create mode 100644 src/layout/col-div.tsx
 create mode 100644 stories/layout-test/Coldiv.stories.tsx
 create mode 100644 tests/layout/layout-coldiv.spec.tsx

diff --git a/src/layout/col-div.style.tsx b/src/layout/col-div.style.tsx
new file mode 100644
index 000000000..c886b57ee
--- /dev/null
+++ b/src/layout/col-div.style.tsx
@@ -0,0 +1,119 @@
+import styled, { css } from "styled-components";
+import { MediaQuery } from "../theme/mediaquery/mediaquery-helper";
+
+export interface StyledDivStyleProps {
+    $xxsStart?: number | undefined;
+    $xxsSpan?: number | undefined;
+    $xsStart?: number | undefined;
+    $xsSpan?: number | undefined;
+    $smStart?: number | undefined;
+    $smSpan?: number | undefined;
+    $mdStart?: number | undefined;
+    $mdSpan?: number | undefined;
+    $lgStart?: number | undefined;
+    $lgSpan?: number | undefined;
+    $xlStart?: number | undefined;
+    $xlSpan?: number | undefined;
+    $xxlStart?: number | undefined;
+    $xxlSpan?: number | undefined;
+
+    $xxsMargin?: string | number;
+    $xxsGutter?: string | number;
+    $xsMargin?: string | number;
+    $xsGutter?: string | number;
+    $smMargin?: string | number;
+    $smGutter?: string | number;
+    $mdMargin?: string | number;
+    $mdGutter?: string | number;
+    $lgMargin?: string | number;
+    $lgGutter?: string | number;
+    $xlMargin?: string | number;
+    $xlGutter?: string | number;
+    $xxlMargin?: string | number;
+    $xxlGutter?: string | number;
+}
+
+export const StyledDiv = styled.div<StyledDivStyleProps>`
+    position: relative;
+
+    ${(props) => {
+        const {
+            $xxlStart,
+            $xxlSpan,
+            $xxlMargin,
+            $xxlGutter,
+
+            $xlStart,
+            $xlSpan,
+            $xlMargin,
+            $xlGutter,
+
+            $lgStart,
+            $lgSpan,
+            $lgMargin,
+            $lgGutter,
+
+            $mdStart,
+            $mdSpan,
+            $mdMargin,
+            $mdGutter,
+
+            $smStart,
+            $smSpan,
+            $smMargin,
+            $smGutter,
+
+            $xsStart,
+            $xsSpan,
+            $xsMargin,
+            $xsGutter,
+
+            $xxsStart,
+            $xxsSpan,
+            $xxsMargin,
+            $xxsGutter,
+        } = props;
+
+        return css`
+            grid-column: ${$xxlStart || "auto"} / span ${$xxlSpan || 1};
+            margin: ${$xxlMargin}px;
+            padding: ${$xxlGutter}px;
+
+            ${MediaQuery.MaxWidth.xl} {
+                grid-column: ${$xlStart || "auto"} / span ${$xlSpan || 1};
+                margin: ${$xlMargin}px;
+                padding: ${$xlGutter}px;
+            }
+
+            ${MediaQuery.MaxWidth.lg} {
+                grid-column: ${$lgStart || "auto"} / span ${$lgSpan || 1};
+                margin: ${$lgMargin}px;
+                padding: ${$lgGutter}px;
+            }
+
+            ${MediaQuery.MaxWidth.md} {
+                grid-column: ${$mdStart || "auto"} / span ${$mdSpan || 1};
+                margin: ${$mdMargin}px;
+                padding: ${$mdGutter}px;
+            }
+
+            ${MediaQuery.MaxWidth.sm} {
+                grid-column: ${$smStart || "auto"} / span ${$smSpan || 1};
+                margin: ${$smMargin}px;
+                padding: ${$smGutter}px;
+            }
+
+            ${MediaQuery.MaxWidth.xs} {
+                grid-column: ${$xsStart || "auto"} / span ${$xsSpan || 1};
+                margin: ${$xsMargin}px;
+                padding: ${$xsGutter}px;
+            }
+
+            ${MediaQuery.MaxWidth.xxs} {
+                grid-column: ${$xxsStart || "auto"} / span ${$xxsSpan || 1};
+                margin: ${$xxsMargin}px;
+                padding: ${$xxsGutter}px;
+            }
+        `;
+    }}
+`;
diff --git a/src/layout/col-div.tsx b/src/layout/col-div.tsx
new file mode 100644
index 000000000..c3d866443
--- /dev/null
+++ b/src/layout/col-div.tsx
@@ -0,0 +1,107 @@
+import React from "react";
+import { ColDivProps, DivRef } from "./types";
+import { StyledDiv } from "./col-div.style";
+import { BreakpointValues } from "../theme/breakpoint/theme-helper";
+import { ThemeSpec } from "../theme/types";
+import { useTheme } from "styled-components";
+
+const Component = (props: ColDivProps, ref: DivRef): JSX.Element => {
+    const theme = useTheme() as ThemeSpec;
+
+    const {
+        xxlCols,
+        xlCols,
+        lgCols,
+        mdCols,
+        smCols,
+        xsCols,
+        xxsCols,
+        ...otherProps
+    } = props;
+
+    const getColSpan = (
+        cols: number | [number, number] | undefined,
+        maxCols: number,
+        label: string
+    ) => {
+        if (!cols) return { start: undefined, span: undefined };
+
+        // during development process to give wwarning
+        if (process.env.NODE_ENV === "development") {
+            if (typeof cols === "number" && cols > maxCols) {
+                console.warn(
+                    `Warning: ${label}Cols exceeds maximum (${maxCols}): ${cols}`
+                );
+            } else if (
+                Array.isArray(cols) &&
+                (cols[0] > maxCols + 1 || cols[1] > maxCols + 1)
+            ) {
+                console.warn(
+                    `Warning: ${label}Cols array exceeds maximum (${maxCols}): [${cols[0]}, ${cols[1]}]`
+                );
+            }
+        }
+
+        if (Array.isArray(cols)) {
+            const [start, end] = cols;
+            const span = Math.min(end - start, maxCols);
+            return { start, span };
+        }
+
+        return { start: undefined, span: Math.min(cols, maxCols) };
+    };
+
+    const getStyleProps = () => {
+        const xxlColumnCount = BreakpointValues["xxl-column"]({ theme });
+        const xlColumnCount = BreakpointValues["xl-column"]({ theme });
+        const lgColumnCount = BreakpointValues["lg-column"]({ theme });
+        const mdColumnCount = BreakpointValues["md-column"]({ theme });
+        const smColumnCount = BreakpointValues["sm-column"]({ theme });
+        const xsColumnCount = BreakpointValues["xs-column"]({ theme });
+        const xxsColumnCount = BreakpointValues["xxs-column"]({ theme });
+
+        const xxlStartSpan = getColSpan(xxlCols, xxlColumnCount, "xxl");
+        const xlStartSpan = getColSpan(xlCols, xlColumnCount, "xl");
+        const lgStartSpan = getColSpan(lgCols, lgColumnCount, "lg");
+        const mdStartSpan = getColSpan(mdCols, mdColumnCount, "md");
+        const smStartSpan = getColSpan(smCols, smColumnCount, "sm");
+        const xsStartSpan = getColSpan(xsCols, xsColumnCount, "xs");
+        const xxsStartSpan = getColSpan(xxsCols, xxsColumnCount, "xxs");
+
+        return {
+            $xxlStart: xxlStartSpan.start,
+            $xxlSpan: xxlStartSpan.span,
+            $xlStart: xlStartSpan.start,
+            $xlSpan: xlStartSpan.span,
+            $lgStart: lgStartSpan.start,
+            $lgSpan: lgStartSpan.span,
+            $mdStart: mdStartSpan.start,
+            $mdSpan: mdStartSpan.span,
+            $smStart: smStartSpan.start,
+            $smSpan: smStartSpan.span,
+            $xsStart: xsStartSpan.start,
+            $xsSpan: xsStartSpan.span,
+            $xxsStart: xxsStartSpan.start,
+            $xxsSpan: xxsStartSpan.span,
+
+            $xxlMargin: BreakpointValues["xxl-margin"]({ theme }),
+            $xxlGutter: BreakpointValues["xxl-gutter"]({ theme }),
+            $xlMargin: BreakpointValues["xl-margin"]({ theme }),
+            $xlGutter: BreakpointValues["xl-gutter"]({ theme }),
+            $lgMargin: BreakpointValues["lg-margin"]({ theme }),
+            $lgGutter: BreakpointValues["lg-gutter"]({ theme }),
+            $mdMargin: BreakpointValues["md-margin"]({ theme }),
+            $mdGutter: BreakpointValues["md-gutter"]({ theme }),
+            $smMargin: BreakpointValues["sm-margin"]({ theme }),
+            $smGutter: BreakpointValues["sm-gutter"]({ theme }),
+            $xsMargin: BreakpointValues["xs-margin"]({ theme }),
+            $xsGutter: BreakpointValues["xs-gutter"]({ theme }),
+            $xxsMargin: BreakpointValues["xxs-margin"]({ theme }),
+            $xxsGutter: BreakpointValues["xxs-gutter"]({ theme }),
+        };
+    };
+
+    return <StyledDiv ref={ref} {...getStyleProps()} {...otherProps} />;
+};
+
+export const ColDiv = React.forwardRef(Component);
diff --git a/src/layout/index.ts b/src/layout/index.ts
index 0767e37d0..3337d54de 100644
--- a/src/layout/index.ts
+++ b/src/layout/index.ts
@@ -1,3 +1,4 @@
+import { ColDiv } from "./col-div";
 import { Container } from "./container";
 import { Content } from "./content";
 import { Section } from "./section";
@@ -6,6 +7,7 @@ export const Layout = {
     Section: Section,
     Container: Container,
     Content: Content,
+    ColDiv: ColDiv,
 };
 
 export * from "./types";
diff --git a/src/layout/types.ts b/src/layout/types.ts
index a6d3bc227..f2da8b876 100644
--- a/src/layout/types.ts
+++ b/src/layout/types.ts
@@ -1,3 +1,5 @@
+import { DefaultTheme } from "styled-components";
+
 interface CommonLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     "data-testid"?: string | undefined;
@@ -14,3 +16,69 @@ export interface ContainerProps extends CommonLayoutProps {
 export interface SectionProps extends CommonLayoutProps {}
 
 export interface ContentProps extends ContainerProps {}
+
+// does recursion till it gets the max col number
+type Range<
+    N extends number,
+    Result extends number[] = []
+> = Result["length"] extends N
+    ? Exclude<Result[number] | N, 0>
+    : Range<N, [...Result, Result["length"]]>;
+
+//add one to the range for array
+type AddOne<
+    N extends number,
+    Result extends number[] = []
+> = Result["length"] extends N
+    ? [...Result, Result["length"]]["length"]
+    : AddOne<N, [...Result, Result["length"]]>;
+
+// uses the range and if there is no max defined it just becomes a number
+export type ColSpan<Max extends number | undefined> = Max extends number
+    ? Range<Max> | [Range<AddOne<Max>>, Range<AddOne<Max>>] | undefined
+    : number | [number, number] | undefined;
+
+// using generic breakpointspan to extract column span for a specific breakpoint
+export type BreakpointSpan<
+    Breakpoint extends keyof DefaultTheme["maxColumns"]
+> = DefaultTheme["maxColumns"] extends Record<
+    Breakpoint,
+    infer Max extends number
+>
+    ? ColSpan<Max>
+    : number | [number, number] | undefined;
+
+// refactor ColProps to use BreakpointSpan
+export interface ColProps {
+    /**
+     * Specifies the number of columns to be spanned across for any breakpoint.
+     * If an array is specified, the format is [startCol, endCol].
+     */
+    xxlCols?: BreakpointSpan<"xxl">;
+    xlCols?: BreakpointSpan<"xl">;
+    lgCols?: BreakpointSpan<"lg">;
+    mdCols?: BreakpointSpan<"md">;
+    smCols?: BreakpointSpan<"sm">;
+    xsCols?: BreakpointSpan<"xs">;
+    xxsCols?: BreakpointSpan<"xxs">;
+}
+export interface ColDivProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        ColProps {
+    "data-testid"?: string;
+
+    xxlMargin?: string | number;
+    xxlGutter?: string | number;
+    xlMargin?: string | number;
+    xlGutter?: string | number;
+    lgMargin?: string | number;
+    lgGutter?: string | number;
+    mdMargin?: string | number;
+    mdGutter?: string | number;
+    smMargin?: string | number;
+    smGutter?: string | number;
+    xsMargin?: string | number;
+    xsGutter?: string | number;
+    xxsMargin?: string | number;
+    xxsGutter?: string | number;
+}
diff --git a/stories/layout-test/Coldiv.stories.tsx b/stories/layout-test/Coldiv.stories.tsx
new file mode 100644
index 000000000..8daa77027
--- /dev/null
+++ b/stories/layout-test/Coldiv.stories.tsx
@@ -0,0 +1,94 @@
+import { ThemeProvider } from "styled-components";
+import { ColDiv } from "../../src/layout/col-div";
+import { Content } from "../../src/layout/content";
+import { mockTheme } from "./mock-theme";
+import { Layout } from "../../src/layout";
+
+export default {
+    title: "Layout-Test/ColDiv",
+    component: ColDiv,
+};
+
+// Default view span 1 column
+export const Default = () => (
+    <ThemeProvider theme={mockTheme}>
+        <Content type="grid">
+            <ColDiv style={{ backgroundColor: "#f0f0f0", padding: "1rem" }}>
+                Default ColDiv
+            </ColDiv>
+        </Content>
+    </ThemeProvider>
+);
+
+// Mobile config: spans across 3 columns in mobile view
+export const MobileColsOnly = () => (
+    <ThemeProvider theme={mockTheme}>
+        <Content type="grid">
+            <ColDiv smCols={8}>Mobile: Span 3 columns</ColDiv>
+        </Content>
+    </ThemeProvider>
+);
+
+// Tablet config: spans across 6 columns in tablet view
+export const TabletColsOnly = () => (
+    <ThemeProvider theme={mockTheme}>
+        <Content type="grid">
+            <ColDiv
+                xxlCols={6}
+                style={{ backgroundColor: "#c8e6c9", padding: "1rem" }}
+            >
+                Tablet: Span 6 columns
+            </ColDiv>
+        </Content>
+    </ThemeProvider>
+);
+
+// Desktop config: spans across 8 columns in desktop view
+export const DesktopColsOnly = () => (
+    <ThemeProvider theme={mockTheme}>
+        <Content type="grid">
+            <ColDiv
+                xlCols={8}
+                style={{ backgroundColor: "#ffe0b2", padding: "1rem" }}
+            >
+                Desktop: Span 8 columns
+            </ColDiv>
+        </Content>
+    </ThemeProvider>
+);
+
+// Mixed config: spans across different columns in mobile, tablet, and desktop view
+export const MixedCols = () => (
+    <ThemeProvider theme={mockTheme}>
+        <Content type="grid">
+            <ColDiv
+                smCols={8}
+                lgCols={4}
+                xlCols={6}
+                style={{ backgroundColor: "#d1c4e9", padding: "1rem" }}
+            >
+                Mobile: Span 2 columns, Tablet: Span 4 columns, Desktop: Span 6
+                columns
+            </ColDiv>
+        </Content>
+    </ThemeProvider>
+);
+
+// Using start and span values: spans across a specific range of columns
+export const StartAndSpan = () => (
+    <ThemeProvider theme={mockTheme}>
+        <Content type="grid">
+            <Layout.ColDiv
+                smCols={[1, 5]}
+                lgCols={[3, 6]}
+                xxlCols={[1, 12]}
+                xlCols={[4, 10]}
+                style={{ backgroundColor: "#ffccbc", padding: "1rem" }}
+            >
+                Mobile: Takes up span 4 columns starting from 1 | Tablet: Takes
+                up span 3 columns starting from 3 | Desktop: Takes up span 6
+                columns starting from 4
+            </Layout.ColDiv>
+        </Content>
+    </ThemeProvider>
+);
diff --git a/tests/layout/layout-coldiv.spec.tsx b/tests/layout/layout-coldiv.spec.tsx
new file mode 100644
index 000000000..772e6c196
--- /dev/null
+++ b/tests/layout/layout-coldiv.spec.tsx
@@ -0,0 +1,110 @@
+import { render } from "@testing-library/react";
+import "jest-styled-components";
+import { ThemeProvider } from "styled-components";
+import { ColDiv } from "../../src/layout/col-div";
+import { ThemeSpec } from "../../src/theme/types";
+
+const mockTheme: ThemeSpec = {
+    colourScheme: "lifesg",
+    fontScheme: "lifesg",
+    animationScheme: "lifesg",
+    borderScheme: "lifesg",
+    spacingScheme: "lifesg",
+    radiusScheme: "lifesg",
+    breakpointScheme: "lifesg",
+};
+
+describe("ColDiv Component", () => {
+    it("should render with default settings (spanning 1 column)", () => {
+        const { container } = render(
+            <ThemeProvider theme={mockTheme}>
+                <ColDiv>Default ColDiv</ColDiv>
+            </ThemeProvider>
+        );
+
+        expect(container.firstChild).toHaveStyleRule(
+            "grid-column",
+            "auto / span 1"
+        );
+    });
+
+    it("should correctly apply xxs column span", () => {
+        const { container } = render(
+            <ThemeProvider theme={mockTheme}>
+                <ColDiv xxsCols={2}>XXS ColDiv</ColDiv>
+            </ThemeProvider>
+        );
+
+        expect(container.firstChild).toHaveStyleRule(
+            "grid-column",
+            "auto / span 2",
+            {
+                media: `screen and (max-width: 320px)`,
+            }
+        );
+    });
+
+    it("should correctly apply xs column span", () => {
+        const { container } = render(
+            <ThemeProvider theme={mockTheme}>
+                <ColDiv xsCols={3}>XS ColDiv</ColDiv>
+            </ThemeProvider>
+        );
+
+        expect(container.firstChild).toHaveStyleRule(
+            "grid-column",
+            "auto / span 3",
+            {
+                media: `screen and (max-width: 375px)`,
+            }
+        );
+    });
+
+    it("should correctly apply sm column span", () => {
+        const { container } = render(
+            <ThemeProvider theme={mockTheme}>
+                <ColDiv smCols={4}>SM ColDiv</ColDiv>
+            </ThemeProvider>
+        );
+
+        expect(container.firstChild).toHaveStyleRule(
+            "grid-column",
+            "auto / span 4",
+            {
+                media: `screen and (max-width: 420px)`,
+            }
+        );
+    });
+
+    it("should correctly apply start and span for xxs", () => {
+        const { container } = render(
+            <ThemeProvider theme={mockTheme}>
+                <ColDiv xxsCols={[1, 3]}>XXS Start and Span ColDiv</ColDiv>
+            </ThemeProvider>
+        );
+
+        expect(container.firstChild).toHaveStyleRule(
+            "grid-column",
+            "1 / span 2",
+            {
+                media: `screen and (max-width: 320px)`,
+            }
+        );
+    });
+
+    it("should correctly apply start and span for lg", () => {
+        const { container } = render(
+            <ThemeProvider theme={mockTheme}>
+                <ColDiv lgCols={[2, 6]}>LG Start and Span ColDiv</ColDiv>
+            </ThemeProvider>
+        );
+
+        expect(container.firstChild).toHaveStyleRule(
+            "grid-column",
+            "2 / span 4",
+            {
+                media: `screen and (max-width: 1023px)`,
+            }
+        );
+    });
+});

From 440c943582c4817f4bf32371b872dfac2f2f1031 Mon Sep 17 00:00:00 2001
From: Gundu Mahidhar Reddy <MAHIDHAR001@e.ntu.edu.sg>
Date: Fri, 4 Oct 2024 15:14:23 +0800
Subject: [PATCH 2/6] [CCUBE-1548][MAHI]Update import for mediaquery and divref
 usage after rebase

---
 src/layout/col-div.style.tsx | 2 +-
 src/layout/col-div.tsx       | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/layout/col-div.style.tsx b/src/layout/col-div.style.tsx
index c886b57ee..cd48a1b8e 100644
--- a/src/layout/col-div.style.tsx
+++ b/src/layout/col-div.style.tsx
@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { MediaQuery } from "../theme/mediaquery/mediaquery-helper";
+import { MediaQuery } from "../theme/breakpoint/media-query-helper";
 
 export interface StyledDivStyleProps {
     $xxsStart?: number | undefined;
diff --git a/src/layout/col-div.tsx b/src/layout/col-div.tsx
index c3d866443..4f2250db3 100644
--- a/src/layout/col-div.tsx
+++ b/src/layout/col-div.tsx
@@ -1,11 +1,14 @@
 import React from "react";
-import { ColDivProps, DivRef } from "./types";
+import { ColDivProps } from "./types";
 import { StyledDiv } from "./col-div.style";
 import { BreakpointValues } from "../theme/breakpoint/theme-helper";
 import { ThemeSpec } from "../theme/types";
 import { useTheme } from "styled-components";
 
-const Component = (props: ColDivProps, ref: DivRef): JSX.Element => {
+const Component = (
+    props: ColDivProps,
+    ref: React.Ref<HTMLDivElement>
+): JSX.Element => {
     const theme = useTheme() as ThemeSpec;
 
     const {

From b75375fdf63a4c3fc495c4b4bda7d96987c6fad5 Mon Sep 17 00:00:00 2001
From: Gundu Mahidhar Reddy <MAHIDHAR001@e.ntu.edu.sg>
Date: Thu, 10 Oct 2024 13:22:03 +0800
Subject: [PATCH 3/6] [CCUBE-1548][MAHI]Move helper function to make code
 cleaner and remove margin and padding for grid children

---
 src/layout/col-div.style.tsx | 28 ----------------------------
 src/layout/types.ts          | 21 +--------------------
 src/util/utility-types.ts    | 33 +++++++++++++++++++++++++++++++++
 3 files changed, 34 insertions(+), 48 deletions(-)

diff --git a/src/layout/col-div.style.tsx b/src/layout/col-div.style.tsx
index cd48a1b8e..01672de7b 100644
--- a/src/layout/col-div.style.tsx
+++ b/src/layout/col-div.style.tsx
@@ -40,79 +40,51 @@ export const StyledDiv = styled.div<StyledDivStyleProps>`
         const {
             $xxlStart,
             $xxlSpan,
-            $xxlMargin,
-            $xxlGutter,
 
             $xlStart,
             $xlSpan,
-            $xlMargin,
-            $xlGutter,
 
             $lgStart,
             $lgSpan,
-            $lgMargin,
-            $lgGutter,
 
             $mdStart,
             $mdSpan,
-            $mdMargin,
-            $mdGutter,
 
             $smStart,
             $smSpan,
-            $smMargin,
-            $smGutter,
 
             $xsStart,
             $xsSpan,
-            $xsMargin,
-            $xsGutter,
 
             $xxsStart,
             $xxsSpan,
-            $xxsMargin,
-            $xxsGutter,
         } = props;
 
         return css`
             grid-column: ${$xxlStart || "auto"} / span ${$xxlSpan || 1};
-            margin: ${$xxlMargin}px;
-            padding: ${$xxlGutter}px;
 
             ${MediaQuery.MaxWidth.xl} {
                 grid-column: ${$xlStart || "auto"} / span ${$xlSpan || 1};
-                margin: ${$xlMargin}px;
-                padding: ${$xlGutter}px;
             }
 
             ${MediaQuery.MaxWidth.lg} {
                 grid-column: ${$lgStart || "auto"} / span ${$lgSpan || 1};
-                margin: ${$lgMargin}px;
-                padding: ${$lgGutter}px;
             }
 
             ${MediaQuery.MaxWidth.md} {
                 grid-column: ${$mdStart || "auto"} / span ${$mdSpan || 1};
-                margin: ${$mdMargin}px;
-                padding: ${$mdGutter}px;
             }
 
             ${MediaQuery.MaxWidth.sm} {
                 grid-column: ${$smStart || "auto"} / span ${$smSpan || 1};
-                margin: ${$smMargin}px;
-                padding: ${$smGutter}px;
             }
 
             ${MediaQuery.MaxWidth.xs} {
                 grid-column: ${$xsStart || "auto"} / span ${$xsSpan || 1};
-                margin: ${$xsMargin}px;
-                padding: ${$xsGutter}px;
             }
 
             ${MediaQuery.MaxWidth.xxs} {
                 grid-column: ${$xxsStart || "auto"} / span ${$xxsSpan || 1};
-                margin: ${$xxsMargin}px;
-                padding: ${$xxsGutter}px;
             }
         `;
     }}
diff --git a/src/layout/types.ts b/src/layout/types.ts
index f2da8b876..cd0ad2ac5 100644
--- a/src/layout/types.ts
+++ b/src/layout/types.ts
@@ -1,4 +1,5 @@
 import { DefaultTheme } from "styled-components";
+import { AddOne, Range } from "../util/utility-types";
 
 interface CommonLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
@@ -17,28 +18,10 @@ export interface SectionProps extends CommonLayoutProps {}
 
 export interface ContentProps extends ContainerProps {}
 
-// does recursion till it gets the max col number
-type Range<
-    N extends number,
-    Result extends number[] = []
-> = Result["length"] extends N
-    ? Exclude<Result[number] | N, 0>
-    : Range<N, [...Result, Result["length"]]>;
-
-//add one to the range for array
-type AddOne<
-    N extends number,
-    Result extends number[] = []
-> = Result["length"] extends N
-    ? [...Result, Result["length"]]["length"]
-    : AddOne<N, [...Result, Result["length"]]>;
-
-// uses the range and if there is no max defined it just becomes a number
 export type ColSpan<Max extends number | undefined> = Max extends number
     ? Range<Max> | [Range<AddOne<Max>>, Range<AddOne<Max>>] | undefined
     : number | [number, number] | undefined;
 
-// using generic breakpointspan to extract column span for a specific breakpoint
 export type BreakpointSpan<
     Breakpoint extends keyof DefaultTheme["maxColumns"]
 > = DefaultTheme["maxColumns"] extends Record<
@@ -47,8 +30,6 @@ export type BreakpointSpan<
 >
     ? ColSpan<Max>
     : number | [number, number] | undefined;
-
-// refactor ColProps to use BreakpointSpan
 export interface ColProps {
     /**
      * Specifies the number of columns to be spanned across for any breakpoint.
diff --git a/src/util/utility-types.ts b/src/util/utility-types.ts
index 404a0b9dd..80c60bd99 100644
--- a/src/util/utility-types.ts
+++ b/src/util/utility-types.ts
@@ -1,3 +1,5 @@
+import { DefaultTheme } from "styled-components";
+
 // recursively maps object property types to the specified type
 export type PropertiesToType<Model, Type> = {
     [Key in keyof Model]: Model[Key] extends object
@@ -10,3 +12,34 @@ export type RequiredKeys<T> = {
     // eslint-disable-next-line @typescript-eslint/ban-types
     [K in keyof T]-?: {} extends { [P in K]: T[K] } ? never : K;
 }[keyof T];
+
+// Gets a union of numbers from 1 to N e.g. Range<3> evaluates to 1 | 2 |3
+export type Range<
+    N extends number,
+    Result extends number[] = []
+> = Result["length"] extends N
+    ? Exclude<Result[number] | N, 0>
+    : Range<N, [...Result, Result["length"]]>;
+
+//Increments a numeric literal e.g. AddOne<1> evaluates to 2
+export type AddOne<
+    N extends number,
+    Result extends number[] = []
+> = Result["length"] extends N
+    ? [...Result, Result["length"]]["length"]
+    : AddOne<N, [...Result, Result["length"]]>;
+
+// uses the range and if there is no max defined it just becomes a number
+export type ColSpan<Max extends number | undefined> = Max extends number
+    ? Range<Max> | [Range<AddOne<Max>>, Range<AddOne<Max>>] | undefined
+    : number | [number, number] | undefined;
+
+// using generic breakpointspan to extract column span for a specific breakpoint
+export type BreakpointSpan<
+    Breakpoint extends keyof DefaultTheme["maxColumns"]
+> = DefaultTheme["maxColumns"] extends Record<
+    Breakpoint,
+    infer Max extends number
+>
+    ? ColSpan<Max>
+    : number | [number, number] | undefined;

From 7dca60b35280a7d291bb34f3d7d5189b931458d1 Mon Sep 17 00:00:00 2001
From: Gundu Mahidhar Reddy <MAHIDHAR001@e.ntu.edu.sg>
Date: Fri, 11 Oct 2024 09:44:57 +0800
Subject: [PATCH 4/6] [CCUBE-1548][MAHI]Remove redundant props and cleaned up
 its usage

---
 src/layout/col-div.style.tsx | 15 ---------------
 src/layout/col-div.tsx       | 15 ---------------
 src/layout/types.ts          | 15 ---------------
 3 files changed, 45 deletions(-)

diff --git a/src/layout/col-div.style.tsx b/src/layout/col-div.style.tsx
index 01672de7b..ad53633bc 100644
--- a/src/layout/col-div.style.tsx
+++ b/src/layout/col-div.style.tsx
@@ -16,21 +16,6 @@ export interface StyledDivStyleProps {
     $xlSpan?: number | undefined;
     $xxlStart?: number | undefined;
     $xxlSpan?: number | undefined;
-
-    $xxsMargin?: string | number;
-    $xxsGutter?: string | number;
-    $xsMargin?: string | number;
-    $xsGutter?: string | number;
-    $smMargin?: string | number;
-    $smGutter?: string | number;
-    $mdMargin?: string | number;
-    $mdGutter?: string | number;
-    $lgMargin?: string | number;
-    $lgGutter?: string | number;
-    $xlMargin?: string | number;
-    $xlGutter?: string | number;
-    $xxlMargin?: string | number;
-    $xxlGutter?: string | number;
 }
 
 export const StyledDiv = styled.div<StyledDivStyleProps>`
diff --git a/src/layout/col-div.tsx b/src/layout/col-div.tsx
index 4f2250db3..1ccf30d26 100644
--- a/src/layout/col-div.tsx
+++ b/src/layout/col-div.tsx
@@ -86,21 +86,6 @@ const Component = (
             $xsSpan: xsStartSpan.span,
             $xxsStart: xxsStartSpan.start,
             $xxsSpan: xxsStartSpan.span,
-
-            $xxlMargin: BreakpointValues["xxl-margin"]({ theme }),
-            $xxlGutter: BreakpointValues["xxl-gutter"]({ theme }),
-            $xlMargin: BreakpointValues["xl-margin"]({ theme }),
-            $xlGutter: BreakpointValues["xl-gutter"]({ theme }),
-            $lgMargin: BreakpointValues["lg-margin"]({ theme }),
-            $lgGutter: BreakpointValues["lg-gutter"]({ theme }),
-            $mdMargin: BreakpointValues["md-margin"]({ theme }),
-            $mdGutter: BreakpointValues["md-gutter"]({ theme }),
-            $smMargin: BreakpointValues["sm-margin"]({ theme }),
-            $smGutter: BreakpointValues["sm-gutter"]({ theme }),
-            $xsMargin: BreakpointValues["xs-margin"]({ theme }),
-            $xsGutter: BreakpointValues["xs-gutter"]({ theme }),
-            $xxsMargin: BreakpointValues["xxs-margin"]({ theme }),
-            $xxsGutter: BreakpointValues["xxs-gutter"]({ theme }),
         };
     };
 
diff --git a/src/layout/types.ts b/src/layout/types.ts
index cd0ad2ac5..7b97d93d1 100644
--- a/src/layout/types.ts
+++ b/src/layout/types.ts
@@ -47,19 +47,4 @@ export interface ColDivProps
     extends React.HTMLAttributes<HTMLDivElement>,
         ColProps {
     "data-testid"?: string;
-
-    xxlMargin?: string | number;
-    xxlGutter?: string | number;
-    xlMargin?: string | number;
-    xlGutter?: string | number;
-    lgMargin?: string | number;
-    lgGutter?: string | number;
-    mdMargin?: string | number;
-    mdGutter?: string | number;
-    smMargin?: string | number;
-    smGutter?: string | number;
-    xsMargin?: string | number;
-    xsGutter?: string | number;
-    xxsMargin?: string | number;
-    xxsGutter?: string | number;
 }

From 0d0dc9a4c051c72237ccda5b230d596d3bf6cd24 Mon Sep 17 00:00:00 2001
From: Gundu Mahidhar Reddy <MAHIDHAR001@e.ntu.edu.sg>
Date: Tue, 15 Oct 2024 15:55:56 +0800
Subject: [PATCH 5/6] [CCUBE-1548][MAHI]Add fallback for column span and remove
 typing from helper function

---
 src/layout/col-div.tsx    | 64 ++++++++++++++++++++++++++++++++++-----
 src/util/utility-types.ts | 17 -----------
 2 files changed, 57 insertions(+), 24 deletions(-)

diff --git a/src/layout/col-div.tsx b/src/layout/col-div.tsx
index 1ccf30d26..e20a2ce21 100644
--- a/src/layout/col-div.tsx
+++ b/src/layout/col-div.tsx
@@ -29,7 +29,6 @@ const Component = (
     ) => {
         if (!cols) return { start: undefined, span: undefined };
 
-        // during development process to give wwarning
         if (process.env.NODE_ENV === "development") {
             if (typeof cols === "number" && cols > maxCols) {
                 console.warn(
@@ -63,12 +62,63 @@ const Component = (
         const xsColumnCount = BreakpointValues["xs-column"]({ theme });
         const xxsColumnCount = BreakpointValues["xxs-column"]({ theme });
 
-        const xxlStartSpan = getColSpan(xxlCols, xxlColumnCount, "xxl");
-        const xlStartSpan = getColSpan(xlCols, xlColumnCount, "xl");
-        const lgStartSpan = getColSpan(lgCols, lgColumnCount, "lg");
-        const mdStartSpan = getColSpan(mdCols, mdColumnCount, "md");
-        const smStartSpan = getColSpan(smCols, smColumnCount, "sm");
-        const xsStartSpan = getColSpan(xsCols, xsColumnCount, "xs");
+        const xxlStartSpan = getColSpan(
+            xxlCols ||
+                xlCols ||
+                lgCols ||
+                mdCols ||
+                smCols ||
+                xsCols ||
+                xxsCols,
+            xxlColumnCount ||
+                xlColumnCount ||
+                lgColumnCount ||
+                mdColumnCount ||
+                smColumnCount ||
+                xsColumnCount ||
+                xxsColumnCount,
+            "xxl"
+        );
+
+        const xlStartSpan = getColSpan(
+            xlCols || lgCols || mdCols || smCols || xsCols || xxsCols,
+            xlColumnCount ||
+                lgColumnCount ||
+                mdColumnCount ||
+                smColumnCount ||
+                xsColumnCount ||
+                xxsColumnCount,
+            "xl"
+        );
+
+        const lgStartSpan = getColSpan(
+            lgCols || mdCols || smCols || xsCols || xxsCols,
+            lgColumnCount ||
+                mdColumnCount ||
+                smColumnCount ||
+                xsColumnCount ||
+                xxsColumnCount,
+            "lg"
+        );
+
+        const mdStartSpan = getColSpan(
+            mdCols || smCols || xsCols || xxsCols,
+            mdColumnCount || smColumnCount || xsColumnCount || xxsColumnCount,
+            "md"
+        );
+
+        const smStartSpan = getColSpan(
+            smCols || xsCols || xxsCols,
+            smColumnCount || xsColumnCount || xxsColumnCount,
+            "sm"
+        );
+
+        const xsStartSpan = getColSpan(
+            xsCols || xxsCols,
+            xsColumnCount || xxsColumnCount,
+            "xs"
+        );
+
         const xxsStartSpan = getColSpan(xxsCols, xxsColumnCount, "xxs");
 
         return {
diff --git a/src/util/utility-types.ts b/src/util/utility-types.ts
index 80c60bd99..cff985297 100644
--- a/src/util/utility-types.ts
+++ b/src/util/utility-types.ts
@@ -1,5 +1,3 @@
-import { DefaultTheme } from "styled-components";
-
 // recursively maps object property types to the specified type
 export type PropertiesToType<Model, Type> = {
     [Key in keyof Model]: Model[Key] extends object
@@ -28,18 +26,3 @@ export type AddOne<
 > = Result["length"] extends N
     ? [...Result, Result["length"]]["length"]
     : AddOne<N, [...Result, Result["length"]]>;
-
-// uses the range and if there is no max defined it just becomes a number
-export type ColSpan<Max extends number | undefined> = Max extends number
-    ? Range<Max> | [Range<AddOne<Max>>, Range<AddOne<Max>>] | undefined
-    : number | [number, number] | undefined;
-
-// using generic breakpointspan to extract column span for a specific breakpoint
-export type BreakpointSpan<
-    Breakpoint extends keyof DefaultTheme["maxColumns"]
-> = DefaultTheme["maxColumns"] extends Record<
-    Breakpoint,
-    infer Max extends number
->
-    ? ColSpan<Max>
-    : number | [number, number] | undefined;

From e89a2a5f37309dff5250ea2460603f40e674c3c8 Mon Sep 17 00:00:00 2001
From: Gundu Mahidhar Reddy <MAHIDHAR001@e.ntu.edu.sg>
Date: Wed, 16 Oct 2024 12:41:43 +0800
Subject: [PATCH 6/6] [CCUBE-1548][MAHI]Remove column count fall back

---
 src/layout/col-div.tsx | 31 ++++++-------------------------
 1 file changed, 6 insertions(+), 25 deletions(-)

diff --git a/src/layout/col-div.tsx b/src/layout/col-div.tsx
index e20a2ce21..af86ab67a 100644
--- a/src/layout/col-div.tsx
+++ b/src/layout/col-div.tsx
@@ -70,54 +70,35 @@ const Component = (
                 smCols ||
                 xsCols ||
                 xxsCols,
-            xxlColumnCount ||
-                xlColumnCount ||
-                lgColumnCount ||
-                mdColumnCount ||
-                smColumnCount ||
-                xsColumnCount ||
-                xxsColumnCount,
+            xxlColumnCount,
             "xxl"
         );
 
         const xlStartSpan = getColSpan(
             xlCols || lgCols || mdCols || smCols || xsCols || xxsCols,
-            xlColumnCount ||
-                lgColumnCount ||
-                mdColumnCount ||
-                smColumnCount ||
-                xsColumnCount ||
-                xxsColumnCount,
+            xlColumnCount,
             "xl"
         );
 
         const lgStartSpan = getColSpan(
             lgCols || mdCols || smCols || xsCols || xxsCols,
-            lgColumnCount ||
-                mdColumnCount ||
-                smColumnCount ||
-                xsColumnCount ||
-                xxsColumnCount,
+            lgColumnCount,
             "lg"
         );
 
         const mdStartSpan = getColSpan(
             mdCols || smCols || xsCols || xxsCols,
-            mdColumnCount || smColumnCount || xsColumnCount || xxsColumnCount,
+            mdColumnCount,
             "md"
         );
 
         const smStartSpan = getColSpan(
             smCols || xsCols || xxsCols,
-            smColumnCount || xsColumnCount || xxsColumnCount,
+            smColumnCount,
             "sm"
         );
 
-        const xsStartSpan = getColSpan(
-            xsCols || xxsCols,
-            xsColumnCount || xxsColumnCount,
-            "xs"
-        );
+        const xsStartSpan = getColSpan(xsCols || xxsCols, xsColumnCount, "xs");
 
         const xxsStartSpan = getColSpan(xxsCols, xxsColumnCount, "xxs");