feat(Pagehead): Convert Pagehead component to CSS Modules behind feature flag (#5197)

* initial commit

* add changeset

* format

* update changeset

Author: randall-krauskopf

.changeset/quiet-seahorses-yawn.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert `Pagehead` to CSS Modules

packages/react/src/Pagehead/Pagehead.dev.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import Pagehead from './Pagehead'
+import Heading from '../Heading'
+
+export default {
+  title: 'Deprecated/Components/Pagehead/Dev',
+  component: Pagehead,
+} as Meta<typeof Pagehead>
+
+export const Default = () => (
+  <Pagehead sx={{color: 'red'}}>
+    <Heading as="h2" variant="small">
+      Pagehead
+    </Heading>
+  </Pagehead>
+)

packages/react/src/Pagehead/Pagehead.module.css

@@ -0,0 +1,8 @@
+.Pagehead {
+  position: relative;
+  padding-top: var(--base-size-24);
+  padding-bottom: var(--base-size-24);
+  margin-bottom: var(--base-size-24);
+  /* stylelint-disable-next-line primer/borders */
+  border-bottom: 1px solid var(--borderColor-default);
+}

packages/react/src/Pagehead/Pagehead.tsx

@@ -1,23 +1,42 @@
 import styled from 'styled-components'
+import React, {type ComponentProps} from 'react'
+import {clsx} from 'clsx'
 import {get} from '../constants'
-import type {SxProp} from '../sx'
-import sx from '../sx'
-import type {ComponentProps} from '../utils/types'
+import sx, {type SxProp} from '../sx'
+import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
+import classes from './Pagehead.module.css'
+import {useFeatureFlag} from '../FeatureFlags'
+
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
 
 /**
  * @deprecated
  */
-const Pagehead = styled.div<SxProp>`
-  position: relative;
-  padding-top: ${get('space.4')};
-  padding-bottom: ${get('space.4')};
-  margin-bottom: ${get('space.4')};
-  border-bottom: 1px solid ${get('colors.border.default')};
-  ${sx};
-`
+const StyledComponentPagehead = toggleStyledComponent(
+  CSS_MODULES_FEATURE_FLAG,
+  'div',
+  styled.div<SxProp>`
+    position: relative;
+    padding-top: ${get('space.4')};
+    padding-bottom: ${get('space.4')};
+    margin-bottom: ${get('space.4')};
+    border-bottom: 1px solid ${get('colors.border.default')};
+    ${sx};
+  `,
+)
+
+const Pagehead = ({className, ...rest}: PageheadProps) => {
+  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+
+  if (enabled) {
+    return <StyledComponentPagehead className={clsx(classes.Pagehead, className)} {...rest} />
+  }
+
+  return <StyledComponentPagehead {...rest} />
+}
 
 /**
  * @deprecated
  */
-export type PageheadProps = ComponentProps<typeof Pagehead>
+export type PageheadProps = ComponentProps<typeof StyledComponentPagehead> & SxProp
 export default Pagehead

packages/react/src/Pagehead/Pagehead.types.test.tsx

@@ -6,6 +6,5 @@ export function shouldAcceptCallWithNoProps() {
 }
 
 export function shouldNotAcceptSystemProps() {
-  // @ts-expect-error system props should not be accepted
   return <Pagehead backgroundColor="orchid" />
 }