feat(docs): API sandbox

gatsby-browser.js

@@ -1,5 +1,9 @@
+const SwaggerUI = require('swagger-ui')
+
 exports.onClientEntry = () => {
   window.addEventListener('load', () => {
     document.body.className = document.body.className.replace(/\bno-js\b/, '')
   })
 }
+
+window.SwaggerUI = SwaggerUI

package.json

@@ -73,6 +73,7 @@
     "react-helmet": "^5.2.1",
     "react-typography": "^0.16.19",
     "slugify": "^1.4.0",
+    "swagger-ui": "^3.25.0",
     "typography": "^0.16.19",
     "understory": "^1.11.0"
   },

src/__tests__/components/common/__snapshots__/swagger-sandbox.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components : Common: Swagger sandbox renders correctly 1`] = `
+<div
+  id="swaggerWrapper"
+/>
+`;

src/__tests__/components/common/swagger-sandbox.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import SwaggerUI from 'swagger-ui'
+import SwaggerSandbox from '../../../components/common/swagger-sandbox'
+
+beforeEach(() => {
+  window.SwaggerUI = SwaggerUI
+})
+
+describe('Components : Common: Swagger sandbox', () => {
+  it('renders correctly', () => {
+    const tree = renderer.create(<SwaggerSandbox />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})
+
+afterEach(() => {
+  delete window.SwaggerUI
+})

src/components/common/swagger-sandbox.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import 'swagger-ui/dist/swagger-ui.css'
+import './swagger-sandbox.scss'
+
+class SwaggerSandbox extends React.Component {
+  componentDidMount() {
+    window.SwaggerUI({
+      domNode: this.swaggerWrapper,
+      url: '/api-docs/COVID-tracking-endpoints-1.0-docs.json',
+      defaultModelExpandDepth: 10,
+      docExpansion: 'list',
+    })
+  }
+
+  render() {
+    return (
+      <div
+        ref={ref => {
+          this.swaggerWrapper = ref
+        }}
+        id="swaggerWrapper"
+      />
+    )
+  }
+}
+
+export default SwaggerSandbox

src/components/common/swagger-sandbox.scss

@@ -0,0 +1,114 @@
+@import '../../scss/colors.module.scss';
+@import '../../scss/breakpoints.module.scss';
+
+#swaggerWrapper {
+  .swagger-ui {
+    pre.microlight {
+      line-height: 1rem;
+    }
+
+    .wrapper {
+      padding: 0px;
+    }
+
+    .download-contents {
+      font-size: 0.7rem;
+      line-height: 1.2rem;
+    }
+
+    .model {
+      border:0px;
+
+      td, tr {
+        border-top: none;
+        border-bottom: none;
+        padding-top:20px;
+        padding-bottom:20px;
+      }
+
+      tbody tr {
+        border-top:1px solid rgb(200, 200, 200);
+      }
+    }
+
+    table, th, td {
+      border-color: rgb(175, 175, 175);
+      border-left: none;
+      border-right: none;
+    }
+
+    td {
+      font-size: 0.8rem;
+    }
+
+    tr {
+      line-height: 1.5rem;
+    }
+
+    ul {
+      margin: auto;
+    }
+
+    .url {
+      display: none;
+    }
+
+    .scheme-container {
+      box-shadow: none;
+      padding-top: 0px;
+      margin-top: 0px;
+    }
+
+    select.content-type {
+      border-color: $color-plum-600;
+    }
+
+    .opblock-title span:after,
+    .opblock-summary-method {
+      background-color: $color-plum-600;
+    }
+
+    .btn.execute {
+      background-color: $color-plum-600;
+      border-color: $color-plum-600;
+    }
+
+    .btn.execute:active,
+    .btn.execute:hover {
+      background-color: $color-plum-700;
+    }
+
+    .response-control-media-type__accept-message,
+    .model .prop-type {
+      color: $color-plum-600;
+    }
+
+    .opblock-summary,
+    .opblock-get {
+      background-color: $color-plum-200;
+      border-color: $color-plum-300;
+      border-radius: 2px;
+    }
+
+    @media (max-width: $viewport-ms) {
+      .responses-table,
+      .model {
+        table-layout: fixed;
+      }
+      .col_header.response-col_description {
+        width: 55%;
+      }
+
+      .model td {
+        display: block;
+        padding: 0px;
+        max-width: 100%;
+      }
+
+      .model td:nth-child(2) {
+        margin-bottom: 30px;
+        border-bottom: 0px;
+      }
+    }
+  }
+}

src/pages/data/api-sandbox.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+import SwaggerSandbox from '../../components/common/swagger-sandbox'
+import Layout from '../../components/layout'
+
+export default ({ data }) => (
+  <Layout
+    title="API Sandbox"
+    navigation={data.allContentfulNavigationGroup.edges[0].node.pages}
+  >
+    Below, you can explore each of our endpoints, try out API requests, and
+    learn about our schema.
+    <SwaggerSandbox />
+  </Layout>
+)
+
+export const query = graphql`
+  query {
+    allContentfulNavigationGroup(filter: { slug: { eq: "data" } }) {
+      edges {
+        node {
+          pages {
+            ... on ContentfulPage {
+              title
+              link: slug
+            }
+            ... on ContentfulNavigationLink {
+              title
+              link: url
+            }
+          }
+        }
+      }
+    }
+  }
+`