feat(CSSTable): Add CSS variable table

jest.config.ts

@@ -20,7 +20,7 @@ const config: Config = {
   },
   setupFilesAfterEnv: ['<rootDir>/test.setup.ts'],
   transformIgnorePatterns: [
-    '/node_modules/(?!(change-case|@?nanostores|react-docgen|strip-indent)/)',
+    '/node_modules/(?!(change-case|@?nanostores|react-docgen|strip-indent|@patternfly/react-icons)/)',
   ],
 }
 

src/components/AutoLinkHeader.tsx

@@ -0,0 +1,56 @@
+import { Flex, FlexItem, Content, Button } from '@patternfly/react-core'
+import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon'
+import { slugger } from '../utils/slugger'
+import { css } from '@patternfly/react-styles'
+
+interface AutoLinkHeaderProps extends React.HTMLProps<HTMLDivElement> {
+  id?: string
+  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  children: React.ReactNode
+  metaText?: React.ReactNode
+  className?: string
+}
+
+export const AutoLinkHeader = ({
+  id,
+  headingLevel,
+  children,
+  metaText,
+  className,
+}: AutoLinkHeaderProps) => {
+  const slug = id || slugger(children)
+
+  return (
+    <Flex
+      alignItems={{ default: 'alignItemsCenter' }}
+      spaceItems={{ default: 'spaceItemsSm' }}
+    >
+      <FlexItem>
+        <Content
+          id={slug}
+          component={headingLevel}
+          className={css('ws-heading', className)}
+          tabIndex={-1}
+          isEditorial
+        >
+          <Button
+            href={`#${slug}`}
+            component="a"
+            className="ws-heading-anchor"
+            tabIndex={-1}
+            aria-hidden
+            variant="plain"
+            isInline
+          >
+            <LinkIcon
+              className="ws-heading-anchor-icon"
+              style={{ verticalAlign: 'middle' }}
+            />
+          </Button>
+          {children}
+        </Content>
+      </FlexItem>
+      {metaText && <FlexItem>{metaText}</FlexItem>}
+    </Flex>
+  )
+}

src/components/CSSSearch.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react'
+import { SearchInput } from '@patternfly/react-core'
+
+interface CSSSearchProps {
+  getDebouncedFilteredRows: (value: string) => void
+  'aria-label'?: string
+  placeholder?: string
+}
+
+export const CSSSearch: React.FC<CSSSearchProps> = ({
+  getDebouncedFilteredRows,
+  'aria-label': ariaLabel = 'Filter CSS Variables',
+  placeholder = 'Filter CSS Variables',
+}: CSSSearchProps) => {
+  const [filterValue, setFilterValue] = useState('')
+
+  const onFilterChange = (
+    _event: React.FormEvent<HTMLInputElement>,
+    value: string,
+  ) => {
+    setFilterValue(value)
+    getDebouncedFilteredRows(value)
+  }
+
+  return (
+    <SearchInput
+      aria-label={ariaLabel}
+      placeholder={placeholder}
+      value={filterValue}
+      onChange={onFilterChange}
+    />
+  )
+}

src/components/CSSTable.astro

@@ -0,0 +1,33 @@
+---
+import { CSSTable as CSSTableComponent } from './CSSTable'
+import { AutoLinkHeader } from './AutoLinkHeader'
+import { Stack, StackItem } from '@patternfly/react-core'
+
+const { cssPrefix } = Astro.props
+---
+
+{
+  cssPrefix?.length > 0 && (
+    <Stack hasGutter>
+      <StackItem>
+        <AutoLinkHeader
+          headingLevel="h2"
+          className="pf-v6-c-content--h2"
+          id="css-variables"
+        >
+          CSS variables
+        </AutoLinkHeader>
+      </StackItem>
+
+      {cssPrefix.map((prefix: string, index: number) => (
+        <StackItem key={index}>
+          <CSSTableComponent
+            autoLinkHeader={cssPrefix.length > 1}
+            cssPrefix={prefix}
+            client:only="react"
+          />
+        </StackItem>
+      ))}
+    </Stack>
+  )
+}