Improves card layouts and adds sandbox card

Refactors card layouts for better spacing and responsiveness.

Introduces a new sandbox card component for displaying sandbox environments.

Updates tutorial card list to support compact cards.

Author: Younique98

src/components/badge/badge.module.css

@@ -43,7 +43,7 @@
 	--icon-size: 12px;
 	--line-height: 1.23077;
 	--min-height: 1.25rem;
-	--padding-left-right: 0;
+	--padding-left-right: 5px;
 	--padding-top-bottom: 1px;
 }
 

src/components/card/card.module.css

@@ -9,7 +9,7 @@
 
 	background-color: var(--token-color-surface-primary);
 	border-radius: var(--card-border-radius);
-	padding: 8px;
+	padding: 16px;
 	width: 100%;
 
 	@nest html[data-theme='dark'] & {

src/components/card/components/card-description/card-description.module.css

@@ -4,7 +4,7 @@
  */
 
 .root {
-	margin-top: 2px;
+	margin-top: 4px;
 }
 
 .text {

src/components/card/components/card-footer/card-footer.module.css

@@ -4,6 +4,5 @@
  */
 
 .root {
-	margin-top: 10px;
-	margin-bottom: 0;
+	margin-top: 16px;
 }

src/components/cards-grid-list/components/tutorial-cards-grid-list/index.tsx

@@ -10,35 +10,34 @@ import {
 	TutorialCardWithAuthElements,
 } from 'components/tutorial-card'
 import s from './tutorial-cards.module.css'
+import compactStyles from 'components/tutorial-card/tutorial-card-compact.module.css'
 
 interface TutorialCardsGridListProps extends CardsGridListProps {
 	tutorials: TutorialCardPropsWithId[]
+	compact?: boolean
 }
 
-/**
- * Handles rendering a grid of Tutorial cards, and pre-fetching the
- * `isBookmarked` state for each card.
- */
-const TutorialCardsGridList = ({ tutorials, ...restProps }) => {
-	/**
-	 * Collect the `tutorialIds` and React elements to render in separate arrays
-	 * at the same time (to save on iterating over the same data twice).
-	 */
+const TutorialCardsGridList = ({
+	tutorials,
+	compact = false,
+	...restProps
+}) => {
 	const tutorialIds = []
 	const cardsGridListItems = []
 	tutorials.forEach((tutorial: TutorialCardPropsWithId) => {
 		tutorialIds.push(tutorial.id)
 		cardsGridListItems.push(
-			<div className={s.sandboxCardBox} key={tutorial.id}>
+			<div
+				className={`${s.tutorialCardBox} ${
+					compact ? compactStyles.compactTutorialCard : ''
+				}`}
+				key={tutorial.id}
+			>
 				<TutorialCardWithAuthElements {...tutorial} hasBookmark={false} />
 			</div>
 		)
 	})
 
-	/**
-	 * Prime the `isBookmarked` queries for the tutorial cards we know we need to
-	 * render via collected `tutorialIds` array.
-	 */
 	const { isFetching, isRefetching } = useBookmarksByTutorialIds({
 		tutorialIds,
 	})

src/components/cards-grid-list/components/tutorial-cards-grid-list/tutorial-cards.module.css

@@ -1,4 +1,9 @@
-.sandboxCardBox {
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.tutorialCardBox {
 	min-height: 100px;
 	height: 100%;
 	display: flex;

src/components/cards-grid-list/types.ts

@@ -9,7 +9,7 @@ interface CardsGridListProps {
 	children: ReactNode
 	isOrdered?: boolean
 	fixedColumns?: number
-	gridGap?: '16px' | '24px'
+	gridGap?: '8px' | '12px' | '16px' | '24px'
 }
 
 export type { CardsGridListProps }

src/components/sandbox-card/index.tsx

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import React from 'react'
+import { ProductSlug } from 'types/products'
+import Card from 'components/card'
+import CardTitle from 'components/card/components/card-title'
+import CardDescription from 'components/card/components/card-description'
+import CardFooter from 'components/card/components/card-footer'
+import ButtonLink from 'components/button-link'
+import ProductIcon from 'components/product-icon'
+import s from './sandbox-card.module.css'
+
+export interface SandboxCardProps {
+	title: string
+	description: string
+	labId: string
+	products: string[]
+	onLaunch: () => void
+	className?: string
+}
+
+const SandboxCard: React.FC<SandboxCardProps> = ({
+	title,
+	description,
+	labId,
+	products,
+	onLaunch,
+	className,
+}) => {
+	return (
+		<div className={`${s.sandboxCardWrapper} ${className || ''}`}>
+			<Card className={s.sandboxCard}>
+				<div className={s.cardHeader}>
+					<CardTitle text={title} />
+					<div className={s.productIcons}>
+						{products.map((productSlug) => (
+							<ProductIcon
+								key={`product-${labId}-${productSlug}`}
+								productSlug={productSlug as ProductSlug}
+								size={16}
+								className={s.productIcon}
+							/>
+						))}
+					</div>
+				</div>
+				<CardDescription text={description} className={s.description} />
+				<CardFooter className={s.footer}>
+					<ButtonLink
+						href="#"
+						className={s.launchButton}
+						aria-label={`Launch ${title} Sandbox`}
+						onClick={(e) => {
+							e.preventDefault()
+							e.stopPropagation()
+							onLaunch()
+						}}
+						size="medium"
+						text="Launch Sandbox"
+					/>
+				</CardFooter>
+			</Card>
+		</div>
+	)
+}
+
+export default SandboxCard

src/components/sandbox-card/sandbox-card.module.css

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.sandboxCardWrapper {
+	width: 100%;
+}
+
+.sandboxCard {
+	padding: 12px;
+}
+
+.cardHeader {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 12px;
+}
+
+.productIcons {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	flex-shrink: 0;
+}
+
+.productIcon {
+	opacity: 0.8;
+}
+
+.description {
+	margin-top: 3px;
+}
+
+.footer {
+	margin-top: 12px;
+	margin-bottom: 0;
+}
+
+.launchButton {
+	width: 100%;
+	justify-content: center;
+}
+
+@media (max-width: 768px) {
+	.cardHeader {
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 8px;
+	}
+
+	.productIcons {
+		align-self: flex-start;
+	}
+}

src/components/tutorial-card/tutorial-card-compact.module.css

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.compactTutorialCard {
+	padding: 12px;
+}
+
+.compactDescription {
+	margin-top: 3px;
+}
+
+.compactFooter {
+	margin-top: 12px;
+	margin-bottom: 0;
+}
+
+.compactBadge {
+	--padding-left-right: 0;
+}