Merge pull request #542 from diggsweden/release-5.1.1

Release 5.1.1
diggsweden · Dec 19, 2024 · d738195 · d738195
2 parents 8364a37 + b978748
commit d738195
Show file tree

Hide file tree

Showing 111 changed files with 8,633 additions and 6,840 deletions.
diff --git a/components/badge/index.tsx b/components/badge/index.tsx
@@ -0,0 +1,14 @@
+import { FC } from "react";
+
+interface BadgeProps {
+  text: string;
+  className?: string;
+}
+
+export const Badge: FC<BadgeProps> = ({ text, className }) => {
+  return (
+    <span className={`bg-green-200 px-sm py-xs text-sm uppercase ${className}`}>
+      {text}
+    </span>
+  );
+};
diff --git a/components/blocks/block-list/index.tsx b/components/blocks/block-list/index.tsx
@@ -1,3 +1,4 @@
+import useTranslation from "next-translate/useTranslation";
 import { FC } from "react";
 
 import { AccordionBlock } from "@/components/blocks/accordion-block";
@@ -7,6 +8,7 @@ import { QuoteBlock } from "@/components/blocks/quote-block";
 import { RelatedContentBlock } from "@/components/blocks/related-content-block";
 import { TextBlock } from "@/components/blocks/text-block";
 import { VideoBlock } from "@/components/blocks/video-block";
+import { GridList } from "@/components/grid-list";
 import { FormPage } from "@/features/pages/form-page";
 import {
   ModuleDataFragment,
@@ -15,14 +17,18 @@ import {
   ContainerDataFragment,
   NewsItemDataFragment,
   GoodExampleDataFragment,
+  StartPageDataFragment,
+  BlockDataFragment,
 } from "@/graphql/__generated__/operations";
 
+import { CtaCardBlock } from "../cta-card-block";
 interface blockListProps {
   blocks:
     | ContainerDataFragment["blocks"]
     | NewsItemDataFragment["blocks"]
     | GoodExampleDataFragment["blocks"]
-    | ModuleDataFragment["blocks"];
+    | ModuleDataFragment["blocks"]
+    | StartPageDataFragment["blocks"];
   className?: string;
   landingPage?: boolean;
 }
@@ -67,6 +73,14 @@ export const BlockList: FC<blockListProps> = ({
   className,
   landingPage,
 }) => {
+  const { t } = useTranslation();
+
+  const getUniqueKey = (block: BlockDataFragment, index: number) => {
+    const blockId = block?.id || "";
+    const blockType = block?.__typename || "";
+    return `block-${blockType}-${blockId}-${index}`;
+  };
+
   return (
     <div
       className={`mb-lg space-y-xl md:mb-xl md:space-y-xl ${
@@ -77,26 +91,30 @@ export const BlockList: FC<blockListProps> = ({
         if (block == null) {
           return;
         }
-        const { id } = block || {};
 
         switch (block.__typename) {
           case "dataportal_Digg_Text":
-            return <TextBlock {...block} key={`${id}-${index}`} />;
+            return <TextBlock {...block} key={getUniqueKey(block, index)} />;
           case "dataportal_Digg_Quote":
-            return <QuoteBlock {...block} key={`${id}-${index}`} />;
+            return <QuoteBlock {...block} key={getUniqueKey(block, index)} />;
           case "dataportal_Digg_Media":
-            return <MediaBlock {...block} key={`${id}-${index}`} />;
+            return <MediaBlock {...block} key={getUniqueKey(block, index)} />;
           case "dataportal_Digg_Video":
-            return <VideoBlock {...block} key={`${id}-${index}`} />;
+            return <VideoBlock {...block} key={getUniqueKey(block, index)} />;
           case "dataportal_Digg_PromotedContent":
-            return <PromotedContentBlock {...block} key={`${id}-${index}`} />;
+            return (
+              <PromotedContentBlock
+                {...block}
+                key={getUniqueKey(block, index)}
+              />
+            );
           case "dataportal_Digg_Faq":
             return handleFaqs(blocks, index);
           case "dataportal_Digg_RelatedContent":
             return (
               <RelatedContentBlock
                 {...block}
-                key={`${id}-${index}`}
+                key={getUniqueKey(block, index)}
                 landingPage={landingPage}
               />
             );
@@ -112,13 +130,41 @@ export const BlockList: FC<blockListProps> = ({
           case "dataportal_Digg_FormBlock":
             return (
               <FormPage
-                key={block.id}
+                key={getUniqueKey(block, index)}
                 elements={block.elements}
                 id={block.id}
                 identifier={block.id}
                 __typename="dataportal_Digg_Form"
               />
             );
+          case "dataportal_Digg_NewsBlock":
+            return (
+              <GridList
+                key={getUniqueKey(block, index)}
+                className="!my-xl md:!my-2xl"
+                items={block.items}
+                showMoreLink={{
+                  title: t("pages|news$view-all"),
+                  slug: t("routes|news$path"),
+                }}
+                heading={block.heading || t("pages|startpage$news")}
+              />
+            );
+          case "dataportal_Digg_GoodExampleBlock":
+            return (
+              <GridList
+                key={getUniqueKey(block, index)}
+                className="!my-xl md:!my-2xl"
+                items={block.items}
+                showMoreLink={{
+                  title: t("pages|good-examples$view-all"),
+                  slug: t("routes|good-examples$path"),
+                }}
+                heading={block.heading || t("pages|startpage$good-examples")}
+              />
+            );
+          case "dataportal_Digg_CTACardBlock":
+            return <CtaCardBlock {...block} key={getUniqueKey(block, index)} />;
           default: {
             const unknownBlock = block as { __typename: string; id: string };
             return (

diff --git a/components/blocks/cta-card-block/index.tsx b/components/blocks/cta-card-block/index.tsx
@@ -0,0 +1,41 @@
+import { FC } from "react";
+
+import ArrowRightIcon from "@/assets/icons/arrow-right.svg";
+import ExternalLinkIcon from "@/assets/icons/external-link.svg";
+import { ButtonLink } from "@/components/button";
+import { ContentBox } from "@/components/content-box";
+import { BlockData_Dataportal_Digg_CtaCardBlock_Fragment } from "@/graphql/__generated__/operations";
+import { isExternalLink } from "@/utilities";
+
+export const CtaCardBlock: FC<
+  BlockData_Dataportal_Digg_CtaCardBlock_Fragment
+> = (props) => {
+  return (
+    <ContentBox
+      heading={props.heading || ""}
+      description={props.description || ""}
+    >
+      <div className="flex flex-wrap justify-center gap-md lg:gap-xl">
+        {props.ctaLinks &&
+          props.ctaLinks.length > 0 &&
+          props.ctaLinks.map(
+            (link, idx: number) =>
+              link && (
+                <ButtonLink
+                  key={idx}
+                  href={link.link}
+                  label={link.name}
+                  icon={
+                    isExternalLink(link.link)
+                      ? ExternalLinkIcon
+                      : ArrowRightIcon
+                  }
+                  iconPosition="right"
+                  data-tracking-name="cta-link"
+                />
+              ),
+          )}
+      </div>
+    </ContentBox>
+  );
+};
diff --git a/components/blocks/promoted-content-block/index.tsx b/components/blocks/promoted-content-block/index.tsx
@@ -25,7 +25,7 @@ export const PromotedContentBlock: FC<PromotedContentFragment> = ({
     <div className="bg-white p-lg md:flex">
       {img && (
         <CustomImage
-          className="max-h-[21.25rem] object-cover md:w-[45%]"
+          className="h-full max-h-[21.25rem] object-cover md:w-[45%]"
           image={img}
         />
       )}
@@ -46,6 +46,7 @@ export const PromotedContentBlock: FC<PromotedContentFragment> = ({
             href={link}
             iconPosition="right"
             icon={ArrowRightIcon}
+            data-tracking-name="promoted-content-block"
           />
         )}
       </div>

diff --git a/components/button/index.tsx b/components/button/index.tsx
@@ -55,6 +55,7 @@ const IconLabel: FC<IconLabelProps> = ({
     <>
       {iconPosition === "left" && Icon && (
         <Icon
+          className="flex-shrink-0"
           height={
             iconSizeBase
               ? iconSizeBase
@@ -75,6 +76,7 @@ const IconLabel: FC<IconLabelProps> = ({
       {label && <span>{label}</span>}
       {iconPosition === "right" && Icon && (
         <Icon
+          className="flex-shrink-0"
           height={
             iconSizeBase
               ? iconSizeBase
@@ -153,6 +155,7 @@ const ButtonLink: FC<
   locale,
   icon,
   iconPosition,
+  children,
   ...rest
 }) => {
   return (
@@ -168,6 +171,7 @@ const ButtonLink: FC<
         icon={icon}
         label={label}
       />
+      {children}
     </Link>
   );
 };

diff --git a/components/custom-link/index.tsx b/components/custom-link/index.tsx
@@ -6,7 +6,7 @@ import { FC, LinkHTMLAttributes, PropsWithChildren, useContext } from "react";
 import ExternalLinkIcon from "@/assets/icons/external-link.svg";
 import MailIcon from "@/assets/icons/mail.svg";
 import { SettingsContext } from "@/providers/settings-provider";
-import { isMailLink } from "@/utilities";
+import { isExternalLink, isMailLink } from "@/utilities";
 
 type CustomLinkProps = {
   href: string;
@@ -33,7 +33,7 @@ export const CustomLink: FC<
           <MailIcon width={iconSize} height={iconSize} viewBox="0 0 24 24" />
           <span className="sr-only">{t("common|open-in-email")}</span>
         </>
-      ) : (
+      ) : isExternalLink(href) ? (
         <>
           <ExternalLinkIcon
             width={iconSize}
@@ -42,7 +42,7 @@ export const CustomLink: FC<
           />
           <span className="sr-only">{t("common|open-in-new-tab")}</span>
         </>
-      )}
+      ) : null}
     </Link>
   );
 };
diff --git a/components/file-format-badge/index.tsx b/components/file-format-badge/index.tsx
@@ -1,4 +1,6 @@
-import React, { FC } from "react";
+import { FC } from "react";
+
+import { Badge } from "@/components/badge";
 
 interface FileFormatBadgeProps {
   badgeName: string;
@@ -139,9 +141,5 @@ export const FileFormatBadge: FC<FileFormatBadgeProps> = ({ badgeName }) => {
       break;
   }
 
-  return (
-    <span className={`bg-pink-200 px-sm py-xs text-sm uppercase ${className}`}>
-      {text}
-    </span>
-  );
+  return <Badge text={text} className={`${className} bg-pink-200`} />;
 };
diff --git a/components/grid-list/index.tsx b/components/grid-list/index.tsx
@@ -6,13 +6,17 @@ import { Heading } from "@/components/typography/heading";
 import { PublicationTeaser } from "@/features/publication/publication-teaser";
 import { Toolteaser } from "@/features/tool";
 import {
-  GoodExampleDataFragment,
-  NewsItemDataFragment,
+  GoodExampleBlockItemFragment,
+  NewsBlockItemFragment,
   ToolDataFragment,
 } from "@/graphql/__generated__/operations";
 
 interface ListProps {
-  items: (ToolDataFragment | NewsItemDataFragment | GoodExampleDataFragment)[];
+  items: (
+    | ToolDataFragment
+    | GoodExampleBlockItemFragment
+    | NewsBlockItemFragment
+  )[];
   heading?: string;
   showMoreLink?: {
     slug: string;
@@ -64,7 +68,7 @@ export const GridList: FC<ListProps> = ({
               {(() => {
                 switch (item.__typename) {
                   case "dataportal_Digg_Tool":
-                    return <Toolteaser tools={item} />;
+                    return <Toolteaser tools={item as ToolDataFragment} />;
                   default:
                     return <PublicationTeaser publication={item} />;
                 }

diff --git a/components/layout/footer/index.tsx b/components/layout/footer/index.tsx
@@ -5,14 +5,17 @@ import { FC } from "react";
 import { CustomLink } from "@/components/custom-link";
 import { Container } from "@/components/layout/container";
 import { FooterNav } from "@/components/navigation/footer-nav";
+import { SubLinkFooter } from "@/types/global";
 
 type FooterProps = {
+  footerData: SubLinkFooter[];
   openSideBar: boolean;
   setOpenSideBar: (_param: boolean) => void;
   setSettingsOpen: (_param: boolean) => void;
 };
 
 export const Footer: FC<FooterProps> = ({
+  footerData,
   openSideBar,
   setOpenSideBar,
   setSettingsOpen,
@@ -27,6 +30,7 @@ export const Footer: FC<FooterProps> = ({
       >
         <Container className="space-y-xl md:space-y-2xl">
           <FooterNav
+            footerData={footerData}
             setSettingsOpen={setSettingsOpen}
             setOpenSideBar={setOpenSideBar}
           />

diff --git a/components/layout/header/index.tsx b/components/layout/header/index.tsx
@@ -2,13 +2,24 @@ import { FC, useEffect } from "react";
 
 import MainNav from "@/components/navigation/main-nav";
 import TopNav from "@/components/navigation/top-nav";
+import {
+  MenuLinkFragment,
+  MenuLinkIconFragment,
+} from "@/graphql/__generated__/operations";
 
 type HeaderProps = {
   setOpenSideBar: (_param: boolean) => void;
   openSideBar: boolean;
+  mainMenu: MenuLinkFragment[];
+  serviceMenu: MenuLinkIconFragment[];
 };
 
-export const Header: FC<HeaderProps> = ({ openSideBar, setOpenSideBar }) => {
+export const Header: FC<HeaderProps> = ({
+  openSideBar,
+  setOpenSideBar,
+  mainMenu,
+  serviceMenu,
+}) => {
   useEffect(() => {
     return () => {
       window.removeEventListener("resize", () => setOpenSideBar(false));
@@ -17,8 +28,12 @@ export const Header: FC<HeaderProps> = ({ openSideBar, setOpenSideBar }) => {
 
   return (
     <header className="flex w-full flex-col gap-md border-b-8 border-b-brown-600 bg-white px-md py-lg md:px-xl">
-      <TopNav setOpenSideBar={setOpenSideBar} />
-      <MainNav setOpenSideBar={setOpenSideBar} openSideBar={openSideBar} />
+      <TopNav serviceMenu={serviceMenu} setOpenSideBar={setOpenSideBar} />
+      <MainNav
+        mainMenu={mainMenu}
+        setOpenSideBar={setOpenSideBar}
+        openSideBar={openSideBar}
+      />
     </header>
   );
 };