repo sync

components/rest/BodyParametersRows.tsx

@@ -0,0 +1,45 @@
+import { Fragment } from 'react'
+import type { BodyParameter } from './types'
+import { useTranslation } from 'components/hooks/useTranslation'
+import { ChildBodyParametersRows } from './ChildBodyParametersRows'
+
+type Props = {
+  slug: string
+  bodyParameters: BodyParameter[]
+}
+
+export function BodyParameterRows({ slug, bodyParameters }: Props) {
+  const { t } = useTranslation('products')
+
+  return (
+    <>
+      {bodyParameters.map((bodyParam) => {
+        return (
+          <Fragment key={bodyParam.name + bodyParam.description}>
+            <tr>
+              <td>
+                <code>{bodyParam.name}</code>
+              </td>
+              <td>{bodyParam.type}</td>
+              <td>{bodyParam.in}</td>
+              <td>
+                <div dangerouslySetInnerHTML={{ __html: bodyParam.description }} />
+                {bodyParam.default && (
+                  <p>
+                    {t('rest.reference.default')}: <code>{bodyParam.default}</code>
+                  </p>
+                )}
+              </td>
+            </tr>
+            {bodyParam.childParamsGroups && bodyParam.childParamsGroups.length > 0 && (
+              <ChildBodyParametersRows
+                slug={slug}
+                childParamsGroups={bodyParam.childParamsGroups}
+              />
+            )}
+          </Fragment>
+        )
+      })}
+    </>
+  )
+}

components/rest/ChildBodyParametersRows.tsx

@@ -0,0 +1,62 @@
+import { useTranslation } from 'components/hooks/useTranslation'
+import type { ChildParamsGroup } from './types'
+
+type Props = {
+  slug: string
+  childParamsGroups: ChildParamsGroup[]
+}
+
+export function ChildBodyParametersRows({ slug, childParamsGroups }: Props) {
+  const { t } = useTranslation('products')
+
+  return (
+    <tr className="border-none">
+      <td colSpan={4} className="has-nested-table">
+        {childParamsGroups?.map((childParamGroup) => {
+          return (
+            <details key={childParamGroup.id}>
+              <summary
+                role="button"
+                aria-expanded="false"
+                className="keyboard-focus color-fg-muted"
+              >
+                <span className="d-inline-block mb-3" id={`${slug}-${childParamGroup.id}`}>
+                  Properties of the
+                  <code>{childParamGroup.parentName}</code>
+                  {childParamGroup.parentType}
+                </span>
+              </summary>
+              <table
+                id={`${childParamGroup.parentName}-object`}
+                className="ml-4 mb-4 mt-2 color-bg-subtle"
+              >
+                <thead>
+                  <tr>
+                    <th>
+                      {t('rest.reference.name')} ({t('rest.reference.type')})
+                    </th>
+                    <th>{t('rest.reference.description')}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {childParamGroup.params.map((childParam) => {
+                    return (
+                      <tr key={`${childParam.name}-${childParam.description}`}>
+                        <td className="color-bg-subtle">
+                          <code>{childParam.name}</code> ({childParam.type})
+                        </td>
+                        <td className="color-bg-subtle">
+                          <div dangerouslySetInnerHTML={{ __html: childParam.description }} />
+                        </td>
+                      </tr>
+                    )
+                  })}
+                </tbody>
+              </table>
+            </details>
+          )
+        })}
+      </td>
+    </tr>
+  )
+}

components/rest/CodeBlock.tsx

@@ -15,10 +15,10 @@ export function CodeBlock({ verb, codeBlock, setHTML = false }: Props) {
       dangerouslySetInnerHTML={{ __html: codeBlock }}
     />
   ) : (
-    <pre className={cx(styles.methodCodeBlock, 'mb-3 rounded-1 border')}>
+    <pre className={cx(styles.methodCodeBlock, 'rounded-1 border')}>
       <code>
         {verb && (
-          <span className="color-bg-accent-emphasis color-fg-on-emphasis rounded-1 px-2 py-1 text-uppercase">
+          <span className="color-bg-accent-emphasis color-fg-on-emphasis rounded-1 text-uppercase">
             {verb}
           </span>
         )}{' '}

components/rest/ParameterRows.tsx

@@ -0,0 +1,34 @@
+import { Parameter } from './types'
+import { useTranslation } from 'components/hooks/useTranslation'
+
+type Props = {
+  parameters: Parameter[]
+}
+
+export function ParameterRows({ parameters }: Props) {
+  const { t } = useTranslation('products')
+
+  return (
+    <>
+      {parameters.map((param) => (
+        <tr key={`${param.name}-${param.descriptionHTML}`}>
+          <td>
+            <code>{param.name}</code>
+          </td>
+          <td>{param.schema.type}</td>
+          <td>{param.in}</td>
+          <td>
+            {param.descriptionHTML && (
+              <div dangerouslySetInnerHTML={{ __html: param.descriptionHTML }} />
+            )}
+            {param.schema.default && (
+              <p>
+                {t('rest.reference.default')}: <code>{param.schema.default}</code>
+              </p>
+            )}
+          </td>
+        </tr>
+      ))}
+    </>
+  )
+}

components/rest/PreviewsRow.tsx

@@ -0,0 +1,39 @@
+import { xGitHub } from './types'
+import { useTranslation } from 'components/hooks/useTranslation'
+
+type Props = {
+  slug: string
+  hasRequiredPreviews: boolean
+  xGitHub: xGitHub
+}
+
+export function PreviewsRow({ slug, hasRequiredPreviews, xGitHub }: Props) {
+  const { t } = useTranslation('products')
+
+  return (
+    <tr>
+      <td>
+        <code>accept</code>
+      </td>
+      <td>string</td>
+      <td>header</td>
+      <td>
+        {hasRequiredPreviews ? (
+          <p>{t('rest.reference.preview_notice_to_change')}.</p>
+        ) : (
+          <p className="m-0">
+            Setting to
+            <code>application/vnd.github.v3+json</code> is recommended.
+            {xGitHub.previews && (
+              <a href={`#${slug}-preview-notices`} className="d-inline">
+                {xGitHub.previews.length > 1
+                  ? ` ${t('rest.reference.see_preview_notices')}`
+                  : ` ${t('rest.reference.see_preview_notice')}`}
+              </a>
+            )}
+          </p>
+        )}
+      </td>
+    </tr>
+  )
+}

components/rest/RestCodeSamples.tsx

@@ -12,25 +12,23 @@ export function RestCodeSamples({ slug, xCodeSamples }: Props) {
 
   return (
     <>
-      <h4 className="pt-3 my-4" id={`${slug}--code-samples`}>
+      <h4 id={`${slug}--code-samples`}>
         <a href={`#${slug}--code-samples`}>{`${t('rest.reference.code_samples')}`}</a>
       </h4>
-      {xCodeSamples.map((sample: xCodeSample, index: number) => {
+      {xCodeSamples.map((sample, index) => {
         const sampleElements: JSX.Element[] = []
         if (sample.lang !== 'Ruby') {
           sampleElements.push(
             sample.lang === 'JavaScript' ? (
-              <h5 key={`${sample.lang}-${index}`} className="pt-3">
+              <h5 key={`${sample.lang}-${index}`}>
                 {sample.lang} (
                 <a className="text-underline" href="https://github.com/octokit/core.js#readme">
                   @octokit/core.js
                 </a>
                 )
               </h5>
             ) : (
-              <h5 key={`${sample.lang}-${index}`} className="pt-3">
-                {sample.lang}
-              </h5>
+              <h5 key={`${sample.lang}-${index}`}>{sample.lang}</h5>
             )
           )
           sampleElements.push(

components/rest/RestParameterTable.module.scss

@@ -1,10 +1,5 @@
 .parameterTable {
-  display: table;
-  border-collapse: collapse;
-  position: relative;
-  width: 100%;
-  line-height: 1.5;
-  table-layout: auto;
+  table-layout: fixed !important;
 
   thead {
     tr {
@@ -25,6 +20,7 @@
     padding: 0.75rem 0.5rem !important;
     border: 0 !important;
     vertical-align: top;
+    width: 100%;
   }
 
   tbody {