feat(newspack-ui): modal functionality

Automattic · Jan 16, 2024 · e217a96 · e217a96
1 parent b80a47d
commit e217a96
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 2 deletions.
diff --git a/assets/newspack-ui/scss/_modals.scss b/assets/newspack-ui/scss/_modals.scss
@@ -1,4 +1,41 @@
 .newspack-ui {
+	&__modal-container {
+		position: fixed;
+		inset: 0;
+		overflow: hidden;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		visibility: hidden;
+		pointer-events: none;
+		z-index: -1;
+		&__overlay {
+			background: rgba( 0, 0, 0, 0.5 );
+			position: absolute;
+			inset: 0;
+			opacity: 0;
+			transition: opacity 0.1s linear;
+			z-index: 1;
+		}
+		.newspack-ui__modal {
+			width: 100%;
+			z-index: 2;
+			position: relative;
+			transform: translateY( 50px );
+			transition: transform 0.1s linear;
+		}
+		&[data-state='open'] {
+			z-index: 99999;
+			visibility: visible;
+			pointer-events: auto;
+			.newspack-ui__modal-container__overlay {
+				opacity: 1;
+			}
+			.newspack-ui__modal {
+				transform: translateY( 0 );
+			}
+		}
+	}
 	&__modal {
 		background: var( --newspack-ui-color-body-bg );
 		border-radius: var( --newspack-ui-border-radius );
@@ -28,7 +65,8 @@
 				margin: 0;
 			}
 
-			button { // Close button
+			button {
+				// Close button
 				background: transparent;
 				border: 0;
 				color: var( --newspack-ui-color-text-high-contrast );
@@ -80,4 +118,4 @@
 			}
 		}
 	}
-}
+}
diff --git a/includes/class-newspack-ui.php b/includes/class-newspack-ui.php
@@ -476,6 +476,69 @@ public static function return_demo_content() {
 				</div><!-- .newspack-ui__modal__small -->
 			</div><!-- .newspack-ui__box -->
 
+			<button id="open-modal-example" class="newspack-ui__button__primary">Open Modal</button>
+			<div id="newspack-modal-example" class="newspack-ui__modal-container">
+				<div class="newspack-ui__modal-container__overlay"></div>
+				<div class="newspack-ui__modal newspack-ui__modal__small">
+						<header class="newspack-ui__modal__header">
+							<h2>Auth Modal Contents Default</h2>
+
+							<button class="newspack-blocks-modal__close newspack-ui__modal__close">
+								<span class="screen-reader-text"><?php esc_html_e( 'Close', 'newspack-plugin' ); ?></span>
+								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
+									<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
+								</svg>
+							</button>
+						</header>
+
+						<section class="newspack-ui__modal__content">
+
+							<button class="newspack-ui__button__secondary newspack-ui__button__wide">
+								<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+									<path fill-rule="evenodd" clip-rule="evenodd" d="M19.6 10.227C19.6 9.51801 19.536 8.83701 19.418 8.18201H10V12.05H15.382C15.2706 12.6619 15.0363 13.2448 14.6932 13.7635C14.3501 14.2822 13.9054 14.726 13.386 15.068V17.578H16.618C18.509 15.836 19.6 13.273 19.6 10.228V10.227Z" fill="#4285F4"></path>
+									<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99996 20C12.7 20 14.964 19.105 16.618 17.577L13.386 15.068C12.491 15.668 11.346 16.023 9.99996 16.023C7.39496 16.023 5.18996 14.263 4.40496 11.9H1.06396V14.49C1.89597 16.1468 3.17234 17.5395 4.7504 18.5126C6.32846 19.4856 8.14603 20.0006 9.99996 20Z" fill="#34A853"></path>
+									<path fill-rule="evenodd" clip-rule="evenodd" d="M4.405 11.9C4.205 11.3 4.091 10.66 4.091 10C4.091 9.34001 4.205 8.70001 4.405 8.10001V5.51001H1.064C0.364015 6.90321 -0.000359433 8.44084 2.66054e-07 10C2.66054e-07 11.614 0.386 13.14 1.064 14.49L4.404 11.9H4.405Z" fill="#FBBC05"></path>
+									<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99996 3.977C11.468 3.977 12.786 4.482 13.823 5.473L16.691 2.605C14.959 0.99 12.695 0 9.99996 0C6.08996 0 2.70996 2.24 1.06396 5.51L4.40396 8.1C5.19196 5.736 7.39596 3.977 9.99996 3.977Z" fill="#EA4335"></path>
+								</svg>
+								<span>
+									Sign in with Google
+								</span>
+							</button>
+
+							<div class="newspack-ui__word-divider">
+								Or
+							</div>
+
+							<form>
+								<p>
+									<label for="email-input-demo">Email input</label>
+									<input type="email" placeholder="Email Address">
+								</p>
+
+								<button class="newspack-ui__button__primary newspack-ui__button__wide">Sign In</button>
+								<button class="newspack-ui__button__tertiary newspack-ui__button__wide">Sign in to existing account</button>
+							</form>
+						</section>
+
+						<footer class="newspack-ui__modal__footer">
+							<p>This is the modal footer.</p>
+						</footer>
+					</div><!-- .newspack-ui__modal__small -->
+			</div> <!-- .newspack-ui__modal-container -->
+			<script>
+				( function() {
+					var newspackModal = document.getElementById( 'newspack-modal-example' );
+					var openModal = document.getElementById( 'open-modal-example' );
+					var closeModal = newspackModal.querySelector( '.newspack-ui__modal__close' );
+					openModal.onclick = function() {
+						newspackModal.setAttribute( 'data-state', 'open' );
+					}
+					closeModal.onclick = function() {
+						newspackModal.setAttribute( 'data-state', 'closed' );
+					}
+				} )();
+			</script>
+
 		</div><!-- .newspack-ui -->
 		<?php
 		return ob_get_clean();