From c106b65bacd636daf69ca02a248885a751d59553 Mon Sep 17 00:00:00 2001 From: bryantgillespie Date: Thu, 11 Jul 2024 14:43:46 -0400 Subject: [PATCH 01/22] reverse badge colorway --- components/Base/Badge.vue | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) 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 @@ From 07af441235b382886d4f8a0c5f8c6034f615f022 Mon Sep 17 00:00:00 2001 From: bryantgillespie Date: Thu, 11 Jul 2024 19:07:41 -0400 Subject: [PATCH 08/22] breakpoint fixes --- components/Block/TierGroup.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Block/TierGroup.vue b/components/Block/TierGroup.vue index 34bb187b..88f12abd 100644 --- a/components/Block/TierGroup.vue +++ b/components/Block/TierGroup.vue @@ -28,13 +28,13 @@ const { data: block } = useAsyncData(props.uuid, () => padding: 0 var(--space-8); } -@media (width > 50rem) { +@media (width > 40rem) { .block-tier-group { grid-template-columns: repeat(2, 1fr); } } -@media (width > 75rem) { +@media (width > 64rem) { .block-tier-group { grid-template-columns: repeat(4, 1fr); padding: 0; From 37dc5e432d0281978fcb615fe5600e33171399ed Mon Sep 17 00:00:00 2001 From: bryantgillespie Date: Fri, 12 Jul 2024 09:32:41 -0400 Subject: [PATCH 09/22] whitelist support agent icon --- components/Base/Icon.vue | 1 + 1 file changed, 1 insertion(+) 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(() => { From b1483f4608d49191caee26a24a51145450db684a Mon Sep 17 00:00:00 2001 From: bryantgillespie Date: Fri, 12 Jul 2024 09:33:05 -0400 Subject: [PATCH 10/22] padding adjustment --- components/Block/TierGroup.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Block/TierGroup.vue b/components/Block/TierGroup.vue index 88f12abd..56a5311f 100644 --- a/components/Block/TierGroup.vue +++ b/components/Block/TierGroup.vue @@ -25,7 +25,7 @@ const { data: block } = useAsyncData(props.uuid, () => gap: var(--space-6); display: grid; grid-template-columns: 1fr; - padding: 0 var(--space-8); + padding: 0 var(--space-4); } @media (width > 40rem) { From c5ea58646a9c76c18da73d685989c14d2d69c2be Mon Sep 17 00:00:00 2001 From: bryantgillespie Date: Fri, 12 Jul 2024 09:33:17 -0400 Subject: [PATCH 11/22] add cards option --- components/Block/Tier.vue | 149 ++++++++++++++++++++++++++++++-------- 1 file changed, 118 insertions(+), 31 deletions(-) diff --git a/components/Block/Tier.vue b/components/Block/Tier.vue index 6eccfec2..8360af6a 100644 --- a/components/Block/Tier.vue +++ b/components/Block/Tier.vue @@ -19,6 +19,8 @@ const { data: block } = useAsyncData(props.uuid, () => 'points', 'highlight', 'badge', + 'tier_type', + 'cards', ], }), ), @@ -26,39 +28,80 @@ const { data: block } = useAsyncData(props.uuid, () => From 0d5c7947eb22b3ad728266ec68c296f9c1d42e3a Mon Sep 17 00:00:00 2001 From: bryantgillespie Date: Fri, 12 Jul 2024 09:33:26 -0400 Subject: [PATCH 12/22] types --- types/schema/blocks/block-tier.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/types/schema/blocks/block-tier.ts b/types/schema/blocks/block-tier.ts index 7ead7c0c..a6fc05f3 100644 --- a/types/schema/blocks/block-tier.ts +++ b/types/schema/blocks/block-tier.ts @@ -12,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; + }[]; } From 4ce0d1f676c672d17820427c45cd323d3d9c274e Mon Sep 17 00:00:00 2001 From: bryantgillespie Date: Fri, 12 Jul 2024 09:33:39 -0400 Subject: [PATCH 13/22] cards optional --- types/schema/blocks/block-tier.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/schema/blocks/block-tier.ts b/types/schema/blocks/block-tier.ts index a6fc05f3..16ea8347 100644 --- a/types/schema/blocks/block-tier.ts +++ b/types/schema/blocks/block-tier.ts @@ -13,7 +13,7 @@ export interface BlockTier { points: null | { content: string }[]; highlight: boolean; tier_type: 'standard' | 'full_width'; - cards: { + cards?: { badge: string | null | undefined; title: string | null | undefined; icon: string | null | undefined; From 5361f06e816a1393af857f5de176495aa0bd8fe1 Mon Sep 17 00:00:00 2001 From: bryantgillespie Date: Fri, 12 Jul 2024 11:12:35 -0400 Subject: [PATCH 14/22] sticky headings for table --- components/Block/Table.vue | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/components/Block/Table.vue b/components/Block/Table.vue index 9f7a0e58..982df6ae 100644 --- a/components/Block/Table.vue +++ b/components/Block/Table.vue @@ -54,9 +54,16 @@ tbody { margin-inline: auto; } +thead { + position: sticky; + top: 60px; + 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; @@ -102,16 +109,23 @@ 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); 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 { From ba992fe38b91f5e38893b038ad6f12e66a9d1e2c Mon Sep 17 00:00:00 2001 From: bryantgillespie Date: Fri, 12 Jul 2024 11:19:39 -0400 Subject: [PATCH 15/22] fix hover state for primary outline buttons --- components/Base/Button.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Base/Button.vue b/components/Base/Button.vue index bcb15c1c..1210f58a 100644 --- a/components/Base/Button.vue +++ b/components/Base/Button.vue @@ -141,7 +141,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%); } } From 3650de95c93870043c9708bc2952b383de4abb28 Mon Sep 17 00:00:00 2001 From: bryantgillespie Date: Fri, 12 Jul 2024 11:22:17 -0400 Subject: [PATCH 16/22] fix tier card text size --- components/Block/Tier.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Block/Tier.vue b/components/Block/Tier.vue index 8360af6a..41a160d8 100644 --- a/components/Block/Tier.vue +++ b/components/Block/Tier.vue @@ -79,7 +79,7 @@ const { data: block } = useAsyncData(props.uuid, () => v-if="card.description" :content="card.description" color="foreground" - :size="card.title ? 'small' : 'medium'" + size="medium" class="card-text" /> From d776805c7a05c13eeb93774f58a0e0f3b9ed3cfe Mon Sep 17 00:00:00 2001 From: bryantgillespie Date: Thu, 18 Jul 2024 16:21:54 -0400 Subject: [PATCH 17/22] add x-large button size for pill style empahsis --- components/Base/Button.vue | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/components/Base/Button.vue b/components/Base/Button.vue index 1210f58a..1f8b52fc 100644 --- a/components/Base/Button.vue +++ b/components/Base/Button.vue @@ -2,7 +2,7 @@ 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; @@ -44,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; }); @@ -230,6 +231,20 @@ const { theme } = useTheme(); 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%; } From 5ee5112c258bd018f15ca8683a3ddf99e09431d1 Mon Sep 17 00:00:00 2001 From: bryantgillespie Date: Thu, 18 Jul 2024 16:22:21 -0400 Subject: [PATCH 18/22] fix tier group --- components/Block/TierGroup.vue | 1 - types/schema/blocks/block-button.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/components/Block/TierGroup.vue b/components/Block/TierGroup.vue index 56a5311f..e485f03e 100644 --- a/components/Block/TierGroup.vue +++ b/components/Block/TierGroup.vue @@ -25,7 +25,6 @@ const { data: block } = useAsyncData(props.uuid, () => gap: var(--space-6); display: grid; grid-template-columns: 1fr; - padding: 0 var(--space-4); } @media (width > 40rem) { 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'; } From cfb20d6ea07e6f048cf46790e1044081c5679ab4 Mon Sep 17 00:00:00 2001 From: bryantgillespie Date: Thu, 18 Jul 2024 16:43:18 -0400 Subject: [PATCH 19/22] fix tooltip display --- components/Block/Tier.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Block/Tier.vue b/components/Block/Tier.vue index 41a160d8..fbef3443 100644 --- a/components/Block/Tier.vue +++ b/components/Block/Tier.vue @@ -44,8 +44,8 @@ const { data: block } = useAsyncData(props.uuid, () => {{ block.price }}
{{ block.term }}  - - + +

From 93747eab1c409e5bc2911b71f01bf3c911c7bdac Mon Sep 17 00:00:00 2001 From: bryantgillespie Date: Thu, 18 Jul 2024 16:44:18 -0400 Subject: [PATCH 20/22] smaller min-height for tier --- components/Block/Tier.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Block/Tier.vue b/components/Block/Tier.vue index fbef3443..dbf161ac 100644 --- a/components/Block/Tier.vue +++ b/components/Block/Tier.vue @@ -174,7 +174,7 @@ small { text-wrap: balance; @media (width > 50rem) { - min-height: var(--space-20); + min-height: var(--space-16); } } From d8e7efef0dddb883b43162a83421e00cece8a365 Mon Sep 17 00:00:00 2001 From: bryantgillespie Date: Tue, 23 Jul 2024 01:40:19 -0400 Subject: [PATCH 21/22] update table --- components/Block/Table.vue | 102 ++++++++++++++++++++++++------------- 1 file changed, 67 insertions(+), 35 deletions(-) diff --git a/components/Block/Table.vue b/components/Block/Table.vue index 982df6ae..a03ec6a2 100644 --- a/components/Block/Table.vue +++ b/components/Block/Table.vue @@ -15,37 +15,45 @@ const { data: block } = useAsyncData(props.uuid, () => From 93feb6b3d934b1053d5003d60f78f0a604180230 Mon Sep 17 00:00:00 2001 From: bryantgillespie Date: Tue, 23 Jul 2024 10:42:28 -0400 Subject: [PATCH 22/22] cardgroup grid cols change --- components/Base/CardGroup.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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(), { } @container (width > 40rem) { - --columns: 3; + --columns: 4; --gap: var(--space-6); }