Make short mission info non-clickable and add button #535 (#841)

* changed button to themed button and aria-hid the info button * lint importing fix * fixed testing * got rid of extra padding by getting rid of invisible border * pr request fixes (css) * fixed testing and formatting * test now works! * lint * added defaultnormalising before text match on testing * got rid of console.log * rid of min width
ScottLogic · Mar 4, 2024 · 00a5068 · 00a5068
1 parent 4958220
commit 00a5068
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 12 deletions.
diff --git a/frontend/src/components/LevelMissionInfoBanner/LevelMissionInfoBanner.css b/frontend/src/components/LevelMissionInfoBanner/LevelMissionInfoBanner.css
@@ -1,9 +1,8 @@
 .level-mission-info-banner {
 	display: flex;
-	gap: 0.5rem;
+	gap: 1.5rem;
 	align-items: center;
 	padding: 0.5rem 1.5rem;
-	border: 0.5rem solid transparent;
 	background-color: var(--level-banner-background-colour);
 	color: var(--level-banner-text-colour);
 	text-align: left;
@@ -16,16 +15,34 @@
 }
 
 .level-title-area {
-	min-width: 10%;
+	margin: 1rem 0;
 	font-weight: 800;
 	font-size: 1.875rem;
+	white-space: nowrap;
 }
 
 .level-mission-info-banner > p {
 	margin: 0;
 	font-size: 1rem;
 }
 
-.level-mission-info-banner:hover {
-	background-color: var(--level-banner-background-colour-hover);
+.level-mission-info-banner .themed-button {
+	gap: 0.5rem;
+	height: auto;
+	padding: 0.75rem 1rem;
+	white-space: nowrap;
+}
+
+.info-icon {
+	display: flex;
+	align-items: center;
+	box-sizing: border-box;
+	height: auto;
+	padding: 0 0.625rem;
+	border-radius: 50%;
+	background-color: var(--action-button-text-colour);
+	color: var(--action-button-background-colour);
+	font: 1rem serif;
+	font-weight: bold;
+	aspect-ratio: 1;
 }
diff --git a/frontend/src/components/LevelMissionInfoBanner/LevelMissionInfoBanner.test.tsx b/frontend/src/components/LevelMissionInfoBanner/LevelMissionInfoBanner.test.tsx
@@ -1,4 +1,9 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import {
+	render,
+	screen,
+	fireEvent,
+	getDefaultNormalizer,
+} from '@testing-library/react';
 import { describe, expect, test, vi } from 'vitest';
 
 import { LEVELS } from '@src/Levels';
@@ -16,9 +21,16 @@ describe('LevelMissionInfoBanner component tests', () => {
 			/>
 		);
 
-		const button = screen.getByRole('button');
-		const expectedContent = LEVELS[currentLevel].missionInfoShort ?? '';
-		expect(button).toContainHTML(expectedContent);
+		const expectedContent = LEVELS[currentLevel].missionInfoShort;
+
+		if (!expectedContent)
+			throw new Error(`No missionInfoShort found for level ${currentLevel}`);
+
+		const expectedText = getDefaultNormalizer()(
+			expectedContent.slice(0, expectedContent.indexOf(' <u>'))
+		);
+		const banner = screen.getByText(expectedText);
+		expect(banner).toContainHTML(expectedContent);
 	});
 
 	test('fires the openOverlay callback on button click', () => {

diff --git a/frontend/src/components/LevelMissionInfoBanner/LevelMissionInfoBanner.tsx b/frontend/src/components/LevelMissionInfoBanner/LevelMissionInfoBanner.tsx
@@ -1,4 +1,5 @@
 import { LEVELS } from '@src/Levels';
+import ThemedButton from '@src/components/ThemedButtons/ThemedButton';
 import { LEVEL_NAMES } from '@src/models/level';
 
 import './LevelMissionInfoBanner.css';
@@ -11,14 +12,20 @@ function LevelMissionInfoBanner({
 	openOverlay: () => void;
 }) {
 	return (
-		<button className="level-mission-info-banner" onClick={openOverlay}>
-			<span className="level-title-area">{`Level ${currentLevel + 1}`}</span>
+		<span className="level-mission-info-banner">
+			<h2 className="level-title-area">{`Level ${currentLevel + 1}`}</h2>
 			<p
 				dangerouslySetInnerHTML={{
 					__html: LEVELS[currentLevel].missionInfoShort ?? '',
 				}}
 			></p>
-		</button>
+			<ThemedButton onClick={openOverlay}>
+				<span className="info-icon" aria-hidden="true">
+					i
+				</span>
+				Mission Info
+			</ThemedButton>
+		</span>
 	);
 }
 export default LevelMissionInfoBanner;