feat(TestRun): add info about keyboard arrow navigation

bleech · Sep 27, 2024 · 605c9f2 · 605c9f2
1 parent 63ee31a
commit 605c9f2
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 0 deletions.
diff --git a/assets/icons/arrow-down.svg b/assets/icons/arrow-down.svg
diff --git a/assets/icons/arrow-up.svg b/assets/icons/arrow-up.svg
diff --git a/components/test-run-page/_style.scss b/components/test-run-page/_style.scss
@@ -88,5 +88,23 @@
 				}
 			}
 		}
+
+		&-navigation-info {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 0.25rem;
+			margin-top: 1rem;
+			color: #757575;
+
+			svg {
+				color: $gray-70;
+				background: $gray-5;
+				border-radius: 3px;
+				padding: 5px;
+				width: 0.75rem;
+				height: 0.75rem;
+			}
+		}
 	}
 }
diff --git a/components/test-run-page/index.php b/components/test-run-page/index.php
@@ -12,6 +12,11 @@
 				'alert' => $data['alert'],
 				'test_settings' => $data['test_settings'],
 				] ); ?>
+			<div class="vrts-test-run-page__content-navigation-info">
+				<?php esc_html_e( 'Navigate with arrow keys', 'visual-regression-tests' ); ?>
+				<?php vrts()->icon( 'arrow-up' ); ?>
+				<?php vrts()->icon( 'arrow-down' ); ?>
+			</div>
 		<?php else : ?>
 			<?php vrts()->component( 'test-run-empty' ); ?>
 		<?php endif; ?>