diff --git a/.eslintrc.json b/.eslintrc.json
index 7585b0770cbc79d4f22ca83471ebbe375bba6456..9b67c6a2db46d35bcb2826803891513d66299cad 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -10,7 +10,8 @@
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"plugin:@next/next/recommended",
- "prettier"
+ "prettier",
+ "next"
],
"parserOptions": {
"ecmaVersion": 2015,
@@ -65,7 +66,14 @@
],
"optionalDependencies": false
}
- ]
+ ],
+ "indent": ["error", 2],
+ "react/jsx-indent": ["error", 2],
+ "react/jsx-indent-props": ["error", 2],
+ "linebreak-style": ["error", "unix"],
+ "semi": ["error", "always"],
+ "no-cond-assign": ["error", "always"],
+ "no-trailing-spaces": ["error"]
},
"overrides": [
{
diff --git a/package.json b/package.json
index 4b36139ff83f90765dea813178bb08e1f9bdfff6..b7152afb95debe7115b51c8e53e2eb4b4e156f78 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
"prepare": "husky install",
"postinstall": "husky install",
"test": "jest --watch --config ./jest.config.mjs",
- "test:ci": "jest --config ./jest.config.mjs --collectCoverage --coverageDirectory=\"./coverage\" --ci --reporters=default --reporters=jest-junit --watchAll=false",
+ "test:ci": "jest --config ./jest.config.mjs --collectCoverage --coverageDirectory=\"./coverage\" --ci --reporters=default --reporters=jest-junit --watchAll=false --passWithNoTests",
"test:coverage": "jest --watchAll --coverage --config ./jest.config.mjs",
"test:coveragee": "jest --coverage",
"coverage": "open ./coverage/lcov-report/index.html",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 569db14bf2ceb01be5d41ad91e83010725fd0fe0..63c2adad6caa70afccaa0dd820db672f736318ac 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,7 +2,7 @@ import { Manrope } from '@next/font/google';
import type { ReactNode } from 'react';
-import '../../styles/index.css';
+import '@/styles/index.css';
interface LayoutProps {
children: ReactNode;
@@ -17,7 +17,7 @@ const manrope = Manrope({
const Layout = ({ children }: LayoutProps) => (
<div className={manrope.className}>
- <div className="flex-grow">{children}</div>
+ <div>{children}</div>
</div>
);
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0dd4836b884ce2a1c027b5dc1784bfab3af65957..0c103a3f5ee878df66fdedc789539a641d538fc0 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,15 +1,3 @@
-// `app/page.tsx` is the UI for the `/` URL
-export default function Page() {
- return (
- <div className="p-4">
- <h1>Hello, h1!</h1>
- <br />
- <h2>Hello, h2!</h2>
- <br />
- <button>Button</button>
- <br />
- <br />
- <caption>This is caption!</caption>
- </div>
- );
-}
+import { MinervaSPA } from '@/components/SPA';
+
+export default MinervaSPA;
diff --git a/src/assets/images/image.jpg b/src/assets/images/image.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..82f35d29fafb251c1b1b48d294fba36e3abc1676
Binary files /dev/null and b/src/assets/images/image.jpg differ
diff --git a/src/components/FunctionalArea/FunctionalArea.component.tsx b/src/components/FunctionalArea/FunctionalArea.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..22043804efe9662d3a6092d79a2ebf05da414b81
--- /dev/null
+++ b/src/components/FunctionalArea/FunctionalArea.component.tsx
@@ -0,0 +1,17 @@
+import { TopBar } from '@/components/FunctionalArea/TopBar';
+import { NavBar } from '@/components/FunctionalArea/NavBar';
+import { MapNavigation } from '@/components/FunctionalArea/MapNavigation';
+
+export const FunctionalArea = (): JSX.Element => (
+ <>
+ <div className="absolute top-0 left-0 z-10 w-full">
+ <TopBar />
+ </div>
+ <div className="absolute left-[88px] top-16 z-10 w-[calc(100%-88px)]">
+ <MapNavigation />
+ </div>
+ <div className="absolute top-16 left-0 z-10 h-[calc(100%-64px)] flex">
+ <NavBar />
+ </div>
+ </>
+);
diff --git a/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx b/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9aaf502039fe0b5c7f4e8a725c46949708bdb077
--- /dev/null
+++ b/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx
@@ -0,0 +1 @@
+export const MapNavigation = (): JSX.Element => <div className="w-full h-10 bg-slate-200">.</div>;
diff --git a/src/components/FunctionalArea/MapNavigation/index.ts b/src/components/FunctionalArea/MapNavigation/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fd325db169b280ef67d7bf8eb4d116c91a039a07
--- /dev/null
+++ b/src/components/FunctionalArea/MapNavigation/index.ts
@@ -0,0 +1 @@
+export { MapNavigation } from './MapNavigation.component';
diff --git a/src/components/FunctionalArea/NavBar/NavBar.component.tsx b/src/components/FunctionalArea/NavBar/NavBar.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ccff87b8c145fdc6b7b93f57972ded6d8fac3504
--- /dev/null
+++ b/src/components/FunctionalArea/NavBar/NavBar.component.tsx
@@ -0,0 +1 @@
+export const NavBar = (): JSX.Element => <div className="w-[88px] min-h-100 bg-slate-700 ">.</div>;
diff --git a/src/components/FunctionalArea/NavBar/index.ts b/src/components/FunctionalArea/NavBar/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..045daa8a19ca64b8d80cc96caa8076bfed602209
--- /dev/null
+++ b/src/components/FunctionalArea/NavBar/index.ts
@@ -0,0 +1 @@
+export { NavBar } from './NavBar.component';
diff --git a/src/components/FunctionalArea/TopBar/TopBar.component.tsx b/src/components/FunctionalArea/TopBar/TopBar.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fd98c130abf162bacb8b0f40ed226e3b91b07ba2
--- /dev/null
+++ b/src/components/FunctionalArea/TopBar/TopBar.component.tsx
@@ -0,0 +1 @@
+export const TopBar = (): JSX.Element => <div className="w-100 bg-slate-600 h-16">.</div>;
diff --git a/src/components/FunctionalArea/TopBar/index.ts b/src/components/FunctionalArea/TopBar/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7b8f65d8078e5cede49851ee86701ea6f29a7e69
--- /dev/null
+++ b/src/components/FunctionalArea/TopBar/index.ts
@@ -0,0 +1 @@
+export { TopBar } from './TopBar.component';
diff --git a/src/components/FunctionalArea/index.ts b/src/components/FunctionalArea/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c882de0edecc4f460bd17a0ba2a231925537cab8
--- /dev/null
+++ b/src/components/FunctionalArea/index.ts
@@ -0,0 +1 @@
+export { FunctionalArea } from './FunctionalArea.component';
diff --git a/src/components/Map/Map.component.tsx b/src/components/Map/Map.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8c11af5fbec6e194ad6cea178f68b8f86498291b
--- /dev/null
+++ b/src/components/Map/Map.component.tsx
@@ -0,0 +1,8 @@
+import mapImg from '@/assets/images/image.jpg';
+import Image from 'next/image';
+
+export const Map = (): JSX.Element => (
+ <div className="w-100 h-screen bg-black" data-testid="map-container">
+ <Image src={mapImg} fill sizes="100vw" alt="map" />
+ </div>
+);
diff --git a/src/components/Map/index.ts b/src/components/Map/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e668f6c306b09500742696f1b09b5aec14bdf26d
--- /dev/null
+++ b/src/components/Map/index.ts
@@ -0,0 +1 @@
+export { Map } from './Map.component';
diff --git a/src/components/SPA/MinervaSPA.component.tsx b/src/components/SPA/MinervaSPA.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..72989e4fe22b36769c0a1d7bd1574c447bf1bb37
--- /dev/null
+++ b/src/components/SPA/MinervaSPA.component.tsx
@@ -0,0 +1,9 @@
+import { Map } from '@/components/Map';
+import { FunctionalArea } from '@/components/FunctionalArea';
+
+export const MinervaSPA = (): JSX.Element => (
+ <div className="relative">
+ <FunctionalArea />
+ <Map />
+ </div>
+);
diff --git a/src/components/SPA/index.ts b/src/components/SPA/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cbcb2430077a3ae10abc6fa0ca4d2ab8caf55381
--- /dev/null
+++ b/src/components/SPA/index.ts
@@ -0,0 +1 @@
+export { MinervaSPA } from './MinervaSPA.component';
diff --git a/src/components/[DomainName]/ExampleDomain.component.tsx b/src/components/[DomainName]/ExampleDomain.component.tsx
deleted file mode 100644
index bd6be1733eb07080cab77303a11aa75f2cce4846..0000000000000000000000000000000000000000
--- a/src/components/[DomainName]/ExampleDomain.component.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-const ExampleDomain = (): JSX.Element => <p>test</p>;
-
-export default ExampleDomain;
diff --git a/src/components/[DomainName]/ExampleDomain.test.tsx b/src/components/[DomainName]/ExampleDomain.test.tsx
deleted file mode 100644
index ef37e31de84150eb7e9ecadd68c4b36d98a12829..0000000000000000000000000000000000000000
--- a/src/components/[DomainName]/ExampleDomain.test.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-
-import ExampleDomain from './ExampleDomain.component';
-
-describe('ExampleDomain - component', () => {
- it('should return true', () => {
- render(<ExampleDomain />);
- expect(screen.getByText('test'));
- });
-});
diff --git a/src/components/[OtherDomainName]/OtherExampleDomain.component.ts b/src/components/[OtherDomainName]/OtherExampleDomain.component.ts
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/styles/contrib/normalize.css b/src/styles/contrib/normalize.css
new file mode 100644
index 0000000000000000000000000000000000000000..192eb9ce43389039996bc2e9344c5bb14b730d72
--- /dev/null
+++ b/src/styles/contrib/normalize.css
@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+ ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+ line-height: 1.15; /* 1 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+ ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+ margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+ display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+ box-sizing: content-box; /* 1 */
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+ background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+ border-style: none;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+ margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+ overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+ text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+ padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+
+legend {
+ box-sizing: border-box; /* 1 */
+ color: inherit; /* 2 */
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ padding: 0; /* 3 */
+ white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+ vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+}
+
+/* Interactive
+ ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+ display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+ display: list-item;
+}
+
+/* Misc
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+ display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+ display: none;
+}
diff --git a/src/styles/index.css b/src/styles/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..258eff2b7359337086ec8149dc72eb115b7f61d6
--- /dev/null
+++ b/src/styles/index.css
@@ -0,0 +1,63 @@
+@import 'contrib/normalize.css';
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+*,
+::after,
+::before {
+ box-sizing: border-box;
+}
+
+html {
+ font-size: 16px;
+}
+
+body {
+ @apply bg-white;
+ font-size: 100%;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+}
+
+a {
+ @apply no-underline;
+}
+
+ul {
+ list-style: none;
+ margin: 0 0 0 0;
+ padding: 0;
+}
+
+/* This is needed to reverse the CSS normalisation Tailwind applies. Ideally we can remove this
+ pretty soon though.
+*/
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+ display: inline;
+}
+
+@layer base {
+ h1 {
+ @apply text-xl;
+ }
+ h2 {
+ @apply text-base;
+ }
+ button {
+ @apply text-xs;
+ }
+ body {
+ @apply text-sm;
+ }
+ caption {
+ @apply text-xs;
+ }
+}
diff --git a/styles/index.css b/styles/index.css
deleted file mode 100644
index 70076bb64eed8f3df390fc16285e33d64d104b1e..0000000000000000000000000000000000000000
--- a/styles/index.css
+++ /dev/null
@@ -1,21 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
- h1 {
- @apply text-xl;
- }
- h2 {
- @apply text-base;
- }
- button {
- @apply text-xs;
- }
- body {
- @apply text-sm;
- }
- caption {
- @apply text-xs;
- }
-}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index f060cec25425f74d13504a4ce5380504c08f685d..18b85c28fe6459f3c5806534c12dc18ee2507fd6 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,17 +1,29 @@
import type { Config } from 'tailwindcss';
-const plugin = require('tailwindcss/plugin');
const config: Config = {
- content: [
- './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
- './src/components/**/*.{js,ts,jsx,tsx,mdx}',
- './src/app/**/*.{js,ts,jsx,tsx,mdx}',
- ],
+ content: ['./src/**/*.ts', './src/**/*.tsx'],
theme: {
extend: {
- backgroundImage: {
- 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
- 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+ colors: {
+ primary: {
+ 100: '#ebf4ff',
+ 500: '#106ad7',
+ 600: '#0055bb',
+ 700: '#004393',
+ },
+ greyscale: {
+ 500: '#eeeeee',
+ 600: '#cacaca',
+ 700: '#a5a5a5',
+ },
+ font: {
+ 400: '#6a6977',
+ 500: '#070130',
+ },
+ cinnabar: '#ec4d2c',
+ 'med-sea-green': '#3ab65d',
+ cultured: '#f7f7f8',
+ 'white-pearl': '#ffffff',
},
},
fontFamily: {