From 36e550324c5aede7f42595df9459b7cd1a049d75 Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Wed, 28 Aug 2024 13:00:02 +0800 Subject: [PATCH 1/9] [CCUBE-1535][MAHI]Set Up Spacing and Radius tokens --- src/theme/index.ts | 8 ++ src/theme/radius/specs/lifesg-radius-set.ts | 10 ++ src/theme/radius/theme-helper.ts | 36 +++++++ src/theme/radius/types.ts | 16 ++++ src/theme/spacing/specs/lifesg-spacing-set.ts | 24 +++++ src/theme/spacing/theme-helper.ts | 50 ++++++++++ src/theme/spacing/types.ts | 30 ++++++ src/theme/types.ts | 12 +++ tests/theme/theme-radius.spec.tsx | 96 +++++++++++++++++++ tests/theme/theme-spacing.spec.tsx | 83 ++++++++++++++++ 10 files changed, 365 insertions(+) create mode 100644 src/theme/radius/specs/lifesg-radius-set.ts create mode 100644 src/theme/radius/theme-helper.ts create mode 100644 src/theme/radius/types.ts create mode 100644 src/theme/spacing/specs/lifesg-spacing-set.ts create mode 100644 src/theme/spacing/theme-helper.ts create mode 100644 src/theme/spacing/types.ts create mode 100644 tests/theme/theme-radius.spec.tsx create mode 100644 tests/theme/theme-spacing.spec.tsx diff --git a/src/theme/index.ts b/src/theme/index.ts index fbc70ee57..8827151ef 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -3,6 +3,8 @@ import { BorderValues } from "./border/theme-helper"; import { PrimitiveColour } from "./colour-primitive/theme-helper"; import { ColourSemantic } from "./colour-semantic/theme-helper"; import { FontValues } from "./font/theme-helper"; +import { RadiusSetValue } from "./radius/theme-helper"; +import { SpacingSetValue } from "./spacing/theme-helper"; import { ThemeSpec } from "./types"; import { TypographyValues } from "./typography/theme-helper"; @@ -19,6 +21,12 @@ export const Animation = AnimationValues; export const Border = BorderValues; +export const BorderSet = BorderValues; + +export const Spacing = SpacingSetValue; + +export const Radius = RadiusSetValue; + export const LifeSGTheme: ThemeSpec = { colourScheme: "lifesg", fontScheme: "lifesg", diff --git a/src/theme/radius/specs/lifesg-radius-set.ts b/src/theme/radius/specs/lifesg-radius-set.ts new file mode 100644 index 000000000..26eac6008 --- /dev/null +++ b/src/theme/radius/specs/lifesg-radius-set.ts @@ -0,0 +1,10 @@ +import { RadiusSet } from "../types"; + +export const LifeSgRadiusSet: RadiusSet = { + none: "0px", + xs: "2px", + sm: "4px", + md: "8px", + lg: "12px", + full: "9999px", +}; diff --git a/src/theme/radius/theme-helper.ts b/src/theme/radius/theme-helper.ts new file mode 100644 index 000000000..3a329eb50 --- /dev/null +++ b/src/theme/radius/theme-helper.ts @@ -0,0 +1,36 @@ +import { StyledComponentProps, getCollection, getValue } from "../helpers"; +import { RadiusScheme, ThemeCollectionSpec } from "../types"; +import { LifeSgRadiusSet } from "./specs/lifesg-radius-set"; +import { RadiusCollectionsMap, RadiusSet } from "./types"; + +const RadiusSpec: ThemeCollectionSpec = { + collections: { + lifesg: LifeSgRadiusSet, + }, + defaultValue: "lifesg", +}; + +export const getSpaceValue = (key: keyof RadiusSet) => { + return (props: StyledComponentProps): string => { + const theme = props.theme; + const spacingset: RadiusSet = getCollection( + RadiusSpec, + theme.spacingScheme + ); + + if (theme.overrides && theme.overrides.radius) { + return getValue(spacingset, key, theme.overrides.radius); + } else { + return spacingset[key]; + } + }; +}; + +export const RadiusSetValue = { + none: getSpaceValue("none"), + xs: getSpaceValue("xs"), + sm: getSpaceValue("sm"), + md: getSpaceValue("md"), + lg: getSpaceValue("lg"), + full: getSpaceValue("full"), +}; diff --git a/src/theme/radius/types.ts b/src/theme/radius/types.ts new file mode 100644 index 000000000..960a79751 --- /dev/null +++ b/src/theme/radius/types.ts @@ -0,0 +1,16 @@ +import { RadiusScheme } from "../types"; + +export type RadiusSet = { + none: string; + xs: string; + sm: string; + md: string; + lg: string; + full: string; +}; + +export type RadiusSetSetOptions = Partial; + +export type RadiusCollectionsMap = { + [key in RadiusScheme]: RadiusSet; +}; diff --git a/src/theme/spacing/specs/lifesg-spacing-set.ts b/src/theme/spacing/specs/lifesg-spacing-set.ts new file mode 100644 index 000000000..fd04f59cd --- /dev/null +++ b/src/theme/spacing/specs/lifesg-spacing-set.ts @@ -0,0 +1,24 @@ +import { SpacingSetType } from "../types"; + +export const LifeSgSpacingSet: SpacingSetType = { + "spacing-0": "0rem", + "spacing-4": "0.25rem", + "spacing-8": "0.5rem", + "spacing-12": "0.75rem", + "spacing-16": "1rem", + "spacing-20": "1.25rem", + "spacing-24": "1.5rem", + "spacing-32": "2rem", + "spacing-40": "2.5rem", + "spacing-48": "3rem", + "spacing-64": "4rem", + "spacing-72": "4.5rem", + + "layout-xs": "8px", + "layout-sm": "16px", + "layout-md": "24px", + "layout-lg": "32px", + "layout-xl": "48px", + "layout-xxl": "64px", + "layout-xxxl": "128px", +}; diff --git a/src/theme/spacing/theme-helper.ts b/src/theme/spacing/theme-helper.ts new file mode 100644 index 000000000..89e3ee473 --- /dev/null +++ b/src/theme/spacing/theme-helper.ts @@ -0,0 +1,50 @@ +import { StyledComponentProps, getCollection, getValue } from "../helpers"; +import { SpacingScheme, ThemeCollectionSpec } from "../types"; +import { LifeSgSpacingSet } from "./specs/lifesg-spacing-set"; +import { SpacingCollectionsMap, SpacingSetType } from "./types"; + +const SpacingSpec: ThemeCollectionSpec = { + collections: { + lifesg: LifeSgSpacingSet, + }, + defaultValue: "lifesg", +}; + +export const getSpaceValue = (key: keyof SpacingSetType) => { + return (props: StyledComponentProps): string => { + const theme = props.theme; + const spacingset: SpacingSetType = getCollection( + SpacingSpec, + theme.spacingScheme + ); + + if (theme.overrides && theme.overrides.spacing) { + return getValue(spacingset, key, theme.overrides.spacing); + } else { + return spacingset[key]; + } + }; +}; + +export const SpacingSetValue = { + "spacing-0": getSpaceValue("spacing-0"), + "spacing-4": getSpaceValue("spacing-4"), + "spacing-8": getSpaceValue("spacing-8"), + "spacing-12": getSpaceValue("spacing-12"), + "spacing-16": getSpaceValue("spacing-16"), + "spacing-20": getSpaceValue("spacing-20"), + "spacing-24": getSpaceValue("spacing-24"), + "spacing-32": getSpaceValue("spacing-32"), + "spacing-40": getSpaceValue("spacing-40"), + "spacing-48": getSpaceValue("spacing-48"), + "spacing-64": getSpaceValue("spacing-64"), + "spacing-72": getSpaceValue("spacing-72"), + + "layout-xs": getSpaceValue("layout-xs"), + "layout-sm": getSpaceValue("layout-sm"), + "layout-md": getSpaceValue("layout-md"), + "layout-lg": getSpaceValue("layout-lg"), + "layout-xl": getSpaceValue("layout-xl"), + "layout-xxl": getSpaceValue("layout-xxl"), + "layout-xxxl": getSpaceValue("layout-xxxl"), +}; diff --git a/src/theme/spacing/types.ts b/src/theme/spacing/types.ts new file mode 100644 index 000000000..70c1df341 --- /dev/null +++ b/src/theme/spacing/types.ts @@ -0,0 +1,30 @@ +import { SpacingScheme } from "../types"; + +export type SpacingSetType = { + "spacing-0": string; + "spacing-4": string; + "spacing-8": string; + "spacing-12": string; + "spacing-16": string; + "spacing-20": string; + "spacing-24": string; + "spacing-32": string; + "spacing-40": string; + "spacing-48": string; + "spacing-64": string; + "spacing-72": string; + + "layout-xs": string; + "layout-sm": string; + "layout-md": string; + "layout-lg": string; + "layout-xl": string; + "layout-xxl": string; + "layout-xxxl": string; +}; + +export type SpacingSetOptions = Partial; + +export type SpacingCollectionsMap = { + [key in SpacingScheme]: SpacingSetType; +}; diff --git a/src/theme/types.ts b/src/theme/types.ts index 3bdbc546f..36b6d66df 100644 --- a/src/theme/types.ts +++ b/src/theme/types.ts @@ -4,6 +4,8 @@ import { TypographySetOptions } from "./typography/types"; import { FontSetOptions } from "./font/types"; import { AnimationSetOptions } from "./animation/types"; import { BorderSetOptions } from "./border/types"; +import { SpacingSetOptions } from "./spacing/types"; +import { RadiusSetSetOptions } from "./radius/types"; export type { PrimitiveColourSet, @@ -22,6 +24,10 @@ export type { AnimationSet, AnimationSetOptions } from "./animation/types"; export type { BorderSet, BorderSetOptions } from "./border/types"; +export type { RadiusSet, RadiusSetSetOptions } from "./radius/types"; + +export type { SpacingSetType, SpacingSetOptions } from "./spacing/types"; + export type ColourScheme = | "lifesg" | "bookingsg" @@ -32,13 +38,17 @@ export type ColourScheme = export type FontScheme = "lifesg" | "bookingsg" | "rbs" | "mylegacy" | "ccube"; export type AnimationScheme = "lifesg"; export type BorderScheme = "lifesg"; +export type SpacingScheme = "lifesg"; +export type RadiusScheme = "lifesg"; export interface ThemeSpecOptions { primitiveColour?: PrimitiveColourSetOptions | undefined; semanticColour?: SemanticColourSetOptions | undefined; font?: FontSetOptions | undefined; animation?: AnimationSetOptions | undefined; + spacing?: SpacingSetOptions | undefined; border?: BorderSetOptions | undefined; + radius?: RadiusSetSetOptions | undefined; typography?: TypographySetOptions | undefined; } @@ -47,6 +57,8 @@ export interface ThemeSpec { fontScheme: FontScheme; animationScheme: AnimationScheme; borderScheme: BorderScheme; + spacingScheme?: SpacingScheme | undefined; + radiusScheme?: RadiusScheme; overrides?: ThemeSpecOptions | undefined; } diff --git a/tests/theme/theme-radius.spec.tsx b/tests/theme/theme-radius.spec.tsx new file mode 100644 index 000000000..ff0c6cb92 --- /dev/null +++ b/tests/theme/theme-radius.spec.tsx @@ -0,0 +1,96 @@ +import { render } from "@testing-library/react"; +import "jest-styled-components"; +import styled, { ThemeProvider } from "styled-components"; +import { ThemeSpec } from "../../src/theme/types"; +import { Radius } from "../../src"; + +const RadiusTestComponent = styled.div` + border-radius: ${Radius.sm}; +`; + +describe("Radius Theming Test", () => { + it("should apply correct border-radius based on the theme", () => { + const mockTheme: ThemeSpec = { + colourScheme: "lifesg", + fontScheme: "lifesg", + radiusScheme: "lifesg", + }; + + const radiusValue = "4px"; + + const { container } = render( + + + + ); + + expect(container.firstChild).toHaveStyleRule( + "border-radius", + radiusValue + ); + }); + + it("should apply correct border-radius when overriding radius token", () => { + const overrideTheme: ThemeSpec = { + colourScheme: "lifesg", + fontScheme: "lifesg", + radiusScheme: "lifesg", + overrides: { + radius: { + sm: "6px", + }, + }, + }; + + const radiusValue = "6px"; + + const { container } = render( + + + + ); + + expect(container.firstChild).toHaveStyleRule( + "border-radius", + radiusValue + ); + }); + + it("should apply correct border-radius when overriding multiple radius tokens", () => { + const RadiusTestComponent2 = styled.div` + border-radius: ${Radius.sm}; + line-height: ${Radius.md}; + `; + + const overrideTheme: ThemeSpec = { + colourScheme: "lifesg", + fontScheme: "lifesg", + radiusScheme: "lifesg", + overrides: { + radius: { + sm: "6px", + md: "10px", + }, + }, + }; + + const radiusValue = "6px"; + const radiusValue2 = "10px"; + + const { container } = render( + + + + ); + + expect(container.firstChild).toHaveStyleRule( + "border-radius", + radiusValue + ); + + expect(container.firstChild).toHaveStyleRule( + "line-height", + radiusValue2 + ); + }); +}); diff --git a/tests/theme/theme-spacing.spec.tsx b/tests/theme/theme-spacing.spec.tsx new file mode 100644 index 000000000..224c9f9e1 --- /dev/null +++ b/tests/theme/theme-spacing.spec.tsx @@ -0,0 +1,83 @@ +import { render } from "@testing-library/react"; +import "jest-styled-components"; +import styled, { ThemeProvider } from "styled-components"; +import { ThemeSpec } from "../../src/theme/types"; +import { Spacing } from "../../src"; + +const SpacingTestComponent = styled.div` + margin: ${Spacing["spacing-16"]}; + padding: ${Spacing["layout-lg"]}; +`; + +describe("Spacing Themeing Test", () => { + it("should apply correct spacing based on the theme", () => { + const mockTheme: ThemeSpec = { + colourScheme: "lifesg", + fontScheme: "lifesg", + spacingScheme: "lifesg", + }; + + const marginValue = "1rem"; + const paddingValue = "32px"; + + const { container } = render( + + + + ); + + expect(container.firstChild).toHaveStyleRule("margin", marginValue); + expect(container.firstChild).toHaveStyleRule("padding", paddingValue); + }); + + it("should apply correct spacing when overriding spacing token", () => { + const overrideTheme: ThemeSpec = { + colourScheme: "lifesg", + fontScheme: "lifesg", + spacingScheme: "lifesg", + overrides: { + spacing: { + "spacing-16": "2rem", + }, + }, + }; + + const marginValue = "2rem"; + const paddingValue = "32px"; + + const { container } = render( + + + + ); + + expect(container.firstChild).toHaveStyleRule("margin", marginValue); + expect(container.firstChild).toHaveStyleRule("padding", paddingValue); + }); + + it("should apply correct spacing when overriding spacing token", () => { + const overrideTheme: ThemeSpec = { + colourScheme: "lifesg", + fontScheme: "lifesg", + spacingScheme: "lifesg", + overrides: { + spacing: { + "spacing-16": "3rem", + "layout-lg": "40px", + }, + }, + }; + + const marginValue = "3rem"; + const paddingValue = "40px"; + + const { container } = render( + + + + ); + + expect(container.firstChild).toHaveStyleRule("margin", marginValue); + expect(container.firstChild).toHaveStyleRule("padding", paddingValue); + }); +}); From c0d2b35ce7af60104555c6351ad72e8e1ad112ca Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Wed, 11 Sep 2024 09:49:25 +0800 Subject: [PATCH 2/9] [CCUBE-1535][MAHI]remove unneccasary files and added fix for test script for theme --- tests/theme/theme-radius.spec.tsx | 6 ++++++ tests/theme/theme-spacing.spec.tsx | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/tests/theme/theme-radius.spec.tsx b/tests/theme/theme-radius.spec.tsx index ff0c6cb92..f6de7553f 100644 --- a/tests/theme/theme-radius.spec.tsx +++ b/tests/theme/theme-radius.spec.tsx @@ -13,6 +13,8 @@ describe("Radius Theming Test", () => { const mockTheme: ThemeSpec = { colourScheme: "lifesg", fontScheme: "lifesg", + animationScheme: "lifesg", + borderScheme: "lifesg", radiusScheme: "lifesg", }; @@ -34,6 +36,8 @@ describe("Radius Theming Test", () => { const overrideTheme: ThemeSpec = { colourScheme: "lifesg", fontScheme: "lifesg", + animationScheme: "lifesg", + borderScheme: "lifesg", radiusScheme: "lifesg", overrides: { radius: { @@ -65,6 +69,8 @@ describe("Radius Theming Test", () => { const overrideTheme: ThemeSpec = { colourScheme: "lifesg", fontScheme: "lifesg", + animationScheme: "lifesg", + borderScheme: "lifesg", radiusScheme: "lifesg", overrides: { radius: { diff --git a/tests/theme/theme-spacing.spec.tsx b/tests/theme/theme-spacing.spec.tsx index 224c9f9e1..fbf01dcb8 100644 --- a/tests/theme/theme-spacing.spec.tsx +++ b/tests/theme/theme-spacing.spec.tsx @@ -14,6 +14,8 @@ describe("Spacing Themeing Test", () => { const mockTheme: ThemeSpec = { colourScheme: "lifesg", fontScheme: "lifesg", + animationScheme: "lifesg", + borderScheme: "lifesg", spacingScheme: "lifesg", }; @@ -34,6 +36,8 @@ describe("Spacing Themeing Test", () => { const overrideTheme: ThemeSpec = { colourScheme: "lifesg", fontScheme: "lifesg", + animationScheme: "lifesg", + borderScheme: "lifesg", spacingScheme: "lifesg", overrides: { spacing: { @@ -59,6 +63,8 @@ describe("Spacing Themeing Test", () => { const overrideTheme: ThemeSpec = { colourScheme: "lifesg", fontScheme: "lifesg", + animationScheme: "lifesg", + borderScheme: "lifesg", spacingScheme: "lifesg", overrides: { spacing: { From 409a2cb9e2c8dfc65172ff98feba2a15a4c0d8b1 Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Wed, 11 Sep 2024 11:19:08 +0800 Subject: [PATCH 3/9] [CCUBE-1535][MAHI]Make radius and border scheme compulsory and fix up some naming convention --- src/theme/index.ts | 20 +++++--- src/theme/radius/theme-helper.ts | 16 +++---- src/theme/radius/types.ts | 2 +- src/theme/spacing/specs/lifesg-spacing-set.ts | 4 +- src/theme/spacing/theme-helper.ts | 46 +++++++++---------- src/theme/spacing/types.ts | 6 +-- src/theme/types.ts | 18 +++++--- tests/theme/theme-animation.spec.tsx | 4 ++ tests/theme/theme-border.spec.tsx | 6 +++ tests/theme/theme-colour.spec.tsx | 6 +++ tests/theme/theme-font.spec.tsx | 6 +++ tests/theme/theme-radius.spec.tsx | 3 ++ tests/theme/theme-spacing.spec.tsx | 3 ++ 13 files changed, 91 insertions(+), 49 deletions(-) diff --git a/src/theme/index.ts b/src/theme/index.ts index 8827151ef..6e4c1b4d8 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -3,8 +3,8 @@ import { BorderValues } from "./border/theme-helper"; import { PrimitiveColour } from "./colour-primitive/theme-helper"; import { ColourSemantic } from "./colour-semantic/theme-helper"; import { FontValues } from "./font/theme-helper"; -import { RadiusSetValue } from "./radius/theme-helper"; -import { SpacingSetValue } from "./spacing/theme-helper"; +import { RadiusValues } from "./radius/theme-helper"; +import { SpacingValues } from "./spacing/theme-helper"; import { ThemeSpec } from "./types"; import { TypographyValues } from "./typography/theme-helper"; @@ -21,17 +21,17 @@ export const Animation = AnimationValues; export const Border = BorderValues; -export const BorderSet = BorderValues; +export const Spacing = SpacingValues; -export const Spacing = SpacingSetValue; - -export const Radius = RadiusSetValue; +export const Radius = RadiusValues; export const LifeSGTheme: ThemeSpec = { colourScheme: "lifesg", fontScheme: "lifesg", animationScheme: "lifesg", borderScheme: "lifesg", + spacingScheme: "lifesg", + radiusScheme: "lifesg", }; export const BookingSGTheme: ThemeSpec = { @@ -39,6 +39,8 @@ export const BookingSGTheme: ThemeSpec = { fontScheme: "bookingsg", animationScheme: "lifesg", borderScheme: "lifesg", + spacingScheme: "lifesg", + radiusScheme: "lifesg", }; export const CcubeTheme: ThemeSpec = { @@ -46,6 +48,8 @@ export const CcubeTheme: ThemeSpec = { fontScheme: "ccube", animationScheme: "lifesg", borderScheme: "lifesg", + spacingScheme: "lifesg", + radiusScheme: "lifesg", }; export const MyLegacyTheme: ThemeSpec = { @@ -53,6 +57,8 @@ export const MyLegacyTheme: ThemeSpec = { fontScheme: "mylegacy", animationScheme: "lifesg", borderScheme: "lifesg", + spacingScheme: "lifesg", + radiusScheme: "lifesg", }; export const RBSTheme: ThemeSpec = { @@ -60,4 +66,6 @@ export const RBSTheme: ThemeSpec = { fontScheme: "rbs", animationScheme: "lifesg", borderScheme: "lifesg", + spacingScheme: "lifesg", + radiusScheme: "lifesg", }; diff --git a/src/theme/radius/theme-helper.ts b/src/theme/radius/theme-helper.ts index 3a329eb50..97a337518 100644 --- a/src/theme/radius/theme-helper.ts +++ b/src/theme/radius/theme-helper.ts @@ -10,7 +10,7 @@ const RadiusSpec: ThemeCollectionSpec = { defaultValue: "lifesg", }; -export const getSpaceValue = (key: keyof RadiusSet) => { +export const getSpace = (key: keyof RadiusSet) => { return (props: StyledComponentProps): string => { const theme = props.theme; const spacingset: RadiusSet = getCollection( @@ -26,11 +26,11 @@ export const getSpaceValue = (key: keyof RadiusSet) => { }; }; -export const RadiusSetValue = { - none: getSpaceValue("none"), - xs: getSpaceValue("xs"), - sm: getSpaceValue("sm"), - md: getSpaceValue("md"), - lg: getSpaceValue("lg"), - full: getSpaceValue("full"), +export const RadiusValues = { + none: getSpace("none"), + xs: getSpace("xs"), + sm: getSpace("sm"), + md: getSpace("md"), + lg: getSpace("lg"), + full: getSpace("full"), }; diff --git a/src/theme/radius/types.ts b/src/theme/radius/types.ts index 960a79751..f780e69d4 100644 --- a/src/theme/radius/types.ts +++ b/src/theme/radius/types.ts @@ -9,7 +9,7 @@ export type RadiusSet = { full: string; }; -export type RadiusSetSetOptions = Partial; +export type RadiusSetOptions = Partial; export type RadiusCollectionsMap = { [key in RadiusScheme]: RadiusSet; diff --git a/src/theme/spacing/specs/lifesg-spacing-set.ts b/src/theme/spacing/specs/lifesg-spacing-set.ts index fd04f59cd..7ff73ff5c 100644 --- a/src/theme/spacing/specs/lifesg-spacing-set.ts +++ b/src/theme/spacing/specs/lifesg-spacing-set.ts @@ -1,6 +1,6 @@ -import { SpacingSetType } from "../types"; +import { SpacingSet } from "../types"; -export const LifeSgSpacingSet: SpacingSetType = { +export const LifeSgSpacingSet: SpacingSet = { "spacing-0": "0rem", "spacing-4": "0.25rem", "spacing-8": "0.5rem", diff --git a/src/theme/spacing/theme-helper.ts b/src/theme/spacing/theme-helper.ts index 89e3ee473..a1379409a 100644 --- a/src/theme/spacing/theme-helper.ts +++ b/src/theme/spacing/theme-helper.ts @@ -1,7 +1,7 @@ import { StyledComponentProps, getCollection, getValue } from "../helpers"; import { SpacingScheme, ThemeCollectionSpec } from "../types"; import { LifeSgSpacingSet } from "./specs/lifesg-spacing-set"; -import { SpacingCollectionsMap, SpacingSetType } from "./types"; +import { SpacingCollectionsMap, SpacingSet } from "./types"; const SpacingSpec: ThemeCollectionSpec = { collections: { @@ -10,10 +10,10 @@ const SpacingSpec: ThemeCollectionSpec = { defaultValue: "lifesg", }; -export const getSpaceValue = (key: keyof SpacingSetType) => { +export const getSpace = (key: keyof SpacingSet) => { return (props: StyledComponentProps): string => { const theme = props.theme; - const spacingset: SpacingSetType = getCollection( + const spacingset: SpacingSet = getCollection( SpacingSpec, theme.spacingScheme ); @@ -26,25 +26,25 @@ export const getSpaceValue = (key: keyof SpacingSetType) => { }; }; -export const SpacingSetValue = { - "spacing-0": getSpaceValue("spacing-0"), - "spacing-4": getSpaceValue("spacing-4"), - "spacing-8": getSpaceValue("spacing-8"), - "spacing-12": getSpaceValue("spacing-12"), - "spacing-16": getSpaceValue("spacing-16"), - "spacing-20": getSpaceValue("spacing-20"), - "spacing-24": getSpaceValue("spacing-24"), - "spacing-32": getSpaceValue("spacing-32"), - "spacing-40": getSpaceValue("spacing-40"), - "spacing-48": getSpaceValue("spacing-48"), - "spacing-64": getSpaceValue("spacing-64"), - "spacing-72": getSpaceValue("spacing-72"), +export const SpacingValues = { + "spacing-0": getSpace("spacing-0"), + "spacing-4": getSpace("spacing-4"), + "spacing-8": getSpace("spacing-8"), + "spacing-12": getSpace("spacing-12"), + "spacing-16": getSpace("spacing-16"), + "spacing-20": getSpace("spacing-20"), + "spacing-24": getSpace("spacing-24"), + "spacing-32": getSpace("spacing-32"), + "spacing-40": getSpace("spacing-40"), + "spacing-48": getSpace("spacing-48"), + "spacing-64": getSpace("spacing-64"), + "spacing-72": getSpace("spacing-72"), - "layout-xs": getSpaceValue("layout-xs"), - "layout-sm": getSpaceValue("layout-sm"), - "layout-md": getSpaceValue("layout-md"), - "layout-lg": getSpaceValue("layout-lg"), - "layout-xl": getSpaceValue("layout-xl"), - "layout-xxl": getSpaceValue("layout-xxl"), - "layout-xxxl": getSpaceValue("layout-xxxl"), + "layout-xs": getSpace("layout-xs"), + "layout-sm": getSpace("layout-sm"), + "layout-md": getSpace("layout-md"), + "layout-lg": getSpace("layout-lg"), + "layout-xl": getSpace("layout-xl"), + "layout-xxl": getSpace("layout-xxl"), + "layout-xxxl": getSpace("layout-xxxl"), }; diff --git a/src/theme/spacing/types.ts b/src/theme/spacing/types.ts index 70c1df341..e158ca63f 100644 --- a/src/theme/spacing/types.ts +++ b/src/theme/spacing/types.ts @@ -1,6 +1,6 @@ import { SpacingScheme } from "../types"; -export type SpacingSetType = { +export type SpacingSet = { "spacing-0": string; "spacing-4": string; "spacing-8": string; @@ -23,8 +23,8 @@ export type SpacingSetType = { "layout-xxxl": string; }; -export type SpacingSetOptions = Partial; +export type SpacingSetOptions = Partial; export type SpacingCollectionsMap = { - [key in SpacingScheme]: SpacingSetType; + [key in SpacingScheme]: SpacingSet; }; diff --git a/src/theme/types.ts b/src/theme/types.ts index 36b6d66df..e7c14d9dc 100644 --- a/src/theme/types.ts +++ b/src/theme/types.ts @@ -5,7 +5,7 @@ import { FontSetOptions } from "./font/types"; import { AnimationSetOptions } from "./animation/types"; import { BorderSetOptions } from "./border/types"; import { SpacingSetOptions } from "./spacing/types"; -import { RadiusSetSetOptions } from "./radius/types"; +import { RadiusSetOptions } from "./radius/types"; export type { PrimitiveColourSet, @@ -24,9 +24,15 @@ export type { AnimationSet, AnimationSetOptions } from "./animation/types"; export type { BorderSet, BorderSetOptions } from "./border/types"; -export type { RadiusSet, RadiusSetSetOptions } from "./radius/types"; +export type { + RadiusSet, + RadiusSetOptions as RadiusSetSetOptions, +} from "./radius/types"; -export type { SpacingSetType, SpacingSetOptions } from "./spacing/types"; +export type { + SpacingSet as SpacingSetType, + SpacingSetOptions, +} from "./spacing/types"; export type ColourScheme = | "lifesg" @@ -48,7 +54,7 @@ export interface ThemeSpecOptions { animation?: AnimationSetOptions | undefined; spacing?: SpacingSetOptions | undefined; border?: BorderSetOptions | undefined; - radius?: RadiusSetSetOptions | undefined; + radius?: RadiusSetOptions | undefined; typography?: TypographySetOptions | undefined; } @@ -57,8 +63,8 @@ export interface ThemeSpec { fontScheme: FontScheme; animationScheme: AnimationScheme; borderScheme: BorderScheme; - spacingScheme?: SpacingScheme | undefined; - radiusScheme?: RadiusScheme; + spacingScheme: SpacingScheme; + radiusScheme: RadiusScheme; overrides?: ThemeSpecOptions | undefined; } diff --git a/tests/theme/theme-animation.spec.tsx b/tests/theme/theme-animation.spec.tsx index 05a766394..2c9d38663 100644 --- a/tests/theme/theme-animation.spec.tsx +++ b/tests/theme/theme-animation.spec.tsx @@ -16,6 +16,8 @@ describe("StyledAnimationTest", () => { fontScheme: "lifesg", animationScheme: "lifesg", borderScheme: "lifesg", + spacingScheme: "lifesg", + radiusScheme: "lifesg", }; const duration = "500ms"; @@ -39,6 +41,8 @@ describe("StyledAnimationTest", () => { fontScheme: "lifesg", animationScheme: "lifesg", borderScheme: "lifesg", + spacingScheme: "lifesg", + radiusScheme: "lifesg", overrides: { animation: { "duration-500": "700ms", diff --git a/tests/theme/theme-border.spec.tsx b/tests/theme/theme-border.spec.tsx index 3f0c84667..613d6251c 100644 --- a/tests/theme/theme-border.spec.tsx +++ b/tests/theme/theme-border.spec.tsx @@ -16,6 +16,8 @@ describe("Border Theming Test", () => { fontScheme: "lifesg", animationScheme: "lifesg", borderScheme: "lifesg", + spacingScheme: "lifesg", + radiusScheme: "lifesg", }; // Constants for border-top (dashed-default) @@ -64,6 +66,8 @@ describe("Border Theming Test", () => { fontScheme: "lifesg", animationScheme: "lifesg", borderScheme: "lifesg", + spacingScheme: "lifesg", + radiusScheme: "lifesg", }; const dashThickness = "2px"; @@ -104,6 +108,8 @@ describe("Border Theming Test", () => { fontScheme: "lifesg", borderScheme: "lifesg", animationScheme: "lifesg", + spacingScheme: "lifesg", + radiusScheme: "lifesg", overrides: { border: { "width-010": 3, diff --git a/tests/theme/theme-colour.spec.tsx b/tests/theme/theme-colour.spec.tsx index 13adc68a5..f6df87457 100644 --- a/tests/theme/theme-colour.spec.tsx +++ b/tests/theme/theme-colour.spec.tsx @@ -16,6 +16,8 @@ describe("Colour Themeing Test", () => { fontScheme: "lifesg", animationScheme: "lifesg", borderScheme: "lifesg", + spacingScheme: "lifesg", + radiusScheme: "lifesg", }; const bgColor = "#1A122C"; @@ -40,6 +42,8 @@ describe("Colour Themeing Test", () => { fontScheme: "lifesg", animationScheme: "lifesg", borderScheme: "lifesg", + spacingScheme: "lifesg", + radiusScheme: "lifesg", overrides: { primitiveColour: { "primary-10": "#fefefe", @@ -69,6 +73,8 @@ describe("Colour Themeing Test", () => { fontScheme: "lifesg", animationScheme: "lifesg", borderScheme: "lifesg", + spacingScheme: "lifesg", + radiusScheme: "lifesg", overrides: { semanticColour: { "border-primary": "#fefefe", diff --git a/tests/theme/theme-font.spec.tsx b/tests/theme/theme-font.spec.tsx index e73f1a2cb..f47b252bd 100644 --- a/tests/theme/theme-font.spec.tsx +++ b/tests/theme/theme-font.spec.tsx @@ -20,6 +20,8 @@ describe("StyledTypographyTest", () => { fontScheme: "lifesg", animationScheme: "lifesg", borderScheme: "lifesg", + spacingScheme: "lifesg", + radiusScheme: "lifesg", }; const fontSize = "3rem"; @@ -48,6 +50,8 @@ describe("StyledTypographyTest", () => { fontScheme: "lifesg", animationScheme: "lifesg", borderScheme: "lifesg", + spacingScheme: "lifesg", + radiusScheme: "lifesg", overrides: { typography: { "header-xxl-bold": { @@ -86,6 +90,8 @@ describe("StyledTypographyTest", () => { fontScheme: "lifesg", animationScheme: "lifesg", borderScheme: "lifesg", + spacingScheme: "lifesg", + radiusScheme: "lifesg", }; const fontSize = "1.125rem"; diff --git a/tests/theme/theme-radius.spec.tsx b/tests/theme/theme-radius.spec.tsx index f6de7553f..5fe570838 100644 --- a/tests/theme/theme-radius.spec.tsx +++ b/tests/theme/theme-radius.spec.tsx @@ -15,6 +15,7 @@ describe("Radius Theming Test", () => { fontScheme: "lifesg", animationScheme: "lifesg", borderScheme: "lifesg", + spacingScheme: "lifesg", radiusScheme: "lifesg", }; @@ -38,6 +39,7 @@ describe("Radius Theming Test", () => { fontScheme: "lifesg", animationScheme: "lifesg", borderScheme: "lifesg", + spacingScheme: "lifesg", radiusScheme: "lifesg", overrides: { radius: { @@ -71,6 +73,7 @@ describe("Radius Theming Test", () => { fontScheme: "lifesg", animationScheme: "lifesg", borderScheme: "lifesg", + spacingScheme: "lifesg", radiusScheme: "lifesg", overrides: { radius: { diff --git a/tests/theme/theme-spacing.spec.tsx b/tests/theme/theme-spacing.spec.tsx index fbf01dcb8..c53d2efc7 100644 --- a/tests/theme/theme-spacing.spec.tsx +++ b/tests/theme/theme-spacing.spec.tsx @@ -17,6 +17,7 @@ describe("Spacing Themeing Test", () => { animationScheme: "lifesg", borderScheme: "lifesg", spacingScheme: "lifesg", + radiusScheme: "lifesg", }; const marginValue = "1rem"; @@ -39,6 +40,7 @@ describe("Spacing Themeing Test", () => { animationScheme: "lifesg", borderScheme: "lifesg", spacingScheme: "lifesg", + radiusScheme: "lifesg", overrides: { spacing: { "spacing-16": "2rem", @@ -66,6 +68,7 @@ describe("Spacing Themeing Test", () => { animationScheme: "lifesg", borderScheme: "lifesg", spacingScheme: "lifesg", + radiusScheme: "lifesg", overrides: { spacing: { "spacing-16": "3rem", From 3e4177ede7c0ae1026cb22a7a358a32da5a0641d Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Wed, 11 Sep 2024 11:48:49 +0800 Subject: [PATCH 4/9] [CCUBE-1547][MAHI]Set up breakpoint tokens and mediaquery helper function --- .../breakpoint/specs/lifesg-breakpoint-set.ts | 41 ++++++++++ src/theme/breakpoint/theme-helper.ts | 74 +++++++++++++++++++ src/theme/breakpoint/types.ts | 45 +++++++++++ src/theme/index.ts | 8 ++ src/theme/mediaquery/mediaquery-helper.ts | 42 +++++++++++ src/theme/types.ts | 6 ++ tests/theme/theme-animation.spec.tsx | 2 + tests/theme/theme-border.spec.tsx | 3 + tests/theme/theme-breakpoint.spec.tsx | 54 ++++++++++++++ tests/theme/theme-colour.spec.tsx | 3 + tests/theme/theme-font.spec.tsx | 3 + tests/theme/theme-media.spec.tsx | 59 +++++++++++++++ tests/theme/theme-radius.spec.tsx | 3 + tests/theme/theme-spacing.spec.tsx | 3 + 14 files changed, 346 insertions(+) create mode 100644 src/theme/breakpoint/specs/lifesg-breakpoint-set.ts create mode 100644 src/theme/breakpoint/theme-helper.ts create mode 100644 src/theme/breakpoint/types.ts create mode 100644 src/theme/mediaquery/mediaquery-helper.ts create mode 100644 tests/theme/theme-breakpoint.spec.tsx create mode 100644 tests/theme/theme-media.spec.tsx diff --git a/src/theme/breakpoint/specs/lifesg-breakpoint-set.ts b/src/theme/breakpoint/specs/lifesg-breakpoint-set.ts new file mode 100644 index 000000000..b4c244765 --- /dev/null +++ b/src/theme/breakpoint/specs/lifesg-breakpoint-set.ts @@ -0,0 +1,41 @@ +import { MediaWidth } from "../types"; + +export const LifeSgMediaWidths: MediaWidth = { + "xxs-min": 0, + "xxs-max": 320, + "xs-min": 321, + "xs-max": 375, + "sm-min": 376, + "sm-max": 420, + "md-min": 421, + "md-max": 767, + "lg-min": 768, + "lg-max": 1023, + "xl-min": 1024, + "xl-max": 1440, + "xxl-min": 1441, + + "xxs-column": 8, + "xs-column": 8, + "sm-column": 8, + "md-column": 8, + "lg-column": 12, + "xl-column": 12, + "xxl-column": 12, + + "xxs-gutter": 16, + "xs-gutter": 16, + "sm-gutter": 16, + "md-gutter": 16, + "lg-gutter": 32, + "xl-gutter": 32, + "xxl-gutter": 32, + + "xxs-margin": 24, + "xs-margin": 24, + "sm-margin": 24, + "md-margin": 24, + "lg-margin": 48, + "xl-margin": 48, + "xxl-margin": 48, +}; diff --git a/src/theme/breakpoint/theme-helper.ts b/src/theme/breakpoint/theme-helper.ts new file mode 100644 index 000000000..67a12f87d --- /dev/null +++ b/src/theme/breakpoint/theme-helper.ts @@ -0,0 +1,74 @@ +import { StyledComponentProps, getCollection, getValue } from "../helpers"; +import { BreakpointScheme, ThemeCollectionSpec } from "../types"; +import { LifeSgMediaWidths } from "./specs/lifesg-breakpoint-set"; +import { BreakPointCollectionsMap, MediaWidth } from "./types"; + +const BreakpointSpec: ThemeCollectionSpec< + BreakPointCollectionsMap, + BreakpointScheme +> = { + collections: { + lifesg: LifeSgMediaWidths, + }, + defaultValue: "lifesg", +}; + +export const getBreakpoint = (key: keyof MediaWidth) => { + return (props: StyledComponentProps): number => { + const theme = props.theme; + const breakpointSet: MediaWidth = getCollection( + BreakpointSpec, + theme?.breakpointScheme + ); + + let value: number | undefined; + + if (theme?.overrides?.breakpoint) { + value = getValue(breakpointSet, key, theme.overrides.breakpoint); + } else { + value = breakpointSet[key]; + } + + return value; + }; +}; + +export const BreakpointValues = { + "xxs-min": getBreakpoint("xxs-min"), + "xxs-max": getBreakpoint("xxs-max"), + "xs-min": getBreakpoint("xs-min"), + "xs-max": getBreakpoint("xs-max"), + "sm-min": getBreakpoint("sm-min"), + "sm-max": getBreakpoint("sm-max"), + "md-min": getBreakpoint("md-min"), + "md-max": getBreakpoint("md-max"), + "lg-min": getBreakpoint("lg-min"), + "lg-max": getBreakpoint("lg-max"), + "xl-min": getBreakpoint("xl-min"), + "xl-max": getBreakpoint("xl-max"), + "xxl-min": getBreakpoint("xxl-min"), + + "xxs-column": getBreakpoint("xxs-column"), + "xs-column": getBreakpoint("xs-column"), + "sm-column": getBreakpoint("sm-column"), + "md-column": getBreakpoint("md-column"), + "lg-column": getBreakpoint("lg-column"), + "xl-column": getBreakpoint("xl-column"), + "xxl-column": getBreakpoint("xxl-column"), + + "xxs-gutter": getBreakpoint("xxs-gutter"), + "xs-gutter": getBreakpoint("xs-gutter"), + "sm-gutter": getBreakpoint("sm-gutter"), + "md-gutter": getBreakpoint("md-gutter"), + "lg-gutter": getBreakpoint("lg-gutter"), + "xl-gutter": getBreakpoint("xl-gutter"), + "xxl-gutter": getBreakpoint("xxl-gutter"), + + "xxs-margin": getBreakpoint("xxs-margin"), + "xs-margin": getBreakpoint("xs-margin"), + "sm-margin": getBreakpoint("sm-margin"), + "md-margin": getBreakpoint("md-margin"), + "lg-margin": getBreakpoint("lg-margin"), + "xl-margin": getBreakpoint("xl-margin"), + "xxl-margin": getBreakpoint("xxl-margin"), +}; diff --git a/src/theme/breakpoint/types.ts b/src/theme/breakpoint/types.ts new file mode 100644 index 000000000..a784e6dda --- /dev/null +++ b/src/theme/breakpoint/types.ts @@ -0,0 +1,45 @@ +import { StyledComponentProps } from "../helpers"; +import { BreakpointScheme } from "../types"; + +export interface MediaWidth { + "xxs-min": number; + "xxs-max": number; + "xs-min": number; + "xs-max": number; + "sm-min": number; + "sm-max": number; + "md-min": number; + "md-max": number; + "lg-min": number; + "lg-max": number; + "xl-min": number; + "xl-max": number; + "xxl-min": number; + "xxs-column": number; + "xs-column": number; + "sm-column": number; + "md-column": number; + "lg-column": number; + "xl-column": number; + "xxl-column": number; + "xxs-gutter": number; + "xs-gutter": number; + "sm-gutter": number; + "md-gutter": number; + "lg-gutter": number; + "xl-gutter": number; + "xxl-gutter": number; + "xxs-margin": number; + "xs-margin": number; + "sm-margin": number; + "md-margin": number; + "lg-margin": number; + "xl-margin": number; + "xxl-margin": number; +} + +export type BreakPointCollectionsMap = { + [key in BreakpointScheme]: MediaWidth; +}; + +export type BreakPointSetOptions = Partial; diff --git a/src/theme/index.ts b/src/theme/index.ts index 6e4c1b4d8..18f232dab 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -1,3 +1,4 @@ +import { BreakpointValues } from "./breakpoint/theme-helper"; import { AnimationValues } from "./animation/theme-helper"; import { BorderValues } from "./border/theme-helper"; import { PrimitiveColour } from "./colour-primitive/theme-helper"; @@ -25,6 +26,8 @@ export const Spacing = SpacingValues; export const Radius = RadiusValues; +export const Breakpoint = BreakpointValues; + export const LifeSGTheme: ThemeSpec = { colourScheme: "lifesg", fontScheme: "lifesg", @@ -32,6 +35,7 @@ export const LifeSGTheme: ThemeSpec = { borderScheme: "lifesg", spacingScheme: "lifesg", radiusScheme: "lifesg", + breakpointScheme: "lifesg", }; export const BookingSGTheme: ThemeSpec = { @@ -41,6 +45,7 @@ export const BookingSGTheme: ThemeSpec = { borderScheme: "lifesg", spacingScheme: "lifesg", radiusScheme: "lifesg", + breakpointScheme: "lifesg", }; export const CcubeTheme: ThemeSpec = { @@ -50,6 +55,7 @@ export const CcubeTheme: ThemeSpec = { borderScheme: "lifesg", spacingScheme: "lifesg", radiusScheme: "lifesg", + breakpointScheme: "lifesg", }; export const MyLegacyTheme: ThemeSpec = { @@ -59,6 +65,7 @@ export const MyLegacyTheme: ThemeSpec = { borderScheme: "lifesg", spacingScheme: "lifesg", radiusScheme: "lifesg", + breakpointScheme: "lifesg", }; export const RBSTheme: ThemeSpec = { @@ -68,4 +75,5 @@ export const RBSTheme: ThemeSpec = { borderScheme: "lifesg", spacingScheme: "lifesg", radiusScheme: "lifesg", + breakpointScheme: "lifesg", }; diff --git a/src/theme/mediaquery/mediaquery-helper.ts b/src/theme/mediaquery/mediaquery-helper.ts new file mode 100644 index 000000000..13cb190d9 --- /dev/null +++ b/src/theme/mediaquery/mediaquery-helper.ts @@ -0,0 +1,42 @@ +import { BreakpointValues } from "../breakpoint/theme-helper"; +import { StyledComponentProps } from "../helpers"; + +// Two separate types for max and min breakpoints +type MaxWidthBreakpoints = "xxs" | "xs" | "sm" | "md" | "lg" | "xl"; +type MinWidthBreakpoints = MaxWidthBreakpoints | "xxl"; + +const createMediaQueryFunction = ( + type: "max-width" | "min-width", + key: T +) => { + const mappedKey = type === "max-width" ? `${key}-max` : `${key}-min`; + const breakpointFunction = + BreakpointValues[mappedKey as keyof typeof BreakpointValues]; + + return (props: StyledComponentProps) => { + const value = breakpointFunction(props); + return `@media screen and (${type}: ${value}px)`; + }; +}; + +const getMediaQuerySpec = ( + type: "max-width" | "min-width" +): Record string> => { + // Conditional breakpoints for max and min widths + const breakpoints = ( + type === "max-width" + ? ["xxs", "xs", "sm", "md", "lg", "xl"] + : ["xxs", "xs", "sm", "md", "lg", "xl", "xxl"] + ) as T[]; + + return breakpoints.reduce((accumulator, key) => { + accumulator[key] = createMediaQueryFunction(type, key); + return accumulator; + }, {} as Record string>); +}; + +// Export with typing +export const MediaQuery = { + MaxWidth: getMediaQuerySpec("max-width"), + MinWidth: getMediaQuerySpec("min-width"), +}; diff --git a/src/theme/types.ts b/src/theme/types.ts index e7c14d9dc..b56024d44 100644 --- a/src/theme/types.ts +++ b/src/theme/types.ts @@ -6,6 +6,7 @@ import { AnimationSetOptions } from "./animation/types"; import { BorderSetOptions } from "./border/types"; import { SpacingSetOptions } from "./spacing/types"; import { RadiusSetOptions } from "./radius/types"; +import { BreakPointSetOptions } from "./breakpoint/types"; export type { PrimitiveColourSet, @@ -46,6 +47,7 @@ export type AnimationScheme = "lifesg"; export type BorderScheme = "lifesg"; export type SpacingScheme = "lifesg"; export type RadiusScheme = "lifesg"; +export type BreakpointScheme = "lifesg"; export interface ThemeSpecOptions { primitiveColour?: PrimitiveColourSetOptions | undefined; @@ -55,6 +57,7 @@ export interface ThemeSpecOptions { spacing?: SpacingSetOptions | undefined; border?: BorderSetOptions | undefined; radius?: RadiusSetOptions | undefined; + breakpoint?: BreakPointSetOptions | undefined; typography?: TypographySetOptions | undefined; } @@ -65,7 +68,10 @@ export interface ThemeSpec { borderScheme: BorderScheme; spacingScheme: SpacingScheme; radiusScheme: RadiusScheme; + breakpointScheme: BreakpointScheme; overrides?: ThemeSpecOptions | undefined; + + maxColumns?: any; } export interface ThemeCollectionSpec { diff --git a/tests/theme/theme-animation.spec.tsx b/tests/theme/theme-animation.spec.tsx index 2c9d38663..cdd2ee6d6 100644 --- a/tests/theme/theme-animation.spec.tsx +++ b/tests/theme/theme-animation.spec.tsx @@ -18,6 +18,7 @@ describe("StyledAnimationTest", () => { borderScheme: "lifesg", spacingScheme: "lifesg", radiusScheme: "lifesg", + breakpointScheme: "lifesg", }; const duration = "500ms"; @@ -43,6 +44,7 @@ describe("StyledAnimationTest", () => { borderScheme: "lifesg", spacingScheme: "lifesg", radiusScheme: "lifesg", + breakpointScheme: "lifesg", overrides: { animation: { "duration-500": "700ms", diff --git a/tests/theme/theme-border.spec.tsx b/tests/theme/theme-border.spec.tsx index 613d6251c..febfe6e2b 100644 --- a/tests/theme/theme-border.spec.tsx +++ b/tests/theme/theme-border.spec.tsx @@ -18,6 +18,7 @@ describe("Border Theming Test", () => { borderScheme: "lifesg", spacingScheme: "lifesg", radiusScheme: "lifesg", + breakpointScheme: "lifesg", }; // Constants for border-top (dashed-default) @@ -68,6 +69,7 @@ describe("Border Theming Test", () => { borderScheme: "lifesg", spacingScheme: "lifesg", radiusScheme: "lifesg", + breakpointScheme: "lifesg", }; const dashThickness = "2px"; @@ -110,6 +112,7 @@ describe("Border Theming Test", () => { animationScheme: "lifesg", spacingScheme: "lifesg", radiusScheme: "lifesg", + breakpointScheme: "lifesg", overrides: { border: { "width-010": 3, diff --git a/tests/theme/theme-breakpoint.spec.tsx b/tests/theme/theme-breakpoint.spec.tsx new file mode 100644 index 000000000..3a4542cc4 --- /dev/null +++ b/tests/theme/theme-breakpoint.spec.tsx @@ -0,0 +1,54 @@ +import { render } from "@testing-library/react"; +import "jest-styled-components"; +import styled, { ThemeProvider } from "styled-components"; +import { Breakpoint } from "../../src"; +import { ThemeSpec } from "../../src/theme/types"; + +const StyledComponentTest = styled.div` + background-color: red; + + @media (min-width: ${Breakpoint["xs-min"]}px) { + background-color: blue; + } + + @media (min-width: ${Breakpoint["xs-max"]}px) { + background-color: green; + } +`; + +describe("Media Width Breakpoints Test", () => { + const mockTheme: ThemeSpec = { + colourScheme: "lifesg", + fontScheme: "lifesg", + animationScheme: "lifesg", + borderScheme: "lifesg", + spacingScheme: "lifesg", + radiusScheme: "lifesg", + breakpointScheme: "lifesg", + }; + it("should apply correct styles based on media width", () => { + const { container } = render( + + + + ); + + expect(container.firstChild).toHaveStyleRule("background-color", "red"); + + expect(container.firstChild).toHaveStyleRule( + "background-color", + "blue", + { + media: `(min-width: 321px)`, + } + ); + + expect(container.firstChild).toHaveStyleRule( + "background-color", + "green", + { + media: `(min-width: 375px)`, + } + ); + }); +}); diff --git a/tests/theme/theme-colour.spec.tsx b/tests/theme/theme-colour.spec.tsx index f6df87457..1beca5d2c 100644 --- a/tests/theme/theme-colour.spec.tsx +++ b/tests/theme/theme-colour.spec.tsx @@ -18,6 +18,7 @@ describe("Colour Themeing Test", () => { borderScheme: "lifesg", spacingScheme: "lifesg", radiusScheme: "lifesg", + breakpointScheme: "lifesg", }; const bgColor = "#1A122C"; @@ -44,6 +45,7 @@ describe("Colour Themeing Test", () => { borderScheme: "lifesg", spacingScheme: "lifesg", radiusScheme: "lifesg", + breakpointScheme: "lifesg", overrides: { primitiveColour: { "primary-10": "#fefefe", @@ -75,6 +77,7 @@ describe("Colour Themeing Test", () => { borderScheme: "lifesg", spacingScheme: "lifesg", radiusScheme: "lifesg", + breakpointScheme: "lifesg", overrides: { semanticColour: { "border-primary": "#fefefe", diff --git a/tests/theme/theme-font.spec.tsx b/tests/theme/theme-font.spec.tsx index f47b252bd..15bc08cef 100644 --- a/tests/theme/theme-font.spec.tsx +++ b/tests/theme/theme-font.spec.tsx @@ -22,6 +22,7 @@ describe("StyledTypographyTest", () => { borderScheme: "lifesg", spacingScheme: "lifesg", radiusScheme: "lifesg", + breakpointScheme: "lifesg", }; const fontSize = "3rem"; @@ -52,6 +53,7 @@ describe("StyledTypographyTest", () => { borderScheme: "lifesg", spacingScheme: "lifesg", radiusScheme: "lifesg", + breakpointScheme: "lifesg", overrides: { typography: { "header-xxl-bold": { @@ -92,6 +94,7 @@ describe("StyledTypographyTest", () => { borderScheme: "lifesg", spacingScheme: "lifesg", radiusScheme: "lifesg", + breakpointScheme: "lifesg", }; const fontSize = "1.125rem"; diff --git a/tests/theme/theme-media.spec.tsx b/tests/theme/theme-media.spec.tsx new file mode 100644 index 000000000..be054c60a --- /dev/null +++ b/tests/theme/theme-media.spec.tsx @@ -0,0 +1,59 @@ +import styled, { ThemeProvider } from "styled-components"; +import { Breakpoint } from "../../src"; +import { MediaQuery } from "../../src/theme/mediaquery/mediaquery-helper"; +import { ThemeSpec } from "../../src/theme/types"; +import { render } from "@testing-library/react"; +import "jest-styled-components"; + +const StyledComponentTest = styled.div` + background-color: red; + + ${MediaQuery.MinWidth.xs} { + background-color: yellow; + } + + ${MediaQuery.MaxWidth.xs} { + background-color: purple; + } +`; +describe("MediaQuery Helper Function Test", () => { + const mockTheme: ThemeSpec = { + colourScheme: "lifesg", + fontScheme: "lifesg", + animationScheme: "lifesg", + borderScheme: "lifesg", + spacingScheme: "lifesg", + radiusScheme: "lifesg", + breakpointScheme: "lifesg", + }; + + const xsMin = "321px"; + const xsMax = "375px"; + const mdMin = "421px"; + const lgMin = "768px"; + + it("should apply correct styles based on media query spec", () => { + const { container } = render( + + + + ); + expect(container.firstChild).toHaveStyleRule("background-color", "red"); + + expect(container.firstChild).toHaveStyleRule( + "background-color", + "yellow", + { + media: `screen and (min-width: ${xsMin})`, + } + ); + + expect(container.firstChild).toHaveStyleRule( + "background-color", + "purple", + { + media: `screen and (max-width: ${xsMax})`, + } + ); + }); +}); diff --git a/tests/theme/theme-radius.spec.tsx b/tests/theme/theme-radius.spec.tsx index 5fe570838..1afce50bc 100644 --- a/tests/theme/theme-radius.spec.tsx +++ b/tests/theme/theme-radius.spec.tsx @@ -17,6 +17,7 @@ describe("Radius Theming Test", () => { borderScheme: "lifesg", spacingScheme: "lifesg", radiusScheme: "lifesg", + breakpointScheme: "lifesg", }; const radiusValue = "4px"; @@ -41,6 +42,7 @@ describe("Radius Theming Test", () => { borderScheme: "lifesg", spacingScheme: "lifesg", radiusScheme: "lifesg", + breakpointScheme: "lifesg", overrides: { radius: { sm: "6px", @@ -75,6 +77,7 @@ describe("Radius Theming Test", () => { borderScheme: "lifesg", spacingScheme: "lifesg", radiusScheme: "lifesg", + breakpointScheme: "lifesg", overrides: { radius: { sm: "6px", diff --git a/tests/theme/theme-spacing.spec.tsx b/tests/theme/theme-spacing.spec.tsx index c53d2efc7..f393abfca 100644 --- a/tests/theme/theme-spacing.spec.tsx +++ b/tests/theme/theme-spacing.spec.tsx @@ -18,6 +18,7 @@ describe("Spacing Themeing Test", () => { borderScheme: "lifesg", spacingScheme: "lifesg", radiusScheme: "lifesg", + breakpointScheme: "lifesg", }; const marginValue = "1rem"; @@ -41,6 +42,7 @@ describe("Spacing Themeing Test", () => { borderScheme: "lifesg", spacingScheme: "lifesg", radiusScheme: "lifesg", + breakpointScheme: "lifesg", overrides: { spacing: { "spacing-16": "2rem", @@ -69,6 +71,7 @@ describe("Spacing Themeing Test", () => { borderScheme: "lifesg", spacingScheme: "lifesg", radiusScheme: "lifesg", + breakpointScheme: "lifesg", overrides: { spacing: { "spacing-16": "3rem", From eaa1006d028bbfc910668d1139041e673ba493ec Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Fri, 13 Sep 2024 12:32:02 +0800 Subject: [PATCH 5/9] [CCUBE-1547][MAHI]Change typing to number for specs and adjust some naming convention and change spacing specs from rem to px --- .../breakpoint/specs/lifesg-breakpoint-set.ts | 4 +- src/theme/breakpoint/theme-helper.ts | 10 ++--- src/theme/breakpoint/types.ts | 6 +-- .../media-query-helper.ts} | 13 +++++-- src/theme/radius/specs/lifesg-radius-set.ts | 12 +++--- src/theme/radius/theme-helper.ts | 20 +++++----- src/theme/radius/types.ts | 12 +++--- src/theme/spacing/specs/lifesg-spacing-set.ts | 38 +++++++++---------- src/theme/spacing/theme-helper.ts | 4 +- src/theme/spacing/types.ts | 38 +++++++++---------- src/theme/types.ts | 10 +---- tests/theme/theme-media.spec.tsx | 2 +- tests/theme/theme-radius.spec.tsx | 6 +-- tests/theme/theme-spacing.spec.tsx | 12 +++--- 14 files changed, 93 insertions(+), 94 deletions(-) rename src/theme/{mediaquery/mediaquery-helper.ts => media-query/media-query-helper.ts} (83%) diff --git a/src/theme/breakpoint/specs/lifesg-breakpoint-set.ts b/src/theme/breakpoint/specs/lifesg-breakpoint-set.ts index b4c244765..c8fc0e6ad 100644 --- a/src/theme/breakpoint/specs/lifesg-breakpoint-set.ts +++ b/src/theme/breakpoint/specs/lifesg-breakpoint-set.ts @@ -1,6 +1,6 @@ -import { MediaWidth } from "../types"; +import { BreakpointSet } from "../types"; -export const LifeSgMediaWidths: MediaWidth = { +export const LifeSgBreakpointSet: BreakpointSet = { "xxs-min": 0, "xxs-max": 320, "xs-min": 321, diff --git a/src/theme/breakpoint/theme-helper.ts b/src/theme/breakpoint/theme-helper.ts index 67a12f87d..52c41daac 100644 --- a/src/theme/breakpoint/theme-helper.ts +++ b/src/theme/breakpoint/theme-helper.ts @@ -1,22 +1,22 @@ import { StyledComponentProps, getCollection, getValue } from "../helpers"; import { BreakpointScheme, ThemeCollectionSpec } from "../types"; -import { LifeSgMediaWidths } from "./specs/lifesg-breakpoint-set"; -import { BreakPointCollectionsMap, MediaWidth } from "./types"; +import { LifeSgBreakpointSet } from "./specs/lifesg-breakpoint-set"; +import { BreakPointCollectionsMap, BreakpointSet } from "./types"; const BreakpointSpec: ThemeCollectionSpec< BreakPointCollectionsMap, BreakpointScheme > = { collections: { - lifesg: LifeSgMediaWidths, + lifesg: LifeSgBreakpointSet, }, defaultValue: "lifesg", }; -export const getBreakpoint = (key: keyof MediaWidth) => { +export const getBreakpoint = (key: keyof BreakpointSet) => { return (props: StyledComponentProps): number => { const theme = props.theme; - const breakpointSet: MediaWidth = getCollection( + const breakpointSet: BreakpointSet = getCollection( BreakpointSpec, theme?.breakpointScheme ); diff --git a/src/theme/breakpoint/types.ts b/src/theme/breakpoint/types.ts index a784e6dda..6f3135ad7 100644 --- a/src/theme/breakpoint/types.ts +++ b/src/theme/breakpoint/types.ts @@ -1,7 +1,7 @@ import { StyledComponentProps } from "../helpers"; import { BreakpointScheme } from "../types"; -export interface MediaWidth { +export interface BreakpointSet { "xxs-min": number; "xxs-max": number; "xs-min": number; @@ -39,7 +39,7 @@ export interface MediaWidth { } export type BreakPointCollectionsMap = { - [key in BreakpointScheme]: MediaWidth; + [key in BreakpointScheme]: BreakpointSet; }; -export type BreakPointSetOptions = Partial; +export type BreakPointSetOptions = Partial; diff --git a/src/theme/mediaquery/mediaquery-helper.ts b/src/theme/media-query/media-query-helper.ts similarity index 83% rename from src/theme/mediaquery/mediaquery-helper.ts rename to src/theme/media-query/media-query-helper.ts index 13cb190d9..8151620ae 100644 --- a/src/theme/mediaquery/mediaquery-helper.ts +++ b/src/theme/media-query/media-query-helper.ts @@ -1,12 +1,17 @@ import { BreakpointValues } from "../breakpoint/theme-helper"; import { StyledComponentProps } from "../helpers"; -// Two separate types for max and min breakpoints +// Typings for MedaiQuery type MaxWidthBreakpoints = "xxs" | "xs" | "sm" | "md" | "lg" | "xl"; type MinWidthBreakpoints = MaxWidthBreakpoints | "xxl"; +type MediaQueryMinMax = "max-width" | "min-width"; +type MediaQuerySpec = Record< + T, + (props: StyledComponentProps) => string +>; const createMediaQueryFunction = ( - type: "max-width" | "min-width", + type: MediaQueryMinMax, key: T ) => { const mappedKey = type === "max-width" ? `${key}-max` : `${key}-min`; @@ -21,7 +26,7 @@ const createMediaQueryFunction = ( const getMediaQuerySpec = ( type: "max-width" | "min-width" -): Record string> => { +): MediaQuerySpec => { // Conditional breakpoints for max and min widths const breakpoints = ( type === "max-width" @@ -32,7 +37,7 @@ const getMediaQuerySpec = ( return breakpoints.reduce((accumulator, key) => { accumulator[key] = createMediaQueryFunction(type, key); return accumulator; - }, {} as Record string>); + }, {} as MediaQuerySpec); }; // Export with typing diff --git a/src/theme/radius/specs/lifesg-radius-set.ts b/src/theme/radius/specs/lifesg-radius-set.ts index 26eac6008..93ae89f9e 100644 --- a/src/theme/radius/specs/lifesg-radius-set.ts +++ b/src/theme/radius/specs/lifesg-radius-set.ts @@ -1,10 +1,10 @@ import { RadiusSet } from "../types"; export const LifeSgRadiusSet: RadiusSet = { - none: "0px", - xs: "2px", - sm: "4px", - md: "8px", - lg: "12px", - full: "9999px", + none: 0, + xs: 2, + sm: 4, + md: 8, + lg: 12, + full: 9999, }; diff --git a/src/theme/radius/theme-helper.ts b/src/theme/radius/theme-helper.ts index 97a337518..47488599f 100644 --- a/src/theme/radius/theme-helper.ts +++ b/src/theme/radius/theme-helper.ts @@ -10,27 +10,27 @@ const RadiusSpec: ThemeCollectionSpec = { defaultValue: "lifesg", }; -export const getSpace = (key: keyof RadiusSet) => { +export const getRadius = (key: keyof RadiusSet) => { return (props: StyledComponentProps): string => { const theme = props.theme; const spacingset: RadiusSet = getCollection( RadiusSpec, - theme.spacingScheme + theme.radiusScheme ); if (theme.overrides && theme.overrides.radius) { - return getValue(spacingset, key, theme.overrides.radius); + return `${getValue(spacingset, key, theme.overrides.radius)}px`; } else { - return spacingset[key]; + return `${spacingset[key]}px`; } }; }; export const RadiusValues = { - none: getSpace("none"), - xs: getSpace("xs"), - sm: getSpace("sm"), - md: getSpace("md"), - lg: getSpace("lg"), - full: getSpace("full"), + none: getRadius("none"), + xs: getRadius("xs"), + sm: getRadius("sm"), + md: getRadius("md"), + lg: getRadius("lg"), + full: getRadius("full"), }; diff --git a/src/theme/radius/types.ts b/src/theme/radius/types.ts index f780e69d4..607854239 100644 --- a/src/theme/radius/types.ts +++ b/src/theme/radius/types.ts @@ -1,12 +1,12 @@ import { RadiusScheme } from "../types"; export type RadiusSet = { - none: string; - xs: string; - sm: string; - md: string; - lg: string; - full: string; + none: number; + xs: number; + sm: number; + md: number; + lg: number; + full: number; }; export type RadiusSetOptions = Partial; diff --git a/src/theme/spacing/specs/lifesg-spacing-set.ts b/src/theme/spacing/specs/lifesg-spacing-set.ts index 7ff73ff5c..6bf95cadd 100644 --- a/src/theme/spacing/specs/lifesg-spacing-set.ts +++ b/src/theme/spacing/specs/lifesg-spacing-set.ts @@ -1,24 +1,24 @@ import { SpacingSet } from "../types"; export const LifeSgSpacingSet: SpacingSet = { - "spacing-0": "0rem", - "spacing-4": "0.25rem", - "spacing-8": "0.5rem", - "spacing-12": "0.75rem", - "spacing-16": "1rem", - "spacing-20": "1.25rem", - "spacing-24": "1.5rem", - "spacing-32": "2rem", - "spacing-40": "2.5rem", - "spacing-48": "3rem", - "spacing-64": "4rem", - "spacing-72": "4.5rem", + "spacing-0": 0, + "spacing-4": 0.25, + "spacing-8": 0.5, + "spacing-12": 0.75, + "spacing-16": 1, + "spacing-20": 1.25, + "spacing-24": 1.5, + "spacing-32": 2, + "spacing-40": 2.5, + "spacing-48": 3, + "spacing-64": 4, + "spacing-72": 4.5, - "layout-xs": "8px", - "layout-sm": "16px", - "layout-md": "24px", - "layout-lg": "32px", - "layout-xl": "48px", - "layout-xxl": "64px", - "layout-xxxl": "128px", + "layout-xs": 8, + "layout-sm": 16, + "layout-md": 24, + "layout-lg": 32, + "layout-xl": 48, + "layout-xxl": 64, + "layout-xxxl": 128, }; diff --git a/src/theme/spacing/theme-helper.ts b/src/theme/spacing/theme-helper.ts index a1379409a..4d428e835 100644 --- a/src/theme/spacing/theme-helper.ts +++ b/src/theme/spacing/theme-helper.ts @@ -19,9 +19,9 @@ export const getSpace = (key: keyof SpacingSet) => { ); if (theme.overrides && theme.overrides.spacing) { - return getValue(spacingset, key, theme.overrides.spacing); + return `${getValue(spacingset, key, theme.overrides.spacing)}px`; } else { - return spacingset[key]; + return `${spacingset[key]}px`; } }; }; diff --git a/src/theme/spacing/types.ts b/src/theme/spacing/types.ts index e158ca63f..9c8865e24 100644 --- a/src/theme/spacing/types.ts +++ b/src/theme/spacing/types.ts @@ -1,26 +1,26 @@ import { SpacingScheme } from "../types"; export type SpacingSet = { - "spacing-0": string; - "spacing-4": string; - "spacing-8": string; - "spacing-12": string; - "spacing-16": string; - "spacing-20": string; - "spacing-24": string; - "spacing-32": string; - "spacing-40": string; - "spacing-48": string; - "spacing-64": string; - "spacing-72": string; + "spacing-0": number; + "spacing-4": number; + "spacing-8": number; + "spacing-12": number; + "spacing-16": number; + "spacing-20": number; + "spacing-24": number; + "spacing-32": number; + "spacing-40": number; + "spacing-48": number; + "spacing-64": number; + "spacing-72": number; - "layout-xs": string; - "layout-sm": string; - "layout-md": string; - "layout-lg": string; - "layout-xl": string; - "layout-xxl": string; - "layout-xxxl": string; + "layout-xs": number; + "layout-sm": number; + "layout-md": number; + "layout-lg": number; + "layout-xl": number; + "layout-xxl": number; + "layout-xxxl": number; }; export type SpacingSetOptions = Partial; diff --git a/src/theme/types.ts b/src/theme/types.ts index b56024d44..6c620249c 100644 --- a/src/theme/types.ts +++ b/src/theme/types.ts @@ -25,15 +25,9 @@ export type { AnimationSet, AnimationSetOptions } from "./animation/types"; export type { BorderSet, BorderSetOptions } from "./border/types"; -export type { - RadiusSet, - RadiusSetOptions as RadiusSetSetOptions, -} from "./radius/types"; +export type { RadiusSet, RadiusSetOptions } from "./radius/types"; -export type { - SpacingSet as SpacingSetType, - SpacingSetOptions, -} from "./spacing/types"; +export type { SpacingSet, SpacingSetOptions } from "./spacing/types"; export type ColourScheme = | "lifesg" diff --git a/tests/theme/theme-media.spec.tsx b/tests/theme/theme-media.spec.tsx index be054c60a..6d68b9949 100644 --- a/tests/theme/theme-media.spec.tsx +++ b/tests/theme/theme-media.spec.tsx @@ -1,6 +1,6 @@ import styled, { ThemeProvider } from "styled-components"; import { Breakpoint } from "../../src"; -import { MediaQuery } from "../../src/theme/mediaquery/mediaquery-helper"; +import { MediaQuery } from "../../src/theme/media-query/media-query-helper"; import { ThemeSpec } from "../../src/theme/types"; import { render } from "@testing-library/react"; import "jest-styled-components"; diff --git a/tests/theme/theme-radius.spec.tsx b/tests/theme/theme-radius.spec.tsx index 1afce50bc..b9b0c0257 100644 --- a/tests/theme/theme-radius.spec.tsx +++ b/tests/theme/theme-radius.spec.tsx @@ -45,7 +45,7 @@ describe("Radius Theming Test", () => { breakpointScheme: "lifesg", overrides: { radius: { - sm: "6px", + sm: 6, }, }, }; @@ -80,8 +80,8 @@ describe("Radius Theming Test", () => { breakpointScheme: "lifesg", overrides: { radius: { - sm: "6px", - md: "10px", + sm: 6, + md: 10, }, }, }; diff --git a/tests/theme/theme-spacing.spec.tsx b/tests/theme/theme-spacing.spec.tsx index f393abfca..70255d49a 100644 --- a/tests/theme/theme-spacing.spec.tsx +++ b/tests/theme/theme-spacing.spec.tsx @@ -21,7 +21,7 @@ describe("Spacing Themeing Test", () => { breakpointScheme: "lifesg", }; - const marginValue = "1rem"; + const marginValue = "1px"; const paddingValue = "32px"; const { container } = render( @@ -45,12 +45,12 @@ describe("Spacing Themeing Test", () => { breakpointScheme: "lifesg", overrides: { spacing: { - "spacing-16": "2rem", + "spacing-16": 2, }, }, }; - const marginValue = "2rem"; + const marginValue = "2px"; const paddingValue = "32px"; const { container } = render( @@ -74,13 +74,13 @@ describe("Spacing Themeing Test", () => { breakpointScheme: "lifesg", overrides: { spacing: { - "spacing-16": "3rem", - "layout-lg": "40px", + "spacing-16": 3, + "layout-lg": 40, }, }, }; - const marginValue = "3rem"; + const marginValue = "3px"; const paddingValue = "40px"; const { container } = render( From 6455bd32987a4cccfcd9cc965f57e3a07b69dd54 Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Thu, 19 Sep 2024 09:35:56 +0800 Subject: [PATCH 6/9] [CCUBE-1547][MAHI]Make naming convention more consistent and add export for breakpoint --- src/theme/breakpoint/theme-helper.ts | 4 ++-- src/theme/breakpoint/types.ts | 4 ++-- src/theme/types.ts | 6 ++++-- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/theme/breakpoint/theme-helper.ts b/src/theme/breakpoint/theme-helper.ts index 52c41daac..3eff7f70d 100644 --- a/src/theme/breakpoint/theme-helper.ts +++ b/src/theme/breakpoint/theme-helper.ts @@ -1,10 +1,10 @@ import { StyledComponentProps, getCollection, getValue } from "../helpers"; import { BreakpointScheme, ThemeCollectionSpec } from "../types"; import { LifeSgBreakpointSet } from "./specs/lifesg-breakpoint-set"; -import { BreakPointCollectionsMap, BreakpointSet } from "./types"; +import { BreakpointCollectionsMap, BreakpointSet } from "./types"; const BreakpointSpec: ThemeCollectionSpec< - BreakPointCollectionsMap, + BreakpointCollectionsMap, BreakpointScheme > = { collections: { diff --git a/src/theme/breakpoint/types.ts b/src/theme/breakpoint/types.ts index 6f3135ad7..b86755962 100644 --- a/src/theme/breakpoint/types.ts +++ b/src/theme/breakpoint/types.ts @@ -38,8 +38,8 @@ export interface BreakpointSet { "xxl-margin": number; } -export type BreakPointCollectionsMap = { +export type BreakpointCollectionsMap = { [key in BreakpointScheme]: BreakpointSet; }; -export type BreakPointSetOptions = Partial; +export type BreakpointSetOptions = Partial; diff --git a/src/theme/types.ts b/src/theme/types.ts index 6c620249c..72f47793e 100644 --- a/src/theme/types.ts +++ b/src/theme/types.ts @@ -6,7 +6,7 @@ import { AnimationSetOptions } from "./animation/types"; import { BorderSetOptions } from "./border/types"; import { SpacingSetOptions } from "./spacing/types"; import { RadiusSetOptions } from "./radius/types"; -import { BreakPointSetOptions } from "./breakpoint/types"; +import { BreakpointSetOptions } from "./breakpoint/types"; export type { PrimitiveColourSet, @@ -29,6 +29,8 @@ export type { RadiusSet, RadiusSetOptions } from "./radius/types"; export type { SpacingSet, SpacingSetOptions } from "./spacing/types"; +export type { BreakpointSet, BreakpointSetOptions } from "./breakpoint/types"; + export type ColourScheme = | "lifesg" | "bookingsg" @@ -51,7 +53,7 @@ export interface ThemeSpecOptions { spacing?: SpacingSetOptions | undefined; border?: BorderSetOptions | undefined; radius?: RadiusSetOptions | undefined; - breakpoint?: BreakPointSetOptions | undefined; + breakpoint?: BreakpointSetOptions | undefined; typography?: TypographySetOptions | undefined; } From 35e05f32499ef85b4159cec90481cf198d98773e Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Thu, 19 Sep 2024 10:13:27 +0800 Subject: [PATCH 7/9] [CCUBE-1547][MAHI]Fix variable name for clarity --- src/theme/radius/theme-helper.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/theme/radius/theme-helper.ts b/src/theme/radius/theme-helper.ts index 47488599f..615fcb4ef 100644 --- a/src/theme/radius/theme-helper.ts +++ b/src/theme/radius/theme-helper.ts @@ -13,15 +13,15 @@ const RadiusSpec: ThemeCollectionSpec = { export const getRadius = (key: keyof RadiusSet) => { return (props: StyledComponentProps): string => { const theme = props.theme; - const spacingset: RadiusSet = getCollection( + const radiusset: RadiusSet = getCollection( RadiusSpec, theme.radiusScheme ); if (theme.overrides && theme.overrides.radius) { - return `${getValue(spacingset, key, theme.overrides.radius)}px`; + return `${getValue(radiusset, key, theme.overrides.radius)}px`; } else { - return `${spacingset[key]}px`; + return `${radiusset[key]}px`; } }; }; From 1603e0453835c29a6fcf85cba86228c6d612d491 Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Thu, 19 Sep 2024 12:44:30 +0800 Subject: [PATCH 8/9] [CCUBE-1547][MAHI]Move mediaquery into breakpoint and use px value for spacing set --- .../media-query-helper.ts | 2 +- src/theme/spacing/specs/lifesg-spacing-set.ts | 22 +++++++++---------- tests/theme/theme-media.spec.tsx | 3 +-- tests/theme/theme-spacing.spec.tsx | 2 +- 4 files changed, 14 insertions(+), 15 deletions(-) rename src/theme/{media-query => breakpoint}/media-query-helper.ts (95%) diff --git a/src/theme/media-query/media-query-helper.ts b/src/theme/breakpoint/media-query-helper.ts similarity index 95% rename from src/theme/media-query/media-query-helper.ts rename to src/theme/breakpoint/media-query-helper.ts index 8151620ae..81e13adb5 100644 --- a/src/theme/media-query/media-query-helper.ts +++ b/src/theme/breakpoint/media-query-helper.ts @@ -1,4 +1,4 @@ -import { BreakpointValues } from "../breakpoint/theme-helper"; +import { BreakpointValues } from "./theme-helper"; import { StyledComponentProps } from "../helpers"; // Typings for MedaiQuery diff --git a/src/theme/spacing/specs/lifesg-spacing-set.ts b/src/theme/spacing/specs/lifesg-spacing-set.ts index 6bf95cadd..7e2d3d3e7 100644 --- a/src/theme/spacing/specs/lifesg-spacing-set.ts +++ b/src/theme/spacing/specs/lifesg-spacing-set.ts @@ -2,17 +2,17 @@ import { SpacingSet } from "../types"; export const LifeSgSpacingSet: SpacingSet = { "spacing-0": 0, - "spacing-4": 0.25, - "spacing-8": 0.5, - "spacing-12": 0.75, - "spacing-16": 1, - "spacing-20": 1.25, - "spacing-24": 1.5, - "spacing-32": 2, - "spacing-40": 2.5, - "spacing-48": 3, - "spacing-64": 4, - "spacing-72": 4.5, + "spacing-4": 4, + "spacing-8": 8, + "spacing-12": 12, + "spacing-16": 16, + "spacing-20": 20, + "spacing-24": 24, + "spacing-32": 32, + "spacing-40": 40, + "spacing-48": 48, + "spacing-64": 64, + "spacing-72": 72, "layout-xs": 8, "layout-sm": 16, diff --git a/tests/theme/theme-media.spec.tsx b/tests/theme/theme-media.spec.tsx index 6d68b9949..06e3afac5 100644 --- a/tests/theme/theme-media.spec.tsx +++ b/tests/theme/theme-media.spec.tsx @@ -1,6 +1,5 @@ import styled, { ThemeProvider } from "styled-components"; -import { Breakpoint } from "../../src"; -import { MediaQuery } from "../../src/theme/media-query/media-query-helper"; +import { MediaQuery } from "../../src/theme/breakpoint/media-query-helper"; import { ThemeSpec } from "../../src/theme/types"; import { render } from "@testing-library/react"; import "jest-styled-components"; diff --git a/tests/theme/theme-spacing.spec.tsx b/tests/theme/theme-spacing.spec.tsx index 70255d49a..d668c4d2f 100644 --- a/tests/theme/theme-spacing.spec.tsx +++ b/tests/theme/theme-spacing.spec.tsx @@ -21,7 +21,7 @@ describe("Spacing Themeing Test", () => { breakpointScheme: "lifesg", }; - const marginValue = "1px"; + const marginValue = "16px"; const paddingValue = "32px"; const { container } = render( From bc978d2bf755a99bb49cd670043132e0068097c6 Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Fri, 20 Sep 2024 17:01:35 +0800 Subject: [PATCH 9/9] [CCUBE-1547][MAHI]Fix naming convention --- src/theme/radius/theme-helper.ts | 6 +++--- src/theme/spacing/theme-helper.ts | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/theme/radius/theme-helper.ts b/src/theme/radius/theme-helper.ts index 615fcb4ef..e67822249 100644 --- a/src/theme/radius/theme-helper.ts +++ b/src/theme/radius/theme-helper.ts @@ -13,15 +13,15 @@ const RadiusSpec: ThemeCollectionSpec = { export const getRadius = (key: keyof RadiusSet) => { return (props: StyledComponentProps): string => { const theme = props.theme; - const radiusset: RadiusSet = getCollection( + const radiusSet: RadiusSet = getCollection( RadiusSpec, theme.radiusScheme ); if (theme.overrides && theme.overrides.radius) { - return `${getValue(radiusset, key, theme.overrides.radius)}px`; + return `${getValue(radiusSet, key, theme.overrides.radius)}px`; } else { - return `${radiusset[key]}px`; + return `${radiusSet[key]}px`; } }; }; diff --git a/src/theme/spacing/theme-helper.ts b/src/theme/spacing/theme-helper.ts index 4d428e835..27c9140de 100644 --- a/src/theme/spacing/theme-helper.ts +++ b/src/theme/spacing/theme-helper.ts @@ -13,15 +13,15 @@ const SpacingSpec: ThemeCollectionSpec = { export const getSpace = (key: keyof SpacingSet) => { return (props: StyledComponentProps): string => { const theme = props.theme; - const spacingset: SpacingSet = getCollection( + const spacingSet: SpacingSet = getCollection( SpacingSpec, theme.spacingScheme ); if (theme.overrides && theme.overrides.spacing) { - return `${getValue(spacingset, key, theme.overrides.spacing)}px`; + return `${getValue(spacingSet, key, theme.overrides.spacing)}px`; } else { - return `${spacingset[key]}px`; + return `${spacingSet[key]}px`; } }; };