feat(ui-heading,shared-types): add new aiHeading prop and design. Also add h6 level to heading

INSTUI-4616

Author: HerrTopi

packages/ui-heading/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
   }
 

packages/ui-heading/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

packages/ui-heading/src/Heading/styles.ts

@@ -39,7 +39,7 @@ const generateStyle = (
   componentTheme: HeadingTheme,
   props: HeadingProps
 ): HeadingStyle => {
-  const { level, color, border, variant, aiVariant } = props
+  const { level, color, border, variant, renderIcon, aiVariant } = props
 
   const variants: Record<NonNullable<HeadingProps['variant']>, object> = {
     titlePageDesktop: {
@@ -223,10 +223,10 @@ const generateStyle = (
       alignItems: 'center',
       ...(aiVariant === 'stacked'
         ? {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'flex-start'
-          }
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'flex-start'
+        }
         : {})
     }
   }

packages/ui-heading/tsconfig.build.json

@@ -5,7 +5,9 @@
     "composite": true,
     "rootDir": "./src"
   },
-  "include": ["src"],
+  "include": [
+    "src"
+  ],
   "references": [
     {
       "path": "../console/tsconfig.build.json"
@@ -37,6 +39,9 @@
     {
       "path": "../ui-babel-preset/tsconfig.build.json"
     },
+    {
+      "path": "../ui-test-utils/tsconfig.build.json"
+    },
     {
       "path": "../ui-themes/tsconfig.build.json"
     }