feat(Dialog): add component (#790)

* feat(Dialog): add component

* fix test

* restore changes in header

* remove test

* add entry

* use Header instead of Box

Author: layershifter

CHANGELOG.md

@@ -26,6 +26,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Remove handledProps from behaviors @jurokapsiar ([#805](https://github.com/stardust-ui/react/pull/805))
 - Add `create` shorthand factory to `Header` component @layershifter ([#809](https://github.com/stardust-ui/react/pull/809))
 - Add `keyframeParams` prop in the `Animation` component and the `animation` prop @mnajdova ([#794](https://github.com/stardust-ui/react/pull/794))
+- Add `Dialog` component @layershifter ([#790](https://github.com/stardust-ui/react/pull/790))
 
 ### Fixes
 - Handle `onClick` and `onFocus` on ListItems correctly @layershifter ([#779](https://github.com/stardust-ui/react/pull/779))

docs/src/examples/components/Dialog/Content/DialogExampleContent.shorthand.tsx

@@ -0,0 +1,14 @@
+import { Button, Dialog } from '@stardust-ui/react'
+import * as React from 'react'
+
+const DialogExampleContent: React.FC = () => (
+  <Dialog
+    cancelButton="Cancel"
+    confirmButton="Confirm"
+    content="Are you sure you want to confirm this action?"
+    header="Action confirmation"
+    trigger={<Button content="Open a dialog" />}
+  />
+)
+
+export default DialogExampleContent

docs/src/examples/components/Dialog/Content/index.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const DialogContentExamples = () => (
+  <ExampleSection title="Content">
+    <ComponentExample
+      title="Content"
+      description="A dialog can contain a content."
+      examplePath="components/Dialog/Content/DialogExampleContent"
+    />
+  </ExampleSection>
+)
+
+export default DialogContentExamples

docs/src/examples/components/Dialog/Types/DialogExample.shorthand.tsx

@@ -0,0 +1,13 @@
+import { Button, Dialog } from '@stardust-ui/react'
+import * as React from 'react'
+
+const DialogExample: React.FC = () => (
+  <Dialog
+    cancelButton="Cancel"
+    confirmButton="Confirm"
+    header="Action confirmation"
+    trigger={<Button content="Open a dialog" />}
+  />
+)
+
+export default DialogExample

docs/src/examples/components/Dialog/Types/index.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const DialogTypesExamples = () => (
+  <ExampleSection title="Types">
+    <ComponentExample
+      title="Dialog"
+      description="A basic dialog."
+      examplePath="components/Dialog/Types/DialogExample"
+    />
+  </ExampleSection>
+)
+
+export default DialogTypesExamples

docs/src/examples/components/Dialog/Usage/DialogExampleCallbacks.shorthand.tsx

@@ -0,0 +1,68 @@
+import { Button, Dialog, Divider, Grid, Label, Segment } from '@stardust-ui/react'
+import * as React from 'react'
+
+type DialogExampleCallbacksState = {
+  log: string[]
+  logCount: number
+  open: boolean
+}
+
+export default class DialogExampleCallbacks extends React.Component<
+  {},
+  DialogExampleCallbacksState
+> {
+  state = {
+    log: [],
+    logCount: 0,
+    open: false,
+  }
+
+  handleOpen = () => {
+    this.setState({ open: true })
+    this.writeLog('onOpen()')
+  }
+
+  handleClose = (callbackName: string) => () => {
+    console.log(callbackName)
+    this.setState({ open: false })
+    this.writeLog(callbackName)
+  }
+
+  clearLog = () => this.setState({ log: [], logCount: 0 })
+
+  writeLog = (eventName: string) =>
+    this.setState({
+      log: [`${new Date().toLocaleTimeString()}: ${eventName}`, ...this.state.log].slice(0, 20),
+      logCount: this.state.logCount + 1,
+    })
+
+  render() {
+    const { log, logCount, open } = this.state
+
+    return (
+      <Grid columns={2}>
+        <Dialog
+          cancelButton="Cancel"
+          confirmButton="Confirm"
+          onCancel={this.handleClose('onCancel()')}
+          onConfirm={this.handleClose('onConfirm()')}
+          onOpen={this.handleOpen}
+          open={open}
+          header="Action confirmation"
+          trigger={<Button content="Open a dialog" />}
+        />
+
+        <Segment>
+          <Button onClick={this.clearLog}>Clear</Button>
+          Event Log <Label circular>{logCount}</Label>
+          {log.length > 0 && <Divider />}
+          <pre>
+            {log.map((e, i) => (
+              <div key={i}>{e}</div>
+            ))}
+          </pre>
+        </Segment>
+      </Grid>
+    )
+  }
+}

docs/src/examples/components/Dialog/Usage/index.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const DialogUsageExamples = () => (
+  <ExampleSection title="Usage">
+    <ComponentExample
+      title="Callbacks"
+      description="A dialog has different callbacks."
+      examplePath="components/Dialog/Usage/DialogExampleCallbacks"
+    />
+  </ExampleSection>
+)
+
+export default DialogUsageExamples

docs/src/examples/components/Dialog/index.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+import Content from './Content'
+import Types from './Types'
+import Usage from './Usage'
+
+const DialogExamples = () => (
+  <>
+    <Types />
+    <Content />
+    <Usage />
+  </>
+)
+
+export default DialogExamples