Merge pull request #349 from topcoder-platform/dev

TaaS Intake - v2.01

Author: urwithat

package-lock.json

@@ -71,7 +71,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-avatar": "^3.9.7",
-    "react-datepicker": "^3.4.1",
+    "react-datepicker": "^3.8.0",
     "react-dom": "^16.12.0",
     "react-final-form": "^6.5.2",
     "react-final-form-arrays": "^3.1.3",

package.json

@@ -82,6 +82,7 @@ const FormField = ({ field }) => {
               onBlur={input.onBlur}
               onFocus={input.onFocus}
               className={meta.error && meta.touched ? "error" : ""}
+              maxLength={field.maxLength}
             />
           )}
           {field.type === FORM_FIELD_TYPE.DATE && (

src/assets/images/icon-information-circle.svg

@@ -0,0 +1,87 @@
+/**
+ * Information Tooltip
+ * Icon which reveals a tooltip on mouse hover
+ */
+import React, { useCallback, useState } from "react";
+import PT from "prop-types";
+import { usePopper } from "react-popper";
+import IconInformationCircle from "../../assets/images/icon-information-circle.svg";
+import "./styles.module.scss";
+
+function InformationTooltip({ text, iconSize = "16px" }) {
+  const [isTooltipShown, setIsTooltipShown] = useState(false);
+  const [referenceElement, setReferenceElement] = useState(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "top",
+    modifiers: [
+      {
+        name: "flip",
+        options: {
+          fallbackPlacements: ["top"],
+        },
+      },
+      {
+        name: "offset",
+        options: {
+          // use offset to move the tooltip slightly up
+          offset: [0, 12],
+        },
+      },
+      {
+        name: "arrow",
+        // padding should be equal to border-radius of the tooltip
+        options: { element: arrowElement, padding: 5 },
+      },
+    ],
+  });
+
+  const showTooltip = useCallback(() => {
+    setIsTooltipShown(true);
+  }, []);
+
+  const hideTooltip = useCallback(() => {
+    setIsTooltipShown(false);
+  }, []);
+
+  const iconStyle = {
+    width: iconSize,
+    height: iconSize,
+  };
+
+  return (
+    <div>
+      <div
+        style={iconStyle}
+        ref={setReferenceElement}
+        onMouseEnter={showTooltip}
+        onMouseLeave={hideTooltip}
+      >
+        <IconInformationCircle styleName="circle" />
+      </div>
+      {isTooltipShown && (
+        <div
+          styleName="tooltip"
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div styleName="tooltip-content">{text}</div>
+          <div
+            styleName="tooltip-arrow"
+            ref={setArrowElement}
+            style={styles.arrow}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+InformationTooltip.propTypes = {
+  iconSize: PT.string,
+  text: PT.string,
+};
+
+export default InformationTooltip;

src/assets/images/icon-thick-calendar.svg

@@ -0,0 +1,34 @@
+@import "styles/include";
+
+.circle {
+  * {
+    fill: #aaa;
+  }
+}
+
+.tooltip {
+  border-radius: 5px;
+  box-shadow: 0px 5px 25px #c6c6c6;
+  width: 165px;
+  z-index: 1000;
+}
+
+.tooltip-arrow {
+  bottom: -9px;
+  border-style: solid;
+  border-width: 10px 8px 0 8px;
+  border-color: #2a2a2a transparent transparent transparent;
+  height: 0;
+  width: 0;
+}
+
+.tooltip-content {
+  border-radius: 5px;
+  @include font-roboto;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  color: #fff;
+  background-color: #2a2a2a;
+  padding: 10px;
+}

src/components/FormField/index.jsx

@@ -53,6 +53,9 @@ const MarkdownEditor = (props) => {
         ]}
         plugins={[]}
       />
+      {props.errorMessage && (
+        <div styleName="message">{props.errorMessage}</div>
+      )}
     </div>
   );
 };

src/components/InformationTooltip/index.jsx

@@ -12,21 +12,6 @@
       overflow-y: auto;
       background: #fafafb;
     }
-    .message {
-      @include font-roboto;
-
-      width: 100%;
-      text-align: center;
-      min-height: 40px;
-      line-height: 20px;
-      padding: 9px 10px;
-      margin: 10px 0 5px;
-      font-size: 14px;
-      color: #ff5b52;
-      border: 1px solid #ffd5d1;
-      cursor: auto;
-      outline: none;
-    }
 }
 .editor-container {
   :global {
@@ -72,3 +57,19 @@
     }
   }
 }
+
+.message {
+  @include font-roboto;
+
+  width: 100%;
+  text-align: center;
+  min-height: 40px;
+  line-height: 20px;
+  padding: 9px 10px;
+  margin: 10px 0 5px;
+  font-size: 14px;
+  color: #ff5b52;
+  border: 1px solid #ffd5d1;
+  cursor: auto;
+  outline: none;
+}

src/components/InformationTooltip/styles.module.scss

@@ -0,0 +1,45 @@
+/**
+ * Month Picker
+ * An styled input component for selecting date by month.
+ * Compatible with react-final-form
+ */
+import React from "react";
+import PT from "prop-types";
+import DatePicker from "react-datepicker";
+import "./styles.module.scss";
+
+function getCurrMonthYear() {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = now.getMonth();
+  return new Date(`${year}-${month + 1}`);
+}
+
+function MonthPicker({ name, value, onChange, onBlur, onFocus }) {
+  return (
+    <div styleName="month-picker">
+      <DatePicker
+        name={name}
+        selected={value}
+        onChange={onChange}
+        dateFormat="MMM, yyyy"
+        showMonthYearPicker
+        showPopperArrow={false}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        popperPlacement="top-end"
+        showFourColumnMonthYearPicker
+        minDate={getCurrMonthYear()}
+      />
+    </div>
+  );
+}
+
+MonthPicker.propTypes = {
+  name: PT.string,
+  value: PT.any,
+  onChange: PT.func,
+  onBlur: PT.func,
+};
+
+export default MonthPicker;