diff --git a/.github/workflows/sanity-build.yaml b/.github/workflows/sanity-build.yaml index 9a23e7874..2fd0640b5 100644 --- a/.github/workflows/sanity-build.yaml +++ b/.github/workflows/sanity-build.yaml @@ -30,7 +30,7 @@ jobs: path: | ${{matrix.apps}}/.eslintcache ${{matrix.apps}}/.tsbuildinfo - key: ${{ runner.os }}-${{ matrix.apps }}-${{ hashFiles(format('{0}/tsconfig.json', matrix.apps), format('{0}/.eslintrc.cjs', matrix.apps), format('{0}/eslint.config.js', matrix.apps)) }} + key: ${{ runner.os }}-${{ matrix.apps }}-${{ hashFiles(format('{0}/tsconfig.json', matrix.apps)) }} - name: Typecheck ${{ matrix.apps }} shell: bash @@ -57,4 +57,4 @@ jobs: path: | ${{matrix.apps}}/.eslintcache ${{matrix.apps}}/.tsbuildinfo - key: ${{ runner.os }}-${{ matrix.apps }}-${{ hashFiles(format('{0}/tsconfig.json', matrix.apps), format('{0}/.eslintrc.cjs', matrix.apps), format('{0}/eslint.config.js', matrix.apps)) }} + key: ${{ runner.os }}-${{ matrix.apps }}-${{ hashFiles(format('{0}/tsconfig.json', matrix.apps)) }} diff --git a/.gitignore b/.gitignore index 6eb7965e7..2083da280 100644 --- a/.gitignore +++ b/.gitignore @@ -3,5 +3,4 @@ dist build .DS_Store .idea -.eslintcache .tsbuildinfo diff --git a/.tool-versions b/.tool-versions index 60a79e65f..eece629d5 100644 --- a/.tool-versions +++ b/.tool-versions @@ -1 +1 @@ -bun 1.1.19 +bun 1.1.27 diff --git a/.vscode/settings.json b/.vscode/settings.json index 8230366df..fe75a0e41 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,15 +1,43 @@ { - "eslint.validate": [ - "javascript", - "javascriptreact", - "typescript", - "typescriptreact", - ], "editor.formatOnSave": true, - "eslint.format.enable": true, - "editor.defaultFormatter": "dbaeumer.vscode-eslint", + "editor.linkedEditing": true, + "editor.defaultFormatter": "biomejs.biome", "editor.codeActionsOnSave": { - "source.fixAll.eslint": "explicit" + "quickfix.biome": "always", + "source.fixAll.biome": "always", + "source.organizeImports.biome": "always", + "source.addMissingImports.ts": "explicit" }, - "prettier.requireConfig": true -} + "editor.acceptSuggestionOnCommitCharacter": false, + "typescript.validate.enable": true, + "typescript.tsdk": "node_modules/typescript/lib", + "typescript.preferences.importModuleSpecifier": "non-relative", + "workbench.editor.closeOnFileDelete": true, + "npm-intellisense.importQuotes": "'", + "npm-intellisense.importES6": true, + "npm-intellisense.showBuildInLibs": true, + "liveshare.autoShareServers": true, + "liveshare.openSharedServers": false, + "liveshare.languages.allowGuestCommandControl": true, + "liveshare.allowGuestDebugControl": true, + "liveshare.allowGuestTaskControl": true, + "liveshare.notebooks.allowGuestExecuteCells": true, + "[typescript]": { + "editor.defaultFormatter": "biomejs.biome" + }, + "[typescriptreact]": { + "editor.defaultFormatter": "biomejs.biome" + }, + "[javascript]": { + "editor.defaultFormatter": "biomejs.biome" + }, + "[javascriptreact]": { + "editor.defaultFormatter": "biomejs.biome" + }, + "[json]": { + "editor.defaultFormatter": "biomejs.biome" + }, + "[jsonc]": { + "editor.defaultFormatter": "biomejs.biome" + } +} \ No newline at end of file diff --git a/biome.json b/biome.json new file mode 100644 index 000000000..91a7c8ca2 --- /dev/null +++ b/biome.json @@ -0,0 +1,67 @@ +{ + "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json", + "organizeImports": { + "enabled": true + }, + "linter": { + "enabled": true, + "rules": { + "recommended": true, + "suspicious": { + "noDoubleEquals": { + "level": "error", + "fix": "unsafe" + }, + "noGlobalIsFinite": { + "level": "error", + "fix": "unsafe" + } + }, + "complexity": { + "useArrowFunction": { + "level": "error", + "fix": "safe" + }, + "useSimplifiedLogicExpression": { + "level": "warn" + } + }, + "correctness": { + "noUnusedImports": { + "level": "error" + } + }, + "style": { + "noUnusedTemplateLiteral": { + "level": "warn", + "fix": "unsafe" + }, + "noUselessElse": { + "level": "warn", + "fix": "safe" + }, + "useTemplate": { + "level": "warn", + "fix": "safe" + } + } + } + }, + "formatter": { + "lineWidth": 120, + "indentStyle": "space" + }, + "javascript": { + "formatter": { + "quoteStyle": "single", + "arrowParentheses": "always", + "bracketSameLine": false + }, + "linter": { + "enabled": true + } + }, + "files": { + "ignore": ["dist/**", "node_modules/**"] + } +} diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs deleted file mode 100644 index 15d1b7354..000000000 --- a/frontend/.eslintrc.cjs +++ /dev/null @@ -1,341 +0,0 @@ -const vitest = require('eslint-plugin-vitest'); - -module.exports = { - "ignorePatterns": [ - "Dockerfile", - "*.json", - "*.md", - ".*", - "webpack.*" - ], - "extends": [ - "prettier", - "eslint:recommended", - "plugin:react/recommended", - "plugin:react-hooks/recommended", - "plugin:import/typescript", - "plugin:@typescript-eslint/eslint-recommended", - "plugin:@typescript-eslint/recommended" - ], - "parser": "@typescript-eslint/parser", - "parserOptions": { - "sourceType": "module", - "project": "./tsconfig.json" - }, - "plugins": [ - "@typescript-eslint", - "jsx-a11y", - "react", - "react-hooks", - "prettier", - "import", - "prefer-arrow", - "vitest" - ], - "settings": { - "react": { - "version": "18" - }, - "import/parsers": { - "@typescript-eslint/parser": [ - ".ts", - ".tsx" - ] - }, - "import/resolver": { - "typescript-bun": { - "alwaysTryTypes": true, - "project": "./tsconfig.json" - } - } - }, - "root": true, - "env": { - "browser": true, - "es6": true - }, - "rules": { - ...vitest.configs.recommended.rules, - "@typescript-eslint/array-type": "error", - "@typescript-eslint/consistent-type-definitions": [ - "error", - "interface" - ], - "@typescript-eslint/consistent-type-imports": [ - "error", - { - "prefer": "no-type-imports" - } - ], - "@typescript-eslint/explicit-module-boundary-types": "off", - "@typescript-eslint/no-base-to-string": "error", - "@typescript-eslint/no-empty-function": "off", - "@typescript-eslint/no-shadow": [ - "error" - ], - "@typescript-eslint/no-unsafe-assignment": "error", - "@typescript-eslint/no-unused-vars": [ - "error" - ], - "@typescript-eslint/no-var-requires": 0, - "@typescript-eslint/prefer-includes": "error", - "@typescript-eslint/prefer-nullish-coalescing": "error", - "@typescript-eslint/prefer-reduce-type-parameter": "error", - "@typescript-eslint/restrict-template-expressions": [ - "error", - { - "allowNumber": true - } - ], - "@typescript-eslint/strict-boolean-expressions": "error", - "@typescript-eslint/switch-exhaustiveness-check": "error", - "array-callback-return": "error", - "arrow-body-style": [ - "error", - "as-needed" - ], - "comma-dangle": [ - 0, - "never" - ], - "complexity": [ - "error", - { - "max": 23 - } - ], - "curly": [ - "error", - "all" - ], - "eol-last": [ - "error", - "always" - ], - "eqeqeq": "error", - "import/first": "error", - "import/newline-after-import": [ - "error", - { - "count": 1 - } - ], - "import/no-cycle": "error", - "import/no-default-export": "error", - "import/no-duplicates": "error", - "import/no-self-import": "error", - "import/no-named-as-default": "error", - "import/no-named-as-default-member": "error", - "import/no-unresolved": ['error', { ignore: ['bun:test'] }], - "import/no-unused-modules": [ - "error", - { - "unusedExports": true, - "missingExports": true, - "src": [ - "./src" - ], - "ignoreExports": [ - "./src/index.tsx", - "./src/**/*.test.ts" - ] - } - ], - "import/order": [ - "error", - { - "groups": [ - "builtin", - "external", - "internal", - "parent", - "sibling", - "index", - "object" - ], - "newlines-between": "never", - "alphabetize": { - "order": "asc" - } - } - ], - "keyword-spacing": [ - "error", - { - "before": true - } - ], - "linebreak-style": [ - "error", - "unix" - ], - "max-depth": [ - "error", - { - "max": 4 - } - ], - "max-lines": [ - "error", - { - "max": 200, - "skipBlankLines": false, - "skipComments": true - } - ], - "no-alert": "error", - "no-console": [ - "warn", - { - "allow": [ - "warn", - "error", - "info" - ] - } - ], - "no-debugger": "error", - "no-duplicate-imports": "error", - "no-else-return": "error", - "no-eval": "error", - "no-extend-native": "error", - "no-implicit-coercion": "error", - "no-lonely-if": "error", - "no-nested-ternary": "error", - "no-proto": "error", - "no-restricted-globals": [ - "error", - { - "name": "event", - "message": "Use local parameter instead." - }, - { - "name": "Element", - "message": "Import Element from slate" - }, - { - "name": "Node", - "message": "Import Node from slate" - }, - { - "name": "Range", - "message": "Import Range from slate" - }, - { - "name": "Path", - "message": "Import Path from slate" - }, - { - "name": "Text", - "message": "Import Text from slate" - }, - { - "name": "Descendant", - "message": "Import Descendant from slate" - }, - { - "name": "close", - "message": "Don't use global close()" - }, - { - "name": "DocumentType", - "message": "Import DocumentType locally" - } - ], - "no-return-assign": [ - "error", - "always" - ], - "no-shadow": "off", - "no-unneeded-ternary": "error", - "no-unused-vars": "off", - "no-useless-rename": "error", - "no-useless-return": "error", - "no-var": "error", - "object-shorthand": [ - "error", - "always" - ], - "padded-blocks": [ - "error", - "never" - ], - "padding-line-between-statements": [ - "error", - { - "blankLine": "always", - "prev": "*", - "next": [ - "block", - "block-like", - "return" - ] - }, - { - "blankLine": "never", - "prev": "*", - "next": [ - "case", - "default" - ] - } - ], - "prefer-arrow/prefer-arrow-functions": [ - "warn", - { - "disallowPrototype": true, - "singleReturnOnly": false, - "classPropertiesAllowed": false - } - ], - "prefer-const": "error", - "prefer-destructuring": "error", - "prefer-object-spread": "error", - "prefer-rest-params": "error", - "prefer-spread": "error", - "prettier/prettier": [ - "error", - { - "semi": true, - "singleQuote": true, - "printWidth": 120, - "tabWidth": 2, - "endOfLine": "lf" - } - ], - "radix": [ - "error", - "always" - ], - "react-hooks/exhaustive-deps": "error", - "react-hooks/rules-of-hooks": "error", - "react/jsx-boolean-value": ["error", "never"], - "react/jsx-curly-brace-presence": "error", - "react/prop-types": "off", - "react/react-in-jsx-scope": "off", - "react/self-closing-comp": ["error"], - "sort-imports": [ - "error", - { - "ignoreDeclarationSort": true - } - ], - "space-before-blocks": [ - "error", - { - "functions": "always", - "keywords": "always", - "classes": "always" - } - ], - "yoda": [ - "error", - "never" - ] - }, - "overrides": [{ - "files": [ - "**/**.test.{ts,tsx}" - ], - }] -} \ No newline at end of file diff --git a/frontend/.vscode/Kabal (frontend).code-workspace b/frontend/.vscode/Kabal (frontend).code-workspace index e9ffc0a73..4f5b9fc19 100644 --- a/frontend/.vscode/Kabal (frontend).code-workspace +++ b/frontend/.vscode/Kabal (frontend).code-workspace @@ -5,4 +5,4 @@ "name": "Kabal (frontend)" } ] -} \ No newline at end of file +} diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json index b093dadf3..b5324eee5 100644 --- a/frontend/.vscode/settings.json +++ b/frontend/.vscode/settings.json @@ -1,19 +1,14 @@ { - "eslint.validate": [ - "javascript", - "javascriptreact", - "typescript", - "typescriptreact", - ], - "eslint.run": "onType", - "eslint.codeActionsOnSave.mode": "all", - "editor.formatOnSave": false, - "eslint.format.enable": true, + "editor.formatOnSave": true, "editor.linkedEditing": true, - "editor.defaultFormatter": "dbaeumer.vscode-eslint", + "editor.defaultFormatter": "biomejs.biome", "editor.codeActionsOnSave": { - "source.fixAll.eslint": "explicit" + "quickfix.biome": "always", + "source.fixAll.biome": "always", + "source.organizeImports.biome": "always", + "source.addMissingImports.ts": "explicit" }, + "editor.acceptSuggestionOnCommitCharacter": false, "typescript.validate.enable": true, "typescript.tsdk": "node_modules/typescript/lib", "typescript.preferences.importModuleSpecifier": "non-relative", @@ -27,12 +22,22 @@ "liveshare.allowGuestDebugControl": true, "liveshare.allowGuestTaskControl": true, "liveshare.notebooks.allowGuestExecuteCells": true, - "tslint.enable": false, - "prettier.requireConfig": true, - "[jsonc]": { - "editor.defaultFormatter": "vscode.json-language-features" + "[typescript]": { + "editor.defaultFormatter": "biomejs.biome" + }, + "[typescriptreact]": { + "editor.defaultFormatter": "biomejs.biome" + }, + "[javascript]": { + "editor.defaultFormatter": "biomejs.biome" + }, + "[javascriptreact]": { + "editor.defaultFormatter": "biomejs.biome" }, "[json]": { - "editor.defaultFormatter": "vscode.json-language-features" + "editor.defaultFormatter": "biomejs.biome" }, -} \ No newline at end of file + "[jsonc]": { + "editor.defaultFormatter": "biomejs.biome" + } +} diff --git a/frontend/assets/site.webmanifest b/frontend/assets/site.webmanifest index 94ccceaae..40077089a 100644 --- a/frontend/assets/site.webmanifest +++ b/frontend/assets/site.webmanifest @@ -16,4 +16,4 @@ "theme_color": "#ffffff", "background_color": "#ffffff", "display": "standalone" -} \ No newline at end of file +} diff --git a/frontend/bun.lockb b/frontend/bun.lockb index a7f5e05dd..2b886ad6c 100755 Binary files a/frontend/bun.lockb and b/frontend/bun.lockb differ diff --git a/frontend/index.html b/frontend/index.html index 31eaaee6f..47d63d428 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,5 +1,5 @@ - + diff --git a/frontend/package.json b/frontend/package.json index 7dccf8e63..9c2cfcafc 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,76 +1,71 @@ { - "name": "kabal", - "version": "1.0.0", - "description": "Kabal - Klage- og ankebehandling", - "type": "module", - "scripts": { - "start": "vite & tsc --watch", - "build": "vite build", - "typecheck": "tsc", - "lint": "eslint src --color --cache --cache-strategy content --cache-location .eslintcache" - }, - "license": "MIT", - "devDependencies": { - "@happy-dom/global-registrator": "^14.12.3", - "@types/bun": "^1.1.6", - "@types/react": "18.3.3", - "@types/react-dom": "18.3.0", - "@types/react-redux": "7.1.33", - "@typescript-eslint/eslint-plugin": "8.0.1", - "@typescript-eslint/parser": "8.0.1", - "@vitejs/plugin-react": "^4.3.1", - "css-loader": "7.1.2", - "eslint": "8.57.0", - "eslint-config-prettier": "9.1.0", - "eslint-import-resolver-typescript-bun": "^0.0.101", - "eslint-plugin-import": "2.29.1", - "eslint-plugin-jsx-a11y": "6.9.0", - "eslint-plugin-prefer-arrow": "1.2.3", - "eslint-plugin-prettier": "5.2.1", - "eslint-plugin-react": "7.35.0", - "eslint-plugin-react-hooks": "4.6.2", - "eslint-plugin-vitest": "^0.5.4", - "jsdom": "^24.1.1", - "prettier": "3.3.3", - "style-loader": "4.0.0", - "ts-loader": "9.5.1", - "typescript": "5.5.4", - "vite": "^5.4.0", - "vite-tsconfig-paths": "^5.0.0" - }, - "dependencies": { - "@grafana/faro-react": "^1.9.0", - "@grafana/faro-web-sdk": "^1.9.0", - "@grafana/faro-web-tracing": "^1.9.0", - "@navikt/aksel-icons": "6.14.0", - "@navikt/ds-css": "6.14.0", - "@navikt/ds-react": "6.14.0", - "@navikt/fnrvalidator": "1.3.0", - "@reduxjs/toolkit": "2.2.7", - "@styled-icons/fluentui-system-regular": "10.47.0", - "@types/qs": "^6.9.15", - "@udecode/plate-alignment": "36.0.11", - "@udecode/plate-autoformat": "36.0.0", - "@udecode/plate-basic-marks": "36.0.0", - "@udecode/plate-break": "36.0.0", - "@udecode/plate-common": "36.3.4", - "@udecode/plate-font": "36.0.0", - "@udecode/plate-heading": "36.0.12", - "@udecode/plate-indent": "36.0.0", - "@udecode/plate-list": "36.0.0", - "@udecode/plate-paragraph": "36.0.0", - "@udecode/plate-resizable": "36.0.0", - "@udecode/plate-serializer-docx": "36.3.5", - "@udecode/plate-table": "34.0.0", - "qs": "^6.13.0", - "react": "18.3.1", - "react-dom": "18.3.1", - "react-redux": "9.1.2", - "react-router": "6.26.0", - "react-router-dom": "6.26.0", - "slate": "0.103.0", - "slate-history": "0.100.0", - "slate-react": "0.107.1", - "styled-components": "6.1.12" - } + "name": "kabal", + "version": "1.0.0", + "description": "Kabal - Klage- og ankebehandling", + "type": "module", + "scripts": { + "start": "vite & tsc --watch", + "build": "vite build", + "typecheck": "tsc", + "lint": "biome check --fix" + }, + "license": "MIT", + "devDependencies": { + "@biomejs/biome": "1.8.3", + "@happy-dom/global-registrator": "14.12.3", + "@types/bun": "1.1.9", + "@types/react-dom": "18.3.0", + "@types/react-redux": "7.1.33", + "@types/react": "18.3.5", + "@vitejs/plugin-react": "4.3.1", + "css-loader": "7.1.2", + "jsdom": "24.1.1", + "prettier": "3.3.3", + "style-loader": "4.0.0", + "ts-loader": "9.5.1", + "typescript": "5.6.2", + "vite": "5.4.3", + "vite-tsconfig-paths": "5.0.1" + }, + "dependencies": { + "@grafana/faro-react": "1.9.1", + "@grafana/faro-web-sdk": "1.9.1", + "@grafana/faro-web-tracing": "1.9.1", + "@hocuspocus/provider": "2.13.5", + "@navikt/aksel-icons": "6.16.3", + "@navikt/ds-css": "6.16.3", + "@navikt/ds-react": "6.16.3", + "@navikt/fnrvalidator": "1.3.0", + "@reduxjs/toolkit": "2.2.7", + "@slate-yjs/core": "1.0.2", + "@slate-yjs/react": "1.1.0", + "@styled-icons/fluentui-system-regular": "10.47.0", + "@types/qs": "6.9.15", + "@udecode/plate-alignment": "36.0.11", + "@udecode/plate-autoformat": "36.4.0", + "@udecode/plate-basic-marks": "36.0.0", + "@udecode/plate-break": "36.3.8", + "@udecode/plate-common": "36.3.9", + "@udecode/plate-cursor": "36.0.0", + "@udecode/plate-font": "36.0.0", + "@udecode/plate-heading": "36.0.12", + "@udecode/plate-indent": "36.0.0", + "@udecode/plate-list": "36.5.2", + "@udecode/plate-paragraph": "36.0.0", + "@udecode/plate-resizable": "36.0.0", + "@udecode/plate-serializer-docx": "36.5.3", + "@udecode/plate-table": "36.3.8", + "@udecode/plate-yjs": "36.0.2", + "qs": "6.13.0", + "react-dom": "18.3.1", + "react-redux": "9.1.2", + "react-router-dom": "6.26.2", + "react-router": "6.26.2", + "react": "18.3.1", + "slate-history": "0.100.0", + "slate-react": "0.108.0", + "slate": "0.103.0", + "styled-components": "6.1.13", + "yjs": "13.6.18" + } } diff --git a/frontend/src/bun-test-setup.ts b/frontend/src/bun-test-setup.ts index dc6b8793d..c4e61eb37 100644 --- a/frontend/src/bun-test-setup.ts +++ b/frontend/src/bun-test-setup.ts @@ -1,8 +1,8 @@ +import { jest, mock } from 'bun:test'; /* eslint-disable import/no-unused-modules */ import { GlobalRegistrator } from '@happy-dom/global-registrator'; -import { jest, mock } from 'bun:test'; -import { IUserData } from './types/bruker'; -import { CountryCode, PostalCode } from './types/common'; +import type { IUserData } from './types/bruker'; +import type { CountryCode, PostalCode } from './types/common'; GlobalRegistrator.register(); @@ -30,4 +30,5 @@ mock.module('@app/static-data/static-data', () => ({ mock.module('@app/observability', () => ({ pushError: jest.fn(), + pushLog: jest.fn(), })); diff --git a/frontend/src/components/access-rights/access-rights.tsx b/frontend/src/components/access-rights/access-rights.tsx index 5787e4562..7e6e8c1f1 100644 --- a/frontend/src/components/access-rights/access-rights.tsx +++ b/frontend/src/components/access-rights/access-rights.tsx @@ -1,15 +1,15 @@ -import { CheckmarkIcon, XMarkIcon } from '@navikt/aksel-icons'; -import { Button, Heading, Loader } from '@navikt/ds-react'; -import { useContext, useState } from 'react'; -import { styled } from 'styled-components'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { - SaksbehandlerAccessRights, + type SaksbehandlerAccessRights, useGetAccessRightsQuery, useUpdateAccessRightsMutation, } from '@app/redux-api/access-rights'; import { useLatestYtelser } from '@app/simple-api-state/use-kodeverk'; -import { IYtelse } from '@app/types/kodeverk'; +import type { IYtelse } from '@app/types/kodeverk'; +import { CheckmarkIcon, XMarkIcon } from '@navikt/aksel-icons'; +import { Button, Heading, Loader } from '@navikt/ds-react'; +import { useContext, useState } from 'react'; +import { styled } from 'styled-components'; import { Body } from './body'; import { Head } from './head'; @@ -114,5 +114,5 @@ const TableWrapper = styled.div` const ButtonContainer = styled.div` display: flex; flex-direction: row; - column-gap: 16px; + column-gap: var(--a-spacing-4); `; diff --git a/frontend/src/components/access-rights/body.tsx b/frontend/src/components/access-rights/body.tsx index 5b73ba920..d999965d4 100644 --- a/frontend/src/components/access-rights/body.tsx +++ b/frontend/src/components/access-rights/body.tsx @@ -1,6 +1,6 @@ +import type { SaksbehandlerAccessRights } from '@app/redux-api/access-rights'; +import type { IYtelse } from '@app/types/kodeverk'; import { useMemo } from 'react'; -import { SaksbehandlerAccessRights } from '@app/redux-api/access-rights'; -import { IYtelse } from '@app/types/kodeverk'; import { Row } from './row'; interface Props { diff --git a/frontend/src/components/access-rights/cell.tsx b/frontend/src/components/access-rights/cell.tsx index b79ae9c83..094b5ed95 100644 --- a/frontend/src/components/access-rights/cell.tsx +++ b/frontend/src/components/access-rights/cell.tsx @@ -38,7 +38,7 @@ interface StyledCellProps { const getColor = ( { $isChecked, $isFocused, $isCurrentColumn, $isCurrentRow }: StyledCellProps, - defaultColor = 'white', + defaultColor = 'var(--a-bg-default)', ) => { if ($isFocused || $isCurrentColumn || $isCurrentRow) { if ($isChecked) { @@ -71,8 +71,8 @@ const StyledCell = styled.td` const StyledCheckbox = styled.input` display: block; - width: 32px; - height: 32px; + width: var(--a-spacing-8); + height: var(--a-spacing-8); border: none; margin: 0; padding: 0; diff --git a/frontend/src/components/access-rights/head.tsx b/frontend/src/components/access-rights/head.tsx index 36132b7b6..06060b72d 100644 --- a/frontend/src/components/access-rights/head.tsx +++ b/frontend/src/components/access-rights/head.tsx @@ -1,6 +1,6 @@ +import type { SaksbehandlerAccessRights } from '@app/redux-api/access-rights'; import { Label } from '@navikt/ds-react'; import { styled } from 'styled-components'; -import { SaksbehandlerAccessRights } from '@app/redux-api/access-rights'; interface Props { saksbehandlere: SaksbehandlerAccessRights[]; @@ -60,7 +60,7 @@ const Thead = styled.thead` position: sticky; top: 0; z-index: 2; - background-color: white; + background-color: var(--a-bg-default); box-shadow: var(--a-border-on-inverted) 0 1px 0 0, @@ -74,7 +74,7 @@ const CONTAINER_WIDTH = NON_ANGLED_HEADER_HEIGHT; const CONTAINER_HEIGHT = Math.sqrt(ANGLED_HEADER_WIDTH ** 2 / 2); const StyledHeader = styled.th` - padding-left: 8px; + padding-left: var(--a-spacing-2); vertical-align: bottom; text-align: left; `; @@ -85,10 +85,10 @@ const getBackgroundColor = (props: StyledAngledHeaderDivProps) => { } if (props.$grey) { - return 'rgb(247, 247, 247)'; + return 'var(--a-text-default)'; } - return 'white'; + return 'var(--a-bg-default)'; }; interface StyledAngledHeaderDivProps { diff --git a/frontend/src/components/access-rights/row.tsx b/frontend/src/components/access-rights/row.tsx index fd1b168cc..6f1a1329d 100644 --- a/frontend/src/components/access-rights/row.tsx +++ b/frontend/src/components/access-rights/row.tsx @@ -1,7 +1,7 @@ -import { styled } from 'styled-components'; -import { SaksbehandlerAccessRights } from '@app/redux-api/access-rights'; +import type { SaksbehandlerAccessRights } from '@app/redux-api/access-rights'; import { useLatestYtelser } from '@app/simple-api-state/use-kodeverk'; -import { IYtelse } from '@app/types/kodeverk'; +import type { IYtelse } from '@app/types/kodeverk'; +import { styled } from 'styled-components'; import { Cell } from './cell'; interface Props { @@ -68,8 +68,8 @@ const StyledHeaderText = styled.span` overflow: hidden; height: 100%; min-width: 100%; - padding-left: 8px; - padding-right: 8px; + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); white-space: nowrap; align-items: center; justify-content: left; @@ -84,7 +84,7 @@ const StyledHeaderText = styled.span` `; const StyledHeader = styled.th<{ $isHighlighted: boolean }>` - height: 32px; + height: var(--a-spacing-8); border-right: 1px solid var(--a-border-on-inverted); border-left: 1px solid var(--a-border-on-inverted); border-bottom: 1px solid var(--a-border-on-inverted); diff --git a/frontend/src/components/admin/admin.tsx b/frontend/src/components/admin/admin.tsx index ea428283d..05239dc3a 100644 --- a/frontend/src/components/admin/admin.tsx +++ b/frontend/src/components/admin/admin.tsx @@ -1,9 +1,9 @@ -import { styled } from 'styled-components'; import { useRecreateElasticAdminMutation, useRefillElasticAdminMutation, useResendDvhMutation, } from '@app/redux-api/internal'; +import { styled } from 'styled-components'; import { ApiButton } from './api-button'; export const Admin = () => ( @@ -18,7 +18,7 @@ export const Admin = () => ( const StyledPageContent = styled.article` display: flex; flex-direction: column; - gap: 16px; + gap: var(--a-spacing-4); max-width: 400px; width: 100%; margin-left: auto; diff --git a/frontend/src/components/admin/api-button.tsx b/frontend/src/components/admin/api-button.tsx index ff996b70c..36e3cc94f 100644 --- a/frontend/src/components/admin/api-button.tsx +++ b/frontend/src/components/admin/api-button.tsx @@ -1,5 +1,5 @@ import { AdminButton } from './admin-button'; -import { ApiHook } from './types'; +import type { ApiHook } from './types'; interface Props { useApi: ApiHook; diff --git a/frontend/src/components/app/app.tsx b/frontend/src/components/app/app.tsx index d926e31e8..fea542dcd 100644 --- a/frontend/src/components/app/app.tsx +++ b/frontend/src/components/app/app.tsx @@ -1,12 +1,12 @@ -import { StrictMode } from 'react'; -import { Provider } from 'react-redux'; -import { BrowserRouter } from 'react-router-dom'; import { AppErrorBoundary } from '@app/components/app/error-boundary'; import { StaticDataLoader } from '@app/components/app/static-data-context'; import { NavHeader } from '@app/components/header/header'; import { Toasts } from '@app/components/toast/toasts'; import { VersionCheckerStatus } from '@app/components/version-checker/version-checker-status'; import { reduxStore } from '@app/redux/configure-store'; +import { StrictMode } from 'react'; +import { Provider } from 'react-redux'; +import { BrowserRouter } from 'react-router-dom'; import { GlobalStyles } from './global-styles'; import { Router } from './router'; diff --git a/frontend/src/components/app/error-boundary.tsx b/frontend/src/components/app/error-boundary.tsx index f8629f699..8d1e45006 100644 --- a/frontend/src/components/app/error-boundary.tsx +++ b/frontend/src/components/app/error-boundary.tsx @@ -1,9 +1,9 @@ -import { Alert, Button, CopyButton, Heading } from '@navikt/ds-react'; -import { Component, ErrorInfo, ReactNode } from 'react'; -import { styled } from 'styled-components'; import { VERSION_CHECKER } from '@app/components/version-checker/version-checker'; import { ENVIRONMENT } from '@app/environment'; import { pushError } from '@app/observability'; +import { Alert, Button, CopyButton, Heading } from '@navikt/ds-react'; +import { Component, type ErrorInfo, type ReactNode } from 'react'; +import { styled } from 'styled-components'; interface Props { children: ReactNode; @@ -82,14 +82,14 @@ export class AppErrorBoundary extends Component { const ErrorContainer = styled.section` display: block; width: fit-content; - background: var(--a-bg-default); - padding: 16px; + background-color: var(--a-bg-default); + padding: var(--a-spacing-4); overflow-y: auto; box-shadow: var(--a-shadow-medium); - margin-top: 32px; + margin-top: var(--a-spacing-8); margin-left: auto; margin-right: auto; - margin-bottom: 32px; + margin-bottom: var(--a-spacing-8); `; const ErrorContent = styled.div` @@ -97,22 +97,22 @@ const ErrorContent = styled.div` flex-direction: column; align-items: flex-start; justify-content: left; - row-gap: 8px; + row-gap: var(--a-spacing-2); `; const Code = styled.code` - background-color: #f5f5f5; - border: 1px solid #ddd; + background-color: var(--a-bg-subtle); + border: 1px solid var(--a-border-divider); border-radius: var(--a-border-radius-medium); - padding-left: 4px; - padding-right: 4px; + padding-left: var(--a-spacing-1); + padding-right: var(--a-spacing-1); `; const CodeBlock = styled.code` display: block; - padding: 16px; - background-color: #f5f5f5; - border: 1px solid #ddd; + padding: var(--a-spacing-4); + background-color: var(--a-bg-subtle); + border: 1px solid var(--a-border-divider); border-radius: var(--a-border-radius-medium); white-space: pre-wrap; word-break: normal; @@ -122,9 +122,9 @@ const CodeBlock = styled.code` const Row = styled.div` display: flex; flex-direction: row; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; const StyledAlert = styled(Alert)` - margin-bottom: 16px; + margin-bottom: var(--a-spacing-4); `; diff --git a/frontend/src/components/app/global-styles.ts b/frontend/src/components/app/global-styles.ts index d8bdaee3f..e05f1c9bb 100644 --- a/frontend/src/components/app/global-styles.ts +++ b/frontend/src/components/app/global-styles.ts @@ -10,7 +10,21 @@ const styles = css` html { box-sizing: border-box; font-family: 'Source Sans 3', Arial, sans-serif; - font-size: 16px; + font-size: var(--a-spacing-4); + + --kabal-bg-medium: var(--a-gray-200); + + &[data-theme='dark'] { + --a-bg-default: var(--a-surface-inverted); + --a-bg-subtle: var(--a-grayalpha-800); + --a-surface-default: var(--a-surface-inverted); + --a-surface-subtle: var(--a-grayalpha-800); + --a-text-default: var(--a-text-on-inverted); + + --kabal-bg-medium: var(--a-gray-800); + + background-color: var(--a-bg-default); + } } *, @@ -27,7 +41,7 @@ const styles = css` margin: 0; padding: 0; overflow: hidden; - font-size: 16px; + font-size: var(--a-spacing-4); } #app { diff --git a/frontend/src/components/app/loader.tsx b/frontend/src/components/app/loader.tsx index 326ad34ca..2d36a214c 100644 --- a/frontend/src/components/app/loader.tsx +++ b/frontend/src/components/app/loader.tsx @@ -20,7 +20,7 @@ const LoaderWrapper = styled.div` align-items: center; height: 100vh; width: 100vw; - background-color: #fafafa; + background-color: var(--a-surface-subtle); `; const Content = styled.div` diff --git a/frontend/src/components/app/no-access-page.tsx b/frontend/src/components/app/no-access-page.tsx index 471ecf8f0..4815255a0 100644 --- a/frontend/src/components/app/no-access-page.tsx +++ b/frontend/src/components/app/no-access-page.tsx @@ -1,12 +1,12 @@ -import { BodyShort, Heading, Tag } from '@navikt/ds-react'; -import { useContext, useEffect } from 'react'; -import { styled } from 'styled-components'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { RoleList } from '@app/components/role-list/role-list'; import { ENVIRONMENT } from '@app/environment'; import { pushEvent } from '@app/observability'; import { PageWrapper } from '@app/pages/page-wrapper'; -import { ALL_PUBLIC_ROLES, Role } from '@app/types/bruker'; +import { ALL_PUBLIC_ROLES, type Role } from '@app/types/bruker'; +import { BodyShort, Heading, Tag } from '@navikt/ds-react'; +import { useContext, useEffect } from 'react'; +import { styled } from 'styled-components'; interface Props { requiredRoles: Role[]; @@ -48,7 +48,7 @@ export const NoAccessPage = ({ requiredRoles }: Props) => { !user.roller.includes(r) && !requiredRoles.includes(r))} + roles={ALL_PUBLIC_ROLES.filter((r) => !(user.roller.includes(r) || requiredRoles.includes(r)))} variant="neutral-moderate" /> diff --git a/frontend/src/components/app/not-found-page.tsx b/frontend/src/components/app/not-found-page.tsx index c717dbe08..78485c047 100644 --- a/frontend/src/components/app/not-found-page.tsx +++ b/frontend/src/components/app/not-found-page.tsx @@ -1,6 +1,6 @@ +import { PageWrapper } from '@app/pages/page-wrapper'; import { BodyShort, Heading, Tag } from '@navikt/ds-react'; import { styled } from 'styled-components'; -import { PageWrapper } from '@app/pages/page-wrapper'; export const NotFoundPage = () => ( diff --git a/frontend/src/components/app/protected-route.tsx b/frontend/src/components/app/protected-route.tsx index 25880d5a9..c0a84a356 100644 --- a/frontend/src/components/app/protected-route.tsx +++ b/frontend/src/components/app/protected-route.tsx @@ -1,8 +1,8 @@ -import { useContext } from 'react'; -import { Outlet } from 'react-router-dom'; import { NoAccessPage } from '@app/components/app/no-access-page'; import { StaticDataContext } from '@app/components/app/static-data-context'; -import { Role } from '@app/types/bruker'; +import type { Role } from '@app/types/bruker'; +import { useContext } from 'react'; +import { Outlet } from 'react-router-dom'; interface Props { roles: Role[]; diff --git a/frontend/src/components/app/router.tsx b/frontend/src/components/app/router.tsx index 5fe5bcea0..235e07562 100644 --- a/frontend/src/components/app/router.tsx +++ b/frontend/src/components/app/router.tsx @@ -1,4 +1,3 @@ -import { Route, Routes as Switch } from 'react-router-dom'; import { NotFoundPage } from '@app/components/app/not-found-page'; import { ProtectedRoute } from '@app/components/app/protected-route'; import { ModalEnum } from '@app/components/svarbrev/row/row'; @@ -22,6 +21,7 @@ import { SvarbrevPage } from '@app/pages/svarbrev/svarbrev'; import { ToppteksterPage } from '@app/pages/topptekster/topptekster'; import { TrygderettsankebehandlingPage } from '@app/pages/trygderettsankebehandling/trygderettsankebehandling'; import { Role } from '@app/types/bruker'; +import { Route, Routes as Switch } from 'react-router-dom'; export const Router = () => ( @@ -30,9 +30,9 @@ export const Router = () => ( }> } /> } /> - } /> - } /> - } /> + } /> + } /> + } /> }> diff --git a/frontend/src/components/app/static-data-context.tsx b/frontend/src/components/app/static-data-context.tsx index 7b13f991e..7e08f4979 100644 --- a/frontend/src/components/app/static-data-context.tsx +++ b/frontend/src/components/app/static-data-context.tsx @@ -1,8 +1,8 @@ -import { createContext, useCallback, useEffect, useState } from 'react'; import { AppLoader } from '@app/components/app/loader'; import { countryCodes, postalCodes, user } from '@app/static-data/static-data'; -import { IUserData } from '@app/types/bruker'; -import { CountryCode, PostalCode } from '@app/types/common'; +import type { IUserData } from '@app/types/bruker'; +import type { CountryCode, PostalCode } from '@app/types/common'; +import { createContext, useCallback, useEffect, useState } from 'react'; interface Props { children: React.ReactNode; diff --git a/frontend/src/components/behandling/behandling.tsx b/frontend/src/components/behandling/behandling.tsx index 652c7c68e..34f17c325 100644 --- a/frontend/src/components/behandling/behandling.tsx +++ b/frontend/src/components/behandling/behandling.tsx @@ -1,8 +1,8 @@ -import { Heading, Skeleton } from '@navikt/ds-react'; import { BehandlingSection } from '@app/components/behandling/behandlingsdetaljer/behandling-section'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useBehandlingEnabled } from '@app/hooks/settings/use-setting'; import { SaksTypeEnum } from '@app/types/kodeverk'; +import { Heading, Skeleton } from '@navikt/ds-react'; import { PanelContainer } from '../oppgavebehandling-panels/styled-components'; import { Ankebehandlingsdetaljer } from './behandlingsdetaljer/ankebehandlingsdetaljer'; import { Klagebehandlingsdetaljer } from './behandlingsdetaljer/klagebehandlingsdetaljer'; diff --git a/frontend/src/components/behandling/behandlingsdetaljer/ankebehandlingsdetaljer.tsx b/frontend/src/components/behandling/behandlingsdetaljer/ankebehandlingsdetaljer.tsx index 99dfd741e..ac6a31d1f 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/ankebehandlingsdetaljer.tsx +++ b/frontend/src/components/behandling/behandlingsdetaljer/ankebehandlingsdetaljer.tsx @@ -1,4 +1,3 @@ -import { Heading } from '@navikt/ds-react'; import { ExtraUtfall } from '@app/components/behandling/behandlingsdetaljer/extra-utfall'; import { GosysBeskrivelse } from '@app/components/behandling/behandlingsdetaljer/gosys/beskrivelse'; import { PreviousSaksbehandler } from '@app/components/behandling/behandlingsdetaljer/previous-saksbehandler'; @@ -6,7 +5,8 @@ import { Saksnummer } from '@app/components/behandling/behandlingsdetaljer/saksn import { isoDateToPretty } from '@app/domain/date'; import { useUpdateFullmektigMutation, useUpdateKlagerMutation } from '@app/redux-api/oppgaver/mutations/behandling'; import { SaksTypeEnum } from '@app/types/kodeverk'; -import { IOppgavebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; +import type { IOppgavebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; +import { Heading } from '@navikt/ds-react'; import { Part } from '../../part/part'; import { Type } from '../../type/type'; import { StyledBehandlingSection } from '../styled-components'; diff --git a/frontend/src/components/behandling/behandlingsdetaljer/behandling-section.tsx b/frontend/src/components/behandling/behandlingsdetaljer/behandling-section.tsx index fd11d0a3d..4537dac96 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/behandling-section.tsx +++ b/frontend/src/components/behandling/behandlingsdetaljer/behandling-section.tsx @@ -12,7 +12,7 @@ export const BehandlingSection = ({ label, children, testid }: Props) => { return {children}; } - const id = 'behandling-section-' + label.toLowerCase().replaceAll(/\s/g, '-'); + const id = `behandling-section-${label.toLowerCase().replaceAll(/\s/g, '-')}`; return ( @@ -25,9 +25,9 @@ export const BehandlingSection = ({ label, children, testid }: Props) => { }; const StyledBehandlingSection = styled.section` - margin-bottom: 16px; + margin-bottom: var(--a-spacing-4); display: flex; flex-direction: column; - gap: 4px; + gap: var(--a-spacing-1); white-space: break-spaces; `; diff --git a/frontend/src/components/behandling/behandlingsdetaljer/extra-utfall.tsx b/frontend/src/components/behandling/behandlingsdetaljer/extra-utfall.tsx index 59dd01174..f976cd53a 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/extra-utfall.tsx +++ b/frontend/src/components/behandling/behandlingsdetaljer/extra-utfall.tsx @@ -1,6 +1,3 @@ -import { Button, HelpText, Label, Tag } from '@navikt/ds-react'; -import { ReactNode, useMemo, useRef, useState } from 'react'; -import { styled } from 'styled-components'; import { Dropdown } from '@app/components/filter-dropdown/dropdown'; import { isUtfall } from '@app/functions/is-utfall'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; @@ -8,7 +5,10 @@ import { useCanEdit } from '@app/hooks/use-can-edit'; import { useOnClickOutside } from '@app/hooks/use-on-click-outside'; import { useUtfall } from '@app/hooks/use-utfall'; import { useUpdateExtraUtfallMutation } from '@app/redux-api/oppgaver/mutations/set-utfall'; -import { UtfallEnum } from '@app/types/kodeverk'; +import type { UtfallEnum } from '@app/types/kodeverk'; +import { Button, HelpText, Label, Tag } from '@navikt/ds-react'; +import { type ReactNode, useMemo, useRef, useState } from 'react'; +import { styled } from 'styled-components'; interface TagsProps { utfallIdSet: UtfallEnum[]; @@ -136,7 +136,7 @@ const ButtonContainer = styled.div` `; const Container = styled.div` - margin-bottom: 16px; + margin-bottom: var(--a-spacing-4); `; const Popup = ({ isOpen, children }: { isOpen: boolean; children: ReactNode }) => { @@ -155,7 +155,7 @@ const StyledPopup = styled.div` const HelpTextWrapper = styled.div` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; const HelpTextContent = styled.div` @@ -166,7 +166,7 @@ const HelpTextContent = styled.div` const TagsContainer = styled.div` display: flex; - gap: 4px; + gap: var(--a-spacing-1); flex-wrap: wrap; - margin-top: 8px; + margin-top: var(--a-spacing-2); `; diff --git a/frontend/src/components/behandling/behandlingsdetaljer/gosys/beskrivelse.tsx b/frontend/src/components/behandling/behandlingsdetaljer/gosys/beskrivelse.tsx index 023c6697b..49519076e 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/gosys/beskrivelse.tsx +++ b/frontend/src/components/behandling/behandlingsdetaljer/gosys/beskrivelse.tsx @@ -1,7 +1,3 @@ -import { Box, Button, Modal, VStack } from '@navikt/ds-react'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { useCallback, useEffect, useMemo, useRef } from 'react'; -import { styled } from 'styled-components'; import { BehandlingSection } from '@app/components/behandling/behandlingsdetaljer/behandling-section'; import { BEHANDLING_PANEL_DOMAIN } from '@app/components/behandling/behandlingsdetaljer/gosys/domain'; import { Entry } from '@app/components/behandling/behandlingsdetaljer/gosys/entry'; @@ -12,6 +8,10 @@ import { StyledEntryList } from '@app/components/behandling/behandlingsdetaljer/ import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { useGosysBeskrivelseTab } from '@app/hooks/settings/use-setting'; import { pushEvent, pushLog } from '@app/observability'; +import { Box, Button, Modal, VStack } from '@navikt/ds-react'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useCallback, useEffect, useMemo, useRef } from 'react'; +import { styled } from 'styled-components'; interface Props { oppgavebeskrivelse: string | null; diff --git a/frontend/src/components/behandling/behandlingsdetaljer/gosys/entry-list.tsx b/frontend/src/components/behandling/behandlingsdetaljer/gosys/entry-list.tsx index ff351630d..73de8f4b7 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/gosys/entry-list.tsx +++ b/frontend/src/components/behandling/behandlingsdetaljer/gosys/entry-list.tsx @@ -1,7 +1,7 @@ -import { styled } from 'styled-components'; import { Entry } from '@app/components/behandling/behandlingsdetaljer/gosys/entry'; -import { GosysBeskrivelseEntry } from '@app/components/behandling/behandlingsdetaljer/gosys/parsing/type'; +import type { GosysBeskrivelseEntry } from '@app/components/behandling/behandlingsdetaljer/gosys/parsing/type'; import { StyledEntryList } from '@app/components/behandling/behandlingsdetaljer/gosys/styled-entry-list'; +import { styled } from 'styled-components'; interface Props { entries: GosysBeskrivelseEntry[]; @@ -9,8 +9,9 @@ interface Props { export const EntryList = ({ entries }: Props) => ( - {entries.map((entry, index) => ( - + {entries.map((entry) => ( + // biome-ignore lint/correctness/useJsxKeyInIterable: Static data + ))} diff --git a/frontend/src/components/behandling/behandlingsdetaljer/gosys/entry.tsx b/frontend/src/components/behandling/behandlingsdetaljer/gosys/entry.tsx index 00e93b962..c1d3cf411 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/gosys/entry.tsx +++ b/frontend/src/components/behandling/behandlingsdetaljer/gosys/entry.tsx @@ -1,10 +1,10 @@ -import { BodyLong, HStack, Heading, Tag, VStack } from '@navikt/ds-react'; -import { format } from 'date-fns'; -import { styled } from 'styled-components'; -import { GosysBeskrivelseEntry } from '@app/components/behandling/behandlingsdetaljer/gosys/parsing/type'; +import type { GosysBeskrivelseEntry } from '@app/components/behandling/behandlingsdetaljer/gosys/parsing/type'; import { CopyIdButton } from '@app/components/copy-button/copy-id-button'; import { useGetSignatureQuery } from '@app/redux-api/bruker'; import { useKlageenheter } from '@app/simple-api-state/use-kodeverk'; +import { BodyLong, HStack, Heading, Tag, VStack } from '@navikt/ds-react'; +import { format } from 'date-fns'; +import { styled } from 'styled-components'; export const Entry = ({ author, date, content }: GosysBeskrivelseEntry) => { const { data: enheter } = useKlageenheter(); diff --git a/frontend/src/components/behandling/behandlingsdetaljer/gosys/modal-content.tsx b/frontend/src/components/behandling/behandlingsdetaljer/gosys/modal-content.tsx index 3cef4feeb..066b01edc 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/gosys/modal-content.tsx +++ b/frontend/src/components/behandling/behandlingsdetaljer/gosys/modal-content.tsx @@ -1,13 +1,13 @@ -import { BulletListIcon, CaptionsIcon, ExclamationmarkTriangleIcon } from '@navikt/aksel-icons'; -import { Alert, BodyLong, Tabs } from '@navikt/ds-react'; -import { useCallback } from 'react'; -import { styled } from 'styled-components'; import { BEHANDLING_PANEL_DOMAIN } from '@app/components/behandling/behandlingsdetaljer/gosys/domain'; import { EntryList } from '@app/components/behandling/behandlingsdetaljer/gosys/entry-list'; import { GosysBeskrivelseFormat } from '@app/components/behandling/behandlingsdetaljer/gosys/format-enum'; -import { GosysBeskrivelseEntry } from '@app/components/behandling/behandlingsdetaljer/gosys/parsing/type'; +import type { GosysBeskrivelseEntry } from '@app/components/behandling/behandlingsdetaljer/gosys/parsing/type'; import { useGosysBeskrivelseTab } from '@app/hooks/settings/use-setting'; import { pushEvent } from '@app/observability'; +import { BulletListIcon, CaptionsIcon, ExclamationmarkTriangleIcon } from '@navikt/aksel-icons'; +import { Alert, BodyLong, Tabs } from '@navikt/ds-react'; +import { useCallback } from 'react'; +import { styled } from 'styled-components'; interface Props { defaultFormat: GosysBeskrivelseFormat; diff --git a/frontend/src/components/behandling/behandlingsdetaljer/gosys/parsing/parse-header.test.ts b/frontend/src/components/behandling/behandlingsdetaljer/gosys/parsing/parse-header.test.ts index 6bbcbd698..978651193 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/gosys/parsing/parse-header.test.ts +++ b/frontend/src/components/behandling/behandlingsdetaljer/gosys/parsing/parse-header.test.ts @@ -16,7 +16,7 @@ describe('parse Gosys header', () => { }); it('should parse header with name containing comma', () => { - const header = `--- 12.06.2024 14:29 F_Z994864, E_Z994864 (Z994864, 4291) ---`; + const header = '--- 12.06.2024 14:29 F_Z994864, E_Z994864 (Z994864, 4291) ---'; expect.assertions(1); @@ -29,7 +29,7 @@ describe('parse Gosys header', () => { }); it('should parse header with many names', () => { - const header = `--- 12.06.2024 14:29 Ola Navn Navnesen Normann (Z994864, 4291) ---`; + const header = '--- 12.06.2024 14:29 Ola Navn Navnesen Normann (Z994864, 4291) ---'; expect.assertions(1); @@ -42,7 +42,7 @@ describe('parse Gosys header', () => { }); it('should parse header with name containing Norwegian characters', () => { - const header = `--- 12.06.2024 14:29 Øyvind Øystein Østensen (Z994864, 4291) ---`; + const header = '--- 12.06.2024 14:29 Øyvind Øystein Østensen (Z994864, 4291) ---'; expect.assertions(1); @@ -55,7 +55,7 @@ describe('parse Gosys header', () => { }); it('should parse header with name containing dash', () => { - const header = `--- 12.06.2024 14:29 Ola-Navn Navnesen (Z994864, 4291) ---`; + const header = '--- 12.06.2024 14:29 Ola-Navn Navnesen (Z994864, 4291) ---'; expect.assertions(1); @@ -68,7 +68,7 @@ describe('parse Gosys header', () => { }); it('should parse header with no name', () => { - const header = `--- 12.06.2024 14:29 (Z994864, 4291) ---`; + const header = '--- 12.06.2024 14:29 (Z994864, 4291) ---'; expect.assertions(1); @@ -81,7 +81,7 @@ describe('parse Gosys header', () => { }); it('should parse header with no name and two spaces', () => { - const header = `--- 12.06.2024 14:29 (Z994864, 4291) ---`; + const header = '--- 12.06.2024 14:29 (Z994864, 4291) ---'; expect.assertions(1); @@ -94,7 +94,7 @@ describe('parse Gosys header', () => { }); it('should parse header with no name and five spaces', () => { - const header = `--- 12.06.2024 14:29 (Z994864, 4291) ---`; + const header = '--- 12.06.2024 14:29 (Z994864, 4291) ---'; expect.assertions(1); @@ -107,7 +107,7 @@ describe('parse Gosys header', () => { }); it('should parse header with missing last time digits', () => { - const header = `--- 12.06.2024 14:0 F_Z994864 E_Z994864 (Z994864, 4291) ---`; + const header = '--- 12.06.2024 14:0 F_Z994864 E_Z994864 (Z994864, 4291) ---'; expect.assertions(1); @@ -120,7 +120,7 @@ describe('parse Gosys header', () => { }); it('should parse header with missing last time digits', () => { - const header = `--- 12.06.2024 9:00 F_Z994864 E_Z994864 (Z994864, 4291) ---`; + const header = '--- 12.06.2024 9:00 F_Z994864 E_Z994864 (Z994864, 4291) ---'; expect.assertions(1); @@ -133,7 +133,7 @@ describe('parse Gosys header', () => { }); it('should parse header with missing first and last time digits', () => { - const header = `--- 12.06.2024 9:0 F_Z994864 E_Z994864 (Z994864, 4291) ---`; + const header = '--- 12.06.2024 9:0 F_Z994864 E_Z994864 (Z994864, 4291) ---'; expect.assertions(1); @@ -146,7 +146,7 @@ describe('parse Gosys header', () => { }); it('should parse header with missing leading zero in date', () => { - const header = `--- 2.6.2024 09:00 F_Z994864 E_Z994864 (Z994864, 4291) ---`; + const header = '--- 2.6.2024 09:00 F_Z994864 E_Z994864 (Z994864, 4291) ---'; expect.assertions(1); diff --git a/frontend/src/components/behandling/behandlingsdetaljer/gosys/parsing/parse-header.ts b/frontend/src/components/behandling/behandlingsdetaljer/gosys/parsing/parse-header.ts index 363017ee0..61773f432 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/gosys/parsing/parse-header.ts +++ b/frontend/src/components/behandling/behandlingsdetaljer/gosys/parsing/parse-header.ts @@ -1,5 +1,5 @@ +import type { GosysBeskrivelseEntry } from '@app/components/behandling/behandlingsdetaljer/gosys/parsing/type'; import { isValid, parse } from 'date-fns'; -import { GosysBeskrivelseEntry } from '@app/components/behandling/behandlingsdetaljer/gosys/parsing/type'; const HEADER_REGEX = /(\d{1,2}\.\d{1,2}\.\d{4} \d{1,2}:\d{1,2})\s+(.*)\(([A-Z]\d+), (\d+)\)/i; diff --git a/frontend/src/components/behandling/behandlingsdetaljer/gosys/parsing/split-beskrivelse.test.ts b/frontend/src/components/behandling/behandlingsdetaljer/gosys/parsing/split-beskrivelse.test.ts index e260702f0..7f8ebd6a4 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/gosys/parsing/split-beskrivelse.test.ts +++ b/frontend/src/components/behandling/behandlingsdetaljer/gosys/parsing/split-beskrivelse.test.ts @@ -213,7 +213,7 @@ Mottatt dato : 21.05.2024`; it('should split no content', () => { expect.assertions(1); - const beskrivelse = `--- 12.06.2024 14:29 F_Z994864 E_Z994864 (Z994864, 4291) ---`; + const beskrivelse = '--- 12.06.2024 14:29 F_Z994864 E_Z994864 (Z994864, 4291) ---'; const actual = splitBeskrivelse(beskrivelse); expect(actual).toStrictEqual([ diff --git a/frontend/src/components/behandling/behandlingsdetaljer/gosys/parsing/split-beskrivelse.ts b/frontend/src/components/behandling/behandlingsdetaljer/gosys/parsing/split-beskrivelse.ts index 435c2a042..2d9b8f835 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/gosys/parsing/split-beskrivelse.ts +++ b/frontend/src/components/behandling/behandlingsdetaljer/gosys/parsing/split-beskrivelse.ts @@ -1,5 +1,5 @@ import { parseHeader } from '@app/components/behandling/behandlingsdetaljer/gosys/parsing/parse-header'; -import { GosysBeskrivelseEntry } from '@app/components/behandling/behandlingsdetaljer/gosys/parsing/type'; +import type { GosysBeskrivelseEntry } from '@app/components/behandling/behandlingsdetaljer/gosys/parsing/type'; export const splitBeskrivelse = (beskrivelse: string): GosysBeskrivelseEntry[] => { const lines = beskrivelse.trim().split('\n'); @@ -17,7 +17,7 @@ export const splitBeskrivelse = (beskrivelse: string): GosysBeskrivelseEntry[] = // If it is not a header, it is a continuation of the previous entry. if (header === null) { if (current !== null) { - current.content += '\n' + trimmedLine; + current.content += `\n${trimmedLine}`; } // Ignore line. @@ -29,7 +29,7 @@ export const splitBeskrivelse = (beskrivelse: string): GosysBeskrivelseEntry[] = result.push(current); } else if (current !== null) { // If it is not a header and we have a current entry, it is a continuation of the previous entry. - current.content += '\n' + trimmedLine; + current.content += `\n${trimmedLine}`; } // Otherwise, ignore line. } diff --git a/frontend/src/components/behandling/behandlingsdetaljer/klagebehandlingsdetaljer.tsx b/frontend/src/components/behandling/behandlingsdetaljer/klagebehandlingsdetaljer.tsx index 796ff86e3..25b5159d2 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/klagebehandlingsdetaljer.tsx +++ b/frontend/src/components/behandling/behandlingsdetaljer/klagebehandlingsdetaljer.tsx @@ -1,11 +1,11 @@ -import { Heading } from '@navikt/ds-react'; import { ExtraUtfall } from '@app/components/behandling/behandlingsdetaljer/extra-utfall'; import { GosysBeskrivelse } from '@app/components/behandling/behandlingsdetaljer/gosys/beskrivelse'; import { Saksnummer } from '@app/components/behandling/behandlingsdetaljer/saksnummer'; import { Type } from '@app/components/type/type'; import { isoDateToPretty } from '@app/domain/date'; import { useUpdateFullmektigMutation, useUpdateKlagerMutation } from '@app/redux-api/oppgaver/mutations/behandling'; -import { IOppgavebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; +import type { IOppgavebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; +import { Heading } from '@navikt/ds-react'; import { Part } from '../../part/part'; import { StyledBehandlingSection } from '../styled-components'; import { BehandlingSection } from './behandling-section'; diff --git a/frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/lovhjemmel-select.tsx b/frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/lovhjemmel-select.tsx index 1a36e811a..63d6ec85b 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/lovhjemmel-select.tsx +++ b/frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/lovhjemmel-select.tsx @@ -1,13 +1,13 @@ +import { GroupedFilterList, type OptionGroup } from '@app/components/filter-dropdown/grouped-filter-list'; +import { InputError } from '@app/components/input-error/input-error'; +import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; +import { useLovkildeToRegistreringshjemmelForYtelse } from '@app/hooks/use-kodeverk-value'; +import { useOnClickOutside } from '@app/hooks/use-on-click-outside'; import { MagnifyingGlassIcon } from '@navikt/aksel-icons'; import { Button } from '@navikt/ds-react'; import { skipToken } from '@reduxjs/toolkit/query'; import { useMemo, useRef, useState } from 'react'; import { styled } from 'styled-components'; -import { GroupedFilterList, OptionGroup } from '@app/components/filter-dropdown/grouped-filter-list'; -import { InputError } from '@app/components/input-error/input-error'; -import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; -import { useLovkildeToRegistreringshjemmelForYtelse } from '@app/hooks/use-kodeverk-value'; -import { useOnClickOutside } from '@app/hooks/use-on-click-outside'; import { StyledLovhjemmelSelect } from './styled-components'; type Direction = 'down' | 'right'; diff --git a/frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/lovhjemmel.tsx b/frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/lovhjemmel.tsx index d6e11e520..c0a3015b4 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/lovhjemmel.tsx +++ b/frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/lovhjemmel.tsx @@ -1,9 +1,9 @@ -import { HelpText, Label } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useCanEdit } from '@app/hooks/use-can-edit'; import { useValidationError } from '@app/hooks/use-validation-error'; import { useUpdateRegistreringshjemlerMutation } from '@app/redux-api/oppgaver/mutations/set-registreringshjemler'; +import { HelpText, Label } from '@navikt/ds-react'; +import { styled } from 'styled-components'; import { LovhjemmelSelect } from './lovhjemmel-select'; import { SelectedHjemlerList } from './selected-hjemler-list'; @@ -50,6 +50,6 @@ export const Lovhjemmel = () => { const StyledHeaderHelpTextWrapper = styled.div` display: flex; align-items: center; - gap: 8px; - margin-bottom: 8px; + gap: var(--a-spacing-2); + margin-bottom: var(--a-spacing-2); `; diff --git a/frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/selected-hjemler-list.tsx b/frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/selected-hjemler-list.tsx index 3b5065c35..3a26994a6 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/selected-hjemler-list.tsx +++ b/frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/selected-hjemler-list.tsx @@ -1,9 +1,9 @@ +import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; +import { useAllLovkildeToRegistreringshjemmelForYtelse } from '@app/hooks/use-kodeverk-value'; +import type { ILovKildeToRegistreringshjemmel } from '@app/types/kodeverk'; import { Loader } from '@navikt/ds-react'; import { skipToken } from '@reduxjs/toolkit/query'; import { useMemo } from 'react'; -import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; -import { useAllLovkildeToRegistreringshjemmelForYtelse } from '@app/hooks/use-kodeverk-value'; -import { ILovKildeToRegistreringshjemmel } from '@app/types/kodeverk'; import { StyledListItem, StyledNoneSelected, diff --git a/frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/styled-components.ts b/frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/styled-components.ts index 22a638270..894bddcd8 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/styled-components.ts +++ b/frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/styled-components.ts @@ -5,26 +5,26 @@ export const StyledLovhjemmelSelect = styled.div` `; export const StyledSelectedHjemler = styled.div` - margin-top: 10px; - padding-top: 10px; - padding-bottom: 10px; + margin-top: var(--a-spacing-2); + padding-top: var(--a-spacing-2); + padding-bottom: var(--a-spacing-2); padding-left: 1em; - border-left: 2px solid #ccc; + border-left: var(--a-spacing-05) solid var(--a-border-divider); `; export const StyledNoneSelected = styled.p` - color: #a0a0a0; + color: var(--a-text-subtle); margin: 0; `; export const StyledSelectedList = styled.ul` list-style: none; - padding-left: 10px; + padding-left: var(--a-spacing-2); margin: 0; `; export const StyledListItem = styled.li` - margin-bottom: 0.5em; + margin-bottom: var(--a-spacing-2); &:last-child { margin-bottom: 0; @@ -32,14 +32,14 @@ export const StyledListItem = styled.li` `; export const StyledSelectedSectionHeader = styled.h3` - font-size: 16px; + font-size: 1rem; font-weight: bold; margin-top: 0; - margin-bottom: 0.5em; + margin-bottom: var(--a-spacing-2); `; export const StyledSelectedSection = styled.div` - padding-top: 1em; + padding-top: var(--a-spacing-1); &:first-of-type { padding-top: 0; diff --git a/frontend/src/components/behandling/behandlingsdetaljer/previous-saksbehandler.tsx b/frontend/src/components/behandling/behandlingsdetaljer/previous-saksbehandler.tsx index f9ae8086e..e3aacfb38 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/previous-saksbehandler.tsx +++ b/frontend/src/components/behandling/behandlingsdetaljer/previous-saksbehandler.tsx @@ -1,7 +1,7 @@ -import { Alert } from '@navikt/ds-react'; import { formatEmployeeNameAndId } from '@app/domain/employee-name'; -import { INavEmployee } from '@app/types/bruker'; +import type { INavEmployee } from '@app/types/bruker'; import { SaksTypeEnum } from '@app/types/kodeverk'; +import { Alert } from '@navikt/ds-react'; interface Props { previousSaksbehandler: INavEmployee | null; diff --git a/frontend/src/components/behandling/behandlingsdetaljer/read-only-date.tsx b/frontend/src/components/behandling/behandlingsdetaljer/read-only-date.tsx index b83fcfc41..4b6e1ece3 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/read-only-date.tsx +++ b/frontend/src/components/behandling/behandlingsdetaljer/read-only-date.tsx @@ -1,6 +1,6 @@ -import { Label } from '@navikt/ds-react'; import { DateContainer } from '@app/components/behandling/styled-components'; import { isoDateToPretty } from '@app/domain/date'; +import { Label } from '@navikt/ds-react'; interface Props { date: string | null; diff --git a/frontend/src/components/behandling/behandlingsdetaljer/trygderettsankebehandlingsdetaljer.tsx b/frontend/src/components/behandling/behandlingsdetaljer/trygderettsankebehandlingsdetaljer.tsx index c2123f199..efbcc37f8 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/trygderettsankebehandlingsdetaljer.tsx +++ b/frontend/src/components/behandling/behandlingsdetaljer/trygderettsankebehandlingsdetaljer.tsx @@ -1,10 +1,10 @@ -import { Heading } from '@navikt/ds-react'; import { GosysBeskrivelse } from '@app/components/behandling/behandlingsdetaljer/gosys/beskrivelse'; import { PreviousSaksbehandler } from '@app/components/behandling/behandlingsdetaljer/previous-saksbehandler'; import { Saksnummer } from '@app/components/behandling/behandlingsdetaljer/saksnummer'; import { useUpdateFullmektigMutation } from '@app/redux-api/oppgaver/mutations/behandling'; import { SaksTypeEnum } from '@app/types/kodeverk'; -import { ITrygderettsankebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; +import type { ITrygderettsankebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; +import { Heading } from '@navikt/ds-react'; import { Part } from '../../part/part'; import { Type } from '../../type/type'; import { StyledBehandlingSection } from '../styled-components'; diff --git a/frontend/src/components/behandling/behandlingsdetaljer/utfall-resultat.tsx b/frontend/src/components/behandling/behandlingsdetaljer/utfall-resultat.tsx index 39db9f1e4..2a7c62368 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/utfall-resultat.tsx +++ b/frontend/src/components/behandling/behandlingsdetaljer/utfall-resultat.tsx @@ -1,5 +1,3 @@ -import { HelpText, Label, Select, Tag } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { isUtfall } from '@app/functions/is-utfall'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useCanEdit } from '@app/hooks/use-can-edit'; @@ -8,7 +6,9 @@ import { useUtfall } from '@app/hooks/use-utfall'; import { useUtfallNameOrLoading } from '@app/hooks/use-utfall-name'; import { useValidationError } from '@app/hooks/use-validation-error'; import { useUpdateExtraUtfallMutation, useUpdateUtfallMutation } from '@app/redux-api/oppgaver/mutations/set-utfall'; -import { UtfallEnum } from '@app/types/kodeverk'; +import type { UtfallEnum } from '@app/types/kodeverk'; +import { HelpText, Label, Select, Tag } from '@navikt/ds-react'; +import { styled } from 'styled-components'; interface UtfallResultatProps { utfall: UtfallEnum | null; @@ -64,7 +64,7 @@ const EditUtfallResultat = ({ utfall, oppgaveId }: UtfallResultatProps) => { if (isUtfall(value)) { updateUtfall({ oppgaveId, utfallId: value }); - if (oppgave !== undefined && oppgave.resultat.extraUtfallIdSet.includes(value)) { + if (oppgave?.resultat.extraUtfallIdSet.includes(value)) { updateEkstraUtfall({ oppgaveId, extraUtfallIdSet: oppgave.resultat.extraUtfallIdSet.filter((id) => id !== value), @@ -109,13 +109,13 @@ const EditUtfallResultat = ({ utfall, oppgaveId }: UtfallResultatProps) => { const Container = styled.div` display: flex; flex-direction: column; - gap: 8px; - margin-bottom: 16px; + gap: var(--a-spacing-2); + margin-bottom: var(--a-spacing-4); align-items: flex-start; `; const HelpTextWrapper = styled.div` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/behandling/behandlingsdetaljer/ytelse.tsx b/frontend/src/components/behandling/behandlingsdetaljer/ytelse.tsx index ab26442df..811b07f12 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/ytelse.tsx +++ b/frontend/src/components/behandling/behandlingsdetaljer/ytelse.tsx @@ -1,5 +1,5 @@ -import { Skeleton, Tag } from '@navikt/ds-react'; import { useFullYtelseNameFromId } from '@app/hooks/use-kodeverk-ids'; +import { Skeleton, Tag } from '@navikt/ds-react'; interface Props { ytelseId: string; diff --git a/frontend/src/components/behandling/behandlingsdialog/behandlingsdialog.tsx b/frontend/src/components/behandling/behandlingsdialog/behandlingsdialog.tsx index f7ee5d6d4..9ed284525 100644 --- a/frontend/src/components/behandling/behandlingsdialog/behandlingsdialog.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/behandlingsdialog.tsx @@ -1,7 +1,7 @@ -import { Heading } from '@navikt/ds-react'; import { EventHistory } from '@app/components/behandling/behandlingsdialog/history/history'; import { Rol } from '@app/components/behandling/behandlingsdialog/rol/rol'; import { Saksbehandler } from '@app/components/behandling/behandlingsdialog/saksbehandler'; +import { Heading } from '@navikt/ds-react'; import { StyledBehandlingSection } from '../styled-components'; import { Medunderskriver } from './medunderskriver/medunderskriver'; import { Messages } from './messages/messages'; diff --git a/frontend/src/components/behandling/behandlingsdialog/history/common.tsx b/frontend/src/components/behandling/behandlingsdialog/history/common.tsx index b1de912eb..76ba3d32c 100644 --- a/frontend/src/components/behandling/behandlingsdialog/history/common.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/history/common.tsx @@ -1,8 +1,8 @@ -import { styled } from 'styled-components'; import { formatEmployeeNameAndIdFallback } from '@app/domain/employee-name'; import { formatIdNumber } from '@app/functions/format-id'; -import { INavEmployee } from '@app/types/bruker'; -import { HistoryEventTypes, IHistory, IPart } from '@app/types/oppgavebehandling/response'; +import type { INavEmployee } from '@app/types/bruker'; +import { HistoryEventTypes, type IHistory, type IPart } from '@app/types/oppgavebehandling/response'; +import { styled } from 'styled-components'; type KeySource = Pick; @@ -30,8 +30,8 @@ export const Reason = styled.p` margin: 0; padding: 0; font-style: italic; - padding-left: 4px; - border-left: 4px solid var(--a-border-subtle); + padding-left: var(--a-spacing-1); + border-left: var(--a-spacing-1) solid var(--a-border-subtle); `; export const HISTORY_COLORS: Record = { diff --git a/frontend/src/components/behandling/behandlingsdialog/history/event.tsx b/frontend/src/components/behandling/behandlingsdialog/history/event.tsx index a4c1ffc11..b79dcc6b3 100644 --- a/frontend/src/components/behandling/behandlingsdialog/history/event.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/history/event.tsx @@ -1,7 +1,7 @@ -import { styled } from 'styled-components'; import { HISTORY_COLORS } from '@app/components/behandling/behandlingsdialog/history/common'; import { isoDateTimeToPretty } from '@app/domain/date'; -import { HistoryEventTypes } from '@app/types/oppgavebehandling/response'; +import type { HistoryEventTypes } from '@app/types/oppgavebehandling/response'; +import { styled } from 'styled-components'; interface Props { type: HistoryEventTypes; @@ -36,7 +36,7 @@ const Container = styled.li<{ $accent: string }>` border-width: 1px; border-style: solid; border-color: ${({ $accent }) => `var(${$accent})`}; - padding-bottom: 8px; + padding-bottom: var(--a-spacing-2); padding-right: 0; padding-left: 3px; overflow: hidden; @@ -48,7 +48,7 @@ const Container = styled.li<{ $accent: string }>` left: -1px; top: -1px; bottom: -1px; - width: 4px; + width: var(--a-spacing-1); background-color: ${({ $accent }) => `var(${$accent})`}; border-top-left-radius: var(--a-border-radius-medium); border-bottom-left-radius: var(--a-border-radius-medium); @@ -59,7 +59,7 @@ const Header = styled.div` display: flex; justify-content: space-between; align-items: flex-start; - margin-bottom: 8px; + margin-bottom: var(--a-spacing-2); `; const Time = styled.time` @@ -74,21 +74,21 @@ const Time = styled.time` const ContentContainer = styled.div` display: flex; flex-direction: column; - gap: 4px; - padding-left: 8px; - padding-right: 8px; + gap: var(--a-spacing-1); + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); `; const Category = styled.span` display: flex; flex-direction: row; align-items: center; - gap: 4px; - padding-right: 8px; + gap: var(--a-spacing-1); + padding-right: var(--a-spacing-2); padding-top: 0; padding-left: 0; padding-bottom: 1px; font-weight: normal; - font-size: 16px; + font-size: var(--a-spacing-4); border-bottom-right-radius: var(--a-border-radius-medium); `; diff --git a/frontend/src/components/behandling/behandlingsdialog/history/feilregistrert.tsx b/frontend/src/components/behandling/behandlingsdialog/history/feilregistrert.tsx index 2e7d10ecf..a46b081f9 100644 --- a/frontend/src/components/behandling/behandlingsdialog/history/feilregistrert.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/history/feilregistrert.tsx @@ -1,7 +1,7 @@ +import { HistoryEventTypes, type IFeilregistrertEvent } from '@app/types/oppgavebehandling/response'; import { XMarkIcon } from '@navikt/aksel-icons'; import { Label } from '@navikt/ds-react'; import { useId } from 'react'; -import { HistoryEventTypes, IFeilregistrertEvent } from '@app/types/oppgavebehandling/response'; import { Line, Reason, employeeName, toKey } from './common'; import { HistoryEvent } from './event'; diff --git a/frontend/src/components/behandling/behandlingsdialog/history/ferdigstilt.tsx b/frontend/src/components/behandling/behandlingsdialog/history/ferdigstilt.tsx index 807c7b558..62564e7f9 100644 --- a/frontend/src/components/behandling/behandlingsdialog/history/ferdigstilt.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/history/ferdigstilt.tsx @@ -1,5 +1,5 @@ +import { HistoryEventTypes, type IFerdigstiltEvent } from '@app/types/oppgavebehandling/response'; import { CheckmarkIcon } from '@navikt/aksel-icons'; -import { HistoryEventTypes, IFerdigstiltEvent } from '@app/types/oppgavebehandling/response'; import { Line, employeeName, toKey } from './common'; import { HistoryEvent } from './event'; diff --git a/frontend/src/components/behandling/behandlingsdialog/history/filter.tsx b/frontend/src/components/behandling/behandlingsdialog/history/filter.tsx index 1d99b1ab7..fd559e81e 100644 --- a/frontend/src/components/behandling/behandlingsdialog/history/filter.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/history/filter.tsx @@ -1,7 +1,7 @@ +import { pushEvent } from '@app/observability'; +import { HistoryEventTypes, type IHistoryResponse } from '@app/types/oppgavebehandling/response'; import { Select } from '@navikt/ds-react'; import { useMemo } from 'react'; -import { pushEvent } from '@app/observability'; -import { HistoryEventTypes, IHistoryResponse } from '@app/types/oppgavebehandling/response'; export const ALL = 'ALL'; diff --git a/frontend/src/components/behandling/behandlingsdialog/history/fullmektig.tsx b/frontend/src/components/behandling/behandlingsdialog/history/fullmektig.tsx index eb74e44de..68a6998a1 100644 --- a/frontend/src/components/behandling/behandlingsdialog/history/fullmektig.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/history/fullmektig.tsx @@ -1,6 +1,6 @@ +import type { INavEmployee } from '@app/types/bruker'; +import { HistoryEventTypes, type IFullmektigEvent, type IPart } from '@app/types/oppgavebehandling/response'; import { ArrowRightLeftIcon, PlusIcon, XMarkIcon } from '@navikt/aksel-icons'; -import { INavEmployee } from '@app/types/bruker'; -import { HistoryEventTypes, IFullmektigEvent, IPart } from '@app/types/oppgavebehandling/response'; import { Line, employeeName, partName, toKey } from './common'; import { HistoryEvent } from './event'; @@ -9,7 +9,7 @@ export const getFullmektig = (e: IFullmektigEvent) => { const { actor, event, previous, timestamp } = e; if (previous.event.part === null && event.part !== null) { - return ; + return ; } if (previous.event.part !== null && event.part === null) { @@ -31,7 +31,7 @@ interface SetProps { timestamp: string; } -const Set = ({ actor, part, timestamp }: SetProps) => ( +const Initialize = ({ actor, part, timestamp }: SetProps) => ( {employeeName(actor)} satt fullmektig til {partName(part)}. Ingen tidligere fullmektig. diff --git a/frontend/src/components/behandling/behandlingsdialog/history/history-warning.tsx b/frontend/src/components/behandling/behandlingsdialog/history/history-warning.tsx index 712b5df88..2aa91d388 100644 --- a/frontend/src/components/behandling/behandlingsdialog/history/history-warning.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/history/history-warning.tsx @@ -1,7 +1,7 @@ -import { Alert } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { isoDateTimeToPretty } from '@app/domain/date'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; +import { Alert } from '@navikt/ds-react'; +import { styled } from 'styled-components'; const START_DATE = '2023-12-08T15:30:00.00000'; diff --git a/frontend/src/components/behandling/behandlingsdialog/history/history.tsx b/frontend/src/components/behandling/behandlingsdialog/history/history.tsx index f1064dac7..26a500639 100644 --- a/frontend/src/components/behandling/behandlingsdialog/history/history.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/history/history.tsx @@ -1,6 +1,3 @@ -import { Heading, Select } from '@navikt/ds-react'; -import { useMemo, useState } from 'react'; -import { styled } from 'styled-components'; import { ALL, Filter } from '@app/components/behandling/behandlingsdialog/history/filter'; import { getFullmektig } from '@app/components/behandling/behandlingsdialog/history/fullmektig'; import { MissingHistoryWarning } from '@app/components/behandling/behandlingsdialog/history/history-warning'; @@ -12,7 +9,10 @@ import { getTildelingEvent } from '@app/components/behandling/behandlingsdialog/ import { getVarsletBehandlingstidEvent } from '@app/components/behandling/behandlingsdialog/history/varslet-behandlingstid'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { useGetHistoryQuery } from '@app/redux-api/oppgaver/queries/history'; -import { HistoryEventTypes, IHistory, IHistoryResponse } from '@app/types/oppgavebehandling/response'; +import { HistoryEventTypes, type IHistory, type IHistoryResponse } from '@app/types/oppgavebehandling/response'; +import { Heading, Select } from '@navikt/ds-react'; +import { useMemo, useState } from 'react'; +import { styled } from 'styled-components'; import { getFeilregistrertEvent } from './feilregistrert'; import { getFerdigstiltEvent } from './ferdigstilt'; @@ -170,7 +170,7 @@ const toNodes = (events: T[], toNode: ToNodeFn): NodesCat const Container = styled.section` display: flex; flex-direction: column; - row-gap: 8px; + row-gap: var(--a-spacing-2); `; const List = styled.ul` @@ -179,7 +179,7 @@ const List = styled.ul` padding: 0; display: flex; flex-direction: column; - row-gap: 8px; + row-gap: var(--a-spacing-2); `; const EmptyText = styled.span` diff --git a/frontend/src/components/behandling/behandlingsdialog/history/klager.tsx b/frontend/src/components/behandling/behandlingsdialog/history/klager.tsx index 61ed24bca..f38d728d9 100644 --- a/frontend/src/components/behandling/behandlingsdialog/history/klager.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/history/klager.tsx @@ -1,8 +1,8 @@ -import { ArrowRightLeftIcon, PlusIcon, XMarkOctagonIcon } from '@navikt/aksel-icons'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; -import { INavEmployee } from '@app/types/bruker'; +import type { INavEmployee } from '@app/types/bruker'; import { SaksTypeEnum } from '@app/types/kodeverk'; -import { HistoryEventTypes, IKlagerEvent, IPart } from '@app/types/oppgavebehandling/response'; +import { HistoryEventTypes, type IKlagerEvent, type IPart } from '@app/types/oppgavebehandling/response'; +import { ArrowRightLeftIcon, PlusIcon, XMarkOctagonIcon } from '@navikt/aksel-icons'; import { Line, employeeName, partName, toKey } from './common'; import { HistoryEvent } from './event'; @@ -11,7 +11,7 @@ export const getKlager = (e: IKlagerEvent) => { const { actor, event, previous, timestamp } = e; if (previous.event.part === null && event.part !== null) { - return ; + return ; } if (previous.event.part !== null && event.part === null) { @@ -33,7 +33,7 @@ interface SetProps { timestamp: string; } -const Set = ({ actor, part, timestamp }: SetProps) => { +const Initialize = ({ actor, part, timestamp }: SetProps) => { const tag = useTag(); return ( diff --git a/frontend/src/components/behandling/behandlingsdialog/history/medunderskriver.tsx b/frontend/src/components/behandling/behandlingsdialog/history/medunderskriver.tsx index 2f860ea9c..aade41473 100644 --- a/frontend/src/components/behandling/behandlingsdialog/history/medunderskriver.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/history/medunderskriver.tsx @@ -1,3 +1,8 @@ +import { Line, SELF, employeeName, toKey } from '@app/components/behandling/behandlingsdialog/history/common'; +import { HistoryEvent } from '@app/components/behandling/behandlingsdialog/history/event'; +import type { INavEmployee } from '@app/types/bruker'; +import { FlowState } from '@app/types/oppgave-common'; +import { HistoryEventTypes, type IMedunderskriverEvent } from '@app/types/oppgavebehandling/response'; /* eslint-disable max-lines */ import { ArrowRedoIcon, @@ -7,11 +12,6 @@ import { PaperplaneIcon, XMarkOctagonIcon, } from '@navikt/aksel-icons'; -import { Line, SELF, employeeName, toKey } from '@app/components/behandling/behandlingsdialog/history/common'; -import { HistoryEvent } from '@app/components/behandling/behandlingsdialog/history/event'; -import { INavEmployee } from '@app/types/bruker'; -import { FlowState } from '@app/types/oppgave-common'; -import { HistoryEventTypes, IMedunderskriverEvent } from '@app/types/oppgavebehandling/response'; export const getMedunderskriverEvent = (e: IMedunderskriverEvent) => { const key = toKey(e); diff --git a/frontend/src/components/behandling/behandlingsdialog/history/rol.tsx b/frontend/src/components/behandling/behandlingsdialog/history/rol.tsx index 1a6285bfa..b5b4122ed 100644 --- a/frontend/src/components/behandling/behandlingsdialog/history/rol.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/history/rol.tsx @@ -1,3 +1,8 @@ +import { Line, SELF, employeeName, toKey } from '@app/components/behandling/behandlingsdialog/history/common'; +import { HistoryEvent } from '@app/components/behandling/behandlingsdialog/history/event'; +import type { INavEmployee } from '@app/types/bruker'; +import { FlowState } from '@app/types/oppgave-common'; +import { HistoryEventTypes, type IRolEvent } from '@app/types/oppgavebehandling/response'; import { ArrowRedoIcon, ArrowRightLeftIcon, @@ -6,11 +11,6 @@ import { PaperplaneIcon, PlusIcon, } from '@navikt/aksel-icons'; -import { Line, SELF, employeeName, toKey } from '@app/components/behandling/behandlingsdialog/history/common'; -import { HistoryEvent } from '@app/components/behandling/behandlingsdialog/history/event'; -import { INavEmployee } from '@app/types/bruker'; -import { FlowState } from '@app/types/oppgave-common'; -import { HistoryEventTypes, IRolEvent } from '@app/types/oppgavebehandling/response'; export const getROLEvent = (e: IRolEvent) => { const key = toKey(e); diff --git a/frontend/src/components/behandling/behandlingsdialog/history/satt-paa-vent.tsx b/frontend/src/components/behandling/behandlingsdialog/history/satt-paa-vent.tsx index 938995327..fd53a95ad 100644 --- a/frontend/src/components/behandling/behandlingsdialog/history/satt-paa-vent.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/history/satt-paa-vent.tsx @@ -1,10 +1,14 @@ +import { isoDateToPretty } from '@app/domain/date'; +import type { INavEmployee } from '@app/types/bruker'; +import { + HistoryEventTypes, + type ISattPaaVentEvent, + type SattPaaVentEvent, +} from '@app/types/oppgavebehandling/response'; import { PauseIcon, PlayIcon } from '@navikt/aksel-icons'; import { Label } from '@navikt/ds-react'; import { useId } from 'react'; import { styled } from 'styled-components'; -import { isoDateToPretty } from '@app/domain/date'; -import { INavEmployee } from '@app/types/bruker'; -import { HistoryEventTypes, ISattPaaVentEvent, SattPaaVentEvent } from '@app/types/oppgavebehandling/response'; import { Line, Reason, employeeName, toKey } from './common'; import { HistoryEvent } from './event'; diff --git a/frontend/src/components/behandling/behandlingsdialog/history/tildeling.tsx b/frontend/src/components/behandling/behandlingsdialog/history/tildeling.tsx index cc8e33a8d..f0fec3533 100644 --- a/frontend/src/components/behandling/behandlingsdialog/history/tildeling.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/history/tildeling.tsx @@ -1,14 +1,14 @@ +import { Line, QUEUE, employeeName, toKey } from '@app/components/behandling/behandlingsdialog/history/common'; +import { HistoryEvent } from '@app/components/behandling/behandlingsdialog/history/event'; +import { useInnsendingshjemlerMap } from '@app/simple-api-state/use-kodeverk'; +import type { INavEmployee } from '@app/types/bruker'; +import { HistoryEventTypes, type ITildelingEvent } from '@app/types/oppgavebehandling/response'; +import { FradelReason } from '@app/types/oppgaver'; /* eslint-disable max-lines */ import { ArrowUndoIcon, PlusIcon } from '@navikt/aksel-icons'; import { Label, Tag } from '@navikt/ds-react'; import { useId } from 'react'; import { styled } from 'styled-components'; -import { Line, QUEUE, employeeName, toKey } from '@app/components/behandling/behandlingsdialog/history/common'; -import { HistoryEvent } from '@app/components/behandling/behandlingsdialog/history/event'; -import { useInnsendingshjemlerMap } from '@app/simple-api-state/use-kodeverk'; -import { INavEmployee } from '@app/types/bruker'; -import { HistoryEventTypes, ITildelingEvent } from '@app/types/oppgavebehandling/response'; -import { FradelReason } from '@app/types/oppgaver'; export const getTildelingEvent = (e: ITildelingEvent) => { const key = toKey(e); @@ -24,7 +24,7 @@ export const getTildelingEvent = (e: ITildelingEvent) => { } const toQueue = saksbehandler === null; - const toOther = !toSelf && !toQueue; + const toOther = !(toSelf || toQueue); if (toOther) { return ; @@ -34,7 +34,7 @@ export const getTildelingEvent = (e: ITildelingEvent) => { const { fradelingReasonId, hjemmelIdList } = event; const fromSelf = previousSaksbehandler === actor; const fromQueue = previousSaksbehandler === null; - const fromOther = !fromSelf && !fromQueue; + const fromOther = !(fromSelf || fromQueue); if (fromSelf) { return ( @@ -246,5 +246,5 @@ const getReason = ( const FlexRowContainer = styled.div` display: flex; align-items: center; - gap: 4px; + gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/behandling/behandlingsdialog/history/varslet-behandlingstid.tsx b/frontend/src/components/behandling/behandlingsdialog/history/varslet-behandlingstid.tsx index 528594cb7..9e8581df4 100644 --- a/frontend/src/components/behandling/behandlingsdialog/history/varslet-behandlingstid.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/history/varslet-behandlingstid.tsx @@ -1,10 +1,10 @@ +import { isoDateToPretty } from '@app/domain/date'; +import { formatIdNumber } from '@app/functions/format-id'; +import { HistoryEventTypes, type IPart, type IVarsletBehandlingstidEvent } from '@app/types/oppgavebehandling/response'; +import { BEHANDLINGSTID_UNIT_TYPE_NAMES, type BehandlingstidUnitType } from '@app/types/svarbrev'; import { ClockIcon } from '@navikt/aksel-icons'; import { BodyShort } from '@navikt/ds-react'; import { styled } from 'styled-components'; -import { isoDateToPretty } from '@app/domain/date'; -import { formatIdNumber } from '@app/functions/format-id'; -import { HistoryEventTypes, IPart, IVarsletBehandlingstidEvent } from '@app/types/oppgavebehandling/response'; -import { BEHANDLINGSTID_UNIT_TYPE_NAMES, BehandlingstidUnitType } from '@app/types/svarbrev'; import { Line, employeeName, toKey } from './common'; import { HistoryEvent } from './event'; @@ -126,5 +126,5 @@ const StyledListItem = styled.li` const StyledMottakere = styled.section` display: flex; flex-direction: column; - row-gap: 4px; + row-gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/behandling/behandlingsdialog/medunderskriver/medunderskriver.tsx b/frontend/src/components/behandling/behandlingsdialog/medunderskriver/medunderskriver.tsx index 03bbe0927..d2b78172d 100644 --- a/frontend/src/components/behandling/behandlingsdialog/medunderskriver/medunderskriver.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/medunderskriver/medunderskriver.tsx @@ -1,11 +1,11 @@ -import { skipToken } from '@reduxjs/toolkit/query'; -import { styled } from 'styled-components'; import { SKELETON } from '@app/components/behandling/behandlingsdialog/medunderskriver/skeleton'; import { TakeFromSaksbehandler } from '@app/components/behandling/behandlingsdialog/medunderskriver/take-from-saksbehandler'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { useIsFeilregistrert } from '@app/hooks/use-is-feilregistrert'; import { useIsFullfoert } from '@app/hooks/use-is-fullfoert'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { styled } from 'styled-components'; import { MedunderskriverReadOnly } from './read-only'; import { SelectMedunderskriver } from './select-medunderskriver'; import { SendToMedunderskriver } from './send-to-medunderskriver'; @@ -58,6 +58,6 @@ export const Medunderskriver = () => { const Container = styled.section` display: flex; flex-direction: column; - gap: 8px; - margin-bottom: 16px; + gap: var(--a-spacing-2); + margin-bottom: var(--a-spacing-4); `; diff --git a/frontend/src/components/behandling/behandlingsdialog/medunderskriver/read-only.tsx b/frontend/src/components/behandling/behandlingsdialog/medunderskriver/read-only.tsx index d6c74eed4..23c925db5 100644 --- a/frontend/src/components/behandling/behandlingsdialog/medunderskriver/read-only.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/medunderskriver/read-only.tsx @@ -1,7 +1,7 @@ -import { BodyShort, Label } from '@navikt/ds-react'; import { formatEmployeeNameAndIdFallback } from '@app/domain/employee-name'; -import { SaksTypeEnum } from '@app/types/kodeverk'; -import { IMedunderskriverRol } from '@app/types/oppgave-common'; +import type { SaksTypeEnum } from '@app/types/kodeverk'; +import type { IMedunderskriverRol } from '@app/types/oppgave-common'; +import { BodyShort, Label } from '@navikt/ds-react'; import { getTitleCapitalized } from './get-title'; interface Props { diff --git a/frontend/src/components/behandling/behandlingsdialog/medunderskriver/select-medunderskriver.tsx b/frontend/src/components/behandling/behandlingsdialog/medunderskriver/select-medunderskriver.tsx index 13d396b62..9f64e6406 100644 --- a/frontend/src/components/behandling/behandlingsdialog/medunderskriver/select-medunderskriver.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/medunderskriver/select-medunderskriver.tsx @@ -1,4 +1,3 @@ -import { BodyShort, Select } from '@navikt/ds-react'; import { NONE } from '@app/components/behandling/behandlingsdialog/medunderskriver/constants'; import { MedunderskriverReadOnly } from '@app/components/behandling/behandlingsdialog/medunderskriver/read-only'; import { SELECT_SKELETON } from '@app/components/behandling/behandlingsdialog/medunderskriver/skeleton'; @@ -7,8 +6,9 @@ import { useHasRole } from '@app/hooks/use-has-role'; import { useIsSaksbehandler } from '@app/hooks/use-is-saksbehandler'; import { useGetPotentialMedunderskrivereQuery } from '@app/redux-api/oppgaver/queries/behandling/behandling'; import { Role } from '@app/types/bruker'; -import { SaksTypeEnum } from '@app/types/kodeverk'; -import { FlowState, IMedunderskriverRol } from '@app/types/oppgave-common'; +import type { SaksTypeEnum } from '@app/types/kodeverk'; +import { FlowState, type IMedunderskriverRol } from '@app/types/oppgave-common'; +import { BodyShort, Select } from '@navikt/ds-react'; import { getTitleCapitalized, getTitlePlural } from './get-title'; interface Props { diff --git a/frontend/src/components/behandling/behandlingsdialog/medunderskriver/send-to-medunderskriver.tsx b/frontend/src/components/behandling/behandlingsdialog/medunderskriver/send-to-medunderskriver.tsx index 7bba73235..b2b3c3f37 100644 --- a/frontend/src/components/behandling/behandlingsdialog/medunderskriver/send-to-medunderskriver.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/medunderskriver/send-to-medunderskriver.tsx @@ -1,10 +1,10 @@ -import { PaperplaneIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; import { useIsSaksbehandler } from '@app/hooks/use-is-saksbehandler'; import { useSetMedunderskriverMutation } from '@app/redux-api/oppgaver/mutations/set-medunderskriver'; import { useSetMedunderskriverFlowStateMutation } from '@app/redux-api/oppgaver/mutations/set-medunderskriver-flowstate'; -import { SaksTypeEnum } from '@app/types/kodeverk'; -import { FlowState, IMedunderskriverRol } from '@app/types/oppgave-common'; +import type { SaksTypeEnum } from '@app/types/kodeverk'; +import { FlowState, type IMedunderskriverRol } from '@app/types/oppgave-common'; +import { PaperplaneIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; import { getTitleLowercase } from './get-title'; interface Props { diff --git a/frontend/src/components/behandling/behandlingsdialog/medunderskriver/send-to-saksbehandler.tsx b/frontend/src/components/behandling/behandlingsdialog/medunderskriver/send-to-saksbehandler.tsx index 72b6ecffb..ba1a6020c 100644 --- a/frontend/src/components/behandling/behandlingsdialog/medunderskriver/send-to-saksbehandler.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/medunderskriver/send-to-saksbehandler.tsx @@ -1,8 +1,8 @@ -import { PaperplaneIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; import { useIsMedunderskriver } from '@app/hooks/use-is-medunderskriver'; import { useSetMedunderskriverFlowStateMutation } from '@app/redux-api/oppgaver/mutations/set-medunderskriver-flowstate'; -import { FlowState, IMedunderskriverRol } from '@app/types/oppgave-common'; +import { FlowState, type IMedunderskriverRol } from '@app/types/oppgave-common'; +import { PaperplaneIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; interface Props { oppgaveId: string; diff --git a/frontend/src/components/behandling/behandlingsdialog/medunderskriver/state-text.tsx b/frontend/src/components/behandling/behandlingsdialog/medunderskriver/state-text.tsx index 5d979b081..53a994308 100644 --- a/frontend/src/components/behandling/behandlingsdialog/medunderskriver/state-text.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/medunderskriver/state-text.tsx @@ -1,7 +1,7 @@ -import { Alert } from '@navikt/ds-react'; import { useIsSaksbehandler } from '@app/hooks/use-is-saksbehandler'; -import { SaksTypeEnum } from '@app/types/kodeverk'; -import { FlowState, IMedunderskriverRol } from '@app/types/oppgave-common'; +import type { SaksTypeEnum } from '@app/types/kodeverk'; +import { FlowState, type IMedunderskriverRol } from '@app/types/oppgave-common'; +import { Alert } from '@navikt/ds-react'; import { getTitleLowercase } from './get-title'; interface Props { diff --git a/frontend/src/components/behandling/behandlingsdialog/medunderskriver/take-from-medunderskriver.tsx b/frontend/src/components/behandling/behandlingsdialog/medunderskriver/take-from-medunderskriver.tsx index 1ef7b5b61..551e408cf 100644 --- a/frontend/src/components/behandling/behandlingsdialog/medunderskriver/take-from-medunderskriver.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/medunderskriver/take-from-medunderskriver.tsx @@ -1,9 +1,9 @@ -import { ArrowUndoIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; import { useIsSaksbehandler } from '@app/hooks/use-is-saksbehandler'; import { useSetMedunderskriverFlowStateMutation } from '@app/redux-api/oppgaver/mutations/set-medunderskriver-flowstate'; -import { SaksTypeEnum } from '@app/types/kodeverk'; -import { FlowState, IMedunderskriverRol } from '@app/types/oppgave-common'; +import type { SaksTypeEnum } from '@app/types/kodeverk'; +import { FlowState, type IMedunderskriverRol } from '@app/types/oppgave-common'; +import { ArrowUndoIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; import { getTitleLowercase } from './get-title'; import { getFixedCacheKey } from './helpers'; diff --git a/frontend/src/components/behandling/behandlingsdialog/medunderskriver/take-from-saksbehandler.tsx b/frontend/src/components/behandling/behandlingsdialog/medunderskriver/take-from-saksbehandler.tsx index d20b55bb7..748b57cfd 100644 --- a/frontend/src/components/behandling/behandlingsdialog/medunderskriver/take-from-saksbehandler.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/medunderskriver/take-from-saksbehandler.tsx @@ -1,8 +1,8 @@ -import { ArrowRedoIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; import { useIsMedunderskriver } from '@app/hooks/use-is-medunderskriver'; import { useSetMedunderskriverFlowStateMutation } from '@app/redux-api/oppgaver/mutations/set-medunderskriver-flowstate'; -import { FlowState, IMedunderskriverRol } from '@app/types/oppgave-common'; +import { FlowState, type IMedunderskriverRol } from '@app/types/oppgave-common'; +import { ArrowRedoIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; import { getFixedCacheKey } from './helpers'; interface Props { diff --git a/frontend/src/components/behandling/behandlingsdialog/messages/messages.tsx b/frontend/src/components/behandling/behandlingsdialog/messages/messages.tsx index c8055807c..b1e939195 100644 --- a/frontend/src/components/behandling/behandlingsdialog/messages/messages.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/messages/messages.tsx @@ -1,11 +1,11 @@ -import { BodyShort, Heading } from '@navikt/ds-react'; import { SKELETON } from '@app/components/behandling/behandlingsdialog/messages/skeleton'; import { isoDateTimeToPretty } from '@app/domain/date'; import { formatEmployeeName } from '@app/domain/employee-name'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { useIsFullfoert } from '@app/hooks/use-is-fullfoert'; -import { IMessage, useGetMessagesQuery } from '@app/redux-api/messages'; +import { type IMessage, useGetMessagesQuery } from '@app/redux-api/messages'; +import { BodyShort, Heading } from '@navikt/ds-react'; import { StyledAuthor, StyledMessage, diff --git a/frontend/src/components/behandling/behandlingsdialog/messages/styled-components.ts b/frontend/src/components/behandling/behandlingsdialog/messages/styled-components.ts index 7c3a55c3e..ffeecf262 100644 --- a/frontend/src/components/behandling/behandlingsdialog/messages/styled-components.ts +++ b/frontend/src/components/behandling/behandlingsdialog/messages/styled-components.ts @@ -1,7 +1,7 @@ import { styled } from 'styled-components'; export const StyledMessagesContainer = styled.section` - padding-bottom: 16px; + padding-bottom: var(--a-spacing-4); `; export const StyledAuthor = styled.p` @@ -37,5 +37,5 @@ export const StyledWriteMessage = styled.div` export const StyleSendMessage = styled.div` align-self: flex-end; - margin-top: 8px; + margin-top: var(--a-spacing-2); `; diff --git a/frontend/src/components/behandling/behandlingsdialog/messages/write-message.tsx b/frontend/src/components/behandling/behandlingsdialog/messages/write-message.tsx index ee649beab..9c69c9cce 100644 --- a/frontend/src/components/behandling/behandlingsdialog/messages/write-message.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/messages/write-message.tsx @@ -1,11 +1,11 @@ -import { PaperplaneIcon } from '@navikt/aksel-icons'; -import { Button, Loader, Textarea } from '@navikt/ds-react'; -import { useContext, useEffect, useState } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { useIsFullfoert } from '@app/hooks/use-is-fullfoert'; import { useGetMySignatureQuery } from '@app/redux-api/bruker'; import { usePostMessageMutation } from '@app/redux-api/messages'; +import { PaperplaneIcon } from '@navikt/aksel-icons'; +import { Button, Loader, Textarea } from '@navikt/ds-react'; +import { useContext, useEffect, useState } from 'react'; import { StyleSendMessage, StyledWriteMessage } from './styled-components'; export const WriteMessage = () => { @@ -22,7 +22,7 @@ export const WriteMessage = () => { if (isSuccess) { setMessage(''); } - }, [isSuccess, setMessage]); + }, [isSuccess]); if (signatureIsLoading || typeof signature === 'undefined') { return ; diff --git a/frontend/src/components/behandling/behandlingsdialog/rol/read-only.tsx b/frontend/src/components/behandling/behandlingsdialog/rol/read-only.tsx index 9a7f6c5a8..8ed2b2729 100644 --- a/frontend/src/components/behandling/behandlingsdialog/rol/read-only.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/rol/read-only.tsx @@ -1,6 +1,6 @@ -import { BodyShort, Label } from '@navikt/ds-react'; import { formatEmployeeNameAndIdFallback } from '@app/domain/employee-name'; -import { IMedunderskriverRol } from '@app/types/oppgave-common'; +import type { IMedunderskriverRol } from '@app/types/oppgave-common'; +import { BodyShort, Label } from '@navikt/ds-react'; interface Props { rol: IMedunderskriverRol; diff --git a/frontend/src/components/behandling/behandlingsdialog/rol/rol.tsx b/frontend/src/components/behandling/behandlingsdialog/rol/rol.tsx index bf92819f9..35ba3157e 100644 --- a/frontend/src/components/behandling/behandlingsdialog/rol/rol.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/rol/rol.tsx @@ -1,4 +1,3 @@ -import { styled } from 'styled-components'; import { SelectRol } from '@app/components/behandling/behandlingsdialog/rol/select-rol'; import { SendToRol } from '@app/components/behandling/behandlingsdialog/rol/send-to-rol'; import { SendToSaksbehandler } from '@app/components/behandling/behandlingsdialog/rol/send-to-saksbehandler'; @@ -14,7 +13,8 @@ import { useIsRol } from '@app/hooks/use-is-rol'; import { useIsSaksbehandler } from '@app/hooks/use-is-saksbehandler'; import { Role } from '@app/types/bruker'; import { SaksTypeEnum } from '@app/types/kodeverk'; -import { IAnkebehandling, IKlagebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; +import type { IAnkebehandling, IKlagebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; +import { styled } from 'styled-components'; import { RolReadOnly } from './read-only'; export const Rol = () => { @@ -44,7 +44,7 @@ const RolInternal = ({ oppgave }: Props) => { const { rol } = oppgave; - const isReadOnly = isFinished || isFeilregistrert || (!isSaksbehandler && !isRol && !isKrol); + const isReadOnly = isFinished || isFeilregistrert || !(isSaksbehandler || isRol || isKrol); if (isReadOnly) { if (rol.employee === null) { @@ -73,6 +73,6 @@ const RolInternal = ({ oppgave }: Props) => { const Container = styled.section` display: flex; flex-direction: column; - gap: 8px; - margin-bottom: 16px; + gap: var(--a-spacing-2); + margin-bottom: var(--a-spacing-4); `; diff --git a/frontend/src/components/behandling/behandlingsdialog/rol/select-rol.tsx b/frontend/src/components/behandling/behandlingsdialog/rol/select-rol.tsx index 44ca7de18..71b271acc 100644 --- a/frontend/src/components/behandling/behandlingsdialog/rol/select-rol.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/rol/select-rol.tsx @@ -1,4 +1,3 @@ -import { Select } from '@navikt/ds-react'; import { NONE } from '@app/components/behandling/behandlingsdialog/rol/constants'; import { getFixedCacheKey } from '@app/components/behandling/behandlingsdialog/rol/helpers'; import { SELECT_SKELETON } from '@app/components/behandling/behandlingsdialog/rol/skeleton'; @@ -7,7 +6,8 @@ import { useIsRol } from '@app/hooks/use-is-rol'; import { useSetRolMutation } from '@app/redux-api/oppgaver/mutations/set-rol'; import { useGetPotentialRolQuery } from '@app/redux-api/oppgaver/queries/behandling/behandling'; import { Role } from '@app/types/bruker'; -import { FlowState, IMedunderskriverRol } from '@app/types/oppgave-common'; +import { FlowState, type IMedunderskriverRol } from '@app/types/oppgave-common'; +import { Select } from '@navikt/ds-react'; interface Props { oppgaveId: string; @@ -22,7 +22,7 @@ export const SelectRol = ({ oppgaveId, rol, isSaksbehandler }: Props) => { const isKrol = useHasRole(Role.KABAL_KROL); const onChange = (newValue: string) => { - const employee = newValue === NONE ? null : (potentialRol?.rols.find((r) => r.navIdent === newValue) ?? null); + const employee = newValue === NONE ? null : potentialRol?.rols.find((r) => r.navIdent === newValue) ?? null; setRol({ oppgaveId, employee }); }; diff --git a/frontend/src/components/behandling/behandlingsdialog/rol/send-to-rol.tsx b/frontend/src/components/behandling/behandlingsdialog/rol/send-to-rol.tsx index c81205810..c375e3b4c 100644 --- a/frontend/src/components/behandling/behandlingsdialog/rol/send-to-rol.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/rol/send-to-rol.tsx @@ -1,8 +1,8 @@ -import { PaperplaneIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; import { useSetRolMutation } from '@app/redux-api/oppgaver/mutations/set-rol'; import { useSetRolStateMutation } from '@app/redux-api/oppgaver/mutations/set-rol-flowstate'; -import { FlowState, IMedunderskriverRol } from '@app/types/oppgave-common'; +import { FlowState, type IMedunderskriverRol } from '@app/types/oppgave-common'; +import { PaperplaneIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; import { getFixedCacheKey } from './helpers'; interface Props { diff --git a/frontend/src/components/behandling/behandlingsdialog/rol/send-to-saksbehandler.tsx b/frontend/src/components/behandling/behandlingsdialog/rol/send-to-saksbehandler.tsx index 5134372ab..bdddb3ab4 100644 --- a/frontend/src/components/behandling/behandlingsdialog/rol/send-to-saksbehandler.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/rol/send-to-saksbehandler.tsx @@ -1,12 +1,12 @@ -import { PaperplaneIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; -import { useContext } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { getFixedCacheKey } from '@app/components/behandling/behandlingsdialog/rol/helpers'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useSetRolStateMutation } from '@app/redux-api/oppgaver/mutations/set-rol-flowstate'; import { SaksTypeEnum } from '@app/types/kodeverk'; import { FlowState } from '@app/types/oppgave-common'; +import { PaperplaneIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; +import { useContext } from 'react'; interface Props { oppgaveId: string; diff --git a/frontend/src/components/behandling/behandlingsdialog/rol/state-text.tsx b/frontend/src/components/behandling/behandlingsdialog/rol/state-text.tsx index 0a94a821d..41b87f45c 100644 --- a/frontend/src/components/behandling/behandlingsdialog/rol/state-text.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/rol/state-text.tsx @@ -1,5 +1,5 @@ +import { FlowState, type IMedunderskriverRol } from '@app/types/oppgave-common'; import { Alert } from '@navikt/ds-react'; -import { FlowState, IMedunderskriverRol } from '@app/types/oppgave-common'; interface Props { rol: IMedunderskriverRol; diff --git a/frontend/src/components/behandling/behandlingsdialog/rol/take-from-rol.tsx b/frontend/src/components/behandling/behandlingsdialog/rol/take-from-rol.tsx index a6f062c54..9681c736a 100644 --- a/frontend/src/components/behandling/behandlingsdialog/rol/take-from-rol.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/rol/take-from-rol.tsx @@ -1,7 +1,7 @@ +import { useSetRolStateMutation } from '@app/redux-api/oppgaver/mutations/set-rol-flowstate'; +import { FlowState, type IMedunderskriverRol } from '@app/types/oppgave-common'; import { ArrowUndoIcon } from '@navikt/aksel-icons'; import { Button } from '@navikt/ds-react'; -import { useSetRolStateMutation } from '@app/redux-api/oppgaver/mutations/set-rol-flowstate'; -import { FlowState, IMedunderskriverRol } from '@app/types/oppgave-common'; import { getFixedCacheKey } from './helpers'; interface Props { diff --git a/frontend/src/components/behandling/behandlingsdialog/rol/take-from-saksbehandler.tsx b/frontend/src/components/behandling/behandlingsdialog/rol/take-from-saksbehandler.tsx index 6e16ba5f9..5fd753791 100644 --- a/frontend/src/components/behandling/behandlingsdialog/rol/take-from-saksbehandler.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/rol/take-from-saksbehandler.tsx @@ -1,10 +1,10 @@ -import { ArrowRedoIcon } from '@navikt/aksel-icons'; -import { Button, ButtonProps } from '@navikt/ds-react'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useIsRol } from '@app/hooks/use-is-rol'; import { useSetRolStateMutation } from '@app/redux-api/oppgaver/mutations/set-rol-flowstate'; import { SaksTypeEnum } from '@app/types/kodeverk'; import { FlowState } from '@app/types/oppgave-common'; +import { ArrowRedoIcon } from '@navikt/aksel-icons'; +import { Button, type ButtonProps } from '@navikt/ds-react'; import { getFixedCacheKey } from './helpers'; interface Props { diff --git a/frontend/src/components/behandling/behandlingsdialog/saksbehandler.tsx b/frontend/src/components/behandling/behandlingsdialog/saksbehandler.tsx index 3fe5a630b..7c6fc9561 100644 --- a/frontend/src/components/behandling/behandlingsdialog/saksbehandler.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/saksbehandler.tsx @@ -1,5 +1,3 @@ -import { BodyShort, Label, Select, Skeleton } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { useTildel } from '@app/components/oppgavestyring/use-tildel'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useHasRole } from '@app/hooks/use-has-role'; @@ -8,7 +6,9 @@ import { useIsFullfoert } from '@app/hooks/use-is-fullfoert'; import { useIsSaksbehandler } from '@app/hooks/use-is-saksbehandler'; import { useGetPotentialSaksbehandlereQuery } from '@app/redux-api/oppgaver/queries/behandling/behandling'; import { Role } from '@app/types/bruker'; -import { IOppgavebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; +import type { IOppgavebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; +import { BodyShort, Label, Select, Skeleton } from '@navikt/ds-react'; +import { styled } from 'styled-components'; const ID = 'tildelt-saksbehandler'; @@ -23,7 +23,7 @@ export const Saksbehandler = () => { return null; } - const showSelect = !isFeilregistrert && !isFullfoert && (isSaksbehandler || hasOppgavestyringRole); + const showSelect = !(isFeilregistrert || isFullfoert) && (isSaksbehandler || hasOppgavestyringRole); const { saksbehandler } = oppgave; @@ -93,6 +93,6 @@ const SelectSaksbehandler = ({ oppgave: { saksbehandler, id, typeId, ytelseId } const Container = styled.section` display: flex; flex-direction: column; - gap: 8px; - margin-bottom: 16px; + gap: var(--a-spacing-2); + margin-bottom: var(--a-spacing-4); `; diff --git a/frontend/src/components/behandling/styled-components.ts b/frontend/src/components/behandling/styled-components.ts index b41d2ae1c..428d2b00c 100644 --- a/frontend/src/components/behandling/styled-components.ts +++ b/frontend/src/components/behandling/styled-components.ts @@ -6,18 +6,16 @@ export const StyledContainer = styled.div` white-space: normal; width: 750px; grid-column-gap: 1px; - background-color: #c9c9c9; flex-grow: 1; `; export const StyledBehandlingSection = styled.section` - background-color: white; - padding: 16px; + padding: var(--a-spacing-4); min-height: 100%; `; export const DateContainer = styled.section` display: flex; flex-direction: column; - margin-bottom: 16px; + margin-bottom: var(--a-spacing-4); `; diff --git a/frontend/src/components/common-table-components/age.tsx b/frontend/src/components/common-table-components/age.tsx index a64a5a6e2..306c7d537 100644 --- a/frontend/src/components/common-table-components/age.tsx +++ b/frontend/src/components/common-table-components/age.tsx @@ -1,14 +1,14 @@ -import { PencilIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; -import { differenceInDays, parseISO } from 'date-fns'; -import { useState } from 'react'; -import { styled } from 'styled-components'; import { CURRENT_YEAR_IN_CENTURY } from '@app/components/date-picker/constants'; import { DatePicker } from '@app/components/date-picker/date-picker'; import { useHasAnyOfRoles } from '@app/hooks/use-has-role'; import { useSetMottattKlageinstansMutation } from '@app/redux-api/oppgaver/mutations/behandling-dates'; import { Role } from '@app/types/bruker'; -import { IOppgave } from '@app/types/oppgaver'; +import type { IOppgave } from '@app/types/oppgaver'; +import { PencilIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; +import { differenceInDays, parseISO } from 'date-fns'; +import { useState } from 'react'; +import { styled } from 'styled-components'; export const Age = (oppgave: IOppgave) => { if (oppgave.isAvsluttetAvSaksbehandler) { @@ -106,7 +106,7 @@ const EditAge = ({ mottattDate, oppgaveId, closeCalendar, setUserAge }: EditAgeP const Container = styled.div` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; const StyledAge = styled.span` diff --git a/frontend/src/components/common-table-components/deadline.tsx b/frontend/src/components/common-table-components/deadline.tsx index 882e3d3e7..0177bc10b 100644 --- a/frontend/src/components/common-table-components/deadline.tsx +++ b/frontend/src/components/common-table-components/deadline.tsx @@ -1,14 +1,14 @@ -import { PencilIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; -import { addDays, addYears, isPast, parseISO } from 'date-fns'; -import { useEffect, useMemo, useState } from 'react'; -import { styled } from 'styled-components'; import { isoDateToPretty } from '@app/domain/date'; import { useHasAnyOfRoles } from '@app/hooks/use-has-role'; import { useSetFristMutation } from '@app/redux-api/oppgaver/mutations/behandling-dates'; import { Role } from '@app/types/bruker'; import { SaksTypeEnum } from '@app/types/kodeverk'; -import { IOppgave } from '@app/types/oppgaver'; +import type { IOppgave } from '@app/types/oppgaver'; +import { PencilIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; +import { addDays, addYears, isPast, parseISO } from 'date-fns'; +import { useEffect, useMemo, useState } from 'react'; +import { styled } from 'styled-components'; import { DatePicker } from '../date-picker/date-picker'; export const Deadline = (oppgave: IOppgave) => { @@ -136,5 +136,5 @@ const StyledDeadline = styled.time` const Container = styled.div` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/common-table-components/footer.tsx b/frontend/src/components/common-table-components/footer.tsx index b34879068..a5671899a 100644 --- a/frontend/src/components/common-table-components/footer.tsx +++ b/frontend/src/components/common-table-components/footer.tsx @@ -1,11 +1,11 @@ -import { ArrowsCirclepathIcon } from '@navikt/aksel-icons'; -import { Button, Pagination, Table } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { PageInfo } from '@app/components/common-table-components/page-info'; import { RowsPerPage } from '@app/components/rows-per-page'; -import { OppgaveTableRowsPerPage } from '@app/hooks/settings/use-setting'; +import type { OppgaveTableRowsPerPage } from '@app/hooks/settings/use-setting'; import { pushEvent } from '@app/observability'; import { StyledFooterContent } from '@app/styled-components/table'; +import { ArrowsCirclepathIcon } from '@navikt/aksel-icons'; +import { Button, Pagination, Table } from '@navikt/ds-react'; +import { styled } from 'styled-components'; interface Props { page: number; @@ -77,5 +77,5 @@ export const TableFooter = ({ const Left = styled.div` display: flex; align-items: center; - gap: 4px; + gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/common-table-components/fradeling-reason.tsx b/frontend/src/components/common-table-components/fradeling-reason.tsx index 2652f9d0c..0de6604d0 100644 --- a/frontend/src/components/common-table-components/fradeling-reason.tsx +++ b/frontend/src/components/common-table-components/fradeling-reason.tsx @@ -1,12 +1,12 @@ -import { InformationSquareIcon } from '@navikt/aksel-icons'; -import { Button, Loader, Popover } from '@navikt/ds-react'; -import { useContext, useRef, useState } from 'react'; -import { styled } from 'styled-components'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { isoDateTimeToPretty } from '@app/domain/date'; import { formatEmployeeNameAndIdFallback } from '@app/domain/employee-name'; import { useGetFradelingReasonQuery } from '@app/redux-api/oppgaver/queries/behandling/behandling'; import { FradelReason, FradelReasonText } from '@app/types/oppgaver'; +import { InformationSquareIcon } from '@navikt/aksel-icons'; +import { Button, Loader, Popover } from '@navikt/ds-react'; +import { useContext, useRef, useState } from 'react'; +import { styled } from 'styled-components'; interface Props { oppgaveId: string; diff --git a/frontend/src/components/common-table-components/hjemler.tsx b/frontend/src/components/common-table-components/hjemler.tsx index 7ce2d7747..99ede3346 100644 --- a/frontend/src/components/common-table-components/hjemler.tsx +++ b/frontend/src/components/common-table-components/hjemler.tsx @@ -1,7 +1,7 @@ -import { Tag } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { LoadingCellContent } from '@app/components/common-table-components/loading-cell-content'; import { useInnsendingshjemlerFromIds, useRegistreringshjemlerFromIds } from '@app/hooks/use-kodeverk-ids'; +import { Tag } from '@navikt/ds-react'; +import { styled } from 'styled-components'; interface Props { hjemmelIdList: string[]; @@ -28,8 +28,8 @@ const HjemmelNames = ({ hjemmelNames }: HjemmelNamesProps) => ) : ( - {hjemmelNames.map((hjemmelName, index) => ( - + {hjemmelNames.map((hjemmelName) => ( + {hjemmelName} ))} diff --git a/frontend/src/components/common-table-components/loading-cell-content.tsx b/frontend/src/components/common-table-components/loading-cell-content.tsx index a14b34f5a..f8811f9a5 100644 --- a/frontend/src/components/common-table-components/loading-cell-content.tsx +++ b/frontend/src/components/common-table-components/loading-cell-content.tsx @@ -1,4 +1,4 @@ -import { Skeleton, SkeletonProps } from '@navikt/ds-react'; +import { Skeleton, type SkeletonProps } from '@navikt/ds-react'; import { styled } from 'styled-components'; export const LoadingCellContent = (props: SkeletonProps) => ( @@ -12,6 +12,6 @@ const Container = styled.div` align-items: center; justify-content: center; height: 34px; - padding: 4px; + padding: var(--a-spacing-1); width: 100%; `; diff --git a/frontend/src/components/common-table-components/loading-row.tsx b/frontend/src/components/common-table-components/loading-row.tsx index 365776851..cf5f0d652 100644 --- a/frontend/src/components/common-table-components/loading-row.tsx +++ b/frontend/src/components/common-table-components/loading-row.tsx @@ -1,5 +1,5 @@ -import { Table } from '@navikt/ds-react'; import { LoadingCellContent } from '@app/components/common-table-components/loading-cell-content'; +import { Table } from '@navikt/ds-react'; interface Props { testId: string; diff --git a/frontend/src/components/common-table-components/medunderskriver-flow-state-label.tsx b/frontend/src/components/common-table-components/medunderskriver-flow-state-label.tsx index 1499081e4..71e28d074 100644 --- a/frontend/src/components/common-table-components/medunderskriver-flow-state-label.tsx +++ b/frontend/src/components/common-table-components/medunderskriver-flow-state-label.tsx @@ -1,6 +1,3 @@ -import { Tag } from '@navikt/ds-react'; -import { useContext } from 'react'; -import { styled } from 'styled-components'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { getTitleCapitalized, @@ -8,7 +5,10 @@ import { } from '@app/components/behandling/behandlingsdialog/medunderskriver/get-title'; import { SaksTypeEnum } from '@app/types/kodeverk'; import { FlowState } from '@app/types/oppgave-common'; -import { IOppgave } from '@app/types/oppgaver'; +import type { IOppgave } from '@app/types/oppgaver'; +import { Tag } from '@navikt/ds-react'; +import { useContext } from 'react'; +import { styled } from 'styled-components'; type Props = Pick; diff --git a/frontend/src/components/common-table-components/medunderskriver.tsx b/frontend/src/components/common-table-components/medunderskriver.tsx index e0805415a..88ca0ac13 100644 --- a/frontend/src/components/common-table-components/medunderskriver.tsx +++ b/frontend/src/components/common-table-components/medunderskriver.tsx @@ -1,9 +1,9 @@ -import { Select, Skeleton } from '@navikt/ds-react'; -import { useMemo } from 'react'; import { useSetMedunderskriver } from '@app/components/oppgavestyring/use-set-medunderskriver'; import { useHasRole } from '@app/hooks/use-has-role'; import { useGetPotentialMedunderskrivereQuery } from '@app/redux-api/oppgaver/queries/behandling/behandling'; -import { INavEmployee, Role } from '@app/types/bruker'; +import { type INavEmployee, Role } from '@app/types/bruker'; +import { Select, Skeleton } from '@navikt/ds-react'; +import { useMemo } from 'react'; interface Props { oppgaveId: string; diff --git a/frontend/src/components/common-table-components/name.tsx b/frontend/src/components/common-table-components/name.tsx index b6d95a028..24d8cd070 100644 --- a/frontend/src/components/common-table-components/name.tsx +++ b/frontend/src/components/common-table-components/name.tsx @@ -1,6 +1,6 @@ -import { skipToken } from '@reduxjs/toolkit/query'; import { LoadingCellContent } from '@app/components/common-table-components/loading-cell-content'; import { useGetSignatureQuery } from '@app/redux-api/bruker'; +import { skipToken } from '@reduxjs/toolkit/query'; interface Props { navIdent: string | null; diff --git a/frontend/src/components/common-table-components/open.tsx b/frontend/src/components/common-table-components/open.tsx index 572596fa7..0b8e099d0 100644 --- a/frontend/src/components/common-table-components/open.tsx +++ b/frontend/src/components/common-table-components/open.tsx @@ -1,13 +1,13 @@ -import { Button, ButtonProps } from '@navikt/ds-react'; -import { useContext } from 'react'; -import { Link } from 'react-router-dom'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { useHasRole } from '@app/hooks/use-has-role'; import { useHasYtelseAccess } from '@app/hooks/use-has-ytelse-access'; import { Role } from '@app/types/bruker'; import { SaksTypeEnum } from '@app/types/kodeverk'; -import { FlowState, IHelper } from '@app/types/oppgave-common'; -import { IOppgave } from '@app/types/oppgaver'; +import { FlowState, type IHelper } from '@app/types/oppgave-common'; +import type { IOppgave } from '@app/types/oppgaver'; +import { Button, type ButtonProps } from '@navikt/ds-react'; +import { useContext } from 'react'; +import { Link } from 'react-router-dom'; interface Props extends Pick, diff --git a/frontend/src/components/common-table-components/oppgave-rows/oppgave-row.tsx b/frontend/src/components/common-table-components/oppgave-rows/oppgave-row.tsx index 839da5d12..d0fab43b1 100644 --- a/frontend/src/components/common-table-components/oppgave-rows/oppgave-row.tsx +++ b/frontend/src/components/common-table-components/oppgave-rows/oppgave-row.tsx @@ -1,6 +1,3 @@ -/* eslint-disable max-lines */ -import { Table } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { FradelingReason } from '@app/components/common-table-components/fradeling-reason'; import { Medunderskriver } from '@app/components/common-table-components/medunderskriver'; import { Name } from '@app/components/common-table-components/name'; @@ -16,7 +13,10 @@ import { isoDateToPretty } from '@app/domain/date'; import { useGetOppgaveQuery } from '@app/redux-api/oppgaver/queries/oppgave-data'; import { SaksTypeEnum } from '@app/types/kodeverk'; import { FlowState } from '@app/types/oppgave-common'; -import { IOppgave } from '@app/types/oppgaver'; +import type { IOppgave } from '@app/types/oppgaver'; +/* eslint-disable max-lines */ +import { Table } from '@navikt/ds-react'; +import { styled } from 'styled-components'; import { Oppgavestyring } from '../../oppgavestyring/oppgavestyring'; import { Type } from '../../type/type'; import { Age } from '../age'; diff --git a/frontend/src/components/common-table-components/oppgave-rows/oppgave-rows.tsx b/frontend/src/components/common-table-components/oppgave-rows/oppgave-rows.tsx index 17d5c1eab..700e1de12 100644 --- a/frontend/src/components/common-table-components/oppgave-rows/oppgave-rows.tsx +++ b/frontend/src/components/common-table-components/oppgave-rows/oppgave-rows.tsx @@ -1,8 +1,6 @@ -import { Table } from '@navikt/ds-react'; import { LoadingRow } from '@app/components/common-table-components/loading-row'; -import { ColumnKeyEnum } from '@app/components/common-table-components/types'; -// See relevant-oppgaver.tsx for more information about this dependency cycle -// eslint-disable-next-line import/no-cycle +import type { ColumnKeyEnum } from '@app/components/common-table-components/types'; +import { Table } from '@navikt/ds-react'; import { OppgaveRow } from './oppgave-row'; interface OppgaveRowsProps { @@ -38,7 +36,8 @@ export const OppgaveRows = ({ return ( {new Array(pageSize).fill(0).map((_, i) => ( - + // biome-ignore lint/correctness/useJsxKeyInIterable: This is a static array + ))} ); diff --git a/frontend/src/components/common-table-components/oppgave-table/date-column-header.tsx b/frontend/src/components/common-table-components/oppgave-table/date-column-header.tsx index 5f209fc0a..b42d19ce7 100644 --- a/frontend/src/components/common-table-components/oppgave-table/date-column-header.tsx +++ b/frontend/src/components/common-table-components/oppgave-table/date-column-header.tsx @@ -1,19 +1,19 @@ -import { ArrowDownIcon, ArrowUpIcon, ArrowsUpDownIcon } from '@navikt/aksel-icons'; -import { Button, ButtonProps, TableProps } from '@navikt/ds-react'; -import { format } from 'date-fns'; -import { DateRange } from 'react-day-picker'; -import { styled } from 'styled-components'; import { StyledColumnHeader } from '@app/components/common-table-components/oppgave-table/styled-components'; -import { SetCommonOppgaverParams } from '@app/components/common-table-components/oppgave-table/types'; -import { ISO_FORMAT } from '@app/components/date-picker/constants'; +import type { SetCommonOppgaverParams } from '@app/components/common-table-components/oppgave-table/types'; import { DatePickerRange } from '@app/components/date-picker-range/date-picker-range'; +import { ISO_FORMAT } from '@app/components/date-picker/constants'; import { - CommonOppgaverParams, - FromDateSortKeys, - SortFieldEnum, + type CommonOppgaverParams, + type FromDateSortKeys, + type SortFieldEnum, SortOrderEnum, - ToDateSortKeys, + type ToDateSortKeys, } from '@app/types/oppgaver'; +import { ArrowDownIcon, ArrowUpIcon, ArrowsUpDownIcon } from '@navikt/aksel-icons'; +import { Button, type ButtonProps, type TableProps } from '@navikt/ds-react'; +import { format } from 'date-fns'; +import type { DateRange } from 'react-day-picker'; +import { styled } from 'styled-components'; interface SortProps { params: CommonOppgaverParams; @@ -110,7 +110,7 @@ const getSortIcon = (sorted: boolean, rekkefoelge: SortOrderEnum) => { const Container = styled.div` display: flex; align-items: center; - gap: 4px; + gap: var(--a-spacing-1); `; interface StyledSortButtonProps { diff --git a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/enhet-hjemmel.tsx b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/enhet-hjemmel.tsx index 97ba663f5..a46f12ea2 100644 --- a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/enhet-hjemmel.tsx +++ b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/enhet-hjemmel.tsx @@ -1,9 +1,9 @@ -import { Table } from '@navikt/ds-react'; import { TABLE_HEADERS } from '@app/components/common-table-components/types'; import { FilterDropdown } from '@app/components/filter-dropdown/filter-dropdown'; import { kodeverkValuesToDropdownOptions } from '@app/components/filter-dropdown/functions'; import { useAvailableHjemler } from '@app/hooks/use-available-hjemler'; -import { FilterDropdownProps } from './types'; +import { Table } from '@navikt/ds-react'; +import type { FilterDropdownProps } from './types'; export const EnhetHjemmel = ({ params, setParams, columnKey }: FilterDropdownProps) => { const enhetHjemlerOptions = useAvailableHjemler(); diff --git a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/helpers.ts b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/helpers.ts index 3cbb1c717..5bedd774a 100644 --- a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/helpers.ts +++ b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/helpers.ts @@ -1,5 +1,5 @@ -import { IOption } from '@app/components/filter-dropdown/props'; -import { INavEmployee } from '@app/types/bruker'; +import type { IOption } from '@app/components/filter-dropdown/props'; +import type { INavEmployee } from '@app/types/bruker'; export const navEmployeesToOptions = (navEmployees: INavEmployee[] | undefined = []): IOption[] => navEmployees.map(({ navIdent, navn }) => ({ value: navIdent, label: navn })); diff --git a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/hjemmel.tsx b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/hjemmel.tsx index 1200a07e2..1a3e25435 100644 --- a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/hjemmel.tsx +++ b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/hjemmel.tsx @@ -1,9 +1,9 @@ -import { Table } from '@navikt/ds-react'; import { TABLE_HEADERS } from '@app/components/common-table-components/types'; import { FilterDropdown } from '@app/components/filter-dropdown/filter-dropdown'; import { kodeverkValuesToDropdownOptions } from '@app/components/filter-dropdown/functions'; import { useSettingsHjemler } from '@app/hooks/use-settings-hjemler'; -import { FilterDropdownProps } from './types'; +import { Table } from '@navikt/ds-react'; +import type { FilterDropdownProps } from './types'; export const Hjemmel = ({ params, setParams, columnKey }: FilterDropdownProps) => { const hjemlerOptions = useSettingsHjemler(); diff --git a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/medunderskriver.tsx b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/medunderskriver.tsx index 96005df1a..0b2d722d3 100644 --- a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/medunderskriver.tsx +++ b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/medunderskriver.tsx @@ -1,12 +1,12 @@ -import { Table } from '@navikt/ds-react'; -import { useContext, useMemo } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { navEmployeesToOptions } from '@app/components/common-table-components/oppgave-table/filter-dropdowns/helpers'; import { TABLE_HEADERS } from '@app/components/common-table-components/types'; import { FilterDropdown } from '@app/components/filter-dropdown/filter-dropdown'; -import { IOption } from '@app/components/filter-dropdown/props'; +import type { IOption } from '@app/components/filter-dropdown/props'; import { useGetMedunderskrivereForEnhetQuery } from '@app/redux-api/oppgaver/queries/oppgaver'; -import { FilterDropdownProps } from './types'; +import { Table } from '@navikt/ds-react'; +import { useContext, useMemo } from 'react'; +import type { FilterDropdownProps } from './types'; export const Medunderskriver = ({ params, setParams, columnKey }: FilterDropdownProps) => { const { user } = useContext(StaticDataContext); diff --git a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/registreringshjemler.tsx b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/registreringshjemler.tsx index 5ab579642..30f9ca95a 100644 --- a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/registreringshjemler.tsx +++ b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/registreringshjemler.tsx @@ -1,12 +1,12 @@ -import { ChevronDownIcon, ChevronUpIcon } from '@navikt/aksel-icons'; -import { Table } from '@navikt/ds-react'; -import { useMemo, useRef, useState } from 'react'; import { TABLE_HEADERS } from '@app/components/common-table-components/types'; -import { GroupedFilterList, OptionGroup } from '@app/components/filter-dropdown/grouped-filter-list'; +import { GroupedFilterList, type OptionGroup } from '@app/components/filter-dropdown/grouped-filter-list'; import { ToggleButton } from '@app/components/toggle-button/toggle-button'; import { useOnClickOutside } from '@app/hooks/use-on-click-outside'; import { useLovKildeToRegistreringshjemler } from '@app/simple-api-state/use-kodeverk'; -import { FilterDropdownProps } from './types'; +import { ChevronDownIcon, ChevronUpIcon } from '@navikt/aksel-icons'; +import { Table } from '@navikt/ds-react'; +import { useMemo, useRef, useState } from 'react'; +import type { FilterDropdownProps } from './types'; export const Registreringshjemler = ({ params, setParams, columnKey }: FilterDropdownProps) => { const [open, setOpen] = useState(false); diff --git a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/rol-hjemmel.tsx b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/rol-hjemmel.tsx index 0c9f6d9a3..8066afbd7 100644 --- a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/rol-hjemmel.tsx +++ b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/rol-hjemmel.tsx @@ -1,11 +1,11 @@ -import { Table } from '@navikt/ds-react'; -import { useMemo } from 'react'; import { TABLE_HEADERS } from '@app/components/common-table-components/types'; import { FilterDropdown } from '@app/components/filter-dropdown/filter-dropdown'; -import { IOption } from '@app/components/filter-dropdown/props'; +import type { IOption } from '@app/components/filter-dropdown/props'; import { sortWithOrdinals } from '@app/functions/sort-with-ordinals/sort-with-ordinals'; import { useLatestYtelser } from '@app/simple-api-state/use-kodeverk'; -import { FilterDropdownProps } from './types'; +import { Table } from '@navikt/ds-react'; +import { useMemo } from 'react'; +import type { FilterDropdownProps } from './types'; export const RolHjemmel = ({ params, setParams, columnKey }: FilterDropdownProps) => { const { data: ytelser = [] } = useLatestYtelser(); diff --git a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/rol-ytelse.tsx b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/rol-ytelse.tsx index d6c6c55e9..c1dc1eda5 100644 --- a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/rol-ytelse.tsx +++ b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/rol-ytelse.tsx @@ -1,9 +1,9 @@ -import { Table } from '@navikt/ds-react'; import { TABLE_HEADERS } from '@app/components/common-table-components/types'; import { FilterDropdown } from '@app/components/filter-dropdown/filter-dropdown'; import { kodeverkSimpleValuesToDropdownOptions } from '@app/components/filter-dropdown/functions'; import { useSimpleYtelser } from '@app/simple-api-state/use-kodeverk'; -import { FilterDropdownProps } from './types'; +import { Table } from '@navikt/ds-react'; +import type { FilterDropdownProps } from './types'; export const RolYtelse = ({ params, setParams, columnKey }: FilterDropdownProps) => { const { data } = useSimpleYtelser(); diff --git a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/rol.tsx b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/rol.tsx index 35444a7af..788468987 100644 --- a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/rol.tsx +++ b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/rol.tsx @@ -1,11 +1,11 @@ -import { Table } from '@navikt/ds-react'; -import { useMemo } from 'react'; import { navEmployeesToOptions } from '@app/components/common-table-components/oppgave-table/filter-dropdowns/helpers'; import { TABLE_HEADERS } from '@app/components/common-table-components/types'; import { FilterDropdown } from '@app/components/filter-dropdown/filter-dropdown'; -import { IOption } from '@app/components/filter-dropdown/props'; +import type { IOption } from '@app/components/filter-dropdown/props'; import { useGetRolsInEnhetQuery } from '@app/redux-api/oppgaver/queries/oppgaver'; -import { FilterDropdownProps } from './types'; +import { Table } from '@navikt/ds-react'; +import { useMemo } from 'react'; +import type { FilterDropdownProps } from './types'; export const Rol = ({ params, setParams, columnKey }: FilterDropdownProps) => { const { data } = useGetRolsInEnhetQuery(); diff --git a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/saksbehandler.tsx b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/saksbehandler.tsx index 1b59691e6..969de2297 100644 --- a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/saksbehandler.tsx +++ b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/saksbehandler.tsx @@ -1,12 +1,12 @@ -import { Table } from '@navikt/ds-react'; -import { useContext, useMemo } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { navEmployeesToOptions } from '@app/components/common-table-components/oppgave-table/filter-dropdowns/helpers'; import { TABLE_HEADERS } from '@app/components/common-table-components/types'; import { FilterDropdown } from '@app/components/filter-dropdown/filter-dropdown'; -import { IOption } from '@app/components/filter-dropdown/props'; +import type { IOption } from '@app/components/filter-dropdown/props'; import { useGetSaksbehandlereInEnhetQuery } from '@app/redux-api/oppgaver/queries/oppgaver'; -import { FilterDropdownProps } from './types'; +import { Table } from '@navikt/ds-react'; +import { useContext, useMemo } from 'react'; +import type { FilterDropdownProps } from './types'; export const Saksbehandler = ({ params, setParams, columnKey }: FilterDropdownProps) => { const { user } = useContext(StaticDataContext); diff --git a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/sakstype.tsx b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/sakstype.tsx index c57738b5c..db688e232 100644 --- a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/sakstype.tsx +++ b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/sakstype.tsx @@ -1,8 +1,8 @@ -import { Table } from '@navikt/ds-react'; import { TABLE_HEADERS } from '@app/components/common-table-components/types'; import { FilterDropdown } from '@app/components/filter-dropdown/filter-dropdown'; import { SaksTypeEnum } from '@app/types/kodeverk'; -import { FilterDropdownProps } from './types'; +import { Table } from '@navikt/ds-react'; +import type { FilterDropdownProps } from './types'; const OPTIONS = [ { value: SaksTypeEnum.KLAGE, label: 'Klage' }, diff --git a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/types.ts b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/types.ts index 9adb34782..133802d32 100644 --- a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/types.ts +++ b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/types.ts @@ -1,6 +1,6 @@ -import { SetCommonOppgaverParams } from '@app/components/common-table-components/oppgave-table/types'; -import { ColumnKeyEnum } from '@app/components/common-table-components/types'; -import { CommonOppgaverParams } from '@app/types/oppgaver'; +import type { SetCommonOppgaverParams } from '@app/components/common-table-components/oppgave-table/types'; +import type { ColumnKeyEnum } from '@app/components/common-table-components/types'; +import type { CommonOppgaverParams } from '@app/types/oppgaver'; export interface FilterDropdownProps { params: CommonOppgaverParams; diff --git a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/ytelse.tsx b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/ytelse.tsx index 5dec897ec..5e1dc330e 100644 --- a/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/ytelse.tsx +++ b/frontend/src/components/common-table-components/oppgave-table/filter-dropdowns/ytelse.tsx @@ -1,9 +1,9 @@ -import { Table } from '@navikt/ds-react'; import { TABLE_HEADERS } from '@app/components/common-table-components/types'; import { FilterDropdown } from '@app/components/filter-dropdown/filter-dropdown'; import { kodeverkSimpleValuesToDropdownOptions } from '@app/components/filter-dropdown/functions'; import { useSettingsYtelser } from '@app/hooks/use-settings-ytelser'; -import { FilterDropdownProps } from './types'; +import { Table } from '@navikt/ds-react'; +import type { FilterDropdownProps } from './types'; export const Ytelse = ({ params, setParams, columnKey }: FilterDropdownProps) => { const ytelseOptions = useSettingsYtelser(); diff --git a/frontend/src/components/common-table-components/oppgave-table/oppgave-table-headers.tsx b/frontend/src/components/common-table-components/oppgave-table/oppgave-table-headers.tsx index f5b2756f0..913a166b2 100644 --- a/frontend/src/components/common-table-components/oppgave-table/oppgave-table-headers.tsx +++ b/frontend/src/components/common-table-components/oppgave-table/oppgave-table-headers.tsx @@ -1,10 +1,10 @@ -import { TableProps } from '@navikt/ds-react'; import { DateColumnHeader } from '@app/components/common-table-components/oppgave-table/date-column-header'; import { Registreringshjemler } from '@app/components/common-table-components/oppgave-table/filter-dropdowns/registreringshjemler'; import { StyledColumnHeader } from '@app/components/common-table-components/oppgave-table/styled-components'; -import { SetCommonOppgaverParams } from '@app/components/common-table-components/oppgave-table/types'; +import type { SetCommonOppgaverParams } from '@app/components/common-table-components/oppgave-table/types'; import { ColumnKeyEnum, TABLE_HEADERS } from '@app/components/common-table-components/types'; -import { CommonOppgaverParams, SortFieldEnum } from '@app/types/oppgaver'; +import { type CommonOppgaverParams, SortFieldEnum } from '@app/types/oppgaver'; +import type { TableProps } from '@navikt/ds-react'; import { EnhetHjemmel } from './filter-dropdowns/enhet-hjemmel'; import { Hjemmel } from './filter-dropdowns/hjemmel'; import { Medunderskriver } from './filter-dropdowns/medunderskriver'; diff --git a/frontend/src/components/common-table-components/oppgave-table/oppgave-table.tsx b/frontend/src/components/common-table-components/oppgave-table/oppgave-table.tsx index ca72933ff..8adfb64a1 100644 --- a/frontend/src/components/common-table-components/oppgave-table/oppgave-table.tsx +++ b/frontend/src/components/common-table-components/oppgave-table/oppgave-table.tsx @@ -1,5 +1,3 @@ -import { SortState, Table, TableProps } from '@navikt/ds-react'; -import { useMemo } from 'react'; import { TableFooter } from '@app/components/common-table-components/footer'; // See relevant-oppgaver.tsx for more information about this dependency cycle // eslint-disable-next-line import/no-cycle @@ -8,11 +6,13 @@ import { TableFilterHeaders, TablePlainHeaders, } from '@app/components/common-table-components/oppgave-table/oppgave-table-headers'; -import { SetCommonOppgaverParams } from '@app/components/common-table-components/oppgave-table/types'; -import { ColumnKeyEnum } from '@app/components/common-table-components/types'; -import { OppgaveTableRowsPerPage } from '@app/hooks/settings/use-setting'; +import type { SetCommonOppgaverParams } from '@app/components/common-table-components/oppgave-table/types'; +import type { ColumnKeyEnum } from '@app/components/common-table-components/types'; +import type { OppgaveTableRowsPerPage } from '@app/hooks/settings/use-setting'; import { useOppgavePagination } from '@app/hooks/use-oppgave-pagination'; -import { CommonOppgaverParams, SortFieldEnum, SortOrderEnum } from '@app/types/oppgaver'; +import { type CommonOppgaverParams, SortFieldEnum, SortOrderEnum } from '@app/types/oppgaver'; +import { type SortState, Table, type TableProps } from '@navikt/ds-react'; +import { useMemo } from 'react'; interface WithParams { params: CommonOppgaverParams; diff --git a/frontend/src/components/common-table-components/oppgave-table/types.ts b/frontend/src/components/common-table-components/oppgave-table/types.ts index fd7fe11e6..790a68b7a 100644 --- a/frontend/src/components/common-table-components/oppgave-table/types.ts +++ b/frontend/src/components/common-table-components/oppgave-table/types.ts @@ -1,3 +1,3 @@ -import { CommonOppgaverParams } from '@app/types/oppgaver'; +import type { CommonOppgaverParams } from '@app/types/oppgaver'; export type SetCommonOppgaverParams = React.Dispatch>; diff --git a/frontend/src/components/common-table-components/paa-vent.tsx b/frontend/src/components/common-table-components/paa-vent.tsx index 400918b16..ab124a278 100644 --- a/frontend/src/components/common-table-components/paa-vent.tsx +++ b/frontend/src/components/common-table-components/paa-vent.tsx @@ -1,6 +1,6 @@ -import { styled } from 'styled-components'; import { isoDateToPretty } from '@app/domain/date'; -import { IOppgave } from '@app/types/oppgaver'; +import type { IOppgave } from '@app/types/oppgaver'; +import { styled } from 'styled-components'; type Props = Pick; diff --git a/frontend/src/components/common-table-components/rol-flow-state-label.tsx b/frontend/src/components/common-table-components/rol-flow-state-label.tsx index cdcb1b882..92c607edd 100644 --- a/frontend/src/components/common-table-components/rol-flow-state-label.tsx +++ b/frontend/src/components/common-table-components/rol-flow-state-label.tsx @@ -1,9 +1,9 @@ +import { StaticDataContext } from '@app/components/app/static-data-context'; +import { FlowState } from '@app/types/oppgave-common'; +import type { IOppgave } from '@app/types/oppgaver'; import { Tag } from '@navikt/ds-react'; import { useContext } from 'react'; import { styled } from 'styled-components'; -import { StaticDataContext } from '@app/components/app/static-data-context'; -import { FlowState } from '@app/types/oppgave-common'; -import { IOppgave } from '@app/types/oppgaver'; type Props = Pick; diff --git a/frontend/src/components/common-table-components/rol-tildeling.tsx b/frontend/src/components/common-table-components/rol-tildeling.tsx index ad2aeee6e..c8c4ebd53 100644 --- a/frontend/src/components/common-table-components/rol-tildeling.tsx +++ b/frontend/src/components/common-table-components/rol-tildeling.tsx @@ -1,12 +1,12 @@ -import { Button } from '@navikt/ds-react'; -import { useContext } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { OpenOppgavebehandling } from '@app/components/common-table-components/open'; import { ActionToast } from '@app/components/toast/action-toast'; import { toast } from '@app/components/toast/store'; import { useSetRolMutation } from '@app/redux-api/oppgaver/mutations/set-rol'; import { FlowState } from '@app/types/oppgave-common'; -import { IOppgave } from '@app/types/oppgaver'; +import type { IOppgave } from '@app/types/oppgaver'; +import { Button } from '@navikt/ds-react'; +import { useContext } from 'react'; interface Props { oppgave: IOppgave; diff --git a/frontend/src/components/common-table-components/rol.tsx b/frontend/src/components/common-table-components/rol.tsx index a2f1539ff..89e92d755 100644 --- a/frontend/src/components/common-table-components/rol.tsx +++ b/frontend/src/components/common-table-components/rol.tsx @@ -1,8 +1,8 @@ -import { Select, Skeleton } from '@navikt/ds-react'; -import { useMemo } from 'react'; import { useHasRole } from '@app/hooks/use-has-role'; import { useGetPotentialRolQuery } from '@app/redux-api/oppgaver/queries/behandling/behandling'; -import { INavEmployee, Role } from '@app/types/bruker'; +import { type INavEmployee, Role } from '@app/types/bruker'; +import { Select, Skeleton } from '@navikt/ds-react'; +import { useMemo } from 'react'; import { useSetRol } from '../oppgavestyring/use-set-rol'; interface Props { diff --git a/frontend/src/components/common-table-components/saken-gjelder.tsx b/frontend/src/components/common-table-components/saken-gjelder.tsx index dc6541610..907bdff79 100644 --- a/frontend/src/components/common-table-components/saken-gjelder.tsx +++ b/frontend/src/components/common-table-components/saken-gjelder.tsx @@ -1,8 +1,8 @@ -import { Tooltip } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { LoadingCellContent } from '@app/components/common-table-components/loading-cell-content'; import { CopyIdButton } from '@app/components/copy-button/copy-id-button'; import { useGetSakenGjelderQuery } from '@app/redux-api/oppgaver/queries/behandling/behandling'; +import { Tooltip } from '@navikt/ds-react'; +import { styled } from 'styled-components'; interface Props { oppgaveId: string; diff --git a/frontend/src/components/common-table-components/types.ts b/frontend/src/components/common-table-components/types.ts index 564002b94..38065cf75 100644 --- a/frontend/src/components/common-table-components/types.ts +++ b/frontend/src/components/common-table-components/types.ts @@ -1,38 +1,38 @@ export enum ColumnKeyEnum { - Type, - TypeWithAnkeITrygderetten, - Ytelse, - RolYtelse, - Innsendingshjemler, - RolInnsendingshjemler, - EnhetInnsendingshjemler, - Registreringshjemler, - Navn, - Fnr, - Age, - Deadline, - VarsletFrist, - Medunderskriver, - Rol, - FlowStates, - Open, - TildelingWithFilter, - Tildeling, - Oppgavestyring, - OppgavestyringNonFilterable, - Utfall, - PaaVentTil, - PaaVentReason, - Finished, - Returnert, - Feilregistrering, - Feilregistrert, - Saksnummer, - RolTildeling, - RelevantOppgaver, - FradelingReason, - PreviousSaksbehandler, - DatoSendtTilTr, + Type = 0, + TypeWithAnkeITrygderetten = 1, + Ytelse = 2, + RolYtelse = 3, + Innsendingshjemler = 4, + RolInnsendingshjemler = 5, + EnhetInnsendingshjemler = 6, + Registreringshjemler = 7, + Navn = 8, + Fnr = 9, + Age = 10, + Deadline = 11, + VarsletFrist = 12, + Medunderskriver = 13, + Rol = 14, + FlowStates = 15, + Open = 16, + TildelingWithFilter = 17, + Tildeling = 18, + Oppgavestyring = 19, + OppgavestyringNonFilterable = 20, + Utfall = 21, + PaaVentTil = 22, + PaaVentReason = 23, + Finished = 24, + Returnert = 25, + Feilregistrering = 26, + Feilregistrert = 27, + Saksnummer = 28, + RolTildeling = 29, + RelevantOppgaver = 30, + FradelingReason = 31, + PreviousSaksbehandler = 32, + DatoSendtTilTr = 33, } export const TABLE_HEADERS: Record = { diff --git a/frontend/src/components/common-table-components/utfall.tsx b/frontend/src/components/common-table-components/utfall.tsx index b7ade9f05..b9552b932 100644 --- a/frontend/src/components/common-table-components/utfall.tsx +++ b/frontend/src/components/common-table-components/utfall.tsx @@ -1,6 +1,6 @@ -import { useMemo } from 'react'; import { LoadingCellContent } from '@app/components/common-table-components/loading-cell-content'; import { useUtfall } from '@app/simple-api-state/use-kodeverk'; +import { useMemo } from 'react'; interface Props { utfallId: string | null; diff --git a/frontend/src/components/common-table-components/ytelse.tsx b/frontend/src/components/common-table-components/ytelse.tsx index 145445c0f..30d66ae26 100644 --- a/frontend/src/components/common-table-components/ytelse.tsx +++ b/frontend/src/components/common-table-components/ytelse.tsx @@ -1,6 +1,6 @@ -import { Tag } from '@navikt/ds-react'; import { LoadingCellContent } from '@app/components/common-table-components/loading-cell-content'; import { useFullYtelseNameFromId } from '@app/hooks/use-kodeverk-ids'; +import { Tag } from '@navikt/ds-react'; interface Props { ytelseId: string; diff --git a/frontend/src/components/copy-button/copy-button.tsx b/frontend/src/components/copy-button/copy-button.tsx index 70fc51202..8fb4cf511 100644 --- a/frontend/src/components/copy-button/copy-button.tsx +++ b/frontend/src/components/copy-button/copy-button.tsx @@ -1,4 +1,4 @@ -import { CopyButtonProps, CopyButton as InternalCopyBytton } from '@navikt/ds-react'; +import { type CopyButtonProps, CopyButton as InternalCopyBytton } from '@navikt/ds-react'; import { styled } from 'styled-components'; interface Props { diff --git a/frontend/src/components/copy-button/copy-id-button.tsx b/frontend/src/components/copy-button/copy-id-button.tsx index 45fa6bce9..1d7ffbcbc 100644 --- a/frontend/src/components/copy-button/copy-id-button.tsx +++ b/frontend/src/components/copy-button/copy-id-button.tsx @@ -1,6 +1,6 @@ -import { CopyButtonProps } from '@navikt/ds-react'; -import { useMemo } from 'react'; import { formatIdNumber } from '@app/functions/format-id'; +import type { CopyButtonProps } from '@navikt/ds-react'; +import { useMemo } from 'react'; import { CopyButton } from './copy-button'; interface Props extends Omit { diff --git a/frontend/src/components/countdown-button/countdown-button.tsx b/frontend/src/components/countdown-button/countdown-button.tsx index 02b829d25..f410eb136 100644 --- a/frontend/src/components/countdown-button/countdown-button.tsx +++ b/frontend/src/components/countdown-button/countdown-button.tsx @@ -1,4 +1,4 @@ -import { Button, ButtonProps } from '@navikt/ds-react'; +import { Button, type ButtonProps } from '@navikt/ds-react'; import { useEffect, useState } from 'react'; interface Props extends ButtonProps { diff --git a/frontend/src/components/date-picker-range/date-picker-range.tsx b/frontend/src/components/date-picker-range/date-picker-range.tsx index 5f8cc8ff2..d8e45a078 100644 --- a/frontend/src/components/date-picker-range/date-picker-range.tsx +++ b/frontend/src/components/date-picker-range/date-picker-range.tsx @@ -1,10 +1,10 @@ +import { useOnClickOutside } from '@app/hooks/use-on-click-outside'; import { CalendarIcon } from '@navikt/aksel-icons'; -import { Alert, Button, ButtonProps, DatePicker } from '@navikt/ds-react'; +import { Alert, Button, type ButtonProps, DatePicker } from '@navikt/ds-react'; import { format, formatISO, parseISO } from 'date-fns'; import { useCallback, useMemo, useRef, useState } from 'react'; -import { DateRange } from 'react-day-picker'; +import type { DateRange } from 'react-day-picker'; import { styled } from 'styled-components'; -import { useOnClickOutside } from '@app/hooks/use-on-click-outside'; type DateStringISO = string; @@ -29,7 +29,7 @@ export const DatePickerRange = ({ neutral = false, }: Props) => { const [isOpen, setIsOpen] = useState(false); - const onClick = useCallback(() => setIsOpen((o) => !o), [setIsOpen]); + const onClick = useCallback(() => setIsOpen((o) => !o), []); const ref = useRef(null); useOnClickOutside(ref, () => setIsOpen(false)); @@ -103,7 +103,7 @@ const Time = ({ date }: TimeProps) => ( const Container = styled.div<{ $gridArea?: string }>` position: relative; - height: 32px; + height: var(--a-spacing-8); grid-area: ${({ $gridArea }) => $gridArea}; `; @@ -114,7 +114,7 @@ const DatepickerContainer = styled.div` z-index: 1; background-color: var(--a-surface-default); border-radius: var(--a-border-radius-medium); - box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0px var(--a-spacing-1) var(--a-spacing-2) rgba(0, 0, 0, 0.1); font-weight: initial; `; @@ -126,7 +126,7 @@ const StyledButtons = styled.div` `; const StyledDateRange = styled.div` - height: 32px; + height: var(--a-spacing-8); width: 100%; padding-left: var(--a-spacing-3); padding-right: var(--a-spacing-3); diff --git a/frontend/src/components/date-picker/date-picker.tsx b/frontend/src/components/date-picker/date-picker.tsx index 684a16ffb..e1e7df8f7 100644 --- a/frontend/src/components/date-picker/date-picker.tsx +++ b/frontend/src/components/date-picker/date-picker.tsx @@ -1,10 +1,10 @@ -import { DatePicker as DSDatePicker } from '@navikt/ds-react'; -import { addYears, format, isAfter, isBefore, isValid, parse, subDays, subYears } from 'date-fns'; -import { useCallback, useEffect, useMemo, useState } from 'react'; import { FORMAT, PRETTY_FORMAT } from '@app/components/date-picker/constants'; import { getFullYear, isDateParts, isEightChars, isFourChars, isSixChars } from '@app/components/date-picker/helpers'; import { Warning } from '@app/components/date-picker/warning'; import { isoDateToPretty } from '@app/domain/date'; +import { DatePicker as DSDatePicker } from '@navikt/ds-react'; +import { addYears, format, isAfter, isBefore, isValid, parse, subDays, subYears } from 'date-fns'; +import { useCallback, useEffect, useMemo, useState } from 'react'; interface Props { centuryThreshold?: number; @@ -40,10 +40,10 @@ export const DatePicker = ({ autoFocus, }: Props) => { const [inputError, setInputError] = useState(); - const [input, setInput] = useState(value === null ? '' : (isoDateToPretty(value) ?? '')); + const [input, setInput] = useState(value === null ? '' : isoDateToPretty(value) ?? ''); useEffect(() => { - setInput(value === null ? '' : (isoDateToPretty(value) ?? '')); + setInput(value === null ? '' : isoDateToPretty(value) ?? ''); setInputError(undefined); }, [value]); diff --git a/frontend/src/components/date-picker/warning.tsx b/frontend/src/components/date-picker/warning.tsx index 6c56f2699..73f49f1f9 100644 --- a/frontend/src/components/date-picker/warning.tsx +++ b/frontend/src/components/date-picker/warning.tsx @@ -24,5 +24,5 @@ export const Warning = ({ date, threshhold }: Props) => { }; const StyledAlert = styled(Alert)` - margin-top: 8px; + margin-top: var(--a-spacing-2); `; diff --git a/frontend/src/components/datetime/datetime.tsx b/frontend/src/components/datetime/datetime.tsx index b49db19a8..784b662d9 100644 --- a/frontend/src/components/datetime/datetime.tsx +++ b/frontend/src/components/datetime/datetime.tsx @@ -1,7 +1,7 @@ +import { isoDateTimeToPretty } from '@app/domain/date'; +import type { IEditor } from '@app/types/common-text-types'; import { CalendarIcon, ClockIcon } from '@navikt/aksel-icons'; import { styled } from 'styled-components'; -import { isoDateTimeToPretty } from '@app/domain/date'; -import { IEditor } from '@app/types/common-text-types'; interface Props { created: string; @@ -26,7 +26,7 @@ export const ModifiedCreatedDateTime = ({ lastEditor, created }: Props) => { const Wrapper = styled.div` display: flex; align-items: center; - column-gap: 4px; + column-gap: var(--a-spacing-1); `; interface DateTimeProps { @@ -45,6 +45,6 @@ export const DateTime = ({ dateTime, title, icon }: DateTimeProps) => ( const StyledTime = styled.time` display: flex; align-items: center; - column-gap: 4px; + column-gap: var(--a-spacing-1); white-space: nowrap; `; diff --git a/frontend/src/components/deassign/direction.ts b/frontend/src/components/deassign/direction.ts index a04d753b7..624079966 100644 --- a/frontend/src/components/deassign/direction.ts +++ b/frontend/src/components/deassign/direction.ts @@ -1,4 +1,4 @@ export enum Direction { - UP, - DOWN, + UP = 0, + DOWN = 1, } diff --git a/frontend/src/components/deassign/paa-vent-warning.tsx b/frontend/src/components/deassign/paa-vent-warning.tsx index b338ad76d..6f5c407f8 100644 --- a/frontend/src/components/deassign/paa-vent-warning.tsx +++ b/frontend/src/components/deassign/paa-vent-warning.tsx @@ -1,7 +1,7 @@ +import { Direction, PopupContainer } from '@app/components/popup-container/popup-container'; import { FolderFileIcon, XMarkIcon } from '@navikt/aksel-icons'; import { Alert, Button } from '@navikt/ds-react'; import { styled } from 'styled-components'; -import { Direction, PopupContainer } from '@app/components/popup-container/popup-container'; interface PaaVentWarningProps { isOpen: boolean; @@ -34,7 +34,7 @@ export const PaaVentWarning = ({ onConfirm, isOpen, close }: PaaVentWarningProps const Buttons = styled.div` display: flex; - gap: 8px; + gap: var(--a-spacing-2); align-items: center; `; diff --git a/frontend/src/components/deassign/popup.tsx b/frontend/src/components/deassign/popup.tsx index 624660728..faae2f09b 100644 --- a/frontend/src/components/deassign/popup.tsx +++ b/frontend/src/components/deassign/popup.tsx @@ -1,15 +1,15 @@ -import { FolderFileIcon, XMarkIcon } from '@navikt/aksel-icons'; -import { Button, Radio, RadioGroup } from '@navikt/ds-react'; -import { useCallback, useState } from 'react'; -import { useNavigate } from 'react-router'; -import { styled } from 'styled-components'; import { HjemmelList } from '@app/components/oppgavebehandling-footer/deassign/hjemmel-list'; import { useFradel } from '@app/components/oppgavestyring/use-tildel'; import { areArraysEqual } from '@app/functions/are-arrays-equal'; import { useHasRole } from '@app/hooks/use-has-role'; import { Role } from '@app/types/bruker'; -import { SaksTypeEnum } from '@app/types/kodeverk'; +import type { SaksTypeEnum } from '@app/types/kodeverk'; import { FradelReason, FradelReasonText } from '@app/types/oppgaver'; +import { FolderFileIcon, XMarkIcon } from '@navikt/aksel-icons'; +import { Button, Radio, RadioGroup } from '@navikt/ds-react'; +import { useCallback, useState } from 'react'; +import { useNavigate } from 'react-router'; +import { styled } from 'styled-components'; import { Direction } from './direction'; interface Props { @@ -115,14 +115,14 @@ const StyledPopup = styled.div` flex-direction: column; position: absolute; right: 0; - gap: 8px; + gap: var(--a-spacing-2); width: 280px; padding: var(--a-spacing-4); - background-color: white; + background-color: var(--a-bg-default); border-radius: var(--a-border-radius-medium); - border: 1px solid #c6c2bf; - box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); + border: 1px solid var(--a-border-divider); + box-shadow: 0 0 var(--a-spacing-1) rgba(0, 0, 0, 0.25); z-index: 10; `; @@ -130,5 +130,5 @@ const ButtonContainer = styled.div` display: flex; flex-direction: row; justify-content: space-between; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/documents/create-drag-ui.ts b/frontend/src/components/documents/create-drag-ui.ts index 5bf2e837c..b7ef770ed 100644 --- a/frontend/src/components/documents/create-drag-ui.ts +++ b/frontend/src/components/documents/create-drag-ui.ts @@ -4,7 +4,7 @@ const MORE_THRESHOLD = MAX_DOCUMENT_LINES + 2; export const createDragUI = (documentTitleList: string[], e: React.DragEvent): (() => void) => { const dragElement = window.document.createElement('section'); - dragElement.style.backgroundColor = 'white'; + dragElement.style.backgroundColor = 'var(--a-bg-default)'; dragElement.style.border = '2px solid var(--a-surface-action-hover)'; dragElement.style.padding = '4px'; dragElement.style.paddingLeft = '16px'; diff --git a/frontend/src/components/documents/documents.tsx b/frontend/src/components/documents/documents.tsx index 0cbab9139..74741dc1b 100644 --- a/frontend/src/components/documents/documents.tsx +++ b/frontend/src/components/documents/documents.tsx @@ -1,10 +1,10 @@ -import { Loader } from '@navikt/ds-react'; import { ExpandedDocuments } from '@app/components/documents/expanded-documents'; import { TabContextElement } from '@app/components/documents/tab-context'; import { PanelContainer } from '@app/components/oppgavebehandling-panels/styled-components'; import { ViewPDF } from '@app/components/view-pdf/view-pdf'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useDocumentsEnabled } from '@app/hooks/settings/use-setting'; +import { Loader } from '@navikt/ds-react'; export const Documents = () => { const { value: shown = true } = useDocumentsEnabled(); diff --git a/frontend/src/components/documents/drag-context.tsx b/frontend/src/components/documents/drag-context.tsx index 3f701a59f..dea660a93 100644 --- a/frontend/src/components/documents/drag-context.tsx +++ b/frontend/src/components/documents/drag-context.tsx @@ -1,6 +1,6 @@ +import type { IArkivertDocument } from '@app/types/arkiverte-documents'; +import type { IMainDocument } from '@app/types/documents/documents'; import { createContext, useCallback, useState } from 'react'; -import { IArkivertDocument } from '@app/types/arkiverte-documents'; -import { IMainDocument } from '@app/types/documents/documents'; interface IDragAndDropContext { draggedJournalfoertDocuments: IArkivertDocument[]; diff --git a/frontend/src/components/documents/expanded-documents.tsx b/frontend/src/components/documents/expanded-documents.tsx index 187726ba4..20bafbcf6 100644 --- a/frontend/src/components/documents/expanded-documents.tsx +++ b/frontend/src/components/documents/expanded-documents.tsx @@ -1,7 +1,3 @@ -import { MinusIcon, PlusIcon } from '@navikt/aksel-icons'; -import { Button, Heading } from '@navikt/ds-react'; -import { useCallback, useEffect, useMemo, useRef } from 'react'; -import { styled } from 'styled-components'; import { DragAndDropContextElement } from '@app/components/documents/drag-context'; import { Fields, SIZES } from '@app/components/documents/journalfoerte-documents/grid'; import { ToggleExpandedButton } from '@app/components/documents/toggle-expand-button'; @@ -9,6 +5,10 @@ import { useIsExpanded } from '@app/components/documents/use-is-expanded'; import { useArchivedDocumentsColumns } from '@app/hooks/settings/use-archived-documents-setting'; import { useDocumentsWidth } from '@app/hooks/settings/use-setting'; import { pushEvent } from '@app/observability'; +import { MinusIcon, PlusIcon } from '@navikt/aksel-icons'; +import { Button, Heading } from '@navikt/ds-react'; +import { useCallback, useEffect, useMemo, useRef } from 'react'; +import { styled } from 'styled-components'; import { JournalfoerteDocuments } from './journalfoerte-documents/journalfoerte-documents'; import { NewDocuments } from './new-documents/new-documents'; import { UploadFile } from './upload-file/upload-file'; @@ -157,14 +157,14 @@ const DocumentsHeader = styled.div` flex-direction: row; justify-content: flex-start; align-items: flex-start; - column-gap: 8px; + column-gap: var(--a-spacing-2); position: relative; - padding-left: 16px; - padding-right: 16px; - padding-bottom: 8px; - padding-top: 8px; + padding-left: var(--a-spacing-4); + padding-right: var(--a-spacing-4); + padding-bottom: var(--a-spacing-2); + padding-top: var(--a-spacing-2); border-bottom: 1px solid #c6c2bf; - margin-bottom: 8px; + margin-bottom: var(--a-spacing-2); `; const ButtonContainer = styled.div` diff --git a/frontend/src/components/documents/journalfoerte-documents/add-logisk-vedlegg.tsx b/frontend/src/components/documents/journalfoerte-documents/add-logisk-vedlegg.tsx index 495cd0059..7209992ce 100644 --- a/frontend/src/components/documents/journalfoerte-documents/add-logisk-vedlegg.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/add-logisk-vedlegg.tsx @@ -1,10 +1,10 @@ +import { CreateLogiskVedlegg } from '@app/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/create'; +import { LogiskeVedleggListItemStyle } from '@app/components/documents/styled-components/attachment-list'; +import type { LogiskVedlegg } from '@app/types/arkiverte-documents'; import { PlusCircleIcon } from '@navikt/aksel-icons'; import { Button } from '@navikt/ds-react'; import { useCallback, useRef, useState } from 'react'; import { styled } from 'styled-components'; -import { CreateLogiskVedlegg } from '@app/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/create'; -import { LogiskeVedleggListItemStyle } from '@app/components/documents/styled-components/attachment-list'; -import { LogiskVedlegg } from '@app/types/arkiverte-documents'; interface Props { hasVedlegg: boolean; diff --git a/frontend/src/components/documents/journalfoerte-documents/calculate.ts b/frontend/src/components/documents/journalfoerte-documents/calculate.ts index e39e372b6..97352f500 100644 --- a/frontend/src/components/documents/journalfoerte-documents/calculate.ts +++ b/frontend/src/components/documents/journalfoerte-documents/calculate.ts @@ -5,7 +5,7 @@ import { LOGISK_VEDLEGG_SPACE, ROW_HEIGHT, } from '@app/components/documents/journalfoerte-documents/contants'; -import { IArkivertDocument, IArkivertDocumentVedlegg, LogiskVedlegg } from '@app/types/arkiverte-documents'; +import type { IArkivertDocument, IArkivertDocumentVedlegg, LogiskVedlegg } from '@app/types/arkiverte-documents'; interface Position { height: number; diff --git a/frontend/src/components/documents/journalfoerte-documents/document-list.tsx b/frontend/src/components/documents/journalfoerte-documents/document-list.tsx index b7bb6f1a2..817fd6c3b 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document-list.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document-list.tsx @@ -1,5 +1,3 @@ -import { Loader } from '@navikt/ds-react'; -import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; import { calculateDokumentPositions } from '@app/components/documents/journalfoerte-documents/calculate'; import { ExpandedDocument } from '@app/components/documents/journalfoerte-documents/document/expanded-document'; import { LogiskeVedleggList } from '@app/components/documents/journalfoerte-documents/logiske-vedlegg-list'; @@ -7,10 +5,12 @@ import { SelectContext } from '@app/components/documents/journalfoerte-documents import { VedleggList } from '@app/components/documents/journalfoerte-documents/vedlegg-list'; import { useIsExpanded } from '@app/components/documents/use-is-expanded'; import { clamp } from '@app/functions/clamp'; -import { IArkivertDocument } from '@app/types/arkiverte-documents'; +import type { IArkivertDocument } from '@app/types/arkiverte-documents'; +import { Loader } from '@navikt/ds-react'; +import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; import { Container, StyledDocumentList } from '../styled-components/document-list'; -import { Document } from './document/document'; import { StyledDocumentListItem } from './document-list-item'; +import { Document } from './document/document'; interface Props { documents: IArkivertDocument[]; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/attachments/attachment-list.tsx b/frontend/src/components/documents/journalfoerte-documents/document/attachments/attachment-list.tsx index a7a808c60..f2cc1e852 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/attachments/attachment-list.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/attachments/attachment-list.tsx @@ -1,5 +1,5 @@ -import { HTMLProps } from 'react'; -import { IArkivertDocument } from '@app/types/arkiverte-documents'; +import type { IArkivertDocument } from '@app/types/arkiverte-documents'; +import type { HTMLProps } from 'react'; import { StyledAttachmentListItem } from '../../../styled-components/attachment-list'; import { Attachment } from './attachment'; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/attachments/attachment.tsx b/frontend/src/components/documents/journalfoerte-documents/document/attachments/attachment.tsx index a08383c67..a7c989c96 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/attachments/attachment.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/attachments/attachment.tsx @@ -1,7 +1,3 @@ -import { ChevronDownDoubleIcon, ChevronDownIcon, ChevronUpDoubleIcon, ChevronUpIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; -import { memo, useCallback, useContext, useMemo, useRef } from 'react'; -import { styled } from 'styled-components'; import { createDragUI } from '@app/components/documents/create-drag-ui'; import { DragAndDropContext } from '@app/components/documents/drag-context'; import { @@ -22,7 +18,11 @@ import { useIsFeilregistrert } from '@app/hooks/use-is-feilregistrert'; import { useIsRol } from '@app/hooks/use-is-rol'; import { useIsSaksbehandler } from '@app/hooks/use-is-saksbehandler'; import { useGetArkiverteDokumenterQuery } from '@app/redux-api/oppgaver/queries/documents'; -import { IArkivertDocument, IArkivertDocumentVedlegg } from '@app/types/arkiverte-documents'; +import type { IArkivertDocument, IArkivertDocumentVedlegg } from '@app/types/arkiverte-documents'; +import { ChevronDownDoubleIcon, ChevronDownIcon, ChevronUpDoubleIcon, ChevronUpIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; +import { memo, useCallback, useContext, useMemo, useRef } from 'react'; +import { styled } from 'styled-components'; import { DocumentTitle } from '../shared/document-title'; import { IncludeDocument } from '../shared/include-document'; import { SelectRow } from '../shared/select-row'; @@ -84,7 +84,7 @@ export const Attachment = memo( [documents, dokumentInfoId, getSelectedDocuments, isSelected, journalpostId, setDraggedJournalfoertDocuments], ); - const disabled = !harTilgangTilArkivvariant || (!isSaksbehandler && !isRol) || isFeilregistrert; + const disabled = !(harTilgangTilArkivvariant && (isSaksbehandler || isRol)) || isFeilregistrert; const draggingIsEnabled = draggingEnabled && !disabled; const Icon = useMemo(() => { diff --git a/frontend/src/components/documents/journalfoerte-documents/document/avsender-mottaker.tsx b/frontend/src/components/documents/journalfoerte-documents/document/avsender-mottaker.tsx index 960a679e8..6bc347370 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/avsender-mottaker.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/avsender-mottaker.tsx @@ -1,9 +1,9 @@ +import { Fields } from '@app/components/documents/journalfoerte-documents/grid'; +import { useDocumentsAvsenderMottaker } from '@app/hooks/settings/use-setting'; +import { type IArkivertDocument, Journalposttype } from '@app/types/arkiverte-documents'; import { Button } from '@navikt/ds-react'; import { memo } from 'react'; import { styled } from 'styled-components'; -import { Fields } from '@app/components/documents/journalfoerte-documents/grid'; -import { useDocumentsAvsenderMottaker } from '@app/hooks/settings/use-setting'; -import { IArkivertDocument, Journalposttype } from '@app/types/arkiverte-documents'; import { formatAvsenderMottaker } from './format-avsender-mottaker'; type AvsenderMottakerProps = Pick; @@ -18,7 +18,7 @@ export const AvsenderMottaker = memo( return ( setValue([avsenderMottaker === null ? 'NONE' : (avsenderMottaker.id ?? 'UNKNOWN')])} + onClick={() => setValue([avsenderMottaker === null ? 'NONE' : avsenderMottaker.id ?? 'UNKNOWN'])} size="small" variant="tertiary" > diff --git a/frontend/src/components/documents/journalfoerte-documents/document/document-date.tsx b/frontend/src/components/documents/journalfoerte-documents/document/document-date.tsx index a718d5379..cac1798f8 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/document-date.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/document-date.tsx @@ -1,5 +1,5 @@ -import { HTMLAttributes } from 'react'; import { isoDateTimeToPrettyDate } from '@app/domain/date'; +import type { HTMLAttributes } from 'react'; interface Props extends Omit, 'dateTime'> { date: string | null; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/document.tsx b/frontend/src/components/documents/journalfoerte-documents/document/document.tsx index 895eeb211..0536f431b 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/document.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/document.tsx @@ -1,7 +1,3 @@ -import { ChevronDownDoubleIcon, ChevronDownIcon, ChevronUpDoubleIcon, ChevronUpIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; -import { useCallback, useContext, useMemo, useRef } from 'react'; -import { styled } from 'styled-components'; import { createDragUI } from '@app/components/documents/create-drag-ui'; import { DragAndDropContext } from '@app/components/documents/drag-context'; import { ExpandedColumns } from '@app/components/documents/journalfoerte-documents/document/expanded-columns'; @@ -13,7 +9,11 @@ import { useArchivedDocumentsColumns } from '@app/hooks/settings/use-archived-do import { useHasDocumentsAccess } from '@app/hooks/use-has-documents-access'; import { useIsRol } from '@app/hooks/use-is-rol'; import { useIsSaksbehandler } from '@app/hooks/use-is-saksbehandler'; -import { IArkivertDocument } from '@app/types/arkiverte-documents'; +import type { IArkivertDocument } from '@app/types/arkiverte-documents'; +import { ChevronDownDoubleIcon, ChevronDownIcon, ChevronUpDoubleIcon, ChevronUpIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; +import { useCallback, useContext, useMemo, useRef } from 'react'; +import { styled } from 'styled-components'; import { DocumentTitle } from './shared/document-title'; import { IncludeDocument } from './shared/include-document'; @@ -80,7 +80,7 @@ export const Document = ({ [document, getSelectedDocuments, isSelected, setDraggedJournalfoertDocuments], ); - const disabled = (!isSaksbehandler && !isRol) || !harTilgangTilArkivvariant; + const disabled = !((isSaksbehandler || isRol) && harTilgangTilArkivvariant); const draggingIsEnabled = draggingEnabled && harTilgangTilArkivvariant && (isRol || hasDocumentsAccess); return ( diff --git a/frontend/src/components/documents/journalfoerte-documents/document/expanded-columns.tsx b/frontend/src/components/documents/journalfoerte-documents/document/expanded-columns.tsx index b924dc923..d1e9d51e0 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/expanded-columns.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/expanded-columns.tsx @@ -1,12 +1,12 @@ -import { InformationSquareIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { DocumentDate } from '@app/components/documents/journalfoerte-documents/document/document-date'; import { Fields } from '@app/components/documents/journalfoerte-documents/grid'; import { useArchivedDocumentsColumns } from '@app/hooks/settings/use-archived-documents-setting'; import { useDocumentsFilterSaksId, useDocumentsFilterTema } from '@app/hooks/settings/use-setting'; import { useFullTemaNameFromIdOrLoading } from '@app/hooks/use-kodeverk-ids'; -import { IArkivertDocument } from '@app/types/arkiverte-documents'; +import type { IArkivertDocument } from '@app/types/arkiverte-documents'; +import { InformationSquareIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; +import { styled } from 'styled-components'; import { AvsenderMottaker } from './avsender-mottaker'; import { JournalposttypeTag } from './journalposttype'; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/expanded-document.tsx b/frontend/src/components/documents/journalfoerte-documents/document/expanded-document.tsx index f46b28dd0..e853a53b3 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/expanded-document.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/expanded-document.tsx @@ -1,7 +1,7 @@ +import { EXPANDED_HEIGHT } from '@app/components/documents/journalfoerte-documents/contants'; +import { type IArkivertDocument, Journalstatus } from '@app/types/arkiverte-documents'; import { CopyButton, Detail, HelpText, Label } from '@navikt/ds-react'; import { styled } from 'styled-components'; -import { EXPANDED_HEIGHT } from '@app/components/documents/journalfoerte-documents/contants'; -import { IArkivertDocument, Journalstatus } from '@app/types/arkiverte-documents'; import { Timeline } from './timeline/timeline'; interface ExpandedDocumentProps { @@ -54,7 +54,7 @@ const MottattHelpText = () => ( ); const HelpTextContent = styled.p` - font-size: 16px; + font-size: var(--a-spacing-4); white-space: normal; line-height: var(--a-font-line-height-medium); margin: 0; @@ -63,20 +63,20 @@ const HelpTextContent = styled.p` const StyledExpandedDocument = styled.div` display: flex; flex-direction: column; - row-gap: 16px; - padding: 8px; + row-gap: var(--a-spacing-4); + padding: var(--a-spacing-2); height: ${EXPANDED_HEIGHT}px; - width: calc(100% - 16px); + width: calc(100% - var(--a-spacing-4)); overflow-x: auto; border-left: 1px solid var(--a-border-subtle); - padding-left: 16px; - margin-left: 16px; + padding-left: var(--a-spacing-4); + margin-left: var(--a-spacing-4); `; const TopRow = styled.div` display: grid; grid-template-columns: repeat(4, min-content); - grid-column-gap: 16px; + grid-column-gap: var(--a-spacing-4); white-space: nowrap; position: sticky; left: 0; @@ -91,7 +91,7 @@ const Section = styled.section` const MetadataRow = styled.div` display: flex; flex-direction: row; - column-gap: 32px; + column-gap: var(--a-spacing-8); `; const NowrapDetail = styled(Detail)` diff --git a/frontend/src/components/documents/journalfoerte-documents/document/format-avsender-mottaker.ts b/frontend/src/components/documents/journalfoerte-documents/document/format-avsender-mottaker.ts index 4feeec08f..75b3f7491 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/format-avsender-mottaker.ts +++ b/frontend/src/components/documents/journalfoerte-documents/document/format-avsender-mottaker.ts @@ -1,4 +1,4 @@ -import { AvsenderMottaker } from '@app/types/arkiverte-documents'; +import type { AvsenderMottaker } from '@app/types/arkiverte-documents'; export const formatAvsenderMottaker = (avsenderMottaker: AvsenderMottaker | null): string => { if (avsenderMottaker === null) { diff --git a/frontend/src/components/documents/journalfoerte-documents/document/journalposttype.tsx b/frontend/src/components/documents/journalfoerte-documents/document/journalposttype.tsx index 0bbaf9c4e..99965ad94 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/journalposttype.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/journalposttype.tsx @@ -1,8 +1,8 @@ +import { Fields } from '@app/components/documents/journalfoerte-documents/grid'; +import { Journalposttype } from '@app/types/arkiverte-documents'; import { Tag } from '@navikt/ds-react'; import { memo } from 'react'; import { styled } from 'styled-components'; -import { Fields } from '@app/components/documents/journalfoerte-documents/grid'; -import { Journalposttype } from '@app/types/arkiverte-documents'; export const JournalposttypeTag = memo( ({ type }: { type: Journalposttype | null }) => ( diff --git a/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/create.tsx b/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/create.tsx index 2dbe958f8..94d5870d6 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/create.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/create.tsx @@ -1,9 +1,9 @@ -import { skipToken } from '@reduxjs/toolkit/query'; -import { useCallback } from 'react'; import { EditLogiskVedlegg } from '@app/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/edit'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { useAddLogiskVedleggMutation } from '@app/redux-api/logiske-vedlegg'; -import { LogiskVedlegg } from '@app/types/arkiverte-documents'; +import type { LogiskVedlegg } from '@app/types/arkiverte-documents'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useCallback } from 'react'; interface Props { dokumentInfoId: string; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/edit.tsx b/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/edit.tsx index 6a5b2d646..2690a5f04 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/edit.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/edit.tsx @@ -1,10 +1,10 @@ -import { Tooltip } from '@navikt/ds-react'; -import { useCallback, useEffect, useRef, useState } from 'react'; -import { styled } from 'styled-components'; import { EditTag } from '@app/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/styled-components'; import { Suggestions } from '@app/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/suggestions-dropdown'; import { useSuggestions } from '@app/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/use-suggestions'; -import { LogiskVedlegg } from '@app/types/arkiverte-documents'; +import type { LogiskVedlegg } from '@app/types/arkiverte-documents'; +import { Tooltip } from '@navikt/ds-react'; +import { useCallback, useEffect, useRef, useState } from 'react'; +import { styled } from 'styled-components'; interface Props { initialValue?: string; @@ -35,7 +35,7 @@ export const EditLogiskVedlegg = ({ const { suggestions, lastIndex } = useSuggestions({ logiskeVedlegg, customValue, temaId }); const setCaretAtEnd = useCallback(() => { - if (ref.current !== null && ref.current.isContentEditable) { + if (ref.current?.isContentEditable) { const selection = window.getSelection(); if (selection !== null) { @@ -137,7 +137,7 @@ export const EditLogiskVedlegg = ({ ); useEffect(() => { - setContent(activeIndex === -1 ? customValueRef.current : (suggestions[activeIndex] ?? customValueRef.current)); + setContent(activeIndex === -1 ? customValueRef.current : suggestions[activeIndex] ?? customValueRef.current); setCaretAtEnd(); }, [suggestions, activeIndex, setCaretAtEnd, setContent]); diff --git a/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/editable.tsx b/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/editable.tsx index ba8ff63cf..659a5dddd 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/editable.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/editable.tsx @@ -1,13 +1,13 @@ +import { EditLogiskVedlegg } from '@app/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/edit'; +import { ReadOnlyTag } from '@app/components/documents/journalfoerte-documents/document/logiske-vedlegg/shared/vedlegg-style'; +import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; +import { useRemoveLogiskVedleggMutation, useUpdateLogiskVedleggMutation } from '@app/redux-api/logiske-vedlegg'; +import type { LogiskVedlegg } from '@app/types/arkiverte-documents'; import { FilesIcon, PencilIcon, TrashIcon } from '@navikt/aksel-icons'; import { Button, CopyButton, Tooltip } from '@navikt/ds-react'; import { skipToken } from '@reduxjs/toolkit/query'; import { useCallback, useRef, useState } from 'react'; import { styled } from 'styled-components'; -import { EditLogiskVedlegg } from '@app/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/edit'; -import { ReadOnlyTag } from '@app/components/documents/journalfoerte-documents/document/logiske-vedlegg/shared/vedlegg-style'; -import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; -import { useRemoveLogiskVedleggMutation, useUpdateLogiskVedleggMutation } from '@app/redux-api/logiske-vedlegg'; -import { LogiskVedlegg } from '@app/types/arkiverte-documents'; interface Props { dokumentInfoId: string; @@ -132,7 +132,7 @@ const Title = styled.span` const AbsoluteTitle = styled.span` position: absolute; - left: 8px; + left: var(--a-spacing-2); right: 80px; overflow: hidden; text-overflow: ellipsis; @@ -147,7 +147,7 @@ const ButtonContainer = styled.div` column-gap: 0; opacity: ${({ $isFocused }) => ($isFocused ? 1 : 0)}; position: absolute; - right: 8px; + right: var(--a-spacing-2); user-select: none; `; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/styled-components.ts b/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/styled-components.ts index d9abe2a47..3a11f24e7 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/styled-components.ts +++ b/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/styled-components.ts @@ -1,9 +1,9 @@ -import { styled } from 'styled-components'; import { ReadOnlyTag } from '@app/components/documents/journalfoerte-documents/document/logiske-vedlegg/shared/vedlegg-style'; +import { styled } from 'styled-components'; export const EditTag = styled(ReadOnlyTag)` max-width: 200px; - background-color: white; + background-color: var(--a-bg-default); &:empty::before { content: attr(aria-placeholder); diff --git a/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/suggestions-dropdown.tsx b/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/suggestions-dropdown.tsx index f90d3094b..1c97fc061 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/suggestions-dropdown.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/suggestions-dropdown.tsx @@ -62,7 +62,7 @@ const Container = styled.ul` left: 0; right: 0; width: fit-content; - background-color: white; + background-color: var(--a-bg-default); border-radius: var(--a-border-radius-medium); box-shadow: var(--a-shadow-medium); padding: 0; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/use-suggestions.ts b/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/use-suggestions.ts index ac291aa10..ba2ab009a 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/use-suggestions.ts +++ b/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/use-suggestions.ts @@ -1,7 +1,7 @@ -import { useMemo } from 'react'; import { getSuggestions } from '@app/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/suggestions'; import { useTemaName } from '@app/hooks/use-tema-name'; -import { LogiskVedlegg } from '@app/types/arkiverte-documents'; +import type { LogiskVedlegg } from '@app/types/arkiverte-documents'; +import { useMemo } from 'react'; interface State { suggestions: string[]; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/shared/vedlegg-style.ts b/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/shared/vedlegg-style.ts index e482e6e04..8ccf4c2d3 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/shared/vedlegg-style.ts +++ b/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/shared/vedlegg-style.ts @@ -4,15 +4,15 @@ import { styled } from 'styled-components'; export const ReadOnlyTag = styled(Tag)` display: flex; flex-direction: row; - column-gap: 4px; + column-gap: var(--a-spacing-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; border-radius: var(--a-border-radius-xlarge); position: relative; - padding-left: 8px; - padding-right: 8px; + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); text-align: left; justify-content: left; max-width: 100%; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/shared/document-title-actions.tsx b/frontend/src/components/documents/journalfoerte-documents/document/shared/document-title-actions.tsx index b9c0f1421..a26161715 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/shared/document-title-actions.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/shared/document-title-actions.tsx @@ -1,7 +1,7 @@ +import { StyledDocumentTitle } from '@app/components/documents/journalfoerte-documents/document/shared/document-title-style'; import { CheckmarkIcon, PencilIcon } from '@navikt/aksel-icons'; import { Button, CopyButton } from '@navikt/ds-react'; import { styled } from 'styled-components'; -import { StyledDocumentTitle } from '@app/components/documents/journalfoerte-documents/document/shared/document-title-style'; interface ConfirmProps { setEditMode: (editMode: boolean) => void; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/shared/document-title-style.tsx b/frontend/src/components/documents/journalfoerte-documents/document/shared/document-title-style.tsx index b22dc6147..c0038c765 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/shared/document-title-style.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/shared/document-title-style.tsx @@ -1,12 +1,12 @@ -import { styled } from 'styled-components'; import { Fields } from '@app/components/documents/journalfoerte-documents/grid'; +import { styled } from 'styled-components'; export const StyledDocumentTitle = styled.h1` grid-area: ${Fields.Title}; display: flex; align-items: center; flex-direction: row; - column-gap: 8px; + column-gap: var(--a-spacing-2); font-size: 18px; font-weight: normal; margin: 0; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/shared/document-title.tsx b/frontend/src/components/documents/journalfoerte-documents/document/shared/document-title.tsx index 26395346d..8bfaeb418 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/shared/document-title.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/shared/document-title.tsx @@ -1,12 +1,10 @@ -import { skipToken } from '@reduxjs/toolkit/query'; -import { memo, useCallback, useContext, useMemo, useState } from 'react'; import { DragAndDropContext } from '@app/components/documents/drag-context'; import { StyledDocumentTitle } from '@app/components/documents/journalfoerte-documents/document/shared/document-title-style'; import { SetFilename } from '@app/components/documents/set-filename'; import { TabContext } from '@app/components/documents/tab-context'; import { useIsTabOpen } from '@app/components/documents/use-is-tab-open'; import { toast } from '@app/components/toast/store'; -import { IShownDocument } from '@app/components/view-pdf/types'; +import type { IShownDocument } from '@app/components/view-pdf/types'; import { getJournalfoertDocumentTabId, getJournalfoertDocumentTabUrl } from '@app/domain/tabbed-document-url'; import { areArraysEqual } from '@app/functions/are-arrays-equal'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; @@ -14,6 +12,8 @@ import { useDocumentsPdfViewed } from '@app/hooks/settings/use-setting'; import { MouseButtons } from '@app/keys'; import { useSetTitleMutation } from '@app/redux-api/journalposter'; import { DocumentTypeEnum } from '@app/types/documents/documents'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { memo, useCallback, useContext, useMemo, useState } from 'react'; import { EllipsisTitle, StyledDocumentLink } from '../../../styled-components/document-link'; import { ConfirmEditButton, DocumentTitleActions } from './document-title-actions'; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/shared/include-document.tsx b/frontend/src/components/documents/journalfoerte-documents/document/shared/include-document.tsx index 15400568f..795ee6b10 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/shared/include-document.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/shared/include-document.tsx @@ -1,12 +1,12 @@ +import { Fields } from '@app/components/documents/new-documents/grid'; +import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; +import { useCanEdit } from '@app/hooks/use-can-edit'; +import { useCheckDocument } from '@app/hooks/use-check-document'; import { FolderPlusIcon } from '@navikt/aksel-icons'; import { Button } from '@navikt/ds-react'; import { skipToken } from '@reduxjs/toolkit/query'; import { memo } from 'react'; import { styled } from 'styled-components'; -import { Fields } from '@app/components/documents/new-documents/grid'; -import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; -import { useCanEdit } from '@app/hooks/use-can-edit'; -import { useCheckDocument } from '@app/hooks/use-check-document'; interface Props { name: string; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/styled-journalfoert-document.tsx b/frontend/src/components/documents/journalfoerte-documents/document/styled-journalfoert-document.tsx index 995e86736..03f840ee5 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/styled-journalfoert-document.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/styled-journalfoert-document.tsx @@ -1,4 +1,3 @@ -import { css, styled } from 'styled-components'; import { Fields, documentsGridCSS, @@ -11,7 +10,8 @@ import { getHoverBackgroundColor, } from '@app/components/documents/styled-components/document'; import { isNotNull } from '@app/functions/is-not-type-guards'; -import { ArchivedDocumentsColumn } from '@app/hooks/settings/use-archived-documents-setting'; +import type { ArchivedDocumentsColumn } from '@app/hooks/settings/use-archived-documents-setting'; +import { css, styled } from 'styled-components'; const COLLAPSED_JOURNALFOERTE_DOCUMENT_FIELDS = [Fields.SelectRow, Fields.ToggleVedlegg, Fields.Title, Fields.Action]; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/timeline/ekspedert-items.tsx b/frontend/src/components/documents/journalfoerte-documents/document/timeline/ekspedert-items.tsx index 988bd0b17..c3c44eca0 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/timeline/ekspedert-items.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/timeline/ekspedert-items.tsx @@ -1,3 +1,5 @@ +import { getVarselData } from '@app/components/documents/journalfoerte-documents/document/timeline/helpers'; +import { type IArkivertDocument, Kanal, type TimelineTypes } from '@app/types/arkiverte-documents'; import { BellIcon, EnvelopeClosedIcon, @@ -7,8 +9,6 @@ import { } from '@navikt/aksel-icons'; import { CopyButton } from '@navikt/ds-react'; import { styled } from 'styled-components'; -import { getVarselData } from '@app/components/documents/journalfoerte-documents/document/timeline/helpers'; -import { IArkivertDocument, Kanal, TimelineTypes } from '@app/types/arkiverte-documents'; import { StyledHeading } from './styled-components'; import { RelevantDateTimelineItem, TimelineItem } from './timeline-item'; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/timeline/helpers.tsx b/frontend/src/components/documents/journalfoerte-documents/document/timeline/helpers.tsx index 153306804..8c184ad76 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/timeline/helpers.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/timeline/helpers.tsx @@ -1,3 +1,4 @@ +import { TimelineTypes, type Utsendingsinfo } from '@app/types/arkiverte-documents'; import { ArrowUndoIcon, EnvelopeClosedIcon, @@ -8,7 +9,6 @@ import { MobileSmallIcon, PrinterSmallIcon, } from '@navikt/aksel-icons'; -import { TimelineTypes, Utsendingsinfo } from '@app/types/arkiverte-documents'; import { StyledEmailContent, StyledLabel, StyledSmsContent } from './styled-components'; export const DATOTYPE_NAME: Record = { diff --git a/frontend/src/components/documents/journalfoerte-documents/document/timeline/styled-components.ts b/frontend/src/components/documents/journalfoerte-documents/document/timeline/styled-components.ts index 7142de704..128b7b2a6 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/timeline/styled-components.ts +++ b/frontend/src/components/documents/journalfoerte-documents/document/timeline/styled-components.ts @@ -5,14 +5,14 @@ import { styled } from 'styled-components'; export const StyledHeading = styled(Heading)` display: flex; align-items: center; - gap: 4px; + gap: var(--a-spacing-1); `; export const StyledSmsContent = styled.blockquote` - border-left: 4px solid var(--a-gray-200); - padding-left: 4px; + border-left: var(--a-spacing-1) solid var(--a-gray-200); + padding-left: var(--a-spacing-1); border-radius: var(--a-border-radius-medium); - margin-top: 8px; + margin-top: var(--a-spacing-2); margin-left: 0; margin-right: 0; margin-bottom: 0; @@ -27,7 +27,7 @@ export const StyledEmailContent = styled(StyledSmsContent)` h2, h3 { margin-top: 0; - margin-bottom: 4px; + margin-bottom: var(--a-spacing-1); } h1 { @@ -42,12 +42,12 @@ export const StyledEmailContent = styled(StyledSmsContent)` h4, h5, h6 { - font-size: 16px; + font-size: var(--a-spacing-4); } ol, ul { - padding-left: 16px; + padding-left: var(--a-spacing-4); } `; @@ -59,8 +59,8 @@ export const StyledTimelineItem = styled.li` position: relative; display: flex; flex-direction: column; - row-gap: 4px; - padding: 8px; + row-gap: var(--a-spacing-1); + padding: var(--a-spacing-2); border: 1px solid var(--a-border-default); border-radius: var(--a-border-radius-medium); background-color: ${({ $color }) => $color}; @@ -72,11 +72,11 @@ export const NextArrow = styled(ChevronRightIcon)` top: 50%; left: 100%; transform: translateY(-50%) translateX(-22.5%); - width: 16px; + width: var(--a-spacing-4); `; export const StyledLabel = styled(Label)` display: flex; align-items: center; - gap: 4px; + gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/timeline/timeline-item.tsx b/frontend/src/components/documents/journalfoerte-documents/document/timeline/timeline-item.tsx index d14dbc527..314bfb927 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/timeline/timeline-item.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/timeline/timeline-item.tsx @@ -1,9 +1,9 @@ +import { isoDateTimeToPretty } from '@app/domain/date'; +import type { TimelineTypes } from '@app/types/arkiverte-documents'; import { XMarkOctagonIcon } from '@navikt/aksel-icons'; import { Button, Detail, Popover } from '@navikt/ds-react'; import { useRef, useState } from 'react'; import { styled } from 'styled-components'; -import { isoDateTimeToPretty } from '@app/domain/date'; -import { TimelineTypes } from '@app/types/arkiverte-documents'; import { BACKGROUND_COLOR, DATOTYPE_NAME, ICON } from './helpers'; import { NextArrow, StyledLabel, StyledTimelineItem } from './styled-components'; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/timeline/timeline.tsx b/frontend/src/components/documents/journalfoerte-documents/document/timeline/timeline.tsx index 41f68d499..347943cf2 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/timeline/timeline.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/timeline/timeline.tsx @@ -1,5 +1,5 @@ +import { type IArkivertDocument, Journalposttype, TimelineTypes } from '@app/types/arkiverte-documents'; import { styled } from 'styled-components'; -import { IArkivertDocument, Journalposttype, TimelineTypes } from '@app/types/arkiverte-documents'; import { EkspedertItems } from './ekspedert-items'; import { RelevantDateTimelineItem } from './timeline-item'; @@ -36,6 +36,6 @@ const TimelineContainer = styled.ol` display: flex; flex-direction: row; flex-wrap: nowrap; - gap: 8px; + gap: var(--a-spacing-2); padding: 0; `; diff --git a/frontend/src/components/documents/journalfoerte-documents/grid.ts b/frontend/src/components/documents/journalfoerte-documents/grid.ts index 74b9ce12c..2ce2e1585 100644 --- a/frontend/src/components/documents/journalfoerte-documents/grid.ts +++ b/frontend/src/components/documents/journalfoerte-documents/grid.ts @@ -2,7 +2,7 @@ import { css } from 'styled-components'; export const documentsGridCSS = css` display: grid; - grid-column-gap: 8px; + grid-column-gap: var(--a-spacing-2); align-items: center; padding-left: 6px; padding-right: 0; diff --git a/frontend/src/components/documents/journalfoerte-documents/header/date-filter.tsx b/frontend/src/components/documents/journalfoerte-documents/header/date-filter.tsx index 001e083b4..816802289 100644 --- a/frontend/src/components/documents/journalfoerte-documents/header/date-filter.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/header/date-filter.tsx @@ -1,10 +1,10 @@ +import { DatePickerRange } from '@app/components/date-picker-range/date-picker-range'; +import type { DateRangeSetting } from '@app/hooks/settings/use-setting'; import { Button } from '@navikt/ds-react'; import { formatISO, parseISO } from 'date-fns'; -import { DateRange } from 'react-day-picker'; +import type { DateRange } from 'react-day-picker'; import { styled } from 'styled-components'; -import { DatePickerRange } from '@app/components/date-picker-range/date-picker-range'; -import { DateRangeSetting } from '@app/hooks/settings/use-setting'; -import { Fields } from '../grid'; +import type { Fields } from '../grid'; interface Props extends DateRangeSetting { label: string; @@ -13,7 +13,7 @@ interface Props extends DateRangeSetting { const StyledButton = styled(Button)` border: 1px solid var(--a-border-default); - height: 32px; + height: var(--a-spacing-8); font-weight: normal; .navds-label { diff --git a/frontend/src/components/documents/journalfoerte-documents/header/expanded-headers.tsx b/frontend/src/components/documents/journalfoerte-documents/header/expanded-headers.tsx index 56e8ade3f..5582442bf 100644 --- a/frontend/src/components/documents/journalfoerte-documents/header/expanded-headers.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/header/expanded-headers.tsx @@ -1,7 +1,3 @@ -import { ArrowDownIcon, ArrowUpIcon, ArrowsUpDownIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; -import { useMemo } from 'react'; -import { styled } from 'styled-components'; import { Fields } from '@app/components/documents/journalfoerte-documents/grid'; import { FilterDropdown } from '@app/components/filter-dropdown/filter-dropdown'; import { kodeverkValuesToDropdownOptions } from '@app/components/filter-dropdown/functions'; @@ -11,8 +7,8 @@ import { useArchivedDocumentsColumns, } from '@app/hooks/settings/use-archived-documents-setting'; import { - ArchivedDocumentsSort, - ArchivedDocumentsSortColumn, + type ArchivedDocumentsSort, + type ArchivedDocumentsSortColumn, useDocumentsFilterDatoOpprettet, useDocumentsFilterDatoRegSendt, } from '@app/hooks/settings/use-setting'; @@ -20,8 +16,12 @@ import { useAllTemaer } from '@app/hooks/use-all-temaer'; import { useGetArkiverteDokumenterQuery } from '@app/redux-api/oppgaver/queries/documents'; import { Journalposttype } from '@app/types/arkiverte-documents'; import { SortOrder } from '@app/types/sort'; +import { ArrowDownIcon, ArrowUpIcon, ArrowsUpDownIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; +import { useMemo } from 'react'; +import { styled } from 'styled-components'; import { DateFilter } from './date-filter'; -import { useFilters } from './use-filters'; +import type { useFilters } from './use-filters'; interface ExpandedHeadersProps extends ReturnType { listHeight: number; diff --git a/frontend/src/components/documents/journalfoerte-documents/header/filter-helpers.ts b/frontend/src/components/documents/journalfoerte-documents/header/filter-helpers.ts index 33b29265e..ec6a4bd5e 100644 --- a/frontend/src/components/documents/journalfoerte-documents/header/filter-helpers.ts +++ b/frontend/src/components/documents/journalfoerte-documents/header/filter-helpers.ts @@ -1,10 +1,10 @@ -import { isAfter, isBefore, isValid, isWithinInterval, parseISO } from 'date-fns'; -import { useEffect, useState } from 'react'; import { fuzzySearch } from '@app/components/smart-editor/gode-formuleringer/fuzzy-search'; import { ArchivedDocumentsColumn } from '@app/hooks/settings/use-archived-documents-setting'; -import { ArchivedDocumentsSort, DateRange } from '@app/hooks/settings/use-setting'; -import { IArkivertDocument, IArkivertDocumentVedlegg } from '@app/types/arkiverte-documents'; +import type { ArchivedDocumentsSort, DateRange } from '@app/hooks/settings/use-setting'; +import type { IArkivertDocument, IArkivertDocumentVedlegg } from '@app/types/arkiverte-documents'; import { SortOrder } from '@app/types/sort'; +import { isAfter, isBefore, isValid, isWithinInterval, parseISO } from 'date-fns'; +import { useEffect, useState } from 'react'; import { splitQuery } from './../../../smart-editor/gode-formuleringer/split-query'; interface ScoredArkvertDocumentVedlegg extends IArkivertDocumentVedlegg { @@ -37,10 +37,10 @@ export const useFilteredDocuments = ( (selectedTypes.length === 0 || (journalposttype !== null && selectedTypes.includes(journalposttype))) && (selectedAvsenderMottakere.length === 0 || selectedAvsenderMottakere.includes( - avsenderMottaker === null ? 'NONE' : (avsenderMottaker.id ?? 'UNKNOWN'), + avsenderMottaker === null ? 'NONE' : avsenderMottaker.id ?? 'UNKNOWN', )) && (selectedSaksIds.length === 0 || - selectedSaksIds.includes(sak === null ? 'NONE' : (sak.fagsakId ?? 'UNKNOWN'))) && + selectedSaksIds.includes(sak === null ? 'NONE' : sak.fagsakId ?? 'UNKNOWN')) && (selectedDateRange === undefined || checkDateInterval(datoOpprettet, selectedDateRange)) && (onlyIncluded === false || valgt || vedlegg.some((v) => v.valgt)), ); @@ -112,7 +112,7 @@ const checkDateInterval = (dateString: string, [from, to]: DateRange): boolean = const validStart = start !== null && isValid(start); const validEnd = end !== null && isValid(end); - if (!validStart && !validEnd) { + if (!(validStart || validEnd)) { return true; } diff --git a/frontend/src/components/documents/journalfoerte-documents/header/header.tsx b/frontend/src/components/documents/journalfoerte-documents/header/header.tsx index 8fd696555..504e0134d 100644 --- a/frontend/src/components/documents/journalfoerte-documents/header/header.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/header/header.tsx @@ -1,6 +1,3 @@ -import { ChevronDownDoubleIcon, ChevronUpDoubleIcon } from '@navikt/aksel-icons'; -import { Button, Tooltip } from '@navikt/ds-react'; -import { css, styled } from 'styled-components'; import { Fields, documentsGridCSS, @@ -15,11 +12,14 @@ import { listHeaderCSS } from '@app/components/documents/styled-components/list- import { useIsExpanded } from '@app/components/documents/use-is-expanded'; import { isNotNull } from '@app/functions/is-not-type-guards'; import { - ArchivedDocumentsColumn, + type ArchivedDocumentsColumn, useArchivedDocumentsColumns, } from '@app/hooks/settings/use-archived-documents-setting'; -import { IJournalfoertDokumentId } from '@app/types/oppgave-common'; -import { useFilters } from './use-filters'; +import type { IJournalfoertDokumentId } from '@app/types/oppgave-common'; +import { ChevronDownDoubleIcon, ChevronUpDoubleIcon } from '@navikt/aksel-icons'; +import { Button, Tooltip } from '@navikt/ds-react'; +import { css, styled } from 'styled-components'; +import type { useFilters } from './use-filters'; interface Props { documentIdList: string[]; @@ -110,7 +110,7 @@ interface StyledListHeaderProps { const StyledListHeader = styled.div` ${listHeaderCSS} - padding-top: 4px; + padding-top: var(--a-spacing-1); ${documentsGridCSS} ${getGridCss} white-space: nowrap; diff --git a/frontend/src/components/documents/journalfoerte-documents/header/included-filter.tsx b/frontend/src/components/documents/journalfoerte-documents/header/included-filter.tsx index cb74a033e..c55eeefba 100644 --- a/frontend/src/components/documents/journalfoerte-documents/header/included-filter.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/header/included-filter.tsx @@ -1,7 +1,7 @@ -import { Checkbox } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { Fields } from '@app/components/documents/journalfoerte-documents/grid'; import { useDocumentsOnlyIncluded } from '@app/hooks/settings/use-setting'; +import { Checkbox } from '@navikt/ds-react'; +import { styled } from 'styled-components'; export const IncludedFilter = () => { const { value = false, setValue } = useDocumentsOnlyIncluded(); diff --git a/frontend/src/components/documents/journalfoerte-documents/header/select-all.tsx b/frontend/src/components/documents/journalfoerte-documents/header/select-all.tsx index 88afe96b8..dcc7922d1 100644 --- a/frontend/src/components/documents/journalfoerte-documents/header/select-all.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/header/select-all.tsx @@ -1,8 +1,8 @@ -import { Checkbox, Tooltip } from '@navikt/ds-react'; -import { useCallback, useContext, useMemo } from 'react'; import { Fields } from '@app/components/documents/journalfoerte-documents/grid'; import { SelectContext } from '@app/components/documents/journalfoerte-documents/select-context/select-context'; -import { IJournalfoertDokumentId } from '@app/types/oppgave-common'; +import type { IJournalfoertDokumentId } from '@app/types/oppgave-common'; +import { Checkbox, Tooltip } from '@navikt/ds-react'; +import { useCallback, useContext, useMemo } from 'react'; interface Props { allSelectableDocuments: IJournalfoertDokumentId[]; diff --git a/frontend/src/components/documents/journalfoerte-documents/header/use-filters.ts b/frontend/src/components/documents/journalfoerte-documents/header/use-filters.ts index 4fa41c343..03c7371dc 100644 --- a/frontend/src/components/documents/journalfoerte-documents/header/use-filters.ts +++ b/frontend/src/components/documents/journalfoerte-documents/header/use-filters.ts @@ -1,8 +1,7 @@ -import { useCallback, useMemo, useState } from 'react'; import { useIsExpanded } from '@app/components/documents/use-is-expanded'; import { ArchivedDocumentsColumn } from '@app/hooks/settings/use-archived-documents-setting'; import { - ArchivedDocumentsSort, + type ArchivedDocumentsSort, useDocumentsAvsenderMottaker, useDocumentsFilterDatoOpprettet, useDocumentsFilterSaksId, @@ -11,8 +10,9 @@ import { useDocumentsOnlyIncluded, useDocumentsSort, } from '@app/hooks/settings/use-setting'; -import { IArkivertDocument, Journalposttype } from '@app/types/arkiverte-documents'; +import type { IArkivertDocument, Journalposttype } from '@app/types/arkiverte-documents'; import { SortOrder } from '@app/types/sort'; +import { useCallback, useMemo, useState } from 'react'; import { useFilteredDocuments } from './filter-helpers'; const EMPTY_FILTER: string[] = []; diff --git a/frontend/src/components/documents/journalfoerte-documents/heading/heading.tsx b/frontend/src/components/documents/journalfoerte-documents/heading/heading.tsx index 13ec3cb7c..4043a82f0 100644 --- a/frontend/src/components/documents/journalfoerte-documents/heading/heading.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/heading/heading.tsx @@ -1,9 +1,9 @@ +import { useIsExpanded } from '@app/components/documents/use-is-expanded'; import { ArrowCirclepathIcon } from '@navikt/aksel-icons'; import { Button, Heading } from '@navikt/ds-react'; import { memo, useMemo } from 'react'; import { styled } from 'styled-components'; -import { useIsExpanded } from '@app/components/documents/use-is-expanded'; -import { InvisibleWarning, InvisibleWarningProps } from './invisible-warning'; +import { InvisibleWarning, type InvisibleWarningProps } from './invisible-warning'; import { Menu } from './menu'; interface RemoveFiltersProps { @@ -74,7 +74,7 @@ const RemoveFilters = ({ resetFilters, noFiltersActive }: RemoveFiltersProps) => const LeftGroup = styled.div` display: flex; flex-direction: row; - gap: 8px; + gap: var(--a-spacing-2); align-items: center; `; @@ -83,8 +83,8 @@ const Container = styled.div<{ $isExpanded: boolean }>` flex-direction: ${({ $isExpanded }) => ($isExpanded ? 'row' : 'column')}; align-items: ${({ $isExpanded }) => ($isExpanded ? 'center' : 'flex-start')}; justify-content: space-between; - padding-bottom: 4px; - column-gap: 16px; - row-gap: 8px; + padding-bottom: var(--a-spacing-1); + column-gap: var(--a-spacing-4); + row-gap: var(--a-spacing-2); flex-shrink: 0; `; diff --git a/frontend/src/components/documents/journalfoerte-documents/heading/invisible-warning.tsx b/frontend/src/components/documents/journalfoerte-documents/heading/invisible-warning.tsx index 76f23b943..145a72f83 100644 --- a/frontend/src/components/documents/journalfoerte-documents/heading/invisible-warning.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/heading/invisible-warning.tsx @@ -1,10 +1,10 @@ +import { SelectContext } from '@app/components/documents/journalfoerte-documents/select-context/select-context'; +import { useIsExpanded } from '@app/components/documents/use-is-expanded'; +import type { IArkivertDocument } from '@app/types/arkiverte-documents'; import { EyeObfuscatedIcon } from '@navikt/aksel-icons'; import { Alert, Button, Tooltip } from '@navikt/ds-react'; import { useContext, useMemo } from 'react'; import { styled } from 'styled-components'; -import { SelectContext } from '@app/components/documents/journalfoerte-documents/select-context/select-context'; -import { useIsExpanded } from '@app/components/documents/use-is-expanded'; -import { IArkivertDocument } from '@app/types/arkiverte-documents'; export interface InvisibleWarningProps { allDocuments: IArkivertDocument[]; @@ -85,5 +85,5 @@ const StyledAlert = styled(Alert)` const AlertContent = styled.div` display: flex; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/documents/journalfoerte-documents/heading/menu.tsx b/frontend/src/components/documents/journalfoerte-documents/heading/menu.tsx index 01688de94..85376efe3 100644 --- a/frontend/src/components/documents/journalfoerte-documents/heading/menu.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/heading/menu.tsx @@ -1,17 +1,17 @@ -import { MenuHamburgerIcon } from '@navikt/aksel-icons'; -import { Button, Checkbox, CheckboxGroup, Dropdown } from '@navikt/ds-react'; -import { useContext } from 'react'; -import { styled } from 'styled-components'; import { UseAsAttachments } from '@app/components/documents/journalfoerte-documents/heading/use-as-attachments'; import { ViewCombinedPDF } from '@app/components/documents/journalfoerte-documents/heading/view-combined-pdf-button'; import { SelectContext } from '@app/components/documents/journalfoerte-documents/select-context/select-context'; import { ARCHIVED_DOCUMENTS_COLUMN_OPTIONS, ARCHIVED_DOCUMENTS_COLUMN_OPTIONS_LABELS, - ArchivedDocumentsColumn, + type ArchivedDocumentsColumn, useArchivedDocumentsColumns, } from '@app/hooks/settings/use-archived-documents-setting'; import { pushEvent } from '@app/observability'; +import { MenuHamburgerIcon } from '@navikt/aksel-icons'; +import { Button, Checkbox, CheckboxGroup, Dropdown } from '@navikt/ds-react'; +import { useContext } from 'react'; +import { styled } from 'styled-components'; import { useIsExpanded } from '../../use-is-expanded'; export const Menu = () => { diff --git a/frontend/src/components/documents/journalfoerte-documents/heading/selected-in-order.ts b/frontend/src/components/documents/journalfoerte-documents/heading/selected-in-order.ts index 9248234dd..27172643f 100644 --- a/frontend/src/components/documents/journalfoerte-documents/heading/selected-in-order.ts +++ b/frontend/src/components/documents/journalfoerte-documents/heading/selected-in-order.ts @@ -1,7 +1,7 @@ import { getId } from '@app/components/documents/journalfoerte-documents/select-context/helpers'; -import { SelectedMap } from '@app/components/documents/journalfoerte-documents/select-context/types'; -import { IShownArchivedDocument } from '@app/components/view-pdf/types'; -import { IArkivertDocument } from '@app/types/arkiverte-documents'; +import type { SelectedMap } from '@app/components/documents/journalfoerte-documents/select-context/types'; +import type { IShownArchivedDocument } from '@app/components/view-pdf/types'; +import type { IArkivertDocument } from '@app/types/arkiverte-documents'; import { DocumentTypeEnum } from '@app/types/documents/documents'; export const getSelectedDocumentsInOrder = ( diff --git a/frontend/src/components/documents/journalfoerte-documents/heading/use-as-attachments.tsx b/frontend/src/components/documents/journalfoerte-documents/heading/use-as-attachments.tsx index b5e78c777..9208503f9 100644 --- a/frontend/src/components/documents/journalfoerte-documents/heading/use-as-attachments.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/heading/use-as-attachments.tsx @@ -1,7 +1,3 @@ -import { Select } from '@navikt/ds-react'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { useContext } from 'react'; -import { styled } from 'styled-components'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { SelectContext } from '@app/components/documents/journalfoerte-documents/select-context/select-context'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; @@ -12,6 +8,10 @@ import { useCreateVedleggFromJournalfoertDocumentMutation } from '@app/redux-api import { useGetDocumentsQuery } from '@app/redux-api/oppgaver/queries/documents'; import { CreatorRole } from '@app/types/documents/documents'; import { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; +import { Select } from '@navikt/ds-react'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useContext } from 'react'; +import { styled } from 'styled-components'; const NONE_SELECTED = 'NONE_SELECTED'; diff --git a/frontend/src/components/documents/journalfoerte-documents/heading/view-combined-pdf-button.tsx b/frontend/src/components/documents/journalfoerte-documents/heading/view-combined-pdf-button.tsx index e90f88b5b..fa756c231 100644 --- a/frontend/src/components/documents/journalfoerte-documents/heading/view-combined-pdf-button.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/heading/view-combined-pdf-button.tsx @@ -1,8 +1,3 @@ -import { FilePdfIcon } from '@navikt/aksel-icons'; -import { Button, ButtonProps, LinkProps, Tooltip } from '@navikt/ds-react'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { forwardRef, useContext, useMemo } from 'react'; -import { styled } from 'styled-components'; import { getSelectedDocumentsInOrder } from '@app/components/documents/journalfoerte-documents/heading/selected-in-order'; import { SelectContext } from '@app/components/documents/journalfoerte-documents/select-context/select-context'; import { TabContext } from '@app/components/documents/tab-context'; @@ -16,6 +11,11 @@ import { useGetArkiverteDokumenterQuery, useMergedDocumentsReferenceQuery, } from '@app/redux-api/oppgaver/queries/documents'; +import { FilePdfIcon } from '@navikt/aksel-icons'; +import { Button, type ButtonProps, type LinkProps, Tooltip } from '@navikt/ds-react'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { forwardRef, useContext, useMemo } from 'react'; +import { styled } from 'styled-components'; export const ViewCombinedPDF = () => { const { getTabRef, setTabRef } = useContext(TabContext); diff --git a/frontend/src/components/documents/journalfoerte-documents/journalfoerte-documents.tsx b/frontend/src/components/documents/journalfoerte-documents/journalfoerte-documents.tsx index f017ce2b9..7aad0620f 100644 --- a/frontend/src/components/documents/journalfoerte-documents/journalfoerte-documents.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/journalfoerte-documents.tsx @@ -1,14 +1,14 @@ -import { skipToken } from '@reduxjs/toolkit/query'; -import { useCallback, useEffect, useMemo, useState } from 'react'; -import { styled } from 'styled-components'; import { DocumentList } from '@app/components/documents/journalfoerte-documents/document-list'; import { Header } from '@app/components/documents/journalfoerte-documents/header/header'; import { SelectContextElement } from '@app/components/documents/journalfoerte-documents/select-context/select-context'; import { commonStyles } from '@app/components/documents/styled-components/container'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { useGetArkiverteDokumenterQuery } from '@app/redux-api/oppgaver/queries/documents'; -import { IArkivertDocument } from '@app/types/arkiverte-documents'; -import { IJournalfoertDokumentId } from '@app/types/oppgave-common'; +import type { IArkivertDocument } from '@app/types/arkiverte-documents'; +import type { IJournalfoertDokumentId } from '@app/types/oppgave-common'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useCallback, useEffect, useMemo, useState } from 'react'; +import { styled } from 'styled-components'; import { useFilters } from './header/use-filters'; import { JournalfoertHeading } from './heading/heading'; diff --git a/frontend/src/components/documents/journalfoerte-documents/logiske-vedlegg-list.tsx b/frontend/src/components/documents/journalfoerte-documents/logiske-vedlegg-list.tsx index d3771e1df..e9f71e16b 100644 --- a/frontend/src/components/documents/journalfoerte-documents/logiske-vedlegg-list.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/logiske-vedlegg-list.tsx @@ -1,5 +1,5 @@ import { AddLogiskVedlegg } from '@app/components/documents/journalfoerte-documents/add-logisk-vedlegg'; -import { LogiskeVedleggListRenderData } from '@app/components/documents/journalfoerte-documents/calculate'; +import type { LogiskeVedleggListRenderData } from '@app/components/documents/journalfoerte-documents/calculate'; import { LOGISK_VEDLEGG_HEIGHT, LOGISK_VEDLEGG_SPACE, @@ -9,7 +9,7 @@ import { LogiskeVedleggListItemStyle, LogiskeVedleggListStyle, } from '@app/components/documents/styled-components/attachment-list'; -import { LogiskVedlegg } from '@app/types/arkiverte-documents'; +import type { LogiskVedlegg } from '@app/types/arkiverte-documents'; interface Props { list: LogiskeVedleggListRenderData; diff --git a/frontend/src/components/documents/journalfoerte-documents/select-context/helpers.ts b/frontend/src/components/documents/journalfoerte-documents/select-context/helpers.ts index 45332c0dd..f1092d841 100644 --- a/frontend/src/components/documents/journalfoerte-documents/select-context/helpers.ts +++ b/frontend/src/components/documents/journalfoerte-documents/select-context/helpers.ts @@ -1,5 +1,5 @@ -import { IArkivertDocument } from '@app/types/arkiverte-documents'; -import { IJournalfoertDokumentId } from '@app/types/oppgave-common'; +import type { IArkivertDocument } from '@app/types/arkiverte-documents'; +import type { IJournalfoertDokumentId } from '@app/types/oppgave-common'; export const getId = (document: IJournalfoertDokumentId) => `${document.journalpostId}:${document.dokumentInfoId}`; diff --git a/frontend/src/components/documents/journalfoerte-documents/select-context/select-context.tsx b/frontend/src/components/documents/journalfoerte-documents/select-context/select-context.tsx index a20a6f0bd..d37b835bc 100644 --- a/frontend/src/components/documents/journalfoerte-documents/select-context/select-context.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/select-context/select-context.tsx @@ -1,12 +1,12 @@ -import { createContext, useCallback, useState } from 'react'; import { findDocument } from '@app/domain/find-document'; -import { IArkivertDocument } from '@app/types/arkiverte-documents'; -import { IJournalfoertDokumentId } from '@app/types/oppgave-common'; +import type { IArkivertDocument } from '@app/types/arkiverte-documents'; +import type { IJournalfoertDokumentId } from '@app/types/oppgave-common'; +import { createContext, useCallback, useState } from 'react'; import { getId } from './helpers'; import { useSelectMany } from './select-many'; import { useSelectOne } from './select-one'; import { useSelectRangeTo } from './select-range-to'; -import { ISelectContext, SelectedMap } from './types'; +import type { ISelectContext, SelectedMap } from './types'; export const SelectContext = createContext({ selectedDocuments: new Map(), diff --git a/frontend/src/components/documents/journalfoerte-documents/select-context/select-many.ts b/frontend/src/components/documents/journalfoerte-documents/select-context/select-many.ts index c5d74afa1..5ab063a51 100644 --- a/frontend/src/components/documents/journalfoerte-documents/select-context/select-many.ts +++ b/frontend/src/components/documents/journalfoerte-documents/select-context/select-many.ts @@ -1,9 +1,9 @@ +import type { IJournalfoertDokumentId } from '@app/types/oppgave-common'; /* eslint-disable max-depth */ import { useCallback } from 'react'; -import { IJournalfoertDokumentId } from '@app/types/oppgave-common'; import { getId } from './helpers'; import { useSelectOne } from './select-one'; -import { SelectHook, SelectMany } from './types'; +import type { SelectHook, SelectMany } from './types'; export const useSelectMany: SelectHook = (setSelectedDocuments, setLastSelectedDocument, documentList) => { const selectOne = useSelectOne(setSelectedDocuments, setLastSelectedDocument, documentList); diff --git a/frontend/src/components/documents/journalfoerte-documents/select-context/select-one.ts b/frontend/src/components/documents/journalfoerte-documents/select-context/select-one.ts index 7f39626c7..4251fc59c 100644 --- a/frontend/src/components/documents/journalfoerte-documents/select-context/select-one.ts +++ b/frontend/src/components/documents/journalfoerte-documents/select-context/select-one.ts @@ -1,7 +1,7 @@ +import type { IJournalfoertDokumentId } from '@app/types/oppgave-common'; import { useCallback } from 'react'; -import { IJournalfoertDokumentId } from '@app/types/oppgave-common'; import { getId } from './helpers'; -import { SelectHook, SelectOne } from './types'; +import type { SelectHook, SelectOne } from './types'; export const useSelectOne: SelectHook = (setSelectedDocuments, setLastSelectedDocument) => useCallback( diff --git a/frontend/src/components/documents/journalfoerte-documents/select-context/select-range-to.ts b/frontend/src/components/documents/journalfoerte-documents/select-context/select-range-to.ts index e909dc79d..243d1997d 100644 --- a/frontend/src/components/documents/journalfoerte-documents/select-context/select-range-to.ts +++ b/frontend/src/components/documents/journalfoerte-documents/select-context/select-range-to.ts @@ -1,9 +1,9 @@ +import type { IArkivertDocument } from '@app/types/arkiverte-documents'; +import type { IJournalfoertDokumentId } from '@app/types/oppgave-common'; import { useCallback } from 'react'; -import { IArkivertDocument } from '@app/types/arkiverte-documents'; -import { IJournalfoertDokumentId } from '@app/types/oppgave-common'; import { getDocumentPath, getFirstPath, matchDocuments } from './helpers'; import { useSelectMany } from './select-many'; -import { SelectRangeHook } from './types'; +import type { SelectRangeHook } from './types'; export const useSelectRangeTo: SelectRangeHook = ( setSelectedDocuments, diff --git a/frontend/src/components/documents/journalfoerte-documents/select-context/types.ts b/frontend/src/components/documents/journalfoerte-documents/select-context/types.ts index a92e7105e..fe10526ca 100644 --- a/frontend/src/components/documents/journalfoerte-documents/select-context/types.ts +++ b/frontend/src/components/documents/journalfoerte-documents/select-context/types.ts @@ -1,5 +1,5 @@ -import { IArkivertDocument } from '@app/types/arkiverte-documents'; -import { IJournalfoertDokumentId } from '@app/types/oppgave-common'; +import type { IArkivertDocument } from '@app/types/arkiverte-documents'; +import type { IJournalfoertDokumentId } from '@app/types/oppgave-common'; export type SelectedMap = Map; diff --git a/frontend/src/components/documents/journalfoerte-documents/vedlegg-list.tsx b/frontend/src/components/documents/journalfoerte-documents/vedlegg-list.tsx index 122f7165e..0f07fe25f 100644 --- a/frontend/src/components/documents/journalfoerte-documents/vedlegg-list.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/vedlegg-list.tsx @@ -1,10 +1,10 @@ -import { VedleggListRenderData } from '@app/components/documents/journalfoerte-documents/calculate'; +import type { VedleggListRenderData } from '@app/components/documents/journalfoerte-documents/calculate'; import { ROW_HEIGHT } from '@app/components/documents/journalfoerte-documents/contants'; import { AttachmentListItem } from '@app/components/documents/journalfoerte-documents/document/attachments/attachment-list'; import { LogiskeVedleggList } from '@app/components/documents/journalfoerte-documents/logiske-vedlegg-list'; import { JournalfoerteDocumentsAttachments } from '@app/components/documents/styled-components/attachment-list'; -import { IArkivertDocument } from '@app/types/arkiverte-documents'; -import { IJournalfoertDokumentId } from '@app/types/oppgave-common'; +import type { IArkivertDocument } from '@app/types/arkiverte-documents'; +import type { IJournalfoertDokumentId } from '@app/types/oppgave-common'; interface Props { list: VedleggListRenderData; diff --git a/frontend/src/components/documents/new-documents/attachment-list.tsx b/frontend/src/components/documents/new-documents/attachment-list.tsx index de0713a7e..5f580353a 100644 --- a/frontend/src/components/documents/new-documents/attachment-list.tsx +++ b/frontend/src/components/documents/new-documents/attachment-list.tsx @@ -1,17 +1,17 @@ -import { useMemo } from 'react'; -import { styled } from 'styled-components'; import { AttachmentsOverview } from '@app/components/documents/new-documents/attachments-overview'; import { ROW_HEIGHT, SEPARATOR_HEIGHT } from '@app/components/documents/new-documents/constants'; import { NewAttachmentButtons } from '@app/components/documents/new-documents/new-attachment-buttons'; import { NewAttachment } from '@app/components/documents/new-documents/new-document/new-attachment'; import { getIsIncomingDocument } from '@app/functions/is-incoming-document'; import { sortWithNumbers } from '@app/functions/sort-with-numbers/sort-with-numbers'; -import { +import type { IFileDocument, IJournalfoertDokumentReference, IMainDocument, ISmartDocument, } from '@app/types/documents/documents'; +import { useMemo } from 'react'; +import { styled } from 'styled-components'; import { NewDocAttachmentsContainer, StyledAttachmentList, @@ -132,7 +132,7 @@ const ListSeparator = styled.div` margin: 0; margin-top: 12px; margin-bottom: 12px; - margin-left: 4px; + margin-left: var(--a-spacing-1); border: none; border-bottom: 1px solid var(--a-border-subtle); @@ -141,10 +141,10 @@ const ListSeparator = styled.div` position: absolute; top: 50%; left: 17px; - padding-left: 4px; - padding-right: 4px; + padding-left: var(--a-spacing-1); + padding-right: var(--a-spacing-1); transform: translateY(-50%); - background-color: white; + background-color: var(--a-bg-default); font-size: 14px; } `; diff --git a/frontend/src/components/documents/new-documents/attachments-overview.tsx b/frontend/src/components/documents/new-documents/attachments-overview.tsx index 66a7a5146..bbb9ab785 100644 --- a/frontend/src/components/documents/new-documents/attachments-overview.tsx +++ b/frontend/src/components/documents/new-documents/attachments-overview.tsx @@ -1,11 +1,11 @@ -import { BulletListIcon } from '@navikt/aksel-icons'; -import { skipToken } from '@reduxjs/toolkit/query'; import { SharedDocumentTitle } from '@app/components/documents/new-documents/shared/title'; import { StyledAttachmentListItem } from '@app/components/documents/styled-components/attachment-list'; import { getAttachmentsOverviewTabUrl } from '@app/domain/tabbed-document-url'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { useCreateVedleggFromJournalfoertDocumentMutation } from '@app/redux-api/oppgaver/mutations/documents'; import { DOCUMENT_TYPE_NAMES, DocumentTypeEnum } from '@app/types/documents/documents'; +import { BulletListIcon } from '@navikt/aksel-icons'; +import { skipToken } from '@reduxjs/toolkit/query'; import { StyledNewAttachment } from './new-document/new-attachment'; interface Props { diff --git a/frontend/src/components/documents/new-documents/header/drop-delete-area.tsx b/frontend/src/components/documents/new-documents/header/drop-delete-area.tsx index 750338070..13a61ded7 100644 --- a/frontend/src/components/documents/new-documents/header/drop-delete-area.tsx +++ b/frontend/src/components/documents/new-documents/header/drop-delete-area.tsx @@ -1,8 +1,3 @@ -import { TrashIcon } from '@navikt/aksel-icons'; -import { Loader } from '@navikt/ds-react'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { useCallback, useContext, useRef, useState } from 'react'; -import { styled } from 'styled-components'; import { DragAndDropContext } from '@app/components/documents/drag-context'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { useCanDeleteDocument } from '@app/hooks/use-can-document/use-can-delete-document'; @@ -10,6 +5,11 @@ import { useAttachments, useParentDocument } from '@app/hooks/use-parent-documen import { useRemoveDocument } from '@app/hooks/use-remove-document'; import { useDeleteDocumentMutation } from '@app/redux-api/oppgaver/mutations/documents'; import { CreatorRole, DocumentTypeEnum } from '@app/types/documents/documents'; +import { TrashIcon } from '@navikt/aksel-icons'; +import { Loader } from '@navikt/ds-react'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useCallback, useContext, useRef, useState } from 'react'; +import { styled } from 'styled-components'; export const DeleteDropArea = () => { const dragEnterCount = useRef(0); @@ -89,12 +89,12 @@ const DeleteDropAreaContainer = styled.div<{ $isDropTarget: boolean; $isDragOver display: flex; align-items: center; justify-content: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); flex-grow: 0; flex-shrink: 0; padding-left: 48px; padding-right: 48px; - margin-right: 8px; + margin-right: var(--a-spacing-2); white-space: nowrap; height: 100%; transition-property: opacity; @@ -108,6 +108,5 @@ const DeleteDropAreaContainer = styled.div<{ $isDropTarget: boolean; $isDragOver opacity: ${({ $isDropTarget }) => ($isDropTarget ? 1 : 0)}; color: ${({ $isDragOver }) => ($isDragOver ? 'var(--a-text-on-danger)' : 'var(--a-text-default)')}; - background-color: ${({ $isDragOver }) => - $isDragOver ? 'var(--a-surface-danger)' : 'var(--a-surface-danger-subtle)'}; + background-color: ${({ $isDragOver }) => ($isDragOver ? 'var(--a-surface-danger)' : 'var(--a-surface-danger-subtle)')}; `; diff --git a/frontend/src/components/documents/new-documents/header/drop-header.tsx b/frontend/src/components/documents/new-documents/header/drop-header.tsx index b686f5a54..eff58f7de 100644 --- a/frontend/src/components/documents/new-documents/header/drop-header.tsx +++ b/frontend/src/components/documents/new-documents/header/drop-header.tsx @@ -1,14 +1,14 @@ -import { Heading, HeadingProps } from '@navikt/ds-react'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { useCallback, useContext, useMemo, useRef, useState } from 'react'; -import { styled } from 'styled-components'; import { DragAndDropContext } from '@app/components/documents/drag-context'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { useHasRole } from '@app/hooks/use-has-role'; import { useIsSaksbehandler } from '@app/hooks/use-is-saksbehandler'; import { useSetParentMutation } from '@app/redux-api/oppgaver/mutations/documents'; import { Role } from '@app/types/bruker'; -import { DocumentTypeEnum, IMainDocument } from '@app/types/documents/documents'; +import { DocumentTypeEnum, type IMainDocument } from '@app/types/documents/documents'; +import { Heading, type HeadingProps } from '@navikt/ds-react'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useCallback, useContext, useMemo, useRef, useState } from 'react'; +import { styled } from 'styled-components'; interface Props { children: React.ReactNode; @@ -103,12 +103,12 @@ const InternalHeading = ({ children, ...props }: IDragOver) => ` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); width: fit-content; white-space: nowrap; flex-shrink: 0; flex-grow: 1; - padding-left: 8px; + padding-left: var(--a-spacing-2); position: relative; &::after { @@ -128,7 +128,7 @@ const StyledHeading = styled(InternalHeading)` background-color: ${({ $isDragOver }) => ($isDragOver ? 'rgba(153, 195, 255, 0.5)' : 'rgba(230, 240, 255, 0.5)')}; text-shadow: 1px 1px white, - -1px -1px white; + -1px -1px var(--a-bg-default); backdrop-filter: blur(2px); } `; diff --git a/frontend/src/components/documents/new-documents/header/header.tsx b/frontend/src/components/documents/new-documents/header/header.tsx index b5d02af7a..1d4d26765 100644 --- a/frontend/src/components/documents/new-documents/header/header.tsx +++ b/frontend/src/components/documents/new-documents/header/header.tsx @@ -1,10 +1,10 @@ -import { ExclamationmarkTriangleIcon } from '@navikt/aksel-icons'; -import { styled } from 'styled-components'; import { DeleteDropArea } from '@app/components/documents/new-documents/header/drop-delete-area'; import { DropHeading } from '@app/components/documents/new-documents/header/drop-header'; import { listHeaderCSS } from '@app/components/documents/styled-components/list-header'; import { useIsExpanded } from '@app/components/documents/use-is-expanded'; import { useValidationError } from '@app/hooks/use-validation-error'; +import { ExclamationmarkTriangleIcon } from '@navikt/aksel-icons'; +import { styled } from 'styled-components'; export const ListHeader = () => { const errorMessage = useValidationError('underArbeid'); @@ -25,6 +25,6 @@ const NewDocumentsStyledListHeader = styled.div` display: flex; flex-direction: row; justify-content: space-between; - column-gap: 8px; + column-gap: var(--a-spacing-2); ${listHeaderCSS} `; diff --git a/frontend/src/components/documents/new-documents/helpers.ts b/frontend/src/components/documents/new-documents/helpers.ts index 5e4523528..cb366e6da 100644 --- a/frontend/src/components/documents/new-documents/helpers.ts +++ b/frontend/src/components/documents/new-documents/helpers.ts @@ -1,8 +1,5 @@ -import { IMainDocument, ISmartDocument } from '@app/types/documents/documents'; +import type { IMainDocument, ISmartDocument } from '@app/types/documents/documents'; import { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; export const getIsRolQuestions = (document: IMainDocument): document is ISmartDocument => document.isSmartDokument && document.templateId === TemplateIdEnum.ROL_QUESTIONS; - -export const getIsRolAnswers = (document: IMainDocument): document is ISmartDocument => - document.isSmartDokument && document.templateId === TemplateIdEnum.ROL_ANSWERS; diff --git a/frontend/src/components/documents/new-documents/modal/annen-inngaaende.tsx b/frontend/src/components/documents/new-documents/modal/annen-inngaaende.tsx index 6f0de149b..d76a65464 100644 --- a/frontend/src/components/documents/new-documents/modal/annen-inngaaende.tsx +++ b/frontend/src/components/documents/new-documents/modal/annen-inngaaende.tsx @@ -1,13 +1,13 @@ +import { PartStatusList } from '@app/components/part-status-list/part-status-list'; +import { EditPart } from '@app/components/part/edit-part'; +import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; +import { useSetAvsenderMutation, useSetInngaaendeKanalMutation } from '@app/redux-api/oppgaver/mutations/documents'; +import { DocumentTypeEnum, type IMainDocument, InngaaendeKanal } from '@app/types/documents/documents'; import { PencilIcon, XMarkIcon } from '@navikt/aksel-icons'; import { BodyShort, Button, Label, Radio, RadioGroup } from '@navikt/ds-react'; import { skipToken } from '@reduxjs/toolkit/query'; import { useState } from 'react'; import { styled } from 'styled-components'; -import { EditPart } from '@app/components/part/edit-part'; -import { PartStatusList } from '@app/components/part-status-list/part-status-list'; -import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; -import { useSetAvsenderMutation, useSetInngaaendeKanalMutation } from '@app/redux-api/oppgaver/mutations/documents'; -import { DocumentTypeEnum, IMainDocument, InngaaendeKanal } from '@app/types/documents/documents'; const INNGAAENDE_KANALER = Object.values(InngaaendeKanal); const isInngaaendeKanal = (type: string): type is InngaaendeKanal => INNGAAENDE_KANALER.some((t) => t === type); @@ -80,5 +80,5 @@ export const AnnenInngaaende = ({ document, canEditDocument }: Props) => { const AvsenderContainer = styled.div` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/documents/new-documents/modal/delete-button.tsx b/frontend/src/components/documents/new-documents/modal/delete-button.tsx index 8fd35b07f..51d372770 100644 --- a/frontend/src/components/documents/new-documents/modal/delete-button.tsx +++ b/frontend/src/components/documents/new-documents/modal/delete-button.tsx @@ -1,12 +1,12 @@ -import { ArrowUndoIcon, TrashIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; -import { useContext, useMemo, useState } from 'react'; -import { styled } from 'styled-components'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { useRemoveDocument } from '@app/hooks/use-remove-document'; import { useDeleteDocumentMutation } from '@app/redux-api/oppgaver/mutations/documents'; import { useGetDocumentsQuery } from '@app/redux-api/oppgaver/queries/documents'; -import { DocumentTypeEnum, IMainDocument } from '@app/types/documents/documents'; +import { DocumentTypeEnum, type IMainDocument } from '@app/types/documents/documents'; +import { ArrowUndoIcon, TrashIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; +import { useContext, useMemo, useState } from 'react'; +import { styled } from 'styled-components'; import { ModalContext } from './modal-context'; interface Props { @@ -38,7 +38,7 @@ export const DeleteDocumentButton = ({ document }: Props) => { } // If the document has attatchments. - if (data !== undefined && data.some(({ parentId }) => parentId === document.id)) { + if (data?.some(({ parentId }) => parentId === document.id)) { return 'Slett dokument og vedlegg'; } @@ -94,12 +94,12 @@ const Container = styled.div` display: flex; flex-direction: row; justify-content: flex-end; - column-gap: 16px; + column-gap: var(--a-spacing-4); `; const StyledButton = styled(Button)` display: flex; - gap: 8px; + gap: var(--a-spacing-2); width: min-content; white-space: nowrap; `; diff --git a/frontend/src/components/documents/new-documents/modal/finish-button.tsx b/frontend/src/components/documents/new-documents/modal/finish-button.tsx index 392b31e2d..b0c66e4f9 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-button.tsx +++ b/frontend/src/components/documents/new-documents/modal/finish-button.tsx @@ -1,4 +1,3 @@ -import { Alert } from '@navikt/ds-react'; import { getIsRolQuestions } from '@app/components/documents/new-documents/helpers'; import { ArchiveButtons } from '@app/components/documents/new-documents/modal/finish-document/archive-buttons'; import { SendButtons } from '@app/components/documents/new-documents/modal/finish-document/send-buttons'; @@ -9,14 +8,15 @@ import { useHasArchiveAccess } from '@app/hooks/use-has-documents-access'; import { DistribusjonsType, DocumentTypeEnum, - IFileDocument, - IJournalfoertDokumentReference, - IMainDocument, - ISmartDocument, + type IFileDocument, + type IJournalfoertDokumentReference, + type IMainDocument, + type ISmartDocument, } from '@app/types/documents/documents'; import { SaksTypeEnum } from '@app/types/kodeverk'; import { FlowState } from '@app/types/oppgave-common'; -import { IOppgavebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; +import type { IOppgavebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; +import { Alert } from '@navikt/ds-react'; interface Props { document: IMainDocument; diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/address/address.tsx b/frontend/src/components/documents/new-documents/modal/finish-document/address/address.tsx index b3841d9de..9420603dc 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/address/address.tsx +++ b/frontend/src/components/documents/new-documents/modal/finish-document/address/address.tsx @@ -1,9 +1,9 @@ -import { useEffect, useState } from 'react'; import { EditAddress } from '@app/components/documents/new-documents/modal/finish-document/address/edit-address'; import { ReadAddress } from '@app/components/documents/new-documents/modal/finish-document/address/read-address'; -import { Addresses } from '@app/components/documents/new-documents/modal/finish-document/address/types'; -import { HandlingEnum, IAddress } from '@app/types/documents/recipients'; -import { IPart } from '@app/types/oppgave-common'; +import type { Addresses } from '@app/components/documents/new-documents/modal/finish-document/address/types'; +import { HandlingEnum, type IAddress } from '@app/types/documents/recipients'; +import type { IPart } from '@app/types/oppgave-common'; +import { useEffect, useState } from 'react'; interface Props extends Addresses { part: IPart; diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/address/country/country.tsx b/frontend/src/components/documents/new-documents/modal/finish-document/address/country/country.tsx index 4fab06220..27e0300ec 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/address/country/country.tsx +++ b/frontend/src/components/documents/new-documents/modal/finish-document/address/country/country.tsx @@ -1,11 +1,11 @@ +import { StaticDataContext } from '@app/components/app/static-data-context'; +import { Option } from '@app/components/documents/new-documents/modal/finish-document/address/country/option'; +import { FieldLabel, Row } from '@app/components/documents/new-documents/modal/finish-document/address/layout'; +import type { CountryCode } from '@app/types/common'; import { ArrowUndoIcon } from '@navikt/aksel-icons'; import { Button, Search, Tag, Tooltip } from '@navikt/ds-react'; import { useCallback, useContext, useMemo, useRef, useState } from 'react'; import { styled } from 'styled-components'; -import { StaticDataContext } from '@app/components/app/static-data-context'; -import { Option } from '@app/components/documents/new-documents/modal/finish-document/address/country/option'; -import { FieldLabel, Row } from '@app/components/documents/new-documents/modal/finish-document/address/layout'; -import { CountryCode } from '@app/types/common'; interface Props { value?: string; @@ -190,7 +190,7 @@ const DropdownList = styled.ul` width: 100%; left: 0; padding: 0; - background-color: white; + background-color: var(--a-bg-default); border-radius: var(--a-border-radius-medium); box-shadow: var(--a-shadow-medium); z-index: 1; diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/address/country/option.tsx b/frontend/src/components/documents/new-documents/modal/finish-document/address/country/option.tsx index 31976d7a3..9d87bc7f0 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/address/country/option.tsx +++ b/frontend/src/components/documents/new-documents/modal/finish-document/address/country/option.tsx @@ -1,8 +1,8 @@ +import type { CountryCode } from '@app/types/common'; import { CheckmarkIcon } from '@navikt/aksel-icons'; import { Button } from '@navikt/ds-react'; import { useEffect, useRef } from 'react'; import { styled } from 'styled-components'; -import { CountryCode } from '@app/types/common'; interface Props { country: CountryCode; diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/address/edit-address.tsx b/frontend/src/components/documents/new-documents/modal/finish-document/address/edit-address.tsx index 891a581b2..234095036 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/address/edit-address.tsx +++ b/frontend/src/components/documents/new-documents/modal/finish-document/address/edit-address.tsx @@ -1,7 +1,3 @@ -/* eslint-disable max-lines */ -import { ArrowUndoIcon } from '@navikt/aksel-icons'; -import { Button, ErrorSummary, Tooltip } from '@navikt/ds-react'; -import { useCallback, useContext, useMemo, useState } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { Country } from '@app/components/documents/new-documents/modal/finish-document/address/country/country'; import { AddressField } from '@app/components/documents/new-documents/modal/finish-document/address/field'; @@ -11,9 +7,13 @@ import { Row, } from '@app/components/documents/new-documents/modal/finish-document/address/layout'; import { Postnummer } from '@app/components/documents/new-documents/modal/finish-document/address/postnummer'; -import { Addresses } from '@app/components/documents/new-documents/modal/finish-document/address/types'; +import type { Addresses } from '@app/components/documents/new-documents/modal/finish-document/address/types'; import { areAddressesEqual } from '@app/functions/are-addresses-equal'; -import { IAddress } from '@app/types/documents/recipients'; +import type { IAddress } from '@app/types/documents/recipients'; +/* eslint-disable max-lines */ +import { ArrowUndoIcon } from '@navikt/aksel-icons'; +import { Button, ErrorSummary, Tooltip } from '@navikt/ds-react'; +import { useCallback, useContext, useMemo, useState } from 'react'; interface EditProps extends Addresses { onSave: (address: IAddress | null) => void; diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/address/field.tsx b/frontend/src/components/documents/new-documents/modal/finish-document/address/field.tsx index c08cf43ca..e7b113c88 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/address/field.tsx +++ b/frontend/src/components/documents/new-documents/modal/finish-document/address/field.tsx @@ -1,7 +1,7 @@ +import { FieldLabel } from '@app/components/documents/new-documents/modal/finish-document/address/layout'; import { ArrowUndoIcon } from '@navikt/aksel-icons'; -import { Button, Tag, TextField, TextFieldProps, Tooltip } from '@navikt/ds-react'; +import { Button, Tag, TextField, type TextFieldProps, Tooltip } from '@navikt/ds-react'; import { useMemo } from 'react'; -import { FieldLabel } from '@app/components/documents/new-documents/modal/finish-document/address/layout'; interface Props extends Omit { value: string | null; diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/address/layout.ts b/frontend/src/components/documents/new-documents/modal/finish-document/address/layout.ts index d2b5dfcb0..41d3e133f 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/address/layout.ts +++ b/frontend/src/components/documents/new-documents/modal/finish-document/address/layout.ts @@ -1,18 +1,18 @@ import { styled } from 'styled-components'; export enum AddressState { - SAVED, - OVERRIDDEN, - UNSAVED, + SAVED = 0, + OVERRIDDEN = 1, + UNSAVED = 2, } export const Container = styled.div<{ $state: AddressState }>` display: flex; flex-direction: column; justify-content: center; - min-height: 32px; - gap: 8px; - padding: 8px; + min-height: var(--a-spacing-8); + gap: var(--a-spacing-2); + padding: var(--a-spacing-2); position: relative; background-color: ${({ $state }) => getBackgroundColor($state)}; `; @@ -33,11 +33,11 @@ export const StyledRecipient = styled.div<{ $accent: string }>` flex-direction: column; border-radius: var(--a-border-radius-medium); padding: 0; - margin-bottom: 8px; + margin-bottom: var(--a-spacing-2); border-top-width: 1px; border-bottom-width: 1px; border-right-width: 1px; - border-left-width: 4px; + border-left-width: var(--a-spacing-1); border-style: solid; border-color: var(--a-border-default); border-left-color: ${({ $accent }) => $accent}; @@ -51,13 +51,13 @@ export const Row = styled.div` display: flex; flex-direction: row; align-items: center; - gap: 4px; + gap: var(--a-spacing-1); `; export const FieldLabel = styled.span` display: flex; flex-direction: row; align-items: center; - column-gap: 4px; + column-gap: var(--a-spacing-1); min-height: 24px; `; diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/address/postnummer.tsx b/frontend/src/components/documents/new-documents/modal/finish-document/address/postnummer.tsx index 6b077407e..7cd85cf5a 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/address/postnummer.tsx +++ b/frontend/src/components/documents/new-documents/modal/finish-document/address/postnummer.tsx @@ -1,9 +1,9 @@ -import { BodyShort, Label } from '@navikt/ds-react'; -import { useContext, useId } from 'react'; -import { styled } from 'styled-components'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { AddressField } from '@app/components/documents/new-documents/modal/finish-document/address/field'; import { Row } from '@app/components/documents/new-documents/modal/finish-document/address/layout'; +import { BodyShort, Label } from '@navikt/ds-react'; +import { useContext, useId } from 'react'; +import { styled } from 'styled-components'; interface Props { value: string | null; @@ -37,7 +37,7 @@ export const Postnummer = ({ value, originalValue, onChange, error }: Props) => Poststed - {value === null ? 'Postnummer mangler' : (getPoststed(value) ?? 'Ukjent')} + {value === null ? 'Postnummer mangler' : getPoststed(value) ?? 'Ukjent'} @@ -60,5 +60,5 @@ const StyledLabel = styled(Label)` const Poststed = styled(BodyShort)` display: flex; align-items: center; - height: 32px; + height: var(--a-spacing-8); `; diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/address/read-address.tsx b/frontend/src/components/documents/new-documents/modal/finish-document/address/read-address.tsx index 2bace8c50..b61ce5273 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/address/read-address.tsx +++ b/frontend/src/components/documents/new-documents/modal/finish-document/address/read-address.tsx @@ -1,17 +1,17 @@ -import { PencilIcon } from '@navikt/aksel-icons'; -import { Button, CopyButton, Tag, Tooltip } from '@navikt/ds-react'; -import { useContext } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { AddressState, Container, Row, } from '@app/components/documents/new-documents/modal/finish-document/address/layout'; -import { Addresses } from '@app/components/documents/new-documents/modal/finish-document/address/types'; +import type { Addresses } from '@app/components/documents/new-documents/modal/finish-document/address/types'; import { areAddressesEqual } from '@app/functions/are-addresses-equal'; import { isNotNull } from '@app/functions/is-not-type-guards'; -import { IAddress, isNorwegianAddress } from '@app/types/documents/recipients'; -import { IPart } from '@app/types/oppgave-common'; +import { type IAddress, isNorwegianAddress } from '@app/types/documents/recipients'; +import type { IPart } from '@app/types/oppgave-common'; +import { PencilIcon } from '@navikt/aksel-icons'; +import { Button, CopyButton, Tag, Tooltip } from '@navikt/ds-react'; +import { useContext } from 'react'; interface Props extends Addresses { part: IPart; @@ -20,7 +20,7 @@ interface Props extends Addresses { export const ReadAddress = ({ part, address, overriddenAddress, onEdit }: Props) => { const isEditable = onEdit !== undefined; - const addressLines = useAddressLines(isEditable ? (overriddenAddress ?? address) : address); + const addressLines = useAddressLines(isEditable ? overriddenAddress ?? address : address); const copyAddress = formatCopyAddress(part, addressLines); const isOverridden = isEditable && overriddenAddress !== null && !areAddressesEqual(address, overriddenAddress); diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/address/types.ts b/frontend/src/components/documents/new-documents/modal/finish-document/address/types.ts index fb386a2bd..588764b4c 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/address/types.ts +++ b/frontend/src/components/documents/new-documents/modal/finish-document/address/types.ts @@ -1,4 +1,4 @@ -import { IAddress } from '@app/types/documents/recipients'; +import type { IAddress } from '@app/types/documents/recipients'; export interface Addresses { address: IAddress | null; diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/archive-buttons.tsx b/frontend/src/components/documents/new-documents/modal/finish-document/archive-buttons.tsx index e62d6cbd1..348f1a800 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/archive-buttons.tsx +++ b/frontend/src/components/documents/new-documents/modal/finish-document/archive-buttons.tsx @@ -1,12 +1,12 @@ -import { useContext } from 'react'; import { ModalContext } from '@app/components/documents/new-documents/modal/modal-context'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { useRemoveDocument } from '@app/hooks/use-remove-document'; import { useFinishDocumentMutation } from '@app/redux-api/oppgaver/mutations/documents'; import { useGetDocumentsQuery, useLazyValidateDocumentQuery } from '@app/redux-api/oppgaver/queries/documents'; +import { useContext } from 'react'; import { Confirm } from './confirm'; import { VALIDATION_ERROR_MESSAGES } from './error-messages'; -import { FinishProps, isSmartDocumentValidatonError } from './types'; +import { type FinishProps, isSmartDocumentValidatonError } from './types'; export const ArchiveButtons = ({ document }: FinishProps) => { const { id: dokumentId } = document; diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/custom-recipients.tsx b/frontend/src/components/documents/new-documents/modal/finish-document/custom-recipients.tsx index a57b142c5..2d6818a83 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/custom-recipients.tsx +++ b/frontend/src/components/documents/new-documents/modal/finish-document/custom-recipients.tsx @@ -1,6 +1,3 @@ -import { Buildings3Icon, PersonIcon, TrashIcon } from '@navikt/aksel-icons'; -import { Button, Label, Tag, Tooltip } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { CopyIdButton } from '@app/components/copy-button/copy-id-button'; import { StyledRecipient } from '@app/components/documents/new-documents/modal/finish-document/address/layout'; import { getInitalHandling } from '@app/components/documents/new-documents/modal/finish-document/functions'; @@ -9,12 +6,15 @@ import { StyledBrevmottaker, StyledRecipientContent, } from '@app/components/documents/new-documents/modal/finish-document/styled-components'; -import { EditPart } from '@app/components/part/edit-part'; import { PartStatusList } from '@app/components/part-status-list/part-status-list'; -import { IMottaker } from '@app/types/documents/documents'; +import { EditPart } from '@app/components/part/edit-part'; +import type { IMottaker } from '@app/types/documents/documents'; import { IdType } from '@app/types/oppgave-common'; -import { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; -import { IErrorProperty } from './is-send-error'; +import type { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; +import { Buildings3Icon, PersonIcon, TrashIcon } from '@navikt/aksel-icons'; +import { Button, Label, Tag, Tooltip } from '@navikt/ds-react'; +import { styled } from 'styled-components'; +import type { IErrorProperty } from './is-send-error'; interface Props { mottakerList: IMottaker[]; @@ -121,21 +121,21 @@ const Recipients = ({ mottakerList, removeMottakere, changeMottaker, sendErrors, const StyledRecipientInnerContent = styled.div` display: flex; align-items: center; - padding-top: 4px; - padding-bottom: 4px; - gap: 4px; + padding-top: var(--a-spacing-1); + padding-bottom: var(--a-spacing-1); + gap: var(--a-spacing-1); `; const StyledRecipientList = styled.ul` list-style: none; padding: 0; margin: 0; - margin-top: 4px; + margin-top: var(--a-spacing-1); `; const StyledName = styled.span` display: flex; flex-direction: row; align-items: center; - column-gap: 4px; + column-gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/errors.tsx b/frontend/src/components/documents/new-documents/modal/finish-document/errors.tsx index 352908a0f..25ade5389 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/errors.tsx +++ b/frontend/src/components/documents/new-documents/modal/finish-document/errors.tsx @@ -1,8 +1,8 @@ +import { ModalContext } from '@app/components/documents/new-documents/modal/modal-context'; +import { DocumentValidationErrorType } from '@app/types/documents/validation'; import { Button, ErrorMessage, Heading, Label, List } from '@navikt/ds-react'; import { useContext, useMemo } from 'react'; import { styled } from 'styled-components'; -import { ModalContext } from '@app/components/documents/new-documents/modal/modal-context'; -import { DocumentValidationErrorType } from '@app/types/documents/validation'; interface Props { updatePdf: () => void; @@ -83,5 +83,5 @@ const StyledOuterList = styled(List)` `; const Section = styled.section` - margin-top: 8px; + margin-top: var(--a-spacing-2); `; diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/functions.ts b/frontend/src/components/documents/new-documents/modal/finish-document/functions.ts index 6eb0b7605..1432fb665 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/functions.ts +++ b/frontend/src/components/documents/new-documents/modal/finish-document/functions.ts @@ -1,6 +1,6 @@ import { HandlingEnum } from '@app/types/documents/recipients'; import { Brevmottakertype } from '@app/types/kodeverk'; -import { IPart, PartStatusEnum } from '@app/types/oppgave-common'; +import { type IPart, PartStatusEnum } from '@app/types/oppgave-common'; import { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; const getTypeName = (type: Brevmottakertype): string => { diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/is-send-error.ts b/frontend/src/components/documents/new-documents/modal/finish-document/is-send-error.ts index 0d6260a3b..9706786e4 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/is-send-error.ts +++ b/frontend/src/components/documents/new-documents/modal/finish-document/is-send-error.ts @@ -1,5 +1,5 @@ -import { SerializedError } from '@reduxjs/toolkit'; -import { FetchBaseQueryError } from '@reduxjs/toolkit/query'; +import type { SerializedError } from '@reduxjs/toolkit'; +import type { FetchBaseQueryError } from '@reduxjs/toolkit/query'; interface IFetchSendError { status: number; diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/options.tsx b/frontend/src/components/documents/new-documents/modal/finish-document/options.tsx index 96f2b2b58..301fea008 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/options.tsx +++ b/frontend/src/components/documents/new-documents/modal/finish-document/options.tsx @@ -1,13 +1,13 @@ -import { ArrowUndoIcon } from '@navikt/aksel-icons'; -import { Alert, BodyShort, Button, ToggleGroup, Tooltip } from '@navikt/ds-react'; -import { useCallback, useMemo } from 'react'; -import { styled } from 'styled-components'; import { Address } from '@app/components/documents/new-documents/modal/finish-document/address/address'; import { areAddressesEqual } from '@app/functions/are-addresses-equal'; -import { IMottaker } from '@app/types/documents/documents'; -import { HandlingEnum, IAddress } from '@app/types/documents/recipients'; +import type { IMottaker } from '@app/types/documents/documents'; +import { HandlingEnum, type IAddress } from '@app/types/documents/recipients'; import { UTSENDINGSKANAL, Utsendingskanal } from '@app/types/oppgave-common'; import { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; +import { ArrowUndoIcon } from '@navikt/aksel-icons'; +import { Alert, BodyShort, Button, ToggleGroup, Tooltip } from '@navikt/ds-react'; +import { useCallback, useMemo } from 'react'; +import { styled } from 'styled-components'; interface Props extends IMottaker { templateId: TemplateIdEnum | undefined; @@ -101,10 +101,10 @@ export const Options = ({ part, handling, overriddenAddress, templateId, onChang const Row = styled.div` display: flex; align-items: center; - column-gap: 8px; - padding-left: 8px; - padding-right: 8px; - padding-bottom: 4px; + column-gap: var(--a-spacing-2); + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); + padding-bottom: var(--a-spacing-1); `; const ensureIsHandling = (handling: string): HandlingEnum => { diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/recipients.tsx b/frontend/src/components/documents/new-documents/modal/finish-document/recipients.tsx index f186d373e..7f2cc4122 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/recipients.tsx +++ b/frontend/src/components/documents/new-documents/modal/finish-document/recipients.tsx @@ -1,5 +1,3 @@ -import { Alert } from '@navikt/ds-react'; -import { useCallback, useEffect, useMemo } from 'react'; import { CustomRecipients } from '@app/components/documents/new-documents/modal/finish-document/custom-recipients'; import { isSendError } from '@app/components/documents/new-documents/modal/finish-document/is-send-error'; import { SingleRecipient } from '@app/components/documents/new-documents/modal/finish-document/single-recipient'; @@ -9,8 +7,10 @@ import { getIsIncomingDocument } from '@app/functions/is-incoming-document'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useSuggestedBrevmottakere } from '@app/hooks/use-suggested-brevmottakere'; import { useFinishDocumentMutation, useSetMottakerListMutation } from '@app/redux-api/oppgaver/mutations/documents'; -import { IMainDocument, IMottaker } from '@app/types/documents/documents'; +import type { IMainDocument, IMottaker } from '@app/types/documents/documents'; import { PartStatusEnum } from '@app/types/oppgave-common'; +import { Alert } from '@navikt/ds-react'; +import { useCallback, useEffect, useMemo } from 'react'; import { StyledFinishDocument } from './styled-components'; export const Receipients = (document: IMainDocument) => { diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/send-buttons.tsx b/frontend/src/components/documents/new-documents/modal/finish-document/send-buttons.tsx index 35ba2d1a6..369bb51e2 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/send-buttons.tsx +++ b/frontend/src/components/documents/new-documents/modal/finish-document/send-buttons.tsx @@ -1,6 +1,3 @@ -import { Alert } from '@navikt/ds-react'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { useContext } from 'react'; import { ModalContext } from '@app/components/documents/new-documents/modal/modal-context'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useRemoveDocument } from '@app/hooks/use-remove-document'; @@ -8,9 +5,12 @@ import { useSuggestedBrevmottakere } from '@app/hooks/use-suggested-brevmottaker import { useFinishDocumentMutation, useSetMottakerListMutation } from '@app/redux-api/oppgaver/mutations/documents'; import { useGetDocumentsQuery, useLazyValidateDocumentQuery } from '@app/redux-api/oppgaver/queries/documents'; import { NO_RECIPIENTS_ERROR } from '@app/types/documents/validation'; +import { Alert } from '@navikt/ds-react'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useContext } from 'react'; import { Confirm } from './confirm'; import { VALIDATION_ERROR_MESSAGES } from './error-messages'; -import { FinishProps, isSmartDocumentValidatonError } from './types'; +import { type FinishProps, isSmartDocumentValidatonError } from './types'; export const SendButtons = ({ document }: FinishProps) => { const { id: dokumentId, tittel: documentTitle, mottakerList } = document; diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/single-recipient.tsx b/frontend/src/components/documents/new-documents/modal/finish-document/single-recipient.tsx index ccde7065f..c06279dba 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/single-recipient.tsx +++ b/frontend/src/components/documents/new-documents/modal/finish-document/single-recipient.tsx @@ -1,6 +1,3 @@ -import { Buildings3Icon, PersonIcon } from '@navikt/aksel-icons'; -import { Label, Tooltip } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { StyledRecipient } from '@app/components/documents/new-documents/modal/finish-document/address/layout'; import { getTypeNames } from '@app/components/documents/new-documents/modal/finish-document/functions'; import { Options } from '@app/components/documents/new-documents/modal/finish-document/options'; @@ -9,10 +6,13 @@ import { StyledRecipientContent, } from '@app/components/documents/new-documents/modal/finish-document/styled-components'; import { PartStatusList } from '@app/components/part-status-list/part-status-list'; -import { IBrevmottaker } from '@app/hooks/use-suggested-brevmottakere'; -import { IMottaker } from '@app/types/documents/documents'; +import type { IBrevmottaker } from '@app/hooks/use-suggested-brevmottakere'; +import type { IMottaker } from '@app/types/documents/documents'; import { IdType } from '@app/types/oppgave-common'; -import { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; +import type { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; +import { Buildings3Icon, PersonIcon } from '@navikt/aksel-icons'; +import { Label, Tooltip } from '@navikt/ds-react'; +import { styled } from 'styled-components'; interface Props { recipient: IBrevmottaker; diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/styled-components.ts b/frontend/src/components/documents/new-documents/modal/finish-document/styled-components.ts index 39ee8c44b..5f4e3f332 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/styled-components.ts +++ b/frontend/src/components/documents/new-documents/modal/finish-document/styled-components.ts @@ -3,30 +3,30 @@ import { styled } from 'styled-components'; export const StyledFinishDocument = styled.section` display: flex; flex-direction: column; - row-gap: 16px; + row-gap: var(--a-spacing-4); position: relative; `; export const StyledButtons = styled.div` display: flex; justify-content: flex-start; - column-gap: 16px; + column-gap: var(--a-spacing-4); `; export const StyledBrevmottaker = styled.div` display: flex; flex-direction: row; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); flex-shrink: 0; - padding-left: 8px; - padding-right: 8px; - min-height: 32px; + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); + min-height: var(--a-spacing-8); `; export const StyledRecipientContent = styled.div` display: flex; flex-direction: row; - gap: 4px; + gap: var(--a-spacing-1); align-items: center; `; diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/suggested-recipients.tsx b/frontend/src/components/documents/new-documents/modal/finish-document/suggested-recipients.tsx index 8d883302d..f8981ae3d 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/suggested-recipients.tsx +++ b/frontend/src/components/documents/new-documents/modal/finish-document/suggested-recipients.tsx @@ -1,15 +1,15 @@ -import { Buildings3Icon, PersonIcon } from '@navikt/aksel-icons'; -import { Checkbox, CheckboxGroup, Tag, Tooltip } from '@navikt/ds-react'; -import { useCallback } from 'react'; import { StyledRecipient } from '@app/components/documents/new-documents/modal/finish-document/address/layout'; import { getTypeNames } from '@app/components/documents/new-documents/modal/finish-document/functions'; -import { IErrorProperty } from '@app/components/documents/new-documents/modal/finish-document/is-send-error'; +import type { IErrorProperty } from '@app/components/documents/new-documents/modal/finish-document/is-send-error'; import { Options } from '@app/components/documents/new-documents/modal/finish-document/options'; import { PartStatusList } from '@app/components/part-status-list/part-status-list'; -import { IBrevmottaker } from '@app/hooks/use-suggested-brevmottakere'; -import { IMottaker } from '@app/types/documents/documents'; +import type { IBrevmottaker } from '@app/hooks/use-suggested-brevmottakere'; +import type { IMottaker } from '@app/types/documents/documents'; import { IdType } from '@app/types/oppgave-common'; -import { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; +import type { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; +import { Buildings3Icon, PersonIcon } from '@navikt/aksel-icons'; +import { Checkbox, CheckboxGroup, Tag, Tooltip } from '@navikt/ds-react'; +import { useCallback } from 'react'; import { StyledBrevmottaker, StyledRecipientContent } from './styled-components'; interface RecipientsProps { diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/types.ts b/frontend/src/components/documents/new-documents/modal/finish-document/types.ts index c0005bf38..19ea8b675 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/types.ts +++ b/frontend/src/components/documents/new-documents/modal/finish-document/types.ts @@ -1,6 +1,6 @@ -import { IMainDocument } from '@app/types/documents/documents'; -import { DocumentValidationErrorType, NO_RECIPIENTS_ERROR } from '@app/types/documents/validation'; -import { ApiError, isApiError } from '@app/types/errors'; +import type { IMainDocument } from '@app/types/documents/documents'; +import { DocumentValidationErrorType, type NO_RECIPIENTS_ERROR } from '@app/types/documents/validation'; +import { type ApiError, isApiError } from '@app/types/errors'; export interface FinishProps { document: IMainDocument; diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/unreachable-suggested-recipients.tsx b/frontend/src/components/documents/new-documents/modal/finish-document/unreachable-suggested-recipients.tsx index df7111546..8b9023d5a 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/unreachable-suggested-recipients.tsx +++ b/frontend/src/components/documents/new-documents/modal/finish-document/unreachable-suggested-recipients.tsx @@ -1,13 +1,13 @@ -import { Buildings3Icon, PersonIcon } from '@navikt/aksel-icons'; -import { Alert, CopyButton, HelpText, Label, Tooltip } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { Address } from '@app/components/documents/new-documents/modal/finish-document/address/address'; import { StyledRecipient } from '@app/components/documents/new-documents/modal/finish-document/address/layout'; import { getTypeNames } from '@app/components/documents/new-documents/modal/finish-document/functions'; import { PartStatusList } from '@app/components/part-status-list/part-status-list'; import { formatIdNumber } from '@app/functions/format-id'; -import { IBrevmottaker } from '@app/hooks/use-suggested-brevmottakere'; -import { IPart, IdType, PartStatusEnum } from '@app/types/oppgave-common'; +import type { IBrevmottaker } from '@app/hooks/use-suggested-brevmottakere'; +import { type IPart, IdType, PartStatusEnum } from '@app/types/oppgave-common'; +import { Buildings3Icon, PersonIcon } from '@navikt/aksel-icons'; +import { Alert, CopyButton, HelpText, Label, Tooltip } from '@navikt/ds-react'; +import { styled } from 'styled-components'; import { StyledBrevmottaker, StyledRecipientContent } from './styled-components'; interface RecipientsProps { @@ -101,14 +101,14 @@ const List = styled.ul` const Row = styled.div` display: flex; align-items: center; - column-gap: 8px; - padding-left: 8px; - padding-right: 8px; - padding-bottom: 4px; + column-gap: var(--a-spacing-2); + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); + padding-bottom: var(--a-spacing-1); `; const AlertContent = styled.div` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/documents/new-documents/modal/modal-content.tsx b/frontend/src/components/documents/new-documents/modal/modal-content.tsx index 1c4ee150a..ea1cffada 100644 --- a/frontend/src/components/documents/new-documents/modal/modal-content.tsx +++ b/frontend/src/components/documents/new-documents/modal/modal-content.tsx @@ -1,8 +1,3 @@ -import { CalendarIcon, CheckmarkIcon } from '@navikt/aksel-icons'; -import { Button, Modal, Tag } from '@navikt/ds-react'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { useState } from 'react'; -import { styled } from 'styled-components'; import { getIsRolQuestions } from '@app/components/documents/new-documents/helpers'; import { AnnenInngaaende } from '@app/components/documents/new-documents/modal/annen-inngaaende'; import { FinishButton } from '@app/components/documents/new-documents/modal/finish-button'; @@ -26,8 +21,13 @@ import { DOCUMENT_TYPE_NAMES, DistribusjonsType, DocumentTypeEnum, - IMainDocument, + type IMainDocument, } from '@app/types/documents/documents'; +import { CalendarIcon, CheckmarkIcon } from '@navikt/aksel-icons'; +import { Button, Modal, Tag } from '@navikt/ds-react'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useState } from 'react'; +import { styled } from 'styled-components'; import { DeleteDocumentButton } from './delete-button'; import { SetParentDocument } from './set-parent'; @@ -151,7 +151,7 @@ const Row = styled.div` display: flex; flex-direction: row; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; const BottomAlignedRow = styled(Row)` @@ -162,14 +162,14 @@ const ModalBody = styled(Modal.Body)<{ $isMainDocument: boolean }>` display: flex; width: 100%; height: ${({ $isMainDocument }) => ($isMainDocument ? '80vh' : 'auto')}; - gap: 16px; + gap: var(--a-spacing-4); overflow: hidden; `; const Left = styled.div` display: flex; flex-direction: column; - gap: 16px; + gap: var(--a-spacing-4); width: fit-content; flex-shrink: 0; overflow-y: auto; diff --git a/frontend/src/components/documents/new-documents/modal/modal-context.tsx b/frontend/src/components/documents/new-documents/modal/modal-context.tsx index c23bc7f06..21aa2690d 100644 --- a/frontend/src/components/documents/new-documents/modal/modal-context.tsx +++ b/frontend/src/components/documents/new-documents/modal/modal-context.tsx @@ -1,6 +1,6 @@ +import type { ValidationError } from '@app/components/documents/new-documents/modal/finish-document/types'; +import type { IMainDocument } from '@app/types/documents/documents'; import { createContext, useCallback, useState } from 'react'; -import { ValidationError } from '@app/components/documents/new-documents/modal/finish-document/types'; -import { IMainDocument } from '@app/types/documents/documents'; interface IModalContext { document: IMainDocument | null; diff --git a/frontend/src/components/documents/new-documents/modal/modal.tsx b/frontend/src/components/documents/new-documents/modal/modal.tsx index 58ff27d05..e6b85a99f 100644 --- a/frontend/src/components/documents/new-documents/modal/modal.tsx +++ b/frontend/src/components/documents/new-documents/modal/modal.tsx @@ -1,7 +1,3 @@ -import { MenuElipsisVerticalIcon } from '@navikt/aksel-icons'; -import { Button, Modal } from '@navikt/ds-react'; -import { useContext, useState } from 'react'; -import { styled } from 'styled-components'; import { Fields } from '@app/components/documents/new-documents/grid'; import { DocumentModalContent } from '@app/components/documents/new-documents/modal/modal-content'; import { ModalContext } from '@app/components/documents/new-documents/modal/modal-context'; @@ -11,7 +7,11 @@ import { useCanEditDocument } from '@app/hooks/use-can-document/use-can-edit-doc import { useHasDocumentsAccess } from '@app/hooks/use-has-documents-access'; import { useIsFeilregistrert } from '@app/hooks/use-is-feilregistrert'; import { useIsRol } from '@app/hooks/use-is-rol'; -import { IMainDocument } from '@app/types/documents/documents'; +import type { IMainDocument } from '@app/types/documents/documents'; +import { MenuElipsisVerticalIcon } from '@navikt/aksel-icons'; +import { Button, Modal } from '@navikt/ds-react'; +import { useContext, useState } from 'react'; +import { styled } from 'styled-components'; interface Props { document: IMainDocument; @@ -34,11 +34,11 @@ export const DocumentModal = ({ document, parentDocument, containsRolAttachments return null; } - if (!hasDocumentsAccess && !isRol) { + if (!(hasDocumentsAccess || isRol)) { return null; } - if (!canEditDocument && !canDeleteDocument) { + if (!(canEditDocument || canDeleteDocument)) { return null; } diff --git a/frontend/src/components/documents/new-documents/modal/mottatt-dato.tsx b/frontend/src/components/documents/new-documents/modal/mottatt-dato.tsx index 1b0f7d86d..409b519bd 100644 --- a/frontend/src/components/documents/new-documents/modal/mottatt-dato.tsx +++ b/frontend/src/components/documents/new-documents/modal/mottatt-dato.tsx @@ -1,7 +1,7 @@ -import { skipToken } from '@reduxjs/toolkit/query'; import { DatePicker } from '@app/components/date-picker/date-picker'; import { useSetDatoMottattMutation } from '@app/redux-api/oppgaver/mutations/documents'; -import { IFileDocument } from '@app/types/documents/documents'; +import type { IFileDocument } from '@app/types/documents/documents'; +import { skipToken } from '@reduxjs/toolkit/query'; interface Props { document: IFileDocument; diff --git a/frontend/src/components/documents/new-documents/modal/pdf-preview/pdf-preview.tsx b/frontend/src/components/documents/new-documents/modal/pdf-preview/pdf-preview.tsx index 3d2472821..2d2c33cf3 100644 --- a/frontend/src/components/documents/new-documents/modal/pdf-preview/pdf-preview.tsx +++ b/frontend/src/components/documents/new-documents/modal/pdf-preview/pdf-preview.tsx @@ -1,10 +1,10 @@ +import { Header } from '@app/components/view-pdf/header'; +import { NoFlickerReloadPdf, type UseNoFlickerReloadPdf } from '@app/components/view-pdf/no-flicker-reload'; +import { useDocumentsArchivePdfWidth } from '@app/hooks/settings/use-setting'; import { ArrowCirclepathIcon, ZoomMinusIcon, ZoomPlusIcon } from '@navikt/aksel-icons'; -import { Button, ButtonProps } from '@navikt/ds-react'; +import { Button, type ButtonProps } from '@navikt/ds-react'; import { useEffect } from 'react'; import { styled } from 'styled-components'; -import { Header } from '@app/components/view-pdf/header'; -import { NoFlickerReloadPdf, UseNoFlickerReloadPdf } from '@app/components/view-pdf/no-flicker-reload'; -import { useDocumentsArchivePdfWidth } from '@app/hooks/settings/use-setting'; const MIN_PDF_WIDTH = 400; const ZOOM_STEP = 150; diff --git a/frontend/src/components/documents/new-documents/modal/set-parent.tsx b/frontend/src/components/documents/new-documents/modal/set-parent.tsx index 9ff98f8f4..3aabc4079 100644 --- a/frontend/src/components/documents/new-documents/modal/set-parent.tsx +++ b/frontend/src/components/documents/new-documents/modal/set-parent.tsx @@ -1,7 +1,4 @@ -import { Alert, Button, Heading, Radio, RadioGroup, Tag } from '@navikt/ds-react'; -import { useMemo } from 'react'; -import { styled } from 'styled-components'; -import { DocumentIcon, ModalDocumentType } from '@app/components/documents/new-documents/shared/document-icon'; +import { DocumentIcon, type ModalDocumentType } from '@app/components/documents/new-documents/shared/document-icon'; import { getIsIncomingDocument } from '@app/functions/is-incoming-document'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { useIsRol } from '@app/hooks/use-is-rol'; @@ -10,11 +7,14 @@ import { useSetParentMutation } from '@app/redux-api/oppgaver/mutations/document import { useGetDocumentsQuery } from '@app/redux-api/oppgaver/queries/documents'; import { DISTRIBUTION_TYPE_NAMES, - DistribusjonsType, + type DistribusjonsType, DocumentTypeEnum, - IMainDocument, + type IMainDocument, } from '@app/types/documents/documents'; import { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; +import { Alert, Button, Heading, Radio, RadioGroup, Tag } from '@navikt/ds-react'; +import { useMemo } from 'react'; +import { styled } from 'styled-components'; const IS_PARENT_DOCUMENT = 'PARENT_DOCUMENT_VALUE'; @@ -124,7 +124,7 @@ const MainDocument = ({ document, isIncomingDocument, onClick, isLoading }: Main ); } - if (!isSaksbehandler && !isIncomingDocument) { + if (!(isSaksbehandler || isIncomingDocument)) { return ( Bare tildelt saksbehandler kan gjøre dette dokumentet til et hoveddokument. @@ -163,7 +163,7 @@ const RadioContent = styled.div` flex-direction: row; align-items: center; justify-content: flex-start; - column-gap: 4px; + column-gap: var(--a-spacing-1); `; const RadioText = styled.span` @@ -175,6 +175,6 @@ const RadioText = styled.span` const VedleggSection = styled.section` display: flex; flex-direction: column; - row-gap: 16px; + row-gap: var(--a-spacing-4); align-items: flex-start; `; diff --git a/frontend/src/components/documents/new-documents/new-attachment-buttons.tsx b/frontend/src/components/documents/new-documents/new-attachment-buttons.tsx index 353a3119d..141f3dd5e 100644 --- a/frontend/src/components/documents/new-documents/new-attachment-buttons.tsx +++ b/frontend/src/components/documents/new-documents/new-attachment-buttons.tsx @@ -1,8 +1,3 @@ -import { Chat2Icon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { useContext } from 'react'; -import { styled } from 'styled-components'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { getIsRolQuestions } from '@app/components/documents/new-documents/helpers'; import { UploadFileButton } from '@app/components/upload-file-button/upload-file-button'; @@ -11,10 +6,15 @@ import { useIsFeilregistrert } from '@app/hooks/use-is-feilregistrert'; import { useIsFullfoert } from '@app/hooks/use-is-fullfoert'; import { useIsRol } from '@app/hooks/use-is-rol'; import { ROL_ANSWERS_TEMPLATE } from '@app/plate/templates/simple-templates'; -import { useCreateSmartDocumentMutation } from '@app/redux-api/oppgaver/mutations/smart-document'; +import { useCreateSmartDocumentMutation } from '@app/redux-api/collaboration'; import { Role } from '@app/types/bruker'; -import { DistribusjonsType, IMainDocument } from '@app/types/documents/documents'; +import { DistribusjonsType, type IMainDocument } from '@app/types/documents/documents'; import { Language } from '@app/types/texts/language'; +import { Chat2Icon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useContext } from 'react'; +import { styled } from 'styled-components'; interface Props { document: IMainDocument; @@ -64,7 +64,7 @@ const NewRolAnswerDocumentButton = ({ document }: Props) => { return null; } - if (!getIsRolQuestions(document) || !isRol) { + if (!(getIsRolQuestions(document) && isRol)) { return null; } @@ -92,6 +92,6 @@ const Container = styled.div` display: flex; align-items: center; flex-direction: row; - column-gap: 8px; + column-gap: var(--a-spacing-2); margin-left: 28px; `; diff --git a/frontend/src/components/documents/new-documents/new-document/archiving-icon.tsx b/frontend/src/components/documents/new-documents/new-document/archiving-icon.tsx index e0af27e83..9dc742feb 100644 --- a/frontend/src/components/documents/new-documents/new-document/archiving-icon.tsx +++ b/frontend/src/components/documents/new-documents/new-document/archiving-icon.tsx @@ -1,8 +1,8 @@ +import { Fields } from '@app/components/documents/new-documents/grid'; +import { DistribusjonsType } from '@app/types/documents/documents'; import { HourglassIcon } from '@navikt/aksel-icons'; import { memo } from 'react'; import { css, styled } from 'styled-components'; -import { Fields } from '@app/components/documents/new-documents/grid'; -import { DistribusjonsType } from '@app/types/documents/documents'; const GRID_CSS = css` grid-area: ${Fields.Action}; @@ -10,8 +10,8 @@ const GRID_CSS = css` const IconContainer = styled.span` ${GRID_CSS} - width: 32px; - height: 32px; + width: var(--a-spacing-8); + height: var(--a-spacing-8); display: flex; align-items: center; justify-content: center; diff --git a/frontend/src/components/documents/new-documents/new-document/new-attachment.tsx b/frontend/src/components/documents/new-documents/new-document/new-attachment.tsx index e6b547453..69d32b5c4 100644 --- a/frontend/src/components/documents/new-documents/new-document/new-attachment.tsx +++ b/frontend/src/components/documents/new-documents/new-document/new-attachment.tsx @@ -1,6 +1,3 @@ -import { skipToken } from '@reduxjs/toolkit/query'; -import { memo, useCallback, useContext, useRef } from 'react'; -import { styled } from 'styled-components'; import { createDragUI } from '@app/components/documents/create-drag-ui'; import { DragAndDropContext } from '@app/components/documents/drag-context'; import { @@ -18,7 +15,10 @@ import { useIsExpanded } from '@app/components/documents/use-is-expanded'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { useCanEditDocument } from '@app/hooks/use-can-document/use-can-edit-document'; import { useLazyGetDocumentsQuery } from '@app/redux-api/oppgaver/queries/documents'; -import { DocumentTypeEnum, IMainDocument } from '@app/types/documents/documents'; +import { DocumentTypeEnum, type IMainDocument } from '@app/types/documents/documents'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { memo, useCallback, useContext, useRef } from 'react'; +import { styled } from 'styled-components'; import { DocumentTitle } from './title'; interface Props { @@ -161,7 +161,7 @@ interface StlyedNewAttachmentProps { export const StyledNewAttachment = styled.article` ${documentCSS} display: grid; - grid-column-gap: 8px; + grid-column-gap: var(--a-spacing-2); align-items: center; padding-left: 6px; padding-right: 0; diff --git a/frontend/src/components/documents/new-documents/new-document/new-document.tsx b/frontend/src/components/documents/new-documents/new-document/new-document.tsx index 31b181415..55a3d241a 100644 --- a/frontend/src/components/documents/new-documents/new-document/new-document.tsx +++ b/frontend/src/components/documents/new-documents/new-document/new-document.tsx @@ -1,6 +1,3 @@ -import { skipToken } from '@reduxjs/toolkit/query'; -import { memo, useCallback, useContext, useRef } from 'react'; -import { styled } from 'styled-components'; import { createDragUI } from '@app/components/documents/create-drag-ui'; import { DragAndDropContext } from '@app/components/documents/drag-context'; import { @@ -18,7 +15,15 @@ import { getIsIncomingDocument } from '@app/functions/is-incoming-document'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { useCanEditDocument } from '@app/hooks/use-can-document/use-can-edit-document'; import { useLazyGetDocumentsQuery } from '@app/redux-api/oppgaver/queries/documents'; -import { DistribusjonsType, DocumentTypeEnum, IFileDocument, IMainDocument } from '@app/types/documents/documents'; +import { + DistribusjonsType, + DocumentTypeEnum, + type IFileDocument, + type IMainDocument, +} from '@app/types/documents/documents'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { memo, useCallback, useContext, useRef } from 'react'; +import { styled } from 'styled-components'; import { SetDocumentType } from './set-type'; import { DocumentTitle } from './title'; @@ -117,7 +122,7 @@ interface StlyedNewDocumentProps { const StyledNewDocument = styled.article` ${documentCSS} display: grid; - grid-column-gap: 8px; + grid-column-gap: var(--a-spacing-2); align-items: center; padding-left: 6px; padding-right: 0; @@ -133,7 +138,7 @@ const hasMottattDato = (doc: IMainDocument): doc is IFileDocument => doc.type === DocumentTypeEnum.UPLOADED && getIsIncomingDocument(doc); const mottattDatoEqual = (prev: IMainDocument, next: IMainDocument) => { - if (!hasMottattDato(prev) || !hasMottattDato(next)) { + if (!(hasMottattDato(prev) && hasMottattDato(next))) { return true; } @@ -144,7 +149,7 @@ const isAnnenInngaaende = (doc: IMainDocument): doc is IFileDocument => doc.type === DocumentTypeEnum.UPLOADED && doc.dokumentTypeId === DistribusjonsType.ANNEN_INNGAAENDE_POST; const annenInngaaendeEqual = (prev: IMainDocument, next: IMainDocument) => { - if (!isAnnenInngaaende(prev) || !isAnnenInngaaende(next)) { + if (!(isAnnenInngaaende(prev) && isAnnenInngaaende(next))) { return true; } diff --git a/frontend/src/components/documents/new-documents/new-document/set-type.tsx b/frontend/src/components/documents/new-documents/new-document/set-type.tsx index e0b2ca29b..8498c6fd2 100644 --- a/frontend/src/components/documents/new-documents/new-document/set-type.tsx +++ b/frontend/src/components/documents/new-documents/new-document/set-type.tsx @@ -1,19 +1,19 @@ -import { Select, Tag, Tooltip } from '@navikt/ds-react'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { useMemo } from 'react'; -import { styled } from 'styled-components'; import { getIsRolQuestions } from '@app/components/documents/new-documents/helpers'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { ANNEN_INNGAAENDE_POST, KJENNELSE_FRA_TRYGDERETTEN, - Option, + type Option, useDistribusjonstypeOptions, } from '@app/hooks/use-distribusjonstype-options'; import { useHasDocumentsAccess } from '@app/hooks/use-has-documents-access'; import { useIsSaksbehandler } from '@app/hooks/use-is-saksbehandler'; import { useSetTypeMutation } from '@app/redux-api/oppgaver/mutations/documents'; -import { DISTRIBUTION_TYPE_NAMES, DistribusjonsType, IMainDocument } from '@app/types/documents/documents'; +import { DISTRIBUTION_TYPE_NAMES, DistribusjonsType, type IMainDocument } from '@app/types/documents/documents'; +import { Select, Tag, Tooltip } from '@navikt/ds-react'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useMemo } from 'react'; +import { styled } from 'styled-components'; interface Props { document: IMainDocument; @@ -99,7 +99,7 @@ export const SetDocumentType = ({ document, hasAttachments, showLabel = false }: }; return ( - + ` display: ${({ $isDropTarget }) => ($isDropTarget ? 'flex' : 'none')}; align-items: center; justify-content: center; - padding: 16px; + padding: var(--a-spacing-4); content: 'Vedlegg for «' attr(data-documentname) '»'; white-space: nowrap; overflow: hidden; @@ -172,7 +172,7 @@ const StyledParentDocumentListItem = styled(StyledDocumentListItem)` background-color: ${({ $isDragOver }) => ($isDragOver ? 'rgba(153, 195, 255, 0.5)' : 'rgba(230, 240, 255, 0.5)')}; text-shadow: 1px 1px white, - -1px -1px white; + -1px -1px var(--a-bg-default); backdrop-filter: blur(2px); } `; diff --git a/frontend/src/components/documents/new-documents/shared/document-date.tsx b/frontend/src/components/documents/new-documents/shared/document-date.tsx index 09d2a2e1d..7facf4c7a 100644 --- a/frontend/src/components/documents/new-documents/shared/document-date.tsx +++ b/frontend/src/components/documents/new-documents/shared/document-date.tsx @@ -1,6 +1,6 @@ -import { HTMLAttributes } from 'react'; import { isoDateTimeToPrettyDate } from '@app/domain/date'; -import { IJournalfoertDokumentReference } from '@app/types/documents/documents'; +import type { IJournalfoertDokumentReference } from '@app/types/documents/documents'; +import type { HTMLAttributes } from 'react'; interface Props extends Omit, 'dateTime'> { document: IJournalfoertDokumentReference; diff --git a/frontend/src/components/documents/new-documents/shared/document-icon.tsx b/frontend/src/components/documents/new-documents/shared/document-icon.tsx index 573d456ed..3d66e9ba5 100644 --- a/frontend/src/components/documents/new-documents/shared/document-icon.tsx +++ b/frontend/src/components/documents/new-documents/shared/document-icon.tsx @@ -1,7 +1,7 @@ +import { DOCUMENT_TYPE_NAMES, DocumentTypeEnum } from '@app/types/documents/documents'; import { DocPencilIcon, FilePdfIcon, FilesIcon } from '@navikt/aksel-icons'; import { memo } from 'react'; import { styled } from 'styled-components'; -import { DOCUMENT_TYPE_NAMES, DocumentTypeEnum } from '@app/types/documents/documents'; export type ModalDocumentType = DocumentTypeEnum.SMART | DocumentTypeEnum.UPLOADED | DocumentTypeEnum.JOURNALFOERT; diff --git a/frontend/src/components/documents/new-documents/shared/title.tsx b/frontend/src/components/documents/new-documents/shared/title.tsx index cdcf75854..a6eec3b30 100644 --- a/frontend/src/components/documents/new-documents/shared/title.tsx +++ b/frontend/src/components/documents/new-documents/shared/title.tsx @@ -1,4 +1,3 @@ -import { useCallback, useContext, useMemo } from 'react'; import { StyledDocumentTitle } from '@app/components/documents/new-documents/new-document/title-style'; import { TabContext } from '@app/components/documents/tab-context'; import { useIsTabOpen } from '@app/components/documents/use-is-tab-open'; @@ -11,7 +10,8 @@ import { import { useDocumentsPdfViewed } from '@app/hooks/settings/use-setting'; import { MouseButtons } from '@app/keys'; import { DocumentTypeEnum } from '@app/types/documents/documents'; -import { IJournalfoertDokumentId } from '@app/types/oppgave-common'; +import type { IJournalfoertDokumentId } from '@app/types/oppgave-common'; +import { useCallback, useContext, useMemo } from 'react'; import { EllipsisTitle, StyledDocumentLink } from '../../styled-components/document-link'; interface BaseProps { diff --git a/frontend/src/components/documents/styled-components/attachment-list.ts b/frontend/src/components/documents/styled-components/attachment-list.ts index 353cf92df..bd2f52970 100644 --- a/frontend/src/components/documents/styled-components/attachment-list.ts +++ b/frontend/src/components/documents/styled-components/attachment-list.ts @@ -37,7 +37,7 @@ export const JournalfoerteDocumentsAttachments = styled(StyledAttachmentList)<{ &::before { ${treeRootStructureCss} height: ${({ $treeLineHeight }) => $treeLineHeight}px; - left: 4px; + left: var(--a-spacing-1); } `; @@ -56,7 +56,7 @@ export const StyledNewAttachmentListItem: typeof StyledDocumentListItem = styled position: absolute; left: 0; right: 0; - padding-left: 16px; + padding-left: var(--a-spacing-4); margin-left: 0; margin-right: 0; @@ -66,7 +66,7 @@ export const StyledNewAttachmentListItem: typeof StyledDocumentListItem = styled width: 12px; position: absolute; left: 3px; - top: 16px; + top: var(--a-spacing-4); border-bottom: 1px solid var(--a-border-subtle); } `; @@ -77,7 +77,7 @@ export const StyledAttachmentListItem: typeof StyledDocumentListItem = styled(St position: absolute; left: 0; right: 0; - padding-left: 16px; + padding-left: var(--a-spacing-4); margin-left: 0; margin-right: 0; @@ -87,7 +87,7 @@ export const StyledAttachmentListItem: typeof StyledDocumentListItem = styled(St width: ${BRANCH_WIDTH}px; position: absolute; left: 5px; - top: 16px; + top: var(--a-spacing-4); border-bottom: 1px solid var(--a-border-subtle); } `; diff --git a/frontend/src/components/documents/styled-components/container.ts b/frontend/src/components/documents/styled-components/container.ts index 37e358967..76e614faa 100644 --- a/frontend/src/components/documents/styled-components/container.ts +++ b/frontend/src/components/documents/styled-components/container.ts @@ -3,7 +3,7 @@ import { css } from 'styled-components'; export const commonStyles = css` display: flex; flex-direction: column; - padding-left: 16px; - padding-right: 16px; - padding-bottom: 8px; + padding-left: var(--a-spacing-4); + padding-right: var(--a-spacing-4); + padding-bottom: var(--a-spacing-2); `; diff --git a/frontend/src/components/documents/styled-components/document-link.ts b/frontend/src/components/documents/styled-components/document-link.ts index d8321cda2..c2b0c794c 100644 --- a/frontend/src/components/documents/styled-components/document-link.ts +++ b/frontend/src/components/documents/styled-components/document-link.ts @@ -2,7 +2,7 @@ import { styled } from 'styled-components'; export const StyledDocumentLink = styled.a<{ $isActive: boolean; $disabled?: boolean }>` display: flex; - gap: 8px; + gap: var(--a-spacing-2); align-items: center; cursor: ${({ $disabled }) => ($disabled === true ? 'not-allowed' : 'pointer')}; opacity: ${({ $disabled }) => ($disabled === true ? 0.5 : 1)}; diff --git a/frontend/src/components/documents/styled-components/document-list.ts b/frontend/src/components/documents/styled-components/document-list.ts index 4716f1816..962aca9f3 100644 --- a/frontend/src/components/documents/styled-components/document-list.ts +++ b/frontend/src/components/documents/styled-components/document-list.ts @@ -1,5 +1,5 @@ -import { styled } from 'styled-components'; import { PADDING_BOTTOM, PADDING_TOP, ROW_GAP } from '@app/components/documents/new-documents/constants'; +import { styled } from 'styled-components'; export const StyledDocumentList = styled.ul` display: flex; diff --git a/frontend/src/components/documents/styled-components/document.ts b/frontend/src/components/documents/styled-components/document.ts index cd04c96b2..8a1b27a17 100644 --- a/frontend/src/components/documents/styled-components/document.ts +++ b/frontend/src/components/documents/styled-components/document.ts @@ -3,7 +3,7 @@ import { css } from 'styled-components'; export const documentCSS = css` position: relative; width: 100%; - height: 32px; + height: var(--a-spacing-8); padding-right: 0; border-radius: var(--a-border-radius-medium); background-color: transparent; diff --git a/frontend/src/components/documents/styled-components/list-header.ts b/frontend/src/components/documents/styled-components/list-header.ts index 094d57505..d6f3259c2 100644 --- a/frontend/src/components/documents/styled-components/list-header.ts +++ b/frontend/src/components/documents/styled-components/list-header.ts @@ -1,7 +1,7 @@ import { css } from 'styled-components'; export const listHeaderCSS = css` - padding-bottom: 8px; + padding-bottom: var(--a-spacing-2); border-bottom: 1px solid #c6c2bf; margin-right: 2px; margin-left: 2px; diff --git a/frontend/src/components/documents/toggle-expand-button.tsx b/frontend/src/components/documents/toggle-expand-button.tsx index 46f22305c..8c47d463b 100644 --- a/frontend/src/components/documents/toggle-expand-button.tsx +++ b/frontend/src/components/documents/toggle-expand-button.tsx @@ -1,10 +1,10 @@ +import { useIsExpanded } from '@app/components/documents/use-is-expanded'; +import { useDocumentsOnlyIncluded } from '@app/hooks/settings/use-setting'; +import { pushEvent } from '@app/observability'; import { ChevronLeftIcon, ChevronRightIcon } from '@navikt/aksel-icons'; import { Button } from '@navikt/ds-react'; import { useCallback } from 'react'; import { styled } from 'styled-components'; -import { useIsExpanded } from '@app/components/documents/use-is-expanded'; -import { useDocumentsOnlyIncluded } from '@app/hooks/settings/use-setting'; -import { pushEvent } from '@app/observability'; export const ToggleExpandedButton = () => { const [isExpanded, setIsExpanded] = useIsExpanded(); diff --git a/frontend/src/components/documents/upload-file/document-type.tsx b/frontend/src/components/documents/upload-file/document-type.tsx index 45650ce47..1eb06a3f6 100644 --- a/frontend/src/components/documents/upload-file/document-type.tsx +++ b/frontend/src/components/documents/upload-file/document-type.tsx @@ -1,9 +1,9 @@ +import { useDistribusjonstypeOptions } from '@app/hooks/use-distribusjonstype-options'; +import { useIsSaksbehandler } from '@app/hooks/use-is-saksbehandler'; +import { type DistribusjonsType, DocumentTypeEnum } from '@app/types/documents/documents'; import { Select } from '@navikt/ds-react'; import { useMemo } from 'react'; import { styled } from 'styled-components'; -import { useDistribusjonstypeOptions } from '@app/hooks/use-distribusjonstype-options'; -import { useIsSaksbehandler } from '@app/hooks/use-is-saksbehandler'; -import { DistribusjonsType, DocumentTypeEnum } from '@app/types/documents/documents'; const NONE = 'NONE'; const NONE_OPTION = ; diff --git a/frontend/src/components/documents/upload-file/upload-file.tsx b/frontend/src/components/documents/upload-file/upload-file.tsx index 27aaa6689..cce20e50a 100644 --- a/frontend/src/components/documents/upload-file/upload-file.tsx +++ b/frontend/src/components/documents/upload-file/upload-file.tsx @@ -1,8 +1,8 @@ -import { useCallback, useState } from 'react'; -import { styled } from 'styled-components'; import { UploadFileButton } from '@app/components/upload-file-button/upload-file-button'; import { useHasUploadAccess } from '@app/hooks/use-has-documents-access'; import { DistribusjonsType } from '@app/types/documents/documents'; +import { useCallback, useState } from 'react'; +import { styled } from 'styled-components'; import { SetDocumentType } from './document-type'; export const UploadFile = () => { @@ -37,7 +37,7 @@ const Container = styled.div` display: flex; flex-direction: row; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; const isDocumentType = (type: string): type is DistribusjonsType => diff --git a/frontend/src/components/editable-title/editable-title.tsx b/frontend/src/components/editable-title/editable-title.tsx index e990a0f7d..dfb64b475 100644 --- a/frontend/src/components/editable-title/editable-title.tsx +++ b/frontend/src/components/editable-title/editable-title.tsx @@ -75,7 +75,7 @@ const Container = styled.div` display: flex; flex-direction: row; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); grid-area: title; `; @@ -122,7 +122,7 @@ const StyledTextField = styled(TextField)` `; const NoStyleButton = styled.button` - background: none; + background-color: none; border: none; padding: 0; margin: 0; diff --git a/frontend/src/components/editor-name/editor-name.tsx b/frontend/src/components/editor-name/editor-name.tsx index d6d26f256..62860b39e 100644 --- a/frontend/src/components/editor-name/editor-name.tsx +++ b/frontend/src/components/editor-name/editor-name.tsx @@ -1,6 +1,6 @@ +import { useGetSignatureQuery } from '@app/redux-api/bruker'; import { Loader } from '@navikt/ds-react'; import { skipToken } from '@reduxjs/toolkit/query'; -import { useGetSignatureQuery } from '@app/redux-api/bruker'; interface EditorProps { editorId: string; @@ -13,6 +13,6 @@ export const EditorName = ({ editorId }: EditorProps) => { return isLoading || data === undefined ? ( ) : ( - (data.customLongName ?? data.longName) + data.customLongName ?? data.longName ); }; diff --git a/frontend/src/components/enhetens-ferdigstilte-oppgaver-table /enhetens-ferdigstilte-oppgaver-table.tsx b/frontend/src/components/enhetens-ferdigstilte-oppgaver-table /enhetens-ferdigstilte-oppgaver-table.tsx index 4d643b046..def74901f 100644 --- a/frontend/src/components/enhetens-ferdigstilte-oppgaver-table /enhetens-ferdigstilte-oppgaver-table.tsx +++ b/frontend/src/components/enhetens-ferdigstilte-oppgaver-table /enhetens-ferdigstilte-oppgaver-table.tsx @@ -1,5 +1,3 @@ -import { Heading } from '@navikt/ds-react'; -import { useContext, useState } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { OppgaveTable } from '@app/components/common-table-components/oppgave-table/oppgave-table'; import { ColumnKeyEnum } from '@app/components/common-table-components/types'; @@ -7,7 +5,14 @@ import { OppgaveTableRowsPerPage } from '@app/hooks/settings/use-setting'; import { useHasRole } from '@app/hooks/use-has-role'; import { useGetEnhetensFerdigstilteOppgaverQuery } from '@app/redux-api/oppgaver/queries/oppgaver'; import { Role } from '@app/types/bruker'; -import { CommonOppgaverParams, EnhetensOppgaverParams, SortFieldEnum, SortOrderEnum } from '@app/types/oppgaver'; +import { + type CommonOppgaverParams, + type EnhetensOppgaverParams, + SortFieldEnum, + SortOrderEnum, +} from '@app/types/oppgaver'; +import { Heading } from '@navikt/ds-react'; +import { useContext, useState } from 'react'; const COLUMNS: ColumnKeyEnum[] = [ ColumnKeyEnum.TypeWithAnkeITrygderetten, diff --git a/frontend/src/components/enhetens-oppgaver-paa-vent-table/enhetens-oppgaver-paa-vent-table.tsx b/frontend/src/components/enhetens-oppgaver-paa-vent-table/enhetens-oppgaver-paa-vent-table.tsx index 592f15b29..3d28a8a22 100644 --- a/frontend/src/components/enhetens-oppgaver-paa-vent-table/enhetens-oppgaver-paa-vent-table.tsx +++ b/frontend/src/components/enhetens-oppgaver-paa-vent-table/enhetens-oppgaver-paa-vent-table.tsx @@ -1,5 +1,3 @@ -import { Heading } from '@navikt/ds-react'; -import { useContext, useState } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { OppgaveTable } from '@app/components/common-table-components/oppgave-table/oppgave-table'; import { ColumnKeyEnum } from '@app/components/common-table-components/types'; @@ -7,7 +5,14 @@ import { OppgaveTableRowsPerPage } from '@app/hooks/settings/use-setting'; import { useHasRole } from '@app/hooks/use-has-role'; import { useGetEnhetensVentendeOppgaverQuery } from '@app/redux-api/oppgaver/queries/oppgaver'; import { Role } from '@app/types/bruker'; -import { CommonOppgaverParams, EnhetensOppgaverParams, SortFieldEnum, SortOrderEnum } from '@app/types/oppgaver'; +import { + type CommonOppgaverParams, + type EnhetensOppgaverParams, + SortFieldEnum, + SortOrderEnum, +} from '@app/types/oppgaver'; +import { Heading } from '@navikt/ds-react'; +import { useContext, useState } from 'react'; const COLUMNS: ColumnKeyEnum[] = [ ColumnKeyEnum.TypeWithAnkeITrygderetten, diff --git a/frontend/src/components/enhetens-oppgaver-table/enhetens-oppgaver-table.tsx b/frontend/src/components/enhetens-oppgaver-table/enhetens-oppgaver-table.tsx index ea25a7be6..402741863 100644 --- a/frontend/src/components/enhetens-oppgaver-table/enhetens-oppgaver-table.tsx +++ b/frontend/src/components/enhetens-oppgaver-table/enhetens-oppgaver-table.tsx @@ -1,6 +1,3 @@ -import { Heading } from '@navikt/ds-react'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { useContext, useState } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { OppgaveTable } from '@app/components/common-table-components/oppgave-table/oppgave-table'; import { ColumnKeyEnum } from '@app/components/common-table-components/types'; @@ -9,7 +6,15 @@ import { useHasRole } from '@app/hooks/use-has-role'; import { useSakstyper } from '@app/hooks/use-kodeverk-value'; import { useGetEnhetensUferdigeOppgaverQuery } from '@app/redux-api/oppgaver/queries/oppgaver'; import { Role } from '@app/types/bruker'; -import { CommonOppgaverParams, EnhetensOppgaverParams, SortFieldEnum, SortOrderEnum } from '@app/types/oppgaver'; +import { + type CommonOppgaverParams, + type EnhetensOppgaverParams, + SortFieldEnum, + SortOrderEnum, +} from '@app/types/oppgaver'; +import { Heading } from '@navikt/ds-react'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useContext, useState } from 'react'; const COLUMNS: ColumnKeyEnum[] = [ ColumnKeyEnum.TypeWithAnkeITrygderetten, diff --git a/frontend/src/components/feilregistrering/confirm.tsx b/frontend/src/components/feilregistrering/confirm.tsx index 52f27f683..b7e810f76 100644 --- a/frontend/src/components/feilregistrering/confirm.tsx +++ b/frontend/src/components/feilregistrering/confirm.tsx @@ -1,9 +1,9 @@ +import type { FagsystemId } from '@app/components/feilregistrering/types'; +import { useFagsystemer } from '@app/simple-api-state/use-kodeverk'; import { CheckmarkIcon, XMarkIcon } from '@navikt/aksel-icons'; import { Alert, Button, Loader } from '@navikt/ds-react'; import { useContext } from 'react'; import { styled } from 'styled-components'; -import { FagsystemId } from '@app/components/feilregistrering/types'; -import { useFagsystemer } from '@app/simple-api-state/use-kodeverk'; import { Context } from './context'; import { Row } from './styled-components'; @@ -40,7 +40,8 @@ const StyledButton = styled(Button)` white-space: nowrap; `; -const DEFAULT_TEXT = `Feilregistrering er noe annet enn utfallene «trukket» eller «retur». Du skal kun feilregistrere dersom saken aldri skulle vært i Kabal, for eksempel om vedtaksenheten har bedt om å få saken tilbake fordi den ble sendt til klageinstansen ved en feil, eller fordi samme sak er registrert to ganger ved en feil.`; +const DEFAULT_TEXT = + 'Feilregistrering er noe annet enn utfallene «trukket» eller «retur». Du skal kun feilregistrere dersom saken aldri skulle vært i Kabal, for eksempel om vedtaksenheten har bedt om å få saken tilbake fordi den ble sendt til klageinstansen ved en feil, eller fordi samme sak er registrert to ganger ved en feil.'; const NON_MODERNIZED_SUFFIX = 'Husk at du må oppdatere oppgaven i Gosys med beskjed til vedtaksenheten om at du har feilregistrert.'; diff --git a/frontend/src/components/feilregistrering/feilregistrering.tsx b/frontend/src/components/feilregistrering/feilregistrering.tsx index f50ca9574..dab8efa1d 100644 --- a/frontend/src/components/feilregistrering/feilregistrering.tsx +++ b/frontend/src/components/feilregistrering/feilregistrering.tsx @@ -1,15 +1,15 @@ -import { FileXMarkIcon } from '@navikt/aksel-icons'; -import { Box, Button } from '@navikt/ds-react'; -import { useRef, useState } from 'react'; -import { styled } from 'styled-components'; import { Confirm } from '@app/components/feilregistrering/confirm'; import { Register } from '@app/components/feilregistrering/register'; import { useCanFeilregistrere } from '@app/components/feilregistrering/use-can-feilregistrere'; import { isoDateTimeToPretty } from '@app/domain/date'; import { useOnClickOutside } from '@app/hooks/use-on-click-outside'; import { useSetFeilregistrertMutation } from '@app/redux-api/oppgaver/mutations/behandling'; +import { FileXMarkIcon } from '@navikt/aksel-icons'; +import { Box, Button } from '@navikt/ds-react'; +import { useRef, useState } from 'react'; +import { styled } from 'styled-components'; import { Context } from './context'; -import { Children, FagsystemId, OppgaveId, Position, Variant } from './types'; +import type { Children, FagsystemId, OppgaveId, Position, Variant } from './types'; interface Props extends OppgaveId, Variant, Position, FagsystemId { feilregistrert: string | null; @@ -105,7 +105,7 @@ const FloatingBox = styled(Box)` left: ${({ $align }) => ($align === 'left' ? '0' : 'auto')}; display: flex; flex-direction: column; - row-gap: 16px; + row-gap: var(--a-spacing-4); z-index: 1; min-width: 400px; `; diff --git a/frontend/src/components/feilregistrering/register.tsx b/frontend/src/components/feilregistrering/register.tsx index 0809cb39e..70e8d95a9 100644 --- a/frontend/src/components/feilregistrering/register.tsx +++ b/frontend/src/components/feilregistrering/register.tsx @@ -1,12 +1,12 @@ +import { MOD_KEY } from '@app/keys'; +import { useSetFeilregistrertMutation } from '@app/redux-api/oppgaver/mutations/behandling'; import { FileXMarkIcon, XMarkIcon } from '@navikt/aksel-icons'; import { BodyShort, Button, Textarea } from '@navikt/ds-react'; import { useCallback, useContext, useState } from 'react'; import { styled } from 'styled-components'; -import { MOD_KEY } from '@app/keys'; -import { useSetFeilregistrertMutation } from '@app/redux-api/oppgaver/mutations/behandling'; import { Context } from './context'; import { Row } from './styled-components'; -import { OppgaveId } from './types'; +import type { OppgaveId } from './types'; const MAX_LENGTH = 250; @@ -69,7 +69,7 @@ export const Register = ({ oppgaveId }: OppgaveId) => { const Code = styled.code` background-color: var(--a-bg-subtle); - padding: 2px 4px; + padding: 2px var(--a-spacing-1); border-radius: var(--a-border-radius-medium); font-size: 13px; `; diff --git a/frontend/src/components/feilregistrering/styled-components.ts b/frontend/src/components/feilregistrering/styled-components.ts index 0855bc370..17199a0e7 100644 --- a/frontend/src/components/feilregistrering/styled-components.ts +++ b/frontend/src/components/feilregistrering/styled-components.ts @@ -4,5 +4,5 @@ export const Row = styled.div` display: flex; justify-content: space-between; align-items: center; - column-gap: 16px; + column-gap: var(--a-spacing-4); `; diff --git a/frontend/src/components/feilregistrering/use-can-feilregistrere.ts b/frontend/src/components/feilregistrering/use-can-feilregistrere.ts index 62e7cf212..e7eadaadd 100644 --- a/frontend/src/components/feilregistrering/use-can-feilregistrere.ts +++ b/frontend/src/components/feilregistrering/use-can-feilregistrere.ts @@ -1,6 +1,6 @@ -import { useContext } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { Role } from '@app/types/bruker'; +import { useContext } from 'react'; export const useCanFeilregistrere = (tildeltSaksbehandlerident: string | null) => { const { user } = useContext(StaticDataContext); diff --git a/frontend/src/components/feilregistrert-modal/feilregistrert-modal.tsx b/frontend/src/components/feilregistrert-modal/feilregistrert-modal.tsx index ef437e6ea..e9cabd746 100644 --- a/frontend/src/components/feilregistrert-modal/feilregistrert-modal.tsx +++ b/frontend/src/components/feilregistrert-modal/feilregistrert-modal.tsx @@ -1,10 +1,10 @@ -import { XMarkIcon } from '@navikt/aksel-icons'; -import { BodyLong, BodyShort, Button, Heading, Loader, Modal } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { isoDateTimeToPretty } from '@app/domain/date'; import { formatEmployeeName } from '@app/domain/employee-name'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useFagsystemName } from '@app/hooks/use-fagsystem-name'; +import { XMarkIcon } from '@navikt/aksel-icons'; +import { BodyLong, BodyShort, Button, Heading, Loader, Modal } from '@navikt/ds-react'; +import { styled } from 'styled-components'; interface Props extends ContentProps { isOpen: boolean; diff --git a/frontend/src/components/filter-dropdown/dropdown.tsx b/frontend/src/components/filter-dropdown/dropdown.tsx index 0025ddf76..6187e7283 100644 --- a/frontend/src/components/filter-dropdown/dropdown.tsx +++ b/frontend/src/components/filter-dropdown/dropdown.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'; import { styled } from 'styled-components'; import { FilterList } from './filter-list'; import { Header } from './header'; -import { BaseProps, DropdownProps } from './props'; +import type { BaseProps, DropdownProps } from './props'; interface Props extends BaseProps, DropdownProps {} @@ -13,7 +13,7 @@ export const Dropdown = ({ selected, options, onChange, close useEffect(() => { setFilteredOptions(options.filter(({ label }) => filter.test(label))); - }, [setFilteredOptions, options, filter]); + }, [options, filter]); const reset = () => onChange([]); @@ -58,10 +58,10 @@ const StyledDropdown = styled.div` flex-direction: column; padding: 0; margin: 0; - background-color: white; + background-color: var(--a-bg-default); border-radius: var(--a-border-radius-medium); border: 1px solid #c6c2bf; - box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3); + box-shadow: 0 1px var(--a-spacing-1) 0 rgba(0, 0, 0, 0.3); z-index: 1; max-width: 100%; max-height: 100%; diff --git a/frontend/src/components/filter-dropdown/filter-dropdown.tsx b/frontend/src/components/filter-dropdown/filter-dropdown.tsx index 46b5ba8c2..34c8cfaa9 100644 --- a/frontend/src/components/filter-dropdown/filter-dropdown.tsx +++ b/frontend/src/components/filter-dropdown/filter-dropdown.tsx @@ -1,10 +1,10 @@ +import { useOnClickOutside } from '@app/hooks/use-on-click-outside'; import { ChevronDownIcon, ChevronUpIcon } from '@navikt/aksel-icons'; import { useRef, useState } from 'react'; import { styled } from 'styled-components'; -import { useOnClickOutside } from '@app/hooks/use-on-click-outside'; import { ToggleButton } from '../toggle-button/toggle-button'; import { Dropdown } from './dropdown'; -import { BaseProps } from './props'; +import type { BaseProps } from './props'; interface FilterDropdownProps extends BaseProps { children: string | null; @@ -91,8 +91,8 @@ const StyledPopup = styled.div` max-height: ${({ $maxHeight = 500 }) => $maxHeight}px; max-width: ${({ $maxWidth }) => $maxWidth ?? 'unset'}; z-index: 22; - background-color: white; + background-color: var(--a-bg-default); border-radius: 0.25rem; border: 1px solid #c6c2bf; - box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3); + box-shadow: 0 1px var(--a-spacing-1) 0 rgba(0, 0, 0, 0.3); `; diff --git a/frontend/src/components/filter-dropdown/filter-list.tsx b/frontend/src/components/filter-dropdown/filter-list.tsx index 2be38ab13..25ff41892 100644 --- a/frontend/src/components/filter-dropdown/filter-list.tsx +++ b/frontend/src/components/filter-dropdown/filter-list.tsx @@ -1,7 +1,7 @@ import { CheckboxGroup } from '@navikt/ds-react'; import { styled } from 'styled-components'; import { Filter } from './option'; -import { BaseProps } from './props'; +import type { BaseProps } from './props'; interface Props extends BaseProps { className?: string; @@ -35,7 +35,7 @@ export const FilterList = ({ selected, options, focused, onCha ); const StyledCheckboxGroup = styled(CheckboxGroup)` - padding-left: 8px; - padding-right: 8px; - padding-top: 8px; + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); + padding-top: var(--a-spacing-2); `; diff --git a/frontend/src/components/filter-dropdown/functions.ts b/frontend/src/components/filter-dropdown/functions.ts index 20719e6c7..bce7093a3 100644 --- a/frontend/src/components/filter-dropdown/functions.ts +++ b/frontend/src/components/filter-dropdown/functions.ts @@ -1,5 +1,5 @@ -import { IKodeverkSimpleValue, IKodeverkValue } from '@app/types/kodeverk'; -import { IOption } from './props'; +import type { IKodeverkSimpleValue, IKodeverkValue } from '@app/types/kodeverk'; +import type { IOption } from './props'; export const kodeverkValuesToDropdownOptions = ( kodeverkValues: IKodeverkValue[], diff --git a/frontend/src/components/filter-dropdown/grouped-filter-list.tsx b/frontend/src/components/filter-dropdown/grouped-filter-list.tsx index c1201c450..78e1c10a9 100644 --- a/frontend/src/components/filter-dropdown/grouped-filter-list.tsx +++ b/frontend/src/components/filter-dropdown/grouped-filter-list.tsx @@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'; import { styled } from 'styled-components'; import { FilterList } from './filter-list'; import { Header } from './header'; -import { BaseProps, DropdownProps, IOption } from './props'; +import type { BaseProps, DropdownProps, IOption } from './props'; interface SectionHeader { id: string; @@ -149,8 +149,8 @@ const Container = styled.div<{ $openDirection: Direction }>` left: ${({ $openDirection }) => ($openDirection === 'down' ? '0' : '100%')}; z-index: 2; max-height: 400px; - scroll-margin-bottom: 16px; - background-color: white; + scroll-margin-bottom: var(--a-spacing-4); + background-color: var(--a-bg-default); border-radius: 0.25rem; border: 1px solid var(--a-border-subtle); box-shadow: var(--a-shadow-medium); @@ -160,11 +160,11 @@ const Container = styled.div<{ $openDirection: Direction }>` `; const StyledGroupHeader = styled.h3` - font-size: 16px; + font-size: var(--a-spacing-4); font-weight: 600; - margin-left: 16px; - margin-top: 16px; - margin-bottom: 8px; + margin-left: var(--a-spacing-4); + margin-top: var(--a-spacing-4); + margin-bottom: var(--a-spacing-2); `; const GroupList = styled.ul` diff --git a/frontend/src/components/filter-dropdown/header.tsx b/frontend/src/components/filter-dropdown/header.tsx index 4c54ab77f..9a73420fd 100644 --- a/frontend/src/components/filter-dropdown/header.tsx +++ b/frontend/src/components/filter-dropdown/header.tsx @@ -1,8 +1,8 @@ +import { stringToRegExp } from '@app/functions/string-to-regex'; import { TrashIcon } from '@navikt/aksel-icons'; import { Button, Search } from '@navikt/ds-react'; -import { KeyboardEventHandler, useRef } from 'react'; +import { type KeyboardEventHandler, useRef } from 'react'; import { styled } from 'styled-components'; -import { stringToRegExp } from '@app/functions/string-to-regex'; interface HeaderProps { focused: number; @@ -103,8 +103,8 @@ const StyledHeader = styled.div` position: sticky; top: 0; border-bottom: 1px solid #c6c2bf; - background-color: white; - padding: 8px; + background-color: var(--a-bg-default); + padding: var(--a-spacing-2); display: flex; justify-content: space-between; z-index: 1; diff --git a/frontend/src/components/filter-dropdown/nested-filter-list.tsx b/frontend/src/components/filter-dropdown/nested-filter-list.tsx index 681bd06a0..a0ac60308 100644 --- a/frontend/src/components/filter-dropdown/nested-filter-list.tsx +++ b/frontend/src/components/filter-dropdown/nested-filter-list.tsx @@ -1,11 +1,11 @@ +import { GLOBAL, LIST_DELIMITER } from '@app/components/smart-editor-texts/types'; +import { stringToRegExp } from '@app/functions/string-to-regex'; /* eslint-disable max-lines */ import { BulletListIcon, ChevronDownIcon, ChevronUpIcon, TrashIcon } from '@navikt/aksel-icons'; import { BodyShort, Button, Checkbox, Search, Tag } from '@navikt/ds-react'; import { useCallback, useEffect, useMemo, useState } from 'react'; import { styled } from 'styled-components'; -import { GLOBAL, LIST_DELIMITER } from '@app/components/smart-editor-texts/types'; -import { stringToRegExp } from '@app/functions/string-to-regex'; -import { BaseProps, IOption } from './props'; +import type { BaseProps, IOption } from './props'; export enum OptionType { GROUP = 'group', @@ -123,7 +123,7 @@ const ListItem = ({ option, selected, level, filter, onCheck, hasFilter }: ListI const [isManualExpanded, setIsManualExpaded] = useState(null); const isExpanded = isManualExpanded ?? (hasSubSelection || (hasFilter && filteredSubCount <= 3)); - if (!isInFilter && !isSubInFilter) { + if (!(isInFilter || isSubInFilter)) { return null; } @@ -288,7 +288,7 @@ const Container = styled.div` position: absolute; top: 100%; z-index: 22; - background-color: white; + background-color: var(--a-bg-default); padding: var(--a-spacing-2); margin: 0; overflow-y: auto; @@ -307,8 +307,8 @@ const StyledHeader = styled.div` position: sticky; top: 0; border-bottom: 1px solid #c6c2bf; - background-color: white; - padding: 8px; + background-color: var(--a-bg-default); + padding: var(--a-spacing-2); display: flex; justify-content: space-between; `; @@ -340,19 +340,19 @@ const ExpandButton = styled(Button)` const StyledCheckbox = styled(Checkbox)` grid-area: checkbox; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; const CheckboxLabel = styled.span` display: flex; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; const GroupLabel = styled(BodyShort)` display: flex; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); height: 100%; overflow: hidden; `; diff --git a/frontend/src/components/filter-dropdown/option.tsx b/frontend/src/components/filter-dropdown/option.tsx index ee5d16629..b6bafcce3 100644 --- a/frontend/src/components/filter-dropdown/option.tsx +++ b/frontend/src/components/filter-dropdown/option.tsx @@ -50,6 +50,6 @@ Filter.displayName = 'Filter'; const CheckboxContent = styled.div` display: flex; flex-direction: row; - column-gap: 4px; + column-gap: var(--a-spacing-1); align-items: center; `; diff --git a/frontend/src/components/fullfoerte-oppgaver-table/fullfoerte-oppgaver-table.tsx b/frontend/src/components/fullfoerte-oppgaver-table/fullfoerte-oppgaver-table.tsx index 7614093de..2722fdfda 100644 --- a/frontend/src/components/fullfoerte-oppgaver-table/fullfoerte-oppgaver-table.tsx +++ b/frontend/src/components/fullfoerte-oppgaver-table/fullfoerte-oppgaver-table.tsx @@ -1,12 +1,12 @@ -import { Heading } from '@navikt/ds-react'; -import { useState } from 'react'; import { OppgaveTable } from '@app/components/common-table-components/oppgave-table/oppgave-table'; import { ColumnKeyEnum } from '@app/components/common-table-components/types'; import { OppgaveTableRowsPerPage } from '@app/hooks/settings/use-setting'; import { useHasRole } from '@app/hooks/use-has-role'; import { useGetMineFerdigstilteOppgaverQuery } from '@app/redux-api/oppgaver/queries/oppgaver'; import { Role } from '@app/types/bruker'; -import { CommonOppgaverParams, SortFieldEnum, SortOrderEnum } from '@app/types/oppgaver'; +import { type CommonOppgaverParams, SortFieldEnum, SortOrderEnum } from '@app/types/oppgaver'; +import { Heading } from '@navikt/ds-react'; +import { useState } from 'react'; const COLUMNS: ColumnKeyEnum[] = [ ColumnKeyEnum.TypeWithAnkeITrygderetten, diff --git a/frontend/src/components/header/user-menu/dropdown.tsx b/frontend/src/components/header/user-menu/dropdown.tsx index 2c63fcc3a..1a1e6bf38 100644 --- a/frontend/src/components/header/user-menu/dropdown.tsx +++ b/frontend/src/components/header/user-menu/dropdown.tsx @@ -1,9 +1,9 @@ +import { ENVIRONMENT } from '@app/environment'; +import { pushEvent } from '@app/observability'; import { CogIcon, CogRotationIcon, LeaveIcon } from '@navikt/aksel-icons'; import { Dropdown } from '@navikt/ds-react'; import { NavLink } from 'react-router-dom'; import { css, styled } from 'styled-components'; -import { ENVIRONMENT } from '@app/environment'; -import { pushEvent } from '@app/observability'; import { CopyButton } from '../../copy-button/copy-button'; export const UserDropdown = (): JSX.Element | null => { @@ -44,19 +44,19 @@ const Menu = styled(Dropdown.Menu)` max-width: 300px; & .navds-body-short { - font-size: 16px; + font-size: var(--a-spacing-4); } `; const linkStyle = css` display: flex; - gap: 8px; + gap: var(--a-spacing-2); align-items: center; text-decoration: none; cursor: pointer; background: transparent; - padding-left: 16px; - padding-right: 16px; + padding-left: var(--a-spacing-4); + padding-right: var(--a-spacing-4); padding-top: 12px; padding-bottom: 12px; `; @@ -97,7 +97,7 @@ const StyledCopyButton = styled(CopyButton)` `; const VersionIcon = styled(CogRotationIcon)` - margin-right: 8px; + margin-right: var(--a-spacing-2); `; const getShortVersion = (version: string): string => { @@ -105,5 +105,5 @@ const getShortVersion = (version: string): string => { return version; } - return version.substring(0, 7) + '...'; + return `${version.substring(0, 7)}...`; }; diff --git a/frontend/src/components/header/user-menu/user.tsx b/frontend/src/components/header/user-menu/user.tsx index 10df86ea3..22c10d9f9 100644 --- a/frontend/src/components/header/user-menu/user.tsx +++ b/frontend/src/components/header/user-menu/user.tsx @@ -1,8 +1,8 @@ +import { StaticDataContext } from '@app/components/app/static-data-context'; +import { useGetMySignatureQuery } from '@app/redux-api/bruker'; import { Dropdown, InternalHeader } from '@navikt/ds-react'; import { useContext } from 'react'; import { styled } from 'styled-components'; -import { StaticDataContext } from '@app/components/app/static-data-context'; -import { useGetMySignatureQuery } from '@app/redux-api/bruker'; import { UserDropdown } from './dropdown'; export const User = () => { @@ -12,7 +12,7 @@ export const User = () => { const name = signatureIsLoading || typeof signature === 'undefined' ? 'Laster...' - : (signature.customLongName ?? signature.longName); + : signature.customLongName ?? signature.longName; return ( diff --git a/frontend/src/components/kvalitetsvurdering/kvalitetsvurdering.tsx b/frontend/src/components/kvalitetsvurdering/kvalitetsvurdering.tsx index 6e3eadf20..ff792216e 100644 --- a/frontend/src/components/kvalitetsvurdering/kvalitetsvurdering.tsx +++ b/frontend/src/components/kvalitetsvurdering/kvalitetsvurdering.tsx @@ -1,11 +1,11 @@ -import { Heading } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { useHideKvalitetsvurdering } from '@app/components/oppgavebehandling-controls/use-hide-kvalitetsvurdering'; import { SECTION_KEY } from '@app/functions/error-type-guard'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useKvalitetsvurderingEnabled } from '@app/hooks/settings/use-setting'; import { useSectionTitle } from '@app/hooks/use-section-title'; import { KvalitetsvurderingVersion } from '@app/types/oppgavebehandling/oppgavebehandling'; +import { Heading } from '@navikt/ds-react'; +import { styled } from 'styled-components'; import { PanelContainer } from '../oppgavebehandling-panels/styled-components'; import { KvalitetsskjemaV1 } from './v1/kvalitetsskjema'; import { KvalitetsskjemaV2 } from './v2/kvalitetsskjema'; @@ -49,6 +49,6 @@ const Kvalitetsskjema = () => { }; const KvalitetsVurderingContainer = styled.div` - padding: 16px; + padding: var(--a-spacing-4); width: 400px; `; diff --git a/frontend/src/components/kvalitetsvurdering/v1/annet.tsx b/frontend/src/components/kvalitetsvurdering/v1/annet.tsx index 47bd7b317..486358f49 100644 --- a/frontend/src/components/kvalitetsvurdering/v1/annet.tsx +++ b/frontend/src/components/kvalitetsvurdering/v1/annet.tsx @@ -1,9 +1,9 @@ -import { Heading, Loader } from '@navikt/ds-react'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useKvalitetsvurdering } from '@app/hooks/use-kvalitetsvurdering'; import { Radiovalg } from '@app/types/kaka-kvalitetsvurdering/radio'; import { SaksTypeEnum } from '@app/types/kodeverk'; -import { Reason, Reasons } from './reasons'; +import { Heading, Loader } from '@navikt/ds-react'; +import { type Reason, Reasons } from './reasons'; import { FormSection } from './styled-components'; export const Annet = () => { diff --git a/frontend/src/components/kvalitetsvurdering/v1/bruk-av-raadgivende-lege.tsx b/frontend/src/components/kvalitetsvurdering/v1/bruk-av-raadgivende-lege.tsx index ce131cfe1..b086642ee 100644 --- a/frontend/src/components/kvalitetsvurdering/v1/bruk-av-raadgivende-lege.tsx +++ b/frontend/src/components/kvalitetsvurdering/v1/bruk-av-raadgivende-lege.tsx @@ -1,10 +1,10 @@ -import { Heading, Loader, Radio, RadioGroup } from '@navikt/ds-react'; import { useCanEdit } from '@app/hooks/use-can-edit'; import { useKvalitetsvurdering } from '@app/hooks/use-kvalitetsvurdering'; import { useValidationError } from '@app/hooks/use-validation-error'; import { useUpdateKvalitetsvurderingMutation } from '@app/redux-api/kaka-kvalitetsvurdering/v1'; import { RadiovalgExtended } from '@app/types/kaka-kvalitetsvurdering/radio'; -import { Reason, Reasons } from './reasons'; +import { Heading, Loader, Radio, RadioGroup } from '@navikt/ds-react'; +import { type Reason, Reasons } from './reasons'; import { FormSection } from './styled-components'; import { useKvalitetsvurderingV1FieldName } from './use-field-name'; diff --git a/frontend/src/components/kvalitetsvurdering/v1/comment-field.tsx b/frontend/src/components/kvalitetsvurdering/v1/comment-field.tsx index 1ec8ff279..d09081706 100644 --- a/frontend/src/components/kvalitetsvurdering/v1/comment-field.tsx +++ b/frontend/src/components/kvalitetsvurdering/v1/comment-field.tsx @@ -1,9 +1,9 @@ -import { Textarea } from '@navikt/ds-react'; -import { useEffect, useState } from 'react'; import { useCanEdit } from '@app/hooks/use-can-edit'; import { useKvalitetsvurdering } from '@app/hooks/use-kvalitetsvurdering'; import { useUpdateKvalitetsvurderingMutation } from '@app/redux-api/kaka-kvalitetsvurdering/v1'; -import { IKvalitetsvurderingTexts, IKvalitetsvurderingV1 } from '@app/types/kaka-kvalitetsvurdering/v1'; +import type { IKvalitetsvurderingTexts, IKvalitetsvurderingV1 } from '@app/types/kaka-kvalitetsvurdering/v1'; +import { Textarea } from '@navikt/ds-react'; +import { useEffect, useState } from 'react'; import { StyledCommentField } from './styled-components'; interface Props { diff --git a/frontend/src/components/kvalitetsvurdering/v1/klageforberedelsen.tsx b/frontend/src/components/kvalitetsvurdering/v1/klageforberedelsen.tsx index 970b7e516..aecde49cc 100644 --- a/frontend/src/components/kvalitetsvurdering/v1/klageforberedelsen.tsx +++ b/frontend/src/components/kvalitetsvurdering/v1/klageforberedelsen.tsx @@ -1,4 +1,3 @@ -import { Heading, Loader, Radio, RadioGroup } from '@navikt/ds-react'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useCanEdit } from '@app/hooks/use-can-edit'; import { useKvalitetsvurdering } from '@app/hooks/use-kvalitetsvurdering'; @@ -6,7 +5,8 @@ import { useValidationError } from '@app/hooks/use-validation-error'; import { useUpdateKvalitetsvurderingMutation } from '@app/redux-api/kaka-kvalitetsvurdering/v1'; import { Radiovalg } from '@app/types/kaka-kvalitetsvurdering/radio'; import { SaksTypeEnum } from '@app/types/kodeverk'; -import { Reason, Reasons } from './reasons'; +import { Heading, Loader, Radio, RadioGroup } from '@navikt/ds-react'; +import { type Reason, Reasons } from './reasons'; import { FormSection, RadioButtonsRow, StyledHeaderHelpTextWrapper, StyledHelpText } from './styled-components'; import { useKvalitetsvurderingV1FieldName } from './use-field-name'; diff --git a/frontend/src/components/kvalitetsvurdering/v1/reasons.tsx b/frontend/src/components/kvalitetsvurdering/v1/reasons.tsx index cd0391411..b93f1e79b 100644 --- a/frontend/src/components/kvalitetsvurdering/v1/reasons.tsx +++ b/frontend/src/components/kvalitetsvurdering/v1/reasons.tsx @@ -1,9 +1,9 @@ -import { CheckboxGroup, Loader } from '@navikt/ds-react'; -import { Fragment } from 'react'; import { useCanEdit } from '@app/hooks/use-can-edit'; import { useKvalitetsvurdering } from '@app/hooks/use-kvalitetsvurdering'; import { useUpdateKvalitetsvurderingMutation } from '@app/redux-api/kaka-kvalitetsvurdering/v1'; -import { IKvalitetsvurderingBooleans, IKvalitetsvurderingTexts } from '@app/types/kaka-kvalitetsvurdering/v1'; +import type { IKvalitetsvurderingBooleans, IKvalitetsvurderingTexts } from '@app/types/kaka-kvalitetsvurdering/v1'; +import { CheckboxGroup, Loader } from '@navikt/ds-react'; +import { Fragment } from 'react'; import { CommentField } from './comment-field'; import { StyledCheckbox, StyledCheckboxContainer, StyledHelpText } from './styled-components'; diff --git a/frontend/src/components/kvalitetsvurdering/v1/styled-components.ts b/frontend/src/components/kvalitetsvurdering/v1/styled-components.ts index a94edf556..d17323773 100644 --- a/frontend/src/components/kvalitetsvurdering/v1/styled-components.ts +++ b/frontend/src/components/kvalitetsvurdering/v1/styled-components.ts @@ -2,7 +2,7 @@ import { Checkbox, HelpText } from '@navikt/ds-react'; import { styled } from 'styled-components'; export const FormSection = styled.section` - margin-bottom: 32px; + margin-bottom: var(--a-spacing-8); `; export const RadioButtonsRow = styled.div` @@ -12,14 +12,14 @@ export const RadioButtonsRow = styled.div` `; export const StyledCommentField = styled.div` - margin-left: 32px; - width: calc(100% - 32px); + margin-left: var(--a-spacing-8); + width: calc(100% - var(--a-spacing-8)); `; export const StyledCheckboxContainer = styled.div` display: flex; flex-direction: row; - gap: 8px; + gap: var(--a-spacing-2); width: 100%; position: relative; `; @@ -38,5 +38,5 @@ export const StyledHelpText = styled(HelpText)` export const StyledHeaderHelpTextWrapper = styled.div` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/kvalitetsvurdering/v1/use-field-name.ts b/frontend/src/components/kvalitetsvurdering/v1/use-field-name.ts index 58b7c70b0..8d72e9e18 100644 --- a/frontend/src/components/kvalitetsvurdering/v1/use-field-name.ts +++ b/frontend/src/components/kvalitetsvurdering/v1/use-field-name.ts @@ -1,4 +1,4 @@ -import { IKvalitetsvurderingRadio, IKvalitetsvurderingRadioExtended } from '@app/types/kaka-kvalitetsvurdering/v1'; +import type { IKvalitetsvurderingRadio, IKvalitetsvurderingRadioExtended } from '@app/types/kaka-kvalitetsvurdering/v1'; type Keys = keyof IKvalitetsvurderingRadioExtended | keyof IKvalitetsvurderingRadio; diff --git a/frontend/src/components/kvalitetsvurdering/v1/utredningen.tsx b/frontend/src/components/kvalitetsvurdering/v1/utredningen.tsx index c3548707c..49fa7914b 100644 --- a/frontend/src/components/kvalitetsvurdering/v1/utredningen.tsx +++ b/frontend/src/components/kvalitetsvurdering/v1/utredningen.tsx @@ -1,10 +1,10 @@ -import { Heading, Loader, Radio, RadioGroup } from '@navikt/ds-react'; import { useCanEdit } from '@app/hooks/use-can-edit'; import { useKvalitetsvurdering } from '@app/hooks/use-kvalitetsvurdering'; import { useValidationError } from '@app/hooks/use-validation-error'; import { useUpdateKvalitetsvurderingMutation } from '@app/redux-api/kaka-kvalitetsvurdering/v1'; import { Radiovalg } from '@app/types/kaka-kvalitetsvurdering/radio'; -import { Reason, Reasons } from './reasons'; +import { Heading, Loader, Radio, RadioGroup } from '@navikt/ds-react'; +import { type Reason, Reasons } from './reasons'; import { FormSection, RadioButtonsRow, StyledHeaderHelpTextWrapper, StyledHelpText } from './styled-components'; import { useKvalitetsvurderingV1FieldName } from './use-field-name'; diff --git a/frontend/src/components/kvalitetsvurdering/v1/vedtaket.tsx b/frontend/src/components/kvalitetsvurdering/v1/vedtaket.tsx index 72e3b145d..497e66671 100644 --- a/frontend/src/components/kvalitetsvurdering/v1/vedtaket.tsx +++ b/frontend/src/components/kvalitetsvurdering/v1/vedtaket.tsx @@ -1,10 +1,10 @@ -import { Heading, Loader, Radio, RadioGroup } from '@navikt/ds-react'; import { useCanEdit } from '@app/hooks/use-can-edit'; import { useKvalitetsvurdering } from '@app/hooks/use-kvalitetsvurdering'; import { useValidationError } from '@app/hooks/use-validation-error'; import { useUpdateKvalitetsvurderingMutation } from '@app/redux-api/kaka-kvalitetsvurdering/v1'; import { Radiovalg } from '@app/types/kaka-kvalitetsvurdering/radio'; -import { Reason, Reasons } from './reasons'; +import { Heading, Loader, Radio, RadioGroup } from '@navikt/ds-react'; +import { type Reason, Reasons } from './reasons'; import { FormSection, RadioButtonsRow } from './styled-components'; import { useKvalitetsvurderingV1FieldName } from './use-field-name'; diff --git a/frontend/src/components/kvalitetsvurdering/v2/bruk-av-raadgivende.tsx b/frontend/src/components/kvalitetsvurdering/v2/bruk-av-raadgivende.tsx index 7d084805d..849266789 100644 --- a/frontend/src/components/kvalitetsvurdering/v2/bruk-av-raadgivende.tsx +++ b/frontend/src/components/kvalitetsvurdering/v2/bruk-av-raadgivende.tsx @@ -1,11 +1,11 @@ -import { Radio } from '@navikt/ds-react'; import { useCanEdit } from '@app/hooks/use-can-edit'; import { useIsRelevantYtelseForRaadgivende } from '@app/hooks/use-is-relevant-ytelse-for-raadgivende'; import { RadiovalgExtended } from '@app/types/kaka-kvalitetsvurdering/radio'; +import { Radio } from '@navikt/ds-react'; import { Checkboxes } from './common/checkboxes'; import { ContainerWithHelpText } from './common/container-with-helptext'; import { StyledHeading, StyledRadioGroup } from './common/styled-components'; -import { InputParams, KvalitetsvurderingInput } from './common/types'; +import { type InputParams, KvalitetsvurderingInput } from './common/types'; import { useKvalitetsvurderingV2FieldName } from './common/use-field-name'; import { useKvalitetsvurderingV2 } from './common/use-kvalitetsvurdering-v2'; import { useValidationError } from './common/use-validation-error'; diff --git a/frontend/src/components/kvalitetsvurdering/v2/common/all-registreringshjemler.tsx b/frontend/src/components/kvalitetsvurdering/v2/common/all-registreringshjemler.tsx index 578548801..8c71c04e7 100644 --- a/frontend/src/components/kvalitetsvurdering/v2/common/all-registreringshjemler.tsx +++ b/frontend/src/components/kvalitetsvurdering/v2/common/all-registreringshjemler.tsx @@ -2,7 +2,7 @@ import { LovhjemmelSelect } from '@app/components/behandling/behandlingsdetaljer import { SelectedHjemlerList } from '@app/components/behandling/behandlingsdetaljer/lovhjemmel/selected-hjemler-list'; import { useKvalitetsvurderingV2 } from '@app/components/kvalitetsvurdering/v2/common/use-kvalitetsvurdering-v2'; import { useCanEdit } from '@app/hooks/use-can-edit'; -import { +import type { IKvalitetsvurderingAllRegistreringshjemler, IKvalitetsvurderingBooleans, } from '@app/types/kaka-kvalitetsvurdering/v2'; diff --git a/frontend/src/components/kvalitetsvurdering/v2/common/checkboxes.tsx b/frontend/src/components/kvalitetsvurdering/v2/common/checkboxes.tsx index 255fbe627..d6816c77a 100644 --- a/frontend/src/components/kvalitetsvurdering/v2/common/checkboxes.tsx +++ b/frontend/src/components/kvalitetsvurdering/v2/common/checkboxes.tsx @@ -1,13 +1,13 @@ -import { CheckboxGroup } from '@navikt/ds-react'; -import { useMemo } from 'react'; import { AllRegistreringshjemler } from '@app/components/kvalitetsvurdering/v2/common/all-registreringshjemler'; import { KvalitetsskjemaTextarea } from '@app/components/kvalitetsvurdering/v2/common/textarea'; -import { IKvalitetsvurderingBooleans, IKvalitetsvurderingData } from '@app/types/kaka-kvalitetsvurdering/v2'; +import type { IKvalitetsvurderingBooleans, IKvalitetsvurderingData } from '@app/types/kaka-kvalitetsvurdering/v2'; +import { CheckboxGroup } from '@navikt/ds-react'; +import { useMemo } from 'react'; import { KvalitetsskjemaCheckbox } from './kvalitetsvurdering-checkbox'; import { Oppgavehjemler } from './oppgavehjemler'; import { SubSection } from './styled-components'; -import { CheckboxParams, InputParams, KvalitetsvurderingInput } from './types'; -import { KVALITETSVURDERING_V2_CHECKBOX_GROUP_NAMES } from './use-field-name'; +import { type CheckboxParams, type InputParams, KvalitetsvurderingInput } from './types'; +import type { KVALITETSVURDERING_V2_CHECKBOX_GROUP_NAMES } from './use-field-name'; import { useKvalitetsvurderingV2 } from './use-kvalitetsvurdering-v2'; import { useValidationError } from './use-validation-error'; @@ -39,14 +39,16 @@ export const Checkboxes = ({ } const onChange = (fields: string[]) => { - const newFields = allFields.reduce((acc, field) => { + const newFields = allFields.reduce>((acc, field) => { const isFieldChecked = fields.includes(field); if (kvalitetsvurdering[field] === isFieldChecked) { return acc; } - return { ...acc, [field]: isFieldChecked }; + acc[field] = isFieldChecked; + + return acc; }, {}); update(newFields); }; diff --git a/frontend/src/components/kvalitetsvurdering/v2/common/container-with-helptext.tsx b/frontend/src/components/kvalitetsvurdering/v2/common/container-with-helptext.tsx index f41b5d6cc..26ce7e032 100644 --- a/frontend/src/components/kvalitetsvurdering/v2/common/container-with-helptext.tsx +++ b/frontend/src/components/kvalitetsvurdering/v2/common/container-with-helptext.tsx @@ -1,4 +1,4 @@ -import { HelpText, HelpTextProps } from '@navikt/ds-react'; +import { HelpText, type HelpTextProps } from '@navikt/ds-react'; import { styled } from 'styled-components'; interface Props { @@ -17,7 +17,7 @@ export const ContainerWithHelpText = ({ children, helpText, placement = 'right' const Container = styled.span` display: flex; flex-direction: row; - gap: 8px; + gap: var(--a-spacing-2); align-items: center; width: 100%; justify-content: space-between; diff --git a/frontend/src/components/kvalitetsvurdering/v2/common/heading-with-helptext.tsx b/frontend/src/components/kvalitetsvurdering/v2/common/heading-with-helptext.tsx index 97494ae99..465439635 100644 --- a/frontend/src/components/kvalitetsvurdering/v2/common/heading-with-helptext.tsx +++ b/frontend/src/components/kvalitetsvurdering/v2/common/heading-with-helptext.tsx @@ -1,4 +1,4 @@ -import { HeadingProps, HelpText, HelpTextProps } from '@navikt/ds-react'; +import { type HeadingProps, HelpText, type HelpTextProps } from '@navikt/ds-react'; import { styled } from 'styled-components'; import { StyledHeading } from './styled-components'; @@ -19,6 +19,6 @@ export const HeadingWithHelpText = ({ children, helpText, size = 'small', placem const Container = styled(StyledHeading)` display: flex; flex-direction: row; - gap: 8px; + gap: var(--a-spacing-2); align-items: center; `; diff --git a/frontend/src/components/kvalitetsvurdering/v2/common/kvalitetsvurdering-checkbox.tsx b/frontend/src/components/kvalitetsvurdering/v2/common/kvalitetsvurdering-checkbox.tsx index 5bd406e0f..5835e8c60 100644 --- a/frontend/src/components/kvalitetsvurdering/v2/common/kvalitetsvurdering-checkbox.tsx +++ b/frontend/src/components/kvalitetsvurdering/v2/common/kvalitetsvurdering-checkbox.tsx @@ -1,7 +1,7 @@ +import { useCanEdit } from '@app/hooks/use-can-edit'; +import type { IKvalitetsvurderingBooleans } from '@app/types/kaka-kvalitetsvurdering/v2'; import { Checkbox } from '@navikt/ds-react'; import { useMemo } from 'react'; -import { useCanEdit } from '@app/hooks/use-can-edit'; -import { IKvalitetsvurderingBooleans } from '@app/types/kaka-kvalitetsvurdering/v2'; import { ContainerWithHelpText } from './container-with-helptext'; interface Props { diff --git a/frontend/src/components/kvalitetsvurdering/v2/common/oppgavehjemler.tsx b/frontend/src/components/kvalitetsvurdering/v2/common/oppgavehjemler.tsx index 4227c0133..276bd417f 100644 --- a/frontend/src/components/kvalitetsvurdering/v2/common/oppgavehjemler.tsx +++ b/frontend/src/components/kvalitetsvurdering/v2/common/oppgavehjemler.tsx @@ -1,10 +1,13 @@ -import { BodyShort, Checkbox, CheckboxGroup } from '@navikt/ds-react'; -import { useEffect } from 'react'; -import { styled } from 'styled-components'; import { useCanEdit } from '@app/hooks/use-can-edit'; import { usePrevious } from '@app/hooks/use-previous'; import { useRegistreringshjemlerMap } from '@app/simple-api-state/use-kodeverk'; -import { IKvalitetsvurderingBooleans, IKvalitetsvurderingSaksdataHjemler } from '@app/types/kaka-kvalitetsvurdering/v2'; +import type { + IKvalitetsvurderingBooleans, + IKvalitetsvurderingSaksdataHjemler, +} from '@app/types/kaka-kvalitetsvurdering/v2'; +import { BodyShort, Checkbox, CheckboxGroup } from '@navikt/ds-react'; +import { useEffect } from 'react'; +import { styled } from 'styled-components'; import { SubSection } from './styled-components'; import { useKvalitetsvurderingV2 } from './use-kvalitetsvurdering-v2'; import { useValidationError } from './use-validation-error'; diff --git a/frontend/src/components/kvalitetsvurdering/v2/common/styled-components.ts b/frontend/src/components/kvalitetsvurdering/v2/common/styled-components.ts index a083e3d59..6e24f9be2 100644 --- a/frontend/src/components/kvalitetsvurdering/v2/common/styled-components.ts +++ b/frontend/src/components/kvalitetsvurdering/v2/common/styled-components.ts @@ -3,21 +3,21 @@ import { styled } from 'styled-components'; export const RadioButtonsRow = styled.div` display: flex; - gap: 16px; + gap: var(--a-spacing-4); width: 100%; `; export const SubSection = styled.div` - margin-bottom: 16px; - margin-left: 32px; + margin-bottom: var(--a-spacing-4); + margin-left: var(--a-spacing-8); `; export const StyledHeading = styled(Heading)` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; export const StyledRadioGroup = styled(RadioGroup)` - margin-bottom: 16px; + margin-bottom: var(--a-spacing-4); `; diff --git a/frontend/src/components/kvalitetsvurdering/v2/common/textarea.tsx b/frontend/src/components/kvalitetsvurdering/v2/common/textarea.tsx index 42c575b78..2c1fe7785 100644 --- a/frontend/src/components/kvalitetsvurdering/v2/common/textarea.tsx +++ b/frontend/src/components/kvalitetsvurdering/v2/common/textarea.tsx @@ -1,12 +1,12 @@ -import { BodyLong, Label, Textarea } from '@navikt/ds-react'; -import { useEffect, useState } from 'react'; -import { styled } from 'styled-components'; import { ContainerWithHelpText } from '@app/components/kvalitetsvurdering/v2/common/container-with-helptext'; -import { TextParams } from '@app/components/kvalitetsvurdering/v2/common/types'; +import type { TextParams } from '@app/components/kvalitetsvurdering/v2/common/types'; import { useKvalitetsvurderingV2 } from '@app/components/kvalitetsvurdering/v2/common/use-kvalitetsvurdering-v2'; import { SavedStatus } from '@app/components/saved-status/saved-status'; import { useCanEdit } from '@app/hooks/use-can-edit'; -import { IKvalitetsvurderingBooleans } from '@app/types/kaka-kvalitetsvurdering/v2'; +import type { IKvalitetsvurderingBooleans } from '@app/types/kaka-kvalitetsvurdering/v2'; +import { BodyLong, Label, Textarea } from '@navikt/ds-react'; +import { useEffect, useState } from 'react'; +import { styled } from 'styled-components'; interface Props extends TextParams { parentKey?: keyof IKvalitetsvurderingBooleans; @@ -97,10 +97,10 @@ const StatusContainer = styled.div` display: flex; align-items: center; justify-content: flex-end; - margin-top: 4px; + margin-top: var(--a-spacing-1); `; const StyledBodyLong = styled(BodyLong)` border-left: 2px solid var(--a-border-subtle); - padding-left: 8px; + padding-left: var(--a-spacing-2); `; diff --git a/frontend/src/components/kvalitetsvurdering/v2/common/types.ts b/frontend/src/components/kvalitetsvurdering/v2/common/types.ts index 32f8f5ab8..b5e7c1a2f 100644 --- a/frontend/src/components/kvalitetsvurdering/v2/common/types.ts +++ b/frontend/src/components/kvalitetsvurdering/v2/common/types.ts @@ -1,5 +1,5 @@ -import { KVALITETSVURDERING_V2_CHECKBOX_GROUP_NAMES } from '@app/components/kvalitetsvurdering/v2/common/use-field-name'; -import { +import type { KVALITETSVURDERING_V2_CHECKBOX_GROUP_NAMES } from '@app/components/kvalitetsvurdering/v2/common/use-field-name'; +import type { IKvalitetsvurderingAllRegistreringshjemler, IKvalitetsvurderingBooleans, IKvalitetsvurderingSaksdataHjemler, @@ -13,8 +13,8 @@ interface BaseParams { } export enum KvalitetsvurderingInput { - CHECKBOX, - TEXTAREA, + CHECKBOX = 0, + TEXTAREA = 1, } export interface CheckboxParams extends BaseParams { diff --git a/frontend/src/components/kvalitetsvurdering/v2/common/use-field-name.ts b/frontend/src/components/kvalitetsvurdering/v2/common/use-field-name.ts index c2295eb11..f4e979d6a 100644 --- a/frontend/src/components/kvalitetsvurdering/v2/common/use-field-name.ts +++ b/frontend/src/components/kvalitetsvurdering/v2/common/use-field-name.ts @@ -1,4 +1,4 @@ -import { IKvalitetsvurderingData } from '@app/types/kaka-kvalitetsvurdering/v2'; +import type { IKvalitetsvurderingData } from '@app/types/kaka-kvalitetsvurdering/v2'; type Keys = keyof IKvalitetsvurderingData; diff --git a/frontend/src/components/kvalitetsvurdering/v2/common/use-kvalitetsvurdering-v2.ts b/frontend/src/components/kvalitetsvurdering/v2/common/use-kvalitetsvurdering-v2.ts index 1139a002b..a5ec72800 100644 --- a/frontend/src/components/kvalitetsvurdering/v2/common/use-kvalitetsvurdering-v2.ts +++ b/frontend/src/components/kvalitetsvurdering/v2/common/use-kvalitetsvurdering-v2.ts @@ -1,12 +1,12 @@ -import { SerializedError } from '@reduxjs/toolkit'; -import { FetchBaseQueryError, skipToken } from '@reduxjs/toolkit/query'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useGetKvalitetsvurderingQuery, useUpdateKvalitetsvurderingMutation, } from '@app/redux-api/kaka-kvalitetsvurdering/v2'; -import { IKvalitetsvurdering, IKvalitetsvurderingData } from '@app/types/kaka-kvalitetsvurdering/v2'; -import { IOppgavebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; +import type { IKvalitetsvurdering, IKvalitetsvurderingData } from '@app/types/kaka-kvalitetsvurdering/v2'; +import type { IOppgavebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; +import type { SerializedError } from '@reduxjs/toolkit'; +import { type FetchBaseQueryError, skipToken } from '@reduxjs/toolkit/query'; interface UpdateStatus { isLoading: boolean; diff --git a/frontend/src/components/kvalitetsvurdering/v2/common/use-validation-error.ts b/frontend/src/components/kvalitetsvurdering/v2/common/use-validation-error.ts index 3b60c1fda..953399b87 100644 --- a/frontend/src/components/kvalitetsvurdering/v2/common/use-validation-error.ts +++ b/frontend/src/components/kvalitetsvurdering/v2/common/use-validation-error.ts @@ -1,7 +1,7 @@ +import type { IKvalitetsvurderingData } from '@app/types/kaka-kvalitetsvurdering/v2'; import { useContext, useMemo } from 'react'; -import { IKvalitetsvurderingData } from '@app/types/kaka-kvalitetsvurdering/v2'; import { ValidationErrorContext } from '../../validation-error-context'; -import { KVALITETSVURDERING_V2_CHECKBOX_GROUP_NAMES } from './use-field-name'; +import type { KVALITETSVURDERING_V2_CHECKBOX_GROUP_NAMES } from './use-field-name'; type Field = keyof IKvalitetsvurderingData | keyof typeof KVALITETSVURDERING_V2_CHECKBOX_GROUP_NAMES; diff --git a/frontend/src/components/kvalitetsvurdering/v2/klageforberedelsen.tsx b/frontend/src/components/kvalitetsvurdering/v2/klageforberedelsen.tsx index f871018c6..646aa6d37 100644 --- a/frontend/src/components/kvalitetsvurdering/v2/klageforberedelsen.tsx +++ b/frontend/src/components/kvalitetsvurdering/v2/klageforberedelsen.tsx @@ -1,11 +1,11 @@ -import { Radio } from '@navikt/ds-react'; import { useCanEdit } from '@app/hooks/use-can-edit'; import { Radiovalg } from '@app/types/kaka-kvalitetsvurdering/radio'; import { SaksTypeEnum } from '@app/types/kodeverk'; +import { Radio } from '@navikt/ds-react'; import { Checkboxes } from './common/checkboxes'; import { HeadingWithHelpText } from './common/heading-with-helptext'; import { RadioButtonsRow, StyledRadioGroup } from './common/styled-components'; -import { InputParams, KvalitetsvurderingInput } from './common/types'; +import { type InputParams, KvalitetsvurderingInput } from './common/types'; import { useKvalitetsvurderingV2FieldName } from './common/use-field-name'; import { useKvalitetsvurderingV2 } from './common/use-kvalitetsvurdering-v2'; import { useValidationError } from './common/use-validation-error'; diff --git a/frontend/src/components/kvalitetsvurdering/v2/kvalitetsskjema.tsx b/frontend/src/components/kvalitetsvurdering/v2/kvalitetsskjema.tsx index 6cba77d17..b9578da4e 100644 --- a/frontend/src/components/kvalitetsvurdering/v2/kvalitetsskjema.tsx +++ b/frontend/src/components/kvalitetsvurdering/v2/kvalitetsskjema.tsx @@ -47,5 +47,5 @@ export const KvalitetsskjemaV2 = () => { const StyledKvalitetsskjema = styled.section` display: flex; flex-direction: column; - row-gap: 32px; + row-gap: var(--a-spacing-8); `; diff --git a/frontend/src/components/kvalitetsvurdering/v2/utredningen.tsx b/frontend/src/components/kvalitetsvurdering/v2/utredningen.tsx index 1271117f0..a3761cc21 100644 --- a/frontend/src/components/kvalitetsvurdering/v2/utredningen.tsx +++ b/frontend/src/components/kvalitetsvurdering/v2/utredningen.tsx @@ -1,10 +1,10 @@ -import { Radio } from '@navikt/ds-react'; import { useCanEdit } from '@app/hooks/use-can-edit'; import { Radiovalg } from '@app/types/kaka-kvalitetsvurdering/radio'; +import { Radio } from '@navikt/ds-react'; import { Checkboxes } from './common/checkboxes'; import { HeadingWithHelpText } from './common/heading-with-helptext'; import { RadioButtonsRow, StyledRadioGroup } from './common/styled-components'; -import { InputParams, KvalitetsvurderingInput } from './common/types'; +import { type InputParams, KvalitetsvurderingInput } from './common/types'; import { useKvalitetsvurderingV2FieldName } from './common/use-field-name'; import { useKvalitetsvurderingV2 } from './common/use-kvalitetsvurdering-v2'; import { useValidationError } from './common/use-validation-error'; diff --git a/frontend/src/components/kvalitetsvurdering/v2/vedtaket.tsx b/frontend/src/components/kvalitetsvurdering/v2/vedtaket.tsx index 33f88998e..ee419fc84 100644 --- a/frontend/src/components/kvalitetsvurdering/v2/vedtaket.tsx +++ b/frontend/src/components/kvalitetsvurdering/v2/vedtaket.tsx @@ -1,10 +1,10 @@ -import { Alert, Checkbox, Radio } from '@navikt/ds-react'; import { useCanEdit } from '@app/hooks/use-can-edit'; import { Radiovalg } from '@app/types/kaka-kvalitetsvurdering/radio'; +import { Alert, Checkbox, Radio } from '@navikt/ds-react'; import { Checkboxes } from './common/checkboxes'; import { ContainerWithHelpText } from './common/container-with-helptext'; import { RadioButtonsRow, StyledHeading, StyledRadioGroup } from './common/styled-components'; -import { InputParams, KvalitetsvurderingInput } from './common/types'; +import { type InputParams, KvalitetsvurderingInput } from './common/types'; import { useKvalitetsvurderingV2FieldName } from './common/use-field-name'; import { useKvalitetsvurderingV2 } from './common/use-kvalitetsvurdering-v2'; import { useValidationError } from './common/use-validation-error'; diff --git a/frontend/src/components/kvalitetsvurdering/validation-error-context.tsx b/frontend/src/components/kvalitetsvurdering/validation-error-context.tsx index 50630d4ed..b055224ee 100644 --- a/frontend/src/components/kvalitetsvurdering/validation-error-context.tsx +++ b/frontend/src/components/kvalitetsvurdering/validation-error-context.tsx @@ -1,5 +1,5 @@ +import type { IValidationSection } from '@app/functions/error-type-guard'; import { createContext, useState } from 'react'; -import { IValidationSection } from '@app/functions/error-type-guard'; interface IValidationErrorContext { validationSectionErrors: IValidationSection[]; diff --git a/frontend/src/components/ledige-oppgaver-table/ledige-oppgaver-table.tsx b/frontend/src/components/ledige-oppgaver-table/ledige-oppgaver-table.tsx index 28e55f100..bcedc8d5c 100644 --- a/frontend/src/components/ledige-oppgaver-table/ledige-oppgaver-table.tsx +++ b/frontend/src/components/ledige-oppgaver-table/ledige-oppgaver-table.tsx @@ -1,7 +1,3 @@ -import { BodyShort, Heading } from '@navikt/ds-react'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { useState } from 'react'; -import { styled } from 'styled-components'; import { OppgaveTable } from '@app/components/common-table-components/oppgave-table/oppgave-table'; import { ColumnKeyEnum } from '@app/components/common-table-components/types'; import { OppgaveTableRowsPerPage } from '@app/hooks/settings/use-setting'; @@ -12,7 +8,11 @@ import { useGetLedigeOppgaverQuery, } from '@app/redux-api/oppgaver/queries/oppgaver'; import { Role } from '@app/types/bruker'; -import { CommonOppgaverParams, SortFieldEnum, SortOrderEnum } from '@app/types/oppgaver'; +import { type CommonOppgaverParams, SortFieldEnum, SortOrderEnum } from '@app/types/oppgaver'; +import { BodyShort, Heading } from '@navikt/ds-react'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useState } from 'react'; +import { styled } from 'styled-components'; const COLUMNS: ColumnKeyEnum[] = [ ColumnKeyEnum.Type, diff --git a/frontend/src/components/malteksteksjon-references/maltekstseksjon-references.tsx b/frontend/src/components/malteksteksjon-references/maltekstseksjon-references.tsx index 39951c6a4..d482d4738 100644 --- a/frontend/src/components/malteksteksjon-references/maltekstseksjon-references.tsx +++ b/frontend/src/components/malteksteksjon-references/maltekstseksjon-references.tsx @@ -1,8 +1,8 @@ +import { useGetMaltekstseksjonQuery } from '@app/redux-api/maltekstseksjoner/queries'; import { DocPencilIcon, ExternalLinkIcon, EyeIcon, FileSearchIcon, UploadIcon } from '@navikt/aksel-icons'; import { Button, Link, List, Loader, Modal } from '@navikt/ds-react'; import { useRef, useState } from 'react'; import { styled } from 'styled-components'; -import { useGetMaltekstseksjonQuery } from '@app/redux-api/maltekstseksjoner/queries'; import { Preview } from './preview'; interface Props { @@ -161,5 +161,5 @@ const Container = styled.div` position: relative; display: flex; align-items: center; - gap: 4px; + gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/malteksteksjon-references/preview.tsx b/frontend/src/components/malteksteksjon-references/preview.tsx index 193e755f3..6032028d5 100644 --- a/frontend/src/components/malteksteksjon-references/preview.tsx +++ b/frontend/src/components/malteksteksjon-references/preview.tsx @@ -1,8 +1,3 @@ -import { Heading, Loader } from '@navikt/ds-react'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { Plate } from '@udecode/plate-common'; -import { useCallback, useEffect, useState } from 'react'; -import { styled } from 'styled-components'; import { getTitle } from '@app/components/editable-title/editable-title'; import { isNotNull } from '@app/functions/is-not-type-guards'; import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language'; @@ -10,11 +5,16 @@ import { SPELL_CHECK_LANGUAGES } from '@app/hooks/use-smart-editor-language'; import { renderReadOnlyLeaf } from '@app/plate/leaf/render-leaf'; import { PlateEditor } from '@app/plate/plate-editor'; import { previewPlugins } from '@app/plate/plugins/plugin-sets/preview'; -import { EditorValue, RichTextEditor, RootElement } from '@app/plate/types'; +import type { EditorValue, RichTextEditor, RootElement } from '@app/plate/types'; import { useGetMaltekstseksjonQuery } from '@app/redux-api/maltekstseksjoner/queries'; import { useLazyGetTextByIdQuery } from '@app/redux-api/texts/queries'; import { RichTextTypes } from '@app/types/common-text-types'; -import { IRichText, IText } from '@app/types/texts/responses'; +import type { IRichText, IText } from '@app/types/texts/responses'; +import { Heading, Loader } from '@navikt/ds-react'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { Plate } from '@udecode/plate-common'; +import { useCallback, useEffect, useState } from 'react'; +import { styled } from 'styled-components'; interface Props { id: string | null; @@ -70,9 +70,9 @@ export const Preview = ({ id }: Props) => { }; const PreviewBackground = styled.div` - background: var(--a-surface-subtle); + background-color: var(--a-surface-subtle); padding: var(--a-spacing-4); - border-radius: 4px; + border-radius: var(--a-spacing-1); display: flex; flex-direction: column; align-items: center; @@ -83,7 +83,7 @@ const Sheet = styled.div` padding: 20mm; padding-top: 15mm; box-shadow: var(--a-shadow-medium); - background: white; + background-color: var(--a-bg-default); width: 210mm; `; diff --git a/frontend/src/components/maltekstseksjoner/create.tsx b/frontend/src/components/maltekstseksjoner/create.tsx index 91cf9e221..c21eb3751 100644 --- a/frontend/src/components/maltekstseksjoner/create.tsx +++ b/frontend/src/components/maltekstseksjoner/create.tsx @@ -1,8 +1,3 @@ -import { PadlockLockedIcon, PencilWritingIcon, PlusIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; -import { useCallback } from 'react'; -import { useSearchParams } from 'react-router-dom'; -import { styled } from 'styled-components'; import { getNewRichText } from '@app/components/smart-editor-texts/functions/new-text'; import { useNavigateMaltekstseksjoner } from '@app/hooks/use-navigate-maltekstseksjoner'; import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language'; @@ -11,9 +6,14 @@ import { useUpdateTextIdListMutation, } from '@app/redux-api/maltekstseksjoner/mutations'; import { useAddTextMutation } from '@app/redux-api/texts/mutations'; -import { IGetMaltekstseksjonParams, RichTextTypes } from '@app/types/common-text-types'; -import { INewMaltekstseksjonParams } from '@app/types/maltekstseksjoner/params'; -import { IMaltekstseksjon } from '@app/types/maltekstseksjoner/responses'; +import { type IGetMaltekstseksjonParams, RichTextTypes } from '@app/types/common-text-types'; +import type { INewMaltekstseksjonParams } from '@app/types/maltekstseksjoner/params'; +import type { IMaltekstseksjon } from '@app/types/maltekstseksjoner/responses'; +import { PadlockLockedIcon, PencilWritingIcon, PlusIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; +import { useCallback } from 'react'; +import { useSearchParams } from 'react-router-dom'; +import { styled } from 'styled-components'; interface Props { query: IGetMaltekstseksjonParams; diff --git a/frontend/src/components/maltekstseksjoner/filters.tsx b/frontend/src/components/maltekstseksjoner/filters.tsx index 7c752e780..59d22606e 100644 --- a/frontend/src/components/maltekstseksjoner/filters.tsx +++ b/frontend/src/components/maltekstseksjoner/filters.tsx @@ -1,4 +1,3 @@ -import { styled } from 'styled-components'; import { HjemlerSelect } from '@app/components/smart-editor-texts/hjemler-select/hjemler-select'; import { TemplateSectionSelect } from '@app/components/smart-editor-texts/query-filter-selects'; import { UtfallSetFilter } from '@app/components/smart-editor-texts/utfall-set-filter/utfall-set-filter'; @@ -7,8 +6,9 @@ import { useUpdateUtfallIdListMutation, useUpdateYtelseHjemmelIdListMutation, } from '@app/redux-api/maltekstseksjoner/mutations'; -import { IGetMaltekstseksjonParams, MALTEKSTSEKSJON_TYPE } from '@app/types/common-text-types'; -import { IMaltekstseksjon } from '@app/types/maltekstseksjoner/responses'; +import { type IGetMaltekstseksjonParams, MALTEKSTSEKSJON_TYPE } from '@app/types/common-text-types'; +import type { IMaltekstseksjon } from '@app/types/maltekstseksjoner/responses'; +import { styled } from 'styled-components'; interface Props { maltekst: IMaltekstseksjon; @@ -51,6 +51,6 @@ export const Filters = ({ maltekst, query }: Props) => { const Container = styled.div` display: flex; - gap: 8px; + gap: var(--a-spacing-2); grid-area: filters; `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/common.ts b/frontend/src/components/maltekstseksjoner/maltekstseksjon/common.ts index 1b6f74a45..efa0dce4f 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/common.ts +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/common.ts @@ -8,8 +8,8 @@ export const Container = styled.section` grid-template-areas: 'header header' 'sidebar text-list'; - row-gap: 8px; - column-gap: 8px; + row-gap: var(--a-spacing-2); + column-gap: var(--a-spacing-2); overflow-y: hidden; height: 100%; border-radius: var(--a-border-radius-medium); @@ -21,7 +21,7 @@ export const Container = styled.section` export const Header = styled.header` grid-area: header; display: grid; - gap: 8px; + gap: var(--a-spacing-2); grid-template-areas: 'title actions' 'metadata actions' @@ -29,7 +29,7 @@ export const Header = styled.header` 'tags tags'; grid-template-columns: 1fr fit-content; white-space: nowrap; - padding-right: 8px; + padding-right: var(--a-spacing-2); `; export const MetadataContainer = styled.div` @@ -37,7 +37,7 @@ export const MetadataContainer = styled.div` display: flex; flex-direction: row; align-items: center; - column-gap: 4px; + column-gap: var(--a-spacing-1); `; export const StyledHeading = styled(Heading)` @@ -52,8 +52,8 @@ export const SidebarContainer = styled.div` grid-area: sidebar; display: flex; flex-direction: column; - row-gap: 8px; - padding-top: 4px; + row-gap: var(--a-spacing-2); + padding-top: var(--a-spacing-1); `; export const List = styled.ul` @@ -69,12 +69,12 @@ export const DateTimeContainer = styled.div` display: flex; flex-direction: row; align-items: center; - column-gap: 4px; + column-gap: var(--a-spacing-1); `; export const ActionsContainer = styled.div` grid-area: actions; display: flex; flex-direction: column; - gap: 8px; + gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/actions.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/actions.tsx index 84558a664..dbea67b29 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/actions.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/actions.tsx @@ -1,7 +1,3 @@ -import { UploadIcon } from '@navikt/aksel-icons'; -import { Button, ButtonProps, ErrorMessage } from '@navikt/ds-react'; -import { useCallback, useState } from 'react'; -import { styled } from 'styled-components'; import { DeleteMaltekstseksjonDraftButton } from '@app/components/maltekstseksjoner/maltekstseksjon/draft/delete-draft-button'; import { isRichText } from '@app/functions/is-rich-plain-text'; import { @@ -10,10 +6,14 @@ import { usePublishWithTextsMutation, } from '@app/redux-api/maltekstseksjoner/mutations'; import { useLazyGetTextByIdQuery } from '@app/redux-api/texts/queries'; -import { IGetMaltekstseksjonParams } from '@app/types/maltekstseksjoner/params'; -import { IMaltekstseksjon } from '@app/types/maltekstseksjoner/responses'; +import type { IGetMaltekstseksjonParams } from '@app/types/maltekstseksjoner/params'; +import type { IMaltekstseksjon } from '@app/types/maltekstseksjoner/responses'; import { LANGUAGES } from '@app/types/texts/language'; -import { IRichText } from '@app/types/texts/responses'; +import type { IRichText } from '@app/types/texts/responses'; +import { UploadIcon } from '@navikt/aksel-icons'; +import { Button, type ButtonProps, ErrorMessage } from '@navikt/ds-react'; +import { useCallback, useState } from 'react'; +import { styled } from 'styled-components'; import { ActionsContainer } from '../common'; interface Props { diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/available-texts/available-texts-by-type.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/available-texts/available-texts-by-type.tsx index 5187f65db..7824e0b9c 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/available-texts/available-texts-by-type.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/available-texts/available-texts-by-type.tsx @@ -1,6 +1,3 @@ -import { Loader, Search, Table } from '@navikt/ds-react'; -import { useCallback, useMemo, useState } from 'react'; -import { styled } from 'styled-components'; import { SetMaltekstseksjonLanguage } from '@app/components/set-redaktoer-language/set-maltekstseksjon-language'; import { fuzzySearch } from '@app/components/smart-editor/gode-formuleringer/fuzzy-search'; import { splitQuery } from '@app/components/smart-editor/gode-formuleringer/split-query'; @@ -9,7 +6,10 @@ import { useTrashQuery } from '@app/hooks/use-trash-query'; import { getTextAsString } from '@app/plate/functions/get-text-string'; import { useGetTextsQuery } from '@app/redux-api/texts/queries'; import { RichTextTypes } from '@app/types/common-text-types'; -import { IRichText, IText } from '@app/types/texts/responses'; +import type { IRichText, IText } from '@app/types/texts/responses'; +import { Loader, Search, Table } from '@navikt/ds-react'; +import { useCallback, useMemo, useState } from 'react'; +import { styled } from 'styled-components'; import { Body } from './body'; export interface AvailableTextsByTypeProps { @@ -165,8 +165,8 @@ const isRichtext = (text: IText): text is IRichText => const Container = styled.div` display: flex; flex-direction: column; - gap: 8px; - margin-top: 16px; + gap: var(--a-spacing-2); + margin-top: var(--a-spacing-4); height: 75vh; overflow-y: hidden; `; @@ -185,5 +185,5 @@ const StyledTableHeader = styled(Table.Header)` const Row = styled.div` display: flex; - gap: 4px; + gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/available-texts/available-texts.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/available-texts/available-texts.tsx index bd7782076..909389db5 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/available-texts/available-texts.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/available-texts/available-texts.tsx @@ -1,9 +1,9 @@ +import { RichTextTypes } from '@app/types/common-text-types'; import { PadlockLockedIcon, PencilWritingIcon, XMarkIcon } from '@navikt/aksel-icons'; import { Button, Modal } from '@navikt/ds-react'; import { useCallback, useState } from 'react'; import { styled } from 'styled-components'; -import { RichTextTypes } from '@app/types/common-text-types'; -import { AvailableTextsByType, AvailableTextsByTypeProps } from './available-texts-by-type'; +import { AvailableTextsByType, type AvailableTextsByTypeProps } from './available-texts-by-type'; export const AvailableTexts = ({ onAdd, onRemove, usedIds, textType }: AvailableTextsByTypeProps) => { const Icon = textType === RichTextTypes.MALTEKST ? PadlockLockedIcon : PencilWritingIcon; @@ -20,7 +20,7 @@ export const AvailableTexts = ({ onAdd, onRemove, usedIds, textType }: Available { @@ -156,7 +156,7 @@ export const Sidebar = ({ maltekstseksjon, query }: Props) => { const ButtonsContainer = styled.section` display: flex; flex-direction: column; - row-gap: 8px; - margin-top: 8px; + row-gap: var(--a-spacing-2); + margin-top: var(--a-spacing-2); width: 100%; `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/list-item.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/list-item.tsx index 621f289d1..7afcf83fb 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/list-item.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/list-item.tsx @@ -1,15 +1,15 @@ -import { CircleBrokenIcon, LinkBrokenIcon, PadlockLockedIcon, PencilWritingIcon } from '@navikt/aksel-icons'; -import { Button, HelpText, Skeleton, Tooltip } from '@navikt/ds-react'; -import { useCallback, useContext, useMemo, useRef } from 'react'; -import { styled } from 'styled-components'; import { XMarkOctagonFillIconColored } from '@app/components/colored-icons/colored-icons'; import { createDragUI } from '@app/components/maltekstseksjoner/drag-and-drop/create-drag-ui'; import { useMaltekstseksjonPath } from '@app/hooks/use-navigate-maltekstseksjoner'; import { useUpdateTextIdListMutation } from '@app/redux-api/maltekstseksjoner/mutations'; import { useGetTextVersionsQuery } from '@app/redux-api/texts/queries'; -import { IGetMaltekstseksjonParams, RichTextTypes } from '@app/types/common-text-types'; +import { type IGetMaltekstseksjonParams, RichTextTypes } from '@app/types/common-text-types'; import { isApiError } from '@app/types/errors'; -import { IMaltekstseksjon } from '@app/types/maltekstseksjoner/responses'; +import type { IMaltekstseksjon } from '@app/types/maltekstseksjoner/responses'; +import { CircleBrokenIcon, LinkBrokenIcon, PadlockLockedIcon, PencilWritingIcon } from '@navikt/aksel-icons'; +import { Button, HelpText, Skeleton, Tooltip } from '@navikt/ds-react'; +import { useCallback, useContext, useMemo, useRef } from 'react'; +import { styled } from 'styled-components'; import { DragAndDropContext } from '../drag-and-drop/drag-context'; import { TextLink } from '../text-link'; @@ -140,8 +140,8 @@ const Container = styled.div` const ErrorContainer = styled(Container)` display: flex; align-items: center; - margin-left: 8px; - gap: 8px; + margin-left: var(--a-spacing-2); + gap: var(--a-spacing-2); `; const HelpTextContainer = styled.div` @@ -152,7 +152,7 @@ const HelpTextContainer = styled.div` const SkeletonContainer = styled.div` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); width: 100%; `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-list-filters.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-list-filters.tsx index d2e4fe834..553004498 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-list-filters.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-list-filters.tsx @@ -1,10 +1,10 @@ -import { useSearchParams } from 'react-router-dom'; -import { styled } from 'styled-components'; import { HjemlerSelect } from '@app/components/smart-editor-texts/hjemler-select/hjemler-select'; import { useUtfallOptions } from '@app/components/smart-editor-texts/hooks/use-options'; import { useTextQuery } from '@app/components/smart-editor-texts/hooks/use-text-query'; import { TemplateSectionSelect, UtfallSelect } from '@app/components/smart-editor-texts/query-filter-selects'; -import { IGetMaltekstseksjonParams, MALTEKSTSEKSJON_TYPE } from '@app/types/common-text-types'; +import { type IGetMaltekstseksjonParams, MALTEKSTSEKSJON_TYPE } from '@app/types/common-text-types'; +import { useSearchParams } from 'react-router-dom'; +import { styled } from 'styled-components'; export const Filters = () => { const [searchParams, setSearchParams] = useSearchParams(); @@ -58,7 +58,7 @@ const Container = styled.div` grid-area: filters; display: flex; flex-direction: row; - column-gap: 8px; - padding: 4px; + column-gap: var(--a-spacing-2); + padding: var(--a-spacing-1); padding-top: 0; `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-list-item.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-list-item.tsx index a40edb430..2d5515b79 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-list-item.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-list-item.tsx @@ -1,10 +1,10 @@ -import { TasklistIcon } from '@navikt/aksel-icons'; -import { useCallback, useContext } from 'react'; import { useMaltekstseksjonPath } from '@app/hooks/use-navigate-maltekstseksjoner'; import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language'; import { useUpdateTextIdListMutation } from '@app/redux-api/maltekstseksjoner/mutations'; -import { IGetMaltekstseksjonParams } from '@app/types/maltekstseksjoner/params'; -import { IMaltekstseksjon } from '@app/types/maltekstseksjoner/responses'; +import type { IGetMaltekstseksjonParams } from '@app/types/maltekstseksjoner/params'; +import type { IMaltekstseksjon } from '@app/types/maltekstseksjoner/responses'; +import { TasklistIcon } from '@navikt/aksel-icons'; +import { useCallback, useContext } from 'react'; import { DragAndDropContext } from '../drag-and-drop/drag-context'; import { useDragState } from '../drag-and-drop/use-drag-state'; import { ListItem } from '../styled-components'; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-list.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-list.tsx index 7ee3b5cfc..eba9375cb 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-list.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-list.tsx @@ -1,8 +1,3 @@ -import { PuzzlePieceIcon } from '@navikt/aksel-icons'; -import { Search } from '@navikt/ds-react'; -import { useMemo, useState } from 'react'; -import { useParams, useSearchParams } from 'react-router-dom'; -import { styled } from 'styled-components'; import { CreateMaltekstseksjon } from '@app/components/maltekstseksjoner/create'; import { Maltekstseksjon } from '@app/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon'; import { Filters } from '@app/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-list-filters'; @@ -12,7 +7,12 @@ import { useTextQuery } from '@app/components/smart-editor-texts/hooks/use-text- import { ShowDepublished } from '@app/components/smart-editor-texts/show-depublished'; import { stringToRegExp } from '@app/functions/string-to-regex'; import { useGetMaltekstseksjonerQuery } from '@app/redux-api/maltekstseksjoner/queries'; -import { IGetMaltekstseksjonParams } from '@app/types/common-text-types'; +import type { IGetMaltekstseksjonParams } from '@app/types/common-text-types'; +import { PuzzlePieceIcon } from '@navikt/aksel-icons'; +import { Search } from '@navikt/ds-react'; +import { useMemo, useState } from 'react'; +import { useParams, useSearchParams } from 'react-router-dom'; +import { styled } from 'styled-components'; import { DragAndDropContextElement } from '../drag-and-drop/drag-context'; import { List } from './common'; @@ -92,23 +92,23 @@ const Placeholder = styled.div` color: var(--a-surface-subtle); width: 1330px; grid-area: content; - margin-bottom: 4px; - margin-top: 4px; + margin-bottom: var(--a-spacing-1); + margin-top: var(--a-spacing-1); `; const StyledSearch = styled(Search)` grid-area: search; - padding-left: 4px; - padding-right: 4px; + padding-left: var(--a-spacing-1); + padding-right: var(--a-spacing-1); `; const StyledList = styled(List)` display: flex; flex-direction: column; overflow-y: auto; - row-gap: 4px; - margin-top: 4px; - padding: 4px; + row-gap: var(--a-spacing-1); + margin-top: var(--a-spacing-1); + padding: var(--a-spacing-1); grid-area: list; `; @@ -117,7 +117,7 @@ const Container = styled.article` grid-template-columns: 700px min-content; grid-template-rows: min-content min-content min-content 1fr; grid-template-areas: 'header content' 'filters content' 'search content' 'list content'; - column-gap: 8px; + column-gap: var(--a-spacing-2); height: 100%; overflow-y: hidden; `; @@ -127,7 +127,7 @@ const Header = styled.header` flex-direction: row; justify-content: left; align-items: center; - column-gap: 16px; - margin-bottom: 8px; + column-gap: var(--a-spacing-4); + margin-bottom: var(--a-spacing-2); grid-area: header; `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-published.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-published.tsx index 1f2086650..a7a642f1f 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-published.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-published.tsx @@ -1,8 +1,3 @@ -import { CalendarIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; -import { useCallback } from 'react'; -import { useParams } from 'react-router'; -import { styled } from 'styled-components'; import { DateTime } from '@app/components/datetime/datetime'; import { getTitle } from '@app/components/editable-title/editable-title'; import { EditorName } from '@app/components/editor-name/editor-name'; @@ -15,8 +10,13 @@ import { } from '@app/components/smart-editor-texts/edit/tags'; import { TextHistory } from '@app/components/text-history/text-history'; import { useCreateDraftFromVersionMutation } from '@app/redux-api/maltekstseksjoner/mutations'; -import { IGetMaltekstseksjonParams } from '@app/types/maltekstseksjoner/params'; -import { IPublishedMaltekstseksjon } from '@app/types/maltekstseksjoner/responses'; +import type { IGetMaltekstseksjonParams } from '@app/types/maltekstseksjoner/params'; +import type { IPublishedMaltekstseksjon } from '@app/types/maltekstseksjoner/responses'; +import { CalendarIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; +import { useCallback } from 'react'; +import { useParams } from 'react-router'; +import { styled } from 'styled-components'; import { TextListItem } from '../styled-components'; import { ActionsContainer, @@ -92,7 +92,7 @@ const Row = styled.div` display: flex; flex-direction: row; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); grid-area: metadata; `; @@ -100,5 +100,5 @@ const LabelValue = styled.div` display: flex; flex-direction: row; align-items: center; - column-gap: 4px; + column-gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-versions.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-versions.tsx index 1778a2a42..a51d8ea93 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-versions.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-versions.tsx @@ -1,15 +1,15 @@ -import { useCallback, useEffect } from 'react'; -import { useParams } from 'react-router-dom'; -import { styled } from 'styled-components'; import { VersionTabs } from '@app/components/versioned-tabs/versioned-tabs'; import { useNavigateMaltekstseksjoner } from '@app/hooks/use-navigate-maltekstseksjoner'; import { useGetMaltekstseksjonVersionsQuery } from '@app/redux-api/maltekstseksjoner/queries'; -import { IGetMaltekstseksjonParams } from '@app/types/maltekstseksjoner/params'; -import { +import type { IGetMaltekstseksjonParams } from '@app/types/maltekstseksjoner/params'; +import type { IDraftMaltekstseksjon, IMaltekstseksjon, IPublishedMaltekstseksjon, } from '@app/types/maltekstseksjoner/responses'; +import { useCallback, useEffect } from 'react'; +import { useParams } from 'react-router-dom'; +import { styled } from 'styled-components'; import { DraftMaltekstSection } from './draft/draft'; import { PublishedMaltekstSection } from './maltekstseksjon-published'; @@ -99,7 +99,7 @@ const PanelContent = styled.div` display: flex; flex-direction: column; overflow: hidden; - margin-top: 8px; + margin-top: var(--a-spacing-2); flex-grow: 1; `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon.tsx index 61b731774..3350240d9 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon.tsx @@ -1,7 +1,7 @@ -import { styled } from 'styled-components'; import { UnpublishMaltekstseksjonButton } from '@app/components/maltekstseksjoner/maltekstseksjon/unpublish-maltekstseksjon-button'; -import { IGetMaltekstseksjonParams } from '@app/types/maltekstseksjoner/params'; -import { IMaltekstseksjon } from '@app/types/maltekstseksjoner/responses'; +import type { IGetMaltekstseksjonParams } from '@app/types/maltekstseksjoner/params'; +import type { IMaltekstseksjon } from '@app/types/maltekstseksjoner/responses'; +import { styled } from 'styled-components'; import { MaltekstseksjonVersions } from './maltekstseksjon-versions'; interface Props { @@ -25,12 +25,12 @@ const MaltekstseksjonContainer = styled.div` overflow: hidden; border-radius: var(--a-border-radius-medium); box-shadow: var(--a-shadow-medium); - padding: 8px; + padding: var(--a-spacing-2); padding-top: 0; padding-right: 0; - margin-right: 4px; - margin-bottom: 4px; - margin-top: 4px; + margin-right: var(--a-spacing-1); + margin-bottom: var(--a-spacing-1); + margin-top: var(--a-spacing-1); grid-area: content; `; @@ -38,6 +38,6 @@ const MaltekstseksjonHeader = styled.div` display: flex; align-items: center; justify-content: flex-end; - padding: 16px; + padding: var(--a-spacing-4); padding-bottom: 0; `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/preview.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/preview.tsx index 56e0208a1..675f39f35 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/preview.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/preview.tsx @@ -1,16 +1,16 @@ -import { Alert, Loader } from '@navikt/ds-react'; -import { useEffect, useState } from 'react'; -import { styled } from 'styled-components'; import { RedaktoerRichText } from '@app/components/redaktoer-rich-text/redaktoer-rich-text'; import { isRichText } from '@app/functions/is-rich-plain-text'; import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language'; import { SPELL_CHECK_LANGUAGES } from '@app/hooks/use-smart-editor-language'; -import { EditorValue } from '@app/plate/types'; +import type { EditorValue } from '@app/plate/types'; import { useUpdateTextIdListMutation } from '@app/redux-api/maltekstseksjoner/mutations'; import { useLazyGetTextByIdQuery } from '@app/redux-api/texts/queries'; import { isApiError } from '@app/types/errors'; -import { IMaltekstseksjon } from '@app/types/maltekstseksjoner/responses'; -import { IRichText } from '@app/types/texts/responses'; +import type { IMaltekstseksjon } from '@app/types/maltekstseksjoner/responses'; +import type { IRichText } from '@app/types/texts/responses'; +import { Alert, Loader } from '@navikt/ds-react'; +import { useEffect, useState } from 'react'; +import { styled } from 'styled-components'; interface Props { maltekstseksjon: IMaltekstseksjon; @@ -117,5 +117,5 @@ const Overlay = styled.div` `; const StyledAlert = styled(Alert)` - margin-top: 8px; + margin-top: var(--a-spacing-2); `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/read-only.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/read-only.tsx index c76833c56..f75807514 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/read-only.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/read-only.tsx @@ -1,7 +1,7 @@ +import { useGetMaltekstseksjonQuery } from '@app/redux-api/maltekstseksjoner/queries'; import { Heading, Loader, Tag } from '@navikt/ds-react'; import { skipToken } from '@reduxjs/toolkit/query'; import { styled } from 'styled-components'; -import { useGetMaltekstseksjonQuery } from '@app/redux-api/maltekstseksjoner/queries'; import { TextPreview } from '../texts/preview'; interface Props { @@ -42,7 +42,7 @@ export const MaltekstseksjonReadOnly = ({ id, textToHighlight }: Props) => { }; const Section = styled.section` - margin-top: 16px; + margin-top: var(--a-spacing-4); `; const List = styled.ul` @@ -51,13 +51,13 @@ const List = styled.ul` margin: 0; display: flex; flex-direction: column; - row-gap: 8px; + row-gap: var(--a-spacing-2); border-bottom-left-radius: var(--a-border-radius-medium); border-top-left-radius: var(--a-border-radius-medium); - padding-bottom: 8px; - padding-top: 16px; + padding-bottom: var(--a-spacing-2); + padding-top: var(--a-spacing-4); padding-left: 12px; - border-left: 4px solid var(--a-surface-info); + border-left: var(--a-spacing-1) solid var(--a-surface-info); `; const StyledTextPreview = styled(TextPreview)<{ $highlight: boolean }>` @@ -70,5 +70,5 @@ const Header = styled.header` display: flex; justify-content: flex-start; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/texts.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/texts.tsx index 92aa019d6..3a17270eb 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/texts.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/texts.tsx @@ -1,11 +1,11 @@ +import { MaltekstseksjonPreview } from '@app/components/maltekstseksjoner/maltekstseksjon/preview'; +import { TextList } from '@app/components/maltekstseksjoner/texts/text-list'; +import type { IGetMaltekstseksjonParams } from '@app/types/common-text-types'; +import type { IMaltekstseksjon } from '@app/types/maltekstseksjoner/responses'; import { DocPencilIcon, MagnifyingGlassIcon } from '@navikt/aksel-icons'; import { Tabs } from '@navikt/ds-react'; import { useCallback, useEffect, useState } from 'react'; import { styled } from 'styled-components'; -import { MaltekstseksjonPreview } from '@app/components/maltekstseksjoner/maltekstseksjon/preview'; -import { TextList } from '@app/components/maltekstseksjoner/texts/text-list'; -import { IGetMaltekstseksjonParams } from '@app/types/common-text-types'; -import { IMaltekstseksjon } from '@app/types/maltekstseksjoner/responses'; interface Props { maltekstseksjon: IMaltekstseksjon; @@ -55,7 +55,7 @@ const StyledTabs = styled(Tabs)` overflow: hidden; display: flex; flex-direction: column; - padding-right: 8px; + padding-right: var(--a-spacing-2); `; const StyledTabPanel = styled(Tabs.Panel)` diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/unpublish-maltekstseksjon-button.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/unpublish-maltekstseksjon-button.tsx index 31c2a993f..812bd7c58 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/unpublish-maltekstseksjon-button.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/unpublish-maltekstseksjon-button.tsx @@ -1,12 +1,12 @@ +import { useNavigateMaltekstseksjoner } from '@app/hooks/use-navigate-maltekstseksjoner'; +import { useUnpublishMaltekstseksjonMutation } from '@app/redux-api/maltekstseksjoner/mutations'; +import { useGetMaltekstseksjonVersionsQuery } from '@app/redux-api/maltekstseksjoner/queries'; +import type { IGetMaltekstseksjonParams } from '@app/types/common-text-types'; +import type { IMaltekstseksjon } from '@app/types/maltekstseksjoner/responses'; import { TrashIcon, XMarkIcon } from '@navikt/aksel-icons'; import { Button, HelpText } from '@navikt/ds-react'; import { useMemo, useState } from 'react'; import { styled } from 'styled-components'; -import { useNavigateMaltekstseksjoner } from '@app/hooks/use-navigate-maltekstseksjoner'; -import { useUnpublishMaltekstseksjonMutation } from '@app/redux-api/maltekstseksjoner/mutations'; -import { useGetMaltekstseksjonVersionsQuery } from '@app/redux-api/maltekstseksjoner/queries'; -import { IGetMaltekstseksjonParams } from '@app/types/common-text-types'; -import { IMaltekstseksjon } from '@app/types/maltekstseksjoner/responses'; interface Props { query: IGetMaltekstseksjonParams; @@ -93,5 +93,5 @@ const ConfirmUnpublishMaltekstseksjonButton = ({ const Container = styled.div` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/maltekstseksjoner/styled-components.ts b/frontend/src/components/maltekstseksjoner/styled-components.ts index 14f7d85ea..bb1ee2583 100644 --- a/frontend/src/components/maltekstseksjoner/styled-components.ts +++ b/frontend/src/components/maltekstseksjoner/styled-components.ts @@ -33,8 +33,8 @@ export const TextListItem = styled.li` display: flex; flex-direction: row; align-items: center; - column-gap: 8px; - padding-left: 8px; + column-gap: var(--a-spacing-2); + padding-left: var(--a-spacing-2); position: relative; transition-property: background-color; transition-duration: 0.2s; @@ -87,7 +87,7 @@ export const ListItem = styled.li` $isDragOver ? 'rgba(153, 195, 255, 0.5)' : 'rgba(230, 240, 255, 0.5)'}; text-shadow: 1px 1px white, - -1px -1px white; + -1px -1px var(--a-bg-default); backdrop-filter: blur(2px); } `; diff --git a/frontend/src/components/maltekstseksjoner/text-link.tsx b/frontend/src/components/maltekstseksjoner/text-link.tsx index 3d19061c9..118ccdf8a 100644 --- a/frontend/src/components/maltekstseksjoner/text-link.tsx +++ b/frontend/src/components/maltekstseksjoner/text-link.tsx @@ -1,9 +1,9 @@ +import { StatusTag, type StatusTagProps } from '@app/components/maltekstseksjoner/status-tag'; +import { isoDateTimeToPretty } from '@app/domain/date'; import { Tag } from '@navikt/ds-react'; import { forwardRef } from 'react'; import { Link } from 'react-router-dom'; import { styled } from 'styled-components'; -import { StatusTag, StatusTagProps } from '@app/components/maltekstseksjoner/status-tag'; -import { isoDateTimeToPretty } from '@app/domain/date'; interface TextLinkProps extends StatusTagProps { children: string; @@ -55,12 +55,12 @@ const EllipsisTitle = styled.span` const StyledLink = styled(Link)` display: grid; grid-template-columns: min-content 1fr 85px min-content; - gap: 8px; + gap: var(--a-spacing-2); align-content: center; align-items: center; width: 100%; color: inherit; text-decoration: none; - padding: 8px; + padding: var(--a-spacing-2); border-radius: var(--a-border-radius-medium); `; diff --git a/frontend/src/components/maltekstseksjoner/texts/preview.tsx b/frontend/src/components/maltekstseksjoner/texts/preview.tsx index 19e5de630..8a4e2d63b 100644 --- a/frontend/src/components/maltekstseksjoner/texts/preview.tsx +++ b/frontend/src/components/maltekstseksjoner/texts/preview.tsx @@ -1,5 +1,3 @@ -import { Alert, ErrorMessage, Heading, Loader, Tag, TagProps } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { RedaktoerRichText } from '@app/components/redaktoer-rich-text/redaktoer-rich-text'; import { isRichText } from '@app/functions/is-rich-plain-text'; import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language'; @@ -12,6 +10,8 @@ import { RichTextTypes, } from '@app/types/common-text-types'; import { LANGUAGE_NAMES } from '@app/types/texts/language'; +import { Alert, ErrorMessage, Heading, Loader, Tag, type TagProps } from '@navikt/ds-react'; +import { styled } from 'styled-components'; interface Props { textId: string; @@ -86,5 +86,5 @@ const Header = styled.header` display: flex; justify-content: flex-start; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/maltekstseksjoner/texts/published-rich-text.tsx b/frontend/src/components/maltekstseksjoner/texts/published-rich-text.tsx index 1f705b587..c2850bd4c 100644 --- a/frontend/src/components/maltekstseksjoner/texts/published-rich-text.tsx +++ b/frontend/src/components/maltekstseksjoner/texts/published-rich-text.tsx @@ -1,16 +1,16 @@ -import { PadlockLockedIcon, PencilWritingIcon } from '@navikt/aksel-icons'; -import { Alert } from '@navikt/ds-react'; -import { useRef } from 'react'; -import { styled } from 'styled-components'; import { StyledHeading, getTitle } from '@app/components/editable-title/editable-title'; import { PublishedTextFooter } from '@app/components/maltekstseksjoner/texts/text-published-footer'; import { isRegelverk } from '@app/functions/is-rich-plain-text'; import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language'; import { SPELL_CHECK_LANGUAGES } from '@app/hooks/use-smart-editor-language'; -import { RichTextEditor } from '@app/plate/types'; -import { GOD_FORMULERING_TYPE, REGELVERK_TYPE, RichTextTypes } from '@app/types/common-text-types'; +import type { RichTextEditor } from '@app/plate/types'; +import { type GOD_FORMULERING_TYPE, type REGELVERK_TYPE, RichTextTypes } from '@app/types/common-text-types'; import { LANGUAGE_NAMES, UNTRANSLATED } from '@app/types/texts/language'; -import { IPublishedGodFormulering, IPublishedRegelverk, IPublishedRichText } from '@app/types/texts/responses'; +import type { IPublishedGodFormulering, IPublishedRegelverk, IPublishedRichText } from '@app/types/texts/responses'; +import { PadlockLockedIcon, PencilWritingIcon } from '@navikt/aksel-icons'; +import { Alert } from '@navikt/ds-react'; +import { useRef } from 'react'; +import { styled } from 'styled-components'; import { RedaktoerRichText } from '../../redaktoer-rich-text/redaktoer-rich-text'; interface Props { @@ -85,7 +85,7 @@ const Container = styled.section` display: flex; flex-direction: column; position: relative; - padding-top: 8px; + padding-top: var(--a-spacing-2); overflow-y: auto; `; @@ -94,7 +94,7 @@ const Header = styled.header` flex-direction: row; justify-content: flex-start; align-items: center; - column-gap: 8px; - margin-bottom: 4px; - min-height: 32px; + column-gap: var(--a-spacing-2); + margin-bottom: var(--a-spacing-1); + min-height: var(--a-spacing-8); `; diff --git a/frontend/src/components/maltekstseksjoner/texts/text-draft-footer.tsx b/frontend/src/components/maltekstseksjoner/texts/text-draft-footer.tsx index 08d0b71ea..c49d9fae0 100644 --- a/frontend/src/components/maltekstseksjoner/texts/text-draft-footer.tsx +++ b/frontend/src/components/maltekstseksjoner/texts/text-draft-footer.tsx @@ -1,12 +1,12 @@ -import { UploadIcon } from '@navikt/aksel-icons'; -import { Button, ErrorMessage, Loader } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { EditorName } from '@app/components/editor-name/editor-name'; import { AllMaltekstseksjonReferences } from '@app/components/malteksteksjon-references/maltekstseksjon-references'; import { DeleteDraftButton } from '@app/components/smart-editor-texts/delete-draft-button'; import { isoDateTimeToPretty } from '@app/domain/date'; import { usePublishMutation } from '@app/redux-api/texts/mutations'; -import { IDraftRichText } from '@app/types/texts/responses'; +import type { IDraftRichText } from '@app/types/texts/responses'; +import { UploadIcon } from '@navikt/aksel-icons'; +import { Button, ErrorMessage, Loader } from '@navikt/ds-react'; +import { styled } from 'styled-components'; interface Props { text: IDraftRichText; @@ -71,8 +71,8 @@ const ButtonsContainer = styled.div` display: flex; flex-direction: row; align-items: center; - column-gap: 8px; - margin-top: 8px; + column-gap: var(--a-spacing-2); + margin-top: var(--a-spacing-2); `; const Right = styled.div` diff --git a/frontend/src/components/maltekstseksjoner/texts/text-draft/language-editor.tsx b/frontend/src/components/maltekstseksjoner/texts/text-draft/language-editor.tsx index 7d2b50b59..556da31f8 100644 --- a/frontend/src/components/maltekstseksjoner/texts/text-draft/language-editor.tsx +++ b/frontend/src/components/maltekstseksjoner/texts/text-draft/language-editor.tsx @@ -1,8 +1,8 @@ import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language'; import { SPELL_CHECK_LANGUAGES } from '@app/hooks/use-smart-editor-language'; -import { EditorValue, RichTextEditor } from '@app/plate/types'; -import { Language } from '@app/types/texts/language'; -import { IRichText } from '@app/types/texts/responses'; +import type { EditorValue, RichTextEditor } from '@app/plate/types'; +import type { Language } from '@app/types/texts/language'; +import type { IRichText } from '@app/types/texts/responses'; import { RedaktoerRichText } from '../../../redaktoer-rich-text/redaktoer-rich-text'; export type RichTexts = Record; diff --git a/frontend/src/components/maltekstseksjoner/texts/text-draft/styled-components.ts b/frontend/src/components/maltekstseksjoner/texts/text-draft/styled-components.ts index 84504b20b..a20521bbb 100644 --- a/frontend/src/components/maltekstseksjoner/texts/text-draft/styled-components.ts +++ b/frontend/src/components/maltekstseksjoner/texts/text-draft/styled-components.ts @@ -4,7 +4,7 @@ export const Container = styled.section` display: flex; flex-direction: column; position: relative; - padding-top: 8px; + padding-top: var(--a-spacing-2); `; export const Header = styled.header` @@ -12,12 +12,12 @@ export const Header = styled.header` flex-direction: row; justify-content: space-between; align-items: center; - margin-bottom: 4px; + margin-bottom: var(--a-spacing-1); `; export const HeaderGroup = styled.div` display: flex; flex-direction: row; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/maltekstseksjoner/texts/text-draft/text-draft.tsx b/frontend/src/components/maltekstseksjoner/texts/text-draft/text-draft.tsx index 3085e5c62..1ad0b3888 100644 --- a/frontend/src/components/maltekstseksjoner/texts/text-draft/text-draft.tsx +++ b/frontend/src/components/maltekstseksjoner/texts/text-draft/text-draft.tsx @@ -1,14 +1,11 @@ -import { HelpText, Switch, Tooltip } from '@navikt/ds-react'; -import { focusEditor, getEndPoint, isEditorFocused } from '@udecode/plate-common'; -import { useCallback, useEffect, useRef, useState } from 'react'; import { EditableTitle } from '@app/components/editable-title/editable-title'; -import { LanguageEditor, RichTexts } from '@app/components/maltekstseksjoner/texts/text-draft/language-editor'; +import { LanguageEditor, type RichTexts } from '@app/components/maltekstseksjoner/texts/text-draft/language-editor'; import { Container, Header, HeaderGroup } from '@app/components/maltekstseksjoner/texts/text-draft/styled-components'; import { CreateTranslatedRichText } from '@app/components/smart-editor-texts/create-translated-text'; import { getLanguageNames } from '@app/components/smart-editor-texts/functions/get-language-names'; import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language'; import { useTrashQuery } from '@app/hooks/use-trash-query'; -import { RichTextEditor } from '@app/plate/types'; +import type { RichTextEditor } from '@app/plate/types'; import { usePublishMutation, useSetTextTitleMutation, @@ -16,8 +13,11 @@ import { useUpdateRichTextMutation, } from '@app/redux-api/texts/mutations'; import { RichTextTypes } from '@app/types/common-text-types'; -import { LANGUAGES, Language, isLanguage } from '@app/types/texts/language'; -import { IDraftRichText } from '@app/types/texts/responses'; +import { LANGUAGES, type Language, isLanguage } from '@app/types/texts/language'; +import type { IDraftRichText } from '@app/types/texts/responses'; +import { HelpText, Switch, Tooltip } from '@navikt/ds-react'; +import { focusEditor, getEndPoint, isEditorFocused } from '@udecode/plate-common'; +import { useCallback, useEffect, useRef, useState } from 'react'; import { areDescendantsEqual } from '../../../../functions/are-descendants-equal'; import { DraftTextFooter } from '../text-draft-footer'; diff --git a/frontend/src/components/maltekstseksjoner/texts/text-list.tsx b/frontend/src/components/maltekstseksjoner/texts/text-list.tsx index 8a6ec6f44..210f70954 100644 --- a/frontend/src/components/maltekstseksjoner/texts/text-list.tsx +++ b/frontend/src/components/maltekstseksjoner/texts/text-list.tsx @@ -1,13 +1,13 @@ +import { useNavigateMaltekstseksjoner } from '@app/hooks/use-navigate-maltekstseksjoner'; +import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language'; +import { useUpdateTextIdListMutation } from '@app/redux-api/maltekstseksjoner/mutations'; +import type { IGetMaltekstseksjonParams } from '@app/types/maltekstseksjoner/params'; +import type { IMaltekstseksjon } from '@app/types/maltekstseksjoner/responses'; import { ArrowDownIcon, ArrowUpIcon } from '@navikt/aksel-icons'; import { Alert, Button, Tooltip } from '@navikt/ds-react'; import { useCallback, useEffect } from 'react'; import { useParams } from 'react-router-dom'; import { styled } from 'styled-components'; -import { useNavigateMaltekstseksjoner } from '@app/hooks/use-navigate-maltekstseksjoner'; -import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language'; -import { useUpdateTextIdListMutation } from '@app/redux-api/maltekstseksjoner/mutations'; -import { IGetMaltekstseksjonParams } from '@app/types/maltekstseksjoner/params'; -import { IMaltekstseksjon } from '@app/types/maltekstseksjoner/responses'; import { TextVersions } from './text-versions'; interface Props { @@ -154,9 +154,9 @@ export const TextList = ({ maltekstseksjon, query }: Props) => { const List = styled.div` display: flex; flex-direction: column; - row-gap: 16px; + row-gap: var(--a-spacing-4); margin: 0; - padding-bottom: 32px; + padding-bottom: var(--a-spacing-8); overflow-y: auto; overflow-x: hidden; `; @@ -175,20 +175,20 @@ const ArrowButtonsContainer = styled.div` const StyledTextVersions = styled(TextVersions)` border-radius: var(--a-border-radius-medium); box-shadow: var(--a-shadow-medium); - border-width: 4px; + border-width: var(--a-spacing-1); border-style: solid; border-color: ${({ isActive }) => (isActive ? 'var(--a-border-action-selected)' : 'transparent')}; flex-grow: 1; - padding: 4px; - margin-left: 4px; - margin-right: 4px; - width: calc(210mm + 16px + 16px + 4px + 4px); + padding: var(--a-spacing-1); + margin-left: var(--a-spacing-1); + margin-right: var(--a-spacing-1); + width: calc(210mm + var(--a-spacing-4) + var(--a-spacing-4) + var(--a-spacing-1) + var(--a-spacing-1)); &:last-child { - margin-bottom: 4px; + margin-bottom: var(--a-spacing-1); } `; const StyledAlert = styled(Alert)` - margin-top: 8px; + margin-top: var(--a-spacing-2); `; diff --git a/frontend/src/components/maltekstseksjoner/texts/text-published-footer.tsx b/frontend/src/components/maltekstseksjoner/texts/text-published-footer.tsx index bd83839f4..30adbba08 100644 --- a/frontend/src/components/maltekstseksjoner/texts/text-published-footer.tsx +++ b/frontend/src/components/maltekstseksjoner/texts/text-published-footer.tsx @@ -1,12 +1,12 @@ -import { Button } from '@navikt/ds-react'; -import { useCallback } from 'react'; -import { styled } from 'styled-components'; import { EditorName } from '@app/components/editor-name/editor-name'; import { AllMaltekstseksjonReferences } from '@app/components/malteksteksjon-references/maltekstseksjon-references'; import { useTextQuery } from '@app/components/smart-editor-texts/hooks/use-text-query'; import { isoDateTimeToPretty } from '@app/domain/date'; import { useCreateDraftFromVersionMutation } from '@app/redux-api/texts/mutations'; -import { IPublishedText } from '@app/types/texts/responses'; +import type { IPublishedText } from '@app/types/texts/responses'; +import { Button } from '@navikt/ds-react'; +import { useCallback } from 'react'; +import { styled } from 'styled-components'; interface Props { text: IPublishedText; @@ -53,7 +53,7 @@ const Container = styled.div` flex-direction: row; justify-content: space-between; align-items: center; - margin-top: 8px; + margin-top: var(--a-spacing-2); white-space: nowrap; `; diff --git a/frontend/src/components/maltekstseksjoner/texts/text-versions.tsx b/frontend/src/components/maltekstseksjoner/texts/text-versions.tsx index 44609b4c0..54732d575 100644 --- a/frontend/src/components/maltekstseksjoner/texts/text-versions.tsx +++ b/frontend/src/components/maltekstseksjoner/texts/text-versions.tsx @@ -1,10 +1,10 @@ -import { Alert, Loader } from '@navikt/ds-react'; -import { useCallback, useEffect, useRef, useState } from 'react'; import { VersionTabs } from '@app/components/versioned-tabs/versioned-tabs'; import { useGetTextVersionsQuery } from '@app/redux-api/texts/queries'; import { RichTextTypes } from '@app/types/common-text-types'; import { isApiError } from '@app/types/errors'; -import { IDraftRichText, IPublishedRichText, IRichText, IText } from '@app/types/texts/responses'; +import type { IDraftRichText, IPublishedRichText, IRichText, IText } from '@app/types/texts/responses'; +import { Alert, Loader } from '@navikt/ds-react'; +import { useCallback, useEffect, useRef, useState } from 'react'; import { PublishedRichText } from './published-rich-text'; import { DraftText } from './text-draft/text-draft'; diff --git a/frontend/src/components/mine-oppgaver-table/mine-oppgaver-table.tsx b/frontend/src/components/mine-oppgaver-table/mine-oppgaver-table.tsx index 4042bd644..774a35054 100644 --- a/frontend/src/components/mine-oppgaver-table/mine-oppgaver-table.tsx +++ b/frontend/src/components/mine-oppgaver-table/mine-oppgaver-table.tsx @@ -1,12 +1,12 @@ -import { Heading } from '@navikt/ds-react'; -import { useState } from 'react'; import { OppgaveTable } from '@app/components/common-table-components/oppgave-table/oppgave-table'; import { ColumnKeyEnum } from '@app/components/common-table-components/types'; import { OppgaveTableRowsPerPage } from '@app/hooks/settings/use-setting'; import { useHasRole } from '@app/hooks/use-has-role'; import { useGetMineUferdigeOppgaverQuery } from '@app/redux-api/oppgaver/queries/oppgaver'; import { Role } from '@app/types/bruker'; -import { CommonOppgaverParams, SortFieldEnum, SortOrderEnum } from '@app/types/oppgaver'; +import { type CommonOppgaverParams, SortFieldEnum, SortOrderEnum } from '@app/types/oppgaver'; +import { Heading } from '@navikt/ds-react'; +import { useState } from 'react'; const TEST_ID = 'mine-oppgaver-table'; diff --git a/frontend/src/components/nav/nav.tsx b/frontend/src/components/nav/nav.tsx index 49bfdeb00..2591340f4 100644 --- a/frontend/src/components/nav/nav.tsx +++ b/frontend/src/components/nav/nav.tsx @@ -1,3 +1,5 @@ +import { useHasAnyOfRoles } from '@app/hooks/use-has-role'; +import { Role } from '@app/types/bruker'; import { Buldings3Icon, BulletListIcon, @@ -14,10 +16,8 @@ import { import { InternalHeader } from '@navikt/ds-react'; import { DocumentFooter } from '@styled-icons/fluentui-system-regular/DocumentFooter'; import { DocumentHeader } from '@styled-icons/fluentui-system-regular/DocumentHeader'; -import { NavLink, NavLinkProps } from 'react-router-dom'; +import { NavLink, type NavLinkProps } from 'react-router-dom'; import { styled } from 'styled-components'; -import { useHasAnyOfRoles } from '@app/hooks/use-has-role'; -import { Role } from '@app/types/bruker'; export const Nav = () => ( @@ -121,7 +121,7 @@ const StyledNavLinkList = styled.ul` padding: 0; align-items: center; margin: 0; - gap: 16px; + gap: var(--a-spacing-4); `; const StyledNavListItem = styled.li` @@ -130,26 +130,25 @@ const StyledNavListItem = styled.li` const StyledNavLink = styled(NavLink)` display: flex; - gap: 8px; + gap: var(--a-spacing-2); align-items: center; width: 100%; - border-bottom: 4px solid transparent; + border-bottom: var(--a-spacing-1) solid transparent; word-break: keep-all; white-space: nowrap; border-left: none; text-decoration: none; color: var(--a-text-on-inverted); padding: 0; - padding-left: 4px; - padding-right: 4px; + padding-left: var(--a-spacing-1); + padding-right: var(--a-spacing-1); transition: border-bottom-color 0.2s ease-in-out; &.active { - border-bottom: 4px solid var(--a-blue-300); + border-bottom: var(--a-spacing-1) solid var(--a-blue-300); } &:hover { - /* border-bottom: 4px solid var(--a-text-action); */ - border-bottom: 4px solid #666; + border-bottom: var(--a-spacing-1) solid var(--a-text-subtle); } `; diff --git a/frontend/src/components/oppgavebehandling-controls/external-links.tsx b/frontend/src/components/oppgavebehandling-controls/external-links.tsx index a20a35209..7e5884ba8 100644 --- a/frontend/src/components/oppgavebehandling-controls/external-links.tsx +++ b/frontend/src/components/oppgavebehandling-controls/external-links.tsx @@ -1,14 +1,14 @@ -import { CheckmarkIcon, ExternalLinkIcon, FilesIcon } from '@navikt/aksel-icons'; -import { Button, CopyButton, Link, Tooltip } from '@navikt/ds-react'; -import { useCallback, useState } from 'react'; -import { styled } from 'styled-components'; import { toast } from '@app/components/toast/store'; import { EXTERNAL_URL_MODIA } from '@app/domain/eksterne-lenker'; import { ENVIRONMENT } from '@app/environment'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { pushEvent } from '@app/observability'; import { KABAL_BEHANDLINGER_BASE_PATH } from '@app/redux-api/common'; -import { ISakenGjelder } from '@app/types/oppgave-common'; +import type { ISakenGjelder } from '@app/types/oppgave-common'; +import { CheckmarkIcon, ExternalLinkIcon, FilesIcon } from '@navikt/aksel-icons'; +import { Button, CopyButton, Link, Tooltip } from '@navikt/ds-react'; +import { useCallback, useState } from 'react'; +import { styled } from 'styled-components'; interface LinkProps { sakenGjelder: ISakenGjelder; diff --git a/frontend/src/components/oppgavebehandling-controls/icons/female.tsx b/frontend/src/components/oppgavebehandling-controls/icons/female.tsx index 6b8e0e169..4f2b28ae5 100644 --- a/frontend/src/components/oppgavebehandling-controls/icons/female.tsx +++ b/frontend/src/components/oppgavebehandling-controls/icons/female.tsx @@ -1,4 +1,4 @@ -import { IconProps } from './props'; +import type { IconProps } from './props'; export const FemaleIcon = ({ alt = '' }: IconProps): JSX.Element => ( diff --git a/frontend/src/components/oppgavebehandling-controls/icons/male.tsx b/frontend/src/components/oppgavebehandling-controls/icons/male.tsx index 71774d2d2..a5bbafd87 100644 --- a/frontend/src/components/oppgavebehandling-controls/icons/male.tsx +++ b/frontend/src/components/oppgavebehandling-controls/icons/male.tsx @@ -1,4 +1,4 @@ -import { IconProps } from './props'; +import type { IconProps } from './props'; export const MaleIcon = ({ alt = '' }: IconProps): JSX.Element => ( diff --git a/frontend/src/components/oppgavebehandling-controls/icons/neutral.tsx b/frontend/src/components/oppgavebehandling-controls/icons/neutral.tsx index e7d923049..51fed1743 100644 --- a/frontend/src/components/oppgavebehandling-controls/icons/neutral.tsx +++ b/frontend/src/components/oppgavebehandling-controls/icons/neutral.tsx @@ -1,4 +1,4 @@ -import { IconProps } from './props'; +import type { IconProps } from './props'; export const NeutralIcon = ({ alt = '' }: IconProps): JSX.Element => ( diff --git a/frontend/src/components/oppgavebehandling-controls/oppgavebehandling-controls.tsx b/frontend/src/components/oppgavebehandling-controls/oppgavebehandling-controls.tsx index d00f30388..4c179636f 100644 --- a/frontend/src/components/oppgavebehandling-controls/oppgavebehandling-controls.tsx +++ b/frontend/src/components/oppgavebehandling-controls/oppgavebehandling-controls.tsx @@ -1,5 +1,5 @@ -import { styled } from 'styled-components'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; +import { styled } from 'styled-components'; import { AaRegisteret, Ainntekt, Modia } from './external-links'; import { PanelSwitches } from './panel-switches'; import { UserInfo } from './user-info'; @@ -30,13 +30,13 @@ const ControlPanel = styled.header` display: flex; flex-direction: row; flex-wrap: wrap; - column-gap: 16px; - row-gap: 8px; - padding: 0 16px; - background-color: #f8f8f8; - padding-top: 8px; - padding-bottom: 8px; - border-bottom: 1px solid #c9c9c9; + column-gap: var(--a-spacing-4); + row-gap: var(--a-spacing-2); + padding: 0 var(--a-spacing-4); + background-color: var(--a-bg-default); + padding-top: var(--a-spacing-2); + padding-bottom: var(--a-spacing-2); + border-bottom: 1px solid var(--a-border-divider); `; const OppgavebehandlingInformation = styled.div` diff --git a/frontend/src/components/oppgavebehandling-controls/panel-switches.tsx b/frontend/src/components/oppgavebehandling-controls/panel-switches.tsx index a21931b02..34d02e30b 100644 --- a/frontend/src/components/oppgavebehandling-controls/panel-switches.tsx +++ b/frontend/src/components/oppgavebehandling-controls/panel-switches.tsx @@ -1,5 +1,3 @@ -import { Switch } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { useHideKvalitetsvurdering } from '@app/components/oppgavebehandling-controls/use-hide-kvalitetsvurdering'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { @@ -8,6 +6,8 @@ import { useSmartEditorEnabled, } from '@app/hooks/settings/use-setting'; import { pushEvent } from '@app/observability'; +import { Switch } from '@navikt/ds-react'; +import { styled } from 'styled-components'; export const PanelSwitches = () => { const { value: documentsEnabled = true, setValue: setDocumentsEnabled } = useDocumentsEnabled(); diff --git a/frontend/src/components/oppgavebehandling-controls/use-hide-kvalitetsvurdering.ts b/frontend/src/components/oppgavebehandling-controls/use-hide-kvalitetsvurdering.ts index a7abe0fab..0d07ab332 100644 --- a/frontend/src/components/oppgavebehandling-controls/use-hide-kvalitetsvurdering.ts +++ b/frontend/src/components/oppgavebehandling-controls/use-hide-kvalitetsvurdering.ts @@ -1,7 +1,7 @@ -import { useContext } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { SaksTypeEnum, UtfallEnum } from '@app/types/kodeverk'; +import { useContext } from 'react'; export const useHideKvalitetsvurdering = (): boolean => { const { data: oppgave, isLoading: oppgaveIsLoading } = useOppgave(); diff --git a/frontend/src/components/oppgavebehandling-controls/user-info.tsx b/frontend/src/components/oppgavebehandling-controls/user-info.tsx index 222d2fa42..95925ba85 100644 --- a/frontend/src/components/oppgavebehandling-controls/user-info.tsx +++ b/frontend/src/components/oppgavebehandling-controls/user-info.tsx @@ -1,9 +1,9 @@ -import { CopyButton } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { PartStatusList } from '@app/components/part-status-list/part-status-list'; import { RelevantOppgaver } from '@app/components/relevant-oppgaver/relevant-oppgaver'; import { formatFoedselsnummer } from '@app/functions/format-id'; -import { IOppgavebehandlingBase } from '@app/types/oppgavebehandling/oppgavebehandling'; +import type { IOppgavebehandlingBase } from '@app/types/oppgavebehandling/oppgavebehandling'; +import { CopyButton } from '@navikt/ds-react'; +import { styled } from 'styled-components'; import { UserSex } from './user-sex'; export const UserInfo = ({ sakenGjelder, id }: IOppgavebehandlingBase) => ( @@ -21,7 +21,7 @@ export const UserInfo = ({ sakenGjelder, id }: IOppgavebehandlingBase) => ( const User = styled.section` display: flex; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); border-right: 1px solid #c9c9c9; - padding-right: 16px; + padding-right: var(--a-spacing-4); `; diff --git a/frontend/src/components/oppgavebehandling-footer/confirm-finish.tsx b/frontend/src/components/oppgavebehandling-footer/confirm-finish.tsx index f76b1a833..34fbc5f4a 100644 --- a/frontend/src/components/oppgavebehandling-footer/confirm-finish.tsx +++ b/frontend/src/components/oppgavebehandling-footer/confirm-finish.tsx @@ -1,13 +1,13 @@ -import { CheckmarkIcon, XMarkIcon } from '@navikt/aksel-icons'; -import { BodyLong, Button } from '@navikt/ds-react'; -import { useContext, useMemo, useState } from 'react'; import { Direction, PopupContainer } from '@app/components/popup-container/popup-container'; import { isReduxValidationResponse } from '@app/functions/error-type-guard'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useFinishOppgavebehandlingMutation } from '@app/redux-api/oppgaver/mutations/behandling'; import { useFagsystemer } from '@app/simple-api-state/use-kodeverk'; import { SaksTypeEnum, UtfallEnum } from '@app/types/kodeverk'; -import { IFinishOppgavebehandlingParams } from '@app/types/oppgavebehandling/params'; +import type { IFinishOppgavebehandlingParams } from '@app/types/oppgavebehandling/params'; +import { CheckmarkIcon, XMarkIcon } from '@navikt/aksel-icons'; +import { BodyLong, Button } from '@navikt/ds-react'; +import { useContext, useMemo, useState } from 'react'; import { ValidationErrorContext } from '../kvalitetsvurdering/validation-error-context'; import { StyledFinishOppgaveButtons } from './styled-components'; diff --git a/frontend/src/components/oppgavebehandling-footer/deassign/deassign-oppgave.tsx b/frontend/src/components/oppgavebehandling-footer/deassign/deassign-oppgave.tsx index c52e012bb..266ea1a2e 100644 --- a/frontend/src/components/oppgavebehandling-footer/deassign/deassign-oppgave.tsx +++ b/frontend/src/components/oppgavebehandling-footer/deassign/deassign-oppgave.tsx @@ -1,7 +1,3 @@ -import { ChevronUpIcon, FolderFileIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; -import { useRef, useState } from 'react'; -import { styled } from 'styled-components'; import { Direction } from '@app/components/deassign/direction'; import { PaaVentWarning } from '@app/components/deassign/paa-vent-warning'; import { useCanEdit } from '@app/hooks/use-can-edit'; @@ -9,7 +5,11 @@ import { useOnClickOutside } from '@app/hooks/use-on-click-outside'; import { useOppgaveActions } from '@app/hooks/use-oppgave-actions'; import { useTildelSaksbehandlerMutation } from '@app/redux-api/oppgaver/mutations/tildeling'; import { SaksTypeEnum } from '@app/types/kodeverk'; -import { IOppgavebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; +import type { IOppgavebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; +import { ChevronUpIcon, FolderFileIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; +import { useRef, useState } from 'react'; +import { styled } from 'styled-components'; import { Popup } from '../../deassign/popup'; interface Props { diff --git a/frontend/src/components/oppgavebehandling-footer/deassign/hjemmel-list.tsx b/frontend/src/components/oppgavebehandling-footer/deassign/hjemmel-list.tsx index 3646931bb..eaf7891a8 100644 --- a/frontend/src/components/oppgavebehandling-footer/deassign/hjemmel-list.tsx +++ b/frontend/src/components/oppgavebehandling-footer/deassign/hjemmel-list.tsx @@ -1,8 +1,8 @@ +import { stringToRegExp } from '@app/functions/string-to-regex'; +import { useKodeverkYtelse } from '@app/hooks/use-kodeverk-value'; import { Heading, Loader, Search } from '@navikt/ds-react'; import { useMemo, useState } from 'react'; import { styled } from 'styled-components'; -import { stringToRegExp } from '@app/functions/string-to-regex'; -import { useKodeverkYtelse } from '@app/hooks/use-kodeverk-value'; import { Direction } from '../../deassign/direction'; import { FilterList } from '../../filter-dropdown/filter-list'; @@ -59,7 +59,7 @@ export const HjemmelList = ({ selected, ytelseId, direction, onChange, error }: }; const StyledLoader = styled(Loader)` - margin: 8px; + margin: var(--a-spacing-2); `; const StyledHr = styled.hr` @@ -77,13 +77,13 @@ const Container = styled.div` display: flex; flex-direction: column; position: absolute; - gap: 8px; + gap: var(--a-spacing-2); right: 100%; min-width: 200px; - padding: 8px; + padding: var(--a-spacing-2); - background-color: white; + background-color: var(--a-bg-default); border-radius: var(--a-border-radius-medium); border: 1px solid #c6c2bf; - box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); + box-shadow: var(--a-shadow-medium); `; diff --git a/frontend/src/components/oppgavebehandling-footer/feilregistrer-button.tsx b/frontend/src/components/oppgavebehandling-footer/feilregistrer-button.tsx index 1bde65159..5365a11d6 100644 --- a/frontend/src/components/oppgavebehandling-footer/feilregistrer-button.tsx +++ b/frontend/src/components/oppgavebehandling-footer/feilregistrer-button.tsx @@ -1,9 +1,9 @@ -import { InformationSquareIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; -import { useState } from 'react'; import { FeilregistrertModal } from '@app/components/feilregistrert-modal/feilregistrert-modal'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { SaksTypeEnum } from '@app/types/kodeverk'; +import { InformationSquareIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; +import { useState } from 'react'; import { Feilregistrering } from '../feilregistrering/feilregistrering'; export const FeilregistrerButton = () => { diff --git a/frontend/src/components/oppgavebehandling-footer/finish-button.tsx b/frontend/src/components/oppgavebehandling-footer/finish-button.tsx index 297969392..01e62442f 100644 --- a/frontend/src/components/oppgavebehandling-footer/finish-button.tsx +++ b/frontend/src/components/oppgavebehandling-footer/finish-button.tsx @@ -1,12 +1,12 @@ -import { CheckmarkIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; -import { useContext, useState } from 'react'; -import { styled } from 'styled-components'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useCanEdit } from '@app/hooks/use-can-edit'; import { useIsFullfoert } from '@app/hooks/use-is-fullfoert'; import { useLazyValidateQuery } from '@app/redux-api/oppgaver/queries/behandling/behandling'; import { ValidationType } from '@app/types/oppgavebehandling/params'; +import { CheckmarkIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; +import { useContext, useState } from 'react'; +import { styled } from 'styled-components'; import { ValidationErrorContext } from '../kvalitetsvurdering/validation-error-context'; import { ConfirmFinish } from './confirm-finish'; diff --git a/frontend/src/components/oppgavebehandling-footer/new-ankebehandling-button.tsx b/frontend/src/components/oppgavebehandling-footer/new-ankebehandling-button.tsx index 65b00887d..18b7fc2bc 100644 --- a/frontend/src/components/oppgavebehandling-footer/new-ankebehandling-button.tsx +++ b/frontend/src/components/oppgavebehandling-footer/new-ankebehandling-button.tsx @@ -1,7 +1,3 @@ -import { FolderPlusIcon } from '@navikt/aksel-icons'; -import { BodyShort, Button } from '@navikt/ds-react'; -import { useContext, useState } from 'react'; -import { styled } from 'styled-components'; import { ValidationErrorContext } from '@app/components/kvalitetsvurdering/validation-error-context'; import { Direction, PopupContainer } from '@app/components/popup-container/popup-container'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; @@ -9,6 +5,10 @@ import { useNewAnkebehandlingMutation } from '@app/redux-api/oppgaver/mutations/ import { useLazyValidateQuery } from '@app/redux-api/oppgaver/queries/behandling/behandling'; import { SaksTypeEnum } from '@app/types/kodeverk'; import { ValidationType } from '@app/types/oppgavebehandling/params'; +import { FolderPlusIcon } from '@navikt/aksel-icons'; +import { BodyShort, Button } from '@navikt/ds-react'; +import { useContext, useState } from 'react'; +import { styled } from 'styled-components'; export const NewAnkebehandlingButton = () => { const [showPopup, setShowPopup] = useState(false); diff --git a/frontend/src/components/oppgavebehandling-footer/sett-paa-vent/panel.tsx b/frontend/src/components/oppgavebehandling-footer/sett-paa-vent/panel.tsx index 4af6abbf4..6ea06b63f 100644 --- a/frontend/src/components/oppgavebehandling-footer/sett-paa-vent/panel.tsx +++ b/frontend/src/components/oppgavebehandling-footer/sett-paa-vent/panel.tsx @@ -1,11 +1,11 @@ +import { ISO_FORMAT, PRETTY_FORMAT } from '@app/components/date-picker/constants'; +import { DatePicker } from '@app/components/date-picker/date-picker'; +import { useSattPaaVentMutation } from '@app/redux-api/oppgaver/mutations/vent'; import { HourglassIcon, XMarkIcon } from '@navikt/aksel-icons'; import { Box, Button, ErrorSummary, Textarea } from '@navikt/ds-react'; import { addDays, addWeeks, differenceInWeeks, format, isPast, isValid, parseISO } from 'date-fns'; import { useMemo, useState } from 'react'; import { styled } from 'styled-components'; -import { ISO_FORMAT, PRETTY_FORMAT } from '@app/components/date-picker/constants'; -import { DatePicker } from '@app/components/date-picker/date-picker'; -import { useSattPaaVentMutation } from '@app/redux-api/oppgaver/mutations/vent'; interface Props { oppgaveId: string; @@ -171,7 +171,7 @@ const StyledBox = styled(Box)` position: absolute; display: flex; flex-direction: column; - row-gap: 16px; + row-gap: var(--a-spacing-4); z-index: 1; bottom: 100%; left: 0; @@ -180,7 +180,7 @@ const StyledBox = styled(Box)` const Row = styled.div` display: flex; - column-gap: 16px; + column-gap: var(--a-spacing-4); align-items: center; flex-direction: row; `; @@ -188,5 +188,5 @@ const Row = styled.div` const Column = styled.div` display: flex; flex-direction: column; - gap: 8px; + gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/oppgavebehandling-footer/sett-paa-vent/vent-button.tsx b/frontend/src/components/oppgavebehandling-footer/sett-paa-vent/vent-button.tsx index d35deb372..639a10c2c 100644 --- a/frontend/src/components/oppgavebehandling-footer/sett-paa-vent/vent-button.tsx +++ b/frontend/src/components/oppgavebehandling-footer/sett-paa-vent/vent-button.tsx @@ -1,12 +1,12 @@ -import { HourglassIcon, XMarkIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; -import { useRef, useState } from 'react'; -import { styled } from 'styled-components'; import { SettPaaVentPanel } from '@app/components/oppgavebehandling-footer/sett-paa-vent/panel'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useCanEdit } from '@app/hooks/use-can-edit'; import { useOnClickOutside } from '@app/hooks/use-on-click-outside'; import { useDeleteSattPaaVentMutation } from '@app/redux-api/oppgaver/mutations/vent'; +import { HourglassIcon, XMarkIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; +import { useRef, useState } from 'react'; +import { styled } from 'styled-components'; export const VentButton = () => { const [showPopup, setShowPopup] = useState(false); diff --git a/frontend/src/components/oppgavebehandling-footer/styled-components.ts b/frontend/src/components/oppgavebehandling-footer/styled-components.ts index 5a4b6aa81..ae4c7c2b7 100644 --- a/frontend/src/components/oppgavebehandling-footer/styled-components.ts +++ b/frontend/src/components/oppgavebehandling-footer/styled-components.ts @@ -26,11 +26,11 @@ export const StyledPopup = styled.div` width: 400px; bottom: 100%; right: 0; - margin-bottom: 8px; + margin-bottom: var(--a-spacing-2); `; export const StyledButton = styled.button` - background: transparent; + background-color: transparent; border: 0; padding: 0; margin: 0; @@ -40,7 +40,7 @@ export const StyledButton = styled.button` export const StyledIconButton = styled(StyledButton)` position: absolute; right: 0; - padding: 16px; + padding: var(--a-spacing-4); `; export const StyledButtons = styled.div` @@ -48,14 +48,14 @@ export const StyledButtons = styled.div` align-items: center; align-content: center; justify-content: space-between; - gap: 16px; + gap: var(--a-spacing-4); `; export enum FooterType { - FINISHED, - UNFINISHED_NO_ERRORS, - UNFINISHED_WITH_ERRORS, - SATT_PAA_VENT, + FINISHED = 0, + UNFINISHED_NO_ERRORS = 1, + UNFINISHED_WITH_ERRORS = 2, + SATT_PAA_VENT = 3, } const getBorderColor = (type: FooterType): string => { @@ -105,6 +105,6 @@ export const StyledFooter = styled.div<{ $type: FooterType }>` export const StyledFinishOppgaveButtons = styled.div<{ $width: number }>` display: flex; justify-content: space-between; - gap: 16px; + gap: var(--a-spacing-4); width: ${({ $width }) => $width}px; `; diff --git a/frontend/src/components/oppgavebehandling-footer/unfinished-footer.tsx b/frontend/src/components/oppgavebehandling-footer/unfinished-footer.tsx index ee0e90bd4..36d90c8e7 100644 --- a/frontend/src/components/oppgavebehandling-footer/unfinished-footer.tsx +++ b/frontend/src/components/oppgavebehandling-footer/unfinished-footer.tsx @@ -1,4 +1,3 @@ -import { useContext } from 'react'; import { SendToSaksbehandler } from '@app/components/behandling/behandlingsdialog/rol/send-to-saksbehandler'; import { TakeFromSaksbehandler } from '@app/components/behandling/behandlingsdialog/rol/take-from-saksbehandler'; import { FeilregistrerButton } from '@app/components/oppgavebehandling-footer/feilregistrer-button'; @@ -6,6 +5,7 @@ import { FinishButton } from '@app/components/oppgavebehandling-footer/finish-bu import { NewAnkebehandlingButton } from '@app/components/oppgavebehandling-footer/new-ankebehandling-button'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useIsSaksbehandler } from '@app/hooks/use-is-saksbehandler'; +import { useContext } from 'react'; import { ValidationErrorContext } from '../kvalitetsvurdering/validation-error-context'; import { BackLink } from './back-link'; import { DeassignOppgave } from './deassign/deassign-oppgave'; diff --git a/frontend/src/components/oppgavebehandling-footer/validation-summary-popup.tsx b/frontend/src/components/oppgavebehandling-footer/validation-summary-popup.tsx index 37a6426ce..9de056974 100644 --- a/frontend/src/components/oppgavebehandling-footer/validation-summary-popup.tsx +++ b/frontend/src/components/oppgavebehandling-footer/validation-summary-popup.tsx @@ -1,8 +1,8 @@ +import { ValidationErrorContext } from '@app/components/kvalitetsvurdering/validation-error-context'; import { ChevronDownIcon, ChevronUpIcon } from '@navikt/aksel-icons'; import { Alert } from '@navikt/ds-react'; import { useCallback, useContext, useEffect, useState } from 'react'; import { styled } from 'styled-components'; -import { ValidationErrorContext } from '@app/components/kvalitetsvurdering/validation-error-context'; import { StyledButton, StyledIconButton, StyledPopup } from './styled-components'; import { ValidationSummary } from './validation-summary'; @@ -52,7 +52,7 @@ interface PopupProps { const Popup = ({ open, setOpen, hasErrors }: PopupProps) => { const { validationSectionErrors } = useContext(ValidationErrorContext); - if (!open || !hasErrors) { + if (!(open && hasErrors)) { return null; } diff --git a/frontend/src/components/oppgavebehandling-footer/validation-summary.tsx b/frontend/src/components/oppgavebehandling-footer/validation-summary.tsx index 3bbba6dd3..1440587c8 100644 --- a/frontend/src/components/oppgavebehandling-footer/validation-summary.tsx +++ b/frontend/src/components/oppgavebehandling-footer/validation-summary.tsx @@ -1,7 +1,7 @@ -import { Alert } from '@navikt/ds-react'; -import { IValidationError, IValidationSection } from '@app/functions/error-type-guard'; +import type { IValidationError, IValidationSection } from '@app/functions/error-type-guard'; import { useFieldName } from '@app/hooks/use-field-name'; import { useSectionTitle } from '@app/hooks/use-section-title'; +import { Alert } from '@navikt/ds-react'; import { SectionTitle, StyledFieldList, StyledSection, ValidationSummaryContainer } from './styled-components'; interface Props { diff --git a/frontend/src/components/oppgavebehandling-panels/styled-components.tsx b/frontend/src/components/oppgavebehandling-panels/styled-components.tsx index b8355caca..d31b1240a 100644 --- a/frontend/src/components/oppgavebehandling-panels/styled-components.tsx +++ b/frontend/src/components/oppgavebehandling-panels/styled-components.tsx @@ -6,7 +6,7 @@ export const PanelContainer = styled.section` min-width: fit-content; height: 100%; max-height: 100%; - background: white; + background-color: var(--a-bg-default); box-shadow: var(--a-shadow-medium); border-radius: var(--a-border-radius-medium); overflow-x: hidden; @@ -18,9 +18,9 @@ export const PageContainer = styled.main` flex-direction: row; column-gap: 12px; padding-bottom: 12px; - padding-top: 8px; - padding-left: 8px; - padding-right: 8px; + padding-top: var(--a-spacing-2); + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); width: 100%; flex-grow: 1; overflow-x: scroll; diff --git a/frontend/src/components/oppgaver-paa-vent-table/oppgaver-paa-vent-table.tsx b/frontend/src/components/oppgaver-paa-vent-table/oppgaver-paa-vent-table.tsx index 18ea183cb..f04e4f1e7 100644 --- a/frontend/src/components/oppgaver-paa-vent-table/oppgaver-paa-vent-table.tsx +++ b/frontend/src/components/oppgaver-paa-vent-table/oppgaver-paa-vent-table.tsx @@ -1,12 +1,12 @@ -import { Heading } from '@navikt/ds-react'; -import { useState } from 'react'; import { OppgaveTable } from '@app/components/common-table-components/oppgave-table/oppgave-table'; import { ColumnKeyEnum } from '@app/components/common-table-components/types'; import { OppgaveTableRowsPerPage } from '@app/hooks/settings/use-setting'; import { useHasRole } from '@app/hooks/use-has-role'; import { useGetMineVentendeOppgaverQuery } from '@app/redux-api/oppgaver/queries/oppgaver'; import { Role } from '@app/types/bruker'; -import { CommonOppgaverParams, SortFieldEnum, SortOrderEnum } from '@app/types/oppgaver'; +import { type CommonOppgaverParams, SortFieldEnum, SortOrderEnum } from '@app/types/oppgaver'; +import { Heading } from '@navikt/ds-react'; +import { useState } from 'react'; const COLUMNS: ColumnKeyEnum[] = [ ColumnKeyEnum.TypeWithAnkeITrygderetten, diff --git a/frontend/src/components/oppgavestyring/fradel-button.tsx b/frontend/src/components/oppgavestyring/fradel-button.tsx index d2595ecc1..1995f96d7 100644 --- a/frontend/src/components/oppgavestyring/fradel-button.tsx +++ b/frontend/src/components/oppgavestyring/fradel-button.tsx @@ -1,7 +1,3 @@ -import { Button } from '@navikt/ds-react'; -import { differenceInSeconds, parse } from 'date-fns'; -import { useCallback, useEffect, useRef, useState } from 'react'; -import { styled } from 'styled-components'; import { ISO_DATETIME_FORMAT } from '@app/components/date-picker/constants'; import { Direction } from '@app/components/deassign/direction'; import { PaaVentWarning } from '@app/components/deassign/paa-vent-warning'; @@ -10,7 +6,11 @@ import { useFradel } from '@app/components/oppgavestyring/use-tildel'; import { useOnClickOutside } from '@app/hooks/use-on-click-outside'; import { useOppgaveActions } from '@app/hooks/use-oppgave-actions'; import { useTildelSaksbehandlerMutation } from '@app/redux-api/oppgaver/mutations/tildeling'; -import { FradelReason, IOppgave } from '@app/types/oppgaver'; +import { FradelReason, type IOppgave } from '@app/types/oppgaver'; +import { Button } from '@navikt/ds-react'; +import { differenceInSeconds, parse } from 'date-fns'; +import { useCallback, useEffect, useRef, useState } from 'react'; +import { styled } from 'styled-components'; const KABAL_HEADER_HEIGHT = 48; const UNDO_TIMEOUT_SECONDS = 10; diff --git a/frontend/src/components/oppgavestyring/oppgavestyring.tsx b/frontend/src/components/oppgavestyring/oppgavestyring.tsx index 6f207e4df..44ee74dd0 100644 --- a/frontend/src/components/oppgavestyring/oppgavestyring.tsx +++ b/frontend/src/components/oppgavestyring/oppgavestyring.tsx @@ -1,5 +1,5 @@ +import type { IOppgave } from '@app/types/oppgaver'; import { styled } from 'styled-components'; -import { IOppgave } from '@app/types/oppgaver'; import { FradelButton } from './fradel-button'; import { Saksbehandler } from './saksbehandler'; import { TildelButton } from './tildel-button'; @@ -14,7 +14,7 @@ export const Oppgavestyring = (oppgave: IOppgave) => ( const Container = styled.div` display: grid; - column-gap: 8px; + column-gap: var(--a-spacing-2); grid-template-columns: 110px 400px; grid-template-areas: 'tildel saksbehandler'; `; diff --git a/frontend/src/components/oppgavestyring/saksbehandler.tsx b/frontend/src/components/oppgavestyring/saksbehandler.tsx index 360997320..ae087e02f 100644 --- a/frontend/src/components/oppgavestyring/saksbehandler.tsx +++ b/frontend/src/components/oppgavestyring/saksbehandler.tsx @@ -1,11 +1,12 @@ -import { ErrorMessage, Select } from '@navikt/ds-react'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { styled } from 'styled-components'; import { LoadingCellContent } from '@app/components/common-table-components/loading-cell-content'; +import { toast } from '@app/components/toast/store'; import { useOppgaveActions } from '@app/hooks/use-oppgave-actions'; import { useGetSignatureQuery } from '@app/redux-api/bruker'; import { useGetPotentialSaksbehandlereQuery } from '@app/redux-api/oppgaver/queries/behandling/behandling'; -import { IOppgave } from '@app/types/oppgaver'; +import type { IOppgave } from '@app/types/oppgaver'; +import { ErrorMessage, Select } from '@navikt/ds-react'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { styled } from 'styled-components'; import { useTildel } from './use-tildel'; const NOT_SELECTED = 'NOT_SELECTED'; @@ -90,7 +91,12 @@ const SelectSaksbehandler = ({ )); const onChange = ({ target }: React.ChangeEvent) => { - const employee = data.saksbehandlere.find(({ navIdent }) => navIdent === target.value)!; + const employee = data.saksbehandlere.find(({ navIdent }) => navIdent === target.value); + + if (employee === undefined) { + return toast.error(`Kunne ikke tildele. Ugyldig saksbehandler: ${target.value}`); + } + tildel(employee); }; @@ -144,7 +150,7 @@ const StyledSaksbehandler = styled.span` padding: 0.25rem; border: 1px solid var(--a-border-divider); border-radius: var(--a-border-radius-medium); - background-color: white; + background-color: var(--a-bg-default); `; const StyledErrorMessage = styled(ErrorMessage)` diff --git a/frontend/src/components/oppgavestyring/tildel-button.tsx b/frontend/src/components/oppgavestyring/tildel-button.tsx index f67853637..3d147c9bb 100644 --- a/frontend/src/components/oppgavestyring/tildel-button.tsx +++ b/frontend/src/components/oppgavestyring/tildel-button.tsx @@ -1,11 +1,11 @@ -import { Button } from '@navikt/ds-react'; -import { useContext } from 'react'; -import { styled } from 'styled-components'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { useOppgaveActions } from '@app/hooks/use-oppgave-actions'; import { useTildelSaksbehandlerMutation } from '@app/redux-api/oppgaver/mutations/tildeling'; import { Role } from '@app/types/bruker'; -import { IOppgave } from '@app/types/oppgaver'; +import type { IOppgave } from '@app/types/oppgaver'; +import { Button } from '@navikt/ds-react'; +import { useContext } from 'react'; +import { styled } from 'styled-components'; import { useTildel } from './use-tildel'; interface Props extends IOppgave { @@ -38,8 +38,7 @@ export const TildelButton = ({ } if ( - !access.assignSelf || - !roller.includes(Role.KABAL_SAKSBEHANDLING) || + !(access.assignSelf && roller.includes(Role.KABAL_SAKSBEHANDLING)) || medunderskriver.employee?.navIdent === navIdent || tildeltSaksbehandlerident !== null ) { diff --git a/frontend/src/components/oppgavestyring/toasts.tsx b/frontend/src/components/oppgavestyring/toasts.tsx index ce04d95f1..4bd3cd548 100644 --- a/frontend/src/components/oppgavestyring/toasts.tsx +++ b/frontend/src/components/oppgavestyring/toasts.tsx @@ -1,7 +1,7 @@ +import { CountdownButton } from '@app/components/countdown-button/countdown-button'; +import type { OnChange } from '@app/components/oppgavestyring/types'; import { Button } from '@navikt/ds-react'; import { styled } from 'styled-components'; -import { CountdownButton } from '@app/components/countdown-button/countdown-button'; -import { OnChange } from '@app/components/oppgavestyring/types'; import { toast } from '../toast/store'; interface ToastProps { @@ -48,5 +48,5 @@ const ButtonRow = styled.div` display: flex; flex-direction: row; justify-content: space-between; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/oppgavestyring/use-set-medunderskriver.tsx b/frontend/src/components/oppgavestyring/use-set-medunderskriver.tsx index 0e796c745..443648380 100644 --- a/frontend/src/components/oppgavestyring/use-set-medunderskriver.tsx +++ b/frontend/src/components/oppgavestyring/use-set-medunderskriver.tsx @@ -1,10 +1,10 @@ -import { useCallback } from 'react'; import { getFixedCacheKey } from '@app/components/behandling/behandlingsdialog/medunderskriver/helpers'; import { errorToast, successToast } from '@app/components/oppgavestyring/toasts'; -import { OnChange } from '@app/components/oppgavestyring/types'; +import type { OnChange } from '@app/components/oppgavestyring/types'; import { formatEmployeeNameAndIdFallback } from '@app/domain/employee-name'; import { useSetMedunderskriverMutation } from '@app/redux-api/oppgaver/mutations/set-medunderskriver'; -import { INavEmployee } from '@app/types/bruker'; +import type { INavEmployee } from '@app/types/bruker'; +import { useCallback } from 'react'; export interface Return { onChange: OnChange; @@ -24,7 +24,7 @@ export const useSetMedunderskriver = ( const onChange: OnChange = useCallback( async (toNavIdent, fromNavIdent) => { const toMedunderskriver = - toNavIdent === null ? null : (medunderskrivere.find((m) => m.navIdent === toNavIdent) ?? null); + toNavIdent === null ? null : medunderskrivere.find((m) => m.navIdent === toNavIdent) ?? null; const name = toMedunderskriver === null diff --git a/frontend/src/components/oppgavestyring/use-set-rol.tsx b/frontend/src/components/oppgavestyring/use-set-rol.tsx index 1652c980e..9a037e6fa 100644 --- a/frontend/src/components/oppgavestyring/use-set-rol.tsx +++ b/frontend/src/components/oppgavestyring/use-set-rol.tsx @@ -1,11 +1,11 @@ -import { useCallback } from 'react'; import { getFixedCacheKey } from '@app/components/behandling/behandlingsdialog/medunderskriver/helpers'; import { errorToast, successToast } from '@app/components/oppgavestyring/toasts'; -import { OnChange } from '@app/components/oppgavestyring/types'; +import type { OnChange } from '@app/components/oppgavestyring/types'; import { formatEmployeeNameAndIdFallback } from '@app/domain/employee-name'; import { useSetRolMutation } from '@app/redux-api/oppgaver/mutations/set-rol'; -import { INavEmployee } from '@app/types/bruker'; -import { EMPTY_MEDUNDERSKRIVERE, Return } from './use-set-medunderskriver'; +import type { INavEmployee } from '@app/types/bruker'; +import { useCallback } from 'react'; +import { EMPTY_MEDUNDERSKRIVERE, type Return } from './use-set-medunderskriver'; export const useSetRol = (oppgaveId: string, rol: INavEmployee[] = EMPTY_MEDUNDERSKRIVERE): Return => { const [setRol, { isLoading: isUpdating }] = useSetRolMutation({ @@ -14,7 +14,7 @@ export const useSetRol = (oppgaveId: string, rol: INavEmployee[] = EMPTY_MEDUNDE const onChange: OnChange = useCallback( async (toNavIdent, fromNavIdent) => { - const toROL = toNavIdent === null ? null : (rol.find((m) => m.navIdent === toNavIdent) ?? null); + const toROL = toNavIdent === null ? null : rol.find((m) => m.navIdent === toNavIdent) ?? null; const name = toROL === null ? 'fjernet' : `satt til ${formatEmployeeNameAndIdFallback(toROL, 'felles kø')}`; diff --git a/frontend/src/components/oppgavestyring/use-tildel.tsx b/frontend/src/components/oppgavestyring/use-tildel.tsx index a2f2c3800..84c31f9d1 100644 --- a/frontend/src/components/oppgavestyring/use-tildel.tsx +++ b/frontend/src/components/oppgavestyring/use-tildel.tsx @@ -1,5 +1,3 @@ -import { Button } from '@navikt/ds-react'; -import { useContext, useState } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { CountdownButton } from '@app/components/countdown-button/countdown-button'; import { ActionToast } from '@app/components/toast/action-toast'; @@ -13,10 +11,17 @@ import { useLazyGetSakenGjelderQuery, useLazyGetSaksbehandlerQuery, } from '@app/redux-api/oppgaver/queries/behandling/behandling'; -import { INavEmployee, Role } from '@app/types/bruker'; -import { SaksTypeEnum } from '@app/types/kodeverk'; -import { ISakenGjelderResponse, ISaksbehandlerResponse } from '@app/types/oppgavebehandling/response'; -import { FradelReason, FradelWithHjemler, FradelWithoutHjemler, ITildelingResponse } from '@app/types/oppgaver'; +import { type INavEmployee, Role } from '@app/types/bruker'; +import type { SaksTypeEnum } from '@app/types/kodeverk'; +import type { ISakenGjelderResponse, ISaksbehandlerResponse } from '@app/types/oppgavebehandling/response'; +import { + FradelReason, + type FradelWithHjemler, + type FradelWithoutHjemler, + type ITildelingResponse, +} from '@app/types/oppgaver'; +import { Button } from '@navikt/ds-react'; +import { useContext, useState } from 'react'; import { OpenOppgavebehandling } from '../common-table-components/open'; import { toast } from '../toast/store'; diff --git a/frontend/src/components/part-status-list/part-status-list.tsx b/frontend/src/components/part-status-list/part-status-list.tsx index 09dac5ac6..5f40b2f60 100644 --- a/frontend/src/components/part-status-list/part-status-list.tsx +++ b/frontend/src/components/part-status-list/part-status-list.tsx @@ -1,8 +1,8 @@ +import { isoDateToPretty } from '@app/domain/date'; +import { type IOrganizationStatus, type IPart, type IPersonStatus, PartStatusEnum } from '@app/types/oppgave-common'; import { FlowerPetalFallingIcon } from '@navikt/aksel-icons'; -import { Tag, TagProps } from '@navikt/ds-react'; +import { Tag, type TagProps } from '@navikt/ds-react'; import { styled } from 'styled-components'; -import { isoDateToPretty } from '@app/domain/date'; -import { IOrganizationStatus, IPart, IPersonStatus, PartStatusEnum } from '@app/types/oppgave-common'; interface Props extends Pick { size?: TagProps['size']; @@ -53,7 +53,7 @@ const Container = styled.div` display: flex; flex-direction: row; flex-wrap: wrap; - gap: 4px; + gap: var(--a-spacing-1); `; const STATUS_NAMES: Record = { diff --git a/frontend/src/components/part/delete-button.tsx b/frontend/src/components/part/delete-button.tsx index a48908680..6fd573496 100644 --- a/frontend/src/components/part/delete-button.tsx +++ b/frontend/src/components/part/delete-button.tsx @@ -1,7 +1,7 @@ +import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { ArrowUndoIcon, TrashIcon } from '@navikt/aksel-icons'; import { Button } from '@navikt/ds-react'; import { useState } from 'react'; -import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; interface Props { onDelete: () => void; diff --git a/frontend/src/components/part/edit-part.tsx b/frontend/src/components/part/edit-part.tsx index c554668bc..f83c2f1ab 100644 --- a/frontend/src/components/part/edit-part.tsx +++ b/frontend/src/components/part/edit-part.tsx @@ -1,10 +1,10 @@ -import { Search, Tag } from '@navikt/ds-react'; -import { useEffect, useState } from 'react'; -import { styled } from 'styled-components'; import { cleanAndValidate } from '@app/components/part/validate'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useLazySearchpartwithutsendingskanalQuery } from '@app/redux-api/search'; -import { IPart } from '@app/types/oppgave-common'; +import type { IPart } from '@app/types/oppgave-common'; +import { Search, Tag } from '@navikt/ds-react'; +import { useEffect, useState } from 'react'; +import { styled } from 'styled-components'; import { Lookup } from './lookup'; interface EditPartProps { @@ -115,5 +115,5 @@ const Result = ({ part, search, isError, ...props }: ResultProps) => { const StyledEditPart = styled.div` display: flex; flex-direction: column; - row-gap: 8px; + row-gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/part/lookup.tsx b/frontend/src/components/part/lookup.tsx index 4c0f004a4..453ba446f 100644 --- a/frontend/src/components/part/lookup.tsx +++ b/frontend/src/components/part/lookup.tsx @@ -1,8 +1,8 @@ -import { Alert, BodyShort, Button, Loader, Tag } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { PartStatusList } from '@app/components/part-status-list/part-status-list'; import { formatFoedselsnummer, formatOrgNum } from '@app/functions/format-id'; -import { IPart, IdType, PartStatusEnum } from '@app/types/oppgave-common'; +import { type IPart, IdType, PartStatusEnum } from '@app/types/oppgave-common'; +import { Alert, BodyShort, Button, Loader, Tag } from '@navikt/ds-react'; +import { styled } from 'styled-components'; interface LookupProps extends Omit { part: IPart | undefined; @@ -59,7 +59,7 @@ const StyledResult = styled(Tag)` display: flex; flex-direction: column; align-items: start; - gap: 8px; + gap: var(--a-spacing-2); `; const getUnreachableText = (statusList: IPart['statusList']): string | null => { diff --git a/frontend/src/components/part/part.tsx b/frontend/src/components/part/part.tsx index 21e29509b..6686d1aaa 100644 --- a/frontend/src/components/part/part.tsx +++ b/frontend/src/components/part/part.tsx @@ -1,13 +1,13 @@ -import { PencilIcon, XMarkIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; -import { useState } from 'react'; -import { styled } from 'styled-components'; import { CopyButton } from '@app/components/copy-button/copy-button'; import { CopyIdButton } from '@app/components/copy-button/copy-id-button'; -import { EditPart } from '@app/components/part/edit-part'; import { PartStatusList } from '@app/components/part-status-list/part-status-list'; +import { EditPart } from '@app/components/part/edit-part'; import { useCanEdit } from '@app/hooks/use-can-edit'; -import { IPart } from '@app/types/oppgave-common'; +import type { IPart } from '@app/types/oppgave-common'; +import { PencilIcon, XMarkIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; +import { useState } from 'react'; +import { styled } from 'styled-components'; import { BehandlingSection } from '../behandling/behandlingsdetaljer/behandling-section'; import { DeleteButton } from './delete-button'; @@ -110,7 +110,7 @@ interface EditButtonProps { const Container = styled.div` display: flex; - gap: 4px; + gap: var(--a-spacing-1); flex-wrap: wrap; align-items: center; `; diff --git a/frontend/src/components/part/validate.ts b/frontend/src/components/part/validate.ts index 797b4e892..f54428e0d 100644 --- a/frontend/src/components/part/validate.ts +++ b/frontend/src/components/part/validate.ts @@ -1,5 +1,5 @@ -import { dnr, fnr } from '@navikt/fnrvalidator'; import { isValidOrgnr } from '@app/domain/orgnr'; +import { dnr, fnr } from '@navikt/fnrvalidator'; const NUMBER_REGEX = /^([\d]{9}|[\d]{11})$/; diff --git a/frontend/src/components/popup-container/popup-container.tsx b/frontend/src/components/popup-container/popup-container.tsx index aa7f64bc4..bb98ac2ac 100644 --- a/frontend/src/components/popup-container/popup-container.tsx +++ b/frontend/src/components/popup-container/popup-container.tsx @@ -1,10 +1,10 @@ +import { useOnClickOutside } from '@app/hooks/use-on-click-outside'; import { useRef } from 'react'; import { styled } from 'styled-components'; -import { useOnClickOutside } from '@app/hooks/use-on-click-outside'; export enum Direction { - LEFT, - RIGHT, + LEFT = 0, + RIGHT = 1, } interface Props { @@ -31,8 +31,8 @@ const StyledPanel = styled.div<{ $direction: Direction }>` bottom: 100%; display: flex; flex-direction: column; - gap: 16px; + gap: var(--a-spacing-4); box-shadow: var(--a-shadow-medium); - background: var(--a-bg-default); + background-color: var(--a-bg-default); padding: var(--a-spacing-4); `; diff --git a/frontend/src/components/redaktoer-rich-text/redaktoer-rich-text.tsx b/frontend/src/components/redaktoer-rich-text/redaktoer-rich-text.tsx index 2b7f5342b..248587d44 100644 --- a/frontend/src/components/redaktoer-rich-text/redaktoer-rich-text.tsx +++ b/frontend/src/components/redaktoer-rich-text/redaktoer-rich-text.tsx @@ -1,16 +1,16 @@ -import { ClockDashedIcon } from '@navikt/aksel-icons'; -import { Plate } from '@udecode/plate-common'; -import { forwardRef, useRef } from 'react'; -import { styled } from 'styled-components'; import { ErrorBoundary } from '@app/error-boundary/error-boundary'; -import { SpellCheckLanguage } from '@app/hooks/use-smart-editor-language'; +import type { SpellCheckLanguage } from '@app/hooks/use-smart-editor-language'; import { PlateEditor } from '@app/plate/plate-editor'; import { redaktoerPlugins } from '@app/plate/plugins/plugin-sets/redaktoer'; import { Sheet } from '@app/plate/sheet'; import { FloatingRedaktoerToolbar } from '@app/plate/toolbar/toolbars/floating-toolbar'; import { RedaktoerToolbar } from '@app/plate/toolbar/toolbars/redaktoer-toolbar'; import { RedaktoerTableToolbar } from '@app/plate/toolbar/toolbars/table-toolbar'; -import { EditorValue, RichTextEditor } from '@app/plate/types'; +import type { EditorValue, RichTextEditor } from '@app/plate/types'; +import { ClockDashedIcon } from '@navikt/aksel-icons'; +import { Plate } from '@udecode/plate-common'; +import { forwardRef, useRef } from 'react'; +import { styled } from 'styled-components'; import { ErrorComponent } from '../smart-editor-texts/error-component'; interface Props { @@ -66,8 +66,8 @@ export const RedaktoerRichText = forwardRef( RedaktoerRichText.displayName = 'RedaktoerRichText'; const Content = styled.div` - padding: 16px; - background: var(--a-surface-subtle); + padding: var(--a-spacing-4); + background-color: var(--a-surface-subtle); flex-grow: 1; overflow: hidden; overflow-y: auto; diff --git a/frontend/src/components/relevant-oppgaver/relevant-oppgaver.tsx b/frontend/src/components/relevant-oppgaver/relevant-oppgaver.tsx index 15a83a680..a2a9f57d5 100644 --- a/frontend/src/components/relevant-oppgaver/relevant-oppgaver.tsx +++ b/frontend/src/components/relevant-oppgaver/relevant-oppgaver.tsx @@ -1,7 +1,3 @@ -import { FolderFileIcon } from '@navikt/aksel-icons'; -import { Button, ButtonProps, Heading, Loader, Modal, Table, Tooltip } from '@navikt/ds-react'; -import { useCallback, useState } from 'react'; -import { styled } from 'styled-components'; // eslint-disable-next-line import/no-cycle import { OppgaveRow } from '@app/components/common-table-components/oppgave-rows/oppgave-row'; import { OppgaveTable } from '@app/components/common-table-components/oppgave-table/oppgave-table'; @@ -20,6 +16,10 @@ import { OppgaveTableRowsPerPage } from '@app/hooks/settings/use-setting'; import { pushEvent } from '@app/observability'; import { useGetSakenGjelderQuery } from '@app/redux-api/oppgaver/queries/behandling/behandling'; import { useGetRelevantOppgaverQuery } from '@app/redux-api/oppgaver/queries/oppgaver'; +import { FolderFileIcon } from '@navikt/aksel-icons'; +import { Button, type ButtonProps, Heading, Loader, Modal, Table, Tooltip } from '@navikt/ds-react'; +import { useCallback, useState } from 'react'; +import { styled } from 'styled-components'; interface Props { oppgaveId: string; @@ -153,5 +153,5 @@ const VENTENDE_COLUMNS: ColumnKeyEnum[] = [ const StyledBody = styled(Modal.Body)` display: flex; flex-direction: column; - row-gap: 16px; + row-gap: var(--a-spacing-4); `; diff --git a/frontend/src/components/rich-text-preview/rich-text-preview.tsx b/frontend/src/components/rich-text-preview/rich-text-preview.tsx index 2d88b5fd7..9db85d41c 100644 --- a/frontend/src/components/rich-text-preview/rich-text-preview.tsx +++ b/frontend/src/components/rich-text-preview/rich-text-preview.tsx @@ -1,8 +1,3 @@ -import { FileSearchIcon } from '@navikt/aksel-icons'; -import { Button, ButtonProps } from '@navikt/ds-react'; -import { Plate } from '@udecode/plate-common'; -import { useRef, useState } from 'react'; -import { styled } from 'styled-components'; import { EDITOR_SCALE_CSS_VAR } from '@app/components/smart-editor/hooks/use-scale'; import { useOnClickOutside } from '@app/hooks/use-on-click-outside'; import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language'; @@ -11,7 +6,12 @@ import { BASE_FONT_SIZE } from '@app/plate/components/get-scaled-em'; import { renderReadOnlyLeaf } from '@app/plate/leaf/render-leaf'; import { PlateEditor } from '@app/plate/plate-editor'; import { previewPlugins } from '@app/plate/plugins/plugin-sets/preview'; -import { EditorValue, RichTextEditor } from '@app/plate/types'; +import type { EditorValue, RichTextEditor } from '@app/plate/types'; +import { FileSearchIcon } from '@navikt/aksel-icons'; +import { Button, type ButtonProps } from '@navikt/ds-react'; +import { Plate } from '@udecode/plate-common'; +import { useRef, useState } from 'react'; +import { styled } from 'styled-components'; type OpenSide = 'left' | 'right'; type OpenDirection = 'up' | 'down'; @@ -75,10 +75,10 @@ const PreviewContainer = styled.div` `; const ContentContainer = styled.div<{ $openSide: OpenSide; $openDirection: OpenDirection }>` - background-color: white; + background-color: var(--a-bg-default); box-shadow: var(--a-shadow-medium); position: absolute; - padding: 8px; + padding: var(--a-spacing-2); left: ${({ $openSide }) => ($openSide === 'left' ? 'auto' : '0')}; right: ${({ $openSide }) => ($openSide === 'left' ? '0' : 'auto')}; bottom: ${({ $openDirection }) => ($openDirection === 'up' ? '100%' : 'auto')}; diff --git a/frontend/src/components/rol-tables/ledige-rol-oppgaver-table.tsx b/frontend/src/components/rol-tables/ledige-rol-oppgaver-table.tsx index 077d00d85..9409d782f 100644 --- a/frontend/src/components/rol-tables/ledige-rol-oppgaver-table.tsx +++ b/frontend/src/components/rol-tables/ledige-rol-oppgaver-table.tsx @@ -1,6 +1,3 @@ -import { Heading } from '@navikt/ds-react'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { useState } from 'react'; import { OppgaveTable } from '@app/components/common-table-components/oppgave-table/oppgave-table'; import { ColumnKeyEnum } from '@app/components/common-table-components/types'; import { OppgaveTableRowsPerPage } from '@app/hooks/settings/use-setting'; @@ -8,7 +5,10 @@ import { useHasRole } from '@app/hooks/use-has-role'; import { useGetSettingsQuery } from '@app/redux-api/bruker'; import { useGetLedigeRolOppgaverQuery } from '@app/redux-api/oppgaver/queries/oppgaver'; import { Role } from '@app/types/bruker'; -import { CommonOppgaverParams, SortFieldEnum, SortOrderEnum } from '@app/types/oppgaver'; +import { type CommonOppgaverParams, SortFieldEnum, SortOrderEnum } from '@app/types/oppgaver'; +import { Heading } from '@navikt/ds-react'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useState } from 'react'; const COLUMNS: ColumnKeyEnum[] = [ ColumnKeyEnum.Type, diff --git a/frontend/src/components/rol-tables/mine-rol-oppgaver-table.tsx b/frontend/src/components/rol-tables/mine-rol-oppgaver-table.tsx index b2a065e5b..b077dc552 100644 --- a/frontend/src/components/rol-tables/mine-rol-oppgaver-table.tsx +++ b/frontend/src/components/rol-tables/mine-rol-oppgaver-table.tsx @@ -1,13 +1,13 @@ -import { Heading } from '@navikt/ds-react'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { useState } from 'react'; import { OppgaveTable } from '@app/components/common-table-components/oppgave-table/oppgave-table'; import { ColumnKeyEnum } from '@app/components/common-table-components/types'; import { OppgaveTableRowsPerPage } from '@app/hooks/settings/use-setting'; import { useHasRole } from '@app/hooks/use-has-role'; import { useGetUferdigeRolOppgaverQuery } from '@app/redux-api/oppgaver/queries/oppgaver'; import { Role } from '@app/types/bruker'; -import { CommonOppgaverParams, SortFieldEnum, SortOrderEnum } from '@app/types/oppgaver'; +import { type CommonOppgaverParams, SortFieldEnum, SortOrderEnum } from '@app/types/oppgaver'; +import { Heading } from '@navikt/ds-react'; +import type { skipToken } from '@reduxjs/toolkit/query'; +import { useState } from 'react'; const TEST_ID = 'mine-oppgaver-table'; diff --git a/frontend/src/components/rol-tables/returnerte-rol-oppgaver-table.tsx b/frontend/src/components/rol-tables/returnerte-rol-oppgaver-table.tsx index a9fdbe90b..d3be46ae1 100644 --- a/frontend/src/components/rol-tables/returnerte-rol-oppgaver-table.tsx +++ b/frontend/src/components/rol-tables/returnerte-rol-oppgaver-table.tsx @@ -1,12 +1,12 @@ -import { Heading } from '@navikt/ds-react'; -import { useState } from 'react'; import { OppgaveTable } from '@app/components/common-table-components/oppgave-table/oppgave-table'; import { ColumnKeyEnum } from '@app/components/common-table-components/types'; import { OppgaveTableRowsPerPage } from '@app/hooks/settings/use-setting'; import { useHasRole } from '@app/hooks/use-has-role'; import { useGetReturnerteRolOppgaverQuery } from '@app/redux-api/oppgaver/queries/oppgaver'; import { Role } from '@app/types/bruker'; -import { CommonOppgaverParams, SortFieldEnum, SortOrderEnum } from '@app/types/oppgaver'; +import { type CommonOppgaverParams, SortFieldEnum, SortOrderEnum } from '@app/types/oppgaver'; +import { Heading } from '@navikt/ds-react'; +import { useState } from 'react'; const COLUMNS: ColumnKeyEnum[] = [ ColumnKeyEnum.Type, diff --git a/frontend/src/components/rol/returnerte-table.tsx b/frontend/src/components/rol/returnerte-table.tsx index cc3cc1a55..1ecfc6e31 100644 --- a/frontend/src/components/rol/returnerte-table.tsx +++ b/frontend/src/components/rol/returnerte-table.tsx @@ -1,5 +1,3 @@ -import { Heading } from '@navikt/ds-react'; -import { useContext, useState } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { OppgaveTable } from '@app/components/common-table-components/oppgave-table/oppgave-table'; import { ColumnKeyEnum } from '@app/components/common-table-components/types'; @@ -7,7 +5,14 @@ import { OppgaveTableRowsPerPage } from '@app/hooks/settings/use-setting'; import { useHasRole } from '@app/hooks/use-has-role'; import { useGetRolReturnerteOppgaverQuery } from '@app/redux-api/oppgaver/queries/oppgaver'; import { Role } from '@app/types/bruker'; -import { CommonOppgaverParams, EnhetensOppgaverParams, SortFieldEnum, SortOrderEnum } from '@app/types/oppgaver'; +import { + type CommonOppgaverParams, + type EnhetensOppgaverParams, + SortFieldEnum, + SortOrderEnum, +} from '@app/types/oppgaver'; +import { Heading } from '@navikt/ds-react'; +import { useContext, useState } from 'react'; const COLUMNS: ColumnKeyEnum[] = [ ColumnKeyEnum.Type, diff --git a/frontend/src/components/rol/under-arbeid-table.tsx b/frontend/src/components/rol/under-arbeid-table.tsx index 3afeb9f6d..77a4cec90 100644 --- a/frontend/src/components/rol/under-arbeid-table.tsx +++ b/frontend/src/components/rol/under-arbeid-table.tsx @@ -1,6 +1,3 @@ -import { Heading } from '@navikt/ds-react'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { useContext, useState } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { OppgaveTable } from '@app/components/common-table-components/oppgave-table/oppgave-table'; import { ColumnKeyEnum } from '@app/components/common-table-components/types'; @@ -9,7 +6,15 @@ import { useHasRole } from '@app/hooks/use-has-role'; import { useSakstyper } from '@app/hooks/use-kodeverk-value'; import { useGetRolUferdigeOppgaverQuery } from '@app/redux-api/oppgaver/queries/oppgaver'; import { Role } from '@app/types/bruker'; -import { CommonOppgaverParams, EnhetensOppgaverParams, SortFieldEnum, SortOrderEnum } from '@app/types/oppgaver'; +import { + type CommonOppgaverParams, + type EnhetensOppgaverParams, + SortFieldEnum, + SortOrderEnum, +} from '@app/types/oppgaver'; +import { Heading } from '@navikt/ds-react'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useContext, useState } from 'react'; const COLUMNS: ColumnKeyEnum[] = [ ColumnKeyEnum.Type, diff --git a/frontend/src/components/role-list/role-list-item.tsx b/frontend/src/components/role-list/role-list-item.tsx index e177940fa..e99a0064e 100644 --- a/frontend/src/components/role-list/role-list-item.tsx +++ b/frontend/src/components/role-list/role-list-item.tsx @@ -1,7 +1,7 @@ +import { ROLE_NAMES, type Role } from '@app/types/bruker'; import { FilesIcon } from '@navikt/aksel-icons'; -import { Tag, TagProps, Tooltip } from '@navikt/ds-react'; +import { Tag, type TagProps, Tooltip } from '@navikt/ds-react'; import { styled } from 'styled-components'; -import { ROLE_NAMES, Role } from '@app/types/bruker'; interface Props { role: Role; @@ -24,7 +24,7 @@ export const RoleItem = ({ role, variant }: Props) => { const RoleContent = styled.button` display: flex; - gap: 8px; + gap: var(--a-spacing-2); align-items: center; cursor: pointer; margin: 0; diff --git a/frontend/src/components/role-list/role-list.tsx b/frontend/src/components/role-list/role-list.tsx index 8a83c7b3b..b00f514b3 100644 --- a/frontend/src/components/role-list/role-list.tsx +++ b/frontend/src/components/role-list/role-list.tsx @@ -1,7 +1,7 @@ -import { Heading, List, TagProps } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { RoleItem } from '@app/components/role-list/role-list-item'; -import { Role } from '@app/types/bruker'; +import type { Role } from '@app/types/bruker'; +import { Heading, List, type TagProps } from '@navikt/ds-react'; +import { styled } from 'styled-components'; interface Props { roles: Role[]; diff --git a/frontend/src/components/rows-per-page.tsx b/frontend/src/components/rows-per-page.tsx index ae4549c47..8ec8f68b5 100644 --- a/frontend/src/components/rows-per-page.tsx +++ b/frontend/src/components/rows-per-page.tsx @@ -1,9 +1,9 @@ -import { Label, ToggleGroup } from '@navikt/ds-react'; -import { useId } from 'react'; -import { styled } from 'styled-components'; import { useRestrictedNumberSetting } from '@app/hooks/settings/helpers'; import { PAGE_SIZE_OPTIONS, restrictPageSize } from '@app/hooks/use-oppgave-pagination'; import { pushEvent } from '@app/observability'; +import { Label, ToggleGroup } from '@navikt/ds-react'; +import { useId } from 'react'; +import { styled } from 'styled-components'; interface Props { settingKey: string; @@ -43,7 +43,7 @@ export const RowsPerPage = ({ settingKey, pageSize, 'data-testid': testId }: Pro const StyledRowsPerPage = styled.div` display: flex; - gap: 8px; + gap: var(--a-spacing-2); align-items: center; justify-self: right; `; diff --git a/frontend/src/components/saved-status/saved-status.tsx b/frontend/src/components/saved-status/saved-status.tsx index 124388311..cb63bbe49 100644 --- a/frontend/src/components/saved-status/saved-status.tsx +++ b/frontend/src/components/saved-status/saved-status.tsx @@ -1,13 +1,13 @@ -import { Loader, Tooltip } from '@navikt/ds-react'; -import { SerializedError } from '@reduxjs/toolkit'; -import { FetchBaseQueryError, skipToken } from '@reduxjs/toolkit/query'; -import { useContext } from 'react'; -import { styled } from 'styled-components'; import { SmartEditorContext } from '@app/components/smart-editor/context'; import { isoDateTimeToPretty } from '@app/domain/date'; -import { ErrorMessage, getErrorData } from '@app/functions/get-error-data'; +import { type ErrorMessage, getErrorData } from '@app/functions/get-error-data'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { useGetDocumentQuery } from '@app/redux-api/oppgaver/queries/documents'; +import { Loader, Tooltip } from '@navikt/ds-react'; +import type { SerializedError } from '@reduxjs/toolkit'; +import { type FetchBaseQueryError, skipToken } from '@reduxjs/toolkit/query'; +import { useContext } from 'react'; +import { styled } from 'styled-components'; import { CheckmarkCircleFillIconColored, XMarkOctagonFillIconColored } from '../colored-icons/colored-icons'; export interface SavedStatusProps { @@ -77,7 +77,7 @@ const Container = styled.div` display: flex; flex-direction: row; align-items: center; - gap: 4px; + gap: var(--a-spacing-1); `; const StatusText = styled.span` diff --git a/frontend/src/components/search/common/feilregistrerte-oppgaver-table.tsx b/frontend/src/components/search/common/feilregistrerte-oppgaver-table.tsx index 322249dcf..69a4e3413 100644 --- a/frontend/src/components/search/common/feilregistrerte-oppgaver-table.tsx +++ b/frontend/src/components/search/common/feilregistrerte-oppgaver-table.tsx @@ -1,7 +1,7 @@ -import { Alert, Heading } from '@navikt/ds-react'; import { OppgaveTable } from '@app/components/common-table-components/oppgave-table/oppgave-table'; import { ColumnKeyEnum } from '@app/components/common-table-components/types'; import { OppgaveTableRowsPerPage } from '@app/hooks/settings/use-setting'; +import { Alert, Heading } from '@navikt/ds-react'; interface Props { oppgaveIds: string[]; diff --git a/frontend/src/components/search/common/fullfoerte-oppgaver-table.tsx b/frontend/src/components/search/common/fullfoerte-oppgaver-table.tsx index ba40633aa..bfdeadb34 100644 --- a/frontend/src/components/search/common/fullfoerte-oppgaver-table.tsx +++ b/frontend/src/components/search/common/fullfoerte-oppgaver-table.tsx @@ -1,7 +1,7 @@ -import { Alert, Heading } from '@navikt/ds-react'; import { OppgaveTable } from '@app/components/common-table-components/oppgave-table/oppgave-table'; import { ColumnKeyEnum } from '@app/components/common-table-components/types'; import { OppgaveTableRowsPerPage } from '@app/hooks/settings/use-setting'; +import { Alert, Heading } from '@navikt/ds-react'; interface Props { oppgaveIds: string[]; diff --git a/frontend/src/components/search/common/ledige-oppgaver-table.tsx b/frontend/src/components/search/common/ledige-oppgaver-table.tsx index 093801127..94c6527fd 100644 --- a/frontend/src/components/search/common/ledige-oppgaver-table.tsx +++ b/frontend/src/components/search/common/ledige-oppgaver-table.tsx @@ -1,7 +1,7 @@ -import { Alert, Heading } from '@navikt/ds-react'; import { OppgaveTable } from '@app/components/common-table-components/oppgave-table/oppgave-table'; import { ColumnKeyEnum } from '@app/components/common-table-components/types'; import { OppgaveTableRowsPerPage } from '@app/hooks/settings/use-setting'; +import { Alert, Heading } from '@navikt/ds-react'; interface Props { oppgaveIds: string[]; diff --git a/frontend/src/components/search/common/oppgaver-paa-vent-table.tsx b/frontend/src/components/search/common/oppgaver-paa-vent-table.tsx index c8148ead8..f0810b31a 100644 --- a/frontend/src/components/search/common/oppgaver-paa-vent-table.tsx +++ b/frontend/src/components/search/common/oppgaver-paa-vent-table.tsx @@ -1,7 +1,7 @@ -import { Alert, Heading } from '@navikt/ds-react'; import { OppgaveTable } from '@app/components/common-table-components/oppgave-table/oppgave-table'; import { ColumnKeyEnum } from '@app/components/common-table-components/types'; import { OppgaveTableRowsPerPage } from '@app/hooks/settings/use-setting'; +import { Alert, Heading } from '@navikt/ds-react'; interface Props { oppgaveIds: string[]; diff --git a/frontend/src/components/search/common/styled-components.ts b/frontend/src/components/search/common/styled-components.ts index d120e2135..e9a9de479 100644 --- a/frontend/src/components/search/common/styled-components.ts +++ b/frontend/src/components/search/common/styled-components.ts @@ -3,8 +3,8 @@ import { styled } from 'styled-components'; export const StyledOppgaverContainer = styled.section` grid-area: oppgaver; border-top: 1px solid #c6c2bf; - margin-top: 16px; - padding-top: 8px; + margin-top: var(--a-spacing-4); + padding-top: var(--a-spacing-2); display: flex; flex-direction: column; gap: 75px; diff --git a/frontend/src/components/search/fnr/fnr-search.tsx b/frontend/src/components/search/fnr/fnr-search.tsx index 9256bb1bc..cb865200b 100644 --- a/frontend/src/components/search/fnr/fnr-search.tsx +++ b/frontend/src/components/search/fnr/fnr-search.tsx @@ -1,9 +1,9 @@ +import { formatFoedselsnummer } from '@app/functions/format-id'; +import { useSearchOppgaverByFnrQuery, useSearchPersonByFnrQuery } from '@app/redux-api/oppgaver/queries/oppgaver'; import { MagnifyingGlassIcon } from '@navikt/aksel-icons'; import { Alert, Button, Loader } from '@navikt/ds-react'; import { skipToken } from '@reduxjs/toolkit/query'; import { styled } from 'styled-components'; -import { formatFoedselsnummer } from '@app/functions/format-id'; -import { useSearchOppgaverByFnrQuery, useSearchPersonByFnrQuery } from '@app/redux-api/oppgaver/queries/oppgaver'; import { Result } from './result'; const FNR_REGEX = /^\s*\d{6}\s*\d{5}\s*$/; @@ -89,5 +89,5 @@ const useCleanQuery = (queryString: string): string | typeof skipToken => { const AlertContent = styled.div` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/search/fnr/result.tsx b/frontend/src/components/search/fnr/result.tsx index be26a5fd4..a0143f224 100644 --- a/frontend/src/components/search/fnr/result.tsx +++ b/frontend/src/components/search/fnr/result.tsx @@ -1,11 +1,11 @@ -import { MagnifyingGlassIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { FeilregistrerteOppgaverTable } from '@app/components/search/common/feilregistrerte-oppgaver-table'; import { OppgaverPaaVentTable } from '@app/components/search/common/oppgaver-paa-vent-table'; import { OppgaverPageWrapper } from '@app/pages/page-wrapper'; -import { IPartBase } from '@app/types/oppgave-common'; -import { IOppgaverResponse } from '@app/types/oppgaver'; +import type { IPartBase } from '@app/types/oppgave-common'; +import type { IOppgaverResponse } from '@app/types/oppgaver'; +import { MagnifyingGlassIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; +import { styled } from 'styled-components'; import { CopyIdButton } from '../../copy-button/copy-id-button'; import { FullfoerteOppgaverTable } from '../common/fullfoerte-oppgaver-table'; import { LedigeOppgaverTable } from '../common/ledige-oppgaver-table'; @@ -54,7 +54,7 @@ const StyledPerson = styled.div` display: flex; flex-direction: row; align-items: center; - column-gap: 16px; - padding-left: 16px; - padding-right: 16px; + column-gap: var(--a-spacing-4); + padding-left: var(--a-spacing-4); + padding-right: var(--a-spacing-4); `; diff --git a/frontend/src/components/search/name/name-search.tsx b/frontend/src/components/search/name/name-search.tsx index 5181d7778..455a4622a 100644 --- a/frontend/src/components/search/name/name-search.tsx +++ b/frontend/src/components/search/name/name-search.tsx @@ -1,10 +1,10 @@ +import { useLazySearchPeopleByNameQuery } from '@app/redux-api/oppgaver/queries/oppgaver'; +import type { INameSearchParams } from '@app/types/oppgaver'; import { MagnifyingGlassIcon } from '@navikt/aksel-icons'; import { Alert, Button, Loader } from '@navikt/ds-react'; import { skipToken } from '@reduxjs/toolkit/query'; import { useCallback, useEffect, useMemo } from 'react'; import { styled } from 'styled-components'; -import { useLazySearchPeopleByNameQuery } from '@app/redux-api/oppgaver/queries/oppgaver'; -import { INameSearchParams } from '@app/types/oppgaver'; import { SearchResults } from './searchresults'; interface NameSearchProps { @@ -76,5 +76,5 @@ const useGetQuery = (queryString: string): INameSearchParams | typeof skipToken const AlertContent = styled.div` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/search/name/oppgaver.tsx b/frontend/src/components/search/name/oppgaver.tsx index 8b27a6c41..16593b3ee 100644 --- a/frontend/src/components/search/name/oppgaver.tsx +++ b/frontend/src/components/search/name/oppgaver.tsx @@ -1,7 +1,7 @@ -import { Loader } from '@navikt/ds-react'; import { FeilregistrerteOppgaverTable } from '@app/components/search/common/feilregistrerte-oppgaver-table'; import { OppgaverPaaVentTable } from '@app/components/search/common/oppgaver-paa-vent-table'; import { useSearchOppgaverByFnrQuery } from '@app/redux-api/oppgaver/queries/oppgaver'; +import { Loader } from '@navikt/ds-react'; import { FullfoerteOppgaverTable } from '../common/fullfoerte-oppgaver-table'; import { LedigeOppgaverTable } from '../common/ledige-oppgaver-table'; import { StyledOppgaverContainer } from '../common/styled-components'; diff --git a/frontend/src/components/search/name/result.tsx b/frontend/src/components/search/name/result.tsx index 4fc703192..63576c6a8 100644 --- a/frontend/src/components/search/name/result.tsx +++ b/frontend/src/components/search/name/result.tsx @@ -1,6 +1,6 @@ +import type { IPartBase } from '@app/types/oppgave-common'; import { Table } from '@navikt/ds-react'; import { useState } from 'react'; -import { IPartBase } from '@app/types/oppgave-common'; import { CopyIdButton } from '../../copy-button/copy-id-button'; import { StyledFnr, StyledName } from '../common/styled-components'; import { Oppgaver } from './oppgaver'; diff --git a/frontend/src/components/search/name/searchresults.tsx b/frontend/src/components/search/name/searchresults.tsx index b293d032a..c7d27203e 100644 --- a/frontend/src/components/search/name/searchresults.tsx +++ b/frontend/src/components/search/name/searchresults.tsx @@ -1,13 +1,13 @@ -import { ArrowsCirclepathIcon } from '@navikt/aksel-icons'; -import { Button, Pagination, Table } from '@navikt/ds-react'; -import { useMemo, useState } from 'react'; -import { styled } from 'styled-components'; import { PageInfo } from '@app/components/common-table-components/page-info'; import { RowsPerPage } from '@app/components/rows-per-page'; import { useRestrictedNumberSetting } from '@app/hooks/settings/helpers'; import { restrictPageSize } from '@app/hooks/use-oppgave-pagination'; import { StyledFooterContent } from '@app/styled-components/table'; -import { IPartBase } from '@app/types/oppgave-common'; +import type { IPartBase } from '@app/types/oppgave-common'; +import { ArrowsCirclepathIcon } from '@navikt/aksel-icons'; +import { Button, Pagination, Table } from '@navikt/ds-react'; +import { useMemo, useState } from 'react'; +import { styled } from 'styled-components'; import { Result } from './result'; interface SearchResultsProps { @@ -81,13 +81,13 @@ const Container = styled.div` display: flex; flex-direction: column; overflow: auto; - padding-left: 16px; - padding-right: 16px; - padding-bottom: 16px; + padding-left: var(--a-spacing-4); + padding-right: var(--a-spacing-4); + padding-bottom: var(--a-spacing-4); `; const Left = styled.div` display: flex; align-items: center; - gap: 4px; + gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/searchbox/searchbox.tsx b/frontend/src/components/searchbox/searchbox.tsx index 13ee56248..b7f27f3d8 100644 --- a/frontend/src/components/searchbox/searchbox.tsx +++ b/frontend/src/components/searchbox/searchbox.tsx @@ -23,5 +23,5 @@ const StyledSearch = styled(Search)` `; const StyledContainer = styled.div` - padding: 16px; + padding: var(--a-spacing-4); `; diff --git a/frontend/src/components/set-redaktoer-language/set-maltekstseksjon-language.tsx b/frontend/src/components/set-redaktoer-language/set-maltekstseksjon-language.tsx index e9cd756e6..91e025b9f 100644 --- a/frontend/src/components/set-redaktoer-language/set-maltekstseksjon-language.tsx +++ b/frontend/src/components/set-redaktoer-language/set-maltekstseksjon-language.tsx @@ -1,7 +1,7 @@ -import { ToggleGroup } from '@navikt/ds-react'; import { useNavigateMaltekstseksjoner } from '@app/hooks/use-navigate-maltekstseksjoner'; import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language'; import { Language, isLanguage } from '@app/types/texts/language'; +import { ToggleGroup } from '@navikt/ds-react'; export const SetMaltekstseksjonLanguage = () => { const navigate = useNavigateMaltekstseksjoner(); diff --git a/frontend/src/components/set-redaktoer-language/set-standalone-text-language.tsx b/frontend/src/components/set-redaktoer-language/set-standalone-text-language.tsx index 4d3d203f4..76e003ba4 100644 --- a/frontend/src/components/set-redaktoer-language/set-standalone-text-language.tsx +++ b/frontend/src/components/set-redaktoer-language/set-standalone-text-language.tsx @@ -1,8 +1,8 @@ -import { ToggleGroup } from '@navikt/ds-react'; import { useNavigateToStandaloneTextVersion } from '@app/hooks/use-navigate-to-standalone-text-version'; import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language'; -import { REGELVERK_TYPE, TextTypes } from '@app/types/common-text-types'; +import { REGELVERK_TYPE, type TextTypes } from '@app/types/common-text-types'; import { Language, isLanguage } from '@app/types/texts/language'; +import { ToggleGroup } from '@navikt/ds-react'; interface Props { textType: TextTypes; diff --git a/frontend/src/components/settings/abbreviations/abbreviation.tsx b/frontend/src/components/settings/abbreviations/abbreviation.tsx index 3890ad015..57ebaca5c 100644 --- a/frontend/src/components/settings/abbreviations/abbreviation.tsx +++ b/frontend/src/components/settings/abbreviations/abbreviation.tsx @@ -1,6 +1,6 @@ import { CheckmarkIcon, TrashIcon } from '@navikt/aksel-icons'; import { Button, ErrorMessage, TextField } from '@navikt/ds-react'; -import { CSSProperties, KeyboardEventHandler, useEffect, useState } from 'react'; +import { type CSSProperties, type KeyboardEventHandler, useEffect, useState } from 'react'; import { styled } from 'styled-components'; interface Props { @@ -125,7 +125,7 @@ export const Abbreviation = ({ const StyledAbbreviation = styled.div` display: grid; - gap: 8px; + gap: var(--a-spacing-2); grid-template-columns: 250px 500px min-content min-content; align-items: start; `; diff --git a/frontend/src/components/settings/abbreviations/abbreviations.tsx b/frontend/src/components/settings/abbreviations/abbreviations.tsx index d5aec2399..1b10257f4 100644 --- a/frontend/src/components/settings/abbreviations/abbreviations.tsx +++ b/frontend/src/components/settings/abbreviations/abbreviations.tsx @@ -1,10 +1,10 @@ -import { Alert, Heading, HeadingProps, HelpText, Loader } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { AddAbbreviation } from '@app/components/settings/abbreviations/add'; import { ExistingAbbreviation } from '@app/components/settings/abbreviations/existing'; import { AbbreviationsExplanation } from '@app/components/settings/abbreviations/explanation'; import { SectionHeader, SettingsSection } from '@app/components/settings/styled-components'; import { useGetAbbreviationsQuery } from '@app/redux-api/bruker'; +import { Alert, Heading, type HeadingProps, HelpText, Loader } from '@navikt/ds-react'; +import { styled } from 'styled-components'; export const Abbreviations = () => ( @@ -84,5 +84,5 @@ const AbbreviationList = styled.ul` list-style: none; display: flex; flex-direction: column; - row-gap: 4px; + row-gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/settings/abbreviations/add.tsx b/frontend/src/components/settings/abbreviations/add.tsx index 863ed399f..783320cf2 100644 --- a/frontend/src/components/settings/abbreviations/add.tsx +++ b/frontend/src/components/settings/abbreviations/add.tsx @@ -1,8 +1,8 @@ -import { useState } from 'react'; import { Abbreviation } from '@app/components/settings/abbreviations/abbreviation'; import { ABBREVIATIONS } from '@app/custom-data/abbreviations'; import { pushEvent } from '@app/observability'; import { useAddAbbreviationMutation } from '@app/redux-api/bruker'; +import { useState } from 'react'; export const AddAbbreviation = () => { const [addAbbreviation, { isLoading }] = useAddAbbreviationMutation(); diff --git a/frontend/src/components/settings/abbreviations/example.tsx b/frontend/src/components/settings/abbreviations/example.tsx index 8bf63828d..742c1bd6f 100644 --- a/frontend/src/components/settings/abbreviations/example.tsx +++ b/frontend/src/components/settings/abbreviations/example.tsx @@ -4,7 +4,7 @@ import { styled } from 'styled-components'; interface Props { title: string; children: React.ReactNode; - examples: React.ReactNode[]; + examples: React.ReactElement<{ key: string }>[]; recommended?: boolean; } @@ -22,8 +22,8 @@ export const AbbrevationExample = ({ title, children, examples, recommended = fa {children} - {examples.map((example, index) => ( - {example} + {examples.map((example) => ( + {example} ))} @@ -33,5 +33,5 @@ const StyledHeading = styled(Heading)` display: flex; flex-direction: row; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/settings/abbreviations/existing.tsx b/frontend/src/components/settings/abbreviations/existing.tsx index 52a39eefb..3ab5a9dc5 100644 --- a/frontend/src/components/settings/abbreviations/existing.tsx +++ b/frontend/src/components/settings/abbreviations/existing.tsx @@ -1,9 +1,9 @@ -import { useState } from 'react'; import { Abbreviation } from '@app/components/settings/abbreviations/abbreviation'; import { ABBREVIATIONS } from '@app/custom-data/abbreviations'; import { pushEvent } from '@app/observability'; import { useDeleteAbbreviationMutation, useUpdateAbbreviationMutation } from '@app/redux-api/bruker'; -import { CustomAbbrevation } from '@app/types/bruker'; +import type { CustomAbbrevation } from '@app/types/bruker'; +import { useState } from 'react'; export const ExistingAbbreviation = ({ short: savedShort, long: savedLong, id }: CustomAbbrevation) => { const [deleteAbbreviation, { isLoading: isDeleting }] = useDeleteAbbreviationMutation(); diff --git a/frontend/src/components/settings/abbreviations/explanation.tsx b/frontend/src/components/settings/abbreviations/explanation.tsx index 3ec2d40ab..46a80e9c0 100644 --- a/frontend/src/components/settings/abbreviations/explanation.tsx +++ b/frontend/src/components/settings/abbreviations/explanation.tsx @@ -1,7 +1,7 @@ -import { BodyShort, ReadMore, Tag, Tooltip } from '@navikt/ds-react'; -import { useCallback } from 'react'; import { AbbrevationExample } from '@app/components/settings/abbreviations/example'; import { pushEvent } from '@app/observability'; +import { BodyShort, ReadMore, Tag, Tooltip } from '@navikt/ds-react'; +import { Fragment, useCallback } from 'react'; export const AbbreviationsExplanation = () => { const onOpenChange = useCallback((open: boolean) => { @@ -48,15 +48,15 @@ export const AbbreviationsExplanation = () => { title="Eksempel på kortform med kun små bokstaver" recommended examples={[ - <> + «aap» blir utvidet til «arbeidsavklaringspenger»/«Arbeidsavklaringspenger». - , - <> + , + «Aap» blir utvidet til «Arbeidsavklaringspenger». - , - <> + , + «AAP» blir utvidet til «ARBEIDSAVKLARINGSPENGER». - , + , ]} > Kortform «aap» med langform «arbeidsavklaringspenger» @@ -66,15 +66,15 @@ export const AbbreviationsExplanation = () => { title="Eksempel på kortform med spesialtegn" recommended examples={[ - <> + «@om» blir utvidet til «omsorgspenger»/«Omsorgspenger». - , - <> + , + «@Om» blir utvidet til «Omsorgspenger». - , - <> + , + «@OM» blir utvidet til «OMSORGSPENGER». - , + , ]} > Kortform «@om» med langform «omsorgspenger» @@ -84,13 +84,13 @@ export const AbbreviationsExplanation = () => { title="Eksempel på kortform med tall" recommended examples={[ - <> + «k9» blir utvidet til «kapittel 9 i folketrygdloven»/«Kapittel 9 i folketrygdloven».{' '} - , - <> + , + «K9» blir utvidet til «Kapittel 9 i folketrygdloven». - , + , ]} > Kortform «k9» med langform «kapittel 9 i folketrygdloven» @@ -99,15 +99,15 @@ export const AbbreviationsExplanation = () => { - «aap» blir . - , - <> - «Aap» blir . - , - <> + + «aap» blir . + , + + «Aap» blir . + , + «AAP» blir utvidet til «arbeidsavklaringspenger»/«Arbeidsavklaringspenger». - , + , ]} > Kortform «AAP» med langform «arbeidsavklaringspenger» @@ -116,15 +116,15 @@ export const AbbreviationsExplanation = () => { - «aap» blir . - , - <> + + «aap» blir . + , + «Aap» blir utvidet til «arbeidsavklaringspenger»/«Arbeidsavklaringspenger». - , - <> - «AAP» blir . - , + , + + «AAP» blir . + , ]} > Kortform «Aap» med langform «arbeidsavklaringspenger» @@ -133,15 +133,15 @@ export const AbbreviationsExplanation = () => { + «x» blir utvidet til «høyesterettsjustitiarius»/«Høyesterettsjustitiarius». - , - <> + , + «X» blir utvidet til «Høyesterettsjustitiarius». Umulig å få bare store boktaver siden kortformen består av kun én bokstav. - , + , ]} > Kortform «x» med langform «høyesterettsjustitiarius» @@ -170,7 +170,7 @@ const AlwaysAllCaps = () => ( ); -const Error = () => ( +const NotRecognised = () => ( Ikke gjenkjent diff --git a/frontend/src/components/settings/filters.tsx b/frontend/src/components/settings/filters.tsx index 784b4490a..2a1f7b4f9 100644 --- a/frontend/src/components/settings/filters.tsx +++ b/frontend/src/components/settings/filters.tsx @@ -1,11 +1,11 @@ -import { CheckmarkIcon, TrashIcon } from '@navikt/aksel-icons'; -import { Button, Switch } from '@navikt/ds-react'; -import { useMemo } from 'react'; import { useAvailableYtelser } from '@app/hooks/use-available-ytelser'; import { useHasRole } from '@app/hooks/use-has-role'; import { useGetSettingsQuery, useUpdateSettingsMutation } from '@app/redux-api/bruker'; -import { ISettings, Role } from '@app/types/bruker'; -import { IKodeverkSimpleValue } from '@app/types/kodeverk'; +import { type ISettings, Role } from '@app/types/bruker'; +import type { IKodeverkSimpleValue } from '@app/types/kodeverk'; +import { CheckmarkIcon, TrashIcon } from '@navikt/aksel-icons'; +import { Button, Switch } from '@navikt/ds-react'; +import { useMemo } from 'react'; import { ButtonContainer, SectionHeader, diff --git a/frontend/src/components/settings/settings.tsx b/frontend/src/components/settings/settings.tsx index 618dacc00..2d0ae66c7 100644 --- a/frontend/src/components/settings/settings.tsx +++ b/frontend/src/components/settings/settings.tsx @@ -17,5 +17,5 @@ const StyledSettings = styled.article` grid-template-areas: 'filters abbreviations' 'signature abbreviations'; - gap: 16px; + gap: var(--a-spacing-4); `; diff --git a/frontend/src/components/settings/signature.tsx b/frontend/src/components/settings/signature.tsx index e27da2706..74ea46ad0 100644 --- a/frontend/src/components/settings/signature.tsx +++ b/frontend/src/components/settings/signature.tsx @@ -1,11 +1,11 @@ +import { StaticDataContext } from '@app/components/app/static-data-context'; +import { useHasRole } from '@app/hooks/use-has-role'; +import { useGetMySignatureQuery, useSetAnonymousMutation, useSetCustomInfoMutation } from '@app/redux-api/bruker'; +import { type ISetCustomInfoParams, type ISignatureResponse, Role } from '@app/types/bruker'; import { CheckmarkCircleIcon, XMarkOctagonIcon } from '@navikt/aksel-icons'; import { Checkbox, Loader, Radio, RadioGroup, TextField } from '@navikt/ds-react'; import { useContext, useEffect, useState } from 'react'; import { styled } from 'styled-components'; -import { StaticDataContext } from '@app/components/app/static-data-context'; -import { useHasRole } from '@app/hooks/use-has-role'; -import { useGetMySignatureQuery, useSetAnonymousMutation, useSetCustomInfoMutation } from '@app/redux-api/bruker'; -import { ISetCustomInfoParams, ISignatureResponse, Role } from '@app/types/bruker'; import { SectionHeader, SettingsSection } from './styled-components'; export const Signature = () => { @@ -164,20 +164,20 @@ const Status = ({ isError, isLoading, isSuccess }: StatusProps) => { }; const StyledInput = styled(TextField)` - margin-top: 16px; + margin-top: var(--a-spacing-4); margin-right: 6px; width: 350px; `; const StyledRadioGroup = styled(RadioGroup)` - margin-top: 16px; + margin-top: var(--a-spacing-4); `; const StyledSignature = styled.div` display: flex; align-items: flex-end; width: 100%; - gap: 8px; + gap: var(--a-spacing-2); `; const StyledSuccess = styled(CheckmarkCircleIcon)` diff --git a/frontend/src/components/settings/styled-components.ts b/frontend/src/components/settings/styled-components.ts index 26c43fa84..0f39cf3ea 100644 --- a/frontend/src/components/settings/styled-components.ts +++ b/frontend/src/components/settings/styled-components.ts @@ -9,6 +9,7 @@ export const SettingsSection = styled.section<{ $area: string }>` padding: 24px; width: 100%; height: fit-content; + background-color: var(--a-bg-subtle); `; export const SectionHeader = styled.h1` @@ -17,7 +18,7 @@ export const SectionHeader = styled.h1` margin-bottom: 24px; display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; export const StyledFilters = styled.div` @@ -42,7 +43,7 @@ export const StyledFieldset = styled(Fieldset)` export const ButtonContainer = styled.div` display: flex; flex-direction: row; - column-gap: 8px; + column-gap: var(--a-spacing-2); position: absolute; top: 0; right: 0; diff --git a/frontend/src/components/settings/use-hjemler-from-settings-ytelser.ts b/frontend/src/components/settings/use-hjemler-from-settings-ytelser.ts index de493eb12..8aebba9cf 100644 --- a/frontend/src/components/settings/use-hjemler-from-settings-ytelser.ts +++ b/frontend/src/components/settings/use-hjemler-from-settings-ytelser.ts @@ -1,7 +1,7 @@ -import { useMemo } from 'react'; import { useAvailableYtelser } from '@app/hooks/use-available-ytelser'; import { useGetSettingsQuery } from '@app/redux-api/bruker'; -import { IKodeverkValue } from '@app/types/kodeverk'; +import type { IKodeverkValue } from '@app/types/kodeverk'; +import { useMemo } from 'react'; export const useHjemlerFromSettingsYtelser = () => { const { data } = useGetSettingsQuery(); diff --git a/frontend/src/components/smart-editor-texts/create-translated-text.tsx b/frontend/src/components/smart-editor-texts/create-translated-text.tsx index a37332235..f400d7a56 100644 --- a/frontend/src/components/smart-editor-texts/create-translated-text.tsx +++ b/frontend/src/components/smart-editor-texts/create-translated-text.tsx @@ -1,10 +1,10 @@ -import { Button } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { useTextQuery } from '@app/components/smart-editor-texts/hooks/use-text-query'; import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language'; import { createSimpleParagraph } from '@app/plate/templates/helpers'; import { useUpdatePlainTextMutation, useUpdateRichTextMutation } from '@app/redux-api/texts/mutations'; import { LANGUAGE_NAMES } from '@app/types/texts/language'; +import { Button } from '@navikt/ds-react'; +import { styled } from 'styled-components'; interface Props { id: string; @@ -45,5 +45,5 @@ export const CreateTranslatedPlainText = ({ id }: Props) => { const ButtonWrapper = styled.div` display: flex; justify-content: center; - padding: 16px; + padding: var(--a-spacing-4); `; diff --git a/frontend/src/components/smart-editor-texts/delete-draft-button.tsx b/frontend/src/components/smart-editor-texts/delete-draft-button.tsx index 2d2d84db7..71b97d07f 100644 --- a/frontend/src/components/smart-editor-texts/delete-draft-button.tsx +++ b/frontend/src/components/smart-editor-texts/delete-draft-button.tsx @@ -1,8 +1,8 @@ +import { useDeleteDraftMutation } from '@app/redux-api/texts/mutations'; +import { useGetTextVersionsQuery } from '@app/redux-api/texts/queries'; import { TrashIcon, XMarkIcon } from '@navikt/aksel-icons'; import { Button } from '@navikt/ds-react'; import { useCallback, useState } from 'react'; -import { useDeleteDraftMutation } from '@app/redux-api/texts/mutations'; -import { useGetTextVersionsQuery } from '@app/redux-api/texts/queries'; import { useTextQuery } from './hooks/use-text-query'; interface Props { diff --git a/frontend/src/components/smart-editor-texts/edit/changelog.tsx b/frontend/src/components/smart-editor-texts/edit/changelog.tsx index fb1aad5e0..d1b44165c 100644 --- a/frontend/src/components/smart-editor-texts/edit/changelog.tsx +++ b/frontend/src/components/smart-editor-texts/edit/changelog.tsx @@ -1,9 +1,9 @@ +import { isoDateTimeToPretty } from '@app/domain/date'; +import { TextChangeType } from '@app/types/common-text-types'; +import type { IText } from '@app/types/texts/responses'; import { Button, Modal, Table } from '@navikt/ds-react'; import { Fragment, useCallback, useRef } from 'react'; import { styled } from 'styled-components'; -import { isoDateTimeToPretty } from '@app/domain/date'; -import { TextChangeType } from '@app/types/common-text-types'; -import { IText } from '@app/types/texts/responses'; interface Props { versions: IText[]; diff --git a/frontend/src/components/smart-editor-texts/edit/draft-plain-text.tsx b/frontend/src/components/smart-editor-texts/edit/draft-plain-text.tsx index 3048930b6..078118ddd 100644 --- a/frontend/src/components/smart-editor-texts/edit/draft-plain-text.tsx +++ b/frontend/src/components/smart-editor-texts/edit/draft-plain-text.tsx @@ -1,15 +1,15 @@ -import { useCallback, useEffect, useState } from 'react'; import { CreateTranslatedPlainText } from '@app/components/smart-editor-texts/create-translated-text'; import { Edit } from '@app/components/smart-editor-texts/edit/edit'; import { HeaderFooterEditor } from '@app/components/smart-editor-texts/edit/header-footer'; import { getLanguageNames } from '@app/components/smart-editor-texts/functions/get-language-names'; import { useTextQuery } from '@app/components/smart-editor-texts/hooks/use-text-query'; -import { DraftVersionProps } from '@app/components/smart-editor-texts/types'; +import type { DraftVersionProps } from '@app/components/smart-editor-texts/types'; import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language'; import { usePublishMutation, useUpdatePlainTextMutation } from '@app/redux-api/texts/mutations'; -import { PlainTextTypes } from '@app/types/common-text-types'; -import { LANGUAGES, Language, isLanguage } from '@app/types/texts/language'; -import { IPlainText } from '@app/types/texts/responses'; +import type { PlainTextTypes } from '@app/types/common-text-types'; +import { LANGUAGES, type Language, isLanguage } from '@app/types/texts/language'; +import type { IPlainText } from '@app/types/texts/responses'; +import { useCallback, useEffect, useState } from 'react'; interface Props extends Omit { text: IPlainText; @@ -40,9 +40,9 @@ export const DraftPlainText = ({ text, onDraftDeleted }: Props) => { } const timer = setTimeout(() => { - changes.forEach((lang) => { + for (const lang of changes) { updatePlainText({ query, plainText: plainTexts[lang], id: text.id, language: lang }); - }); + } }, 1000); return () => clearTimeout(timer); diff --git a/frontend/src/components/smart-editor-texts/edit/draft-regelverk.tsx b/frontend/src/components/smart-editor-texts/edit/draft-regelverk.tsx index 1e5620c88..629ee70f9 100644 --- a/frontend/src/components/smart-editor-texts/edit/draft-regelverk.tsx +++ b/frontend/src/components/smart-editor-texts/edit/draft-regelverk.tsx @@ -1,14 +1,14 @@ -import { useCallback, useEffect, useState } from 'react'; import { RedaktoerRichText } from '@app/components/redaktoer-rich-text/redaktoer-rich-text'; import { Edit } from '@app/components/smart-editor-texts/edit/edit'; import { useTextQuery } from '@app/components/smart-editor-texts/hooks/use-text-query'; -import { DraftVersionProps } from '@app/components/smart-editor-texts/types'; +import type { DraftVersionProps } from '@app/components/smart-editor-texts/types'; import { areDescendantsEqual } from '@app/functions/are-descendants-equal'; import { SpellCheckLanguage } from '@app/hooks/use-smart-editor-language'; -import { EditorValue } from '@app/plate/types'; +import type { EditorValue } from '@app/plate/types'; import { usePublishMutation, useUpdateRichTextMutation } from '@app/redux-api/texts/mutations'; import { UNTRANSLATED } from '@app/types/texts/language'; -import { IRegelverk } from '@app/types/texts/responses'; +import type { IRegelverk } from '@app/types/texts/responses'; +import { useCallback, useEffect, useState } from 'react'; interface Props extends Omit { text: IRegelverk; diff --git a/frontend/src/components/smart-editor-texts/edit/draft-rich-text.tsx b/frontend/src/components/smart-editor-texts/edit/draft-rich-text.tsx index d467545a1..485a13cd8 100644 --- a/frontend/src/components/smart-editor-texts/edit/draft-rich-text.tsx +++ b/frontend/src/components/smart-editor-texts/edit/draft-rich-text.tsx @@ -1,17 +1,17 @@ -import { useCallback, useEffect, useState } from 'react'; import { RedaktoerRichText } from '@app/components/redaktoer-rich-text/redaktoer-rich-text'; import { CreateTranslatedRichText } from '@app/components/smart-editor-texts/create-translated-text'; import { Edit } from '@app/components/smart-editor-texts/edit/edit'; import { getLanguageNames } from '@app/components/smart-editor-texts/functions/get-language-names'; import { useTextQuery } from '@app/components/smart-editor-texts/hooks/use-text-query'; -import { DraftVersionProps } from '@app/components/smart-editor-texts/types'; +import type { DraftVersionProps } from '@app/components/smart-editor-texts/types'; import { areDescendantsEqual } from '@app/functions/are-descendants-equal'; import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language'; import { SPELL_CHECK_LANGUAGES } from '@app/hooks/use-smart-editor-language'; -import { EditorValue } from '@app/plate/types'; +import type { EditorValue } from '@app/plate/types'; import { usePublishMutation, useUpdateRichTextMutation } from '@app/redux-api/texts/mutations'; -import { LANGUAGES, Language, isLanguage } from '@app/types/texts/language'; -import { IGodFormulering, IRichText } from '@app/types/texts/responses'; +import { LANGUAGES, type Language, isLanguage } from '@app/types/texts/language'; +import type { IGodFormulering, IRichText } from '@app/types/texts/responses'; +import { useCallback, useEffect, useState } from 'react'; interface Props extends Omit { text: IRichText | IGodFormulering; @@ -100,9 +100,9 @@ const DraftRichTextBase = ({ text, onDraftDeleted, validate, error }: DraftRichT } const timer = setTimeout(() => { - changes.forEach((lang) => { + for (const lang of changes) { updateRichText({ query, richText: richTexts[lang], id: text.id, language: lang }); - }); + } }, 1000); return () => clearTimeout(timer); diff --git a/frontend/src/components/smart-editor-texts/edit/edit.tsx b/frontend/src/components/smart-editor-texts/edit/edit.tsx index 2c1415ff4..cc5dd97b6 100644 --- a/frontend/src/components/smart-editor-texts/edit/edit.tsx +++ b/frontend/src/components/smart-editor-texts/edit/edit.tsx @@ -1,6 +1,5 @@ -import { styled } from 'styled-components'; import { EditableTitle } from '@app/components/editable-title/editable-title'; -import { SavedStatusProps } from '@app/components/saved-status/saved-status'; +import type { SavedStatusProps } from '@app/components/saved-status/saved-status'; import { Footer } from '@app/components/smart-editor-texts/edit/footer'; import { Tags } from '@app/components/smart-editor-texts/edit/tags'; import { useMetadataFilters } from '@app/components/smart-editor-texts/hooks/use-metadata-filters'; @@ -15,7 +14,8 @@ import { useUpdateYtelseHjemmelIdListMutation, } from '@app/redux-api/texts/mutations'; import { GOD_FORMULERING_TYPE, REGELVERK_TYPE, TextChangeType } from '@app/types/common-text-types'; -import { IText } from '@app/types/texts/responses'; +import type { IText } from '@app/types/texts/responses'; +import { styled } from 'styled-components'; import { ModifiedCreatedDateTime } from '../../datetime/datetime'; import { HjemlerSelect } from '../hjemler-select/hjemler-select'; import { useTextQuery } from '../hooks/use-text-query'; @@ -137,13 +137,13 @@ const Container = styled.div` const Header = styled.div` display: flex; flex-direction: column; - row-gap: 8px; - padding: 16px; + row-gap: var(--a-spacing-2); + padding: var(--a-spacing-4); `; const LineContainer = styled.div` display: flex; flex-direction: row; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/smart-editor-texts/edit/footer.tsx b/frontend/src/components/smart-editor-texts/edit/footer.tsx index 83b0edb97..f8362ea84 100644 --- a/frontend/src/components/smart-editor-texts/edit/footer.tsx +++ b/frontend/src/components/smart-editor-texts/edit/footer.tsx @@ -1,19 +1,19 @@ -import { TrashIcon, UploadIcon } from '@navikt/aksel-icons'; -import { Button, ErrorMessage } from '@navikt/ds-react'; -import { useMemo, useState } from 'react'; -import { styled } from 'styled-components'; import { EditorName } from '@app/components/editor-name/editor-name'; import { AllMaltekstseksjonReferences } from '@app/components/malteksteksjon-references/maltekstseksjon-references'; -import { SavedStatus, SavedStatusProps } from '@app/components/saved-status/saved-status'; +import { SavedStatus, type SavedStatusProps } from '@app/components/saved-status/saved-status'; import { isoDateTimeToPretty } from '@app/domain/date'; import { isGodFormuleringType, isRegelverkType, isRichTextType } from '@app/functions/is-rich-plain-text'; import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language'; import { usePublishMutation } from '@app/redux-api/texts/mutations'; import { useGetTextVersionsQuery } from '@app/redux-api/texts/queries'; -import { IEditor, TextChangeType } from '@app/types/common-text-types'; -import { TextType } from '@app/types/texts/common'; +import { type IEditor, TextChangeType } from '@app/types/common-text-types'; +import type { TextType } from '@app/types/texts/common'; import { LANGUAGE_NAMES, Language } from '@app/types/texts/language'; -import { IText } from '@app/types/texts/responses'; +import type { IText } from '@app/types/texts/responses'; +import { TrashIcon, UploadIcon } from '@navikt/aksel-icons'; +import { Button, ErrorMessage } from '@navikt/ds-react'; +import { useMemo, useState } from 'react'; +import { styled } from 'styled-components'; import { DeleteDraftButton } from '../delete-draft-button'; interface Props { @@ -133,8 +133,8 @@ const LastEditor = ({ editors, textType }: LastEditorProps) => { const Container = styled.div` display: flex; flex-direction: column; - row-gap: 8px; - padding: 16px; + row-gap: var(--a-spacing-2); + padding: var(--a-spacing-4); `; const LastEditorContainer = styled.span` @@ -146,7 +146,7 @@ const LastEditorContainer = styled.span` const Row = styled.div` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); width: 100%; justify-content: flex-end; `; diff --git a/frontend/src/components/smart-editor-texts/edit/header-footer.tsx b/frontend/src/components/smart-editor-texts/edit/header-footer.tsx index 17dff6aa8..f14d549ee 100644 --- a/frontend/src/components/smart-editor-texts/edit/header-footer.tsx +++ b/frontend/src/components/smart-editor-texts/edit/header-footer.tsx @@ -1,7 +1,7 @@ +import { PlainTextTypes } from '@app/types/common-text-types'; import { Textarea } from '@navikt/ds-react'; import { useState } from 'react'; import { styled } from 'styled-components'; -import { PlainTextTypes } from '@app/types/common-text-types'; type HeaderFooter = PlainTextTypes.HEADER | PlainTextTypes.FOOTER; @@ -33,7 +33,7 @@ const getLabel = (type: PlainTextTypes.HEADER | PlainTextTypes.FOOTER) => type === PlainTextTypes.HEADER ? 'Topptekst' : 'Bunntekst'; const StyledTextarea = styled(Textarea)` - margin: 16px; + margin: var(--a-spacing-4); `; const Container = styled.div` diff --git a/frontend/src/components/smart-editor-texts/edit/load-text.tsx b/frontend/src/components/smart-editor-texts/edit/load-text.tsx index 75b089cb3..7c713fe11 100644 --- a/frontend/src/components/smart-editor-texts/edit/load-text.tsx +++ b/frontend/src/components/smart-editor-texts/edit/load-text.tsx @@ -1,7 +1,7 @@ +import { StandaloneTextVersions } from '@app/components/smart-editor-texts/edit/standalone-text-versions'; import { FileTextIcon } from '@navikt/aksel-icons'; import { useParams } from 'react-router'; import { styled } from 'styled-components'; -import { StandaloneTextVersions } from '@app/components/smart-editor-texts/edit/standalone-text-versions'; export const LoadText = () => { const { id } = useParams<{ id: string }>(); diff --git a/frontend/src/components/smart-editor-texts/edit/published-plain-text.tsx b/frontend/src/components/smart-editor-texts/edit/published-plain-text.tsx index 90b5b0718..921965902 100644 --- a/frontend/src/components/smart-editor-texts/edit/published-plain-text.tsx +++ b/frontend/src/components/smart-editor-texts/edit/published-plain-text.tsx @@ -1,9 +1,9 @@ -import { BodyLong, Heading } from '@navikt/ds-react'; -import { styled } from 'styled-components'; import { PublishedTextFooter } from '@app/components/maltekstseksjoner/texts/text-published-footer'; import { Tags } from '@app/components/smart-editor-texts/edit/tags'; import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language'; -import { IPublishedPlainText } from '@app/types/texts/responses'; +import type { IPublishedPlainText } from '@app/types/texts/responses'; +import { BodyLong, Heading } from '@navikt/ds-react'; +import { styled } from 'styled-components'; interface Props { text: IPublishedPlainText; @@ -32,23 +32,23 @@ export const PublishedPlainText = ({ text, onDraftCreated, hasDraft }: Props) => }; const Background = styled.div` - background: var(--a-bg-subtle); - padding: 16px; + background-color: var(--a-bg-subtle); + padding: var(--a-spacing-4); display: flex; flex-direction: column; - gap: 16px; + gap: var(--a-spacing-4); `; const PublishedContainer = styled.div` display: flex; flex-direction: column; - gap: 8px; - padding: 16px; + gap: var(--a-spacing-2); + padding: var(--a-spacing-4); `; const StyledBodyLong = styled(BodyLong)` - background: var(--a-bg-default); - padding: 16px; - border-radius: 4px; + background-color: var(--a-bg-default); + padding: var(--a-spacing-4); + border-radius: var(--a-spacing-1); box-shadow: var(--a-shadow-medium); `; diff --git a/frontend/src/components/smart-editor-texts/edit/standalone-text-versions.tsx b/frontend/src/components/smart-editor-texts/edit/standalone-text-versions.tsx index 4dbe58570..f63bd3559 100644 --- a/frontend/src/components/smart-editor-texts/edit/standalone-text-versions.tsx +++ b/frontend/src/components/smart-editor-texts/edit/standalone-text-versions.tsx @@ -1,21 +1,21 @@ -import { Loader } from '@navikt/ds-react'; -import { useMemo } from 'react'; -import { useParams } from 'react-router'; -import { styled } from 'styled-components'; import { PublishedRichText } from '@app/components/maltekstseksjoner/texts/published-rich-text'; import { Changelog } from '@app/components/smart-editor-texts/edit/changelog'; import { DraftRegelverk } from '@app/components/smart-editor-texts/edit/draft-regelverk'; import { DraftGodFormulering, DraftRichText } from '@app/components/smart-editor-texts/edit/draft-rich-text'; import { PublishedPlainText } from '@app/components/smart-editor-texts/edit/published-plain-text'; import { Tags } from '@app/components/smart-editor-texts/edit/tags'; -import { DraftVersionProps } from '@app/components/smart-editor-texts/types'; +import type { DraftVersionProps } from '@app/components/smart-editor-texts/types'; import { UnpublishTextButton } from '@app/components/smart-editor-texts/unpublish-text-button'; import { VersionTabs } from '@app/components/versioned-tabs/versioned-tabs'; import { isGodFormulering, isRegelverk, isRichText } from '@app/functions/is-rich-plain-text'; import { useNavigateToStandaloneTextVersion } from '@app/hooks/use-navigate-to-standalone-text-version'; import { useGetTextByIdQuery, useGetTextVersionsQuery } from '@app/redux-api/texts/queries'; -import { PlainTextTypes, REGELVERK_TYPE, TextTypes } from '@app/types/common-text-types'; -import { IDraft, IPlainText, IPublishedText, IText } from '@app/types/texts/responses'; +import { PlainTextTypes, REGELVERK_TYPE, type TextTypes } from '@app/types/common-text-types'; +import type { IDraft, IPlainText, IPublishedText, IText } from '@app/types/texts/responses'; +import { Loader } from '@navikt/ds-react'; +import { useMemo } from 'react'; +import { useParams } from 'react-router'; +import { styled } from 'styled-components'; import { DraftPlainText } from './draft-plain-text'; interface Props { @@ -88,7 +88,7 @@ const VersionsLoaded = ({ versions, firstText, id, textType }: VersionsLoadedPro const Header = styled.div` display: flex; justify-content: space-between; - padding: 16px; + padding: var(--a-spacing-4); padding-bottom: 0; `; @@ -152,7 +152,7 @@ const StyledVersionTabs: typeof VersionTabs = styled(VersionTabs)` const PublishedContainer = styled.div` display: flex; flex-direction: column; - gap: 8px; - padding: 16px; + gap: var(--a-spacing-2); + padding: var(--a-spacing-4); height: 100%; `; diff --git a/frontend/src/components/smart-editor-texts/edit/tags.tsx b/frontend/src/components/smart-editor-texts/edit/tags.tsx index 0bf335d0d..6b5c2cef5 100644 --- a/frontend/src/components/smart-editor-texts/edit/tags.tsx +++ b/frontend/src/components/smart-editor-texts/edit/tags.tsx @@ -1,16 +1,16 @@ -/* eslint-disable max-lines */ -/* eslint-disable max-depth */ -import { styled } from 'styled-components'; -import { MALTEKST_SECTION_NAMES } from '@app/components/smart-editor/constants'; import { ALL_TEMPLATES_LABEL } from '@app/components/smart-editor-texts/get-template-options'; import { useMetadataFilters } from '@app/components/smart-editor-texts/hooks/use-metadata-filters'; import { GLOBAL, LIST_DELIMITER } from '@app/components/smart-editor-texts/types'; +import { MALTEKST_SECTION_NAMES } from '@app/components/smart-editor/constants'; import { useEnhetNameFromIdOrLoading } from '@app/hooks/use-kodeverk-ids'; import { useUtfallNameOrLoading } from '@app/hooks/use-utfall-name'; import { TEMPLATE_MAP } from '@app/plate/templates/templates'; import { useKabalYtelserLatest } from '@app/simple-api-state/use-kodeverk'; -import { IGetMaltekstseksjonParams } from '@app/types/common-text-types'; -import { IText } from '@app/types/texts/responses'; +import type { IGetMaltekstseksjonParams } from '@app/types/common-text-types'; +import type { IText } from '@app/types/texts/responses'; +/* eslint-disable max-lines */ +/* eslint-disable max-depth */ +import { styled } from 'styled-components'; import { CustomTag, ResolvedTags } from '../../tags/resolved-tag'; export const Tags = ({ ytelseHjemmelIdList, utfallIdList, enhetIdList, templateSectionIdList, textType }: IText) => { @@ -114,7 +114,7 @@ const getTemaplateAndSectionName = (selected: string): string => { return `${ALL_TEMPLATES_LABEL} - ${getMaltekstSectionName(sId) ?? sId}`; } - const templateName = tId === undefined ? 'Ukjent mal' : (TEMPLATE_MAP[tId]?.tittel ?? tId); + const templateName = tId === undefined ? 'Ukjent mal' : TEMPLATE_MAP[tId]?.tittel ?? tId; return sId === undefined ? templateName : `${templateName} - ${getMaltekstSectionName(sId) ?? sId}`; }; @@ -144,7 +144,7 @@ const useYtelseLovkildeAndHjemmelName = (selected: string): string => { } } - return `Alle ytelser - Ukjent lovkilde - Ukjent hjemmel`; + return 'Alle ytelser - Ukjent lovkilde - Ukjent hjemmel'; } for (const ytelse of data) { @@ -175,7 +175,7 @@ export const TagContainer = styled.div` flex-direction: row; flex-wrap: wrap; align-content: start; - gap: 8px; + gap: var(--a-spacing-2); flex-grow: 0; grid-area: tags; max-height: 250px; diff --git a/frontend/src/components/smart-editor-texts/filtered-text-list.tsx b/frontend/src/components/smart-editor-texts/filtered-text-list.tsx index 9df5b13d6..7964612ee 100644 --- a/frontend/src/components/smart-editor-texts/filtered-text-list.tsx +++ b/frontend/src/components/smart-editor-texts/filtered-text-list.tsx @@ -1,8 +1,8 @@ +import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language'; +import type { TextTypes } from '@app/types/common-text-types'; import { Search } from '@navikt/ds-react'; import { useState } from 'react'; import { styled } from 'styled-components'; -import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language'; -import { TextTypes } from '@app/types/common-text-types'; import { Filters } from './filters'; import { TextList } from './text-list/text-list'; @@ -38,11 +38,11 @@ export const FilteredTextList = ({ textType }: Props) => { const Row = styled.div` display: flex; flex-direction: row; - gap: 4px; + gap: var(--a-spacing-1); `; const Container = styled.div` - row-gap: 8px; + row-gap: var(--a-spacing-2); z-index: 22; overflow: visible; display: flex; @@ -52,7 +52,7 @@ const Container = styled.div` const Header = styled.div` display: flex; flex-direction: column; - gap: 8px; + gap: var(--a-spacing-2); position: relative; - background-color: #fff; + background-color: var(--a-bg-default); `; diff --git a/frontend/src/components/smart-editor-texts/filters.tsx b/frontend/src/components/smart-editor-texts/filters.tsx index 89382922b..199336164 100644 --- a/frontend/src/components/smart-editor-texts/filters.tsx +++ b/frontend/src/components/smart-editor-texts/filters.tsx @@ -1,5 +1,3 @@ -import { useSearchParams } from 'react-router-dom'; -import { styled } from 'styled-components'; import { useMetadataFilters } from '@app/components/smart-editor-texts/hooks/use-metadata-filters'; import { useKlageenheterOptions, useUtfallOptions } from '@app/components/smart-editor-texts/hooks/use-options'; import { @@ -8,7 +6,9 @@ import { UtfallSelect, } from '@app/components/smart-editor-texts/query-filter-selects'; import { NONE_OPTION } from '@app/components/smart-editor-texts/types'; -import { IGetMaltekstseksjonParams, TextTypes } from '@app/types/common-text-types'; +import type { IGetMaltekstseksjonParams, TextTypes } from '@app/types/common-text-types'; +import { useSearchParams } from 'react-router-dom'; +import { styled } from 'styled-components'; import { HjemlerSelect } from './hjemler-select/hjemler-select'; import { useTextQuery } from './hooks/use-text-query'; @@ -86,5 +86,5 @@ export const Filters = ({ textType, className }: Props) => { const Container = styled.div` display: flex; flex-direction: row; - gap: 8px; + gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/smart-editor-texts/functions/get-language-names.ts b/frontend/src/components/smart-editor-texts/functions/get-language-names.ts index 83d28a703..69af6245f 100644 --- a/frontend/src/components/smart-editor-texts/functions/get-language-names.ts +++ b/frontend/src/components/smart-editor-texts/functions/get-language-names.ts @@ -1,4 +1,4 @@ -import { LANGUAGE_NAMES, Language } from '@app/types/texts/language'; +import { LANGUAGE_NAMES, type Language } from '@app/types/texts/language'; export const getLanguageNames = (languages: Language[]): string => { const names = languages.map((v) => LANGUAGE_NAMES[v].toLowerCase()); diff --git a/frontend/src/components/smart-editor-texts/functions/get-path-prefix.ts b/frontend/src/components/smart-editor-texts/functions/get-path-prefix.ts index c712a7572..08fe8a407 100644 --- a/frontend/src/components/smart-editor-texts/functions/get-path-prefix.ts +++ b/frontend/src/components/smart-editor-texts/functions/get-path-prefix.ts @@ -4,7 +4,7 @@ import { PlainTextTypes, REGELVERK_TYPE, RichTextTypes, - TextTypes, + type TextTypes, } from '@app/types/common-text-types'; export const getPathPrefix = (textType: TextTypes): string => { diff --git a/frontend/src/components/smart-editor-texts/functions/new-text.ts b/frontend/src/components/smart-editor-texts/functions/new-text.ts index dbd4fd777..8b201d347 100644 --- a/frontend/src/components/smart-editor-texts/functions/new-text.ts +++ b/frontend/src/components/smart-editor-texts/functions/new-text.ts @@ -1,14 +1,14 @@ import { createSimpleParagraph } from '@app/plate/templates/helpers'; import { GOD_FORMULERING_TYPE, - ITextBaseMetadata, - PlainTextTypes, + type ITextBaseMetadata, + type PlainTextTypes, REGELVERK_TYPE, - RichTextTypes, + type RichTextTypes, } from '@app/types/common-text-types'; -import { INewGodFormuleringParams, INewRegelverkParams } from '@app/types/texts/common'; +import type { INewGodFormuleringParams, INewRegelverkParams } from '@app/types/texts/common'; import { Language, UNTRANSLATED } from '@app/types/texts/language'; -import { INewPlainTextParams, INewRichTextParams } from '@app/types/texts/params'; +import type { INewPlainTextParams, INewRichTextParams } from '@app/types/texts/params'; const getMetadata = (): ITextBaseMetadata => ({ templateSectionIdList: [], diff --git a/frontend/src/components/smart-editor-texts/get-template-options.tsx b/frontend/src/components/smart-editor-texts/get-template-options.tsx index be0e63188..95535bebd 100644 --- a/frontend/src/components/smart-editor-texts/get-template-options.tsx +++ b/frontend/src/components/smart-editor-texts/get-template-options.tsx @@ -1,7 +1,7 @@ -import { NestedOption, OptionType } from '@app/components/filter-dropdown/nested-filter-list'; -import { MALTEKST_SECTION_NAMES } from '@app/components/smart-editor/constants'; +import { type NestedOption, OptionType } from '@app/components/filter-dropdown/nested-filter-list'; import { GLOBAL, LIST_DELIMITER, NONE_OPTION, WILDCARD } from '@app/components/smart-editor-texts/types'; -import { SectionType, getTemplateSections } from '@app/hooks/use-template-sections'; +import { MALTEKST_SECTION_NAMES } from '@app/components/smart-editor/constants'; +import { type SectionType, getTemplateSections } from '@app/hooks/use-template-sections'; import { ELEMENT_MALTEKST, ELEMENT_MALTEKSTSEKSJON, @@ -9,7 +9,12 @@ import { } from '@app/plate/plugins/element-types'; import { TemplateSections } from '@app/plate/template-sections'; import { TEMPLATES } from '@app/plate/templates/templates'; -import { GOD_FORMULERING_TYPE, MALTEKSTSEKSJON_TYPE, RichTextTypes, TextTypes } from '@app/types/common-text-types'; +import { + GOD_FORMULERING_TYPE, + MALTEKSTSEKSJON_TYPE, + RichTextTypes, + type TextTypes, +} from '@app/types/common-text-types'; export const ALL_TEMPLATES_LABEL = 'Alle maler'; diff --git a/frontend/src/components/smart-editor-texts/hjemler-select/hjemler-select.tsx b/frontend/src/components/smart-editor-texts/hjemler-select/hjemler-select.tsx index 5d02069a7..1203910d4 100644 --- a/frontend/src/components/smart-editor-texts/hjemler-select/hjemler-select.tsx +++ b/frontend/src/components/smart-editor-texts/hjemler-select/hjemler-select.tsx @@ -1,13 +1,13 @@ -/* eslint-disable max-depth */ -import { useMemo, useRef, useState } from 'react'; -import { styled } from 'styled-components'; -import { NestedFilterList, NestedOption, OptionType } from '@app/components/filter-dropdown/nested-filter-list'; +import { NestedFilterList, type NestedOption, OptionType } from '@app/components/filter-dropdown/nested-filter-list'; import { isIndeterminate } from '@app/components/smart-editor-texts/hjemler-select/is-indeterminate'; import { Popup } from '@app/components/smart-editor-texts/hjemler-select/popup'; import { GLOBAL, LIST_DELIMITER, NONE_OPTION, WILDCARD } from '@app/components/smart-editor-texts/types'; import { ToggleButton } from '@app/components/toggle-button/toggle-button'; import { useOnClickOutside } from '@app/hooks/use-on-click-outside'; import { useKabalYtelserLatest } from '@app/simple-api-state/use-kodeverk'; +/* eslint-disable max-depth */ +import { useMemo, useRef, useState } from 'react'; +import { styled } from 'styled-components'; interface Props { selected: string[]; @@ -106,8 +106,7 @@ export const HjemlerSelect = ({ .map(({ id: ytelseId, navn: ytelsenavn, lovKildeToRegistreringshjemler }) => { const ytelseValue = ytelseIsWildcard ? `${ytelseId}${LIST_DELIMITER}${WILDCARD}` : ytelseId; const indeterminate = - !ytelseIsWildcard && - !selected.includes(ytelseValue) && + !(ytelseIsWildcard || selected.includes(ytelseValue)) && (isGlobalSelected || lovKildeToRegistreringshjemler.some(({ registreringshjemler }) => registreringshjemler.some( diff --git a/frontend/src/components/smart-editor-texts/hjemler-select/popup.tsx b/frontend/src/components/smart-editor-texts/hjemler-select/popup.tsx index 580ccd34d..3fc984a13 100644 --- a/frontend/src/components/smart-editor-texts/hjemler-select/popup.tsx +++ b/frontend/src/components/smart-editor-texts/hjemler-select/popup.tsx @@ -29,11 +29,11 @@ const StyledPopup = styled.div` left: 0; max-height: 400px; max-width: 275px; - scroll-margin-bottom: 16px; + scroll-margin-bottom: var(--a-spacing-4); z-index: 22; - background-color: white; + background-color: var(--a-bg-default); border-radius: var(--a-border-radius-medium); border: 1px solid #c6c2bf; - box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3); + box-shadow: var(--a-shadow-medium); `; diff --git a/frontend/src/components/smart-editor-texts/hooks/use-metadata-filters.ts b/frontend/src/components/smart-editor-texts/hooks/use-metadata-filters.ts index 18243fb95..46d2aa360 100644 --- a/frontend/src/components/smart-editor-texts/hooks/use-metadata-filters.ts +++ b/frontend/src/components/smart-editor-texts/hooks/use-metadata-filters.ts @@ -1,4 +1,4 @@ -import { GOD_FORMULERING_TYPE, PlainTextTypes, REGELVERK_TYPE, TextTypes } from '@app/types/common-text-types'; +import { GOD_FORMULERING_TYPE, PlainTextTypes, REGELVERK_TYPE, type TextTypes } from '@app/types/common-text-types'; export const useMetadataFilters = (textType: TextTypes) => ({ templateSection: textType === GOD_FORMULERING_TYPE, diff --git a/frontend/src/components/smart-editor-texts/hooks/use-options.tsx b/frontend/src/components/smart-editor-texts/hooks/use-options.tsx index 69b56d3b8..cc292821a 100644 --- a/frontend/src/components/smart-editor-texts/hooks/use-options.tsx +++ b/frontend/src/components/smart-editor-texts/hooks/use-options.tsx @@ -1,8 +1,8 @@ +import type { IOption } from '@app/components/filter-dropdown/props'; +import { useKlageenheter, useSakstyperToUtfall } from '@app/simple-api-state/use-kodeverk'; +import { SaksTypeEnum, type UtfallEnum } from '@app/types/kodeverk'; import { Tag } from '@navikt/ds-react'; import { useMemo } from 'react'; -import { IOption } from '@app/components/filter-dropdown/props'; -import { useKlageenheter, useSakstyperToUtfall } from '@app/simple-api-state/use-kodeverk'; -import { SaksTypeEnum, UtfallEnum } from '@app/types/kodeverk'; const EMPTY_ARRAY: [] = []; @@ -42,7 +42,7 @@ export const useUtfallOptions = (): IOption[] => { } } - return utfallList.sort((a, b) => parseInt(a.value, 10) - parseInt(b.value, 10)); + return utfallList.sort((a, b) => Number.parseInt(a.value, 10) - Number.parseInt(b.value, 10)); }, [sakstyperToUtfall]); }; diff --git a/frontend/src/components/smart-editor-texts/hooks/use-text-navigate.ts b/frontend/src/components/smart-editor-texts/hooks/use-text-navigate.ts index 8b1e1a376..c2e6d3484 100644 --- a/frontend/src/components/smart-editor-texts/hooks/use-text-navigate.ts +++ b/frontend/src/components/smart-editor-texts/hooks/use-text-navigate.ts @@ -1,6 +1,6 @@ +import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language'; import { useCallback } from 'react'; import { useLocation, useNavigate } from 'react-router'; -import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language'; import { getPathPrefix } from '../functions/get-path-prefix'; import { useTextQuery } from './use-text-query'; import { useTextType } from './use-text-type'; diff --git a/frontend/src/components/smart-editor-texts/hooks/use-text-query.ts b/frontend/src/components/smart-editor-texts/hooks/use-text-query.ts index 128059893..4b5fbee63 100644 --- a/frontend/src/components/smart-editor-texts/hooks/use-text-query.ts +++ b/frontend/src/components/smart-editor-texts/hooks/use-text-query.ts @@ -1,6 +1,6 @@ +import type { IGetTextsParams } from '@app/types/common-text-types'; import { useMemo } from 'react'; import { useSearchParams } from 'react-router-dom'; -import { IGetTextsParams } from '@app/types/common-text-types'; import { useTextType } from './use-text-type'; export const useTextQuery = (): IGetTextsParams => { diff --git a/frontend/src/components/smart-editor-texts/hooks/use-text-type.ts b/frontend/src/components/smart-editor-texts/hooks/use-text-type.ts index a1790cbc7..87be3694d 100644 --- a/frontend/src/components/smart-editor-texts/hooks/use-text-type.ts +++ b/frontend/src/components/smart-editor-texts/hooks/use-text-type.ts @@ -1,13 +1,13 @@ -import { useMemo } from 'react'; -import { useMatch } from 'react-router'; import { GOD_FORMULERING_TYPE, MALTEKSTSEKSJON_TYPE, PlainTextTypes, REGELVERK_TYPE, RichTextTypes, - TextTypes, + type TextTypes, } from '@app/types/common-text-types'; +import { useMemo } from 'react'; +import { useMatch } from 'react-router'; export const useTextType = (): TextTypes => { const maltekstseksjonerMatch = useMatch({ path: '/maltekstseksjoner', end: false }); diff --git a/frontend/src/components/smart-editor-texts/query-filter-selects.tsx b/frontend/src/components/smart-editor-texts/query-filter-selects.tsx index 51c6f5222..b4a58ab0e 100644 --- a/frontend/src/components/smart-editor-texts/query-filter-selects.tsx +++ b/frontend/src/components/smart-editor-texts/query-filter-selects.tsx @@ -1,13 +1,13 @@ -import { useCallback, useMemo, useRef, useState } from 'react'; -import { styled } from 'styled-components'; -import { NestedFilterList, NestedOption } from '@app/components/filter-dropdown/nested-filter-list'; -import { IOption } from '@app/components/filter-dropdown/props'; -import { NONE, NONE_OPTION, NONE_TYPE, SET_DELIMITER } from '@app/components/smart-editor-texts/types'; +import { NestedFilterList, type NestedOption } from '@app/components/filter-dropdown/nested-filter-list'; +import type { IOption } from '@app/components/filter-dropdown/props'; +import { NONE, NONE_OPTION, type NONE_TYPE, SET_DELIMITER } from '@app/components/smart-editor-texts/types'; import { ToggleButton } from '@app/components/toggle-button/toggle-button'; import { isUtfall } from '@app/functions/is-utfall'; import { useOnClickOutside } from '@app/hooks/use-on-click-outside'; -import { TextTypes } from '@app/types/common-text-types'; -import { UtfallEnum } from '@app/types/kodeverk'; +import type { TextTypes } from '@app/types/common-text-types'; +import type { UtfallEnum } from '@app/types/kodeverk'; +import { useCallback, useMemo, useRef, useState } from 'react'; +import { styled } from 'styled-components'; import { FilterDropdown } from '../filter-dropdown/filter-dropdown'; import { getTemplateOptions } from './get-template-options'; diff --git a/frontend/src/components/smart-editor-texts/smart-editor-texts.tsx b/frontend/src/components/smart-editor-texts/smart-editor-texts.tsx index f5f64d7ba..676356981 100644 --- a/frontend/src/components/smart-editor-texts/smart-editor-texts.tsx +++ b/frontend/src/components/smart-editor-texts/smart-editor-texts.tsx @@ -1,8 +1,3 @@ -import { PlusIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; -import { useCallback } from 'react'; -import { useSearchParams } from 'react-router-dom'; -import { styled } from 'styled-components'; import { SetStandaloneTextLanguage } from '@app/components/set-redaktoer-language/set-standalone-text-language'; import { useTextQuery } from '@app/components/smart-editor-texts/hooks/use-text-query'; import { ShowDepublished } from '@app/components/smart-editor-texts/show-depublished'; @@ -14,8 +9,13 @@ import { } from '@app/functions/is-rich-plain-text'; import { useRedaktoerLanguage } from '@app/hooks/use-redaktoer-language'; import { useAddTextMutation } from '@app/redux-api/texts/mutations'; -import { TextTypes } from '@app/types/common-text-types'; -import { Language } from '@app/types/texts/language'; +import type { TextTypes } from '@app/types/common-text-types'; +import type { Language } from '@app/types/texts/language'; +import { PlusIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; +import { useCallback } from 'react'; +import { useSearchParams } from 'react-router-dom'; +import { styled } from 'styled-components'; import { LoadText } from './edit/load-text'; import { FilteredTextList } from './filtered-text-list'; import { getNewGodFormulering, getNewPlainText, getNewRegelverk, getNewRichText } from './functions/new-text'; @@ -74,7 +74,7 @@ const getNewText = (textType: TextTypes, lang: Language) => { return getNewGodFormulering(lang); } - throw new Error(`Unknown text type`); + throw new Error('Unknown text type'); }; const Container = styled.article` @@ -88,16 +88,16 @@ const Header = styled.header` display: flex; flex-direction: row; justify-content: flex-start; - column-gap: 16px; - padding-bottom: 16px; + column-gap: var(--a-spacing-4); + padding-bottom: var(--a-spacing-4); `; const Content = styled.div` display: flex; - column-gap: 16px; - padding-bottom: 16px; - padding-top: 8px; - padding-right: 8px; + column-gap: var(--a-spacing-4); + padding-bottom: var(--a-spacing-4); + padding-top: var(--a-spacing-2); + padding-right: var(--a-spacing-2); overflow-y: hidden; flex-grow: 1; `; diff --git a/frontend/src/components/smart-editor-texts/sortable-header.tsx b/frontend/src/components/smart-editor-texts/sortable-header.tsx index be8dc1a61..3f88c566f 100644 --- a/frontend/src/components/smart-editor-texts/sortable-header.tsx +++ b/frontend/src/components/smart-editor-texts/sortable-header.tsx @@ -1,8 +1,8 @@ +import { SortOrder } from '@app/types/sort'; import { ArrowDownIcon, ArrowUpIcon, ArrowsUpDownIcon } from '@navikt/aksel-icons'; import { Button, Tooltip } from '@navikt/ds-react'; import { useSearchParams } from 'react-router-dom'; import { styled } from 'styled-components'; -import { SortOrder } from '@app/types/sort'; type Icon = typeof ArrowUpIcon | typeof ArrowDownIcon | typeof ArrowsUpDownIcon; diff --git a/frontend/src/components/smart-editor-texts/text-list/styled-components.ts b/frontend/src/components/smart-editor-texts/text-list/styled-components.ts index bb540131e..1c08af9f8 100644 --- a/frontend/src/components/smart-editor-texts/text-list/styled-components.ts +++ b/frontend/src/components/smart-editor-texts/text-list/styled-components.ts @@ -8,7 +8,7 @@ export const LoaderOverlay = styled.div` justify-content: center; align-items: center; height: 100%; - background-color: #fafafa; + background-color: var(--a-bg-default); `; export const Container = styled.div` @@ -23,21 +23,21 @@ export const Container = styled.div` export const StyledHeaders = styled.div` display: grid; grid-template-columns: 1fr 85px 160px 48px; - gap: 8px; - padding-left: 8px; - padding-right: 8px; + gap: var(--a-spacing-2); + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); position: sticky; top: 0; - background-color: #fff; + background-color: var(--a-bg-default); box-shadow: 0px 5px 5px -3px rgb(0, 0, 0, 20%); - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; + border-bottom-left-radius: var(--a-spacing-1); + border-bottom-right-radius: var(--a-spacing-1); `; export const StyledList = styled.ul` display: flex; flex-direction: column; - row-gap: 4px; + row-gap: var(--a-spacing-1); width: 100%; list-style: none; padding: 0; @@ -59,13 +59,13 @@ export const ListItem = styled.li<{ $active: boolean }>` export const StyledLink = styled(Link)` display: grid; grid-template-columns: 1fr 85px 160px 48px; - gap: 8px; + gap: var(--a-spacing-2); align-content: center; align-items: center; width: 100%; color: inherit; text-decoration: none; - padding: 8px; + padding: var(--a-spacing-2); `; export const StyledTitle = styled.span` diff --git a/frontend/src/components/smart-editor-texts/text-list/text-list.tsx b/frontend/src/components/smart-editor-texts/text-list/text-list.tsx index 5b8c58d52..421bf115f 100644 --- a/frontend/src/components/smart-editor-texts/text-list/text-list.tsx +++ b/frontend/src/components/smart-editor-texts/text-list/text-list.tsx @@ -1,10 +1,4 @@ -import { PercentIcon } from '@navikt/aksel-icons'; -import { Loader } from '@navikt/ds-react'; -import { useEffect, useMemo } from 'react'; -import { useParams, useSearchParams } from 'react-router-dom'; import { StatusTag } from '@app/components/maltekstseksjoner/status-tag'; -import { fuzzySearch } from '@app/components/smart-editor/gode-formuleringer/fuzzy-search'; -import { splitQuery } from '@app/components/smart-editor/gode-formuleringer/split-query'; import { Container, ListItem, @@ -16,14 +10,20 @@ import { StyledTitleIcon, StyledTitleText, } from '@app/components/smart-editor-texts/text-list/styled-components'; +import { fuzzySearch } from '@app/components/smart-editor/gode-formuleringer/fuzzy-search'; +import { splitQuery } from '@app/components/smart-editor/gode-formuleringer/split-query'; import { isGodFormulering, isPlainText, isRegelverk, isRichText } from '@app/functions/is-rich-plain-text'; import { sortWithOrdinals } from '@app/functions/sort-with-ordinals/sort-with-ordinals'; import { usePrevious } from '@app/hooks/use-previous'; import { useGetTextsQuery } from '@app/redux-api/texts/queries'; -import { REGELVERK_TYPE, TextTypes } from '@app/types/common-text-types'; +import { REGELVERK_TYPE, type TextTypes } from '@app/types/common-text-types'; import { SortOrder } from '@app/types/sort'; -import { Language, UNTRANSLATED } from '@app/types/texts/language'; -import { IText } from '@app/types/texts/responses'; +import { type Language, UNTRANSLATED } from '@app/types/texts/language'; +import type { IText } from '@app/types/texts/responses'; +import { PercentIcon } from '@navikt/aksel-icons'; +import { Loader } from '@navikt/ds-react'; +import { useEffect, useMemo } from 'react'; +import { useParams, useSearchParams } from 'react-router-dom'; import { getTextAsString } from '../../../plate/functions/get-text-string'; import { DateTime } from '../../datetime/datetime'; import { getPathPrefix } from '../functions/get-path-prefix'; @@ -94,7 +94,7 @@ export const TextList = ({ textType, filter, language }: TextListProps) => { searchParams.set(QueryKey.ORDER, SortOrder.DESC); setSearchParams(searchParams); } - }, [filter, prevFilter?.length, searchParams, setSearchParams, sort]); + }, [filter, prevFilter?.length, searchParams, setSearchParams]); const filteredTexts = useMemo(() => { if (filter.length === 0) { @@ -126,7 +126,6 @@ export const TextList = ({ textType, filter, language }: TextListProps) => { return isAsc ? a.score - b.score : b.score - a.score; case SortKey.MODIFIED: return isAsc ? a.modified.localeCompare(b.modified) : b.modified.localeCompare(a.modified); - case SortKey.TITLE: default: return isAsc ? sortWithOrdinals(a.title, b.title) : sortWithOrdinals(b.title, a.title); } diff --git a/frontend/src/components/smart-editor-texts/types.ts b/frontend/src/components/smart-editor-texts/types.ts index 36e085980..818c05243 100644 --- a/frontend/src/components/smart-editor-texts/types.ts +++ b/frontend/src/components/smart-editor-texts/types.ts @@ -1,5 +1,5 @@ -import { IOption } from '@app/components/filter-dropdown/props'; -import { IDraft } from '@app/types/texts/responses'; +import type { IOption } from '@app/components/filter-dropdown/props'; +import type { IDraft } from '@app/types/texts/responses'; /** `NONE` means it will match texts with no filters set. The user intent here is for these texts to be general. As in not limited to specific options. */ export const NONE = 'NONE'; diff --git a/frontend/src/components/smart-editor-texts/unpublish-text-button.tsx b/frontend/src/components/smart-editor-texts/unpublish-text-button.tsx index d0f00e3e1..1fe554e1b 100644 --- a/frontend/src/components/smart-editor-texts/unpublish-text-button.tsx +++ b/frontend/src/components/smart-editor-texts/unpublish-text-button.tsx @@ -1,7 +1,3 @@ -import { TrashIcon, XMarkIcon } from '@navikt/aksel-icons'; -import { Alert, Button, HelpText } from '@navikt/ds-react'; -import { useMemo, useState } from 'react'; -import { styled } from 'styled-components'; import { MaltekstseksjonReferences, MaltekstseksjonType, @@ -9,8 +5,12 @@ import { import { useNavigateToStandaloneTextVersion } from '@app/hooks/use-navigate-to-standalone-text-version'; import { useUnpublishTextMutation } from '@app/redux-api/texts/mutations'; import { useGetTextVersionsQuery } from '@app/redux-api/texts/queries'; -import { REGELVERK_TYPE, TextTypes } from '@app/types/common-text-types'; -import { IText } from '@app/types/texts/responses'; +import { REGELVERK_TYPE, type TextTypes } from '@app/types/common-text-types'; +import type { IText } from '@app/types/texts/responses'; +import { TrashIcon, XMarkIcon } from '@navikt/aksel-icons'; +import { Alert, Button, HelpText } from '@navikt/ds-react'; +import { useMemo, useState } from 'react'; +import { styled } from 'styled-components'; import { useTextQuery } from './hooks/use-text-query'; interface Props { @@ -147,7 +147,7 @@ const getSuffix = (draftList: string[], publishedList: string[]) => { const Container = styled.div` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; const StyledReferences = styled(MaltekstseksjonReferences)` diff --git a/frontend/src/components/smart-editor-texts/utfall-set-filter/edit-utfall-set.tsx b/frontend/src/components/smart-editor-texts/utfall-set-filter/edit-utfall-set.tsx index 9e746ed8d..de8e23df3 100644 --- a/frontend/src/components/smart-editor-texts/utfall-set-filter/edit-utfall-set.tsx +++ b/frontend/src/components/smart-editor-texts/utfall-set-filter/edit-utfall-set.tsx @@ -1,9 +1,9 @@ +import { useSakstyperToUtfall } from '@app/simple-api-state/use-kodeverk'; +import { type IKodeverkSimpleValue, type ISakstyperToUtfall, UtfallEnum } from '@app/types/kodeverk'; import { PlusIcon, XMarkIcon } from '@navikt/aksel-icons'; import { Button, Checkbox, CheckboxGroup, Tag } from '@navikt/ds-react'; import { useCallback, useMemo, useState } from 'react'; import { styled } from 'styled-components'; -import { useSakstyperToUtfall } from '@app/simple-api-state/use-kodeverk'; -import { IKodeverkSimpleValue, ISakstyperToUtfall, UtfallEnum } from '@app/types/kodeverk'; interface EditUtfallSetProps { utfallSet: UtfallEnum[]; @@ -123,18 +123,18 @@ const getAvailableUtfall = (selected: UtfallEnum[], sakstyperToUtfall: ISakstype const Container = styled.section` display: flex; flex-direction: column; - row-gap: 8px; + row-gap: var(--a-spacing-2); `; const Legend = styled.span` display: flex; flex-direction: row; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; const ButtonContainer = styled.div` display: flex; flex-direction: row; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/smart-editor-texts/utfall-set-filter/read-utfall-set.tsx b/frontend/src/components/smart-editor-texts/utfall-set-filter/read-utfall-set.tsx index b78385013..11c69d14d 100644 --- a/frontend/src/components/smart-editor-texts/utfall-set-filter/read-utfall-set.tsx +++ b/frontend/src/components/smart-editor-texts/utfall-set-filter/read-utfall-set.tsx @@ -1,9 +1,9 @@ +import { CustomTag } from '@app/components/tags/resolved-tag'; +import { useUtfallNameOrLoading } from '@app/hooks/use-utfall-name'; +import type { UtfallEnum } from '@app/types/kodeverk'; import { PencilIcon, TrashIcon } from '@navikt/aksel-icons'; import { Button } from '@navikt/ds-react'; import { styled } from 'styled-components'; -import { CustomTag } from '@app/components/tags/resolved-tag'; -import { useUtfallNameOrLoading } from '@app/hooks/use-utfall-name'; -import { UtfallEnum } from '@app/types/kodeverk'; interface ReadUtfallSetProps { utfallSet: UtfallEnum[]; @@ -58,5 +58,5 @@ const UtfallTags = styled.div` flex-direction: row; flex-wrap: wrap; align-items: center; - gap: 4px; + gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/smart-editor-texts/utfall-set-filter/utfall-set-filter.tsx b/frontend/src/components/smart-editor-texts/utfall-set-filter/utfall-set-filter.tsx index 4752811ff..7415eb8ab 100644 --- a/frontend/src/components/smart-editor-texts/utfall-set-filter/utfall-set-filter.tsx +++ b/frontend/src/components/smart-editor-texts/utfall-set-filter/utfall-set-filter.tsx @@ -1,14 +1,14 @@ -import { PencilIcon, PlusIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; -import { useCallback, useMemo, useRef, useState } from 'react'; -import { styled } from 'styled-components'; import { SET_DELIMITER } from '@app/components/smart-editor-texts/types'; import { EditUtfallSet } from '@app/components/smart-editor-texts/utfall-set-filter/edit-utfall-set'; import { ReadUtfallSet } from '@app/components/smart-editor-texts/utfall-set-filter/read-utfall-set'; import { ToggleButton } from '@app/components/toggle-button/toggle-button'; import { isUtfall } from '@app/functions/is-utfall'; import { useOnClickOutside } from '@app/hooks/use-on-click-outside'; -import { UtfallEnum } from '@app/types/kodeverk'; +import type { UtfallEnum } from '@app/types/kodeverk'; +import { PencilIcon, PlusIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; +import { useCallback, useMemo, useRef, useState } from 'react'; +import { styled } from 'styled-components'; interface Props { selected: string[]; @@ -126,23 +126,23 @@ const Dropdown = styled.div` position: absolute; top: 100%; left: 0; - background-color: white; + background-color: var(--a-bg-default); border: 1px solid black; z-index: 100; width: 400px; overflow: auto; - padding: 8px; + padding: var(--a-spacing-2); border-radius: var(--a-border-radius-medium); box-shadow: var(--a-shadow-medium); display: flex; flex-direction: column; - row-gap: 8px; + row-gap: var(--a-spacing-2); `; const StyledList = styled.ul` display: flex; flex-direction: column; - row-gap: 4px; + row-gap: var(--a-spacing-1); list-style: none; padding: 0; margin: 0; @@ -150,7 +150,7 @@ const StyledList = styled.ul` const BaseListItem = styled.li` border-radius: var(--a-border-radius-medium); - padding: 8px; + padding: var(--a-spacing-2); `; const StyledListItem = styled(BaseListItem)` diff --git a/frontend/src/components/smart-editor/bookmarks/bookmarks.tsx b/frontend/src/components/smart-editor/bookmarks/bookmarks.tsx index a54a97894..84e974579 100644 --- a/frontend/src/components/smart-editor/bookmarks/bookmarks.tsx +++ b/frontend/src/components/smart-editor/bookmarks/bookmarks.tsx @@ -1,12 +1,12 @@ +import { BOOKMARK_PREFIX } from '@app/components/smart-editor/constants'; +import { SmartEditorContext } from '@app/components/smart-editor/context'; +import { pushEvent } from '@app/observability'; +import { type RichText, type RichTextEditor, useMyPlateEditorState } from '@app/plate/types'; import { BookmarkFillIcon, TrashIcon } from '@navikt/aksel-icons'; import { Button } from '@navikt/ds-react'; -import { TNode, getNodeString, isText, setNodes, toDOMNode } from '@udecode/plate-common'; +import { type TNode, getNodeString, isText, setNodes, toDOMNode } from '@udecode/plate-common'; import { useContext } from 'react'; import { styled } from 'styled-components'; -import { BOOKMARK_PREFIX } from '@app/components/smart-editor/constants'; -import { SmartEditorContext } from '@app/components/smart-editor/context'; -import { pushEvent } from '@app/observability'; -import { RichText, RichTextEditor, useMyPlateEditorState } from '@app/plate/types'; interface Props { editorId: string; @@ -103,8 +103,8 @@ const BookmarkList = styled.ul` width: 100%; margin: 0; padding: 0; - padding-left: 16px; - padding-right: 16px; + padding-left: var(--a-spacing-4); + padding-right: var(--a-spacing-4); position: relative; max-width: 350px; `; diff --git a/frontend/src/components/smart-editor/bookmarks/positioned.tsx b/frontend/src/components/smart-editor/bookmarks/positioned.tsx index b46172c8d..b59ebfab6 100644 --- a/frontend/src/components/smart-editor/bookmarks/positioned.tsx +++ b/frontend/src/components/smart-editor/bookmarks/positioned.tsx @@ -1,20 +1,20 @@ -import { BookmarkFillIcon, TrashFillIcon } from '@navikt/aksel-icons'; -import { Tooltip } from '@navikt/ds-react'; -import { setNodes } from '@udecode/plate-common'; -import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; -import { styled } from 'styled-components'; import { getBookmarks } from '@app/components/smart-editor/bookmarks/bookmarks'; import { SmartEditorContext } from '@app/components/smart-editor/context'; import { - BookmarkData, + type BookmarkData, ItemType, - PositionedItem, + type PositionedItem, getPositionedItems, } from '@app/components/smart-editor/functions/get-positioned-items'; import { EDITOR_SCALE_CSS_VAR } from '@app/components/smart-editor/hooks/use-scale'; import { pushEvent } from '@app/observability'; import { BASE_FONT_SIZE } from '@app/plate/components/get-scaled-em'; import { useMyPlateEditorState } from '@app/plate/types'; +import { BookmarkFillIcon, TrashFillIcon } from '@navikt/aksel-icons'; +import { Tooltip } from '@navikt/ds-react'; +import { setNodes } from '@udecode/plate-common'; +import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; +import { styled } from 'styled-components'; const ITEM_WIDTH = 1.5; const ITEM_GAP = 0.2; diff --git a/frontend/src/components/smart-editor/comments/comment-list.tsx b/frontend/src/components/smart-editor/comments/comment-list.tsx index 03a840e14..f9e99e631 100644 --- a/frontend/src/components/smart-editor/comments/comment-list.tsx +++ b/frontend/src/components/smart-editor/comments/comment-list.tsx @@ -1,5 +1,5 @@ +import type { ISmartEditorComment } from '@app/types/smart-editor/comments'; import { styled } from 'styled-components'; -import { ISmartEditorComment } from '@app/types/smart-editor/comments'; import { Comment } from './comment'; interface CommentListProps { @@ -18,9 +18,9 @@ export const CommentList = ({ comments, isExpanded }: CommentListProps) => ( const List = styled.ul` display: flex; flex-direction: column; - gap: 16px; + gap: var(--a-spacing-4); padding: 0; margin: 0; list-style: none; - font-size: 16px; + font-size: var(--a-spacing-4); `; diff --git a/frontend/src/components/smart-editor/comments/comment-section.tsx b/frontend/src/components/smart-editor/comments/comment-section.tsx index 86f1a2bf2..5efe02735 100644 --- a/frontend/src/components/smart-editor/comments/comment-section.tsx +++ b/frontend/src/components/smart-editor/comments/comment-section.tsx @@ -1,7 +1,7 @@ -import { useContext } from 'react'; -import { styled } from 'styled-components'; import { useThreads } from '@app/components/smart-editor/comments/use-threads'; import { SmartEditorContext } from '@app/components/smart-editor/context'; +import { useContext } from 'react'; +import { styled } from 'styled-components'; import { ThreadList } from './thread-list'; export const CommentSection = () => { @@ -25,5 +25,5 @@ export const CommentSection = () => { const StyledCommentSection = styled.div` width: fit-content; - padding-right: 16px; + padding-right: var(--a-spacing-4); `; diff --git a/frontend/src/components/smart-editor/comments/comment.tsx b/frontend/src/components/smart-editor/comments/comment.tsx index ec26a8e6e..b94e451cf 100644 --- a/frontend/src/components/smart-editor/comments/comment.tsx +++ b/frontend/src/components/smart-editor/comments/comment.tsx @@ -1,12 +1,12 @@ -import { MenuElipsisVerticalIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; -import { memo, useContext, useRef, useState } from 'react'; -import { styled } from 'styled-components'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { isoDateTimeToPretty } from '@app/domain/date'; import { useIsSaksbehandler } from '@app/hooks/use-is-saksbehandler'; import { useOnClickOutside } from '@app/hooks/use-on-click-outside'; -import { ISmartEditorComment } from '@app/types/smart-editor/comments'; +import type { ISmartEditorComment } from '@app/types/smart-editor/comments'; +import { MenuElipsisVerticalIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; +import { memo, useContext, useRef, useState } from 'react'; +import { styled } from 'styled-components'; import { DeleteButton } from './delete-button'; import { EditButton, EditComment } from './edit-comment'; @@ -94,18 +94,18 @@ const StyledButtons = styled.div` right: 0; display: flex; flex-direction: column; - row-gap: 4px; + row-gap: var(--a-spacing-1); box-shadow: var(--a-shadow-medium); - background-color: white; - padding: 4px; + background-color: var(--a-bg-default); + padding: var(--a-spacing-1); border-radius: var(--a-border-radius-medium); white-space: nowrap; z-index: 1; `; const StyledListItem = styled.li` - padding-left: 4px; - border-left: 4px solid lightgrey; + padding-left: var(--a-spacing-1); + border-left: var(--a-spacing-1) solid lightgrey; &:first-child { padding-left: 0; @@ -123,7 +123,7 @@ const StyledComment = styled.article` const StyledName = styled.div` display: block; width: 100%; - font-size: 16px; + font-size: var(--a-spacing-4); font-weight: bold; flex-grow: 1; overflow: hidden; @@ -138,9 +138,9 @@ const StyledDate = styled.time` `; const StyledText = styled.p` - font-size: 16px; + font-size: var(--a-spacing-4); margin: 0; - margin-top: 4px; + margin-top: var(--a-spacing-1); white-space: break-spaces; overflow-wrap: break-word; `; diff --git a/frontend/src/components/smart-editor/comments/connect-thread.ts b/frontend/src/components/smart-editor/comments/connect-thread.ts index c529d7468..aaaf2e981 100644 --- a/frontend/src/components/smart-editor/comments/connect-thread.ts +++ b/frontend/src/components/smart-editor/comments/connect-thread.ts @@ -1,6 +1,6 @@ +import type { RichTextEditor, RootElement } from '@app/plate/types'; import { isText, setNodes, unsetNodes } from '@udecode/plate-common'; -import { Selection } from 'slate'; -import { RichTextEditor, RootElement } from '@app/plate/types'; +import type { Selection } from 'slate'; import { COMMENT_PREFIX } from '../../smart-editor/constants'; export const connectCommentThread = (editor: RichTextEditor, selection: Selection, threadId: string) => { diff --git a/frontend/src/components/smart-editor/comments/delete-button.tsx b/frontend/src/components/smart-editor/comments/delete-button.tsx index 67de00024..cceae5a24 100644 --- a/frontend/src/components/smart-editor/comments/delete-button.tsx +++ b/frontend/src/components/smart-editor/comments/delete-button.tsx @@ -1,13 +1,13 @@ -import { TrashIcon, XMarkIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; -import { useContext, useState } from 'react'; -import { styled } from 'styled-components'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { disconnectCommentThread } from '@app/components/smart-editor/comments/connect-thread'; import { SmartEditorContext } from '@app/components/smart-editor/context'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useMyPlateEditorRef } from '@app/plate/types'; import { useDeleteCommentOrThreadMutation } from '@app/redux-api/smart-editor-comments'; +import { TrashIcon, XMarkIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; +import { useContext, useState } from 'react'; +import { styled } from 'styled-components'; import { useIsCommentAuthor } from './use-is-comment-author'; interface DeleteButtonProps { diff --git a/frontend/src/components/smart-editor/comments/edit-comment.tsx b/frontend/src/components/smart-editor/comments/edit-comment.tsx index ef3b0c2b1..d9f2eea75 100644 --- a/frontend/src/components/smart-editor/comments/edit-comment.tsx +++ b/frontend/src/components/smart-editor/comments/edit-comment.tsx @@ -1,10 +1,10 @@ +import { SmartEditorContext } from '@app/components/smart-editor/context'; +import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; +import { useUpdateCommentOrReplyMutation } from '@app/redux-api/smart-editor-comments'; import { PencilIcon } from '@navikt/aksel-icons'; import { Button } from '@navikt/ds-react'; import { useContext } from 'react'; import { styled } from 'styled-components'; -import { SmartEditorContext } from '@app/components/smart-editor/context'; -import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; -import { useUpdateCommentOrReplyMutation } from '@app/redux-api/smart-editor-comments'; import { useIsCommentAuthor } from './use-is-comment-author'; import { WriteComment } from './write-comment/write-comment'; @@ -19,7 +19,7 @@ interface EditButtonProps { export const EditButton = ({ authorIdent, isEditing, setIsEditing, isFocused, close }: EditButtonProps) => { const isCommentAuthor = useIsCommentAuthor(authorIdent); - if (!isFocused || !isCommentAuthor) { + if (!(isFocused && isCommentAuthor)) { return null; } diff --git a/frontend/src/components/smart-editor/comments/expandable-thread.tsx b/frontend/src/components/smart-editor/comments/expandable-thread.tsx index c493a5710..4698263c8 100644 --- a/frontend/src/components/smart-editor/comments/expandable-thread.tsx +++ b/frontend/src/components/smart-editor/comments/expandable-thread.tsx @@ -1,10 +1,10 @@ -import { findNode, toDOMNode } from '@udecode/plate-common'; -import { useCallback, useContext, useEffect, useRef } from 'react'; import { Thread } from '@app/components/smart-editor/comments/thread'; import { SmartEditorContext } from '@app/components/smart-editor/context'; import { useOnClickOutside } from '@app/hooks/use-on-click-outside'; import { useMyPlateEditorRef } from '@app/plate/types'; -import { ISmartEditorComment } from '@app/types/smart-editor/comments'; +import type { ISmartEditorComment } from '@app/types/smart-editor/comments'; +import { findNode, toDOMNode } from '@udecode/plate-common'; +import { useCallback, useContext, useEffect, useRef } from 'react'; import { COMMENT_PREFIX } from '../constants'; interface Props { diff --git a/frontend/src/components/smart-editor/comments/new-comment-in-thread.tsx b/frontend/src/components/smart-editor/comments/new-comment-in-thread.tsx index 1cc8be765..0081bec43 100644 --- a/frontend/src/components/smart-editor/comments/new-comment-in-thread.tsx +++ b/frontend/src/components/smart-editor/comments/new-comment-in-thread.tsx @@ -1,11 +1,11 @@ -import { Loader } from '@navikt/ds-react'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { useContext } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { SmartEditorContext } from '@app/components/smart-editor/context'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { useGetMySignatureQuery } from '@app/redux-api/bruker'; import { usePostReplyMutation } from '@app/redux-api/smart-editor-comments'; +import { Loader } from '@navikt/ds-react'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useContext } from 'react'; import { StyledNewReply } from './styled-components'; import { WriteComment } from './write-comment/write-comment'; diff --git a/frontend/src/components/smart-editor/comments/new-comment.tsx b/frontend/src/components/smart-editor/comments/new-comment.tsx index 2bffaac92..e347864a1 100644 --- a/frontend/src/components/smart-editor/comments/new-comment.tsx +++ b/frontend/src/components/smart-editor/comments/new-comment.tsx @@ -1,7 +1,3 @@ -import { Loader } from '@navikt/ds-react'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { focusEditor, isCollapsed } from '@udecode/plate-common'; -import { useCallback, useContext, useEffect, useRef } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { connectCommentThread } from '@app/components/smart-editor/comments/connect-thread'; import { SmartEditorContext } from '@app/components/smart-editor/context'; @@ -10,6 +6,10 @@ import { getRangePosition } from '@app/plate/functions/get-range-position'; import { useMyPlateEditorState } from '@app/plate/types'; import { useGetMySignatureQuery } from '@app/redux-api/bruker'; import { usePostCommentMutation } from '@app/redux-api/smart-editor-comments'; +import { Loader } from '@navikt/ds-react'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { focusEditor, isCollapsed } from '@udecode/plate-common'; +import { useCallback, useContext, useEffect, useRef } from 'react'; import { StyledNewThread } from './styled-components'; import { WriteComment } from './write-comment/write-comment'; diff --git a/frontend/src/components/smart-editor/comments/number-of-comments.tsx b/frontend/src/components/smart-editor/comments/number-of-comments.tsx index 5fbb58fb1..82bbe4280 100644 --- a/frontend/src/components/smart-editor/comments/number-of-comments.tsx +++ b/frontend/src/components/smart-editor/comments/number-of-comments.tsx @@ -1,7 +1,7 @@ -import { ChatElipsisIcon } from '@navikt/aksel-icons'; -import { styled } from 'styled-components'; import { OrphansModal } from '@app/components/smart-editor/comments/orphans-modal'; import { useAnnotationsCounts } from '@app/components/smart-editor/comments/use-annotations-counts'; +import { ChatElipsisIcon } from '@navikt/aksel-icons'; +import { styled } from 'styled-components'; export const NumberOfComments = () => { const { attached, orphans, bookmarks: bookmarksCount } = useAnnotationsCounts(); @@ -39,30 +39,30 @@ const Wrapper = ({ children }: WrapperProps) => ( const WrapperContainer = styled.div` position: sticky; - top: 16px; + top: var(--a-spacing-4); z-index: 10; grid-area: counters; display: flex; width: 100%; min-width: 382px; height: 52px; - padding-left: 16px; - padding-right: 16px; - padding-bottom: 16px; + padding-left: var(--a-spacing-4); + padding-right: var(--a-spacing-4); + padding-bottom: var(--a-spacing-4); flex-shrink: 0; `; const StyledAlert = styled.div` display: flex; flex-direction: row; - column-gap: 8px; + column-gap: var(--a-spacing-2); align-items: center; - padding-left: 8px; - padding-right: 8px; + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); width: 100%; min-width: 350px; height: 100%; - background-color: white; + background-color: var(--a-bg-default); box-shadow: var(--a-shadow-medium); `; diff --git a/frontend/src/components/smart-editor/comments/orphans-modal.tsx b/frontend/src/components/smart-editor/comments/orphans-modal.tsx index bdbc6f7c1..fda313c00 100644 --- a/frontend/src/components/smart-editor/comments/orphans-modal.tsx +++ b/frontend/src/components/smart-editor/comments/orphans-modal.tsx @@ -1,9 +1,9 @@ +import { THREAD_WIDTH, Thread } from '@app/components/smart-editor/comments/thread'; +import { useThreads } from '@app/components/smart-editor/comments/use-threads'; import { LinkBrokenIcon } from '@navikt/aksel-icons'; import { Alert, Button, Heading, Modal, Tooltip } from '@navikt/ds-react'; import { useRef } from 'react'; import { styled } from 'styled-components'; -import { THREAD_WIDTH, Thread } from '@app/components/smart-editor/comments/thread'; -import { useThreads } from '@app/components/smart-editor/comments/use-threads'; const ORPHAN_HELP_TEXT = 'Teksten som kommentarene var knyttet til finnes ikke lenger i dokumentet.'; diff --git a/frontend/src/components/smart-editor/comments/positioned-comments.tsx b/frontend/src/components/smart-editor/comments/positioned-comments.tsx index a903de9fd..d71a51d4f 100644 --- a/frontend/src/components/smart-editor/comments/positioned-comments.tsx +++ b/frontend/src/components/smart-editor/comments/positioned-comments.tsx @@ -1,15 +1,15 @@ -import { useContext, useMemo } from 'react'; -import { styled } from 'styled-components'; import { SmartEditorContext } from '@app/components/smart-editor/context'; import { ItemType, - PositionedItem, - ThreadData, + type PositionedItem, + type ThreadData, getPositionedItems, } from '@app/components/smart-editor/functions/get-positioned-items'; import { EDITOR_SCALE_CSS_VAR } from '@app/components/smart-editor/hooks/use-scale'; import { BASE_FONT_SIZE } from '@app/plate/components/get-scaled-em'; import { useMyPlateEditorRef } from '@app/plate/types'; +import { useContext, useMemo } from 'react'; +import { styled } from 'styled-components'; import { useThreads } from '../comments/use-threads'; import { ExpandableThread } from './expandable-thread'; diff --git a/frontend/src/components/smart-editor/comments/skeleton-thread.tsx b/frontend/src/components/smart-editor/comments/skeleton-thread.tsx index 4b70745d1..c5b9b74bb 100644 --- a/frontend/src/components/smart-editor/comments/skeleton-thread.tsx +++ b/frontend/src/components/smart-editor/comments/skeleton-thread.tsx @@ -15,9 +15,9 @@ export const SkeletonThread = () => ( const StyledThread = styled.section` display: flex; flex-direction: column; - gap: 16px; - background-color: white; - padding: 16px; + gap: var(--a-spacing-4); + background-color: var(--a-bg-default); + padding: var(--a-spacing-4); border: 1px solid #c9c9c9; border-radius: var(--a-border-radius-medium); margin-left: 12px; @@ -30,14 +30,14 @@ const StyledThread = styled.section` scroll-snap-align: start; &:hover { - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + box-shadow: var(--a-shadow-medium); } `; const ThreadContent = styled.div` display: flex; flex-direction: column; - row-gap: 4px; + row-gap: var(--a-spacing-1); `; const RightSkeleton = styled(Skeleton)` diff --git a/frontend/src/components/smart-editor/comments/styled-components.ts b/frontend/src/components/smart-editor/comments/styled-components.ts index 0654393cd..b88c7826a 100644 --- a/frontend/src/components/smart-editor/comments/styled-components.ts +++ b/frontend/src/components/smart-editor/comments/styled-components.ts @@ -2,7 +2,7 @@ import { styled } from 'styled-components'; export const StyledNewReply = styled.div` border-radius: var(--a-border-radius-medium); - font-size: 16px; + font-size: var(--a-spacing-4); `; export const StyledNewThread = styled.div` @@ -10,10 +10,10 @@ export const StyledNewThread = styled.div` right: -2px; transform: translateX(100%); width: ${350 - 12 - 12}px; - background-color: white; + background-color: var(--a-bg-default); z-index: 5; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - padding: 16px; + box-shadow: var(--a-shadow-medium); + padding: var(--a-spacing-4); margin-bottom: 40px; border-radius: var(--a-border-radius-medium); border: 1px solid #c9c9c9; @@ -23,8 +23,8 @@ export const StyledCommentButtonContainer = styled.div` display: flex; justify-content: space-between; flex-wrap: wrap; - gap: 16px; - margin-top: 16px; + gap: var(--a-spacing-4); + margin-top: var(--a-spacing-4); margin-right: 20px; width: 100%; `; diff --git a/frontend/src/components/smart-editor/comments/thread-list.tsx b/frontend/src/components/smart-editor/comments/thread-list.tsx index c9b8f3600..fa70c7315 100644 --- a/frontend/src/components/smart-editor/comments/thread-list.tsx +++ b/frontend/src/components/smart-editor/comments/thread-list.tsx @@ -33,12 +33,12 @@ const StyledThreadSections = styled.div` display: flex; flex-direction: column; align-items: flex-end; - row-gap: 16px; - padding-left: 16px; + row-gap: var(--a-spacing-4); + padding-left: var(--a-spacing-4); flex-shrink: 0; width: 100%; height: 100%; - padding-bottom: 32px; + padding-bottom: var(--a-spacing-8); overflow-y: auto; overflow-x: hidden; scroll-snap-type: y proximity; @@ -50,6 +50,6 @@ const StyledThreadListContainer = styled.section` position: relative; display: flex; flex-direction: column; - gap: 16px; + gap: var(--a-spacing-4); height: 100%; `; diff --git a/frontend/src/components/smart-editor/comments/thread.tsx b/frontend/src/components/smart-editor/comments/thread.tsx index 8fd0cf6fd..c423ff735 100644 --- a/frontend/src/components/smart-editor/comments/thread.tsx +++ b/frontend/src/components/smart-editor/comments/thread.tsx @@ -1,6 +1,6 @@ +import type { ISmartEditorComment } from '@app/types/smart-editor/comments'; import { forwardRef } from 'react'; import { styled } from 'styled-components'; -import { ISmartEditorComment } from '@app/types/smart-editor/comments'; import { CommentList } from './comment-list'; import { NewCommentInThread } from './new-comment-in-thread'; @@ -39,11 +39,11 @@ interface StyledProps { const StyledThread = styled.section` display: flex; flex-direction: column; - gap: 16px; + gap: var(--a-spacing-4); width: ${THREAD_WIDTH}px; position: ${({ $isAbsolute }) => ($isAbsolute ? 'absolute' : 'static')}; background-color: var(--a-surface-default); - padding: 16px; + padding: var(--a-spacing-4); border: 1px solid #c9c9c9; border-radius: var(--a-border-radius-medium); will-change: transform, opacity, box-shadow; @@ -67,5 +67,5 @@ const Replies = styled.div` font-style: italic; color: var(--a-gray-700); text-align: right; - font-size: 16px; + font-size: var(--a-spacing-4); `; diff --git a/frontend/src/components/smart-editor/comments/use-annotations-counts.ts b/frontend/src/components/smart-editor/comments/use-annotations-counts.ts index 28c3546b0..3bfd555c8 100644 --- a/frontend/src/components/smart-editor/comments/use-annotations-counts.ts +++ b/frontend/src/components/smart-editor/comments/use-annotations-counts.ts @@ -1,6 +1,6 @@ -import { useContext, useMemo } from 'react'; import { useThreads } from '@app/components/smart-editor/comments/use-threads'; import { SmartEditorContext } from '@app/components/smart-editor/context'; +import { useContext, useMemo } from 'react'; export const useAnnotationsCounts = () => { const { attached, orphans } = useThreads(); diff --git a/frontend/src/components/smart-editor/comments/use-is-comment-author.ts b/frontend/src/components/smart-editor/comments/use-is-comment-author.ts index 2d9659c17..e767adf07 100644 --- a/frontend/src/components/smart-editor/comments/use-is-comment-author.ts +++ b/frontend/src/components/smart-editor/comments/use-is-comment-author.ts @@ -1,5 +1,5 @@ -import { useContext } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; +import { useContext } from 'react'; export const useIsCommentAuthor = (authorIdent: string): boolean => { const { user } = useContext(StaticDataContext); diff --git a/frontend/src/components/smart-editor/comments/use-threads.ts b/frontend/src/components/smart-editor/comments/use-threads.ts index 9fdfc22b1..dc9d3d6d7 100644 --- a/frontend/src/components/smart-editor/comments/use-threads.ts +++ b/frontend/src/components/smart-editor/comments/use-threads.ts @@ -1,12 +1,12 @@ -import { skipToken } from '@reduxjs/toolkit/query'; -import { useContext, useMemo } from 'react'; -import { Descendant, Text } from 'slate'; import { SmartEditorContext } from '@app/components/smart-editor/context'; import { isNotUndefined } from '@app/functions/is-not-type-guards'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { useMyPlateEditorRef } from '@app/plate/types'; import { useGetCommentsQuery } from '@app/redux-api/smart-editor-comments'; -import { ISmartEditorComment } from '@app/types/smart-editor/comments'; +import type { ISmartEditorComment } from '@app/types/smart-editor/comments'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useContext, useMemo } from 'react'; +import { type Descendant, Text } from 'slate'; import { COMMENT_PREFIX } from '../constants'; export interface FocusedComment extends ISmartEditorComment { diff --git a/frontend/src/components/smart-editor/comments/write-comment/write-comment.tsx b/frontend/src/components/smart-editor/comments/write-comment/write-comment.tsx index 93f1cd570..5cc570f38 100644 --- a/frontend/src/components/smart-editor/comments/write-comment/write-comment.tsx +++ b/frontend/src/components/smart-editor/comments/write-comment/write-comment.tsx @@ -1,7 +1,7 @@ +import { MOD_KEY } from '@app/keys'; import { PaperplaneIcon, XMarkIcon } from '@navikt/aksel-icons'; import { Button, Textarea, Tooltip } from '@navikt/ds-react'; import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'; -import { MOD_KEY } from '@app/keys'; import { StyledCommentButtonContainer } from '../styled-components'; interface Props extends Omit { diff --git a/frontend/src/components/smart-editor/context.tsx b/frontend/src/components/smart-editor/context.tsx index 759cfc13e..839b823f4 100644 --- a/frontend/src/components/smart-editor/context.tsx +++ b/frontend/src/components/smart-editor/context.tsx @@ -1,12 +1,12 @@ -import { TRange } from '@udecode/plate-common'; -import { createContext, useState } from 'react'; import { useSmartEditorAnnotationsAtOrigin, useSmartEditorGodeFormuleringerOpen, } from '@app/hooks/settings/use-setting'; -import { RichText } from '@app/plate/types'; -import { DistribusjonsType, ISmartDocument } from '@app/types/documents/documents'; +import type { RichText } from '@app/plate/types'; +import { DistribusjonsType, type ISmartDocument } from '@app/types/documents/documents'; import { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; +import type { TRange } from '@udecode/plate-common'; +import { createContext, useState } from 'react'; const noop = () => {}; diff --git a/frontend/src/components/smart-editor/functions/get-positioned-items.ts b/frontend/src/components/smart-editor/functions/get-positioned-items.ts index ce9773fd2..9c5eb5229 100644 --- a/frontend/src/components/smart-editor/functions/get-positioned-items.ts +++ b/frontend/src/components/smart-editor/functions/get-positioned-items.ts @@ -1,8 +1,8 @@ -import { findNode } from '@udecode/plate-common'; -import { FocusedComment } from '@app/components/smart-editor/comments/use-threads'; +import type { FocusedComment } from '@app/components/smart-editor/comments/use-threads'; import { COMMENT_PREFIX } from '@app/components/smart-editor/constants'; import { calculateRangePosition } from '@app/plate/functions/range-position'; -import { RichText, RichTextEditor } from '@app/plate/types'; +import type { RichText, RichTextEditor } from '@app/plate/types'; +import { findNode } from '@udecode/plate-common'; export enum ItemType { THREAD = 'thread', @@ -56,7 +56,7 @@ export const getPositionedItems = ( // Distance from top in em. const top: number | null = - ref === null ? null : (calculateRangePosition(editor, ref, { path, offset: 0 })?.top ?? null); + ref === null ? null : calculateRangePosition(editor, ref, { path, offset: 0 })?.top ?? null; if (top === null) { continue; diff --git a/frontend/src/components/smart-editor/gode-formuleringer/add-button.tsx b/frontend/src/components/smart-editor/gode-formuleringer/add-button.tsx index 8cadd3dc2..77c569ea0 100644 --- a/frontend/src/components/smart-editor/gode-formuleringer/add-button.tsx +++ b/frontend/src/components/smart-editor/gode-formuleringer/add-button.tsx @@ -1,6 +1,6 @@ +import type { EditorValue, RichTextEditor } from '@app/plate/types'; import { Button } from '@navikt/ds-react'; import { styled } from 'styled-components'; -import { EditorValue, RichTextEditor } from '@app/plate/types'; import { insertGodFormulering, isAvailable } from './insert'; interface AddButtonProps { diff --git a/frontend/src/components/smart-editor/gode-formuleringer/fuzzy-search.ts b/frontend/src/components/smart-editor/gode-formuleringer/fuzzy-search.ts index f50e50eb9..80ebccf37 100644 --- a/frontend/src/components/smart-editor/gode-formuleringer/fuzzy-search.ts +++ b/frontend/src/components/smart-editor/gode-formuleringer/fuzzy-search.ts @@ -1,4 +1,4 @@ -import { SplitQuery } from '@app/components/smart-editor/gode-formuleringer/split-query'; +import type { SplitQuery } from '@app/components/smart-editor/gode-formuleringer/split-query'; /** * Fuzzy search for a text. diff --git a/frontend/src/components/smart-editor/gode-formuleringer/god-formulering.tsx b/frontend/src/components/smart-editor/gode-formuleringer/god-formulering.tsx index 587254acc..908a539eb 100644 --- a/frontend/src/components/smart-editor/gode-formuleringer/god-formulering.tsx +++ b/frontend/src/components/smart-editor/gode-formuleringer/god-formulering.tsx @@ -1,16 +1,16 @@ -import { CalendarIcon, ChevronDownIcon, ChevronUpIcon } from '@navikt/aksel-icons'; -import { Button, Heading, Tag } from '@navikt/ds-react'; -import { Plate } from '@udecode/plate-common'; -import { useEffect, useRef, useState } from 'react'; -import { styled } from 'styled-components'; import { OUTLINE_WIDTH, godFormuleringBaseStyle } from '@app/components/smart-editor/gode-formuleringer/styles'; import { SPELL_CHECK_LANGUAGES, useSmartEditorLanguage } from '@app/hooks/use-smart-editor-language'; import { renderReadOnlyLeaf } from '@app/plate/leaf/render-leaf'; import { PlateEditor } from '@app/plate/plate-editor'; import { previewPlugins } from '@app/plate/plugins/plugin-sets/preview'; -import { EditorValue, RichTextEditor, useMyPlateEditorState } from '@app/plate/types'; -import { NonNullableGodFormulering } from '@app/types/texts/consumer'; +import { type EditorValue, type RichTextEditor, useMyPlateEditorState } from '@app/plate/types'; +import type { NonNullableGodFormulering } from '@app/types/texts/consumer'; import { LANGUAGE_NAMES } from '@app/types/texts/language'; +import { CalendarIcon, ChevronDownIcon, ChevronUpIcon } from '@navikt/aksel-icons'; +import { Button, Heading, Tag } from '@navikt/ds-react'; +import { Plate } from '@udecode/plate-common'; +import { useEffect, useRef, useState } from 'react'; +import { styled } from 'styled-components'; import { DateTime } from '../../datetime/datetime'; import { AddButton } from './add-button'; @@ -85,7 +85,7 @@ const ShowMore = ({ isExpanded, setIsExpanded }: ShowMoreProps) => ( const Left = styled.div` display: flex; - gap: 4px; + gap: var(--a-spacing-1); `; const ActionWrapper = styled.div` @@ -106,18 +106,18 @@ const StyledGodFormulering = styled.section<{ $isFocused: boolean }>` ${godFormuleringBaseStyle} display: flex; flex-direction: column; - gap: 8px; - padding: 8px; + gap: var(--a-spacing-2); + padding: var(--a-spacing-2); background-color: var(--a-bg-subtle); outline: ${OUTLINE_WIDTH} solid ${({ $isFocused }) => ($isFocused ? 'var(--a-border-focus)' : 'transparent')}; white-space: normal; `; const StyledContent = styled.div<{ $isExpanded: boolean }>` - background-color: white; + background-color: var(--a-bg-default); border-radius: var(--a-border-radius-medium); - padding-left: 8px; - padding-right: 8px; + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); max-height: ${({ $isExpanded }) => ($isExpanded ? 'unset' : '200px')}; overflow: hidden; position: relative; diff --git a/frontend/src/components/smart-editor/gode-formuleringer/gode-formuleringer-list.tsx b/frontend/src/components/smart-editor/gode-formuleringer/gode-formuleringer-list.tsx index 17b36fec7..bf0a4c56b 100644 --- a/frontend/src/components/smart-editor/gode-formuleringer/gode-formuleringer-list.tsx +++ b/frontend/src/components/smart-editor/gode-formuleringer/gode-formuleringer-list.tsx @@ -1,7 +1,7 @@ -import { Alert } from '@navikt/ds-react'; import { GodFormulering } from '@app/components/smart-editor/gode-formuleringer/god-formulering'; import { StyledSkeleton } from '@app/components/smart-editor/gode-formuleringer/styles'; -import { NonNullableGodFormulering } from '@app/types/texts/consumer'; +import type { NonNullableGodFormulering } from '@app/types/texts/consumer'; +import { Alert } from '@navikt/ds-react'; interface ListProps { isLoading: boolean; diff --git a/frontend/src/components/smart-editor/gode-formuleringer/gode-formuleringer.tsx b/frontend/src/components/smart-editor/gode-formuleringer/gode-formuleringer.tsx index e408b763b..b0bf184ed 100644 --- a/frontend/src/components/smart-editor/gode-formuleringer/gode-formuleringer.tsx +++ b/frontend/src/components/smart-editor/gode-formuleringer/gode-formuleringer.tsx @@ -1,7 +1,4 @@ -import { ChevronLeftIcon, LightBulbIcon } from '@navikt/aksel-icons'; -import { Button } from '@navikt/ds-react'; -import { focusEditor } from '@udecode/plate-common'; -import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; +import { GLOBAL, LIST_DELIMITER, NONE, type NONE_TYPE } from '@app/components/smart-editor-texts/types'; import { SmartEditorContext } from '@app/components/smart-editor/context'; import { fuzzySearch } from '@app/components/smart-editor/gode-formuleringer/fuzzy-search'; import { GodeFormuleringerList } from '@app/components/smart-editor/gode-formuleringer/gode-formuleringer-list'; @@ -15,13 +12,16 @@ import { Top, } from '@app/components/smart-editor/gode-formuleringer/styles'; import { useTranslatedFormuleringer } from '@app/components/smart-editor/gode-formuleringer/use-translated-formuleringer'; -import { GLOBAL, LIST_DELIMITER, NONE, NONE_TYPE } from '@app/components/smart-editor-texts/types'; import { getTextAsString } from '@app/plate/functions/get-text-string'; -import { TemplateSections } from '@app/plate/template-sections'; +import type { TemplateSections } from '@app/plate/template-sections'; import { useMyPlateEditorRef } from '@app/plate/types'; import { GOD_FORMULERING_TYPE } from '@app/types/common-text-types'; -import { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; -import { IConsumerText, NonNullableGodFormulering } from '@app/types/texts/consumer'; +import type { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; +import type { IConsumerText, NonNullableGodFormulering } from '@app/types/texts/consumer'; +import { ChevronLeftIcon, LightBulbIcon } from '@navikt/aksel-icons'; +import { Button } from '@navikt/ds-react'; +import { focusEditor } from '@udecode/plate-common'; +import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; import { Filter } from './filter'; import { insertGodFormulering } from './insert'; diff --git a/frontend/src/components/smart-editor/gode-formuleringer/insert.ts b/frontend/src/components/smart-editor/gode-formuleringer/insert.ts index 4f7a4f425..8809d2c60 100644 --- a/frontend/src/components/smart-editor/gode-formuleringer/insert.ts +++ b/frontend/src/components/smart-editor/gode-formuleringer/insert.ts @@ -1,5 +1,5 @@ +import type { EditorValue, RichTextEditor } from '@app/plate/types'; import { focusEditor, insertFragment } from '@udecode/plate-common'; -import { EditorValue, RichTextEditor } from '@app/plate/types'; export const insertGodFormulering = (editor: RichTextEditor, content: EditorValue) => { if (!isAvailable(editor)) { diff --git a/frontend/src/components/smart-editor/gode-formuleringer/section-select.tsx b/frontend/src/components/smart-editor/gode-formuleringer/section-select.tsx index c0eae43a4..ee5af4d65 100644 --- a/frontend/src/components/smart-editor/gode-formuleringer/section-select.tsx +++ b/frontend/src/components/smart-editor/gode-formuleringer/section-select.tsx @@ -1,10 +1,6 @@ -import { Select } from '@navikt/ds-react'; -import { findNode } from '@udecode/plate-common'; -import { useContext, useEffect, useMemo } from 'react'; -import { BasePoint, Range } from 'slate'; +import { NONE, type NONE_TYPE } from '@app/components/smart-editor-texts/types'; import { MALTEKST_SECTION_NAMES } from '@app/components/smart-editor/constants'; import { SmartEditorContext } from '@app/components/smart-editor/context'; -import { NONE, NONE_TYPE } from '@app/components/smart-editor-texts/types'; import { useTemplateSections } from '@app/hooks/use-template-sections'; import { useSelection } from '@app/plate/hooks/use-selection'; import { @@ -15,14 +11,18 @@ import { } from '@app/plate/plugins/element-types'; import { TemplateSections } from '@app/plate/template-sections'; import { - MaltekstElement, - MaltekstseksjonElement, - RedigerbarMaltekstElement, - RegelverkElement, - RichTextEditor, + type MaltekstElement, + type MaltekstseksjonElement, + type RedigerbarMaltekstElement, + type RegelverkElement, + type RichTextEditor, useMyPlateEditorRef, } from '@app/plate/types'; import { isOfElementTypeFn, isOfElementTypesFn } from '@app/plate/utils/queries'; +import { Select } from '@navikt/ds-react'; +import { findNode } from '@udecode/plate-common'; +import { useContext, useEffect, useMemo } from 'react'; +import type { BasePoint, Range } from 'slate'; interface Props { activeSection: TemplateSections | NONE_TYPE; diff --git a/frontend/src/components/smart-editor/gode-formuleringer/split-query.test.ts b/frontend/src/components/smart-editor/gode-formuleringer/split-query.test.ts index e85bd5623..437f5abfe 100644 --- a/frontend/src/components/smart-editor/gode-formuleringer/split-query.test.ts +++ b/frontend/src/components/smart-editor/gode-formuleringer/split-query.test.ts @@ -1,9 +1,9 @@ import { describe, expect, it } from 'bun:test'; import { EXPRESSION_SCORE_FACTOR, - Expression, + type Expression, SPACE_REGEX, - SplitQuery, + type SplitQuery, WORD_SCORE, splitQuery, } from '@app/components/smart-editor/gode-formuleringer/split-query'; diff --git a/frontend/src/components/smart-editor/gode-formuleringer/styles.tsx b/frontend/src/components/smart-editor/gode-formuleringer/styles.tsx index 41c944b9e..53a4b23f1 100644 --- a/frontend/src/components/smart-editor/gode-formuleringer/styles.tsx +++ b/frontend/src/components/smart-editor/gode-formuleringer/styles.tsx @@ -2,12 +2,12 @@ import { Skeleton } from '@navikt/ds-react'; import { css, styled } from 'styled-components'; export const StyledGodeFormuleringer = styled.section` - padding-top: 16px; + padding-top: var(--a-spacing-4); display: flex; flex-direction: column; position: sticky; top: 0; - gap: 16px; + gap: var(--a-spacing-4); width: 350px; height: 100%; `; @@ -16,9 +16,9 @@ export const Top = styled.div` display: flex; flex-direction: column; flex-shrink: 0; - row-gap: 8px; - padding-right: 16px; - padding-left: 4px; + row-gap: var(--a-spacing-2); + padding-right: var(--a-spacing-4); + padding-left: var(--a-spacing-1); `; export const Header = styled.header` @@ -32,16 +32,16 @@ export const ListContainer = styled.div` flex-direction: column; overflow-y: auto; flex-grow: 1; - row-gap: 16px; - padding-right: 16px; - padding-left: 4px; + row-gap: var(--a-spacing-4); + padding-right: var(--a-spacing-4); + padding-left: var(--a-spacing-1); `; export const GodeFormuleringerTitle = styled.h1` display: flex; flex-direction: row; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); margin: 0; font-size: 20px; `; @@ -57,7 +57,7 @@ export const godFormuleringBaseStyle = css` } &:last-child { - margin-bottom: 32px; + margin-bottom: var(--a-spacing-8); } `; diff --git a/frontend/src/components/smart-editor/gode-formuleringer/use-translated-formuleringer.ts b/frontend/src/components/smart-editor/gode-formuleringer/use-translated-formuleringer.ts index bfee7d582..f8a40ec40 100644 --- a/frontend/src/components/smart-editor/gode-formuleringer/use-translated-formuleringer.ts +++ b/frontend/src/components/smart-editor/gode-formuleringer/use-translated-formuleringer.ts @@ -1,13 +1,13 @@ -import { skipToken } from '@reduxjs/toolkit/query'; -import { useEffect, useState } from 'react'; -import { NONE, NONE_TYPE } from '@app/components/smart-editor-texts/types'; +import { NONE, type NONE_TYPE } from '@app/components/smart-editor-texts/types'; import { useSmartEditorLanguage } from '@app/hooks/use-smart-editor-language'; -import { TemplateSections } from '@app/plate/template-sections'; +import type { TemplateSections } from '@app/plate/template-sections'; import { useLazyGetConsumerTextsQuery } from '@app/redux-api/texts/consumer'; import { GOD_FORMULERING_TYPE } from '@app/types/common-text-types'; -import { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; -import { NonNullableGodFormulering, isNonNullGodFormulering } from '@app/types/texts/consumer'; +import type { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; +import { type NonNullableGodFormulering, isNonNullGodFormulering } from '@app/types/texts/consumer'; import { LANGUAGES } from '@app/types/texts/language'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useEffect, useState } from 'react'; import { useQuery } from '../hooks/use-query'; interface State { diff --git a/frontend/src/components/smart-editor/history/history-editor.tsx b/frontend/src/components/smart-editor/history/history-editor.tsx index dc7f528ff..f86296d61 100644 --- a/frontend/src/components/smart-editor/history/history-editor.tsx +++ b/frontend/src/components/smart-editor/history/history-editor.tsx @@ -1,24 +1,27 @@ -import { Button } from '@navikt/ds-react'; -import { Plate, insertNodes, removeNodes, withoutNormalizing, withoutSavingHistory } from '@udecode/plate-common'; -import { memo, useEffect, useMemo } from 'react'; -import { styled } from 'styled-components'; -import { getIsRolAnswers, getIsRolQuestions } from '@app/components/documents/new-documents/helpers'; -import { EDITOR_SCALE_CSS_VAR } from '@app/components/smart-editor/hooks/use-scale'; import { ErrorComponent } from '@app/components/smart-editor-texts/error-component'; +import { SmartEditorContext } from '@app/components/smart-editor/context'; +import { useCanManageDocument } from '@app/components/smart-editor/hooks/use-can-edit-document'; +import { EDITOR_SCALE_CSS_VAR } from '@app/components/smart-editor/hooks/use-scale'; import { ErrorBoundary } from '@app/error-boundary/error-boundary'; import { areDescendantsEqual } from '@app/functions/are-descendants-equal'; -import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; -import { useIsRol } from '@app/hooks/use-is-rol'; -import { useIsSaksbehandler } from '@app/hooks/use-is-saksbehandler'; import { useSmartEditorSpellCheckLanguage } from '@app/hooks/use-smart-editor-language'; import { pushEvent } from '@app/observability'; import { PlateEditor } from '@app/plate/plate-editor'; import { saksbehandlerPlugins } from '@app/plate/plugins/plugin-sets/saksbehandler'; import { Sheet } from '@app/plate/sheet'; -import { EditorValue, RichTextEditor, useMyPlateEditorRef } from '@app/plate/types'; -import { ISmartDocument } from '@app/types/documents/documents'; -import { SaksTypeEnum } from '@app/types/kodeverk'; -import { FlowState } from '@app/types/oppgave-common'; +import { type EditorValue, type RichTextEditor, useMyPlateEditorRef } from '@app/plate/types'; +import type { ISmartDocument } from '@app/types/documents/documents'; +import { Button } from '@navikt/ds-react'; +import { + Plate, + insertNodes, + removeNodes, + resetEditorChildren, + withoutNormalizing, + withoutSavingHistory, +} from '@udecode/plate-common'; +import { memo, useContext, useEffect } from 'react'; +import { styled } from 'styled-components'; interface Props { versionId: number; @@ -29,42 +32,8 @@ interface Props { export const HistoryEditor = memo( ({ smartDocument, version, versionId }: Props) => { const mainEditor = useMyPlateEditorRef(smartDocument.id); - const { data: oppgave } = useOppgave(); - const isSaksbehandler = useIsSaksbehandler(); - const isRol = useIsRol(); - - const rolCanRestore = - isRol && - oppgave !== undefined && - (oppgave.typeId === SaksTypeEnum.KLAGE || oppgave.typeId === SaksTypeEnum.ANKE) && - oppgave.rol.flowState !== FlowState.SENT && - getIsRolAnswers(smartDocument); - - const saksbehandlerCanRestore = useMemo(() => { - if (!isSaksbehandler || oppgave === undefined) { - return false; - } - - if (oppgave.medunderskriver.flowState === FlowState.SENT) { - return false; - } - - if (getIsRolAnswers(smartDocument)) { - return false; - } - - if (getIsRolQuestions(smartDocument)) { - if (oppgave.typeId === SaksTypeEnum.KLAGE || oppgave.typeId === SaksTypeEnum.ANKE) { - if (oppgave.rol.flowState === FlowState.SENT) { - return false; - } - } - } - - return true; - }, [isSaksbehandler, oppgave, smartDocument]); - - const disableRestore = !saksbehandlerCanRestore && !rolCanRestore; + const { templateId } = useContext(SmartEditorContext); + const canManage = useCanManageDocument(templateId); const id = `${smartDocument.id}-${versionId}`; @@ -80,7 +49,7 @@ export const HistoryEditor = memo( restore(mainEditor, version); }} size="small" - disabled={disableRestore} + disabled={!canManage} > Gjenopprett denne versjonen @@ -106,10 +75,10 @@ interface HistoryContentProps { } const HistoryContent = ({ id, version }: HistoryContentProps) => { - const edior = useMyPlateEditorRef(id); + const editor = useMyPlateEditorRef(id); const lang = useSmartEditorSpellCheckLanguage(); - useEffect(() => restore(edior, version), [edior, version]); + useEffect(() => restore(editor, version), [editor, version]); return ( @@ -121,10 +90,7 @@ const HistoryContent = ({ id, version }: HistoryContentProps) => { const restore = (editor: RichTextEditor, content: EditorValue) => { withoutNormalizing(editor, () => { withoutSavingHistory(editor, () => { - for (let i = editor.children.length - 1; i >= 0; i--) { - removeNodes(editor, { at: [i] }); - } - + resetEditorChildren(editor); insertNodes(editor, content, { at: [0] }); // Remove empty paragraph that is added automatically @@ -139,8 +105,8 @@ const HistoryEditorContainer = styled.div` position: relative; overflow-y: auto; overflow-x: visible; - padding-top: 16px; - padding-right: 16px; + padding-top: var(--a-spacing-4); + padding-right: var(--a-spacing-4); height: max-content; &::after { diff --git a/frontend/src/components/smart-editor/history/history.tsx b/frontend/src/components/smart-editor/history/history.tsx index 0a8d6ebaa..bd6062dbf 100644 --- a/frontend/src/components/smart-editor/history/history.tsx +++ b/frontend/src/components/smart-editor/history/history.tsx @@ -1,8 +1,3 @@ -import { ChevronRightIcon, ClockDashedIcon } from '@navikt/aksel-icons'; -import { Button, Heading, Loader, Tag } from '@navikt/ds-react'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { useState } from 'react'; -import { styled } from 'styled-components'; import { HistoryEditor } from '@app/components/smart-editor/history/history-editor'; import { isoDateTimeToPretty } from '@app/domain/date'; import { formatEmployeeNameAndIdFallback } from '@app/domain/employee-name'; @@ -10,7 +5,12 @@ import { useGetSmartDocumentVersionQuery, useGetSmartDocumentVersionsQuery, } from '@app/redux-api/oppgaver/queries/documents'; -import { ISmartDocument, ISmartDocumentVersion } from '@app/types/documents/documents'; +import type { ISmartDocument, ISmartDocumentVersion } from '@app/types/documents/documents'; +import { ChevronRightIcon, ClockDashedIcon } from '@navikt/aksel-icons'; +import { Button, Heading, Loader, Tag } from '@navikt/ds-react'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useState } from 'react'; +import { styled } from 'styled-components'; interface Props { oppgaveId: string; @@ -132,10 +132,10 @@ const HistoryItem = ({ documentVersion, isActive, setSelectedVersion }: HistoryI const ListContainer = styled.div` display: flex; flex-direction: column; - gap: 8px; + gap: var(--a-spacing-2); align-items: center; - margin-bottom: 16px; - margin-right: 16px; + margin-bottom: var(--a-spacing-4); + margin-right: var(--a-spacing-4); min-width: 300px; position: sticky; top: 0; @@ -164,7 +164,7 @@ const StyledHistory = styled.ul` margin: 0; padding: 0; white-space: nowrap; - row-gap: 8px; + row-gap: var(--a-spacing-2); background-color: var(--a-surface-default); padding: var(--a-spacing-2); box-shadow: var(--a-shadow-medium); diff --git a/frontend/src/components/smart-editor/hooks/use-can-edit-document.test.ts b/frontend/src/components/smart-editor/hooks/use-can-edit-document.test.ts new file mode 100644 index 000000000..051321ee7 --- /dev/null +++ b/frontend/src/components/smart-editor/hooks/use-can-edit-document.test.ts @@ -0,0 +1,131 @@ +import { describe, expect, it } from 'bun:test'; +import { canEditDocument } from '@app/components/smart-editor/hooks/use-can-edit-document'; +import type { IUserData } from '@app/types/bruker'; +import { SaksTypeEnum } from '@app/types/kodeverk'; +import { FlowState } from '@app/types/oppgave-common'; +import type { IOppgavebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; +import { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; + +const createOppgave = (muFlowState: FlowState, rolFlowState: FlowState): IOppgavebehandling => + ({ + typeId: SaksTypeEnum.KLAGE, + saksbehandler: { navIdent: 'saksbehandler' }, + rol: { flowState: rolFlowState, employee: { navIdent: 'rol' } }, + medunderskriver: { flowState: muFlowState, employee: { navIdent: 'mu' } }, + }) as IOppgavebehandling; + +const CASES_WITHOUT_EXPECT = [ + [FlowState.NOT_SENT, FlowState.NOT_SENT], + [FlowState.NOT_SENT, FlowState.SENT], + [FlowState.NOT_SENT, FlowState.RETURNED], + [FlowState.SENT, FlowState.NOT_SENT], + [FlowState.SENT, FlowState.SENT], + [FlowState.SENT, FlowState.RETURNED], + [FlowState.RETURNED, FlowState.NOT_SENT], + [FlowState.RETURNED, FlowState.SENT], + [FlowState.RETURNED, FlowState.RETURNED], +]; + +describe('canEditDocument', () => { + describe('Saksbehandler', () => { + const user = { navIdent: 'saksbehandler' } as IUserData; + + describe('ROL answers', () => { + it.each(CASES_WITHOUT_EXPECT)('%#. should never allow editing', (mu, rol) => { + expect(canEditDocument(TemplateIdEnum.ROL_ANSWERS, createOppgave(mu, rol), user)).toBe(false); + }); + }); + + describe('ROL questions', () => { + const cases = [ + { mu: FlowState.NOT_SENT, rol: FlowState.NOT_SENT, expected: true }, + { mu: FlowState.NOT_SENT, rol: FlowState.SENT, expected: false }, + { mu: FlowState.NOT_SENT, rol: FlowState.RETURNED, expected: true }, + { mu: FlowState.SENT, rol: FlowState.NOT_SENT, expected: true }, + { mu: FlowState.SENT, rol: FlowState.SENT, expected: false }, + { mu: FlowState.SENT, rol: FlowState.RETURNED, expected: true }, + { mu: FlowState.RETURNED, rol: FlowState.NOT_SENT, expected: true }, + { mu: FlowState.RETURNED, rol: FlowState.SENT, expected: false }, + { mu: FlowState.RETURNED, rol: FlowState.RETURNED, expected: true }, + ]; + + it.each(cases)('%#. should not allow editing if ROL flow state is sent', ({ mu, rol, expected }) => { + expect(canEditDocument(TemplateIdEnum.ROL_QUESTIONS, createOppgave(mu, rol), user)).toBe(expected); + }); + }); + + describe('Other templates', () => { + const cases = [ + { mu: FlowState.NOT_SENT, rol: FlowState.NOT_SENT, expected: true }, + { mu: FlowState.NOT_SENT, rol: FlowState.SENT, expected: true }, + { mu: FlowState.NOT_SENT, rol: FlowState.RETURNED, expected: true }, + { mu: FlowState.SENT, rol: FlowState.NOT_SENT, expected: false }, + { mu: FlowState.SENT, rol: FlowState.SENT, expected: false }, + { mu: FlowState.SENT, rol: FlowState.RETURNED, expected: false }, + { mu: FlowState.RETURNED, rol: FlowState.NOT_SENT, expected: true }, + { mu: FlowState.RETURNED, rol: FlowState.SENT, expected: true }, + { mu: FlowState.RETURNED, rol: FlowState.RETURNED, expected: true }, + ]; + + it.each(cases)('%#. should not allow editing if MU flow state is sent', ({ mu, rol, expected }) => { + expect(canEditDocument(TemplateIdEnum.KLAGEVEDTAK_V2, createOppgave(mu, rol), user)).toBe(expected); + }); + }); + }); + + describe('Medunderskriver', () => { + const user = { navIdent: 'mu' } as IUserData; + + describe('ROL answers', () => { + it.each(CASES_WITHOUT_EXPECT)('%#. should never allow editing', (mu, rol) => { + expect(canEditDocument(TemplateIdEnum.ROL_ANSWERS, createOppgave(mu, rol), user)).toBe(false); + }); + }); + + describe('Other templates', () => { + const cases = [ + { mu: FlowState.NOT_SENT, rol: FlowState.NOT_SENT, expected: false }, + { mu: FlowState.NOT_SENT, rol: FlowState.SENT, expected: false }, + { mu: FlowState.NOT_SENT, rol: FlowState.RETURNED, expected: false }, + { mu: FlowState.SENT, rol: FlowState.NOT_SENT, expected: true }, + { mu: FlowState.SENT, rol: FlowState.SENT, expected: true }, + { mu: FlowState.SENT, rol: FlowState.RETURNED, expected: true }, + { mu: FlowState.RETURNED, rol: FlowState.NOT_SENT, expected: false }, + { mu: FlowState.RETURNED, rol: FlowState.SENT, expected: false }, + { mu: FlowState.RETURNED, rol: FlowState.RETURNED, expected: false }, + ]; + + it.each(cases)('%#. should allow editing if MU flow state is sent', ({ mu, rol, expected }) => { + expect(canEditDocument(TemplateIdEnum.KLAGEVEDTAK_V2, createOppgave(mu, rol), user)).toBe(expected); + }); + }); + }); + + describe('ROL', () => { + const user = { navIdent: 'rol' } as IUserData; + + describe('ROL answers', () => { + const cases = [ + { mu: FlowState.NOT_SENT, rol: FlowState.NOT_SENT, expected: false }, + { mu: FlowState.NOT_SENT, rol: FlowState.SENT, expected: true }, + { mu: FlowState.NOT_SENT, rol: FlowState.RETURNED, expected: false }, + { mu: FlowState.SENT, rol: FlowState.NOT_SENT, expected: false }, + { mu: FlowState.SENT, rol: FlowState.SENT, expected: true }, + { mu: FlowState.SENT, rol: FlowState.RETURNED, expected: false }, + { mu: FlowState.RETURNED, rol: FlowState.NOT_SENT, expected: false }, + { mu: FlowState.RETURNED, rol: FlowState.SENT, expected: true }, + { mu: FlowState.RETURNED, rol: FlowState.RETURNED, expected: false }, + ]; + + it.each(cases)('%#. should allow editing if ROL flow state is sent', ({ mu, rol, expected }) => { + expect(canEditDocument(TemplateIdEnum.ROL_ANSWERS, createOppgave(mu, rol), user)).toBe(expected); + }); + }); + + describe('Other templates', () => { + it.each(CASES_WITHOUT_EXPECT)('%#. should never allow editing', (mu, rol) => { + expect(canEditDocument(TemplateIdEnum.KLAGEVEDTAK_V2, createOppgave(mu, rol), user)).toBe(false); + }); + }); + }); +}); diff --git a/frontend/src/components/smart-editor/hooks/use-can-edit-document.ts b/frontend/src/components/smart-editor/hooks/use-can-edit-document.ts index abafa8fef..f50980a8f 100644 --- a/frontend/src/components/smart-editor/hooks/use-can-edit-document.ts +++ b/frontend/src/components/smart-editor/hooks/use-can-edit-document.ts @@ -1,45 +1,88 @@ -import { useContext, useMemo } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; +import type { IUserData } from '@app/types/bruker'; import { SaksTypeEnum } from '@app/types/kodeverk'; import { FlowState } from '@app/types/oppgave-common'; +import type { IOppgavebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; import { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; +import { useContext, useMemo } from 'react'; -export const useCanEditDocument = (templateId: TemplateIdEnum): boolean => { - const { data: oppgave, isLoading: oppgaveIsLoading, isFetching: oppgaveIsFetching } = useOppgave(); +export const useCanManageDocument = (templateId: TemplateIdEnum): boolean => { + const { data: oppgave, isSuccess } = useOppgave(); const { user } = useContext(StaticDataContext); - return useMemo(() => { - if (oppgaveIsLoading || oppgaveIsFetching) { - return false; - } + return useMemo( + () => isSuccess && canManageDocument(templateId, oppgave, user), + [oppgave, isSuccess, templateId, user], + ); +}; - if (oppgave === undefined) { - return false; - } +const canManageDocument = (templateId: TemplateIdEnum, oppgave: IOppgavebehandling, user: IUserData): boolean => { + if ( + (oppgave.typeId === SaksTypeEnum.KLAGE || oppgave.typeId === SaksTypeEnum.ANKE) && + oppgave.rol?.flowState === FlowState.SENT && + templateId === TemplateIdEnum.ROL_QUESTIONS + ) { + // No one can edit ROL questions after they have been sent. + return false; + } - if (oppgave.medunderskriver.flowState === FlowState.SENT) { - return oppgave.medunderskriver.employee?.navIdent === user.navIdent; - } + if (isRol(oppgave, user)) { + return rolCanEdit(templateId, oppgave); + } - if ( - (oppgave.typeId === SaksTypeEnum.KLAGE || oppgave.typeId === SaksTypeEnum.ANKE) && - oppgave.rol?.flowState === FlowState.SENT && - templateId === TemplateIdEnum.ROL_QUESTIONS - ) { - return false; - } + if (isMu(oppgave, user)) { + return false; + } - if ( + return saksbehandlerCanEdit(templateId, oppgave, user); +}; + +const saksbehandlerCanEdit = (templateId: TemplateIdEnum, oppgave: IOppgavebehandling, user: IUserData): boolean => { + if (oppgave.saksbehandler?.navIdent !== user.navIdent) { + return false; + } + + if (templateId === TemplateIdEnum.ROL_ANSWERS) { + return false; + } + + // When behandling is sent to ROL, saksbehandler can edit everything except questions. + if (templateId === TemplateIdEnum.ROL_QUESTIONS) { + return ( (oppgave.typeId === SaksTypeEnum.KLAGE || oppgave.typeId === SaksTypeEnum.ANKE) && - oppgave.rol.employee !== null && - oppgave.rol.flowState === FlowState.SENT && - templateId === TemplateIdEnum.ROL_ANSWERS && - oppgave.rol.employee.navIdent === user.navIdent - ) { - return true; - } - - return oppgave.saksbehandler?.navIdent === user.navIdent; - }, [oppgave, oppgaveIsFetching, oppgaveIsLoading, templateId, user]); + oppgave.rol?.flowState !== FlowState.SENT + ); + } + + return oppgave.medunderskriver?.flowState !== FlowState.SENT; }; + +const isMu = (oppgave: IOppgavebehandling, user: IUserData): boolean => + oppgave.medunderskriver?.employee?.navIdent === user.navIdent; + +const isRol = (oppgave: IOppgavebehandling, user: IUserData): boolean => + (oppgave.typeId === SaksTypeEnum.KLAGE || oppgave.typeId === SaksTypeEnum.ANKE) && + oppgave.rol.employee?.navIdent === user.navIdent; + +// Only ROL can edit answers after they have been sent. +const rolCanEdit = (templateId: TemplateIdEnum, oppgave: IOppgavebehandling): boolean => + (oppgave.typeId === SaksTypeEnum.KLAGE || oppgave.typeId === SaksTypeEnum.ANKE) && + oppgave.rol.flowState === FlowState.SENT && + templateId === TemplateIdEnum.ROL_ANSWERS; + +export const useCanEditDocument = (templateId: TemplateIdEnum): boolean => { + const { data: oppgave, isSuccess } = useOppgave(); + const { user } = useContext(StaticDataContext); + + return useMemo( + () => isSuccess && canEditDocument(templateId, oppgave, user), + [oppgave, isSuccess, templateId, user], + ); +}; + +const muCanEdit = (templateId: TemplateIdEnum, oppgave: IOppgavebehandling): boolean => + oppgave.medunderskriver.flowState === FlowState.SENT && templateId !== TemplateIdEnum.ROL_ANSWERS; + +export const canEditDocument = (templateId: TemplateIdEnum, oppgave: IOppgavebehandling, user: IUserData): boolean => + canManageDocument(templateId, oppgave, user) || (isMu(oppgave, user) && muCanEdit(templateId, oppgave)); diff --git a/frontend/src/components/smart-editor/hooks/use-query.ts b/frontend/src/components/smart-editor/hooks/use-query.ts index edf3fdd96..5e8a1635b 100644 --- a/frontend/src/components/smart-editor/hooks/use-query.ts +++ b/frontend/src/components/smart-editor/hooks/use-query.ts @@ -1,13 +1,13 @@ -import { skipToken } from '@reduxjs/toolkit/query'; -import { useContext, useMemo } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { GLOBAL, LIST_DELIMITER, SET_DELIMITER } from '@app/components/smart-editor-texts/types'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useSmartEditorLanguage } from '@app/hooks/use-smart-editor-language'; -import { IGetConsumerTextsParams, IGetTextsParams, TextTypes } from '@app/types/common-text-types'; -import { UtfallEnum } from '@app/types/kodeverk'; -import { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; -import { Language, UNTRANSLATED } from '@app/types/texts/language'; +import type { IGetConsumerTextsParams, IGetTextsParams, TextTypes } from '@app/types/common-text-types'; +import type { UtfallEnum } from '@app/types/kodeverk'; +import type { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; +import type { Language, UNTRANSLATED } from '@app/types/texts/language'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useContext, useMemo } from 'react'; interface Params { textType: TextTypes; diff --git a/frontend/src/components/smart-editor/hooks/use-scale.ts b/frontend/src/components/smart-editor/hooks/use-scale.ts index 4fb0d18ec..18f9d3c0f 100644 --- a/frontend/src/components/smart-editor/hooks/use-scale.ts +++ b/frontend/src/components/smart-editor/hooks/use-scale.ts @@ -1,5 +1,5 @@ -import { useCallback } from 'react'; import { useSmartEditorZoom } from '@app/hooks/settings/use-setting'; +import { useCallback } from 'react'; export const EDITOR_SCALE_CSS_VAR = '--kabal-editor-scale'; diff --git a/frontend/src/components/smart-editor/new-document/generated-icon.tsx b/frontend/src/components/smart-editor/new-document/generated-icon.tsx index a3c258ed9..5567d5222 100644 --- a/frontend/src/components/smart-editor/new-document/generated-icon.tsx +++ b/frontend/src/components/smart-editor/new-document/generated-icon.tsx @@ -1,9 +1,3 @@ -/* eslint-disable max-lines */ -import { ELEMENT_H1, ELEMENT_H2, ELEMENT_H3 } from '@udecode/plate-heading'; -import { ELEMENT_OL, ELEMENT_UL } from '@udecode/plate-list'; -import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph'; -import { ELEMENT_TABLE } from '@udecode/plate-table'; -import { styled } from 'styled-components'; import { ELEMENT_CURRENT_DATE, ELEMENT_EMPTY_VOID, @@ -17,7 +11,13 @@ import { ELEMENT_REGELVERK, ELEMENT_SIGNATURE, } from '@app/plate/plugins/element-types'; -import { ISmartEditorTemplate } from '@app/types/smart-editor/smart-editor'; +import type { ISmartEditorTemplate } from '@app/types/smart-editor/smart-editor'; +/* eslint-disable max-lines */ +import { ELEMENT_H1, ELEMENT_H2, ELEMENT_H3 } from '@udecode/plate-heading'; +import { ELEMENT_OL, ELEMENT_UL } from '@udecode/plate-list'; +import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph'; +import { ELEMENT_TABLE } from '@udecode/plate-table'; +import { styled } from 'styled-components'; interface GeneratedIconProps { template: ISmartEditorTemplate; @@ -225,6 +225,6 @@ const StyledSvg = styled.svg` box-shadow: var(--a-shadow-medium); border: 1px solid var(--a-border-default); border-radius: var(--a-border-radius-medium); - margin-bottom: 8px; + margin-bottom: var(--a-spacing-2); width: 100%; `; diff --git a/frontend/src/components/smart-editor/new-document/get-document-count.test.ts b/frontend/src/components/smart-editor/new-document/get-document-count.test.ts index 79ea9818c..ec9f74220 100644 --- a/frontend/src/components/smart-editor/new-document/get-document-count.test.ts +++ b/frontend/src/components/smart-editor/new-document/get-document-count.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'bun:test'; -import { IMainDocument } from '@app/types/documents/documents'; +import type { IMainDocument } from '@app/types/documents/documents'; import { getDocumentCount } from './get-document-count'; describe('calculate document count', () => { diff --git a/frontend/src/components/smart-editor/new-document/get-document-count.ts b/frontend/src/components/smart-editor/new-document/get-document-count.ts index 6c0656320..00987f20f 100644 --- a/frontend/src/components/smart-editor/new-document/get-document-count.ts +++ b/frontend/src/components/smart-editor/new-document/get-document-count.ts @@ -1,4 +1,4 @@ -import { IMainDocument } from '@app/types/documents/documents'; +import type { IMainDocument } from '@app/types/documents/documents'; interface IDocumentTitle { tittel: string; @@ -37,7 +37,7 @@ export const getDocumentCount = ( continue; } - const parsedCount = parseInt(countStr, 10); + const parsedCount = Number.parseInt(countStr, 10); if (Number.isNaN(parsedCount)) { continue; diff --git a/frontend/src/components/smart-editor/new-document/new-document.tsx b/frontend/src/components/smart-editor/new-document/new-document.tsx index 17ffbce57..febc9a388 100644 --- a/frontend/src/components/smart-editor/new-document/new-document.tsx +++ b/frontend/src/components/smart-editor/new-document/new-document.tsx @@ -1,5 +1,3 @@ -import { Loader } from '@navikt/ds-react'; -import { useContext, useState } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { GeneratedIcon } from '@app/components/smart-editor/new-document/generated-icon'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; @@ -10,13 +8,15 @@ import { useIsRol } from '@app/hooks/use-is-rol'; import { useIsSaksbehandler } from '@app/hooks/use-is-saksbehandler'; import { GENERELT_BREV_TEMPLATE, NOTAT_TEMPLATE } from '@app/plate/templates/simple-templates'; import { ANKE_I_TRYGDERETTEN_TEMPLATES, ANKE_TEMPLATES, KLAGE_TEMPLATES } from '@app/plate/templates/templates'; -import { useCreateSmartDocumentMutation } from '@app/redux-api/oppgaver/mutations/smart-document'; +import { useCreateSmartDocumentMutation } from '@app/redux-api/collaboration'; import { useGetDocumentsQuery } from '@app/redux-api/oppgaver/queries/documents'; import { Role } from '@app/types/bruker'; import { SaksTypeEnum } from '@app/types/kodeverk'; -import { IOppgavebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; -import { ISmartEditorTemplate } from '@app/types/smart-editor/smart-editor'; +import type { IOppgavebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; +import type { ISmartEditorTemplate } from '@app/types/smart-editor/smart-editor'; import { Language } from '@app/types/texts/language'; +import { Loader } from '@navikt/ds-react'; +import { useContext, useState } from 'react'; import { getDocumentCount } from './get-document-count'; import { StyledHeader, @@ -46,7 +46,7 @@ export const NewDocument = ({ onCreate }: Props) => { return null; } - if (!isRol && !hasDocumentsAccess) { + if (!(isRol || hasDocumentsAccess)) { return null; } diff --git a/frontend/src/components/smart-editor/new-document/styled-components.ts b/frontend/src/components/smart-editor/new-document/styled-components.ts index 4a28f4f30..d916cf1bf 100644 --- a/frontend/src/components/smart-editor/new-document/styled-components.ts +++ b/frontend/src/components/smart-editor/new-document/styled-components.ts @@ -1,11 +1,11 @@ import { styled } from 'styled-components'; export const StyledTemplateButton = styled.button` - background: transparent; - font-size: 16px; + background-color: transparent; + font-size: var(--a-spacing-4); font-weight: 600; border: none; - padding: 16px; + padding: var(--a-spacing-4); cursor: pointer; display: flex; flex-direction: column; @@ -16,16 +16,16 @@ export const StyledTemplateButton = styled.button` min-width: 190px; &:hover { - background: var(--a-surface-hover); + background-color: var(--a-surface-hover); } `; export const StyledNewDocument = styled.section` width: 826px; height: 100%; - padding: 32px; - padding-top: 16px; - background: var(--a-bg-default); + padding: var(--a-spacing-8); + padding-top: var(--a-spacing-4); + background-color: var(--a-bg-default); overflow-y: auto; `; @@ -47,6 +47,6 @@ export const StyledLoadingOverlay = styled.div` align-items: center; height: 100%; width: 100%; - background: rgba(0, 0, 0, 0.25); + background-color: rgba(0, 0, 0, 0.25); top: 0; `; diff --git a/frontend/src/components/smart-editor/smart-editor-panel.tsx b/frontend/src/components/smart-editor/smart-editor-panel.tsx index 9bd2bc50c..4199ea6bd 100644 --- a/frontend/src/components/smart-editor/smart-editor-panel.tsx +++ b/frontend/src/components/smart-editor/smart-editor-panel.tsx @@ -1,38 +1,22 @@ -import { styled } from 'styled-components'; import { Behandling } from '@app/components/behandling/behandling'; +import { TabbedEditors } from '@app/components/smart-editor/tabbed-editors/tabbed-editors'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useSmartEditorEnabled } from '@app/hooks/settings/use-setting'; -import { PanelContainer } from '../oppgavebehandling-panels/styled-components'; -import { TabbedEditors } from './tabbed-editors/tabbed-editors'; export const SmartEditorPanel = () => { const { value: shown = true } = useSmartEditorEnabled(); const { data: oppgave } = useOppgave(); - const hide = !shown || typeof oppgave === 'undefined' || oppgave.feilregistrering !== null; + const hide = !shown || oppgave === undefined || oppgave.feilregistrering !== null; if (hide) { return null; } return ( - - - - - - + <> + + + ); }; - -const SmartEditorContainer = styled.div` - display: flex; - gap: 16px; - padding: 0; - min-height: 100%; - overflow: hidden; -`; - -const StyledPanelContainer = styled(PanelContainer)` - background: transparent; -`; diff --git a/frontend/src/components/smart-editor/tabbed-editors/content.tsx b/frontend/src/components/smart-editor/tabbed-editors/content.tsx index c025f3648..b2354db05 100644 --- a/frontend/src/components/smart-editor/tabbed-editors/content.tsx +++ b/frontend/src/components/smart-editor/tabbed-editors/content.tsx @@ -1,8 +1,8 @@ -import { useCallback, useContext, useEffect, useRef } from 'react'; import { SmartEditorContext } from '@app/components/smart-editor/context'; import { DEFAULT, useScaleState } from '@app/components/smart-editor/hooks/use-scale'; import { PlateEditorContent } from '@app/plate/styled-components'; import { useMyPlateEditorRef } from '@app/plate/types'; +import { useCallback, useContext, useEffect, useRef } from 'react'; export const Content = ({ children }: { children?: React.ReactNode }) => { const editor = useMyPlateEditorRef(); diff --git a/frontend/src/components/smart-editor/tabbed-editors/cursors/cursor-colors.ts b/frontend/src/components/smart-editor/tabbed-editors/cursors/cursor-colors.ts new file mode 100644 index 000000000..29a6d6077 --- /dev/null +++ b/frontend/src/components/smart-editor/tabbed-editors/cursors/cursor-colors.ts @@ -0,0 +1,61 @@ +interface BaseColor { + red: number; + green: number; + blue: number; +} + +const MAP: Map = new Map(); + +// #C30000 +const RED: BaseColor = { red: 195, green: 0, blue: 0 }; +// #06893A +const GREEN: BaseColor = { red: 6, green: 137, blue: 58 }; +// #0067C5 +const BLUE: BaseColor = { red: 0, green: 103, blue: 197 }; +// #FF9100 +const ORANGE: BaseColor = { red: 255, green: 145, blue: 0 }; +// #634689 +const PURPLE: BaseColor = { red: 99, green: 70, blue: 137 }; + +const ALL_COLORS = [RED, GREEN, BLUE, ORANGE, PURPLE]; + +interface Colors { + caretColor: string; + selectionColor: string; +} + +export const getColors = (key: string): Colors => { + const existing = MAP.get(key); + + if (existing === undefined) { + const availableColors = getAvailableColors(); + + const randomColorIndex = Math.floor(Math.random() * availableColors.length); + const baseColor = availableColors[randomColorIndex]!; + + MAP.set(key, baseColor); + + return { + selectionColor: formatColor(baseColor, 0.2), + caretColor: formatColor(baseColor, 1), + }; + } + + return { + selectionColor: formatColor(existing, 0.2), + caretColor: formatColor(existing, 1), + }; +}; + +const getAvailableColors = (): BaseColor[] => { + const availableColors = ALL_COLORS.filter((color) => ![...MAP.values()].includes(color)); + + if (availableColors.length === 0) { + return ALL_COLORS; + } + + return availableColors; +}; + +const formatColor = (color: BaseColor, opacity: number): string => + `rgba(${color.red}, ${color.green}, ${color.blue}, ${opacity})`; diff --git a/frontend/src/components/smart-editor/tabbed-editors/cursors/cursors.tsx b/frontend/src/components/smart-editor/tabbed-editors/cursors/cursors.tsx new file mode 100644 index 000000000..20985340a --- /dev/null +++ b/frontend/src/components/smart-editor/tabbed-editors/cursors/cursors.tsx @@ -0,0 +1,121 @@ +import { getColors } from '@app/components/smart-editor/tabbed-editors/cursors/cursor-colors'; +import type { RelativeRange } from '@slate-yjs/core'; +import { type UnknownObject, createZustandStore } from '@udecode/plate-common'; +import { type CursorData, type CursorProps, type CursorState, useCursorOverlayPositions } from '@udecode/plate-cursor'; +import { useEffect, useMemo, useRef } from 'react'; +import { styled } from 'styled-components'; + +export interface UserCursor extends CursorData, UnknownObject { + navn: string; + navIdent: string; + tabId: string; +} + +interface YjsCursor { + selection: RelativeRange; + data: UserCursor; +} + +// eslint-disable-next-line import/no-unused-modules +export const isYjsCursor = (value: unknown): value is YjsCursor => + typeof value === 'object' && value !== null && 'selection' in value && 'data' in value; + +const Cursor = ({ caretPosition, data, disableCaret, disableSelection, selectionRects }: CursorProps) => { + const previousCaretPosition = useRef(caretPosition); + const { style, selectionStyle = style, navIdent, navn, tabId } = data ?? {}; + + const labelRef = useRef(null); + + const { caretColor, selectionColor } = useMemo(() => getColors(tabId ?? ''), [tabId]); + + // Use the previous caret position if the current caret position is null. + // This is to avoid flickering of the caret. It may lag behind a little instead. + const safeCaretPosition = caretPosition ?? previousCaretPosition.current; + + // Remember the previous caret position. + useEffect(() => { + if (caretPosition !== null) { + previousCaretPosition.current = caretPosition; + } + }, [caretPosition]); + + return ( + <> + {disableSelection === true + ? null + : selectionRects.map((selectionPosition, i) => ( + + ))} + {disableCaret === true || safeCaretPosition === null ? null : ( + + + {navn} ({navIdent}) + + + )} + + ); +}; + +const BaseCursor = styled.div` + pointer-events: none; + position: absolute; + z-index: 10; +`; + +const StyledSelection = styled(BaseCursor)``; + +const StyledCaret = styled(BaseCursor)` + width: 1px; +`; + +const CaretLabel = styled.div` + position: absolute; + bottom: 100%; + left: 0; + color: white; + font-size: 0.75em; + padding: 0.25em; + border-radius: var(--a-border-radius-medium); + border-bottom-left-radius: 0; + white-space: nowrap; +`; + +// eslint-disable-next-line import/no-unused-modules +export const cursorStore = createZustandStore('cursors')>>({}); + +interface CursorOverlayProps { + containerElement: HTMLElement; +} + +// eslint-disable-next-line import/no-unused-modules +export const CursorOverlay = ({ containerElement }: CursorOverlayProps) => { + const { useStore } = cursorStore; + const yjsCursors = useStore(); + const containerRef = useRef(containerElement); + const { cursors, refresh } = useCursorOverlayPositions({ containerRef, cursors: yjsCursors }); + + // Refresh the cursor positions if any caret position is null. + useEffect(() => { + if (cursors.some((cursor) => cursor.caretPosition === null)) { + const req = requestAnimationFrame(() => { + refresh(); + }); + + return () => { + cancelAnimationFrame(req); + }; + } + }, [cursors, refresh]); + + return ( + <> + {cursors.map((cursor) => ( + + ))} + + ); +}; diff --git a/frontend/src/components/smart-editor/tabbed-editors/editor.tsx b/frontend/src/components/smart-editor/tabbed-editors/editor.tsx index 26abcd205..11b0091b8 100644 --- a/frontend/src/components/smart-editor/tabbed-editors/editor.tsx +++ b/frontend/src/components/smart-editor/tabbed-editors/editor.tsx @@ -1,10 +1,4 @@ -import { ClockDashedIcon } from '@navikt/aksel-icons'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { Plate, isCollapsed, isText } from '@udecode/plate-common'; -import { Profiler, useContext, useEffect, useState } from 'react'; -import { BasePoint, Path, Range } from 'slate'; -import { styled } from 'styled-components'; -import { SavedStatusProps } from '@app/components/saved-status/saved-status'; +import { StaticDataContext } from '@app/components/app/static-data-context'; import { NewComment } from '@app/components/smart-editor/comments/new-comment'; import { SmartEditorContext } from '@app/components/smart-editor/context'; import { GodeFormuleringer } from '@app/components/smart-editor/gode-formuleringer/gode-formuleringer'; @@ -17,29 +11,34 @@ import { DocumentErrorComponent } from '@app/error-boundary/document-error'; import { ErrorBoundary } from '@app/error-boundary/error-boundary'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useSmartEditorSpellCheckLanguage } from '@app/hooks/use-smart-editor-language'; -import { editorMeasurements } from '@app/observability'; import { PlateEditor } from '@app/plate/plate-editor'; -import { saksbehandlerPlugins } from '@app/plate/plugins/plugin-sets/saksbehandler'; +import { collaborationSaksbehandlerPlugins } from '@app/plate/plugins/plugin-sets/saksbehandler'; import { Sheet } from '@app/plate/sheet'; import { StatusBar } from '@app/plate/status-bar/status-bar'; import { FloatingSaksbehandlerToolbar } from '@app/plate/toolbar/toolbars/floating-toolbar'; import { SaksbehandlerToolbar } from '@app/plate/toolbar/toolbars/saksbehandler-toolbar'; import { SaksbehandlerTableToolbar } from '@app/plate/toolbar/toolbars/table-toolbar'; -import { EditorValue, RichTextEditor } from '@app/plate/types'; +import type { EditorValue, RichTextEditor } from '@app/plate/types'; import { useGetMySignatureQuery, useGetSignatureQuery } from '@app/redux-api/bruker'; import { useLazyGetDocumentQuery } from '@app/redux-api/oppgaver/queries/documents'; -import { ISmartDocument } from '@app/types/documents/documents'; +import type { ISmartDocument } from '@app/types/documents/documents'; +/* eslint-disable max-lines */ +import { ClockDashedIcon } from '@navikt/aksel-icons'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { Plate, isCollapsed, isText } from '@udecode/plate-common'; +import { useContext, useEffect, useState } from 'react'; +import { type BasePoint, Path, Range } from 'slate'; +import { styled } from 'styled-components'; interface EditorProps { smartDocument: ISmartDocument; - onChange: (value: EditorValue) => void; - updateStatus: SavedStatusProps; } -export const Editor = ({ smartDocument, onChange, updateStatus }: EditorProps) => { - const { id, templateId, content } = smartDocument; +export const Editor = ({ smartDocument }: EditorProps) => { + const { id, templateId } = smartDocument; const [getDocument, { isLoading }] = useLazyGetDocumentQuery(); const { newCommentSelection, showAnnotationsAtOrigin } = useContext(SmartEditorContext); + const { user } = useContext(StaticDataContext); const canEdit = useCanEditDocument(templateId); const [showHistory, setShowHistory] = useState(false); const { data: oppgave } = useOppgave(); @@ -68,11 +67,10 @@ export const Editor = ({ smartDocument, onChange, updateStatus }: EditorProps) = return ( - initialValue={content} + initialValue={smartDocument.content} id={id} readOnly={!canEdit} - onChange={onChange} - plugins={saksbehandlerPlugins} + plugins={collaborationSaksbehandlerPlugins(oppgave.id, id, smartDocument, user)} decorate={([node, path]) => { if (newCommentSelection === null || isCollapsed(newCommentSelection) || !isText(node)) { return []; @@ -118,12 +116,7 @@ export const Editor = ({ smartDocument, onChange, updateStatus }: EditorProps) = size: 'small', }} > - editorMeasurements.add(actualDuration)} - > - - + @@ -135,30 +128,78 @@ export const Editor = ({ smartDocument, onChange, updateStatus }: EditorProps) = {showHistory ? : null} - + ); }; +// interface ChangeSet { +// added: number[]; +// removed: number[]; +// updated: number[]; +// } + +// type OnChangeFn = (changeset: ChangeSet) => void; + const EditorWithNewCommentAndFloatingToolbar = ({ id }: { id: string }) => { const { templateId, setSheetRef } = useContext(SmartEditorContext); const canEdit = useCanEditDocument(templateId); - const [containerRef, setContainerRef] = useState(null); + const [containerElement, setContainerElement] = useState(null); const lang = useSmartEditorSpellCheckLanguage(); + // const editor = useMyPlateEditorRef(id); + + // useEffect(() => { + // const onChange: OnChangeFn = ({ added, removed, updated }) => { + // const states = editor.awareness.getStates(); + + // requestAnimationFrame(() => { + // cursorStore.store.setState((draft) => { + // for (const a of [...added, ...updated]) { + // const cursor = states.get(a); + + // if (isYjsCursor(cursor) && cursor.data.tabId !== TAB_UUID) { + // draft[a] = { + // ...cursor, + // selection: relativeRangeToSlateRange( + // editor.yjs.provider.document.get('content', XmlText), + // editor, + // cursor.selection, + // ), + // }; + // } + // } + + // for (const r of removed) { + // delete draft[r]; + // } + // }); + // }); + // }; + + // editor.awareness.on('change', onChange); + + // return () => { + // editor.awareness.off('change', onChange); + // }; + // }, [editor, editor.awareness]); + useEffect(() => { - setSheetRef(containerRef); - }, [containerRef, setSheetRef]); + setSheetRef(containerElement); + }, [containerElement, setSheetRef]); return ( - - - + + + - + + + {/* Not needed for now - only one person will edit at a time */} + {/* {containerElement === null ? null : } */} ); }; @@ -169,7 +210,7 @@ const MainContainer = styled.div` flex-shrink: 1; overflow-y: scroll; scroll-padding-top: 64px; - padding-left: 16px; + padding-left: var(--a-spacing-4); `; const EditorContainer = styled.div` diff --git a/frontend/src/components/smart-editor/tabbed-editors/positioned-right.tsx b/frontend/src/components/smart-editor/tabbed-editors/positioned-right.tsx index 5bc2d0258..cbb69a39e 100644 --- a/frontend/src/components/smart-editor/tabbed-editors/positioned-right.tsx +++ b/frontend/src/components/smart-editor/tabbed-editors/positioned-right.tsx @@ -1,6 +1,6 @@ -import { useContext } from 'react'; import { useAnnotationsCounts } from '@app/components/smart-editor/comments/use-annotations-counts'; import { SmartEditorContext } from '@app/components/smart-editor/context'; +import { useContext } from 'react'; import { PositionedBookmarks } from '../bookmarks/positioned'; import { NumberOfComments } from '../comments/number-of-comments'; import { PositionedComments } from '../comments/positioned-comments'; diff --git a/frontend/src/components/smart-editor/tabbed-editors/sticky-right.tsx b/frontend/src/components/smart-editor/tabbed-editors/sticky-right.tsx index 35d57dca0..52deb1753 100644 --- a/frontend/src/components/smart-editor/tabbed-editors/sticky-right.tsx +++ b/frontend/src/components/smart-editor/tabbed-editors/sticky-right.tsx @@ -1,10 +1,10 @@ -import { useContext, useEffect, useRef } from 'react'; -import { styled } from 'styled-components'; import { Bookmarks, getBookmarks } from '@app/components/smart-editor/bookmarks/bookmarks'; import { CommentSection } from '@app/components/smart-editor/comments/comment-section'; import { NumberOfComments } from '@app/components/smart-editor/comments/number-of-comments'; import { SmartEditorContext } from '@app/components/smart-editor/context'; import { useMyPlateEditorState } from '@app/plate/types'; +import { useContext, useEffect, useRef } from 'react'; +import { styled } from 'styled-components'; interface StickyRightProps { id: string; @@ -45,7 +45,7 @@ const StickyRightContainer = styled.div` grid-area: right; display: flex; flex-direction: column; - row-gap: 16px; + row-gap: var(--a-spacing-4); position: sticky; top: 0; overflow-y: auto; diff --git a/frontend/src/components/smart-editor/tabbed-editors/tab-panel.tsx b/frontend/src/components/smart-editor/tabbed-editors/tab-panel.tsx index 98329401e..31ef128b1 100644 --- a/frontend/src/components/smart-editor/tabbed-editors/tab-panel.tsx +++ b/frontend/src/components/smart-editor/tabbed-editors/tab-panel.tsx @@ -1,45 +1,22 @@ -import { Tabs } from '@navikt/ds-react'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { useEffect, useRef, useState } from 'react'; -import { styled } from 'styled-components'; import { SmartEditorContextComponent } from '@app/components/smart-editor/context'; import { useCanEditDocument } from '@app/components/smart-editor/hooks/use-can-edit-document'; import { Editor } from '@app/components/smart-editor/tabbed-editors/editor'; -import { areDescendantsEqual } from '@app/functions/are-descendants-equal'; -import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; -import { useUpdateSmartDocumentMutation } from '@app/redux-api/oppgaver/mutations/smart-document'; -import { ISmartDocument } from '@app/types/documents/documents'; +import type { ISmartDocument } from '@app/types/documents/documents'; +import { Tabs } from '@navikt/ds-react'; +import { useEffect, useRef } from 'react'; +import { styled } from 'styled-components'; interface TabPanelProps { smartDocument: ISmartDocument; } export const TabPanel = ({ smartDocument }: TabPanelProps) => { - const oppgaveId = useOppgaveId(); - const [update, status] = useUpdateSmartDocumentMutation(); - const [localContent, setLocalContent] = useState(smartDocument.content); - const refContent = useRef(smartDocument.content); - - const { id, content } = smartDocument; - + const { id } = smartDocument; const smartDocumentRef = useRef(smartDocument); const canEditDocument = useCanEditDocument(smartDocument.templateId); const canEditDocumentRef = useRef(canEditDocument); - // Normal debounce - useEffect(() => { - const timeout = setTimeout(() => { - if (!canEditDocument || areDescendantsEqual(localContent, content) || oppgaveId === skipToken) { - return; - } - - update({ content: localContent, oppgaveId, dokumentId: id, version: smartDocument.version }); - }, 2_000); - - return () => clearTimeout(timeout); - }, [content, id, oppgaveId, smartDocument.version, update, localContent, canEditDocument]); - // Ensure that smartDocumentRef and canEditDocumentRef are always up to date in order to avoid the unmount debounce triggering on archive/delete/fradeling useEffect(() => { const setRefs = () => { @@ -52,36 +29,10 @@ export const TabPanel = ({ smartDocument }: TabPanelProps) => { return setRefs; }, [canEditDocument, smartDocument]); - // Unmount debounce - useEffect( - () => () => { - if ( - oppgaveId === skipToken || - !canEditDocumentRef.current || - smartDocumentRef.current.isMarkertAvsluttet || - areDescendantsEqual(refContent.current, smartDocumentRef.current.content) - ) { - return; - } - - update({ content: refContent.current, oppgaveId, dokumentId: id, version: smartDocumentRef.current.version }); - }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [], - ); - return ( - { - refContent.current = c; - setLocalContent(c); - }} - updateStatus={status} - /> + ); diff --git a/frontend/src/components/smart-editor/tabbed-editors/tabbed-editors.tsx b/frontend/src/components/smart-editor/tabbed-editors/tabbed-editors.tsx index f7935f956..ecba834bd 100644 --- a/frontend/src/components/smart-editor/tabbed-editors/tabbed-editors.tsx +++ b/frontend/src/components/smart-editor/tabbed-editors/tabbed-editors.tsx @@ -1,7 +1,5 @@ -import { DocPencilIcon, TabsAddIcon } from '@navikt/aksel-icons'; -import { Alert, Heading, Tabs, Tooltip } from '@navikt/ds-react'; -import { useEffect } from 'react'; -import { styled } from 'styled-components'; +import { PanelContainer } from '@app/components/oppgavebehandling-panels/styled-components'; +import { NewDocument } from '@app/components/smart-editor/new-document/new-document'; import { StyledTabsPanel, TabPanel } from '@app/components/smart-editor/tabbed-editors/tab-panel'; import { useFirstEditor } from '@app/components/smart-editor/tabbed-editors/use-first-editor'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; @@ -11,8 +9,11 @@ import { useIsFeilregistrert } from '@app/hooks/use-is-feilregistrert'; import { useIsMedunderskriver } from '@app/hooks/use-is-medunderskriver'; import { useIsRol } from '@app/hooks/use-is-rol'; import { useSmartDocuments } from '@app/hooks/use-smart-documents'; -import { ISmartDocument } from '@app/types/documents/documents'; -import { NewDocument } from '../new-document/new-document'; +import type { ISmartDocument } from '@app/types/documents/documents'; +import { DocPencilIcon, TabsAddIcon } from '@navikt/aksel-icons'; +import { Alert, Heading, Tabs, Tooltip } from '@navikt/ds-react'; +import { useEffect } from 'react'; +import { styled } from 'styled-components'; const NEW_TAB_ID = 'NEW_TAB_ID'; @@ -47,33 +48,37 @@ const Tabbed = ({ documents }: TabbedProps) => { if (documents.length === 0 && !hasDocumentsAccess) { return ( - - - Ingen redigerbare dokumenter. - - - Ingen redigerbare dokumenter å vise. Om du forventet å se noen dokumenter her, be saksbehandler om å opprette - dem. - - + + + + Ingen redigerbare dokumenter. + + + Ingen redigerbare dokumenter å vise. Om du forventet å se noen dokumenter her, be saksbehandler om å + opprette dem. + + + ); } return ( - - - {documents.map(({ id, tittel }) => ( - } /> - ))} - - - - {documents.map((d) => ( - - ))} - - - + + + + {documents.map(({ id, tittel }) => ( + } /> + ))} + + + + {documents.map((d) => ( + + ))} + + + + ); }; @@ -118,7 +123,6 @@ const StyledTabs = styled(Tabs)` flex-direction: column; height: 100%; overflow: hidden; - background: white; `; const StyledTabsList = styled(Tabs.List)` @@ -127,12 +131,12 @@ const StyledTabsList = styled(Tabs.List)` `; const StyledTabPanels = styled.div` - background-color: var(--a-surface-subtle); overflow: hidden; flex-grow: 1; + background-color: var(--a-bg-subtle); `; const StyledNoDocuments = styled.div` - background: white; - padding: 16px; + background-color: var(--a-bg-default); + padding: var(--a-spacing-4); `; diff --git a/frontend/src/components/smart-editor/tabbed-editors/use-first-editor.ts b/frontend/src/components/smart-editor/tabbed-editors/use-first-editor.ts index 14d6944af..5b496e65d 100644 --- a/frontend/src/components/smart-editor/tabbed-editors/use-first-editor.ts +++ b/frontend/src/components/smart-editor/tabbed-editors/use-first-editor.ts @@ -1,6 +1,6 @@ import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useIsRol } from '@app/hooks/use-is-rol'; -import { ISmartDocument } from '@app/types/documents/documents'; +import type { ISmartDocument } from '@app/types/documents/documents'; import { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; export const useFirstEditor = (editors: ISmartDocument[]): ISmartDocument | null => { diff --git a/frontend/src/components/svarbrev/change-sets.tsx b/frontend/src/components/svarbrev/change-sets.tsx index 4c9fd4688..7fc085db1 100644 --- a/frontend/src/components/svarbrev/change-sets.tsx +++ b/frontend/src/components/svarbrev/change-sets.tsx @@ -1,6 +1,6 @@ +import { BEHANDLINGSTID_UNIT_TYPE_NAMES, type BehandlingstidUnitType, type SvarbrevSetting } from '@app/types/svarbrev'; import { BodyShort } from '@navikt/ds-react'; import { styled } from 'styled-components'; -import { BEHANDLINGSTID_UNIT_TYPE_NAMES, BehandlingstidUnitType, SvarbrevSetting } from '@app/types/svarbrev'; export interface InitialVersion extends Pick { behandlingstidUnits: SvarbrevSetting['behandlingstidUnits']; @@ -23,6 +23,7 @@ export const getChangeSets = (data: SvarbrevSetting[]): (InitialVersion | Change const firstIndex = data.length - 1; for (let i = firstIndex; i >= 0; i--) { + // biome-ignore lint/style/noNonNullAssertion: Guaranteed to be defined. const setting = data[i]!; if (i === firstIndex) { @@ -41,6 +42,7 @@ export const getChangeSets = (data: SvarbrevSetting[]): (InitialVersion | Change continue; } + // biome-ignore lint/style/noNonNullAssertion: Guaranteed to be defined. const previous = data[i + 1]!; const isTimeEqual = @@ -140,7 +142,7 @@ export const getChangeSetText = ({ const StyledVersionList = styled.ul` margin: 0; padding: 0; - padding-left: 16px; + padding-left: var(--a-spacing-4); `; const formatSvartid = (behandlingstidUnits: number, behandlingstidUnitTypeId: BehandlingstidUnitType) => diff --git a/frontend/src/components/svarbrev/filter-sort.ts b/frontend/src/components/svarbrev/filter-sort.ts index 5aac28f4b..961ff09d8 100644 --- a/frontend/src/components/svarbrev/filter-sort.ts +++ b/frontend/src/components/svarbrev/filter-sort.ts @@ -1,9 +1,9 @@ -import { SortState } from '@navikt/ds-react'; import { fuzzySearch } from '@app/components/smart-editor/gode-formuleringer/fuzzy-search'; -import { SplitQuery, splitQuery } from '@app/components/smart-editor/gode-formuleringer/split-query'; -import { ALL_TYPES, ActiveEnum, TypeFilter } from '@app/components/svarbrev/filters'; +import { type SplitQuery, splitQuery } from '@app/components/smart-editor/gode-formuleringer/split-query'; +import { ALL_TYPES, ActiveEnum, type TypeFilter } from '@app/components/svarbrev/filters'; import { SortDirection, SortKey } from '@app/components/svarbrev/use-search-params'; -import { BehandlingstidUnitType, SvarbrevSetting } from '@app/types/svarbrev'; +import { BehandlingstidUnitType, type SvarbrevSetting } from '@app/types/svarbrev'; +import type { SortState } from '@navikt/ds-react'; interface FilterSortFn { settings: NamedSvarbrevSetting[]; diff --git a/frontend/src/components/svarbrev/filters.tsx b/frontend/src/components/svarbrev/filters.tsx index 2a62ddf67..4e47535b6 100644 --- a/frontend/src/components/svarbrev/filters.tsx +++ b/frontend/src/components/svarbrev/filters.tsx @@ -1,6 +1,6 @@ +import { SaksTypeEnum } from '@app/types/kodeverk'; import { Search, ToggleGroup, Tooltip } from '@navikt/ds-react'; import { styled } from 'styled-components'; -import { SaksTypeEnum } from '@app/types/kodeverk'; export enum ActiveEnum { ALL = '0', @@ -91,11 +91,11 @@ const FilterContainer = styled.div` display: flex; flex-direction: row; flex-wrap: nowrap; - gap: 16px; + gap: var(--a-spacing-4); width: 100%; padding-right: 3px; - padding-bottom: 16px; - background-color: white; + padding-bottom: var(--a-spacing-4); + background-color: var(--a-bg-default); position: sticky; top: 0; z-index: 1; diff --git a/frontend/src/components/svarbrev/history.tsx b/frontend/src/components/svarbrev/history.tsx index 3cbbf835c..f12273a69 100644 --- a/frontend/src/components/svarbrev/history.tsx +++ b/frontend/src/components/svarbrev/history.tsx @@ -1,13 +1,18 @@ +import { StaticDataContext } from '@app/components/app/static-data-context'; +import { + type ChangeSet, + type InitialVersion, + getChangeSetText, + getChangeSets, +} from '@app/components/svarbrev/change-sets'; +import { isoDateTimeToPretty } from '@app/domain/date'; +import { useGetSvarbrevSettingHistoryQuery } from '@app/redux-api/svarbrev'; import { ClockDashedIcon } from '@navikt/aksel-icons'; import { Button, Modal, Skeleton, Tooltip } from '@navikt/ds-react'; import { skipToken } from '@reduxjs/toolkit/query'; import { useContext } from 'react'; import { Link } from 'react-router-dom'; import { styled } from 'styled-components'; -import { StaticDataContext } from '@app/components/app/static-data-context'; -import { ChangeSet, InitialVersion, getChangeSetText, getChangeSets } from '@app/components/svarbrev/change-sets'; -import { isoDateTimeToPretty } from '@app/domain/date'; -import { useGetSvarbrevSettingHistoryQuery } from '@app/redux-api/svarbrev'; interface Props { id: string; @@ -71,7 +76,7 @@ const StyledEntryList = styled.ul` padding: 0; display: flex; flex-direction: column; - row-gap: 8px; + row-gap: var(--a-spacing-2); `; const HistoryEntry = (changeSet: InitialVersion | ChangeSet) => { @@ -103,7 +108,7 @@ const StyledEntry = styled.li` border-width: 1px; border-style: solid; border-color: ${({ $backgroundColor }) => $backgroundColor}; - padding-bottom: 8px; + padding-bottom: var(--a-spacing-2); padding-right: 0; padding-left: 3px; overflow: hidden; @@ -115,7 +120,7 @@ const StyledEntry = styled.li` left: -1px; top: -1px; bottom: -1px; - width: 4px; + width: var(--a-spacing-1); background-color: ${({ $backgroundColor }) => $backgroundColor}; border-top-left-radius: var(--a-border-radius-medium); border-bottom-left-radius: var(--a-border-radius-medium); @@ -126,20 +131,20 @@ const EntryHeader = styled.div` display: flex; justify-content: space-between; align-items: flex-start; - margin-bottom: 8px; + margin-bottom: var(--a-spacing-2); `; const EntryLabel = styled.span` display: flex; flex-direction: row; align-items: center; - gap: 4px; - padding-right: 8px; + gap: var(--a-spacing-1); + padding-right: var(--a-spacing-2); padding-top: 0; padding-left: 0; padding-bottom: 1px; font-weight: normal; - font-size: 16px; + font-size: var(--a-spacing-4); border-bottom-right-radius: var(--a-border-radius-medium); background-color: ${({ $backgroundColor }) => $backgroundColor}; `; @@ -156,7 +161,7 @@ const EntryTime = styled.time` const EntryContent = styled.div` display: flex; flex-direction: column; - gap: 4px; - padding-left: 8px; - padding-right: 8px; + gap: var(--a-spacing-1); + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); `; diff --git a/frontend/src/components/svarbrev/modal/get-pdf-url.ts b/frontend/src/components/svarbrev/modal/get-pdf-url.ts index f0ad1c97b..42dabae0f 100644 --- a/frontend/src/components/svarbrev/modal/get-pdf-url.ts +++ b/frontend/src/components/svarbrev/modal/get-pdf-url.ts @@ -1,5 +1,5 @@ -import { SaksTypeEnum } from '@app/types/kodeverk'; -import { BehandlingstidUnitType } from '@app/types/svarbrev'; +import type { SaksTypeEnum } from '@app/types/kodeverk'; +import type { BehandlingstidUnitType } from '@app/types/svarbrev'; export interface PreviewRequestsBody { typeId: SaksTypeEnum.KLAGE | SaksTypeEnum.ANKE; diff --git a/frontend/src/components/svarbrev/modal/modal.tsx b/frontend/src/components/svarbrev/modal/modal.tsx index 83cbdb53f..cda70608e 100644 --- a/frontend/src/components/svarbrev/modal/modal.tsx +++ b/frontend/src/components/svarbrev/modal/modal.tsx @@ -1,4 +1,3 @@ -import { Button, Loader, Modal, Switch, Tag, TextField, Tooltip } from '@navikt/ds-react'; import { CenterLoader, Details, @@ -16,9 +15,10 @@ import { TimeInput } from '@app/components/svarbrev/time-input'; import { isoDateTimeToPretty } from '@app/domain/date'; import { useYtelseName } from '@app/hooks/use-kodeverk-value'; import { useUpdateSvarbrevSettingMutation } from '@app/redux-api/svarbrev'; -import { INavEmployee } from '@app/types/bruker'; +import type { INavEmployee } from '@app/types/bruker'; import { SaksTypeEnum } from '@app/types/kodeverk'; -import { BehandlingstidUnitType, SvarbrevSetting } from '@app/types/svarbrev'; +import type { BehandlingstidUnitType, SvarbrevSetting } from '@app/types/svarbrev'; +import { Button, Loader, Modal, Switch, Tag, TextField, Tooltip } from '@navikt/ds-react'; interface Props extends SvarbrevSetting { isOpen: boolean; @@ -95,7 +95,7 @@ export const PdfModal = ({ Aktiv - {ytelseNameIsLoading ? 'Laster...' : (ytelseName ?? `Ukjent ytelse med ID «${ytelseId}»`)} + {ytelseNameIsLoading ? 'Laster...' : ytelseName ?? `Ukjent ytelse med ID «${ytelseId}»`} diff --git a/frontend/src/components/svarbrev/modal/styled-components.ts b/frontend/src/components/svarbrev/modal/styled-components.ts index 58be944d3..0a50ffe9d 100644 --- a/frontend/src/components/svarbrev/modal/styled-components.ts +++ b/frontend/src/components/svarbrev/modal/styled-components.ts @@ -4,7 +4,7 @@ import { styled } from 'styled-components'; export const Details = styled.div` display: flex; flex-direction: column; - gap: 16px; + gap: var(--a-spacing-4); `; const Flex = styled.div` @@ -13,19 +13,19 @@ const Flex = styled.div` `; export const Row = styled(Flex)` - column-gap: 16px; + column-gap: var(--a-spacing-4); `; export const TimeInputContainer = styled(Flex)` - column-gap: 8px; + column-gap: var(--a-spacing-2); `; export const TimeContainer = styled.div` display: flex; align-items: center; - column-gap: 4px; + column-gap: var(--a-spacing-1); font-style: italic; - font-size: 16px; + font-size: var(--a-spacing-4); `; export const StyledTime = styled.time` @@ -57,6 +57,6 @@ export const StyledPDF = styled.object` export const ModalBody = styled(Modal.Body)` display: flex; flex-direction: column; - gap: 16px; + gap: var(--a-spacing-4); width: min(90vw, 1100px); `; diff --git a/frontend/src/components/svarbrev/modal/use-pdf-url.ts b/frontend/src/components/svarbrev/modal/use-pdf-url.ts index c14754896..269d41420 100644 --- a/frontend/src/components/svarbrev/modal/use-pdf-url.ts +++ b/frontend/src/components/svarbrev/modal/use-pdf-url.ts @@ -1,7 +1,7 @@ +import { type PreviewRequestsBody, getPdfUrl } from '@app/components/svarbrev/modal/get-pdf-url'; +import type { SaksTypeEnum } from '@app/types/kodeverk'; +import type { BehandlingstidUnitType } from '@app/types/svarbrev'; import { useEffect, useRef, useState } from 'react'; -import { PreviewRequestsBody, getPdfUrl } from '@app/components/svarbrev/modal/get-pdf-url'; -import { SaksTypeEnum } from '@app/types/kodeverk'; -import { BehandlingstidUnitType } from '@app/types/svarbrev'; interface Props { isOpen: boolean; diff --git a/frontend/src/components/svarbrev/modal/warning.tsx b/frontend/src/components/svarbrev/modal/warning.tsx index 226e70673..91c6e62cb 100644 --- a/frontend/src/components/svarbrev/modal/warning.tsx +++ b/frontend/src/components/svarbrev/modal/warning.tsx @@ -1,5 +1,5 @@ -import { Alert } from '@navikt/ds-react'; import { BehandlingstidUnitType } from '@app/types/svarbrev'; +import { Alert } from '@navikt/ds-react'; interface Props { behandlingstidUnitTypeId: BehandlingstidUnitType; diff --git a/frontend/src/components/svarbrev/preview.tsx b/frontend/src/components/svarbrev/preview.tsx index ca80f5ead..874e16130 100644 --- a/frontend/src/components/svarbrev/preview.tsx +++ b/frontend/src/components/svarbrev/preview.tsx @@ -1,5 +1,5 @@ import { FileSearchIcon, FloppydiskIcon } from '@navikt/aksel-icons'; -import { Button, ButtonProps, Tooltip } from '@navikt/ds-react'; +import { Button, type ButtonProps, Tooltip } from '@navikt/ds-react'; import { Link } from 'react-router-dom'; interface Props { diff --git a/frontend/src/components/svarbrev/row/row.tsx b/frontend/src/components/svarbrev/row/row.tsx index ec7290981..5eaea4338 100644 --- a/frontend/src/components/svarbrev/row/row.tsx +++ b/frontend/src/components/svarbrev/row/row.tsx @@ -1,8 +1,4 @@ -import { ArrowUndoIcon } from '@navikt/aksel-icons'; -import { Button, Detail, Skeleton, Switch, Table, Tooltip } from '@navikt/ds-react'; -import { useCallback, useEffect, useRef, useState } from 'react'; -import { useParams } from 'react-router-dom'; -import { ScoredNamedSvarbrevSetting } from '@app/components/svarbrev/filter-sort'; +import type { ScoredNamedSvarbrevSetting } from '@app/components/svarbrev/filter-sort'; import { SvarbrevSettingHistory } from '@app/components/svarbrev/history'; import { PdfModal } from '@app/components/svarbrev/modal/modal'; import { useSvarbrevNavigate } from '@app/components/svarbrev/navigate'; @@ -14,6 +10,10 @@ import { Type } from '@app/components/type/type'; import { isoDateTimeToPretty } from '@app/domain/date'; import { useYtelseName } from '@app/hooks/use-kodeverk-value'; import { usePrevious } from '@app/hooks/use-previous'; +import { ArrowUndoIcon } from '@navikt/aksel-icons'; +import { Button, Detail, Skeleton, Switch, Table, Tooltip } from '@navikt/ds-react'; +import { useCallback, useEffect, useRef, useState } from 'react'; +import { useParams } from 'react-router-dom'; export enum ModalEnum { PREVIEW = 'preview', diff --git a/frontend/src/components/svarbrev/row/styled-components.ts b/frontend/src/components/svarbrev/row/styled-components.ts index cd339632e..cf914d9e2 100644 --- a/frontend/src/components/svarbrev/row/styled-components.ts +++ b/frontend/src/components/svarbrev/row/styled-components.ts @@ -28,13 +28,13 @@ export const Behandlingstid = styled.div` display: flex; align-items: center; width: max-content; - gap: 4px; + gap: var(--a-spacing-1); `; export const Horizontal = styled.div` display: flex; align-items: center; - column-gap: 4px; + column-gap: var(--a-spacing-1); `; export const Buttons = styled(Horizontal)` diff --git a/frontend/src/components/svarbrev/row/text-input.tsx b/frontend/src/components/svarbrev/row/text-input.tsx index dc27d0e7f..a14915840 100644 --- a/frontend/src/components/svarbrev/row/text-input.tsx +++ b/frontend/src/components/svarbrev/row/text-input.tsx @@ -1,7 +1,7 @@ -import { ClipboardIcon } from '@navikt/aksel-icons'; -import { Button, CopyButton, TextField, Tooltip } from '@navikt/ds-react'; import { useSvarbrevNavigate } from '@app/components/svarbrev/navigate'; import { Horizontal } from '@app/components/svarbrev/row/styled-components'; +import { ClipboardIcon } from '@navikt/aksel-icons'; +import { Button, CopyButton, TextField, Tooltip } from '@navikt/ds-react'; interface Props { value: string; diff --git a/frontend/src/components/svarbrev/skeleton.tsx b/frontend/src/components/svarbrev/skeleton.tsx index 0fccad189..7f4a58aa4 100644 --- a/frontend/src/components/svarbrev/skeleton.tsx +++ b/frontend/src/components/svarbrev/skeleton.tsx @@ -46,13 +46,14 @@ const Row = styled.div` display: flex; flex-direction: row; align-items: center; - column-gap: 4px; + column-gap: var(--a-spacing-1); `; const Buttons = styled(Row)` min-width: ${3 * 32 + 2 * 4}px; `; -const ROWS = new Array(60).fill(null).map((_, i) => ); +// biome-ignore lint/correctness/useJsxKeyInIterable: Static data +const ROWS = new Array(60).fill(null).map((_, i) => ); export const SkeletonBody = () => {ROWS}; diff --git a/frontend/src/components/svarbrev/svarbrev.tsx b/frontend/src/components/svarbrev/svarbrev.tsx index d7037907f..22b24385c 100644 --- a/frontend/src/components/svarbrev/svarbrev.tsx +++ b/frontend/src/components/svarbrev/svarbrev.tsx @@ -1,9 +1,6 @@ -import { Heading, SortState, Table } from '@navikt/ds-react'; -import { ReactNode, useCallback, useEffect } from 'react'; -import { styled } from 'styled-components'; -import { FilterProps, Filters } from '@app/components/svarbrev/filters'; +import { type FilterProps, Filters } from '@app/components/svarbrev/filters'; import { clearPdfCache } from '@app/components/svarbrev/modal/get-pdf-url'; -import { ModalEnum, Row } from '@app/components/svarbrev/row/row'; +import { type ModalEnum, Row } from '@app/components/svarbrev/row/row'; import { SkeletonBody } from '@app/components/svarbrev/skeleton'; import { useFilterSort } from '@app/components/svarbrev/use-filter-sort'; import { @@ -14,6 +11,9 @@ import { useSvarbrevSearchParams, } from '@app/components/svarbrev/use-search-params'; import { useGetSvarbrevSettingsQuery } from '@app/redux-api/svarbrev'; +import { Heading, type SortState, Table } from '@navikt/ds-react'; +import { type ReactNode, useCallback, useEffect } from 'react'; +import { styled } from 'styled-components'; const TableHeaders = () => ( @@ -149,11 +149,11 @@ export const Svarbrev = ({ modal }: Props) => { const StyledTableHeader = styled(Table.Header)` position: sticky; - top: 32px; + top: var(--a-spacing-8); background-color: var(--a-surface-default); z-index: 1; white-space: nowrap; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); + box-shadow: var(--a-shadow-medium); `; const StyledContainer = styled.div` diff --git a/frontend/src/components/svarbrev/time-input.tsx b/frontend/src/components/svarbrev/time-input.tsx index 590f6ec57..bbcc4316d 100644 --- a/frontend/src/components/svarbrev/time-input.tsx +++ b/frontend/src/components/svarbrev/time-input.tsx @@ -1,10 +1,10 @@ -import { TextField, ToggleGroup } from '@navikt/ds-react'; import { BEHANDLINGSTID_UNIT_TYPES, BEHANDLINGSTID_UNIT_TYPE_NAMES, - BehandlingstidUnitType, + type BehandlingstidUnitType, isBehandlingstidUnitType, } from '@app/types/svarbrev'; +import { TextField, ToggleGroup } from '@navikt/ds-react'; interface Props { value: number; diff --git a/frontend/src/components/svarbrev/use-filter-sort.ts b/frontend/src/components/svarbrev/use-filter-sort.ts index 8b2343354..6ab2f444d 100644 --- a/frontend/src/components/svarbrev/use-filter-sort.ts +++ b/frontend/src/components/svarbrev/use-filter-sort.ts @@ -1,9 +1,13 @@ -import { SortState } from '@navikt/ds-react'; -import { useEffect, useMemo, useRef, useState } from 'react'; -import { NamedSvarbrevSetting, ScoredNamedSvarbrevSetting, filterSort } from '@app/components/svarbrev/filter-sort'; -import { ActiveEnum, TypeFilter } from '@app/components/svarbrev/filters'; +import { + type NamedSvarbrevSetting, + type ScoredNamedSvarbrevSetting, + filterSort, +} from '@app/components/svarbrev/filter-sort'; +import type { ActiveEnum, TypeFilter } from '@app/components/svarbrev/filters'; import { useYtelserAll } from '@app/simple-api-state/use-kodeverk'; -import { SvarbrevSetting } from '@app/types/svarbrev'; +import type { SvarbrevSetting } from '@app/types/svarbrev'; +import type { SortState } from '@navikt/ds-react'; +import { useEffect, useMemo, useRef, useState } from 'react'; interface FilterSort { allSettings: SvarbrevSetting[] | undefined; @@ -68,7 +72,7 @@ export const useFilterSort = ({ ); return () => clearTimeout(timout); - }, [activeFilter, isInitialized, settings, sort, textFilter, typeFilter, ytelseFilter]); + }, [activeFilter, settings, sort, textFilter, typeFilter, ytelseFilter]); if (isLoading || result === undefined) { return { sortedFilteredSettings: undefined, sortFilterIsLoading: true }; diff --git a/frontend/src/components/svarbrev/use-search-params.ts b/frontend/src/components/svarbrev/use-search-params.ts index 124af5b6f..45aa9aa36 100644 --- a/frontend/src/components/svarbrev/use-search-params.ts +++ b/frontend/src/components/svarbrev/use-search-params.ts @@ -1,7 +1,7 @@ -import { SortState } from '@navikt/ds-react'; +import { ALL_TYPES, ActiveEnum, type TypeFilter, isActiveValue, isTypeFilter } from '@app/components/svarbrev/filters'; +import type { SortState } from '@navikt/ds-react'; import { useCallback, useMemo } from 'react'; import { useSearchParams } from 'react-router-dom'; -import { ALL_TYPES, ActiveEnum, TypeFilter, isActiveValue, isTypeFilter } from '@app/components/svarbrev/filters'; export const useSvarbrevSearchParams = () => { const [searchParams, setSearchParams] = useSearchParams(); diff --git a/frontend/src/components/tags/resolved-tag.tsx b/frontend/src/components/tags/resolved-tag.tsx index 6346a8c3c..39f14365f 100644 --- a/frontend/src/components/tags/resolved-tag.tsx +++ b/frontend/src/components/tags/resolved-tag.tsx @@ -1,6 +1,6 @@ +import type { IGetMaltekstseksjonParams } from '@app/types/common-text-types'; import { Tag } from '@navikt/ds-react'; import { styled } from 'styled-components'; -import { IGetMaltekstseksjonParams } from '@app/types/common-text-types'; interface BaseProps { useName: (id: string) => string; diff --git a/frontend/src/components/text-history/text-history.tsx b/frontend/src/components/text-history/text-history.tsx index 1c54221d9..1f4ee8cc2 100644 --- a/frontend/src/components/text-history/text-history.tsx +++ b/frontend/src/components/text-history/text-history.tsx @@ -1,12 +1,12 @@ -import { CalendarIcon, ClockDashedIcon, PencilWritingIcon, UploadIcon } from '@navikt/aksel-icons'; -import { Button, Tag } from '@navikt/ds-react'; -import { useRef, useState } from 'react'; -import { styled } from 'styled-components'; import { EditorName } from '@app/components/editor-name/editor-name'; import { isoDateTimeToPretty } from '@app/domain/date'; import { useOnClickOutside } from '@app/hooks/use-on-click-outside'; import { pushEvent } from '@app/observability'; -import { IEditor } from '@app/types/maltekstseksjoner/responses'; +import type { IEditor } from '@app/types/maltekstseksjoner/responses'; +import { CalendarIcon, ClockDashedIcon, PencilWritingIcon, UploadIcon } from '@navikt/aksel-icons'; +import { Button, Tag } from '@navikt/ds-react'; +import { useRef, useState } from 'react'; +import { styled } from 'styled-components'; interface PublishedProps { publishedDateTime: string; @@ -105,16 +105,16 @@ const EditorList = styled.ul` position: absolute; top: 100%; right: 0; - background-color: white; + background-color: var(--a-bg-default); box-shadow: var(--a-shadow-medium); border-radius: var(--a-border-radius-medium); z-index: 1; list-style: none; margin: 0; - padding: 8px; + padding: var(--a-spacing-2); display: flex; flex-direction: column; - row-gap: 4px; + row-gap: var(--a-spacing-1); `; const ListItem = styled.li` @@ -128,5 +128,5 @@ const StyledTag = styled(Tag)` display: flex; flex-direction: row; align-items: center; - column-gap: 4px; + column-gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/toast/action-toast.tsx b/frontend/src/components/toast/action-toast.tsx index e1b7c66ec..a5e21fdb4 100644 --- a/frontend/src/components/toast/action-toast.tsx +++ b/frontend/src/components/toast/action-toast.tsx @@ -23,5 +23,5 @@ const ButtonRow = styled.div` display: flex; flex-direction: row-reverse; justify-content: space-between; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/toast/store.ts b/frontend/src/components/toast/store.ts index 876ff49b1..83d1d7488 100644 --- a/frontend/src/components/toast/store.ts +++ b/frontend/src/components/toast/store.ts @@ -1,5 +1,5 @@ import { TOAST_TIMEOUT } from './constants'; -import { NewMessage, ToastType } from './types'; +import { type NewMessage, ToastType } from './types'; type ListenerFn = (messages: Message[]) => void; @@ -34,7 +34,9 @@ class Store { public info = (message: React.ReactNode, timeout?: number) => this.addMessage(ToastType.INFO, message, timeout); private notify() { - this.listeners.forEach((listener) => listener(this.messages)); + for (const listener of this.listeners) { + listener(this.messages); + } } private addMessage(type: ToastType, message: React.ReactNode, timeout: number = TOAST_TIMEOUT): CloseFn { diff --git a/frontend/src/components/toast/styled-components.ts b/frontend/src/components/toast/styled-components.ts index 780c4c3ec..b6a44ee20 100644 --- a/frontend/src/components/toast/styled-components.ts +++ b/frontend/src/components/toast/styled-components.ts @@ -1,13 +1,13 @@ -import { Button } from '@navikt/ds-react'; -import { keyframes, styled } from 'styled-components'; import { SLIDE_DURATION } from '@app/components/toast/constants'; import { ToastType } from '@app/components/toast/types'; +import { Button } from '@navikt/ds-react'; +import { keyframes, styled } from 'styled-components'; export const Container = styled.div` display: grid; grid-template-columns: 24px 1fr; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); white-space: pre-wrap; hyphens: auto; `; @@ -15,7 +15,7 @@ export const Container = styled.div` export const Content = styled.div` display: flex; flex-direction: column; - row-gap: 8px; + row-gap: var(--a-spacing-2); `; export const StyledCloseButton = styled(Button)` @@ -80,7 +80,7 @@ export const TimedToastStyle = styled(BaseToastStyle)` bottom: 0; left: 0; width: 100%; - height: 4px; + height: var(--a-spacing-1); background-color: ${({ $type }) => getColor($type)}; transform-origin: left; animation-play-state: ${({ $paused }) => ($paused ? 'paused' : 'running')}; diff --git a/frontend/src/components/toast/toast-content/fetch-error-toast.tsx b/frontend/src/components/toast/toast-content/fetch-error-toast.tsx index 642e3070c..c6e3e19c9 100644 --- a/frontend/src/components/toast/toast-content/fetch-error-toast.tsx +++ b/frontend/src/components/toast/toast-content/fetch-error-toast.tsx @@ -1,7 +1,7 @@ +import { getErrorData } from '@app/functions/get-error-data'; import { Detail, Label } from '@navikt/ds-react'; -import { FetchArgs, FetchBaseQueryError } from '@reduxjs/toolkit/query/react'; +import type { FetchArgs, FetchBaseQueryError } from '@reduxjs/toolkit/query/react'; import { styled } from 'styled-components'; -import { getErrorData } from '@app/functions/get-error-data'; import { toast } from '../store'; export const apiErrorToast = (message: string, error: FetchBaseQueryError, args?: string | FetchArgs) => { diff --git a/frontend/src/components/toast/toast.tsx b/frontend/src/components/toast/toast.tsx index 64efb9f4b..317ce8e6e 100644 --- a/frontend/src/components/toast/toast.tsx +++ b/frontend/src/components/toast/toast.tsx @@ -1,5 +1,3 @@ -import { XMarkIcon } from '@navikt/aksel-icons'; -import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'; import { CheckmarkCircleFillIconColored, ExclamationmarkTriangleFillIconColored, @@ -13,8 +11,10 @@ import { StyledCloseButton, TimedToastStyle, } from '@app/components/toast/styled-components'; +import { XMarkIcon } from '@navikt/aksel-icons'; +import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'; import { SLIDE_DURATION, TOAST_TIMEOUT } from './constants'; -import { Message } from './store'; +import type { Message } from './store'; import { ToastType } from './types'; export const CLOSE_TOAST_EVENT_TYPE = 'close-toast'; @@ -45,7 +45,7 @@ export const Toast = memo( return () => element.removeEventListener(CLOSE_TOAST_EVENT_TYPE, slideOut); }, [slideOut]); - if (expiresAt !== Infinity) { + if (expiresAt !== Number.POSITIVE_INFINITY) { return ( ( const mouse = useRef(null); const onMouseLeave = useCallback(() => { - setExpiresAt(Date.now() + (remaining === null || remaining === Infinity ? TOAST_TIMEOUT : remaining)); + setExpiresAt( + Date.now() + (remaining === null || remaining === Number.POSITIVE_INFINITY ? TOAST_TIMEOUT : remaining), + ); setRemaining(null); }, [remaining, setExpiresAt]); const onMouseEnter = useCallback(() => { setRemaining(expiresAt - Date.now()); - setExpiresAt(Infinity); + setExpiresAt(Number.POSITIVE_INFINITY); }, [expiresAt, setExpiresAt]); useEffect(() => { @@ -112,7 +114,7 @@ const TimedToast = forwardRef( const { target } = mouse.current; if ( - expiresAt === Infinity && + expiresAt === Number.POSITIVE_INFINITY && ref.current !== null && target instanceof window.Node && ref.current !== target && @@ -120,7 +122,7 @@ const TimedToast = forwardRef( ) { onMouseLeave(); } - }, [expiresAt, onMouseLeave, ref]); + }, [expiresAt, onMouseLeave]); const slideOut = useCallback(() => { if (ref.current === null) { @@ -133,7 +135,7 @@ const TimedToast = forwardRef( }, [close]); useEffect(() => { - if (expiresAt === Infinity) { + if (expiresAt === Number.POSITIVE_INFINITY) { return; } @@ -169,7 +171,7 @@ TimedToast.displayName = 'TimedToast'; const SLIDE_OUT_KEYFRAMES: Keyframe[] = [ { transform: 'translateX(0%)' }, - { transform: 'translateX(calc(100% + 8px))' }, + { transform: 'translateX(calc(100% + var(--a-spacing-2)))' }, ]; const SLIDE_OUT_OPTIONS: KeyframeAnimationOptions = { diff --git a/frontend/src/components/toast/toasts.tsx b/frontend/src/components/toast/toasts.tsx index f7dacdea9..90c1cf171 100644 --- a/frontend/src/components/toast/toasts.tsx +++ b/frontend/src/components/toast/toasts.tsx @@ -1,6 +1,6 @@ import { useEffect, useRef, useState } from 'react'; import { styled } from 'styled-components'; -import { Message, toast } from './store'; +import { type Message, toast } from './store'; import { Toast } from './toast'; export const Toasts = () => { @@ -36,17 +36,17 @@ export const Toasts = () => { const Container = styled.div` position: fixed; - bottom: 8px; + bottom: var(--a-spacing-2); right: 0; z-index: 1000; display: flex; flex-direction: column; - row-gap: 8px; - padding-right: 8px; + row-gap: var(--a-spacing-2); + padding-right: var(--a-spacing-2); margin-right: 0; margin-bottom: 0; - margin-top: 8px; - max-height: calc(100% - 16px); + margin-top: var(--a-spacing-2); + max-height: calc(100% - var(--a-spacing-4)); overflow-y: auto; overflow-x: visible; `; diff --git a/frontend/src/components/toggle-button/toggle-button.tsx b/frontend/src/components/toggle-button/toggle-button.tsx index 471c8bf83..77d7c26a5 100644 --- a/frontend/src/components/toggle-button/toggle-button.tsx +++ b/frontend/src/components/toggle-button/toggle-button.tsx @@ -14,7 +14,7 @@ export const ToggleButton = styled.button` border-radius: 0.25rem; transition: box-shadow 0.1s ease; cursor: pointer; - background: none; + background-color: none; user-select: none; position: relative; font-size: 14px; @@ -32,8 +32,8 @@ export const ToggleButton = styled.button` &:disabled { cursor: not-allowed; - border-color: #6a6a6a; - background: #f1f1f1; + border-color: var(--a-border-subtle); + background-color: var(--a-bg-default); opacity: 0.7; } `; diff --git a/frontend/src/components/type/type.tsx b/frontend/src/components/type/type.tsx index c912fd5c4..096934e4e 100644 --- a/frontend/src/components/type/type.tsx +++ b/frontend/src/components/type/type.tsx @@ -1,7 +1,7 @@ -import { Skeleton, TagProps } from '@navikt/ds-react'; import { useTypeNameFromId } from '@app/hooks/use-kodeverk-ids'; import { TypeTag } from '@app/styled-components/labels'; -import { SaksTypeEnum } from '@app/types/kodeverk'; +import type { SaksTypeEnum } from '@app/types/kodeverk'; +import { Skeleton, type TagProps } from '@navikt/ds-react'; interface Props { type: SaksTypeEnum; diff --git a/frontend/src/components/upload-file-button/upload-file-button.tsx b/frontend/src/components/upload-file-button/upload-file-button.tsx index d5a38a9e4..a16e95f1e 100644 --- a/frontend/src/components/upload-file-button/upload-file-button.tsx +++ b/frontend/src/components/upload-file-button/upload-file-button.tsx @@ -1,12 +1,12 @@ -import { UploadIcon } from '@navikt/aksel-icons'; -import { Button, ButtonProps, Heading, Tooltip } from '@navikt/ds-react'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { forwardRef, useCallback, useRef } from 'react'; import { toast } from '@app/components/toast/store'; import { BYTES_PER_KB, formatFileSize } from '@app/functions/format-file-size'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { useUploadFileDocumentMutation } from '@app/redux-api/oppgaver/mutations/documents'; -import { DistribusjonsType } from '@app/types/documents/documents'; +import type { DistribusjonsType } from '@app/types/documents/documents'; +import { UploadIcon } from '@navikt/aksel-icons'; +import { Button, type ButtonProps, Heading, Tooltip } from '@navikt/ds-react'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { forwardRef, useCallback, useRef } from 'react'; const MEBI = BYTES_PER_KB * BYTES_PER_KB; const MAX_SIZE_MIB = 256; diff --git a/frontend/src/components/version-checker/toast.tsx b/frontend/src/components/version-checker/toast.tsx index 36125435c..60f9ad3e8 100644 --- a/frontend/src/components/version-checker/toast.tsx +++ b/frontend/src/components/version-checker/toast.tsx @@ -1,7 +1,7 @@ -import { CogRotationIcon } from '@navikt/aksel-icons'; -import { BodyShort, Button } from '@navikt/ds-react'; import { CLOSE_TOAST_EVENT_TYPE } from '@app/components/toast/toast'; import { pushEvent } from '@app/observability'; +import { CogRotationIcon } from '@navikt/aksel-icons'; +import { BodyShort, Button } from '@navikt/ds-react'; interface Props { isRequired?: boolean; diff --git a/frontend/src/components/version-checker/version-checker-status.tsx b/frontend/src/components/version-checker/version-checker-status.tsx index 92c4a3388..91674e020 100644 --- a/frontend/src/components/version-checker/version-checker-status.tsx +++ b/frontend/src/components/version-checker/version-checker-status.tsx @@ -1,16 +1,16 @@ -import { CogRotationIcon } from '@navikt/aksel-icons'; -import { BodyShort, Button, Modal } from '@navikt/ds-react'; -import { useCallback, useEffect, useRef, useState } from 'react'; import { toast } from '@app/components/toast/store'; import { VersionToast } from '@app/components/version-checker/toast'; import { ENVIRONMENT } from '@app/environment'; import { pushEvent } from '@app/observability'; +import { CogRotationIcon } from '@navikt/aksel-icons'; +import { BodyShort, Button, Modal } from '@navikt/ds-react'; +import { useCallback, useEffect, useRef, useState } from 'react'; import { UpdateRequest, VERSION_CHECKER } from './version-checker'; const IGNORE_UPDATE_KEY = 'ignoreUpdate'; const IGNORE_UPDATE_TIMEOUT = ENVIRONMENT.isProduction ? 1_000 * 60 * 60 : 10_000; // 1 hour for production, 10 seconds for development. -const UPDATE_TOAST_TIMEOUT: number = Infinity; +const UPDATE_TOAST_TIMEOUT: number = Number.POSITIVE_INFINITY; const UPDATED_TOAST_TIMEOUT: number = 5_000; export const VersionCheckerStatus = () => { diff --git a/frontend/src/components/versioned-tabs/tab-label.tsx b/frontend/src/components/versioned-tabs/tab-label.tsx index 7e3f9fcd0..35a7f67fa 100644 --- a/frontend/src/components/versioned-tabs/tab-label.tsx +++ b/frontend/src/components/versioned-tabs/tab-label.tsx @@ -43,5 +43,5 @@ export const TabLabel = ({ isDraft, isPublished, children }: TabLabelProps) => { const Container = styled.span` display: flex; align-items: center; - gap: 4px; + gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/versioned-tabs/versioned-tabs.tsx b/frontend/src/components/versioned-tabs/versioned-tabs.tsx index 5a5093b5d..b397f8801 100644 --- a/frontend/src/components/versioned-tabs/versioned-tabs.tsx +++ b/frontend/src/components/versioned-tabs/versioned-tabs.tsx @@ -1,8 +1,8 @@ +import { TabLabel } from '@app/components/versioned-tabs/tab-label'; import { DocPencilIcon, FileTextIcon, FolderFileIcon } from '@navikt/aksel-icons'; import { Tabs } from '@navikt/ds-react'; import { useEffect } from 'react'; import { styled } from 'styled-components'; -import { TabLabel } from '@app/components/versioned-tabs/tab-label'; interface DraftVersion { versionId: string; diff --git a/frontend/src/components/view-pdf/container.ts b/frontend/src/components/view-pdf/container.ts index 94dc50b03..fa0b4824b 100644 --- a/frontend/src/components/view-pdf/container.ts +++ b/frontend/src/components/view-pdf/container.ts @@ -3,9 +3,9 @@ import { styled } from 'styled-components'; export const Container = styled.section` display: flex; flex-direction: column; - margin: 4px 8px; - background: white; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + margin: var(--a-spacing-1) var(--a-spacing-2); + background-color: var(--a-bg-default); + box-shadow: var(--a-shadow-medium); border-radius: var(--a-border-radius-medium); position: relative; height: 100%; diff --git a/frontend/src/components/view-pdf/header.ts b/frontend/src/components/view-pdf/header.ts index 0ec562b29..fa701c1f3 100644 --- a/frontend/src/components/view-pdf/header.ts +++ b/frontend/src/components/view-pdf/header.ts @@ -1,25 +1,25 @@ import { styled } from 'styled-components'; export const Header = styled.div` - background: var(--a-green-100); + background-color: var(--a-green-100); display: flex; justify-content: left; align-items: center; position: relative; - padding-left: 8px; - padding-right: 8px; - padding-top: 8px; - padding-bottom: 8px; + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); + padding-top: var(--a-spacing-2); + padding-bottom: var(--a-spacing-2); z-index: 1; - column-gap: 4px; + column-gap: var(--a-spacing-1); `; export const StyledDocumentTitle = styled.h1` - font-size: 16px; + font-size: var(--a-spacing-4); font-weight: bold; margin: 0; - padding-left: 8px; - padding-right: 8px; + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/frontend/src/components/view-pdf/reload-button.tsx b/frontend/src/components/view-pdf/reload-button.tsx index fa10e9cf6..9d5100fd4 100644 --- a/frontend/src/components/view-pdf/reload-button.tsx +++ b/frontend/src/components/view-pdf/reload-button.tsx @@ -1,7 +1,7 @@ +import { DocumentTypeEnum } from '@app/types/documents/documents'; import { ArrowsCirclepathIcon } from '@navikt/aksel-icons'; import { Button } from '@navikt/ds-react'; -import { DocumentTypeEnum } from '@app/types/documents/documents'; -import { IShownDocument } from './types'; +import type { IShownDocument } from './types'; interface Props { showDocumentList: IShownDocument[]; diff --git a/frontend/src/components/view-pdf/types.ts b/frontend/src/components/view-pdf/types.ts index fb344b040..33b4c221d 100644 --- a/frontend/src/components/view-pdf/types.ts +++ b/frontend/src/components/view-pdf/types.ts @@ -1,5 +1,5 @@ -import { DocumentTypeEnum } from '@app/types/documents/documents'; -import { IJournalfoertDokumentId } from '@app/types/oppgave-common'; +import type { DocumentTypeEnum } from '@app/types/documents/documents'; +import type { IJournalfoertDokumentId } from '@app/types/oppgave-common'; interface IShownNewDocument { documentId: string; diff --git a/frontend/src/components/view-pdf/use-mark-visited.ts b/frontend/src/components/view-pdf/use-mark-visited.ts index 2f6731d72..4b008fd47 100644 --- a/frontend/src/components/view-pdf/use-mark-visited.ts +++ b/frontend/src/components/view-pdf/use-mark-visited.ts @@ -1,9 +1,9 @@ -import { skipToken } from '@reduxjs/toolkit/query'; -import { useEffect } from 'react'; import { getJournalfoertDocumentTabUrl, getNewDocumentTabUrl } from '@app/domain/tabbed-document-url'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { useShownDocuments } from '@app/hooks/use-shown-documents'; import { DocumentTypeEnum } from '@app/types/documents/documents'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useEffect } from 'react'; export const useMarkVisited = (url: string | undefined) => { const oppgaveId = useOppgaveId(); @@ -23,14 +23,14 @@ export const useMarkVisited = (url: string | undefined) => { return; } - showDocumentList.forEach((document) => { + for (const document of showDocumentList) { const documentUrl = document.type === DocumentTypeEnum.JOURNALFOERT ? getJournalfoertDocumentTabUrl(document.journalpostId, document.dokumentInfoId) : getNewDocumentTabUrl(oppgaveId, document.documentId); window.history.replaceState(null, '', documentUrl); - }); + } window.history.replaceState(null, '', currentUrl); }, [oppgaveId, showDocumentList, url]); diff --git a/frontend/src/components/view-pdf/use-merged-document.ts b/frontend/src/components/view-pdf/use-merged-document.ts index 24954cae3..b3218dbb0 100644 --- a/frontend/src/components/view-pdf/use-merged-document.ts +++ b/frontend/src/components/view-pdf/use-merged-document.ts @@ -1,8 +1,8 @@ -import { skipToken } from '@reduxjs/toolkit/query'; -import { useMemo } from 'react'; import { useMergedDocumentsReferenceQuery } from '@app/redux-api/oppgaver/queries/documents'; import { DocumentTypeEnum } from '@app/types/documents/documents'; -import { IShownArchivedDocument, IShownDocument } from './types'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useMemo } from 'react'; +import type { IShownArchivedDocument, IShownDocument } from './types'; export const useMergedDocument = (showDocumentList: IShownDocument[]) => { const archivedDocuments = useMemo(() => showDocumentList.filter(isArchivedDocument), [showDocumentList]); diff --git a/frontend/src/components/view-pdf/use-shown-document-metadata.ts b/frontend/src/components/view-pdf/use-shown-document-metadata.ts index 6bb9d80d5..8c5ef7b6a 100644 --- a/frontend/src/components/view-pdf/use-shown-document-metadata.ts +++ b/frontend/src/components/view-pdf/use-shown-document-metadata.ts @@ -1,6 +1,4 @@ -import { skipToken } from '@reduxjs/toolkit/query'; -import { useMemo } from 'react'; -import { IShownDocument } from '@app/components/view-pdf/types'; +import type { IShownDocument } from '@app/components/view-pdf/types'; import { getAttachmentsOverviewInlineUrl, getJournalfoertDocumentInlineUrl, @@ -17,7 +15,9 @@ import { getNewDocumentTabId, getNewDocumentTabUrl, } from '@app/domain/tabbed-document-url'; -import { DocumentTypeEnum, IMergedDocumentsResponse } from '@app/types/documents/documents'; +import { DocumentTypeEnum, type IMergedDocumentsResponse } from '@app/types/documents/documents'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useMemo } from 'react'; type DocumentData = | { inlineUrl: string; tabUrl: string; tabId: string } diff --git a/frontend/src/components/view-pdf/view-pdf.tsx b/frontend/src/components/view-pdf/view-pdf.tsx index 9e3f8215e..540eeb4a3 100644 --- a/frontend/src/components/view-pdf/view-pdf.tsx +++ b/frontend/src/components/view-pdf/view-pdf.tsx @@ -1,7 +1,3 @@ -import { ExternalLinkIcon, XMarkIcon, ZoomMinusIcon, ZoomPlusIcon } from '@navikt/aksel-icons'; -import { Alert, Button, ButtonProps, Loader } from '@navikt/ds-react'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { useCallback, useContext, useEffect, useState } from 'react'; import { TabContext } from '@app/components/documents/tab-context'; import { toast } from '@app/components/toast/store'; import { Container, ErrorOrLoadingContainer } from '@app/components/view-pdf/container'; @@ -12,6 +8,10 @@ import { useShownDocumentMetadata } from '@app/components/view-pdf/use-shown-doc import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { useDocumentsPdfViewed, useDocumentsPdfWidth } from '@app/hooks/settings/use-setting'; import { useShownDocuments } from '@app/hooks/use-shown-documents'; +import { ExternalLinkIcon, XMarkIcon, ZoomMinusIcon, ZoomPlusIcon } from '@navikt/aksel-icons'; +import { Alert, Button, type ButtonProps, Loader } from '@navikt/ds-react'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useCallback, useContext, useEffect, useState } from 'react'; import { NoFlickerReloadPdf, useNoFlickerReloadPdf } from './no-flicker-reload'; import { useMergedDocument } from './use-merged-document'; diff --git a/frontend/src/custom-data/abbreviations.ts b/frontend/src/custom-data/abbreviations.ts index 4253a0ef7..12f6a01b5 100644 --- a/frontend/src/custom-data/abbreviations.ts +++ b/frontend/src/custom-data/abbreviations.ts @@ -1,6 +1,6 @@ -import { CustomAbbrevation } from '@app/types/bruker'; +import type { CustomAbbrevation } from '@app/types/bruker'; -const URL = `/api/kabal-innstillinger/me/abbreviations`; +const URL = '/api/kabal-innstillinger/me/abbreviations'; class Abbreviations { private abbreviations: CustomAbbrevation[] = []; diff --git a/frontend/src/domain/date.ts b/frontend/src/domain/date.ts index 7851b3cd0..c92d2ea25 100644 --- a/frontend/src/domain/date.ts +++ b/frontend/src/domain/date.ts @@ -69,6 +69,7 @@ export const isoTimeToPretty = (isoTime: ISOTime | null | undefined): prettyTime return _isoTimeToPretty(isoTime); }; +// biome-ignore lint/style/noNonNullAssertion: Internal function. const _isoTimeToPretty = (isoTime: ISOTime): prettyTime => isoTime.split('.')[0]!; export const isoDateToPretty = (isoDate: ISODate | null | undefined): prettyDate | null => { diff --git a/frontend/src/domain/employee-name.ts b/frontend/src/domain/employee-name.ts index 2c69782db..0c56396f2 100644 --- a/frontend/src/domain/employee-name.ts +++ b/frontend/src/domain/employee-name.ts @@ -1,4 +1,4 @@ -import { INavEmployee } from '@app/types/bruker'; +import type { INavEmployee } from '@app/types/bruker'; const SYSTEM_USER = 'SYSTEMBRUKER'; const SYSTEM_USER_NAME = 'Kabal'; diff --git a/frontend/src/domain/find-document.ts b/frontend/src/domain/find-document.ts index c1f060cd3..feff389b6 100644 --- a/frontend/src/domain/find-document.ts +++ b/frontend/src/domain/find-document.ts @@ -1,4 +1,4 @@ -import { IArkivertDocument } from '@app/types/arkiverte-documents'; +import type { IArkivertDocument } from '@app/types/arkiverte-documents'; export const findDocument = ( journalpostId: string, diff --git a/frontend/src/domain/orgnr.ts b/frontend/src/domain/orgnr.ts index e983d2494..519cc0e49 100644 --- a/frontend/src/domain/orgnr.ts +++ b/frontend/src/domain/orgnr.ts @@ -10,7 +10,7 @@ export const isValidOrgnr = (orgnr: string): boolean => { const productsSum = parts.reduce((acc, curr, index) => { if (indexIsInRange(index)) { - return acc + parseInt(curr, 10) * WEIGHTS[index]; + return acc + Number.parseInt(curr, 10) * WEIGHTS[index]; } return acc; @@ -22,7 +22,7 @@ export const isValidOrgnr = (orgnr: string): boolean => { return false; } - const last = parseInt(parts[8], 10); + const last = Number.parseInt(parts[8], 10); if (controlNumber === 11) { return last === 0; diff --git a/frontend/src/environment.ts b/frontend/src/environment.ts index bc69a0b57..b60f03c4e 100644 --- a/frontend/src/environment.ts +++ b/frontend/src/environment.ts @@ -55,7 +55,8 @@ class Environment implements EnvironmentVariables { private getIsAnsattDomain(): boolean { if (this.isProduction) { return window.location.hostname.endsWith('.ansatt.nav.no'); - } else if (this.isDevelopment) { + } + if (this.isDevelopment) { return window.location.hostname.endsWith('.ansatt.dev.nav.no'); } diff --git a/frontend/src/error-boundary/error-boundary.tsx b/frontend/src/error-boundary/error-boundary.tsx index 4ae8598dc..345e3ef02 100644 --- a/frontend/src/error-boundary/error-boundary.tsx +++ b/frontend/src/error-boundary/error-boundary.tsx @@ -1,7 +1,7 @@ -import { Button, ButtonProps } from '@navikt/ds-react'; -import { Component, ErrorInfo, ReactNode } from 'react'; -import { styled } from 'styled-components'; import { pushError } from '@app/observability'; +import { Button, type ButtonProps } from '@navikt/ds-react'; +import { Component, type ErrorInfo, type ReactNode } from 'react'; +import { styled } from 'styled-components'; interface Props { children: ReactNode; @@ -74,36 +74,36 @@ const ActionButton = ({ buttonText, buttonIcon, ...rest }: ActionButtonProps) => const ErrorContainer = styled.section` display: block; width: 100%; - background: var(--a-bg-default); - padding: 16px; + background-color: var(--a-bg-default); + padding: var(--a-spacing-4); overflow-y: auto; box-shadow: var(--a-shadow-medium); `; export const StyledDescriptionTerm = styled.dt` font-weight: bold; - margin-top: 16px; + margin-top: var(--a-spacing-4); `; export const StyledPreDescriptionDetails = styled.dd` display: block; - padding: 8px; - background-color: #f5f5f5; - border: 1px solid #ddd; + padding: var(--a-spacing-2); + background-color: var(--a-surface-subtle); + border: 1px solid var(--a-border-divider); border-radius: var(--a-border-radius-medium); margin-left: 0; - margin-top: 4px; + margin-top: var(--a-spacing-1); white-space: pre-wrap; word-break: break-all; `; const StyledErrorMessage = styled.code` display: block; - padding: 16px; - background-color: #f5f5f5; - border: 1px solid #ddd; + padding: var(--a-spacing-4); + background-color: var(--a-surface-subtle); + border: 1px solid var(--a-border-divider); border-radius: var(--a-border-radius-medium); - margin-bottom: 16px; + margin-bottom: var(--a-spacing-4); white-space: pre-wrap; word-break: normal; overflow-wrap: break-word; diff --git a/frontend/src/frame-times.ts b/frontend/src/frame-times.ts index ee22e8650..6c6d2ba36 100644 --- a/frontend/src/frame-times.ts +++ b/frontend/src/frame-times.ts @@ -1,6 +1,6 @@ -import { faro } from '@grafana/faro-web-sdk'; import { pushMeasurement } from '@app/observability'; import { user } from '@app/static-data/static-data'; +import { faro } from '@grafana/faro-web-sdk'; const MEASURE_FRAME_TIME_INTERVAL = 10_000; diff --git a/frontend/src/functions/are-addresses-equal.ts b/frontend/src/functions/are-addresses-equal.ts index 78e9a1b35..9a0210df6 100644 --- a/frontend/src/functions/are-addresses-equal.ts +++ b/frontend/src/functions/are-addresses-equal.ts @@ -1,4 +1,4 @@ -import { IAddress } from '@app/types/documents/recipients'; +import type { IAddress } from '@app/types/documents/recipients'; export const areAddressesEqual = (a: IAddress | null, b: IAddress | null) => { if (a === b) { diff --git a/frontend/src/functions/are-descendants-equal.test.ts b/frontend/src/functions/are-descendants-equal.test.ts index a7720f39b..34e8d97eb 100644 --- a/frontend/src/functions/are-descendants-equal.test.ts +++ b/frontend/src/functions/are-descendants-equal.test.ts @@ -1,6 +1,6 @@ -import { TElement, TText } from '@udecode/plate-common'; import { describe, expect, it } from 'bun:test'; import { areDescendantsEqual, areKeysEqual } from '@app/functions/are-descendants-equal'; +import type { TElement, TText } from '@udecode/plate-common'; describe('are-descendants-equal', () => { it('should return false if the two lists are of different lengths', () => { diff --git a/frontend/src/functions/are-descendants-equal.ts b/frontend/src/functions/are-descendants-equal.ts index e5b5ee491..d7d8f89cd 100644 --- a/frontend/src/functions/are-descendants-equal.ts +++ b/frontend/src/functions/are-descendants-equal.ts @@ -1,5 +1,5 @@ -import { TDescendant, isElement } from '@udecode/plate-common'; import { removeEmptyCharInText } from '@app/functions/remove-empty-char-in-text'; +import { type TDescendant, isElement } from '@udecode/plate-common'; export const areDescendantsEqual = (listA: TDescendant[], listB: TDescendant[]): boolean => { if (listA.length !== listB.length) { diff --git a/frontend/src/functions/deep-freeze.ts b/frontend/src/functions/deep-freeze.ts index 7dd761277..87a7885ef 100644 --- a/frontend/src/functions/deep-freeze.ts +++ b/frontend/src/functions/deep-freeze.ts @@ -1,4 +1,4 @@ -import { GenericObject, Immutable, isGenericObject } from '@app/types/types'; +import { type GenericObject, type Immutable, isGenericObject } from '@app/types/types'; export const deepFreeze = (toFreeze: T): Immutable => { // Retrieve the property names defined on object. diff --git a/frontend/src/functions/error-type-guard.ts b/frontend/src/functions/error-type-guard.ts index 2bf7d5190..c1589f4e4 100644 --- a/frontend/src/functions/error-type-guard.ts +++ b/frontend/src/functions/error-type-guard.ts @@ -1,5 +1,5 @@ -import { DEFAULT_FIELD_NAMES } from '@app/types/field-names'; -import { GenericObject, isGenericObject } from './../types/types'; +import type { DEFAULT_FIELD_NAMES } from '@app/types/field-names'; +import { type GenericObject, isGenericObject } from './../types/types'; export interface IValidationError { reason: string; @@ -38,7 +38,7 @@ export const isReduxValidationResponse = (error: unknown): error is IReduxError< }; const isValidationSection = (error: GenericObject): error is IValidationSection => - typeof error['section'] === 'string' && Array.isArray(error['properties']); + typeof error.section === 'string' && Array.isArray(error.properties); interface IReduxError { status: number; @@ -46,4 +46,4 @@ interface IReduxError { } const isReduxError = (error: unknown): error is IReduxError => - isGenericObject(error) && typeof error['status'] === 'number'; + isGenericObject(error) && typeof error.status === 'number'; diff --git a/frontend/src/functions/format-file-size.ts b/frontend/src/functions/format-file-size.ts index 8e033f423..9dad00cd1 100644 --- a/frontend/src/functions/format-file-size.ts +++ b/frontend/src/functions/format-file-size.ts @@ -13,10 +13,10 @@ export const formatFileSize = (size: number) => { for (let i = 0; i < UNITS.length; i++) { const unit = UNITS[i]; - const limit = Math.pow(BYTES_PER_KB, i + 2); + const limit = BYTES_PER_KB ** (i + 2); if (size < limit) { - return `${(size / Math.pow(BYTES_PER_KB, i + 1)).toLocaleString(undefined, { + return `${(size / BYTES_PER_KB ** (i + 1)).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2, })} ${unit}`; diff --git a/frontend/src/functions/get-error-data.ts b/frontend/src/functions/get-error-data.ts index 8557da3bb..cf0c09063 100644 --- a/frontend/src/functions/get-error-data.ts +++ b/frontend/src/functions/get-error-data.ts @@ -1,6 +1,6 @@ -import { SerializedError } from '@reduxjs/toolkit'; -import { FetchBaseQueryError } from '@reduxjs/toolkit/query/react'; import { isApiError } from '@app/types/errors'; +import type { SerializedError } from '@reduxjs/toolkit'; +import type { FetchBaseQueryError } from '@reduxjs/toolkit/query/react'; export interface ErrorMessage { title: string; @@ -20,7 +20,8 @@ export const getErrorData = (error: FetchBaseQueryError | SerializedError | unde if (typeof error.status === 'number') { if (typeof error.data === 'string') { return { title: error.data, status: error.status }; - } else if (isApiError(error.data)) { + } + if (isApiError(error.data)) { return error.data; } } @@ -43,9 +44,11 @@ export const getErrorData = (error: FetchBaseQueryError | SerializedError | unde const getCustomErrorMessage = (data?: unknown): string | undefined => { if (typeof data === 'string') { return data; - } else if (typeof data === 'number') { + } + if (typeof data === 'number') { return data.toString(); - } else if (typeof data === 'object') { + } + if (typeof data === 'object') { return JSON.stringify(data); } diff --git a/frontend/src/functions/is-incoming-document.ts b/frontend/src/functions/is-incoming-document.ts index b07553f33..16ca37e78 100644 --- a/frontend/src/functions/is-incoming-document.ts +++ b/frontend/src/functions/is-incoming-document.ts @@ -1,4 +1,4 @@ -import { DistribusjonsType, IMainDocument } from '@app/types/documents/documents'; +import { DistribusjonsType, type IMainDocument } from '@app/types/documents/documents'; export const getIsIncomingDocument = (document: IMainDocument | undefined): boolean => { if (document === undefined) { diff --git a/frontend/src/functions/is-rich-plain-text.ts b/frontend/src/functions/is-rich-plain-text.ts index 6ae0904fa..0a276d3c6 100644 --- a/frontend/src/functions/is-rich-plain-text.ts +++ b/frontend/src/functions/is-rich-plain-text.ts @@ -3,9 +3,9 @@ import { PlainTextTypes, REGELVERK_TYPE, RichTextTypes, - TextTypes, + type TextTypes, } from '@app/types/common-text-types'; -import { IGodFormulering, IPlainText, IRegelverk, IRichText, IText } from '@app/types/texts/responses'; +import type { IGodFormulering, IPlainText, IRegelverk, IRichText, IText } from '@app/types/texts/responses'; const PLAIN_TEXT_VALUES = Object.values(PlainTextTypes); const RICH_TEXT_VALUES = Object.values(RichTextTypes); diff --git a/frontend/src/functions/remove-empty-char-in-text.test.ts b/frontend/src/functions/remove-empty-char-in-text.test.ts index a690e78ce..e0d117a9a 100644 --- a/frontend/src/functions/remove-empty-char-in-text.test.ts +++ b/frontend/src/functions/remove-empty-char-in-text.test.ts @@ -22,7 +22,7 @@ describe('remove empty char in string', () => { it('should not change strings that do not contain empty char', () => { expect.assertions(1); - const actual = removeEmptyCharInText(`testtest`); + const actual = removeEmptyCharInText('testtest'); expect(actual).toBe('testtest'); }); }); diff --git a/frontend/src/functions/remove-empty-char-in-text.ts b/frontend/src/functions/remove-empty-char-in-text.ts index aa72605e2..27a38ea60 100644 --- a/frontend/src/functions/remove-empty-char-in-text.ts +++ b/frontend/src/functions/remove-empty-char-in-text.ts @@ -1,4 +1,4 @@ -const EMPTY_CHAR_CODE = 8203; +export const EMPTY_CHAR_CODE = 8203; const REMOVE_REGEX = new RegExp(String.fromCharCode(EMPTY_CHAR_CODE), 'g'); export const removeEmptyCharInText = (text: string): string => text.replace(REMOVE_REGEX, ''); diff --git a/frontend/src/functions/sort-with-numbers/sort-with-numbers.ts b/frontend/src/functions/sort-with-numbers/sort-with-numbers.ts index 5090e7a74..d14f61466 100644 --- a/frontend/src/functions/sort-with-numbers/sort-with-numbers.ts +++ b/frontend/src/functions/sort-with-numbers/sort-with-numbers.ts @@ -28,7 +28,7 @@ export const sortWithNumbers = (a: string, b: string): number => { } } - if (!aPartIsString && !bPartIsString) { + if (!(aPartIsString || bPartIsString)) { const diff = aPart - bPart; if (diff !== 0) { @@ -59,7 +59,7 @@ const split = (value: string): (string | number)[] => { continue; } - const parsedNumber = parseInt(part, 10); + const parsedNumber = Number.parseInt(part, 10); result.push(Number.isNaN(parsedNumber) ? part : parsedNumber); } diff --git a/frontend/src/functions/sort-with-ordinals/sort-with-ordinals.ts b/frontend/src/functions/sort-with-ordinals/sort-with-ordinals.ts index 5635e8e88..040ceaeac 100644 --- a/frontend/src/functions/sort-with-ordinals/sort-with-ordinals.ts +++ b/frontend/src/functions/sort-with-ordinals/sort-with-ordinals.ts @@ -38,7 +38,7 @@ export const sortWithOrdinals = (a: string, b: string): number => { diff = aPartIsOrdinal && bPartIsOrdinal ? aPartOrdinalValue - bPartOrdinalValue : aPart.localeCompare(bPart); } - if (!aPartIsString && !bPartIsString) { + if (!(aPartIsString || bPartIsString)) { diff = aPart - bPart; } @@ -79,7 +79,7 @@ const split = (value: string): (string | number)[] => { continue; } - const parsedNumber = parseInt(part, 10); + const parsedNumber = Number.parseInt(part, 10); result.push(Number.isNaN(parsedNumber) ? part : parsedNumber); } diff --git a/frontend/src/headers.ts b/frontend/src/headers.ts index 80ae91ec3..7a0118312 100644 --- a/frontend/src/headers.ts +++ b/frontend/src/headers.ts @@ -1,7 +1,7 @@ import { ENVIRONMENT } from '@app/environment'; import { generateTraceParent } from '@app/functions/generate-request-id'; -const tabId = crypto.randomUUID(); +export const TAB_UUID = crypto.randomUUID(); enum HeaderKeys { TRACEPARENT = 'traceparent', @@ -18,13 +18,13 @@ enum QueryKeys { export const getHeaders = () => ({ [HeaderKeys.TRACEPARENT]: generateTraceParent(), [HeaderKeys.VERSION]: ENVIRONMENT.version, - [HeaderKeys.TAB_ID]: tabId, + [HeaderKeys.TAB_ID]: TAB_UUID, }); export const setHeaders = (headers: Headers): Headers => { headers.set(HeaderKeys.TRACEPARENT, generateTraceParent()); headers.set(HeaderKeys.VERSION, ENVIRONMENT.version); - headers.set(HeaderKeys.TAB_ID, tabId); + headers.set(HeaderKeys.TAB_ID, TAB_UUID); return headers; }; @@ -33,5 +33,5 @@ export const getQueryParams = () => { const { version } = ENVIRONMENT; const traceParent = generateTraceParent(); - return `${QueryKeys.VERSION}=${version}&${QueryKeys.TAB_ID}=${tabId}&${QueryKeys.TRACEPARENT}=${traceParent}`; + return `${QueryKeys.VERSION}=${version}&${QueryKeys.TAB_ID}=${TAB_UUID}&${QueryKeys.TRACEPARENT}=${traceParent}`; }; diff --git a/frontend/src/hooks/oppgavebehandling/use-has-access.ts b/frontend/src/hooks/oppgavebehandling/use-has-access.ts index c300b69aa..8c00f0ff2 100644 --- a/frontend/src/hooks/oppgavebehandling/use-has-access.ts +++ b/frontend/src/hooks/oppgavebehandling/use-has-access.ts @@ -1,4 +1,3 @@ -import { useContext } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useHasRole } from '@app/hooks/use-has-role'; @@ -6,6 +5,7 @@ import { useHasYtelseAccess } from '@app/hooks/use-has-ytelse-access'; import { Role } from '@app/types/bruker'; import { SaksTypeEnum } from '@app/types/kodeverk'; import { FlowState } from '@app/types/oppgave-common'; +import { useContext } from 'react'; export const useHasBehandlingAccess = (): boolean => { const { user } = useContext(StaticDataContext); diff --git a/frontend/src/hooks/settings/helpers.ts b/frontend/src/hooks/settings/helpers.ts index c5148d248..24ec8c81a 100644 --- a/frontend/src/hooks/settings/helpers.ts +++ b/frontend/src/hooks/settings/helpers.ts @@ -1,6 +1,6 @@ +import { StaticDataContext } from '@app/components/app/static-data-context'; import { skipToken } from '@reduxjs/toolkit/query'; import { useCallback, useContext, useEffect, useMemo, useState } from 'react'; -import { StaticDataContext } from '@app/components/app/static-data-context'; import { useOppgaveId } from '../oppgavebehandling/use-oppgave-id'; import { SETTINGS_MANAGER } from './manager'; @@ -12,7 +12,7 @@ export interface Setting { remove: () => void; } -export const useSetting = (property: string, syncBetweenTabs: boolean = false): Setting => { +export const useSetting = (property: string, syncBetweenTabs = false): Setting => { const { user } = useContext(StaticDataContext); const key = `${user.navIdent}/${property}`; diff --git a/frontend/src/hooks/settings/use-setting.ts b/frontend/src/hooks/settings/use-setting.ts index 8fcec5bd2..c2be56dc4 100644 --- a/frontend/src/hooks/settings/use-setting.ts +++ b/frontend/src/hooks/settings/use-setting.ts @@ -1,16 +1,16 @@ -import { useMemo } from 'react'; -import { IShownDocument } from '@app/components/view-pdf/types'; +import type { IShownDocument } from '@app/components/view-pdf/types'; import { - Setting, + type Setting, useBooleanSetting, useJsonSetting, useNumberSetting, useOppgavePath, useSetting, } from '@app/hooks/settings/helpers'; -import { ArchivedDocumentsColumn } from '@app/hooks/settings/use-archived-documents-setting'; +import type { ArchivedDocumentsColumn } from '@app/hooks/settings/use-archived-documents-setting'; import { Journalposttype } from '@app/types/arkiverte-documents'; -import { SortOrder } from '@app/types/sort'; +import type { SortOrder } from '@app/types/sort'; +import { useMemo } from 'react'; // Oppgavebehandling tabs export const useDocumentsEnabled = () => useBooleanSetting(useOppgavePath('tabs/documents/enabled')); diff --git a/frontend/src/hooks/use-all-temaer.ts b/frontend/src/hooks/use-all-temaer.ts index 799f57652..95ffb21c8 100644 --- a/frontend/src/hooks/use-all-temaer.ts +++ b/frontend/src/hooks/use-all-temaer.ts @@ -1,5 +1,5 @@ import { useTema } from '@app/simple-api-state/use-kodeverk'; -import { IKodeverkValue } from '@app/types/kodeverk'; +import type { IKodeverkValue } from '@app/types/kodeverk'; export const useAllTemaer = (): IKodeverkValue[] => { const { data } = useTema(); diff --git a/frontend/src/hooks/use-available-hjemler.ts b/frontend/src/hooks/use-available-hjemler.ts index 55b8677bd..ce5414e4c 100644 --- a/frontend/src/hooks/use-available-hjemler.ts +++ b/frontend/src/hooks/use-available-hjemler.ts @@ -1,5 +1,5 @@ +import type { IKodeverkValue } from '@app/types/kodeverk'; import { useMemo } from 'react'; -import { IKodeverkValue } from '@app/types/kodeverk'; import { useAvailableYtelserForEnhet } from './use-available-ytelser'; export const useAvailableHjemler = () => { diff --git a/frontend/src/hooks/use-available-ytelser.ts b/frontend/src/hooks/use-available-ytelser.ts index dd3ae5de4..057040dcf 100644 --- a/frontend/src/hooks/use-available-ytelser.ts +++ b/frontend/src/hooks/use-available-ytelser.ts @@ -1,9 +1,9 @@ -import { useContext, useMemo } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { isNotUndefined } from '@app/functions/is-not-type-guards'; import { useEnhetYtelser } from '@app/simple-api-state/use-enhet-ytelser'; import { useLatestYtelser } from '@app/simple-api-state/use-kodeverk'; -import { IYtelse } from '@app/types/kodeverk'; +import type { IYtelse } from '@app/types/kodeverk'; +import { useContext, useMemo } from 'react'; const EMPTY_ARRAY: IYtelse[] = []; diff --git a/frontend/src/hooks/use-can-document/common.ts b/frontend/src/hooks/use-can-document/common.ts index f0cedfbcd..ee9745e40 100644 --- a/frontend/src/hooks/use-can-document/common.ts +++ b/frontend/src/hooks/use-can-document/common.ts @@ -1,12 +1,12 @@ import { CreatorRole, DocumentTypeEnum, - IJournalfoertDokumentReference, - IMainDocument, + type IJournalfoertDokumentReference, + type IMainDocument, } from '@app/types/documents/documents'; import { SaksTypeEnum } from '@app/types/kodeverk'; import { FlowState } from '@app/types/oppgave-common'; -import { IOppgavebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; +import type { IOppgavebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; export const isSentToRol = (oppgave: IOppgavebehandling) => (oppgave.typeId === SaksTypeEnum.KLAGE || oppgave.typeId === SaksTypeEnum.ANKE) && diff --git a/frontend/src/hooks/use-can-document/use-can-delete-document.ts b/frontend/src/hooks/use-can-document/use-can-delete-document.ts index 5e33e47be..f46d97285 100644 --- a/frontend/src/hooks/use-can-document/use-can-delete-document.ts +++ b/frontend/src/hooks/use-can-document/use-can-delete-document.ts @@ -1,4 +1,3 @@ -import { useMemo } from 'react'; import { getIsIncomingDocument } from '@app/functions/is-incoming-document'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { canRolEditDocument } from '@app/hooks/use-can-document/common'; @@ -8,7 +7,8 @@ import { useIsFullfoert } from '@app/hooks/use-is-fullfoert'; import { useIsRol } from '@app/hooks/use-is-rol'; import { useIsSaksbehandler } from '@app/hooks/use-is-saksbehandler'; import { Role } from '@app/types/bruker'; -import { CreatorRole, IMainDocument } from '@app/types/documents/documents'; +import { CreatorRole, type IMainDocument } from '@app/types/documents/documents'; +import { useMemo } from 'react'; export const useCanDeleteDocument = ( document: IMainDocument | null, diff --git a/frontend/src/hooks/use-can-document/use-can-drop-on-document.ts b/frontend/src/hooks/use-can-document/use-can-drop-on-document.ts index e0c8e3da5..a07b27298 100644 --- a/frontend/src/hooks/use-can-document/use-can-drop-on-document.ts +++ b/frontend/src/hooks/use-can-document/use-can-drop-on-document.ts @@ -1,4 +1,3 @@ -import { useContext } from 'react'; import { DragAndDropContext } from '@app/components/documents/drag-context'; import { getIsRolQuestions } from '@app/components/documents/new-documents/helpers'; import { getIsIncomingDocument } from '@app/functions/is-incoming-document'; @@ -9,8 +8,9 @@ import { useIsFullfoert } from '@app/hooks/use-is-fullfoert'; import { useIsRol } from '@app/hooks/use-is-rol'; import { useIsSaksbehandler } from '@app/hooks/use-is-saksbehandler'; import { Role } from '@app/types/bruker'; -import { DocumentTypeEnum, IMainDocument } from '@app/types/documents/documents'; -import { IOppgavebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; +import { DocumentTypeEnum, type IMainDocument } from '@app/types/documents/documents'; +import type { IOppgavebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; +import { useContext } from 'react'; import { isSentToRol } from './common'; export const useCanDropOnDocument = (targetDocument: IMainDocument) => { diff --git a/frontend/src/hooks/use-can-document/use-can-edit-document.ts b/frontend/src/hooks/use-can-document/use-can-edit-document.ts index 2074ab875..4553cae3b 100644 --- a/frontend/src/hooks/use-can-document/use-can-edit-document.ts +++ b/frontend/src/hooks/use-can-document/use-can-edit-document.ts @@ -7,7 +7,7 @@ import { useIsFullfoert } from '@app/hooks/use-is-fullfoert'; import { useIsRol } from '@app/hooks/use-is-rol'; import { useIsSaksbehandler } from '@app/hooks/use-is-saksbehandler'; import { Role } from '@app/types/bruker'; -import { CreatorRole, DocumentTypeEnum, IMainDocument } from '@app/types/documents/documents'; +import { CreatorRole, DocumentTypeEnum, type IMainDocument } from '@app/types/documents/documents'; export const useCanEditDocument = (document: IMainDocument, parentDocument?: IMainDocument) => { const isRol = useIsRol(); diff --git a/frontend/src/hooks/use-can-edit.ts b/frontend/src/hooks/use-can-edit.ts index e8f99bc8d..170236887 100644 --- a/frontend/src/hooks/use-can-edit.ts +++ b/frontend/src/hooks/use-can-edit.ts @@ -1,5 +1,5 @@ -import { useContext, useMemo } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; +import { useContext, useMemo } from 'react'; import { useOppgave } from './oppgavebehandling/use-oppgave'; export const useCanEdit = () => { diff --git a/frontend/src/hooks/use-check-document.ts b/frontend/src/hooks/use-check-document.ts index 34e316221..00916fcac 100644 --- a/frontend/src/hooks/use-check-document.ts +++ b/frontend/src/hooks/use-check-document.ts @@ -1,7 +1,7 @@ -import { skipToken } from '@reduxjs/toolkit/query'; -import { useCallback } from 'react'; import { useRemoveTilknyttetDocumentMutation } from '@app/redux-api/oppgaver/mutations/remove-tilknytt-document'; import { useTilknyttDocumentMutation } from '@app/redux-api/oppgaver/mutations/tilknytt-document'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useCallback } from 'react'; export const useCheckDocument = ( oppgaveId: string | typeof skipToken, diff --git a/frontend/src/hooks/use-contains-rol-attachments.ts b/frontend/src/hooks/use-contains-rol-attachments.ts index 005e54333..4e186a8e5 100644 --- a/frontend/src/hooks/use-contains-rol-attachments.ts +++ b/frontend/src/hooks/use-contains-rol-attachments.ts @@ -1,6 +1,6 @@ -import { useMemo } from 'react'; -import { CreatorRole, IMainDocument } from '@app/types/documents/documents'; +import { CreatorRole, type IMainDocument } from '@app/types/documents/documents'; import { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; +import { useMemo } from 'react'; /** * Only checks attachments to ROL question documents. diff --git a/frontend/src/hooks/use-field-name.ts b/frontend/src/hooks/use-field-name.ts index fe4aadf18..d9edb5e6a 100644 --- a/frontend/src/hooks/use-field-name.ts +++ b/frontend/src/hooks/use-field-name.ts @@ -1,5 +1,5 @@ import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; -import { FIELD_NAMES, Field } from '@app/types/field-names'; +import { FIELD_NAMES, type Field } from '@app/types/field-names'; export const useFieldName = (field: Field): string => { const { data } = useOppgave(); diff --git a/frontend/src/hooks/use-has-documents-access.ts b/frontend/src/hooks/use-has-documents-access.ts index 4212e0224..60f74cdd9 100644 --- a/frontend/src/hooks/use-has-documents-access.ts +++ b/frontend/src/hooks/use-has-documents-access.ts @@ -4,7 +4,7 @@ import { useIsFeilregistrert } from '@app/hooks/use-is-feilregistrert'; import { useIsFullfoert } from '@app/hooks/use-is-fullfoert'; import { useIsSaksbehandler } from '@app/hooks/use-is-saksbehandler'; import { Role } from '@app/types/bruker'; -import { IMainDocument } from '@app/types/documents/documents'; +import type { IMainDocument } from '@app/types/documents/documents'; import { useHasBehandlingAccess } from './oppgavebehandling/use-has-access'; export const useHasDocumentsAccess = (): boolean => { diff --git a/frontend/src/hooks/use-has-role.ts b/frontend/src/hooks/use-has-role.ts index 05e98e4d6..b8cd6423a 100644 --- a/frontend/src/hooks/use-has-role.ts +++ b/frontend/src/hooks/use-has-role.ts @@ -1,6 +1,6 @@ -import { useContext } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; -import { Role } from '@app/types/bruker'; +import type { Role } from '@app/types/bruker'; +import { useContext } from 'react'; export const useHasAnyOfRoles = (roles?: Role[]) => { const { user } = useContext(StaticDataContext); diff --git a/frontend/src/hooks/use-has-ytelse-access.ts b/frontend/src/hooks/use-has-ytelse-access.ts index 30091c43b..d425974c6 100644 --- a/frontend/src/hooks/use-has-ytelse-access.ts +++ b/frontend/src/hooks/use-has-ytelse-access.ts @@ -1,5 +1,5 @@ -import { useContext } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; +import { useContext } from 'react'; export const useHasYtelseAccess = (ytelse: string | undefined): boolean => { const { user } = useContext(StaticDataContext); diff --git a/frontend/src/hooks/use-is-medunderskriver.ts b/frontend/src/hooks/use-is-medunderskriver.ts index 8f1954c6a..1d33ec0c5 100644 --- a/frontend/src/hooks/use-is-medunderskriver.ts +++ b/frontend/src/hooks/use-is-medunderskriver.ts @@ -1,6 +1,6 @@ -import { useContext } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { FlowState } from '@app/types/oppgave-common'; +import { useContext } from 'react'; import { useOppgave } from './oppgavebehandling/use-oppgave'; export const useIsMedunderskriver = () => { diff --git a/frontend/src/hooks/use-is-relevant-ytelse-for-raadgivende.ts b/frontend/src/hooks/use-is-relevant-ytelse-for-raadgivende.ts index e3566b7eb..378930e75 100644 --- a/frontend/src/hooks/use-is-relevant-ytelse-for-raadgivende.ts +++ b/frontend/src/hooks/use-is-relevant-ytelse-for-raadgivende.ts @@ -1,5 +1,5 @@ -import { useMemo } from 'react'; import { useSimpleYtelser } from '@app/simple-api-state/use-kodeverk'; +import { useMemo } from 'react'; enum Ytelser { Omsorgspenger = '1', diff --git a/frontend/src/hooks/use-is-rol.ts b/frontend/src/hooks/use-is-rol.ts index 98d085ef2..68a505671 100644 --- a/frontend/src/hooks/use-is-rol.ts +++ b/frontend/src/hooks/use-is-rol.ts @@ -1,24 +1,40 @@ -import { useContext, useMemo } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { SaksTypeEnum } from '@app/types/kodeverk'; import { FlowState } from '@app/types/oppgave-common'; +import { useContext, useMemo } from 'react'; import { useOppgave } from './oppgavebehandling/use-oppgave'; export const useIsRol = () => { - const { data: oppgave, isLoading } = useOppgave(); + const { data: oppgave, isSuccess } = useOppgave(); + const isRolWithAnyFlowState = useIsRolWithAnyFlowState(); + + return useMemo(() => { + if (!isSuccess) { + return false; + } + + return ( + isRolWithAnyFlowState && + (oppgave.typeId === SaksTypeEnum.KLAGE || oppgave.typeId === SaksTypeEnum.ANKE) && + oppgave.rol.flowState !== FlowState.NOT_SENT + ); + }, [oppgave, isSuccess, isRolWithAnyFlowState]); +}; + +export const useIsRolWithAnyFlowState = () => { + const { data: oppgave, isSuccess } = useOppgave(); const { user } = useContext(StaticDataContext); return useMemo(() => { - if (isLoading || oppgave === undefined) { + if (!isSuccess) { return false; } return ( (oppgave.typeId === SaksTypeEnum.KLAGE || oppgave.typeId === SaksTypeEnum.ANKE) && oppgave.rol.employee !== null && - oppgave.rol.flowState !== FlowState.NOT_SENT && oppgave.rol.employee.navIdent === user.navIdent ); - }, [oppgave, isLoading, user]); + }, [oppgave, isSuccess, user]); }; diff --git a/frontend/src/hooks/use-is-saksbehandler.ts b/frontend/src/hooks/use-is-saksbehandler.ts index ac88f40e8..c0622f4b1 100644 --- a/frontend/src/hooks/use-is-saksbehandler.ts +++ b/frontend/src/hooks/use-is-saksbehandler.ts @@ -1,5 +1,5 @@ -import { useContext, useMemo } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; +import { useContext, useMemo } from 'react'; import { useOppgave } from './oppgavebehandling/use-oppgave'; export const useIsSaksbehandler = () => { diff --git a/frontend/src/hooks/use-kodeverk-ids.ts b/frontend/src/hooks/use-kodeverk-ids.ts index 98493afab..95530972e 100644 --- a/frontend/src/hooks/use-kodeverk-ids.ts +++ b/frontend/src/hooks/use-kodeverk-ids.ts @@ -6,7 +6,7 @@ import { useSimpleYtelser, useTema, } from '@app/simple-api-state/use-kodeverk'; -import { SaksTypeEnum } from '@app/types/kodeverk'; +import type { SaksTypeEnum } from '@app/types/kodeverk'; const useFullTemaNameFromId = (temaId: string | null): string | undefined => { const { data, isLoading } = useTema(); @@ -79,6 +79,6 @@ export const useRegistreringshjemlerFromIds = (hjemmelIdList: string[]): string[ return hjemmelIdList.map((hjemmelId) => { const hjemmel = data[hjemmelId]; - return hjemmel === undefined ? hjemmelId : hjemmel.lovkilde.beskrivelse + ' ' + hjemmel.hjemmelnavn; + return hjemmel === undefined ? hjemmelId : `${hjemmel.lovkilde.beskrivelse} ${hjemmel.hjemmelnavn}`; }); }; diff --git a/frontend/src/hooks/use-kodeverk-value.ts b/frontend/src/hooks/use-kodeverk-value.ts index a8c94b656..116910193 100644 --- a/frontend/src/hooks/use-kodeverk-value.ts +++ b/frontend/src/hooks/use-kodeverk-value.ts @@ -1,7 +1,7 @@ +import { useLatestYtelser, useSakstyperToUtfall, useYtelserAll } from '@app/simple-api-state/use-kodeverk'; +import type { ILovKildeToRegistreringshjemmel, IYtelse } from '@app/types/kodeverk'; import { skipToken } from '@reduxjs/toolkit/query'; import { useMemo } from 'react'; -import { useLatestYtelser, useSakstyperToUtfall, useYtelserAll } from '@app/simple-api-state/use-kodeverk'; -import { ILovKildeToRegistreringshjemmel, IYtelse } from '@app/types/kodeverk'; const EMPTY_ARRAY: [] = []; diff --git a/frontend/src/hooks/use-kvalitetsvurdering.ts b/frontend/src/hooks/use-kvalitetsvurdering.ts index ad3ec07d5..edc2eea3e 100644 --- a/frontend/src/hooks/use-kvalitetsvurdering.ts +++ b/frontend/src/hooks/use-kvalitetsvurdering.ts @@ -1,6 +1,6 @@ -import { skipToken } from '@reduxjs/toolkit/query'; import { useGetKvalitetsvurderingQuery } from '@app/redux-api/kaka-kvalitetsvurdering/v1'; -import { IKvalitetsvurderingV1 } from '@app/types/kaka-kvalitetsvurdering/v1'; +import type { IKvalitetsvurderingV1 } from '@app/types/kaka-kvalitetsvurdering/v1'; +import { skipToken } from '@reduxjs/toolkit/query'; import { useOppgave } from './oppgavebehandling/use-oppgave'; export const useKvalitetsvurdering = (): [IKvalitetsvurderingV1 | undefined, boolean] => { diff --git a/frontend/src/hooks/use-landing-page-path.ts b/frontend/src/hooks/use-landing-page-path.ts index 4ab4b7235..c7f9582ef 100644 --- a/frontend/src/hooks/use-landing-page-path.ts +++ b/frontend/src/hooks/use-landing-page-path.ts @@ -1,6 +1,6 @@ -import { useContext } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { Role } from '@app/types/bruker'; +import { useContext } from 'react'; type LandingPagePath = [string, string] | null; diff --git a/frontend/src/hooks/use-navigate-maltekstseksjoner.ts b/frontend/src/hooks/use-navigate-maltekstseksjoner.ts index 2aeb1f4f3..f5367c5d4 100644 --- a/frontend/src/hooks/use-navigate-maltekstseksjoner.ts +++ b/frontend/src/hooks/use-navigate-maltekstseksjoner.ts @@ -1,6 +1,6 @@ +import { Language } from '@app/types/texts/language'; import { useCallback } from 'react'; import { useLocation, useNavigate, useParams } from 'react-router'; -import { Language } from '@app/types/texts/language'; interface PathParams { maltekstseksjonId?: string | null; @@ -15,7 +15,7 @@ export const useNavigateMaltekstseksjoner = () => { const { search } = useLocation(); return useCallback( - (newParams: PathParams, replace: boolean = false) => + (newParams: PathParams, replace = false) => navigate(`${calculateMaltekstseksjonPath(oldParams, newParams)}${search}`, { replace }), [navigate, oldParams, search], ); diff --git a/frontend/src/hooks/use-navigate-to-standalone-text-version.ts b/frontend/src/hooks/use-navigate-to-standalone-text-version.ts index b0f199c5d..157136a28 100644 --- a/frontend/src/hooks/use-navigate-to-standalone-text-version.ts +++ b/frontend/src/hooks/use-navigate-to-standalone-text-version.ts @@ -1,6 +1,6 @@ +import { Language } from '@app/types/texts/language'; import { useCallback, useEffect } from 'react'; import { useLocation, useNavigate, useParams } from 'react-router'; -import { Language } from '@app/types/texts/language'; interface Params { id?: string | null; diff --git a/frontend/src/hooks/use-on-click-outside.ts b/frontend/src/hooks/use-on-click-outside.ts index 975794dff..e398afa2d 100644 --- a/frontend/src/hooks/use-on-click-outside.ts +++ b/frontend/src/hooks/use-on-click-outside.ts @@ -1,4 +1,4 @@ -import { RefObject, useEffect } from 'react'; +import { type RefObject, useEffect } from 'react'; type Callback = (event: MouseEvent | TouchEvent | KeyboardEvent) => void; diff --git a/frontend/src/hooks/use-oppgave-actions.ts b/frontend/src/hooks/use-oppgave-actions.ts index 3d163a195..52a5c760e 100644 --- a/frontend/src/hooks/use-oppgave-actions.ts +++ b/frontend/src/hooks/use-oppgave-actions.ts @@ -1,7 +1,7 @@ -import { useContext, useMemo } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { Role } from '@app/types/bruker'; import { FlowState } from '@app/types/oppgave-common'; +import { useContext, useMemo } from 'react'; import { useHasYtelseAccess } from './use-has-ytelse-access'; interface Actions { @@ -47,8 +47,8 @@ export const useOppgaveActions = ( open: hasYtelseAccess, assignSelf: canAssignSelf(access), assignOthers, - deassignSelf: !medunderskriverInvolved && !rolInvolved && isAssignedToSelf, - deassignOthers: !medunderskriverInvolved && !rolInvolved && assignOthers && isAssigned, + deassignSelf: !(medunderskriverInvolved || rolInvolved) && isAssignedToSelf, + deassignOthers: !(medunderskriverInvolved || rolInvolved) && assignOthers && isAssigned, }, false, ]; diff --git a/frontend/src/hooks/use-oppgave-pagination.ts b/frontend/src/hooks/use-oppgave-pagination.ts index 6ca62df2d..4b97dcb71 100644 --- a/frontend/src/hooks/use-oppgave-pagination.ts +++ b/frontend/src/hooks/use-oppgave-pagination.ts @@ -1,6 +1,6 @@ -import { useMemo, useState } from 'react'; import { useRestrictedNumberSetting } from '@app/hooks/settings/helpers'; -import { OppgaveTableRowsPerPage } from '@app/hooks/settings/use-setting'; +import type { OppgaveTableRowsPerPage } from '@app/hooks/settings/use-setting'; +import { useMemo, useState } from 'react'; interface OppgavePagination { from: number; diff --git a/frontend/src/hooks/use-parent-document.ts b/frontend/src/hooks/use-parent-document.ts index 1c6afbc2d..85f539826 100644 --- a/frontend/src/hooks/use-parent-document.ts +++ b/frontend/src/hooks/use-parent-document.ts @@ -1,13 +1,13 @@ -import { useMemo } from 'react'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { useGetDocumentsQuery } from '@app/redux-api/oppgaver/queries/documents'; import { DocumentTypeEnum, - IFileDocument, - IJournalfoertDokumentReference, - IMainDocument, - ISmartDocument, + type IFileDocument, + type IJournalfoertDokumentReference, + type IMainDocument, + type ISmartDocument, } from '@app/types/documents/documents'; +import { useMemo } from 'react'; export const useParentDocument = (parentId: string | null): IMainDocument | undefined => { const oppgaveId = useOppgaveId(); diff --git a/frontend/src/hooks/use-redaktoer-language.ts b/frontend/src/hooks/use-redaktoer-language.ts index 058e1f03b..47f06d721 100644 --- a/frontend/src/hooks/use-redaktoer-language.ts +++ b/frontend/src/hooks/use-redaktoer-language.ts @@ -1,5 +1,5 @@ -import { useParams } from 'react-router-dom'; import { Language, isLanguage } from '@app/types/texts/language'; +import { useParams } from 'react-router-dom'; export const useRedaktoerLanguage = () => { const { lang } = useParams(); diff --git a/frontend/src/hooks/use-remove-document.ts b/frontend/src/hooks/use-remove-document.ts index 1c3787975..8f2ae16e0 100644 --- a/frontend/src/hooks/use-remove-document.ts +++ b/frontend/src/hooks/use-remove-document.ts @@ -1,4 +1,4 @@ -import { DocumentTypeEnum, IMainDocument } from '@app/types/documents/documents'; +import { DocumentTypeEnum, type IMainDocument } from '@app/types/documents/documents'; import { useDocumentsPdfViewed, useSmartEditorActiveDocument } from './settings/use-setting'; export const useRemoveDocument = () => { diff --git a/frontend/src/hooks/use-set-smart-editor-language.ts b/frontend/src/hooks/use-set-smart-editor-language.ts index 9e5b2a338..ddcc62109 100644 --- a/frontend/src/hooks/use-set-smart-editor-language.ts +++ b/frontend/src/hooks/use-set-smart-editor-language.ts @@ -1,9 +1,9 @@ -import { skipToken } from '@reduxjs/toolkit/query'; -import { useContext } from 'react'; import { SmartEditorContext } from '@app/components/smart-editor/context'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { useSetLanguageMutation } from '@app/redux-api/oppgaver/mutations/smart-document'; -import { Language } from '@app/types/texts/language'; +import type { Language } from '@app/types/texts/language'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useContext } from 'react'; export const useSetSmartEditorLanguage = (): [ (lang: Language) => Promise, diff --git a/frontend/src/hooks/use-settings-hjemler.ts b/frontend/src/hooks/use-settings-hjemler.ts index ebb6cae08..0306bbdd4 100644 --- a/frontend/src/hooks/use-settings-hjemler.ts +++ b/frontend/src/hooks/use-settings-hjemler.ts @@ -1,7 +1,7 @@ import { isNotUndefined } from '@app/functions/is-not-type-guards'; import { useGetSettingsQuery } from '@app/redux-api/bruker'; import { useHjemler } from '@app/simple-api-state/use-kodeverk'; -import { IKodeverkValue } from '@app/types/kodeverk'; +import type { IKodeverkValue } from '@app/types/kodeverk'; export const useSettingsHjemler = (): IKodeverkValue[] => { const { data: hjemler } = useHjemler(); diff --git a/frontend/src/hooks/use-settings-ytelser.ts b/frontend/src/hooks/use-settings-ytelser.ts index 0fdc322a2..1e6cbd284 100644 --- a/frontend/src/hooks/use-settings-ytelser.ts +++ b/frontend/src/hooks/use-settings-ytelser.ts @@ -1,6 +1,6 @@ import { isNotUndefined } from '@app/functions/is-not-type-guards'; import { useGetSettingsQuery } from '@app/redux-api/bruker'; -import { IKodeverkSimpleValue } from '@app/types/kodeverk'; +import type { IKodeverkSimpleValue } from '@app/types/kodeverk'; import { useAvailableYtelser } from './use-available-ytelser'; export const useSettingsYtelser = (): IKodeverkSimpleValue[] => { diff --git a/frontend/src/hooks/use-shown-documents.ts b/frontend/src/hooks/use-shown-documents.ts index 7f181d4ba..b2dac9f66 100644 --- a/frontend/src/hooks/use-shown-documents.ts +++ b/frontend/src/hooks/use-shown-documents.ts @@ -1,8 +1,8 @@ -import { useMemo } from 'react'; -import { IShownDocument } from '@app/components/view-pdf/types'; +import type { IShownDocument } from '@app/components/view-pdf/types'; import { useGetArkiverteDokumenterQuery, useGetDocumentsQuery } from '@app/redux-api/oppgaver/queries/documents'; -import { IArkivertDocument } from '@app/types/arkiverte-documents'; -import { DocumentTypeEnum, IMainDocument } from '@app/types/documents/documents'; +import type { IArkivertDocument } from '@app/types/arkiverte-documents'; +import { DocumentTypeEnum, type IMainDocument } from '@app/types/documents/documents'; +import { useMemo } from 'react'; import { useOppgaveId } from './oppgavebehandling/use-oppgave-id'; import { useDocumentsPdfViewed } from './settings/use-setting'; diff --git a/frontend/src/hooks/use-smart-documents.ts b/frontend/src/hooks/use-smart-documents.ts index 0ffc6737f..bc59dc608 100644 --- a/frontend/src/hooks/use-smart-documents.ts +++ b/frontend/src/hooks/use-smart-documents.ts @@ -1,14 +1,14 @@ -import { skipToken } from '@reduxjs/toolkit/query'; import { useHasRole } from '@app/hooks/use-has-role'; -import { useIsRol } from '@app/hooks/use-is-rol'; +import { useIsRolWithAnyFlowState } from '@app/hooks/use-is-rol'; import { useGetDocumentsQuery } from '@app/redux-api/oppgaver/queries/documents'; import { Role } from '@app/types/bruker'; -import { ISmartDocument } from '@app/types/documents/documents'; +import type { ISmartDocument } from '@app/types/documents/documents'; import { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; +import type { skipToken } from '@reduxjs/toolkit/query'; export const useSmartDocuments = (oppgaveId: string | typeof skipToken): ISmartDocument[] | undefined => { const { data, isLoading } = useGetDocumentsQuery(oppgaveId); - const isRol = useIsRol(); + const isRolWithAnyFlowState = useIsRolWithAnyFlowState(); const hasSaksbehandlerRole = useHasRole(Role.KABAL_SAKSBEHANDLING); if (isLoading || typeof data === 'undefined') { @@ -25,7 +25,7 @@ export const useSmartDocuments = (oppgaveId: string | typeof skipToken): ISmartD } } - if (isRol) { + if (isRolWithAnyFlowState) { for (const document of data) { if (document.isSmartDokument && document.templateId === TemplateIdEnum.ROL_ANSWERS) { documents.push(document); diff --git a/frontend/src/hooks/use-smart-editor-language.ts b/frontend/src/hooks/use-smart-editor-language.ts index 0e8826b66..7d9835e76 100644 --- a/frontend/src/hooks/use-smart-editor-language.ts +++ b/frontend/src/hooks/use-smart-editor-language.ts @@ -1,9 +1,9 @@ -import { skipToken } from '@reduxjs/toolkit/query'; -import { useContext } from 'react'; import { SmartEditorContext } from '@app/components/smart-editor/context'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; import { useGetDocumentQuery, useGetDocumentsQuery } from '@app/redux-api/oppgaver/queries/documents'; import { Language } from '@app/types/texts/language'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { useContext } from 'react'; export const useSmartEditorLanguage = () => { const { documentId } = useContext(SmartEditorContext); @@ -14,7 +14,7 @@ export const useSmartEditorLanguage = () => { ); // Try to use cache for single document first. This will probably not be in place in time, though. - if (document !== undefined && document.isSmartDokument) { + if (document?.isSmartDokument === true) { return document.language; } @@ -22,7 +22,7 @@ export const useSmartEditorLanguage = () => { if (documents !== undefined) { const doc = documents.find(({ id }) => documentId === id); - if (doc !== undefined && doc.isSmartDokument) { + if (doc?.isSmartDokument === true) { return doc.language; } } diff --git a/frontend/src/hooks/use-suggested-brevmottakere.ts b/frontend/src/hooks/use-suggested-brevmottakere.ts index fd0e7e3c3..5c93f9463 100644 --- a/frontend/src/hooks/use-suggested-brevmottakere.ts +++ b/frontend/src/hooks/use-suggested-brevmottakere.ts @@ -1,10 +1,10 @@ -import { useMemo } from 'react'; import { getInitalHandling } from '@app/components/documents/new-documents/modal/finish-document/functions'; import { isNotNull } from '@app/functions/is-not-type-guards'; -import { IMainDocument, IMottaker } from '@app/types/documents/documents'; +import type { IMainDocument, IMottaker } from '@app/types/documents/documents'; import { Brevmottakertype } from '@app/types/kodeverk'; -import { IPart, PartStatusEnum } from '@app/types/oppgave-common'; -import { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; +import { type IPart, PartStatusEnum } from '@app/types/oppgave-common'; +import type { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; +import { useMemo } from 'react'; import { useOppgave } from './oppgavebehandling/use-oppgave'; export interface IBrevmottaker extends IMottaker { diff --git a/frontend/src/hooks/use-tema-name.ts b/frontend/src/hooks/use-tema-name.ts index cf95a08b6..fcf9b9650 100644 --- a/frontend/src/hooks/use-tema-name.ts +++ b/frontend/src/hooks/use-tema-name.ts @@ -1,5 +1,5 @@ -import { useMemo } from 'react'; import { useTema } from '@app/simple-api-state/use-kodeverk'; +import { useMemo } from 'react'; export const useTemaName = (temaId?: string | null): [string | undefined, boolean] => { const { data, isLoading } = useTema(); diff --git a/frontend/src/hooks/use-template-sections.ts b/frontend/src/hooks/use-template-sections.ts index fe230ab9d..1d5e4dfba 100644 --- a/frontend/src/hooks/use-template-sections.ts +++ b/frontend/src/hooks/use-template-sections.ts @@ -1,6 +1,4 @@ -import { TDescendant, isElement } from '@udecode/plate-common'; -import { useMemo } from 'react'; -import { +import type { ELEMENT_FOOTER, ELEMENT_HEADER, ELEMENT_MALTEKST, @@ -9,8 +7,10 @@ import { } from '@app/plate/plugins/element-types'; import { TemplateSections } from '@app/plate/template-sections'; import { TEMPLATE_MAP } from '@app/plate/templates/templates'; -import { EditorValue } from '@app/plate/types'; -import { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; +import type { EditorValue } from '@app/plate/types'; +import type { TemplateIdEnum } from '@app/types/smart-editor/template-enums'; +import { type TDescendant, isElement } from '@udecode/plate-common'; +import { useMemo } from 'react'; const EMPTY_LIST: TemplateSections[] = []; diff --git a/frontend/src/hooks/use-utfall-name.ts b/frontend/src/hooks/use-utfall-name.ts index 6fe10e8f0..56df5163f 100644 --- a/frontend/src/hooks/use-utfall-name.ts +++ b/frontend/src/hooks/use-utfall-name.ts @@ -1,6 +1,6 @@ import { SET_DELIMITER } from '@app/components/smart-editor-texts/types'; import { useUtfall } from '@app/simple-api-state/use-kodeverk'; -import { IKodeverkSimpleValue, UtfallEnum } from '@app/types/kodeverk'; +import type { IKodeverkSimpleValue, UtfallEnum } from '@app/types/kodeverk'; export const useUtfallNameOrLoading = (utfallIdSet: string): string => { const { data: utfall } = useUtfall(); diff --git a/frontend/src/hooks/use-utfall.ts b/frontend/src/hooks/use-utfall.ts index a5bb08666..7ec2349c6 100644 --- a/frontend/src/hooks/use-utfall.ts +++ b/frontend/src/hooks/use-utfall.ts @@ -1,6 +1,6 @@ -import { useMemo } from 'react'; import { useSakstyperToUtfall } from '@app/simple-api-state/use-kodeverk'; -import { IKodeverkSimpleValue, SaksTypeEnum, UtfallEnum } from '@app/types/kodeverk'; +import type { IKodeverkSimpleValue, SaksTypeEnum, UtfallEnum } from '@app/types/kodeverk'; +import { useMemo } from 'react'; export const useUtfall = (type?: SaksTypeEnum): [IKodeverkSimpleValue[], boolean] => { const { data: sakstyperToUtfall } = useSakstyperToUtfall(); diff --git a/frontend/src/hooks/use-validation-error.ts b/frontend/src/hooks/use-validation-error.ts index 793c1ffd9..71b78cd92 100644 --- a/frontend/src/hooks/use-validation-error.ts +++ b/frontend/src/hooks/use-validation-error.ts @@ -1,7 +1,10 @@ -import { useContext, useMemo } from 'react'; import { ValidationErrorContext } from '@app/components/kvalitetsvurdering/validation-error-context'; -import { IKvalitetsvurderingV1 } from '@app/types/kaka-kvalitetsvurdering/v1'; -import { IOppgavebehandlingBase, ITrygderettsankebehandling } from '@app/types/oppgavebehandling/oppgavebehandling'; +import type { IKvalitetsvurderingV1 } from '@app/types/kaka-kvalitetsvurdering/v1'; +import type { + IOppgavebehandlingBase, + ITrygderettsankebehandling, +} from '@app/types/oppgavebehandling/oppgavebehandling'; +import { useContext, useMemo } from 'react'; type Field = | keyof IKvalitetsvurderingV1 diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index ae9376edc..fd177b22d 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -1,6 +1,6 @@ -import { createRoot } from 'react-dom/client'; import { FRAME_TIMES } from '@app/frame-times'; import { initializeScrubber } from '@app/scrubber'; +import { createRoot } from 'react-dom/client'; import { App } from './components/app/app'; initializeScrubber(); diff --git a/frontend/src/observability.tsx b/frontend/src/observability.tsx index daf5acd96..d9574d6f3 100644 --- a/frontend/src/observability.tsx +++ b/frontend/src/observability.tsx @@ -1,12 +1,8 @@ +import { ENVIRONMENT } from '@app/environment'; import { ReactIntegration, ReactRouterVersion, getWebInstrumentations, initializeFaro } from '@grafana/faro-react'; -import { LogLevel, PushLogOptions, faro } from '@grafana/faro-web-sdk'; +import { LogLevel, type PushLogOptions, faro } from '@grafana/faro-web-sdk'; import { TracingInstrumentation } from '@grafana/faro-web-tracing'; import { Routes, createRoutesFromChildren, matchRoutes, useLocation, useNavigationType } from 'react-router-dom'; -import { ENVIRONMENT } from '@app/environment'; -import { user } from '@app/static-data/static-data'; -import { IUserData } from '@app/types/bruker'; - -const MEASURE_TIME_INTERVAL = 10_000; const getUrl = () => { if (ENVIRONMENT.isProduction) { @@ -54,46 +50,3 @@ export const pushLog = (message: string, options?: Omit { - this.user = userData; - }); - - setInterval(() => { - if (this.measurements.length === 0) { - return; - } - - const max = Math.max(...this.measurements); - const average = this.measurements.reduce((a, b) => a + b, 0) / this.measurements.length; - - faro.api.setUser({ id: this.user?.navIdent ?? 'Unknown user' }); - - pushMeasurement({ - type: 'render_smart_editor', - values: { render_smart_editor_max: max, render_smart_editor_avg: average }, - }); - - faro.api.resetUser(); - - this.measurements = []; - }, MEASURE_TIME_INTERVAL); - } - - add = (render_smart_editor: number) => { - // Drop 10 first measurements to avoid logging cold start - if (++this.counter < 10) { - return; - } - - this.measurements.push(render_smart_editor); - }; -} - -export const editorMeasurements = new EditorMeasurements(); diff --git a/frontend/src/pages/access-rights/access-rights.tsx b/frontend/src/pages/access-rights/access-rights.tsx index a796207fa..80b176d62 100644 --- a/frontend/src/pages/access-rights/access-rights.tsx +++ b/frontend/src/pages/access-rights/access-rights.tsx @@ -1,5 +1,5 @@ -import { styled } from 'styled-components'; import { AccessRights } from '@app/components/access-rights/access-rights'; +import { styled } from 'styled-components'; import { PageWrapper } from '../page-wrapper'; export const AccessRightsPage = () => ( @@ -15,5 +15,5 @@ const AccessRightsArticle = styled.article` overflow: hidden; display: flex; flex-direction: column; - row-gap: 16px; + row-gap: var(--a-spacing-4); `; diff --git a/frontend/src/pages/landing-page/landing-page.tsx b/frontend/src/pages/landing-page/landing-page.tsx index 29fb0c648..ad244a07b 100644 --- a/frontend/src/pages/landing-page/landing-page.tsx +++ b/frontend/src/pages/landing-page/landing-page.tsx @@ -1,7 +1,3 @@ -import { BodyShort, Heading } from '@navikt/ds-react'; -import { useContext, useEffect } from 'react'; -import { Navigate } from 'react-router-dom'; -import { styled } from 'styled-components'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { RoleList } from '@app/components/role-list/role-list'; import { ENVIRONMENT } from '@app/environment'; @@ -9,6 +5,10 @@ import { useLandingPagePath } from '@app/hooks/use-landing-page-path'; import { pushEvent } from '@app/observability'; import { PageWrapper } from '@app/pages/page-wrapper'; import { ALL_PUBLIC_ROLES } from '@app/types/bruker'; +import { BodyShort, Heading } from '@navikt/ds-react'; +import { useContext, useEffect } from 'react'; +import { Navigate } from 'react-router-dom'; +import { styled } from 'styled-components'; const INSTRUCTION = ENVIRONMENT.isProduction ? 'Be din leder om å tildele deg nødvendige roller.' diff --git a/frontend/src/pages/oppgavestyring/oppgavestyring.tsx b/frontend/src/pages/oppgavestyring/oppgavestyring.tsx index 38477dd89..6a098fa2a 100644 --- a/frontend/src/pages/oppgavestyring/oppgavestyring.tsx +++ b/frontend/src/pages/oppgavestyring/oppgavestyring.tsx @@ -1,10 +1,10 @@ -import { useContext } from 'react'; import { StaticDataContext } from '@app/components/app/static-data-context'; import { EnhetensFerdigstilteOppgaverTable } from '@app/components/enhetens-ferdigstilte-oppgaver-table /enhetens-ferdigstilte-oppgaver-table'; import { EnhetensOppgaverPaaVentTable } from '@app/components/enhetens-oppgaver-paa-vent-table/enhetens-oppgaver-paa-vent-table'; import { EnhetensOppgaverTable } from '@app/components/enhetens-oppgaver-table/enhetens-oppgaver-table'; import { ReturnerteRolOppgaverTable } from '@app/components/rol/returnerte-table'; import { RolOppgaverTable } from '@app/components/rol/under-arbeid-table'; +import { useContext } from 'react'; import { OppgaverPageWrapper } from '../page-wrapper'; export const OppgavestyringPage = () => { diff --git a/frontend/src/pages/page-wrapper.tsx b/frontend/src/pages/page-wrapper.tsx index c9766397d..da9ea5b88 100644 --- a/frontend/src/pages/page-wrapper.tsx +++ b/frontend/src/pages/page-wrapper.tsx @@ -10,7 +10,7 @@ export const PageWrapper = ({ children }: Props) => {children} * { min-width: 100%; diff --git a/frontend/src/pages/search/search.tsx b/frontend/src/pages/search/search.tsx index 2eeee69cb..cbd3de3b5 100644 --- a/frontend/src/pages/search/search.tsx +++ b/frontend/src/pages/search/search.tsx @@ -1,7 +1,7 @@ -import { useState } from 'react'; import { FnrSearch } from '@app/components/search/fnr/fnr-search'; import { NameSearch } from '@app/components/search/name/name-search'; import { SearchBox } from '@app/components/searchbox/searchbox'; +import { useState } from 'react'; import { SearchPageWrapper } from '../page-wrapper'; export const SearchPage = () => { diff --git a/frontend/src/pages/svarbrev/svarbrev.tsx b/frontend/src/pages/svarbrev/svarbrev.tsx index c61ff434f..affd14dd8 100644 --- a/frontend/src/pages/svarbrev/svarbrev.tsx +++ b/frontend/src/pages/svarbrev/svarbrev.tsx @@ -1,4 +1,4 @@ -import { ModalEnum } from '@app/components/svarbrev/row/row'; +import type { ModalEnum } from '@app/components/svarbrev/row/row'; import { Svarbrev } from '@app/components/svarbrev/svarbrev'; import { PageWrapper } from '@app/pages/page-wrapper'; diff --git a/frontend/src/plate/components/common/add-new-paragraph-buttons.tsx b/frontend/src/plate/components/common/add-new-paragraph-buttons.tsx index 83df9146e..53356fffd 100644 --- a/frontend/src/plate/components/common/add-new-paragraph-buttons.tsx +++ b/frontend/src/plate/components/common/add-new-paragraph-buttons.tsx @@ -1,9 +1,9 @@ -import { Button, Tooltip } from '@navikt/ds-react'; -import { TextAddSpaceAfter, TextAddSpaceBefore } from '@styled-icons/fluentui-system-regular'; -import { PlateEditor, findDescendant, insertElements, useEditorReadOnly } from '@udecode/plate-common'; import { createSimpleParagraph } from '@app/plate/templates/helpers'; -import { EditorValue, RootElement } from '@app/plate/types'; +import type { EditorValue, RootElement } from '@app/plate/types'; import { nextPath } from '@app/plate/utils/queries'; +import { Button, Tooltip } from '@navikt/ds-react'; +import { TextAddSpaceAfter, TextAddSpaceBefore } from '@styled-icons/fluentui-system-regular'; +import { type PlateEditor, findDescendant, insertElements, useEditorReadOnly } from '@udecode/plate-common'; interface Props { element: RootElement; diff --git a/frontend/src/plate/components/common/delete-section.tsx b/frontend/src/plate/components/common/delete-section.tsx index 9d65e9fd4..9b774292e 100644 --- a/frontend/src/plate/components/common/delete-section.tsx +++ b/frontend/src/plate/components/common/delete-section.tsx @@ -1,13 +1,13 @@ +import { useOnClickOutside } from '@app/hooks/use-on-click-outside'; +import { ToolbarButtonWithConfirm } from '@app/plate/components/common/toolbar-button-with-confirm'; +import { MaltekstseksjonToolbarStyle } from '@app/plate/components/styled-components'; +import { useMyPlateEditorRef } from '@app/plate/types'; import { CheckmarkIcon, TrashIcon, XMarkIcon } from '@navikt/aksel-icons'; import { Alert, Button, Tooltip } from '@navikt/ds-react'; import { removeNodes } from '@udecode/plate-common'; import { useRef, useState } from 'react'; -import { Path } from 'slate'; +import type { Path } from 'slate'; import { styled } from 'styled-components'; -import { useOnClickOutside } from '@app/hooks/use-on-click-outside'; -import { ToolbarButtonWithConfirm } from '@app/plate/components/common/toolbar-button-with-confirm'; -import { MaltekstseksjonToolbarStyle } from '@app/plate/components/styled-components'; -import { useMyPlateEditorRef } from '@app/plate/types'; const DummyButton = ({ loading }: { loading?: boolean }) => (