Merge pull request #60 from FDMediagroep/develop

v0.4.18

Author: willemliufdmg

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fdmg/design-system",
-    "version": "0.4.17",
+    "version": "0.4.18",
     "description": "FD Design System",
     "types": "main.d.ts",
     "main": "main.js",

src/components/Tooltip.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import styles from './Tooltip.module.scss';
 import TooltipStore from '../stores/TooltipStore';
 
@@ -17,33 +17,41 @@ export interface Summary {
     borderLeftColor?: Token;
 }
 
-interface Props {
-    title: string;
-    description: Summary;
-}
+function Tooltip() {
+    const [tooltipSummary, setTooltipSummary] = useState<Summary>(null);
+
+    useEffect(() => {
+        const tooltipSubscriptionId = TooltipStore.subscribe(() => {
+            setTooltipSummary(TooltipStore.getSummary());
+        });
+        setTooltipSummary(TooltipStore.getSummary());
+
+        return () => {
+            TooltipStore.unsubscribe(tooltipSubscriptionId);
+        };
+    }, []);
 
-function Tooltip(props: Props) {
     function handleClick() {
         TooltipStore.setSummary(null);
     }
 
-    return (
+    return tooltipSummary ? (
         <div className={styles.tooltip} onClick={handleClick}>
-            <h3>{props.title}</h3>
+            <h3>Design Tokens</h3>
             {styleProps.map((styleProp) => {
-                if (props.description && props.description[styleProp]) {
+                if (tooltipSummary[styleProp]) {
                     return (
                         <fieldset key={styleProp}>
                             <legend>{styleProp}</legend>
-                            <p>{props?.description?.[styleProp]?.name}</p>
-                            <p>{props?.description?.[styleProp]?.rgb}</p>
-                            <p>{props?.description?.[styleProp]?.hex}</p>
+                            <p>{tooltipSummary?.[styleProp]?.name}</p>
+                            <p>{tooltipSummary?.[styleProp]?.rgb}</p>
+                            <p>{tooltipSummary?.[styleProp]?.hex}</p>
                         </fieldset>
                     );
                 }
             })}
         </div>
-    );
+    ) : null;
 }
 
 const styleProps = [

src/pages/_app.tsx

@@ -6,10 +6,8 @@ import { Menu } from '../components/Menu';
 import PageStore, { Page } from '../stores/PageStore';
 import Head from 'next/head';
 import { Tooltip } from '../components/Tooltip';
-import TooltipStore from '../stores/TooltipStore';
 
 function App({ Component, pageProps }) {
-    const [tooltipSummary, setTooltipSummary] = useState(null);
     const [pageType, setPageType] = useState<Page>(PageStore.getPageType());
     const [pageStyle, setPageStyle] = useState(styles.overview);
     const darkModeMediaQuery =
@@ -28,14 +26,8 @@ function App({ Component, pageProps }) {
         });
         setPageType(PageStore.getPageType());
 
-        const tooltipSubscriptionId = TooltipStore.subscribe(() => {
-            setTooltipSummary(TooltipStore.getSummary());
-        });
-        setTooltipSummary(TooltipStore.getSummary());
-
         return () => {
             PageStore.unsubscribe(subscriptionId);
-            TooltipStore.unsubscribe(tooltipSubscriptionId);
         };
     }, []);
 
@@ -65,12 +57,7 @@ function App({ Component, pageProps }) {
                 <main>
                     <Component {...pageProps} />
                 </main>
-                {tooltipSummary && (
-                    <Tooltip
-                        title="Design Tokens"
-                        description={tooltipSummary}
-                    />
-                )}
+                <Tooltip />
             </section>
         </>
     );

src/utils/designTokensTooltip.ts

@@ -79,14 +79,21 @@ function tooltipHandler(e: MouseEvent) {
 
 const register = [];
 
+function handleMouseOut() {
+    TooltipStore.setSummary(null);
+}
+
 export function clearDesignTokensTooltips() {
     register.forEach((el) => {
+        el.removeEventListener('mouseout', handleMouseOut);
         el.removeEventListener('mouseover', tooltipHandler);
     });
+    TooltipStore.setSummary(null);
 }
 
 export function initializeDesignTokensTooltip(el: HTMLElement) {
     if (window.getComputedStyle) {
+        el.addEventListener('mouseout', handleMouseOut);
         el.addEventListener('mouseover', tooltipHandler);
         register.push(el);
     }