@instructure/ui-heading 10.21.0 → 10.21.1-snapshot-0

package/src/Heading/props.ts

@@ -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',

package/src/Heading/styles.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'
+          }
+        : {})
     }
   }
 }

package/src/Heading/theme.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,
 

package/tsconfig.build.json

@@ -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"
+    }
   ]
 }