Handle animation (#80)

* Add props and create logic to controll speed animation

* Add stories to no animation

* Add tests on animation prop

* Set animation to appear just when animate prop is true

* Change tests to expected behavior

* Att on readme

* Update readme

* Realocate tests

* Export default props

* Refactor tests

* Refactor disposal of tests

README.md

@@ -59,17 +59,18 @@ const MyLoader = () => (
 
 ## Options
 
-| Name                | Type     | Default          | Description                                                  |
-| ------------------- | -------- | ---------------- | ------------------------------------------------------------ |
-| speed               | _Number_ | `2`              | Animation speed                                              |
-| width               | _Number_ | `400`            | **viewBox** width of SVG                                     |
-| height              | _Number_ | `130`            | **viewBox** height of SVG                                    |
-| style               | _Object_ | `null`           | Ex: `{ marginTop: '50px' }`                                  |
-| primaryColor        | _String_ | `#f3f3f3`        | Background the SVG                                           |
-| secondaryColor      | _String_ | `#ecebeb`        | Animation color                                              |
-| preserveAspectRatio | _String_ | `xMidYMid meet`  | Aspect ratio option of SVG                                   |
-| className           | _String_ | ''               | Classname in the <svg />                                     |
-| uniquekey           | _String_ | random unique id | **Use the same key value, it'll solve some problems to SSR** |
+| Name                | Type      | Default          | Description                                                  |
+| ------------------- | --------- | ---------------- | ------------------------------------------------------------ |
+| speed               | _Number_  | `2`              | Animation speed                                              |
+| animate             | _Boolean_ | `true`           | `false` to render with no animation                          |
+| width               | _Number_  | `400`            | **viewBox** width of SVG                                     |
+| height              | _Number_  | `130`            | **viewBox** height of SVG                                    |
+| style               | _Object_  | `null`           | Ex: `{ marginTop: '50px' }`                                  |
+| primaryColor        | _String_  | `#f3f3f3`        | Background the SVG                                           |
+| secondaryColor      | _String_  | `#ecebeb`        | Animation color                                              |
+| preserveAspectRatio | _String_  | `xMidYMid meet`  | Aspect ratio option of SVG                                   |
+| className           | _String_  | ''               | Classname in the <svg />                                     |
+| uniquekey           | _String_  | random unique id | **Use the same key value, it'll solve some problems to SSR** |
 
 ### Examples
 

src/Wrap.js

@@ -34,28 +34,34 @@ const Wrap = (props: WrapProps): React.Element<*> => {
 
         <linearGradient id={idGradient}>
           <stop offset="0%" stopColor={props.primaryColor}>
-            <animate
-              attributeName="offset"
-              values="-2; 1"
-              dur={`${props.speed}s`}
-              repeatCount="indefinite"
-            />
+            {props.animate ? (
+              <animate
+                attributeName="offset"
+                values="-2; 1"
+                dur={`${props.speed}s`}
+                repeatCount="indefinite"
+              />
+            ) : null}
           </stop>
           <stop offset="50%" stopColor={props.secondaryColor}>
-            <animate
-              attributeName="offset"
-              values="-1.5; 1.5"
-              dur={`${props.speed}s`}
-              repeatCount="indefinite"
-            />
+            {props.animate ? (
+              <animate
+                attributeName="offset"
+                values="-1.5; 1.5"
+                dur={`${props.speed}s`}
+                repeatCount="indefinite"
+              />
+            ) : null}
           </stop>
           <stop offset="100%" stopColor={props.primaryColor}>
-            <animate
-              attributeName="offset"
-              values="-1; 2"
-              dur={`${props.speed}s`}
-              repeatCount="indefinite"
-            />
+            {props.animate ? (
+              <animate
+                attributeName="offset"
+                values="-1; 2"
+                dur={`${props.speed}s`}
+                repeatCount="indefinite"
+              />
+            ) : null}
           </stop>
         </linearGradient>
       </defs>

src/index.js

@@ -12,6 +12,7 @@ export { default as BulletList } from './stylized/BulletListStyle'
 export type Props = {
   style: { [key: string]: any },
   type: string,
+  animate: boolean,
   speed: number,
   width: number,
   height: number,
@@ -22,7 +23,8 @@ export type Props = {
   uniquekey: string,
 }
 
-const defaultProps = {
+export const defaultProps = {
+  animate: true,
   speed: 2,
   width: 400,
   height: 130,

stories/index.js

@@ -68,3 +68,8 @@ storiesOf('ContentLoader', module)
       <ContentLoader uniquekey="unique-key" />
     </Container>
   ))
+  .add('no animation', () => (
+    <Container>
+      <Facebook animate={false} />
+    </Container>
+  ))

tests/Wrap.js

@@ -13,9 +13,10 @@ chai.use(chaiEnzyme())
 
 import ContentLoader from '../src/index'
 import Wrap, { generateId } from '../src/Wrap'
+import defaultProps from '../src/index'
 
 describe('<Wrap /> Check id`s to render the SVG', () => {
-  const wrapper = mount(<Wrap />)
+  const wrapper = mount(<Wrap {...defaultProps} />)
 
   it('is mask with the same `idClip`', () => {
     const idClip = wrapper.find('clipPath').prop('id')
@@ -46,4 +47,9 @@ describe('<Wrap /> Check id`s to render the SVG', () => {
   it('has `stop` inside the `linearGradient`', () => {
     expect(wrapper.find('linearGradient').find('stop')).to.have.length(3)
   })
+
+  it('has one `animate` inside each `stop`', () => {
+    const stopElem = wrapper.find('stop')
+    expect(stopElem.map(elem => elem.find('animate'))).to.have.length(3)
+  })
 })

tests/index.js

@@ -35,6 +35,7 @@ describe('<ContentLoader />:', () => {
         speed={10}
         height={200}
         width={200}
+        animate={false}
         primaryColor="#000"
         secondaryColor="#fff"
         preserveAspectRatio="xMaxYMax"
@@ -55,6 +56,10 @@ describe('<ContentLoader />:', () => {
       expect(wrapper.props().width).to.equal(200)
     })
 
+    it('`animate` is a boolean and used', () => {
+      expect(wrapper.props().animate).to.be.false
+    })
+
     it('`primaryColor` is a string and used', () => {
       expect(wrapper.props().primaryColor).to.string('#000')
     })
@@ -90,5 +95,15 @@ describe('<ContentLoader />:', () => {
       expect(idClip).to.not.equal(idClipOtherCom)
       expect(idGradient).to.not.equal(idGradientOtherCom)
     })
+
+    describe('inside <Wrap />', () => {
+      it('exists', () => {
+        expect(wrapper.find('Wrap')).to.have.length(1)
+      })
+
+      it('has no `animate` element', () => {
+        expect(wrapper.find('animate')).to.be.empty
+      })
+    })
   })
 })