Adding a little feedback form to the bottom of each page using GA (#3170)

rachelnabors · web-flow · commit 64c51d419f0f · 2020-08-04T17:16:25.000+01:00
diff --git a/content/community/examples.md b/content/community/examples.md
@@ -10,7 +10,7 @@ There are many example projects created by the React community. We're keeping th
 
 If you add a project, please commit to keeping it up to date with the latest versions of React.
 
-## Small Examples
+## Small Examples {#small-examples}
 
 * **[Calculator](https://github.com/ahfarmer/calculator)** Implementation of the iOS calculator built in React
 * **[Emoji Search](https://github.com/ahfarmer/emoji-search)** React app for searching emoji
@@ -20,6 +20,6 @@ If you add a project, please commit to keeping it up to date with the latest ver
 * **[Counter App](https://github.com/arnab-datta/counter-app)** A small shopping cart example
 * **[Tutorial Solutions](https://github.com/harman052/react-tutorial-solutions)** Solutions to challenges mentioned at the end of React tutorial
 
-## Complete Apps
+## Complete Apps {#complete-apps}
 
 * **[Builder Book](https://github.com/builderbook/builderbook)** Open-source web app to write and host documentation or sell books. Built with React, Material-UI, Next, Express, Mongoose, MongoDB
diff --git a/flow-typed/gatsby-plugin-google-analytics.js b/flow-typed/gatsby-plugin-google-analytics.js
@@ -0,0 +1,7 @@
+// import {trackCustomEvent} from 'gatsby-plugin-google-analytics';
+
+declare module 'gatsby-plugin-google-analytics' {
+  declare module.exports: {
+    trackCustomEvent: (...params: any) => void,
+  };
+}
diff --git a/src/components/FeedbackForm/FeedbackForm.js b/src/components/FeedbackForm/FeedbackForm.js
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * @emails react-core
+ * @flow
+ */
+
+// $FlowExpectedError
+import React, {useState} from 'react';
+import {trackCustomEvent} from 'gatsby-plugin-google-analytics';
+import {sharedStyles} from 'theme';
+
+const FeedbackForm = () => {
+  const [feedbackGiven, setFeedbackGiven] = useState(false);
+
+  if (feedbackGiven) {
+    return 'Thanks for letting us know!';
+  } else {
+    return (
+      <span>
+        'Is this page useful?'
+        <button
+          css={[sharedStyles.articleLayout.feedbackButton, {marginLeft: '6px'}]}
+          aria-label="Yes"
+          onClick={e => {
+            e.preventDefault();
+            trackCustomEvent({
+              category: 'Feedback Button',
+              action: 'feedback',
+              label: window.location.pathname,
+              value: 1,
+            });
+            setFeedbackGiven(true);
+          }}>
+          <svg
+            css={{
+              transform: 'translateY(0.1em)',
+            }}
+            focusable="false"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 81.13 89.76">
+            <path d="M22.9 6a18.57 18.57 0 002.67 8.4 25.72 25.72 0 008.65 7.66c3.86 2 8.67 7.13 13.51 11 3.86 3.11 8.57 7.11 11.54 8.45s13.59.26 14.64 1.17c1.88 1.63 1.55 9-.11 15.25-1.61 5.86-5.96 10.55-6.48 16.86-.4 4.83-2.7 4.88-10.93 4.88h-1.35c-3.82 0-8.24 2.93-12.92 3.62a68 68 0 01-9.73.5c-3.57 0-7.86-.08-13.25-.08-3.56 0-4.71-1.83-4.71-4.48h8.42a3.51 3.51 0 000-7H12.28a2.89 2.89 0 01-2.88-2.88 1.91 1.91 0 01.77-1.78h16.46a3.51 3.51 0 000-7H12.29c-3.21 0-4.84-1.83-4.84-4a6.41 6.41 0 011.17-3.78h19.06a3.5 3.5 0 100-7H9.75A3.51 3.51 0 016 42.27a3.45 3.45 0 013.75-3.48h13.11c5.61 0 7.71-3 5.71-5.52-4.43-4.74-10.84-12.62-11-18.71-.15-6.51 2.6-7.83 5.36-8.56m0-6a6.18 6.18 0 00-1.53.2c-6.69 1.77-10 6.65-9.82 14.5.08 5.09 2.99 11.18 8.52 18.09H9.74a9.52 9.52 0 00-6.23 16.9 12.52 12.52 0 00-2.07 6.84 9.64 9.64 0 003.65 7.7 7.85 7.85 0 00-1.7 5.13 8.9 8.9 0 005.3 8.13 6 6 0 00-.26 1.76c0 6.37 4.2 10.48 10.71 10.48h13.25a73.75 73.75 0 0010.6-.56 35.89 35.89 0 007.58-2.18 17.83 17.83 0 014.48-1.34h1.35c4.69 0 7.79 0 10.5-1 3.85-1.44 6-4.59 6.41-9.38.2-2.46 1.42-4.85 2.84-7.62a41.3 41.3 0 003.42-8.13 48 48 0 001.59-10.79c.1-5.13-1-8.48-3.35-10.55-2.16-1.87-4.64-1.87-9.6-1.88a46.86 46.86 0 01-6.64-.29c-1.92-.94-5.72-4-8.51-6.3l-1.58-1.28c-1.6-1.3-3.27-2.79-4.87-4.23-3.33-3-6.47-5.79-9.61-7.45a20.2 20.2 0 01-6.43-5.53 12.44 12.44 0 01-1.72-5.36 6 6 0 00-6-5.86z" />
+          </svg>
+        </button>
+        <button
+          css={[sharedStyles.articleLayout.feedbackButton, {marginLeft: '3px'}]}
+          aria-label="No"
+          onClick={e => {
+            e.preventDefault();
+            trackCustomEvent({
+              category: 'Feedback Button',
+              action: 'feedback',
+              label: window.location.pathname,
+              value: 0,
+            });
+          }}>
+          <svg
+            css={{
+              transform: 'scale(-1, -1) translateY(-.6em)',
+            }}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 81.13 89.76">
+            <path d="M22.9 6a18.57 18.57 0 002.67 8.4 25.72 25.72 0 008.65 7.66c3.86 2 8.67 7.13 13.51 11 3.86 3.11 8.57 7.11 11.54 8.45s13.59.26 14.64 1.17c1.88 1.63 1.55 9-.11 15.25-1.61 5.86-5.96 10.55-6.48 16.86-.4 4.83-2.7 4.88-10.93 4.88h-1.35c-3.82 0-8.24 2.93-12.92 3.62a68 68 0 01-9.73.5c-3.57 0-7.86-.08-13.25-.08-3.56 0-4.71-1.83-4.71-4.48h8.42a3.51 3.51 0 000-7H12.28a2.89 2.89 0 01-2.88-2.88 1.91 1.91 0 01.77-1.78h16.46a3.51 3.51 0 000-7H12.29c-3.21 0-4.84-1.83-4.84-4a6.41 6.41 0 011.17-3.78h19.06a3.5 3.5 0 100-7H9.75A3.51 3.51 0 016 42.27a3.45 3.45 0 013.75-3.48h13.11c5.61 0 7.71-3 5.71-5.52-4.43-4.74-10.84-12.62-11-18.71-.15-6.51 2.6-7.83 5.36-8.56m0-6a6.18 6.18 0 00-1.53.2c-6.69 1.77-10 6.65-9.82 14.5.08 5.09 2.99 11.18 8.52 18.09H9.74a9.52 9.52 0 00-6.23 16.9 12.52 12.52 0 00-2.07 6.84 9.64 9.64 0 003.65 7.7 7.85 7.85 0 00-1.7 5.13 8.9 8.9 0 005.3 8.13 6 6 0 00-.26 1.76c0 6.37 4.2 10.48 10.71 10.48h13.25a73.75 73.75 0 0010.6-.56 35.89 35.89 0 007.58-2.18 17.83 17.83 0 014.48-1.34h1.35c4.69 0 7.79 0 10.5-1 3.85-1.44 6-4.59 6.41-9.38.2-2.46 1.42-4.85 2.84-7.62a41.3 41.3 0 003.42-8.13 48 48 0 001.59-10.79c.1-5.13-1-8.48-3.35-10.55-2.16-1.87-4.64-1.87-9.6-1.88a46.86 46.86 0 01-6.64-.29c-1.92-.94-5.72-4-8.51-6.3l-1.58-1.28c-1.6-1.3-3.27-2.79-4.87-4.23-3.33-3-6.47-5.79-9.61-7.45a20.2 20.2 0 01-6.43-5.53 12.44 12.44 0 01-1.72-5.36 6 6 0 00-6-5.86z" />
+          </svg>
+        </button>
+      </span>
+    );
+  }
+};
+
+export default FeedbackForm;
diff --git a/src/components/FeedbackForm/index.js b/src/components/FeedbackForm/index.js
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * @emails react-core
+ */
+
+import FeedbackForm from './FeedbackForm';
+
+export default FeedbackForm;
diff --git a/src/components/MarkdownPage/MarkdownPage.js b/src/components/MarkdownPage/MarkdownPage.js
@@ -12,10 +12,12 @@ import NavigationFooter from 'templates/components/NavigationFooter';
 import React from 'react';
 import StickyResponsiveSidebar from 'components/StickyResponsiveSidebar';
 import TitleAndMetaTags from 'components/TitleAndMetaTags';
+import FeedbackForm from 'components/FeedbackForm';
 import findSectionForPath from 'utils/findSectionForPath';
 import toCommaSeparatedList from 'utils/toCommaSeparatedList';
 import {sharedStyles} from 'theme';
 import createCanonicalUrl from 'utils/createCanonicalUrl';
+import {colors} from 'theme';
 
 import type {Node} from 'types';
 
@@ -114,6 +116,16 @@ const MarkdownPage = ({
 
                 {markdownRemark.fields.path && (
                   <div css={{marginTop: 80}}>
+                    <span
+                      css={{
+                        whiteSpace: 'nowrap',
+                        paddingBottom: '1em',
+                        marginRight: '36px',
+                        display: 'inline-block',
+                        color: colors.subtle,
+                      }}>
+                      <FeedbackForm />
+                    </span>
                     <a
                       css={sharedStyles.articleLayout.editLink}
                       href={`https://github.com/reactjs/reactjs.org/tree/master/${markdownRemark.fields.path}`}>
diff --git a/src/theme.js b/src/theme.js
@@ -168,20 +168,46 @@ const sharedStyles = {
         zIndex: 2,
       },
     },
-
+    feedbackButton: {
+      border: 0,
+      background: 'none',
+      cursor: 'pointer',
+      ':focus': {
+        color: colors.text,
+        borderColor: colors.text,
+        '& svg': {
+          fill: colors.text,
+        },
+      },
+      ':hover': {
+        color: colors.text,
+        borderColor: colors.text,
+        '& svg': {
+          fill: colors.text,
+        },
+      },
+      '& svg': {
+        height: '1.5em',
+        width: '1.5em',
+        fill: colors.subtle,
+        transition: 'fill 0.2s ease',
+      },
+    },
     editLink: {
-      color: colors.subtle,
+      color: colors.lighter,
       borderColor: colors.divider,
-      transition: 'all 0.2s ease',
-      transitionPropery: 'color, border-color',
+      transition: 'color 0.2s ease, border-color 0.2s ease',
       whiteSpace: 'nowrap',
       borderBottomWidth: 1,
       borderBottomStyle: 'solid',
-
       ':hover': {
         color: colors.text,
         borderColor: colors.text,
       },
+      ':focus': {
+        color: colors.text,
+        borderColor: colors.text,
+      },
     },
   },
 
