feat(theme): support keyframes through animation property (#414)

* -init implementation of keyframes

* -changed keyframes to be always functions

* -added keyframe description in the theming docs

* -added animation property to icon and button instead of requiring the user to render the keyframe themself

* -refactored animation to be part of the theme instead of just defining the keyframes
-added option for overriding the animation props

* -added Transition component

* -continuing running the paused animation

* -added description for the transition component

* -Transition component is now appling the style on the child component
-extracted logic for generating the animationStyle so that it can be reused in renderComponent, as well as the Transition component

* -renaming createAnimation to createAnimationStyles

* -added tests
-removed keyframeParams
-added transition examples
-added animation prop to all UI components

* -fix in the Transition component

* -removed comments

* -removed unused divs

* -reverting changes from Provider

* -replacing className with styles prop in the Attachment's shorthands

* -updating changelog

CHANGELOG.md

@@ -44,6 +44,8 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add focus trap behavior to `Popup` @kuzhelov ([#457](https://github.com/stardust-ui/react/pull/457))
 - Export `Ref` component and add `handleRef` util @layershifter ([#459](https://github.com/stardust-ui/react/pull/459))
 - Add `wrapper` slot to `MenuItem` @miroslavstastny ([#323](https://github.com/stardust-ui/react/pull/323))
+- Add `Transition` component @mnajdova ([#414](https://github.com/stardust-ui/react/pull/414))
+- Add generic `animation` property to the UIComponents @mnajdova ([#414](https://github.com/stardust-ui/react/pull/414))
 
 ### Documentation
 - Add all missing component descriptions and improve those existing @levithomason ([#400](https://github.com/stardust-ui/react/pull/400))

docs/src/examples/components/Transition/Types/TransitionExample.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import { Transition, Icon } from '@stardust-ui/react'
+
+const TransitionExample = () => (
+  <Transition animationName="spinner">
+    <Icon name="umbrella" circular />
+  </Transition>
+)
+
+export default TransitionExample

docs/src/examples/components/Transition/Types/TransitionExampleDelay.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { Transition, Icon } from '@stardust-ui/react'
+
+const TransitionExampleDelay = () => (
+  <div>
+    {'This animation will start after 5 seconds'}
+    <br />
+    <Transition animationName="spinner" delay="5s">
+      <Icon name="umbrella" circular />
+    </Transition>
+  </div>
+)
+
+export default TransitionExampleDelay

docs/src/examples/components/Transition/Types/TransitionExampleDirection.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Transition, Icon, Grid, Text } from '@stardust-ui/react'
+
+const TransitionExampleDirection = () => (
+  <Grid columns={4}>
+    <Text content="Normal" />
+    <Text content="Reverse" />
+    <Text content="Alternate" />
+    <Text content="Alternate reverse" />
+    <Transition animationName="spinner">
+      <Icon name="umbrella" circular />
+    </Transition>
+    <Transition animationName="spinner" direction="reverse">
+      <Icon name="umbrella" circular />
+    </Transition>
+    <Transition animationName="spinner" direction="alternate">
+      <Icon name="umbrella" circular />
+    </Transition>
+    <Transition animationName="spinner" direction="alternateReverse">
+      <Icon name="umbrella" circular />
+    </Transition>
+  </Grid>
+)
+
+export default TransitionExampleDirection

docs/src/examples/components/Transition/Types/TransitionExampleDuration.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import { Transition, Icon } from '@stardust-ui/react'
+
+const TransitionExampleDuration = () => (
+  <Transition animationName="spinner" duration="1s">
+    <Icon name="umbrella" circular />
+  </Transition>
+)
+
+export default TransitionExampleDuration

docs/src/examples/components/Transition/Types/TransitionExampleFillMode.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Transition, Icon, Grid, Text } from '@stardust-ui/react'
+
+const TransitionExampleFillMode = () => (
+  <Grid columns={4}>
+    <Text content="None" />
+    <Text content="Forwards" />
+    <Text content="Backwards" />
+    <Text content="Both" />
+    <Transition animationName="colorChanger" fillMode="none" delay="3s" iterationCount="1">
+      <Icon name="umbrella" circular />
+    </Transition>
+    <Transition animationName="colorChanger" fillMode="forwards" delay="3s" iterationCount="1">
+      <Icon name="umbrella" circular />
+    </Transition>
+    <Transition animationName="colorChanger" fillMode="backwards" delay="3s" iterationCount="1">
+      <Icon name="umbrella" circular />
+    </Transition>
+    <Transition animationName="colorChanger" fillMode="both" delay="3s" iterationCount="1">
+      <Icon name="umbrella" circular />
+    </Transition>
+  </Grid>
+)
+
+export default TransitionExampleFillMode

docs/src/examples/components/Transition/Types/TransitionExampleIterationCount.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Transition, Icon, Grid, Text } from '@stardust-ui/react'
+
+const TransitionExampleIterationCount = () => (
+  <Grid columns={4}>
+    <Text content="1 iteration" />
+    <Text content="2 iterations" />
+    <Text content="5 iterations" />
+    <Text content="Infinite" />
+    <Transition animationName="spinner" iterationCount="1">
+      <Icon name="umbrella" circular />
+    </Transition>
+    <Transition animationName="spinner" iterationCount="2">
+      <Icon name="umbrella" circular />
+    </Transition>
+    <Transition animationName="spinner" iterationCount="5">
+      <Icon name="umbrella" circular />
+    </Transition>
+    <Transition animationName="spinner" iterationCount="infinite">
+      <Icon name="umbrella" circular />
+    </Transition>
+  </Grid>
+)
+
+export default TransitionExampleIterationCount

docs/src/examples/components/Transition/Types/TransitionExamplePlayState.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Icon, Button, Transition } from '@stardust-ui/react'
+
+class IconExample extends React.Component {
+  state = {
+    playState: 'running',
+  }
+
+  changePlayState = () => {
+    this.setState(prevState => ({
+      playState: (prevState as any).playState === 'running' ? 'paused' : 'running',
+    }))
+  }
+
+  render() {
+    return (
+      <div>
+        <Button
+          icon={this.state.playState === 'running' ? 'pause' : 'play'}
+          content={this.state.playState === 'running' ? 'Pause' : 'Start'}
+          onClick={this.changePlayState}
+          primary
+        />
+        <br />
+        <br />
+        <Transition animationName="spinner" playState={this.state.playState}>
+          <Icon name="umbrella" circular />
+        </Transition>
+      </div>
+    )
+  }
+}
+
+export default IconExample

docs/src/examples/components/Transition/Types/TransitionExampleTimingFunction.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { Transition, Icon, Grid, Text } from '@stardust-ui/react'
+
+const TransitionExampleTimingFunction = () => (
+  <Grid columns={6}>
+    <Text content="Ease" />
+    <Text content="Linear" />
+    <Text content="Ease in" />
+    <Text content="Ease out" />
+    <Text content="Ease in out" />
+    <Text content="Cubic bezier" />
+    <Transition animationName="spinner" timingFunction="ease">
+      <Icon name="umbrella" circular />
+    </Transition>
+    <Transition animationName="spinner" timingFunction="linear">
+      <Icon name="umbrella" circular />
+    </Transition>
+    <Transition animationName="spinner" timingFunction="ease-in">
+      <Icon name="umbrella" circular />
+    </Transition>
+    <Transition animationName="spinner" timingFunction="ease-out">
+      <Icon name="umbrella" circular />
+    </Transition>
+    <Transition animationName="spinner" timingFunction="ease-in-out">
+      <Icon name="umbrella" circular />
+    </Transition>
+    <Transition animationName="spinner" timingFunction="cubic-bezier(0.1, 0.5, 0.1, 0.5)">
+      <Icon name="umbrella" circular />
+    </Transition>
+  </Grid>
+)
+
+export default TransitionExampleTimingFunction

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

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Types = () => (
+  <ExampleSection title="Types">
+    <ComponentExample
+      title="Default"
+      description="A default Transition specified by the animation name."
+      examplePath="components/Transition/Types/TransitionExample"
+    />
+    <ComponentExample
+      title="Duration"
+      description="A transition can specify how long time an animation should take to complete."
+      examplePath="components/Transition/Types/TransitionExampleDuration"
+    />
+    <ComponentExample
+      title="Delay"
+      description="A transition can specify a delay for the start of an animation."
+      examplePath="components/Transition/Types/TransitionExampleDelay"
+    />
+    <ComponentExample
+      title="Direction"
+      description="A transition can specify whether an animation should be played forwards, backwards or in alternate cycles."
+      examplePath="components/Transition/Types/TransitionExampleDirection"
+    />
+    <ComponentExample
+      title="Iteration count"
+      description="A transition can specify the number of times an animation should run or specify infinite to make the animation continue forever."
+      examplePath="components/Transition/Types/TransitionExampleIterationCount"
+    />
+    <ComponentExample
+      title="Fill mode"
+      description="A transition can specify a style for the target element when the animation is not playing (before it starts, after it ends, or both)."
+      examplePath="components/Transition/Types/TransitionExampleFillMode"
+    />
+    <ComponentExample
+      title="Timing function"
+      description="A transition can specify the speed curve of the animation."
+      examplePath="components/Transition/Types/TransitionExampleTimingFunction"
+    />
+    <ComponentExample
+      title="Play state"
+      description="A transition can specify whether the animation is running or paused. "
+      examplePath="components/Transition/Types/TransitionExamplePlayState"
+    />
+  </ExampleSection>
+)
+
+export default Types

docs/src/examples/components/Transition/index.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import Types from './Types'
+
+const TransitionExamples = () => (
+  <div>
+    <Types />
+  </div>
+)
+
+export default TransitionExamples

src/components/Attachment/Attachment.tsx

@@ -128,12 +128,12 @@ class Attachment extends UIComponent<Extendable<AttachmentProps>, any> {
         {(header || description) && (
           <div className={classes.content}>
             {Text.create(header, {
-              defaultProps: { className: classes.header },
+              defaultProps: { styles: styles.header },
               render: renderHeader,
             })}
 
             {Text.create(description, {
-              defaultProps: { className: classes.description },
+              defaultProps: { styles: styles.description },
               render: renderDescription,
             })}
           </div>

src/components/Provider/Provider.tsx

@@ -47,6 +47,7 @@ class Provider extends React.Component<ProviderProps, any> {
       staticStyles: PropTypes.arrayOf(
         PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]),
       ),
+      animations: PropTypes.object,
     }),
     children: PropTypes.element.isRequired,
   }