From 5984343aebc6beaac498cb32ca381db578bbe5c3 Mon Sep 17 00:00:00 2001
From: Bryant Gillespie <hey@bryantgillespie.com>
Date: Tue, 23 Jul 2024 20:19:39 -0400
Subject: [PATCH] Pricing Page Edits (#159)

* reverse badge colorway

* block button option

* [types] add badge for pricing tier

* tighten tier group spacing

* Update Tier component to include badge and tighten spacing

* [types] hide_row in block table

* Add tooltips for table

* breakpoint fixes

* whitelist support agent icon

* padding adjustment

* add cards option

* types

* cards optional

* sticky headings for table

* fix hover state for primary outline buttons

* fix tier card text size

* add x-large button size for pill style empahsis

* fix tier group

* fix tooltip display

* smaller min-height for tier

* update table

* cardgroup grid cols change
---
 components/Base/Badge.vue           |   7 +-
 components/Base/Button.vue          |  32 ++++-
 components/Base/CardGroup.vue       |   2 +-
 components/Base/Icon.vue            |   1 +
 components/Block/Table.vue          | 119 +++++++++++++-----
 components/Block/Tier.vue           | 185 +++++++++++++++++++++++-----
 components/Block/TierGroup.vue      |  21 +++-
 types/schema/blocks/block-button.ts |   2 +-
 types/schema/blocks/block-table.ts  |   7 +-
 types/schema/blocks/block-tier.ts   |  10 ++
 10 files changed, 314 insertions(+), 72 deletions(-)

diff --git a/components/Base/Badge.vue b/components/Base/Badge.vue
index 96e8ae26..6f112aec 100644
--- a/components/Base/Badge.vue
+++ b/components/Base/Badge.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 export interface BaseBadgeProps {
-	color?: 'primary' | 'gray';
+	color?: 'primary' | 'gray' | 'primary-reverse';
 
 	/**
 	 * Label of the badge.
@@ -81,4 +81,9 @@ const badgeProps = computed(() => {
 	background-color: var(--gray-50);
 	color: var(--gray-600);
 }
+
+.badge-primary-reverse {
+	background-color: var(--primary);
+	color: var(--white);
+}
 </style>
diff --git a/components/Base/Button.vue b/components/Base/Button.vue
index c1a67075..1f8b52fc 100644
--- a/components/Base/Button.vue
+++ b/components/Base/Button.vue
@@ -2,13 +2,14 @@
 export interface BaseButtonProps {
 	icon?: string | null;
 	iconStart?: string | null;
-	size?: 'small' | 'medium' | 'large';
+	size?: 'small' | 'medium' | 'large' | 'x-large';
 	type?: 'button' | 'submit' | 'reset';
 	color?: 'primary' | 'secondary' | 'gray' | 'white' | 'danger';
 	label?: string;
 	href?: string;
 	target?: '_blank' | '_self' | '_parent' | '_top';
 	outline?: boolean;
+	block?: boolean;
 }
 
 const props = withDefaults(defineProps<BaseButtonProps>(), {
@@ -43,6 +44,7 @@ const iconSize = computed(() => {
 	if (props.size === 'small') return 'x-small';
 	if (props.size === 'medium') return 'small';
 	if (props.size === 'large') return 'small';
+	if (props.size === 'x-large') return 'medium';
 	return props.size;
 });
 
@@ -52,7 +54,13 @@ const { theme } = useTheme();
 <template>
 	<component
 		:is="as"
-		:class="['base-button', `size-${size}`, `color-${color}`, `theme-${theme}`, { 'icon-only': isIconOnly, outline }]"
+		:class="[
+			'base-button',
+			`size-${size}`,
+			`color-${color}`,
+			`theme-${theme}`,
+			{ 'icon-only': isIconOnly, outline, 'size-block': block },
+		]"
 		v-bind="buttonProps"
 	>
 		<BaseIcon v-if="iconStart" class="icon-start" :name="iconStart" :size="iconSize" />
@@ -134,7 +142,7 @@ const { theme } = useTheme();
 	&.outline {
 		--color: var(--primary);
 		--background-color: var(--background);
-		--background-color-hover: var(--background);
+		--background-color-hover: color-mix(in srgb, var(--background) 100%, transparent 50%);
 	}
 }
 
@@ -222,4 +230,22 @@ const { theme } = useTheme();
 .size-large.icon-only {
 	padding: var(--space-3);
 }
+
+.size-x-large {
+	font-size: var(--font-size-lg);
+	line-height: var(--line-height-lg);
+	padding: calc(var(--space-3) + 1px) var(--space-6);
+
+	&:has(.icon) {
+		padding-inline-end: calc(var(--space-8) - var(--space-05));
+	}
+}
+
+.size-x-large.icon-only {
+	padding: var(--space-2);
+}
+
+.size-block {
+	width: 100%;
+}
 </style>
diff --git a/components/Base/CardGroup.vue b/components/Base/CardGroup.vue
index 7452c117..e5de6eef 100644
--- a/components/Base/CardGroup.vue
+++ b/components/Base/CardGroup.vue
@@ -60,7 +60,7 @@ withDefaults(defineProps<BaseCardGroup>(), {
 			}
 
 			@container (width > 40rem) {
-				--columns: 3;
+				--columns: 4;
 				--gap: var(--space-6);
 			}
 
diff --git a/components/Base/Icon.vue b/components/Base/Icon.vue
index b234547d..9907b099 100644
--- a/components/Base/Icon.vue
+++ b/components/Base/Icon.vue
@@ -79,6 +79,7 @@ const filledIcons = [
 	'update',
 	'webhook',
 	'work',
+	'support_agent',
 ];
 
 const iconName = computed(() => {
diff --git a/components/Block/Table.vue b/components/Block/Table.vue
index f775a034..a03ec6a2 100644
--- a/components/Block/Table.vue
+++ b/components/Block/Table.vue
@@ -15,32 +15,45 @@ const { data: block } = useAsyncData(props.uuid, () =>
 </script>
 
 <template>
-	<table v-if="block" class="block-table">
-		<thead>
-			<tr>
-				<td class="title">{{ block.title }}</td>
-				<td v-for="{ label } in block.columns" :key="label" class="column-label">{{ label }}</td>
-			</tr>
-		</thead>
-		<tbody>
-			<tr v-for="row in block.rows" :key="row.name">
-				<td>
-					<span v-tooltip="row.tooltip" :class="{ 'has-tooltip': !!row.tooltip }">
-						{{ row.name }}
-						<BaseIcon name="info" size="x-small" />
-					</span>
-				</td>
-				<td v-for="(col, index) in row.cols" :key="index" :title="col.tooltip">
-					<BaseIcon v-if="col.value === 'true'" class="true" name="check" />
-					<BaseIcon v-else-if="col.value === 'false'" class="false" name="horizontal_rule" />
-					<template v-else>{{ col.value }}</template>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+	<div v-if="block" class="table-container">
+		<table v-if="block" class="block-table">
+			<thead>
+				<tr>
+					<th class="title sticky-col sticky-header">{{ block.title }}</th>
+					<th v-for="{ label } in block.columns" :key="label" class="column-label sticky-header">{{ label }}</th>
+				</tr>
+			</thead>
+			<tbody>
+				<template v-for="row in block.rows" :key="row.name">
+					<tr v-if="!row.hide_row">
+						<td class="sticky-col">
+							<span v-tooltip="row.tooltip" :class="{ 'has-tooltip': !!row.tooltip }">
+								{{ row.name }}
+								<BaseIcon v-if="row.tooltip" name="info" size="x-small" />
+							</span>
+						</td>
+						<td v-for="(col, index) in row.cols" :key="index" :title="col.tooltip">
+							<span v-tooltip="col.tooltip" :class="{ 'has-tooltip': !!col.tooltip }">
+								<BaseIcon v-if="col.tooltip" name="info" size="x-small" class="icon" />
+								<BaseIcon v-if="col.value === 'true'" class="true" name="check" />
+								<BaseIcon v-else-if="col.value === 'false'" class="false" name="horizontal_rule" />
+								<template v-else>{{ col.value }}</template>
+							</span>
+						</td>
+					</tr>
+				</template>
+			</tbody>
+		</table>
+	</div>
 </template>
 
 <style lang="scss" scoped>
+.table-container {
+	width: 100%;
+	overflow-x: auto;
+	position: relative;
+}
+
 table,
 thead,
 tbody {
@@ -49,9 +62,20 @@ tbody {
 	margin-inline: auto;
 }
 
+table {
+	width: 100%;
+	border-collapse: separate;
+	border-spacing: 0;
+}
+
+thead {
+	background-color: var(--background);
+	border-block-end: 1px solid var(--gray-200);
+}
+
 tr {
 	display: flex;
-	align-items: center;
+	align-items: baseline;
 	font-size: 0.6rem;
 	line-height: 0.6rem;
 
@@ -59,11 +83,15 @@ tr {
 		font-size: var(--font-size-sm);
 		line-height: var(--line-height-sm);
 	}
+
+	padding-block: var(--space-2);
 }
 
-td {
+td,
+th {
 	flex-basis: var(--space-24);
 	flex-grow: 1;
+	min-width: var(--space-24);
 
 	.base-icon {
 		--base-icon-color: var(--gray-400);
@@ -89,24 +117,27 @@ td {
 	}
 }
 
-thead tr {
-	margin-block-end: var(--space-2);
-}
-
 tbody tr {
-	padding-block: var(--space-2);
 	border-block-start: 1px solid var(--gray-200);
 
+	&:first-child {
+		border-block-start: none;
+	}
+
 	&:last-child {
 		border-block-end: 1px solid var(--gray-200);
 	}
 }
 
 .title {
-	font-size: var(--font-size-2xl);
-	line-height: var(--line-height-2xl);
+	text-align: start;
 	font-family: var(--family-display);
 	font-weight: 600;
+
+	@container (width > 30rem) {
+		font-size: var(--font-size-2xl);
+		line-height: var(--line-height-2xl);
+	}
 }
 
 .column-label {
@@ -130,4 +161,28 @@ tbody tr {
 .false {
 	color: var(--gray-300);
 }
+
+.icon {
+	margin-inline-end: var(--space-1);
+}
+
+.sticky-col {
+	position: sticky;
+	left: 0;
+	top: 0;
+	z-index: 3;
+	min-width: var(--space-36);
+	background-color: var(--background);
+
+	&::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		right: -1rem;
+		width: 1rem;
+		height: 100%;
+		background: linear-gradient(to right, var(--background), rgba(255, 255, 255, 0));
+		z-index: 1;
+	}
+}
 </style>
diff --git a/components/Block/Tier.vue b/components/Block/Tier.vue
index 28d8fccd..dbf161ac 100644
--- a/components/Block/Tier.vue
+++ b/components/Block/Tier.vue
@@ -8,41 +8,103 @@ const props = defineProps<BlockProps>();
 const { data: block } = useAsyncData(props.uuid, () =>
 	$directus.request(
 		$readItem('block_tier', props.uuid, {
-			fields: ['name', 'subtext', 'price', 'term', 'term_tooltip', 'cta', 'description', 'points', 'highlight'],
+			fields: [
+				'name',
+				'subtext',
+				'price',
+				'term',
+				'term_tooltip',
+				'cta',
+				'description',
+				'points',
+				'highlight',
+				'badge',
+				'tier_type',
+				'cards',
+			],
 		}),
 	),
 );
 </script>
 
 <template>
-	<BasePanel v-if="block" class="block-tier" :class="[block.highlight ? 'highlight' : '']" dense>
-		<h3>{{ block.name }}</h3>
-		<small v-if="block.subtext">{{ block.subtext }}&nbsp;</small>
-		<p class="price">
-			<span class="value">{{ block.price }}</span>
-			<br />
-			<span class="term">{{ block.term }}&nbsp;</span>
-			<span v-tooltip="block.term_tooltip" class="info">
-				<BaseIcon v-if="block.term_tooltip" size="small" name="info" />
-			</span>
-		</p>
-		<p v-if="block.description" class="description">{{ block.description }}</p>
-		<BlockButton v-if="block.cta" :uuid="block.cta" class="cta" size="large" />
-		<BaseDivider class="divider" />
-		<ul v-if="block.points" class="points">
-			<li v-for="{ content } in block.points" :key="content">
-				<BaseIcon name="check" class="check" size="small" />
-				{{ content }}
-			</li>
-		</ul>
-	</BasePanel>
+	<div
+		v-if="block"
+		class="block-tier"
+		:class="[block.highlight ? 'highlight' : '', block.tier_type === 'full_width' ? 'full-width' : '']"
+		dense
+	>
+		<div v-if="block.badge" class="badge">
+			<BaseBadge color="primary-reverse">{{ block.badge }}</BaseBadge>
+		</div>
+		<div class="content">
+			<h3>{{ block.name }}</h3>
+			<small v-if="block.subtext">{{ block.subtext }}&nbsp;</small>
+			<p class="price">
+				<span class="value">{{ block.price }}</span>
+				<br />
+				<span class="term">{{ block.term }}&nbsp;</span>
+				<span v-if="block.term_tooltip" v-tooltip="block.term_tooltip" class="info">
+					<BaseIcon size="small" name="info" />
+				</span>
+			</p>
+			<p v-if="block.description" class="description" :class="[block.highlight ? 'text-highlight' : '']">
+				{{ block.description }}
+			</p>
+			<div style="display: flex; margin-block-start: var(--space-2)">
+				<BlockButton v-if="block.cta" :uuid="block.cta" class="cta" size="large" block />
+			</div>
+			<template v-if="block.points">
+				<BaseDivider v class="divider" />
+				<ul class="points">
+					<li v-for="{ content } in block.points" :key="content">
+						<BaseIcon name="check" class="check" size="small" />
+						{{ content }}
+					</li>
+				</ul>
+			</template>
+		</div>
+		<!-- Card Options -->
+		<template v-if="block.tier_type === 'full_width' && block.cards">
+			<div
+				v-for="(card, cardIdx) in block.cards"
+				:key="cardIdx"
+				class="card"
+				:class="[block.highlight ? 'card-highlight' : '']"
+			>
+				<div class="">
+					<BaseBadge v-if="card.badge">{{ card.badge }}</BaseBadge>
+					<BaseHeading :icon="card.icon ?? undefined" :content="card.title ?? ''" size="medium" class="card-title" />
+					<BaseText
+						v-if="card.description"
+						:content="card.description"
+						color="foreground"
+						size="medium"
+						class="card-text"
+					/>
+				</div>
+				<BaseButton
+					v-if="card.button_url"
+					:href="card.button_url"
+					:label="card.button_label ?? 'Learn More'"
+					color="primary"
+					outline
+					icon="arrow_forward"
+				/>
+			</div>
+		</template>
+	</div>
 </template>
 
 <style lang="scss" scoped>
 .block-tier {
-	inline-size: 100%;
-	max-inline-size: var(--space-80);
-	block-size: auto;
+	position: relative;
+	// container-type: inline-size;
+	// inline-size: 100%;
+	// block-size: auto;
+	padding: var(--space-8) var(--space-6);
+	border-radius: var(--rounded-2xl);
+	background: var(--gray-100);
 }
 
 .highlight {
@@ -50,6 +112,10 @@ const { data: block } = useAsyncData(props.uuid, () =>
 	background: var(--primary-50);
 }
 
+.text-highlight {
+	color: var(--primary-300) !important;
+}
+
 .price {
 	margin-block-start: var(--space-2);
 }
@@ -98,21 +164,36 @@ small {
 
 .term {
 	color: var(--gray-500);
+	font-size: var(--font-size-sm);
 }
 
 .description {
 	color: var(--gray-500);
+	font-size: var(--font-size-sm);
 	margin-block-start: var(--space-2);
-}
+	text-wrap: balance;
 
-.cta {
-	margin-block-start: var(--space-5);
+	@media (width > 50rem) {
+		min-height: var(--space-16);
+	}
 }
 
 .divider {
 	margin-block: var(--space-5);
 }
 
+.badge {
+	position: absolute;
+	left: 0;
+	top: calc(-1 * var(--space-4));
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	> * {
+		padding: var(--space-2) var(--space-3);
+	}
+}
+
 .points {
 	list-style: none;
 	padding: 0;
@@ -135,4 +216,52 @@ small {
 		margin-inline-end: var(--space-3);
 	}
 }
+
+.content {
+	container-type: inline-size;
+	inline-size: 100%;
+
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+
+	@container (width > 40rem) {
+		max-width: var(--space-80);
+	}
+}
+
+.full-width {
+	grid-column: 1 / -1;
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-6);
+
+	@container (width > 50rem) {
+		flex-direction: row;
+		justify-content: space-between;
+	}
+}
+
+.card {
+	position: relative;
+	width: 100%;
+	border: 1px solid var(--gray-200);
+	border-radius: var(--rounded-lg);
+	padding: var(--space-6);
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.card-highlight {
+	border-color: var(--primary-100);
+}
+
+.card-title {
+	margin-block-start: var(--space-4);
+}
+
+:deep(.card-text ul) {
+	padding-inline-start: var(--space-4);
+}
 </style>
diff --git a/components/Block/TierGroup.vue b/components/Block/TierGroup.vue
index 0f3669da..e485f03e 100644
--- a/components/Block/TierGroup.vue
+++ b/components/Block/TierGroup.vue
@@ -22,10 +22,21 @@ const { data: block } = useAsyncData(props.uuid, () =>
 
 <style lang="scss" scoped>
 .block-tier-group {
-	gap: var(--space-8);
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	align-items: stretch;
+	gap: var(--space-6);
+	display: grid;
+	grid-template-columns: 1fr;
+}
+
+@media (width > 40rem) {
+	.block-tier-group {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+@media (width > 64rem) {
+	.block-tier-group {
+		grid-template-columns: repeat(4, 1fr);
+		padding: 0;
+	}
 }
 </style>
diff --git a/types/schema/blocks/block-button.ts b/types/schema/blocks/block-button.ts
index b4c9cc94..f0771da1 100644
--- a/types/schema/blocks/block-button.ts
+++ b/types/schema/blocks/block-button.ts
@@ -12,5 +12,5 @@ export interface BlockButton {
 	resource: string | Resource | null;
 	external_url: string | null;
 	icon: string | null;
-	size: 'small' | 'medium' | 'large';
+	size: 'small' | 'medium' | 'large' | 'x-large';
 }
diff --git a/types/schema/blocks/block-table.ts b/types/schema/blocks/block-table.ts
index f8e6e8b5..818f140a 100644
--- a/types/schema/blocks/block-table.ts
+++ b/types/schema/blocks/block-table.ts
@@ -2,5 +2,10 @@ export interface BlockTable {
 	id: string;
 	title: string;
 	columns: { label: string }[];
-	rows: { name: string; tooltip: string; cols: { value: string; tooltip: string }[] }[];
+	rows: {
+		name: string;
+		tooltip: string;
+		cols: { value: string; tooltip: string }[];
+		hide_row: boolean;
+	}[];
 }
diff --git a/types/schema/blocks/block-tier.ts b/types/schema/blocks/block-tier.ts
index 4065c588..16ea8347 100644
--- a/types/schema/blocks/block-tier.ts
+++ b/types/schema/blocks/block-tier.ts
@@ -3,6 +3,7 @@ import type { BlockButton } from './block-button';
 export interface BlockTier {
 	id: string;
 	name: string;
+	badge: string | null;
 	subtext: string | null;
 	price: string;
 	term: string | null;
@@ -11,4 +12,13 @@ export interface BlockTier {
 	cta: string | BlockButton | null;
 	points: null | { content: string }[];
 	highlight: boolean;
+	tier_type: 'standard' | 'full_width';
+	cards?: {
+		badge: string | null | undefined;
+		title: string | null | undefined;
+		icon: string | null | undefined;
+		description: string | null | undefined;
+		button_url: string | null | undefined;
+		button_label: string | null | undefined;
+	}[];
 }