New nested param table styles for REST (#30862)

components/parameter-table/ParameterTable.tsx

@@ -0,0 +1,142 @@
+import cx from 'classnames'
+import { useTranslation } from 'components/hooks/useTranslation'
+
+import { ParameterRow } from './ParameterRow'
+import { BodyParameter, ChildParameter, Parameter } from './types'
+
+import styles from './ParameterTable.module.scss'
+
+type Props = {
+  slug: string
+  numPreviews: number
+  heading: string
+  headers: Array<ChildParameter>
+  parameters: Array<Parameter>
+  bodyParameters: Array<BodyParameter>
+}
+
+export function ParameterTable({
+  slug,
+  numPreviews,
+  heading = '',
+  headers = [],
+  parameters,
+  bodyParameters,
+}: Props) {
+  const { t } = useTranslation(['parameter_table', 'products'])
+  const queryParams = parameters.filter((param) => param.in === 'query')
+  const pathParams = parameters.filter((param) => param.in === 'path')
+
+  return (
+    <>
+      {heading && (
+        <h3 className="mt-4 mb-3 pt-3 h4" id={`${slug}--parameters`}>
+          <a href={`#${slug}--parameters`}>{heading}</a>
+        </h3>
+      )}
+
+      <table
+        className={cx(styles.parameterTable)}
+        summary="Column one has the type of parameter and the other columns show the name, type, and description of the parameters"
+      >
+        <thead>
+          <tr>
+            <th id="header" scope="col" className="text-bold pl-0">
+              {t('headers')}
+            </th>
+          </tr>
+          <tr className="visually-hidden">
+            <th scope="col">{`${t('name')}, ${t('type')}, ${t('description')}`}</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {headers.length > 0 && (
+            <>
+              {headers.map((header, index) => (
+                <ParameterRow
+                  rowParams={header}
+                  slug={slug}
+                  numPreviews={numPreviews}
+                  key={`${index}-${header.name}`}
+                />
+              ))}
+            </>
+          )}
+
+          {pathParams.length > 0 && (
+            <>
+              <tr className="border-top-0">
+                <th className="text-bold pl-0 border-top-0" scope="colgroup">
+                  {t('path')}
+                </th>
+              </tr>
+              <tr className="visually-hidden">
+                <th scope="colgroup">{`${t('name')}, ${t('type')}, ${t('description')}`}</th>
+              </tr>
+              {pathParams.map((param, index) => (
+                <ParameterRow
+                  rowParams={{
+                    name: param.name,
+                    type: param.schema.type,
+                    description: param.description,
+                    isRequired: param.required,
+                    default: param.schema.default,
+                    enum: param.schema.enum,
+                  }}
+                  slug={slug}
+                  key={`${index}-${param}`}
+                />
+              ))}
+            </>
+          )}
+
+          {queryParams.length > 0 && (
+            <>
+              <tr className="border-top-0">
+                <th className="text-bold pl-0" scope="colgroup">
+                  {t('query')}
+                </th>
+              </tr>
+              <tr className="visually-hidden">
+                <th scope="colgroup">{`${t('name')}, ${t('type')}, ${t('description')}`}</th>
+              </tr>
+
+              {queryParams.map((param, index) => (
+                <ParameterRow
+                  rowParams={{
+                    name: param.name,
+                    type: param.schema.type,
+                    description: param.description,
+                    isRequired: param.required,
+                    default: param.schema.default,
+                    enum: param.schema.enum,
+                  }}
+                  slug={slug}
+                  key={`${index}-${param}`}
+                />
+              ))}
+            </>
+          )}
+
+          {bodyParameters.length > 0 && (
+            <>
+              <tr className="border-top-0">
+                <th scope="colgroup" className="text-bold pl-0">
+                  {t('body')}
+                </th>
+              </tr>
+              <tr className="visually-hidden">
+                <th scope="colgroup">{`${t('name')}, ${t('type')}, ${t('description')}`}</th>
+              </tr>
+
+              {bodyParameters.map((param, index) => (
+                <ParameterRow rowParams={param} slug={slug} key={`${index}-${param}`} />
+              ))}
+            </>
+          )}
+        </tbody>
+      </table>
+    </>
+  )
+}