mirror of
https://github.com/hanzoai/o11y-components.git
synced 2026-10-30 14:54:15 +00:00
Vinicius LourençoandGitHub
9518b912f1
* feat(storybook): bump version of storybook to v10 * test(storybook): add ci step * chore(build): target es2018 & from .js to .mjs * chore(.idea): do not track this folder * fix(storybook): not injecting the css on build
65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import type { Meta, StoryFn } from '@storybook/react-vite';
|
|
import type React from 'react';
|
|
import { getTransformedTypographyTokens } from '../utils.js';
|
|
|
|
export default {
|
|
title: 'Design System/Typography',
|
|
component: () => null,
|
|
parameters: {
|
|
layout: 'fullscreen',
|
|
backgrounds: {
|
|
default: 'dark',
|
|
values: [{ name: 'dark', value: '#1a1a1a' }],
|
|
},
|
|
},
|
|
} as Meta;
|
|
|
|
const typography = getTransformedTypographyTokens();
|
|
|
|
const getFontSize = (variant: string): string => {
|
|
return typography.FONTSIZE[variant as keyof typeof typography.FONTSIZE] || '';
|
|
};
|
|
|
|
const getFontWeight = (variant: string): string => {
|
|
return typography.FONTWEIGHT[variant as keyof typeof typography.FONTWEIGHT] || '';
|
|
};
|
|
|
|
const FontSizeShowcase: React.FC = () => (
|
|
<div className="p-5">
|
|
<h1 className="mb-5 text-lg font-bold text-vanilla-100">Font Sizes</h1>
|
|
<div className="grid grid-cols-1 gap-4">
|
|
{Object.keys(typography.FONTSIZE).map((variant) => (
|
|
<div key={variant} className="text-vanilla-100">
|
|
<h2 style={{ fontSize: getFontSize(variant) }}>
|
|
{variant} - {getFontSize(variant)}
|
|
</h2>
|
|
<p style={{ fontSize: getFontSize(variant) }}>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const FontWeightShowcase: React.FC = () => (
|
|
<div className="p-5">
|
|
<h1 className="mb-5 text-lg font-bold text-vanilla-100">Font Weights</h1>
|
|
<div className="grid grid-cols-1 gap-4">
|
|
{Object.keys(typography.FONTWEIGHT).map((variant) => (
|
|
<div key={variant} className="text-vanilla-100">
|
|
<h2 style={{ fontWeight: getFontWeight(variant) }}>
|
|
{variant} - {getFontWeight(variant)}
|
|
</h2>
|
|
<p style={{ fontWeight: getFontWeight(variant) }}>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export const FontSize: StoryFn = () => <FontSizeShowcase />;
|
|
export const FontWeight: StoryFn = () => <FontWeightShowcase />;
|