feat(Animation): support keyframes as functions and add keyframeParams prop

CHANGELOG.md

@@ -24,10 +24,12 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Remove ability to introduce global style overrides for HTML document from `pxToRem` @kuzhelov ([#789](https://github.com/stardust-ui/react/pull/789))
 - Remove handledProps from behaviors @jurokapsiar ([#805](https://github.com/stardust-ui/react/pull/805))
 - Add `create` shorthand factory to `Header` component @layershifter ([#809](https://github.com/stardust-ui/react/pull/809))
+- Add `keyframeParams` prop in the `Animation` component and the `animation` prop @mnajdova ([#794](https://github.com/stardust-ui/react/pull/794))
 
 ### Fixes
 - Handle `onClick` and `onFocus` on ListItems correctly @layershifter ([#779](https://github.com/stardust-ui/react/pull/779))
 - Remove popup trigger button default role @jurokapsiar ([#806](https://github.com/stardust-ui/react/pull/806))
+- Improve `Dropdown` component styles @Bugaa92 ([#786](https://github.com/stardust-ui/react/pull/786))
 
 <!--------------------------------[ v0.19.1 ]------------------------------- -->
 ## [v0.19.1](https://github.com/stardust-ui/react/tree/v0.19.1) (2019-01-29)
@@ -56,8 +58,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Make `headerMedia` visible for screen readers in `ListItem` @layershifter ([#772](https://github.com/stardust-ui/react/pull/772))
 - Cleanup for `Dropdown` examples' accessibility and added localisation example. @silviuavram ([#771](https://github.com/stardust-ui/react/pull/771))
-- Fix highlighted selected option in single selection `Dropdown` when opened @silviuavram ([#726](https://github.com/stardust-ui/react/pull/726))
-- Improve `Dropdown` component styles @Bugaa92 ([#786](https://github.com/stardust-ui/react/pull/786))
+- Fix highlighted selected option in single selection `Dropdown` when opened @silviuavram ([#726](https://github.com/stardust-ui/react/pull/726)) 
 
 <!--------------------------------[ v0.18.0 ]------------------------------- -->
 ## [v0.18.0](https://github.com/stardust-ui/react/tree/v0.18.0) (2019-01-24)

docs/src/examples/components/Animation/Types/AnimationExampleKeyframeParams.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import { Animation, Icon, Provider, ThemeAnimation } from '@stardust-ui/react'
+
+const colorChanger: ThemeAnimation<{ fromColor: string; toColor: string }> = {
+  keyframe: ({ fromColor, toColor }) => ({
+    from: {
+      color: fromColor,
+    },
+    to: {
+      color: toColor,
+    },
+  }),
+  keyframeParams: { fromColor: 'red', toColor: 'blue' },
+  duration: '5s',
+  iterationCount: 'infinite',
+}
+
+const AnimationExample = () => (
+  <Provider theme={{ animations: { colorChanger } }}>
+    <div>
+      <Animation name="colorChanger">
+        <Icon name="umbrella" circular />
+      </Animation>
+      <Animation name="colorChanger" keyframeParams={{ fromColor: 'green', toColor: 'yellow' }}>
+        <Icon name="umbrella" circular />
+      </Animation>
+      <Animation name="colorChanger" keyframeParams={{ toColor: 'black' }}>
+        <Icon name="umbrella" circular />
+      </Animation>
+    </div>
+  </Provider>
+)
+
+export default AnimationExample

docs/src/examples/components/Animation/Types/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+import { Segment } from '@stardust-ui/react'
 
 const Types = () => (
   <ExampleSection title="Types">
@@ -44,6 +45,15 @@ const Types = () => (
       description="An Animation can specify whether the animation is running or paused. "
       examplePath="components/Animation/Types/AnimationExamplePlayState"
     />
+    <ComponentExample
+      title="Keyframe params"
+      description="An Animation can specify different params for the keyframe."
+      examplePath="components/Animation/Types/AnimationExampleKeyframeParams"
+    >
+      <Segment style={{ marginTop: '10px' }} color="orange" inverted>
+        Be aware, each unique keyframeParams will render as a new @keyframes!
+      </Segment>
+    </ComponentExample>
   </ExampleSection>
 )
 

src/components/Animation/Animation.tsx

@@ -55,6 +55,9 @@ export interface AnimationProps
   /** The animation-iteration-count property specifies the number of times an animation should run. */
   iterationCount?: string
 
+  /** Custom parameters for the keyframe defined for the animation. */
+  keyframeParams?: object
+
   /**
    * The playState property specifies whether the animation is running or paused. It can have the following values:
    * - paused - Specifies that the animation is paused
@@ -98,6 +101,7 @@ class Animation extends UIComponent<ReactPropsStrict<AnimationProps>, any> {
     duration: PropTypes.string,
     fillMode: PropTypes.string,
     iterationCount: PropTypes.string,
+    keyframeParams: PropTypes.object,
     playState: PropTypes.string,
     timingFunction: PropTypes.string,
   }
@@ -107,6 +111,7 @@ class Animation extends UIComponent<ReactPropsStrict<AnimationProps>, any> {
 
     const animation: AnimationProp = {
       name,
+      keyframeParams: this.props.keyframeParams,
       duration: this.props.duration,
       delay: this.props.delay,
       iterationCount: this.props.iterationCount,

src/lib/createAnimationStyles.tsx

@@ -17,12 +17,21 @@ const createAnimationStyles = (animation: AnimationProp, theme: ThemePrepared) =
         iterationCount,
         playState,
         timingFunction,
+        keyframeParams,
       } = animations[animationName]
 
+      const animationThemeKeyframeParams = keyframeParams || {}
+      const animationPropKeyframeParams = (animation as any).keyframeParams
+
+      const mergedKeyframeParams =
+        typeof animation === 'string' || !animationPropKeyframeParams
+          ? animationThemeKeyframeParams
+          : { ...animationThemeKeyframeParams, ...(animationPropKeyframeParams || {}) }
+
       const evaluatedKeyframe =
         typeof keyframe === 'string'
           ? keyframe
-          : theme.renderer.renderKeyframe(callable(keyframe), {})
+          : theme.renderer.renderKeyframe(callable(keyframe), mergedKeyframeParams)
 
       if (typeof animation === 'string') {
         animationCSSProp = {

src/themes/types.ts

@@ -227,6 +227,7 @@ export type AnimationProp =
       iterationCount?: string
       playState?: string
       timingFunction?: string
+      keyframeParams?: object
     }
   | string
 // ========================================================
@@ -243,15 +244,16 @@ export type StaticStyle = StaticStyleRenderable | StaticStyleFunction
 
 export type StaticStyles = StaticStyle[]
 
-export interface ThemeAnimation {
-  keyframe: any
+export interface ThemeAnimation<KP = {}> {
+  keyframe: ((KP) => object) | object | string
   delay?: string
   direction?: string
   duration?: string
   fillMode?: string
   iterationCount?: string
   playState?: string
   timingFunction?: string
+  keyframeParams?: KP
 }
 
 // ========================================================