Initial commit

client/src/components/DeleteStep/DeleteStep.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'semantic-ui-react';
+import { Popup } from '../../lib/custom-ui';
+
+import styles from './DeleteStep.module.css';
+
+const DeleteStep = React.memo(({
+  title, content, buttonContent, onConfirm, onBack,
+}) => (
+  <>
+    <Popup.Header onBack={onBack}>{title}</Popup.Header>
+    <Popup.Content>
+      <div className={styles.content}>{content}</div>
+      <Button fluid negative content={buttonContent} onClick={onConfirm} />
+    </Popup.Content>
+  </>
+));
+
+DeleteStep.propTypes = {
+  title: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
+  buttonContent: PropTypes.string.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  onBack: PropTypes.func,
+};
+
+DeleteStep.defaultProps = {
+  onBack: undefined,
+};
+
+export default DeleteStep;

client/src/components/DeleteStep/DeleteStep.module.css

@@ -0,0 +1,5 @@
+.content {
+  color: #212121;
+  padding-bottom: 6px;
+  padding-left: 2px;
+}

client/src/components/DeleteStep/index.js

@@ -0,0 +1,3 @@
+import DeleteStep from './DeleteStep';
+
+export default DeleteStep;