From 40552a6d9d0da17d724c1dd2b36f252902df8e80 Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Fri, 22 Nov 2024 11:43:02 +0800 Subject: [PATCH 1/4] [CCUBE-1628][MAHI]Migrate accordian and text list components --- src/accordion/accordion-item.style.tsx | 20 ++++++++++---------- src/accordion/accordion.style.tsx | 18 +++++++++--------- src/text-list/ordered-list.tsx | 15 +++++++++++++++ src/text-list/unordered-list.tsx | 15 +++++++++++++++ src/v2_text-list/text-list.styles.tsx | 14 ++++++-------- src/v2_text-list/types.ts | 5 +++-- 6 files changed, 58 insertions(+), 29 deletions(-) create mode 100644 src/text-list/ordered-list.tsx create mode 100644 src/text-list/unordered-list.tsx diff --git a/src/accordion/accordion-item.style.tsx b/src/accordion/accordion-item.style.tsx index 3852975be..910d93567 100644 --- a/src/accordion/accordion-item.style.tsx +++ b/src/accordion/accordion-item.style.tsx @@ -1,11 +1,11 @@ import { ChevronUpIcon } from "@lifesg/react-icons/chevron-up"; import { animated } from "react-spring"; import styled, { css } from "styled-components"; -import { V2_Color } from "../v2_color"; -import { V2_MediaQuery } from "../v2_media"; import { ClickableIcon } from "../shared/clickable-icon"; -import { V2_Text } from "../v2_text/text"; import { Transition } from "../transition"; +import { Border, Colour } from "../theme"; +import { MediaQuery } from "../theme"; +import { Typography } from "../typography"; // ============================================================================= // STYLE INTERFACE, transient props are denoted with $ @@ -19,11 +19,11 @@ interface StyleProps { // STYLING // ============================================================================= export const Container = styled.div` - background-color: ${V2_Color.Neutral[8]} !important; - border-top: 1px solid ${V2_Color.Neutral[6]}; + background-color: ${Colour.bg} !important; + border-top: ${Border["width-010"]} ${Border.solid} ${Colour.border}; padding: ${(props) => (props.$isCollapsed ? "0 0 1rem" : "0")}; - ${V2_MediaQuery.MaxWidth.mobileL} { + ${MediaQuery.MaxWidth.sm} { padding: ${(props) => props.$isCollapsed ? ".25rem 0 1.05rem" : "0.5rem 0"}; } @@ -43,13 +43,13 @@ const TITLE_STYLE = (isCollapsed?: boolean) => css` transition: ${Transition.Base}; `; -export const Title = styled(V2_Text.H3)` +export const Title = styled(Typography.HeaderSM)` ${(props) => { return TITLE_STYLE(props.$isCollapsed); }} `; -export const TitleH4 = styled(V2_Text.H4)` +export const TitleH4 = styled(Typography.HeaderXS)` ${(props) => { return TITLE_STYLE(props.$isCollapsed); }} @@ -67,7 +67,7 @@ export const ExpandCollapseButton = styled(ClickableIcon)` export const ChevronIcon = styled(ChevronUpIcon)` height: 1.25rem; width: 1.25rem; - color: ${V2_Color.Primary}; + color: ${Colour["icon-primary"]}; `; export const Expandable = styled(animated.div)` @@ -78,7 +78,7 @@ export const DescriptionContainer = styled.div` display: inline-block; padding-right: 4rem; - ${V2_MediaQuery.MaxWidth.tablet} { + ${MediaQuery.MaxWidth.lg} { padding-right: 0; } `; diff --git a/src/accordion/accordion.style.tsx b/src/accordion/accordion.style.tsx index eea847280..96ee8b41c 100644 --- a/src/accordion/accordion.style.tsx +++ b/src/accordion/accordion.style.tsx @@ -1,16 +1,16 @@ import styled, { css } from "styled-components"; import { Button } from "../button"; -import { V2_Color } from "../v2_color"; -import { V2_MediaQuery } from "../v2_media"; -import { V2_Text } from "../v2_text/text"; import { TitleStyleProps, TitleWrapperStyleProps } from "./types"; +import { Border, MediaQuery } from "../theme"; +import { Colour } from "../theme"; +import { Typography } from "../typography"; // ============================================================================ // STYLING // ============================================================================= export const Content = styled.div` width: 100%; - border-bottom: 1px solid ${V2_Color.Neutral[6]}; + border-bottom: ${Border["width-010"]} ${Border.solid} ${Colour.border}; `; export const TitleWrapper = styled.div` @@ -20,14 +20,14 @@ export const TitleWrapper = styled.div` justify-content: flex-end; padding-bottom: 1rem; - ${V2_MediaQuery.MaxWidth.mobileL} { + ${MediaQuery.MaxWidth.sm} { justify-content: flex-end; } ${(props) => { if (!props.$showTitleInMobile && !props.$hasExpandAll) { return css` - ${V2_MediaQuery.MaxWidth.mobileL} { + ${MediaQuery.MaxWidth.sm} { display: none; } `; @@ -35,18 +35,18 @@ export const TitleWrapper = styled.div` }} `; -export const Title = styled(V2_Text.H2)` +export const Title = styled(Typography.HeaderMD)` display: flex; align-self: flex-start; flex: 1; - ${V2_MediaQuery.MaxWidth.mobileL} { + ${MediaQuery.MaxWidth.sm} { text-align: left; } ${(props) => { if (!props.$showInMobile) { return css` - ${V2_MediaQuery.MaxWidth.mobileL} { + ${MediaQuery.MaxWidth.sm} { display: none; visibility: hidden; } diff --git a/src/text-list/ordered-list.tsx b/src/text-list/ordered-list.tsx new file mode 100644 index 000000000..45b4cb87b --- /dev/null +++ b/src/text-list/ordered-list.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import { StyledOrderedList } from "./text-list.styles"; +import { OrderedListProps } from "./types"; + +export const OrderedList = ({ + size = "body-baseline", + children, + ...otherProps +}: OrderedListProps) => { + return ( + + {children} + + ); +}; diff --git a/src/text-list/unordered-list.tsx b/src/text-list/unordered-list.tsx new file mode 100644 index 000000000..d8b9c88a6 --- /dev/null +++ b/src/text-list/unordered-list.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import { StyledUnorderedList } from "./text-list.styles"; +import { UnorderedListProps } from "./types"; + +export const UnorderedList = ({ + size = "body-baseline", + children, + ...otherProps +}: UnorderedListProps) => { + return ( + + {children} + + ); +}; diff --git a/src/v2_text-list/text-list.styles.tsx b/src/v2_text-list/text-list.styles.tsx index 402d966d1..2a5573626 100644 --- a/src/v2_text-list/text-list.styles.tsx +++ b/src/v2_text-list/text-list.styles.tsx @@ -1,8 +1,6 @@ import styled, { css } from "styled-components"; -import { V2_MediaQuery } from "../v2_media"; -import { V2_Color } from "../v2_color"; -import { V2_TextStyleHelper } from "../v2_text/helper"; import { V2_OrderedListProps, V2_UnorderedListProps } from "./types"; +import { Colour, Font, MediaQuery } from "../theme"; const baseListStyle = (bottomMargin: number) => ` margin-bottom: ${bottomMargin ? bottomMargin : 0}rem; @@ -19,7 +17,7 @@ export const V2_StyledOrderedList = styled.ol` ${(props) => baseListStyle(props.bottomMargin)} margin-left: ${BASE_MARGIN}rem; - ${V2_MediaQuery.MaxWidth.tablet} { + ${MediaQuery.MaxWidth.lg} { margin-left: 2.5rem; } @@ -27,9 +25,9 @@ export const V2_StyledOrderedList = styled.ol` counter-reset: list; li { - ${(props) => V2_TextStyleHelper.getTextStyle(props.size, "regular")} + ${(props) => Font[`${props.size}-regular`]} position: relative; - color: ${V2_Color.Neutral[1]}; + color: ${Colour.text}; } ${(props) => { @@ -84,8 +82,8 @@ export const V2_StyledUnorderedList = styled.ul` list-style-type: ${(props) => props.bulletType || "disc"}; li { - ${(props) => V2_TextStyleHelper.getTextStyle(props.size, "regular")} - color: ${V2_Color.Neutral[1]}; + ${(props) => Font[`${props.size}-regular`]} + color: ${Colour.text}; } counter-reset: list; diff --git a/src/v2_text-list/types.ts b/src/v2_text-list/types.ts index ada5e4cc0..ccb9d5410 100644 --- a/src/v2_text-list/types.ts +++ b/src/v2_text-list/types.ts @@ -1,9 +1,10 @@ -import { V2_TextSizeType } from "../v2_text/types"; +import { TypographySizeType } from "../theme/font/types"; interface BaseListProps { children: JSX.Element | JSX.Element[]; bottomMargin?: number | undefined; - size?: V2_TextSizeType | undefined; + // size?: V2_TextSizeType | undefined; + size?: TypographySizeType | undefined; } /** @deprecated */ From 862c6c56eec63a2ce0959055ce18ed62c94fd675 Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Fri, 29 Nov 2024 15:35:32 +0800 Subject: [PATCH 2/4] [CCUBE-1628][MAHI]Update styling for transition and add codemod and tests for deprecation and migration of textlist --- codemods/deprecate-v2-tokens/data.ts | 8 ++ codemods/migrate-text-list/index.ts | 78 +++++++++++++++++++ src/accordion/accordion-item.style.tsx | 7 +- tests/codemod/deprecate-version/test-data.ts | 12 +++ tests/codemod/migrate-text-list/test-data.ts | 27 +++++++ .../migrate-text-list/transformer.spec.tsx | 36 +++++++++ 6 files changed, 164 insertions(+), 4 deletions(-) create mode 100644 codemods/migrate-text-list/index.ts create mode 100644 tests/codemod/migrate-text-list/test-data.ts create mode 100644 tests/codemod/migrate-text-list/transformer.spec.tsx diff --git a/codemods/deprecate-v2-tokens/data.ts b/codemods/deprecate-v2-tokens/data.ts index 5b70b64e8..5e65860e7 100644 --- a/codemods/deprecate-v2-tokens/data.ts +++ b/codemods/deprecate-v2-tokens/data.ts @@ -147,6 +147,10 @@ export const componentMap = [ oldName: "ColDivProps", newName: "V2_ColDivProps", }, + { + oldName: "TextList", + newName: "V2_TextList", + }, // Added theme name mappings { oldName: "BaseTheme", @@ -244,6 +248,10 @@ export const pathMap = [ oldPath: "layout", newPath: "v2_layout", }, + { + oldPath: "text-list", + newPath: "v2_text-list", + }, { oldPath: "theme", newPath: "v2_theme", diff --git a/codemods/migrate-text-list/index.ts b/codemods/migrate-text-list/index.ts new file mode 100644 index 000000000..1416b4ff8 --- /dev/null +++ b/codemods/migrate-text-list/index.ts @@ -0,0 +1,78 @@ +import { API, FileInfo, JSCodeshift } from "jscodeshift"; + +// ======= Constants ======= // + +const IMPORT_PATHS = { + TEXT_LIST: "@lifesg/react-design-system/text-list", + V2_TEXT_LIST: "@lifesg/react-design-system/v2_text-list", + DESIGN_SYSTEM: "@lifesg/react-design-system", +}; + +const IMPORT_SPECIFIERS = { + TEXT_LIST: "TextList", + V2_TEXT_LIST: "V2_TextList", +}; + +const JSX_IDENTIFIERS = { + TEXT_LIST: "TextList", + V2_TEXT_LIST: "V2_TextList", +}; + +// ======= Transformer Function ======= // + +export default function transformer(file: FileInfo, api: API) { + const j: JSCodeshift = api.jscodeshift; + const source = j(file.source); + + let isV2TextListImport = false; + + source.find(j.ImportDeclaration).forEach((path) => { + const importPath = path.node.source.value; + + if ( + importPath === IMPORT_PATHS.V2_TEXT_LIST || + importPath === IMPORT_PATHS.DESIGN_SYSTEM + ) { + path.node.specifiers?.forEach((specifier) => { + if ( + j.ImportSpecifier.check(specifier) && + specifier.imported.name === IMPORT_SPECIFIERS.V2_TEXT_LIST + ) { + specifier.imported.name = IMPORT_SPECIFIERS.TEXT_LIST; + + if ( + specifier.local && + specifier.local.name === IMPORT_SPECIFIERS.V2_TEXT_LIST + ) { + specifier.local.name = IMPORT_SPECIFIERS.TEXT_LIST; + } + + if (importPath === IMPORT_PATHS.V2_TEXT_LIST) { + path.node.source.value = IMPORT_PATHS.TEXT_LIST; + } + + isV2TextListImport = true; + } + }); + } + }); + + if (isV2TextListImport) { + source + .find(j.Identifier, { name: JSX_IDENTIFIERS.V2_TEXT_LIST }) + .forEach((path) => { + path.node.name = JSX_IDENTIFIERS.TEXT_LIST; + }); + + source.find(j.MemberExpression).forEach((path) => { + if ( + j.Identifier.check(path.node.object) && + path.node.object.name === JSX_IDENTIFIERS.V2_TEXT_LIST + ) { + path.node.object.name = JSX_IDENTIFIERS.TEXT_LIST; + } + }); + } + + return source.toSource(); +} diff --git a/src/accordion/accordion-item.style.tsx b/src/accordion/accordion-item.style.tsx index 910d93567..f04108515 100644 --- a/src/accordion/accordion-item.style.tsx +++ b/src/accordion/accordion-item.style.tsx @@ -2,8 +2,7 @@ import { ChevronUpIcon } from "@lifesg/react-icons/chevron-up"; import { animated } from "react-spring"; import styled, { css } from "styled-components"; import { ClickableIcon } from "../shared/clickable-icon"; -import { Transition } from "../transition"; -import { Border, Colour } from "../theme"; +import { Border, Colour, Motion } from "../theme"; import { MediaQuery } from "../theme"; import { Typography } from "../typography"; @@ -40,7 +39,7 @@ export const TitleContainer = styled.div` const TITLE_STYLE = (isCollapsed?: boolean) => css` flex: 1; margin: 1rem 2rem ${isCollapsed ? 0.5 : 1}rem 0; - transition: ${Transition.Base}; + transition: all ${Motion["duration-250"]} ${Motion["ease-standard"]}; `; export const Title = styled(Typography.HeaderSM)` @@ -60,7 +59,7 @@ export const ExpandCollapseButton = styled(ClickableIcon)` width: 3.25rem; padding: 1rem; transform: rotate(${(props) => (props.$isCollapsed ? 0 : 180)}deg); - transition: transform 300ms ease-in-out; + transition: transform ${Motion["duration-250"]} ${Motion["ease-default"]}; margin: auto -1rem auto 0; `; diff --git a/tests/codemod/deprecate-version/test-data.ts b/tests/codemod/deprecate-version/test-data.ts index c767d6f90..4ed48d86c 100644 --- a/tests/codemod/deprecate-version/test-data.ts +++ b/tests/codemod/deprecate-version/test-data.ts @@ -8,6 +8,7 @@ import { DesignToken } from "@lifesg/react-design-system/design-token"; import { ColDiv } from "@lifesg/react-design-system/layout"; import {ContainerType} from "@lifesg/react-design-system/layout" import {BaseColorSet} from "@lifesg/react-design-system/layout" +import {TextList} from "@lifesg/react-design-system/text-list" const Container = styled.div\` color: \${DesignToken.Table.Cell.Primary}; @@ -28,6 +29,11 @@ const Component = () => (
Item 2
Item 3
+ +
  • First
    • +
  • Second
    • +
  • Third
    • +     ); @@ -45,6 +51,7 @@ import { V2_DesignToken } from "@lifesg/react-design-system/v2_design-token"; import { V2_ColDiv } from "@lifesg/react-design-system/v2_layout"; import {V2_ContainerType} from "@lifesg/react-design-system/v2_layout" import {BaseColorSet} from "@lifesg/react-design-system/layout" +import {V2_TextList} from "@lifesg/react-design-system/v2_text-list" const Container = styled.div\` color: \${V2_DesignToken.Table.Cell.Primary}; @@ -65,6 +72,11 @@ const Component = () => (
    Item 2
    Item 3
    + +
  • First
    • +
  • Second
    • +
  • Third
    • +     ); diff --git a/tests/codemod/migrate-text-list/test-data.ts b/tests/codemod/migrate-text-list/test-data.ts new file mode 100644 index 000000000..fd05f3ab6 --- /dev/null +++ b/tests/codemod/migrate-text-list/test-data.ts @@ -0,0 +1,27 @@ +export const inputCode = ` + +import { V2_TextList } from "@lifesg/react-design-system/v2_text-list"; + + + +
  • First
    • +
  • Second
    • +
  • Third
    • +    ; + + +`; + +export const expectedOutputCode = ` + +import { TextList } from "@lifesg/react-design-system/text-list"; + + + +
  • First
    • +
  • Second
    • +
  • Third
    • +    ; + + +`; diff --git a/tests/codemod/migrate-text-list/transformer.spec.tsx b/tests/codemod/migrate-text-list/transformer.spec.tsx new file mode 100644 index 000000000..4c00b4204 --- /dev/null +++ b/tests/codemod/migrate-text-list/transformer.spec.tsx @@ -0,0 +1,36 @@ +import { execSync } from "child_process"; +import * as fs from "fs"; +import * as path from "path"; +import { expectedOutputCode, inputCode } from "./test-data"; + +describe("Codemod Transformer for V2_TextList to TextList", () => { + const inputPath = path.join(__dirname, "input.tsx"); + const outputPath = path.join(__dirname, "output.tsx"); + + beforeAll(() => { + // create sample input file for testing + jest.resetAllMocks(); + fs.writeFileSync(inputPath, inputCode); + }); + + afterAll(() => { + // delete the files created for testing (comment this out to view files) + fs.unlinkSync(inputPath); + fs.unlinkSync(outputPath); + }); + + it("should transform V2_TextList components to TextList components", () => { + fs.copyFileSync(inputPath, outputPath); + + // Execute the jscodeshift command for the codemod + execSync( + `jscodeshift --parser=tsx -t ./codemods/migrate-text-list ${outputPath}` + ); + + // Check the transformed code + const transformedCode = fs.readFileSync(outputPath, "utf8"); + + // Compare the transformed code with the expected output + expect(transformedCode.trim()).toEqual(expectedOutputCode.trim()); + }); +}); From 87d9ea16213f5efe680137a8d12661b1260a2a86 Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Mon, 2 Dec 2024 12:34:01 +0800 Subject: [PATCH 3/4] [CCUBE-1628][MAHI]Update codemod script to cater for size prop mapping and clean up rebase of deprecated textlist file --- codemods/migrate-text-list/data.ts | 16 ++++ codemods/migrate-text-list/index.ts | 24 +++++ codemods/run-codemod.ts | 3 + src/text-list/index.ts | 9 ++ src/text-list/text-list.styles.tsx | 92 ++++++++++++++++++++ src/text-list/types.ts | 27 ++++++ src/v2_text-list/types.ts | 5 +- tests/codemod/migrate-text-list/test-data.ts | 2 + 8 files changed, 175 insertions(+), 3 deletions(-) create mode 100644 codemods/migrate-text-list/data.ts create mode 100644 src/text-list/index.ts create mode 100644 src/text-list/text-list.styles.tsx create mode 100644 src/text-list/types.ts diff --git a/codemods/migrate-text-list/data.ts b/codemods/migrate-text-list/data.ts new file mode 100644 index 000000000..acff08853 --- /dev/null +++ b/codemods/migrate-text-list/data.ts @@ -0,0 +1,16 @@ +export const sizePropMapping = { + D1: "header-xxl", + D2: "header-xl", + D3: "header-md", + D4: "header-sm", + H1: "header-lg", + H2: "header-md", + H3: "header-sm", + H4: "header-xs", + H5: "body-md", + H6: "body-sm", + DBody: "header-sm", + Body: "body-baseline", + BodySmall: "body-md", + XSmall: "body-xs", +}; diff --git a/codemods/migrate-text-list/index.ts b/codemods/migrate-text-list/index.ts index 1416b4ff8..71bc09dfc 100644 --- a/codemods/migrate-text-list/index.ts +++ b/codemods/migrate-text-list/index.ts @@ -1,4 +1,5 @@ import { API, FileInfo, JSCodeshift } from "jscodeshift"; +import { sizePropMapping } from "./data"; // ======= Constants ======= // @@ -72,6 +73,29 @@ export default function transformer(file: FileInfo, api: API) { path.node.object.name = JSX_IDENTIFIERS.TEXT_LIST; } }); + + source + .find(j.JSXOpeningElement, { + name: { name: JSX_IDENTIFIERS.TEXT_LIST }, + }) + .forEach((path) => { + const attributes = path.node.attributes; + + attributes?.forEach((attribute) => { + if ( + j.JSXAttribute.check(attribute) && + attribute.name.name === "size" && + j.StringLiteral.check(attribute.value) + ) { + const sizeValue = attribute.value.value; + if (sizePropMapping[sizeValue]) { + attribute.value = j.literal( + sizePropMapping[sizeValue] + ); + } + } + }); + }); } return source.toSource(); diff --git a/codemods/run-codemod.ts b/codemods/run-codemod.ts index c6af34f98..0fd735e90 100644 --- a/codemods/run-codemod.ts +++ b/codemods/run-codemod.ts @@ -14,6 +14,7 @@ enum Codemod { MigrateLayout = "migrate-layout", MigrateMediaQuery = "migrate-media-query", MigrateText = "migrate-text", + MigrateTextList = "migrate-text-list", } enum Theme { @@ -32,6 +33,8 @@ const CodemodDescriptions: { [key in Codemod]: string } = { [Codemod.MigrateMediaQuery]: "Replace V2 media queries with new Breakpoint tokens", [Codemod.MigrateText]: "Replace V2_Text with new Typography components", + [Codemod.MigrateTextList]: + "Replace V2_TextList with new Textlist components", }; const TargetDirectoryPaths = { diff --git a/src/text-list/index.ts b/src/text-list/index.ts new file mode 100644 index 000000000..e63a52f3d --- /dev/null +++ b/src/text-list/index.ts @@ -0,0 +1,9 @@ +import { UnorderedList } from "./unordered-list"; +import { OrderedList } from "./ordered-list"; + +export const TextList = { + Ul: UnorderedList, + Ol: OrderedList, +}; + +export * from "./types"; diff --git a/src/text-list/text-list.styles.tsx b/src/text-list/text-list.styles.tsx new file mode 100644 index 000000000..921ad15ad --- /dev/null +++ b/src/text-list/text-list.styles.tsx @@ -0,0 +1,92 @@ +import styled, { css } from "styled-components"; +import { OrderedListProps, UnorderedListProps } from "./types"; +import { Colour, Font, MediaQuery } from "../theme"; + +const baseListStyle = (bottomMargin: number) => ` + margin-bottom: ${bottomMargin ? bottomMargin : 0}rem; +`; + +const BASE_MARGIN = 3; + +// ============================================================================= +// ORDERED LIST +// ============================================================================ +export const StyledOrderedList = styled.ol` + ${(props) => baseListStyle(props.bottomMargin)} + margin-left: ${BASE_MARGIN}rem; + + ${MediaQuery.MaxWidth.lg} { + margin-left: 2.5rem; + } + + // Counter matters + counter-reset: list; + + li { + ${(props) => Font[`${props.size}-regular`]} + position: relative; + color: ${Colour.text}; + } + + ${(props) => { + const { reversed } = props; + const counterType = props.counterType || "decimal"; + const counterSeparator = props.counterSeparator || ")"; + + return css` + li:before { + content: counter(list, ${counterType}) "${counterSeparator}"; + counter-increment: ${reversed ? "list -1" : "list"}; + position: absolute; + left: -2rem; + } + `; + }} + + ${(props) => { + const { reversed, start } = props; + + if (start) { + const resetValue = reversed ? start + 1 : start - 1; + return css` + counter-reset: list ${resetValue}; + `; + } + }} + + list-style-position: outside; + list-style-type: none; + + // nested lists styling + ol, + ul { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } + + ul > li:before { + content: ""; + } +`; + +// ============================================================================= +// UNORDERED LIST +// ============================================================================= +export const StyledUnorderedList = styled.ul` + ${(props) => baseListStyle(props.bottomMargin)} + margin-left: 2.5rem; + list-style-type: ${(props) => props.bulletType || "disc"}; + + li { + ${(props) => Font[`${props.size}-regular`]} + color: ${Colour.text}; + } + + counter-reset: list; + + ol, + ul { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } +`; diff --git a/src/text-list/types.ts b/src/text-list/types.ts new file mode 100644 index 000000000..b9d1e013e --- /dev/null +++ b/src/text-list/types.ts @@ -0,0 +1,27 @@ +import { TypographySizeType } from "../theme/font/types"; + +interface BaseListProps { + children: JSX.Element | JSX.Element[]; + bottomMargin?: number | undefined; + // size?: V2_TextSizeType | undefined; + size?: TypographySizeType | undefined; +} + +export type CounterType = "lower-alpha" | "decimal" | "lower-roman"; + +export interface OrderedListProps extends BaseListProps { + /** Values: "lower-alpha" | "decimal" | "lower-roman" */ + counterType?: CounterType | undefined; + counterSeparator?: string | undefined; + /** Specifies if the list counter decrements */ + reversed?: boolean | undefined; + /** The value to start the list count from */ + start?: number | undefined; +} + +export type BulletType = "disc" | "circle" | "square" | "none"; + +export interface UnorderedListProps extends BaseListProps { + /** Values: "disc" | "circle" | "square" | "none" */ + bulletType?: BulletType | undefined; +} diff --git a/src/v2_text-list/types.ts b/src/v2_text-list/types.ts index ccb9d5410..ada5e4cc0 100644 --- a/src/v2_text-list/types.ts +++ b/src/v2_text-list/types.ts @@ -1,10 +1,9 @@ -import { TypographySizeType } from "../theme/font/types"; +import { V2_TextSizeType } from "../v2_text/types"; interface BaseListProps { children: JSX.Element | JSX.Element[]; bottomMargin?: number | undefined; - // size?: V2_TextSizeType | undefined; - size?: TypographySizeType | undefined; + size?: V2_TextSizeType | undefined; } /** @deprecated */ diff --git a/tests/codemod/migrate-text-list/test-data.ts b/tests/codemod/migrate-text-list/test-data.ts index fd05f3ab6..66fba5964 100644 --- a/tests/codemod/migrate-text-list/test-data.ts +++ b/tests/codemod/migrate-text-list/test-data.ts @@ -8,6 +8,7 @@ import { V2_TextList } from "@lifesg/react-design-system/v2_text-list";
  • Second
  • Third
    • ; +; `; @@ -22,6 +23,7 @@ import { TextList } from "@lifesg/react-design-system/text-list";
  • Second
  • Third
    • ; +; `; From 43f6e686c9b505e67deee199fde955b063a8851f Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Tue, 3 Dec 2024 18:08:16 +0800 Subject: [PATCH 4/4] [CCUBE-1628][MAHI]Update codemod logic to allow for migration of size prop --- codemods/migrate-text-list/index.ts | 32 +++++++++++++++----- src/v2_text-list/text-list.styles.tsx | 14 +++++---- tests/codemod/migrate-text-list/test-data.ts | 4 +-- 3 files changed, 35 insertions(+), 15 deletions(-) diff --git a/codemods/migrate-text-list/index.ts b/codemods/migrate-text-list/index.ts index 71bc09dfc..65d6b0aec 100644 --- a/codemods/migrate-text-list/index.ts +++ b/codemods/migrate-text-list/index.ts @@ -74,12 +74,29 @@ export default function transformer(file: FileInfo, api: API) { } }); - source - .find(j.JSXOpeningElement, { - name: { name: JSX_IDENTIFIERS.TEXT_LIST }, - }) - .forEach((path) => { - const attributes = path.node.attributes; + source.find(j.JSXMemberExpression).forEach((path) => { + if ( + j.JSXIdentifier.check(path.node.object) && + path.node.object.name === JSX_IDENTIFIERS.V2_TEXT_LIST + ) { + path.node.object.name = JSX_IDENTIFIERS.TEXT_LIST; + } + }); + + source.find(j.JSXOpeningElement).forEach((path) => { + const openingElement = path.node; + let isTextListElement = false; + + if ( + j.JSXMemberExpression.check(openingElement.name) && + j.JSXIdentifier.check(openingElement.name.object) && + openingElement.name.object.name === JSX_IDENTIFIERS.TEXT_LIST + ) { + isTextListElement = true; + } + + if (isTextListElement) { + const attributes = openingElement.attributes; attributes?.forEach((attribute) => { if ( @@ -95,7 +112,8 @@ export default function transformer(file: FileInfo, api: API) { } } }); - }); + } + }); } return source.toSource(); diff --git a/src/v2_text-list/text-list.styles.tsx b/src/v2_text-list/text-list.styles.tsx index 2a5573626..402d966d1 100644 --- a/src/v2_text-list/text-list.styles.tsx +++ b/src/v2_text-list/text-list.styles.tsx @@ -1,6 +1,8 @@ import styled, { css } from "styled-components"; +import { V2_MediaQuery } from "../v2_media"; +import { V2_Color } from "../v2_color"; +import { V2_TextStyleHelper } from "../v2_text/helper"; import { V2_OrderedListProps, V2_UnorderedListProps } from "./types"; -import { Colour, Font, MediaQuery } from "../theme"; const baseListStyle = (bottomMargin: number) => ` margin-bottom: ${bottomMargin ? bottomMargin : 0}rem; @@ -17,7 +19,7 @@ export const V2_StyledOrderedList = styled.ol` ${(props) => baseListStyle(props.bottomMargin)} margin-left: ${BASE_MARGIN}rem; - ${MediaQuery.MaxWidth.lg} { + ${V2_MediaQuery.MaxWidth.tablet} { margin-left: 2.5rem; } @@ -25,9 +27,9 @@ export const V2_StyledOrderedList = styled.ol` counter-reset: list; li { - ${(props) => Font[`${props.size}-regular`]} + ${(props) => V2_TextStyleHelper.getTextStyle(props.size, "regular")} position: relative; - color: ${Colour.text}; + color: ${V2_Color.Neutral[1]}; } ${(props) => { @@ -82,8 +84,8 @@ export const V2_StyledUnorderedList = styled.ul` list-style-type: ${(props) => props.bulletType || "disc"}; li { - ${(props) => Font[`${props.size}-regular`]} - color: ${Colour.text}; + ${(props) => V2_TextStyleHelper.getTextStyle(props.size, "regular")} + color: ${V2_Color.Neutral[1]}; } counter-reset: list; diff --git a/tests/codemod/migrate-text-list/test-data.ts b/tests/codemod/migrate-text-list/test-data.ts index 66fba5964..72b6abf55 100644 --- a/tests/codemod/migrate-text-list/test-data.ts +++ b/tests/codemod/migrate-text-list/test-data.ts @@ -8,7 +8,7 @@ import { V2_TextList } from "@lifesg/react-design-system/v2_text-list";
  • Second
  • Third
    • ; -; +; `; @@ -23,7 +23,7 @@ import { TextList } from "@lifesg/react-design-system/text-list";
  • Second
  • Third
    • ; -; +; `;