From e540e786d883a1a02a000e8a341ca5f66870b365 Mon Sep 17 00:00:00 2001 From: Bartosz Leper Date: Tue, 30 Jul 2024 15:18:21 +0200 Subject: [PATCH] Backport part of the typography changes This is not a typical backport. It doesn't change the UI appearance, but instead aims to make it a bit easier to backport changes to v16 by providing the same additional components as v17 have. The new styles are prefixed with the word "new", so if you are specifying typography manually, you are still responsible for verifying that it works as intended and changing the typography attributes if required. --- web/packages/design/src/Text/Text.jsx | 80 +++++++++++++++++++++ web/packages/design/src/Text/index.js | 12 ++++ web/packages/design/src/index.ts | 23 +++++- web/packages/design/src/theme/typography.js | 79 ++++++++++++++++++++ 4 files changed, 193 insertions(+), 1 deletion(-) diff --git a/web/packages/design/src/Text/Text.jsx b/web/packages/design/src/Text/Text.jsx index 40983bc206ac7..d08de66e486c6 100644 --- a/web/packages/design/src/Text/Text.jsx +++ b/web/packages/design/src/Text/Text.jsx @@ -52,3 +52,83 @@ Text.defaultProps = { }; export default Text; + +/** + * H1 heading. Example usage: page titles and empty result set notifications. + * + * Do not use where `h1` typography is used only to make the text bigger (i.e. + * there's no following content that is logically tied to the heading). + */ +export const H1 = props => ; + +/** Subtitle for heading level 1. Renders as a paragraph. */ +export const Subtitle1 = props => ( + +); + +/** + * H2 heading. Example usage: dialog titles, dialog-like side panel titles. + * + * Do not use where `h2` typography is used only to make the text bigger (i.e. + * there's no following content that is logically tied to the heading). + */ +export const H2 = props => ; + +/** Subtitle for heading level 2. Renders as a paragraph. */ +export const Subtitle2 = props => ( + +); + +/** + * H3 heading. Example usage: explanatory side panel titles, resource enrollment + * step boxes. + * + * Do not use where `h3` typography is used only to make the text stand out more + * (i.e. there's no following content that is logically tied to the heading). + */ +export const H3 = props => ; + +/** Subtitle for heading level 3. Renders as a paragraph. */ +export const Subtitle3 = props => ( + +); + +/** + * H4 heading. + * + * Do not use where `h4` typography is used only to make the text stand out more + * (i.e. there's no following content that is logically tied to the heading). + */ +export const H4 = props => ; + +/** + * A paragraph. Use for text consisting of actual sentences. Applies + * inter-paragraph spacing if grouped with other paragraphs, but doesn't apply + * typography. Use directly when typography is expected to be set by the parent + * component; prefer {@link P1}, {@link P2}, {@link P3} otherwise. + */ +export const P = styled(Text).attrs({ as: 'p' })` + p + & { + margin-top: ${props => props.theme.space[3]}px; + // Allow overriding. + ${space} + } +`; + +/** + * A {@link P} that uses `body1` typography. Applies inter-paragraph spacing if + * grouped with other paragraphs. + */ +export const P1 = props => ; + +/** + * A {@link P} that uses `body2` typography. Applies inter-paragraph spacing if + * grouped with other paragraphs. + */ +export const P2 = props => ; + +/** + * A {@link P} that uses `body3` typography. Applies inter-paragraph spacing if + * grouped with other paragraphs. + */ +export const P3 = props => ; diff --git a/web/packages/design/src/Text/index.js b/web/packages/design/src/Text/index.js index 6b30a4e21e4bb..d4c1d1a1bbaf6 100644 --- a/web/packages/design/src/Text/index.js +++ b/web/packages/design/src/Text/index.js @@ -17,4 +17,16 @@ */ import Text from './Text'; +export { + H1, + H2, + H3, + H4, + P1, + P2, + P3, + Subtitle1, + Subtitle2, + Subtitle3, +} from './Text'; export default Text; diff --git a/web/packages/design/src/index.ts b/web/packages/design/src/index.ts index 1fde350b6e23f..c9cd66f1222ad 100644 --- a/web/packages/design/src/index.ts +++ b/web/packages/design/src/index.ts @@ -39,7 +39,18 @@ import LabelState from './LabelState'; import Link from './Link'; import { Mark } from './Mark'; import Image from './Image'; -import Text from './Text'; +import Text, { + H1, + H2, + H3, + H4, + P1, + P2, + P3, + Subtitle1, + Subtitle2, + Subtitle3, +} from './Text'; import SideNav, { SideNavItem } from './SideNav'; import { StepSlider } from './StepSlider'; import TopNav from './TopNav'; @@ -69,6 +80,10 @@ export { CardSuccessLogin, DocumentTitle, Flex, + H1, + H2, + H3, + H4, Indicator, Input, Label, @@ -88,8 +103,14 @@ export { Menu, MenuItem, MenuItemIcon, + P1, + P2, + P3, TextArea, Toggle, + Subtitle1, + Subtitle2, + Subtitle3, }; export type { TextAreaProps } from './TextArea'; export * from './keyframes'; diff --git a/web/packages/design/src/theme/typography.js b/web/packages/design/src/theme/typography.js index 30b5a3f79946e..bb2fe53c706a0 100644 --- a/web/packages/design/src/theme/typography.js +++ b/web/packages/design/src/theme/typography.js @@ -18,6 +18,7 @@ const light = 300; const regular = 400; +const medium = 500; const bold = 600; export const fontSizes = [10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 34]; @@ -101,6 +102,84 @@ const typography = { fontSize: '14px', lineHeight: '20px', }, + + newBody1: { + fontSize: '16px', + fontWeight: light, + lineHeight: '24px', + letterSpacing: '0.08px', + }, + newBody2: { + fontSize: '14px', + fontWeight: light, + lineHeight: '24px', + letterSpacing: '0.035px', + }, + newBody3: { + fontSize: '12px', + fontWeight: regular, + lineHeight: '20px', + letterSpacing: '0.015px', + }, + newBody4: { + fontSize: '10px', + fontWeight: regular, + lineHeight: '16px', + letterSpacing: '0.013px', + }, + + /** + * Don't use directly, prefer the `H1` component except for text that doesn't + * introduce document structure. + */ + newH1: { + fontWeight: medium, + fontSize: '24px', + lineHeight: '32px', + }, + /** + * Don't use directly, prefer the `H2` component except for text that doesn't + * introduce document structure. + */ + newH2: { + fontWeight: medium, + fontSize: '18px', + lineHeight: '24px', + }, + /** + * Don't use directly, prefer the `H3` component except for text that doesn't + * introduce document structure. + */ + newH3: { + fontWeight: bold, + fontSize: '14px', + lineHeight: '20px', + }, + newH4: { + fontWeight: medium, + fontSize: '12px', + lineHeight: '20px', + letterSpacing: '0.03px', + textTransform: 'uppercase', + }, + newSubtitle1: { + fontSize: '16px', + fontWeight: regular, + lineHeight: '24px', + letterSpacing: '0.024px', + }, + newSubtitle2: { + fontSize: '14px', + fontWeight: regular, + lineHeight: '20px', + letterSpacing: '0.014px', + }, + newSubtitle3: { + fontSize: '12px', + fontWeight: bold, + lineHeight: '20px', + letterSpacing: '0.012px', + }, }; export default typography;