From 0751b6bb82037dd2cd4415d8b6538aa9735e999a Mon Sep 17 00:00:00 2001 From: Alexander Midteide <144693023+alexdigdir@users.noreply.github.com> Date: Wed, 7 Feb 2024 15:16:04 +0100 Subject: [PATCH] wip --- packages/bff-frontend-poc/tsconfig.json | 1 + packages/frontend-design-poc/index.html | 1 + packages/frontend-design-poc/src/App.css | 6 ++ packages/frontend-design-poc/src/App.tsx | 31 +++--- .../src/components/Header/AltinnLogo.tsx | 19 ++++ .../src/components/Header/Header.module.css | 102 ++++++++++++++++++ .../src/components/Header/Header.tsx | 36 +++++++ .../src/components/HelloWorld/HelloWorld.tsx | 20 ++-- .../src/pages/PageLayout/PageLayout.tsx | 16 +-- packages/storybook/index.html | 9 +- packages/storybook/package.json | 5 +- packages/storybook/src/App.tsx | 13 ++- packages/storybook/src/app.module.css | 19 ++++ packages/storybook/src/main.tsx | 23 ++-- .../stories/{ => Button}/Button.stories.ts | 0 .../src/stories/{ => Button}/Button.tsx | 0 .../src/stories/{ => Button}/button.css | 0 .../storybook/src/stories/Header/Header.css | 0 .../src/stories/Header/Header.stories.ts | 55 ++++++++++ .../storybook/src/stories/Header/Header.tsx | 47 ++++++++ 20 files changed, 360 insertions(+), 43 deletions(-) create mode 100644 packages/frontend-design-poc/src/App.css create mode 100644 packages/frontend-design-poc/src/components/Header/AltinnLogo.tsx create mode 100644 packages/frontend-design-poc/src/components/Header/Header.module.css create mode 100644 packages/frontend-design-poc/src/components/Header/Header.tsx create mode 100644 packages/storybook/src/app.module.css rename packages/storybook/src/stories/{ => Button}/Button.stories.ts (100%) rename packages/storybook/src/stories/{ => Button}/Button.tsx (100%) rename packages/storybook/src/stories/{ => Button}/button.css (100%) create mode 100644 packages/storybook/src/stories/Header/Header.css create mode 100644 packages/storybook/src/stories/Header/Header.stories.ts create mode 100644 packages/storybook/src/stories/Header/Header.tsx diff --git a/packages/bff-frontend-poc/tsconfig.json b/packages/bff-frontend-poc/tsconfig.json index a91c38523..ca2e7abaa 100644 --- a/packages/bff-frontend-poc/tsconfig.json +++ b/packages/bff-frontend-poc/tsconfig.json @@ -15,3 +15,4 @@ "plugins": [{ "name": "typescript-plugin-css-modules" }], "include": ["**/*.ts", "**/*.tsx"], } + \ No newline at end of file diff --git a/packages/frontend-design-poc/index.html b/packages/frontend-design-poc/index.html index 0e27241ed..1031718bc 100644 --- a/packages/frontend-design-poc/index.html +++ b/packages/frontend-design-poc/index.html @@ -14,4 +14,5 @@
+ diff --git a/packages/frontend-design-poc/src/App.css b/packages/frontend-design-poc/src/App.css new file mode 100644 index 000000000..55f154025 --- /dev/null +++ b/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 */ + } \ No newline at end of file diff --git a/packages/frontend-design-poc/src/App.tsx b/packages/frontend-design-poc/src/App.tsx index d14215c8a..7871dea9e 100644 --- a/packages/frontend-design-poc/src/App.tsx +++ b/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 ( -
- - }> - } /> - } /> - - -
- ); + return ( +
+ + }> + + } /> + } /> + + +
+ ); } export default App; diff --git a/packages/frontend-design-poc/src/components/Header/AltinnLogo.tsx b/packages/frontend-design-poc/src/components/Header/AltinnLogo.tsx new file mode 100644 index 000000000..a4c8ec221 --- /dev/null +++ b/packages/frontend-design-poc/src/components/Header/AltinnLogo.tsx @@ -0,0 +1,19 @@ +export default function AltinnLogo() { + return ( + + Altinn logo + + + + + + + + + + ); +} diff --git a/packages/frontend-design-poc/src/components/Header/Header.module.css b/packages/frontend-design-poc/src/components/Header/Header.module.css new file mode 100644 index 000000000..85b83c760 --- /dev/null +++ b/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%; + +} \ No newline at end of file diff --git a/packages/frontend-design-poc/src/components/Header/Header.tsx b/packages/frontend-design-poc/src/components/Header/Header.tsx new file mode 100644 index 000000000..08499ddb4 --- /dev/null +++ b/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 = ({ name = 'Ola Nordmann' }) => { + const getInitials = (name: string) => { + return name + .split(' ') + .map((n) => n[0]) + .join(''); + }; + return ( +
+ +
+ +
+
+ {name} +
{getInitials(name)}
+
+
+ ); +}; diff --git a/packages/frontend-design-poc/src/components/HelloWorld/HelloWorld.tsx b/packages/frontend-design-poc/src/components/HelloWorld/HelloWorld.tsx index 0bf59c474..f519bc6e2 100644 --- a/packages/frontend-design-poc/src/components/HelloWorld/HelloWorld.tsx +++ b/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 ( -
- {isLoading ? Loading ... :

Hello, {data?.name}!

} -
- ); + const { isLoading, data } = useQuery('user', getUser); + return ( + <> +
+ {isLoading ? Loading ... :

Hello, {data?.name}!

} +
+ + ); }; diff --git a/packages/frontend-design-poc/src/pages/PageLayout/PageLayout.tsx b/packages/frontend-design-poc/src/pages/PageLayout/PageLayout.tsx index 69c9839af..07955c469 100644 --- a/packages/frontend-design-poc/src/pages/PageLayout/PageLayout.tsx +++ b/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 ( - <> -