Resolved feedback, reverted main page changes

Author: Eric Olkowski

src/components/PropsTable.tsx

@@ -39,35 +39,42 @@ export const PropsTable: React.FunctionComponent<PropsTableProps> = ({
   const SectionHeading = headingLevel
   const publicProps = componentProps?.filter((prop) => !prop.isHidden)
   const hasPropsToRender = !!publicProps?.length
-  const betaDeprecatedProps = hasPropsToRender
-    ? publicProps.filter((prop) => prop.isBeta && prop.isDeprecated)
-    : []
-
-  if (betaDeprecatedProps.length) {
-    // eslint-disable-next-line no-console
-    console.error(
-      `The following ${componentName} props have both the isBeta and isDeprecated tag: ${betaDeprecatedProps.map((prop) => prop.name).join(', ')}`,
-    )
-  }
 
   const renderTagLabel = (componentProp: ComponentProp) => {
-    const { isBeta, isDeprecated } = componentProp
+    const { name, isBeta, isDeprecated } = componentProp
     if (!isBeta && !isDeprecated) {
       return null
     }
 
+    if (isBeta && isDeprecated) {
+      // eslint-disable-next-line no-console
+      console.error(
+        `The ${name} prop for ${componentName} has both the isBeta and isDeprecated tag.`,
+      )
+    }
+
     return (
-      <Label
-        // Would need design eyes on outline vs filled
-        variant="outline"
-        color={`${isBeta ? 'blue' : 'orange'}`}
-        isCompact
-      >
+      <Label color={`${isBeta ? 'blue' : 'grey'}`} isCompact>
         {isBeta ? 'Beta' : 'Deprecated'}
       </Label>
     )
   }
 
+  const renderRequiredDescription = (isRequired: boolean | undefined) => {
+    if (!isRequired) {
+      return null
+    }
+
+    return (
+      <>
+        <span aria-hidden="true" className={css(textStyles.textColorRequired)}>
+          *
+        </span>
+        <span className={css(accessibleStyles.screenReader)}>required</span>
+      </>
+    )
+  }
+
   return (
     <>
       <SectionHeading>{componentName}</SectionHeading>
@@ -108,23 +115,7 @@ export const PropsTable: React.FunctionComponent<PropsTableProps> = ({
                     <Td>
                       <TableText wrapModifier="breakWord">
                         {prop.name}
-                        {prop.isRequired ? (
-                          <>
-                            <span
-                              aria-hidden="true"
-                              className={css(textStyles.textColorRequired)}
-                            >
-                              *
-                            </span>
-                            <span
-                              className={css(accessibleStyles.screenReader)}
-                            >
-                              required
-                            </span>
-                          </>
-                        ) : (
-                          ''
-                        )}{' '}
+                        {renderRequiredDescription(prop.isRequired)}{' '}
                         {renderTagLabel(prop)}
                       </TableText>
                     </Td>

src/components/__tests__/PropsTable.test.tsx

@@ -44,7 +44,9 @@ it('Renders component description when componentDescription is passed in', () =>
     />,
   )
 
-  expect(screen.getByText(componentDescription)).toBeVisible()
+  expect(screen.getByTestId('component-description')).toHaveTextContent(
+    componentDescription,
+  )
 })
 
 it('Does not render props table if componentProps is not passed in', () => {
@@ -83,7 +85,7 @@ it('Throws error if component prop has isBeta and isDeprecated both set to true'
 
   expect(consoleSpy).toHaveBeenCalledTimes(1)
   expect(consoleSpy).toHaveBeenCalledWith(
-    'The following TestComponent props have both the isBeta and isDeprecated tag: propWithAllTableColumns',
+    `The ${propWithAllTableColumns.name} prop for TestComponent has both the isBeta and isDeprecated tag.`,
   )
   consoleSpy.mockRestore()
 })
@@ -101,7 +103,7 @@ it('Does not throw error if only one of isBeta or isDeprecated is passed', () =>
   consoleSpy.mockRestore()
 })
 
-it('Does not throw error if isBeta and isDeprecated both are not passed', () => {
+it('Does not throw error if neither isBeta nor isDeprecated are passed', () => {
   const consoleSpy = jest.spyOn(console, 'error').mockImplementation()
   render(
     <PropsTable

src/pages/index.astro

@@ -1,37 +1,6 @@
 ---
 import '../styles/global.scss'
 import MainLayout from '../layouts/Main.astro'
-import { PropsTable } from '../components/PropsTable'
-
-const propsData = [
-  {
-    name: 'variant',
-    type: "'success' | 'danger' | 'warning' | 'info' | 'custom'",
-    defaultValue: '',
-    description: 'Adds alert variant styles.',
-    isBeta: true,
-  },
-  {
-    name: 'children',
-    isRequired: true,
-    type: 'ReactNode',
-    defaultValue: '',
-  },
-  {
-    name: 'timeoutAnimation',
-    isRequired: false,
-    type: undefined,
-    defaultValue: '3000',
-    description:
-      'If the user hovers over the alert and `timeout` expires, this is how long to wait before finally dismissing the alert.',
-    isDeprecated: true,
-  },
-  {
-    name: 'innerRef',
-    isHidden: true,
-    description: 'Ref to pass',
-  },
-]
 ---
 
 <html lang="en">
@@ -43,17 +12,6 @@ const propsData = [
     <title>PatternFly</title>
   </head>
   <body>
-    <MainLayout title="PatternFly X Astro">
-      <PropsTable
-        componentName="Alert"
-        componentDescription="The main alert component."
-        componentProps={propsData}
-      />
-      <PropsTable
-        componentName="AlertGroup"
-        componentDescription="The container to render a list of alerts."
-      />
-      <PropsTable componentName="AlertTitle" />
-    </MainLayout>
+    <MainLayout title="PatternFly X Astro"> Page content </MainLayout>
   </body>
 </html>