diff --git a/ui_framework/components/collapse_button/__snapshots__/collapse_button.test.js.snap b/ui_framework/components/collapse_button/__snapshots__/collapse_button.test.js.snap new file mode 100644 index 0000000000000..393b874395c23 --- /dev/null +++ b/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`] = ` + +`; + +exports[`KuiCollapseButton Props direction left renders the left class 1`] = ` + +`; + +exports[`KuiCollapseButton Props direction right renders the right class 1`] = ` + +`; + +exports[`KuiCollapseButton Props direction up renders the up class 1`] = ` + +`; diff --git a/ui_framework/components/collapse_button/collapse_button.js b/ui_framework/components/collapse_button/collapse_button.js new file mode 100644 index 0000000000000..0757a275638f9 --- /dev/null +++ b/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 (); +}; + +KuiCollapseButton.propTypes = { + className: PropTypes.string, + direction: PropTypes.oneOf(DIRECTIONS).isRequired +}; + +export { + DIRECTIONS, + KuiCollapseButton +}; diff --git a/ui_framework/components/collapse_button/collapse_button.test.js b/ui_framework/components/collapse_button/collapse_button.test.js new file mode 100644 index 0000000000000..0217d9a0cf4ef --- /dev/null +++ b/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 = ; + expect(render(component)).toMatchSnapshot(); + }); + }); + }); + }); + + describe('onClick', () => { + test(`isn't called upon instantiation`, () => { + const onClickHandler = sinon.stub(); + + shallow( + + ); + + sinon.assert.notCalled(onClickHandler); + }); + + test('is called when the button is clicked', () => { + const onClickHandler = sinon.stub(); + + const $button = shallow( + + ); + + $button.simulate('click'); + + sinon.assert.calledOnce(onClickHandler); + }); + }); + }); +}); diff --git a/ui_framework/components/collapse_button/index.js b/ui_framework/components/collapse_button/index.js new file mode 100644 index 0000000000000..5f3cb43b9d295 --- /dev/null +++ b/ui_framework/components/collapse_button/index.js @@ -0,0 +1 @@ +export { KuiCollapseButton } from './collapse_button'; diff --git a/ui_framework/components/index.js b/ui_framework/components/index.js index 368a243da1b73..53eaca2678c94 100644 --- a/ui_framework/components/index.js +++ b/ui_framework/components/index.js @@ -12,6 +12,10 @@ export { KuiSubmitButton, } from './button'; +export { + KuiCollapseButton +} from './collapse_button'; + export { KuiEvent, KuiEventSymbol, diff --git a/ui_framework/doc_site/src/services/routes/routes.js b/ui_framework/doc_site/src/services/routes/routes.js index 13d412fefed83..f5d96a8cbce24 100644 --- a/ui_framework/doc_site/src/services/routes/routes.js +++ b/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, diff --git a/ui_framework/doc_site/src/views/collapse_button/collapse_button.html b/ui_framework/doc_site/src/views/collapse_button/collapse_button.html deleted file mode 100644 index 18dde9981e47a..0000000000000 --- a/ui_framework/doc_site/src/views/collapse_button/collapse_button.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - diff --git a/ui_framework/doc_site/src/views/collapse_button/collapse_button.js b/ui_framework/doc_site/src/views/collapse_button/collapse_button.js new file mode 100644 index 0000000000000..22cdd501bb76f --- /dev/null +++ b/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 () => ( +
+ + + + +
+); diff --git a/ui_framework/doc_site/src/views/collapse_button/collapse_button_example.js b/ui_framework/doc_site/src/views/collapse_button/collapse_button_example.js index 3e8ab01c644a9..bb5c0d8913767 100644 --- a/ui_framework/doc_site/src/views/collapse_button/collapse_button_example.js +++ b/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 => ( ( containers. - + + + );