fix(Button): disable timeout onUnmount 87d9ac4

package.json

@@ -19,7 +19,7 @@
     "contributors:generate": "all-contributors generate",
     "lint": "eslint src",
     "precommit": "lint-staged && yarn lint",
-    "prepublish": "yarn build",
+    "prepare": "yarn build",
     "prettier": "prettier --write \"**/*.{scss,css,js}\"",
     "prettier:staged": "prettier",
     "prettier:diff": "prettier --list-different \"**/*.{scss,css,js}\"",

src/components/Button/Button.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Icon from '../Icon';
 import classNames from 'classnames';
 import { ButtonTypes } from '../../prop-types/types';
@@ -21,6 +21,13 @@ const Button = ({
 }) => {
   const [count, setCount] = useState(0);
 
+  useEffect(() => {
+    let timer = setTimeout(() => endAnimation(), 500);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [count]);
+
   const buttonClasses = classNames(className, {
     'wfp--btn': true,
     'wfp--btn--sm': small,
@@ -60,7 +67,6 @@ const Button = ({
       onClick(e);
     }
     setCount(true);
-    setTimeout(endAnimation, 500);
   };
 
   const button = (
@@ -73,6 +79,7 @@ const Button = ({
       ref={other.inputref}>
       {children}
       {buttonImage}
+      {count}
     </button>
   );
 

src/documentation/Intro/_intro.scss

@@ -26,6 +26,9 @@ $css--reset: false;
   align-items: center;
   justify-content: center;
   position: relative;
+  margin-top: -5vw;
+  background: rgba(#fff, 0.02);
+  box-shadow: 0px 15px 15px -7px rgba(#000, 0.2);
   .intro-animation--mobile & {
     width: 15vw;
     height: 25vw;
@@ -48,6 +51,7 @@ $css--reset: false;
   color: #fff;
   position: absolute;
   top: 50%;
+  margin-top: -3vw;
   transition: all 0.5s;
   transition-timing-function: ease-in-out;
   display: flex;
@@ -92,7 +96,7 @@ $css--reset: false;
 
 .intro__links {
   position: absolute;
-  bottom: 10vh;
+  bottom: 13vh;
   left: 0;
   width: 100%;
   display: flex;

src/documentation/Usage/UsageDevelopers-story.js

@@ -14,7 +14,8 @@ storiesOf(' Design|Getting started', module)
   .add('Developers', () => (
     <Page title="Usage for Developers" subTitle="How to use the UI Kit">
       <p>
-        The UI Kit provides developers with React.js components, scss, css, html
+        The UI Kit provides developers with React.js components, scss,{' '}
+        <Link onClick={linkTo('Design|Getting started', 'CSS')}>css</Link>, html
         and assets.
       </p>
       <h3>Getting started with react.js</h3>