From 830302a043b39cc76e3379eb546c3acdf419ae27 Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Wed, 4 Dec 2024 15:14:04 +0800 Subject: [PATCH 1/2] [CCUBE][MAHI]Deprecate spec and transition to v2 --- codemods/deprecate-v2-tokens/data.ts | 8 ++++++++ src/box-container/box-container.styles.tsx | 4 ++-- src/countdown-timer/countdown-timer.tsx | 2 +- src/error-display/helper.ts | 2 +- src/filter/filter.tsx | 2 +- src/index.ts | 2 +- src/input-group/input-group-list-addon.style.tsx | 4 ++-- src/input-textarea/textarea.style.tsx | 4 ++-- src/navbar/brand.styles.tsx | 4 ++-- src/navbar/navbar.styles.tsx | 4 ++-- src/navbar/navbar.tsx | 2 +- src/popover-v2/popover.tsx | 2 +- src/popover/popover-hoc.tsx | 2 +- src/popover/popover.styles.tsx | 6 +++--- src/popover/popover.tsx | 2 +- .../dropdown-list-v2/expandable-element.styles.tsx | 4 ++-- .../dropdown-wrapper/dropdown-wrapper.styles.tsx | 4 ++-- .../time-slot-bar-week-days.style.tsx | 6 +++--- src/tooltip/tooltip.styles.tsx | 6 +++--- src/v2_media/media.ts | 2 +- src/{spec => v2_spec}/color-spec/base-color-set.ts | 0 .../color-spec/bookingsg-color-set.ts | 0 src/{spec => v2_spec}/color-spec/ccube-color-set.ts | 0 .../color-spec/mylegacy-color-set.ts | 0 .../color-spec/oneservice-color-set.ts | 0 src/{spec => v2_spec}/color-spec/rbs-color-set.ts | 0 .../design-token-spec/base-design-token-set.ts | 0 .../design-token-spec/rbs-design-token-set.ts | 0 src/{spec => v2_spec}/media-spec.ts | 0 .../base-plus-jakarta-sans-text-style-set.ts | 0 .../text-spec/base-text-style-set.ts | 0 src/{spec => v2_spec}/text-spec/font-spec.ts | 0 .../text-spec/oneservice-text-style-set.ts | 0 src/{spec => v2_spec}/text-spec/types.ts | 0 src/v2_text/helper.ts | 4 ++-- src/v2_theme/color-theme-helper.ts | 12 ++++++------ src/v2_theme/design-token-helper.ts | 4 ++-- src/v2_theme/text-theme-helper.ts | 6 +++--- src/{transition => v2_transition}/index.ts | 3 ++- stories/storybook-common/story-container.tsx | 2 +- tests/box-container/box-container.spec.tsx | 2 +- 41 files changed, 57 insertions(+), 48 deletions(-) rename src/{spec => v2_spec}/color-spec/base-color-set.ts (100%) rename src/{spec => v2_spec}/color-spec/bookingsg-color-set.ts (100%) rename src/{spec => v2_spec}/color-spec/ccube-color-set.ts (100%) rename src/{spec => v2_spec}/color-spec/mylegacy-color-set.ts (100%) rename src/{spec => v2_spec}/color-spec/oneservice-color-set.ts (100%) rename src/{spec => v2_spec}/color-spec/rbs-color-set.ts (100%) rename src/{spec => v2_spec}/design-token-spec/base-design-token-set.ts (100%) rename src/{spec => v2_spec}/design-token-spec/rbs-design-token-set.ts (100%) rename src/{spec => v2_spec}/media-spec.ts (100%) rename src/{spec => v2_spec}/text-spec/base-plus-jakarta-sans-text-style-set.ts (100%) rename src/{spec => v2_spec}/text-spec/base-text-style-set.ts (100%) rename src/{spec => v2_spec}/text-spec/font-spec.ts (100%) rename src/{spec => v2_spec}/text-spec/oneservice-text-style-set.ts (100%) rename src/{spec => v2_spec}/text-spec/types.ts (100%) rename src/{transition => v2_transition}/index.ts (78%) diff --git a/codemods/deprecate-v2-tokens/data.ts b/codemods/deprecate-v2-tokens/data.ts index c5493fc74..c52650f2d 100644 --- a/codemods/deprecate-v2-tokens/data.ts +++ b/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", + }, ]; diff --git a/src/box-container/box-container.styles.tsx b/src/box-container/box-container.styles.tsx index 817fa83da..6d8bc15c3 100644 --- a/src/box-container/box-container.styles.tsx +++ b/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` transform: rotate(${(props) => (props.$expanded ? 180 : 0)}deg); - transition: ${Transition.Base}; + transition: ${V2_Transition.Base}; `; export const HandleIcon = styled(ChevronDownIcon)` diff --git a/src/countdown-timer/countdown-timer.tsx b/src/countdown-timer/countdown-timer.tsx index 39ecfd01c..d7834f47d 100644 --- a/src/countdown-timer/countdown-timer.tsx +++ b/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, diff --git a/src/error-display/helper.ts b/src/error-display/helper.ts index 47bbb2355..d4e1986cb 100644 --- a/src/error-display/helper.ts +++ b/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 { diff --git a/src/filter/filter.tsx b/src/filter/filter.tsx index d92038b1d..03328b292 100644 --- a/src/filter/filter.tsx +++ b/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"; diff --git a/src/index.ts b/src/index.ts index b4afc3bd5..c55e33113 100644 --- a/src/index.ts +++ b/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"; diff --git a/src/input-group/input-group-list-addon.style.tsx b/src/input-group/input-group-list-addon.style.tsx index 6e714d78b..09ac4b3c5 100644 --- a/src/input-group/input-group-list-addon.style.tsx +++ b/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` transform: rotate(${(props) => (props.$expanded ? 180 : 0)}deg); - transition: ${Transition.Base}; + transition: ${V2_Transition.Base}; margin: 0 0.75rem; `; diff --git a/src/input-textarea/textarea.style.tsx b/src/input-textarea/textarea.style.tsx index cfbe47808..47e6e43ee 100644 --- a/src/input-textarea/textarea.style.tsx +++ b/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` 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]}; diff --git a/src/navbar/brand.styles.tsx b/src/navbar/brand.styles.tsx index 672af6423..316d9db1a 100644 --- a/src/navbar/brand.styles.tsx +++ b/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` img { width: auto; height: 100%; - transition: ${Transition.Base}; + transition: ${V2_Transition.Base}; object-fit: contain; } `; diff --git a/src/navbar/navbar.styles.tsx b/src/navbar/navbar.styles.tsx index ebb7f45f6..da255a538 100644 --- a/src/navbar/navbar.styles.tsx +++ b/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` justify-content: space-between; align-items: center; position: relative; - transition: ${Transition.Base}; + transition: ${V2_Transition.Base}; ${MediaQuery.MaxWidth.lg} { height: ${NAVBAR_MOBILE_HEIGHT}rem; diff --git a/src/navbar/navbar.tsx b/src/navbar/navbar.tsx index 8c0f43231..583424c13 100644 --- a/src/navbar/navbar.tsx +++ b/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"; diff --git a/src/popover-v2/popover.tsx b/src/popover-v2/popover.tsx index 544872c95..ba2da9d1c 100644 --- a/src/popover-v2/popover.tsx +++ b/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, diff --git a/src/popover/popover-hoc.tsx b/src/popover/popover-hoc.tsx index d8263e8f4..fa46a7a34 100644 --- a/src/popover/popover-hoc.tsx +++ b/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"; diff --git a/src/popover/popover.styles.tsx b/src/popover/popover.styles.tsx index 3ee395416..3dbb4ab02 100644 --- a/src/popover/popover.styles.tsx +++ b/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; `; } diff --git a/src/popover/popover.tsx b/src/popover/popover.tsx index 7a7e9ca83..f5eb8e37e 100644 --- a/src/popover/popover.tsx +++ b/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, diff --git a/src/shared/dropdown-list-v2/expandable-element.styles.tsx b/src/shared/dropdown-list-v2/expandable-element.styles.tsx index 20f0011f0..0500f2be4 100644 --- a/src/shared/dropdown-list-v2/expandable-element.styles.tsx +++ b/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` 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]}; diff --git a/src/shared/dropdown-wrapper/dropdown-wrapper.styles.tsx b/src/shared/dropdown-wrapper/dropdown-wrapper.styles.tsx index 121ad4f62..e7b452921 100644 --- a/src/shared/dropdown-wrapper/dropdown-wrapper.styles.tsx +++ b/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` export const IconContainer = styled.div` transform: rotate(${(props) => (props.expanded ? 180 : 0)}deg); - transition: ${Transition.Base}; + transition: ${V2_Transition.Base}; margin-left: 1rem; `; diff --git a/src/time-slot-bar-week/time-slot-bar-week-days.style.tsx b/src/time-slot-bar-week/time-slot-bar-week-days.style.tsx index b92d61b86..959792948 100644 --- a/src/time-slot-bar-week/time-slot-bar-week-days.style.tsx +++ b/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` 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;`} diff --git a/src/tooltip/tooltip.styles.tsx b/src/tooltip/tooltip.styles.tsx index 97992bd71..5d57af284 100644 --- a/src/tooltip/tooltip.styles.tsx +++ b/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; `; } diff --git a/src/v2_media/media.ts b/src/v2_media/media.ts index 2e29fe201..7167391bb 100644 --- a/src/v2_media/media.ts +++ b/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"; // ============================================================================= diff --git a/src/spec/color-spec/base-color-set.ts b/src/v2_spec/color-spec/base-color-set.ts similarity index 100% rename from src/spec/color-spec/base-color-set.ts rename to src/v2_spec/color-spec/base-color-set.ts diff --git a/src/spec/color-spec/bookingsg-color-set.ts b/src/v2_spec/color-spec/bookingsg-color-set.ts similarity index 100% rename from src/spec/color-spec/bookingsg-color-set.ts rename to src/v2_spec/color-spec/bookingsg-color-set.ts diff --git a/src/spec/color-spec/ccube-color-set.ts b/src/v2_spec/color-spec/ccube-color-set.ts similarity index 100% rename from src/spec/color-spec/ccube-color-set.ts rename to src/v2_spec/color-spec/ccube-color-set.ts diff --git a/src/spec/color-spec/mylegacy-color-set.ts b/src/v2_spec/color-spec/mylegacy-color-set.ts similarity index 100% rename from src/spec/color-spec/mylegacy-color-set.ts rename to src/v2_spec/color-spec/mylegacy-color-set.ts diff --git a/src/spec/color-spec/oneservice-color-set.ts b/src/v2_spec/color-spec/oneservice-color-set.ts similarity index 100% rename from src/spec/color-spec/oneservice-color-set.ts rename to src/v2_spec/color-spec/oneservice-color-set.ts diff --git a/src/spec/color-spec/rbs-color-set.ts b/src/v2_spec/color-spec/rbs-color-set.ts similarity index 100% rename from src/spec/color-spec/rbs-color-set.ts rename to src/v2_spec/color-spec/rbs-color-set.ts diff --git a/src/spec/design-token-spec/base-design-token-set.ts b/src/v2_spec/design-token-spec/base-design-token-set.ts similarity index 100% rename from src/spec/design-token-spec/base-design-token-set.ts rename to src/v2_spec/design-token-spec/base-design-token-set.ts diff --git a/src/spec/design-token-spec/rbs-design-token-set.ts b/src/v2_spec/design-token-spec/rbs-design-token-set.ts similarity index 100% rename from src/spec/design-token-spec/rbs-design-token-set.ts rename to src/v2_spec/design-token-spec/rbs-design-token-set.ts diff --git a/src/spec/media-spec.ts b/src/v2_spec/media-spec.ts similarity index 100% rename from src/spec/media-spec.ts rename to src/v2_spec/media-spec.ts diff --git a/src/spec/text-spec/base-plus-jakarta-sans-text-style-set.ts b/src/v2_spec/text-spec/base-plus-jakarta-sans-text-style-set.ts similarity index 100% rename from src/spec/text-spec/base-plus-jakarta-sans-text-style-set.ts rename to src/v2_spec/text-spec/base-plus-jakarta-sans-text-style-set.ts diff --git a/src/spec/text-spec/base-text-style-set.ts b/src/v2_spec/text-spec/base-text-style-set.ts similarity index 100% rename from src/spec/text-spec/base-text-style-set.ts rename to src/v2_spec/text-spec/base-text-style-set.ts diff --git a/src/spec/text-spec/font-spec.ts b/src/v2_spec/text-spec/font-spec.ts similarity index 100% rename from src/spec/text-spec/font-spec.ts rename to src/v2_spec/text-spec/font-spec.ts diff --git a/src/spec/text-spec/oneservice-text-style-set.ts b/src/v2_spec/text-spec/oneservice-text-style-set.ts similarity index 100% rename from src/spec/text-spec/oneservice-text-style-set.ts rename to src/v2_spec/text-spec/oneservice-text-style-set.ts diff --git a/src/spec/text-spec/types.ts b/src/v2_spec/text-spec/types.ts similarity index 100% rename from src/spec/text-spec/types.ts rename to src/v2_spec/text-spec/types.ts diff --git a/src/v2_text/helper.ts b/src/v2_text/helper.ts index f0ad7695f..b3a032b57 100644 --- a/src/v2_text/helper.ts +++ b/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"; diff --git a/src/v2_theme/color-theme-helper.ts b/src/v2_theme/color-theme-helper.ts index 180520171..c3e5543cf 100644 --- a/src/v2_theme/color-theme-helper.ts +++ b/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, diff --git a/src/v2_theme/design-token-helper.ts b/src/v2_theme/design-token-helper.ts index 2d8af0041..d90ef329e 100644 --- a/src/v2_theme/design-token-helper.ts +++ b/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, diff --git a/src/v2_theme/text-theme-helper.ts b/src/v2_theme/text-theme-helper.ts index 271d76445..ebff9282f 100644 --- a/src/v2_theme/text-theme-helper.ts +++ b/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 { diff --git a/src/transition/index.ts b/src/v2_transition/index.ts similarity index 78% rename from src/transition/index.ts rename to src/v2_transition/index.ts index 9026fc7fa..cfdcb74be 100644 --- a/src/transition/index.ts +++ b/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, }; diff --git a/stories/storybook-common/story-container.tsx b/stories/storybook-common/story-container.tsx index 1da36d39c..8557d0286 100644 --- a/stories/storybook-common/story-container.tsx +++ b/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"; diff --git a/tests/box-container/box-container.spec.tsx b/tests/box-container/box-container.spec.tsx index 6732e05a1..3fc812285 100644 --- a/tests/box-container/box-container.spec.tsx +++ b/tests/box-container/box-container.spec.tsx @@ -1,6 +1,6 @@ import { render, screen } from "@testing-library/react"; import { BoxContainer } from "../../src"; -import { BaseColorSet } from "../../src/spec/color-spec/base-color-set"; +import { BaseColorSet } from "../../src/v2_spec/color-spec/base-color-set"; // ============================================================================= // UNIT TESTS From af905c828760717ed669e1936b409486a270e7b3 Mon Sep 17 00:00:00 2001 From: roll Date: Wed, 4 Dec 2024 21:08:59 +0800 Subject: [PATCH 2/2] [V3][RL] Update story imports --- stories/v2_color/base-color.mdx | 2 +- stories/v2_color/bsg-color.mdx | 2 +- stories/v2_color/ccube-color.mdx | 2 +- stories/v2_color/mylegacy-color.mdx | 2 +- stories/v2_color/oneservice-color.mdx | 2 +- stories/v2_color/rbs-color.mdx | 2 +- stories/v2_text/c-base-collection.mdx | 2 +- stories/v2_text/d-oneservice-collection.mdx | 2 +- stories/v2_text/e-plus-jakarta-sans-collection.mdx | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/stories/v2_color/base-color.mdx b/stories/v2_color/base-color.mdx index a99af8441..41e3588d4 100644 --- a/stories/v2_color/base-color.mdx +++ b/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"; diff --git a/stories/v2_color/bsg-color.mdx b/stories/v2_color/bsg-color.mdx index b6ed55404..054a88345 100644 --- a/stories/v2_color/bsg-color.mdx +++ b/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"; diff --git a/stories/v2_color/ccube-color.mdx b/stories/v2_color/ccube-color.mdx index 8e13e3a71..29509e66d 100644 --- a/stories/v2_color/ccube-color.mdx +++ b/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"; diff --git a/stories/v2_color/mylegacy-color.mdx b/stories/v2_color/mylegacy-color.mdx index d06b2cd9a..1c8b8357d 100644 --- a/stories/v2_color/mylegacy-color.mdx +++ b/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"; diff --git a/stories/v2_color/oneservice-color.mdx b/stories/v2_color/oneservice-color.mdx index a6da4ee2d..45b9a6913 100644 --- a/stories/v2_color/oneservice-color.mdx +++ b/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"; diff --git a/stories/v2_color/rbs-color.mdx b/stories/v2_color/rbs-color.mdx index bf15315d3..07ad3f42a 100644 --- a/stories/v2_color/rbs-color.mdx +++ b/stories/v2_color/rbs-color.mdx @@ -1,5 +1,5 @@ import { Meta, Unstyled } from "@storybook/blocks"; -import { RBSColorSet } from "src/spec/color-spec/rbs-color-set"; +import { RBSColorSet } from "src/v2_spec/color-spec/rbs-color-set"; import { V2_Text } from "src/v2_text"; import { PreviewBox } from "../storybook-common"; import { ColorPalette } from "./doc-color-palette"; diff --git a/stories/v2_text/c-base-collection.mdx b/stories/v2_text/c-base-collection.mdx index e1998508c..7af59e07b 100644 --- a/stories/v2_text/c-base-collection.mdx +++ b/stories/v2_text/c-base-collection.mdx @@ -1,6 +1,6 @@ import { Meta, Unstyled } from "@storybook/blocks"; import { V2_Text } from "src/v2_text"; -import { BaseTextStyleSet } from "src/spec/text-spec/base-text-style-set"; +import { BaseTextStyleSet } from "src/v2_spec/text-spec/base-text-style-set"; import { FontDisplay, FontSizeDisplay } from "./collection-doc-elements"; import { V2_BaseTheme } from "../../src"; import { ThemeProvider } from "styled-components"; diff --git a/stories/v2_text/d-oneservice-collection.mdx b/stories/v2_text/d-oneservice-collection.mdx index a898eca93..5310647ee 100644 --- a/stories/v2_text/d-oneservice-collection.mdx +++ b/stories/v2_text/d-oneservice-collection.mdx @@ -1,6 +1,6 @@ import { Meta, Unstyled } from "@storybook/blocks"; import { V2_Text } from "src/v2_text"; -import { OneServiceTextStyleSet } from "src/spec/text-spec/oneservice-text-style-set"; +import { OneServiceTextStyleSet } from "src/v2_spec/text-spec/oneservice-text-style-set"; import { FontDisplay, FontSizeDisplay } from "./collection-doc-elements"; import { V2_OneServiceTheme } from "../../src"; import { ThemeProvider } from "styled-components"; diff --git a/stories/v2_text/e-plus-jakarta-sans-collection.mdx b/stories/v2_text/e-plus-jakarta-sans-collection.mdx index 782fbfc78..fb41b1300 100644 --- a/stories/v2_text/e-plus-jakarta-sans-collection.mdx +++ b/stories/v2_text/e-plus-jakarta-sans-collection.mdx @@ -1,6 +1,6 @@ import { Meta, Unstyled } from "@storybook/blocks"; import { V2_Text } from "src/v2_text"; -import { BasePlusSansJakartaStyleSet } from "src/spec/text-spec/base-plus-jakarta-sans-text-style-set"; +import { BasePlusSansJakartaStyleSet } from "src/v2_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";