varianter · ghost · Dec 5, 2023 · Dec 6, 2023 · Dec 6, 2023 · Dec 7, 2023
diff --git a/pages/tjanster/[omrade]/erbjudanden/[offer]/index.tsx b/pages/tjanster/[omrade]/erbjudanden/[offer]/index.tsx
@@ -0,0 +1,37 @@
+import { GetStaticPaths, GetStaticProps } from 'next';
+import {
+  offerPath,
+  OfferProps,
+} from '../../../../../src/tjenesteomrader/offers/utils/offerTypes';
+import { tjenesteomradePath } from '../../../../../src/tjenesteomrader/utils/tjenesteomradeTypes';
+import { getMarkdownObjectOffers } from '../../../../../src/tjenesteomrader/utils/markdownFunctions';
+
+export { default } from 'src/tjenesteomrader/offers';
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const paths = tjenesteomradePath.flatMap((omrade) =>
+    offerPath.map((offer) => ({
+      params: { omrade, offer },
+    })),
+  );
+  return { paths: paths, fallback: false };
+};
+
+export const getStaticProps: GetStaticProps<OfferProps> = async (context) => {
+  if (context?.params!.offer) {
+    const filePath = context?.params!.offer.toString();
+    const markdown = await getMarkdownObjectOffers(filePath);
+    return {
+      props: {
+        fileContents: markdown.fileContents,
+        name: markdown.name,
+        color: markdown.color,
+        category: markdown.category,
+      },
+    };
+  }
+
+  return {
+    notFound: true,
+  };
+};
diff --git a/pages/tjanster/[omrade]/index.tsx b/pages/tjanster/[omrade]/index.tsx
@@ -1,9 +1,9 @@
 import { GetStaticPaths, GetStaticProps } from 'next';
-import { getMarkdownObject } from 'src/tjenesteomrader/utils/tjenesteomradeFunctions';
 import {
   tjenesteomradePath,
   TjenesteomradeProps,
 } from 'src/tjenesteomrader/utils/tjenesteomradeTypes';
+import { getMarkdownObjectServiceAreas } from '../../../src/tjenesteomrader/utils/markdownFunctions';
 
 export { default } from 'src/tjenesteomrader/areas';
 
@@ -19,12 +19,13 @@ export const getStaticProps: GetStaticProps<TjenesteomradeProps> = async (
 ) => {
   if (context?.params!.omrade) {
     const filePath = context?.params!.omrade.toString();
-    var markdown = await getMarkdownObject(filePath);
+    const markdown = await getMarkdownObjectServiceAreas(filePath);
     return {
       props: {
         fileContents: markdown.fileContents,
         name: markdown.name,
         color: markdown.color,
+        category: markdown.category,
       },
     };
   }

diff --git a/src/components/page-header/page-header.module.css b/src/components/page-header/page-header.module.css
@@ -107,7 +107,7 @@
 @media (max-width: 990px) {
   .header__nav {
     width: 100%;
-    height: 100%;
+    height: 100vh;
     position: absolute;
     left: 0;
     background-color: rgba(0, 0, 0, 0.4);

diff --git a/src/employees/index.tsx b/src/employees/index.tsx
@@ -15,6 +15,7 @@ import { EmployeeItem } from './types';
 import { formatTelephone } from 'src/utils/phone';
 import { JobList } from '../jobs/components/job-list';
 import { useMediaQuery } from '../utils/use-media-query';
+import shuffleArray from '../utils/helpers';
 
 const getSoMeMetadata = () => {
   let description =
@@ -173,18 +174,3 @@ function JobsLink({ text }: { text: string }) {
     </div>
   );
 }
-
-/**
- * Shuffle function taken from here: https://javascript.info/task/shuffle
- * @param array
- */
-function shuffleArray(array: EmployeeItem[]) {
-  const tempArray = array.slice();
-
-  for (let i = tempArray.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [tempArray[i], tempArray[j]] = [tempArray[j], tempArray[i]];
-  }
-
-  return tempArray;
-}
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
@@ -23,7 +23,7 @@ function Layout({
   homepage = false,
   zenMode = false,
 }: LayoutProps) {
-  const [isMenuVisible, setMenuVisible] = useState(false);
+  const [_, setMenuVisible] = useState(false);
 
   const mainClass = and(
     style.main,
@@ -32,10 +32,7 @@ function Layout({
   );
 
   return (
-    <div
-      className={mainClass}
-      style={isMenuVisible ? { position: 'fixed' } : { position: 'relative' }}
-    >
+    <div className={mainClass} style={{ position: 'relative' }}>
       <Head>
         <title>{title}</title>
         <link rel="icon" href={favicon} />

diff --git a/src/tjenesteomrader/areas/digital/index.tsx b/src/tjenesteomrader/areas/digital/index.tsx
@@ -19,14 +19,11 @@ import { useState } from 'react';
 
 const Digital = () => {
   const blobColor = allColors.primary__shade2;
-  const [isMenuVisible, setMenuVisible] = useState(false);
+  const [_, setMenuVisible] = useState(false);
   const color = colorPairs.primary.shade![3];
 
   return (
-    <div
-      className={style.main}
-      style={isMenuVisible ? { position: 'fixed' } : { position: 'relative' }}
-    >
+    <div className={style.main} style={{ position: 'relative' }}>
       <Head>
         <title>Digital produkt- och tjänsteutveckling</title>
       </Head>

diff --git a/src/tjenesteomrader/areas/index.tsx b/src/tjenesteomrader/areas/index.tsx
@@ -9,6 +9,7 @@ import {
   TjenesteomradeProps,
 } from '../utils/tjenesteomradeTypes';
 import { sanitize } from 'isomorphic-dompurify';
+import OfferGallery from '../offer-gallery';
 
 const Areas = (prop: TjenesteomradeProps) => {
   const sanitizedHtmlContent = sanitize(prop.fileContents);
@@ -25,6 +26,7 @@ const Areas = (prop: TjenesteomradeProps) => {
         />
       </div>
       <div className={style['bottomText__service-area-width']}></div>
+      <OfferGallery selectedArea={prop.name} />
       <Footer color={`#${prop.color}`} />
     </div>
   );

diff --git a/src/tjenesteomrader/areas/strategi/index.tsx b/src/tjenesteomrader/areas/strategi/index.tsx
@@ -20,14 +20,11 @@ import { and } from '../../../utils/css';
 
 const Strategi = () => {
   const blobColor = allColors.secondary1__shade2;
-  const [isMenuVisible, setMenuVisible] = useState(false);
+  const [_, setMenuVisible] = useState(false);
   const color = colorPairs.secondary1.shade![3];
 
   return (
-    <div
-      className={style.main}
-      style={isMenuVisible ? { position: 'fixed' } : { position: 'relative' }}
-    >
+    <div className={style.main} style={{ position: 'relative' }}>
       <Head>
         <title>Strategi</title>
       </Head>

diff --git a/src/tjenesteomrader/images/headerBackground/headerBackground.module.css b/src/tjenesteomrader/images/headerBackground/headerBackground.module.css
@@ -42,4 +42,16 @@
 
 .header__service-area-width header nav a {
   padding: 1.2rem 0.8rem;
+}
+
+.header__breadcrumbs ul {
+  padding: 0;
+  margin: 0;
+}
+
+.header__breadcrumbs-first-part::after {
+  content: '/';
+  text-decoration: none;
+  display: inline-block;
+  padding: 0 4px;
 }
diff --git a/src/tjenesteomrader/images/headerBackground/headerBackground.tsx b/src/tjenesteomrader/images/headerBackground/headerBackground.tsx
@@ -9,13 +9,15 @@ type HeaderBackgroundProps = {
   colorPair: ColorPair;
   whiteMode?: boolean;
   onVisibleChange?(visible: boolean): void;
+  breadcrumbsType?: string | null;
 };
 
 const HeaderBackground = ({
   headerText,
   colorPair,
   whiteMode = true,
   onVisibleChange,
+  breadcrumbsType = null,
 }: HeaderBackgroundProps) => {
   const SVG = `
     <svg
@@ -50,9 +52,30 @@ const HeaderBackground = ({
         className={style.header__text}
       >
         <div className={style['header__hero-max-width']}>
-          <Link href="/tjanster">
-            <a style={{ color: colorPair.text }}> Tjänsteområden /</a>
-          </Link>
+          <nav
+            className={style['header__breadcrumbs']}
+            aria-label="breadcrumb"
+            role="navigation"
+          >
+            <ul>
+              <Link href="/tjanster">
+                <a
+                  className={style['header__breadcrumbs-first-part']}
+                  style={{ color: colorPair.text }}
+                  aria-level={1}
+                >
+                  Tjänsteområden
+                </a>
+              </Link>
+              {breadcrumbsType && (
+                <Link href={`/tjanster/${breadcrumbsType.toLowerCase()}`}>
+                  <a style={{ color: colorPair.text }} aria-level={1}>
+                    {breadcrumbsType}
+                  </a>
+                </Link>
+              )}
+            </ul>
+          </nav>
           <Heading1
             style={{ color: colorPair.text }}
             styleLevel="2"

diff --git a/src/tjenesteomrader/offer-gallery/index.tsx b/src/tjenesteomrader/offer-gallery/index.tsx
@@ -1,20 +1,47 @@
 import { ButtonNextLink } from '@components/button';
 import { offers } from './offers';
-import style from './offers-gallery.module.css';
+import style from './offer-gallery.module.css';
 import { colorPairs } from '@variant/profile/lib/colors';
+import shuffleArray from '../../utils/helpers';
+import { useEffect, useMemo, useState } from 'react';
 
 interface OffersProps {
   selectedArea: string;
+  hideHeading?: boolean;
+  showLessOffers?: boolean;
+  pageName?: string;
 }
 
-const OfferGallery = ({ selectedArea }: OffersProps) => {
-  const offersToShow = offers.filter(
-    (offer) => offer.category === selectedArea,
+const OfferGallery = ({
+  selectedArea,
+  hideHeading = false,
+  showLessOffers = false,
+  pageName = '',
+}: OffersProps) => {
+  const filteredOffers = useMemo(
+    () => offers.filter((offer) => offer.category === selectedArea),
+    [selectedArea],
   );
+  const [shuffledOffers, setShuffledOffers] = useState(filteredOffers);
+
+  useEffect(() => {
+    if (showLessOffers) {
+      const shuffledArray = shuffleArray(filteredOffers);
+      setShuffledOffers(shuffledArray);
+    }
+  }, [showLessOffers, filteredOffers]);
+
+  const getOffersToShow = () => {
+    return showLessOffers
+      ? shuffledOffers.filter((offer) => offer.name !== pageName).slice(0, 3)
+      : filteredOffers || [];
+  };
+
+  const offersToShow = getOffersToShow();
 
   return (
     <div className={style['offers__wrapper']}>
-      <h2>Erbjudanden</h2>
+      {!hideHeading && <h2>Erbjudanden</h2>}
       <div className={style['offers__container']}>
         {offersToShow.map((offer, index) => {
           return (

diff --git a/...r/offer-gallery/offers-gallery.module.css → ...er/offer-gallery/offer-gallery.module.css b/...r/offer-gallery/offers-gallery.module.css → ...er/offer-gallery/offer-gallery.module.css
@@ -21,6 +21,7 @@
 }
 
 .offers__offer h4 {
+    overflow-wrap: anywhere;
     color: var(--color-primary);
 }
 
@@ -31,3 +32,9 @@
 .offers__offer a {
     width: 100%;
 }
+
+@media (max-width: 990px) {
+    .offers__container {
+        justify-content: center;
+    }
+}
diff --git a/src/tjenesteomrader/offer-gallery/offers.ts b/src/tjenesteomrader/offer-gallery/offers.ts
@@ -1,5 +1,6 @@
 export const offers = [
   {
+    name: 'tillvaxt',
     blob: '/illustrations/offer-blobs/Vector-1.svg',
     heading: 'Upptäck nya tillväxt möjligheter',
     text: 'Genom att utforska kundupplevelsen och konkurrenslandskapet identifierar vi ouppfyllda kundbehov och nya tillväxtmöjligheter.',
@@ -8,34 +9,39 @@ export const offers = [
     link: '/tjanster/digital/erbjudanden/tillvaxt',
   },
   {
+    name: 'forverkliga-ideer',
     blob: '/illustrations/offer-blobs/Vector-2.svg',
     heading: 'Förverkliga dina idéer',
     text: 'Baserat på dina idéer skapar vi koncept som visualiserar kund- och affärsvärde.',
     category: 'digital',
     link: '/tjanster/digital/erbjudanden/forverkliga-ideer',
   },
   {
+    name: 'validera-ideer',
     blob: '/illustrations/offer-blobs/Vector-3.svg',
     heading: 'Validera idéer & koncept',
     text: 'Innan du investerar i en tekniklösning validerar vi dina idéer och koncept för att säkerställa att de möter verkliga kundbehov och tillför det förväntade affärsvärdet.',
     category: 'digital',
     link: '/tjanster/digital/erbjudanden/validera-ideer',
   },
   {
+    name: 'anvandningstester',
     blob: '/illustrations/offer-blobs/Vector-4.svg',
     heading: 'Användningstester',
     text: 'Baserat på dina idéer skapar vi koncept som visualiserar kund- och affärsvärde.',
     category: 'digital',
     link: '/tjanster/digital/erbjudanden/anvandningstester',
   },
   {
+    name: 'tillganglighetsgranskning',
     blob: '/illustrations/offer-blobs/Vector-5.svg',
     heading: 'Tillgänglighetsgranskning',
     text: 'Vi erbjuder en omfattande service för tillgänglighetsgranskning i enlighet med EU:s tillgänglighetskrav.',
     category: 'digital',
     link: '/tjanster/digital/erbjudanden/tillganglighetsgranskning',
   },
   {
+    name: 'innovation',
     blob: '/illustrations/offer-blobs/Vector-6.svg',
     heading: 'Kickstarta innovation',
     text: 'Vi påbörjar resan mot en arbetsplats som uppmuntrar till kreativitet. Ni får verktyg och en genomförbar plan som steg för steg ökar er innovationsförmåga.',
@@ -44,6 +50,7 @@ export const offers = [
     link: '/tjanster/digital/erbjudanden/innovation',
   },
   {
+    name: 'ai-strategi',
     blob: '/illustrations/offer-blobs/Vector-7.svg',
     heading: 'Kickstarta din AI strategi',
     text: 'Vi guidar  dig genom processen att kartlägga bästa vägen för AI i din organisation.',
@@ -52,6 +59,7 @@ export const offers = [
     link: '/tjanster/strategi/erbjudanden/ai-strategi',
   },
   {
+    name: 'strategi-audit',
     blob: '/illustrations/offer-blobs/Vector-8.svg',
     heading: 'Innovationstrategi Audit',
     text: 'Variant hjälper dig att förverkliga din innovationspotential snabbare.',
@@ -60,13 +68,15 @@ export const offers = [
     link: '/tjanster/strategi/erbjudanden/strategi-audit',
   },
   {
+    name: 'kommunikation-varumarke',
     blob: '/illustrations/offer-blobs/Vector-9.svg',
     heading: 'Kommunikation & varumärke',
     text: 'Nå ut med rätt budskap till rätt målgrupp i rätt kanal!  Tillsammans arbetar vi fram en kommunikationsstrategi som skapar äkta engagemang, bygger förtroende och driver resultat.',
     category: 'kultur',
-    link: '/tjanster/kultur/erbjudanden/strategi-audit',
+    link: '/tjanster/kultur/erbjudanden/kommunikation-varumarke',
   },
   {
+    name: 'kulturell-granskning',
     blob: '/illustrations/offer-blobs/Vector-10.svg',
     heading: 'Kulturell granskning',
     text: 'Vi påbörjar resan mot en arbetsplats som uppmuntrar till kreativitet. Ni får verktyg och en genomförbar plan som steg för steg ökar er innovationsförmåga.',