Merge pull request #1746 from SpareBank1/tommel-fra-svgr-komponenter

Tommel fra svgr-komponenter i ffe-feedback
SpareBank1 · Jan 12, 2024 · 8eafe18 · 8eafe18
2 parents 128abe2 + 201c34a
commit 8eafe18
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 27 deletions.
diff --git a/packages/ffe-feedback-react/package.json b/packages/ffe-feedback-react/package.json
@@ -30,7 +30,6 @@
         "@sb1/ffe-core-react": "^7.1.4",
         "@sb1/ffe-feedback": "^1.1.0",
         "@sb1/ffe-form-react": "^14.0.8",
-        "@sb1/ffe-symbols-react": "^3.0.2",
         "classnames": "^2.3.1",
         "lottie-web": "^5.12.2",
         "uuid": "^9.0.0"

diff --git a/packages/ffe-feedback-react/src/feedback-thumbs.js b/packages/ffe-feedback-react/src/feedback-thumbs.js
@@ -1,25 +1,14 @@
 import React from 'react';
-import Symbol from '@sb1/ffe-symbols-react';
 import i18n from './i18n/i18n';
 import { func, oneOf } from 'prop-types';
+import { ThumbUp, ThumbUpFill, ThumbDown, ThumbDownFill } from './icons';
 
 export const Thumbs = {
     UP: 'THUMB_UP',
     DOWN: 'THUMB_DOWN',
 };
-const THUMB_SIZE = '2xl';
 
 const FeedbackThumbs = ({ language, onClick }) => {
-    const handleMouseEnter = event => {
-        // eslint-disable-next-line no-param-reassign
-        event.target.className = `ffe-symbol ffe-symbol--filled-400 ffe-symbol--${THUMB_SIZE}`;
-    };
-
-    const handleMouseLeave = event => {
-        // eslint-disable-next-line no-param-reassign
-        event.target.className = `ffe-symbol ffe-symbol--400 ffe-symbol--${THUMB_SIZE}`;
-    };
-
     return (
         <div>
             <button
@@ -28,25 +17,17 @@ const FeedbackThumbs = ({ language, onClick }) => {
                 className="ffe-feedback__thumb"
                 onClick={() => onClick(Thumbs.UP)}
             >
-                <Symbol
-                    onMouseEnter={handleMouseEnter}
-                    onMouseLeave={handleMouseLeave}
-                    size={THUMB_SIZE}
-                    icon="thumb_up"
-                />
+                <ThumbUp className="ffe-feedback__thumb-icon" />
+                <ThumbUpFill className="ffe-feedback__thumb-icon--fill" />
             </button>
             <button
                 aria-label={i18n[language].ARIA_LABEL_THUMB_DOWN}
                 aria-describedby="feedback-heading"
                 className="ffe-feedback__thumb"
                 onClick={() => onClick(Thumbs.DOWN)}
             >
-                <Symbol
-                    onMouseEnter={handleMouseEnter}
-                    onMouseLeave={handleMouseLeave}
-                    size={THUMB_SIZE}
-                    icon="thumb_down"
-                />
+                <ThumbDown className="ffe-feedback__thumb-icon" />
+                <ThumbDownFill className="ffe-feedback__thumb-icon--fill" />
             </button>
         </div>
     );

diff --git a/packages/ffe-feedback-react/src/icons/index.js b/packages/ffe-feedback-react/src/icons/index.js
@@ -0,0 +1,4 @@
+export { default as ThumbUp } from './thumb-up';
+export { default as ThumbUpFill } from './thumb-up-fill';
+export { default as ThumbDown } from './thumb-down';
+export { default as ThumbDownFill } from './thumb-down-fill';
diff --git a/packages/ffe-feedback-react/src/icons/thumb-down-fill.js b/packages/ffe-feedback-react/src/icons/thumb-down-fill.js
@@ -0,0 +1,13 @@
+import * as React from 'react';
+const ThumbDownFill = props => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={48}
+        height={48}
+        viewBox="0 -960 960 960"
+        {...props}
+    >
+        <path d="M239-840h467v512L428-40l-33-26q-11-8-14.5-18t-3.5-23v-10l45-211H100q-23 0-41.5-18.5T40-388v-82q0-11 2.5-25.5T50-521l116-268q9-21 29.5-36t43.5-15m527 512v-512h114v512z" />
+    </svg>
+);
+export default ThumbDownFill;
diff --git a/packages/ffe-feedback-react/src/icons/thumb-down.js b/packages/ffe-feedback-react/src/icons/thumb-down.js
@@ -0,0 +1,13 @@
+import * as React from 'react';
+const ThumbDown = props => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={48}
+        height={48}
+        viewBox="0 -960 960 960"
+        {...props}
+    >
+        <path d="M105-328q-24 0-42-18t-18-42v-81.839Q45-477 43.5-484.5T45-499l126-290q8.878-21.25 29.595-36.125T244-840h444v512L463-90q-13.6 14-32.187 16.5T395-81q-17-10-25.5-27.5t-4.2-36.5L404-328zm523-25v-427H231L105-481v93h373l-53 249zm193-487q24.75 0 42.375 17.625T881-780v392q0 24.75-17.625 42.375T821-328H688v-60h133v-392H688v-60zm-193 60v427z" />
+    </svg>
+);
+export default ThumbDown;
diff --git a/packages/ffe-feedback-react/src/icons/thumb-up-fill.js b/packages/ffe-feedback-react/src/icons/thumb-up-fill.js
@@ -0,0 +1,13 @@
+import * as React from 'react';
+const ThumbUpFill = props => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={48}
+        height={48}
+        viewBox="0 -960 960 960"
+        {...props}
+    >
+        <path d="M860-632q23 0 41.5 18.5T920-572v82q0 11-2.5 25.5T910-439L794-171q-9 21-29.5 36T721-120H314q-25 0-42.5-17.5T254-180v-428q0-11 4.5-22t12.5-19l207-218q14-14 33.5-17t36.5 7 25.5 28 4.5 37l-38 180zM137-120q-23 0-40-17t-17-40v-398q0-23 17-40t40-17 40 17 17 40v398q0 23-17 40t-40 17" />
+    </svg>
+);
+export default ThumbUpFill;
diff --git a/packages/ffe-feedback-react/src/icons/thumb-up.js b/packages/ffe-feedback-react/src/icons/thumb-up.js
@@ -0,0 +1,13 @@
+import * as React from 'react';
+const ThumbUp = props => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={48}
+        height={48}
+        viewBox="0 -960 960 960"
+        {...props}
+    >
+        <path d="M855-632q24 0 42 18t18 42v81.839q0 7.161 1.5 14.661T915-461L789-171q-8.878 21.25-29.595 36.125T716-120H272v-512l225-238q13.6-14 32.187-16.5T565-879q17 10 25.5 27.5t4.2 36.5L556-632zm-523 25v427h397l126-299v-93H482l53-249zM139-120q-24.75 0-42.375-17.625T79-180v-392q0-24.75 17.625-42.375T139-632h133v60H139v392h133v60zm193-60v-427z" />
+    </svg>
+);
+export default ThumbUp;
diff --git a/packages/ffe-feedback/less/feedback-thumb.less b/packages/ffe-feedback/less/feedback-thumb.less
@@ -3,12 +3,25 @@
         border: none;
         background: none;
         cursor: pointer;
-        color: var(--ffe-farge-fjell);
+        fill: var(--ffe-farge-fjell);
         margin: 0 @ffe-spacing-xs;
 
         @media (prefers-color-scheme: dark) {
             body.native & {
-                color: var(--ffe-farge-vann-70);
+                fill: var(--ffe-farge-vann-70);
+            }
+        }
+
+        .ffe-feedback__thumb-icon--fill {
+            display: none;
+        }
+
+        &:hover {
+            .ffe-feedback__thumb-icon--fill {
+                display: block;
+            }
+            .ffe-feedback__thumb-icon {
+                display: none;
             }
         }
     }