feat(SW-219): add ability to always stack buttons

components/ContentType/HotelPage/index.tsx

@@ -67,11 +67,12 @@ export default async function HotelPage() {
         </div>
         <Rooms rooms={roomCategories} />
         <Facilities facilities={facilities} />
-
+        {/* NOTE: These are added here for testing. Remove before PR */}
-        {/* Add ContentCard here */}
+        {/* Example of ContentCard with Button CTA's */}
         <ContentCard
           title="Special Offer"
-          description="Enjoy a luxurious stay with our exclusive package."
+          description="Mattis sit duis pulvinar ultricies auctor euismod. Augue mattis mauris at est iaculis pulvinar pulvinar."
+          alwaysStack={true}
           primaryCTA={{
             label: "Book Now",
             href: "/booking",
@@ -81,19 +82,19 @@ export default async function HotelPage() {
             href: "/offers",
             openInNewTab: true,
           }}
-          style="featured"
           backgroundImage="https://www.scandichotels.com/imageVault/publishedmedia/sixadhu91jy67aal2pla/Scandic_Downtown_Camper_cocktail_lounge_bar_the_ne.jpg"
         />
 
         {/* Example of ContentCard with SidePeek */}
         <ContentCard
           title="Explore Facilities"
-          description="Discover all the amenities our hotel has to offer."
+          description="Mattis sit duis pulvinar ultricies auctor euismod. Augue mattis mauris at est iaculis pulvinar pulvinar."
           sidePeekCTA={{
             label: "View Facilities",
             onClick: true,
           }}
           style="default"
+          backgroundImage="https://www.scandichotels.com/imageVault/publishedmedia/sixadhu91jy67aal2pla/Scandic_Downtown_Camper_cocktail_lounge_bar_the_ne.jpg"
         />
       </main>
       {googleMapsApiKey ? (

components/TempDesignSystem/ContentCard/contentCard.module.css

@@ -14,6 +14,11 @@
   background-color: var(--Main-Grey-White);
 }
 
+.default,
+.featured {
+  border: 1px solid var(--Base-Border-Subtle);
+}
+
 .imageContainer {
   width: 100%;
   height: 12.58625rem; /* 201.38px / 16 = 12.58625rem */
@@ -29,9 +34,9 @@
 .content {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Spacing-x-one-and-half);
   align-items: flex-start;
-  padding: var(--Spacing-x4);
+  padding: var(--Spacing-x2) var(--Spacing-x3);
 }
 
 .description {
@@ -39,9 +44,24 @@
 }
 
 .ctaContainer {
-  display: flex;
+  display: grid;
-  gap: var(--Spacing-x2);
+  grid-template-columns: 1fr;
-  margin-top: var(--Spacing-x2);
+  gap: var(--Spacing-x1);
+  width: 100%;
+}
+
+.ctaButton {
+  width: 100%;
+}
+
+@media (min-width: 1367px) {
+  .card:not(.alwaysStack) .ctaContainer {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  }
+
+  .card:not(.alwaysStack) .ctaContainer:has(:only-child) {
+    grid-template-columns: 1fr;
+  }
 }
 
 .sidePeekCTA {

components/TempDesignSystem/ContentCard/index.tsx

@@ -21,9 +21,10 @@ export default function ContentCard({
   sidePeekCTA,
   backgroundImage,
   style = "default",
+  alwaysStack = false,
   className,
 }: ContentCardProps) {
-  const cardClasses = contentCardVariants({ style, className })
+  const cardClasses = contentCardVariants({ style, alwaysStack, className })
 
   return (
     <div className={cardClasses}>
@@ -58,7 +59,12 @@ export default function ContentCard({
         ) : (
           <div className={styles.ctaContainer}>
             {primaryCTA && (
-              <Button asChild intent="primary" size="small">
+              <Button
+                asChild
+                intent="primary"
+                size="small"
+                className={styles.ctaButton}
+              >
                 <Link
                   href={primaryCTA.href}
                   target={primaryCTA.openInNewTab ? "_blank" : undefined}
@@ -68,7 +74,12 @@ export default function ContentCard({
               </Button>
             )}
             {secondaryCTA && (
-              <Button asChild intent="secondary" size="small">
+              <Button
+                asChild
+                intent="secondary"
+                size="small"
+                className={styles.ctaButton}
+              >
                 <Link
                   href={secondaryCTA.href}
                   target={secondaryCTA.openInNewTab ? "_blank" : undefined}

components/TempDesignSystem/ContentCard/variants.ts

@@ -8,8 +8,13 @@ export const contentCardVariants = cva(styles.card, {
       default: styles.default,
       featured: styles.featured,
     },
+    alwaysStack: {
+      true: styles.alwaysStack,
+      false: "",
+    },
   },
   defaultVariants: {
     style: "default",
+    alwaysStack: false,
   },
 })

types/components/contentCard.ts

@@ -11,6 +11,7 @@ export interface CTA {
 export interface SidePeekCTA {
   label: string
   // onClick: () => void
+  // TODO: change back to function.
   onClick: boolean
 }