From 62b24c17538e1504e221ca65d176216cb329cbd9 Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Mon, 7 Oct 2024 16:59:33 +0800 Subject: [PATCH] [CCUBE][MAHI]Update the typography component and Font tokens with latestest changes --- .../font-spec/specs/lifesg-font-spec-set.ts | 16 +++---- src/theme/font-spec/theme-helper.ts | 6 +-- src/theme/font-spec/types.ts | 6 +-- src/theme/font/specs/lifesg-font-set.ts | 48 +++++++++---------- src/theme/font/theme-helper.ts | 10 ++-- src/theme/font/types.ts | 14 +++--- src/typography/typography.tsx | 4 +- .../theme/doc-elements/doc-font-display.tsx | 28 +++++------ tests/typography/typography.spec.tsx | 10 ++-- 9 files changed, 71 insertions(+), 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 index 84c161d03..0100a8b01 100644 --- 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 index d1e927f85..c0aa62e83 100644 --- 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 index 80ade6406..cd1cdbcd0 100644 --- 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 index d9b7026b8..cdd3c1256 100644 --- 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 index f5c2e5d51..477b470f5 100644 --- 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 index 01ad52181..ffda88fb7 100644 --- 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 index e3f5441e8..6e90ea9d6 100644 --- 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 index 55cf027e9..90760b583 100644 --- 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" /> - { lineHeightToken="body-lh-sm" letterSpacingToken="body-ls-sm" /> + { /> diff --git a/tests/typography/typography.spec.tsx b/tests/typography/typography.spec.tsx index 34095c3a5..f22ffc6fb 100644 --- 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( - - This is large body text - + + This is medium body text + ); - expect(getByText("This is large body text")).toBeInTheDocument(); + expect(getByText("This is medium body text")).toBeInTheDocument(); }); });