@instructure/ui-heading - npm Package Compare versions

Comparing version 10.9.1-snapshot-4 to 10.9.1-snapshot-5

CHANGELOG.md

@@ -6,10 +6,13 @@ # Change Log
 
-## [10.9.1-snapshot-4](https://github.com/instructure/instructure-ui/compare/v10.9.0...v10.9.1-snapshot-4) (2024-12-18)
+## [10.9.1-snapshot-5](https://github.com/instructure/instructure-ui/compare/v10.9.0...v10.9.1-snapshot-5) (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))
 
 
 
+
+
 # [10.9.0](https://github.com/instructure/instructure-ui/compare/v10.8.0...v10.9.0) (2024-12-12)
@@ -16,0 +19,0 @@

es/Heading/__examples__/Heading.examples.js

@@ -26,5 +26,7 @@ /*
 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]
   },
@@ -31,0 +33,0 @@ getComponentProps: () => {

es/Heading/index.js

 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;
@@ -36,2 +36,15 @@ /*
 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'
+};
+
 /**
@@ -54,22 +67,39 @@ ---
   }
+  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') {
@@ -76,0 +106,0 @@ return 'span';

es/Heading/props.js

@@ -35,5 +35,6 @@ /*
   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 };

es/Heading/styles.js

@@ -38,3 +38,66 @@ /*
     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 = {
@@ -130,3 +193,3 @@ h1: {
       '&:-webkit-any(input)[type]': inputStyles,
-      ...levelStyles[level],
+      ...(variant ? variants[variant] : levelStyles[level]),
       ...colorStyles[color],
@@ -133,0 +196,0 @@ ...borderStyles[border]

es/Heading/theme.js

@@ -53,2 +53,3 @@ /*
   const componentVariables = {
+    ...typography,
     lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
@@ -55,0 +56,0 @@ h1FontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXXLarge,

lib/Heading/__examples__/Heading.examples.js

@@ -31,5 +31,7 @@ "use strict";
 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]
   },
@@ -36,0 +38,0 @@ getComponentProps: () => {

lib/Heading/index.js

@@ -18,3 +18,3 @@ "use strict";
 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;
@@ -45,2 +45,15 @@ /*
 /** @jsx jsx */
+const variantLevels = {
+  titlePageDesktop: 'h1',
+  titlePageMobile: 'h1',
+  titleSection: 'h2',
+  titleCardSection: 'h2',
+  titleModule: 'h3',
+  titleCardLarge: 'h4',
+  titleCardRegular: 'h4',
+  titleCardMini: 'h4',
+  label: 'h5',
+  labelInline: 'h5'
+};
+
 /**
@@ -63,22 +76,39 @@ ---
   }
+  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') {
@@ -85,0 +115,0 @@ return 'span';

lib/Heading/props.js

@@ -42,4 +42,5 @@ "use strict";
   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'];

lib/Heading/styles.js

@@ -44,3 +44,66 @@ "use strict";
     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 = {
@@ -136,3 +199,3 @@ h1: {
       '&:-webkit-any(input)[type]': inputStyles,
-      ...levelStyles[level],
+      ...(variant ? variants[variant] : levelStyles[level]),
       ...colorStyles[color],
@@ -139,0 +202,0 @@ ...borderStyles[border]

lib/Heading/theme.js

@@ -59,2 +59,3 @@ "use strict";
   const componentVariables = {
+    ...typography,
     lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
@@ -61,0 +62,0 @@ h1FontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXXLarge,

package.json

 {
   "name": "@instructure/ui-heading",
-  "version": "10.9.1-snapshot-4",
+  "version": "10.9.1-snapshot-5",
   "description": "A component for creating typographic headings",
@@ -27,16 +27,16 @@ "author": "Instructure, Inc. Engineering and Product Design",
     "@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.9.1-snapshot-5",
+    "@instructure/emotion": "10.9.1-snapshot-5",
+    "@instructure/shared-types": "10.9.1-snapshot-5",
+    "@instructure/ui-prop-types": "10.9.1-snapshot-5",
+    "@instructure/ui-react-utils": "10.9.1-snapshot-5",
+    "@instructure/ui-testable": "10.9.1-snapshot-5",
+    "@instructure/ui-view": "10.9.1-snapshot-5",
     "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.9.1-snapshot-5",
+    "@instructure/ui-babel-preset": "10.9.1-snapshot-5",
+    "@instructure/ui-test-utils": "10.9.1-snapshot-5",
+    "@instructure/ui-themes": "10.9.1-snapshot-5",
     "@testing-library/jest-dom": "^6.6.3",
@@ -43,0 +43,0 @@ "@testing-library/react": "^16.0.1",

src/Heading/__examples__/Heading.examples.ts

@@ -29,3 +29,3 @@ /*
 export default {
-  sectionProp: 'level',
+  sectionProp: 'variant',
   propValues: {
@@ -38,3 +38,6 @@ color: [
       'inherit'
-    ]
+    ],
+
+    level: [undefined],
+    as: [undefined]
   },
@@ -41,0 +44,0 @@ getComponentProps: () => {

src/Heading/props.ts

@@ -81,2 +81,17 @@ /*
   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'
 }
@@ -107,3 +122,15 @@
   margin: ThemeablePropTypes.spacing,
-  elementRef: PropTypes.func
+  elementRef: PropTypes.func,
+  variant: PropTypes.oneOf([
+    'titlePageDesktop',
+    'titlePageMobile',
+    'titleSection',
+    'titleCardSection',
+    'titleModule',
+    'titleCardLarge',
+    'titleCardRegular',
+    'titleCardMini',
+    'label',
+    'labelInline'
+  ])
 }
@@ -118,3 +145,4 @@
   'margin',
-  'elementRef'
+  'elementRef',
+  'variant'
 ]
@@ -121,0 +149,0 @@

src/Heading/README.md

@@ -7,2 +7,9 @@ ---
 
+## 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
@@ -12,2 +19,20 @@ ---
 ---
+  <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
+---
 <Heading>Default Heading</Heading>
@@ -29,7 +54,3 @@ ```
   <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>
@@ -36,0 +57,0 @@ ```

src/Heading/styles.ts

@@ -42,4 +42,67 @@ /*
 ): HeadingStyle => {
-  const { level, color, border } = props
+  const { level, color, border, variant } = props
 
+  const variants: Record<NonNullable<HeadingProps['variant']>, object> = {
+    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 = {
@@ -129,3 +192,3 @@ h1: {
 
-      ...levelStyles[level!],
+      ...(variant ? variants[variant] : levelStyles[level!]),
       ...colorStyles[color!],
@@ -132,0 +195,0 @@ ...borderStyles[border!]

src/Heading/theme.ts

@@ -53,2 +53,4 @@ /*
   const componentVariables: HeadingTheme = {
+    ...typography,
+
     lineHeight: typography?.lineHeightCondensed,
@@ -55,0 +57,0 @@

types/Heading/index.d.ts

@@ -20,2 +20,3 @@ /** @jsx jsx */
         elementRef?: (element: Element | null) => void;
+        variant?: "titlePageDesktop" | "titlePageMobile" | "titleSection" | "titleCardSection" | "titleModule" | "titleCardLarge" | "titleCardRegular" | "titleCardMini" | "label" | "labelInline";
     }>;
@@ -30,2 +31,3 @@ static allowedProps: readonly (keyof {
         elementRef?: (element: Element | null) => void;
+        variant?: "titlePageDesktop" | "titlePageMobile" | "titleSection" | "titleCardSection" | "titleModule" | "titleCardLarge" | "titleCardRegular" | "titleCardMini" | "label" | "labelInline";
     })[];
@@ -40,2 +42,3 @@ static defaultProps: {
     handleRef: (el: Element | null) => void;
+    checkProps(): void;
     componentDidMount(): void;
@@ -42,0 +45,0 @@ componentDidUpdate(): void;

types/Heading/props.d.ts

@@ -36,2 +36,7 @@ import type { AsElementType, PropValidators, HeadingTheme, OtherHTMLAttributes } from '@instructure/shared-types';
     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';
 };
@@ -38,0 +43,0 @@ type PropKeys = keyof HeadingOwnProps;

No alert changes

Improved metrics

Total package byte prevSize

231828

5.23%

Lines of code

1957

19.99%

Dependency changes

• + Added

  @instructure/console@10.9.1-snapshot-5
  (transitive)

• + Added

  @instructure/debounce@10.9.1-snapshot-5
  (transitive)

• + Added

  @instructure/emotion@10.9.1-snapshot-5
  (transitive)

• + Added

  @instructure/shared-types@10.9.1-snapshot-5
  (transitive)

• + Added

  @instructure/theme-registry@10.9.1-snapshot-5
  (transitive)

• + Added

  @instructure/ui-color-utils@10.9.1-snapshot-5
  (transitive)

• + Added

  @instructure/ui-decorator@10.9.1-snapshot-5
  (transitive)

• + Added

  @instructure/ui-dom-utils@10.9.1-snapshot-5
  (transitive)

• + Added

  @instructure/ui-i18n@10.9.1-snapshot-5
  (transitive)

• + Added

  @instructure/ui-portal@10.9.1-snapshot-5
  (transitive)

• + Added

  @instructure/ui-position@10.9.1-snapshot-5
  (transitive)

• + Added

  @instructure/ui-prop-types@10.9.1-snapshot-5
  (transitive)

• + Added

  @instructure/ui-react-utils@10.9.1-snapshot-5
  (transitive)

• + Added

  @instructure/ui-testable@10.9.1-snapshot-5
  (transitive)

• + Added

  @instructure/ui-themes@10.9.1-snapshot-5
  (transitive)

• + Added

  @instructure/ui-utils@10.9.1-snapshot-5
  (transitive)

• + Added

  @instructure/ui-view@10.9.1-snapshot-5
  (transitive)

• + Added

  @instructure/uid@10.9.1-snapshot-5
  (transitive)

• - Removed

  @instructure/console@10.9.1-snapshot-4
  (transitive)

• - Removed

  @instructure/debounce@10.9.1-snapshot-4
  (transitive)

• - Removed

  @instructure/emotion@10.9.1-snapshot-4
  (transitive)

• - Removed

  @instructure/shared-types@10.9.1-snapshot-4
  (transitive)

• - Removed

  @instructure/theme-registry@10.9.1-snapshot-4
  (transitive)

• - Removed

  @instructure/ui-color-utils@10.9.1-snapshot-4
  (transitive)

• - Removed

  @instructure/ui-decorator@10.9.1-snapshot-4
  (transitive)

• - Removed

  @instructure/ui-dom-utils@10.9.1-snapshot-4
  (transitive)

• - Removed

  @instructure/ui-i18n@10.9.1-snapshot-4
  (transitive)

• - Removed

  @instructure/ui-portal@10.9.1-snapshot-4
  (transitive)

• - Removed

  @instructure/ui-position@10.9.1-snapshot-4
  (transitive)

• - Removed

  @instructure/ui-prop-types@10.9.1-snapshot-4
  (transitive)

• - Removed

  @instructure/ui-react-utils@10.9.1-snapshot-4
  (transitive)

• - Removed

  @instructure/ui-testable@10.9.1-snapshot-4
  (transitive)

• - Removed

  @instructure/ui-themes@10.9.1-snapshot-4
  (transitive)

• - Removed

  @instructure/ui-utils@10.9.1-snapshot-4
  (transitive)

• - Removed

  @instructure/ui-view@10.9.1-snapshot-4
  (transitive)

• - Removed

  @instructure/uid@10.9.1-snapshot-4
  (transitive)

• Updated

  @instructure/console@10.9.1-snapshot-5

• Updated

  @instructure/emotion@10.9.1-snapshot-5

• Updated

  @instructure/shared-types@10.9.1-snapshot-5

• Updated

  @instructure/ui-prop-types@10.9.1-snapshot-5

• Updated

  @instructure/ui-react-utils@10.9.1-snapshot-5

• Updated

  @instructure/ui-testable@10.9.1-snapshot-5

• Updated

  @instructure/ui-view@10.9.1-snapshot-5