Skip to content

Commit

Permalink
[CCUBE-1571][MAHI]Migrate button and Overlay components to V3
Browse files Browse the repository at this point in the history
  • Loading branch information
@mahidhar-reddy09
mahidhar-reddy09 committed Oct 15, 2024
1 parent 2b76796 commit 38774c3
Show file tree
Hide file tree
Showing 6 changed files with 74 additions and 80 deletions.
23 changes: 3 additions & 20 deletions src/button-with-icon/button-with-icon.style.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -20,24 +20,7 @@ export const MainButtonWithIcon = styled(Main)<MainStylePropsWithIcon>`
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;
}
`;
}
}}
`;
120 changes: 66 additions & 54 deletions src/button/button.style.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<MainStyleProps>`
padding: 0.5rem 1rem;
Expand All @@ -16,83 +14,86 @@ export const Main = styled.button<MainStyleProps>`
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
// -----------------------------------------------------------------------------
${(props) => {
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"]};
}
`;
}
}}
Expand All @@ -104,19 +105,30 @@ export const Main = styled.button<MainStyleProps>`
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;
}
`;
Expand All @@ -128,18 +140,18 @@ export const Spinner = styled(ComponentLoadingSpinner)<MainStyleProps>`
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;
}
Expand Down
2 changes: 1 addition & 1 deletion src/button/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 3 additions & 1 deletion src/overlay/overlay.styles.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import styled, { css } from "styled-components";
import { StyleProps } from "./types";
import { Colour } from "../theme";

const getBackdropFilter = (blur: boolean) => {
let styleString = "";
Expand Down Expand Up @@ -37,7 +38,8 @@ export const Wrapper = styled.div<StyleProps>`
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;
Expand Down
3 changes: 1 addition & 2 deletions src/overlay/overlay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ export const Overlay = ({
rootId,
onOverlayClick,
children,
backgroundOpacity,
backgroundBlur = true,
disableTransition = false,
enableOverlayClick = false,
Expand Down Expand Up @@ -180,7 +179,7 @@ export const Overlay = ({
<Wrapper
data-testid={"overlay-wrapper"}
$show={show}
$backgroundOpacity={backgroundOpacity || (isStacked ? 0.5 : 0.8)}
$stacked={isStacked}
$backgroundBlur={backgroundBlur}
$disableTransition={disableTransition}
$enableOverlayClick={enableOverlayClick}
Expand Down
2 changes: 0 additions & 2 deletions src/overlay/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ export interface OverlayProps {
rootId?:
| string
| undefined /* the id of the root element to attach the overlay to */;
backgroundOpacity?: number | undefined;
backgroundBlur?: boolean | undefined;
disableTransition?: boolean | undefined;
enableOverlayClick?: boolean | undefined;
Expand All @@ -19,7 +18,6 @@ export interface OverlayProps {
*/
export interface StyleProps {
$show: boolean;
$backgroundOpacity?: number | undefined;
$backgroundBlur?: boolean | undefined;
$disableTransition?: boolean | undefined;
$enableOverlayClick?: boolean | undefined;
Expand Down

0 comments on commit 38774c3

Please sign in to comment.