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

INSTUI-4616

Author: HerrTopi

package-lock.json

@@ -662,6 +662,9 @@ export type HeadingTheme = Typography & {
   h5FontSize: Typography['fontSizeSmall']
   h5FontWeight: Typography['fontWeightNormal']
   h5FontFamily: Typography['fontFamily']
+  h6FontSize: Typography['fontSizeXSmall']
+  h6FontWeight: Typography['fontWeightNormal']
+  h6FontFamily: Typography['fontFamily']
   primaryInverseColor: string
   primaryColor: string
   secondaryColor: string

packages/shared-types/src/ComponentThemeVariables.ts

@@ -29,6 +29,7 @@
     "@instructure/shared-types": "10.21.0",
     "@instructure/ui-prop-types": "10.21.0",
     "@instructure/ui-react-utils": "10.21.0",
+    "@instructure/ui-icons": "10.21.0",
     "@instructure/ui-testable": "10.21.0",
     "@instructure/ui-view": "10.21.0",
     "prop-types": "^15.8.1"

packages/ui-heading/package.json

@@ -34,11 +34,19 @@ type: example
   </div>
 ```
 
+### AI Heading
+
+Pre-configured and with unique styles, the `ai-headings` are used for standardized, ai-related components.
+
 ```js
 ---
 type: example
 ---
-<Heading>Default Heading</Heading>
+<div style={{display: 'flex', flexDirection: 'column', gap: '24px'}}>
+ <Heading aiVariant="stacked">Nutrition Facts</Heading>
+ <Heading aiVariant="horizontal">Nutrition Facts</Heading>
+ <Heading aiVariant="iconOnly">Nutrition Facts</Heading>
+</div>
 ```
 
 ### Heading level
@@ -70,20 +78,19 @@ type: example
   <Heading>I inherit my color via the CSS cascade (default)</Heading>
   <Heading color="primary">I am primary color</Heading>
   <Heading color="secondary">I am secondary color</Heading>
-  <Heading color="ai">I am AI color</Heading>
 </div>
 ```
 
 ### Icons
 
-With the `renderIcon` prop, an icon can be rendered before the text. Only current use-case is for the `ai heading`
+With the `renderIcon` prop, an icon can be rendered before the text.
 
 ```js
 ---
 type: example
 ---
 <div>
- <Heading color="ai" renderIcon={<IconAiColoredSolid/>}>I am AI color with icon</Heading>
+ <Heading renderIcon={<IconAdminSolid/>}>I am heading with icon</Heading>
 </div>
 ```
 

packages/ui-heading/src/Heading/README.md

@@ -31,6 +31,7 @@ import {
   callRenderProp
 } from '@instructure/ui-react-utils'
 import { testable } from '@instructure/ui-testable'
+import { IconAiColoredSolid } from '@instructure/ui-icons'
 
 import { withStyle } from '@instructure/emotion'
 
@@ -107,18 +108,58 @@ class Heading extends Component<HeadingProps> {
   }
 
   renderContent() {
-    const { children, renderIcon } = this.props
+    const { children, renderIcon, aiVariant } = this.props
 
-    if (renderIcon) {
+    if (renderIcon && !aiVariant) {
       return (
-        <>
+        <span css={[this.props.styles?.withIcon]} aria-hidden="true">
           {callRenderProp(renderIcon)}&nbsp;{children}
-        </>
+        </span>
+      )
+    }
+    if (aiVariant === 'stacked') {
+      return (
+        <span css={[this.props.styles?.withIcon]} aria-hidden="true">
+          <span css={this.props.styles?.igniteAIStacked}>
+            <IconAiColoredSolid />
+            <span css={this.props.styles?.igniteAI}>IgniteAI</span>
+          </span>
+          {children}
+        </span>
+      )
+    }
+    if (aiVariant === 'horizontal') {
+      return (
+        <span css={this.props.styles?.withIcon} aria-hidden="true">
+          <IconAiColoredSolid />
+          <span css={this.props.styles?.igniteAI}>IgniteAI</span>
+          {children}
+        </span>
+      )
+    }
+    if (aiVariant === 'iconOnly') {
+      return (
+        <span css={this.props.styles?.withIcon} aria-hidden="true">
+          <IconAiColoredSolid />
+          &nbsp;{children}
+        </span>
       )
     }
     return children
   }
 
+  //overriding default screen reader functionality is needed to read spans in h tags correctly
+  getAriaLabel() {
+    const { aiVariant, children, renderIcon } = this.props
+    if (aiVariant === 'stacked' || aiVariant === 'horizontal') {
+      return `IgniteAI, ${children}`
+    }
+    if (aiVariant === 'iconOnly' || renderIcon) {
+      return `${children}`
+    }
+    return undefined
+  }
+
   render() {
     const {
       border,
@@ -155,6 +196,7 @@ class Heading extends Component<HeadingProps> {
         as={ElementType}
         elementRef={this.handleRef}
         margin={margin}
+        aria-label={this.getAriaLabel()}
       >
         {this.renderContent()}
       </View>

packages/ui-heading/src/Heading/index.tsx

@@ -42,6 +42,10 @@ import type {
 type HeadingLevel<U extends keyof JSX.IntrinsicElements> = U
 
 type HeadingOwnProps = {
+  /**
+   * transforms heading into an ai variant
+   */
+  aiVariant?: 'stacked' | 'horizontal' | 'iconOnly'
   /**
    * The text content of the Heading
    */
@@ -51,7 +55,7 @@ type HeadingOwnProps = {
    */
   border?: 'none' | 'top' | 'bottom'
   /**
-   * The font color to render
+   * The font color to render, NOTE: `ai` color is deprecated. Use the `aiVariant` prop instead
    */
   color?:
     | 'primary'
@@ -63,7 +67,7 @@ type HeadingOwnProps = {
   /**
    * The *visual* appearance of the Heading: h1 is largest; h5 is smallest.
    */
-  level?: HeadingLevel<'h1' | 'h2' | 'h3' | 'h4' | 'h5'> | 'reset'
+  level?: HeadingLevel<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'> | 'reset'
   /**
    * Choose the element Heading should render as. Will default to the `level` prop
    * if not specified.
@@ -107,9 +111,12 @@ type HeadingProps = HeadingOwnProps &
   WithStyleProps<HeadingTheme, HeadingStyle> &
   OtherHTMLAttributes<HeadingOwnProps>
 
-type HeadingStyle = ComponentStyle<'heading'>
+type HeadingStyle = ComponentStyle<
+  'heading' | 'igniteAI' | 'igniteAIStacked' | 'withIcon'
+>
 
 const propTypes: PropValidators<PropKeys> = {
+  aiVariant: PropTypes.oneOf(['stacked', 'horizontal', 'iconOnly']),
   border: PropTypes.oneOf(['none', 'top', 'bottom']),
   children: childrenOrValue,
   color: PropTypes.oneOf([
@@ -140,6 +147,7 @@ const propTypes: PropValidators<PropKeys> = {
 }
 
 const allowedProps: AllowedPropKeys = [
+  'aiVariant',
   'border',
   'children',
   'color',

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

@@ -39,7 +39,7 @@ const generateStyle = (
   componentTheme: HeadingTheme,
   props: HeadingProps
 ): HeadingStyle => {
-  const { level, color, border, variant, renderIcon } = props
+  const { level, color, border, variant, aiVariant } = props
 
   const variants: Record<NonNullable<HeadingProps['variant']>, object> = {
     titlePageDesktop: {
@@ -130,6 +130,11 @@ const generateStyle = (
       fontSize: componentTheme.h5FontSize,
       fontWeight: componentTheme.h5FontWeight
     },
+    h6: {
+      fontFamily: componentTheme.h6FontFamily,
+      fontSize: componentTheme.h6FontSize,
+      fontWeight: componentTheme.h6FontWeight
+    },
     reset: {
       margin: 0,
       fontSize: 'inherit',
@@ -188,13 +193,6 @@ const generateStyle = (
       label: 'heading',
       lineHeight: componentTheme.lineHeight,
       margin: 0,
-      //need this for icons to render them vertically centered
-      ...(renderIcon
-        ? {
-            display: 'flex',
-            alignItems: 'center'
-          }
-        : {}),
       // NOTE: the input styles exist to accommodate the InPlaceEdit component
       // 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,
@@ -203,6 +201,33 @@ const generateStyle = (
       ...(variant ? variants[variant] : levelStyles[level!]),
       ...colorStyles[color!],
       ...borderStyles[border!]
+    },
+    igniteAI: {
+      label: 'heading__ignite-ai',
+      background: `
+        linear-gradient(to bottom, ${componentTheme.aiTextTopGradientColor} 0%, ${componentTheme.aiTextBottomGradientColor} 100%) text`,
+      border: 'solid transparent',
+      WebkitTextFillColor: 'transparent',
+      paddingRight: '.25rem'
+    },
+    igniteAIStacked: {
+      label: 'heading__ignite-ai-stacked',
+      fontSize: '1rem',
+      lineHeight: '1.25rem',
+      display: 'flex',
+      alignItems: 'center'
+    },
+    withIcon: {
+      label: 'heading__with-icon',
+      display: 'flex',
+      alignItems: 'center',
+      ...(aiVariant === 'stacked'
+        ? {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start'
+          }
+        : {})
     }
   }
 }

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

@@ -36,16 +36,6 @@ const generateComponentTheme = (theme: Theme): HeadingTheme => {
   const themeSpecificStyle: ThemeSpecificStyle<HeadingTheme> = {
     canvas: {
       primaryColor: theme['ic-brand-font-color-dark']
-    },
-    instructure: {
-      h1FontFamily: typography?.fontFamilyHeading,
-      h2FontFamily: typography?.fontFamilyHeading,
-      h3FontWeight: typography?.fontWeightBold,
-      h3FontSize: '2.125rem',
-      h4FontWeight: typography?.fontWeightBold,
-      h4FontSize: typography?.fontSizeLarge,
-      h5FontWeight: typography?.fontWeightBold,
-      h5FontSize: typography?.fontSizeMedium
     }
   }
 
@@ -74,6 +64,10 @@ const generateComponentTheme = (theme: Theme): HeadingTheme => {
     h5FontWeight: typography?.fontWeightNormal,
     h5FontFamily: typography?.fontFamily,
 
+    h6FontSize: typography?.fontSizeXSmall,
+    h6FontWeight: typography?.fontWeightNormal,
+    h6FontFamily: typography?.fontFamily,
+
     primaryInverseColor: colors?.contrasts?.white1010,
     primaryColor: colors?.contrasts?.grey125125,
 

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

@@ -7,15 +7,38 @@
   },
   "include": ["src"],
   "references": [
-    { "path": "../console/tsconfig.build.json" },
-    { "path": "../emotion/tsconfig.build.json" },
-    { "path": "../shared-types/tsconfig.build.json" },
-    { "path": "../ui-axe-check/tsconfig.build.json" },
-    { "path": "../ui-prop-types/tsconfig.build.json" },
-    { "path": "../ui-react-utils/tsconfig.build.json" },
-    { "path": "../ui-testable/tsconfig.build.json" },
-    { "path": "../ui-view/tsconfig.build.json" },
-    { "path": "../ui-babel-preset/tsconfig.build.json" },
-    { "path": "../ui-themes/tsconfig.build.json" }
+    {
+      "path": "../console/tsconfig.build.json"
+    },
+    {
+      "path": "../emotion/tsconfig.build.json"
+    },
+    {
+      "path": "../shared-types/tsconfig.build.json"
+    },
+    {
+      "path": "../ui-axe-check/tsconfig.build.json"
+    },
+    {
+      "path": "../ui-prop-types/tsconfig.build.json"
+    },
+    {
+      "path": "../ui-react-utils/tsconfig.build.json"
+    },
+    {
+      "path": "../ui-testable/tsconfig.build.json"
+    },
+    {
+      "path": "../ui-icons/tsconfig.build.json"
+    },
+    {
+      "path": "../ui-view/tsconfig.build.json"
+    },
+    {
+      "path": "../ui-babel-preset/tsconfig.build.json"
+    },
+    {
+      "path": "../ui-themes/tsconfig.build.json"
+    }
   ]
 }