From 2dccd49a61eae0e0ba05b518f6978b6580e3ff66 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Mon, 1 Feb 2021 13:13:50 +0000
Subject: [PATCH 1/3] Fixing some styling issues.

---
 .../design/PropertiesPanel/BindingPanel.svelte     | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
index 56bbc2d55b..3129ed1671 100644
--- a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
@@ -92,7 +92,7 @@
           <li on:click={() => addToText(helper.text)}>
             <div>
               <Label extraSmall>{helper.displayText}</Label>
-              {@html helper.description}
+              <div class="helper-description">{@html helper.description}</div>
             </div>
           </li>
         {/each}
@@ -183,4 +183,16 @@
     color: var(--red);
     text-decoration: underline;
   }
+
+  :global(.helper-description p) {
+    color: var(--grey-7);
+  }
+
+  :global(.helper-description p:hover) {
+    color: var(--ink);
+  }
+
+  :global(.helper-description p a) {
+    color: var(--grey-7);
+  }
 </style>

From 17ad4577f65cc1941c737f9850e320e93f5cb86e Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Mon, 1 Feb 2021 13:17:42 +0000
Subject: [PATCH 2/3] Updating manifest tests.

---
 packages/string-templates/test/basic.spec.js   | 2 +-
 packages/string-templates/test/helpers.spec.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/string-templates/test/basic.spec.js b/packages/string-templates/test/basic.spec.js
index dc5e4bb9ac..7edf89c6c3 100644
--- a/packages/string-templates/test/basic.spec.js
+++ b/packages/string-templates/test/basic.spec.js
@@ -107,6 +107,6 @@ describe("check manifest", () => {
   it("should be able to retrieve the manifest", () => {
     const manifest = getManifest()
     expect(manifest.math).not.toBeNull()
-    expect(manifest.math.abs.description).toBe("Return the magnitude of `a`.")
+    expect(manifest.math.abs.description).toBe("<p>Return the magnitude of <code>a</code>.</p>\n")
   })
 })
\ No newline at end of file
diff --git a/packages/string-templates/test/helpers.spec.js b/packages/string-templates/test/helpers.spec.js
index bbd0e64e6e..6eadaabb05 100644
--- a/packages/string-templates/test/helpers.spec.js
+++ b/packages/string-templates/test/helpers.spec.js
@@ -167,7 +167,7 @@ describe("test the date helpers", () => {
   it("should allow use of the date helper with now time", async () => {
     const date = new Date()
     const output = await processString("{{ date now 'DD' }}", {})
-    expect(output).toBe(date.getDate().toString())
+    expect(parseInt(output)).toBe(date.getDate())
   })
 })
 

From 006cae56ab9c568f0dd35dbc201d2d4bd78ecf3a Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Mon, 1 Feb 2021 13:20:39 +0000
Subject: [PATCH 3/3] Updating global selectors to be specific to component.

---
 .../components/design/PropertiesPanel/BindingPanel.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
index 3129ed1671..1f57d77fcc 100644
--- a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
@@ -92,7 +92,7 @@
           <li on:click={() => addToText(helper.text)}>
             <div>
               <Label extraSmall>{helper.displayText}</Label>
-              <div class="helper-description">{@html helper.description}</div>
+              <div class="description">{@html helper.description}</div>
             </div>
           </li>
         {/each}
@@ -184,15 +184,15 @@
     text-decoration: underline;
   }
 
-  :global(.helper-description p) {
+  .description :global(p) {
     color: var(--grey-7);
   }
 
-  :global(.helper-description p:hover) {
+  .description :global(p:hover) {
     color: var(--ink);
   }
 
-  :global(.helper-description p a) {
+  .description :global(p a) {
     color: var(--grey-7);
   }
 </style>