@availity/feedback 6.0.9 → 6.0.13

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.0.13](https://github.com/Availity/availity-react/compare/@availity/feedback@6.0.12...@availity/feedback@6.0.13) (2021-10-19)
+
+**Note:** Version bump only for package @availity/feedback
+
+
+
+
+
+## 6.0.12 (2021-10-19)
+
+**Note:** Version bump only for package @availity/feedback
+
+
+
+
+
+## [6.0.11](https://github.com/Availity/availity-react/compare/@availity/feedback@6.0.10...@availity/feedback@6.0.11) (2021-10-08)
+
+**Note:** Version bump only for package @availity/feedback
+
+
+
+
+
+## [6.0.10](https://github.com/Availity/availity-react/compare/@availity/feedback@6.0.9...@availity/feedback@6.0.10) (2021-10-06)
+
+
+### Bug Fixes
+
+* improve modal use case for FeedbackForm ([66dff23](https://github.com/Availity/availity-react/commit/66dff23e8b770e4143496c2d81683c46a1fc4fb4))
+
+
+
+
+
 ## [6.0.9](https://github.com/Availity/availity-react/compare/@availity/feedback@6.0.8...@availity/feedback@6.0.9) (2021-10-04)
 
 **Note:** Version bump only for package @availity/feedback

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/feedback",
-  "version": "6.0.9",
+  "version": "6.0.13",
   "author": "Evan Sharp <evan.sharp@availity.com>",
   "description": "Availity feedback with smiley faces react component.",
   "main": "index.js",
@@ -21,11 +21,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@availity/form": "^0.7.3",
+    "@availity/form": "^0.7.4",
     "@availity/hooks": "^3.0.4",
     "@availity/icon": "^0.9.0",
     "@availity/native-form": "^3.0.0",
-    "@availity/select": "^0.18.4",
+    "@availity/select": "^0.20.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
@@ -47,5 +47,5 @@
     "reactstrap": "^8.0.0 || ^7.0.0 || ^6.0.0",
     "yup": "^0.27.0"
   },
-  "gitHead": "7b30cdc374201687b41200b6395ba74337bb2804"
+  "gitHead": "b3d2b222b3aeec7005548254998a8ccda95ef514"
 }

package/src/FeedbackButton.js

@@ -3,12 +3,10 @@ import { PropTypes } from 'prop-types';
 import { Button } from 'reactstrap';
 import Icon from '@availity/icon';
 
-const btnStyles = { fontSize: '1.4em', padding: '.2em .4em' };
-const iconStyles = { margin: '0px' };
-
 const FeedbackButton = ({ onClick, icon, active, children, iconSize, ...rest }) => (
   <Button
-    style={btnStyles}
+    block
+    className="mt-2"
     color={active === icon ? 'primary' : 'light'}
     aria-pressed={active === icon}
     onClick={() => {
@@ -17,7 +15,7 @@ const FeedbackButton = ({ onClick, icon, active, children, iconSize, ...rest })
     onKeyDown={({ keyCode }) => keyCode === 13 && onClick(icon)}
     {...rest}
   >
-    <Icon data-testid="feedback-icon" name={icon} size={iconSize} style={iconStyles} />
+    <Icon data-testid="feedback-icon" name={icon} size={iconSize} className="m-0 " />
     <span className="sr-only">{children}</span>
   </Button>
 );

package/src/FeedbackForm.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Button, ModalBody, ModalHeader, ModalFooter, FormGroup } from 'reactstrap';
+import { Col, Row, Button, ModalHeader, FormGroup } from 'reactstrap';
 import { avLogMessagesApi, avRegionsApi } from '@availity/api-axios';
 import { Form, Field } from '@availity/form';
 import { SelectField } from '@availity/select';
@@ -21,6 +21,9 @@ yup.addMethod(yup.string, 'isRequired', function format(isRequired, msg) {
   });
 });
 
+// const ConditionalModalHeader = ({ condition, wrapper, children }) =>
+//   condition ? wrapper(children) : children;
+
 const fieldStyles = { resize: 'none' };
 const inlineStyles = { display: 'inline-block', margin: 0 };
 
@@ -82,65 +85,100 @@ const FeedbackForm = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sent]);
 
-  return sent ? (
-    <ModalHeader
-      role="status"
-      id="feedback-form-header"
-      tabIndex="0"
-      className="d-flex justify-content-center"
-      {...modalHeaderProps}
+  return (
+    <Form
+      aria-label="Feedback Form"
+      aria-describedby="feedback-form-header"
+      className="container p-2"
+      role="form"
+      onKeyDown={({ keyCode }) => keyCode === 27 && onClose()}
+      data-testid="feedback-form"
+      initialValues={{
+        'face-options': undefined,
+        additionalFeedback: undefined,
+        feedback: undefined,
+        feedbackApp: undefined,
+        smileField: undefined,
+      }}
+      validationSchema={yup.object().shape({
+        feedback: yup.string().max(200, 'Feedback cannot exceed 200 characters.').required('This field is required.'),
+        additionalFeedback: yup.string().max(200, 'Additional Feedback cannot exceed 200 characters.'),
+        smileField: yup
+          .object()
+          .shape({
+            icon: yup.string().required(),
+            description: yup.string(),
+            label: yup.string(),
+          })
+          .required('This field is required.'),
+        feedbackApp: yup.string().isRequired(aboutOptions.length > 0, 'This field is required.'),
+      })}
+      {...formProps}
+      onSubmit={(values) => sendFeedback(values)}
     >
-      Thank you for your feedback.
-    </ModalHeader>
-  ) : (
-    <>
-      <ModalHeader
-        id="feedback-form-header"
-        role="heading"
-        aria-level="2"
-        className="h5"
-        tag="div"
-        {...modalHeaderProps}
-      >
-        {prompt || `Tell us what you think about ${name}`}
-      </ModalHeader>
-      <Form
-        aria-label="Feedback Form"
-        aria-describedby="feedback-form-header"
-        role="form"
-        onKeyDown={({ keyCode }) => keyCode === 27 && onClose()}
-        data-testid="feedback-form"
-        initialValues={{
-          'face-options': undefined,
-          additionalFeedback: undefined,
-          feedback: undefined,
-          feedbackApp: undefined,
-          smileField: undefined,
-        }}
-        validationSchema={yup.object().shape({
-          feedback: yup.string().max(200, 'Feedback cannot exceed 200 characters.').required('This field is required.'),
-          additionalFeedback: yup.string().max(200, 'Additional Feedback cannot exceed 200 characters.'),
-          smileField: yup
-            .object()
-            .shape({
-              icon: yup.string().required(),
-              description: yup.string(),
-              label: yup.string(),
-            })
-            .required('This field is required.'),
-          feedbackApp: yup.string().isRequired(aboutOptions.length > 0, 'This field is required.'),
-        })}
-        {...formProps}
-        onSubmit={(values) => sendFeedback(values)}
-      >
-        <ModalBody>
+      {sent ? (
+        modalHeaderProps ? (
+          // TODO Sorry for all the ternaries here. This component badly needs to be
+          // refactored. PF-2208 was to make FeedbackForm usable outside, but to maintain
+          // the use case of it being inside a modal I needed to keep modalHeaderProps
+          // in the PropTypes. Since modalHeaderProps is being used to pass an onClose
+          // handler to the modal header, I need to still conditionally render the
+          // ModalHeader and spread the props onto it. This whole set of components
+          // need to be completely reworked to enable better composition of these
+          // components
+          <ModalHeader
+            role="status"
+            id="feedback-form-header"
+            tabIndex="0"
+            className="d-flex justify-content-center"
+            {...modalHeaderProps}
+          >
+            Thank you for your feedback.
+          </ModalHeader>
+        ) : modalHeaderProps ? (
+          <ModalHeader
+            id="feedback-form-header"
+            role="heading"
+            aria-level="2"
+            className="h5 mt-n2 mx-n2"
+            tag="div"
+            {...modalHeaderProps}
+          >
+            {prompt || `Tell us what you think about ${name}`}
+          </ModalHeader>
+        ) : (
+          <Row>
+            <Col className="m-2 p-3">Your feedback has been sent. Thank you!</Col>
+          </Row>
+        )
+      ) : (
+        <>
+          {modalHeaderProps ? (
+            <ModalHeader
+              id="feedback-form-header"
+              role="heading"
+              aria-level="2"
+              className="h5 mt-n2 mx-n2"
+              tag="div"
+              {...modalHeaderProps}
+            >
+              {prompt || `Tell us what you think about ${name}`}
+            </ModalHeader>
+          ) : (
+            <Row>
+              <div className="col h5" role="heading" aria-level="2" id="feedback-form-header">
+                {prompt || `Tell us what you think about ${name}`}
+              </div>
+            </Row>
+          )}
+
           <FormGroup
+            row
+            data-testid="face-options"
             size="lg"
             id="face-options"
             role="group"
             aria-labelledby="feedback-form-header"
-            data-testid="face-options"
-            className="d-flex flex-row justify-content-between"
           >
             <SmileField
               options={faceOptions}
@@ -149,67 +187,91 @@ const FeedbackForm = ({
               autoFocusFeedbackButton={autoFocusFeedbackButton}
             />
           </FormGroup>
+
           {active ? (
             <>
               {aboutOptions.length > 0 && (
-                <SelectField
-                  name="feedbackApp"
-                  id="about-options"
-                  data-testid="about-options"
-                  label={aboutLabel}
-                  options={aboutOptions}
-                />
+                <Row>
+                  <Col>
+                    <SelectField
+                      name="feedbackApp"
+                      id="about-options"
+                      data-testid="about-options"
+                      label={aboutLabel}
+                      options={aboutOptions}
+                    />
+                  </Col>
+                </Row>
               )}
-              <Field
-                type="textarea"
-                name="feedback"
-                label={(active && active.label) || 'Feedback? Requests? Defects?'}
-                style={fieldStyles}
-                rows="2"
-              />
+
+              <Row>
+                <Col>
+                  <Field
+                    type="textarea"
+                    name="feedback"
+                    label={(active && active.label) || 'Feedback? Requests? Defects?'}
+                    style={fieldStyles}
+                    rows="2"
+                  />
+                </Col>
+              </Row>
               {additionalComments && (
-                <Field
-                  type="textarea"
-                  name="additionalFeedback"
-                  label="Additional Comments... (Optional)"
-                  style={fieldStyles}
-                  rows="2"
-                />
+                <Row>
+                  <Col>
+                    <Field
+                      type="textarea"
+                      name="additionalFeedback"
+                      label="Additional Comments... (Optional)"
+                      style={fieldStyles}
+                      rows="2"
+                    />
+                  </Col>
+                </Row>
               )}
             </>
           ) : null}
-        </ModalBody>
 
-        <ModalFooter>
-          {showSupport ? (
-            <>
-              <span className="d-none d-md-block" style={inlineStyles}>
-                Need Help?
-              </span>
-              <Button
-                className="pl-0"
-                onClick={() => setSupportIsActive(true)}
-                color="link"
-                type="button"
-                onKeyDown={({ keyCode }) => keyCode === 13 && setSupportIsActive(true)}
-              >
-                Open a support ticket
-              </Button>
-            </>
-          ) : null}
+          <Row className="justify-content-end">
+            {showSupport ? (
+              <Col xs="auto" className="mt-2">
+                <small className="d-none d-md-inline" style={inlineStyles}>
+                  Need Help?
+                </small>
+                <Button
+                  size="sm"
+                  className="pl-0 ml-1 d-inline"
+                  onClick={() => setSupportIsActive(true)}
+                  onKeyDown={({ keyCode }) => keyCode === 13 && setSupportIsActive(true)}
+                  color="link"
+                  type="button"
+                >
+                  Open a support ticket
+                </Button>
+              </Col>
+            ) : null}
+            {onClose ? (
+              <Col xs="auto" className="mt-2">
+                <Button
+                  size="sm"
+                  onClick={onClose}
+                  onKeyDown={({ keyCode }) => keyCode === 13 && onClose()}
+                  color="secondary"
+                  className=""
+                >
+                  Close
+                </Button>
+              </Col>
+            ) : null}
 
-          {onClose ? (
-            <Button onClick={onClose} color="secondary" onKeyDown={({ keyCode }) => keyCode === 13 && onClose()}>
-              Close
-            </Button>
-          ) : null}
-
-          <Button type="submit" color="primary" disabled={!active}>
-            Send Feedback
-          </Button>
-        </ModalFooter>
-      </Form>
-    </>
+            <Col xs="auto" className="mt-2">
+              <Button size="sm" type="submit" color="primary" disabled={!active}>
+                Send Feedback
+              </Button>
+            </Col>
+          </Row>
+        </>
+      )}
+    </Form>
   );
 };
 
@@ -247,7 +309,6 @@ FeedbackForm.defaultProps = {
   aboutOptions: [],
   aboutLabel: 'This is about',
   additionalComments: false,
-  modalHeaderProps: {},
   analytics: avLogMessagesApi,
   showSupport: false,
 };

package/src/FeedbackModal.js

@@ -1,10 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal } from 'reactstrap';
+import { Modal, ModalHeader } from 'reactstrap';
 import FeedbackForm from './FeedbackForm';
 import SupportModal from './SupportModal';
 
-const FeedbackModal = ({ isOpen, toggle, zIndex, showSupport, supportZIndex, feedbackToggle, ...formOptions }) => {
+const FeedbackModal = ({
+  isOpen,
+  toggle,
+  zIndex,
+  showSupport,
+  supportZIndex,
+  feedbackToggle,
+  modalHeaderProps = {},
+  ...formOptions
+}) => {
   const [supportIsActive, setSupportIsActive] = React.useState(false);
 
   return supportIsActive ? (
@@ -30,6 +39,7 @@ const FeedbackModal = ({ isOpen, toggle, zIndex, showSupport, supportZIndex, fee
         onClose={toggle}
         showSupport={showSupport}
         setSupportIsActive={setSupportIsActive}
+        modalHeaderProps={{ toggle, ...modalHeaderProps }}
         {...formOptions}
       />
     </Modal>
@@ -43,6 +53,7 @@ FeedbackModal.propTypes = {
   zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   supportZIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   feedbackToggle: PropTypes.func,
+  modalHeaderProps: PropTypes.shape({ ...ModalHeader.propTypes }),
 };
 
 export default FeedbackModal;

package/src/SmileField.js

@@ -1,33 +1,36 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useField, useFormikContext } from 'formik';
+import { Col } from 'reactstrap';
 import FeedbackButton from './FeedbackButton';
 
-const btnStyles = { flex: 1, margin: '0 2% 0 2%' };
-
 const SmileField = ({ name, options, onChange, autoFocusFeedbackButton }) => {
   const [{ value }] = useField(name);
   const { setFieldValue } = useFormikContext();
 
-  return options.map((option, i) => (
-    <FeedbackButton
-      autoFocus={i === 0 && autoFocusFeedbackButton}
-      style={btnStyles}
-      key={option.icon}
-      icon={option.icon}
-      iconSize="2x"
-      value={option}
-      active={value && value.icon}
-      onClick={() => {
-        setFieldValue(name, option);
-        if (onChange) {
-          onChange(option);
-        }
-      }}
-    >
-      {option.description}
-    </FeedbackButton>
-  ));
+  return (
+    <>
+      {options.map((option, i) => (
+        <Col key={option.icon}>
+          <FeedbackButton
+            autoFocus={i === 0 && autoFocusFeedbackButton}
+            icon={option.icon}
+            iconSize="2x"
+            value={option}
+            active={value && value.icon}
+            onClick={() => {
+              setFieldValue(name, option);
+              if (onChange) {
+                onChange(option);
+              }
+            }}
+          >
+            {option.description}
+          </FeedbackButton>
+        </Col>
+      ))}
+    </>
+  );
 };
 
 SmileField.propTypes = {