Merge pull request #624 from LifeSG/deprecate-spec-transition

[CCUBE][MAHI]Deprecate spec and transition to v2

codemods/deprecate-v2-tokens/data.ts

@@ -167,6 +167,10 @@ export const componentMap = [
         oldName: "BulletType",
         newName: "V2_BulletType",
     },
+    {
+        oldName: "Transition",
+        newName: "V2_Transition",
+    },
     // Added theme name mappings
     {
         oldName: "BaseTheme",
@@ -272,4 +276,8 @@ export const pathMap = [
         oldPath: "theme",
         newPath: "v2_theme",
     },
+    {
+        oldPath: "transition",
+        newPath: "v2_transition",
+    },
 ];

src/box-container/box-container.styles.tsx

@@ -5,7 +5,7 @@ import styled, { css } from "styled-components";
 import { V2_Color } from "../v2_color";
 import { V2_MediaQuery } from "../v2_media";
 import { V2_Text } from "../v2_text/text";
-import { Transition } from "../transition";
+import { V2_Transition } from "../v2_transition";
 import { BoxContainerDisplayState } from "./types";
 
 // =============================================================================
@@ -150,7 +150,7 @@ export const HandleLabel = styled(V2_Text.H4)`
 
 export const HandleIconContainer = styled.div<StyleProps>`
     transform: rotate(${(props) => (props.$expanded ? 180 : 0)}deg);
-    transition: ${Transition.Base};
+    transition: ${V2_Transition.Base};
 `;
 
 export const HandleIcon = styled(ChevronDownIcon)`

src/countdown-timer/countdown-timer.tsx

@@ -13,7 +13,7 @@ import {
 } from "./countdown-timer.style";
 import { TimeHelper } from "../util/time-helper";
 import { ClockIcon } from "@lifesg/react-icons";
-import { MediaWidths } from "../spec/media-spec";
+import { MediaWidths } from "../v2_spec/media-spec";
 
 export const CountdownTimer = ({
     className,

src/error-display/helper.ts

@@ -1,4 +1,4 @@
-import { MediaWidths } from "../spec/media-spec";
+import { MediaWidths } from "../v2_spec/media-spec";
 
 export namespace ErrorDisplayHelper {
     export interface ImagePathAttributes {

src/filter/filter.tsx

@@ -17,7 +17,7 @@ import { FilterItem } from "./filter-item";
 import { FilterItemCheckbox } from "./addons/filter-item-checkbox";
 import { FilterItemPage } from "./filter-item-page";
 import { FilterProps, Mode } from "./types";
-import { MediaWidths } from "../spec/media-spec";
+import { MediaWidths } from "../v2_spec/media-spec";
 import { Overlay } from "../overlay/overlay";
 import { useEffect, useRef, useState } from "react";
 import { useMediaQuery } from "react-responsive";

src/index.ts

@@ -73,7 +73,7 @@ export * from "./timetable";
 export * from "./toast";
 export * from "./toggle";
 export * from "./tooltip";
-export * from "./transition";
+export * from "./v2_transition";
 export * from "./typography";
 export * from "./uneditable-section";
 export * from "./unit-number";

src/input-group/input-group-list-addon.style.tsx

@@ -4,7 +4,7 @@ import { V2_Color } from "../v2_color";
 import { Selector as DropdownSelector } from "../shared/dropdown-wrapper/dropdown-wrapper.styles";
 import { V2_Text } from "../v2_text/text";
 import { V2_TextStyle } from "../v2_text/text-style";
-import { Transition } from "../transition";
+import { V2_Transition } from "../v2_transition";
 import { InputGroupAddonPosition } from "./types";
 
 // =============================================================================
@@ -77,7 +77,7 @@ export const SelectorReadOnly = styled.div`
 
 export const IconContainer = styled.div<StyleProps>`
     transform: rotate(${(props) => (props.$expanded ? 180 : 0)}deg);
-    transition: ${Transition.Base};
+    transition: ${V2_Transition.Base};
     margin: 0 0.75rem;
 `;
 

src/input-textarea/textarea.style.tsx

@@ -2,7 +2,7 @@ import styled, { css } from "styled-components";
 import { V2_Color } from "../v2_color";
 import { V2_DesignToken } from "../v2_design-token";
 import { V2_TextStyleHelper } from "../v2_text";
-import { Transition } from "../transition";
+import { V2_Transition } from "../v2_transition";
 
 // =============================================================================
 // STYLE INTERFACe
@@ -26,7 +26,7 @@ export const Element = styled.textarea<StyleProps>`
     display: block;
     padding: 0.75rem 1rem;
     width: 100%;
-    transition: ${Transition.Base};
+    transition: ${V2_Transition.Base};
 
     ${V2_TextStyleHelper.getTextStyle("Body", "regular")}
     color: ${V2_Color.Neutral[1]};

src/navbar/brand.styles.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Transition } from "../transition";
+import { V2_Transition } from "../v2_transition";
 import { BrandType } from "./types";
 
 // =============================================================================
@@ -21,7 +21,7 @@ export const Clickable = styled.a<StyleProps>`
     img {
         width: auto;
         height: 100%;
-        transition: ${Transition.Base};
+        transition: ${V2_Transition.Base};
         object-fit: contain;
     }
 `;

src/navbar/navbar.styles.tsx

@@ -1,7 +1,7 @@
 import { MenuIcon } from "@lifesg/react-icons/menu";
 import styled from "styled-components";
 import { ClickableIcon } from "../shared/clickable-icon";
-import { Transition } from "../transition";
+import { V2_Transition } from "../v2_transition";
 import { MediaQuery } from "../theme";
 import { Colour } from "../theme";
 
@@ -49,7 +49,7 @@ export const Nav = styled.nav<StyleProps>`
     justify-content: space-between;
     align-items: center;
     position: relative;
-    transition: ${Transition.Base};
+    transition: ${V2_Transition.Base};
 
     ${MediaQuery.MaxWidth.lg} {
         height: ${NAVBAR_MOBILE_HEIGHT}rem;

src/navbar/navbar.tsx

@@ -10,7 +10,7 @@ import { ButtonProps } from "../button/types";
 import { V2_Layout } from "../v2_layout";
 import { Masthead } from "../masthead/masthead";
 import { Overlay } from "../overlay/overlay";
-import { MediaWidths } from "../spec/media-spec";
+import { MediaWidths } from "../v2_spec/media-spec";
 import { Brand } from "./brand";
 import { Drawer } from "./drawer";
 import { getDefaultResourceLogo } from "./navbar-logo-data";

src/popover-v2/popover.tsx

@@ -1,6 +1,6 @@
 import { useMediaQuery } from "react-responsive";
 import { Modal } from "../modal/modal";
-import { MediaWidths } from "../spec/media-spec";
+import { MediaWidths } from "../v2_spec/media-spec";
 import {
     ContentWrapper,
     MobileModalBox,

src/popover/popover-hoc.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { useMediaQuery } from "react-responsive";
-import { MediaWidths } from "../spec/media-spec";
+import { MediaWidths } from "../v2_spec/media-spec";
 import { Popover } from "./popover";
 import { HOCTrigger, HOCWrapper } from "./popover.styles";
 import { PopoverHOCOptionsProps, PopoverHOCProps } from "./types";

src/popover/popover.styles.tsx

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import { V2_MediaQuery } from "../v2_media";
 import { ModalBox } from "../modal/modal-box";
-import { Transition } from "../transition";
+import { V2_Transition } from "../v2_transition";
 
 // =============================================================================
 // STYLE INTERFACES, transient props are denoted with $
@@ -28,14 +28,14 @@ const getVisibilityStyle = (visible: boolean) => {
         return css`
             visibility: visible;
             opacity: 1;
-            transition: ${Transition.Base};
+            transition: ${V2_Transition.Base};
             z-index: 50;
         `;
     } else {
         return css`
             visibility: hidden;
             opacity: 0;
-            transition: ${Transition.Base};
+            transition: ${V2_Transition.Base};
             z-index: -1;
         `;
     }

src/popover/popover.tsx

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import { useMediaQuery } from "react-responsive";
 import { Card } from "src/card";
 import { Modal } from "../modal/modal";
-import { MediaWidths } from "../spec/media-spec";
+import { MediaWidths } from "../v2_spec/media-spec";
 import { V2_Text } from "../v2_text/text";
 import {
     BubbleWrap,

src/shared/dropdown-list-v2/expandable-element.styles.tsx

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import { V2_Color } from "../../v2_color";
 import { V2_TextStyle, V2_TextStyleHelper } from "../../v2_text";
-import { Transition } from "../../transition";
+import { V2_Transition } from "../../v2_transition";
 import { BasicButton } from "../input-wrapper/input-wrapper";
 import { DropdownVariantType } from "./types";
 
@@ -39,7 +39,7 @@ export const IconContainer = styled.div<StyleProps>`
     display: flex;
     align-items: center;
     transform: rotate(${(props) => (props.$expanded ? 180 : 0)}deg);
-    transition: ${Transition.Base};
+    transition: ${V2_Transition.Base};
 
     svg {
         color: ${V2_Color.Neutral[3]};

src/shared/dropdown-wrapper/dropdown-wrapper.styles.tsx

@@ -3,7 +3,7 @@ import styled, { css, keyframes } from "styled-components";
 import { V2_Color } from "../../v2_color";
 import { V2_DesignToken } from "../../v2_design-token";
 import { V2_TextStyle, V2_TextStyleHelper } from "../../v2_text";
-import { Transition } from "../../transition";
+import { V2_Transition } from "../../v2_transition";
 import { DropdownVariantType, TruncateType } from "../dropdown-list/types";
 
 // =============================================================================
@@ -165,7 +165,7 @@ export const ElementBoundary = styled.div<DropdownWrapperStyleProps>`
 
 export const IconContainer = styled.div<DropdownWrapperStyleProps>`
     transform: rotate(${(props) => (props.expanded ? 180 : 0)}deg);
-    transition: ${Transition.Base};
+    transition: ${V2_Transition.Base};
     margin-left: 1rem;
 `;
 

src/time-slot-bar-week/time-slot-bar-week-days.style.tsx

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import { Button } from "../button";
 import { ChevronUpIcon } from "@lifesg/react-icons";
-import { Transition } from "../transition";
+import { V2_Transition } from "../v2_transition";
 import {
     TimeSlot,
     TimeSlotStyleProps,
@@ -65,7 +65,7 @@ export const Expandable = styled(animated.div)`
 export const ColumnWeekCell = styled.div`
     display: flex;
     gap: 0.25rem;
-    transition: ${Transition.Base};
+    transition: ${V2_Transition.Base};
     overflow: hidden;
 `;
 
@@ -75,7 +75,7 @@ export const TimeColumn = styled.div<TimeColumnStyleProps>`
     grid-row: 3 / auto;
     gap: 0.25rem;
     width: 1.375rem;
-    transition: ${Transition.Base};
+    transition: ${V2_Transition.Base};
     overflow: hidden;
 
     ${(props) => props.$height && `height: ${props.$height}px;`}

src/tooltip/tooltip.styles.tsx

@@ -2,7 +2,7 @@ import { Card } from "src/card";
 import styled, { css } from "styled-components";
 import { V2_Color } from "../v2_color";
 import { V2_MediaQuery } from "../v2_media";
-import { Transition } from "../transition";
+import { V2_Transition } from "../v2_transition";
 import { TooltipPosition } from "./types";
 
 // =============================================================================
@@ -21,14 +21,14 @@ const getVisibilityStyle = (visible: boolean) => {
         return css`
             visibility: "visible";
             opacity: 1;
-            transition: ${Transition.Base};
+            transition: ${V2_Transition.Base};
             z-index: 2;
         `;
     } else {
         return css`
             visibility: "hidden";
             opacity: 0;
-            transition: ${Transition.Base};
+            transition: ${V2_Transition.Base};
             z-index: -1;
         `;
     }

src/v2_media/media.ts

@@ -1,4 +1,4 @@
-import { MediaWidths as MediaWidthsSpec } from "../spec/media-spec";
+import { MediaWidths as MediaWidthsSpec } from "../v2_spec/media-spec";
 import { V2_MediaType, V2_MediaWidth } from "./types";
 
 // =============================================================================

src/v2_text/helper.ts

@@ -1,6 +1,6 @@
 import { css } from "styled-components";
-import { FontFamily } from "../spec/text-spec/font-spec";
-import { FontWeightSpec } from "../spec/text-spec/types";
+import { FontFamily } from "../v2_spec/text-spec/font-spec";
+import { FontWeightSpec } from "../v2_spec/text-spec/types";
 import { V2_TextLinkSizeType, V2_TextSizeType, V2_TextWeight } from "./types";
 import { V2_TextStyle } from "./text-style";
 

src/v2_theme/color-theme-helper.ts

@@ -1,10 +1,10 @@
 import { V2_ColorSet } from "../v2_color/types";
-import { BaseColorSet } from "../spec/color-spec/base-color-set";
-import { BookingSGColorSet } from "../spec/color-spec/bookingsg-color-set";
-import { CCubeColorSet } from "../spec/color-spec/ccube-color-set";
-import { MyLegacyColorSet } from "../spec/color-spec/mylegacy-color-set";
-import { OneServiceColorSet } from "../spec/color-spec/oneservice-color-set";
-import { RBSColorSet } from "../spec/color-spec/rbs-color-set";
+import { BaseColorSet } from "../v2_spec/color-spec/base-color-set";
+import { BookingSGColorSet } from "../v2_spec/color-spec/bookingsg-color-set";
+import { CCubeColorSet } from "../v2_spec/color-spec/ccube-color-set";
+import { MyLegacyColorSet } from "../v2_spec/color-spec/mylegacy-color-set";
+import { OneServiceColorSet } from "../v2_spec/color-spec/oneservice-color-set";
+import { RBSColorSet } from "../v2_spec/color-spec/rbs-color-set";
 import { getCollection, getValue } from "./helper";
 import {
     V2_ColorCollectionsMap,

src/v2_theme/design-token-helper.ts

@@ -1,7 +1,7 @@
 import { CssValue, V2_DesignTokenSet } from "../v2_design-token/types";
 
-import { BaseDesignTokenSet } from "../spec/design-token-spec/base-design-token-set";
-import { RBSDesignTokenSet } from "../spec/design-token-spec/rbs-design-token-set";
+import { BaseDesignTokenSet } from "../v2_spec/design-token-spec/base-design-token-set";
+import { RBSDesignTokenSet } from "../v2_spec/design-token-spec/rbs-design-token-set";
 import { getCollection, getValue } from "./helper";
 import {
     V2_DesignTokenCollectionsMap,

src/v2_theme/text-theme-helper.ts

@@ -1,6 +1,6 @@
-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 { BaseTextStyleSet } from "../v2_spec/text-spec/base-text-style-set";
+import { BasePlusSansJakartaStyleSet } from "../v2_spec/text-spec/base-plus-jakarta-sans-text-style-set";
+import { OneServiceTextStyleSet } from "../v2_spec/text-spec/oneservice-text-style-set";
 import { V2_TextStyleSetType } from "../v2_text/types";
 import { getCollection, getValue } from "./helper";
 import {

src/transition/index.ts → src/v2_transition/index.ts

@@ -2,7 +2,8 @@ const Base = "all 300ms cubic-bezier(0.21, 0.79, 0.53, 1)";
 const Custom = (duration: number) =>
     `all ${duration}ms cubic-bezier(0.21, 0.79, 0.53, 1)`;
 
-export const Transition = {
+/** @deprecated */
+export const V2_Transition = {
     Base,
     Custom,
 };

stories/storybook-common/story-container.tsx

@@ -1,6 +1,6 @@
 import { ReactRenderer } from "@storybook/react";
 import { DecoratorFunction } from "@storybook/types";
-import { MediaWidths } from "src/spec/media-spec";
+import { MediaWidths } from "src/v2_spec/media-spec";
 import { Typography } from "src/typography";
 import { V2_MediaQuery } from "src/v2_media";
 import styled from "styled-components";

stories/v2_color/base-color.mdx

@@ -1,5 +1,5 @@
 import { Meta, Unstyled } from "@storybook/blocks";
-import { BaseColorSet } from "src/spec/color-spec/base-color-set";
+import { BaseColorSet } from "src/v2_spec/color-spec/base-color-set";
 import { V2_Text } from "src/v2_text";
 import { PreviewBox } from "../storybook-common";
 import { ColorPalette } from "./doc-color-palette";

stories/v2_color/bsg-color.mdx

@@ -1,5 +1,5 @@
 import { Meta, Unstyled } from "@storybook/blocks";
-import { BookingSGColorSet } from "src/spec/color-spec/bookingsg-color-set";
+import { BookingSGColorSet } from "src/v2_spec/color-spec/bookingsg-color-set";
 import { V2_Text } from "src/v2_text";
 import { PreviewBox } from "../storybook-common";
 import { ColorPalette } from "./doc-color-palette";

stories/v2_color/ccube-color.mdx

@@ -1,5 +1,5 @@
 import { Meta, Unstyled } from "@storybook/blocks";
-import { CCubeColorSet } from "src/spec/color-spec/ccube-color-set";
+import { CCubeColorSet } from "src/v2_spec/color-spec/ccube-color-set";
 import { V2_Text } from "src/v2_text";
 import { PreviewBox } from "../storybook-common";
 import { ColorPalette } from "./doc-color-palette";

stories/v2_color/mylegacy-color.mdx

@@ -1,5 +1,5 @@
 import { Meta, Unstyled } from "@storybook/blocks";
-import { MyLegacyColorSet } from "src/spec/color-spec/mylegacy-color-set";
+import { MyLegacyColorSet } from "src/v2_spec/color-spec/mylegacy-color-set";
 import { V2_Text } from "src/v2_text";
 import { PreviewBox } from "../storybook-common";
 import { ColorPalette } from "./doc-color-palette";

stories/v2_color/oneservice-color.mdx

@@ -1,5 +1,5 @@
 import { Meta, Unstyled } from "@storybook/blocks";
-import { OneServiceColorSet } from "src/spec/color-spec/oneservice-color-set";
+import { OneServiceColorSet } from "src/v2_spec/color-spec/oneservice-color-set";
 import { V2_Text } from "src/v2_text";
 import { PreviewBox } from "../storybook-common";
 import { ColorPalette } from "./doc-color-palette";