TK-38 Forbedringer kvalitetssikring-14a. Nye ikoner, overskrift tar m… (#37)

* TK-38 Forbedringer kvalitetssikring-14a. Nye ikoner, overskrift tar mindre plass, midtstilling av innhold når skjermstørrelse er over maks bredde.

* TK-38 Forbedringer kvalitetssikring-14a. Har fjernet Filters, samt .less-filene for bruker-filter og status-dropdown. Styling lagt inn i filters.less. Tittel har nå samme venstre marg som tabellen. Feilretting som etterspurt i PR.

Co-authored-by: [Klara Margrethe Helgemo] <[[email protected]]>

Author: klaramargrethehelgemo

package-lock.json

@@ -34,6 +34,7 @@
   ],
   "dependencies": {
     "@craco/craco": "^5.6.4",
+    "@navikt/ds-icons": "^0.3.3",
     "@navikt/fnrvalidator": "^1.1.3",
     "@navikt/frontendlogger": "^2.0.0",
     "@navikt/navspa": "^1.1.1",
@@ -47,7 +48,7 @@
     "nav-frontend-alertstriper-style": "^2.0.17",
     "nav-frontend-chevron": "^1.0.13",
     "nav-frontend-chevron-style": "^0.3.5",
-    "nav-frontend-core": "^5.0.1",
+    "nav-frontend-core": "^5.1.1",
     "nav-frontend-etiketter": "^2.0.8",
     "nav-frontend-etiketter-style": "^1.0.3",
     "nav-frontend-ikoner-assets": "^2.0.3",
@@ -80,6 +81,7 @@
     "@types/react-select": "^3.0.19",
     "cross-env": "^7.0.2",
     "faker": "^5.1.0",
+    "file-loader": "^4.3.0",
     "husky": "^4.3.0",
     "lint-staged": "^10.4.0",
     "prettier": "^2.1.2",

package.json

@@ -1,6 +1,6 @@
 import React from 'react';
 import StoreProvider from './stores/store-provider';
-import { Header } from './components/header/header';
+
 import { InternflateDecorator } from './components/internflate-decorator/internflate-decorator';
 import { Hovedside } from './hovedside/hovedside';
 import { DataFetcher } from './components/datafetcher';
@@ -24,7 +24,6 @@ function Innhold() {
 
 	return harTilgang ? (
 		<>
-			<Header />
 			<Hovedside />
 		</>
 	) : (

src/app.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { Element } from 'nav-frontend-typografi';
 import { Checkbox } from 'nav-frontend-skjema';
 import { useSokStore } from '../../../stores/sok-store';
-import './bruker-filter.less';
+import '../../filters/filters.less';
 
 export const BrukerFilter = () => {
 	const { filters, setVisMineBrukere } = useSokStore();
@@ -12,12 +11,10 @@ export const BrukerFilter = () => {
 	}
 
 	return (
-		<div className="bruker-filter">
-			<Element>Bruker</Element>
+		<div>
 			<Checkbox
-				aria-label="Filtrer mine brukere"
 				label="Mine brukere"
-				className="bruker-filter__checkbox"
+				aria-label="Filtrer mine brukere"
 				checked={filters.visMineBrukere}
 				onChange={handleOnVisMineBrukereChanged}
 			/>

src/components/filters/bruker-filter/bruker-filter.less

@@ -19,4 +19,14 @@
       margin-left: 2rem;
     }
   }
+}
+
+.status-dropdown {
+  display: flex;
+  flex-grow: 2;
+  width: 300px;
+}
+
+.bruker-filter {
+  margin: 0 1rem;
 }

src/components/filters/bruker-filter/bruker-filter.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import Select from 'react-select';
-import { Element } from 'nav-frontend-typografi';
 import { DropdownOption } from '../enhet-dropdown/enhet-dropdown';
 import { UtkastStatus } from '../../../rest/data/bruker';
 import { mapBrukerStatusTilTekst } from '../../../utils';
 import { useSokStore } from '../../../stores/sok-store';
-import './status-dropdown.less';
+import '../../filters/filters.less';
+
 
 export function mapStatusTilDropdownOption(status: UtkastStatus): DropdownOption {
 	return { value: status, label: mapBrukerStatusTilTekst(status) };
@@ -22,13 +22,15 @@ export const StatusDropdown = () => {
 	const value = filters.status ? mapStatusTilDropdownOption(filters.status) : null;
 
 	function handleOnStatusSelectedChanged(selectedOption: DropdownOption | null) {
-		const nyStatus = selectedOption ? selectedOption.value as UtkastStatus : undefined;
-		setStatusFilter(nyStatus)
+		const nyStatus = selectedOption ? (selectedOption.value as UtkastStatus) : undefined;
+		setStatusFilter(nyStatus);
 	}
 
 	return (
-		<div className="status-dropdown">
-			<Element>Status</Element>
+		<>
+			<label className="typo-element" htmlFor="status-filter">
+				Status
+			</label>
 			<Select
 				aria-label="Filtrer på status"
 				inputId="status-filter"
@@ -39,6 +41,6 @@ export const StatusDropdown = () => {
 				options={statusOptions}
 				onChange={handleOnStatusSelectedChanged as any}
 			/>
-		</div>
+		</>
 	);
 };

src/components/filters/filters.less

@@ -1,5 +1,9 @@
-
 .header {
-  padding: 2rem;
-  background-color: white;
-}
+	background-color: white;
+	display: grid;
+	grid-template-columns: 30% 15% 5% 20%;
+	align-items: center;
+	padding: 0.5rem 2rem 1rem 2rem;
+	margin-bottom: 1rem;
+	max-width: 1900px;
+}