54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
// Copyright 2025 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
import * as React from 'react';
|
|
|
|
import { SpinnerV2 } from './SpinnerV2';
|
|
|
|
import type { ComponentMeta } from '../storybook/types';
|
|
import type { Props } from './SpinnerV2';
|
|
|
|
export default {
|
|
title: 'Components/SpinnerV2',
|
|
component: SpinnerV2,
|
|
argTypes: {
|
|
size: { control: { type: 'number' } },
|
|
strokeWidth: { control: { type: 'number' } },
|
|
marginRatio: { control: { type: 'number' } },
|
|
},
|
|
args: { size: 36, strokeWidth: 2, className: undefined, marginRatio: 0.8 },
|
|
} satisfies ComponentMeta<Props>;
|
|
|
|
export function Default(args: Props): JSX.Element {
|
|
return <SpinnerV2 {...args} />;
|
|
}
|
|
|
|
export function Thin(args: Props): JSX.Element {
|
|
return <SpinnerV2 {...args} strokeWidth={1} />;
|
|
}
|
|
|
|
export function Thick(args: Props): JSX.Element {
|
|
return <SpinnerV2 {...args} strokeWidth={6} />;
|
|
}
|
|
|
|
export function NoMargin(args: Props): JSX.Element {
|
|
return <SpinnerV2 {...args} marginRatio={1} strokeWidth={6} />;
|
|
}
|
|
|
|
export function BigMargin(args: Props): JSX.Element {
|
|
return <SpinnerV2 {...args} marginRatio={0.5} strokeWidth={6} />;
|
|
}
|
|
|
|
export function Styled(args: Props): JSX.Element {
|
|
return (
|
|
<div>
|
|
<style>{`
|
|
.red-spinner {
|
|
color: light-dark(hsl(0deg 100% 70%), hsl(0deg 100% 30%));
|
|
}
|
|
`}</style>
|
|
<SpinnerV2 {...args} className="red-spinner" />
|
|
</div>
|
|
);
|
|
}
|