wip

packages/bff-frontend-poc/tsconfig.json

@@ -15,3 +15,4 @@
   "plugins": [{ "name": "typescript-plugin-css-modules" }],
   "include": ["**/*.ts", "**/*.tsx"],
 }
+

packages/frontend-design-poc/index.html

@@ -14,4 +14,5 @@
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
+
 </html>

packages/frontend-design-poc/src/App.css

@@ -0,0 +1,6 @@
+
+
+body {
+    font-family: 'Inter', sans-serif;
+    font-feature-settings: 'cv05' 1 !important; /* Enable lowercase l with tail */
+  }

packages/frontend-design-poc/src/App.tsx

@@ -1,20 +1,21 @@
-import { Route, Routes } from "react-router-dom";
-import { HelloWorld } from "./components/HelloWorld";
-import { PageNotFound } from "./pages/PageNotFound";
-import { PageLayout } from "./pages/PageLayout";
-import styles from "./app.module.css";
+import { Route, Routes } from 'react-router-dom';
+import { HelloWorld } from './components/HelloWorld';
+import { PageNotFound } from './pages/PageNotFound';
+import { PageLayout } from './pages/PageLayout';
+import styles from './app.module.css';
 
 function App() {
-  return (
-    <div className={styles.app} role="main">
-      <Routes>
-        <Route element={<PageLayout />}>
-          <Route path="/" element={<HelloWorld />} />
-          <Route path="*" element={<PageNotFound />} />
-        </Route>
-      </Routes>
-    </div>
-  );
+	return (
+		<div className={styles.app} role="main">
+			<Routes>
+				<Route element={<PageLayout />}>
+					<Route path="/" />
+					<Route path="/hello-world" element={<HelloWorld />} />
+					<Route path="*" element={<PageNotFound />} />
+				</Route>
+			</Routes>
+		</div>
+	);
 }
 
 export default App;

packages/frontend-design-poc/src/components/Header/AltinnLogo.tsx

@@ -0,0 +1,19 @@
+export default function AltinnLogo() {
+	return (
+		<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<title>Altinn logo</title>
+			<g id="SVG" clip-path="url(#clip0_272_15462)">
+				<path
+					id="Vector"
+					d="M16.4223 0H0.648079C0.476197 0 0.311357 0.0681372 0.189817 0.189421C0.0682796 0.310707 0 0.475203 0 0.646725V31.3533C0 31.5248 0.0682796 31.6893 0.189817 31.8105C0.311357 31.9319 0.476197 32 0.648079 32H16.4223C20.594 31.8816 24.5551 30.1447 27.4639 27.1581C30.3727 24.1717 32 20.1712 32 16.0065C32 11.8418 30.3727 7.84119 27.4639 4.85475C24.5551 1.86829 20.594 0.131336 16.4223 0.0129348V0ZM17.9647 27.1753C15.578 27.5853 13.1227 27.2265 10.9539 26.1509C8.78521 25.0755 7.01584 23.3389 5.90201 21.1931C4.78819 19.0471 4.38771 16.6031 4.75856 14.2148C5.12943 11.8267 6.25239 9.61827 7.96483 7.9094C9.67727 6.20053 11.8903 5.07992 14.2835 4.70983C16.6767 4.33975 19.1259 4.73939 21.2763 5.85089C23.4267 6.9624 25.1667 8.72807 26.2445 10.8922C27.3224 13.0564 27.6819 15.5068 27.2712 17.8884C26.8713 20.2063 25.7621 22.3435 24.0956 24.0065C22.4291 25.6695 20.2873 26.7765 17.9647 27.1753Z"
+					fill="black"
+				/>
+			</g>
+			<defs>
+				<clipPath id="clip0_272_15462">
+					<rect width="32" height="32" fill="white" />
+				</clipPath>
+			</defs>
+		</svg>
+	);
+}

packages/frontend-design-poc/src/components/Header/Header.module.css

@@ -0,0 +1,102 @@
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    background: #E5EBEC;  /* Må byttes til variabel */
+    padding: 24px;
+    max-height: 68px;
+}
+
+.logo a {
+    color: #000;
+    text-align: center;
+    font-family: Inter;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 32px;
+    text-decoration: none !important;
+    display: flex;
+    align-items: center;
+
+}
+
+.logoText {
+    margin-left: 6px;
+}
+
+.navigation {
+    /* Styles for the navigation links */
+}
+
+.searchBar {
+    margin: 0 42px;
+
+    input {
+        border-radius: 28px;
+        border: 2px solid black;
+    }
+}
+
+
+
+.userSection {
+    display: flex;
+    align-items: center;
+}
+
+.languageSelector {
+    /* Styles for the language selector dropdown */
+}
+
+.userProfile {
+    display: flex;
+    align-items: center;
+    margin-left: 20px;
+}
+
+.userProfile span {
+    margin-right: 10px;
+}
+
+
+.nameWithInitials {
+    display: flex;
+    /* Aligns items horizontally */
+    align-items: center;
+    /* Centers items vertically */
+    gap: 10px;
+    /* Puts space between name and circle */
+    padding-right: 22px;
+}
+
+.name {
+    text-align: center;
+    color: #000;
+    text-align: center;
+    font-family: Inter;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 28px;
+    /* 155.556% */
+}
+
+.initialsCircle {
+    min-width: 48px;
+    min-height: 48px;
+    background-color: var(--fds-semantic-surface-success-default);
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+
+    font-family: Inter;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 100%;
+
+}

packages/frontend-design-poc/src/components/Header/Header.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import styles from './Header.module.css'; // Import the CSS module
+import { Search } from '@digdir/design-system-react';
+import AltinnLogo from './AltinnLogo';
+
+export type HeaderProps = {
+	name?: string;
+};
+
+export const Header: React.FC<HeaderProps> = ({ name = 'Ola Nordmann' }) => {
+	const getInitials = (name: string) => {
+		return name
+			.split(' ')
+			.map((n) => n[0])
+			.join('');
+	};
+	return (
+		<header className={styles.header}>
+			<nav className={styles.navigation}>
+				<div className={styles.logo}>
+					<Link to="/">
+						<AltinnLogo /> <span className={styles.logoText}>Altinn</span>
+					</Link>
+				</div>
+			</nav>
+			<div className={styles.searchBar}>
+				<Search size="small" />
+			</div>
+			<div className={styles.nameWithInitials}>
+				<span className={styles.name}>{name}</span>
+				<div className={styles.initialsCircle}>{getInitials(name)}</div>
+			</div>
+		</header>
+	);
+};

packages/frontend-design-poc/src/components/HelloWorld/HelloWorld.tsx

@@ -1,12 +1,14 @@
-import styles from "./helloWorld.module.css";
-import { useQuery } from "react-query";
-import { getUser } from "../../api/queries.ts";
+import styles from './helloWorld.module.css';
+import { useQuery } from 'react-query';
+import { getUser } from '../../api/queries.ts';
 
 export const HelloWorld = () => {
-  const { isLoading, data } = useQuery("user", getUser);
-  return (
-    <section className={styles.helloWorld}>
-      {isLoading ? <span>Loading ...</span> : <h1>Hello, {data?.name}!</h1>}
-    </section>
-  );
+	const { isLoading, data } = useQuery('user', getUser);
+	return (
+		<>
+			<section className={styles.helloWorld}>
+				{isLoading ? <span>Loading ...</span> : <h1>Hello, {data?.name}!</h1>}
+			</section>
+		</>
+	);
 };

packages/frontend-design-poc/src/pages/PageLayout/PageLayout.tsx

@@ -1,10 +1,12 @@
-import { Outlet } from "react-router-dom";
+import { Outlet } from 'react-router-dom';
+import { Header } from '../../components/Header/Header';
 
 export const PageLayout = () => {
-  return (
-    <>
-      <nav aria-label="hovedmeny" />
-      <Outlet />
-    </>
-  );
+	return (
+		<>
+			<nav aria-label="hovedmeny" />
+			<Header name={'Alexander Midteide'} />
+			<Outlet />
+		</>
+	);
 };

packages/storybook/index.html

@@ -2,12 +2,17 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link
+      rel="stylesheet"
+      href="https://altinncdn.no/fonts/inter/inter.css"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Arbeidsflate</title>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
+
 </html>

packages/storybook/package.json

@@ -11,8 +11,11 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@digdir/design-system-react": "^0.47.0",
+    "@digdir/design-system-tokens": "^0.12.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.16.0"
   },
   "resolutions": {
     "jackspeak": "2.1.1"

packages/storybook/src/App.tsx

@@ -1,3 +1,14 @@
-const App = () => <div>Storybook</div>;
+import { Route, Routes } from 'react-router-dom';
+import styles from './app.module.css';
+
+const App = () => (
+	<div className={styles.app} role="main">
+		<Routes>
+			<Route element={<h1>Storybook</h1>}>
+				<Route path="*" element={<h1>Not found</h1>} />
+			</Route>
+		</Routes>
+	</div>
+);
 
 export default App;

packages/storybook/src/app.module.css

@@ -0,0 +1,19 @@
+@import '@digdir/design-system-tokens/brand/digdir/tokens.css';
+
+:root {
+  font-family: 'Inter', sans-serif;
+  font-feature-settings: 'cv05' 1 !important; /* Enable lowercase l with tail */
+  font-weight: 400;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.app {
+  width: 100%;
+  margin: 0 auto;
+  padding: 2rem;
+}
+

packages/storybook/src/main.tsx

@@ -1,9 +1,16 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
+import ReactDOM from 'react-dom/client';
+import App from './App'; // Ensure this is the correct path, and typically you don't include the file extension
+import { BrowserRouter } from 'react-router-dom';
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+	const root = ReactDOM.createRoot(rootElement);
+	root.render(
+		<BrowserRouter>
+			<App />
+		</BrowserRouter>,
+	);
+} else {
+	console.error('Failed to find the root element');
+}