import React from 'react'; import { type StoryMetaType } 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 { FontWeight } from '@leafygreen-ui/tokens'; 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; `; export const LiveExample = ({ baseFontSize, darkMode, }: { baseFontSize: 14 | 16; darkMode: boolean; }) => { return (

Heading 1

Heading 2

Heading 3

Subtitle Body (Regular) Body (Medium) Body (SemiBold) Body (Regular Italic) Body (Medium 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.
); }; LiveExample.parameters = { chromatic: { disableSnapshot: true } }; const meta: StoryMetaType = { title: 'Components/Typography', component: LiveExample, parameters: { default: 'LiveExample', generate: { combineArgs: { darkMode: [false, true], baseFontSize: [14, 16], }, }, }, }; export default meta; 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 = () => <>;