fix(ui): show disabled state on course landing hero CTA (#815)
CoursePrimaryAction used the base Button with per-theme color classes that overrode disabled styling. When enrollment was closed, the pricing CTA appeared correctly muted while the hero Buy Now button still looked active. Switch the hero CTA to LandingButton (same primitive as pricing) and reset theme color overrides when disabled so both CTAs look and behave consistently.
This commit is contained in:
@@ -1,24 +1,39 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Button, type ButtonVariant } from '../../base/button';
|
import { cn } from '../../tools';
|
||||||
|
import LandingButton from './landing-button.svelte';
|
||||||
import type { LandingPrimaryAction } from './types';
|
import type { LandingPrimaryAction } from './types';
|
||||||
|
|
||||||
|
type LandingButtonVariant = 'primary' | 'secondary' | 'tertiary';
|
||||||
|
type LandingButtonSize = 'sm' | 'md' | 'lg';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
action: LandingPrimaryAction;
|
action: LandingPrimaryAction;
|
||||||
size?: 'default' | 'sm' | 'lg';
|
size?: 'default' | 'sm' | 'lg';
|
||||||
variant?: ButtonVariant;
|
variant?: LandingButtonVariant;
|
||||||
class?: string;
|
class?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
let { action, size = 'default', variant = 'default', class: className = '' }: Props = $props();
|
let { action, size = 'default', variant = 'primary', class: className = '' }: Props = $props();
|
||||||
|
|
||||||
|
const landingSize = $derived<LandingButtonSize>(size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md');
|
||||||
|
const isDisabled = $derived(action.disabled ?? false);
|
||||||
|
|
||||||
|
const disabledClass = $derived(
|
||||||
|
variant === 'secondary'
|
||||||
|
? 'ui:!bg-[var(--landing-button-secondary-bg)] ui:!text-[var(--landing-button-secondary-fg)] ui:hover:!bg-[var(--landing-button-secondary-bg)]'
|
||||||
|
: variant === 'tertiary'
|
||||||
|
? 'ui:!bg-transparent ui:!text-[var(--landing-button-tertiary-fg)] ui:hover:!bg-transparent'
|
||||||
|
: 'ui:!bg-[var(--landing-button-primary-bg)] ui:!text-[var(--landing-button-primary-fg)] ui:hover:!bg-[var(--landing-button-primary-bg)]'
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Button
|
<LandingButton
|
||||||
|
{variant}
|
||||||
|
size={landingSize}
|
||||||
href={action.onclick ? undefined : action.href}
|
href={action.onclick ? undefined : action.href}
|
||||||
onclick={action.onclick}
|
onclick={action.onclick}
|
||||||
disabled={action.disabled ?? false}
|
disabled={isDisabled}
|
||||||
{size}
|
class={cn(className, isDisabled && disabledClass)}
|
||||||
{variant}
|
|
||||||
class={className}
|
|
||||||
>
|
>
|
||||||
{action.label}
|
{action.label}
|
||||||
</Button>
|
</LandingButton>
|
||||||
|
|||||||
Reference in New Issue
Block a user