Fix a few missing animations (#516)

index.d.ts

@@ -28,6 +28,8 @@ export interface FontAwesomeIconProps extends BackwardCompatibleOmit<SVGAttribut
   className?: string
   color?: string
   spin?: boolean
+  spinPulse?: boolean
+  spinReverse?: boolean
   pulse?: boolean
   beat?: boolean
   fade?: boolean

src/components/FontAwesomeIcon.js

@@ -67,6 +67,8 @@ FontAwesomeIcon.propTypes = {
 
   border: PropTypes.bool,
 
+  beatFade: PropTypes.bool,
+
   bounce: PropTypes.bool,
 
   className: PropTypes.string,
@@ -87,7 +89,7 @@ FontAwesomeIcon.propTypes = {
 
   inverse: PropTypes.bool,
 
-  flip: PropTypes.oneOf(['horizontal', 'vertical', 'both']),
+  flip: PropTypes.oneOf([true, false, 'horizontal', 'vertical', 'both']),
 
   icon: PropTypes.oneOfType([
     PropTypes.object,
@@ -148,14 +150,16 @@ FontAwesomeIcon.defaultProps = {
   maskId: null,
   fixedWidth: false,
   inverse: false,
-  flip: null,
+  flip: false,
   icon: null,
   listItem: false,
   pull: null,
   pulse: false,
   rotation: null,
   size: null,
   spin: false,
+  spinPulse: false,
+  spinReverse: false,
   beat: false,
   fade: false,
   beatFade: false,

src/components/__tests__/FontAwesomeIcon.test.js

@@ -154,6 +154,12 @@ describe('using flip', () => {
     expect(vm.props.className.includes('fa-flip-horizontal')).toBeTruthy()
     expect(vm.props.className.includes('fa-flip-vertical')).toBeTruthy()
   })
+
+  test('animation', () => {
+    const vm = mount({ icon: faCoffee, flip: true })
+
+    expect(vm.props.className.includes('fa-flip')).toBeTruthy()
+  })
 })
 
 test('using listItem', () => {
@@ -233,6 +239,51 @@ test('using size', () => {
   })
 })
 
+describe('using beat', () => {
+  test('setting beat prop to true adds fa-beat class', () => {
+    const vm = mount({ icon: faCoffee, beat: true })
+
+    expect(vm.props.className.includes('fa-beat')).toBeTruthy()
+  })
+
+  test('setting beat prop to false after setting it to true results in no fa-beat class', () => {
+    let vm = mount({ icon: faCoffee, beat: true })
+    expect(vm.props.className.includes('fa-beat')).toBeTruthy()
+    vm = mount({ icon: faCoffee, beat: false })
+    expect(vm.props.className.includes('fa-beat')).toBeFalsy()
+  })
+})
+
+describe('using fade', () => {
+  test('setting fade prop to true adds fa-fade class', () => {
+    const vm = mount({ icon: faCoffee, fade: true })
+
+    expect(vm.props.className.includes('fa-fade')).toBeTruthy()
+  })
+
+  test('setting fade prop to false after setting it to true results in no fa-fade class', () => {
+    let vm = mount({ icon: faCoffee, fade: true })
+    expect(vm.props.className.includes('fa-fade')).toBeTruthy()
+    vm = mount({ icon: faCoffee, fade: false })
+    expect(vm.props.className.includes('fa-fade')).toBeFalsy()
+  })
+})
+
+describe('using beatFade', () => {
+  test('setting beatFade prop to true adds fa-beat-fade class', () => {
+    const vm = mount({ icon: faCoffee, beatFade: true })
+
+    expect(vm.props.className.includes('fa-beat-fade')).toBeTruthy()
+  })
+
+  test('setting beatFade prop to false after setting it to true results in no fa-beat-fade class', () => {
+    let vm = mount({ icon: faCoffee, beatFade: true })
+    expect(vm.props.className.includes('fa-beat-fade')).toBeTruthy()
+    vm = mount({ icon: faCoffee, beatFade: false })
+    expect(vm.props.className.includes('fa-beat-fade')).toBeFalsy()
+  })
+})
+
 describe('using bounce', () => {
   test('setting bounce prop to true adds fa-bounce class', () => {
     const vm = mount({ icon: faCoffee, bounce: true })
@@ -283,6 +334,20 @@ describe('using spin', () => {
     vm = mount({ icon: faCoffee, spin: false })
     expect(vm.props.className.includes('fa-spin')).toBeFalsy()
   })
+
+  test('setting spinPulse prop to false after setting it to true results in no fa-spin-pulse class', () => {
+    let vm = mount({ icon: faCoffee, spinPulse: true })
+    expect(vm.props.className.includes('fa-spin-pulse')).toBeTruthy()
+    vm = mount({ icon: faCoffee, spinPulse: false })
+    expect(vm.props.className.includes('fa-spin-pulse')).toBeFalsy()
+  })
+
+  test('setting spinReverse prop to false after setting it to true results in no fa-spin-reverse class', () => {
+    let vm = mount({ icon: faCoffee, spinReverse: true })
+    expect(vm.props.className.includes('fa-spin-reverse')).toBeTruthy()
+    vm = mount({ icon: faCoffee, spinReverse: false })
+    expect(vm.props.className.includes('fa-spin-reverse')).toBeFalsy()
+  })
 })
 
 test('using className', () => {

src/utils/__tests__/get-class-list-from-props.test.js

@@ -9,12 +9,15 @@ describe('get class list', () => {
       listItem: true,
       pulse: true,
       spin: true,
+      spinPulse: true,
+      spinReverse: true,
       beat: true,
       fade: true,
       beatFade: true,
       bounce: true,
       shake: true,
-      swapOpacity: true
+      swapOpacity: true,
+      flip: true
     }
 
     const classList = getClassList(props)
@@ -26,11 +29,14 @@ describe('get class list', () => {
       'fa-bounce',
       'fa-shake',
       'fa-spin',
+      'fa-spin-reverse',
+      'fa-spin-pulse',
       'fa-pulse',
       'fa-fw',
       'fa-inverse',
       'fa-border',
       'fa-li',
+      'fa-flip',
       'fa-swap-opacity'
     ])
   })
@@ -46,6 +52,7 @@ describe('get class list', () => {
   test('flip', () => {
     const HORIZONTAL = 'fa-flip-horizontal'
     const VERTICAL = 'fa-flip-vertical'
+    const FLIP_ANIMATION = 'fa-flip'
 
     const horizontalList = getClassList({
       flip: 'horizontal'
@@ -59,12 +66,18 @@ describe('get class list', () => {
       flip: 'both'
     })
 
+    const flipAnimationOnly = getClassList({
+      flip: true
+    })
+
     expect(horizontalList).toContain(HORIZONTAL)
     expect(verticalList).toContain(VERTICAL)
 
     expect(bothList.length).toBe(2)
     expect(bothList).toContain(HORIZONTAL)
     expect(bothList).toContain(VERTICAL)
+
+    expect(flipAnimationOnly).toContain(FLIP_ANIMATION)
   })
 
   test('size', () => {

src/utils/get-class-list-from-props.js

@@ -37,6 +37,7 @@ export default function classList(props) {
     'fa-inverse': inverse,
     'fa-border': border,
     'fa-li': listItem,
+    'fa-flip': flip === true,
     'fa-flip-horizontal': flip === 'horizontal' || flip === 'both',
     'fa-flip-vertical': flip === 'vertical' || flip === 'both',
     [`fa-${size}`]: typeof size !== 'undefined' && size !== null,