Docs Feedback widget (#13550)

* initial feedback widget integration

* update widget with greg's fabulous styles + state

* add emotion plugin to jest-preprocess

* improve focus management in screens

* remove widget from features page

* Use design tokens (1/2)

There’s more to do, but this is a start…

- remove `font-family: sans-serif` along the way
- remove components/feedback-widget/presets in favor of utils/presets.breakpoints

* fix: height of widget

* Use design tokens (2/2)

- chose to reduce the border around the „emoji toggle buttons“ from 3 to 1px
- add horizontal margin for screens below desktop/lg

* Fix max-width, overlapping navigation button for small screens

* Swap `breakpoints` -> `mediaQueries

Ref. #13388

* fix(www): improve feedback-widget toggle button and hover state (#13923)

* fix focus style in Safari

* fix React submit issue for keyboard entry

* remove unused code

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",
@@ -78,6 +79,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/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,217 @@
+import { css } from "@emotion/core"
+import styled from "@emotion/styled"
+import { keyframes } from "@emotion/core"
+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`
+  outline: 2px solid ${colors.accent};
+  outline-offset: -2px;
+`
+
+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[8]};
+  justify-content: center;
+  position: absolute;
+  right: ${space[1]};
+  transform: scale(0.6);
+  transition: 0.5s;
+  width: ${space[8]};
+
+  svg {
+    fill: ${colors.white};
+    height: ${space[5]};
+    width: ${space[5]};
+    transition: 0.5s;
+  }
+
+  ${mediaQueries.lg} {
+    .opened &,
+    .failed &,
+    .success &,
+    .submitting & {
+      svg {
+        height: ${space[6]};
+        width: ${space[6]};
+      }
+
+      &: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;
+  padding: 0;
+  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}
+    }
+  }
+
+  .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);
+
+        svg {
+          fill: ${colors.gatsby};
+        }
+      }
+
+      &:focus {
+        ${ToggleButtonIcon} {
+          ${focusStyle};
+        }
+      }
+    }
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: 0;
+  }
+`