Merge pull request #398 from hackforla/0.2.9

Release 0.2.9

Author: entrotech

.gitignore

@@ -4,7 +4,8 @@
 
 
 # Custom ignores
-/screenshots
+cypress/screenshots
+cypress/videos
 
 ### Linux ###
 *~
@@ -241,5 +242,5 @@ node_modules
 # End of project-specific exclusions
 .eslintcache
 
-# Yarn lockfile 
-yarn.lock
+# Yarn lockfile
+yarn.lock

client/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "private": true,
   "proxy": "http://localhost:5000",
   "dependencies": {
@@ -13,13 +13,13 @@
     "eslint-plugin-prettier": "^3.1.3",
     "formik": "^2.1.4",
     "moment": "^2.24.0",
-    "node-sass": "^4.13.1",
+    "node-sass": "^4.14.1",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-jss": "^10.1.0",
     "react-loader": "^2.4.7",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "^3.4.0",
+    "react-scripts": "^3.4.1",
     "react-string-replace": "^0.4.4",
     "react-tooltip": "^4.2.2",
     "yup": "^0.28.3"
@@ -51,11 +51,11 @@
     ]
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^5.3.17",
+    "@storybook/addon-actions": "^5.3.18",
     "@storybook/addon-links": "^5.3.17",
-    "@storybook/addon-storyshots": "^5.3.17",
+    "@storybook/addon-storyshots": "^5.3.18",
     "@storybook/addons": "^5.3.17",
-    "@storybook/react": "^5.3.17",
+    "@storybook/react": "^5.3.18",
     "eslint": "^6.8.0",
     "eslint-plugin-jest": "^23.8.2",
     "eslint-plugin-react": "^7.20.0",

client/package.json

@@ -0,0 +1,73 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { createUseStyles } from "react-jss";
+import clsx from "clsx";
+
+const useStyles = createUseStyles({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    backgroundColor: "#F7F9FA",
+    marginBottom: "1em",
+    marginRight: "auto",
+    marginLeft: "auto",
+    width: "50vw",
+    minWidth: 550,
+    maxWidth: 700
+  },
+  closeButton: {
+    alignSelf: "flex-end",
+    backgroundColor: "#F7F9FA",
+    color: "#B2C0D3",
+    borderStyle: "none",
+    display: "flex",
+    justifyContent: "center",
+    margin: 0,
+    padding: 0,
+    width: "2em",
+    "&:hover": {
+      cursor: "pointer",
+      color: "#8E99A8"
+    }
+  },
+  bigX: {
+    fontSize: "25px"
+  },
+  content: {
+    margin: "0 1em",
+    paddingBottom: "2em",
+    alignSelf: "center"
+  },
+  open: {
+    display: "flex"
+  },
+  closed: {
+    display: "none"
+  }
+});
+
+const InfoBox = ({ children, displayStatus, handleClick }) => {
+  const classes = useStyles();
+
+  return (
+    <div
+      className={clsx(
+        classes.container,
+        displayStatus ? classes.open : classes.closed
+      )}
+    >
+      <button onClick={handleClick} className={classes.closeButton}>
+        <span className={classes.bigX}>{"\u00d7"}</span>
+      </button>
+      <div className={classes.content}>{children}</div>
+    </div>
+  );
+};
+
+InfoBox.propTypes = {
+  children: PropTypes.any,
+  displayStatus: PropTypes.bool,
+  handleClick: PropTypes.func
+};
+
+export default InfoBox;

client/src/components/ProjectWizard/InfoBox.js

@@ -64,14 +64,29 @@ const useStyles = createUseStyles({
     marginTop: "4px"
   },
   tooltip: {
-    padding: "10px",
+    padding: "15px",
     minWidth: "200px",
-    maxWidth: "400px"
+    maxWidth: "400px",
+    fontFamily: "Arial",
+    fontSize: 12,
+    lineHeight: "16px",
+    fontWeight: "bold",
+    "-webkit-box-shadow": "0px 0px 8px rgba(0, 46, 109, 0.2)",
+    "-moz-box-shadow": "0px 0px 8px rgba(0, 46, 109, 0.2)",
+    boxShadow: "0px 0px 8px rgba(0, 46, 109, 0.2)",
+    "-webkit-border-radius": 2,
+    "-moz-border-radius": 2,
+    borderRadius: 2,
+    "&.show": {
+      visibility: "visible !important",
+      opacity: "1 !important"
+    }
   }
 });
 
 const RuleStrategy = ({
   rule: {
+    id,
     code,
     name,
     dataType,
@@ -91,10 +106,8 @@ const RuleStrategy = ({
   onCommentChange
 }) => {
   const classes = useStyles();
-
   const possibleAndEarnedPointsContainers = () => {
     const calculationUnits = calcUnits ? calcUnits : "";
-
     return (
       <React.Fragment>
         <div className={classes.points}>
@@ -122,7 +135,7 @@ const RuleStrategy = ({
           <label
             htmlFor={code}
             className={classes.strategyName}
-            data-for="main"
+            data-for={"main" + id}
             data-tip={description}
             data-iscapture="true"
             data-html="true"
@@ -151,7 +164,7 @@ const RuleStrategy = ({
           <label
             htmlFor={code}
             className={classes.strategyName}
-            data-for="main"
+            data-for={"main" + id}
             data-tip={description}
             data-iscapture="true"
             data-html="true"
@@ -177,7 +190,7 @@ const RuleStrategy = ({
           <label
             htmlFor={code}
             className={classes.strategyName}
-            data-for="main"
+            data-for={"main" + id}
             data-tip={description}
             data-iscapture="true"
             data-html="true"
@@ -208,7 +221,7 @@ const RuleStrategy = ({
           <label
             htmlFor={code}
             className={classes.strategyName}
-            data-for="main"
+            data-for={"main" + id}
             data-tip={description}
             data-iscapture="true"
             data-html="true"
@@ -230,7 +243,7 @@ const RuleStrategy = ({
       ) : (
         <div
           className={classes.strategyContainer}
-          data-for="main"
+          data-for={"main" + id}
           data-tip={description}
           data-iscapture="true"
           data-html="true"
@@ -261,12 +274,19 @@ const RuleStrategy = ({
         </div>
       ) : null}
       <ReactTooltip
-        id="main"
-        place="top"
+        id={"main" + id}
+        place="right"
         type="info"
         effect="float"
         multiline={true}
-        style={{ width: "25vw" }}
+        style={{
+          width: "25vw"
+        }}
+        textColor="#32578A"
+        backgroundColor="#F7F9FA"
+        border={true}
+        borderColor="#B2C0D3"
+        offset={{ right: 20 }}
       />
     </React.Fragment>
   );

client/src/components/ProjectWizard/RuleStrategy/RuleStrategy.js

@@ -7,7 +7,8 @@ import { tdmRules } from "../../../test-data/tdm-calc-rules";
 const rules = tdmRules.filter(rule => rule.calculationPanelId === 22);
 
 export const actions = {
-  onInputChange: action("onInputChange")
+  onInputChange: action("onInputChange"),
+  onCommentChange: action("onCommentChange")
 };
 
 storiesOf("RuleStrategyList", module).add("default", () => (

client/src/components/ProjectWizard/RuleStrategy/RuleStrategyList.stories.js

@@ -9,7 +9,8 @@ const rules = tdmRules.filter(
 );
 
 export const actions = {
-  onInputChange: action("onInputChange")
+  onInputChange: action("onInputChange"),
+  onCommentChange: action("onCommentChange")
 };
 
 storiesOf("RuleStrategyPanels", module).add("default", () => (

client/src/components/ProjectWizard/RuleStrategy/RuleStrategyPanels.stories.js

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { createUseStyles } from "react-jss";
 import clsx from "clsx";
+import ToolTipIcon from "./ToolTipIcon";
 
 const useStyles = createUseStyles({
   tipIcon: {
@@ -42,17 +43,20 @@ const useStyles = createUseStyles({
 });
 
 const ToolTip = ({ tipText }) => {
-  const [tipVisibility, setTipVisibility] = useState(false);
+  const [tipVisibility] = useState(false);
   const classes = useStyles();
-  const handleClick = () => {
-    //setTipVisibility(!tipVisibility);
-  };
+
+  // will need to be changed to onHover
   const showTip = tipVisibility ? "showTip" : "";
   return (
     <React.Fragment>
-      <button className={classes.tipIcon} onClick={handleClick}>
-        ?
-      </button>
+      <ToolTipIcon
+        containerStyle={{
+          fontSize: 16,
+          verticalAlign: "top",
+          "&:hover": { cursor: "pointer" }
+        }}
+      />
       <span className={clsx(classes.tipText, showTip)}>{tipText}</span>
     </React.Fragment>
   );

client/src/components/ProjectWizard/SidebarPoints/ToolTip.js

@@ -0,0 +1,47 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCircle, faQuestion } from "@fortawesome/free-solid-svg-icons";
+import { createUseStyles } from "react-jss";
+import clsx from "clsx";
+
+const useStyles = createUseStyles({
+  questionStyle: styles => ({
+    ...styles.questionStyle
+  }),
+  circleStyle: styles => ({
+    ...styles.circleStyle
+  }),
+  containerStyle: styles => ({
+    fontSize: 25,
+    verticalAlign: "-.25em",
+    ...styles.containerStyle
+  })
+});
+
+const ToolTipIcon = ({ containerStyle, circleStyle, questionStyle }) => {
+  const classes = useStyles({ containerStyle, circleStyle, questionStyle });
+  return (
+    <span className={clsx("fa-layers", "fa-fw", classes.containerStyle)}>
+      <FontAwesomeIcon
+        icon={faCircle}
+        color="#a7c539"
+        className={classes.circleStyle}
+      />
+      <FontAwesomeIcon
+        icon={faQuestion}
+        color="white"
+        className={classes.questionStyle}
+        transform="shrink-5"
+      />
+    </span>
+  );
+};
+
+ToolTipIcon.propTypes = {
+  circleStyle: PropTypes.object,
+  containerStyle: PropTypes.object,
+  questionStyle: PropTypes.object
+};
+
+export default ToolTipIcon;

client/src/components/ProjectWizard/SidebarPoints/ToolTipIcon.js

@@ -57,20 +57,25 @@ const useStyles = createUseStyles({
     marginTop: "2em"
   },
   unSelectContainer: {
-    display: "flex",
-    flexDirection: "row",
+    display: "grid",
+    gridTemplateColumns: "[h-start] 20% [h-mid] auto [h-end] 20%",
     alignItems: "center",
-    justifyContent: "center",
-    position: "relative",
-    height: "32px"
+    justifyContent: "space-between",
+    position: "relative"
   },
   unSelectButton: {
-    position: "absolute",
-    right: "24px",
+    marginLeft: "auto",
+    marginRight: "1em",
+    gridColumn: "h-end",
     backgroundColor: "transparent",
     border: "0",
     cursor: "pointer",
     textDecoration: "underline"
+  },
+  alignMid: {
+    gridColumn: "h-mid",
+    display: "flex",
+    justifyContent: "center"
   }
 });