chore: rename NavigationHeader to NavHeader

NAMING_CONVENTIONS.md

@@ -1,15 +1,15 @@
-# Naming Conventions
-
-**The objective of this document is to help when naming things and make the codebase consistent and easier to read.**
-
-- Names should be always be **Descriptive** & **Succinct**.
-
-- Names should **not** be _Obscure_ or _Abbreviated_. An example would be `NavBar` or `NavigationBar` where `NavigationBar` is more clear and has no downsides.
-
-- Arguments should always be named in a way that immediately makes their intent clear.
-
-- Avoid single letter names or abbreviations unless it is something like `x` and `y` when working with geometrical operations.
-
-- Avoid names like small, medium and large and instead use sm, md and lg from tools like TailwindCSS. These will be familiar to everyone involved and allow you to make use of them in your code to construct other values.
-
-- Avoid technical terms or additions to names if they do not add value. An example would be `ContactSupportModal` where the `Modal` part adds no value because the important part is that the component is responsible for support contact.
+# Naming Conventions
+
+**The objective of this document is to help when naming things and make the codebase consistent and easier to read.**
+
+-   Names should be always be **Descriptive** & **Succinct**.
+
+-   Names should **not** be _Obscure_ or _Abbreviated_. An example would be `NavBar` or `NavigationBar` where `NavigationBar` is more clear and has no downsides.
+
+-   Arguments should always be named in a way that immediately makes their intent clear.
+
+-   Avoid single letter names or abbreviations unless it is something like `x` and `y` when working with geometrical operations.
+
+-   Avoid names like small, medium and large and instead use sm, md and lg from tools like TailwindCSS. These will be familiar to everyone involved and allow you to make use of them in your code to construct other values.
+
+-   Avoid technical terms or additions to names if they do not add value. An example would be `ContactSupportModal` where the `Modal` part adds no value because the important part is that the component is responsible for support contact.

src/app/components/NavHeader/NavHeader.stories.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+import { NavHeader } from "./NavHeader";
+
+export default { title: "Navigation / NavHeader" };
+
+export const Default = () => <NavHeader title="Go back to Portfolio" route="/portfolio" />;

src/app/components/NavigationHeader/NavigationHeader.test.tsx → src/app/components/NavHeader/NavHeader.test.tsx

@@ -1,15 +1,15 @@
 import { render } from "@testing-library/react";
 import React from "react";
-import { HashRouter } from "react-router-dom";
+import { BrowserRouter as Router } from "react-router-dom";
 
-import { NavigationHeader } from "./";
+import { NavHeader } from "./";
 
-describe("NavigationHeader", () => {
+describe("NavHeader", () => {
 	it("should render", () => {
 		const { container, asFragment, getByTestId } = render(
-			<HashRouter>
-				<NavigationHeader title="Go back to Portfolio" route="/portfolio" />
-			</HashRouter>,
+			<Router>
+				<NavHeader title="Go back to Portfolio" route="/portfolio" />
+			</Router>,
 		);
 
 		expect(container).toBeTruthy();

src/app/components/NavigationHeader/NavigationHeader.tsx → src/app/components/NavHeader/NavHeader.tsx

@@ -1,4 +1,3 @@
-// UI Elements
 import { Icon } from "app/components/Icon";
 import React from "react";
 import { NavLink } from "react-router-dom";
@@ -8,7 +7,7 @@ type NavigationHeaderProps = {
 	route: string;
 };
 
-export const NavigationHeader = ({ title, route }: NavigationHeaderProps) => (
+export const NavHeader = ({ title, route }: NavigationHeaderProps) => (
 	<div className="flex justify-center w-full h-16 bg-theme-neutral-100 md:px-4">
 		<div className="container flex items-center justify-start w-full h-full mx-auto text-sm font-semibold leading-none text-theme-neutral-600">
 			<span>
@@ -23,7 +22,7 @@ export const NavigationHeader = ({ title, route }: NavigationHeaderProps) => (
 	</div>
 );
 
-NavigationHeader.defaultProps = {
+NavHeader.defaultProps = {
 	title: "Empty Title",
 	route: "/",
 };

src/app/components/NavigationHeader/__snapshots__/NavigationHeader.test.tsx.snap → src/app/components/NavHeader/__snapshots__/NavHeader.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NavigationHeader should render 1`] = `
+exports[`NavHeader should render 1`] = `
 <DocumentFragment>
   <div
     class="flex justify-center w-full h-16 bg-theme-neutral-100 md:px-4"
@@ -11,7 +11,7 @@ exports[`NavigationHeader should render 1`] = `
       <span>
         <a
           class="flex font-semibold hover:underline transition-default"
-          href="#/portfolio"
+          href="/portfolio"
         >
           <div
             class="sc-AxjAm pXfjM"

src/app/components/NavHeader/index.ts

@@ -0,0 +1 @@
+export * from "./NavHeader";