Add FeedbackForm component to DocItemFooter

docs/src/components/FeedbackForm/FeedbackForm.module.css

@@ -0,0 +1,57 @@
+.submitMessage{
+  @apply mt-5 mb-10 text-seriousBlack;
+}
+
+.feedbackForm {
+  @apply mb-5 text-seriousBlack;
+}
+
+.feedbackForm p {
+  @apply text-lg;
+}
+
+.submit {
+  @apply font-bold float-right py-1 px-3 mx-1 rounded-lg;
+}
+
+.submit:hover {
+  @apply bg-whiteIce;
+}
+
+.feedbackForm label {
+  @apply pr-2;
+}
+
+.formText {
+  @apply w-full p-4 rounded-md shadow-lg my-4;
+}
+
+.formRadio {
+  @apply  my-5 text-seriousBlack;
+}
+
+.formRadio label + label {
+  @apply cursor-pointer relative;
+}
+
+.formRadio input[type='radio'] {
+  @apply hidden absolute;
+}
+
+.formRadio input[type='radio'] + span {
+  @apply text-gray-400 p-2 rounded-full;
+  transition: all 0.4s;
+  -webkit-transition: all 0.4s;
+}
+
+.yes input[type='radio']:checked + span {
+  @apply text-blue-600;
+}
+
+.no input[type='radio']:checked + span {
+  @apply text-red-600;
+}
+
+.formRadio input[type='radio']:hover + span {
+  @apply opacity-60;
+}

docs/src/components/FeedbackForm/FeedbackForm.tsx

@@ -0,0 +1,160 @@
+import React, { useState } from 'react'
+import { render } from 'react-dom'
+import styles from './FeedbackForm.module.css'
+
+class FeedbackForm extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      message: '',
+      helpful: '',
+      showForm: false,
+      sendingMessage: false,
+      messageSent: false,
+      messageError: false,
+    }
+  }
+
+  handleChange = (event) => {
+    this.setState({ [event.target.name]: event.target.value })
+    this.setState({
+      showForm: true,
+    })
+  }
+
+  handleSubmit = async (e) => {
+    e.preventDefault()
+    this.setState({
+      sendingMessage: true,
+    })
+    this.sendMessage()
+  }
+
+  handleReturnButton = () => {
+    this.setState({
+      showForm: false,
+      messageSent: false,
+      messageError: false,
+    })
+  }
+
+  sendMessage = () => {
+    const apiUrl =
+      'https://hooks.zapier.com/hooks/catch/10752880/b1pm58m/?message=' +
+      this.state.message +
+      '&timestamp=' +
+      new Date().toLocaleString() +
+      '&url=' +
+      document.URL +
+      '&helpful=' +
+      this.state.helpful
+
+    async function myFetch() {
+      await fetch(apiUrl, {
+        method: 'POST',
+      })
+    }
+
+    myFetch()
+      .then(() => {
+        this.setState({
+          messageSent: true,
+          sendingMessage: false,
+          message: '',
+          helpful: '',
+        })
+      })
+      .catch((err) => {
+        console.log(err)
+        this.setState({
+          messageError: true,
+          sendingMessage: false,
+        })
+      })
+  }
+
+  returnButton = () => (
+    <button className={styles.submit} onClick={this.handleReturnButton}>
+      Return
+    </button>
+  )
+
+  render() {
+    if (this.state.sendingMessage) {
+      return <div>Sending...</div>
+    }
+
+    if (this.state.messageSent) {
+      return (
+        <React.Fragment>
+          <div className={styles.submitMessage}>
+            <h3>Thank you!</h3>
+            <p>We appreciate your feedback.</p>
+            {this.returnButton()}
+          </div>
+        </React.Fragment>
+      )
+    }
+
+    if (this.state.messageError) {
+      return (
+        <React.Fragment>
+          <div className={styles.submitMessage}>
+            <h3>Sorry, an error ocurred.</h3>
+            {this.returnButton()}
+          </div>
+        </React.Fragment>
+      )
+    }
+
+    return (
+      <React.Fragment>
+        <div className={styles.formRadio}>
+          <label>Was this page helpful?</label>
+          <label className={styles.yes}>
+            <input
+              id="yes"
+              type="radio"
+              name="helpful"
+              value="Yes"
+              checked={this.state.helpful === 'Yes'}
+              onChange={this.handleChange}
+            />
+            <span className="fa fa-thumbs-up" aria-hidden="true"></span>
+          </label>
+          <label className={styles.no}>
+            <input
+              type="radio"
+              name="helpful"
+              value="No"
+              checked={this.state.helpful === 'No'}
+              onChange={this.handleChange}
+            />
+            <span className="fa fa-thumbs-down" aria-hidden="true"></span>
+          </label>
+        </div>
+
+        {this.state.showForm === true && (
+          <div className={styles.feedbackForm}>
+            <p>Additional feedback</p>
+            <form onSubmit={this.handleSubmit}>
+              <textarea
+                className={styles.formText}
+                name="message"
+                placeholder="How we can we improve your documentation and learning experience?"
+                value={this.state.message}
+                onChange={this.handleChange}
+              />
+              <div>
+                <button className={styles.submit}>Skip this</button>
+                <button className={styles.submit}>Submit</button>
+              </div>
+            </form>
+          </div>
+        )}
+      </React.Fragment>
+    )
+  }
+}
+
+export default FeedbackForm

docs/src/theme/DocItemFooter/index.js

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import clsx from 'clsx';
+import LastUpdated from '@theme/LastUpdated';
+import EditThisPage from '@theme/EditThisPage';
+import TagsListInline from '@theme/TagsListInline';
+import styles from './styles.module.css';
+import { ThemeClassNames } from '@docusaurus/theme-common';
+import FeedbackForm from '../../components/FeedbackForm/FeedbackForm'
+
+function TagsRow(props) {
+  return (
+    <div
+      className={clsx(
+        ThemeClassNames.docs.docFooterTagsRow,
+        'row margin-bottom--sm',
+      )}>
+      <div className="col">
+        <TagsListInline {...props} />
+      </div>
+    </div>
+  );
+}
+
+function EditMetaRow({
+  editUrl,
+  lastUpdatedAt,
+  lastUpdatedBy,
+  formattedLastUpdatedAt,
+}) {
+  return (
+    <>
+      <FeedbackForm />
+      <div className={clsx(ThemeClassNames.docs.docFooterEditMetaRow, 'row')}>
+        <div className="col">{editUrl && <EditThisPage editUrl={editUrl} />}</div>
+
+        <div className={clsx('col', styles.lastUpdated)}>
+          {(lastUpdatedAt || lastUpdatedBy) && (
+            <LastUpdated
+              lastUpdatedAt={lastUpdatedAt}
+              formattedLastUpdatedAt={formattedLastUpdatedAt}
+              lastUpdatedBy={lastUpdatedBy}
+            />
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default function DocItemFooter(props) {
+  const { content: DocContent } = props;
+  const { metadata } = DocContent;
+  const { editUrl, lastUpdatedAt, formattedLastUpdatedAt, lastUpdatedBy, tags } =
+    metadata;
+  const canDisplayTagsRow = tags.length > 0;
+  const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
+  const canDisplayFooter = canDisplayTagsRow || canDisplayEditMetaRow;
+
+  if (!canDisplayFooter) {
+    return null;
+  }
+
+  return (
+    <footer
+      className={clsx(ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg')}>
+      {canDisplayTagsRow && <TagsRow tags={tags} />}
+      {canDisplayEditMetaRow && (
+        <EditMetaRow
+          editUrl={editUrl}
+          lastUpdatedAt={lastUpdatedAt}
+          lastUpdatedBy={lastUpdatedBy}
+          formattedLastUpdatedAt={formattedLastUpdatedAt}
+        />
+      )}
+    </footer>
+  );
+}

docs/src/theme/DocItemFooter/styles.module.css

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.lastUpdated {
+  margin-top: 0.2rem;
+  font-style: italic;
+  font-size: smaller;
+}
+
+@media (min-width: 997px) {
+  .lastUpdated {
+    text-align: right;
+  }
+}