From cbbb4dc22158a0ce608454999330fd971a0dcddf Mon Sep 17 00:00:00 2001 From: Tim Roes Date: Tue, 8 May 2018 15:29:41 +0200 Subject: [PATCH] Add EditorOptionsGroup component (#18812) * Add EditorOptionsGroup component * Add actions and more tests * Add initialIsCollapsed property --- src/dev/jest/config.js | 1 + .../public/static_html_id_generator.js | 18 ++ .../editor_options_group.test.js.snap | 271 ++++++++++++++++++ .../components/editor_options_group.js | 62 ++++ .../components/editor_options_group.less | 3 + .../components/editor_options_group.test.js | 52 ++++ src/ui/public/vis/editors/components/index.js | 1 + src/ui/public/vis/editors/index.js | 1 + 8 files changed, 409 insertions(+) create mode 100644 src/test_utils/public/static_html_id_generator.js create mode 100644 src/ui/public/vis/editors/components/__snapshots__/editor_options_group.test.js.snap create mode 100644 src/ui/public/vis/editors/components/editor_options_group.js create mode 100644 src/ui/public/vis/editors/components/editor_options_group.less create mode 100644 src/ui/public/vis/editors/components/editor_options_group.test.js create mode 100644 src/ui/public/vis/editors/components/index.js create mode 100644 src/ui/public/vis/editors/index.js diff --git a/src/dev/jest/config.js b/src/dev/jest/config.js index 7e725bc9492e..5468d75f2cfa 100644 --- a/src/dev/jest/config.js +++ b/src/dev/jest/config.js @@ -20,6 +20,7 @@ export default { ], moduleNameMapper: { '^ui/(.*)': '/src/ui/public/$1', + '^test_utils/(.*)': '/src/test_utils/public/$1', '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '/src/dev/jest/mocks/file_mock.js', '\\.(css|less|scss)$': '/src/dev/jest/mocks/style_mock.js', }, diff --git a/src/test_utils/public/static_html_id_generator.js b/src/test_utils/public/static_html_id_generator.js new file mode 100644 index 000000000000..803773109fe6 --- /dev/null +++ b/src/test_utils/public/static_html_id_generator.js @@ -0,0 +1,18 @@ +/** + * Import this test utility in your jest test (and only there!) if you want the + * htmlIdGenerator from EUI to generate static ids. That will be needed if you + * want to use snapshot tests for a component, that uses the htmlIdGenerator. + * By default every test run would result in different ids and thus not be comparable. + * You can solve this by just importing this file. It will mock the htmlIdGenerator + * for the test file that imported it to produce static, but therfore potentially + * duplicate ids. + * + * import 'test_utils/html_id_generator'; + */ + +/* global jest */ +jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({ + htmlIdGenerator: (prefix = 'staticGenerator') => { + return (suffix = 'staticId') => `${prefix}_${suffix}`; + } +})); diff --git a/src/ui/public/vis/editors/components/__snapshots__/editor_options_group.test.js.snap b/src/ui/public/vis/editors/components/__snapshots__/editor_options_group.test.js.snap new file mode 100644 index 000000000000..a67b6278cab9 --- /dev/null +++ b/src/ui/public/vis/editors/components/__snapshots__/editor_options_group.test.js.snap @@ -0,0 +1,271 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders as expected 1`] = ` +
+
+
+
+ +
+
+
+
+
+
+ + Children + + + within the editor group + +
+
+
+
+
+`; + +exports[` renders as expected with actions 1`] = ` +
+
+
+
+ +
+
+ +
+
+
+
+
+
+ + Some children + +
+
+
+
+
+`; + +exports[` renders as expected with initial collapsed 1`] = ` +
+
+
+
+ +
+
+
+
+
+
+ + Children + + + within the editor group + +
+
+
+
+
+`; diff --git a/src/ui/public/vis/editors/components/editor_options_group.js b/src/ui/public/vis/editors/components/editor_options_group.js new file mode 100644 index 000000000000..76e8ba626498 --- /dev/null +++ b/src/ui/public/vis/editors/components/editor_options_group.js @@ -0,0 +1,62 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import './editor_options_group.less'; + +import { + EuiAccordion, + EuiPanel, + EuiSpacer, + EuiTitle, + htmlIdGenerator, +} from '@elastic/eui'; + + +/** + * A component to group different options in an editor together and give them + * a title. Should be used for all visualize editors when grouping options, + * to produce an aligned look and feel. + */ +function EditorOptionsGroup(props) { + return ( + + +

{props.title}

+ + } + > + + { props.children } + + + ); +} + +EditorOptionsGroup.propTypes = { + /** + * The title of this options group, which will be shown with the group. + */ + title: PropTypes.string.isRequired, + /** + * Add additional elements as actions to the group. + */ + actions: PropTypes.node, + /** + * Whether the panel should be collapsed by default. + */ + initialIsCollapsed: PropTypes.bool, + /** + * All elements that should be within this group. + */ + children: PropTypes.node.isRequired, +}; + +export { EditorOptionsGroup }; diff --git a/src/ui/public/vis/editors/components/editor_options_group.less b/src/ui/public/vis/editors/components/editor_options_group.less new file mode 100644 index 000000000000..e47fba05c313 --- /dev/null +++ b/src/ui/public/vis/editors/components/editor_options_group.less @@ -0,0 +1,3 @@ +.editorOptionsGroup__panel + .editorOptionsGroup__panel { + margin-top: 8px; +} diff --git a/src/ui/public/vis/editors/components/editor_options_group.test.js b/src/ui/public/vis/editors/components/editor_options_group.test.js new file mode 100644 index 000000000000..6ea46caf34e7 --- /dev/null +++ b/src/ui/public/vis/editors/components/editor_options_group.test.js @@ -0,0 +1,52 @@ +import React from 'react'; +import { render } from 'enzyme'; + +import 'test_utils/static_html_id_generator'; + +import { EuiButtonIcon } from '@elastic/eui'; +import { EditorOptionsGroup } from './editor_options_group'; + +describe('', () => { + it('renders as expected', () => { + const group = render( + + Children + within the editor group + + ); + expect(group).toMatchSnapshot(); + }); + + it('renders as expected with actions', () => { + const group = render( + + } + > + Some children + + ); + expect(group).toMatchSnapshot(); + }); + + it('renders as expected with initial collapsed', () => { + const group = render( + + Children + within the editor group + + ); + expect(group).toMatchSnapshot(); + }); +}); diff --git a/src/ui/public/vis/editors/components/index.js b/src/ui/public/vis/editors/components/index.js new file mode 100644 index 000000000000..3ef2f278db69 --- /dev/null +++ b/src/ui/public/vis/editors/components/index.js @@ -0,0 +1 @@ +export { EditorOptionsGroup } from './editor_options_group'; diff --git a/src/ui/public/vis/editors/index.js b/src/ui/public/vis/editors/index.js new file mode 100644 index 000000000000..0d3eee4d7c3c --- /dev/null +++ b/src/ui/public/vis/editors/index.js @@ -0,0 +1 @@ +export { EditorOptionsGroup } from './components';