Support Google Sheets embeds in docs (#9861)

website/src/components/embed.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import Link from './link'
+import Button from './button'
 import { InlineCode } from './code'
 import { markdownToReact } from './util'
 
@@ -104,4 +105,23 @@ const Image = ({ src, alt, title, ...props }) => {
     )
 }
 
-export { YouTube, SoundCloud, Iframe, Image }
+const GoogleSheet = ({ id, link, height, button = 'View full table' }) => {
+    return (
+        <figure className={classes.root}>
+            <iframe
+                title={id}
+                scrolling="no"
+                className={classes.googleSheet}
+                height={height}
+                src={`https://docs.google.com/spreadsheets/d/e/${id}/pubhtml?widget=true&amp;headers=false`}
+            />
+            {link && (
+                <Button href={`https://docs.google.com/spreadsheets/d/${link}/view`}>
+                    {button}
+                </Button>
+            )}
+        </figure>
+    )
+}
+
+export { YouTube, SoundCloud, Iframe, Image, GoogleSheet }

website/src/styles/embed.module.sass

@@ -32,3 +32,7 @@
 
 .image-link
     display: block
+
+.google-sheet
+    width: 100%
+    margin-bottom: 1rem

website/src/templates/index.js

@@ -29,7 +29,7 @@ import Aside from '../components/aside'
 import Button from '../components/button'
 import Tag from '../components/tag'
 import Grid from '../components/grid'
-import { YouTube, SoundCloud, Iframe, Image } from '../components/embed'
+import { YouTube, SoundCloud, Iframe, Image, GoogleSheet } from '../components/embed'
 import Alert from '../components/alert'
 import Search from '../components/search'
 import Project from '../widgets/project'
@@ -72,6 +72,7 @@ const scopeComponents = {
     YouTube,
     SoundCloud,
     Iframe,
+    GoogleSheet,
     Abbr,
     Tag,
     Accordion,