feat(confirm): make confirm dialog handle own state

app/components/confirm-dialog.js

@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import { TextComponent } from './text';
 import { Button } from './button';
 import { Divider } from './divider';
+import { ModalComponent } from './modal';
 
 import CloseIcon from '../assets/images/close_icon.svg';
 
@@ -46,7 +47,7 @@ const Btn = styled(Button)`
 `;
 
 type Props = {
-  handleClose: () => void,
+  renderTrigger: (() => void) => Element<*>,
   title: string,
   onConfirm: () => void,
   showButtons?: boolean,
@@ -58,26 +59,34 @@ export const ConfirmDialogComponent = ({
   children,
   title,
   onConfirm,
-  handleClose,
+  renderTrigger,
   showButtons,
   width,
 }: Props) => (
-  <Wrapper width={width}>
+  <ModalComponent
-    <CloseIconWrapper>
+    renderTrigger={renderTrigger}
-      <CloseIconImg src={CloseIcon} onClick={handleClose} />
+    closeOnBackdropClick={false}
-    </CloseIconWrapper>
+    closeOnEsc={false}
-    <TitleWrapper>
+  >
-      <TextComponent value={title} align='center' />
+    {toggle => (
-    </TitleWrapper>
+      <Wrapper width={width}>
-    <Divider />
+        <CloseIconWrapper>
-    {React.Children.map(children, _ => _)}
+          <CloseIconImg src={CloseIcon} onClick={toggle} />
-    {showButtons && (
+        </CloseIconWrapper>
-      <>
+        <TitleWrapper>
-        <Btn label='Confirm' onClick={onConfirm} />
+          <TextComponent value={title} align='center' />
-        <Btn label='Cancel' onClick={handleClose} variant='secondary' />
+        </TitleWrapper>
-      </>
+        <Divider />
+        {React.Children.map(children, _ => _)}
+        {showButtons && (
+          <>
+            <Btn label='Confirm' onClick={onConfirm} />
+            <Btn label='Cancel' onClick={toggle} variant='secondary' />
+          </>
+        )}
+      </Wrapper>
     )}
-  </Wrapper>
+  </ModalComponent>
 );
 
 ConfirmDialogComponent.defaultProps = {

app/components/confirm-dialog.mdx

@@ -22,7 +22,7 @@ import { DoczWrapper } from '../theme.js'
       <ConfirmDialogComponent
         title="Confirm example"
         onConfirm={() => alert('Confirm')}
-        handleClose={() => alert('Close')}
+        renderTrigger={toggle => <button onClick={toggle}> Open! </button>}
       >
         <div>Confirm content</div>
       </ConfirmDialogComponent>