[WIP] Animated Accordion API

docs/app/Examples/modules/Accordion/Advanced/AccordionExampleAnimated.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Accordion } from 'semantic-ui-react'
+
+const ShortContent = (
+  <div>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius,
+    nulla quis ornare suscipit, lacus diam lacinia tellus, quis pharetra
+    odio nulla nec erat. Nulla odio tortor, convallis vitae purus a,
+  </div>
+)
+
+const LongContent = (
+  <div>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius,
+    nulla quis ornare suscipit, lacus diam lacinia tellus, quis pharetra
+    odio nulla nec erat. Nulla odio tortor, convallis vitae purus a,
+    finibus commodo mauris. Proin in tristique ipsum, sit amet suscipit
+    nulla. Nullam sed felis nec sem pharetra venenatis. Sed porta nunc vitae
+    ipsum feugiat, quis faucibus velit iaculis. Nam vel lacus feugiat, gravida
+    sapien quis, cursus nisl. Etiam mattis semper justo tincidunt fringilla.
+    Mauris sodales,
+  </div>
+)
+
+const rootPanels = [
+  {
+    title: 'Short Content',
+    content: {
+      content: ShortContent,
+      key: 'content-1',
+    },
+  },
+  {
+    title: 'Long Content',
+    content: {
+      content: LongContent,
+      key: 'content-2',
+    },
+  },
+]
+
+const AccordionExampleTransition = () => (
+  <Accordion.Animated
+    animated
+    defaultActiveIndex={0}
+    panels={rootPanels}
+    styled
+  />
+)
+
+export default AccordionExampleTransition

docs/app/Examples/modules/Accordion/Advanced/AccordionExampleAnimatedContent.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import { Accordion } from 'semantic-ui-react'
+
+const ShortContent = (
+  <div>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius,
+    nulla quis ornare suscipit, lacus diam lacinia tellus, quis pharetra
+    odio nulla nec erat. Nulla odio tortor, convallis vitae purus a,
+  </div>
+)
+
+const LongContent = (
+  <div>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius,
+    nulla quis ornare suscipit, lacus diam lacinia tellus, quis pharetra
+    odio nulla nec erat. Nulla odio tortor, convallis vitae purus a,
+    finibus commodo mauris. Proin in tristique ipsum, sit amet suscipit
+    nulla. Nullam sed felis nec sem pharetra venenatis. Sed porta nunc vitae
+    ipsum feugiat, quis faucibus velit iaculis. Nam vel lacus feugiat, gravida
+    sapien quis, cursus nisl. Etiam mattis semper justo tincidunt fringilla.
+    Mauris sodales,
+  </div>
+)
+
+const rootPanels = [
+  {
+    title: 'Short Content',
+    content: {
+      animation: 'slide down',
+      content: ShortContent,
+      key: 'content-1',
+      transitionDuration: 300,
+    },
+  },
+  {
+    title: 'Long Content',
+    content: {
+      animation: 'fade down',
+      content: LongContent,
+      key: 'content-2',
+      transitionDuration: 300,
+    },
+  },
+]
+
+const AccordionExampleTransition = () => (
+  <Accordion defaultActiveIndex={0} panels={rootPanels} styled />
+)
+
+export default AccordionExampleTransition

docs/app/Examples/modules/Accordion/Advanced/index.js

@@ -28,6 +28,16 @@ const AccordionAdvancedExamples = () => (
       description='Panels of Accordion can be rendered via shorthand prop.'
       examplePath='modules/Accordion/Advanced/AccordionExampleShorthand'
     />
+    <ComponentExample
+      title='Animated Accordion'
+      description='The accordion content will render with an animation.'
+      examplePath='modules/Accordion/Advanced/AccordionExampleAnimated'
+    />
+    <ComponentExample
+      title='Animated Accordion Content'
+      description='The accordion content will render with an animation.'
+      examplePath='modules/Accordion/Advanced/AccordionExampleAnimatedContent'
+    />
   </ExampleSection>
 )
 

src/modules/Accordion/Accordion.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { default as AccordionAccordion, AccordionAccordionProps } from './AccordionAccordion';
+import { default as AccordionAnimated } from './AccordionAnimated';
 import { default as AccordionContent } from './AccordionContent';
 import { default as AccordionTitle } from './AccordionTitle';
 
@@ -22,6 +23,7 @@ export interface AccordionProps extends AccordionAccordionProps {
 
 interface AccordionComponent extends React.ComponentClass<AccordionProps> {
   Accordion: typeof AccordionAccordion;
+  Animated: typeof AccordionAnimated;
   Content: typeof AccordionContent;
   Title: typeof AccordionTitle;
 }

src/modules/Accordion/Accordion.js

@@ -8,6 +8,7 @@ import {
   useKeyOnly,
 } from '../../lib'
 import AccordionAccordion from './AccordionAccordion'
+import AccordionAnimated from './AccordionAnimated'
 import AccordionContent from './AccordionContent'
 import AccordionTitle from './AccordionTitle'
 
@@ -54,6 +55,7 @@ Accordion.propTypes = {
 }
 
 Accordion.Accordion = AccordionAccordion
+Accordion.Animated = AccordionAnimated
 Accordion.Content = AccordionContent
 Accordion.Title = AccordionTitle
 

src/modules/Accordion/AccordionAnimated.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+import { default as AccordionAccordion, AccordionAccordionProps } from './AccordionAccordion';
+import { default as AccordionContent } from './AccordionContent';
+import { default as AccordionTitle } from './AccordionTitle';
+
+export interface AccordionProps extends AccordionAccordionProps {
+  [key: string]: any;
+
+  /** Additional classes. */
+  className?: string;
+
+  /** Format to take up the width of its container. */
+  fluid?: boolean;
+
+  /** Format for dark backgrounds. */
+  inverted?: boolean;
+
+  /** Adds some basic styling to accordion panels. */
+  styled?: boolean;
+}
+
+interface AccordionComponent extends React.ComponentClass<AccordionProps> {
+  Accordion: typeof AccordionAccordion;
+  Content: typeof AccordionContent;
+  Title: typeof AccordionTitle;
+}
+
+declare const Accordion: AccordionComponent;
+
+export default Accordion;

src/modules/Accordion/AccordionAnimated.js

@@ -0,0 +1,74 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import {
+  customPropTypes,
+  useKeyOnly,
+  getUnhandledProps,
+  META,
+} from '../../lib'
+import AccordionAccordion from './AccordionAccordion'
+
+/**
+ * An accordion allows users to toggle the display of sections of content.
+ */
+function AccordionAnimated(props) {
+  const {
+    className,
+    fluid,
+    inverted,
+    styled,
+    panels,
+  } = props
+
+  const classes = cx(
+    'ui',
+    useKeyOnly(fluid, 'fluid'),
+    useKeyOnly(inverted, 'inverted'),
+    useKeyOnly(styled, 'styled'),
+    className,
+  )
+  const rest = getUnhandledProps(AccordionAnimated, props)
+  const animatedPanels = panels.map(panel => ({
+    content: {
+      ...panel.content,
+      animation: 'fade down',
+      transitionDuration: 300,
+    },
+    title: panel.title,
+  }))
+  return <AccordionAccordion {...rest} panels={animatedPanels} className={classes} />
+}
+
+AccordionAnimated._meta = {
+  name: 'AccordionAnimated',
+  type: META.TYPES.MODULE,
+}
+
+AccordionAnimated.propTypes = {
+  /** Additional classes. */
+  className: PropTypes.string,
+
+  /** Format to take up the width of its container. */
+  fluid: PropTypes.bool,
+
+  /** Format for dark backgrounds. */
+  inverted: PropTypes.bool,
+
+  /** Adds some basic styling to accordion panels. */
+  styled: PropTypes.bool,
+
+  /** Shorthand array of props for Accordion. */
+  panels: customPropTypes.every([
+    customPropTypes.disallow(['children']),
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        content: customPropTypes.itemShorthand,
+        title: customPropTypes.itemShorthand,
+      }),
+    ),
+  ]),
+}
+
+export default AccordionAnimated

src/modules/Accordion/AccordionContent.js

@@ -11,20 +11,43 @@ import {
   META,
   useKeyOnly,
 } from '../../lib'
+import Transition from '../Transition'
 
 /**
  * A content sub-component for Accordion component.
  */
 function AccordionContent(props) {
-  const { active, children, className, content } = props
+  const {
+    active,
+    animation,
+    children,
+    className,
+    content,
+    transitionDuration,
+  } = props
+  const rest = getUnhandledProps(AccordionContent, props)
+  const ElementType = getElementType(AccordionContent, props)
+
+  if (transitionDuration) {
+    const classes = cx(
+      'content',
+      className,
+    )
+    return (
+      <Transition.Group animation={animation} duration={transitionDuration}>
+        {active && (
+          <ElementType {...rest} className={classes}>
+            {childrenUtils.isNil(children) ? content : children}
+          </ElementType>
+        )}
+      </Transition.Group>
+    )
+  }
   const classes = cx(
     'content',
     useKeyOnly(active, 'active'),
     className,
   )
-  const rest = getUnhandledProps(AccordionContent, props)
-  const ElementType = getElementType(AccordionContent, props)
-
   return (
     <ElementType {...rest} className={classes}>
       {childrenUtils.isNil(children) ? content : children}
@@ -47,6 +70,17 @@ AccordionContent.propTypes = {
 
   /** Shorthand for primary content. */
   content: customPropTypes.contentShorthand,
+
+  /** Animation type */
+  animation: PropTypes.string,
+
+  /** Animation type */
+  transitionDuration: PropTypes.number,
+}
+
+AccordionContent.defaultProps = {
+  animation: 'slide down',
+  transitionDuration: 0,
 }
 
 AccordionContent._meta = {