Lenke til artikkel om rekruttering (#196)

* Lenke til artikkel om rekruttering

* Deploy til dev

* Oppdater lenke til artikkel mht miljø

* Oppdater thumbnail/preview bilde til artikkel

Co-authored-by: Christian Klem <[email protected]>

---------

Co-authored-by: Christian Klem <[email protected]>

.github/workflows/build-deploy.yaml

@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - main
-      - packageupdate
+      - lenke-til-artikkel-om-rekruttering
     paths-ignore:
       - "**.md"
       - "**/**.md"

src/Artikkel/Artikkel.module.scss

@@ -0,0 +1,24 @@
+@use "../styles/screensize";
+
+.lenkeflis {
+  display: flex;
+  flex-direction: column;
+  padding: var(--a-spacing-6);
+  background-color: var(--a-green-100);
+}
+
+.lenkeflisInnhold{
+  display: flex;
+  flex-direction: row;
+}
+
+.lenkeflisBilde{
+  border-radius: 4px;
+  max-height: 80px;
+  max-width: 100px;
+  margin-right: 2rem;
+}
+.lenkeflisInnholdTittelOgTekst{
+  align-content: center;
+  flex-direction: column;
+}

src/Artikkel/Artikkel.tsx

@@ -0,0 +1,41 @@
+import styles from "./Artikkel.module.scss";
+import {BodyLong, Heading, Link} from "@navikt/ds-react";
+import Image from "next/image";
+import artikkelBilde from "./artikkelBilde.png"
+import {ExternalLinkIcon} from '@navikt/aksel-icons';
+
+
+import React from "react";
+
+export function Artikkel() {
+
+    const erIDev = [
+        "localhost",
+        "forebygge-fravar.intern.dev.nav.no",
+    ].includes(window.location.hostname);
+    const lenkeTilArtikkel = erIDev?
+        "https://arbeidsgiver.intern.dev.nav.no/min-side-arbeidsgiver/artikkel/saferoad_ansetter_ved_hjelp_av_nav" :
+        "https://arbeidsgiver.nav.no/min-side-arbeidsgiver/artikkel/saferoad_ansetter_ved_hjelp_av_nav"
+
+    return (
+        <div className={styles.lenkeflis}>
+            <div className={styles.lenkeflisInnhold}>
+                <Image
+                    className={styles.lenkeflisBilde}
+                    src={artikkelBilde}
+                    width={50}
+                    height={50}
+                    alt="illustrasjon"
+                    layout="responsive"
+                />
+                <div className={styles.lenkeflisInnholdTittelOgTekst}>
+                    <Heading level="3" size="medium">Ønsker du hjelp til å rekruttere?</Heading>
+                    <BodyLong>
+                        <Link href={lenkeTilArtikkel}>Les om hvordan NAV bidrar til at Saferoad kan ansette over 100 nye folk
+                            hvert år. <ExternalLinkIcon title="Lenke til artikkel i ny side" fontSize="1.5rem"/> </Link>
+                    </BodyLong>
+                </div>
+            </div>
+        </div>
+    );
+}

src/Forside/Forside.tsx

@@ -12,6 +12,7 @@ import FiaSamarbeidsstatus from "./FiaSamarbeidsstatus/FiaSamarbeidsstatus";
 import { useFiaSamarbeidsstatus } from "./FiaSamarbeidsstatus/fiaSamarbeidsstatusAPI";
 import TestVersjonBanner from "../komponenter/Banner/TestVersjonBanner";
 import Aktiviteter from "../Aktiviteter/Aktiviteter";
+import {Artikkel} from "../Artikkel/Artikkel";
 
 export interface ForsideProps {
   sykefraværsstatistikkUrl: string;
@@ -52,6 +53,7 @@ export const Forside = (props: ForsideProps) => {
       <div className={styles.forside}>
         {props.children}
         {sykefraværsstatistikkEllerBannerHvisError}
+        <Artikkel/>
         <Aktiviteter sykefraværsstatistikk={aggregertStatistikkData} />
         {fiaSamarbeidsstatus.status === RestStatus.Suksess &&
           fiaSamarbeidsstatus.data.samarbeid === "I_SAMARBEID" && (