fix(component-forms): added error messaging for fields; fix(component…

…s-library): added icons
ASU · Aug 3, 2020 · 868dac7 · 868dac7
1 parent 847b093
commit 868dac7
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 39 deletions.
diff --git a/packages/component-forms/src/components/Form/FormPanel.js b/packages/component-forms/src/components/Form/FormPanel.js
@@ -1,9 +1,9 @@
 /** @jsx h */
 /* eslint-disable react/prop-types */
-import { h } from "preact";
+import { h, Fragment } from "preact";
 import PropTypes from "prop-types";
 import * as S from "./styles";
-import { Field } from "formik";
+import { Field, ErrorMessage } from "formik";
 import { PanelInput } from "../Input";
 import { Form } from "./";
 
@@ -21,16 +21,19 @@ const FormPanel = ({ title, fields, description, imgUrl, ...props }) => {
         {fields.map((item, index) => {
           if (item.type != "submit") {
             return (
-              <PanelInput {...item}>
-                <Field
-                  id={item.name}
-                  name={item.name}
-                  {...(item.placeholder
-                    ? { placeholder: item.placeholder }
-                    : {})}
-                  type={item.type ? item.type : ""}
-                />
-              </PanelInput>
+              <>
+                <PanelInput {...item}>
+                  <Field
+                    id={item.name}
+                    name={item.name}
+                    {...(item.placeholder
+                      ? { placeholder: item.placeholder }
+                      : {})}
+                    type={item.type ? item.type : ""}
+                  />
+                </PanelInput>
+                <ErrorMessage {...{ name: item.name }} render={(msg) => <S.InputError>{msg}</S.InputError>} />
+              </>
             );
           }
 
@@ -49,11 +52,11 @@ FormPanel.propTypes = {
   description: PropTypes.string,
   imgUrl: PropTypes.string,
   children: PropTypes.element,
-  autoSubmit: PropTypes.bool
+  autoSubmit: PropTypes.bool,
 };
 
 FormPanel.defaultProps = {
-  autoSubmit: false
+  autoSubmit: false,
 };
 
 export { FormPanel };
diff --git a/packages/component-forms/src/components/Form/index.js b/packages/component-forms/src/components/Form/index.js
@@ -32,7 +32,7 @@ const Form = ({ initialValues, onSubmit, validate, autoSubmit, children }) => {
   return (
     <S.FormWrapper>
       <Formik {...{ initialValues, onSubmit, validate }}>
-        {({ isSubmitting, values, submitForm }) => {
+        {({ isSubmitting, values, submitForm, errors, touched }) => {
           return (
             <>
               <FormikForm>{children}</FormikForm>

diff --git a/packages/component-forms/src/components/Form/index.stories.js b/packages/component-forms/src/components/Form/index.stories.js
@@ -9,6 +9,21 @@ export default {
   title: "FormPanel"
 };
 
+// A custom validation function. This must return an object
+// which keys are symmetrical to our values/initialValues
+const validate = (values, props) => {
+
+  console.log(props, 'THE PROPS IN VALIDATE');
+
+  const errors = {};
+  if (!values.push_notifications && !values.email_notifications) {
+    errors.push_notifications = "Error: Cannot disable both notification options";
+    errors.email_notifications = "Error: Cannot disable both notification options";
+  }
+
+  return errors;
+};
+
 const testProps = {
   title: "Daily Health Check Reminders",
   description: `How would you like to be reminded to take your daily health check? <br />
@@ -18,7 +33,7 @@ const testProps = {
   imgUrl: "/dev/img/icon-well-check.png",
   fields: [
     {
-      name: "mobileOptin",
+      name: "push_notifications",
       type: "checkbox",
       icon: "mobile",
       label: "ASU Mobile App (push notifications)",
@@ -28,7 +43,7 @@ const testProps = {
       Ut enim ad minim veniam, quis nostrud`
     },
     {
-      name: "webOptin",
+      name: "email_notifications",
       type: "checkbox",
       label: "Web (email reminders)",
       id: "web-opt-in",
@@ -39,11 +54,17 @@ const testProps = {
     },
   ],
   initialValues: {
-    mobileOptin: true,
-    webOptin: false
+    push_notifications: true,
+    email_notifications: false
   },
+  validate,
   onSubmit: (values, actions) => {
-
+    if (!values.push_notifications && !values.email_notifications) {
+      console.log("reset the form");
+      //actions.resetForm();
+      //actions.setErrors({push_notifications: "Error: Cannot disable both notification options"});
+      //
+    }
       console.log(values, 'THE VALUES');
       console.log(actions, 'THE ACTIONS');
   },

diff --git a/packages/component-forms/src/components/Form/styles.js b/packages/component-forms/src/components/Form/styles.js
@@ -4,6 +4,7 @@ import { h, Fragment } from "preact";
 import { cx, css } from "emotion";
 import Tokens from "../../theme";
 import { Panel, H4, Icon } from "@asu-design-system/components-library";
+import {InputError} from "../Input/styles";
 
 const FormPanel = ({ children, ...props }) => {
   return <Panel>{children}</Panel>;
@@ -52,4 +53,4 @@ const FormWrapper = ({ children, ...props }) => {
   );
 };
 
-export { FormPanel, FormHeader, FormWrapper };
+export { FormPanel, FormHeader, FormWrapper, InputError};
diff --git a/packages/component-forms/src/components/Input/index.js b/packages/component-forms/src/components/Input/index.js
@@ -2,6 +2,7 @@
 /* eslint-disable react/prop-types */
 import { h, Fragment } from "preact";
 import PropTypes from "prop-types";
+import {ErrorMessage} from "formik";
 import * as S from "./styles";
 
 const Input = props => {

diff --git a/packages/component-forms/src/components/Input/styles.js b/packages/component-forms/src/components/Input/styles.js
@@ -163,4 +163,26 @@ const Input = ({ label, name, type, children, ...props }) => {
   );
 };
 
-export { PanelInput, Input, PanelInputCard, PanelInputWrapper };
+const InputError = props => {
+
+  return (
+    <div
+      class={css`
+        display: flex;
+        flex-direction: row;
+        padding: 1rem;
+        font-weight: bold;
+
+        svg {
+          color: ${Tokens.ColorAlertsError};
+          margin-right: 1rem;
+        }
+      `}
+    >
+      {<Icon type="exclamation-triangle" />}
+      {props.children}
+    </div>
+  );
+};
+
+export { PanelInput, Input, PanelInputCard, PanelInputWrapper, InputError };
diff --git a/packages/component-forms/src/components/Modal/index.js b/packages/component-forms/src/components/Modal/index.js
@@ -16,7 +16,7 @@ const modalContext = createContext();
  *
  * @param {*} param0
  */
-const Modal = ({ children, containerId, onModalClose }) => {
+const Modal = ({ children, containerId, onModalClose, ...props }) => {
   const custom = document.getElementById(containerId);
   const domNode = custom || document.body;
   const modalRef = createRef();
@@ -53,7 +53,7 @@ const Modal = ({ children, containerId, onModalClose }) => {
   }, []);
 
   return createPortal(
-    <S.ModalWindow domRef={modalRef} >
+    <S.ModalWindow domRef={modalRef} class={props.class ? props.class: ""}>
       <modalContext.Provider value={{ onModalClose }}>
         {children}
       </modalContext.Provider>
@@ -93,7 +93,8 @@ Modal.Footer.CloseBtn = function CloseBtn(props) {
 
 Modal.propTypes = {
   containerId: PropTypes.string,
-  onModalClose: PropTypes.func.isRequired
+  onModalClose: PropTypes.func.isRequired,
+  class: PropTypes.string
 };
 
 Modal.defaultProps = {};

diff --git a/packages/component-forms/src/components/Modal/styles.js b/packages/component-forms/src/components/Modal/styles.js
@@ -3,23 +3,26 @@
 import { h } from "preact";
 import { cx, css } from "emotion";
 import Tokens from "../../theme";
-import {Button} from "@asu-design-system/components-library";
+import { Button } from "@asu-design-system/components-library";
 
 const ModalWindow = props => {
   return (
     <div
-      class={css`
-        z-index: 2000;
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100vw;
-        height: 100vh;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background-color:rgba(0, 0, 0, 0.7);
-      `}
+      class={cx(
+        css`
+          z-index: 2000;
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100vw;
+          height: 100vh;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background-color: rgba(0, 0, 0, 0.7);
+        `,
+        props.class
+      )}
       role="dialog"
       aria-modal="true"
     >

diff --git a/packages/components-library/src/components/Icons/styles.js b/packages/components-library/src/components/Icons/styles.js
@@ -3,7 +3,7 @@
 import { h } from "preact";
 import { cx, css } from "emotion";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronDown, faDesktop, faMobile, faSearch, faBars, faClipboard, faMapPin } from '@fortawesome/free-solid-svg-icons';
+import { faChevronDown, faDesktop, faMobile, faSearch, faBars, faClipboard, faMapPin, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import Tokens from "../../theme";
 
 const IconHamburger = props => {
@@ -50,6 +50,12 @@ const IconMapPin= props => {
   );
 };
 
+const IconExclTriangle = props => {
+  return (
+    <FontAwesomeIcon icon={faExclamationTriangle} {...props} />
+  );
+};
+
 const Icon = ({ type, ...props }) => {
   switch (type) {
     case "mobile":
@@ -64,6 +70,8 @@ const Icon = ({ type, ...props }) => {
       return <IconClipboard {...props} />;
     case "map-pin":
       return <IconMapPin {...props} />;
+    case "exclamation-triangle":
+      return <IconExclTriangle {...props} />;
     default:
       return "";
   }