DO NOT MERGE add toggle for star (#272)

* add toggle for star

* hide toggle section temporarily

* remove unused import

Author: kristastarr

example/src/components/ToggleSection/ToggleSection.js

@@ -6,7 +6,11 @@ import styles from "./toggle-section.module.scss";
 const ToggleSection = () => {
   const [notificationAnimating, setNotificationAnimating] = useState(false)
   const [notificationFilledAnimating, setNotificationFilledAnimating] = useState(false)
-  const [starAnimating, setStarAnimating] = useState(false)
+  const [ starFilled, setStarFilled ] = useState(false)
+
+
+  const toggleStar = () => { setStarFilled(!starFilled); console.log(starFilled) };
+  // const toggleStarClass = starFilled ? styles.StarFilled : styles.Unfilled 
 
 	return (
 		<section className="icon-section">	
@@ -15,39 +19,39 @@ const ToggleSection = () => {
           <h2>Toggle</h2>
         </div>
   			<ul className='bx--row'>
-        <div className={styles.RowContainer}>
-  				<li
-            className='icon-tile'
-            onMouseEnter={() => setNotificationAnimating(true)}
-            onMouseLeave={() => setNotificationAnimating(false)}
-          >
-          <h3>Notification</h3>
-          <icons.NotificationMotion 
-            isAnimating={notificationAnimating} 
-            size={32} />
-          </li>
-          <li
-            className='icon-tile'
-            onMouseEnter={() => setNotificationFilledAnimating(true)}
-            onMouseLeave={() => setNotificationFilledAnimating(false)}
-          >
-          <h3>Notification filled</h3>
-          <icons.NotificationFilledMotion 
-            isAnimating={notificationFilledAnimating} 
-            size={32} />
-          </li>
-          <li
-            className='icon-tile'
-            onMouseEnter={() => setStarAnimating(true)}
-            onMouseLeave={() => setStarAnimating(false)}
-          >
-          <h3>Star</h3>
-          <icons.StarMotion 
-            isAnimating={starAnimating} 
-            size={32} />
-          </li>
-          </div>
-  		  </ul>
+          <div className={styles.RowContainer}>
+    				<li
+              className='icon-tile'
+              onMouseEnter={() => setNotificationAnimating(true)}
+              onMouseLeave={() => setNotificationAnimating(false)}
+            >
+              <h3>Notification</h3>
+              <icons.NotificationMotion 
+                isAnimating={notificationAnimating} 
+                size={32} />
+            </li>
+            <li
+              className='icon-tile'
+              onMouseEnter={() => setNotificationFilledAnimating(true)}
+              onMouseLeave={() => setNotificationFilledAnimating(false)}
+            >
+              <h3>Notification filled</h3>
+              <icons.NotificationFilledMotion 
+                isAnimating={notificationFilledAnimating} 
+                size={32} />
+            </li>
+            <li
+              className='icon-tile'
+            >
+              <h3>Star</h3>
+              <div onClick = { () => toggleStar() }> 
+                <icons.StarMotion
+                  fillStatus = { starFilled }
+                  size={32} />
+                </div> 
+            </li>
+            </div>
+    		  </ul>
 		  </div>
 		</section>
 	)

example/src/pages/CollectionPage/CollectionPage.js

@@ -2,7 +2,7 @@ import React from 'react'
 import FormattingSection from '../../components/FormattingSection'
 import NavigationSection from '../../components/NavigationSection'
 import OperationsSection from '../../components/OperationsSection'
-import ToggleSection from '../../components/ToggleSection'
+// import ToggleSection from '../../components/ToggleSection'
 import StatusSection from '../../components/StatusSection'
 
 import '../../app.scss'
@@ -18,7 +18,7 @@ const CollectionPage = () => {
       <FormattingSection></FormattingSection>
       <NavigationSection></NavigationSection>
       <OperationsSection></OperationsSection>
-      <ToggleSection></ToggleSection>
+      {/*<ToggleSection></ToggleSection>*/}
       <StatusSection></StatusSection>
     </div>
   )

src/components/Toggle/StarMotion/StarMotion.js

@@ -3,26 +3,27 @@ import styles from './star--motion.module.scss'
 
 const StarMotion = (props) => {
   const iconRef = useRef(null)
-  const [isAnimating, setIsAnimating] = useState(props.isAnimating)
+  const [ starFilled, setStarFilled ] = useState(props.fillStatus)
 
   let iconStyles = {
     width: props.size,
     height: props.size
   }
-
+  
   React.useEffect(() => {
-    setIsAnimating(props.isAnimating)
-  }, [props.isAnimating])
+    setStarFilled(props.fillStatus)
+  }, [props.fillStatus])
 
-  const shouldAnimate = isAnimating ? styles.isAnimating : ''
+  const toggleStarBorderClass = starFilled ? styles.StarBorderFilled :  styles.StarBorderUnfilled; 
+  const toggleStarInnerClass = starFilled ? styles.StarInnerFilled : styles.StarInnerUnfilled;
 
   return (
-    <div ref={iconRef} className={`${shouldAnimate}`}>
-      <svg style={iconStyles} viewBox='0 0 32 32' className={styles.StarMotion}>
+    <div ref={iconRef}>
+      <svg style={iconStyles} viewBox='0 0 32 32'>
         <title>Star</title>
-        <path className={styles.Star} d="M16,6.5l2.8,5.6l0.5,1l1,0.1l6.2,0.9L22,18.4l-0.8,0.7l0.2,1l1,6.1L17,23.4L16,23l-0.9,0.5l-5.5,2.9l1-6.1l0.2-1L10,18.4
+        <path className={` ${toggleStarBorderClass}`} d="M16,6.5l2.8,5.6l0.5,1l1,0.1l6.2,0.9L22,18.4l-0.8,0.7l0.2,1l1,6.1L17,23.4L16,23l-0.9,0.5l-5.5,2.9l1-6.1l0.2-1L10,18.4
 	l-4.4-4.4l6.2-0.9l1-0.1l0.5-1L16,6.5 M16,2l-4.6,9.2L1.3,12.7l7.4,7.2L6.9,30l9.1-4.8l9.1,4.8l-1.7-10.1l7.4-7.2l-10.2-1.5L16,2z" />
-        <path className={styles.StarFilled } d="M16,2l-4.6,9.2L1.3,12.7l7.4,7.2L6.9,30l9.1-4.8l9.1,4.8l-1.7-10.1l7.4-7.2l-10.2-1.5L16,2z" />
+        <path className={` ${toggleStarInnerClass}`} d="M16,2l-4.6,9.2L1.3,12.7l7.4,7.2L6.9,30l9.1-4.8l9.1,4.8l-1.7-10.1l7.4-7.2l-10.2-1.5L16,2z" />
       </svg>
     </div>
   )

src/components/Toggle/StarMotion/star--motion.module.scss

@@ -6,7 +6,6 @@
   100% { transform: scale(1)}
 }
 
-
 @keyframes star-filled {
   0% {
     scale: 1;
@@ -30,28 +29,22 @@
   }
 }
 
-
-.Star {
-  transform-origin: 1rem 1rem;
-  will-change: transform;
+.StarBorderUnfilled {
+  transform-origin: 50% 50%;
+  transform: scale(1);
 }
 
-.StarFilled {
-  transform-origin: 1rem 1rem;
-  opacity: 0;
+.StarBorderFilled {
+   transform-origin: 50% 50%;
+   animation: star 2s cubic-bezier(0.2, 0, 0.38, 0.9)
 }
 
-
-
-.isAnimating {
-  .Star {
-    animation: star 2s cubic-bezier(0.2, 0, 0.38, 0.9)
-  }
+.StarInnerUnfilled {
+  opacity: 0;
+  transform-origin: 50% 50%;
 }
 
-
-.isAnimating {
-  .StarFilled {
-    animation: star-filled 2s cubic-bezier(0.2, 0, 0.38, 0.9)
-  }
+.StarInnerFilled {
+  transform-origin: 50% 50%;
+  animation: star-filled 2s cubic-bezier(0.2, 0, 0.38, 0.9)
 }