Define Inner Page Paragraph Styles

[laurelthrash]

Define paragraph styles to include text links, bullets, and lists (all types of lists) - anything that might be written into the WYSIWYG. Does not include Intro Text (Intro Text is a separate component). For very basic inner page.

Parent Issue: N/A Related Issue: #610

Sub-Tasks

• [x] Create comp for inner page (includes H1-H6 and paragraph styles from #610 ) (NOTE: does not include feature cards, images, etc. Should just be header and paragraph text)
• [ ] Design team to define styles (noted in description) [design]
• [ ] Update styles in Sketch/Figma according to the definitions [design]
• [ ] Update on Documentation Site/Storybook according to the definitions [devs]

Notes

• This is prepping for NCI DS rollout

[monika-jaeger]

InVision Link [WIP] Figma Typography Board [WIP]

USWDS resources:

• Paragraph Styles
• List Items
• Text Links

[monika-jaeger]

usa-prose-body: font-open-sans-regular size-16 line-height-24

usa-link: color-primary (#007BBD)

usa-link:visited: color-violet-70v (#562B97)

usa-link--light: Text links used on dark backgrounds color-primary-light (#3395CA)

[laurelthrash]

Notes from internal meeting on 01/26/23:

Actions

• [x] Include nested list in comp (use what USWDS does)

Outstanding Questions

• [x] Are we addressing the glossification style at this point? Or will this come later on with dictionaries?

[monika-jaeger]

InVision Comps updated with nested lists

[laurelthrash]

Per conversation via Slack, @monika-jaeger going to develop the measure tokens and include consideration of floating items in the text. To discuss further during 1/31 internal UX meeting. Regarding glossification, it is our decision if we wish to define styling at this point. Do not believe any non-platform sites have dictionary links so would not apply to NCIDS for all. Cc: @monika-jaeger

[monika-jaeger]

Measure tokens in Figma

Sketch comp of floating element and a measure of 4

Note: Sketch & Figma both don't have an option to set 'measure,' so the comp was manually set based on USWDS Measure guidelines.

After chatting with Bryan, here are additional areas he noted that use measure. Otherwise it's just the paragraph styles, and just those styles using the USWDS mixins. Summary boxes don't reference measure.

• Intro text (usa-intro)

This uses the $theme-lead-measure variable. We can change that stupidly large font size.

• Lists (usa-list)

Specifically this applies to list items

• Icon Lists (usa-icon-list)

This one is complicated, but it looks like it sets the measure to a known size if you do not use a size variant of the icon list.

Lots of instances of hardcoded measure of 5

• Banner (usa-banner)

Whatever the $banner-guidance-measure is. Maybe this is what you see when you expand the “how can you tell?” link which we don’t use.

• Process List

List items are hardcoded as a measure of 5

@laurelthrash / @meglake comment updated with all notes/links related to measure. I'll cont. to work on glossification.

[laurelthrash]

Notes from 01/31 internal meeting:

Measure Token: desire is to not define the measure so that the text wraps around floating images, but want to confirm with the dev team what the implications are for this.

• [x] Reply to Slack thrash with Bryan re: measure tokens @laurelthrash

Glossification: keep current styling, so it is distinctive enough for users that it is

• [x] Define glossification styling and update comp @monika-jaeger

[laurelthrash]

Measurement token conversation on hold until 2/8 Requirements meeting to discuss deeper with designers and devs.

[monika-jaeger]

Glossification styles added to InVision for desktop breakpoint.

[laurelthrash]

Moving to DS Sprint 11. Discussion tentatively set for Wed. 02/15.

[andyvanavery31]

This is complete.