65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
|
import type { Meta, StoryObj } from '@storybook/nextjs'
|
||
|
|
import PremiumBadge from '.'
|
||
|
|
|
||
|
|
const colors: Array<NonNullable<React.ComponentProps<typeof PremiumBadge>['color']>> = ['blue', 'indigo', 'gray', 'orange']
|
||
|
|
|
||
|
|
const PremiumBadgeGallery = ({
|
||
|
|
size = 'm',
|
||
|
|
allowHover = false,
|
||
|
|
}: {
|
||
|
|
size?: 's' | 'm'
|
||
|
|
allowHover?: boolean
|
||
|
|
}) => {
|
||
|
|
return (
|
||
|
|
<div className="flex w-full max-w-xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
|
||
|
|
<p className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Brand badge variants</p>
|
||
|
|
<div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
|
||
|
|
{colors.map(color => (
|
||
|
|
<div key={color} className="flex flex-col items-center gap-2 rounded-xl border border-transparent px-2 py-4 hover:border-divider-subtle hover:bg-background-default-subtle">
|
||
|
|
<PremiumBadge color={color} size={size} allowHover={allowHover}>
|
||
|
|
<span className="px-2 text-xs font-semibold uppercase tracking-[0.14em]">Premium</span>
|
||
|
|
</PremiumBadge>
|
||
|
|
<span className="text-[11px] uppercase tracking-[0.16em] text-text-tertiary">{color}</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const meta = {
|
||
|
|
title: 'Base/General/PremiumBadge',
|
||
|
|
component: PremiumBadgeGallery,
|
||
|
|
parameters: {
|
||
|
|
layout: 'centered',
|
||
|
|
docs: {
|
||
|
|
description: {
|
||
|
|
component: 'Gradient badge used for premium features and upsell prompts. Hover animations can be toggled per instance.',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
argTypes: {
|
||
|
|
size: {
|
||
|
|
control: 'radio',
|
||
|
|
options: ['s', 'm'],
|
||
|
|
},
|
||
|
|
allowHover: { control: 'boolean' },
|
||
|
|
},
|
||
|
|
args: {
|
||
|
|
size: 'm',
|
||
|
|
allowHover: false,
|
||
|
|
},
|
||
|
|
tags: ['autodocs'],
|
||
|
|
} satisfies Meta<typeof PremiumBadgeGallery>
|
||
|
|
|
||
|
|
export default meta
|
||
|
|
type Story = StoryObj<typeof meta>
|
||
|
|
|
||
|
|
export const Playground: Story = {}
|
||
|
|
|
||
|
|
export const HoverEnabled: Story = {
|
||
|
|
args: {
|
||
|
|
allowHover: true,
|
||
|
|
},
|
||
|
|
}
|