Merge pull request #547 from LifeSG/BOOKINGSG-5981

Bookingsg 5981
LifeSG · Aug 27, 2024 · 15ef1d1 · 15ef1d1
2 parents 370d4f3 + 6b77b31
commit 15ef1d1
Show file tree

Hide file tree

Showing 10 changed files with 197 additions and 42 deletions.
diff --git a/src/spec/text-spec/base-plus-jakarta-sans-text-style-set.ts b/src/spec/text-spec/base-plus-jakarta-sans-text-style-set.ts
@@ -0,0 +1,93 @@
+import { FontFamily } from "./font-spec";
+import { TextStyleSetType } from "../../text/types";
+
+// In rem unit
+export const BasePlusSansJakartaStyleSet: TextStyleSetType = {
+    D1: {
+        fontFamily: FontFamily.PlusJakartaSans.Bold,
+        fontSize: 3,
+        fontWeight: 700,
+        lineHeight: 3.5,
+        letterSpacing: -0.056,
+    },
+    D2: {
+        fontFamily: FontFamily.PlusJakartaSans.Bold,
+        fontSize: 2.5,
+        fontWeight: 700,
+        lineHeight: 3,
+        letterSpacing: -0.032,
+    },
+    D3: {
+        fontFamily: FontFamily.PlusJakartaSans.Bold,
+        fontSize: 1.625,
+        fontWeight: 700,
+        lineHeight: 2.25,
+    },
+    D4: {
+        fontFamily: FontFamily.PlusJakartaSans.Bold,
+        fontSize: 1.375,
+        fontWeight: 700,
+        lineHeight: 1.75,
+    },
+
+    DBody: {
+        fontFamily: FontFamily.PlusJakartaSans.Regular,
+        fontSize: 1.375,
+        lineHeight: 1.75,
+    },
+    H1: {
+        fontFamily: FontFamily.PlusJakartaSans.Bold,
+        fontSize: 2,
+        fontWeight: 700,
+        lineHeight: 2.5,
+        letterSpacing: -0.032,
+    },
+    H2: {
+        fontFamily: FontFamily.PlusJakartaSans.Bold,
+        fontSize: 1.625,
+        fontWeight: 700,
+        lineHeight: 2.25,
+    },
+    H3: {
+        fontFamily: FontFamily.PlusJakartaSans.Bold,
+        fontSize: 1.375,
+        fontWeight: 700,
+        lineHeight: 1.75,
+    },
+    H4: {
+        fontFamily: FontFamily.PlusJakartaSans.Bold,
+        fontSize: 1.125,
+        fontWeight: 700,
+        lineHeight: 1.75,
+    },
+    H5: {
+        fontFamily: FontFamily.PlusJakartaSans.Bold,
+        fontSize: 1,
+        fontWeight: 700,
+        lineHeight: 1.5,
+    },
+    H6: {
+        fontFamily: FontFamily.PlusJakartaSans.Bold,
+        fontSize: 0.875,
+        fontWeight: 700,
+        lineHeight: 1.625,
+        letterSpacing: 0.012,
+    },
+    Body: {
+        fontFamily: FontFamily.PlusJakartaSans.Regular,
+        fontSize: 1.125,
+        lineHeight: 1.75,
+    },
+    BodySmall: {
+        fontFamily: FontFamily.PlusJakartaSans.Regular,
+        fontSize: 1,
+        lineHeight: 1.5,
+        letterSpacing: 0.014,
+    },
+    XSmall: {
+        fontFamily: FontFamily.PlusJakartaSans.Regular,
+        fontSize: 0.75,
+        lineHeight: 1.2,
+        letterSpacing: 0.012,
+    },
+};
diff --git a/src/spec/text-spec/font-spec.ts b/src/spec/text-spec/font-spec.ts
@@ -1,9 +1,17 @@
+import { TFontFamily } from "./types";
+
 export const FontFamily = {
     OpenSans: {
         Regular: "Open Sans",
         Semibold: "Open Sans Semibold",
         Bold: "Open Sans Bold",
         Light: "Open Sans Light",
     },
+    PlusJakartaSans: {
+        Regular: "Plus Jakarta Sans",
+        Semibold: "Plus Jakarta Sans Semibold",
+        Bold: "Plus Jakarta Sans Bold",
+        Light: "Plus Jakarta Sans Light",
+    },
     MerriWeather: "Merriweather",
-};
+} satisfies TFontFamily;
diff --git a/src/spec/text-spec/types.ts b/src/spec/text-spec/types.ts
@@ -0,0 +1,5 @@
+type FontWeights = "Regular" | "Semibold" | "Bold" | "Light";
+
+export type FontWeightSpec = Record<FontWeights, string>;
+
+export type TFontFamily = Record<string, FontWeightSpec | string>;
diff --git a/src/text/helper.ts b/src/text/helper.ts
@@ -1,25 +1,28 @@
 import { css } from "styled-components";
 import { FontFamily } from "../spec/text-spec/font-spec";
-import { TextLinkSizeType, TextSizeType, TextWeight } from "./types";
+import { FontWeightSpec } from "../spec/text-spec/types";
 import { TextStyle } from "./text-style";
+import { TextLinkSizeType, TextSizeType, TextWeight } from "./types";
 
 // =============================================================================
 // FONT STYLE
 // =============================================================================
-const getFont = (weight: TextWeight) => {
+const FONTS_WITH_WEIGHTS = [FontFamily.OpenSans, FontFamily.PlusJakartaSans];
+
+const getFont = (fontFamily: FontWeightSpec, weight: TextWeight) => {
     switch (weight) {
         case 700:
         case "bold":
-            return FontFamily.OpenSans.Bold;
+            return fontFamily.Bold;
         case 600:
         case "semibold":
-            return FontFamily.OpenSans.Semibold;
+            return fontFamily.Semibold;
         case 300:
         case "light":
-            return FontFamily.OpenSans.Light;
+            return fontFamily.Light;
         case 400:
         case "regular":
-            return FontFamily.OpenSans.Regular;
+            return fontFamily.Regular;
         default:
             return "";
     }
@@ -35,10 +38,14 @@ const getFontFamily = (
             props
         ) as TextWeight;
 
-        if (Object.values(FontFamily.OpenSans).includes(fontFamilyFromTheme)) {
+        const fontFamily = FONTS_WITH_WEIGHTS.find((set) =>
+            Object.values(set).includes(fontFamilyFromTheme)
+        );
+
+        if (fontFamily) {
             return css`
-                font-family: ${getFont(weight) ||
-                getFont(fontWeightFromTheme) ||
+                font-family: ${getFont(fontFamily, weight) ||
+                getFont(fontFamily, fontWeightFromTheme) ||
                 fontFamilyFromTheme};
                 font-weight: normal !important;
             `;

diff --git a/src/theme/text-theme-helper.ts b/src/theme/text-theme-helper.ts
@@ -1,4 +1,5 @@
 import { BaseTextStyleSet } from "../spec/text-spec/base-text-style-set";
+import { BasePlusSansJakartaStyleSet } from "../spec/text-spec/base-plus-jakarta-sans-text-style-set";
 import { OneServiceTextStyleSet } from "../spec/text-spec/oneservice-text-style-set";
 import { TextStyleSetType } from "../text/types";
 import { getCollection, getValue } from "./helper";
@@ -20,6 +21,7 @@ const TextStyleSpec: ThemeCollectionSpec<
     collections: {
         base: BaseTextStyleSet,
         oneservice: OneServiceTextStyleSet,
+        plusJakartaSans: BasePlusSansJakartaStyleSet,
     },
     defaultValue: "base",
 };

diff --git a/src/theme/types.ts b/src/theme/types.ts
@@ -21,7 +21,7 @@ export type ColorCollectionsMap = {
 // =============================================================================
 // FONT STYLE THEMES
 // =============================================================================
-export type TextStyleScheme = "base" | "oneservice";
+export type TextStyleScheme = "base" | "oneservice" | "plusJakartaSans";
 export type FontStyleCollectionsMap = {
     [key in TextStyleScheme]: TextStyleSetType;
 };

diff --git a/stories/text/c-base-collection.mdx b/stories/text/c-base-collection.mdx
@@ -3,6 +3,8 @@ import { Text } from "src/text";
 import { BaseTextStyleSet } from "src/spec/text-spec/base-text-style-set";
 import { Secondary, Title } from "../storybook-common";
 import { FontDisplay, FontSizeDisplay } from "./collection-doc-elements";
+import { BaseTheme } from "../../src";
+import { ThemeProvider } from "styled-components";
 
 <Meta title="General/Text/Base Style" />
 
@@ -21,12 +23,16 @@ const theme: ThemeSpec = {
 
 <Secondary>Font Family</Secondary>
 
-<Text.D1>Open Sans</Text.D1>
-<Unstyled>
-    <FontDisplay />
-</Unstyled>
+<ThemeProvider theme={BaseTheme}>
 
-<Secondary>Text Styles</Secondary>
-<Unstyled>
-    <FontSizeDisplay textStyles={BaseTextStyleSet} />
-</Unstyled>
+    <Text.D1>Open Sans</Text.D1>
+    <Unstyled>
+        <FontDisplay />
+    </Unstyled>
+
+    <Secondary>Text Styles</Secondary>
+    <Unstyled>
+        <FontSizeDisplay textStyles={BaseTextStyleSet} />
+    </Unstyled>
+
+</ThemeProvider>
diff --git a/stories/text/collection-doc-elements.tsx b/stories/text/collection-doc-elements.tsx
@@ -1,8 +1,6 @@
-import React from "react";
-import styled, { ThemeProvider } from "styled-components";
+import styled from "styled-components";
 import { MediaQuery } from "../../src/media";
 import { Text, TextStyleHelper, TextStyleSetType } from "../../src/text";
-import { BaseTheme, ThemeSpec } from "../../src";
 
 export const FontDisplay = () => {
     return (
@@ -31,13 +29,9 @@ const FontDisplayContainer = styled.div`
 // =============================================================================
 interface FontSizeDisplayProps {
     textStyles: TextStyleSetType;
-    theme?: ThemeSpec;
 }
 
-export const FontSizeDisplay = ({
-    textStyles,
-    theme,
-}: FontSizeDisplayProps) => {
+export const FontSizeDisplay = ({ textStyles }: FontSizeDisplayProps) => {
     const getComponent = (key: string) => {
         switch (key) {
             case "D1":
@@ -116,9 +110,7 @@ export const FontSizeDisplay = ({
 
     return (
         <FontSizeDisplayWrapper>
-            <ThemeProvider theme={theme || BaseTheme}>
-                <FontSizeList>{renderFontSizes()}</FontSizeList>
-            </ThemeProvider>
+            <FontSizeList>{renderFontSizes()}</FontSizeList>
         </FontSizeDisplayWrapper>
     );
 };

diff --git a/stories/text/d-oneservice-collection.mdx b/stories/text/d-oneservice-collection.mdx
@@ -4,6 +4,7 @@ import { OneServiceTextStyleSet } from "src/spec/text-spec/oneservice-text-style
 import { Secondary, Title } from "../storybook-common";
 import { FontDisplay, FontSizeDisplay } from "./collection-doc-elements";
 import { OneServiceTheme } from "../../src";
+import { ThemeProvider } from "styled-components";
 
 <Meta title="General/Text/OneService Style" />
 
@@ -22,15 +23,18 @@ const theme: ThemeSpec = {
 
 <Secondary>Font Family</Secondary>
 
-<Text.D1>Open Sans</Text.D1>
-<Unstyled>
-    <FontDisplay />
-</Unstyled>
-
-<Secondary>Text Styles</Secondary>
-<Unstyled>
-    <FontSizeDisplay
-        textStyles={OneServiceTextStyleSet}
-        theme={OneServiceTheme}
-    />
-</Unstyled>
+<ThemeProvider theme={OneServiceTheme}>
+
+    <Text.D1>Open Sans</Text.D1>
+    <Unstyled>
+        <FontDisplay />
+    </Unstyled>
+
+    <Secondary>Text Styles</Secondary>
+    <Unstyled>
+        <FontSizeDisplay
+            textStyles={OneServiceTextStyleSet}
+        />
+    </Unstyled>
+
+</ThemeProvider>
diff --git a/stories/text/e-plus-jakarta-sans-collection.mdx b/stories/text/e-plus-jakarta-sans-collection.mdx
@@ -0,0 +1,38 @@
+import { Meta, Unstyled } from "@storybook/blocks";
+import { Text } from "src/text";
+import { BasePlusSansJakartaStyleSet } from "src/spec/text-spec/base-plus-jakarta-sans-text-style-set";
+import { Secondary, Title } from "../storybook-common";
+import { FontDisplay, FontSizeDisplay } from "./collection-doc-elements";
+import { BaseTheme } from "../../src";
+import { ThemeProvider } from "styled-components";
+
+<Meta title="General/Text/PlusSansJakarta Style" />
+
+<Title>Plus Jakarta Sans Style</Title>
+
+<Secondary>Overview</Secondary>
+
+This will be the collection used when the `textStyleScheme` is `plusJakartaSans`.
+
+```tsx
+const theme: ThemeSpec = {
+    textStyleScheme: "plusJakartaSans",
+    // ...other specifications
+};
+```
+
+<Secondary>Font Family</Secondary>
+
+<ThemeProvider theme={{ ...BaseTheme, textStyleScheme: "plusJakartaSans" }}>
+
+    <Text.D1>Plus Jakarta Sans</Text.D1>
+    <Unstyled>
+        <FontDisplay />
+    </Unstyled>
+
+    <Secondary>Text Styles</Secondary>
+    <Unstyled>
+        <FontSizeDisplay textStyles={BasePlusSansJakartaStyleSet} />
+    </Unstyled>
+
+</ThemeProvider>