Add neutral animation

widget/react/src/component/tabs/emotion/Neutral.module.scss

@@ -1,11 +1,85 @@
-.Face {
-  filter: grayscale(100%);
-  width: 50px;
+$face-color-grey: #ebebeb;
+$face-color-yellow: #ffef85;
+$eye-color-grey: #919191;
+$eye-color-black: #636363;
 
-  &.active, &:hover {
+.face {
+  &__background {
+    fill: $face-color-grey;
+    transition: 1s;
+  }
+  &__eyesAndMouth {
+    fill: $eye-color-grey;
+    transition: 0.7s;
+    animation: eyesAndMouthExit 0.7s ease;
+  }
+  &:hover {
     cursor: pointer;
-    filter: none;
-    transform: scale(1.3);
-    transition: all 200ms ease-in-out;
+  }
+  &:hover & {
+    &__background {
+      fill: $face-color-yellow;
+      transition: 0.3s;
+    }
+    &__eyesAndMouth {
+      fill: $eye-color-black;
+      animation:
+        eyesAndMouthEnter 1s 0.2s ease,
+        eyesAndMouthLoop 5s 1.2s ease infinite;
+    }
+  }
+  &_active & {
+    &__background {
+      fill: $face-color-yellow;
+    }
+    &__eyesAndMouth {
+      fill: $eye-color-black;
+    }
+  }
+}
+
+@keyframes eyesAndMouthEnter {
+  50% {
+    transform: translate(-7px, 0px);
+  }
+  100% {
+    transform: translate(-7px, 0px);
+  }
+}
+@keyframes eyesAndMouthLoop {
+  0% {
+    transform: translate(-7px, 0px);
+  }
+  15% {
+    transform: translate(0px, 0px);
+  }
+  25% {
+    transform: translate(0px, 0px);
+  }
+  35% {
+    transform: translate(7px, 0px);
+  }
+  55% {
+    transform: translate(7px, 0px);
+  }
+  65% {
+    transform: translate(0px, 0px);
+  }
+  75% {
+    transform: translate(0px, 0px);
+  }
+  85% {
+    transform: translate(-7px, 0px);
+  }
+  100% {
+    transform: translate(-7px, 0px);
+  }
+}
+@keyframes eyesAndMouthExit {
+  from {
+    transform: var(--transformExitValue);
+  }
+  to {
+    transform: translate(0px, 0px);
   }
 }

widget/react/src/component/tabs/emotion/Neutral.tsx

@@ -1,24 +1,51 @@
-import React, { Component } from 'react';
+import React, {Component, createRef} from 'react';
 
-import neutral from './neutral.svg';
 import classNames from 'classnames';
 import styles from './Neutral.module.scss';
+import './Neutral.module.scss';
 
 interface IProp {
   isActive: boolean;
 }
 
+const neutralMouthSVGPath = "M38.6,65.7h22.5c1.2,0,2.2,1.1,2.2,2.5l0,0c0,1.4-1,2.5-2.2,2.5H38.6c-1.2,"
+  + "0-2.2-1.1-2.2-2.5l0,0 C36.3,66.8,37.3,65.7,38.6,65.7z";
+
 export class Neutral extends Component<IProp> {
+  private svgRef = createRef<SVGSVGElement>();
+
+  componentDidMount(): void {
+    requestAnimationFrame(this.updateValue);
+  }
+
+  updateValue = () => {
+    const eyesAndMouthElements = this.svgRef.current!
+      .querySelectorAll<HTMLElement>('.face__eyesAndMouth');
+    if (!eyesAndMouthElements) {
+      return;
+    }
+    const eyesAndMouthTransformValue = getComputedStyle(eyesAndMouthElements[0]).transform;
+    for (let i = 0; i < eyesAndMouthElements.length; i++) {
+      eyesAndMouthElements[i].style
+        .setProperty('--transformExitValue', eyesAndMouthTransformValue);
+    }
+    requestAnimationFrame(this.updateValue);
+  };
+
   render() {
-    // TODO: replace with animation
     return (
-      <img
-        className={classNames({
-          [styles.Face]: true,
-          [styles.active]: this.props.isActive
+      <svg
+        className={classNames(`${styles.face}`, {
+          [`${styles.face_active}`]: this.props.isActive
         })}
-        src={neutral}
-      />
+        ref={this.svgRef}
+        width="60" height="60" viewBox="0 0 100 100"
+      >
+        <circle className={`${styles.face__background}`} cx="49.5" cy="49.5" r="49.5"/>
+        <circle className={`${styles.face__eyesAndMouth} face__eyesAndMouth`} cx="21.6" cy="50.7" r="6"/>
+        <circle className={`${styles.face__eyesAndMouth} face__eyesAndMouth`} cx="77.4" cy="50.7" r="6"/>
+        <path className={`${styles.face__eyesAndMouth} face__eyesAndMouth`} d={neutralMouthSVGPath}/>
+      </svg>
     );
   }
 }