feat(ui-color-picker): add new labelLevel prop to set heading level in ColorContrast

INSTUI-4874

Author: ToMESSKa

packages/ui-color-picker/src/ColorContrast/__tests__/ColorContrast.test.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { vi } from 'vitest'
 import '@testing-library/jest-dom'
 import { runAxeCheck } from '@instructure/ui-axe-check'
@@ -76,6 +76,53 @@ describe('<ColorContrast />', () => {
     })
   })
 
+  describe('labelLevel prop', () => {
+    it('should render label as div when labelLevel is not provided', async () => {
+      render(<ColorContrast {...testColors} {...testLabels} />)
+
+      const heading = screen.queryByRole('heading', {
+        name: testLabels.label
+      })
+      expect(heading).not.toBeInTheDocument()
+
+      const labelText = screen.getByText(testLabels.label)
+      expect(labelText).toBeInTheDocument()
+      expect(labelText.tagName.toLowerCase()).toBe('div')
+    })
+
+    it('should render label as Heading when labelLevel is provided', async () => {
+      render(<ColorContrast {...testColors} {...testLabels} labelLevel="h2" />)
+
+      const heading = screen.getByRole('heading', {
+        name: testLabels.label,
+        level: 2
+      })
+      expect(heading).toBeInTheDocument()
+    })
+
+    it('should render correct heading level', async () => {
+      const { rerender } = render(
+        <ColorContrast {...testColors} {...testLabels} labelLevel="h3" />
+      )
+
+      let heading = screen.getByRole('heading', {
+        name: testLabels.label,
+        level: 3
+      })
+      expect(heading).toBeInTheDocument()
+
+      rerender(
+        <ColorContrast {...testColors} {...testLabels} labelLevel="h1" />
+      )
+
+      heading = screen.getByRole('heading', {
+        name: testLabels.label,
+        level: 1
+      })
+      expect(heading).toBeInTheDocument()
+    })
+  })
+
   describe('should calculate contrast correctly', () => {
     it('on opaque colors', async () => {
       const color1 = '#fff'

packages/ui-color-picker/src/ColorContrast/index.tsx

@@ -33,6 +33,7 @@ import {
 import { withStyle } from '@instructure/emotion'
 
 import { Text } from '@instructure/ui-text'
+import { Heading } from '@instructure/ui-heading'
 import { Pill } from '@instructure/ui-pill'
 
 import ColorIndicator from '../ColorIndicator'
@@ -191,6 +192,7 @@ class ColorContrast extends Component<ColorContrastProps, ColorContrastState> {
     const {
       styles,
       label,
+      labelLevel,
       normalTextLabel,
       largeTextLabel,
       graphicsTextLabel
@@ -211,9 +213,15 @@ class ColorContrast extends Component<ColorContrastProps, ColorContrastState> {
         data-cid="ColorContrast"
       >
         <div css={styles?.label}>
-          <Text weight="bold" as="div">
-            {label}
-          </Text>
+          {labelLevel ? (
+            <Heading as={labelLevel} level="reset">
+              {label}
+            </Heading>
+          ) : (
+            <Text weight="bold" as="div">
+              {label}
+            </Text>
+          )}
         </div>
         <Text size="x-large">{contrast}:1</Text>
         {this.renderPreview()}

packages/ui-color-picker/src/ColorContrast/props.ts

@@ -22,12 +22,15 @@
  * SOFTWARE.
  */
 
+import React from 'react'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type {
   OtherHTMLAttributes,
   ColorContrastTheme
 } from '@instructure/shared-types'
 
+type HeadingLevel<U extends keyof React.JSX.IntrinsicElements> = U
+
 type ColorContrastOwnProps = {
   /**
    * Provides a reference to the component's underlying html element.
@@ -53,6 +56,10 @@ type ColorContrastOwnProps = {
    * Label of the component
    */
   label: string
+  /**
+   * The heading level for the label. If provided, the label will be rendered as a `<Heading />` instead of `<Text />`.
+   */
+  labelLevel?: HeadingLevel<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>
   /**
    * Text of the second check (Suggested english text: Large text)
    */
@@ -154,6 +161,7 @@ const allowedProps: AllowedPropKeys = [
   'graphicsTextLabel',
   'withoutColorPreview',
   'label',
+  'labelLevel',
   'largeTextLabel',
   'normalTextLabel',
   'secondColor',

packages/ui-color-picker/src/ColorContrast/styles.ts

@@ -23,6 +23,7 @@
  */
 
 import type { ColorContrastTheme } from '@instructure/shared-types'
+import type { ColorContrastProps } from './props'
 /**
  * ---
  * private: true
@@ -33,7 +34,10 @@ import type { ColorContrastTheme } from '@instructure/shared-types'
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme: ColorContrastTheme) => {
+const generateStyle = (
+  componentTheme: ColorContrastTheme,
+  props: ColorContrastProps
+) => {
   const statusDescriptionStyle = (pass: boolean) => ({
     label: pass
       ? 'colorContrast__successDescription'
@@ -94,7 +98,8 @@ const generateStyle = (componentTheme: ColorContrastTheme) => {
     },
     label: {
       label: 'colorContrast__label',
-      marginBottom: componentTheme.labelBottomMargin
+      marginBottom: componentTheme.labelBottomMargin,
+      ...(props.labelLevel && { fontWeight: 'bold' })
     }
   }
 }