From d8c19c8917fe14f95b09a76ec305a1e5d4480330 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Tue, 16 Dec 2025 14:37:10 +0000 Subject: [PATCH] fix: Added fullWidth property on button components to set them as full width MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Approved-by: Matilda Landström --- .../ContentType/HotelPage/SidePeeks/Activities/index.tsx | 1 + .../HotelPage/SidePeeks/MeetingsAndConferences/index.tsx | 1 + .../RestaurantBarItem/RestaurantBarItemLinks.tsx | 2 ++ .../SidePeeks/Room/PricesAndAvailabilityButton/index.tsx | 1 + .../HotelPage/SidePeeks/WellnessAndExercise/index.tsx | 2 ++ packages/design-system/lib/components/Button/Button.tsx | 3 ++- .../design-system/lib/components/Button/button.module.css | 4 ++++ packages/design-system/lib/components/Button/variants.ts | 5 +++++ packages/design-system/lib/components/ButtonLink/index.tsx | 5 ++++- packages/design-system/lib/components/FakeButton/index.tsx | 5 ++++- 10 files changed, 26 insertions(+), 3 deletions(-) diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx index 94d985555..8447eeb6c 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx @@ -37,6 +37,7 @@ export default async function ActivitiesSidePeek({ color="Primary" size="Medium" typography="Body/Paragraph/mdBold" + fullWidth > {sidepeekCTA} diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx index 5f7e1fb92..5b6fc852a 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx @@ -72,6 +72,7 @@ export default async function MeetingsAndConferencesSidePeek({ size="Medium" href={meetingPageHref} typography="Body/Paragraph/mdBold" + fullWidth > {intl.formatMessage({ id: "common.readMore", diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/RestaurantBarItemLinks.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/RestaurantBarItemLinks.tsx index 6722dcdaa..452efc0a4 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/RestaurantBarItemLinks.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/RestaurantBarItemLinks.tsx @@ -33,6 +33,7 @@ export function RestaurantBarItemLinks({ href={bookTableUrl} target="_blank" onClick={() => trackClick("book a table", { restaurantName })} + fullWidth > {showDetailsLink ? intl.formatMessage({ @@ -52,6 +53,7 @@ export function RestaurantBarItemLinks({ size="Medium" typography="Body/Paragraph/mdBold" href={restaurantPageHref} + fullWidth > {intl.formatMessage( { diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/PricesAndAvailabilityButton/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/PricesAndAvailabilityButton/index.tsx index 64cd242dd..e201ae64a 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/PricesAndAvailabilityButton/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/PricesAndAvailabilityButton/index.tsx @@ -31,6 +31,7 @@ export default function PricesAndAvailabilityButton({ return ( { trackPricesAndAvailabilityClick( name, diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx index 04af417b1..31ebe1584 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx @@ -51,6 +51,7 @@ export default async function WellnessAndExerciseSidePeek({ variant="Tertiary" color="Primary" typography="Body/Paragraph/mdBold" + fullWidth > {spaPage.buttonCTA} @@ -61,6 +62,7 @@ export default async function WellnessAndExerciseSidePeek({ color="Primary" variant="Secondary" typography="Body/Paragraph/mdBold" + fullWidth > {intl.formatMessage({ id: "sidepeek.wellness.showGymAndWellness", diff --git a/packages/design-system/lib/components/Button/Button.tsx b/packages/design-system/lib/components/Button/Button.tsx index 1c6dc9493..c493aba10 100644 --- a/packages/design-system/lib/components/Button/Button.tsx +++ b/packages/design-system/lib/components/Button/Button.tsx @@ -9,7 +9,7 @@ export function Button({ color, size, wrapping, - + fullWidth, typography, className, children, @@ -21,6 +21,7 @@ export function Button({ size, wrapping, typography, + fullWidth, className, }) diff --git a/packages/design-system/lib/components/Button/button.module.css b/packages/design-system/lib/components/Button/button.module.css index 8fa39963d..2c5a3b7f7 100644 --- a/packages/design-system/lib/components/Button/button.module.css +++ b/packages/design-system/lib/components/Button/button.module.css @@ -9,6 +9,10 @@ justify-content: center; gap: var(--Space-x05); + &.full-width { + width: 100%; + } + &[data-disabled] { cursor: unset; } diff --git a/packages/design-system/lib/components/Button/variants.ts b/packages/design-system/lib/components/Button/variants.ts index afdc74360..44190fb6f 100644 --- a/packages/design-system/lib/components/Button/variants.ts +++ b/packages/design-system/lib/components/Button/variants.ts @@ -30,12 +30,17 @@ export const config = { true: undefined, false: styles['no-wrapping'], }, + fullWidth: { + true: styles['full-width'], + false: undefined, + }, }, defaultVariants: { variant: 'Primary', color: 'Primary', size: 'Large', wrapping: true, + fullWidth: false, }, } as const diff --git a/packages/design-system/lib/components/ButtonLink/index.tsx b/packages/design-system/lib/components/ButtonLink/index.tsx index 98ea9ec26..a49441e77 100644 --- a/packages/design-system/lib/components/ButtonLink/index.tsx +++ b/packages/design-system/lib/components/ButtonLink/index.tsx @@ -9,7 +9,8 @@ import Link from 'next/link' import { useIntl } from 'react-intl' export interface ButtonLinkProps - extends Omit, 'color'>, + extends + Omit, 'color'>, VariantProps {} export default function ButtonLink({ @@ -18,6 +19,7 @@ export default function ButtonLink({ size, typography, wrapping, + fullWidth, className, href, target, @@ -29,6 +31,7 @@ export default function ButtonLink({ size, wrapping, typography, + fullWidth, className, }) diff --git a/packages/design-system/lib/components/FakeButton/index.tsx b/packages/design-system/lib/components/FakeButton/index.tsx index a3b61f3ca..db9420452 100644 --- a/packages/design-system/lib/components/FakeButton/index.tsx +++ b/packages/design-system/lib/components/FakeButton/index.tsx @@ -6,7 +6,8 @@ import { cx, type VariantProps } from 'class-variance-authority' import type { HTMLAttributes } from 'react' interface FakeButtonProps - extends Omit, 'color'>, + extends + Omit, 'color'>, VariantProps { isDisabled?: boolean } @@ -16,6 +17,7 @@ export function FakeButton({ color, size, typography, + fullWidth, children, className, isHovered, @@ -27,6 +29,7 @@ export function FakeButton({ size, variant, typography, + fullWidth, isHovered, className, })