feat(Transition): add component (#1435)

* feat(Transition): add component

* docs(Transition): update example

* tests(Transition): improve coverage

* docs(Transition): typo microseconds -> milliseconds

* refactor(Transition): minimize and cleanup docs

* docs(Transition): fix onStart description

* docs(Transition): sort props

* refactor(Transition): rename prop into -> visible

* docs(Transition): clarify Transition vs Group

* docs(ComponentExample): add description maxWidth

* docs(Transition): clarify explorer differences

* refactor(Transition): rename prop unmountOnExit -> unmountOnHide

* fix(index): add missing transition typings

* refactor(Transition): rename entire > directional

* refactor(Transition): mountOnEnter -> mountOnShow

* refactor(Transition): transitionAppear -> transitionOnMount

README.md

@@ -131,7 +131,7 @@ Once you change the flag, you need to refresh your browser to see the changes in
 | ✓ Rail          |                 |                 | ✓ Sidebar       |                    |
 | ✓ Reveal        |                 |                 |   Sticky        |                    |
 | ✓ Segment       |                 |                 | ✓ Tab           |                    |
-| ✓ Step          |                 |                 |   Transition    |                    |
+| ✓ Step          |                 |                 | ✓ Transition    |                    |
 
 ## Our Principles
 

docs/app/Components/ComponentDoc/ComponentExample.js

@@ -19,6 +19,9 @@ const babelConfig = {
 const titleStyle = {
   margin: 0,
 }
+const descriptionStyle = {
+  maxWidth: '50rem',
+}
 
 const headerColumnStyle = {
   // provide room for absolutely positions toggle code icons
@@ -28,6 +31,7 @@ const headerColumnStyle = {
 
 const childrenStyle = {
   paddingTop: 0,
+  maxWidth: '50rem',
 }
 
 const errorStyle = {
@@ -400,7 +404,7 @@ class ComponentExample extends Component {
       <Grid className='docs-example' style={exampleStyle} divided={showCode} columns='1' id={this.anchorName}>
         <Grid.Column style={headerColumnStyle}>
           {title && <Header as='h3' className='no-anchor' style={titleStyle} content={title} />}
-          {description && <p>{description}</p>}
+          {description && <p style={descriptionStyle}>{description}</p>}
           <Menu compact text icon size='small' color='green' className='docs-example-menu'>
             <ToolTip content={copiedDirectLink ? ' Copied Link!' : 'Direct link'}>
               <Menu.Item href={`#${this.anchorName}`} onClick={this.handleDirectLinkClick}>

docs/app/Examples/modules/Transition/Explorers/TransitionExampleGroupExplorer.js

@@ -0,0 +1,57 @@
+import React, { Component } from 'react'
+import { Form, Grid, Image, Transition } from 'semantic-ui-react'
+
+const transitions = [
+  'scale',
+  'fade', 'fade up', 'fade down', 'fade left', 'fade right',
+  'horizontal flip', 'vertical flip',
+  'drop',
+  'fly left', 'fly right', 'fly up', 'fly down',
+  'swing left', 'swing right', 'swing up', 'swing down',
+  'browse', 'browse right',
+  'slide down', 'slide up', 'slide right',
+]
+const options = transitions.map(name => ({ key: name, text: name, value: name }))
+
+export default class TransitionExampleSingleExplorer extends Component {
+  state = { animation: transitions[0], duration: 500, visible: true }
+
+  handleChange = (e, { name, value }) => this.setState({ [name]: value })
+
+  handleVisibility = () => this.setState({ visible: !this.state.visible })
+
+  render() {
+    const { animation, duration, visible } = this.state
+
+    return (
+      <Grid columns={2}>
+        <Grid.Column as={Form}>
+          <Form.Select
+            label='Choose transition'
+            name='animation'
+            onChange={this.handleChange}
+            options={options}
+            value={animation}
+          />
+          <Form.Input
+            label={`Duration: ${duration}ms `}
+            min={100}
+            max={2000}
+            name='duration'
+            onChange={this.handleChange}
+            step={100}
+            type='range'
+            value={duration}
+          />
+          <Form.Button content={visible ? 'Unmount' : 'Mount'} onClick={this.handleVisibility} />
+        </Grid.Column>
+
+        <Grid.Column>
+          <Transition.Group animation={animation} duration={duration}>
+            {visible && <Image centered size='small' src='/assets/images/leaves/4.png' />}
+          </Transition.Group>
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}

docs/app/Examples/modules/Transition/Explorers/TransitionExampleTransitionExplorer.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react'
+import { Form, Grid, Image, Transition } from 'semantic-ui-react'
+
+const transitions = ['jiggle', 'flash', 'shake', 'pulse', 'tada', 'bounce']
+
+const options = transitions.map(name => ({ key: name, text: name, value: name }))
+
+export default class TransitionExampleStaticExplorer extends Component {
+  state = { animation: transitions[0], duration: 500, visible: true }
+
+  handleChange = (e, { name, value }) => this.setState({ [name]: value })
+
+  toggleVisibility = () => this.setState({ visible: !this.state.visible })
+
+  render() {
+    const { animation, duration, visible } = this.state
+
+    return (
+      <Grid columns={2}>
+        <Grid.Column as={Form}>
+          <Form.Select
+            label='Choose transition'
+            name='animation'
+            onChange={this.handleChange}
+            options={options}
+            value={animation}
+          />
+          <Form.Input
+            label={`Duration: ${duration}ms `}
+            min={100}
+            max={2000}
+            name='duration'
+            onChange={this.handleChange}
+            step={100}
+            type='range'
+            value={duration}
+          />
+          <Form.Button content='Run' onClick={this.toggleVisibility} />
+        </Grid.Column>
+
+        <Grid.Column>
+          <Transition animation={animation} duration={duration} visible={visible}>
+            <Image centered size='small' src='/assets/images/leaves/5.png' />
+          </Transition>
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}

docs/app/Examples/modules/Transition/Explorers/index.js

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+import { Message } from 'semantic-ui-react'
+
+const TransitionTypesExamples = () => (
+  <ExampleSection title='Explorers'>
+    <ComponentExample
+      title='Directional Animations'
+      description={[
+        'This explorer animates Transition Group children as they mount and unmount.',
+        'Use it to try directional animations that show and hide the element.',
+      ].join(' ')}
+      examplePath='modules/Transition/Explorers/TransitionExampleGroupExplorer'
+    />
+    <ComponentExample
+      title='Static Animations'
+      description={[
+        'This explorer animates a single Transition child by toggling the visible prop.',
+        'Use it to try unidirectional animations for elements that are always visible.',
+      ].join(' ')}
+      examplePath='modules/Transition/Explorers/TransitionExampleTransitionExplorer'
+    >
+      <Message info>
+        Trigger static animations just as you trigger directional animations,
+        by toggling the <code>visible</code> prop. The value is not significant since
+        static animations are unidirectional.
+      </Message>
+    </ComponentExample>
+  </ExampleSection>
+)
+
+export default TransitionTypesExamples

docs/app/Examples/modules/Transition/Types/TransitionExampleGroup.js

@@ -0,0 +1,41 @@
+import _ from 'lodash'
+import React, { Component } from 'react'
+import { Button, Image, List, Transition } from 'semantic-ui-react'
+
+const users = ['ade', 'chris', 'christian', 'daniel', 'elliot', 'helen']
+
+export default class TransitionExampleGroup extends Component {
+  state = { items: users.slice(0, 3) }
+
+  handleAdd = () => this.setState({ items: users.slice(0, this.state.items.length + 1) })
+
+  handleRemove = () => this.setState({ items: this.state.items.slice(0, -1) })
+
+  render() {
+    const { items } = this.state
+
+    return (
+      <div>
+        <Button.Group>
+          <Button disabled={items.length === 0} icon='minus' onClick={this.handleRemove} />
+          <Button disabled={items.length === users.length} icon='plus' onClick={this.handleAdd} />
+        </Button.Group>
+
+        <Transition.Group
+          as={List}
+          duration={200}
+          divided
+          size='huge'
+          verticalAlign='middle'
+        >
+          {items.map(item => (
+            <List.Item key={item}>
+              <Image avatar src={`/assets/images/avatar/small/${item}.jpg`} />
+              <List.Content header={_.startCase(item)} />
+            </List.Item>
+          ))}
+        </Transition.Group>
+      </div>
+    )
+  }
+}

docs/app/Examples/modules/Transition/Types/TransitionExampleTransition.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react'
+import { Button, Divider, Image, Transition } from 'semantic-ui-react'
+
+export default class TransitionExampleTransition extends Component {
+  state = { visible: true }
+
+  toggleVisibility = () => this.setState({ visible: !this.state.visible })
+
+  render() {
+    const { visible } = this.state
+
+    return (
+      <div>
+        <Button content={visible ? 'Hide' : 'Show'} onClick={this.toggleVisibility} />
+        <Divider hidden />
+        <Transition visible={visible} animation='scale' duration={500}>
+          <Image size='small' src='/assets/images/leaves/1.png' />
+        </Transition>
+      </div>
+    )
+  }
+}

docs/app/Examples/modules/Transition/Types/index.js

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import { Message } from 'semantic-ui-react'
+
+const TransitionTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Transition'
+      description='A Transition animates a single child by toggling the the visible prop.'
+      examplePath='modules/Transition/Types/TransitionExampleTransition'
+    >
+      <Message warning>
+        <p>Do not unmount a Transition child or else it cannot be animated.</p>
+        <Message.List>
+          <Message.Item>
+            Use the <code>unmountOnHide</code> prop to unmount the child after the animation exits.
+          </Message.Item>
+          <Message.Item>
+            Use a <code>Transition.Group</code> to animate children as they mount and unmount.
+          </Message.Item>
+        </Message.List>
+      </Message>
+    </ComponentExample>
+    <ComponentExample
+      title='Transition Group'
+      description='A Transition Group animates children as they mount and unmount.'
+      examplePath='modules/Transition/Types/TransitionExampleGroup'
+    />
+  </ExampleSection>
+)
+
+export default TransitionTypesExamples

docs/app/Examples/modules/Transition/index.js

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

index.d.ts

@@ -163,6 +163,9 @@ export { default as SidebarPusher, SidebarPusherProps } from './dist/commonjs/mo
 export { default as Tab, TabProps } from './dist/commonjs/modules/Tab';
 export { default as TabPane, TabPaneProps } from './dist/commonjs/modules/Tab/TabPane';
 
+export { default as Transition, TransitionProps, TRANSITION_STATUSES } from './dist/commonjs/modules/Transition';
+export { default as TransitionGroup, TransitionGroupProps } from './dist/commonjs/modules/Transition/TransitionGroup';
+
 // Views
 export { default as Advertisement, AdvertisementProps } from './dist/commonjs/views/Advertisement';
 

src/index.d.ts

@@ -48,6 +48,17 @@ export type SemanticCOLORS = 'red' | 'orange' | 'yellow' | 'olive' |'green' | 't
   'pink' | 'brown' | 'grey' | 'black';
 export type SemanticSIZES = 'mini' | 'tiny' | 'small' | 'medium' | 'large' | 'big' | 'huge' | 'massive';
 
+// ======================================================
+// Transitions
+// ======================================================
+
+type SemanticDIRECTIONALTRANSITIONS =  'scale' | 'fade' | 'fade up' | 'fade down' | 'fade left' | 'fade right' |
+  'horizontal flip' | 'vertical flip' | 'drop' | 'fly left' | 'fly right' | 'fly up' | 'fly down' | 'swing left' |
+  'swing right' | 'swing up' | 'swing down' | 'browse' | 'browse right' | 'slide down' | 'slide up' | 'slide right';
+type SemanticSTATICTRANSITIONS = 'jiggle' | 'flash' | 'shake' | 'pulse' | 'tada' | 'bounce';
+
+export type SemanticTRANSITIONS = SemanticDIRECTIONALTRANSITIONS | SemanticSTATICTRANSITIONS;
+
 // ======================================================
 // Widths
 // ======================================================

src/index.js

@@ -145,6 +145,9 @@ export { default as SidebarPusher } from './modules/Sidebar/SidebarPusher'
 export { default as Tab } from './modules/Tab'
 export { default as TabPane } from './modules/Tab/TabPane'
 
+export { default as Transition } from './modules/Transition'
+export { default as TransitionGroup } from './modules/Transition/TransitionGroup'
+
 // Views
 export { default as Advertisement } from './views/Advertisement'
 

src/lib/SUI.js

@@ -29,6 +29,19 @@ export const WIDTHS = [
   ..._.values(numberToWordMap),
 ]
 
+export const DIRECTIONAL_TRANSITIONS = [
+  'scale',
+  'fade', 'fade up', 'fade down', 'fade left', 'fade right',
+  'horizontal flip', 'vertical flip',
+  'drop',
+  'fly left', 'fly right', 'fly up', 'fly down',
+  'swing left', 'swing right', 'swing up', 'swing down',
+  'browse', 'browse right',
+  'slide down', 'slide up', 'slide right',
+]
+export const STATIC_TRANSITIONS = ['jiggle', 'flash', 'shake', 'pulse', 'tada', 'bounce']
+export const TRANSITIONS = [...DIRECTIONAL_TRANSITIONS, ...STATIC_TRANSITIONS]
+
 // Generated from:
 // https://github.com/Semantic-Org/Semantic-UI/blob/master/dist/components/icon.css
 export const WEB_CONTENT_ICONS = [