Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Pricing Page Edits #159

Merged
merged 22 commits into from
Jul 24, 2024
Merged

Pricing Page Edits #159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
c106b65
reverse badge colorway
bryantgillespie Jul 11, 2024
c5e18d4
block button option
bryantgillespie Jul 11, 2024
d019364
[types] add badge for pricing tier
bryantgillespie Jul 11, 2024
95874c8
tighten tier group spacing
bryantgillespie Jul 11, 2024
139afa4
Update Tier component to include badge and tighten spacing
bryantgillespie Jul 11, 2024
d0c1f11
[types] hide_row in block table
bryantgillespie Jul 11, 2024
1b7cfc2
Add tooltips for table
bryantgillespie Jul 11, 2024
07af441
breakpoint fixes
bryantgillespie Jul 11, 2024
37dc5e4
whitelist support agent icon
bryantgillespie Jul 12, 2024
b1483f4
padding adjustment
bryantgillespie Jul 12, 2024
c5ea586
add cards option
bryantgillespie Jul 12, 2024
0d5c794
types
bryantgillespie Jul 12, 2024
4ce0d1f
cards optional
bryantgillespie Jul 12, 2024
5361f06
sticky headings for table
bryantgillespie Jul 12, 2024
ba992fe
fix hover state for primary outline buttons
bryantgillespie Jul 12, 2024
3650de9
fix tier card text size
bryantgillespie Jul 12, 2024
d776805
add x-large button size for pill style empahsis
bryantgillespie Jul 18, 2024
5ee5112
fix tier group
bryantgillespie Jul 18, 2024
cfb20d6
fix tooltip display
bryantgillespie Jul 18, 2024
93747ea
smaller min-height for tier
bryantgillespie Jul 18, 2024
d8e7efe
update table
bryantgillespie Jul 23, 2024
93feb6b
cardgroup grid cols change
bryantgillespie Jul 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion components/Base/Badge.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
export interface BaseBadgeProps {
color?: 'primary' | 'gray';
color?: 'primary' | 'gray' | 'primary-reverse';

/**
* Label of the badge.
Expand Down Expand Up @@ -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>
32 changes: 29 additions & 3 deletions components/Base/Button.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>(), {
Expand Down Expand Up @@ -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;
});

Expand All @@ -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" />
Expand Down Expand Up @@ -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%);
}
}

Expand Down Expand Up @@ -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>
2 changes: 1 addition & 1 deletion components/Base/CardGroup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ withDefaults(defineProps<BaseCardGroup>(), {
}

@container (width > 40rem) {
--columns: 3;
--columns: 4;
--gap: var(--space-6);
}

Expand Down
1 change: 1 addition & 0 deletions components/Base/Icon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ const filledIcons = [
'update',
'webhook',
'work',
'support_agent',
];

const iconName = computed(() => {
Expand Down
119 changes: 87 additions & 32 deletions components/Block/Table.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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);
Expand All @@ -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 {
Expand All @@ -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>
Loading
Loading