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

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;
-  gap: var(--Spacing-x2);
-  margin-top: var(--Spacing-x2);
+  display: grid;
+  grid-template-columns: 1fr;
+  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,
   },
 })