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

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.9.1-snapshot-4](https://github.com/instructure/instructure-ui/compare/v10.9.0...v10.9.1-snapshot-4) (2024-12-18)
+# [10.10.0](https://github.com/instructure/instructure-ui/compare/v10.9.0...v10.10.0) (2024-12-18)
 
-**Note:** Version bump only for package @instructure/ui-heading
+
+### Features
+
+* **many:** add new Typography tokens and update text and heading ([a09fa0f](https://github.com/instructure/instructure-ui/commit/a09fa0f9ee3b92e8b20415e1d57f5f465526936c))
 
 
 

package/es/Heading/__examples__/Heading.examples.js

@@ -23,9 +23,11 @@
  */
 
 export default {
-  sectionProp: 'level',
+  sectionProp: 'variant',
   propValues: {
-    color: ['primary', 'secondary', 'primary-inverse', 'secondary-inverse', 'inherit']
+    color: ['primary', 'secondary', 'primary-inverse', 'secondary-inverse', 'inherit'],
+    level: [void 0],
+    as: [void 0]
   },
   getComponentProps: () => {
     return {

package/es/Heading/index.js

@@ -1,5 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["border", "children", "color", "level", "margin", "elementRef", "makeStyles"];
+const _excluded = ["border", "children", "color", "level", "margin", "elementRef", "makeStyles", "variant"];
 var _dec, _dec2, _class, _Heading;
 /*
  * The MIT License (MIT)
@@ -33,6 +33,19 @@ import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
+const variantLevels = {
+  titlePageDesktop: 'h1',
+  titlePageMobile: 'h1',
+  titleSection: 'h2',
+  titleCardSection: 'h2',
+  titleModule: 'h3',
+  titleCardLarge: 'h4',
+  titleCardRegular: 'h4',
+  titleCardMini: 'h4',
+  label: 'h5',
+  labelInline: 'h5'
+};
+
 /**
 ---
 category: components
@@ -50,26 +63,43 @@ let Heading = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
       }
     };
   }
+  checkProps() {
+    const _this$props = this.props,
+      variant = _this$props.variant,
+      level = _this$props.level,
+      as = _this$props.as;
+    if (variant) {
+      if (level) {}
+      if (as) {}
+    }
+  }
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    var _this$props$makeStyle, _this$props2;
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+    this.checkProps();
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    var _this$props$makeStyle2, _this$props3;
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    this.checkProps();
   }
   render() {
     var _this$props$styles;
-    const _this$props3 = this.props,
-      border = _this$props3.border,
-      children = _this$props3.children,
-      color = _this$props3.color,
-      level = _this$props3.level,
-      margin = _this$props3.margin,
-      elementRef = _this$props3.elementRef,
-      makeStyles = _this$props3.makeStyles,
-      props = _objectWithoutProperties(_this$props3, _excluded);
-    const ElementType = getElementType(Heading, this.props, () => {
+    const _this$props4 = this.props,
+      border = _this$props4.border,
+      children = _this$props4.children,
+      color = _this$props4.color,
+      level = _this$props4.level,
+      margin = _this$props4.margin,
+      elementRef = _this$props4.elementRef,
+      makeStyles = _this$props4.makeStyles,
+      variant = _this$props4.variant,
+      props = _objectWithoutProperties(_this$props4, _excluded);
+    const propsForGetElementType = variant ? {} : this.props;
+    const ElementType = getElementType(Heading, propsForGetElementType, () => {
+      if (variant) {
+        return variantLevels[variant];
+      }
       if (level === 'reset') {
         return 'span';
       } else {

package/es/Heading/props.js

@@ -32,7 +32,8 @@ const propTypes = {
   level: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'reset']),
   as: PropTypes.elementType,
   margin: ThemeablePropTypes.spacing,
-  elementRef: PropTypes.func
+  elementRef: PropTypes.func,
+  variant: PropTypes.oneOf(['titlePageDesktop', 'titlePageMobile', 'titleSection', 'titleCardSection', 'titleModule', 'titleCardLarge', 'titleCardRegular', 'titleCardMini', 'label', 'labelInline'])
 };
-const allowedProps = ['border', 'children', 'color', 'level', 'as', 'margin', 'elementRef'];
+const allowedProps = ['border', 'children', 'color', 'level', 'as', 'margin', 'elementRef', 'variant'];
 export { propTypes, allowedProps };

package/es/Heading/styles.js

@@ -35,7 +35,70 @@
 const generateStyle = (componentTheme, props) => {
   const level = props.level,
     color = props.color,
-    border = props.border;
+    border = props.border,
+    variant = props.variant;
+  const variants = {
+    titlePageDesktop: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.titlePageDesktop,
+      lineHeight: componentTheme.lineHeight125
+    },
+    titlePageMobile: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.titlePageMobile,
+      lineHeight: componentTheme.lineHeight125
+    },
+    titleSection: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.titleSection,
+      lineHeight: componentTheme.lineHeight125
+    },
+    titleCardSection: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.titleSection,
+      lineHeight: componentTheme.lineHeight125
+    },
+    titleModule: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.titleModule,
+      lineHeight: componentTheme.lineHeight125
+    },
+    titleCardLarge: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.titleCardLarge,
+      lineHeight: componentTheme.lineHeight125
+    },
+    titleCardRegular: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.titleCardRegular,
+      lineHeight: componentTheme.lineHeight125
+    },
+    titleCardMini: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.titleCardMini,
+      lineHeight: componentTheme.lineHeight125
+    },
+    label: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.label,
+      lineHeight: componentTheme.lineHeight125
+    },
+    labelInline: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.label,
+      lineHeight: componentTheme.lineHeight150
+    }
+  };
   const levelStyles = {
     h1: {
       fontFamily: componentTheme.h1FontFamily,
@@ -126,7 +189,7 @@ const generateStyle = (componentTheme, props) => {
       // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
       '&:is(input)[type]': inputStyles,
       '&:-webkit-any(input)[type]': inputStyles,
-      ...levelStyles[level],
+      ...(variant ? variants[variant] : levelStyles[level]),
       ...colorStyles[color],
       ...borderStyles[border]
     }

package/es/Heading/theme.js

@@ -50,6 +50,7 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
+    ...typography,
     lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
     h1FontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXXLarge,
     h1FontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,

package/lib/Heading/__examples__/Heading.examples.js

@@ -28,9 +28,11 @@ exports.default = void 0;
  * SOFTWARE.
  */
 var _default = exports.default = {
-  sectionProp: 'level',
+  sectionProp: 'variant',
   propValues: {
-    color: ['primary', 'secondary', 'primary-inverse', 'secondary-inverse', 'inherit']
+    color: ['primary', 'secondary', 'primary-inverse', 'secondary-inverse', 'inherit'],
+    level: [void 0],
+    as: [void 0]
   },
   getComponentProps: () => {
     return {

package/lib/Heading/index.js

@@ -15,7 +15,7 @@ var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
-const _excluded = ["border", "children", "color", "level", "margin", "elementRef", "makeStyles"];
+const _excluded = ["border", "children", "color", "level", "margin", "elementRef", "makeStyles", "variant"];
 var _dec, _dec2, _class, _Heading;
 /*
  * The MIT License (MIT)
@@ -41,6 +41,19 @@ var _dec, _dec2, _class, _Heading;
  * SOFTWARE.
  */
 /** @jsx jsx */
+const variantLevels = {
+  titlePageDesktop: 'h1',
+  titlePageMobile: 'h1',
+  titleSection: 'h2',
+  titleCardSection: 'h2',
+  titleModule: 'h3',
+  titleCardLarge: 'h4',
+  titleCardRegular: 'h4',
+  titleCardMini: 'h4',
+  label: 'h5',
+  labelInline: 'h5'
+};
+
 /**
 ---
 category: components
@@ -58,26 +71,43 @@ let Heading = exports.Heading = (_dec = (0, _emotion.withStyle)(_styles.default,
       }
     };
   }
+  checkProps() {
+    const _this$props = this.props,
+      variant = _this$props.variant,
+      level = _this$props.level,
+      as = _this$props.as;
+    if (variant) {
+      if (level) {}
+      if (as) {}
+    }
+  }
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    var _this$props$makeStyle, _this$props2;
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+    this.checkProps();
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    var _this$props$makeStyle2, _this$props3;
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    this.checkProps();
   }
   render() {
     var _this$props$styles;
-    const _this$props3 = this.props,
-      border = _this$props3.border,
-      children = _this$props3.children,
-      color = _this$props3.color,
-      level = _this$props3.level,
-      margin = _this$props3.margin,
-      elementRef = _this$props3.elementRef,
-      makeStyles = _this$props3.makeStyles,
-      props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
-    const ElementType = (0, _getElementType.getElementType)(Heading, this.props, () => {
+    const _this$props4 = this.props,
+      border = _this$props4.border,
+      children = _this$props4.children,
+      color = _this$props4.color,
+      level = _this$props4.level,
+      margin = _this$props4.margin,
+      elementRef = _this$props4.elementRef,
+      makeStyles = _this$props4.makeStyles,
+      variant = _this$props4.variant,
+      props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
+    const propsForGetElementType = variant ? {} : this.props;
+    const ElementType = (0, _getElementType.getElementType)(Heading, propsForGetElementType, () => {
+      if (variant) {
+        return variantLevels[variant];
+      }
       if (level === 'reset') {
         return 'span';
       } else {

package/lib/Heading/props.js

@@ -39,6 +39,7 @@ const propTypes = exports.propTypes = {
   level: _propTypes.default.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'reset']),
   as: _propTypes.default.elementType,
   margin: _emotion.ThemeablePropTypes.spacing,
-  elementRef: _propTypes.default.func
+  elementRef: _propTypes.default.func,
+  variant: _propTypes.default.oneOf(['titlePageDesktop', 'titlePageMobile', 'titleSection', 'titleCardSection', 'titleModule', 'titleCardLarge', 'titleCardRegular', 'titleCardMini', 'label', 'labelInline'])
 };
-const allowedProps = exports.allowedProps = ['border', 'children', 'color', 'level', 'as', 'margin', 'elementRef'];
+const allowedProps = exports.allowedProps = ['border', 'children', 'color', 'level', 'as', 'margin', 'elementRef', 'variant'];

package/lib/Heading/styles.js

@@ -41,7 +41,70 @@ exports.default = void 0;
 const generateStyle = (componentTheme, props) => {
   const level = props.level,
     color = props.color,
-    border = props.border;
+    border = props.border,
+    variant = props.variant;
+  const variants = {
+    titlePageDesktop: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.titlePageDesktop,
+      lineHeight: componentTheme.lineHeight125
+    },
+    titlePageMobile: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.titlePageMobile,
+      lineHeight: componentTheme.lineHeight125
+    },
+    titleSection: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.titleSection,
+      lineHeight: componentTheme.lineHeight125
+    },
+    titleCardSection: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.titleSection,
+      lineHeight: componentTheme.lineHeight125
+    },
+    titleModule: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.titleModule,
+      lineHeight: componentTheme.lineHeight125
+    },
+    titleCardLarge: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.titleCardLarge,
+      lineHeight: componentTheme.lineHeight125
+    },
+    titleCardRegular: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.titleCardRegular,
+      lineHeight: componentTheme.lineHeight125
+    },
+    titleCardMini: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.titleCardMini,
+      lineHeight: componentTheme.lineHeight125
+    },
+    label: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.label,
+      lineHeight: componentTheme.lineHeight125
+    },
+    labelInline: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.label,
+      lineHeight: componentTheme.lineHeight150
+    }
+  };
   const levelStyles = {
     h1: {
       fontFamily: componentTheme.h1FontFamily,
@@ -132,7 +195,7 @@ const generateStyle = (componentTheme, props) => {
       // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
       '&:is(input)[type]': inputStyles,
       '&:-webkit-any(input)[type]': inputStyles,
-      ...levelStyles[level],
+      ...(variant ? variants[variant] : levelStyles[level]),
       ...colorStyles[color],
       ...borderStyles[border]
     }

package/lib/Heading/theme.js

@@ -56,6 +56,7 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
+    ...typography,
     lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
     h1FontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXXLarge,
     h1FontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-heading",
-  "version": "10.9.1-snapshot-4",
+  "version": "10.10.0",
   "description": "A component for creating typographic headings",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,20 +24,20 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.9.1-snapshot-4",
-    "@instructure/emotion": "10.9.1-snapshot-4",
-    "@instructure/shared-types": "10.9.1-snapshot-4",
-    "@instructure/ui-prop-types": "10.9.1-snapshot-4",
-    "@instructure/ui-react-utils": "10.9.1-snapshot-4",
-    "@instructure/ui-testable": "10.9.1-snapshot-4",
-    "@instructure/ui-view": "10.9.1-snapshot-4",
+    "@instructure/console": "10.10.0",
+    "@instructure/emotion": "10.10.0",
+    "@instructure/shared-types": "10.10.0",
+    "@instructure/ui-prop-types": "10.10.0",
+    "@instructure/ui-react-utils": "10.10.0",
+    "@instructure/ui-testable": "10.10.0",
+    "@instructure/ui-view": "10.10.0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.9.1-snapshot-4",
-    "@instructure/ui-babel-preset": "10.9.1-snapshot-4",
-    "@instructure/ui-test-utils": "10.9.1-snapshot-4",
-    "@instructure/ui-themes": "10.9.1-snapshot-4",
+    "@instructure/ui-axe-check": "10.10.0",
+    "@instructure/ui-babel-preset": "10.10.0",
+    "@instructure/ui-test-utils": "10.10.0",
+    "@instructure/ui-themes": "10.10.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "vitest": "^2.1.8"

package/src/Heading/README.md

@@ -4,6 +4,31 @@ describes: Heading
 
 Heading is a component for creating typographic headings.
 
+## Variant
+
+Variant takes care of - almost - all use-cases when it comes hedings on pages. Their name reflects the places they meant to be used. It sets the `level` prop and takes care of the style of the heading
+We recommend using `variants` instead of the `level` (and `as`) props.
+
+NOTE: when `variant` is set, `level` and `as` props are ignored
+
+```js
+---
+type: example
+---
+  <div>
+    <Heading variant="titlePageDesktop"> titlePageDesktop </Heading><br/>
+    <Heading variant="titlePageMobile"> titlePageMobile </Heading><br/>
+    <Heading variant="titleSection"> titleSection </Heading><br/>
+    <Heading variant="titleCardSection"> titleCardSection </Heading><br/>
+    <Heading variant="titleModule"> titleModule </Heading><br/>
+    <Heading variant="titleCardLarge"> titleCardLarge </Heading><br/>
+    <Heading variant="titleCardRegular"> titleCardRegular </Heading><br/>
+    <Heading variant="titleCardMini"> titleCardMini </Heading><br/>
+    <Heading variant="label"> label </Heading><br/>
+    <Heading variant="labelInline"> labelInline </Heading><br/>
+  </div>
+```
+
 ```js
 ---
 type: example
@@ -24,11 +49,7 @@ type: example
 ---
 <div>
   <Heading level="h1" as="h2" margin="0 0 x-small">Heading level One</Heading>
-  <Heading level="h2" as="h1" margin="0 0 x-small">Heading level Two</Heading>
-  <Heading level="h3" margin="0 0 x-small">Heading level Three</Heading>
-  <Heading level="h4" margin="0 0 x-small">Heading level Four</Heading>
-  <Heading level="h5" margin="0 0 x-small">Heading level Five</Heading>
-  <Heading level="reset" as="h2">Heading level reset as a Two</Heading>
+
 </div>
 ```
 

package/src/Heading/__examples__/Heading.examples.ts

@@ -26,7 +26,7 @@ import type { StoryConfig } from '@instructure/ui-test-utils'
 import type { HeadingProps } from '../props'
 
 export default {
-  sectionProp: 'level',
+  sectionProp: 'variant',
   propValues: {
     color: [
       'primary',
@@ -34,7 +34,10 @@ export default {
       'primary-inverse',
       'secondary-inverse',
       'inherit'
-    ]
+    ],
+
+    level: [undefined],
+    as: [undefined]
   },
   getComponentProps: () => {
     return {

package/src/Heading/index.tsx

@@ -36,6 +36,22 @@ import generateComponentTheme from './theme'
 import { propTypes, allowedProps } from './props'
 import type { HeadingProps } from './props'
 
+const variantLevels: Record<
+  NonNullable<HeadingProps['variant']>,
+  'h1' | 'h2' | 'h3' | 'h4' | 'h5'
+> = {
+  titlePageDesktop: 'h1',
+  titlePageMobile: 'h1',
+  titleSection: 'h2',
+  titleCardSection: 'h2',
+  titleModule: 'h3',
+  titleCardLarge: 'h4',
+  titleCardRegular: 'h4',
+  titleCardMini: 'h4',
+  label: 'h5',
+  labelInline: 'h5'
+}
+
 /**
 ---
 category: components
@@ -67,12 +83,26 @@ class Heading extends Component<HeadingProps> {
     }
   }
 
+  checkProps() {
+    const { variant, level, as } = this.props
+    if (variant) {
+      if (level) {
+        console.warn("[Heading]: Don't use 'level' with 'variant' ")
+      }
+      if (as) {
+        console.warn("[Heading]: Don't use 'as' with 'variant' ")
+      }
+    }
+  }
+
   componentDidMount() {
     this.props.makeStyles?.()
+    this.checkProps()
   }
 
   componentDidUpdate() {
     this.props.makeStyles?.()
+    this.checkProps()
   }
 
   render() {
@@ -84,10 +114,16 @@ class Heading extends Component<HeadingProps> {
       margin,
       elementRef,
       makeStyles,
+      variant,
       ...props
     } = this.props
 
-    const ElementType = getElementType(Heading, this.props, () => {
+    const propsForGetElementType = variant ? {} : this.props
+
+    const ElementType = getElementType(Heading, propsForGetElementType, () => {
+      if (variant) {
+        return variantLevels[variant]
+      }
       if (level === 'reset') {
         return 'span'
       } else {

package/src/Heading/props.ts

@@ -78,6 +78,21 @@ type HeadingOwnProps = {
    * Provides a ref to the underlying HTML element
    */
   elementRef?: (element: Element | null) => void
+  /**
+   * Sets style and level at once. The as property will be the same as the level.
+   * NOTE: this is the recommended way of setting the appearance, instead of level
+   */
+  variant?:
+    | 'titlePageDesktop'
+    | 'titlePageMobile'
+    | 'titleSection'
+    | 'titleCardSection'
+    | 'titleModule'
+    | 'titleCardLarge'
+    | 'titleCardRegular'
+    | 'titleCardMini'
+    | 'label'
+    | 'labelInline'
 }
 
 type PropKeys = keyof HeadingOwnProps
@@ -103,7 +118,19 @@ const propTypes: PropValidators<PropKeys> = {
   level: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'reset']),
   as: PropTypes.elementType,
   margin: ThemeablePropTypes.spacing,
-  elementRef: PropTypes.func
+  elementRef: PropTypes.func,
+  variant: PropTypes.oneOf([
+    'titlePageDesktop',
+    'titlePageMobile',
+    'titleSection',
+    'titleCardSection',
+    'titleModule',
+    'titleCardLarge',
+    'titleCardRegular',
+    'titleCardMini',
+    'label',
+    'labelInline'
+  ])
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -113,7 +140,8 @@ const allowedProps: AllowedPropKeys = [
   'level',
   'as',
   'margin',
-  'elementRef'
+  'elementRef',
+  'variant'
 ]
 
 export type { HeadingProps, HeadingStyle }