fix(tables): only render props/css tables when needed (#102)

Author: wise-king-sullyman

src/components/DocsTables.astro

@@ -0,0 +1,28 @@
+---
+import { Stack, StackItem } from '@patternfly/react-core'
+import PropsTables from './PropsTables.astro'
+import CSSTable from './CSSTable.astro'
+
+const { propComponents, cssPrefix } = Astro.props
+
+const hasTables = !!propComponents || !!cssPrefix
+---
+
+<>
+  {
+    hasTables && (
+      <Stack hasGutter>
+        {propComponents && (
+          <StackItem>
+            <PropsTables propComponents={propComponents} server:defer />
+          </StackItem>
+        )}
+        {cssPrefix && (
+          <StackItem>
+            <CSSTable cssPrefix={cssPrefix} server:defer />
+          </StackItem>
+        )}
+      </Stack>
+    )
+  }
+</>

src/pages/[section]/[...page].astro

@@ -1,12 +1,10 @@
 ---
 import { getCollection, render } from 'astro:content'
-import { Title, PageSection, Stack, StackItem } from '@patternfly/react-core'
+import { Title, PageSection } from '@patternfly/react-core'
 import MainLayout from '../../layouts/Main.astro'
 import { content } from '../../content'
 import { kebabCase } from '../../utils/case'
 import { componentTabs } from '../../globals'
-import PropsTables from '../../components/PropsTables.astro'
-import CSSTable from '../../components/CSSTable.astro'
 import SectionGallery from '../../components/section-gallery/SectionGallery.astro'
 import LiveExample from '../../components/LiveExample.astro'
 import {
@@ -29,6 +27,7 @@ import {
   dt,
   dd,
 } from '../../components/Content'
+import DocsTables from '../../components/DocsTables.astro'
 
 export async function getStaticPaths() {
   const collections = await Promise.all(
@@ -91,13 +90,10 @@ if (section === 'components' && componentTabs[id]) {
         LiveExample,
       }}
     />
-    <Stack hasGutter>
-      <StackItem>
-        <PropsTables propComponents={propComponents} server:defer />
-      </StackItem>
-      <StackItem>
-        <CSSTable cssPrefix={cssPrefix} server:defer />
-      </StackItem>
-    </Stack>
+    <DocsTables
+      propComponents={propComponents}
+      cssPrefix={cssPrefix}
+      server:defer
+    />
   </PageSection>
 </MainLayout>

src/pages/[section]/[page]/[...tab].astro

@@ -1,11 +1,10 @@
 ---
 import { getCollection, render } from 'astro:content'
-import { Title, PageSection, Stack, StackItem } from '@patternfly/react-core'
+import { Title, PageSection } from '@patternfly/react-core'
 import MainLayout from '../../../layouts/Main.astro'
 import { content } from '../../../content'
 import { kebabCase } from '../../../utils/case'
 import { componentTabs, tabNames, buildTab, sortTabs } from '../../../globals'
-import PropsTables from '../../../components/PropsTables.astro'
 import {
   h1,
   h2,
@@ -27,7 +26,7 @@ import {
   dd,
 } from '../../../components/Content'
 import LiveExample from '../../../components/LiveExample.astro'
-import CSSTable from '../../../components/CSSTable.astro'
+import DocsTables from '../../../components/DocsTables.astro'
 
 export async function getStaticPaths() {
   const collections = await Promise.all(
@@ -126,13 +125,6 @@ const currentPath = Astro.url.pathname
         LiveExample,
       }}
     />
-    <Stack hasGutter>
-      <StackItem>
-        <PropsTables propComponents={propComponents} server:defer />
-      </StackItem>
-      <StackItem>
-        <CSSTable cssPrefix={cssPrefix} server:defer />
-      </StackItem>
-    </Stack>
+    <DocsTables propComponents={propComponents} cssPrefix={cssPrefix} server:defer />
   </PageSection>
 </MainLayout>