Implemented error messages in popovers for failed working period rows.

src/components/Checkbox/index.jsx

@@ -10,6 +10,7 @@ import styles from "./styles.module.scss";
  * @param {Object} props component properties
  * @param {boolean} props.checked whether checkbox is checked
  * @param {string} [props.className] class name added to root element
+ * @param {string} [props.impostorClassName] class name added to checkbox impostor
  * @param {boolean} [props.isDisabled] if checkbox is disabled
  * @param {string} props.name name for input element
  * @param {() => void} props.onChange function called when checkbox changes state
@@ -21,6 +22,7 @@ import styles from "./styles.module.scss";
 const Checkbox = ({
   checked,
   className,
+  impostorClassName,
   isDisabled = false,
   name,
   onChange,
@@ -47,7 +49,7 @@ const Checkbox = ({
       checked={checked}
       value={option ? option.value : ""}
     />
-    <span className={styles.impostor} />
+    <span className={cn(styles.impostor, impostorClassName)} />
     {option && option.label && (
       <span className={styles.label}>{option.label}</span>
     )}
@@ -57,6 +59,7 @@ const Checkbox = ({
 Checkbox.propTypes = {
   checked: PT.bool,
   className: PT.string,
+  impostorClassName: PT.string,
   isDisabled: PT.bool,
   name: PT.string.isRequired,
   size: PT.oneOf(["medium", "small"]),

src/components/Checkbox/styles.module.scss

@@ -96,7 +96,7 @@ input.checkbox {
     z-index: 2;
     position: relative;
     display: inline-block;
-    vertical-align: -2px;
+    vertical-align: -3px;
     width: 15px;
     height: 15px;
     line-height: 13px;

src/components/Icons/ExclamationMarkCircled/index.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import PT from "prop-types";
+import cn from "classnames";
+import styles from "./styles.module.scss";
+
+/**
+ * Displays a white exclamation mark inside red circle.
+ *
+ * @param {Object} props component properties
+ * @returns {JSX.Element}
+ */
+const ExclamationMarkCircled = (props) => (
+  <span {...props} className={cn(styles.icon, props.className)} />
+);
+
+ExclamationMarkCircled.propTypes = {
+  className: PT.string,
+};
+
+export default ExclamationMarkCircled;

src/components/Icons/ExclamationMarkCircled/styles.module.scss

@@ -0,0 +1,22 @@
+@import "styles/mixins";
+@import "styles/variables";
+
+.icon {
+  display: inline-block;
+  padding: 2px 0 0;
+  font-size: 12px;
+  width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  line-height: 14px;
+  @include roboto-bold;
+  text-align: center;
+  background: $error-color;
+  color: #fff;
+  cursor: pointer;
+
+  &::before {
+    content: "!";
+    display: inline;
+  }
+}

src/components/Page/styles.module.scss

@@ -7,8 +7,8 @@
   display: flex;
   flex-direction: column;
   @include roboto-regular;
-  font-size: 14px;
-  line-height: (22/14);
+  font-size: $font-size-px;
+  line-height: ($line-height-px/$font-size-px);
   color: $text-color;
   background-color: $page-bg-color;
 

src/components/Popover/index.jsx

@@ -0,0 +1,84 @@
+import React, { useCallback, useState } from "react";
+import PT from "prop-types";
+import cn from "classnames";
+import Popup from "components/Popup";
+import { negate, stopPropagation } from "utils/misc";
+import styles from "./styles.module.scss";
+
+/**
+ * Displays a popover with provided content when clicked on the provided
+ * target children;
+ *
+ * @param {Object} props component properties
+ * @param {Object} props.children target children
+ * @param {string} [props.className] class name to be added to root element
+ * @param {Object} props.content content to show in popover
+ * @param {string} [props.popupClassName] class name to be added to popup
+ * @param {boolean} [props.stopClickPropagation] whether to prevent propagation
+ * of click events on target content
+ * @param {'absolute'|'fixed'} [props.strategy] popup positioning strategy
+ * @param {string} [props.targetClassName] class name to be added to wrapper
+ * element around target children
+ * @returns {JSX.Element}
+ */
+const Popover = ({
+  children,
+  className,
+  content,
+  popupClassName,
+  stopClickPropagation = false,
+  strategy = "absolute",
+  targetClassName,
+}) => {
+  const [isShown, setIsShown] = useState(false);
+  const [refElem, setRefElem] = useState(null);
+
+  const onTargetClick = useCallback(() => {
+    setIsShown(negate);
+  }, []);
+
+  const onClickOutside = useCallback(() => {
+    setIsShown(false);
+  }, []);
+
+  return (
+    <div
+      className={cn(styles.container, className)}
+      onClick={stopClickPropagation ? stopPropagation : null}
+      role="button"
+      tabIndex={0}
+    >
+      <span
+        className={cn(styles.target, targetClassName)}
+        onClick={isShown ? null : onTargetClick}
+        ref={setRefElem}
+        role="button"
+        tabIndex={0}
+      >
+        {children}
+      </span>
+      {!!content && isShown && (
+        <Popup
+          className={popupClassName}
+          onClickOutside={onClickOutside}
+          referenceElement={refElem}
+          strategy={strategy}
+        >
+          {content}
+        </Popup>
+      )}
+    </div>
+  );
+};
+
+Popover.propTypes = {
+  children: PT.node,
+  className: PT.string,
+  content: PT.node,
+  popupClassName: PT.string,
+  stopClickPropagation: PT.bool,
+  strategy: PT.oneOf(["absolute", "fixed"]),
+  targetClassName: PT.string,
+};
+
+export default Popover;

src/components/Popover/styles.module.scss

@@ -0,0 +1,10 @@
+.container {
+  position: relative;
+  display: inline-flex;
+  align-items: baseline;
+}
+
+.target {
+  display: inline-flex;
+  align-items: baseline;
+}

src/components/Popup/index.jsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { usePopper } from "react-popper";
 import PT from "prop-types";
 import cn from "classnames";
+import { useClickOutside } from "utils/hooks";
 import compStyles from "./styles.module.scss";
 
 /**
@@ -10,20 +11,26 @@ import compStyles from "./styles.module.scss";
  * @param {Object} props component properties
  * @param {any} [props.children] child nodes
  * @param {string} [props.className] class name to be added to root element
+ * @param {() => void} [props.onClickOutside] function called when user clicks
+ * outside the popup
+ * @param {import('@popperjs/core').Placement} [props.placement] popup placement
+ * as defined in PopperJS documentation
  * @param {Object} props.referenceElement reference element
  * @param {'absolute'|'fixed'} [props.strategy] positioning strategy
  * @returns {JSX.Element}
  */
 const Popup = ({
   children,
   className,
+  onClickOutside,
+  placement = "bottom",
   referenceElement,
   strategy = "absolute",
 }) => {
   const [popperElement, setPopperElement] = useState(null);
   const [arrowElement, setArrowElement] = useState(null);
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: "bottom",
+    placement,
     strategy,
     modifiers: [
       { name: "arrow", options: { element: arrowElement, padding: 10 } },
@@ -32,6 +39,8 @@ const Popup = ({
     ],
   });
 
+  useClickOutside(popperElement, onClickOutside, []);
+
   return (
     <div
       ref={setPopperElement}
@@ -52,6 +61,8 @@ const Popup = ({
 Popup.propTypes = {
   children: PT.node,
   className: PT.string,
+  onClickOutside: PT.func,
+  placement: PT.string,
   referenceElement: PT.object.isRequired,
   strategy: PT.oneOf(["absolute", "fixed"]),
 };

src/routes/WorkPeriods/components/PaymentError/index.jsx

@@ -1,10 +1,9 @@
-import React, { useCallback, useRef, useState } from "react";
+import React, { useMemo } from "react";
 import PT from "prop-types";
 import cn from "classnames";
-import Popup from "components/Popup";
+import Popover from "components/Popover";
+import IconExclamationMark from "components/Icons/ExclamationMarkCircled";
 import PaymentErrorDetails from "../PaymentErrorDetails";
-import { useClickOutside } from "utils/hooks";
-import { negate } from "utils/misc";
 import styles from "./styles.module.scss";
 
 /**
@@ -23,36 +22,21 @@ const PaymentError = ({
   isImportant = true,
   popupStrategy = "absolute",
 }) => {
-  const [isShowPopup, setIsShowPopup] = useState(false);
-  const [refElem, setRefElem] = useState(null);
-  const containerRef = useRef(null);
-
-  const onIconClick = useCallback((event) => {
-    event.stopPropagation();
-    setIsShowPopup(negate);
-  }, []);
-
-  const onClickOutside = useCallback(() => {
-    setIsShowPopup(false);
-  }, []);
-
-  useClickOutside(containerRef, onClickOutside, []);
-
+  const paymentErrorDetails = useMemo(
+    () => <PaymentErrorDetails details={errorDetails} />,
+    [errorDetails]
+  );
   return (
-    <div className={cn(styles.container, className)} ref={containerRef}>
-      <span
-        ref={setRefElem}
+    <Popover
+      className={className}
+      content={paymentErrorDetails}
+      stopClickPropagation={true}
+      strategy={popupStrategy}
+    >
+      <IconExclamationMark
         className={cn(styles.icon, { [styles.isImportant]: isImportant })}
-        onClick={onIconClick}
-        role="button"
-        tabIndex={0}
       />
-      {isShowPopup && errorDetails && (
-        <Popup referenceElement={refElem} strategy={popupStrategy}>
-          <PaymentErrorDetails details={errorDetails} />
-        </Popup>
-      )}
-    </div>
+    </Popover>
   );
 };
 

src/routes/WorkPeriods/components/PaymentError/styles.module.scss

@@ -6,26 +6,9 @@
 }
 
 .icon {
-  display: inline-block;
-  padding: 2px 0 0;
-  font-size: 12px;
-  width: 16px;
-  height: 16px;
-  border-radius: 8px;
-  line-height: 14px;
-  text-align: center;
-  background: $error-color;
-  color: #fff;
   opacity: 0.3;
-  cursor: pointer;
 
   &.isImportant {
     opacity: 1;
   }
-
-  &::before {
-    content: "!";
-    display: inline;
-    font-weight: 700;
-  }
 }