[CCUBE][MAHI]Update the typography component and Font tokens with lat…

…estest changes
LifeSG · Oct 7, 2024 · 62b24c1 · 62b24c1
1 parent 6a5029b
commit 62b24c1
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 71 deletions.
diff --git a/src/theme/font-spec/specs/lifesg-font-spec-set.ts b/src/theme/font-spec/specs/lifesg-font-spec-set.ts
@@ -30,19 +30,19 @@ export const LifeSgFontSpecSet: FontSpecSet = {
     "font-family": "Open Sans",
 
     "body-size-baseline": "1.125rem",
-    "body-size-lg": "1rem",
-    "body-size-md": "0.875rem",
-    "body-size-sm": "0.75rem",
+    "body-size-md": "1rem",
+    "body-size-sm": "0.875rem",
+    "body-size-xs": "0.75rem",
 
     "body-lh-baseline": "1.625rem",
-    "body-lh-lg": "1.5rem",
-    "body-lh-md": "1.6rem",
-    "body-lh-sm": "1.2rem",
+    "body-lh-md": "1.5rem",
+    "body-lh-sm": "1.6rem",
+    "body-lh-xs": "1.2rem",
 
     "body-ls-baseline": "0rem",
-    "body-ls-lg": "0.014rem",
-    "body-ls-md": "0.012rem",
+    "body-ls-md": "0.014rem",
     "body-ls-sm": "0.012rem",
+    "body-ls-xs": "0.012rem",
 
     "formlabel-size-baseline": "1rem",
     "formlabel-size-lg": "1.125rem",

diff --git a/src/theme/font-spec/theme-helper.ts b/src/theme/font-spec/theme-helper.ts
@@ -62,19 +62,19 @@ export const FontSpecValues: {
     "font-family": getFontSpec("font-family"),
 
     "body-size-baseline": getFontSpec("body-size-baseline"),
-    "body-size-lg": getFontSpec("body-size-lg"),
     "body-size-md": getFontSpec("body-size-md"),
     "body-size-sm": getFontSpec("body-size-sm"),
+    "body-size-xs": getFontSpec("body-size-xs"),
 
     "body-lh-baseline": getFontSpec("body-lh-baseline"),
-    "body-lh-lg": getFontSpec("body-lh-lg"),
     "body-lh-md": getFontSpec("body-lh-md"),
     "body-lh-sm": getFontSpec("body-lh-sm"),
+    "body-lh-xs": getFontSpec("body-lh-xs"),
 
     "body-ls-baseline": getFontSpec("body-ls-baseline"),
-    "body-ls-lg": getFontSpec("body-ls-lg"),
     "body-ls-md": getFontSpec("body-ls-md"),
     "body-ls-sm": getFontSpec("body-ls-sm"),
+    "body-ls-xs": getFontSpec("body-ls-xs"),
 
     "formlabel-size-baseline": getFontSpec("formlabel-size-baseline"),
     "formlabel-size-lg": getFontSpec("formlabel-size-lg"),

diff --git a/src/theme/font-spec/types.ts b/src/theme/font-spec/types.ts
@@ -42,21 +42,21 @@ export type FontSpecSet = {
 
     // Body sizes
     "body-size-baseline": string;
-    "body-size-lg": string;
     "body-size-md": string;
     "body-size-sm": string;
+    "body-size-xs": string;
 
     // Body line heights
     "body-lh-baseline": string;
-    "body-lh-lg": string;
     "body-lh-md": string;
     "body-lh-sm": string;
+    "body-lh-xs": string;
 
     // Body letter spacing
     "body-ls-baseline": string;
-    "body-ls-lg": string;
     "body-ls-md": string;
     "body-ls-sm": string;
+    "body-ls-xs": string;
 
     // Form label sizes
     "formlabel-size-baseline": string;

diff --git a/src/theme/font/specs/lifesg-font-set.ts b/src/theme/font/specs/lifesg-font-set.ts
@@ -186,30 +186,6 @@ export const LifeSgFontSet: FontSet = {
         "body-lh-baseline",
         "body-ls-baseline"
     ),
-    "body-lg-light": generateFontCSS(
-        "body-size-lg",
-        "weight-light",
-        "body-lh-lg",
-        "body-ls-lg"
-    ),
-    "body-lg-regular": generateFontCSS(
-        "body-size-lg",
-        "weight-regular",
-        "body-lh-lg",
-        "body-ls-lg"
-    ),
-    "body-lg-semibold": generateFontCSS(
-        "body-size-lg",
-        "weight-semibold",
-        "body-lh-lg",
-        "body-ls-lg"
-    ),
-    "body-lg-bold": generateFontCSS(
-        "body-size-lg",
-        "weight-bold",
-        "body-lh-lg",
-        "body-ls-lg"
-    ),
     "body-md-light": generateFontCSS(
         "body-size-md",
         "weight-light",
@@ -258,6 +234,30 @@ export const LifeSgFontSet: FontSet = {
         "body-lh-sm",
         "body-ls-sm"
     ),
+    "body-xs-light": generateFontCSS(
+        "body-size-xs",
+        "weight-light",
+        "body-lh-xs",
+        "body-ls-xs"
+    ),
+    "body-xs-regular": generateFontCSS(
+        "body-size-xs",
+        "weight-regular",
+        "body-lh-xs",
+        "body-ls-xs"
+    ),
+    "body-xs-semibold": generateFontCSS(
+        "body-size-xs",
+        "weight-semibold",
+        "body-lh-xs",
+        "body-ls-xs"
+    ),
+    "body-xs-bold": generateFontCSS(
+        "body-size-xs",
+        "weight-bold",
+        "body-lh-xs",
+        "body-ls-xs"
+    ),
     "formlabel-baseline-semibold": generateFontCSS(
         "formlabel-size-baseline",
         "weight-semibold",

diff --git a/src/theme/font/theme-helper.ts b/src/theme/font/theme-helper.ts
@@ -71,11 +71,6 @@ export const FontValues: {
     "body-baseline-semibold": getFont("body-baseline-semibold"),
     "body-baseline-bold": getFont("body-baseline-bold"),
 
-    "body-lg-light": getFont("body-lg-light"),
-    "body-lg-regular": getFont("body-lg-regular"),
-    "body-lg-semibold": getFont("body-lg-semibold"),
-    "body-lg-bold": getFont("body-lg-bold"),
-
     "body-md-light": getFont("body-md-light"),
     "body-md-regular": getFont("body-md-regular"),
     "body-md-semibold": getFont("body-md-semibold"),
@@ -86,6 +81,11 @@ export const FontValues: {
     "body-sm-semibold": getFont("body-sm-semibold"),
     "body-sm-bold": getFont("body-sm-bold"),
 
+    "body-xs-light": getFont("body-xs-light"),
+    "body-xs-regular": getFont("body-xs-regular"),
+    "body-xs-semibold": getFont("body-xs-semibold"),
+    "body-xs-bold": getFont("body-xs-bold"),
+
     "formlabel-baseline-semibold": getFont("formlabel-baseline-semibold"),
     "formlabel-lg-semibold": getFont("formlabel-lg-semibold"),
 };
diff --git a/src/theme/font/types.ts b/src/theme/font/types.ts
@@ -15,9 +15,9 @@ export type TypographySizeType =
     | "header-sm"
     | "header-xs"
     | "body-baseline"
-    | "body-lg"
     | "body-md"
-    | "body-sm";
+    | "body-sm"
+    | "body-xs";
 
 export type FontSet = {
     "header-xxl-light": CSSProp | string;
@@ -55,11 +55,6 @@ export type FontSet = {
     "body-baseline-semibold": CSSProp | string;
     "body-baseline-bold": CSSProp | string;
 
-    "body-lg-light": CSSProp | string;
-    "body-lg-regular": CSSProp | string;
-    "body-lg-semibold": CSSProp | string;
-    "body-lg-bold": CSSProp | string;
-
     "body-md-light": CSSProp | string;
     "body-md-regular": CSSProp | string;
     "body-md-semibold": CSSProp | string;
@@ -70,6 +65,11 @@ export type FontSet = {
     "body-sm-semibold": CSSProp | string;
     "body-sm-bold": CSSProp | string;
 
+    "body-xs-light": CSSProp | string;
+    "body-xs-regular": CSSProp | string;
+    "body-xs-semibold": CSSProp | string;
+    "body-xs-bold": CSSProp | string;
+
     "formlabel-baseline-semibold": CSSProp | string;
     "formlabel-lg-semibold": CSSProp | string;
 };
diff --git a/src/typography/typography.tsx b/src/typography/typography.tsx
@@ -38,9 +38,9 @@ export namespace Typography {
     };
 
     export const BodyBL = createBody("body-baseline", "BodyBL");
-    export const BodyLG = createBody("body-lg", "BodyLG");
     export const BodyMD = createBody("body-md", "BodyMD");
     export const BodySM = createBody("body-sm", "BodySM");
+    export const BodyXS = createBody("body-xs", "BodyXS");
 
     const createLinkComponent = (
         textStyle: TypographySizeType,
@@ -76,8 +76,8 @@ export namespace Typography {
 
     export const LinkBL = createLinkComponent("body-baseline", "LinkBL");
     export const LinkMD = createLinkComponent("body-md", "LinkMD");
-    export const LinkLG = createLinkComponent("body-lg", "LinkLG");
     export const LinkSM = createLinkComponent("body-sm", "LinkSM");
+    export const LinkXS = createLinkComponent("body-xs", "LinkXS");
 }
 
 const StyledExternalIcon = styled(ExternalIcon)`

diff --git a/stories/theme/doc-elements/doc-font-display.tsx b/stories/theme/doc-elements/doc-font-display.tsx
@@ -130,17 +130,6 @@ export const FontDisplay = ({ theme }: FontDisplayProps) => {
                     lineHeightToken="body-lh-baseline"
                     letterSpacingToken="body-ls-baseline"
                 />
-                <FontCollection
-                    tokens={[
-                        "body-lg-light",
-                        "body-lg-regular",
-                        "body-lg-semibold",
-                        "body-lg-bold",
-                    ]}
-                    fontSizeToken="body-size-lg"
-                    lineHeightToken="body-lh-lg"
-                    letterSpacingToken="body-ls-lg"
-                />
                 <FontCollection
                     tokens={[
                         "body-md-light",
@@ -163,6 +152,17 @@ export const FontDisplay = ({ theme }: FontDisplayProps) => {
                     lineHeightToken="body-lh-sm"
                     letterSpacingToken="body-ls-sm"
                 />
+                <FontCollection
+                    tokens={[
+                        "body-xs-light",
+                        "body-xs-regular",
+                        "body-xs-semibold",
+                        "body-xs-bold",
+                    ]}
+                    fontSizeToken="body-size-xs"
+                    lineHeightToken="body-lh-xs"
+                    letterSpacingToken="body-ls-xs"
+                />
                 <FontCollection
                     tokens={["formlabel-baseline-semibold"]}
                     fontSizeToken="body-size-baseline"
@@ -171,9 +171,9 @@ export const FontDisplay = ({ theme }: FontDisplayProps) => {
                 />
                 <FontCollection
                     tokens={["formlabel-lg-semibold"]}
-                    fontSizeToken="body-size-lg"
-                    lineHeightToken="body-lh-lg"
-                    letterSpacingToken="body-ls-lg"
+                    fontSizeToken="formlabel-size-lg"
+                    lineHeightToken="formlabel-lh-lg"
+                    letterSpacingToken="formlabel-ls-lg"
                 />
             </Display>
         </ThemeProvider>

diff --git a/tests/typography/typography.spec.tsx b/tests/typography/typography.spec.tsx
@@ -17,16 +17,16 @@ describe("Typography Components", () => {
     };
 
     describe("Body Text", () => {
-        it("renders BodyLG with correct text", () => {
+        it("renders BodyMD with correct text", () => {
             const { getByText } = render(
                 <ThemeProvider theme={mockTheme}>
-                    <Typography.BodyLG weight="semibold" inline>
-                        This is large body text
-                    </Typography.BodyLG>
+                    <Typography.BodyMD weight="semibold" inline>
+                        This is medium body text
+                    </Typography.BodyMD>
                 </ThemeProvider>
             );
 
-            expect(getByText("This is large body text")).toBeInTheDocument();
+            expect(getByText("This is medium body text")).toBeInTheDocument();
         });
     });