From efdb4e95c63485e03cb2f04a2b8541ac2c654757 Mon Sep 17 00:00:00 2001
From: Mathias Oterhals Myklebust <mom@variant.no>
Date: Wed, 28 Aug 2024 13:42:20 +0200
Subject: [PATCH] feat(salaryAndBenefits): add Norway only disclaimer to
 calculator toggle

---
 studio/components/MultiLineDescription.tsx    | 16 ++++++++++++++++
 studio/schemas/documents/salaryAndBenefits.ts |  9 ++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 studio/components/MultiLineDescription.tsx

diff --git a/studio/components/MultiLineDescription.tsx b/studio/components/MultiLineDescription.tsx
new file mode 100644
index 000000000..4aadc05a1
--- /dev/null
+++ b/studio/components/MultiLineDescription.tsx
@@ -0,0 +1,16 @@
+import { HTMLProps } from "react";
+
+const MultiLineDescription = ({
+  lines,
+  ...props
+}: { lines: string[] } & HTMLProps<HTMLDivElement>) => {
+  return (
+    <div {...props}>
+      {lines.map((l, i) => (
+        <p key={i}>{l}</p>
+      ))}
+    </div>
+  );
+};
+
+export default MultiLineDescription;
diff --git a/studio/schemas/documents/salaryAndBenefits.ts b/studio/schemas/documents/salaryAndBenefits.ts
index 6268463af..cf41bc2b2 100644
--- a/studio/schemas/documents/salaryAndBenefits.ts
+++ b/studio/schemas/documents/salaryAndBenefits.ts
@@ -3,6 +3,7 @@ import { titleSlug } from "../schemaTypes/slug";
 import seo from "../objects/seo";
 import { title } from "../fields/text";
 import { benefitId } from "./benefit";
+import MultiLineDescription from "../../components/MultiLineDescription";
 
 export const salaryAndBenefitsId = "salaryAndBenefits";
 
@@ -17,7 +18,13 @@ const salaryAndBenefits = defineType({
     defineField({
       name: "showSalaryCalculator",
       title: "Show Salary Calculator",
-      description: "Should the salary calculator be visible on the page?",
+      description: MultiLineDescription({
+        lines: [
+          "Should the salary calculator be visible on the page?",
+          "🇳🇴 Only for Norway",
+        ],
+        style: { paddingBottom: "0.35rem" },
+      }),
       type: "boolean",
       initialValue: true,
     }),