From ea1a175c410af841d4c7ded7af31394bc4399c54 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Fri, 27 Sep 2024 11:34:14 +0200 Subject: [PATCH] feat(SW-440) implemented changes to buttons according to figma --- .../HotelPage/Map/MapCard/index.tsx | 1 + .../TempDesignSystem/Button/button.module.css | 29 ++++++++--- components/TempDesignSystem/Button/index.tsx | 13 ++++- .../TempDesignSystem/Button/variants.ts | 3 ++ components/TempDesignSystem/Card/index.tsx | 7 ++- utils/cardTheme.ts | 52 ++++--------------- 6 files changed, 50 insertions(+), 55 deletions(-) diff --git a/components/ContentType/HotelPage/Map/MapCard/index.tsx b/components/ContentType/HotelPage/Map/MapCard/index.tsx index 79e9759be..c305ff445 100644 --- a/components/ContentType/HotelPage/Map/MapCard/index.tsx +++ b/components/ContentType/HotelPage/Map/MapCard/index.tsx @@ -55,6 +55,7 @@ export default function MapCard({ hotelName, pois }: MapCardProps) { theme="base" intent="secondary" size="small" + fullWidth className={styles.ctaButton} onClick={openDynamicMap} > diff --git a/components/TempDesignSystem/Button/button.module.css b/components/TempDesignSystem/Button/button.module.css index e44619deb..f6499c5c1 100644 --- a/components/TempDesignSystem/Button/button.module.css +++ b/components/TempDesignSystem/Button/button.module.css @@ -1,7 +1,6 @@ .btn { background: none; - /* No variable yet for radius 50px */ - border-radius: 50px; + border-radius: var(--Corner-radius-Rounded); cursor: pointer; margin: 0; padding: 0; @@ -10,12 +9,12 @@ background-color 300ms ease, color 300ms ease; - /* TODO: Waiting for variables for buttons from Design team */ font-family: var(--typography-Body-Bold-fontFamily); font-size: var(--typography-Body-Bold-fontSize); font-weight: 500; - line-height: 24px; + line-height: var(--typography-Body-Bold-lineHeight); letter-spacing: 0.6%; + text-decoration: none; } .wrapping { @@ -23,6 +22,10 @@ padding-right: 0 !important; } +.fullWidth { + width: 100%; +} + /* INTENT */ .primary, a.primary { @@ -70,20 +73,32 @@ a.default { /* SIZES */ .btn.small { + font-size: var(--typography-Caption-Bold-fontSize); + line-height: var(--typography-Caption-Bold-lineHeight); gap: var(--Spacing-x-quarter); - height: 40px; + padding: calc(var(--Spacing-x1) + 2px) var(--Spacing-x2); /* Special case padding to adjust the missing border */ +} + +.btn.small.secondary { padding: var(--Spacing-x1) var(--Spacing-x2); } .btn.medium { gap: var(--Spacing-x-half); - height: 48px; + padding: calc(var(--Spacing-x-one-and-half) + 2px) var(--Spacing-x2); /* Special case padding to adjust the missing border */ +} + +.medium.secondary { padding: var(--Spacing-x-one-and-half) var(--Spacing-x2); } .btn.large { gap: var(--Spacing-x-half); - height: 56px; + padding: calc(var(--Spacing-x2) + 2px) var(--Spacing-x3); /* Special case padding to adjust the missing border */ +} + +.large.secondary { + gap: var(--Spacing-x-half); padding: var(--Spacing-x2) var(--Spacing-x3); } diff --git a/components/TempDesignSystem/Button/index.tsx b/components/TempDesignSystem/Button/index.tsx index 38261e61a..20bfbd292 100644 --- a/components/TempDesignSystem/Button/index.tsx +++ b/components/TempDesignSystem/Button/index.tsx @@ -8,14 +8,23 @@ import { buttonVariants } from "./variants" import type { ButtonProps } from "./button" export default function Button(props: ButtonProps) { - const { className, intent, size, theme, wrapping, variant, ...restProps } = - props + const { + className, + intent, + size, + theme, + fullWidth, + wrapping, + variant, + ...restProps + } = props const classNames = buttonVariants({ className, intent, size, theme, + fullWidth, wrapping, variant, }) diff --git a/components/TempDesignSystem/Button/variants.ts b/components/TempDesignSystem/Button/variants.ts index 301613544..77abd40e4 100644 --- a/components/TempDesignSystem/Button/variants.ts +++ b/components/TempDesignSystem/Button/variants.ts @@ -33,6 +33,9 @@ export const buttonVariants = cva(styles.btn, { wrapping: { true: styles.wrapping, }, + fullWidth: { + true: styles.fullWidth, + }, }, defaultVariants: { intent: "primary", diff --git a/components/TempDesignSystem/Card/index.tsx b/components/TempDesignSystem/Card/index.tsx index 8d29226bf..94cc08773 100644 --- a/components/TempDesignSystem/Card/index.tsx +++ b/components/TempDesignSystem/Card/index.tsx @@ -1,6 +1,7 @@ +import Link from "next/link" + import Image from "@/components/Image" import Button from "@/components/TempDesignSystem/Button" -import Link from "@/components/TempDesignSystem/Link" import BiroScript from "@/components/TempDesignSystem/Text/BiroScript" import Body from "@/components/TempDesignSystem/Text/Body" import Title from "@/components/TempDesignSystem/Text/Title" @@ -26,7 +27,7 @@ export default function Card({ onPrimaryButtonClick, onSecondaryButtonClick, }: CardProps) { - const { buttonTheme, primaryLinkColor, secondaryLinkColor } = getTheme(theme) + const buttonTheme = getTheme(theme) imageHeight = imageHeight || 320 imageWidth = @@ -85,7 +86,6 @@ export default function Card({ {primaryButton.title} @@ -103,7 +103,6 @@ export default function Card({ {secondaryButton.title} diff --git a/utils/cardTheme.ts b/utils/cardTheme.ts index f49b7c677..335d5ed3a 100644 --- a/utils/cardTheme.ts +++ b/utils/cardTheme.ts @@ -1,53 +1,21 @@ import type { ButtonProps } from "@/components/TempDesignSystem/Button/button" import type { CardProps } from "@/components/TempDesignSystem/Card/card" -import type { LinkProps } from "@/components/TempDesignSystem/Link/link" - -export function getTheme(theme: CardProps["theme"]) { - let buttonTheme: ButtonProps["theme"] = "primaryLight" - let primaryLinkColor: LinkProps["color"] = "pale" - let secondaryLinkColor: LinkProps["color"] = "burgundy" +export function getTheme(theme: CardProps["theme"]): ButtonProps["theme"] { switch (theme) { - case "one": - buttonTheme = "primaryLight" - primaryLinkColor = "pale" - secondaryLinkColor = "burgundy" - break case "two": - buttonTheme = "secondaryLight" - primaryLinkColor = "pale" - secondaryLinkColor = "burgundy" - break + return "secondaryLight" case "three": - buttonTheme = "tertiaryLight" - primaryLinkColor = "pale" - secondaryLinkColor = "burgundy" - break + return "tertiaryLight" case "primaryDark": - buttonTheme = "primaryDark" - primaryLinkColor = "burgundy" - secondaryLinkColor = "pale" - break - case "primaryDim": - buttonTheme = "primaryLight" - primaryLinkColor = "pale" - secondaryLinkColor = "burgundy" - break - case "primaryInverted": - buttonTheme = "primaryLight" - primaryLinkColor = "pale" - secondaryLinkColor = "burgundy" - break + return "primaryDark" case "primaryStrong": case "image": - buttonTheme = "primaryStrong" - primaryLinkColor = "red" - secondaryLinkColor = "white" - } - - return { - buttonTheme: buttonTheme, - primaryLinkColor: primaryLinkColor, - secondaryLinkColor: secondaryLinkColor, + return "primaryStrong" + case "one": + case "primaryDim": + case "primaryInverted": + default: + return "primaryLight" } }