From 17dd5483ca0c9a7b0c9c9cc030d837690ff67078 Mon Sep 17 00:00:00 2001
From: jer-k <jeremyk112@gmail.com>
Date: Wed, 16 Sep 2020 10:35:34 -0700
Subject: [PATCH] Added the ability to toggle the Carbon toolbar and adjust the
 margin

---
 .../app-components-highlight-code.md          |  2 ++
 .../deckdeckgo-highlight-code.scss            |  2 ++
 webcomponents/highlight-code/src/index.html   | 24 +++++++++++++++++++
 3 files changed, 28 insertions(+)

diff --git a/docs/docs/components/app-components-highlight-code/app-components-highlight-code.md b/docs/docs/components/app-components-highlight-code/app-components-highlight-code.md
index 3412042b7..b4753c74b 100644
--- a/docs/docs/components/app-components-highlight-code/app-components-highlight-code.md
+++ b/docs/docs/components/app-components-highlight-code/app-components-highlight-code.md
@@ -186,6 +186,7 @@ Furthermore the following styles apply if the code is displayed as a "carbon" te
 | CSS4 variable                                                  | Default                        | Note                                                    |
 | -------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------- |
 | --deckgo-highlight-code-carbon-display                         | block                          | The display property of the host container.             |
+| --deckgo-highlight-code-carbon-toolbar-display                 | block                          | The display property of the toolbar container.          |
 | --deckgo-highlight-code-carbon-overflow                        | auto                           | The overflow property of the host container.            |
 | --deckgo-highlight-code-carbon-border                          |                                | The border property of the host container.              |
 | --deckgo-highlight-code-carbon-border-radius                   | 4px                            | The border-radius property of the host container.       |
@@ -194,6 +195,7 @@ Furthermore the following styles apply if the code is displayed as a "carbon" te
 | --deckgo-highlight-code-carbon-box-shadow                      | rgba(0, 0, 0, 0.55) 0 8px 16px | The box-shadow property of the host container.          |
 | --deckgo-highlight-code-carbon-margin                          | 16px 0                         | The margin property of the host container.              |
 | --deckgo-highlight-code-carbon-header-padding                  | 16px                           | The padding property of the card header.                |
+| --deckgo-highlight-code-carbon-header-margin                   | 0                              | The margin property of the card header.                 |
 | --deckgo-highlight-code-carbon-header-button-width             | 12px                           | The width of a button of the card header.               |
 | --deckgo-highlight-code-carbon-header-button-height            | 12px                           | The height of a button of the card header.              |
 | --deckgo-highlight-code-carbon-header-button-border-radius     | 50%                            | The border-radius of a button of the card header.       |
diff --git a/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.scss b/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.scss
index 506fe7969..2c3f8294a 100644
--- a/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.scss
+++ b/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.scss
@@ -217,8 +217,10 @@ div.carbon {
   display: flex;
   justify-content: flex-start;
   padding: var(--deckgo-highlight-code-carbon-header-padding, 16px);
+  margin: var(--deckgo-highlight-code-carbon-header-margin, 0);
 
   > div {
+    display: var(--deckgo-highlight-code-carbon-toolbar-display, "block");
     width: var(--deckgo-highlight-code-carbon-header-button-width, 12px);
     height: var(--deckgo-highlight-code-carbon-header-button-height, 12px);
     border-radius: var(--deckgo-highlight-code-carbon-header-button-border-radius, 50%);
diff --git a/webcomponents/highlight-code/src/index.html b/webcomponents/highlight-code/src/index.html
index ab7aaff2b..21395dd13 100644
--- a/webcomponents/highlight-code/src/index.html
+++ b/webcomponents/highlight-code/src/index.html
@@ -193,6 +193,30 @@ <h1>Without line numbers</h1>
   boolean computeTest(int n);
 }
 
+public static void main(String args[]) {
+  NumericTest isEven = (n) -> (n % 2) == 0;
+  NumericTest isNegative = (n) -> (n < 0);
+
+  // Output: false
+  System.out.println(isEven.computeTest(5));
+
+  // Output: true
+  System.out.println(isNegative.computeTest(-5));
+}</code>
+</deckgo-highlight-code>
+
+    <h1>Without dots</h1>
+
+    <!-- prettier-ignore -->
+    <deckgo-highlight-code 
+      language="java" 
+      highlight-lines="0,2 6,6" 
+      style="--deckgo-highlight-code-carbon-toolbar-display: none; --deckgo-highlight-code-carbon-header-padding: 0; --deckgo-highlight-code-carbon-header-margin: 16px 0 0 0;"
+    >
+  <code slot="code">interface NumericTest {
+    boolean computeTest(int n);
+  }
+
 public static void main(String args[]) {
   NumericTest isEven = (n) -> (n % 2) == 0;
   NumericTest isNegative = (n) -> (n < 0);