Merge branch 'develop'

Author: george

app/pages/Home/Home.js

@@ -11,44 +11,18 @@ import { downloadPath, introductionPath } from "app/routes"
 
 import pkg from "projectRoot/package.json"
 import { StatusBadges, InstallNpm, InstallAssets } from "./markdownContent"
+import { ANIMATION_DATA } from "./animations"
 
 import "./styles.scss"
 
 export default class Home extends React.Component {
-  ANIMATION_DATA = [
-    {
-      title: "Tiny",
-      subtitle:
-        "CSS and JS under 12kb minified + gzipped; you can be assured performance isn’t an issue.",
-      animation: null,
-    },
-    {
-      title: "Modular",
-      subtitle:
-        "Include only the pieces you need, or even namespace the components for existing projects.",
-      animation: null,
-    },
-    {
-      title: "Configurable",
-      subtitle:
-        "Built for a great developer experience, you can customize and extend the library with ease.",
-      animation: null,
-    },
-    {
-      title: "Accessible",
-      subtitle:
-        "Interactive components are designed with WAI-ARIA guidelines in mind to ensure your HTML is accessible.",
-      animation: null,
-    },
-  ]
-
   componentDidMount() {
     Prism.highlightAll()
     this.loadAnimations()
   }
 
   loadAnimations() {
-    this.ANIMATION_DATA.forEach(data => {
+    ANIMATION_DATA.forEach(data => {
       const name = data.title.toLowerCase()
 
       const loadedAnimation = lottie.loadAnimation({
@@ -64,28 +38,24 @@ export default class Home extends React.Component {
     })
 
     window.setTimeout(() => {
-      this.ANIMATION_DATA.forEach(lottieInstance => lottieInstance.animation.play())
+      ANIMATION_DATA.forEach(instance => instance.animation.play())
     }, 1500)
   }
 
   componentWillUnmount() {
-    this.ANIMATION_DATA.forEach(lottieInstance => lottieInstance.animation.destroy())
-  }
-
-  renderAnimatedIcon(name) {
-    return <div className="animated-icon" id={`animated-${name}`} />
+    ANIMATION_DATA.forEach(instance => instance.animation.destroy())
   }
 
   renderAnimations() {
-    return this.ANIMATION_DATA.map(animation => {
+    return ANIMATION_DATA.map(animation => {
       const animationName = animation.title.toLowerCase()
 
       return (
         <li
           className="large-3 small-6 xsmall-12 columns has-center-text has-no-padding-bottom"
           key={animation.title}
         >
-          {this.renderAnimatedIcon(animationName)}
+          <div className="animated-icon" id={`animated-${animationName}`} />
           <h2 className="h6 has-white-text">{animation.title}</h2>
           <p className="has-white-text">{animation.subtitle}</p>
         </li>

app/pages/Home/__tests__/__snapshots__/Home.spec.js.snap

@@ -174,7 +174,7 @@ exports[`<Home /> renders 1`] = `
                         <p
                           className="has-white-text"
                         >
-                          CSS and JS under 12kb minified + gzipped; you can be assured performance isn’t an issue.
+                          CSS and JS under 14kb minified + gzipped; you can be assured performance isn’t an issue.
                         </p>
                       </li>
                       <li
@@ -193,7 +193,7 @@ exports[`<Home /> renders 1`] = `
                         <p
                           className="has-white-text"
                         >
-                          Include only the pieces you need, or even namespace the components for existing projects.
+                          Remove and namespace pieces of the framework to prevent collisions and take only what you need.
                         </p>
                       </li>
                       <li

app/pages/Home/animations.js

@@ -1,22 +1,26 @@
-export default [
+export const ANIMATION_DATA = [
   {
     title: "Tiny",
     subtitle:
       "CSS and JS under 14kb minified + gzipped; you can be assured performance isn’t an issue.",
+    animation: null,
   },
   {
     title: "Modular",
     subtitle:
       "Remove and namespace pieces of the framework to prevent collisions and take only what you need.",
+    animation: null,
   },
   {
     title: "Configurable",
     subtitle:
       "Built for a great developer experience, you can customize and extend the library with ease.",
+    animation: null,
   },
   {
     title: "Accessible",
     subtitle:
       "Interactive components are designed with WAI-ARIA guidelines in mind to ensure your HTML is accessible.",
+    animation: null,
   },
 ]