Merge pull request #122 from stiftelsen-effekt/tooltip-mobile-bug

Fixed Tooltip on mobile
stiftelsen-effekt · Nov 17, 2021 · 63b0930 · 63b0930
2 parents 2585640 + 6da103a
commit 63b0930
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 80 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "@types/redux-form": "^8.3.0",
     "@types/styled-components": "^5.1.4",
     "@types/validator": "^13.1.0",
-    "axios": "^0.21.1",
+    "axios": "^0.21.4",
     "email-validator": "^2.0.4",
     "moment": "^2.29.1",
     "pure-react-carousel": "^1.27.6",
@@ -34,7 +34,7 @@
     "styled-components": "^5.2.1",
     "typescript-fsa": "^3.0.0",
     "typescript-fsa-redux-saga": "^2.0.0",
-    "validator": "^13.1.17"
+    "validator": "^13.7.0"
   },
   "devDependencies": {
     "cypress": "^6.0.0",
@@ -63,5 +63,10 @@
   "eslintConfig": {
     "extends": "react-app"
   },
-  "browserslist": [">0.3%", "not ie 11", "not dead", "not op_mini all"]
+  "browserslist": [
+    ">0.3%",
+    "not ie 11",
+    "not dead",
+    "not op_mini all"
+  ]
 }
diff --git a/src/components/panes/DonorPane/CustomCheckBox.style.tsx b/src/components/panes/DonorPane/CustomCheckBox.style.tsx
@@ -69,7 +69,7 @@ export const CheckBoxLabel = styled.p`
   font-size: 14px;
   margin: 0;
   padding-left: 35px;
-  padding-right: 5px;
+  padding-right: 0px;
 `;
 
 export const ComputerLabel = styled.span`

diff --git a/src/components/shared/ToolTip/ToolTip.tsx b/src/components/shared/ToolTip/ToolTip.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/destructuring-assignment */
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import { ToolTipIcon } from "./ToolTipIcon";
 
@@ -35,13 +35,19 @@ interface ToolTipProps {
 }
 
 export const ToolTip: React.FC<ToolTipProps> = (props) => {
+  const [isOpen, setIsOpen] = useState(false);
   return (
     <ToolTipWrapper
       style={{ marginLeft: props.marginLeft, marginTop: props.marginTop }}
     >
-      <ToolTipIcon />
+      <ToolTipIcon
+        handleTouch={() => setIsOpen(!isOpen)}
+        handleHover={setIsOpen}
+      />
+
       <ToolTipText
         style={{
+          display: isOpen ? "block" : "none",
           marginLeft: props.textMarginLeft,
           marginTop: props.textMarginTop,
         }}

diff --git a/src/components/shared/ToolTip/ToolTipIcon.tsx b/src/components/shared/ToolTip/ToolTipIcon.tsx
@@ -2,42 +2,50 @@
 import React from "react";
 import styled from "styled-components";
 
-const StyledSVG = styled.svg`
-  pointer-events: all;
+const TooltipIconButton = styled.button.attrs({
+  name: "Info om skattefradrag",
+  type: "button",
+})`
   z-index: 4;
+  pointer-events: all;
+  background: transparent;
+  border: none;
+  padding: 5px 7.5px;
+
   &:hover {
     cursor: pointer;
     opacity: 0.5;
   }
-  &:focus {
-    outline: none;
-  }
-  &:hover ~ span {
-    display: block;
-  }
-  &:focus ~ span {
-    display: block;
-  }
 `;
-
-export function ToolTipIcon() {
+interface ToolIconProps {
+  handleTouch: () => void;
+  handleHover: (open: boolean) => void;
+}
+export function ToolTipIcon({ handleTouch, handleHover }: ToolIconProps) {
   return (
-    <StyledSVG
-      onPointerOut={() => (document.activeElement as HTMLElement).blur()}
-      tabIndex={0}
-      stroke="currentColor"
-      fill="currentColor"
-      strokeWidth={0}
-      viewBox="0 0 16 16"
-      height="14px"
-      width="14px"
+    <TooltipIconButton
+      onTouchStart={handleTouch}
+      onClick={handleTouch}
+      onMouseEnter={() => handleHover(true)}
+      onMouseLeave={() => handleHover(false)}
     >
-      <path
-        fillRule="evenodd"
-        d="M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z"
-        clipRule="evenodd"
-      />
-      <path d="M5.25 6.033h1.32c0-.781.458-1.384 1.36-1.384.685 0 1.313.343 1.313 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.007.463h1.307v-.355c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.326 0-2.786.647-2.754 2.533zm1.562 5.516c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
-    </StyledSVG>
+      <svg
+        onPointerOut={() => (document.activeElement as HTMLElement).blur()}
+        tabIndex={0}
+        stroke="currentColor"
+        fill="currentColor"
+        strokeWidth={0}
+        viewBox="0 0 16 16"
+        height="14px"
+        width="14px"
+      >
+        <path
+          fillRule="evenodd"
+          d="M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z"
+          clipRule="evenodd"
+        />
+        <path d="M5.25 6.033h1.32c0-.781.458-1.384 1.36-1.384.685 0 1.313.343 1.313 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.007.463h1.307v-.355c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.326 0-2.786.647-2.754 2.533zm1.562 5.516c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
+      </svg>
+    </TooltipIconButton>
   );
 }