[feedback-widget] feat: lazy load feedback widget component

www/jest-preprocess.js

@@ -1,5 +1,6 @@
 const babelOptions = {
   presets: [`babel-preset-gatsby`],
+  plugins: [`emotion`],
 }
 
 module.exports = require(`babel-jest`).createTransformer(babelOptions)

www/package.json

@@ -8,6 +8,7 @@
     "@emotion/styled": "^10.0.7",
     "@reach/skip-nav": "^0.1.1",
     "@reach/visually-hidden": "^0.1.2",
+    "@xstate/react": "^0.2.1",
     "axios": "^0.18.0",
     "bluebird": "^3.5.1",
     "dotenv": "^6.0.0",
@@ -77,6 +78,7 @@
     "slugify": "^1.3.0",
     "typography": "^1.0.0-alpha.4",
     "typography-plugin-code": "^1.0.0-alpha.0",
+    "xstate": "^4.5.0",
     "zipkin": "^0.14.2",
     "zipkin-javascript-opentracing": "^2.0.0",
     "zipkin-transport-http": "^0.14.2"

www/src/components/docsearch-content.js

@@ -1,7 +1,9 @@
 import React from "react"
+import FeedbackWidget from "./feedback-widget/lazy-feedback-widget"
 
 export default ({ children }) => (
   <main id={`reach-skip-nav`} className={`docSearch-content`}>
     {children}
+    <FeedbackWidget />
   </main>
 )

www/src/components/feedback-widget/buttons.js

@@ -0,0 +1,234 @@
+import React, { Fragment } from "react"
+import { css } from "@emotion/core"
+import styled from "@emotion/styled"
+import { keyframes } from "@emotion/core"
+import { ScreenReaderText } from "./styled-elements"
+import MdQuestionMark from "./question-mark-icon"
+import {
+  mediaQueries,
+  colors,
+  fontSizes,
+  radii,
+  shadows,
+  space,
+} from "../../utils/presets"
+
+const rotation = keyframes`
+  0% {
+    transform: translateX(${space[1]}) rotate(0deg);
+  }
+  100% {
+    transform: translateX(${space[1]}) rotate(360deg);
+  }
+`
+
+export const focusStyle = css`
+  box-shadow: 0 0 0 0.12rem ${colors.accent};
+  outline: none;
+`
+
+const buttonStyles = css`
+  -webkit-appearance: none;
+  align-items: center;
+  background: ${colors.gatsby};
+  border: none;
+  border-radius: ${radii[2]}px;
+  color: ${colors.white};
+  cursor: pointer;
+  display: flex;
+  font-size: ${fontSizes[1]};
+  padding: ${space[2]} ${space[3]};
+  transition: 0.5s;
+  z-index: 1;
+
+  svg {
+    height: ${space[4]};
+    transform: translateX(${space[1]});
+    width: ${space[4]};
+  }
+
+  &:focus {
+    ${focusStyle}
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.9;
+  }
+
+  &:hover {
+    box-shadow: 0 0 0 0.12rem ${colors.accent}88;
+  }
+`
+
+export const SubmitButton = styled(`button`)`
+  ${buttonStyles};
+
+  .submitting & {
+    svg {
+      animation: ${rotation} 1s linear infinite;
+    }
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    .submitting & {
+      svg {
+        animation: none;
+      }
+    }
+  }
+`
+
+export const CloseButton = styled(`button`)`
+  ${buttonStyles};
+  background: ${colors.white};
+  border: 1px solid ${colors.gray.border};
+  color: ${colors.gatsby};
+`
+
+export const ToggleButtonLabel = styled(`span`)`
+  align-items: center;
+  background: ${colors.white};
+  border: 1px solid ${colors.gray.border};
+  border-radius: ${radii[2]}px;
+  display: flex;
+  height: 2.5rem;
+  padding: 0 ${space[8]} 0 ${space[3]};
+  transition: 0.5s;
+  white-space: nowrap;
+  width: 100%;
+
+  ${mediaQueries.lg} {
+    box-shadow: ${shadows.floating};
+    width: auto;
+  }
+`
+
+export const ToggleButtonIcon = styled(`span`)`
+  align-items: center;
+  background: ${colors.lilac};
+  border-radius: ${radii[6]};
+  color: ${colors.white};
+  display: flex;
+  font-size: ${fontSizes[1]};
+  height: ${space[6]};
+  justify-content: center;
+  position: absolute;
+  right: ${space[3]};
+  transform: scale(1);
+  transition: 0.5s;
+  width: ${space[6]};
+
+  svg {
+    fill: ${colors.white};
+    height: ${space[3]};
+    width: ${space[3]};
+    transition: 0.5s;
+  }
+
+  ${mediaQueries.lg} {
+    .opened &,
+    .failed &,
+    .success &,
+    .submitting & {
+      &:hover {
+        svg {
+          transform: rotate(90deg);
+          fill: ${colors.accent};
+        }
+      }
+    }
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: 0;
+  }
+`
+
+export const ToggleButton = styled(`button`)`
+  align-items: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  position: relative;
+  transition: 0.6s ease;
+  width: 100%;
+  z-index: 3;
+
+  &:hover {
+    ${ToggleButtonLabel} {
+      box-shadow: 0 0 0 0.12rem ${colors.accent}88;
+    }
+  }
+
+  &:focus {
+    outline: none;
+
+    ${ToggleButtonLabel} {
+      ${focusStyle}
+    }
+  }
+
+  ${props =>
+    props.supressFocusAnimation &&
+    css`
+      ${ToggleButtonLabel} {
+        transition: 0s;
+      }
+    `}
+
+  .opened &,
+  .failed &,
+  .success &,
+  .submitting & {
+    display: none;
+  }
+
+  ${mediaQueries.lg} {
+    bottom: 0;
+    position: absolute;
+    right: 0;
+    width: auto;
+
+    .opened &,
+    .failed &,
+    .success &,
+    .submitting & {
+      display: flex;
+      transform: translate(-${space[2]}, -26rem);
+
+      ${ToggleButtonIcon} {
+        background: ${colors.white};
+        border: 1px solid ${colors.gray.border};
+        transform: scale(1.8);
+
+        svg {
+          fill: ${colors.gatsby};
+        }
+      }
+
+      &:focus {
+        ${ToggleButtonIcon} {
+          ${focusStyle};
+        }
+      }
+    }
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: 0;
+  }
+`
+
+export const OpenFeedbackWidgetButtonContent = ({ loading }) => (
+  <Fragment>
+    <ToggleButtonLabel>
+      {loading ? `Loading ...` : `Was this doc helpful to you`}
+      <ScreenReaderText>?</ScreenReaderText>
+    </ToggleButtonLabel>
+    <ToggleButtonIcon>
+      <MdQuestionMark />
+    </ToggleButtonIcon>
+  </Fragment>
+)