Add FadeIn

Author: rbrtsmith

package.json

@@ -30,7 +30,7 @@
   ],
   "dependencies": {
     "focus-trap-react": "^3.0.3",
-    "nebula-components": "^0.4.1",
+    "nebula-components": "^0.4.3",
     "nebula-css": "^2.7.1",
     "no-scroll": "^2.1.0"
   },

src/components/FadeIn/__tests__/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { mount } from 'enzyme'
+
+import { NAMESPACE } from '../../../constants'
+import { FadeIn } from '../'
+
+describe('<FadeIn />', () => {
+  it('adds a class once mounted', () => {
+    jest.useFakeTimers()
+    const $ = mount(
+      <FadeIn>
+        <div className="test">_</div>
+      </FadeIn>
+    )
+
+    expect($.hasClass('test')).toBe(true)
+    expect($.hasClass(`${NAMESPACE}c-fade-in`)).toBe(true)
+    expect($.hasClass(`${NAMESPACE}c-fade-in--has-mounted`)).toBe(false)
+
+    jest.runAllTimers()
+    expect($.hasClass(`${NAMESPACE}c-fade-in--has-mounted`)).toBe(true)
+  })
+})

src/components/FadeIn/index.jsx

@@ -0,0 +1,36 @@
+import React, { Component } from 'react'
+import T from 'prop-types'
+
+import { NAMESPACE } from '../../constants'
+import { classNames } from '../../utils'
+
+class FadeIn extends Component {
+  state = {
+    hasMounted: false
+  }
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.setState({ hasMounted: true })
+    }, 0)
+  }
+
+  render() {
+    // eslint-disable-next-line react/prop-types
+    const { children, ...rest } = this.props
+    return React.cloneElement(this.props.children, {
+      className: classNames(
+        children.props.className,
+        ` ${NAMESPACE}c-fade-in`,
+        { [`${NAMESPACE}c-fade-in--has-mounted`]: this.state.hasMounted }
+      ),
+      ...rest
+    })
+  }
+}
+
+FadeIn.propTypes = {
+  children: T.node.isRequired
+}
+
+export { FadeIn }

src/index.js

@@ -11,6 +11,7 @@ import { Button } from './components/Button/'
 import { ButtonDropdown } from './components/ButtonDropdown/'
 import { Card } from './components/Card/'
 import { ClickOutside } from './components/ClickOutside/'
+import { FadeIn } from './components/FadeIn'
 import { Flyout } from './components/Flyout/'
 import { Foldable } from './components/Foldable/'
 import { Form } from './components/Form/'
@@ -35,6 +36,7 @@ export {
   Button,
   ButtonDropdown,
   Card,
+  FadeIn,
   Flag,
   Flyout,
   Form,

yarn.lock

@@ -2965,9 +2965,9 @@ natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
 
-nebula-components@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/nebula-components/-/nebula-components-0.3.0.tgz#4defcd55d2762d39d05579f9034a208726908866"
+nebula-components@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/nebula-components/-/nebula-components-0.4.3.tgz#fd90968148df9ae5213c8937b91149901693d009"
   dependencies:
     nebula-css "^2.7.1"