[CCUBE-1628][MAHI]Update codemod logic to allow for migration of size…

… prop
LifeSG · Dec 3, 2024 · 43f6e68 · 43f6e68
1 parent 87d9ea1
commit 43f6e68
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 15 deletions.
diff --git 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
@@ -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,17 +19,17 @@ export const V2_StyledOrderedList = styled.ol<V2_OrderedListProps>`
     ${(props) => baseListStyle(props.bottomMargin)}
     margin-left: ${BASE_MARGIN}rem;
 
-    ${MediaQuery.MaxWidth.lg} {
+    ${V2_MediaQuery.MaxWidth.tablet} {
         margin-left: 2.5rem;
     }
 
     // Counter matters
     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<V2_UnorderedListProps>`
     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
@@ -8,7 +8,7 @@ import { V2_TextList } from "@lifesg/react-design-system/v2_text-list";
     <li>Second</li>
     <li>Third</li>
 </V2_TextList.Ul>;
-<V2_TextList size="Body" />;
+<V2_TextList.Ol size="Body" />;
 
 
 `;
@@ -23,7 +23,7 @@ import { TextList } from "@lifesg/react-design-system/text-list";
     <li>Second</li>
     <li>Third</li>
 </TextList.Ul>;
-<TextList size="body-baseline" />;
+<TextList.Ol size="body-baseline" />;
 
 
 `;