DS - Typography Tokens - SPIKE - Components vs. Tokens

[kellylein]

Description

As part of this story, we want to:

• Decide if/how we want to build out the typography components. Currently, there are Heading, Text, Display, and Navigation components in Figma, but it's unclear if/how we want to implement typography in the code.
  • Do we want individual Header, Text (rename to Paragraph?), Display, and Navigation components? Or one component with variants for each type? Or no component and only use tokens directly?
  • Are we able to leverage React Native's text component instead?
  • How will the solution implement paragraph spacing? It was previously discussed that we needed to create a component to combine the typography tokens with the spacer component for paragraph spacing. The paragraph spacing will need to be set to a default for each style, but will also need to be customizable.

Design Notes

• There are currently 4 separate components in Figma. We also discussed potentially creating a Bullet component. All text-related components will NOT include inline styling or links in the MVP.
  • Heading (4 variants - large, medium, small, x-small)
  • Text/Paragraph (4 variants - large, medium, small, x-small)
  • Display
  • Navigation
• Figma components include a text box with styles (composite tokens) applied and Spacer component below. Spacer component will have a different default value for each component/variant (based on paragraph-spacing), but will be customizable for designers/engineers.
• Figma is NOT ready for handoff, but feel free to reference how the components are set up for this spike ticket.

Acceptance Criteria

• [ ] look into options and determine pros and cons
• [ ] smallest Proof of Concept possible
• [ ] meet with rest of team to determine the preferred route for Typography tokens - component or tokens directly

Ticket Checklist

• [ ] Acceptance criteria defined
• [x] Labels added (front-end, back-end, feature)
• [x] Linked to an Epic

[narin]

Tokens only (No Components)

Developers use RN’s built in Text component, but can use our preset typography tokens in the component’s style prop

Example Code:

import { Text } from 'react-native'

import { typography } from '@department-of-veterans-affairs/mobile-tokens'
...

const textStyle = {
  ...typography.headingLg,
  color: theme.vadsColorForegroundDefault
}

return (
  <Text style={textStyle}>{text}</Text>
)

Pros

• Only need to provide tokens
• No need to build components

Cons

• Less control over Text
• User can use non-standard text color
• User can modify type stylings easily and are less inclined to use tokens

Single component

Example Code:

import { Text } from '@department-of-veterans-affairs/mobile-component-library'
...

return (
  <Text variant="body" size="lg">{text}</Text>
)

Provide a single Text component (name TBD) that has preset variants for each typography variant

Pros

• Simple single component for displaying text
• Encourages use of VADS typography/tokens
• Encourage use of our Text component rather than React Native’s

Cons

• May be too many variants for a single component
• May need to get creative with naming as Text if we don't want it to collide with RN's (worth noting that the app doesn't use RN's Text component directly in too many places)

Separate components

Provide 4 components (e.g. HeadingText, BodyText, DisplayText, NavigationText)

Example Code:

import { BodyText } from '@department-of-veterans-affairs/mobile-component-library'
..

return (
  <BodyText size="lg">{text}</Text>
)

Pros

• Each component has a clear purpose
• Encourages use of VADS typography/tokens

Cons

• More components for devs to have to import and learn how to use