@instructure/ui-heading 10.21.1-snapshot-9 → 10.22.0

package/CHANGELOG.md

@@ -3,11 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.21.1-snapshot-9](https://github.com/instructure/instructure-ui/compare/v10.21.0...v10.21.1-snapshot-9) (2025-07-04)
+# [10.22.0](https://github.com/instructure/instructure-ui/compare/v10.21.0...v10.22.0) (2025-07-04)
 
 
 ### Features
 
+* **many:** add new package (instructure) and three new components: AiInformation, NutritionFacts and DataPermissionLevels ([073be7b](https://github.com/instructure/instructure-ui/commit/073be7b50893e9ab77158ee8a83506eddfbd4113))
+* **ui-heading,shared-types:** add new aiHeading prop and design. Also add h6 level to heading ([b6c7e0b](https://github.com/instructure/instructure-ui/commit/b6c7e0b9f650dc32ab4b571a8ebabc5ba149c20f))
 * **ui-heading,shared-types:** add new aiHeading prop and design. Also add h6 level to heading ([a74236a](https://github.com/instructure/instructure-ui/commit/a74236a4e245b8738e6fa7785806a9586666d33c))
 
 

package/es/Heading/index.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["border", "children", "color", "level", "margin", "elementRef", "makeStyles", "variant"];
-var _dec, _dec2, _class, _Heading, _IconAiColoredSolid, _IconAiColoredSolid2, _IconAiColoredSolid3;
+var _dec, _dec2, _class, _Heading, _IconAiColoredSolid, _IconAiColoredSolid2, _IconAiColoredSolid3, _IconAiColoredSolid4, _IconAiColoredSolid5, _IconAiColoredSolid6;
 /*
  * The MIT License (MIT)
  *
@@ -34,7 +34,7 @@ import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
-import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 const variantLevels = {
   titlePageDesktop: 'h1',
   titlePageMobile: 'h1',
@@ -129,6 +129,32 @@ let Heading = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
         children: [_IconAiColoredSolid3 || (_IconAiColoredSolid3 = _jsx(IconAiColoredSolid, {})), "\xA0", children]
       });
     }
+    if (aiVariant === 'stacked') {
+      var _this$props$styles8, _this$props$styles9;
+      return _jsxs(_Fragment, {
+        children: [_jsxs("span", {
+          css: (_this$props$styles8 = this.props.styles) === null || _this$props$styles8 === void 0 ? void 0 : _this$props$styles8.igniteAIStacked,
+          children: [_IconAiColoredSolid4 || (_IconAiColoredSolid4 = _jsx(IconAiColoredSolid, {})), _jsx("span", {
+            css: (_this$props$styles9 = this.props.styles) === null || _this$props$styles9 === void 0 ? void 0 : _this$props$styles9.igniteAI,
+            children: "IgniteAI"
+          })]
+        }), children]
+      });
+    }
+    if (aiVariant === 'horizontal') {
+      var _this$props$styles0;
+      return _jsxs(_Fragment, {
+        children: [_IconAiColoredSolid5 || (_IconAiColoredSolid5 = _jsx(IconAiColoredSolid, {})), _jsx("span", {
+          css: (_this$props$styles0 = this.props.styles) === null || _this$props$styles0 === void 0 ? void 0 : _this$props$styles0.igniteAI,
+          children: "IgniteAI"
+        }), children]
+      });
+    }
+    if (aiVariant === 'iconOnly') {
+      return _jsxs(_Fragment, {
+        children: [_IconAiColoredSolid6 || (_IconAiColoredSolid6 = _jsx(IconAiColoredSolid, {})), "\xA0", children]
+      });
+    }
     return children;
   }
 
@@ -147,7 +173,7 @@ let Heading = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
     return void 0;
   }
   render() {
-    var _this$props$styles8;
+    var _this$props$styles1;
     const _this$props6 = this.props,
       border = _this$props6.border,
       children = _this$props6.children,
@@ -173,7 +199,7 @@ let Heading = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
     });
     return _jsx(View, {
       ...passthroughProps(props),
-      css: (_this$props$styles8 = this.props.styles) === null || _this$props$styles8 === void 0 ? void 0 : _this$props$styles8.heading,
+      css: (_this$props$styles1 = this.props.styles) === null || _this$props$styles1 === void 0 ? void 0 : _this$props$styles1.heading,
       as: ElementType,
       elementRef: this.handleRef,
       margin: margin,

package/lib/Heading/index.js

@@ -12,14 +12,14 @@ var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-var _IconAiColoredSolid4 = require("@instructure/ui-icons/lib/IconAiColoredSolid.js");
+var _IconAiColoredSolid7 = require("@instructure/ui-icons/lib/IconAiColoredSolid.js");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["border", "children", "color", "level", "margin", "elementRef", "makeStyles", "variant"];
-var _dec, _dec2, _class, _Heading, _IconAiColoredSolid, _IconAiColoredSolid2, _IconAiColoredSolid3;
+var _dec, _dec2, _class, _Heading, _IconAiColoredSolid, _IconAiColoredSolid2, _IconAiColoredSolid3, _IconAiColoredSolid4, _IconAiColoredSolid5, _IconAiColoredSolid6;
 /*
  * The MIT License (MIT)
  *
@@ -111,7 +111,7 @@ let Heading = exports.Heading = (_dec = (0, _emotion.withStyle)(_styles.default,
         "aria-hidden": "true",
         children: [(0, _jsxRuntime.jsxs)("span", {
           css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.igniteAIStacked,
-          children: [_IconAiColoredSolid || (_IconAiColoredSolid = (0, _jsxRuntime.jsx)(_IconAiColoredSolid4.IconAiColoredSolid, {})), (0, _jsxRuntime.jsx)("span", {
+          children: [_IconAiColoredSolid || (_IconAiColoredSolid = (0, _jsxRuntime.jsx)(_IconAiColoredSolid7.IconAiColoredSolid, {})), (0, _jsxRuntime.jsx)("span", {
             css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.igniteAI,
             children: "IgniteAI"
           })]
@@ -123,7 +123,7 @@ let Heading = exports.Heading = (_dec = (0, _emotion.withStyle)(_styles.default,
       return (0, _jsxRuntime.jsxs)("span", {
         css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.withIcon,
         "aria-hidden": "true",
-        children: [_IconAiColoredSolid2 || (_IconAiColoredSolid2 = (0, _jsxRuntime.jsx)(_IconAiColoredSolid4.IconAiColoredSolid, {})), (0, _jsxRuntime.jsx)("span", {
+        children: [_IconAiColoredSolid2 || (_IconAiColoredSolid2 = (0, _jsxRuntime.jsx)(_IconAiColoredSolid7.IconAiColoredSolid, {})), (0, _jsxRuntime.jsx)("span", {
           css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.igniteAI,
           children: "IgniteAI"
         }), children]
@@ -134,7 +134,33 @@ let Heading = exports.Heading = (_dec = (0, _emotion.withStyle)(_styles.default,
       return (0, _jsxRuntime.jsxs)("span", {
         css: (_this$props$styles7 = this.props.styles) === null || _this$props$styles7 === void 0 ? void 0 : _this$props$styles7.withIcon,
         "aria-hidden": "true",
-        children: [_IconAiColoredSolid3 || (_IconAiColoredSolid3 = (0, _jsxRuntime.jsx)(_IconAiColoredSolid4.IconAiColoredSolid, {})), "\xA0", children]
+        children: [_IconAiColoredSolid3 || (_IconAiColoredSolid3 = (0, _jsxRuntime.jsx)(_IconAiColoredSolid7.IconAiColoredSolid, {})), "\xA0", children]
+      });
+    }
+    if (aiVariant === 'stacked') {
+      var _this$props$styles8, _this$props$styles9;
+      return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [(0, _jsxRuntime.jsxs)("span", {
+          css: (_this$props$styles8 = this.props.styles) === null || _this$props$styles8 === void 0 ? void 0 : _this$props$styles8.igniteAIStacked,
+          children: [_IconAiColoredSolid4 || (_IconAiColoredSolid4 = (0, _jsxRuntime.jsx)(_IconAiColoredSolid7.IconAiColoredSolid, {})), (0, _jsxRuntime.jsx)("span", {
+            css: (_this$props$styles9 = this.props.styles) === null || _this$props$styles9 === void 0 ? void 0 : _this$props$styles9.igniteAI,
+            children: "IgniteAI"
+          })]
+        }), children]
+      });
+    }
+    if (aiVariant === 'horizontal') {
+      var _this$props$styles0;
+      return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [_IconAiColoredSolid5 || (_IconAiColoredSolid5 = (0, _jsxRuntime.jsx)(_IconAiColoredSolid7.IconAiColoredSolid, {})), (0, _jsxRuntime.jsx)("span", {
+          css: (_this$props$styles0 = this.props.styles) === null || _this$props$styles0 === void 0 ? void 0 : _this$props$styles0.igniteAI,
+          children: "IgniteAI"
+        }), children]
+      });
+    }
+    if (aiVariant === 'iconOnly') {
+      return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [_IconAiColoredSolid6 || (_IconAiColoredSolid6 = (0, _jsxRuntime.jsx)(_IconAiColoredSolid7.IconAiColoredSolid, {})), "\xA0", children]
       });
     }
     return children;
@@ -155,7 +181,7 @@ let Heading = exports.Heading = (_dec = (0, _emotion.withStyle)(_styles.default,
     return void 0;
   }
   render() {
-    var _this$props$styles8;
+    var _this$props$styles1;
     const _this$props6 = this.props,
       border = _this$props6.border,
       children = _this$props6.children,
@@ -181,7 +207,7 @@ let Heading = exports.Heading = (_dec = (0, _emotion.withStyle)(_styles.default,
     });
     return (0, _jsxRuntime.jsx)(_View.View, {
       ...(0, _passthroughProps.passthroughProps)(props),
-      css: (_this$props$styles8 = this.props.styles) === null || _this$props$styles8 === void 0 ? void 0 : _this$props$styles8.heading,
+      css: (_this$props$styles1 = this.props.styles) === null || _this$props$styles1 === void 0 ? void 0 : _this$props$styles1.heading,
       as: ElementType,
       elementRef: this.handleRef,
       margin: margin,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-heading",
-  "version": "10.21.1-snapshot-9",
+  "version": "10.22.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.27.6",
-    "@instructure/console": "10.21.1-snapshot-9",
-    "@instructure/emotion": "10.21.1-snapshot-9",
-    "@instructure/shared-types": "10.21.1-snapshot-9",
-    "@instructure/ui-icons": "10.21.1-snapshot-9",
-    "@instructure/ui-prop-types": "10.21.1-snapshot-9",
-    "@instructure/ui-react-utils": "10.21.1-snapshot-9",
-    "@instructure/ui-testable": "10.21.1-snapshot-9",
-    "@instructure/ui-view": "10.21.1-snapshot-9",
+    "@instructure/console": "10.22.0",
+    "@instructure/emotion": "10.22.0",
+    "@instructure/shared-types": "10.22.0",
+    "@instructure/ui-icons": "10.22.0",
+    "@instructure/ui-prop-types": "10.22.0",
+    "@instructure/ui-react-utils": "10.22.0",
+    "@instructure/ui-testable": "10.22.0",
+    "@instructure/ui-view": "10.22.0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.21.1-snapshot-9",
-    "@instructure/ui-babel-preset": "10.21.1-snapshot-9",
-    "@instructure/ui-themes": "10.21.1-snapshot-9",
+    "@instructure/ui-axe-check": "10.22.0",
+    "@instructure/ui-babel-preset": "10.22.0",
+    "@instructure/ui-themes": "10.22.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "vitest": "^3.2.2"

package/src/Heading/index.tsx

@@ -145,6 +145,34 @@ class Heading extends Component<HeadingProps> {
         </span>
       )
     }
+    if (aiVariant === 'stacked') {
+      return (
+        <>
+          <span css={this.props.styles?.igniteAIStacked}>
+            <IconAiColoredSolid />
+            <span css={this.props.styles?.igniteAI}>IgniteAI</span>
+          </span>
+          {children}
+        </>
+      )
+    }
+    if (aiVariant === 'horizontal') {
+      return (
+        <>
+          <IconAiColoredSolid />
+          <span css={this.props.styles?.igniteAI}>IgniteAI</span>
+          {children}
+        </>
+      )
+    }
+    if (aiVariant === 'iconOnly') {
+      return (
+        <>
+          <IconAiColoredSolid />
+          &nbsp;{children}
+        </>
+      )
+    }
     return children
   }
 

package/src/Heading/props.ts

@@ -58,12 +58,12 @@ type HeadingOwnProps = {
    * The font color to render, NOTE: `ai` color is deprecated. Use the `aiVariant` prop instead
    */
   color?:
-    | 'primary'
-    | 'secondary'
-    | 'primary-inverse'
-    | 'secondary-inverse'
-    | 'inherit'
-    | 'ai'
+  | 'primary'
+  | 'secondary'
+  | 'primary-inverse'
+  | 'secondary-inverse'
+  | 'inherit'
+  | 'ai'
   /**
    * The *visual* appearance of the Heading: h1 is largest; h5 is smallest.
    */
@@ -91,16 +91,16 @@ type HeadingOwnProps = {
    * Sets appearance of the heading.
    */
   variant?:
-    | 'titlePageDesktop'
-    | 'titlePageMobile'
-    | 'titleSection'
-    | 'titleCardSection'
-    | 'titleModule'
-    | 'titleCardLarge'
-    | 'titleCardRegular'
-    | 'titleCardMini'
-    | 'label'
-    | 'labelInline'
+  | 'titlePageDesktop'
+  | 'titlePageMobile'
+  | 'titleSection'
+  | 'titleCardSection'
+  | 'titleModule'
+  | 'titleCardLarge'
+  | 'titleCardRegular'
+  | 'titleCardMini'
+  | 'label'
+  | 'labelInline'
 }
 
 type PropKeys = keyof HeadingOwnProps