From 4449b497f95a92eea6641111ecc9af7aaf54f3ef Mon Sep 17 00:00:00 2001
From: Mateus Marquezini <mateusmarquezini01@gmail.com>
Date: Tue, 23 Mar 2021 10:05:47 -0300
Subject: [PATCH] #3497 Created an example of how to use the Dialog component

Signed-off-by: Mateus Marquezini <mateusmarquezini01@gmail.com>
---
 .changeset/warm-hotels-happen.md              |   5 +
 .../src/components/Dialog/Dialog.stories.tsx  | 134 ++++++++++++++++++
 2 files changed, 139 insertions(+)
 create mode 100644 .changeset/warm-hotels-happen.md
 create mode 100644 packages/core/src/components/Dialog/Dialog.stories.tsx

diff --git a/.changeset/warm-hotels-happen.md b/.changeset/warm-hotels-happen.md
new file mode 100644
index 0000000000..89ff4ea432
--- /dev/null
+++ b/.changeset/warm-hotels-happen.md
@@ -0,0 +1,5 @@
+---
+'storybook': minor
+---
+
+Created a new example of how to use the Dialog component in Storybook
diff --git a/packages/core/src/components/Dialog/Dialog.stories.tsx b/packages/core/src/components/Dialog/Dialog.stories.tsx
new file mode 100644
index 0000000000..528b266e47
--- /dev/null
+++ b/packages/core/src/components/Dialog/Dialog.stories.tsx
@@ -0,0 +1,134 @@
+/*
+ * Copyright 2021 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Typography,
+} from '@material-ui/core';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import CloseIcon from '@material-ui/icons/Close';
+import React, { useState } from 'react';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    leftAlignButtonsDialog: {
+      justifyContent: 'flex-start',
+      paddingLeft: 24,
+    },
+    closeButton: {
+      position: 'absolute',
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+      color: theme.palette.grey[500],
+    },
+  }),
+);
+
+export default {
+  title: 'Layout/Dialog',
+  component: Dialog,
+};
+
+export const Default = () => {
+  const [open, setOpen] = useState(false);
+  const classes = useStyles();
+
+  const openDialog = () => {
+    setOpen(true);
+  };
+
+  const closeDialog = () => {
+    setOpen(false);
+  };
+
+  const dialogContent = () => {
+    return (
+      <>
+        <Typography>
+          This is an example of how to use the Dialog component.
+        </Typography>
+        <Typography>
+          This component is used whenever confirmation of some sort is needed,
+          such as:
+        </Typography>
+        <ul>
+          <li>
+            <Typography>
+              Consent to sensitive matters like GDPR, access, etc;
+            </Typography>
+          </li>
+          <li>
+            <Typography>
+              Save, submit, cancel after a form is completed;
+            </Typography>
+          </li>
+          <li>
+            <Typography>Alert message;</Typography>
+          </li>
+          <li>
+            <Typography>Buttons are optional.</Typography>
+          </li>
+        </ul>
+        <Typography>
+          The color for the secondary button is the same as the primary. For the
+          primary action button, use:
+        </Typography>
+        <pre>variant="contained"</pre>
+        <Typography>For the secondary action button, use:</Typography>
+        <pre>variant="outlined"</pre>
+      </>
+    );
+  };
+
+  return (
+    <>
+      <Button color="primary" variant="contained" onClick={openDialog}>
+        Open Dialog
+      </Button>
+      <Dialog
+        open={open}
+        onClose={closeDialog}
+        aria-labelledby="dialog-title"
+        aria-describedby="dialog-description"
+      >
+        <DialogTitle id="dialog-title">
+          Dialog Box Title
+          <IconButton
+            aria-label="close"
+            className={classes.closeButton}
+            onClick={closeDialog}
+          >
+            <CloseIcon />
+          </IconButton>
+        </DialogTitle>
+        <DialogContent>{dialogContent()}</DialogContent>
+        <DialogActions classes={{ root: classes.leftAlignButtonsDialog }}>
+          <Button color="primary" variant="contained" onClick={closeDialog}>
+            Primary action
+          </Button>
+          <Button color="primary" variant="outlined" onClick={closeDialog}>
+            Secondary action
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};