Feature: Block for download-links in Sanity (#3108)

* feat: Downloads block

* feat: Block for adding file-downloads to articles

* Update aksel.nav.no/website/components/sanity-modules/download-block/DownloadBlock.stories.tsx

* Update aksel.nav.no/website/components/sanity-modules/download-block/DownloadBlock.tsx

* feat: Added max width

* bug: Used nb locale for file size format

* refactor: DownloadLink -> attachment

* bug: attachment rename in query

* feat: Body-text not required

* memo: Updated story for no body variant of attachment

* bug: Fixed reference to old naming

aksel.nav.no/website/components/sanity-modules/attachment/Attachment.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AkselTheme, getBlocks } from "@/sb-util";
+import Attachment from "./Attachment";
+
+const meta = {
+  title: "Sanity-modules/Attachment",
+  component: Attachment,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Attachment>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Aksel: Story = {
+  args: {
+    node: {
+      title: "NAV-logo (for digitale flater)",
+      body: getBlocks({ length: 1 }),
+      downloadLink: "1234.zip",
+      fileName: "NAV logopakke digitale flater",
+      size: "4321",
+    },
+  },
+  decorators: [AkselTheme],
+};
+
+export const NoBody: Story = {
+  args: {
+    node: {
+      title: "NAV-logo (for digitale flater)",
+      downloadLink: "1234.zip",
+      fileName: "NAV logopakke digitale flater",
+      size: "4321",
+    },
+  },
+  decorators: [AkselTheme],
+};

aksel.nav.no/website/components/sanity-modules/attachment/Attachment.tsx

@@ -0,0 +1,74 @@
+import { useId } from "react";
+import { DownloadIcon } from "@navikt/aksel-icons";
+import { Heading, Link } from "@navikt/ds-react";
+import ErrorBoundary from "@/error-boundary";
+import { SanityBlockContent } from "@/sanity-block";
+
+type AttachmentProps = {
+  node: {
+    title?: string;
+    body?: any[];
+    downloadLink: string;
+    fileName: string;
+    size: string;
+  };
+};
+
+const Attachment = ({ node }: AttachmentProps) => {
+  const id = useId();
+
+  if (!node.title || !node.downloadLink || !node.fileName || !node.size) {
+    return null;
+  }
+
+  const filetype = node.downloadLink.split(".").at(-1);
+
+  return (
+    <section
+      aria-labelledby={id}
+      className="mb-12 flex max-w-2xl gap-2 rounded-lg bg-pink-100 px-6 py-4 ring-1 ring-inset ring-pink-300"
+    >
+      <span className="-mt-[1px] grid h-[1.625rem] shrink-0 place-content-center text-2xl">
+        <DownloadIcon aria-hidden />
+      </span>
+      <div>
+        <Heading size="small" level="2" id={id} aria-hidden>
+          {node.title}
+        </Heading>
+        {node.body && (
+          <SanityBlockContent blocks={node.body} className="mt-2" />
+        )}
+
+        <Link
+          href={`${node.downloadLink}?dl=${node.fileName}.${filetype}`}
+          className="mt-2 text-lg"
+          rel="noreferrer noopener"
+          download={node.fileName}
+        >
+          {`${node.fileName}.${filetype} (${bytesToSize(parseInt(node.size))})`}
+        </Link>
+      </div>
+    </section>
+  );
+};
+
+/* https://gist.github.com/lanqy/5193417?permalink_comment_id=3874119 */
+function bytesToSize(bytes: number) {
+  const units = ["byte", "kilobyte", "megabyte"];
+  const unit = Math.floor(Math.log(bytes) / Math.log(1024));
+  return new Intl.NumberFormat("nb-NO", {
+    style: "unit",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+    roundingMode: "ceil",
+    unit: units[unit],
+  }).format(bytes / 1024 ** unit);
+}
+
+export default function Component(props: AttachmentProps) {
+  return (
+    <ErrorBoundary boundaryName="Attachment">
+      <Attachment {...props} />
+    </ErrorBoundary>
+  );
+}

aksel.nav.no/website/components/website-modules/SanityBlockContent.tsx

@@ -8,6 +8,7 @@ import { Children } from "react";
 import { BodyLong, Detail, Heading } from "@navikt/ds-react";
 import Accordion from "@/cms/accordion/Accordion";
 import Alert from "@/cms/alert/Alert";
+import Attachment from "@/cms/attachment/Attachment";
 import Bilde from "@/cms/bilde/Bilde";
 import InnholdsKort from "@/cms/cards/InnholdsKort";
 import CodeExamples from "@/cms/code-examples/CodeExamples";
@@ -48,6 +49,7 @@ const serializers: Partial<PortableTextReactComponents> = {
     tips: ({ value }) => <Tips node={value} />,
     kode_eksempler: ({ value }) => <CodeExamples node={value} />,
     exampletext_block: ({ value }) => <ExampletextBlock node={value} />,
+    attachment: ({ value }) => <Attachment node={value} />,
   },
   unknownType: () => null,
   block: {

aksel.nav.no/website/sanity/interface/queries.js

@@ -16,6 +16,16 @@ const alert = `_type == "alert" =>{
   }
 }`;
 
+const attachment = `_type == "attachment" =>{
+  ...,
+  "downloadLink": asset->url,
+  "size": asset->size,
+  body[]{
+    ...,
+    ${markDef}
+  }
+}`;
+
 const tips = `_type == "tips" =>{
   ...,
   body[]{
@@ -151,6 +161,7 @@ const tokenRef = `_type == "token_ref"=>@->`;
 
 export const destructureBlocks = `
 ${alert},
+${attachment},
 ${tips},
 ${tokenRef},
 ${markDef},

aksel.nav.no/website/sanity/schema/index.ts

@@ -60,6 +60,7 @@ export const schema: SchemaPluginOptions = {
     object.ExpansionCard,
     object.Tips,
     object.UnikSidemodul,
+    object.Attachment,
 
     /* Riktekst */
     object.RiktekstKomponent,

aksel.nav.no/website/sanity/schema/objects/index.ts

@@ -9,6 +9,7 @@ export * from "./shared/accordion";
 export * from "./shared/alert";
 export * from "./shared/bilde";
 export * from "./shared/dodont";
+export * from "./shared/attachment";
 export * from "./shared/expansion-card";
 export * from "./shared/kode";
 export * from "./shared/relatert-innhold";

aksel.nav.no/website/sanity/schema/objects/shared/attachment.tsx

@@ -0,0 +1,41 @@
+import { defineField, defineType } from "sanity";
+import { DownloadIcon } from "@navikt/aksel-icons";
+
+export const Attachment = defineType({
+  title: "Vedlegg med nedlastning",
+  name: "attachment",
+  type: "file",
+  icon: DownloadIcon,
+  fields: [
+    defineField({
+      title: "Tittel",
+      name: "title",
+      type: "string",
+      validation: (Rule) => Rule.required().error("Vedlegg trenger tittel."),
+    }),
+    defineField({
+      title: "Filnavn",
+      description: "Filtype blir automatisk lagt til.",
+      name: "fileName",
+      type: "string",
+      validation: (Rule) => Rule.required().error("Vedlegg trenger filnavn."),
+    }),
+    defineField({
+      title: "Innhold",
+      name: "body",
+      type: "riktekst_enkel",
+    }),
+  ],
+  preview: {
+    select: {
+      title: "title",
+    },
+    prepare(selection) {
+      return {
+        title: selection.title,
+        subtitle: "Vedlegg med nedlastning",
+        media: DownloadIcon,
+      };
+    },
+  },
+});

aksel.nav.no/website/sanity/schema/objects/shared/riktekst.tsx

@@ -188,7 +188,7 @@ const Riktekst = (
 
   const templates = ["kode_eksempler", "exampletext_block"];
 
-  const grunnleggende = ["spesial_seksjon"];
+  const grunnleggende = ["spesial_seksjon", "attachment"];
 
   fields.push(...standard);