feedback component (#2839)

* push up draft for feedback * Taking an approach with Question component * Add new files * clean up code * more cleanup * add outline for focus * move button down and take out onclickOutside * add successfull * add auto close for layer * update yarn * Update aries-site/src/components/feedback/Feedback.js Co-authored-by: Taylor Seamans <[email protected]> * Update aries-site/src/components/feedback/Feedback.js Co-authored-by: Taylor Seamans <[email protected]> * Update aries-site/src/components/feedback/Feedback.js Co-authored-by: Taylor Seamans <[email protected]> * Update aries-site/src/components/feedback/Feedback.js Co-authored-by: Taylor Seamans <[email protected]> * fix typo * fix heading size * fix heading size * Update aries-site/src/components/feedback/Feedback.js Co-authored-by: Jessica Filben <[email protected]> * Update aries-site/src/components/feedback/Feedback.js Co-authored-by: Jessica Filben <[email protected]> * address feedhack * remove onSubmit * update yarn * Update aries-site/src/components/feedback/Feedback.js Co-authored-by: Matthew Glissmann <[email protected]> * Update aries-site/src/components/feedback/Question.js Co-authored-by: Matthew Glissmann <[email protected]> * add theme values * fix error * add Text * reorganized code moved alot of styles to theme * add layer props * update margin * add annoucment to text * take out layer props * clean code to have one return * breakpoint not needed * Update Question.js fix typo * another approach to submit * another approach to submit * update yarn * Update aries-site/src/components/feedback/StarRating.js Co-authored-by: Matthew Glissmann <[email protected]> * Update aries-site/src/components/feedback/StarRating.js Co-authored-by: Matthew Glissmann <[email protected]> * Update aries-site/src/components/feedback/Question.js Co-authored-by: Matthew Glissmann <[email protected]> * Update aries-site/src/components/feedback/Feedback.js Co-authored-by: Matthew Glissmann <[email protected]> * change z index * fix pad * updaate yarn * fix error * clean up messages * change wording * add announcement * test out annouce * update yar * clean files * take out unused import * add help text * Update aries-site/src/layouts/main/Layout.js Co-authored-by: Taylor Seamans <[email protected]> * Update aries-site/src/layouts/main/Layout.js Co-authored-by: Taylor Seamans <[email protected]> * Update aries-site/src/layouts/main/Layout.js Co-authored-by: Taylor Seamans <[email protected]> * Update aries-site/src/themes/aries.js Co-authored-by: Taylor Seamans <[email protected]> * Update aries-site/src/layouts/main/Layout.js Co-authored-by: Taylor Seamans <[email protected]> * address feedback * Update aries-site/src/layouts/main/Layout.js Co-authored-by: Taylor Seamans <[email protected]> * address feedback * address feedback * address feedback * add closeButton to theme * take out unused text * change theme * add api calls * clean up api calls * add prop type * yarn * clean up code * clean up code * fix submit button * address feedback from Mike * address feedback from Mike * address feedback from Mike * Update aries-site/src/layouts/main/Layout.js Co-authored-by: Mike Kingdom <[email protected]> * address feedback from Mike * Update aries-site/.env.local Co-authored-by: Taylor Seamans <[email protected]> * Update aries-site/src/layouts/main/Layout.js Co-authored-by: Taylor Seamans <[email protected]> * Update aries-site/src/components/feedback/Feedback.js Co-authored-by: Taylor Seamans <[email protected]> * fix pad * Update aries-site/src/themes/aries.js Co-authored-by: Matthew Glissmann <[email protected]> * Update aries-site/src/themes/aries.js Co-authored-by: Matthew Glissmann <[email protected]> * fix Matts feedback * add comment * fix Matts feedback * ignore .env * Delete .env.local * Update .gitignore Co-authored-by: Brittany Archibeque <[email protected]> Co-authored-by: Taylor Seamans <[email protected]> Co-authored-by: Jessica Filben <[email protected]> Co-authored-by: Matthew Glissmann <[email protected]> Co-authored-by: Brittany Archibeque <[email protected]> Co-authored-by: Mike Kingdom <[email protected]>
grommet · Oct 7, 2022 · ad86817 · ad86817
1 parent 5fcc18b
commit ad86817
Show file tree

Hide file tree

Showing 11 changed files with 417 additions and 9 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,6 +21,7 @@ yarn-error.log*
 
 # misc
 .env
+.env.*
 .tmp
 report*
 .DS_Store
diff --git a/aries-site/src/components/feedback/Feedback.js b/aries-site/src/components/feedback/Feedback.js
@@ -0,0 +1,137 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { ThemeContext } from 'styled-components';
+import PropTypes from 'prop-types';
+import {
+  AnnounceContext,
+  Box,
+  Button,
+  Form,
+  Heading,
+  Layer,
+  Text,
+  ResponsiveContext,
+} from 'grommet';
+import { FormClose } from 'grommet-icons';
+
+const Announcer = ({ announce, message, mode, role }) => {
+  const theme = useContext(ThemeContext);
+  announce(message, mode);
+  return (
+    <Text role={role} aria-live={mode} {...theme?.feedback?.success}>
+      {message}
+    </Text>
+  );
+};
+
+const AnnounceContextComponent = props => (
+  <AnnounceContext.Consumer>
+    {announce => <Announcer announce={announce} {...props} />}
+  </AnnounceContext.Consumer>
+);
+
+export const Feedback = ({
+  children,
+  layerProps,
+  messages,
+  modal,
+  onClose,
+  onSubmit,
+  show,
+  title,
+}) => {
+  const theme = useContext(ThemeContext);
+  const breakpoint = useContext(ResponsiveContext);
+  // tracks if feedback has successfully been submitted
+  const [successfulSubmit, setSuccessfulSubmit] = useState(false);
+
+  useEffect(() => {
+    if (show) setSuccessfulSubmit(false);
+  }, [show]);
+
+  let footerContent;
+  if (!successfulSubmit) {
+    footerContent = (
+      <Box {...theme?.feedback?.footer}>
+        <Button onClick={onClose} label={messages?.cancel || 'Cancel'} />
+        <Button label={messages?.submit || 'Submit'} primary type="submit" />
+      </Box>
+    );
+  } else
+    footerContent = (
+      <Box {...theme?.feedback?.footer}>
+        <AnnounceContextComponent
+          mode="assertive"
+          role="alert"
+          message={messages?.successful || 'Thank you!'}
+        />
+      </Box>
+    );
+
+  let content = (
+    <Box {...theme?.feedback?.container}>
+      <FeedbackHeader title={title}>
+        {modal && (
+          <Button
+            onClick={onClose}
+            icon={<FormClose />}
+            autoFocus
+            {...theme?.feedback?.closeButton}
+          />
+        )}
+      </FeedbackHeader>
+      <Form
+        onSubmit={event => {
+          onSubmit(event);
+          setSuccessfulSubmit(true);
+        }}
+        method="post"
+        validate="submit"
+      >
+        <Box {...theme?.feedback?.body}>{children}</Box>
+        {footerContent}
+      </Form>
+    </Box>
+  );
+
+  if (modal)
+    content = show && (
+      <Layer
+        position={
+          !['xsmall', 'small'].includes(breakpoint) ? 'bottom-right' : 'center'
+        }
+        margin={{ vertical: 'xlarge', horizontal: 'medium' }}
+        modal={false}
+        onEsc={onClose}
+        {...layerProps}
+      >
+        {content}
+      </Layer>
+    );
+
+  return content;
+};
+
+const FeedbackHeader = ({ children, title }) => {
+  const theme = useContext(ThemeContext);
+  return (
+    <Box {...theme?.feedback?.header}>
+      <Heading {...theme?.feedback?.heading}>{title}</Heading>
+      {children}
+    </Box>
+  );
+};
+
+FeedbackHeader.propTypes = {
+  children: PropTypes.node,
+  title: PropTypes.string,
+};
+
+Feedback.propTypes = {
+  children: PropTypes.node,
+  messages: PropTypes.object,
+  modal: PropTypes.bool,
+  onClose: PropTypes.func,
+  onSubmit: PropTypes.func,
+  show: PropTypes.bool,
+  title: PropTypes.string,
+};
diff --git a/aries-site/src/components/feedback/FeedbackButton.js b/aries-site/src/components/feedback/FeedbackButton.js
@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { Box, Button } from 'grommet';
+
+const PositionedBox = styled(Box)`
+  position: fixed;
+  bottom: 0px;
+  right: 0px;
+  z-index: 10;
+`;
+
+export const FeedbackButton = ({ elevation, margin, ...buttonProps }) => (
+  <PositionedBox elevation={elevation} margin={margin}>
+    <Button {...buttonProps} />
+  </PositionedBox>
+);
diff --git a/aries-site/src/components/feedback/Question.js b/aries-site/src/components/feedback/Question.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  FormField,
+  TextArea,
+  Text,
+  RadioButtonGroup,
+  FileInput,
+} from 'grommet';
+import { StarRating } from './StarRating';
+import { ThumbsRating } from './ThumbsRating';
+
+export const Question = ({ formProps, label, inputProps, kind, name }) => {
+  const accessibilityProps = {
+    id: name,
+    name,
+  };
+
+  const formats = {
+    star: {
+      render: StarRating,
+      border: false,
+      label: <Text>{label}</Text>,
+    },
+    thumbs: {
+      render: ThumbsRating,
+      border: false,
+      label: <Text>{label}</Text>,
+    },
+    textArea: { render: TextArea },
+    radioButtonGroup: { render: RadioButtonGroup },
+    fileInput: { render: FileInput },
+  };
+
+  const Input = formats[kind].render;
+  return (
+    <FormField
+      contentProps={{
+        border: formats[kind].border ?? true,
+      }}
+      label={formats[kind].label || <Text>{label}</Text> }
+      name={name}
+      htmlFor={name}
+      {...formProps}
+    >
+      <Input {...accessibilityProps} {...inputProps} />
+    </FormField>
+  );
+};
+
+Question.propTypes = {
+  label: PropTypes.string.isRequired,
+  inputProps: PropTypes.object,
+  kind: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  primary: PropTypes.bool,
+};
diff --git a/aries-site/src/components/feedback/StarRating.js b/aries-site/src/components/feedback/StarRating.js
@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { RadioButtonGroup } from 'grommet';
+import { Star, StarOutline } from 'grommet-icons';
+
+export const StarRating = ({ scale = 5, value, onChange, ...rest }) => {
+  const [rating, setRating] = useState(value);
+
+  const options = [];
+  for (let i = 0; i < scale; i += 1) {
+    options.push(i);
+  }
+
+  return (
+    <RadioButtonGroup
+      direction="row"
+      options={options}
+      value={rating}
+      name="starRating"
+      onChange={event => {
+        const adjustedRating = parseInt(event.target.value, 10) + 1;
+        setRating(adjustedRating);
+      }}
+      {...rest}
+    >
+      {option =>
+        option < rating ? <Star color='green' /> : <StarOutline />
+      }
+    </RadioButtonGroup>
+  );
+};
+
+StarRating.propTypes = {
+  onChange: PropTypes.func,
+  value: PropTypes.number,
+};
diff --git a/aries-site/src/components/feedback/ThumbsRating.js b/aries-site/src/components/feedback/ThumbsRating.js
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { RadioButtonGroup } from 'grommet';
+import { Like, LikeFill, Dislike, DislikeFill } from 'grommet-icons';
+
+export const ThumbsRating = ({ color, value, onChange, ...rest }) => {
+  const [thumbs, setThumbs] = useState(value);
+
+  return (
+    <RadioButtonGroup
+      direction="row"
+      options={['1', '2']}
+      value={thumbs}
+      onChange={event => {
+        setThumbs(event.target.value);
+        if (onChange) onChange(event);
+      }}
+      {...rest}
+    >
+      {(option, { checked }) => {
+        if (option === '1') {
+          return checked ? (
+            <LikeFill color="purple!" />
+          ) : (
+            <Like color="purple!" />
+          );
+        }
+        return checked ? (
+          <DislikeFill color="purple!" />
+        ) : (
+          <Dislike color="purple!" />
+        );
+      }}
+    </RadioButtonGroup>
+  );
+};
+
+ThumbsRating.propTypes = {
+  onChange: PropTypes.func,
+  value: PropTypes.string,
+};
diff --git a/aries-site/src/components/feedback/index.js b/aries-site/src/components/feedback/index.js
@@ -0,0 +1,5 @@
+export * from './Feedback';
+export * from './FeedbackButton';
+export * from './Question';
+export * from './StarRating';
+export * from './ThumbsRating';
diff --git a/aries-site/src/components/index.js b/aries-site/src/components/index.js
@@ -1,5 +1,6 @@
 export * from './cards';
 export * from './content';
+export * from './feedback';
 export * from './headings';
 export * from './icons';
 export * from './seo';
diff --git a/aries-site/src/components/seo/Meta.js b/aries-site/src/components/seo/Meta.js
@@ -19,7 +19,7 @@ export const Meta = ({
   const pageContent = 'products';
   const csp = `default-src 'self' 'unsafe-eval'; 
   style-src 'self' *.hpe.com/hfws-static/5/css/ 'unsafe-inline';
-  connect-src 'self' *.githubusercontent.com/grommet/hpe-design-system/ https://www.google-analytics.com https://www.github.com/grommet/ https://eyes.applitools.com *.hpe.com/hpe/api/;
+  connect-src 'self' *.githubusercontent.com/grommet/hpe-design-system/ https://www.google-analytics.com https://www.github.com/grommet/ https://eyes.applitools.com *.hpe.com/hpe/api/ https://ca1.qualtrics.com/API/v3/surveys/;
   media-src 'self' https://d3hq6blov2iije.cloudfront.net/media/;
   img-src 'self' data: https://www.google-analytics.com https://images.unsplash.com/ http://s.gravatar.com/avatar/ *.hpe.com/hfws-static/5/ https://d3hq6blov2iije.cloudfront.net/images/textures/ https://d3hq6blov2iije.cloudfront.net/images/gradients/;
   script-src 'self' *.hpe.com https://www.google-analytics.com/analytics.js ${
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,6 +21,7 @@ yarn-error.log* @@
     # misc
     .env
+    .env.*
     .tmp
     report*
     .DS_Store