diff --git a/CHANGELOG.md b/CHANGELOG.md index 2e7c09ef45..865253282d 100644 --- a/CHANGELOG.md +++ b/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](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) diff --git a/docs/src/examples/components/Animation/Types/AnimationExample.tsx b/docs/src/examples/components/Animation/Types/AnimationExample.tsx new file mode 100644 index 0000000000..1401bcbaf6 --- /dev/null +++ b/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 = () => ( + + + + + +) + +export default AnimationExample diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx new file mode 100644 index 0000000000..870798c023 --- /dev/null +++ b/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 = () => ( +
+ This animation will start after 5 seconds +
+ + + + + +
+) + +export default AnimationExampleDelay diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleDirection.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleDirection.tsx new file mode 100644 index 0000000000..5582331bab --- /dev/null +++ b/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 = () => ( + + + + + + + + + + + + + + + + + + + + +) + +export default AnimationExampleDirection diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleDuration.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleDuration.tsx new file mode 100644 index 0000000000..a1792c9f13 --- /dev/null +++ b/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 = () => ( + + + + + +) + +export default AnimationExampleDuration diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleFillMode.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleFillMode.tsx new file mode 100644 index 0000000000..cf5712cf13 --- /dev/null +++ b/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 = () => ( + + + + + + + + + + + + + + + + + + + + +) + +export default AnimationExampleFillMode diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleIterationCount.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleIterationCount.tsx new file mode 100644 index 0000000000..bfa4b025b7 --- /dev/null +++ b/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 = () => ( + + + + + + + + + + + + + + + + + + + + +) + +export default AnimationExampleIterationCount diff --git a/docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx b/docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx new file mode 100644 index 0000000000..92c440c528 --- /dev/null +++ b/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 ( + +
+
+ + ) + } +} + +export default AnimationExamplePlayState diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleTimingFunction.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleTimingFunction.tsx new file mode 100644 index 0000000000..1442b14d7f --- /dev/null +++ b/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 = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + +) + +export default AnimationExampleTimingFunction diff --git a/docs/src/examples/components/Animation/Types/index.tsx b/docs/src/examples/components/Animation/Types/index.tsx new file mode 100644 index 0000000000..6473b27118 --- /dev/null +++ b/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 = () => ( + + + + + + + + + + +) + +export default Types diff --git a/docs/src/examples/components/Transition/index.tsx b/docs/src/examples/components/Animation/index.tsx similarity index 57% rename from docs/src/examples/components/Transition/index.tsx rename to docs/src/examples/components/Animation/index.tsx index a24a108efb..609ee0166f 100644 --- a/docs/src/examples/components/Transition/index.tsx +++ b/docs/src/examples/components/Animation/index.tsx @@ -1,10 +1,10 @@ import * as React from 'react' import Types from './Types' -const TransitionExamples = () => ( +const AnimationExamples = () => (
) -export default TransitionExamples +export default AnimationExamples diff --git a/docs/src/examples/components/Transition/Types/TransitionExample.tsx b/docs/src/examples/components/Transition/Types/TransitionExample.tsx deleted file mode 100644 index d694a4e480..0000000000 --- a/docs/src/examples/components/Transition/Types/TransitionExample.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import * as React from 'react' -import { Transition, Icon } from '@stardust-ui/react' - -const TransitionExample = () => ( - - - -) - -export default TransitionExample diff --git a/docs/src/examples/components/Transition/Types/TransitionExampleDelay.tsx b/docs/src/examples/components/Transition/Types/TransitionExampleDelay.tsx deleted file mode 100644 index 3ad6ea4d9a..0000000000 --- a/docs/src/examples/components/Transition/Types/TransitionExampleDelay.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from 'react' -import { Transition, Icon } from '@stardust-ui/react' - -const TransitionExampleDelay = () => ( -
- {'This animation will start after 5 seconds'} -
- - - -
-) - -export default TransitionExampleDelay diff --git a/docs/src/examples/components/Transition/Types/TransitionExampleDirection.tsx b/docs/src/examples/components/Transition/Types/TransitionExampleDirection.tsx deleted file mode 100644 index 76037a71d4..0000000000 --- a/docs/src/examples/components/Transition/Types/TransitionExampleDirection.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react' -import { Transition, Icon, Grid, Text } from '@stardust-ui/react' - -const TransitionExampleDirection = () => ( - - - - - - - - - - - - - - - - - - -) - -export default TransitionExampleDirection diff --git a/docs/src/examples/components/Transition/Types/TransitionExampleDuration.tsx b/docs/src/examples/components/Transition/Types/TransitionExampleDuration.tsx deleted file mode 100644 index 43be02dd04..0000000000 --- a/docs/src/examples/components/Transition/Types/TransitionExampleDuration.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import * as React from 'react' -import { Transition, Icon } from '@stardust-ui/react' - -const TransitionExampleDuration = () => ( - - - -) - -export default TransitionExampleDuration diff --git a/docs/src/examples/components/Transition/Types/TransitionExampleFillMode.tsx b/docs/src/examples/components/Transition/Types/TransitionExampleFillMode.tsx deleted file mode 100644 index 143a7f50a2..0000000000 --- a/docs/src/examples/components/Transition/Types/TransitionExampleFillMode.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react' -import { Transition, Icon, Grid, Text } from '@stardust-ui/react' - -const TransitionExampleFillMode = () => ( - - - - - - - - - - - - - - - - - - -) - -export default TransitionExampleFillMode diff --git a/docs/src/examples/components/Transition/Types/TransitionExampleIterationCount.tsx b/docs/src/examples/components/Transition/Types/TransitionExampleIterationCount.tsx deleted file mode 100644 index 6ed88158b5..0000000000 --- a/docs/src/examples/components/Transition/Types/TransitionExampleIterationCount.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react' -import { Transition, Icon, Grid, Text } from '@stardust-ui/react' - -const TransitionExampleIterationCount = () => ( - - - - - - - - - - - - - - - - - - -) - -export default TransitionExampleIterationCount diff --git a/docs/src/examples/components/Transition/Types/TransitionExamplePlayState.tsx b/docs/src/examples/components/Transition/Types/TransitionExamplePlayState.tsx deleted file mode 100644 index 51cb67f903..0000000000 --- a/docs/src/examples/components/Transition/Types/TransitionExamplePlayState.tsx +++ /dev/null @@ -1,34 +0,0 @@ -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 ( -
-
- ) - } -} - -export default IconExample diff --git a/docs/src/examples/components/Transition/Types/TransitionExampleTimingFunction.tsx b/docs/src/examples/components/Transition/Types/TransitionExampleTimingFunction.tsx deleted file mode 100644 index b1b0a15363..0000000000 --- a/docs/src/examples/components/Transition/Types/TransitionExampleTimingFunction.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from 'react' -import { Transition, Icon, Grid, Text } from '@stardust-ui/react' - -const TransitionExampleTimingFunction = () => ( - - - - - - - - - - - - - - - - - - - - - - - - - - -) - -export default TransitionExampleTimingFunction diff --git a/docs/src/examples/components/Transition/Types/index.tsx b/docs/src/examples/components/Transition/Types/index.tsx deleted file mode 100644 index 39ae82a34c..0000000000 --- a/docs/src/examples/components/Transition/Types/index.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import * as React from 'react' -import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample' -import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection' - -const Types = () => ( - - - - - - - - - - -) - -export default Types diff --git a/docs/src/views/Theming.tsx b/docs/src/views/Theming.tsx index a9587060a0..5a5412daa5 100644 --- a/docs/src/views/Theming.tsx +++ b/docs/src/views/Theming.tsx @@ -1,11 +1,24 @@ import * as React from 'react' import { NavLink } from 'react-router-dom' import { Header } from 'semantic-ui-react' -import { Button, Divider, Icon, Provider, Text } from '@stardust-ui/react' +import { Button, Divider, Icon, Provider, Text, Animation } from '@stardust-ui/react' import DocPage from '../components/DocPage/DocPage' import ExampleSnippet from '../components/ExampleSnippet/ExampleSnippet' +const spinner = { + keyframe: { + from: { + transform: 'rotate(0deg)', + }, + to: { + transform: 'rotate(360deg)', + }, + }, + duration: '5s', + iterationCount: 'infinite', +} + export default () => (
@@ -208,6 +221,136 @@ export default () => ( Provider at the root of your app.

+
+

+ You define animations in Stardust in a very similar way to CSS, by providing keyframes and + animation properties. +

+ + `, + ` ... `, + ``, + ].join('\n')} + /> + +

+ You can define the animations in a part of your render tree using the{' '} + Provider. +

+

+ This is done with the Provider's theme prop. The animations are then applied + based on their name by using the Animation{' '} + component, or the animation property available on all Stardust component. Here's + how we can use them in our components. +

+ `, + `
`, + ` `, + ` `, + `
`, + ``, + ].join('\n')} + render={() => ( + +
+ + + + +
+ + )} + /> + +

+ You can also override some of the defined animation properties, by providing + additional properties to the Animation component, or the animation{' '} + prop. +

+ +
+ Keyframes are static - Keyframes cannot be overridden using the properties. + If you want to add new keyframes or change some existing, please use the Provider{' '} + for this. The API for + using the animations doesn't provide any way for changing the keyframes. +
+ + `, + ` `, + ` `, + ``, + ].join('\n')} + render={() => ( + +
+ + + + +
+ + )} + /> + +

+ The difference between using the Animation component versus the animation property is that, + the Animation component can be safely used for applying animations on{' '} + all components (Stardust, custom and third party components). For the Stardust + components, we recommend using the animation property as there will be no wrapper element + added just for the purpose of defining the animation. For more details, please see the + examples in the Animation component, or the + structure of the animation property in any of the Stardust components. +

+

diff --git a/src/components/Transition/Transition.tsx b/src/components/Animation/Animation.tsx similarity index 89% rename from src/components/Transition/Transition.tsx rename to src/components/Animation/Animation.tsx index fea156a26c..d8e4a46da5 100644 --- a/src/components/Transition/Transition.tsx +++ b/src/components/Animation/Animation.tsx @@ -2,12 +2,12 @@ import * as PropTypes from 'prop-types' import * as React from 'react' import { UIComponent, customPropTypes, childrenExist } from '../../lib' -import { Animation } from '../../themes/types' +import { AnimationProp } from '../../themes/types' import createAnimationStyles from '../../lib/createAnimationStyles' import { ChildrenComponentProps, StyledComponentProps } from '../../lib/commonPropInterfaces' import { styledComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes' -export interface TransitionProps extends StyledComponentProps, ChildrenComponentProps { +export interface AnimationProps extends StyledComponentProps, ChildrenComponentProps { /** An element type to render as (string or function). */ as?: any @@ -15,7 +15,7 @@ export interface TransitionProps extends StyledComponentProps, Childre className?: string /** The name for the animation that should be applied, defined in the theme. */ - animationName?: string + name?: string /** The delay property specifies a delay for the start of an animation. Negative values are * also allowed. If using negative values, the animation will start as if it had already been @@ -70,19 +70,19 @@ export interface TransitionProps extends StyledComponentProps, Childre } /** - * A transition is an animation usually used to move content in or out of view. + * An animation allows the user to animate their own components. */ -class Transition extends UIComponent { +class Animation extends UIComponent { static create: Function - static className = 'ui-transition' + static className = 'ui-animation' - static displayName = 'Transition' + static displayName = 'Animation' static propTypes = { ...styledComponentPropTypes, ...childrenComponentPropTypes, - animationName: PropTypes.string, + name: PropTypes.string, as: customPropTypes.as, className: PropTypes.string, delay: PropTypes.string, @@ -95,10 +95,10 @@ class Transition extends UIComponent { } renderComponent({ ElementType, classes, rest, styles, variables, theme }) { - const { children, animationName } = this.props + const { children, name } = this.props - const animation: Animation = { - name: animationName, + const animation: AnimationProp = { + name, duration: this.props.duration, delay: this.props.delay, iterationCount: this.props.iterationCount, @@ -125,4 +125,4 @@ class Transition extends UIComponent { } } -export default Transition +export default Animation diff --git a/src/components/Transition/index.ts b/src/components/Transition/index.ts deleted file mode 100644 index fa712ef4a9..0000000000 --- a/src/components/Transition/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Transition' diff --git a/src/index.ts b/src/index.ts index ef4b0e8a2f..b1f36f478e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -93,7 +93,7 @@ export { default as Status, StatusPropsWithDefaults, StatusProps } from './compo export { default as Text, TextProps } from './components/Text/Text' -export { default as Transition, TransitionProps } from './components/Transition/Transition' +export { default as Animation, AnimationProps } from './components/Animation/Animation' // // Accessibility diff --git a/src/lib/commonPropInterfaces.ts b/src/lib/commonPropInterfaces.ts index 5219498303..22b831cf5a 100644 --- a/src/lib/commonPropInterfaces.ts +++ b/src/lib/commonPropInterfaces.ts @@ -1,4 +1,4 @@ -import { ComponentVariablesInput, ComponentSlotStyle, Animation } from '../themes/types' +import { ComponentVariablesInput, ComponentSlotStyle, AnimationProp } from '../themes/types' import { ShorthandValue, ReactChildren } from '../../types/utils' export interface StyledComponentProps { @@ -11,7 +11,7 @@ export interface StyledComponentProps { export interface AnimatedComponentProps { /** Generic animation property that can be used for applying different theme animations. */ - animation?: Animation + animation?: AnimationProp } export interface UIComponentProps extends StyledComponentProps, AnimatedComponentProps { diff --git a/src/lib/createAnimationStyles.tsx b/src/lib/createAnimationStyles.tsx index 96ed98bdfa..d0dca5e19f 100644 --- a/src/lib/createAnimationStyles.tsx +++ b/src/lib/createAnimationStyles.tsx @@ -1,7 +1,7 @@ -import { ThemePrepared, Animation } from '../themes/types' +import { ThemePrepared, AnimationProp } from '../themes/types' import { callable } from './index' -const createAnimationStyles = (animation: Animation, theme: ThemePrepared) => { +const createAnimationStyles = (animation: AnimationProp, theme: ThemePrepared) => { let animationCSSProp = {} const { animations = {} } = theme diff --git a/src/themes/teams/componentStyles.ts b/src/themes/teams/componentStyles.ts index b02e53b138..ff31420305 100644 --- a/src/themes/teams/componentStyles.ts +++ b/src/themes/teams/componentStyles.ts @@ -52,4 +52,4 @@ export { default as Status } from './components/Status/statusStyles' export { default as Text } from './components/Text/textStyles' -export { default as Transition } from './components/Transition/transitionStyles' +export { default as Animation } from './components/Animation/animationStyles' diff --git a/src/themes/teams/componentVariables.ts b/src/themes/teams/componentVariables.ts index 06f8187743..eeb611e45a 100644 --- a/src/themes/teams/componentVariables.ts +++ b/src/themes/teams/componentVariables.ts @@ -47,4 +47,4 @@ export { default as Status } from './components/Status/statusVariables' export { default as Text } from './components/Text/textVariables' -export { default as Transition } from './components/Transition/transitionVariables' +export { default as Animation } from './components/Animation/animationVariables' diff --git a/src/themes/teams/components/Transition/transitionStyles.ts b/src/themes/teams/components/Animation/animationStyles.ts similarity index 100% rename from src/themes/teams/components/Transition/transitionStyles.ts rename to src/themes/teams/components/Animation/animationStyles.ts diff --git a/src/themes/teams/components/Transition/transitionVariables.ts b/src/themes/teams/components/Animation/animationVariables.ts similarity index 100% rename from src/themes/teams/components/Transition/transitionVariables.ts rename to src/themes/teams/components/Animation/animationVariables.ts diff --git a/src/themes/teams/index.ts b/src/themes/teams/index.ts index e349095a6d..24d24a1bca 100644 --- a/src/themes/teams/index.ts +++ b/src/themes/teams/index.ts @@ -34,29 +34,6 @@ Object.keys(fontIcons).forEach(iconName => { icons[iconName] = declareFontBased(fontIcons[iconName]) }) -const animations = { - spinner: { - keyframe: { - from: { - transform: 'rotate(0deg)', - }, - to: { - transform: 'rotate(360deg)', - }, - }, - duration: '5s', - iterationCount: 'infinite', - }, - colorChanger: { - keyframe: { - from: { color: 'red' }, - to: { color: 'blue' }, - }, - duration: '3s', - iterationCount: 'infinite', - }, -} - export default { siteVariables, componentVariables, @@ -64,5 +41,4 @@ export default { fontFaces, staticStyles, icons, - animations, } as ThemeInput diff --git a/src/themes/types.ts b/src/themes/types.ts index d88c8f6806..e2cb1f04e7 100644 --- a/src/themes/types.ts +++ b/src/themes/types.ts @@ -115,7 +115,7 @@ export interface ComponentSlotStylesPrepared export interface ComponentSlotClasses extends ObjectOf {} export interface ComponentSlotClasses extends ObjectOf {} -export type Animation = +export type AnimationProp = | { name: string delay?: string @@ -191,6 +191,7 @@ export interface ThemeComponentStylesInput { [key: string]: ComponentSlotStylesInput | undefined Accordion?: ComponentSlotStylesInput + Animation?: ComponentSlotStylesInput Attachment?: ComponentSlotStylesInput Avatar?: ComponentSlotStylesInput Button?: ComponentSlotStylesInput @@ -228,6 +229,7 @@ export interface ThemeComponentStylesPrepared { [key: string]: ComponentSlotStylesPrepared | undefined Accordion?: ComponentSlotStylesPrepared + Animation?: ComponentSlotStylesPrepared Attachment?: ComponentSlotStylesPrepared Avatar?: ComponentSlotStylesPrepared Button?: ComponentSlotStylesPrepared @@ -265,6 +267,7 @@ export interface ThemeComponentVariablesInput { [key: string]: any Accordion?: ComponentVariablesInput + Animation?: ComponentVariablesInput Attachment?: ComponentVariablesInput Avatar?: ComponentVariablesInput Button?: ComponentVariablesInput @@ -302,6 +305,7 @@ export interface ThemeComponentVariablesPrepared { [key: string]: any Accordion?: ComponentVariablesPrepared + Animation?: ComponentVariablesPrepared Attachment?: ComponentVariablesPrepared Avatar?: ComponentVariablesPrepared Button?: ComponentVariablesPrepared diff --git a/test/specs/components/Animation/Animation-test.tsx b/test/specs/components/Animation/Animation-test.tsx new file mode 100644 index 0000000000..2f5774e02c --- /dev/null +++ b/test/specs/components/Animation/Animation-test.tsx @@ -0,0 +1,7 @@ +import { isConformant } from 'test/specs/commonTests' + +import Animation from 'src/components/Animation/Animation' + +describe('Animation', () => { + isConformant(Animation) +}) diff --git a/test/specs/components/Transition/Transition-test.tsx b/test/specs/components/Transition/Transition-test.tsx deleted file mode 100644 index e9fc493268..0000000000 --- a/test/specs/components/Transition/Transition-test.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { isConformant } from 'test/specs/commonTests' - -import Transition from 'src/components/Transition/Transition' - -describe('Transition', () => { - isConformant(Transition) -})