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

@@ -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 => <Text as="h1" typography="newH1" {...props} />;
+
+/** Subtitle for heading level 1. Renders as a paragraph. */
+export const Subtitle1 = props => (
+  <Text as="p" typography="newSubtitle1" {...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 => <Text as="h2" typography="newH2" {...props} />;
+
+/** Subtitle for heading level 2. Renders as a paragraph. */
+export const Subtitle2 = props => (
+  <Text as="p" typography="newSubtitle2" {...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 => <Text as="h3" typography="newH3" {...props} />;
+
+/** Subtitle for heading level 3. Renders as a paragraph. */
+export const Subtitle3 = props => (
+  <Text as="p" typography="newSubtitle3" {...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 => <Text as="h4" typography="newH4" {...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 => <Text as={P} typography="newBody1" {...props} />;
+
+/**
+ * A {@link P} that uses `body2` typography. Applies inter-paragraph spacing if
+ * grouped with other paragraphs.
+ */
+export const P2 = props => <Text as={P} typography="newBody2" {...props} />;
+
+/**
+ * A {@link P} that uses `body3` typography. Applies inter-paragraph spacing if
+ * grouped with other paragraphs.
+ */
+export const P3 = props => <Text as={P} typography="newBody3" {...props} />;

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;

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';

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;