Merge pull request #293 from OneBusAway/fix-291

feat: add option to hide region name in navigation bar

Author: aaronbrethorst

.env.example

@@ -17,6 +17,9 @@ PUBLIC_OBA_REGION_CENTER_LAT=47.60728155903877
 PUBLIC_OBA_REGION_CENTER_LNG=-122.3339240843084
 PUBLIC_OBA_REGION_NAME="Puget Sound"
 
+# Set to "false" to hide the region name text in the navigation bar
+SHOW_REGION_NAME_IN_NAV_BAR=true
+
 PUBLIC_OBA_SERVER_URL="https://api.pugetsound.onebusaway.org/"
 
 PUBLIC_OTP_SERVER_URL=""

README.md

@@ -27,6 +27,7 @@ See `.env.example` for an example of the required keys and values.
 
 - `PUBLIC_OBA_REGION_NAME` - string: (required) displayed in the header.
 - `PUBLIC_OBA_LOGO_URL` - string: (required) The URL of your transit agency's logo.
+- `SHOW_REGION_NAME_IN_NAV_BAR` - boolean: (optional) Set to "false" to hide the region name text in the navigation bar. Defaults to true.
 - `FAVICON_URL` - string: (optional) URL to a custom favicon. Falls back to the default favicon if not specified.
 - `PUBLIC_NAV_BAR_LINKS` - JSON string: (required) A dictionary of the links displayed across the navigation bar.
 

eslint.config.js

@@ -16,7 +16,8 @@ export default [
 				...globals.node,
 				L: 'readonly',
 				google: 'readonly',
-				$state: 'readonly'
+				$state: 'readonly',
+				__SHOW_REGION_NAME_IN_NAV_BAR__: 'readonly'
 			}
 		}
 	},

src/components/navigation/Header.svelte

@@ -9,6 +9,8 @@
 	import ThemeSwitcher from '$lib/ThemeSwitch/ThemeSwitcher.svelte';
 	import MobileMenu from './MobileMenu.svelte';
 
+	const showRegionName = __SHOW_REGION_NAME_IN_NAV_BAR__;
+
 	let isMobileMenuOpen = $state(false);
 	let shouldShowMobile = $state(false);
 	let navContainer;
@@ -107,9 +109,11 @@
 			<a href="/" class="block">
 				<img src={PUBLIC_OBA_LOGO_URL} alt={PUBLIC_OBA_REGION_NAME} class="h-10 rounded-sm" />
 			</a>
-			<a href="/" class="block text-xl font-extrabold text-brand-foreground">
-				{PUBLIC_OBA_REGION_NAME}
-			</a>
+			{#if showRegionName}
+				<a href="/" class="block text-xl font-extrabold text-brand-foreground">
+					{PUBLIC_OBA_REGION_NAME}
+				</a>
+			{/if}
 		</div>
 	</div>
 

src/components/navigation/__tests__/Header.test.js

@@ -9,6 +9,9 @@ vi.mock('$env/static/public', () => ({
 	PUBLIC_NAV_BAR_LINKS: '{"Home": "/", "About": "/about"}'
 }));
 
+// Set default value for the global define
+globalThis.__SHOW_REGION_NAME_IN_NAV_BAR__ = true;
+
 // Mock ThemeSwitcher component
 vi.mock('$lib/ThemeSwitch/ThemeSwitcher.svelte', () => ({
 	default: () => '<div data-testid="theme-switcher">Theme Switcher</div>'
@@ -131,3 +134,44 @@ describe('Header', () => {
 		expect(textLink).toHaveClass('block', 'text-xl', 'font-extrabold');
 	});
 });
+
+describe('Header with region name hidden', () => {
+	beforeEach(() => {
+		globalThis.__SHOW_REGION_NAME_IN_NAV_BAR__ = false;
+
+		// Mock ResizeObserver
+		global.ResizeObserver = vi.fn().mockImplementation(() => ({
+			observe: vi.fn(),
+			unobserve: vi.fn(),
+			disconnect: vi.fn()
+		}));
+	});
+
+	afterEach(() => {
+		globalThis.__SHOW_REGION_NAME_IN_NAV_BAR__ = true;
+		vi.restoreAllMocks();
+	});
+
+	test('hides region name text when config is false', () => {
+		render(Header);
+
+		// Region name text should not be present
+		expect(screen.queryByText('Test Region')).not.toBeInTheDocument();
+	});
+
+	test('logo alt text still uses region name for accessibility', () => {
+		render(Header);
+
+		// Logo should still have the region name as alt text
+		const logo = screen.getByRole('img');
+		expect(logo).toHaveAttribute('alt', 'Test Region');
+	});
+
+	test('only logo link exists when region name is hidden', () => {
+		render(Header);
+
+		// Should only have one link for the logo
+		const links = screen.getAllByRole('link', { name: /test region/i });
+		expect(links).toHaveLength(1);
+	});
+});

vite.config.js

@@ -1,9 +1,17 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { svelteTesting } from '@testing-library/svelte/vite';
 import { defineConfig } from 'vitest/config';
+import dotenv from 'dotenv';
+
+dotenv.config();
 
 export default defineConfig({
 	plugins: [sveltekit(), svelteTesting()],
+	define: {
+		__SHOW_REGION_NAME_IN_NAV_BAR__: JSON.stringify(
+			process.env.SHOW_REGION_NAME_IN_NAV_BAR !== 'false'
+		)
+	},
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}'],
 		coverage: {