add-favorite-redo

example/src/components/ToggleSection/ToggleSection.js

@@ -3,6 +3,8 @@ import * as icons from '@carbon/icons-motion'
 import '@carbon/icons-motion/dist/index.css'
 
 const ToggleSection = () => {
+  const [favoriteAnimating, setFavoriteAnimating] = useState(false)
+  const [favoriteHalfAnimating, setFavoriteHalfAnimating] = useState(false)
   const [notificationAnimating, setNotificationAnimating] = useState(false)
   const [notificationFilledAnimating, setNotificationFilledAnimating] = useState(false)
 
@@ -13,6 +15,26 @@ const ToggleSection = () => {
           <h2>Toggle</h2>
         </div>
   			<ul className='bx--row'>
+          <li
+            className='icon-tile'
+            onMouseEnter={() => setFavoriteAnimating(true)}
+            onMouseLeave={() => setFavoriteAnimating(false)}
+          >
+          <h3>Favorite</h3>
+          <icons.FavoriteMotion 
+            isAnimating={favoriteAnimating} 
+            size={32} />
+          </li>
+          <li
+            className='icon-tile'
+            onMouseEnter={() => setFavoriteHalfAnimating(true)}
+            onMouseLeave={() => setFavoriteHalfAnimating(false)}
+          >
+          <h3>Favorite half</h3>
+          <icons.FavoriteHalfMotion 
+            isAnimating={favoriteHalfAnimating} 
+            size={32} />
+          </li>
   				<li
             className='icon-tile'
             onMouseEnter={() => setNotificationAnimating(true)}

src/components/Toggle/FavoriteHalfMotion/FavoriteHalfMotion.js

@@ -0,0 +1,34 @@
+import React, { useRef, useState, useEffect } from 'react'
+import styles from './favorite-half--motion.module.scss'
+
+const FavoriteHalfMotion = (props) => {
+  const iconRef = useRef(null)
+  const [isAnimating, setIsAnimating] = useState(props.isAnimating)
+
+  let iconStyles = {
+    width: props.size,
+    height: props.size
+  }
+
+  React.useEffect(() => {
+    setIsAnimating(props.isAnimating)
+  }, [props.isAnimating])
+
+  const shouldAnimate = isAnimating ? styles.isAnimating : ''
+
+  return (
+    <div ref={iconRef} className={`${shouldAnimate}`}>
+      <svg style={iconStyles} viewBox='0 0 32 32' className={styles.FavoriteHalfMotion}>
+        <title>Favorite half</title>
+        <path className={styles.FavoriteHalf} d="M22.5,6c1.5,0,2.9,0.6,3.9,1.6c2.2,2.2,2.2,5.8,0,8L16,26.1L5.6,15.6c-2.2-2.2-2.2-5.8,0-8c2.1-2.2,5.6-2.2,7.7-0.1
+    c0,0,0,0,0.1,0.1l2.5,2.6l2.5-2.6C19.6,6.6,21,6,22.5,6 M22.5,4c-2,0-3.9,0.8-5.3,2.2L16,7.4l-1.1-1.1C12,3.3,7.2,3.3,4.3,6.2
+    c0,0-0.1,0.1-0.1,0.1c-3,3-3,7.8,0,10.8L16,29l11.8-11.9c3-3,3-7.8,0-10.8C26.4,4.8,24.5,4,22.5,4z" />
+        <path className={styles.FavoriteHalfFilled } d="M4.2,17.1L16,29l11.8-11.9c2.9-3,2.9-7.8,0-10.8c-2.9-3-7.6-3-10.6-0.1c0,0-0.1,0.1-0.1,0.1L16,7.4l-1.1-1.1
+  c-2.9-3-7.6-3-10.6-0.1c0,0-0.1,0.1-0.1,0.1C1.3,9.2,1.3,14.1,4.2,17.1z M26.4,15.6L16,26.1V10.2c0.8-0.9,1.7-1.7,2.5-2.6
+  c2.1-2.2,5.6-2.2,7.7-0.1c0,0,0,0,0.1,0.1C28.5,9.9,28.5,13.4,26.4,15.6z" />
+      </svg>
+    </div>
+  )
+}
+
+export default FavoriteHalfMotion

src/components/Toggle/FavoriteHalfMotion/favorite-half--motion.module.scss

@@ -0,0 +1,57 @@
+@keyframes favorite-half {
+  0% { transform: scale(1)}
+  6% { transform: scale(.75)}
+  8% { transform: scale(.75)}
+  14% { transform: scale(1)}
+  100% { transform: scale(1)}
+}
+
+
+@keyframes favorite-half-filled {
+  0% {
+    scale: 1;
+    opacity: 0;
+  }
+  6% {
+    scale: .75;
+    opacity: 1;
+  }
+  8% {
+    scale: .75;
+    opacity: 1;
+  }
+  14% {
+    scale: 1;
+    opacity: 100;
+  }
+  100% {
+    scale: 1;
+    opacity: 100;
+  }
+}
+
+
+.FavoriteHalf {
+  transform-origin: 1rem 1rem;
+  will-change: transform;
+}
+
+.FavoriteHalfFilled {
+  transform-origin: 1rem 1rem;
+  opacity: 0;
+}
+
+
+
+.isAnimating {
+  .FavoriteHalf {
+    animation: favorite-half 2s cubic-bezier(0.2, 0, 0.38, 0.9)
+  }
+}
+
+
+.isAnimating {
+  .FavoriteHalfFilled {
+    animation: favorite-half-filled 2s cubic-bezier(0.2, 0, 0.38, 0.9)
+  }
+}

src/components/Toggle/FavoriteHalfMotion/index.js

@@ -0,0 +1,2 @@
+import FavoriteHalfMotion from './FavoriteHalfMotion';
+export default FavoriteHalfMotion;

src/components/Toggle/FavoriteMotion/FavoriteMotion.js

@@ -0,0 +1,33 @@
+import React, { useRef, useState, useEffect } from 'react'
+import styles from './favorite--motion.module.scss'
+
+const FavoriteMotion = (props) => {
+  const iconRef = useRef(null)
+  const [isAnimating, setIsAnimating] = useState(props.isAnimating)
+
+  let iconStyles = {
+    width: props.size,
+    height: props.size
+  }
+
+  React.useEffect(() => {
+    setIsAnimating(props.isAnimating)
+  }, [props.isAnimating])
+
+  const shouldAnimate = isAnimating ? styles.isAnimating : ''
+
+  return (
+    <div ref={iconRef} className={`${shouldAnimate}`}>
+      <svg style={iconStyles} viewBox='0 0 32 32' className={styles.FavoriteMotion}>
+        <title>Favorite</title>
+        <path className={styles.Favorite} d="M22.5,6c1.5,0,2.9,0.6,3.9,1.6c2.2,2.2,2.2,5.8,0,8L16,26.1L5.6,15.6c-2.2-2.2-2.2-5.8,0-8c2.1-2.2,5.6-2.2,7.7-0.1
+    c0,0,0,0,0.1,0.1l2.5,2.6l2.5-2.6C19.6,6.6,21,6,22.5,6 M22.5,4c-2,0-3.9,0.8-5.3,2.2L16,7.4l-1.1-1.1C12,3.3,7.2,3.3,4.3,6.2
+    c0,0-0.1,0.1-0.1,0.1c-3,3-3,7.8,0,10.8L16,29l11.8-11.9c3-3,3-7.8,0-10.8C26.4,4.8,24.5,4,22.5,4z" />
+        <path className={styles.FavoriteFilled } d="M22.5,4c-2,0-3.9,0.8-5.3,2.2L16,7.4l-1.1-1.1c-2.9-3-7.7-3-10.6-0.1L4.2,6.3c-3,3-3,7.8,0,10.8L16,29l11.8-11.9
+  c3-3,3-7.8,0-10.8C26.4,4.8,24.5,4,22.5,4z" />
+      </svg>
+    </div>
+  )
+}
+
+export default FavoriteMotion

src/components/Toggle/FavoriteMotion/favorite--motion.module.scss

@@ -0,0 +1,57 @@
+@keyframes favorite {
+  0% { transform: scale(1)}
+  6% { transform: scale(.75)}
+  8% { transform: scale(.75)}
+  14% { transform: scale(1)}
+  100% { transform: scale(1)}
+}
+
+
+@keyframes favorite-filled {
+  0% {
+    scale: 1;
+    opacity: 0;
+  }
+  6% {
+    scale: .75;
+    opacity: 1;
+  }
+  8% {
+    scale: .75;
+    opacity: 1;
+  }
+  14% {
+    scale: 1;
+    opacity: 100;
+  }
+  100% {
+    scale: 1;
+    opacity: 100;
+  }
+}
+
+
+.Favorite {
+  transform-origin: 1rem 1rem;
+  will-change: transform;
+}
+
+.FavoriteFilled {
+  transform-origin: 1rem 1rem;
+  opacity: 0;
+}
+
+
+
+.isAnimating {
+  .Favorite {
+    animation: favorite 2s cubic-bezier(0.2, 0, 0.38, 0.9)
+  }
+}
+
+
+.isAnimating {
+  .FavoriteFilled {
+    animation: favorite-filled 2s cubic-bezier(0.2, 0, 0.38, 0.9)
+  }
+}

src/components/Toggle/FavoriteMotion/index.js

@@ -0,0 +1,2 @@
+import FavoriteMotion from './FavoriteMotion';
+export default FavoriteMotion;

src/components/Toggle/index.js

@@ -1,7 +1,11 @@
+import FavoriteMotion from './FavoriteMotion'
+import FavoriteHalfMotion from './FavoriteHalfMotion'
 import NotificationMotion from './NotificationMotion'
 import NotificationFilledMotion from './NotificationFilledMotion'
 
 export {
+  FavoriteMotion,
+  FavoriteHalfMotion,
   NotificationMotion,
   NotificationFilledMotion,
 }

src/index.js

@@ -135,6 +135,8 @@ export {
 
 
 export {
+  FavoriteMotion,
+  FavoriteHalfMotion,
   NotificationMotion,
   NotificationFilledMotion,
 } from './components/Toggle'