Chore/update next and remove storybook

.eslintignore

@@ -1 +0,0 @@
-!.storybook

.eslintrc.json

@@ -1,10 +1,5 @@
 {
-	"extends": [
-		"next/core-web-vitals",
-		"prettier",
-		"plugin:storybook/recommended",
-		"plugin:@typescript-eslint/recommended"
-	],
+	"extends": ["next/core-web-vitals", "prettier", "plugin:@typescript-eslint/recommended"],
 	"rules": {
 		"comma-spacing": ["error", { "before": false, "after": true }],
 		"react/no-unescaped-entities": 0,

CONTRIBUTING.md

@@ -14,7 +14,6 @@ This project is built with Next.JS, Typescript and CSS modules.
 Icons - [React Icons Documentation]( https://react-icons.github.io/react-icons)  
 Code Snippets - [React Syntax Highlighter Documentation](https://github.com/react-syntax-highlighter/react-syntax-highlighter)  
 Translations - [next-i18next Documentation](https://next.i18next.com/)  
-Storybook - [Storybook Documentation](https://storybook.js.org/)
 
 ## How to contribute
 
@@ -45,10 +44,6 @@ Storybook - [Storybook Documentation](https://storybook.js.org/)
     ```bash
     yarn dev
     ```
-    If you are making an isolated component and wish to run storybook locally instead of the whole website run this instead of `yarn dev`:
-    ```bash
-    yarn storybook
-    ```
 
 10.  Make your changes
 11. Stage your changes:

components/ContentTemplates/HeadingsTemplate.tsx

@@ -1,4 +1,4 @@
-import Image from "next/image"
+import Image from "next/legacy/image"
 import { NavPage } from "../NavPage/NavPage"
 import { CodeBlock } from "../CodeBlock/CodeBlock"
 import { headingsPageNavigation } from "../../data/pageNavigationLists"

components/ContentTemplates/ImagesTemplate.tsx

@@ -1,4 +1,4 @@
-import Image from "next/image"
+import Image from "next/legacy/image"
 import { NavPage } from "../NavPage/NavPage"
 import { CodeBlock } from "../CodeBlock/CodeBlock"
 import { imagePageNavigation } from "../../data/pageNavigationLists"

components/Footer/Footer.tsx

@@ -8,8 +8,8 @@ export const Footer = () => {
 			<div className={styles.footerTop}>
 				<ul className={styles.footerList}>
 					<li>
-						<Link href="/about">
-							<a className={styles.footerLink}>About the maintainers</a>
+						<Link href="/about" className={styles.footerLink}>
+							About the maintainers
 						</Link>
 					</li>
 
@@ -35,10 +35,8 @@ export const Footer = () => {
 						</a>
 					</li>
 					<li>
-						<Link href="/">
-							<a className={styles.footerLink}>
-								Accessibility Statement - coming soon
-							</a>
+						<Link href="/" className={styles.footerLink}>
+							Accessibility Statement - coming soon
 						</Link>
 					</li>
 				</ul>

components/Nav/NavItem.tsx

@@ -16,12 +16,11 @@ export const NavItem = ({
 	const isLinkActive = activeNavLink === page.href
 	return (
 		<li className={`${styles.navListItem} ${isLinkActive ? "active" : ""}`}>
-			<Link href={page.href}>
-				<a
-					onClick={handleNavClick}
-					aria-current={isLinkActive ? "page" : false}>
-					{page.name}
-				</a>
+			<Link
+				href={page.href}
+				onClick={handleNavClick}
+				aria-current={isLinkActive ? "page" : false}>
+				{page.name}
 			</Link>
 		</li>
 	)