UX: makes it clearer a policy is added in the composer preview (#17)

UX: makes it clearer a policy is added in the composer preview (#17)

diff --git a/assets/javascripts/initializers/extend-for-policy.js.es6 b/assets/javascripts/initializers/extend-for-policy.js.es6
index 7c2e18f..9a5aa3b 100644
--- a/assets/javascripts/initializers/extend-for-policy.js.es6
+++ b/assets/javascripts/initializers/extend-for-policy.js.es6
@@ -43,6 +43,11 @@ function initializePolicy(api) {
     policy.innerHTML = `<div class="policy-body">${policy.innerHTML}</div>`;
 
     if (!helper) {
+      // if no helper it means we are decorating the preview, make it clear it's a policy
+      const policyPreview = document.createElement("div");
+      policyPreview.classList.add("policy-preview");
+      policyPreview.innerText = I18n.t("discourse_policy.title");
+      policy.prepend(policyPreview);
       return;
     }
 
@@ -67,7 +72,7 @@ function initializePolicy(api) {
   }
 
   api.decorateCookedElement(attachPolicy, {
-    onlyStream: true,
+    onlyStream: false,
     id: "discouse-policy",
   });
 
diff --git a/assets/stylesheets/common/discourse-policy.scss b/assets/stylesheets/common/discourse-policy.scss
index a49a1fb..b429c60 100644
--- a/assets/stylesheets/common/discourse-policy.scss
+++ b/assets/stylesheets/common/discourse-policy.scss
@@ -2,7 +2,6 @@
 .cooked .policy {
   position: relative;
   border: 1px solid var(--primary-low, $primary-low);
-
   .policy-body {
     padding: 0.75em;
     margin-bottom: 2em;
@@ -121,6 +120,11 @@
 
 // Policy in editor styles
 .d-editor-preview .policy {
-  padding: 0 0.5em;
+  padding: 0.5em;
   border: 1px solid var(--primary-low, $primary-low);
+
+  .policy-preview {
+    font-size: $font-up-1;
+    font-weight: 700;
+  }
 }
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index c22f006..fb80827 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -1,6 +1,7 @@
 en:
   js:
     discourse_policy:
+      title: "Policy"
       accepted_tooltip: "Users who have accepted this policy"
       not_accepted_tooltip: "Users who have not accepted this policy"
       accept_policy: "Accept Policy"

GitHub sha: 2ed38fd0

This commit appears in #17 which was approved by danielwaterworth. It was merged by jjaffeux.