Add transition prop to Flyout

Author: rbrtsmith

src/components/Flyout/Content.js

@@ -11,6 +11,7 @@ const FlyoutContent = ({
   tag,
   className,
   children,
+  transition,
   ...rest
 },
 {
@@ -19,7 +20,12 @@ const FlyoutContent = ({
   E(
     tag || 'div',
     {
-      className: classNames(`${NAMESPACE}c-flyout__content`, `${NAMESPACE}c-flyout__content--${direction}`, className),
+      className: classNames(
+        `${NAMESPACE}c-flyout__content`,
+        `${NAMESPACE}c-flyout__content--${direction}`,
+        { [`${NAMESPACE}c-flyout__content--transition`]: transition },
+        className
+      ),
       style: { width: width && appendUnit(width, 'px') },
       ...rest
     },
@@ -32,6 +38,7 @@ FlyoutContent.contextTypes = {
 
 FlyoutContent.propTypes = {
   tag: T.oneOf(BLOCK_TAGS),
+  transition: T.bool,
   className: T.string,
   children: T.node.isRequired,
   width: T.oneOfType([T.string, T.number]),

src/components/Flyout/__tests__/Content.jsx

@@ -16,6 +16,7 @@ describe('<Flyout.Content />', () => {
     }
     const $ = shallow(<Flyout.Content {...props}>_</Flyout.Content>)
     expect($.hasClass(`${NAMESPACE}c-flyout__content`)).toBe(true)
+    expect($.hasClass(`${NAMESPACE}c-flyout__content--transition`)).toBe(false)
     expect($.hasClass('test')).toBe(true)
   })
 
@@ -60,15 +61,15 @@ describe('<Flyout.Content />', () => {
       <Flyout.Content
         {...defaultProps}
         style={{ position: 'relative' }}
-        ariaHidden="true"
+        ariaHidden
       >
         _
       </Flyout.Content>
     )
     expect($.prop('style')).toEqual({
       position: 'relative'
     })
-    expect($.prop('ariaHidden')).toBe('true')
+    expect($.prop('ariaHidden')).toBe(true)
   })
 
   it('renders with a width', () => {
@@ -85,4 +86,18 @@ describe('<Flyout.Content />', () => {
       width: '200px'
     })
   })
+
+  it('renders with a transition', () => {
+    const props = {
+      ...defaultProps,
+      transition: true
+    }
+    const $ = shallow(
+      <Flyout.Content {...props}>
+        _
+      </Flyout.Content>
+    )
+    expect($.hasClass(`${NAMESPACE}c-flyout__content`)).toBe(true)
+    expect($.hasClass(`${NAMESPACE}c-flyout__content--transition`)).toBe(true)
+  })
 })