diff --git a/package.json b/package.json index a8fd031544e9b..f7ae5be1a938a 100644 --- a/package.json +++ b/package.json @@ -161,6 +161,7 @@ "node-uuid": "1.4.7", "pegjs": "0.9.0", "postcss-loader": "1.2.1", + "prop-types": "15.5.8", "pui-react-overlay-trigger": "7.5.4", "pui-react-tooltip": "7.5.4", "querystring-browser": "1.0.4", diff --git a/src/ui/public/modals/__tests__/confirm_modal.js b/src/ui/public/modals/__tests__/confirm_modal.js index f81234634e813..163e3f3598b40 100644 --- a/src/ui/public/modals/__tests__/confirm_modal.js +++ b/src/ui/public/modals/__tests__/confirm_modal.js @@ -47,7 +47,7 @@ describe('ui/modals/confirm_modal', function () { confirmModal(myMessage, { confirmButtonText: 'GREAT!', onConfirm: _.noop }); $rootScope.$digest(); - const message = findByDataTestSubj('confirmModalBodyText')[0].innerText; + const message = findByDataTestSubj('confirmModalBodyText')[0].innerText.trim(); expect(message).to.equal(myMessage); }); @@ -62,21 +62,21 @@ describe('ui/modals/confirm_modal', function () { it('for confirm button', () => { confirmModal('What\'s your favorite dinosaur?', confirmModalOptions); $rootScope.$digest(); - const confirmButtonText = findByDataTestSubj('confirmModalConfirmButton')[0].innerText; + const confirmButtonText = findByDataTestSubj('confirmModalConfirmButton')[0].innerText.trim(); expect(confirmButtonText).to.equal('Troodon'); }); it('for cancel button', () => { confirmModal('What\'s your favorite dinosaur?', confirmModalOptions); $rootScope.$digest(); - const cancelButtonText = findByDataTestSubj('confirmModalCancelButton')[0].innerText; + const cancelButtonText = findByDataTestSubj('confirmModalCancelButton')[0].innerText.trim(); expect(cancelButtonText).to.equal('Dilophosaurus'); }); it('for title text', () => { confirmModal('What\'s your favorite dinosaur?', confirmModalOptions); $rootScope.$digest(); - const titleText = findByDataTestSubj('confirmModalTitleText')[0].innerText; + const titleText = findByDataTestSubj('confirmModalTitleText')[0].innerText.trim(); expect(titleText).to.equal('Dinosaurs'); }); }); diff --git a/src/ui/public/modals/__tests__/confirm_modal_promise.js b/src/ui/public/modals/__tests__/confirm_modal_promise.js index 5706ab9424142..a2787b14a43aa 100644 --- a/src/ui/public/modals/__tests__/confirm_modal_promise.js +++ b/src/ui/public/modals/__tests__/confirm_modal_promise.js @@ -56,11 +56,10 @@ describe('ui/modals/confirm_modal_promise', function () { const cancelCallback = sinon.spy(); promise.then(confirmCallback, cancelCallback); + $rootScope.$digest(); const confirmButton = angular.element(document.body).find('[data-test-subj=confirmModalConfirmButton]'); - $rootScope.$digest(); confirmButton.click(); - expect(confirmCallback.called).to.be(true); expect(cancelCallback.called).to.be(false); }); @@ -72,9 +71,8 @@ describe('ui/modals/confirm_modal_promise', function () { const cancelCallback = sinon.spy(); promise.then(confirmCallback, cancelCallback); - const noButton = angular.element(document.body).find('[data-test-subj=confirmModalCancelButton]'); - $rootScope.$digest(); + const noButton = angular.element(document.body).find('[data-test-subj=confirmModalCancelButton]'); noButton.click(); expect(cancelCallback.called).to.be(true); diff --git a/src/ui/public/modals/confirm_modal.html b/src/ui/public/modals/confirm_modal.html index 41c95268cbfc5..9b4044189ab77 100644 --- a/src/ui/public/modals/confirm_modal.html +++ b/src/ui/public/modals/confirm_modal.html @@ -1,32 +1,9 @@ -
-
-
- {{title}} -
-
-
-
- {{message}} -
-
- -
- - -
-
+ diff --git a/src/ui/public/react_components.js b/src/ui/public/react_components.js index 86a33e102d651..e6e262e9b8b89 100644 --- a/src/ui/public/react_components.js +++ b/src/ui/public/react_components.js @@ -2,10 +2,15 @@ import 'ngreact'; import { KuiToolBarSearchBox, + KuiConfirmModal, } from 'ui_framework/components'; import { uiModules } from 'ui/modules'; + const app = uiModules.get('app/kibana', ['react']); app.directive('toolBarSearchBox', function (reactDirective) { return reactDirective(KuiToolBarSearchBox); }); +app.directive('confirmModal', function (reactDirective) { + return reactDirective(KuiConfirmModal); +}); diff --git a/ui_framework/components/index.js b/ui_framework/components/index.js index 1e5c618f9f616..7556e907a2883 100644 --- a/ui_framework/components/index.js +++ b/ui_framework/components/index.js @@ -5,8 +5,14 @@ export { KuiLinkButton, KuiSubmitButton, } from './button'; + export { KuiToolBarSearchBox, KuiToolBar, KuiToolBarFooter, } from './tool_bar'; + +export { + KuiConfirmModal, + KuiModalOverlay +} from './modal'; diff --git a/ui_framework/components/modal/__snapshots__/confirm_modal.test.js.snap b/ui_framework/components/modal/__snapshots__/confirm_modal.test.js.snap new file mode 100644 index 0000000000000..075e5691dda64 --- /dev/null +++ b/ui_framework/components/modal/__snapshots__/confirm_modal.test.js.snap @@ -0,0 +1,59 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders KuiConfirmModal 1`] = ` +
+
+
+ A confirmation modal +
+
+
+
+ This is a confirmation modal example +
+
+
+ + +
+
+`; diff --git a/ui_framework/components/modal/__snapshots__/modal.test.js.snap b/ui_framework/components/modal/__snapshots__/modal.test.js.snap new file mode 100644 index 0000000000000..17a4ad53156a7 --- /dev/null +++ b/ui_framework/components/modal/__snapshots__/modal.test.js.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders KuiModal 1`] = ` +
+ children +
+`; diff --git a/ui_framework/components/modal/__snapshots__/modal_body.test.js.snap b/ui_framework/components/modal/__snapshots__/modal_body.test.js.snap new file mode 100644 index 0000000000000..b0ddad312d8bc --- /dev/null +++ b/ui_framework/components/modal/__snapshots__/modal_body.test.js.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders KuiModalBody 1`] = ` +
+ children +
+`; diff --git a/ui_framework/components/modal/__snapshots__/modal_body_text.test.js.snap b/ui_framework/components/modal/__snapshots__/modal_body_text.test.js.snap new file mode 100644 index 0000000000000..d7434e72b5430 --- /dev/null +++ b/ui_framework/components/modal/__snapshots__/modal_body_text.test.js.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders KuiModalBodyText 1`] = ` +
+ children +
+`; diff --git a/ui_framework/components/modal/__snapshots__/modal_footer.test.js.snap b/ui_framework/components/modal/__snapshots__/modal_footer.test.js.snap new file mode 100644 index 0000000000000..c4aaebfe75773 --- /dev/null +++ b/ui_framework/components/modal/__snapshots__/modal_footer.test.js.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders KuiModalFooter 1`] = ` +
+ children +
+`; diff --git a/ui_framework/components/modal/__snapshots__/modal_header.test.js.snap b/ui_framework/components/modal/__snapshots__/modal_header.test.js.snap new file mode 100644 index 0000000000000..61fa239e72322 --- /dev/null +++ b/ui_framework/components/modal/__snapshots__/modal_header.test.js.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders KuiModalHeader 1`] = ` +
+ children +
+`; diff --git a/ui_framework/components/modal/__snapshots__/modal_header_title.test.js.snap b/ui_framework/components/modal/__snapshots__/modal_header_title.test.js.snap new file mode 100644 index 0000000000000..938e828985786 --- /dev/null +++ b/ui_framework/components/modal/__snapshots__/modal_header_title.test.js.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders KuiModalHeaderTitle 1`] = ` +
+ children +
+`; diff --git a/ui_framework/components/modal/__snapshots__/modal_overlay.test.js.snap b/ui_framework/components/modal/__snapshots__/modal_overlay.test.js.snap new file mode 100644 index 0000000000000..536461942dd3e --- /dev/null +++ b/ui_framework/components/modal/__snapshots__/modal_overlay.test.js.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders KuiModalOverlay 1`] = ` +
+ children +
+`; diff --git a/ui_framework/components/modal/_index.scss b/ui_framework/components/modal/_index.scss index 20ed0eb3d6cfb..eebd74e114045 100644 --- a/ui_framework/components/modal/_index.scss +++ b/ui_framework/components/modal/_index.scss @@ -2,6 +2,7 @@ $modalPadding: 10px; $modalBorderColor: #6EADC1; $modalBackgroundColor: #FFF; $modalOverlayBackground: rgba(#000000, 0.3); +$globalModalDepth: 1000; @import "modal_overlay"; @import "modal"; diff --git a/ui_framework/components/modal/_modal.scss b/ui_framework/components/modal/_modal.scss index 8415b7fbd84a5..fbeb66fd8b847 100644 --- a/ui_framework/components/modal/_modal.scss +++ b/ui_framework/components/modal/_modal.scss @@ -4,6 +4,7 @@ border: 1px solid $modalBorderColor; border-radius: $globalBorderRadius; box-shadow: 0 5px 22px rgba(#000000, 0.25); + z-index: $globalModalDepth + 1; } .kuiModalHeader { diff --git a/ui_framework/components/modal/_modal_overlay.scss b/ui_framework/components/modal/_modal_overlay.scss index 7b3c40d5b0b3e..8b2e54b471c3e 100644 --- a/ui_framework/components/modal/_modal_overlay.scss +++ b/ui_framework/components/modal/_modal_overlay.scss @@ -1,6 +1,6 @@ .kuiModalOverlay { position: fixed; - z-index: 1000; + z-index: $globalModalDepth; top: 0; left: 0; right: 0; diff --git a/ui_framework/components/modal/confirm_modal.js b/ui_framework/components/modal/confirm_modal.js new file mode 100644 index 0000000000000..ad715fc52b942 --- /dev/null +++ b/ui_framework/components/modal/confirm_modal.js @@ -0,0 +1,75 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { KuiModal } from './modal'; +import { KuiModalFooter } from './modal_footer'; +import { KuiModalHeader } from './modal_header'; +import { KuiModalHeaderTitle } from './modal_header_title'; +import { KuiModalBody } from './modal_body'; +import { KuiModalBodyText } from './modal_body_text'; +import { KuiButton } from '../index'; + +export function KuiConfirmModal({ + message, + title, + onCancel, + onConfirm, + cancelButtonText, + confirmButtonText, + className, + ...rest }) { + const ariaLabel = rest['aria-label']; + const dataTestSubj = rest['data-test-subj']; + return ( + + { + title ? + + + { title } + + + : null + } + + + { message } + + + + + + {cancelButtonText} + + + {confirmButtonText} + + + + ); +} + +KuiConfirmModal.propTypes = { + message: PropTypes.string, + title: PropTypes.string, + cancelButtonText: PropTypes.string, + confirmButtonText: PropTypes.string, + onCancel: PropTypes.func, + onConfirm: PropTypes.func, + dataTestSubj: PropTypes.string, + ariaLabel: PropTypes.string, + className: PropTypes.string, +}; diff --git a/ui_framework/components/modal/confirm_modal.test.js b/ui_framework/components/modal/confirm_modal.test.js new file mode 100644 index 0000000000000..fe3314bf66a90 --- /dev/null +++ b/ui_framework/components/modal/confirm_modal.test.js @@ -0,0 +1,61 @@ +import React from 'react'; +import sinon from 'sinon'; +import { mount, render } from 'enzyme'; + +import { requiredProps } from '../../test/required_props'; + +import { + KuiConfirmModal, +} from './confirm_modal'; + +let onConfirm; +let onCancel; + +beforeEach(() => { + onConfirm = sinon.spy(); + onCancel = sinon.spy(); +}); + +test('renders KuiConfirmModal', () => { + const component = render( {}} + onConfirm={onConfirm} + cancelButtonText="Cancel Button Text" + confirmButtonText="Confirm Button Text" + { ...requiredProps } + />); + expect(component).toMatchSnapshot(); +}); + +test('onConfirm', () => { + const component = mount(); + component.find('[data-test-subj="confirmModalConfirmButton"]').simulate('click'); + sinon.assert.calledOnce(onConfirm); + sinon.assert.notCalled(onCancel); +}); + +test('onCancel', () => { + const component = mount(); + component.find('[data-test-subj="confirmModalCancelButton"]').simulate('click'); + sinon.assert.notCalled(onConfirm); + sinon.assert.calledOnce(onCancel); +}); + diff --git a/ui_framework/components/modal/index.js b/ui_framework/components/modal/index.js new file mode 100644 index 0000000000000..5484b93dd8a40 --- /dev/null +++ b/ui_framework/components/modal/index.js @@ -0,0 +1,5 @@ +export { KuiConfirmModal } from './confirm_modal'; +export { KuiModal } from './modal'; +export { KuiModalFooter } from './modal_footer'; +export { KuiModalHeader } from './modal_header'; +export { KuiModalOverlay } from './modal_overlay'; diff --git a/ui_framework/components/modal/modal.js b/ui_framework/components/modal/modal.js new file mode 100644 index 0000000000000..8ea7a08b96869 --- /dev/null +++ b/ui_framework/components/modal/modal.js @@ -0,0 +1,17 @@ +import React from 'react'; +import classnames from 'classnames'; +import PropTypes from 'prop-types'; + +export function KuiModal({ className, children, ...rest }) { + const classes = classnames('kuiModal', className); + return ( +
+ { children } +
+ ); +} + +KuiModal.propTypes = { + className: PropTypes.string, + children: PropTypes.node +}; diff --git a/ui_framework/components/modal/modal.test.js b/ui_framework/components/modal/modal.test.js new file mode 100644 index 0000000000000..4a393c27a008d --- /dev/null +++ b/ui_framework/components/modal/modal.test.js @@ -0,0 +1,12 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { + KuiModal, +} from './modal'; + +test('renders KuiModal', () => { + const component = children; + expect(render(component)).toMatchSnapshot(); +}); diff --git a/ui_framework/components/modal/modal_body.js b/ui_framework/components/modal/modal_body.js new file mode 100644 index 0000000000000..efd954b834f12 --- /dev/null +++ b/ui_framework/components/modal/modal_body.js @@ -0,0 +1,17 @@ +import React from 'react'; +import classnames from 'classnames'; +import PropTypes from 'prop-types'; + +export function KuiModalBody({ className, children, ...rest }) { + const classes = classnames('kuiModalBody', className); + return ( +
+ { children } +
+ ); +} + +KuiModalBody.propTypes = { + className: PropTypes.string, + children: PropTypes.node +}; diff --git a/ui_framework/components/modal/modal_body.test.js b/ui_framework/components/modal/modal_body.test.js new file mode 100644 index 0000000000000..b8b4d8e02d802 --- /dev/null +++ b/ui_framework/components/modal/modal_body.test.js @@ -0,0 +1,12 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { + KuiModalBody, +} from './modal_body'; + +test('renders KuiModalBody', () => { + const component = children; + expect(render(component)).toMatchSnapshot(); +}); diff --git a/ui_framework/components/modal/modal_body_text.js b/ui_framework/components/modal/modal_body_text.js new file mode 100644 index 0000000000000..197bf7f0a7975 --- /dev/null +++ b/ui_framework/components/modal/modal_body_text.js @@ -0,0 +1,17 @@ +import React from 'react'; +import classnames from 'classnames'; +import PropTypes from 'prop-types'; + +export function KuiModalBodyText({ className, children, ...rest }) { + const classes = classnames('kuiModalBodyText', className); + return ( +
+ { children } +
+ ); +} + +KuiModalBodyText.propTypes = { + className: PropTypes.string, + children: PropTypes.node +}; diff --git a/ui_framework/components/modal/modal_body_text.test.js b/ui_framework/components/modal/modal_body_text.test.js new file mode 100644 index 0000000000000..f71a5f6ed0bee --- /dev/null +++ b/ui_framework/components/modal/modal_body_text.test.js @@ -0,0 +1,12 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { + KuiModalBodyText, +} from './modal_body_text'; + +test('renders KuiModalBodyText', () => { + const component = children; + expect(render(component)).toMatchSnapshot(); +}); diff --git a/ui_framework/components/modal/modal_footer.js b/ui_framework/components/modal/modal_footer.js new file mode 100644 index 0000000000000..a62ba3dccef2e --- /dev/null +++ b/ui_framework/components/modal/modal_footer.js @@ -0,0 +1,17 @@ +import React from 'react'; +import classnames from 'classnames'; +import PropTypes from 'prop-types'; + +export function KuiModalFooter({ className, children, ...rest }) { + const classes = classnames('kuiModalFooter', className); + return ( +
+ { children } +
+ ); +} + +KuiModalFooter.propTypes = { + className: PropTypes.string, + children: PropTypes.node +}; diff --git a/ui_framework/components/modal/modal_footer.test.js b/ui_framework/components/modal/modal_footer.test.js new file mode 100644 index 0000000000000..ab80fa6b14079 --- /dev/null +++ b/ui_framework/components/modal/modal_footer.test.js @@ -0,0 +1,12 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { + KuiModalFooter, +} from './modal_footer'; + +test('renders KuiModalFooter', () => { + const component = children; + expect(render(component)).toMatchSnapshot(); +}); diff --git a/ui_framework/components/modal/modal_header.js b/ui_framework/components/modal/modal_header.js new file mode 100644 index 0000000000000..c6ccc30e2e110 --- /dev/null +++ b/ui_framework/components/modal/modal_header.js @@ -0,0 +1,17 @@ +import React from 'react'; +import classnames from 'classnames'; +import PropTypes from 'prop-types'; + +export function KuiModalHeader({ className, children, ...rest }) { + const classes = classnames('kuiModalHeader', className); + return ( +
+ { children } +
+ ); +} + +KuiModalHeader.propTypes = { + className: PropTypes.string, + children: PropTypes.node +}; diff --git a/ui_framework/components/modal/modal_header.test.js b/ui_framework/components/modal/modal_header.test.js new file mode 100644 index 0000000000000..0caaaa07ae896 --- /dev/null +++ b/ui_framework/components/modal/modal_header.test.js @@ -0,0 +1,12 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { + KuiModalHeader, +} from './modal_header'; + +test('renders KuiModalHeader', () => { + const component = children; + expect(render(component)).toMatchSnapshot(); +}); diff --git a/ui_framework/components/modal/modal_header_title.js b/ui_framework/components/modal/modal_header_title.js new file mode 100644 index 0000000000000..a4a237ad8f1d3 --- /dev/null +++ b/ui_framework/components/modal/modal_header_title.js @@ -0,0 +1,17 @@ +import React from 'react'; +import classnames from 'classnames'; +import PropTypes from 'prop-types'; + +export function KuiModalHeaderTitle({ className, children, ...rest }) { + const classes = classnames('kuiModalHeader__title', className); + return ( +
+ { children } +
+ ); +} + +KuiModalHeaderTitle.propTypes = { + className: PropTypes.string, + children: PropTypes.node +}; diff --git a/ui_framework/components/modal/modal_header_title.test.js b/ui_framework/components/modal/modal_header_title.test.js new file mode 100644 index 0000000000000..35fbbca89c95c --- /dev/null +++ b/ui_framework/components/modal/modal_header_title.test.js @@ -0,0 +1,12 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { + KuiModalHeaderTitle, +} from './modal_header_title'; + +test('renders KuiModalHeaderTitle', () => { + const component = children; + expect(render(component)).toMatchSnapshot(); +}); diff --git a/ui_framework/components/modal/modal_overlay.js b/ui_framework/components/modal/modal_overlay.js new file mode 100644 index 0000000000000..34334e1a75072 --- /dev/null +++ b/ui_framework/components/modal/modal_overlay.js @@ -0,0 +1,17 @@ +import React from 'react'; +import classnames from 'classnames'; +import PropTypes from 'prop-types'; + +export function KuiModalOverlay({ className, ...rest }) { + const classes = classnames('kuiModalOverlay', className); + return ( +
+ ); +} + +KuiModalOverlay.propTypes = { + className: PropTypes.string, +}; diff --git a/ui_framework/components/modal/modal_overlay.test.js b/ui_framework/components/modal/modal_overlay.test.js new file mode 100644 index 0000000000000..94f5015de662c --- /dev/null +++ b/ui_framework/components/modal/modal_overlay.test.js @@ -0,0 +1,12 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { + KuiModalOverlay, +} from './modal_overlay'; + +test('renders KuiModalOverlay', () => { + const component = children; + expect(render(component)).toMatchSnapshot(); +}); diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index 328ff75a98988..c14e200990262 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -2118,7 +2118,8 @@ body { background-color: #FFF; border: 1px solid #6EADC1; border-radius: 4px; - box-shadow: 0 5px 22px rgba(0, 0, 0, 0.25); } + box-shadow: 0 5px 22px rgba(0, 0, 0, 0.25); + z-index: 1001; } .kuiModalHeader { display: -webkit-box; diff --git a/ui_framework/doc_site/src/views/modal/confirm_modal_example.js b/ui_framework/doc_site/src/views/modal/confirm_modal_example.js new file mode 100644 index 0000000000000..e6f7719474235 --- /dev/null +++ b/ui_framework/doc_site/src/views/modal/confirm_modal_example.js @@ -0,0 +1,50 @@ +import React from 'react'; + +import { + KuiConfirmModal, + KuiModalOverlay, + KuiButton +} from '../../../../components/index'; + +export class ConfirmModalExample extends React.Component { + constructor(props) { + super(props); + this.state = { + showConfirmModal: false + }; + this.closeModal = this.closeModal.bind(this); + this.showModal = this.showModal.bind(this); + } + + closeModal() { + this.setState({ showConfirmModal: false }); + } + + showModal() { + this.setState({ showConfirmModal: true }); + } + + render() { + return ( +
+ + Show Modal + + { + this.state.showConfirmModal ? + + + + : null + } +
+ ); + } +} diff --git a/ui_framework/doc_site/src/views/modal/modal.html b/ui_framework/doc_site/src/views/modal/modal.html deleted file mode 100644 index 1f0c5be708d2b..0000000000000 --- a/ui_framework/doc_site/src/views/modal/modal.html +++ /dev/null @@ -1,25 +0,0 @@ -
-
-
- Delete object -
- -
-
- -
-
- Are you sure you want to delete this object? You can’t undo this. -
-
- -
- - - -
-
diff --git a/ui_framework/doc_site/src/views/modal/modal_example.js b/ui_framework/doc_site/src/views/modal/modal_example.js index 91c918d028486..b6a3b000ed4f8 100644 --- a/ui_framework/doc_site/src/views/modal/modal_example.js +++ b/ui_framework/doc_site/src/views/modal/modal_example.js @@ -1,5 +1,7 @@ import React from 'react'; +import { renderToHtml } from '../../services'; + import { GuideDemo, GuidePage, @@ -7,38 +9,55 @@ import { GuideSectionTypes, } from '../../components'; -const modalHtml = require('./modal.html'); -const modalOverlayHtml = require('./modal_overlay.html'); -const modalOverlayJs = require('raw!./modal_overlay.js'); +import { + KuiConfirmModal, +} from '../../../../components'; + +import { ConfirmModalExample } from './confirm_modal_example'; +const showConfirmModalSource = require('!!raw!./confirm_modal_example'); +const showConfirmModalHtml = renderToHtml(ConfirmModalExample); + +const kuiConfirmModalSource = require('!!raw!../../../../components/modal/confirm_modal'); +const kuiConfirmModalHtml = renderToHtml(KuiConfirmModal); export default props => ( + - + + {}} + onConfirm={() => {}} + confirmButtonText="Confirm" + cancelButtonText="Cancel" + message="This is a confirmation modal" + title="Confirm Modal Title" + /> + - + + + ); diff --git a/ui_framework/doc_site/src/views/modal/modal_overlay.html b/ui_framework/doc_site/src/views/modal/modal_overlay.html deleted file mode 100644 index a9d62e6665387..0000000000000 --- a/ui_framework/doc_site/src/views/modal/modal_overlay.html +++ /dev/null @@ -1,29 +0,0 @@ - - -
-
-
-
- Delete object -
- -
-
- -
-
- Are you sure you want to delete this object? You can’t undo this. -
-
- -
- - - -
-
-
diff --git a/ui_framework/doc_site/src/views/modal/modal_overlay.js b/ui_framework/doc_site/src/views/modal/modal_overlay.js deleted file mode 100644 index 1f9fb98d9073b..0000000000000 --- a/ui_framework/doc_site/src/views/modal/modal_overlay.js +++ /dev/null @@ -1,45 +0,0 @@ -/* eslint-disable */ - -const $showModalOverlayButton = $('[data-id="showModalOverlay"]'); -const $modalOverlay = $('.kuiModalOverlay'); -const $modalOverlayCloseButton = $('.kuiModalOverlay .kuiModalHeaderCloseButton'); -const $modalOverlayCancelButton = $('.kuiModalOverlay .kuiButton--hollow'); -const $modalOverlayConfirmButton = $('.kuiModalOverlay .kuiButton--primary'); - -if (!$showModalOverlayButton.length) { - throw new Error('$showModalOverlayButton missing'); -} - -if (!$modalOverlay.length) { - throw new Error('$modalOverlay missing'); -} - -if (!$modalOverlayCloseButton.length) { - throw new Error('$modalOverlayCloseButton missing'); -} - -if (!$modalOverlayCancelButton.length) { - throw new Error('$modalOverlayCancelButton missing'); -} - -if (!$modalOverlayConfirmButton.length) { - throw new Error('$modalOverlayConfirmButton missing'); -} - -$modalOverlay.hide(); - -$showModalOverlayButton.on('click', () => { - $modalOverlay.show(); -}); - -$modalOverlayCloseButton.on('click', () => { - $modalOverlay.hide(); -}); - -$modalOverlayCancelButton.on('click', () => { - $modalOverlay.hide(); -}); - -$modalOverlayConfirmButton.on('click', () => { - $modalOverlay.hide(); -});