From feef3450b7abe50d41cbabc3f36cf3c344be9633 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Wed, 17 Apr 2024 07:54:53 +0100
Subject: [PATCH] example section

---
 .../subjects/DatesAsNumbers.svelte            | 30 ++++++++----
 .../subjects/ScalarJsonOnly.svelte            | 20 +++-----
 .../subjects/StringsAsNumbers.svelte          | 46 ++++++++++++-------
 .../subjects/components/Block.svelte          |  1 +
 .../subjects/components/ExampleLine.svelte    | 12 +++++
 .../subjects/components/ExampleSection.svelte | 31 +++++++++++++
 .../subjects/components/Section.svelte        |  4 --
 .../subjects/components/index.js              |  2 +
 .../lines/JSONPrimitivesOnly.svelte           |  1 +
 9 files changed, 104 insertions(+), 43 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/ExampleLine.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/ExampleSection.svelte

diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte
index 0c851d77a2..3effc88640 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte
@@ -1,6 +1,6 @@
 <script>
   import { onMount } from "svelte"
-  import { Block, Subject, Section } from './components'
+  import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
 
   let timestamp = Date.now();
 
@@ -28,13 +28,23 @@
     A date can be used in place of a numeric value, but it will be parsed as a <Block>UNIX epoch</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
   </Section>
 
-  <Section>
-    Examples:
-    <br />
-    1st Jan 2000: <Block>946684800000</Block>
-    <br />
-    1st Jan 2020: <Block>1577836800000</Block>
-    <br />
-    Now: <Block>{timestamp}</Block>
-  </Section>
+    <ExampleSection
+      heading="Examples:"
+    >
+      <ExampleLine>
+        1st Jan 2000<span class="separator">: </span><Block>946684800000</Block>
+      </ExampleLine>
+      <ExampleLine>
+        1st Jan 2020<span class="separator">: </span><Block>1577836800000</Block>
+      </ExampleLine>
+      <ExampleLine>
+        Now<span class="separator">:</span> <Block>{timestamp}</Block>
+      </ExampleLine>
+    </ExampleSection>
 </Subject>
+
+<style>
+  .separator {
+    margin-right: 5px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte
index 2690607cf3..962f007daa 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Body } from "@budibase/bbui"
-  import { Block, Subject, Section } from './components'
+  import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
 
   export let schema
   export let columnName
@@ -38,25 +38,19 @@
   </Section>
 
   {#if scalarDescendants.length > 0}
-    <Section>
-      Examples scalar descendants of this object:
-      <br />
-
+    <ExampleSection
+      heading="Examples scalar descendants of this object:"
+    >
       {#each scalarDescendants as descendant}
-        <div class="example">
+        <ExampleLine>
           <Block truncate>{descendant.name}</Block><span class="separator">-</span><Block truncate noShrink>{descendant.type}</Block>
-          </div>
+        </ExampleLine>
       {/each}
-    </Section>
+    </ExampleSection>
   {/if}
 </Subject>
 
 <style>
-  .example {
-    display: flex;
-    margin-bottom: 2px;
-  }
-
   .separator {
     margin: 0 4px;
     flex-shrink: 0;
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/StringsAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/StringsAsNumbers.svelte
index f2148a6255..0a466bf193 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/StringsAsNumbers.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/StringsAsNumbers.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Block, Subject, Section } from './components'
+  import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
 </script>
 
 <Subject heading="Text as Numbers">
@@ -7,19 +7,33 @@
     Text can be used in place of numbers in certain scenarios, but care needs to be taken, as text that doesn't contain a strictly base-ten integer or decimal value may lead to unexpected behavior.
   </Section>
 
-  <Section>
-    Examples:
-    <br />
-    <Block>"100"</Block>{" -> "}<Block>100</Block>
-    <br />
-    <Block>"100k"</Block>{" -> "}<Block>100</Block>
-    <br />
-    <Block>"100,000"</Block>{" -> "}<Block>100</Block>
-    <br />
-    <Block>"100 million"</Block>{" -> "}<Block>100</Block>
-    <br />
-    <Block>"100.9"</Block>{" -> "}<Block>100.9</Block>
-    <br />
-    <Block>"One hundred"</Block>{" -> "}<Block>Error</Block>
-  </Section>
+  <ExampleSection
+    heading="Examples:"
+  >
+    <ExampleLine>
+      <Block>"100"</Block><span class="separator">{"->"}</span><Block>100</Block>
+    </ExampleLine>
+    <ExampleLine>
+      <Block>"100k"</Block><span class="separator">{"->"}</span><Block>100</Block>
+    </ExampleLine>
+    <ExampleLine>
+      <Block>"100,000"</Block><span class="separator">{"->"}</span><Block>100</Block>
+    </ExampleLine>
+    <ExampleLine>
+      <Block>"100 million"</Block><span class="separator">{"->"}</span><Block>100</Block>
+    </ExampleLine>
+    <ExampleLine>
+      <Block>"100.9"</Block><span class="separator">{"->"}</span><Block>100.9</Block>
+    </ExampleLine>
+    <ExampleLine>
+      <Block>"One hundred"</Block><span class="separator">{"->"}</span><Block>Error</Block>
+    </ExampleLine>
+  </ExampleSection>
 </Subject>
+
+<style>
+  .separator {
+    margin: 0 4px;
+    flex-shrink: 0;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte
index 761abfbdc8..6ee93ff1a6 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte
@@ -2,6 +2,7 @@
   export let truncate = false
   export let noShrink = false
 </script>
+
 <span class:truncate class:noShrink class="block">
   <slot />
 </span>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/ExampleLine.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/ExampleLine.svelte
new file mode 100644
index 0000000000..f72417354c
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/ExampleLine.svelte
@@ -0,0 +1,12 @@
+<li>
+<div class="exampleLine">
+  <slot />
+</div>
+</li>
+
+<style>
+  .exampleLine {
+    display: flex;
+    margin-bottom: 2px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/ExampleSection.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/ExampleSection.svelte
new file mode 100644
index 0000000000..fa5fd8e081
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/ExampleSection.svelte
@@ -0,0 +1,31 @@
+<script>
+  import Section from "./Section.svelte"
+  export let heading
+</script>
+
+<Section>
+  <span class="exampleSectionHeading">
+    <slot name="heading">
+      {heading}
+    </slot>
+  </span>
+  <ul>
+    <slot />
+  </ul>
+</Section>
+
+<style>
+  .exampleSectionHeading {
+    display: inline-block;
+    margin-bottom: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+
+  ul {
+    padding: 0 0 0 23px;
+    margin: 0;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
index 3bc3ec945d..486e111725 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
@@ -8,8 +8,4 @@
     margin-bottom: 13px;
     overflow: hidden;
   }
-
-  .section :global(ul) {
-    padding-left: 24px;
-  }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
index 4fde1de91f..d174f4d6cc 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
@@ -4,3 +4,5 @@ export { default as JSONValue } from "./JSONValue.svelte"
 export { default as BindingValue } from "./BindingValue.svelte"
 export { default as Section } from "./Section.svelte"
 export { default as Block } from "./Block.svelte"
+export { default as ExampleSection } from "./ExampleSection.svelte"
+export { default as ExampleLine } from "./ExampleLine.svelte"
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
index 5b27a3142a..ee4b258b80 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
@@ -9,6 +9,7 @@
 <Line>
   <InfoWord
   on:mouseenter={() => setExplanationSubject(subjects.scalarJsonOnly)}
+  on:mouseleave={() => setExplanationSubject(subjects.none)}
 >Scalar JSON values</InfoWord>
   <Text
     value=" can be used with this component if their individual types are supported"