Upgrade design system / frontend engine

.storybook/preview-head.html

@@ -4,7 +4,11 @@
 />
 <link
     rel="stylesheet"
-    href="https://assets.life.gov.sg/react-design-system/v2/css/main.css"
+    href="https://assets.life.gov.sg/react-design-system/v3/css/main.css"
+/>
+<link
+    rel="stylesheet"
+    href="https://assets.life.gov.sg/react-design-system/v3/css/open-sans.css"
 />
 
 <style>

.storybook/preview.js

@@ -1,4 +1,4 @@
-import { BaseTheme } from "@lifesg/react-design-system/theme";
+import { LifeSGTheme } from "@lifesg/react-design-system/theme";
 import { withThemeFromJSXProvider } from "@storybook/addon-themes";
 import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
 import { ThemeProvider } from "styled-components";
@@ -7,7 +7,7 @@ const preview = {
     decorators: [
         withThemeFromJSXProvider({
             themes: {
-                LifeSG: BaseTheme,
+                LifeSG: LifeSGTheme,
             },
             Provider: ThemeProvider,
         }),

package.json

@@ -36,7 +36,7 @@
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/sortable": "^7.0.2",
         "@hookform/resolvers": "^3.3.4",
-        "react-hook-form": "^7.51.1",
+        "react-hook-form": "^7.54.2",
         "use-immer": "^0.9.0",
         "yup": "^1.4.0"
     },
@@ -45,13 +45,16 @@
         "@babel/preset-env": "^7.16.11",
         "@babel/preset-react": "^7.16.7",
         "@babel/preset-typescript": "^7.16.7",
-        "@lifesg/react-icons": "^1.4.0",
-        "@lifesg/react-design-system": "^2.7.0-canary.3",
-        "@lifesg/web-frontend-engine": "^1.10.3",
+        "@floating-ui/dom": "^1.6.13",
+        "@floating-ui/react": "^0.26.28",
+        "@lifesg/react-design-system": "^3.0.0-alpha.6",
+        "@lifesg/react-icons": "^1.10.0",
+        "@lifesg/web-frontend-engine": "^2.0.0-alpha.1",
         "@rollup/plugin-commonjs": "^25.0.7",
         "@rollup/plugin-image": "^3.0.3",
         "@rollup/plugin-json": "^6.1.0",
         "@rollup/plugin-node-resolve": "^15.2.3",
+        "@rollup/plugin-terser": "^0.4.4",
         "@storybook/addon-a11y": "^7.4.6",
         "@storybook/addon-actions": "^7.4.6",
         "@storybook/addon-essentials": "^7.4.6",
@@ -91,17 +94,18 @@
         "rollup": "^3.29.4",
         "rollup-plugin-peer-deps-external": "^2.2.4",
         "rollup-plugin-postcss": "^4.0.2",
-        "rollup-plugin-terser": "^7.0.2",
         "rollup-plugin-typescript2": "^0.36.0",
         "storybook": "^7.4.6",
         "styled-components": "^5.3.5",
         "typescript": "^4.8.2",
         "typescript-eslint": "^7.1.0"
     },
     "peerDependencies": {
-        "@lifesg/react-icons": "^1.4.0",
-        "@lifesg/react-design-system": "^2.7.0-canary.3",
-        "@lifesg/web-frontend-engine": "^1.10.3",
+        "@floating-ui/dom": "^1.6.10",
+        "@floating-ui/react": "^0.26.23",
+        "@lifesg/react-design-system": "^3.0.0-alpha.6",
+        "@lifesg/react-icons": "^1.10.0",
+        "@lifesg/web-frontend-engine": "^2.0.0-alpha.1",
         "react": "^17.0.2 || ^18.0.0",
         "react-dom": "^17.0.2 || ^18.0.0",
         "styled-components": "^5.3.5"

rollup.config.js

@@ -2,9 +2,9 @@ import commonjs from "@rollup/plugin-commonjs";
 import image from "@rollup/plugin-image";
 import json from "@rollup/plugin-json";
 import { nodeResolve } from "@rollup/plugin-node-resolve";
+import terser from "@rollup/plugin-terser";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import postcss from "rollup-plugin-postcss";
-import { terser } from "rollup-plugin-terser";
 import typescript from "rollup-plugin-typescript2";
 import pkg from "./package.json";
 

src/components/common/base-card/base-card.styles.tsx

@@ -1,4 +1,4 @@
-import { Color } from "@lifesg/react-design-system/color";
+import { Border, Colour, Radius } from "@lifesg/react-design-system/theme";
 import styled, { css } from "styled-components";
 
 // =============================================================================
@@ -13,7 +13,6 @@ interface IBodyStyleProps {
 // =============================================================================
 export const Body = styled.div<IBodyStyleProps>`
     padding: 1rem;
-    border-radius: 0.5rem;
     cursor: pointer;
     width: 100%;
     position: relative;
@@ -24,19 +23,27 @@ export const Body = styled.div<IBodyStyleProps>`
     ${({ $focused }) =>
         $focused
             ? css`
-                  border: 1px solid ${Color.Primary};
-                  background: ${Color.Accent.Light[5]};
+                  ${Border.Util.solid({
+                      thickness: Border["width-010"],
+                      colour: Colour["border-focus-strong"],
+                  })};
+                  background: ${Colour["bg-primary-subtlest"]};
               `
             : css`
-                  border: 1px solid transparent;
+                  ${Border.Util.solid({
+                      thickness: Border["width-010"],
+                      colour: "transparent",
+                  })};
               `}
 
+    border-radius: ${Radius.md};
+
     :hover {
-        border-color: ${Color.Primary};
-        box-shadow: 0px 2px 8px 0px ${Color.Shadow.Accent};
+        border-color: ${Colour["border-primary"]};
+        box-shadow: 0px 2px 8px 0px ${Colour["border-selected-subtle"]};
     }
 
     :focus {
-        outline-color: ${Color.Primary};
+        outline-color: ${Colour["border-primary"]};
     }
 `;

src/components/common/base-card/card-icon.styles.tsx

@@ -1,16 +1,16 @@
-import { Color } from "@lifesg/react-design-system/color";
+import { Colour, Radius } from "@lifesg/react-design-system/theme";
 import styled from "styled-components";
 
 export const Container = styled.div`
     width: 2rem;
     height: 2rem;
     display: grid;
     place-items: center;
-    border-radius: 0.4rem;
-    background: ${Color.Accent.Light[5]};
+    border-radius: ${Radius.sm};
+    background: ${Colour["bg-primary-subtlest"]};
 
     svg {
-        color: ${Color.Accent.Light[2]};
+        color: ${Colour["icon-primary-subtlest"]};
         height: 1.5rem;
         width: 1.5rem;
     }

src/components/common/child-entry/child-entry.styles.tsx

@@ -1,8 +1,8 @@
-import { Color } from "@lifesg/react-design-system/color";
+import { Colour } from "@lifesg/react-design-system/theme";
 import styled from "styled-components";
 
 export const Wrapper = styled.div`
-    background: ${Color.Neutral[7]};
+    background: ${Colour["bg-strong"]};
     display: flex;
     flex: 1;
     width: 100%;

src/components/common/columns/columns.styles.tsx

@@ -1,4 +1,5 @@
-import { MediaQuery } from "@lifesg/react-design-system/media";
+import { MediaQuery } from "@lifesg/react-design-system/theme";
+import { FormBuilderMediaQuery } from "src/data";
 import { css } from "styled-components";
 
 // =========================================================================
@@ -7,33 +8,33 @@ import { css } from "styled-components";
 const ELEMENT_CARD_SIZE_MAP = {
     expanded: {
         right: {
-            desktop4k: "4 / span 3",
-            desktopL: "5 / span 4",
-            tablet: "4 / span 3",
+            default: "4 / span 3",
+            "2xl": "5 / span 4",
+            xl: "4 / span 3",
         },
         left: {
-            desktop4k: "1 / span 3",
-            desktopL: "1 / span 4",
-            tablet: "1 / span 3",
+            default: "1 / span 3",
+            "2xl": "1 / span 4",
+            xl: "1 / span 3",
         },
         full: {
-            desktop4k: "1 / span 6",
-            desktopL: "1 / span 8",
-            tablet: "1 / span 6",
+            default: "1 / span 6",
+            "2xl": "1 / span 8",
+            xl: "1 / span 6",
         },
     },
     minimised: {
         right: {
-            desktop4k: "4 / span 3",
-            tablet: "4 / span 2",
+            default: "4 / span 3",
+            xl: "3 / span 2",
         },
         left: {
-            desktop4k: "1 / span 3",
-            tablet: "1 / span 2",
+            default: "1 / span 3",
+            xl: "1 / span 2",
         },
         full: {
-            desktop4k: "1 / span 6",
-            tablet: "1 / span 4",
+            default: "1 / span 6",
+            xl: "1 / span 4",
         },
     },
 };
@@ -42,10 +43,26 @@ const ELEMENT_CARD_SIZE_MAP = {
 // HELPER FUNCTIONS
 // =============================================================================
 const generateGridColumn = (breakpoints: { [key: string]: string }) => css`
-    ${Object.entries(breakpoints).map(
-        ([key, value]) =>
-            `${MediaQuery.MaxWidth[key]} { grid-column: ${value}; }`
-    )}
+    ${Object.entries(breakpoints).map(([key, value]) => {
+        switch (key) {
+            case "2xl":
+                return css`
+                    ${FormBuilderMediaQuery.MaxWidth["2xl"]} {
+                        grid-column: ${value};
+                    }
+                `;
+            case "xl":
+                return css`
+                    ${MediaQuery.MaxWidth[key]} {
+                        grid-column: ${value};
+                    }
+                `;
+            default:
+                return css`
+                    grid-column: ${value};
+                `;
+        }
+    })}
 `;
 
 export const generateElementCardView = (

src/components/common/delete-button/delete-button.styles.tsx

@@ -1,4 +1,4 @@
-import { Color } from "@lifesg/react-design-system/color";
+import { Colour } from "@lifesg/react-design-system/theme";
 import styled from "styled-components";
 
 // =============================================================================
@@ -11,7 +11,9 @@ export const StyledBinButton = styled.button`
     margin-top: 0.625rem;
     svg {
         color: ${({ disabled }) =>
-            disabled ? Color.Neutral[3] : Color.Accent.Light[1]};
+            disabled
+                ? Colour["icon-disabled"]
+                : Colour["icon-primary-subtlest"]};
         width: 1.625rem;
         height: 1.625rem;
         cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};

src/components/common/icon-button/icon-button.styles.tsx

@@ -1,4 +1,4 @@
-import { Color } from "@lifesg/react-design-system/color";
+import { Colour } from "@lifesg/react-design-system/theme";
 import styled from "styled-components";
 
 // =============================================================================
@@ -23,7 +23,7 @@ export const IconButton = styled.button<IIconButtonStyleProps>`
     }
 
     :focus {
-        outline-color: ${Color.Primary};
+        outline-color: ${Colour["border-focus-strong"]};
     }
 
     svg {

src/components/common/icon-dropdown/icon-dropdown.styles.tsx

@@ -1,4 +1,4 @@
-import { Color } from "@lifesg/react-design-system/color";
+import { Colour } from "@lifesg/react-design-system/theme";
 import styled from "styled-components";
 
 export const Wrapper = styled.div`
@@ -7,7 +7,7 @@ export const Wrapper = styled.div`
     gap: 1rem;
 
     svg {
-        color: ${Color.Accent.Light[2]};
+        color: ${Colour["icon-primary-subtlest"]};
         height: 1.5rem;
         width: 1.5rem;
     }

src/components/common/icon-dropdown/icon-dropdown.tsx

@@ -1,4 +1,5 @@
-import { Form, Text } from "@lifesg/react-design-system";
+import { Form } from "@lifesg/react-design-system";
+import { Typography } from "@lifesg/react-design-system/typography";
 import {
     EElementType,
     useBuilder,
@@ -52,15 +53,19 @@ export const IconDropdown = ({
                 return (
                     <Wrapper>
                         <CardIcon elementType={option} />
-                        <Text.Body>{ELEMENT_BUTTON_LABELS[option]}</Text.Body>
+                        <Typography.BodyBL>
+                            {ELEMENT_BUTTON_LABELS[option]}
+                        </Typography.BodyBL>
                     </Wrapper>
                 );
             }}
             selectedOption={type}
             renderListItem={(option: EElementType) => (
                 <Wrapper>
                     <CardIcon elementType={option} />
-                    <Text.Body>{ELEMENT_BUTTON_LABELS[option]}</Text.Body>
+                    <Typography.BodyBL>
+                        {ELEMENT_BUTTON_LABELS[option]}
+                    </Typography.BodyBL>
                 </Wrapper>
             )}
             onSelectOption={(option) => onChange(option)}

src/components/common/modal/bulk-edit-modal.tsx

@@ -1,6 +1,6 @@
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Form } from "@lifesg/react-design-system/form";
-import { Text } from "@lifesg/react-design-system/text";
+import { Typography } from "@lifesg/react-design-system/typography";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import { IBulkEditModalProps } from "src/context-providers";
 import { BULK_EDIT_SCHEMA, TBulkEditData } from "src/yup-schemas/bulk-edit";
@@ -66,19 +66,21 @@ export const BulkEditModal = ({ modal }: IProps) => {
             <FormProvider {...methods}>
                 <form onSubmit={methods.handleSubmit(handleFormSubmit)}>
                     <Wrapper data-testid="bulk-edit-modal">
-                        <Text.H3 weight={600}>Bulk Edit</Text.H3>
-                        <Text.Body weight={400}>
+                        <Typography.HeadingSM weight="semibold">
+                            Bulk Edit
+                        </Typography.HeadingSM>
+                        <Typography.BodyBL>
                             To add multiple entries at once, input each item on
                             a new line, separating the label and value with a
                             bar “|”.
-                        </Text.Body>
-                        <Text.H6 weight={400}>
+                        </Typography.BodyBL>
+                        <Typography.BodySM>
                             Example:
                             <br />
                             Banana | banana
                             <br />
                             Green Apple | green-apple
-                        </Text.H6>
+                        </Typography.BodySM>
                         <Controller
                             name="items"
                             control={methods.control}

src/components/common/modal/generic-modal.styles.tsx

@@ -1,4 +1,3 @@
-import { MediaQuery } from "@lifesg/react-design-system/media";
 import { Modal } from "@lifesg/react-design-system/modal";
 import styled from "styled-components";
 
@@ -16,18 +15,10 @@ export const ModalBox = styled(Modal.Box)`
 export const ModalInner = styled.div`
     margin: 4rem;
     text-align: center;
-
-    ${MediaQuery.MaxWidth.mobileL} {
-        margin: 4rem 1.25rem;
-    }
 `;
 
 export const GrowContainer = styled.div`
     margin: auto;
     padding: 5rem 1.25rem;
     width: 100%;
-
-    ${MediaQuery.MaxWidth.mobileL} {
-        padding: 1rem 1.25rem;
-    }
 `;