Implements a new homepage page template using new CSS system

web/app/plugins/mitlib-multisearch-widget/class-multisearch-widget.php

@@ -48,7 +48,9 @@ public function widget( $args, $instance ) {
 		if ( 'use' == $instance['targets'] ) {
 			$all_template = 'templates/tab-all-use.php';
 		}
-
+		if ( 'use-v2' == $instance['targets'] ) {
+			$all_template = 'templates/tab-all-use-v2.php';
+		}
 		// Strip initial arguments.
 		$args = null;
 
@@ -82,15 +84,19 @@ public function widget( $args, $instance ) {
 		);
 		wp_enqueue_style( 'multisearch-tabs' );
 
-		// Render markup.
-		echo '<noscript><p>It appears that your browser does not support javascript.</p>';
-		include( 'templates/form_nojs.html' );
-		echo '</noscript>';
-		echo '<div id="multisearch" class="' . esc_attr( $this->widgetClasses( $instance ) ) . ' nojs">';
-		echo '<h2 id="searchtabsheader" class="sr">Search the MIT libraries</h2>';
+		if ( $instance['targets'] != 'use-v2' ) { 
+
+			// Render markup.
+			echo '<noscript><p>It appears that your browser does not support javascript.</p>';
+			include( 'templates/form_nojs.html' );
+			echo '</noscript>';
+			echo '<div id="multisearch" class="' . esc_attr( $this->widgetClasses( $instance ) ) . ' nojs">';
+			echo '<h2 id="searchtabsheader" class="sr">Search the MIT libraries</h2>';
+
+		};
 
 		// Render the search tabs only when "Unified Search" option is not selected
-		if ( $instance['targets'] != 'use' ) {
+		if ( $instance['targets'] != 'use' && $instance['targets'] != 'use-v2' ) {
 
 			echo '<ul id="search_tabs_nav" aria-labelledby="searchtabsheader">
 				<li><a id="tab-all" href="#search-all"><span>All</span></a></li>
@@ -132,6 +138,20 @@ public function widget( $args, $instance ) {
 
 		};
 
+		if ( $instance['targets'] == 'use-v2' ) {
+
+			// Determine whether to enable NLS based on widget settings and the user's cookie.
+			$nls_enabled = $this->readCookie( $instance['nls_default'] );
+
+			$nls_link_toggle = $this->setToggleValue( $nls_enabled );
+
+			$nls_included = $instance['nls_included'];
+
+			include( $all_template );
+
+
+		};
+
 		if ( $instance['banner_text'] ) {
 			$allowed = array(
 				'a' => array(
@@ -149,7 +169,10 @@ public function widget( $args, $instance ) {
 			echo wp_kses( $instance['banner_text'], $allowed );
 			echo '</div>';
 		}
-		echo '</div>';
+
+		if ( $instance['targets'] != 'use-v2' ) { 
+			echo '</div>';
+		};
 	}
 
 	/**
@@ -233,6 +256,21 @@ class="widefat"
 					Unified Search
 				</label>
 			</li>			
+			<li>
+				<label>
+					<input
+						type="radio"
+						name="<?php echo esc_attr( $this->get_field_name( 'targets' ) ); ?>"
+						value="use-v2"
+						<?php
+						if ( 'use-v2' == $targets ) {
+							echo "checked='checked'";
+						}
+						?>
+					>
+					Unified Search v2
+				</label>
+			</li>					
 		</ul>
 		<p>
 			<label for="<?php echo esc_attr( $this->get_field_id( 'bento_url' ) ); ?>">

web/app/plugins/mitlib-multisearch-widget/templates/tab-all-use-v2.php

@@ -0,0 +1,32 @@
+<?php
+/**
+ * The "Unified Search" of the search tab for all content - which will search "Search MIT Libraries" (USE).
+ *
+ * @package Multisearch Widget
+ * @since 1.5.0
+ */
+
+?>
+<!-- nls state: _<?php echo esc_attr( $nls_enabled ); ?>_ -->
+<form id="search-form" action="https://search.libraries.mit.edu/results" method="get" role="search">
+	<label for="basic-search-main">What can we help you find?</label>
+	<div class="form-wrapper">
+		<div class="search-input-wrapper">
+			<i class="fa-regular fa-magnifying-glass"></i>
+			<input id="basic-search-main" type="search" class="field field-text basic-search-input" name="q" title="Keyword anywhere" value="" required="">
+			<button title="Clear search" aria-label="Clear search" type="button" id="clear-search" style="display: none;">Clear search</button>
+		</div>
+		<input id="tab-to-target" type="hidden" name="tab" value="all">
+		<button type="submit" class="btn button-primary">Search</button>
+	</div>
+	<div class="search-actions">
+		<a class="link-on-dark" href="https://libraries.mit.edu/search-advanced">Advanced search</a>			
+
+		<?php if ( 'included' == $nls_included ) { ?>
+			<div class="nls-toggle">
+				<a class="toggle <?php echo esc_attr( $nls_enabled ); ?>" href="<?php echo esc_url( 'https://search.libraries.mit.edu/natural_language_search_optin?natural_language_search_optin=' . $nls_link_toggle . '&return_to=/' ); ?>">Natural language search</a>
+				<a class="learn-more" href="https://search.libraries.mit.edu/about-natural-language-search">Learn more</a>
+			</div>
+		<?php } ?>			
+	</div>
+</form>

web/app/themes/mitlib-parent/css/scss/partials/_layout.scss

@@ -306,4 +306,4 @@ html.no-js .js-hidden {
 	  	display: table;
 	  	clear: both;
   }
-}
+}

web/app/themes/mitlib-parent/css/v2/components/alerts.css

@@ -0,0 +1,121 @@
+#global-alert, #local-alerts {
+  background-color: var(--color-alert-bg);
+  color: var(--color-text-primary);
+
+  padding-top: var(--sp-400);
+  padding-bottom: var(--sp-400);
+
+  .content-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  h2 {
+    font-size: var(--font-size-lg);
+    margin-bottom: 0;
+  }
+}
+
+#global-alert {
+  position: relative;
+
+  .content-wrapper {
+    gap: var(--sp-400);
+  }
+
+  .global-alert-message {
+    display: flex;
+    gap: var(--sp-200);
+    flex-grow: 1;
+
+    i {
+      margin-top: var(--sp-100);
+      flex-shrink: 0;
+      flex-grow: 0;
+    }
+
+    p {
+      font-size: var(--font-size-md);
+      font-weight: var(--font-weight-regular);
+      margin-bottom: 0 !important; /* Overriding global style from old theme */
+    }
+
+    a {
+      text-decoration-color: var(--color-yellow-800);
+
+      &:hover {
+        color: var(--color-text-primary);
+        text-decoration-color: var(--color-text-primary);
+      }
+    }
+  }
+
+  .global-alert-actions {
+    display: flex;
+    gap: var(--sp-600);
+    align-items: center;
+    padding-left: var(--sp-700);
+
+    @media only screen and (max-width: 1324px) {
+      padding-right: var(--sp-800);
+    }
+  }
+
+  .dismiss {
+    position: absolute;
+    top: 50%;
+    right: var(--sp-600);    
+    transform: translateY(-50%);
+    padding-left: var(--sp-400);
+
+     i {
+      font-size: var(--font-size-xl);
+      color: var(--color-yellow-800);
+    }
+
+    &:hover, &:hover i {
+      color: var(--color-text-primary);
+    }
+  }
+}
+
+#local-alerts {
+
+  .content-wrapper {
+    gap: var(--sp-200);
+    flex-wrap: nowrap;
+    align-items: start;
+  }
+
+  i {
+    margin-top: var(--sp-100);
+    flex-shrink: 0;
+    flex-grow: 0;    
+  }
+
+  .local-alert-message {
+    display: flex;
+    flex-direction: row;
+    gap: var(--sp-100);
+    flex-grow: 1;
+    align-items: center;
+    flex-wrap: wrap;
+
+    h2, p {
+    margin-bottom: 0 !important; /* Overriding global style from old theme */
+    }
+
+    h2 {
+      flex-shrink: 0;
+      flex-grow: 0;
+      margin-right: var(--sp-400);
+    }
+
+    p {
+      flex-grow: 1;
+    }
+  }
+
+}

web/app/themes/mitlib-parent/css/v2/components/buttons.css

@@ -0,0 +1,28 @@
+a.button {
+    border: 1px solid var(--color-button-base-border-primary);
+    background-color: var(--color-button-base-bg-primary);
+    color: var(--color-button-base-text-primary);
+    border-radius: var(--border-radius-none);
+    display: inline-block;
+    padding: var(--sp-150) var(--sp-300);
+    text-decoration: none;
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-medium);
+
+    &:hover {
+      background-color: var(--color-button-hover-bg-primary);
+      border-color: var(--color-button-hover-border-primary);
+      color: var(--color-button-hover-text-primary);
+    }  
+
+  &.secondary {
+    border: 1px solid var(--color-button-base-border-secondary);
+    background-color: var(--color-button-base-bg-secondary);
+    color: var(--color-button-base-text-secondary);
+
+    &:hover {
+      background-color: var(--color-button-hover-bg-secondary);
+      color: var(--color-button-hover-text-secondary);
+    }  
+  }
+}