refactor(Heading): update component to CSS Modules

primer · Aug 6, 2024 · 696000e · 696000e
1 parent 1cda89c
commit 696000e
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 2 deletions.
diff --git a/packages/react/src/Heading/Heading.module.css b/packages/react/src/Heading/Heading.module.css
@@ -0,0 +1,5 @@
+.Heading {
+  font-weight: var(--base-text-weight-semibold);
+  font-size: var(--text-title-size-large);
+  margin: 0;
+}
diff --git a/packages/react/src/Heading/Heading.tsx b/packages/react/src/Heading/Heading.tsx
@@ -1,3 +1,4 @@
+import cx from 'clsx'
 import React, {forwardRef, useEffect} from 'react'
 import styled from 'styled-components'
 import {get} from '../constants'
@@ -6,6 +7,9 @@ import type {SxProp} from '../sx'
 import sx from '../sx'
 import type {ComponentProps} from '../utils/types'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+import classes from './Heading.module.css'
+import {useFeatureFlag} from '../FeatureFlags'
+import Box from '../Box'
 
 type StyledHeadingProps = {
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
@@ -17,7 +21,9 @@ const StyledHeading = styled.h2<StyledHeadingProps>`
   margin: 0;
   ${sx};
 `
-const Heading = forwardRef(({as: Component = 'h2', ...props}, forwardedRef) => {
+
+const Heading = forwardRef(({as: Component = 'h2', className, sx, ...props}, forwardedRef) => {
+  const enabled = useFeatureFlag('primer_react_css_modules')
   const innerRef = React.useRef<HTMLHeadingElement>(null)
   useRefObjectAsForwardedRef(forwardedRef, innerRef)
 
@@ -37,9 +43,28 @@ const Heading = forwardRef(({as: Component = 'h2', ...props}, forwardedRef) => {
     }, [innerRef])
   }
 
+  if (enabled) {
+    if (sx) {
+      return (
+        <Box
+          as={Component}
+          className={cx(className, classes.Heading)}
+          sx={sx}
+          {...props}
+          // @ts-ignore shh
+          ref={innerRef}
+        />
+      )
+    }
+
+    return <Component className={cx(className, classes.Heading)} {...props} ref={innerRef} />
+  }
+
   return (
     <StyledHeading
       as={Component}
+      className={className}
+      sx={sx}
       {...props}
       // @ts-ignore shh
       ref={innerRef}

diff --git a/packages/react/src/Heading/__tests__/Heading.test.tsx b/packages/react/src/Heading/__tests__/Heading.test.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
 import {Heading} from '../..'
 import {render, behavesAsComponent, checkExports} from '../../utils/testing'
-import {render as HTMLRender} from '@testing-library/react'
+import {render as HTMLRender, screen} from '@testing-library/react'
 import axe from 'axe-core'
 import ThemeProvider from '../../ThemeProvider'
+import {FeatureFlags} from '../../FeatureFlags'
 
 const theme = {
   breakpoints: ['400px', '640px', '960px', '1280px'],
@@ -140,4 +141,55 @@ describe('Heading', () => {
       ),
     ).toHaveStyleRule('font-style', 'italic')
   })
+
+  describe('with primer_react_css_modules enabled', () => {
+    it('should only include css modules class', () => {
+      HTMLRender(
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules: true,
+          }}
+        >
+          <Heading>test</Heading>
+        </FeatureFlags>,
+      )
+      expect(screen.getByText('test')).toHaveClass('Heading')
+      // Note: this is the generated class name when styled-components is used
+      // for this component
+      expect(screen.getByText('test')).not.toHaveClass(/^Heading__StyledHeading/)
+    })
+
+    it('should support `className` on the outermost element', () => {
+      const {container} = HTMLRender(
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules: true,
+          }}
+        >
+          <Heading className="test">test</Heading>
+        </FeatureFlags>,
+      )
+      expect(container.firstChild).toHaveClass('test')
+    })
+
+    it('should support overrides with sx if provided', () => {
+      HTMLRender(
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules: true,
+          }}
+        >
+          <Heading
+            sx={{
+              fontWeight: '900',
+            }}
+          >
+            test
+          </Heading>
+        </FeatureFlags>,
+      )
+
+      expect(screen.getByText('test')).toHaveStyle('font-weight: 900')
+    })
+  })
 })