✨ Can now add border to image-module in sanity

navikt · Jan 8, 2025 · eefb0f6 · eefb0f6
1 parent 8da0af0
commit eefb0f6
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 47 deletions.
diff --git a/aksel.nav.no/website/components/sanity-modules/bilde/Bilde.tsx b/aksel.nav.no/website/components/sanity-modules/bilde/Bilde.tsx
@@ -17,56 +17,56 @@ const Bilde = ({ node, className }: BildeProps) => {
   }
 
   return (
-    <>
-      <figure
-        className={cl(
-          "m-0 mb-8 flex flex-col group-[.aksel-artikkel]/aksel:mx-auto",
-          className,
-          {
-            "md:max-w-text": node?.small,
-          },
-        )}
+    <figure
+      className={cl(
+        "m-0 mb-8 flex flex-col group-[.aksel-artikkel]/aksel:mx-auto",
+        className,
+        {
+          "md:max-w-text": node?.small,
+        },
+      )}
+    >
+      <div
+        style={
+          node?.background
+            ? {
+                backgroundColor: `rgba(${node.background.rgb.r},${node.background.rgb.g},${node.background.rgb.b},${node.background.rgb.a})`,
+              }
+            : { backgroundColor: "var(--a-gray-50)" }
+        }
+        className={cl("flex justify-center rounded-lg p-0", {
+          "ring-1 ring-border-subtle": node.border,
+        })}
       >
-        <div
-          style={
-            node?.background
-              ? {
-                  backgroundColor: `rgba(${node.background.rgb.r},${node.background.rgb.g},${node.background.rgb.b},${node.background.rgb.a})`,
-                }
-              : { backgroundColor: "var(--a-gray-50)" }
-          }
-          className="flex justify-center rounded-lg p-0"
-        >
-          <img
-            alt={!node?.dekorativt ? node.alt : ""}
-            decoding="async"
-            src={urlFor(node).auto("format").url()}
-            className="rounded-lg"
-          />
-        </div>
-        {node.caption && (
-          <figcaption className="mt-2 grid gap-1 px-4">
+        <img
+          alt={!node?.dekorativt ? node.alt : ""}
+          decoding="async"
+          src={urlFor(node).auto("format").url()}
+          className="rounded-lg"
+        />
+      </div>
+      {node.caption && (
+        <figcaption className="mt-2 grid gap-1 px-4">
+          <BodyLong as="span" size="small" className="self-center">
+            {node.caption}
+          </BodyLong>
+          {node?.kilde?.har_kilde && (
             <BodyLong as="span" size="small" className="self-center">
-              {node.caption}
+              {node?.kilde?.link ? (
+                <>
+                  {`${node?.kilde?.prefix}: `}
+                  <NextLink href={node.kilde.link} passHref legacyBehavior>
+                    <Link className="break-normal">{node?.kilde?.tekst}</Link>
+                  </NextLink>
+                </>
+              ) : (
+                <>{`${node?.kilde?.prefix}: ${node?.kilde?.tekst}`}</>
+              )}
             </BodyLong>
-            {node?.kilde?.har_kilde && (
-              <BodyLong as="span" size="small" className="self-center">
-                {node?.kilde?.link ? (
-                  <>
-                    {`${node?.kilde?.prefix}: `}
-                    <NextLink href={node.kilde.link} passHref legacyBehavior>
-                      <Link className="break-normal">{node?.kilde?.tekst}</Link>
-                    </NextLink>
-                  </>
-                ) : (
-                  <>{`${node?.kilde?.prefix}: ${node?.kilde?.tekst}`}</>
-                )}
-              </BodyLong>
-            )}
-          </figcaption>
-        )}
-      </figure>
-    </>
+          )}
+        </figcaption>
+      )}
+    </figure>
   );
 };
 

diff --git a/aksel.nav.no/website/components/types/sanity-schema.ts b/aksel.nav.no/website/components/types/sanity-schema.ts
@@ -248,6 +248,7 @@ export interface BildeT {
     link?: string;
   };
   dekorativt?: boolean;
+  border?: boolean;
   background?: {
     rgb: { a: number; b: number; g: number; r: number };
     alpha: number;

diff --git a/aksel.nav.no/website/sanity/schema/objects/shared/bilde.tsx b/aksel.nav.no/website/sanity/schema/objects/shared/bilde.tsx
@@ -79,6 +79,12 @@ export const Bilde = defineType({
       type: "boolean",
       initialValue: false,
     }),
+    defineField({
+      name: "border",
+      title: "Border",
+      type: "boolean",
+      initialValue: true,
+    }),
     defineField({
       name: "background",
       title: "Bakgrunnsfarge",