Revert "DOP-4154/DOP-4155: Implement 5-star rating for feedback widge…

…t" (#968)

src/components/Widgets/FeedbackWidget/FeedbackCard.js

@@ -3,12 +3,9 @@ import styled from '@emotion/styled';
 import LeafygreenCard from '@leafygreen-ui/card';
 import { feedbackId } from '../FeedbackWidget/FeedbackForm';
 import { theme } from '../../../../src/theme/docsTheme';
-import useScreenSize from '../../../hooks/useScreenSize';
-import useStickyTopValues from '../../../hooks/useStickyTopValues';
 import ProgressBar from './components/PageIndicators';
 import CloseButton from './components/CloseButton';
 import { useFeedbackContext } from './context';
-import useNoScroll from './hooks/useNoScroll';
 
 const FloatingContainer = styled.div`
   position: fixed;
@@ -22,46 +19,39 @@ const FloatingContainer = styled.div`
   @media ${theme.screenSize.largeAndUp} {
     bottom: 40px;
   }
-
-  @media ${theme.screenSize.upToSmall} {
-    right: 0;
-    top: ${({ top }) => top};
-  }
 `;
 
 const Card = styled(LeafygreenCard)`
   /* Card Size */
   width: 234px;
-  display: flex;
-  flex-direction: column;
-  position: relative;
+  height: 340px;
+  align-items: center;
+  padding: 0;
+`;
 
-  @media ${theme.screenSize.upToLarge} {
-    width: 262px;
-  }
+const CardHeader = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 5px;
+  margin-right: 10px;
+`;
 
-  @media ${theme.screenSize.upToSmall} {
-    height: calc(100vh - ${({ top }) => top});
-    width: 100vw;
-    border-radius: 0;
-    padding-top: 40px;
-  }
+const Content = styled.div`
+  margin: 0px 24px;
 `;
 
 const FeedbackCard = ({ isOpen, children }) => {
   const { abandon } = useFeedbackContext();
-  // Ensure FeedbackCard can be fullscreen size
-  const { isMobile } = useScreenSize();
-  const { topSmall } = useStickyTopValues();
-  useNoScroll(isMobile);
 
   return (
     isOpen && (
-      <FloatingContainer top={topSmall} id={feedbackId}>
-        <Card top={topSmall}>
-          <CloseButton onClick={() => abandon()} />
-          <ProgressBar />
-          <div>{children}</div>
+      <FloatingContainer id={feedbackId}>
+        <Card>
+          <CardHeader>
+            <ProgressBar />
+            <CloseButton onClick={() => abandon()} />
+          </CardHeader>
+          <Content>{children}</Content>
         </Card>
       </FloatingContainer>
     )

src/components/Widgets/FeedbackWidget/FeedbackForm.js

@@ -1,30 +1,41 @@
 import React from 'react';
 import Loadable from '@loadable/component';
+import useScreenSize from '../../../hooks/useScreenSize';
 import { useFeedbackContext } from './context';
+import FeedbackFullScreen from './FeedbackFullScreen';
 import FeedbackCard from './FeedbackCard';
-import RatingView from './views/RatingView';
+import SentimentView from './views/SentimentView';
 import SubmittedView from './views/SubmittedView';
 const CommentView = Loadable(() => import('../FeedbackWidget/views/CommentView'));
 
 export const FeedbackContent = ({ view }) => {
   const View = {
-    rating: RatingView,
+    sentiment: SentimentView,
     comment: CommentView,
     submitted: SubmittedView,
   }[view];
   return <View className={`view-${view}`} />;
 };
 
 const FeedbackForm = () => {
+  const { isMobile } = useScreenSize();
   const { view } = useFeedbackContext();
   const isOpen = view !== 'waiting';
+  const displayAs = isMobile ? 'fullscreen' : 'floating';
+
+  const Container = {
+    // If desktop or tablet screen, render a floating card
+    floating: FeedbackCard,
+    // If mini screen, render a full screen app
+    fullscreen: FeedbackFullScreen,
+  }[displayAs];
 
   return (
     isOpen && (
       <div className={fwFormId} hidden={!isOpen}>
-        <FeedbackCard isOpen={isOpen}>
+        <Container isOpen={isOpen}>
           <FeedbackContent view={view} />
-        </FeedbackCard>
+        </Container>
       </div>
     )
   );

src/components/Widgets/FeedbackWidget/FeedbackFullScreen.js

@@ -0,0 +1,61 @@
+import React, { useContext } from 'react';
+import styled from '@emotion/styled';
+import { HeaderContext } from '../../Header/header-context';
+import useNoScroll from './hooks/useNoScroll';
+import { useFeedbackContext } from './context';
+import ProgressBar from './components/PageIndicators';
+import CloseButton from './components/CloseButton';
+
+const FullScreen = styled.div(
+  (props) => `
+    background: white;
+    height: 100vh;
+    left: 0;
+    overflow-y: scroll;
+    padding-top: ${props.totalHeaderHeight};
+    position: fixed;
+    top: 0;
+    width: 100vw;
+    z-index: 1;
+  `
+);
+
+const Header = styled.div`
+  padding: 8px;
+  margin-bottom: 20px;
+  margin-top: 25px;
+  position: relative;
+  display: grid;
+  grid-template-columns: 7fr 1fr;
+  justify-content: center;
+  > span {
+    padding-left: 116px !important;
+  }
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-width: 280px;
+  margin: 0 auto;
+  padding: 0 56px;
+`;
+
+const FeedbackFullScreen = ({ isOpen, children }) => {
+  const { abandon } = useFeedbackContext();
+  const { totalHeaderHeight } = useContext(HeaderContext);
+  useNoScroll(isOpen);
+  return (
+    isOpen && (
+      <FullScreen totalHeaderHeight={totalHeaderHeight}>
+        <Header>
+          <ProgressBar />
+          <CloseButton size="xlarge" onClick={abandon} />
+        </Header>
+        <Content>{children}</Content>
+      </FullScreen>
+    )
+  );
+};
+
+export default FeedbackFullScreen;

src/components/Widgets/FeedbackWidget/FloatingContainer.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import LeafygreenCard from '@leafygreen-ui/card';
+import styled from '@emotion/styled';
+import { feedbackId } from '../FeedbackWidget/FeedbackForm';
+import ProgressBar from './components/PageIndicators';
+import CloseButton from './components/CloseButton';
+import { useFeedbackContext } from './context';
+
+const feedbackStyle = css`
+  z-index: 14;
+`;
+
+export default function FloatingContainer({ isOpen, children }) {
+  const { abandon } = useFeedbackContext();
+
+  return (
+    isOpen && (
+      <Floating id={feedbackId} css={feedbackStyle}>
+        <Card>
+          <CardHeader>
+            <ProgressBar />
+            <CloseButton onClick={() => abandon()} />
+          </CardHeader>
+          <Content>{children}</Content>
+        </Card>
+      </Floating>
+    )
+  );
+}
+
+const Floating = styled.div`
+  position: fixed;
+  bottom: 40px;
+  right: 16px;
+  z-index: 20;
+`;
+
+const Card = styled(LeafygreenCard)`
+  /* Card Size */
+  width: 234px;
+  min-height: 320px;
+  max-height: 320px;
+  align-items: center;
+`;
+const CardHeader = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 5px;
+  margin-right: 10px;
+`;
+const Content = styled.div`
+  margin: 0px 24px;
+`;

src/components/Widgets/FeedbackWidget/components/CloseButton.js

@@ -3,19 +3,9 @@ import { cx, css } from '@leafygreen-ui/emotion';
 import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
 import { palette } from '@leafygreen-ui/palette';
-import { theme } from '../../../../theme/docsTheme';
 
 const buttonStyles = css`
-  position: absolute;
-  top: ${theme.size.default};
-  right: ${theme.size.default};
-  height: ${theme.size.default};
-  width: ${theme.size.default};
-
-  @media ${theme.screenSize.upToSmall} {
-    top: ${theme.size.large};
-    right: ${theme.size.medium};
-  }
+  margin-right: 8px;
 `;
 
 const CloseButton = ({ onClick, size = 'default', ...props }) => {

src/components/Widgets/FeedbackWidget/components/Emoji.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { theme } from '../../../../theme/docsTheme';
+
+const StyledEmoji = styled('span')`
+  font-size: ${theme.fontSize.h2};
+`;
+
+const getEmoji = (sentiment) => {
+  switch (sentiment) {
+    case 'Positive':
+      return '🙂';
+    case 'Negative':
+      return '😞';
+    case 'Suggestion':
+      return '💡';
+    default:
+      return '💡';
+  }
+};
+
+const Emoji = ({ sentiment }) => {
+  const emoji = getEmoji(sentiment);
+  return <StyledEmoji>{emoji}</StyledEmoji>;
+};
+
+export default Emoji;

src/components/Widgets/FeedbackWidget/components/PageIndicators.js

@@ -1,25 +1,29 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { palette } from '@leafygreen-ui/palette';
-import { useFeedbackContext } from '../context';
 import { theme } from '../../../../theme/docsTheme';
+import { useFeedbackContext } from '../context';
 
 //styling for individual dots in the progress bar
 const Dot = styled('span')`
-  height: ${theme.size.tiny};
-  width: ${theme.size.tiny};
-  background-color: ${(props) => (props.isActive ? `${palette.green.base}` : `${palette.gray.light2}`)};
+  height: 4px;
+  width: 4px;
+  background-color: ${(props) => (props.isActive ? `${palette.green.dark1}` : `${palette.gray.light2}`)};
   border-radius: 50%;
   display: inline-block;
+  margin-right: 3px;
 `;
 
 const DotSpan = styled('span')`
-  display: flex;
-  gap: ${theme.size.tiny};
+  padding-right: 58px;
+  @media ${theme.screenSize.upToSmall} {
+    padding-rigth: 60px;
+  }
 `;
 
 const StyledBar = styled('span')`
-  align-self: center;
+  text-align: center !important;
+  margin-bottom: 5px;
 `;
 
 const ProgressBar = () => {

src/components/Widgets/FeedbackWidget/components/ScreenshotButton.js

@@ -5,11 +5,11 @@ import { withPrefix } from 'gatsby';
 import Button from '@leafygreen-ui/button';
 import Icon from '@leafygreen-ui/icon';
 import Portal from '@leafygreen-ui/portal';
+import Tooltip from '@leafygreen-ui/tooltip';
 import { useFeedbackContext } from '../context';
 import { feedbackId } from '../FeedbackForm';
 import { isBrowser } from '../../../../utils/is-browser';
 import useNoScroll from '../hooks/useNoScroll';
-import { theme } from '../../../../theme/docsTheme';
 
 const HIGHLIGHT_BORDER_SIZE = 5;
 
@@ -72,16 +72,15 @@ const exitButtonStyle = (position, top, left) => css`
 
 //styling for entire screenshot icon selector
 const ScreenshotSelect = styled(Button)`
-  display: block;
   height: 28px;
-  margin: 0 auto ${theme.size.small} 0;
   z-index: 5;
-  width: 158px !important;
+  width: 38px !important;
+  align-text: center;
 `;
 
 const ScreenshotButton = ({ size = 'default', ...props }) => {
   const { setScreenshotTaken } = useFeedbackContext();
-  const label = 'Take a screenshot';
+  const label = 'Take a Screenshot';
   const [isScreenshotButtonClicked, setIsScreenshotButtonClicked] = useState(false);
   const [currElemState, setCurrElemState] = useState(null);
 
@@ -320,13 +319,21 @@ const ScreenshotButton = ({ size = 'default', ...props }) => {
         </Portal>
       )}
 
-      <ScreenshotSelect
-        onClick={takeNewScreenshot}
-        leftGlyph={<img src={withPrefix('assets/screenshoticon.svg')} alt="Screenshot Button" />}
-        {...props}
+      <Tooltip
+        align="bottom"
+        justify="middle"
+        triggerEvent="hover"
+        enabled={true}
+        darkMode={false}
+        trigger={
+          <ScreenshotSelect onClick={takeNewScreenshot} {...props}>
+            <img src={withPrefix('assets/screenshoticon.svg')} alt="Screenshot Button" />
+          </ScreenshotSelect>
+        }
+        popoverZIndex={15}
       >
         {label}
-      </ScreenshotSelect>
+      </Tooltip>
     </>
   );
 };