Sett egne parametre på datovisning av tidsaksen til tidslinjen

flyttet over til ds-react da ds-react-internal er deprecated
navikt · Jan 4, 2024 · 57f72dc · 57f72dc
1 parent 45a6f3f
commit 57f72dc
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 178 deletions.
diff --git a/app/components/dagpenger-tidslinje/DagpengerTidslinje.tsx b/app/components/dagpenger-tidslinje/DagpengerTidslinje.tsx
@@ -1,6 +1,5 @@
 import { BriefcaseIcon } from "@navikt/aksel-icons";
-import { Alert } from "@navikt/ds-react";
-import { Timeline } from "@navikt/ds-react-internal";
+import { Alert, Timeline } from "@navikt/ds-react";
 import type { IArbeidssokerStatus } from "~/models/arbeidssoker.server";
 import styles from "./DagpengerTidslinje.module.css";
 import type { INetworkResponse } from "~/utils/types";
@@ -15,6 +14,7 @@ interface IProps {
 export function DagpengerTidslinje(props: IProps) {
   const { arbeidssokerStatusResponse } = props;
   const [activePeriod, setActivePeriod] = useState("");
+  const axisLabels = { day: "dd.MM", month: "MMM yyyy", year: "yyyy" };
 
   if (arbeidssokerStatusResponse.status === "error") {
     if (arbeidssokerStatusResponse.error.statusCode === 401) {
@@ -41,7 +41,7 @@ export function DagpengerTidslinje(props: IProps) {
 
     return (
       <>
-        <Timeline className={styles.dagpengerTidslinjeKontainer}>
+        <Timeline axisLabelTemplates={axisLabels} className={styles.dagpengerTidslinjeKontainer}>
           <Timeline.Row label="ARBEIDSSØKER" icon={<BriefcaseIcon aria-hidden fontSize="1.5rem" />}>
             {arbeidssokerStatusResponse.data?.arbeidssokerperioder.map((periode) => (
               <Timeline.Period

diff --git a/app/components/error-boundary/RootErrorBoundaryView.tsx b/app/components/error-boundary/RootErrorBoundaryView.tsx
@@ -1,5 +1,4 @@
-import { Alert, Heading } from "@navikt/ds-react";
-import { Header } from "@navikt/ds-react-internal";
+import { Alert, Heading, InternalHeader } from "@navikt/ds-react";
 import { isRouteErrorResponse, Link } from "@remix-run/react";
 import { getEnv } from "~/utils/env.utils";
 import styles from "./RootErrorBoundaryView.module.css";
@@ -18,11 +17,11 @@ export function RootErrorBoundaryView({ meta, links, error }: IProps) {
         {links}
       </head>
       <body>
-        <Header>
+        <InternalHeader>
           <Link to={getEnv("BASE_PATH")} className={styles.headerLogo}>
-            <Header.Title as="h1">NAV Dagpenger</Header.Title>
+            <InternalHeader.Title as="h1">NAV Dagpenger</InternalHeader.Title>
           </Link>
-        </Header>
+        </InternalHeader>
 
         <div className={styles.container}>
           <ErrorMessageComponent error={error} />

diff --git a/app/components/header-meny/HeaderUtloggingMeny.tsx b/app/components/header-meny/HeaderUtloggingMeny.tsx
@@ -1,6 +1,6 @@
-import { Dropdown, Header } from "@navikt/ds-react-internal";
 import type { ISaksbehandler } from "~/models/auth.server";
 import styles from "./HeaderMeny.module.css";
+import { Dropdown, InternalHeader } from "@navikt/ds-react";
 
 interface IProps {
   saksbehandler: ISaksbehandler;
@@ -10,7 +10,7 @@ export function HeaderUtloggingMeny({ saksbehandler }: IProps) {
   return (
     <div className={styles.user}>
       <Dropdown>
-        <Header.UserButton
+        <InternalHeader.UserButton
           name={saksbehandler.givenName}
           description={saksbehandler.onPremisesSamAccountName}
           as={Dropdown.Toggle}

diff --git a/app/root.tsx b/app/root.tsx
@@ -12,8 +12,6 @@ import {
 } from "@remix-run/react";
 import { getEnv } from "~/utils/env.utils";
 import { RootErrorBoundaryView } from "./components/error-boundary/RootErrorBoundaryView";
-
-import navInternalStyles from "@navikt/ds-css-internal/dist/index.css";
 import navStyles from "@navikt/ds-css/dist/index.css";
 import { cssBundleHref } from "@remix-run/css-bundle";
 import globalCss from "~/global.css";
@@ -46,7 +44,6 @@ export function links() {
       ? [
           { rel: "stylesheet", href: cssBundleHref },
           { rel: "stylesheet", href: navStyles },
-          { rel: "stylesheet", href: navInternalStyles },
           { rel: "stylesheet", href: globalCss },
           {
             rel: "icon",

diff --git a/app/routes/saksbehandling.tsx b/app/routes/saksbehandling.tsx
@@ -1,4 +1,3 @@
-import { Header } from "@navikt/ds-react-internal";
 import { Link, Outlet, useLoaderData } from "@remix-run/react";
 import { HeaderMeny } from "~/components/header-meny/HeaderMeny";
 import { getEnv } from "~/utils/env.utils";
@@ -11,6 +10,7 @@ import { hentOppgaver } from "~/models/oppgave.server";
 import type { LoaderFunctionArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { sanityClient } from "~/utils/sanity.utils";
+import { InternalHeader } from "@navikt/ds-react";
 
 // Hindrer loader til å kjøre på nytt etter action funksjon
 export const shouldRevalidate = () => false;
@@ -40,15 +40,15 @@ export default function Saksbehandling() {
 
   return (
     <>
-      <Header className={styles.header}>
+      <InternalHeader className={styles.header}>
         <Link to={getEnv("BASE_PATH")} className={styles.headerLogo}>
-          <Header.Title as="h1" className={styles.pageHeader}>
+          <InternalHeader.Title as="h1" className={styles.pageHeader}>
             {hentAppTekstMedId("side-header")}
-          </Header.Title>
+          </InternalHeader.Title>
         </Link>
 
         <HeaderMeny saksbehandler={saksbehandler} />
-      </Header>
+      </InternalHeader>
       <Outlet />
     </>
   );

diff --git a/package-lock.json b/package-lock.json