[UI Framework] Reactify kuiCollapseButton (elastic#12225)

* add KuiCollapseButton
* Export DIRECTIONS in collapse_button.js and use it in its test

ui_framework/components/collapse_button/__snapshots__/collapse_button.test.js.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KuiCollapseButton Props direction down renders the down class 1`] = `
+<button
+  aria-label="aria-label"
+  class="kuiCollapseButton testClass1 testClass2"
+  data-test-subj="test subject string"
+  type="button"
+>
+  <div
+    class="kuiIcon fa-chevron-circle-down"
+  />
+</button>
+`;
+
+exports[`KuiCollapseButton Props direction left renders the left class 1`] = `
+<button
+  aria-label="aria-label"
+  class="kuiCollapseButton testClass1 testClass2"
+  data-test-subj="test subject string"
+  type="button"
+>
+  <div
+    class="kuiIcon fa-chevron-circle-left"
+  />
+</button>
+`;
+
+exports[`KuiCollapseButton Props direction right renders the right class 1`] = `
+<button
+  aria-label="aria-label"
+  class="kuiCollapseButton testClass1 testClass2"
+  data-test-subj="test subject string"
+  type="button"
+>
+  <div
+    class="kuiIcon fa-chevron-circle-right"
+  />
+</button>
+`;
+
+exports[`KuiCollapseButton Props direction up renders the up class 1`] = `
+<button
+  aria-label="aria-label"
+  class="kuiCollapseButton testClass1 testClass2"
+  data-test-subj="test subject string"
+  type="button"
+>
+  <div
+    class="kuiIcon fa-chevron-circle-up"
+  />
+</button>
+`;

ui_framework/components/collapse_button/collapse_button.js

@@ -0,0 +1,41 @@
+import React, {
+  PropTypes,
+} from 'react';
+import classNames from 'classnames';
+
+const DIRECTIONS = [
+  'down',
+  'up',
+  'left',
+  'right'
+];
+
+const directionToClassNameMap = {
+  down: 'fa-chevron-circle-down',
+  up: 'fa-chevron-circle-up',
+  left: 'fa-chevron-circle-left',
+  right: 'fa-chevron-circle-right',
+};
+
+const KuiCollapseButton = ({ className, direction, ...rest }) => {
+  const classes = classNames('kuiCollapseButton', className);
+  const childClasses = classNames('kuiIcon', directionToClassNameMap[direction]);
+
+  return (<button
+            type="button"
+            className={classes}
+            {...rest}
+          >
+            <div className={childClasses}/>
+          </button>);
+};
+
+KuiCollapseButton.propTypes = {
+  className: PropTypes.string,
+  direction: PropTypes.oneOf(DIRECTIONS).isRequired
+};
+
+export {
+  DIRECTIONS,
+  KuiCollapseButton
+};

ui_framework/components/collapse_button/collapse_button.test.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { render,shallow } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+import sinon from 'sinon';
+
+import {
+  DIRECTIONS,
+  KuiCollapseButton,
+} from './collapse_button';
+
+describe('KuiCollapseButton', () => {
+  describe('Props', () => {
+    describe('direction', () => {
+      DIRECTIONS.forEach(direction => {
+        describe(direction, () => {
+          test(`renders the ${direction} class`, () => {
+            const component = <KuiCollapseButton direction={direction} { ...requiredProps }/>;
+            expect(render(component)).toMatchSnapshot();
+          });
+        });
+      });
+    });
+
+    describe('onClick', () => {
+      test(`isn't called upon instantiation`, () => {
+        const onClickHandler = sinon.stub();
+
+        shallow(
+          <KuiCollapseButton direction='left' onClick={onClickHandler} />
+        );
+
+        sinon.assert.notCalled(onClickHandler);
+      });
+
+      test('is called when the button is clicked', () => {
+        const onClickHandler = sinon.stub();
+
+        const $button = shallow(
+          <KuiCollapseButton direction='left' onClick={onClickHandler} />
+        );
+
+        $button.simulate('click');
+
+        sinon.assert.calledOnce(onClickHandler);
+      });
+    });
+  });
+});

ui_framework/components/collapse_button/index.js

@@ -0,0 +1 @@
+export { KuiCollapseButton } from './collapse_button';

ui_framework/components/index.js

@@ -12,6 +12,10 @@ export {
   KuiSubmitButton,
 } from './button';
 
+export {
+  KuiCollapseButton
+} from './collapse_button';
+
 export {
   KuiEvent,
   KuiEventSymbol,

ui_framework/doc_site/src/services/routes/routes.js

@@ -139,6 +139,7 @@ const components = [{
 }, {
   name: 'CollapseButton',
   component: CollapseButtonExample,
+  hasReact: true,
 }, {
   name: 'EmptyTablePrompt',
   component: EmptyTablePromptExample,

ui_framework/doc_site/src/views/collapse_button/collapse_button.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {
+  KuiCollapseButton
+} from '../../../../components';
+
+export default () => (
+  <div>
+    <KuiCollapseButton direction='down'/>
+    <KuiCollapseButton direction='up'/>
+    <KuiCollapseButton direction='left'/>
+    <KuiCollapseButton direction='right'/>
+  </div>
+);

ui_framework/doc_site/src/views/collapse_button/collapse_button_example.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { renderToHtml } from '../../services';
 
 import {
   GuideDemo,
@@ -8,13 +9,18 @@ import {
   GuideText,
 } from '../../components';
 
-const collapseButtonHtml = require('./collapse_button.html');
+import CollapseButton from './collapse_button';
+const collapseButtonSource = require('!!raw!./collapse_button');
+const collapseButtonHtml = renderToHtml(CollapseButton);
 
 export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
       title="CollapseButton"
       source={[{
+        type: GuideSectionTypes.JS,
+        code: collapseButtonSource,
+      }, {
         type: GuideSectionTypes.HTML,
         code: collapseButtonHtml,
       }]}
@@ -24,9 +30,9 @@ export default props => (
         containers.
       </GuideText>
 
-      <GuideDemo
-        html={collapseButtonHtml}
-      />
+      <GuideDemo>
+        <CollapseButton />
+      </GuideDemo>
     </GuideSection>
   </GuidePage>
 );