@violetprotocol/nudge-components/dist/src/atoms/Typography/Typography.stories.js

Components for Nudge's websites and applications.

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Typography } from "./Typography";
const meta = {
    component: Typography,
};
export default meta;
export const Heading = {
    render: () => {
        return (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h1", children: "Heading h1" }), _jsx(Typography, { variant: "h2", children: "Heading h2" }), _jsx(Typography, { variant: "h3", children: "Heading h3" }), _jsx(Typography, { variant: "h4", children: "Heading h4" }), _jsx(Typography, { variant: "h5", children: "Heading h5" })] }));
    },
};
export const Display = {
    render: () => {
        return (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "display-xl", children: "Extra Large Display (display-xl)" }), _jsx(Typography, { variant: "display-lg", children: "Large Display (display-lg)" }), _jsx(Typography, { variant: "display-md", children: "Medium Display (display-md)" }), _jsx(Typography, { variant: "display-sm", children: "Small Display (display-sm)" }), _jsx(Typography, { variant: "display-xs", children: "Extra Small Display (display-xs)" })] }));
    },
};
export const Paragraph = {
    render: () => {
        return (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "p-tiny", children: "Paragraph tiny (p-tiny)" }), _jsx(Typography, { variant: "p-xs", children: "Paragraph extra small (p-xs)" }), _jsx(Typography, { variant: "p-sm", children: "Paragraph small (p-sm)" }), _jsx(Typography, { variant: "p", children: "Paragraph normal (p)" }), _jsx(Typography, { variant: "p-leading", children: "Paragraph leading (p-leading)" }), _jsx(Typography, { variant: "p-subheading-sm", children: "Subheading small (p-subheading-sm)" }), _jsx(Typography, { variant: "p-subheading", children: "Subheading (p-subheading)" }), _jsx(Typography, { variant: "p-brand-sm", children: "Brand small (p-brand-sm)" }), _jsx("br", {}), _jsx(Typography, { variant: "p-tiny", className: "font-medium", children: "Paragraph tiny medium (p-tiny font-medium)" }), _jsx(Typography, { variant: "p-xs", className: "font-medium", children: "Paragraph extra small medium (p-xs font-medium)" }), _jsx(Typography, { variant: "p-sm", className: "font-medium", children: "Paragraph small medium (p-sm font-medium)" }), _jsx(Typography, { variant: "p", className: "font-medium", children: "Paragraph normal medium (p font-medium)" }), _jsx(Typography, { variant: "p-leading", className: "font-medium", children: "Paragraph leading medium (p-leading font-medium)" }), _jsx(Typography, { variant: "p-subheading-sm", className: "font-medium", children: "Subheading small medium (p-subheading-sm font-medium)" }), _jsx(Typography, { variant: "p-subheading", className: "font-medium", children: "Subheading medium (p-subheading font-medium)" }), _jsx(Typography, { variant: "p-brand-sm", className: "font-medium", children: "Brand small medium (p-brand-sm font-medium)" })] }));
    },
};
export const Responsive = {
    render: () => {
        return (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "display-xs", breakpointVariants: {
                        sm: "display-sm",
                        md: "display-md",
                        lg: "display-lg",
                        xl: "display-xl",
                    }, children: "Responsive Display" }), _jsx(Typography, { variant: "h5", breakpointVariants: {
                        sm: "h4",
                        md: "h3",
                        lg: "h2",
                        xl: "h1",
                    }, children: "Responsive Heading" }), _jsx(Typography, { variant: "p-xs", breakpointVariants: {
                        sm: "p-sm",
                        md: "p",
                        lg: "p-leading",
                        xl: "p-subheading",
                    }, children: "Responsive Paragraph" })] }));
    },
};