fix unescape behavior on <light-preview> (#24)

* fix unescape behavior

* update to fix bugs and add slots

CHANGELOG.md

@@ -1,4 +1,9 @@
-## Next
+## 4.1.0 - 08/03/2024
+
+- Feature(light-preview): Added the `after-actions`, `above-expanded-code`, and `after-expanded-code` slots and parts. [#24]
+- Bug Fix(light-preview): now properly listens to changes to `unescapeBehavior` / `unescape-behavior` [#24]
+
+## 4.0.0 - 08/01/2024
 
 - BREAKING_CHANGE: All components are now scoped under `exports/components/<component-name>/<component-name>.js`
 

exports/components/light-preview/light-preview.js

@@ -40,16 +40,24 @@ const sourceCodeFallback = "Show source code";
  * @csspart code-wrapper - The div that wraps the <pre> + <code> elements containing your highlighted code
  * @csspart pre - The <pre> element wrapping the source code
  * @csspart code - The <code>  element wrapping the source code
- * @csspart actions - The buttons at the bottom of the code previewer
  * @csspart source-code-toggle - The button to show the source code
+ * @csspart actions - The buttons at the bottom of the code previewer
+ * @csspart before-expanded-code - A wrapper around the "before-expanded-code" slot
+ * @csspart after-expanded-code - A wrapper around the "after-expanded-code" slot
+ * @csspart after-actions - A wrapper around the "after-actions" slot
  * @csspart source-code-toggle-icon - The caret icon in the source code toggle
  *
  * @slot resize-icon - The icon to display in the resizer button. Override this to provide your own icon.
  * @slot summary - What to display in source code expander
  * @slot source-code-toggle-icon - Slot in your own icon to override the default caret.
- * @slot actions - Slot in buttons / links to allow for additional actions in the bottom bar.
+ * @slot above-actions - Additional actions placed above the source code toggle
+ * @slot below-actions - Additional actions placed above the source code toggle
+ * @slot actions - Slot in buttons / links to allow for additional actions in the bottom bar. These are placed inline.
  * @slot preview-html - If you want to run code that is slightly different from the source code you want to display, slot it into "preview-html"
  * @slot code - Used to display both source code and to power your preview in the iframe. If you slot in "preview-html", then it will only be used to show / highlight your source code.
+ * @slot before-expanded-code - A slot to add actions such as buttons. This will sit above the source-code-toggle, and when code is expanded, will be *above* the expanded code.
+ * @slot after-expanded-code - A slot to add actions such as buttons. This will sit above the source-code-toggle, and when code is expanded, will be *below* the expanded code.
+ * @slot after-actions - A slot add actions below the source-code-toggle button.
  */
 export default class LightPreview extends BaseElement {
   /**
@@ -86,6 +94,7 @@ export default class LightPreview extends BaseElement {
     resizing: { reflect: true, type: Boolean },
     scriptScope: { attribute: "script-scope" },
     previewHtml: { attribute: "preview-html" },
+    unescapeBehavior: { attribute: "unescape-behavior" },
 
     // <light-code> properties
     disableHighlight: { type: Boolean, attribute: "disable-highlight" },
@@ -604,6 +613,7 @@ export default class LightPreview extends BaseElement {
           <div part="end-panel"></div>
         </div>
 
+        <div part="above-expanded-code"><slot name="above-expanded-code"></slot></div>
         <light-disclosure
           id="details"
           ?open=${this.open}
@@ -631,8 +641,9 @@ export default class LightPreview extends BaseElement {
             ></light-code>
           </div>
         </light-disclosure>
-
+        <div part="after-expanded-code"><slot name="after-expanded-code"></slot></div>
         <div part="actions">
+          <div><slot name="before-toggle-button"></slot></div>
           <button
             class="light-button"
             part="source-code-toggle"
@@ -658,9 +669,9 @@ export default class LightPreview extends BaseElement {
               </svg>
             </slot>
           </button>
-
           <slot name="actions"></slot>
         </div>
+        <div part="after-actions"><slot name="after-actions"></slot></div>
       </div>
 
       <div hidden>

exports/components/light-preview/light-preview.styles.js

@@ -19,7 +19,7 @@ export const previewStyles = css`
     border-radius: 3px;
     display: grid;
     grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
+    grid-template-rows: minmax(0, auto) minmax(0, 1fr) repeat(3, minmax(0, auto));
     height: 100%;
     min-height: inherit;
   }
@@ -67,7 +67,7 @@ export const previewStyles = css`
     display: grid;
     align-items: center;
     grid-auto-flow: column;
-    grid-template-columns: minmax(0, 1fr) repeat(auto-fill, minmax(0, auto));
+    grid-template-columns: minmax(0, auto) minmax(0, 1fr) repeat(auto-fill, minmax(0, auto));
     grid-template-rows: minmax(0, 1fr);
   }