[Typography foundations] Add Text component (#6521)

* [Typography foundations] Add Text component

Co-authored-by: Aveline Thelen <[email protected]>

* [Typography foundations] Add changeset

* [Typography foundations] Remove variant mapping

We expect users to determine element type even if `variant` is passed in, so as to decouple styling from element type.

* [Typography foundations] Clean up exports

* [Typography foundations] Add color options

* [Typography foundations] Add defaults for `as`/`variant` and make `as` required

* [Typography foundations] Add support for `visuallyHidden` prop

* [Typography foundations] Add prop descriptions

* [Typography foundations] Remove `a` as element type

* [Typography foundations] Make `variant` required prop

* [Typography foundations] Rename colors to align with tokens

Co-authored-by: Aveline Thelen <[email protected]>

Author: laurkim

.changeset/curly-llamas-bathe.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added new `Text` component

polaris-react/src/components/Text/Text.scss

@@ -0,0 +1,119 @@
+@import '../../styles/common';
+
+.root {
+  margin: 0;
+  text-align: inherit;
+}
+
+.block {
+  display: block;
+}
+
+.truncate {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.start {
+  text-align: start;
+}
+
+.center {
+  text-align: center;
+}
+
+.end {
+  text-align: end;
+}
+
+.justify {
+  text-align: justify;
+}
+
+.success {
+  color: var(--p-text-success);
+}
+
+.critical {
+  color: var(--p-text-critical);
+}
+
+.warning {
+  color: var(--p-text-warning);
+}
+
+.subdued {
+  color: var(--p-text-subdued);
+}
+
+.regular {
+  font-weight: var(--p-font-weight-regular);
+}
+
+.medium {
+  font-weight: var(--p-font-weight-medium);
+}
+
+.semibold {
+  font-weight: var(--p-font-weight-semibold);
+}
+
+.bold {
+  font-weight: var(--p-font-weight-bold);
+}
+
+.visuallyHidden {
+  @include visually-hidden;
+}
+
+.displaySm {
+  font-size: var(--p-font-size-12);
+  line-height: var(--p-line-height-5);
+}
+
+.displayMd {
+  font-size: 32px;
+  line-height: 40px;
+}
+
+.displayLg {
+  font-size: 40px;
+  font-weight: var(--p-font-weight-semibold);
+  line-height: 48px;
+}
+
+.headingSm {
+  font-size: var(--p-font-size-1);
+  line-height: var(--p-line-height-1);
+}
+
+.headingMd {
+  font-size: var(--p-font-size-3);
+  line-height: var(--p-line-height-2);
+}
+
+.headingLg {
+  font-size: var(--p-font-size-5);
+  line-height: var(--p-line-height-3);
+}
+
+.headingXl {
+  font-size: var(--p-font-size-7);
+  line-height: var(--p-line-height-3);
+}
+
+.bodySm {
+  font-size: var(--p-font-size-1);
+  line-height: var(--p-line-height-1);
+}
+
+.bodyMd {
+  font-size: var(--p-font-size-3);
+  line-height: var(--p-line-height-2);
+}
+
+.bodyLg {
+  font-size: var(--p-font-size-5);
+  line-height: var(--p-line-height-3);
+}

polaris-react/src/components/Text/Text.tsx

@@ -0,0 +1,70 @@
+import React, {ReactNode} from 'react';
+
+import {classNames} from '../../utilities/css';
+
+import styles from './Text.scss';
+
+type Element = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+
+type Variant =
+  | 'displaySm'
+  | 'displayMd'
+  | 'displayLg'
+  | 'headingSm'
+  | 'headingMd'
+  | 'headingLg'
+  | 'headingXl'
+  | 'bodySm'
+  | 'bodyMd'
+  | 'bodyLg';
+
+type Alignment = 'inherit' | 'start' | 'center' | 'end' | 'justify';
+
+type FontWeight = 'regular' | 'medium' | 'semibold' | 'bold';
+
+type Color = 'success' | 'critical' | 'warning' | 'subdued';
+
+export interface TextProps {
+  /** Adjust horizontal alignment of text */
+  alignment?: Alignment;
+  /** The element type */
+  as: Element;
+  /** Text to display */
+  children: ReactNode;
+  /** Adjust color of text */
+  color?: Color;
+  /** Adjust weight of text */
+  fontWeight?: FontWeight;
+  /** Truncate text overflow with ellipsis */
+  truncate?: boolean;
+  /** Typographic style of text */
+  variant: Variant;
+  /** Visually hide the text */
+  visuallyHidden?: boolean;
+}
+
+export const Text = ({
+  alignment = 'inherit',
+  as,
+  children,
+  color,
+  fontWeight = 'regular',
+  truncate = false,
+  variant,
+  visuallyHidden = false,
+}: TextProps) => {
+  const Component = as || (visuallyHidden ? 'span' : 'p');
+
+  const className = classNames(
+    styles.root,
+    styles[variant],
+    fontWeight && styles[fontWeight],
+    (alignment || truncate) && styles.block,
+    alignment && styles[alignment],
+    color && styles[color],
+    truncate && styles.truncate,
+    visuallyHidden && styles.visuallyHidden,
+  );
+
+  return <Component className={className}>{children}</Component>;
+};

polaris-react/src/components/Text/index.ts

@@ -0,0 +1 @@
+export * from './Text';

polaris-react/src/index.ts

@@ -339,6 +339,9 @@ export type {TabsProps} from './components/Tabs';
 export {Tag} from './components/Tag';
 export type {TagProps} from './components/Tag';
 
+export {Text} from './components/Text';
+export type {TextProps} from './components/Text';
+
 export {TextContainer} from './components/TextContainer';
 export type {TextContainerProps} from './components/TextContainer';