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
directus · Jul 24, 2024 · 5984343 · 5984343
1 parent f642ee5
commit 5984343
Show file tree

Hide file tree

Showing 10 changed files with 314 additions and 72 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,21 +62,36 @@ 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;
 
 	@container (width > 20rem) {
 		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>