Merge pull request #603 from LifeSG/migrate-breadcrumb-drawer-paginat…

…ion-tab Migrate breadcrumb drawer pagination tab
LifeSG · Nov 11, 2024 · c218a8e · c218a8e
2 parents d63f960 + 8cad7f2
commit c218a8e
Show file tree

Hide file tree

Showing 11 changed files with 149 additions and 168 deletions.
diff --git a/src/breadcrumb/breadcrumb.style.tsx b/src/breadcrumb/breadcrumb.style.tsx
@@ -1,9 +1,8 @@
 import { ChevronRightIcon } from "@lifesg/react-icons/chevron-right";
-import styled from "styled-components";
-import { V2_Color } from "../v2_color";
-import { V2_MediaQuery } from "../v2_media";
-import { V2_Text } from "../v2_text/text";
-
+import styled, { css } from "styled-components";
+import { FontSpec, MediaQuery } from "../theme";
+import { Typography } from "../typography/typography";
+import { Colour } from "../theme";
 // =============================================================================
 // STYLE TYPES, transient props are denoted with $
 // See more https://styled-components.com/docs/api#transient-props
@@ -24,14 +23,13 @@ export const Wrapper = styled.div`
     position: relative;
     width: 100%;
     z-index: 1;
-
     margin: 2rem 0;
 
-    ${V2_MediaQuery.MaxWidth.desktopM} {
+    ${MediaQuery.MaxWidth.xl} {
         margin: 1.5rem 0;
     }
 
-    ${V2_MediaQuery.MaxWidth.tablet} {
+    ${MediaQuery.MaxWidth.lg} {
         margin: 1rem 0;
     }
 `;
@@ -42,6 +40,7 @@ export const Content = styled.ul`
     flex-wrap: wrap;
     white-space: nowrap;
     margin-left: -0.25rem;
+    font-size: ${FontSpec["body-size-md"]};
     overflow-x: scroll;
     overflow-y: hidden;
     scrollbar-width: none; /* Firefox */
@@ -50,7 +49,7 @@ export const Content = styled.ul`
         display: none; /* Chrome/Safari/Webkit */
     }
 
-    ${V2_MediaQuery.MaxWidth.tablet} {
+    ${MediaQuery.MaxWidth.lg} {
         flex-wrap: nowrap;
     }
 `;
@@ -86,11 +85,11 @@ export const Fade = styled.div<FadeProps>`
 			`;
         }
 
-        return `
-			${V2_MediaQuery.MaxWidth.tablet} {
-				${positionStyle}
-			}
-		`;
+        return css`
+            ${MediaQuery.MaxWidth.lg} {
+                ${positionStyle}
+            }
+        `;
     }};
 `;
 
@@ -106,14 +105,16 @@ export const Item = styled.li<ItemStyleProps>`
 `;
 
 export const Caret = styled(ChevronRightIcon)`
-    margin: 0.25rem 0.25rem 0.1rem 0.25rem;
-    color: ${V2_Color.Neutral[4]};
+    margin: 0.25rem;
+    height: 1em;
+    width: 1em;
+    color: ${Colour["icon-subtle"]};
 `;
 
-export const CurrentLabel = styled(V2_Text.BodySmall)`
+export const CurrentLabel = styled(Typography.BodyMD)`
     margin: 0.25rem !important;
 `;
 
-export const PreviousLink = styled(V2_Text.Hyperlink.Small)`
+export const PreviousLink = styled(Typography.LinkMD)`
     margin: 0.25rem !important;
 `;
diff --git a/src/breadcrumb/breadcrumb.tsx b/src/breadcrumb/breadcrumb.tsx
@@ -1,6 +1,5 @@
 import { useRef, useState } from "react";
 import { useResizeDetector } from "react-resize-detector";
-import { MediaWidths } from "../spec/media-spec";
 import { useEvent, useEventListener, useIsomorphicLayoutEffect } from "../util";
 import {
     Caret,
@@ -12,6 +11,8 @@ import {
     Wrapper,
 } from "./breadcrumb.style";
 import { BreadcrumbProps, FadeColorSet } from "./types";
+import { useTheme } from "styled-components";
+import { Breakpoint } from "../theme";
 
 export const Breadcrumb = ({
     links,
@@ -38,6 +39,10 @@ export const Breadcrumb = ({
     // =============================================================================
     // EVENT HANDLERS
     // =============================================================================
+
+    const theme = useTheme();
+    const tabletBreakpoint = Breakpoint["lg-max"]({ theme });
+
     const onResize = useEvent(() => {
         const content = contentRef.current;
         const wrapper = wrapperRef.current;
@@ -47,14 +52,14 @@ export const Breadcrumb = ({
             wrapper &&
             links &&
             links.length > 1 &&
-            window.innerWidth <= MediaWidths.tablet
+            window.innerWidth <= tabletBreakpoint
         ) {
             content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;
         }
     });
 
     const handleShowFadeToggle = useEvent(() => {
-        const nextShowFade = window.innerWidth <= MediaWidths.tablet;
+        const nextShowFade = window.innerWidth <= tabletBreakpoint;
         setShowFade(nextShowFade);
 
         const content = contentRef.current;

diff --git a/src/drawer/drawer.styles.tsx b/src/drawer/drawer.styles.tsx
@@ -1,8 +1,8 @@
-import styled, { css } from "styled-components";
-import { V2_Color } from "../v2_color";
-import { V2_MediaQuery } from "../v2_media";
 import { ClickableIcon } from "../shared/clickable-icon";
-import { V2_Text } from "../v2_text";
+import { Border, Colour, Motion } from "../theme";
+import styled, { css } from "styled-components";
+import { Typography } from "../typography/typography";
+import { MediaQuery } from "../theme";
 
 // =============================================================================
 // STYLE INTERFACE, transient props are denoted with $
@@ -19,14 +19,13 @@ const VISIBILITY_STYLE = (show: boolean | undefined) => {
     if (show) {
         return css`
             right: 0;
-            transition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);
-            transition-delay: 200ms;
+            transition: all ${Motion["duration-800"]} ${Motion["ease-exit"]};
         `;
     }
 
     return css`
         right: -100%;
-        transition: all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);
+        transition: all ${Motion["duration-800"]} ${Motion["ease-default"]};
     `;
 };
 
@@ -41,7 +40,7 @@ export const Container = styled.div<StyleProps>`
     flex-direction: column;
     height: 100%;
 
-    background-color: ${V2_Color.Neutral[8]};
+    background-color: ${Colour.bg};
     box-shadow: 0px 2px 12px rgba(104, 104, 104, 0.25);
 
     visibility: ${(props) => (props.$show ? "visible" : "hidden")};
@@ -52,12 +51,12 @@ export const Container = styled.div<StyleProps>`
     border-bottom-left-radius: 8px;
     overflow: hidden;
 
-    ${V2_MediaQuery.MaxWidth.desktopL} {
+    ${MediaQuery.MaxWidth.xl} {
         width: 50%;
         min-width: 700px;
     }
 
-    ${V2_MediaQuery.MaxWidth.tablet} {
+    ${MediaQuery.MaxWidth.lg} {
         width: 100%;
         min-width: unset;
         border-top-left-radius: 0;
@@ -73,23 +72,22 @@ export const Header = styled.div`
     gap: 1rem;
     height: 5rem;
     padding: 2rem 1rem 1rem;
-    background-color: ${V2_Color.Neutral[8]};
-    border-bottom: 1px solid ${V2_Color.Neutral[5]};
+    background-color: ${Colour.bg};
+    border-bottom: ${Border["width-010"]} ${Border.solid} ${Colour.border};
 
-    ${V2_MediaQuery.MaxWidth.tablet} {
+    ${MediaQuery.MaxWidth.lg} {
         gap: 0.5rem;
         padding: 2rem 1.25rem 1rem;
     }
 `;
 
 export const CloseButton = styled(ClickableIcon)`
-    color: ${V2_Color.Neutral[3]};
+    color: ${Colour.icon};
     padding: 0;
     order: -1; // show button on the left of the header
-
     :active,
     :focus {
-        color: ${V2_Color.Primary};
+        color: ${Colour["icon-hover"]};
     }
 
     svg {
@@ -98,7 +96,7 @@ export const CloseButton = styled(ClickableIcon)`
     }
 `;
 
-export const Heading = styled(V2_Text.H2)`
+export const Heading = styled(Typography.HeaderMD)`
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;