first

wp-content/plugins/visual-portfolio/gutenberg/components/toggle-modal/index.js

@@ -0,0 +1,52 @@
+import './style.scss';
+
+import classnames from 'classnames/dedupe';
+
+import { Button, Modal } from '@wordpress/components';
+import { Component } from '@wordpress/element';
+
+/**
+ * Component Class
+ */
+export default class ToggleModal extends Component {
+	constructor(...args) {
+		super(...args);
+
+		this.state = {
+			isOpened: false,
+		};
+	}
+
+	render() {
+		const { children, modalTitle, buttonLabel, size } = this.props;
+
+		const { isOpened } = this.state;
+
+		return (
+			<>
+				<Button
+					isSecondary
+					onClick={() => this.setState({ isOpened: !isOpened })}
+				>
+					{buttonLabel}
+				</Button>
+				{isOpened ? (
+					<Modal
+						title={modalTitle}
+						onRequestClose={() =>
+							this.setState({ isOpened: !isOpened })
+						}
+						className={classnames(
+							'vpf-component-modal',
+							size ? `vpf-component-modal-size-${size}` : ''
+						)}
+					>
+						{children}
+					</Modal>
+				) : (
+					''
+				)}
+			</>
+		);
+	}
+}

wp-content/plugins/visual-portfolio/gutenberg/components/toggle-modal/style.scss

@@ -0,0 +1,21 @@
+.vpf-component-modal {
+	&.vpf-component-modal-size-sm {
+		width: 100%;
+		max-width: 360px;
+	}
+
+	@media (min-width: 600px) {
+		&.vpf-component-modal-size-md {
+			width: 100%;
+			max-width: 600px;
+		}
+	}
+
+	// size
+	@media (min-width: 840px) {
+		&.vpf-component-modal-size-lg {
+			width: 100%;
+			max-width: 800px;
+		}
+	}
+}