From 2f38b4706238bd2fe756c82c149e47b882bb702d Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Mon, 11 Nov 2024 10:29:31 +0800 Subject: [PATCH] [CCUBE-1603][MAHI]Clean usage of col div to use -1 and included storybook to use 2 different sizings --- src/divider/divider.tsx | 39 +++++++------- src/layout/types.ts | 2 +- src/radio-button/radio-button.styles.tsx | 4 +- src/radio-button/types.ts | 4 +- stories/radio-button/doc-elements.tsx | 5 +- stories/radio-button/props-table.tsx | 51 ++++++++++--------- stories/radio-button/radio-button.mdx | 9 ++++ stories/radio-button/radio-button.stories.tsx | 34 +++++++++++++ 8 files changed, 95 insertions(+), 53 deletions(-) diff --git a/src/divider/divider.tsx b/src/divider/divider.tsx index e9ba39193..491ba9fe4 100644 --- a/src/divider/divider.tsx +++ b/src/divider/divider.tsx @@ -1,9 +1,7 @@ -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, @@ -11,34 +9,23 @@ export const Divider = ({ 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 ( - + = Max extends number - ? Range | [Range>, Range>] | undefined + ? Range | [Range>, Range> | -1] | undefined : number | [number, number] | undefined; export type BreakpointSpan< diff --git a/src/radio-button/radio-button.styles.tsx b/src/radio-button/radio-button.styles.tsx index 7328c10ed..1655c253c 100644 --- a/src/radio-button/radio-button.styles.tsx +++ b/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; } // ============================================================================= diff --git a/src/radio-button/types.ts b/src/radio-button/types.ts index c21549ae3..d7a5253d3 100644 --- a/src/radio-button/types.ts +++ b/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 { - displaySize?: RadioboxSize | undefined; + displaySize?: RadioButtonSize | undefined; } diff --git a/stories/radio-button/doc-elements.tsx b/stories/radio-button/doc-elements.tsx index 824e64af9..ca3b5c4dc 100644 --- a/stories/radio-button/doc-elements.tsx +++ b/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; `; diff --git a/stories/radio-button/props-table.tsx b/stories/radio-button/props-table.tsx index 9befd2ad8..60d1d872d 100644 --- a/stories/radio-button/props-table.tsx +++ b/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 = () => ( - - - checked - - The selection state of the component - - - - - disabled - - The state in which an action is allowed to be executed - - - -
-); +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 = () => ; diff --git a/stories/radio-button/radio-button.mdx b/stories/radio-button/radio-button.mdx index 395208b34..8bd3125c0 100644 --- a/stories/radio-button/radio-button.mdx +++ b/stories/radio-button/radio-button.mdx @@ -22,6 +22,15 @@ import { RadioButton } from "@lifesg/react-design-system/radio-button"; +## Multiple sizes + +There are 2 display sizes available for `Radio Button`. + +- Default +- Small + + + ## Component API The component also inherits the [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement). diff --git a/stories/radio-button/radio-button.stories.tsx b/stories/radio-button/radio-button.stories.tsx index dff55bb36..4195d5b18 100644 --- a/stories/radio-button/radio-button.stories.tsx +++ b/stories/radio-button/radio-button.stories.tsx @@ -54,3 +54,37 @@ export const MultipleOptions: StoryObj = { ); }, }; + +export const MultipleSizes: StoryObj = { + render: () => { + const [value, setValue] = useState(""); + const handleSelection = (event) => { + setValue(event.target.value); + }; + return ( + + + + + + + + + + + ); + }, +};