From 38774c3b65c4f98a97471fd1952730e10a35c904 Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Mon, 14 Oct 2024 10:26:53 +0800 Subject: [PATCH] [CCUBE-1571][MAHI]Migrate button and Overlay components to V3 --- .../button-with-icon.style.tsx | 23 +--- src/button/button.style.tsx | 120 ++++++++++-------- src/button/types.ts | 2 +- src/overlay/overlay.styles.tsx | 4 +- src/overlay/overlay.tsx | 3 +- src/overlay/types.ts | 2 - 6 files changed, 74 insertions(+), 80 deletions(-) diff --git a/src/button-with-icon/button-with-icon.style.tsx b/src/button-with-icon/button-with-icon.style.tsx index 96ff647d4..81ecc7dfb 100644 --- a/src/button-with-icon/button-with-icon.style.tsx +++ b/src/button-with-icon/button-with-icon.style.tsx @@ -1,4 +1,4 @@ -import styled, { css } from "styled-components"; +import styled from "styled-components"; import { Main } from "../button/button.style"; import { MainStyleProps } from "../button/types"; import { ButtonIconPosition } from "./types"; @@ -20,24 +20,7 @@ export const MainButtonWithIcon = styled(Main)` svg { flex-shrink: 0; + height: 1em; + width: 1em; } - - ${(props) => { - switch (props.$buttonSizeStyle) { - case "small": - return css` - svg { - height: 1rem; - width: 1rem; - } - `; - default: - return css` - svg { - height: 1.125rem; - width: 1.125rem; - } - `; - } - }} `; diff --git a/src/button/button.style.tsx b/src/button/button.style.tsx index 41ea5046a..dfca62642 100644 --- a/src/button/button.style.tsx +++ b/src/button/button.style.tsx @@ -1,10 +1,8 @@ import styled, { css } from "styled-components"; -import { V2_Color } from "../v2_color/color"; -import { V2_MediaQuery } from "../v2_media/media"; import { ComponentLoadingSpinner } from "../shared/component-loading-spinner/component-loading-spinner"; -import { V2_TextStyleHelper } from "../v2_text"; import { MainStyleProps } from "./types"; -import { V2_DesignToken } from "../v2_design-token"; +import { Colour, Font } from "../theme"; +import { MediaQuery } from "../theme"; export const Main = styled.button` padding: 0.5rem 1rem; @@ -16,12 +14,6 @@ export const Main = styled.button` align-items: center; justify-content: center; - @media (hover: hover) { - &:hover { - box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.2); - } - } - // ----------------------------------------------------------------------------- // BUTTON STYLE + TEXT COLOR // ----------------------------------------------------------------------------- @@ -29,70 +21,79 @@ export const Main = styled.button` switch (props.$buttonStyle) { case "secondary": return css` - background-color: ${V2_Color.Neutral[8]}; + background-color: ${Colour.Primitive.white}; border: 1px solid ${props.$buttonIsDanger - ? V2_DesignToken.Button.Danger.Border - : V2_Color.Primary}; + ? Colour["border-error-strong"] + : Colour["border-primary"]}; color: ${props.$buttonIsDanger - ? V2_DesignToken.Button.Danger.Primary - : V2_Color.Primary}; + ? Colour["text-error"] + : Colour["text-primary"]}; + + &:hover, + &:active { + background-color: ${Colour["bg-hover-neutral"]}; + } `; case "light": return css` - background-color: ${V2_Color.Neutral[8]}; - border: 1px solid ${V2_Color.Neutral[5]}; + background-color: ${Colour.bg}; + border: 1px solid ${Colour.border}; color: ${props.$buttonIsDanger - ? V2_DesignToken.Button.Danger.Primary - : V2_Color.Primary}; - `; - case "disabled": - return css` - background-color: ${V2_Color.Neutral[6]}; - border: 1px solid transparent; - cursor: not-allowed; + ? Colour["text-error"] + : Colour["text-primary"]}; - &:hover { - box-shadow: none; + &:hover, + &:active { + background-color: ${Colour["bg-hover-neutral"]}; } - - color: ${V2_Color.Neutral[3]}; `; + case "link": return css` background-color: transparent; - border: none; - border-radius: unset; + border: transparent; + color: ${props.$buttonIsDanger + ? Colour["text-error"] + : Colour["text-primary"]}; + &:hover, + &:active { + background-color: ${Colour["bg-hover-neutral"]}; + } + `; + case "disabled": + return css` + background-color: ${Colour["bg-disabled"]}; + border: 1px solid transparent; + cursor: not-allowed; &:hover { box-shadow: none; } - color: ${props.$buttonIsDanger - ? V2_DesignToken.Button.Danger.Primary - : V2_Color.Primary}; - :hover, - :active, - :focus { - color: ${props.$buttonIsDanger - ? V2_DesignToken.Button.Danger.Hover - : V2_Color.Secondary}; - } + color: ${Colour["text-disabled"]}; `; default: return css` background-color: ${props.$buttonIsDanger - ? V2_DesignToken.Button.Danger.BackgroundColor - : V2_Color.Primary}; + ? Colour["bg-error-strong"] + : Colour["bg-primary"]}; border: 1px solid transparent; - ${V2_MediaQuery.MaxWidth.mobileL} { + ${MediaQuery.MaxWidth.md} { width: 100%; } - color: ${V2_Color.Neutral[8]}; + color: ${Colour["text-inverse"]}; + + &:hover, + &:active { + background-color: ${props.$buttonIsDanger + ? Colour["bg-error-strong-hover"] + : Colour["bg-primary-hover"]}; + } `; } }} @@ -104,19 +105,30 @@ export const Main = styled.button` switch (props.$buttonSizeStyle) { case "small": return css` - height: 2.5rem; - ${V2_TextStyleHelper.getTextStyle("H5", "semibold")} + height: 1.5rem; + ${Font["header-xs-semibold"]} - ${V2_MediaQuery.MaxWidth.mobileS} { + ${MediaQuery.MaxWidth.xxs} { height: auto; } `; + + case "large": + return css` + height: 2.25rem; + ${Font["header-md-semibold"]} + + ${MediaQuery.MaxWidth.xxs} { + height: auto; + } + `; + default: return css` height: 3rem; - ${V2_TextStyleHelper.getTextStyle("H4", "semibold")} + ${Font["header-xs-semibold"]} - ${V2_MediaQuery.MaxWidth.mobileS} { + ${MediaQuery.MaxWidth.xxs} { height: auto; } `; @@ -128,18 +140,18 @@ export const Spinner = styled(ComponentLoadingSpinner)` margin-right: 0.5rem; ${(props) => { let color = props.$buttonIsDanger - ? V2_DesignToken.Button.Danger.Primary - : V2_Color.Primary(props); + ? Colour["text-error"] + : Colour["text-primary"](props); switch (props.$buttonStyle) { case "secondary": case "light": case "link": break; case "disabled": - color = V2_Color.Neutral[3](props); + color = Colour["text-disabled"](props); break; default: - color = V2_Color.Neutral[8](props); + color = Colour["text-inverse"](props); break; } diff --git a/src/button/types.ts b/src/button/types.ts index 2bf067295..e7a085e57 100644 --- a/src/button/types.ts +++ b/src/button/types.ts @@ -24,7 +24,7 @@ export type MainButtonStyle = | "secondary" | "light" | "link"; -export type MainButtonSize = "default" | "small"; +export type MainButtonSize = "default" | "small" | "large"; export interface MainStyleProps extends ComponentLoadingSpinnerProps { $buttonStyle: MainButtonStyle; $buttonSizeStyle?: MainButtonSize | undefined; diff --git a/src/overlay/overlay.styles.tsx b/src/overlay/overlay.styles.tsx index 8b1622cff..f1983d59d 100644 --- a/src/overlay/overlay.styles.tsx +++ b/src/overlay/overlay.styles.tsx @@ -1,5 +1,6 @@ import styled, { css } from "styled-components"; import { StyleProps } from "./types"; +import { Colour } from "../theme"; const getBackdropFilter = (blur: boolean) => { let styleString = ""; @@ -37,7 +38,8 @@ export const Wrapper = styled.div` position: absolute; left: 0; top: 0; - background-color: rgba(5, 1, 1, ${(props) => props.$backgroundOpacity}); + background-color: ${(props) => + props.$stacked ? Colour["overlay-subtle"] : Colour["overlay-strong"]}; backdrop-filter: ${(props) => getBackdropFilter(props.$backgroundBlur)}; transition: opacity 200ms ease; diff --git a/src/overlay/overlay.tsx b/src/overlay/overlay.tsx index be2195388..202bf41ec 100644 --- a/src/overlay/overlay.tsx +++ b/src/overlay/overlay.tsx @@ -9,7 +9,6 @@ export const Overlay = ({ rootId, onOverlayClick, children, - backgroundOpacity, backgroundBlur = true, disableTransition = false, enableOverlayClick = false, @@ -180,7 +179,7 @@ export const Overlay = ({