fix: Added fullWidth property on button components to set them as full width

Approved-by: Matilda Landström

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}
         </ButtonLink>

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",

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(
             {

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/PricesAndAvailabilityButton/index.tsx

@@ -31,6 +31,7 @@ export default function PricesAndAvailabilityButton({
   return (
     <ButtonLink
       href={selectRateURL}
+      fullWidth
       onClick={() => {
         trackPricesAndAvailabilityClick(
           name,

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}
             </ButtonLink>
@@ -61,6 +62,7 @@ export default async function WellnessAndExerciseSidePeek({
               color="Primary"
               variant="Secondary"
               typography="Body/Paragraph/mdBold"
+              fullWidth
             >
               {intl.formatMessage({
                 id: "sidepeek.wellness.showGymAndWellness",

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

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;
   }

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
 

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<ComponentProps<typeof Link>, 'color'>,
+  extends
+    Omit<ComponentProps<typeof Link>, 'color'>,
     VariantProps<typeof variants> {}
 
 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,
   })
 

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<HTMLAttributes<HTMLSpanElement>, 'color'>,
+  extends
+    Omit<HTMLAttributes<HTMLSpanElement>, 'color'>,
     VariantProps<typeof variants> {
   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,
   })