Merge pull request #608 from LifeSG/migrate-icon-image-card-noti-smar…

…tapp Migrate Icon, Image Button, Card, Notification and SmartApp Banner
LifeSG · Nov 7, 2024 · b3d7096 · b3d7096
2 parents 5425c50 + cae3581
commit b3d7096
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 90 deletions.
diff --git a/src/card/card.style.tsx b/src/card/card.style.tsx
@@ -1,12 +1,12 @@
 import styled from "styled-components";
-import { V2_Color } from "../v2_color/color";
+import { Colour, Radius, Spacing } from "../theme";
 
 // =============================================================================
 // STYLING
 // =============================================================================
 export const StyledCard = styled.div`
-    border-radius: 0.5rem;
-    background: ${V2_Color.Neutral[8]};
-    padding: 1rem 2rem;
-    box-shadow: 0 0.125rem 0.5rem rgba(104, 104, 104, 0.25);
+    border-radius: ${Radius.md};
+    background: ${Colour.bg};
+    padding: ${Spacing["spacing-16"]} ${Spacing["spacing-32"]};
+    box-shadow: 0 2px 8px rgba(104, 104, 104, 0.25);
 `;
diff --git a/src/card/card.tsx b/src/card/card.tsx
@@ -1,4 +1,4 @@
-import { V2_Text } from "../v2_text/text";
+import { Typography } from "../typography/typography";
 import { StyledCard } from "./card.style";
 import { CardProps } from "./types";
 
@@ -13,7 +13,7 @@ export const Card = ({ children, ...otherProps }: CardProps): JSX.Element => {
     // =============================================================================
     const renderContent = () =>
         typeof children === "string" ? (
-            <V2_Text.Body>{children}</V2_Text.Body>
+            <Typography.BodyBL>{children}</Typography.BodyBL>
         ) : (
             children
         );

diff --git a/src/icon-button/icon-button.style.tsx b/src/icon-button/icon-button.style.tsx
@@ -1,17 +1,14 @@
 import styled, { css } from "styled-components";
-import { V2_Color } from "../v2_color/color";
 import { SizeType, StyleType } from "./types";
-
+import { Border, Colour } from "../theme";
 interface StyleProps {
     $styleType: StyleType;
     $sizeType: SizeType;
 }
 
 export const Main = styled.button<StyleProps>`
     align-items: center;
-    background-color: ${V2_Color.Primary};
     border-radius: 0.25rem;
-    color: ${V2_Color.Neutral[8]};
     cursor: pointer;
     display: flex;
     justify-content: center;
@@ -62,37 +59,46 @@ export const Main = styled.button<StyleProps>`
         switch (props.$styleType) {
             case "secondary":
                 return css`
-                    background-color: ${V2_Color.Neutral[8]};
-                    border: 1px solid ${V2_Color.Primary};
-                    color: ${V2_Color.Primary};
+                    background-color: ${Colour.bg};
+                    border: ${Border["width-010"]} ${Border.solid}
+                        ${Colour["border-primary"]};
+                    color: ${Colour["text-primary"]};
+
+                    :hover {
+                        background-color: ${Colour["bg-hover-neutral"]};
+                    }
                 `;
 
             case "light":
                 return css`
-                    background-color: ${V2_Color.Neutral[8]};
-                    border: 1px solid ${V2_Color.Neutral[5]};
-                    color: ${V2_Color.Primary};
+                    background-color: ${Colour.bg};
+                    border: ${Border["width-010"]} ${Border.solid}
+                        ${Colour.border};
+                    color: ${Colour["text-primary"]};
+
+                    :hover {
+                        background-color: ${Colour["bg-hover-neutral"]};
+                    }
                 `;
             case "primary":
             default:
                 return css`
-                    background-color: ${V2_Color.Primary};
+                    background-color: ${Colour["bg-primary"]};
                     border: none;
-                    color: ${V2_Color.Neutral[8]};
+                    color: ${Colour["text-inverse"]};
+
+                    :hover {
+                        background-color: ${Colour["bg-primary-hover"]};
+                    }
                 `;
         }
     }}
-    &:hover {
-        box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.2);
-    }
+
     &:disabled {
-        background-color: ${V2_Color.Neutral[6]};
-        border: 1px solid ${V2_Color.Neutral[6]};
-        color: ${V2_Color.Neutral[3]};
+        background-color: ${Colour["bg-disabled"]};
+        border: ${Border["width-010"]} ${Border["solid"]}
+            ${Colour["border-disabled"]};
+        color: ${Colour["text-disabled"]};
         cursor: not-allowed;
-
-        &:hover {
-            box-shadow: none;
-        }
     }
 `;
diff --git a/src/image-button/image-button.style.tsx b/src/image-button/image-button.style.tsx
@@ -1,7 +1,6 @@
-import { V2_MediaQuery } from "../v2_media";
 import styled, { css } from "styled-components";
-import { V2_Color } from "../v2_color/color";
-import { V2_TextStyleHelper } from "../v2_text/helper";
+import { Border, Colour, Font, Motion, Radius } from "../theme";
+import { MediaQuery } from "../theme";
 
 export const Main = styled.button<{
     $selected?: boolean;
@@ -14,14 +13,15 @@ export const Main = styled.button<{
     justify-content: center;
     align-items: center;
     padding: 1.5rem 1rem;
-    background-color: ${V2_Color.Neutral[8]};
-    border: 1px solid transparent;
-    border-radius: 0.5rem;
+    background-color: ${Colour.bg};
+    border: ${Border["width-010"]} ${Border.solid} transparent;
+    border-radius: ${Radius.md};
     cursor: pointer;
     max-width: 13rem;
-    transition: all 200ms ease;
-    ${V2_TextStyleHelper.getTextStyle("Body", "semibold")}
-    color: ${({ $selected }) => $selected && V2_Color.Primary};
+    transition: all ${Motion["duration-250"]} ${Motion["ease-default"]};
+    ${Font["body-baseline-semibold"]}
+    color: ${({ $selected }) =>
+        $selected ? Colour["text-primary"] : Colour["text"]};
     overflow-wrap: anywhere;
 
     img {
@@ -31,50 +31,50 @@ export const Main = styled.button<{
         object-fit: contain;
     }
 
-    ${V2_MediaQuery.MaxWidth.mobileL} {
+    ${MediaQuery.MaxWidth.sm} {
         padding: 0.5rem 0.25rem;
         gap: 0.25rem;
-        ${V2_TextStyleHelper.getTextStyle("BodySmall", "semibold")}
+        ${Font["body-md-semibold"]}
     }
 
     ${(props) => {
         if (props.$error) {
             return css`
-                background: ${V2_Color.Neutral[8]};
-                border: 1px solid ${V2_Color.Validation.Red.Border};
-
-                :hover {
-                    box-shadow: 0 0 4px 1px ${V2_Color.Shadow.Red};
-                }
+                background: ${Colour.bg};
+                border: ${Border["width-010"]} ${Border.solid}
+                    ${Colour["border-error"]};
             `;
         } else if (props.$selected) {
             return css`
-                background: ${V2_Color.Accent.Light[5]};
-                border: 1px solid ${V2_Color.Primary};
+                background: ${Colour["bg-selected"]};
+                border: ${Border["width-010"]} ${Border.solid}
+                    ${Colour["border-selected"]};
 
-                :hover {
-                    box-shadow: 0 0 4px 1px ${V2_Color.Shadow.Accent};
+                &:hover {
+                    background: ${Colour["bg-selected-hover"]};
+                    border: ${Border["width-010"]} ${Border.solid}
+                        ${Colour["border-selected-hover"]};
                 }
             `;
         } else {
             return css`
                 &:hover {
-                    border: 1px solid ${V2_Color.Accent.Light[1]};
-                    box-shadow: 0 0 4px 1px ${V2_Color.Shadow.Accent};
+                    border: ${Border["width-010"]} ${Border.solid}
+                        ${Colour["border-hover-strong"]};
                 }
             `;
         }
     }}
 
     :disabled {
         &:hover {
-            border: 1px solid transparent;
+            border: ${Border["width-010"]} ${Border.solid} transparent;
         }
         box-shadow: none;
         img {
             filter: grayscale(100%);
         }
-        color: ${V2_Color.Neutral[3]};
+        color: ${Colour["text-disabled"]};
 
         outline: none;
         cursor: not-allowed;

diff --git a/src/notification-banner/notification-banner.styles.tsx b/src/notification-banner/notification-banner.styles.tsx
@@ -1,10 +1,9 @@
 import { CrossIcon } from "@lifesg/react-icons/cross";
 import styled, { css } from "styled-components";
-import { V2_Color } from "../v2_color";
-import { V2_Layout } from "../v2_layout";
 import { ClickableIcon } from "../shared/clickable-icon";
-import { V2_Text, V2_TextStyleHelper } from "../v2_text";
-import { Transition } from "../transition";
+import { Colour, Font, Motion } from "../theme";
+import { Layout } from "../layout";
+import { Typography } from "../typography";
 
 // =============================================================================
 // STYLE INTERFACES, transient props are denoted with $
@@ -23,19 +22,19 @@ interface ContentStyleProps {
 // STYLING
 // =============================================================================
 const commonLinkStyle = css`
-    color: ${V2_Color.Validation.Orange.Icon};
+    color: ${Colour["hyperlink-inverse"]};
 
     svg {
-        color: ${V2_Color.Validation.Orange.Icon};
+        color: ${Colour["icon-primary-inverse"]};
     }
 
     :hover,
     :active,
     :visited,
     :focus {
-        color: ${V2_Color.Validation.Orange.Icon};
+        color: ${Colour["hyperlink-inverse"]};
         svg {
-            color: ${V2_Color.Validation.Orange.Icon};
+            color: ${Colour["icon-primary-inverse"]};
         }
     }
 `;
@@ -45,13 +44,13 @@ export const Wrapper = styled.div<WrapperStyleProps>`
     left: 0;
     top: 0;
     width: 100%;
-    transition: ${Transition.Base};
-    background: ${V2_Color.Neutral[2]};
+    transition: all ${Motion["duration-800"]} ${Motion["ease-default"]};
+    background: ${Colour["bg-inverse-subtle"]};
     z-index: 25;
     cursor: ${(props) => (props.$clickable ? "pointer" : "default")};
 `;
 
-export const Container = styled(V2_Layout.Content)`
+export const Container = styled(Layout.Content)`
     display: flex;
 `;
 
@@ -68,20 +67,20 @@ export const Content = styled.div<ContentStyleProps>`
     display: inline-block;
     width: 100%;
 
-    ${V2_TextStyleHelper.getTextStyle("Body", "regular")}
-    color: ${V2_Color.Neutral[8]};
+    ${Font["body-baseline-regular"]}
+    color: ${Colour["text-inverse"]};
 
     p {
         display: inline-block;
     }
 
     strong {
-        ${V2_TextStyleHelper.getFontFamily("Body", "semibold")}
-        color: ${V2_Color.Neutral[8]};
+        ${Font["body-baseline-semibold"]}
+        color: ${Colour["text-inverse"]};
     }
 
     a {
-        ${V2_TextStyleHelper.getTextStyle("Body", "regular")}
+        ${Font["body-baseline-regular"]}
         ${commonLinkStyle}
     }
 
@@ -98,7 +97,7 @@ export const Content = styled.div<ContentStyleProps>`
     }}
 `;
 
-export const ContentLink = styled(V2_Text.Hyperlink.Default)`
+export const ContentLink = styled(Typography.LinkBL)`
     position: relative;
 
     ${commonLinkStyle}
@@ -113,7 +112,7 @@ export const StyledIconButton = styled(ClickableIcon)`
 export const StyledIcon = styled(CrossIcon)`
     height: 1.875rem;
     width: 1.875rem;
-    color: ${V2_Color.Neutral[8]};
+    color: ${Colour["icon-inverse"]};
 `;
 
 export const ActionButton = styled.button`
@@ -125,8 +124,8 @@ export const ActionButton = styled.button`
 
     border: none;
     background: transparent;
-    color: ${V2_Color.Validation.Orange.Icon};
-    ${V2_TextStyleHelper.getTextStyle("BodySmall", "semibold")};
+    color: ${Colour["hyperlink-inverse"]};
+    ${Font["body-md-semibold"]};
 
     cursor: pointer;
 `;

diff --git a/src/notification-banner/types.ts b/src/notification-banner/types.ts
@@ -1,4 +1,4 @@
-import { V2_TextLinkProps, V2_TextProps } from "../v2_text/types";
+import { TypographyLinkProps, TypographyProps } from "../typography";
 
 export interface NotificationBannerProps
     extends React.HTMLAttributes<HTMLDivElement> {
@@ -21,11 +21,11 @@ export interface NotificationBannerWithForwardedRefProps
 
 export type ContentType = "text" | "link";
 
-export interface ContentLinkAttributes extends V2_TextLinkProps {}
-export interface ContentTextAttributes extends V2_TextProps {}
+export interface ContentLinkAttributes extends TypographyLinkProps {}
+export interface ContentTextAttributes extends TypographyProps {}
 
 export interface NotificationContentAttributes {
     type: ContentType;
     content: string;
-    otherAttributes?: V2_TextLinkProps | V2_TextProps | undefined;
+    otherAttributes?: TypographyLinkProps | TypographyProps | undefined;
 }