add first round of lottie toggle icons

example/package.json

@@ -15,6 +15,7 @@
     "carbon-components": "file:../node_modules/carbon-components",
     "carbon-components-react": "file:../node_modules/carbon-components-react",
     "carbon-icons": "file:../node_modules/carbon-icons",
+    "lottie-web": "^5.12.2",
     "react": "file:../node_modules/react",
     "react-dom": "file:../node_modules/react-dom",
     "react-router-dom": "^5.0.0",

example/src/app.scss

@@ -24,6 +24,24 @@
 	animation: 0.2s fade-in 0.38s forwards ease-in;
 }
 
+.lottie-icon-tile {
+	margin: 0px;
+	padding: 12px;
+	background-color: #f4f4f4;
+	border: 1px solid #e0e0e0;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	justify-content: space-between;
+	cursor: pointer;
+	opacity: 0;
+	animation: 0.2s fade-in 0.38s forwards ease-in;
+}
+
+.lottie-icon-tile  > div {
+ 	margin: 48px 0 54px 54px;
+}
+
 .toggle-icon-tile {
 	height: 180px;
 	width: 178px;

example/src/components/LottieEventsSection/LottieEventsSection.js

@@ -0,0 +1,125 @@
+import React, { useState } from 'react'
+import * as icons from '@carbon/icons-motion'
+import '@carbon/icons-motion/dist/index.css'
+
+const LottieSection = () => {
+
+  const [cleanLottieAnimating, setCleanLottieAnimating] = useState(null)
+  const [cropLottieAnimating, setCropLottieAnimating] = useState(null)
+  const [exploreLottieAnimating, setExploreLottieAnimating] = useState(null)
+  // const [asleepToggleOn, setAsleepToggleOn] = useState(null)
+  // const [asleepAwakeToggleOn, setAsleepAwakeToggleOn] = useState(null)
+  // const [asleepToggleOn, setAsleepToggleOn] = useState(null)
+  // const [asleepAwakeToggleOn, setAsleepAwakeToggleOn] = useState(null)
+  // const [asleepToggleOn, setAsleepToggleOn] = useState(null)
+  // const [asleepAwakeToggleOn, setAsleepAwakeToggleOn] = useState(null)
+  // const [asleepToggleOn, setAsleepToggleOn] = useState(null)
+  // const [asleepAwakeToggleOn, setAsleepAwakeToggleOn] = useState(null)
+  // const [asleepToggleOn, setAsleepToggleOn] = useState(null)
+
+  return (
+    <section className='icon-section'>
+      <div className='bx--grid'>
+        <div className='bx--row'>
+        	<h2>Lottie events</h2>
+        	<ul className='bx--row icon-tiles-grid'>
+
+        		<li className='lottie-icon-tile'
+              	onClick={() => setCleanLottieAnimating(true)}
+          		>
+          		<h3>Clean</h3>
+        			<icons.CleanLottieEvent  width={32} height={32} toggleOn={cleanLottieAnimating} loop={false}/>
+        		</li>
+
+        		<li className='lottie-icon-tile'
+              	onClick={() => setCropLottieAnimating(true)}
+          		>
+          		<h3>Crop</h3>
+        			<icons.CropLottieEvent  width={32} height={32} toggleOn={cropLottieAnimating} loop={false}/>
+        		</li>
+
+            <li className='lottie-icon-tile'
+                onClick={() => setExploreLottieAnimating(true)}
+              >
+              <h3>Explore</h3>
+              <icons.ExploreLottieEvent  width={32} height={32} toggleOn={exploreLottieAnimating} loop={false}/>
+            </li>
+
+       {/*     <li className='lottie-icon-tile'
+                onClick={() => setAsleepAwakeToggleOn(!asleepAwakeToggleOn)}
+              >
+              <h3>Filter</h3>
+              <icons.FilterLottieEvent  width={32} height={32} toggleOn={asleepAwakeToggleOn} loop={false}/>
+            </li>
+
+             <li className='lottie-icon-tile'
+                onClick={() => setAsleepAwakeToggleOn(!asleepAwakeToggleOn)}
+              >
+              <h3>FilterReset</h3>
+              <icons.FilterResetLottieEvent  width={32} height={32} toggleOn={asleepAwakeToggleOn} loop={false}/>
+            </li>
+
+            <li className='lottie-icon-tile'
+                onClick={() => setAsleepAwakeToggleOn(!asleepAwakeToggleOn)}
+              >
+              <h3>Globe</h3>
+              <icons.GlobeLottieEvent  width={32} height={32} toggleOn={asleepAwakeToggleOn} loop={false}/>
+            </li>
+
+             <li className='lottie-icon-tile'
+                onClick={() => setAsleepAwakeToggleOn(!asleepAwakeToggleOn)}
+              >
+              <h3>Magic wand</h3>
+              <icons.MagicWandLottieEvent  width={32} height={32} toggleOn={asleepAwakeToggleOn} loop={false}/>
+            </li>
+
+             <li className='lottie-icon-tile'
+                onClick={() => setAsleepAwakeToggleOn(!asleepAwakeToggleOn)}
+              >
+              <h3>Model</h3>
+              <icons.ModelLottieEvent  width={32} height={32} toggleOn={asleepAwakeToggleOn} loop={false}/>
+            </li>
+
+            <li className='lottie-icon-tile'
+                onClick={() => setAsleepAwakeToggleOn(!asleepAwakeToggleOn)}
+              >
+              <h3>Recently viewed</h3>
+              <icons.RecentlyViewedLottieEvent  width={32} height={32} toggleOn={asleepAwakeToggleOn} loop={false}/>
+            </li>
+
+            <li className='lottie-icon-tile'
+                onClick={() => setAsleepAwakeToggleOn(!asleepAwakeToggleOn)}
+              >
+              <h3>Reply</h3>
+              <icons.ReplyLottieEvent  width={32} height={32} toggleOn={asleepAwakeToggleOn} loop={false}/>
+            </li>
+
+             <li className='lottie-icon-tile'
+                onClick={() => setAsleepAwakeToggleOn(!asleepAwakeToggleOn)}
+              >
+              <h3>Reply all</h3>
+              <icons.ReplyAllLottieEvent  width={32} height={32} toggleOn={asleepAwakeToggleOn} loop={false}/>
+            </li>
+
+            <li className='lottie-icon-tile'
+                onClick={() => setAsleepAwakeToggleOn(!asleepAwakeToggleOn)}
+              >
+              <h3>Scan alt</h3>
+              <icons.ScanAltLottieEvent  width={32} height={32} toggleOn={asleepAwakeToggleOn} loop={false}/>
+            </li>
+
+            <li className='lottie-icon-tile'
+                onClick={() => setAsleepAwakeToggleOn(!asleepAwakeToggleOn)}
+              >
+              <h3>View</h3>
+              <icons.ViewLottieEvent  width={32} height={32} toggleOn={asleepAwakeToggleOn} loop={false}/>
+            </li>
+*/}
+	       	</ul>
+		    </div>
+	    </div>
+  	</section>
+  )
+}
+
+export default LottieSection

example/src/components/LottieEventsSection/index.js

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

example/src/components/LottieSection/LottieSection.js

@@ -0,0 +1,117 @@
+import React, { useState } from 'react'
+import * as icons from '@carbon/icons-motion'
+import '@carbon/icons-motion/dist/index.css'
+
+const LottieSection = () => {
+
+  const [asleepAwakeToggleOn, setAsleepAwakeToggleOn] = useState(null)
+  const [asleepToggleOn, setAsleepToggleOn] = useState(null)
+  const [carouselToggleOn, setCarouselToggleOn] = useState(null)
+  const [favoriteToggleOn, setFavoriteToggleOn] = useState(null)
+	const [gridListToggleOn, setGridListToggleOn] = useState(null)
+	const [lightToggleOn, setLightToggleOn] = useState(null)
+	const [lockUnlockToggleOn, setLockUnlockToggleOn] = useState(null)
+	const [lockUnlockTwoToggleOn, setLockUnlockTwoToggleOn] = useState(null)
+	const [notificationNewToggleOn, setNotificationNewToggleOn] = useState(null)
+	const [notificationOnOffToggleOn, setNotificationOnOffToggleOn] = useState(null)
+	const [starToggleOn, setStarToggleOn] = useState(null)
+	const [viewOnOffToggleOn, setViewOnOffToggleOn] = useState(null)
+
+  return (
+    <section className='icon-section'>
+      <div className='bx--grid'>
+        <div className='bx--row'>
+        	<h2>Lottie toggles</h2>
+        	<ul className='bx--row icon-tiles-grid'>
+
+        		<li className='lottie-icon-tile'
+              	onClick={() => setAsleepAwakeToggleOn(!asleepAwakeToggleOn)}
+          		>
+          		<h3>Asleep / awake</h3>
+        			<icons.AsleepAwakeLottie  width={32} height={32} toggleOn={asleepAwakeToggleOn} loop={false}/>
+        		</li>
+
+        		<li className='lottie-icon-tile'
+              	onClick={() => setAsleepToggleOn(!asleepToggleOn)}
+          		>
+          		<h3>Asleep</h3>
+        			<icons.AsleepLottie  width={32} height={32} toggleOn={asleepToggleOn} loop={false}/>
+        		</li>
+
+        		<li className='lottie-icon-tile'
+              	onClick={() => setCarouselToggleOn(!carouselToggleOn)}
+          		>
+          		<h3>Carousel vertical / horizontal</h3>
+        			<icons.CarouselLottie  width={32} height={32} toggleOn={carouselToggleOn} loop={false}/>
+        		</li>
+
+        		<li className='lottie-icon-tile'
+      			  	onClick={() => setFavoriteToggleOn(!favoriteToggleOn)}
+        			>
+        			<h3>Favorite</h3>
+							<icons.FavoriteLottie  width={32} height={32} toggleOn={favoriteToggleOn} loop={false}/>
+          	</li>
+
+          	<li className='lottie-icon-tile'
+      			  onClick={() => setGridListToggleOn(!gridListToggleOn)}
+        		>
+        			<h3>Grid / list</h3>
+							<icons.GridListLottie  width={32} height={32} toggleOn={gridListToggleOn} loop={false}/>
+          	</li>
+
+        		<li className='lottie-icon-tile'
+      			  onClick={() => setLightToggleOn(!lightToggleOn)}
+        		>
+        			<h3>Light</h3>
+							<icons.LightLottie  width={32} height={32} toggleOn={lightToggleOn} loop={false}/>
+          	</li>
+
+        		<li className='lottie-icon-tile'
+      			  onClick={() => setLockUnlockToggleOn(!lockUnlockToggleOn)}
+        		>
+        			<h3>Lock / unlock</h3>
+							<icons.LockUnlockLottie  width={32} height={32} toggleOn={lockUnlockToggleOn} loop={false}/>
+          	</li>
+
+						<li className='lottie-icon-tile'
+      			  onClick={() => setLockUnlockTwoToggleOn(!lockUnlockTwoToggleOn)}
+        		>
+        			<h3>Lock / unlock alt</h3>
+							<icons.LockUnlockTwoLottie width={32} height={32} toggleOn={lockUnlockTwoToggleOn} loop={false}/>
+          	</li>
+
+          	 <li className='lottie-icon-tile'
+      			  onClick={() => setNotificationNewToggleOn(!notificationNewToggleOn)}
+        		>
+        			<h3>Notification new</h3>
+							<icons.NotificationNewLottie width={32} height={32} toggleOn={notificationNewToggleOn} loop={false}/>
+          	</li>
+
+             <li className='lottie-icon-tile'
+      			  onClick={() => setNotificationOnOffToggleOn(!notificationOnOffToggleOn)}
+        		>
+        			<h3>Notification on / off</h3>
+							<icons.NotificationOnOffLottie width={32} height={32} toggleOn={notificationOnOffToggleOn} loop={false}/>
+          	</li>
+
+          	<li className='lottie-icon-tile'
+      			  onClick={() => setStarToggleOn(!starToggleOn)}
+        		>
+        			<h3>Star</h3>
+							<icons.StarLottie width={32} height={32} toggleOn={starToggleOn} loop={false}/>
+          	</li>
+
+            <li className='lottie-icon-tile'
+      			  onClick={() => setViewOnOffToggleOn(!viewOnOffToggleOn)}
+        		>
+        			<h3>View on / off</h3>
+							<icons.ViewOnOffLottie width={32} height={32} toggleOn={viewOnOffToggleOn} loop={false}/>
+          	</li>
+	       	</ul>
+		    </div>
+	    </div>
+  	</section>
+  )
+}
+
+export default LottieSection

example/src/components/LottieSection/index.js

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

example/src/pages/CollectionPage/CollectionPage.js

@@ -4,6 +4,9 @@ import NavigationSection from '../../components/NavigationSection'
 import OperationsSection from '../../components/OperationsSection'
 // import ToggleSection from '../../components/ToggleSection'
 import StatusSection from '../../components/StatusSection'
+import LottieSection from '../../components/LottieSection'
+// import LottieEventsSection from '../../components/LottieEventsSection'
+
 
 import '../../app.scss'
 
@@ -20,6 +23,8 @@ const CollectionPage = () => {
       <OperationsSection></OperationsSection>
       {/*<ToggleSection></ToggleSection>*/}
       <StatusSection></StatusSection>
+      <LottieSection></LottieSection>
+      {/*<LottieEventsSection></LottieEventsSection>*/}
     </div>
   )
 }