c6da0fb8cb
Feat/LOY-316 Level Progress Card
* feat(LOY-315): Add MembershipOverviewCard
* refactor(LOY-315): abstract sasbooststatus
* feat(LOY-316): build out LevelProgressCard skeleton & variant styling
* feat(LOY-316): Add HighesMembershipCard
* feat(LOY-316): ProgressBarCard base
* refactor(LOY-315): highest level card misc fixes
* feat(LOY-316): Add progress component to design system
* fix(LOY-316): type check
* refactor(LOY-316): calculate currentEarnings correctly
* fix(LOY-316): sas icon showing when not boosted
* fix(LOY-316): css module
* refactor(LOY-316): Restructure components
* feat(LOY-316): Add marker pin 📍
* fix(LOY-316): strict equality checks
* fix(LOY-316): code review fixes
* chore(LOY-316): conditionally hide old section under flag
* feat(LOY-316): Add level progress card to my points page
* chore(LOY-316): marker label container height
Approved-by: Matilda Landström
59 lines
964 B
TypeScript
59 lines
964 B
TypeScript
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
|
|
|
|
import { Progress } from './index'
|
|
|
|
const meta: Meta<typeof Progress> = {
|
|
title: 'Components/Progress',
|
|
component: Progress,
|
|
parameters: {
|
|
backgrounds: { disable: true },
|
|
},
|
|
argTypes: {
|
|
value: {
|
|
control: { type: 'range', min: 0, max: 100, step: 1 },
|
|
description: 'The current progress value (0-100)',
|
|
},
|
|
'aria-label': {
|
|
control: 'text',
|
|
description: 'Accessible label for the progress bar',
|
|
},
|
|
},
|
|
args: {
|
|
'aria-label': 'Loading progress',
|
|
},
|
|
}
|
|
|
|
export default meta
|
|
|
|
type Story = StoryObj<typeof Progress>
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
value: 65,
|
|
},
|
|
}
|
|
|
|
export const LowProgress: Story = {
|
|
args: {
|
|
value: 15,
|
|
},
|
|
}
|
|
|
|
export const HighProgress: Story = {
|
|
args: {
|
|
value: 90,
|
|
},
|
|
}
|
|
|
|
export const Complete: Story = {
|
|
args: {
|
|
value: 100,
|
|
},
|
|
}
|
|
|
|
export const Empty: Story = {
|
|
args: {
|
|
value: 0,
|
|
},
|
|
}
|