Merge pull request github#16164 from github/repo-sync

repo sync

Author: Octomerger

components/lib/events.ts

@@ -245,6 +245,15 @@ function initClipboardEvent() {
   })
 }
 
+function initCopyButtonEvent() {
+  document.documentElement.addEventListener('click', (evt) => {
+    const target = evt.target as HTMLElement
+    const button = target.closest('.js-btn-copy') as HTMLButtonElement
+    if (!button) return
+    sendEvent({ type: EventType.navigate, navigate_label: 'copy icon button' })
+  })
+}
+
 function initLinkEvent() {
   document.documentElement.addEventListener('click', (evt) => {
     const target = evt.target as HTMLElement
@@ -267,6 +276,7 @@ export default function initializeEvents() {
   initPageAndExitEvent() // must come first
   initLinkEvent()
   initClipboardEvent()
+  initCopyButtonEvent()
   initPrintEvent()
   // survey event in ./survey.js
   // experiment event in ./experiment.js

components/rest/CodeBlock.tsx

@@ -1,24 +1,62 @@
 import cx from 'classnames'
+import { CheckIcon, CopyIcon } from '@primer/octicons-react'
+import { Tooltip } from '@primer/react'
+
+import useClipboard from 'components/hooks/useClipboard'
 
 import styles from './CodeBlock.module.scss'
 
 type Props = {
   verb?: string
+  // Only Code samples should have a copy icon - if there's a headingLang it's a code sample
+  headingLang?: string
   codeBlock: string
   highlight?: string
 }
 
-export function CodeBlock({ verb, codeBlock, highlight }: Props) {
+export function CodeBlock({ verb, headingLang, codeBlock, highlight }: Props) {
+  const [isCopied, setCopied] = useClipboard(codeBlock, {
+    successDuration: 1400,
+  })
+
   return (
-    <pre className={cx(styles.methodCodeBlock, 'rounded-1 border')} data-highlight={highlight}>
-      <code>
-        {verb && (
-          <span className="color-bg-accent-emphasis color-fg-on-emphasis rounded-1 text-uppercase">
-            {verb}
-          </span>
-        )}{' '}
-        {codeBlock}
-      </code>
-    </pre>
+    <div className="code-extra">
+      {headingLang && (
+        <header className="d-flex flex-justify-between flex-items-center p-2 text-small rounded-top-1 border">
+          {headingLang === 'JavaScript' ? (
+            <span>
+              {headingLang} (
+              <a className="text-underline" href="https://github.com/octokit/core.js#readme">
+                @octokit/core.js
+              </a>
+              )
+            </span>
+          ) : (
+            `${headingLang}`
+          )}
+          <Tooltip direction="w" aria-label={isCopied ? 'Copied!' : 'Copy to clipboard'}>
+            <button className="js-btn-copy btn-octicon" onClick={() => setCopied()}>
+              {isCopied ? <CheckIcon /> : <CopyIcon />}
+            </button>
+          </Tooltip>
+        </header>
+      )}
+      <pre
+        className={cx(
+          styles.methodCodeBlock,
+          'd-flex flex-justify-between flex-items-center rounded-1 border'
+        )}
+        data-highlight={highlight}
+      >
+        <code>
+          {verb && (
+            <span className="color-bg-accent-emphasis color-fg-on-emphasis rounded-1 text-uppercase">
+              {verb}
+            </span>
+          )}{' '}
+          {codeBlock}
+        </code>
+      </pre>
+    </div>
   )
 }

components/rest/RestCodeSamples.tsx

@@ -18,22 +18,10 @@ export function RestCodeSamples({ slug, xCodeSamples }: Props) {
       {xCodeSamples.map((sample, index) => {
         const sampleElements: JSX.Element[] = []
         if (sample.lang !== 'Ruby') {
-          sampleElements.push(
-            sample.lang === 'JavaScript' ? (
-              <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}`}>{sample.lang}</h5>
-            )
-          )
           sampleElements.push(
             <CodeBlock
               key={sample.lang + index}
+              headingLang={sample.lang}
               codeBlock={sample.source}
               highlight={sample.lang === 'JavaScript' ? 'javascript' : 'curl'}
             ></CodeBlock>

contributing/content-style-guide.md

@@ -322,6 +322,7 @@ Take care to distinguish between product names and product elements. For more in
 | Product | Element |
 | --- | --- |
 | GitHub Actions | an action |
+| GitHub Codespaces | a codespace |
 | GitHub Packages | a package |
 | GitHub Pages | a GitHub Pages site |
 
@@ -594,7 +595,7 @@ Avoid ending a sentence with a preposition unless the rewritten sentence would s
 
 ### Product names
 
-See the “Product names” section of this guide.
+See the “[Product names](#product-names)” section of this guide.
 
 ### Terms to use or avoid
 

data/ui.yml

@@ -90,6 +90,7 @@ contribution_cta:
 products:
   graphql:
     reference:
+      implements: Implements
       fields: Fields
       arguments: Arguments
       name: Name