Skip to content

Latest commit

 

History

History
207 lines (162 loc) · 13.8 KB

README.md

File metadata and controls

207 lines (162 loc) · 13.8 KB
Raw

Typography

npm (scoped)

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/typography

NPM

npm install @leafygreen-ui/typography

Peer Dependencies

Package Version
@leafygreen-ui/leafygreen-provider ^1.1.0

Example

import { H1, H2, Subtitle, Body, InlineCode, InlineKeyCode, Disclaimer, Overline, Link, BackLink } from '@leafygreen-ui/typography';
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<Subtitle>Subtitle</Subtitle>
<Body weight="medium">Body</Body>
<InlineCode>Code</InlineCode>
<>
  <InlineKeyCode>CTRL</InlineKeyCode>
  <InlineCode>+</InlineCode>
  <InlineKeyCode>C</InlineKeyCode>
</>
<Disclaimer>Disclaimer</Disclaimer>
<Overline>Overline</Overline>
<Link href="http://mongodb.design">MongoDB.design</Link>
<BackLink href="/home">MongoDB.design</BackLink>

Output HTML

<h1 class="leafygreen-ui-wbskfk">Heading 1</h1>
<h2 class="leafygreen-ui-1t0mh6j">Heading 2</h2>
<h3 class="leafygreen-ui-1t0mh6j">Heading 3</h3>
<h6 class="leafygreen-ui-1dmxpt6">Subtitle</h6>
<div class="leafygreen-ui-wkgw79">Body</div>
<code class="leafygreen-ui-18bk0d8">Code</code>
<code class="leafygreen-ui-1vl51l4">CTRL</code
><code class="leafygreen-ui-1vl51l4">+</code
><code class="leafygreen-ui-1vl51l4">C</code>
<small class="leafygreen-ui-1cggyhz">Disclaimer</small>
<div class="leafygreen-ui-vezyzr">Overline</div>
<a
  href="http://mongodb.design"
  target="_blank"
  class="leafygreen-ui-1toaa4e"
  data-leafygreen-ui="anchor-container"
>
  <span>MongoDB.design</span>
  <svg
    width="16px"
    height="16px"
    viewBox="0 0 16 16"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
    <title>Open in New Tab</title>
  </svg>
</a>

Properties

All props extend the HTMLElementProps of their root tag, however the below components accept extra props

Component Root
H1 h1
H2 h2
H3 h3
Subtitle h6
Body p
InlineCode code
InlineKeyCode code
Disclaimer small
Overline p
Link a
BackLink a
Label label
Description p
Label p

H1

Prop Type Description Default
darkMode boolean Determines if the component renders in dark mode false
as React.ElementType Element to render the component as. Note: This will supersede the behavior of any other props. 'h1'

H2

Prop Type Description Default
darkMode boolean Determines if the component renders in dark mode false
as React.ElementType Element to render the component as. Note: This will supersede the behavior of any other props. 'h2'

H3

Prop Type Description Default
darkMode boolean Determines if the component renders in dark mode false
as React.ElementType Element to render the component as. Note: This will supersede the behavior of any other props. 'h3'

Subtitle

Prop Type Description Default
darkMode boolean Determines if the component renders in dark mode false
as React.ElementType Element to render the component as. Note: This will supersede the behavior of any other props. 'h6'

Body

Prop Type Description Default
weight 'regular' | 'medium' font-weight applied to typography element 'regular'
darkMode boolean Determines if the component renders in dark mode false
as React.ElementType Element to render the component as. Note: This will supersede the behavior of any other props. 'p'
baseFontSize 13 | 16 font-size applied to typography element Defaults to value set by LeafyGreen Provider.

InlineCode

Prop Type Description Default
href string | undefined If an href prop is passed to InlineCode it will be rendered with an a tag wrapping the code tag. Otherwise, it'll simply render as a code tag.
darkMode boolean Determines if the component renders in dark mode
baseFontSize 13 | 16 font-size applied to typography element Defaults to value set by LeafyGreen Provider.

InlineKeyCode

Prop Type Description Default
darkMode boolean Determines if the component renders in dark mode
baseFontSize 13 | 16 font-size applied to typography element Defaults to value set by LeafyGreen Provider.

Disclaimer

Prop Type Description Default
darkMode boolean Determines if the component renders in dark mode false

Error

Prop Type Description Default
darkMode boolean Determines if the component renders in dark mode false

Overline

Prop Type Description Default
as React.ElementType The component or Element to render the component as. Note: This will supersede the behavior of any other props. p
darkMode boolean Determines if the component renders in dark mode false

Link

Prop Type Description Default
arrowAppearance 'hover', 'persist', 'none' Displays a right arrow adjacent to the anchor tag. When set to persist the arrow will always be present. When set to hover, the arrow will only appear when hovering over the arrow. 'none'
hideExternalIcon boolean Hides the external icon when the current host name is different from the host of the destination URL false
darkMode boolean Determines if the component renders in dark mode false
as React.ElementType Element to render the component as. Note: This will supersede the behavior of any other props. 'a'
baseFontSize 13 | 16 font-size applied to typography element Defaults to value set by LeafyGreen Provider.

BackLink

Note: BackLink is intended for internal linking only

Prop Type Description Default
darkMode boolean Determines if the component renders in dark mode false
as React.ElementType Element to render the component as. Note: This will supersede the behavior of any other props. 'a'
baseFontSize 13 | 16 font-size applied to typography element Defaults to value set by LeafyGreen Provider.

Label

Prop Type Description Default
darkMode boolean Determines if the component renders in dark mode false
disabled boolean Determines whether the component should appear disabled false
baseFontSize 13 | 16 font-size applied to typography element Defaults to value set by LeafyGreen Provider.
as React.ElementType The component or Element to render the component as. Note: This will supersede the behavior of any other props. label

Description

Prop Type Description Default
darkMode boolean Determines if the component renders in dark mode false
baseFontSize 13 | 16 font-size applied to typography element Defaults to value set by LeafyGreen Provider.