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,
})