Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Create <Text /> component

See original GitHub issue

Description

The most basic component for rendering text blocks.

Visual style

body-text

Parameters

We should be able to render all of these styles with the combination of parameters from the table below.

Parameter	Values	Default
Style	Primary, Secondary, Attention	Primary
Size	Large, Normal, Small	Normal
Weight	bold, normal	normal
Italic	[boolean]	false
Uppercase	[boolean]	false
Element	p, span, div, (anything else?)	p

Design tokens

For all configurations:

font-family: $fontFamily
line-height: $lineHeightText

Based on selected configuration:

Parameter:Value	property: $token
Style:Primary [optional]	`color: $colorTextPrimary`
Style:Secondary [optional]	`color: $colorTextSecondary`
Style:Attention [optional]	`color: $colorTextAttention`
Size:Large [optional]	`font-size: $fontSizeTextLarge`
Size:Normal [optional]	`font-size: $fontSizeTextNormal`
Size:Small [optional]	`font-size: $fontSizeTextSmall`
Weight:normal [optional]	`font-weight: $fontWeightNormal`
Weight:bold [optional]	`font-weight: $fontWeightBold`

Italic and uppercase don’t need tokens as they aren’t expressed with numeric values.

Possible examples of configuration:

<Text>A) <strong>We're here for you.</strong> First, let's narrow down your request.</Text>
<Text Element="div" Italic>B) We're here for you. First, let's narrow down your request.</Text>

Rendered HTML on those configurations:

<p>A) <strong>We're here for you.</strong> First, let's narrow down your request.</p>
<div><em>B) We're here for you.</strong> First, let's narrow down your request.</em></div>

Note: Please take this just as my component interpretation for better understanding how I meant which param. I am totally not sure about <strong> though, but it should be possible to make just part of the text bold (or link in other cases). I don’t have to include “real” code, just give me a feedback how you want to specify it and I can do it your way. I won’t be able to add these code examples to more complicated components anyway.

Some inspiration from others React components for solving text component:

We probably don’t need to reinvent the wheel, a lot of other teams solved these basics already. I have a good collection of links with some inspiration from other design systems so I can include for every common component so we have something to study and inspire from 🙂Hope it helps a little! I think that it should be possible to check their Github repositories, some of them can have them public.

https://pricelinelabs.github.io/design-system/Text http://grommet.io/dxc/docs/paragraph (check Examples button on the right top) https://cloudflare.github.io/cf-ui/#cf-component-text http://design-system.pluralsight.com/components/text/ https://seek-oss.github.io/seek-style-guide/text ( + subcomponent for strong, etc.: https://seek-oss.github.io/seek-style-guide/strong) https://backpack.github.io/components/web/text