[CCUBE-1603][MAHI]Clean usage of col div to use -1 and included story…

…book to use 2 different sizings

src/divider/divider.tsx

@@ -1,44 +1,31 @@
-import { useTheme } from "styled-components";
 import { ColDiv } from "../layout/col-div";
 import { V2_ColDiv } from "../v2_layout/col-div";
 import { Line } from "./divider.style";
 import { DividerProps } from "./types";
-import { Breakpoint } from "../theme";
 
 export const Divider = ({
     thickness = 1,
     lineStyle = "solid",
     layoutType = "flex",
     color,
     className,
-    xxsCols,
-    xsCols,
-    smCols,
-    mdCols,
-    lgCols,
-    xlCols,
-    xxlCols,
+    xxsCols = [1, -1],
+    xsCols = [1, -1],
+    smCols = [1, -1],
+    mdCols = [1, -1],
+    lgCols = [1, -1],
+    xlCols = [1, -1],
+    xxlCols = [1, -1],
     mobileCols = 4,
     tabletCols = 8,
     desktopCols = 12,
     ...otherProps
 }: DividerProps) => {
-    const theme = useTheme();
     const isV2Layout =
         mobileCols !== undefined ||
         tabletCols !== undefined ||
         desktopCols !== undefined;
 
-    const colProps = {
-        xxsCols: xxsCols ?? Breakpoint["xxs-column"]({ theme }),
-        xsCols: xsCols ?? Breakpoint["xs-column"]({ theme }),
-        smCols: smCols ?? Breakpoint["sm-column"]({ theme }),
-        mdCols: mdCols ?? Breakpoint["md-column"]({ theme }),
-        lgCols: lgCols ?? Breakpoint["lg-column"]({ theme }),
-        xlCols: xlCols ?? Breakpoint["xl-column"]({ theme }),
-        xxlCols: xxlCols ?? Breakpoint["xxl-column"]({ theme }),
-    };
-
     switch (layoutType) {
         case "flex":
             return (
@@ -69,7 +56,17 @@ export const Divider = ({
                 );
             } else {
                 return (
-                    <ColDiv className={className} {...colProps} {...otherProps}>
+                    <ColDiv
+                        className={className}
+                        xxsCols={xxsCols}
+                        xsCols={xsCols}
+                        smCols={smCols}
+                        mdCols={mdCols}
+                        lgCols={lgCols}
+                        xlCols={xlCols}
+                        xxlCols={xxlCols}
+                        {...otherProps}
+                    >
                         <Line
                             $thickness={thickness}
                             $lineStyle={lineStyle}

src/layout/types.ts

@@ -19,7 +19,7 @@ export interface SectionProps extends CommonLayoutProps {}
 export interface ContentProps extends ContainerProps {}
 
 export type ColSpan<Max extends number | undefined> = Max extends number
-    ? Range<Max> | [Range<AddOne<Max>>, Range<AddOne<Max>>] | undefined
+    ? Range<Max> | [Range<AddOne<Max>>, Range<AddOne<Max>> | -1] | undefined
     : number | [number, number] | undefined;
 
 export type BreakpointSpan<

src/radio-button/radio-button.styles.tsx

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { RadioButtonProps, RadioboxSize } from "./types";
+import { RadioButtonProps, RadioButtonSize } from "./types";
 import { Colour, Motion } from "../theme";
 import { CircleDotIcon, CircleIcon } from "@lifesg/react-icons";
 
@@ -10,7 +10,7 @@ import { CircleDotIcon, CircleIcon } from "@lifesg/react-icons";
 interface StyleProps {
     $selected?: boolean;
     $disabled?: boolean;
-    $displaySize?: RadioboxSize | undefined;
+    $displaySize?: RadioButtonSize | undefined;
 }
 
 // =============================================================================

src/radio-button/types.ts

@@ -1,5 +1,5 @@
-export type RadioboxSize = "small" | "default";
+export type RadioButtonSize = "small" | "default";
 export interface RadioButtonProps
     extends React.InputHTMLAttributes<HTMLInputElement> {
-    displaySize?: RadioboxSize | undefined;
+    displaySize?: RadioButtonSize | undefined;
 }

stories/radio-button/doc-elements.tsx

@@ -1,11 +1,12 @@
 import styled from "styled-components";
-import { V2_TextStyleHelper } from "src/v2_text";
+import { Font } from "../../src";
 
 // =============================================================================
 // STYLING
 // =============================================================================
 export const Container = styled.div`
     display: flex;
+    align-items: center;
     flex-direction: column;
 `;
 
@@ -17,6 +18,6 @@ export const OptionContainer = styled.div`
 `;
 
 export const Label = styled.label`
-    ${V2_TextStyleHelper.getTextStyle("Body", "regular")}
+    ${Font["body-baseline-regular"]}
     margin-left: 1rem;
 `;

stories/radio-button/props-table.tsx

@@ -1,26 +1,27 @@
-import React from "react";
-import {
-    DefaultCol,
-    DescriptionCol,
-    NameCol,
-    Table,
-} from "../storybook-common/api-table";
+import { ApiTable, ApiTableSectionProps } from "../storybook-common/api-table";
 
-export const PropsTable = () => (
-    <Table>
-        <tr>
-            <NameCol>checked</NameCol>
-            <DescriptionCol propTypes={["boolean"]}>
-                The selection state of the component
-            </DescriptionCol>
-            <DefaultCol />
-        </tr>
-        <tr>
-            <NameCol>disabled</NameCol>
-            <DescriptionCol propTypes={["boolean"]}>
-                The state in which an action is allowed to be executed
-            </DescriptionCol>
-            <DefaultCol />
-        </tr>
-    </Table>
-);
+const DATA: ApiTableSectionProps[] = [
+    {
+        attributes: [
+            {
+                name: "displaySize",
+                description: "The display size of the component",
+                propTypes: [`"default"`, `"small"`],
+                defaultValue: `"default"`,
+            },
+            {
+                name: "checked",
+                description: "The selected state of the component",
+                propTypes: ["boolean"],
+            },
+            {
+                name: "disabled",
+                description:
+                    "The state in which an action is allowed to be executed",
+                propTypes: ["boolean"],
+            },
+        ],
+    },
+];
+
+export const PropsTable = () => <ApiTable sections={DATA} />;

stories/radio-button/radio-button.mdx

@@ -22,6 +22,15 @@ import { RadioButton } from "@lifesg/react-design-system/radio-button";
 
 <Canvas of={RadioButtonStories.MultipleOptions} />
 
+## Multiple sizes
+
+There are 2 display sizes available for `Radio Button`.
+
+-   Default
+-   Small
+
+<Canvas of={RadioButtonStories.MultipleSizes} />
+
 ## Component API
 
 The component also inherits the [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement).

stories/radio-button/radio-button.stories.tsx

@@ -54,3 +54,37 @@ export const MultipleOptions: StoryObj<Component> = {
         );
     },
 };
+
+export const MultipleSizes: StoryObj<Component> = {
+    render: () => {
+        const [value, setValue] = useState("");
+        const handleSelection = (event) => {
+            setValue(event.target.value);
+        };
+        return (
+            <Container>
+                <OptionContainer key="A">
+                    <RadioButton
+                        value="A"
+                        id="options-a"
+                        name="options"
+                        checked={value === "A"}
+                        onChange={handleSelection}
+                    />
+                    <Label htmlFor="options-a">Option A</Label>
+                </OptionContainer>
+                <OptionContainer key="B">
+                    <RadioButton
+                        value="B"
+                        id="options-b"
+                        name="options"
+                        checked={value === "B"}
+                        displaySize="small"
+                        onChange={handleSelection}
+                    />
+                    <Label htmlFor="options-b">Option B</Label>
+                </OptionContainer>
+            </Container>
+        );
+    },
+};