import React from 'react'; import { storybookArgTypes, type StoryMetaType, type StoryType, } from '@lg-tools/storybook-utils'; import { css, cx } from '@leafygreen-ui/emotion'; import Icon from '@leafygreen-ui/icon'; import LeafygreenProvider from '@leafygreen-ui/leafygreen-provider'; import { palette } from '@leafygreen-ui/palette'; import { BackLink, Body, Description, Disclaimer, Error, H1, H2, H3, InlineCode, InlineKeyCode, Label, Link, Overline, StaticWidthText, Subtitle, } from '.'; const wrapperStyles = css` padding: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; `; const displayBlock = css` display: block; `; const displayFlex = css` display: flex; gap: 8px; `; // eslint-disable-next-line react/prop-types const TypographyDemoComponent = ({ baseFontSize, darkMode, }: { baseFontSize: 14 | 16; darkMode: boolean; }) => { return (

Heading 1

Heading 2

Heading 3

Subtitle Body Body (Semibold) Body (Italic) Body (Semibold Italic)
"Inline Code" "Inline Code Link"
Local (Arrow on Hover)
Local (No Arrow)
Internal (Persist Arrow)
External
As Button
BackLink
CTRL + C
Overline This is a test inline link. Disclaimer This is a test inline link. Hello I am an Error!
This is the description for said label.{' '} This is a test inline link.
); }; const meta: StoryMetaType = { title: 'Components/Typography', component: TypographyDemoComponent, parameters: { default: 'AllTypography', generate: { combineArgs: { darkMode: [false, true], baseFontSize: [14, 16], }, }, }, }; export default meta; export const AllTypography: StoryType = TypographyDemoComponent.bind({}); AllTypography.argTypes = { baseFontSize: { ...storybookArgTypes.baseFontSize, description: 'Storybook prop only. This font size is passed into the LeafygreenProvider.', }, darkMode: storybookArgTypes.darkMode, }; AllTypography.parameters = { chromatic: { disableSnapshot: true, }, }; export const StaticWidthTextStory = () => { const hoverBold = css` font-weight: 400; cursor: pointer; outline: 1px solid ${palette.red.light2}; outline-offset: -1px; &:hover { font-weight: 700; } `; const tabStyle = css` outline: 1px solid ${palette.blue.light1}; padding: 10px; width: max-content; max-width: 200px; `; const buttonStyle = css` outline: 1px solid gray; padding: 10px; width: max-content; max-width: 148px; display: flex; align-items: center; `; return (
Some Tabs
Some long text that will be truncated eventually because its long
Some more text

Some button

Some long text button that should be truncated
); }; StaticWidthTextStory.parameters = { chromatic: { disableSnapshot: true, }, }; export const Generated = () => <>;