All files / Typography Typography.stories.tsx

100% Statements 5/5
100% Branches 0/0
100% Functions 2/2
100% Lines 5/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127                                        1x 1x   1x                                                                                                                     1x 1x                                                                                      
import React from 'react';
import { Story, Meta } from '@storybook/react';
 
import HelpIcon from './../Icon/HelpIcon/HelpIcon';
import ToolTip from './../ToolTip/ToolTip';
import Typography, { ITypographyProps } from './Typography';
 
export default {
	title: 'Text/Typography',
	component: Typography,
	parameters: {
		docs: {
			description: {
				component: Typography.peek.description,
			},
		},
	},
} as Meta;
 
/* Variants */
export const Variants: Story<ITypographyProps> = (args) => {
	const { Title, Target } = ToolTip;
 
	return (
		<section>
			<Typography {...args} variant='h1'>
				h1. Heading
			</Typography>
			<br />
			<Typography {...args} variant='h2'>
				h2. Heading
			</Typography>
			<br />
			<Typography {...args} variant='h3'>
				h3. Heading
			</Typography>
			<br />
			<Typography {...args} variant='p'>
				p. paragraph text
			</Typography>
			<br />
			<Typography {...args} variant='tabular'>
				tabular. text for tables
			</Typography>
			<br />
			<Typography {...args} variant='a'>
				a. link text
			</Typography>
			<br />
			<Typography {...args} variant='pre'>
				pre. preformatted text
			</Typography>
			<br />
			<Typography {...args} variant='code'>
				code. snazzy code
			</Typography>
			<br />
			<Typography {...args} variant='kbd'>
				kbd. keyboard inputs
			</Typography>
			<br />
			<Typography {...args} variant='samp'>
				samp. sample code outputs
			</Typography>
			<br />
			<Typography {...args} variant='span'>
				span. sample code outputs with help bubble
				<div className='HelpBubble'>
					<ToolTip alignment={'start'} direction={'right'}>
						<Title className='HelpBubble-title'>look at me</Title>
						<Target>
							<HelpIcon size={12} />
						</Target>
					</ToolTip>
				</div>
			</Typography>{' '}
			<br />
		</section>
	);
};
 
/* Nested */
export const Nested: Story<ITypographyProps> = (args) => {
	return (
		<section>
			<Typography {...args} variant='h1'>
				Title
			</Typography>
			<Typography {...args} variant='h2'>
				subtitle
			</Typography>
			<Typography {...args} variant='p'>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Pencil mustachioed
				graeme souness, mustachioed waxy gurn rugged el snort graeme souness
				burt reynolds educated village people boogie nights pencil man of the
				year 1986, pencil village people graeme souness rugged boogie nights
				mouthbrow educated burt reynolds waxy gurn man of the year 1986 des
				lynam charming villain mustachioed cardinal richelieu el snort. Borat
				d’artagnan hungarian testosterone trophy frontiersman hairy kiss.
				beefeater chevron, hairy kiss. cardinal richelieu groucho-a-like
				testosterone trophy d’artagnan dick van dyke rugged chevron Droopy
				frontiersman borat beefeater hungarian chevron, cardinal richelieu
				d’artagnan beefeater el snort Droopy dodgy uncle clive groucho-a-like
				hairy kiss. chevron frontiersman chevron dick van dyke walrus leader of
				men rugged borat bad guy testosterone trophy groucho-a-like alpha trion
				hungarian.
			</Typography>
			<br />
			<Typography {...args} variant='a' style={{ display: 'block' }}>
				Like!
			</Typography>
			<br />
			<Typography {...args} variant='a' style={{ display: 'block' }}>
				Subscribe!
			</Typography>
			<br />
			<Typography {...args} variant='h3'>
				Code Example
			</Typography>
			<Typography {...args} variant='code'>
				npm install all-the-things
			</Typography>
		</section>
	);
};