Merge pull request #613 from LifeSG/radio-button-divider

Make changes to Divider and Radio and Col Div

src/divider/divider.tsx

@@ -9,16 +9,16 @@ export const Divider = ({
     layoutType = "flex",
     color,
     className,
-    xxsCols,
-    xsCols,
-    smCols,
-    mdCols,
-    lgCols,
-    xlCols,
-    xxlCols,
-    mobileCols,
-    tabletCols,
-    desktopCols,
+    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 isV2Layout =

src/layout/col-div.tsx

@@ -46,6 +46,9 @@ const Component = (
 
         if (Array.isArray(cols)) {
             const [start, end] = cols;
+            if (end === -1) {
+                return { start, span: maxCols - start + 1 };
+            }
             const span = Math.min(end - start, maxCols);
             return { start, span };
         }

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 from "styled-components";
-import { RadioButtonProps } from "./types";
+import styled, { css } from "styled-components";
+import { RadioButtonProps, RadioButtonSize } from "./types";
 import { Colour, Motion } from "../theme";
 import { CircleDotIcon, CircleIcon } from "@lifesg/react-icons";
 
@@ -10,6 +10,7 @@ import { CircleDotIcon, CircleIcon } from "@lifesg/react-icons";
 interface StyleProps {
     $selected?: boolean;
     $disabled?: boolean;
+    $displaySize?: RadioButtonSize | undefined;
 }
 
 // =============================================================================
@@ -20,8 +21,19 @@ export const Container = styled.div<StyleProps>`
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 2rem;
-    width: 2rem;
+    ${(props) => {
+        if (props.$displaySize === "small") {
+            return css`
+                height: 1.5rem;
+                width: 1.5rem;
+            `;
+        } else {
+            return css`
+                height: 2rem;
+                width: 2rem;
+            `;
+        }
+    }}
     position: relative;
 `;
 

src/radio-button/radio-button.tsx

@@ -11,6 +11,7 @@ export const RadioButton = ({
     className,
     checked,
     disabled,
+    displaySize = "default",
     onChange,
     ...otherProps
 }: RadioButtonProps) => {
@@ -46,6 +47,7 @@ export const RadioButton = ({
             $selected={checked}
             $disabled={disabled}
             className={className}
+            $displaySize={displaySize}
             data-testid="radio-button"
         >
             <Input

src/radio-button/types.ts

@@ -1,2 +1,5 @@
+export type RadioButtonSize = "small" | "default";
 export interface RadioButtonProps
-    extends React.InputHTMLAttributes<HTMLInputElement> {}
+    extends React.InputHTMLAttributes<HTMLInputElement> {
+    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>
+        );
+    },
+};