BREAKING(Transition): renamed Transition to Animation and added docs for the animations

CHANGELOG.md

@@ -17,6 +17,12 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- rename `Transition` component to `Animation`, and `animationName` property to `name` @mnajdova ([#505](https://github.com/stardust-ui/react/pull/505))
+
+### Documentation
+- add `Animations` guide as part of the `Theming` docs page @mnajdova ([#505](https://github.com/stardust-ui/react/pull/505))
+
 <!--------------------------------[ v0.12.1 ]------------------------------- -->
 ## [v0.12.1](https://github.com/stardust-ui/react/tree/v0.12.1) (2018-11-26)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.12.0...v0.12.1)

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

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Animation, Icon, Provider } from '@stardust-ui/react'
+
+const spinner = {
+  keyframe: {
+    from: {
+      transform: 'rotate(0deg)',
+    },
+    to: {
+      transform: 'rotate(360deg)',
+    },
+  },
+  duration: '5s',
+  iterationCount: 'infinite',
+}
+
+const AnimationExample = () => (
+  <Provider theme={{ animations: { spinner } }}>
+    <Animation name="spinner">
+      <Icon name="umbrella" circular />
+    </Animation>
+  </Provider>
+)
+
+export default AnimationExample

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

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { Animation, Icon, Provider } from '@stardust-ui/react'
+
+const spinner = {
+  keyframe: {
+    from: {
+      transform: 'rotate(0deg)',
+    },
+    to: {
+      transform: 'rotate(360deg)',
+    },
+  },
+  duration: '5s',
+  iterationCount: 'infinite',
+}
+
+const AnimationExampleDelay = () => (
+  <div>
+    This animation will start after 5 seconds
+    <br />
+    <Provider theme={{ animations: { spinner } }}>
+      <Animation name="spinner" delay="5s">
+        <Icon name="umbrella" circular />
+      </Animation>
+    </Provider>
+  </div>
+)
+
+export default AnimationExampleDelay

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

@@ -0,0 +1,40 @@
+import * as React from 'react'
+import { Animation, Icon, Grid, Text, Provider } from '@stardust-ui/react'
+
+const spinner = {
+  keyframe: {
+    from: {
+      transform: 'rotate(0deg)',
+    },
+    to: {
+      transform: 'rotate(360deg)',
+    },
+  },
+  duration: '5s',
+  iterationCount: 'infinite',
+}
+
+const AnimationExampleDirection = () => (
+  <Provider theme={{ animations: { spinner } }}>
+    <Grid columns={4}>
+      <Text content="Normal" />
+      <Text content="Reverse" />
+      <Text content="Alternate" />
+      <Text content="Alternate reverse" />
+      <Animation name="spinner">
+        <Icon name="umbrella" circular />
+      </Animation>
+      <Animation name="spinner" direction="reverse">
+        <Icon name="umbrella" circular />
+      </Animation>
+      <Animation name="spinner" direction="alternate">
+        <Icon name="umbrella" circular />
+      </Animation>
+      <Animation name="spinner" direction="alternate-reverse">
+        <Icon name="umbrella" circular />
+      </Animation>
+    </Grid>
+  </Provider>
+)
+
+export default AnimationExampleDirection

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

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Animation, Icon, Provider } from '@stardust-ui/react'
+
+const spinner = {
+  keyframe: {
+    from: {
+      transform: 'rotate(0deg)',
+    },
+    to: {
+      transform: 'rotate(360deg)',
+    },
+  },
+  duration: '5s',
+  iterationCount: 'infinite',
+}
+
+const AnimationExampleDuration = () => (
+  <Provider theme={{ animations: { spinner } }}>
+    <Animation name="spinner" duration="1s">
+      <Icon name="umbrella" circular />
+    </Animation>
+  </Provider>
+)
+
+export default AnimationExampleDuration

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

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import { Animation, Icon, Grid, Text, Provider } from '@stardust-ui/react'
+
+const colorChanger = {
+  keyframe: {
+    from: { color: 'red' },
+    to: { color: 'blue' },
+  },
+  duration: '3s',
+  iterationCount: 'infinite',
+}
+
+const AnimationExampleFillMode = () => (
+  <Provider theme={{ animations: { colorChanger } }}>
+    <Grid columns={4}>
+      <Text content="None" />
+      <Text content="Forwards" />
+      <Text content="Backwards" />
+      <Text content="Both" />
+      <Animation name="colorChanger" fillMode="none" delay="3s" iterationCount="1">
+        <Icon name="umbrella" circular />
+      </Animation>
+      <Animation name="colorChanger" fillMode="forwards" delay="3s" iterationCount="1">
+        <Icon name="umbrella" circular />
+      </Animation>
+      <Animation name="colorChanger" fillMode="backwards" delay="3s" iterationCount="1">
+        <Icon name="umbrella" circular />
+      </Animation>
+      <Animation name="colorChanger" fillMode="both" delay="3s" iterationCount="1">
+        <Icon name="umbrella" circular />
+      </Animation>
+    </Grid>
+  </Provider>
+)
+
+export default AnimationExampleFillMode

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

@@ -0,0 +1,40 @@
+import * as React from 'react'
+import { Animation, Icon, Grid, Text, Provider } from '@stardust-ui/react'
+
+const spinner = {
+  keyframe: {
+    from: {
+      transform: 'rotate(0deg)',
+    },
+    to: {
+      transform: 'rotate(360deg)',
+    },
+  },
+  duration: '5s',
+  iterationCount: 'infinite',
+}
+
+const AnimationExampleIterationCount = () => (
+  <Provider theme={{ animations: { spinner } }}>
+    <Grid columns={4}>
+      <Text content="1 iteration" />
+      <Text content="2 iterations" />
+      <Text content="5 iterations" />
+      <Text content="Infinite" />
+      <Animation name="spinner" iterationCount="1">
+        <Icon name="umbrella" circular />
+      </Animation>
+      <Animation name="spinner" iterationCount="2">
+        <Icon name="umbrella" circular />
+      </Animation>
+      <Animation name="spinner" iterationCount="5">
+        <Icon name="umbrella" circular />
+      </Animation>
+      <Animation name="spinner" iterationCount="infinite">
+        <Icon name="umbrella" circular />
+      </Animation>
+    </Grid>
+  </Provider>
+)
+
+export default AnimationExampleIterationCount

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

@@ -0,0 +1,49 @@
+import React from 'react'
+import { Icon, Button, Animation, Provider } from '@stardust-ui/react'
+
+const spinner = {
+  keyframe: {
+    from: {
+      transform: 'rotate(0deg)',
+    },
+    to: {
+      transform: 'rotate(360deg)',
+    },
+  },
+  duration: '5s',
+  iterationCount: 'infinite',
+}
+
+class AnimationExamplePlayState extends React.Component {
+  state = {
+    playState: 'running',
+  }
+
+  changePlayState = () => {
+    this.setState(prevState => ({
+      playState: (prevState as any).playState === 'running' ? 'paused' : 'running',
+    }))
+  }
+
+  render() {
+    return (
+      <Provider theme={{ animations: { spinner } }}>
+        <div>
+          <Button
+            icon={this.state.playState === 'running' ? 'pause' : 'play'}
+            content={this.state.playState === 'running' ? 'Pause' : 'Start'}
+            onClick={this.changePlayState}
+            primary
+          />
+          <br />
+          <br />
+          <Animation name="spinner" playState={this.state.playState}>
+            <Icon name="umbrella" circular />
+          </Animation>
+        </div>
+      </Provider>
+    )
+  }
+}
+
+export default AnimationExamplePlayState

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

@@ -0,0 +1,48 @@
+import * as React from 'react'
+import { Animation, Icon, Grid, Text, Provider } from '@stardust-ui/react'
+
+const spinner = {
+  keyframe: {
+    from: {
+      transform: 'rotate(0deg)',
+    },
+    to: {
+      transform: 'rotate(360deg)',
+    },
+  },
+  duration: '5s',
+  iterationCount: 'infinite',
+}
+
+const AnimationExampleTimingFunction = () => (
+  <Provider theme={{ animations: { spinner } }}>
+    <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" />
+      <Animation name="spinner" timingFunction="ease">
+        <Icon name="umbrella" circular />
+      </Animation>
+      <Animation name="spinner" timingFunction="linear">
+        <Icon name="umbrella" circular />
+      </Animation>
+      <Animation name="spinner" timingFunction="ease-in">
+        <Icon name="umbrella" circular />
+      </Animation>
+      <Animation name="spinner" timingFunction="ease-out">
+        <Icon name="umbrella" circular />
+      </Animation>
+      <Animation name="spinner" timingFunction="ease-in-out">
+        <Icon name="umbrella" circular />
+      </Animation>
+      <Animation name="spinner" timingFunction="cubic-bezier(0.1, 0.5, 0.1, 0.5)">
+        <Icon name="umbrella" circular />
+      </Animation>
+    </Grid>
+  </Provider>
+)
+
+export default AnimationExampleTimingFunction

docs/src/examples/components/Animation/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 Animation specified by the name property."
+      examplePath="components/Animation/Types/AnimationExample"
+    />
+    <ComponentExample
+      title="Duration"
+      description="An Animation can specify how long time an animation should take to complete."
+      examplePath="components/Animation/Types/AnimationExampleDuration"
+    />
+    <ComponentExample
+      title="Delay"
+      description="An Animation can specify a delay for the start of an animation."
+      examplePath="components/Animation/Types/AnimationExampleDelay"
+    />
+    <ComponentExample
+      title="Direction"
+      description="An Animation can specify whether an animation should be played forwards, backwards or in alternate cycles."
+      examplePath="components/Animation/Types/AnimationExampleDirection"
+    />
+    <ComponentExample
+      title="Iteration count"
+      description="An Animation can specify the number of times an animation should run or specify infinite to make the animation continue forever."
+      examplePath="components/Animation/Types/AnimationExampleIterationCount"
+    />
+    <ComponentExample
+      title="Fill mode"
+      description="An Animation can specify a style for the target element when the animation is not playing (before it starts, after it ends, or both)."
+      examplePath="components/Animation/Types/AnimationExampleFillMode"
+    />
+    <ComponentExample
+      title="Timing function"
+      description="An Animation can specify the speed curve of the animation."
+      examplePath="components/Animation/Types/AnimationExampleTimingFunction"
+    />
+    <ComponentExample
+      title="Play state"
+      description="An Animation can specify whether the animation is running or paused. "
+      examplePath="components/Animation/Types/AnimationExamplePlayState"
+    />
+  </ExampleSection>
+)
+
+export default Types

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

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