feat: implement fiterBar in app

.github/workflows/workflow-check-for-changes.yml

@@ -40,4 +40,5 @@ jobs:
               - 'packages/bff/**/*'
               - 'packages/bff-frontend-poc/**/*'
               - 'packages/frontend-design-poc/**/*'
+              - 'packages/dialogporten-types-generated/**/*'
               - 'packages/storybook/**/*'

packages/dialogporten-types-generated/package.json

@@ -1,11 +1,14 @@
 {
   "name": "dialogporten-types-generated",
+  "main": "src/index.ts",
   "version": "1.0.0",
   "scripts": {
-    "build": "swagger-typescript-api --path ./node_modules/dialogporten-swagger/swagger.json -o generated --modular --clean-output --module-name-first-tag"
+    "prepare": "pnpm run generate:types",
+    "build": "pnpm run generate:types",
+    "generate:types": "swagger-typescript-api --path ./node_modules/@digdir/dialogporten-swagger/swagger.verified.json -o generated --modular --clean-output --module-name-first-tag --union-enums"
   },
   "dependencies": {
-    "dialogporten-swagger": "^1.0.4",
+    "@digdir/dialogporten-swagger": "1.1.0",
     "swagger-typescript-api": "13.0.3"
   }
 }

packages/dialogporten-types-generated/src/index.ts

@@ -1 +1,4 @@
 export * from '../generated/Enduser';
+export * from '../generated/data-contracts';
+export * from '../generated/http-client';
+export * from '../generated/Serviceowner';

packages/docs/docusaurus.config.ts

@@ -30,9 +30,7 @@ const config: Config = {
     mermaid: true,
   },
 
-	plugins: [
-		'docusaurus-tldraw-plugin',	
-	],
+  plugins: ['docusaurus-tldraw-plugin'],
 
   themes: [
     /* mermaid */

packages/frontend-design-poc/package.json

@@ -28,7 +28,8 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^14.0.3",
     "react-query": "^3.39.3",
-    "react-router-dom": "^6.16.0"
+    "react-router-dom": "^6.16.0",
+    "dialogporten-types-generated": "workspace:*"
   },
   "devDependencies": {
     "@playwright/test": "^1.41.2",

packages/frontend-design-poc/src/api/queries.ts

@@ -1,6 +1,9 @@
+import { GetDialogDtoSO } from 'dialogporten-types-generated';
+
 interface User {
   name: string;
   roles: string[];
 }
 
 export const getUser = (): Promise<User> => fetch('/user').then((resp) => resp.json());
+export const getDialogs = (): Promise<GetDialogDtoSO[]> => fetch('/dialogs').then((resp) => resp.json());

packages/frontend-design-poc/src/components/FilterBar/filterBar.module.css

@@ -1,5 +1,4 @@
 .filterBar {
-    padding: 1em;
     display: flex;
     align-items: flex-start;
     column-gap: 1em;

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

@@ -1,13 +1,13 @@
 import { Search } from '@digdir/designsystemet-react';
+import { DogIcon } from '@navikt/aksel-icons';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import { AltinnLogoSvg } from './AltinnLogo';
-import styles from './header.module.css';
 import { useWindowSize } from '../../../utils/useWindowSize';
-import { useTranslation } from 'react-i18next';
 import { MenuBar } from '../MenuBar';
-import { DogIcon } from '@navikt/aksel-icons';
 import { MenuBarItemProps } from '../MenuBar/MenuBarItem';
+import { AltinnLogoSvg } from './AltinnLogo';
+import styles from './header.module.css';
 
 type HeaderProps = {
   name: string;

packages/frontend-design-poc/src/components/InboxItem/inboxItem.module.css

@@ -28,6 +28,7 @@
     flex-direction: column;
     padding: 0 1.0625em 1.0625em;
     border-left: 4px solid rgba(0, 0, 0, 0.10);
+    margin-left: 1rem;
 }
 
 .isUnread {

packages/frontend-design-poc/src/components/InboxItem/inboxItemDetail.module.css

@@ -1,11 +1,12 @@
 .inboxItemDetail {
     display: flex;
     flex-direction: column;
-    padding: 0 1.0625em 1.0625em;
+    padding: 0 1.0625rem 1.0625rem;
+    background: #fff;
 }
 
 .descriptionContainer {
-    padding: 0 1.0625em 1.0625em;
+    padding: 0 1.0625rem 1.0625rem;
     border-left: 4px solid rgba(0, 0, 0, 0.10);
     margin-top: 1rem;
 }
@@ -78,7 +79,7 @@
 }
 
 .tagIcon {
-    margin-right: 0.5em;
+    margin-right: 0.5rem;
     height: 20px;
     width: 20px;
     flex-shrink: 0;

packages/frontend-design-poc/src/components/InboxItem/inboxItems.module.css

@@ -1,7 +1,8 @@
 .inboxItems {
     display: flex;
     flex-direction: column;
-    row-gap: .5em;
+    row-gap: 8px;
+    background: #fff;
     /* Reset default ul styles */
     list-style: none;
     padding-left: 0;

packages/frontend-design-poc/src/components/InboxItem/inboxItemsHeader.module.css

@@ -3,4 +3,5 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
+    padding: 0 1rem;
 }

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

@@ -1,10 +1,10 @@
-import { useTranslation } from 'react-i18next';
-import { useWindowSize } from '../../../utils/useWindowSize';
-import styles from './menubar.module.css';
 import cx from 'classnames';
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useWindowSize } from '../../../utils/useWindowSize';
 import { Avatar } from '../Avatar/Avatar';
 import { MenuBarDropdown, MenuBarItemProps } from './MenuBarItem';
+import styles from './menubar.module.css';
 
 interface MenuBarProps {
   name: string;

packages/frontend-design-poc/src/components/PageLayout/pageLayout.module.css

@@ -21,7 +21,6 @@
 }
 
 .pageLayout>main {
-    background: white;
     margin-right: 192px;
     grid-area: main;
     padding: 1.5rem;

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

@@ -10,9 +10,9 @@ import {
 } from '@navikt/aksel-icons';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useWindowSize } from '../../../utils/useWindowSize';
 import { SidebarItem } from './';
 import styles from './sidebar.module.css';
-import { useWindowSize } from '../../../utils/useWindowSize';
 
 export interface SidebarProps {
   children?: React.ReactNode;