From 29253124384f3c4aaefaa784aa4a076bf2e0fce3 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 11 Apr 2024 14:40:12 +0100
Subject: [PATCH] wip

---
 .../controls/FieldContext/FieldContext.svelte |  7 ++++-
 .../lines/JSONPrimitivesOnly.svelte           | 16 +++++++++++
 .../controls/FieldContext/lines/index.js      |  1 +
 .../FieldContext/typography/Comma.svelte      |  3 +-
 .../typography/DocumentationLink.svelte       |  1 +
 .../FieldContext/typography/Line.svelte       | 28 +++++++++++++++----
 .../FieldContext/typography/Period.svelte     |  3 +-
 .../FieldContext/typography/Space.svelte      |  1 +
 .../FieldContext/typography/Text.svelte       |  1 +
 9 files changed, 52 insertions(+), 9 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
index 667774d7c8..95b7c537ae 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte
@@ -1,7 +1,7 @@
 <script>
   import ExplanationModal from './ExplanationModal/index.svelte'
   import { messages as messageConstants, getColumnInfoMessagesAndSupport } from "./columnInfo";
-  import { Column, Support, NotRequired, StringNumber } from "./lines"
+  import { Column, Support, NotRequired, StringNumber, JSONPrimitivesOnly } from "./lines"
   import subjects from './subjects';
 
   export let columnInfo
@@ -59,6 +59,11 @@
       {setExplanationSubject}
     />
   {/if}
+  {#if messages.includes(messageConstants.jsonPrimitivesOnly)}
+    <JSONPrimitivesOnly
+      {setExplanationSubject}
+    />
+  {/if}
 </div>
 
 
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
new file mode 100644
index 0000000000..f2ad385d57
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
@@ -0,0 +1,16 @@
+<script>
+  import { Line, InfoWord, DocumentationLink, Space, Text, Period, Comma } from "../typography"
+  import subjects from '../subjects'
+
+  export let setExplanationSubject
+</script>
+
+
+<Line wrap>
+  <Text>
+    JSON Objects cannot be used, but scalar child values can be if their types are supported
+  </Text><Period />
+</Line>
+
+<style>
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/index.js b/packages/builder/src/components/design/settings/controls/FieldContext/lines/index.js
index bd010a820e..2b593faa83 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/index.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/index.js
@@ -2,3 +2,4 @@ export { default as Column } from "./Column.svelte"
 export { default as NotRequired } from "./NotRequired.svelte"
 export { default as StringNumber } from "./StringNumber.svelte"
 export { default as Support } from "./Support.svelte"
+export { default as JSONPrimitivesOnly } from "./JSONPrimitivesOnly.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte
index f160ea6e50..a1221d5321 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte
@@ -2,10 +2,11 @@
 
 <style>
   .comma {
-    margin-left: 2px;
     color: var(--grey-6);
     font-size: 17px;
     display: inline block;
     margin-right: 5px;
+    line-height: 26px;
+    margin-left: 2px;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte
index 66f8ea5790..dbff157c50 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte
@@ -41,6 +41,7 @@
     border-radius: 0;
     border-bottom: 1px solid var(--blue);
     transition: filter 300ms;
+    margin-right: 0px;
   }
 
   .link:hover {
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
index c15dd6c3ef..2dc61fa593 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
@@ -1,22 +1,38 @@
+<script>
+  export let wrap = false
+</script>
 <div class="line">
   <span class="bullet">•</span>
-  <slot />
+  <div class="content" class:wrap>
+    <slot />
+  </div>
 </div>
 
 <style>
+  .line {
+    background-color: var(--background-alt);
+    color: var(--ink);
+    align-items: flex-start;
+    display: flex;
+
+    margin-bottom: 10px;
+  }
+
   .bullet {
     color: var(--grey-6);
     font-size: 17px;
     display: inline block;
     margin-right: 10px;
+    line-height: 26px;
   }
 
-  .line {
-    background-color: var(--background-alt);
-    color: var(--ink);
-    align-items: center;
+  .content {
     display: flex;
+    min-width: 0;
+    align-items: center;
+  }
 
-    margin-bottom: 10px;
+  .wrap {
+    display: block;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte
index 6697e278a0..c5ab3b498b 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte
@@ -5,6 +5,7 @@
     color: var(--grey-6);
     font-size: 20px;
     display: inline block;
-    margin-left: 3px;
+    line-height: 26px;
+    margin-left: 2px;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
index ba72455d92..e6a1000762 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
@@ -3,5 +3,6 @@
 <style>
   .space {
     margin-right: 5px;
+    line-height: 26px;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
index 1527651a9c..0b688e7e06 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
@@ -3,5 +3,6 @@
 <style>
   .text {
     flex-shrink: 0;
+    line-height: 26px;
   }
 </style>