@instructure/ui-text 10.9.1-snapshot-4 → 10.10.0

package/src/Text/index.tsx

@@ -53,12 +53,32 @@ class Text extends Component<TextProps> {
     children: null
   } as const
 
+  checkProps() {
+    const { variant, size, lineHeight, weight, fontStyle } = this.props
+    if (variant) {
+      if (size) {
+        console.warn("[Text]: Don't use 'size' with 'variant' ")
+      }
+      if (lineHeight) {
+        console.warn("[Text]: Don't use 'lineHeight' with 'variant' ")
+      }
+      if (weight) {
+        console.warn("[Text]: Don't use 'weight' with 'variant' ")
+      }
+      if (fontStyle) {
+        console.warn("[Text]: Don't use 'fontStyle' with 'variant' ")
+      }
+    }
+  }
+
   componentDidMount() {
     this.props.makeStyles?.()
+    this.checkProps()
   }
 
   componentDidUpdate() {
     this.props.makeStyles?.()
+    this.checkProps()
   }
 
   render() {

package/src/Text/props.ts

@@ -57,10 +57,41 @@ type TextOwnProps = {
   elementRef?: (element: Element | null) => void
   fontStyle?: 'italic' | 'normal'
   letterSpacing?: 'normal' | 'condensed' | 'expanded'
-  lineHeight?: 'default' | 'fit' | 'condensed' | 'double'
-  size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large'
+  lineHeight?:
+    | 'default'
+    | 'fit'
+    | 'condensed'
+    | 'double'
+    | 'lineHeight100'
+    | 'lineHeight125'
+    | 'lineHeight150'
+  size?:
+    | 'x-small'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'x-large'
+    | 'xx-large'
+    | 'descriptionPage'
+    | 'descriptionSection'
+    | 'content'
+    | 'contentSmall'
+    | 'legend'
   transform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase'
-  weight?: 'normal' | 'light' | 'bold'
+  /**
+   * Sets multiple props at once. (size, fontStyle, lineHeight, weight)
+   * If set, these props are not allowed.
+   * NOTE: this is the recommended way of setting these values
+   */
+  variant?:
+    | 'descriptionPage'
+    | 'descriptionSection'
+    | 'content'
+    | 'contentImportant'
+    | 'contentQuote'
+    | 'contentSmall'
+    | 'legend'
+  weight?: 'normal' | 'light' | 'bold' | 'weightRegular' | 'weightImportant'
   wrap?: 'normal' | 'break-word'
   children?: React.ReactNode
 }
@@ -91,17 +122,45 @@ const propTypes: PropValidators<PropKeys> = {
   elementRef: PropTypes.func,
   fontStyle: PropTypes.oneOf(['italic', 'normal']),
   letterSpacing: PropTypes.oneOf(['normal', 'condensed', 'expanded']),
-  lineHeight: PropTypes.oneOf(['default', 'fit', 'condensed', 'double']),
+  lineHeight: PropTypes.oneOf([
+    'default',
+    'fit',
+    'condensed',
+    'double',
+    'lineHeight100',
+    'lineHeight125',
+    'lineHeight150'
+  ]),
   size: PropTypes.oneOf([
     'x-small',
     'small',
     'medium',
     'large',
     'x-large',
-    'xx-large'
+    'xx-large',
+    'descriptionPage',
+    'descriptionSection',
+    'content',
+    'contentSmall',
+    'legend'
   ]),
   transform: PropTypes.oneOf(['none', 'capitalize', 'uppercase', 'lowercase']),
-  weight: PropTypes.oneOf(['normal', 'light', 'bold']),
+  variant: PropTypes.oneOf([
+    'descriptionPage',
+    'descriptionSection',
+    'content',
+    'contentImportant',
+    'contentQuote',
+    'contentSmall',
+    'legend'
+  ]),
+  weight: PropTypes.oneOf([
+    'normal',
+    'light',
+    'bold',
+    'weightRegular',
+    'weightImportant'
+  ]),
   wrap: PropTypes.oneOf(['normal', 'break-word'])
 }
 
@@ -115,6 +174,7 @@ const allowedProps: AllowedPropKeys = [
   'lineHeight',
   'size',
   'transform',
+  'variant',
   'weight',
   'wrap'
 ]

package/src/Text/styles.ts

@@ -47,9 +47,55 @@ const generateStyle = (
     transform,
     lineHeight,
     letterSpacing,
-    color
+    color,
+    variant
   } = props
 
+  const variants: Record<NonNullable<TextProps['variant']>, object> = {
+    descriptionPage: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightRegular,
+      fontSize: componentTheme.descriptionPage,
+      lineHeight: componentTheme.lineHeight150
+    },
+    descriptionSection: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightRegular,
+      fontSize: componentTheme.descriptionSection,
+      lineHeight: componentTheme.lineHeight150
+    },
+    content: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightRegular,
+      fontSize: componentTheme.content,
+      lineHeight: componentTheme.lineHeight150
+    },
+    contentImportant: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.content,
+      lineHeight: componentTheme.lineHeight150
+    },
+    contentQuote: {
+      fontStyle: 'italic',
+      fontWeight: componentTheme.weightRegular,
+      fontSize: componentTheme.content,
+      lineHeight: componentTheme.lineHeight150
+    },
+    contentSmall: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightRegular,
+      fontSize: componentTheme.contentSmall,
+      lineHeight: componentTheme.lineHeight150
+    },
+    legend: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightRegular,
+      fontSize: componentTheme.legend,
+      lineHeight: componentTheme.lineHeight150
+    }
+  }
+
   const colorVariants = {
     primary: { color: componentTheme.primaryColor },
     secondary: { color: componentTheme.secondaryColor },
@@ -70,7 +116,9 @@ const generateStyle = (
   const weightStyle = {
     normal: { fontWeight: componentTheme.fontWeightNormal },
     light: { fontWeight: componentTheme.fontWeightLight },
-    bold: { fontWeight: componentTheme.fontWeightBold }
+    bold: { fontWeight: componentTheme.fontWeightBold },
+    weightRegular: { fontWeight: componentTheme.weightRegular },
+    weightImportant: { fontWeight: componentTheme.weightImportant }
   }
 
   const fontSizeVariants = {
@@ -79,14 +127,22 @@ const generateStyle = (
     medium: componentTheme.fontSizeMedium,
     large: componentTheme.fontSizeLarge,
     'x-large': componentTheme.fontSizeXLarge,
-    'xx-large': componentTheme.fontSizeXXLarge
+    'xx-large': componentTheme.fontSizeXXLarge,
+    descriptionPage: componentTheme.descriptionPage,
+    descriptionSection: componentTheme.descriptionSection,
+    content: componentTheme.content,
+    contentSmall: componentTheme.contentSmall,
+    legend: componentTheme.legend
   }
 
   const lineHeightVariants = {
     default: { lineHeight: componentTheme.lineHeight },
     fit: { lineHeight: componentTheme.lineHeightFit },
     condensed: { lineHeight: componentTheme.lineHeightCondensed },
-    double: { lineHeight: componentTheme.lineHeightDouble }
+    double: { lineHeight: componentTheme.lineHeightDouble },
+    lineHeight100: { lineHeight: componentTheme.lineHeight100 },
+    lineHeight125: { lineHeight: componentTheme.lineHeight125 },
+    lineHeight150: { lineHeight: componentTheme.lineHeight150 }
   }
 
   const letterSpacingVariants = {
@@ -95,18 +151,27 @@ const generateStyle = (
     expanded: componentTheme.letterSpacingExpanded
   }
 
+  const calcTextStyles = () => {
+    if (variant) {
+      return variants[variant]
+    }
+    return {
+      ...(weight ? weightStyle[weight] : {}),
+      ...(fontStyle ? { fontStyle: fontStyle } : {}),
+      fontSize: fontSizeVariants[size!],
+      ...(lineHeight ? lineHeightVariants[lineHeight] : {})
+    }
+  }
+
   const baseStyles = {
     '&:focus': {
       outline: 'none'
     },
     ...(color ? colorVariants[color] : {}),
     ...(wrap === 'break-word' ? wrapStyle : {}),
-    ...(weight ? weightStyle[weight] : {}),
-    ...(fontStyle ? { fontStyle: fontStyle } : {}),
-    fontSize: fontSizeVariants[size!],
-    ...(lineHeight ? lineHeightVariants[lineHeight] : {}),
     letterSpacing: letterSpacingVariants[letterSpacing!],
-    ...(transform ? { textTransform: transform } : {})
+    ...(transform ? { textTransform: transform } : {}),
+    ...calcTextStyles()
   }
 
   const inputStyles = {