feat(#525): display code in styled cards

deckgo · Dec 11, 2019 · 1c2171f · 1c2171f
1 parent fc57e28
commit 1c2171f
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 12 deletions.
diff --git a/webcomponents/highlight-code/src/components.d.ts b/webcomponents/highlight-code/src/components.d.ts
@@ -14,6 +14,7 @@ export namespace Components {
   interface DeckgoHighlightCode {
     'anchor': string;
     'anchorZoom': string;
+    'carbon': boolean;
     'editable': boolean;
     'findNextAnchor': (enter: boolean) => Promise<DeckdeckgoHighlightCodeAnchor>;
     'hideAnchor': boolean;
@@ -43,6 +44,7 @@ declare namespace LocalJSX {
   interface DeckgoHighlightCode extends JSXBase.HTMLAttributes<HTMLDeckgoHighlightCodeElement> {
     'anchor'?: string;
     'anchorZoom'?: string;
+    'carbon'?: boolean;
     'editable'?: boolean;
     'hideAnchor'?: boolean;
     'highlightLines'?: string;

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
@@ -23,13 +23,28 @@
   }
 }
 
+:host(.deckgo-highlight-code-carbon) {
+  display: var(--deckgo-highlight-code-carbon-display, block);
+  overflow: var(--deckgo-highlight-code-carbon-overflow, auto);
+  border: var(--deckgo-highlight-code-carbon-border);
+  border-radius: var(--deckgo-highlight-code-carbon-border-radius, 4px);
+  background: var(--deckgo-highlight-code-carbon-background, #282a36);
+  color: var(--deckgo-highlight-code-carbon-color, white);
+  box-shadow: var(--deckgo-highlight-code-carbon-box-shadow, rgba(0, 0, 0, 0.55) 0 8px 16px);
+  margin: var(--deckgo-highlight-code-carbon-margin, 16px);
+}
+
+:host(.deckgo-highlight-code-carbon) ::slotted([slot="code"]) {
+  color: var(deckgo-highlight-code-carbon-color, white);
+}
+
 div.deckgo-highlight-code-container {
   color: var(--deckgo-highlight-code-color, inherit);
   background: var(--deckgo-highlight-code-background);
-  padding: var(--deckgo-highlight-code-padding);
+  padding: var(--deckgo-highlight-code-padding, 0 16px);
   border-radius: var(--deckgo-highlight-code-border-radius);
 
-  margin: var(--deckgo-highlight-code-margin, 0 0 64px);
+  margin: var(--deckgo-highlight-code-margin, 0 0 16px);
 
   transform-origin: bottom left;
   transition: all .2s ease-in-out;
@@ -99,11 +114,11 @@ div.deckgo-highlight-code-container {
     .token.prolog,
     .token.doctype,
     .token.cdata {
-      color: var(--deckgo-highlight-code-token-comment, slategray);
+      color: var(--deckgo-highlight-code-token-comment, #6272a4);
     }
 
     .token.punctuation {
-      color: var(--deckgo-highlight-code-token-punctuation, #999);
+      color: var(--deckgo-highlight-code-token-punctuation, inherit);
     }
 
     .token.property,
@@ -113,7 +128,7 @@ div.deckgo-highlight-code-container {
     .token.constant,
     .token.symbol,
     .token.deleted {
-      color: var(--deckgo-highlight-code-token-property, #905);
+      color: var(--deckgo-highlight-code-token-property, #bd93f9);
     }
 
     .token.selector,
@@ -122,32 +137,62 @@ div.deckgo-highlight-code-container {
     .token.char,
     .token.builtin,
     .token.inserted {
-      color: var(--deckgo-highlight-code-token-selector, #690);
+      color: var(--deckgo-highlight-code-token-selector, #50fa7b);
     }
 
     .token.operator,
     .token.entity,
     .token.url,
     .language-css .token.string,
     .style .token.string {
-      color: var(--deckgo-highlight-code-token-operator, #9a6e3a);
+      color: var(--deckgo-highlight-code-token-operator, #ff79c6);
     }
 
     .token.atrule,
     .token.attr-value,
     .token.keyword {
-      color: var(--deckgo-highlight-code-token-atrule, #07a);
+      color: var(--deckgo-highlight-code-token-atrule, #ff79c6);
     }
 
     .token.function,
     .token.class-name {
-      color: var(--deckgo-highlight-code-token-function, #DD4A68);
+      color: var(--deckgo-highlight-code-token-function, #ffb86c);
     }
 
     .token.regex,
     .token.important,
     .token.variable {
-      color: var(--deckgo-highlight-code-token-regex, #e90);
+      color: var(--deckgo-highlight-code-token-regex, #f1fa8c);
+    }
+  }
+}
+
+
+div.carbon {
+  display: flex;
+  justify-content: flex-start;
+  padding: var(--deckgo-highlight-code-carbon-header-padding, 16px);
+
+  > div {
+    width: var(--deckgo-highlight-code-carbon-header-button-width, 12px);
+    height: var(--deckgo-highlight-code-carbon-header-button-heeght, 12px);
+    border-radius: var(--deckgo-highlight-code-carbon-header-button-border-radius, 50%);
+    margin: var(--deckgo-highlight-code-carbon-header-button-margin, 0 6px 0 0);
+
+    &.red {
+      background: var(--deckgo-highlight-code-carbon-header-button-red-background, #FF5F56);
+      border: var(--deckgo-highlight-code-carbon-header-button-red-border, 0.5px solid #E0443E);
+    }
+
+    &.yellow {
+      background: var(--deckgo-highlight-code-carbon-header-button-yellow-background, #FFBD2E);
+      border: var(--deckgo-highlight-code-carbon-header-button-yellow-border, 0.5px solid #DEA123);
+    }
+
+    &.green {
+      background: var(--deckgo-highlight-code-carbon-header-button-green-background, #27C93F);
+      border: var(--deckgo-highlight-code-carbon-header-button-green-border, 0.5px solid #1AAB29);
     }
   }
+
 }
diff --git a/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.tsx b/webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.tsx
@@ -27,6 +27,8 @@ export class DeckdeckgoHighlightCode {
   @Prop({ reflectToAttr: true }) highlightLines: string;
   @Prop({ reflectToAttr: true }) lineNumbers: boolean = false;
 
+  @Prop({ reflectToAttr: true }) carbon: boolean = true;
+
   @Prop() editable: boolean = false;
 
   @State() editing: boolean = false;
@@ -502,7 +504,11 @@ export class DeckdeckgoHighlightCode {
 
   render() {
     return (
-      <Host class={{ 'deckgo-highlight-code-edit': this.editing }}>
+      <Host class={{
+        'deckgo-highlight-code-edit': this.editing,
+        'deckgo-highlight-code-carbon': this.carbon
+      }}>
+        {this.renderCarbon()}
         <div class="deckgo-highlight-code-container"
           onMouseDown={() => this.edit()}
           onTouchStart={() => this.edit()}>
@@ -513,4 +519,19 @@ export class DeckdeckgoHighlightCode {
     );
   }
 
+  private renderCarbon() {
+    if (!this.carbon) {
+      return undefined;
+    }
+
+    return <div class="carbon">
+      {this.renderCarbonCircle('red')}
+      {this.renderCarbonCircle('yellow')}
+      {this.renderCarbonCircle('green')}
+    </div>
+  }
+
+  private renderCarbonCircle(color: 'red' | 'yellow' | 'green') {
+    return <div class={color}></div>;
+  }
 }
diff --git a/webcomponents/highlight-code/src/index.html b/webcomponents/highlight-code/src/index.html
@@ -60,7 +60,7 @@ <h1>From src:</h1>
 
 <button onclick="toggleSrcLineNumbers()" style="margin-bottom: 16px;">Toggle fetched line numbers</button>
 
-<deckgo-highlight-code line-numbers="true" id="deckGoCode"
+<deckgo-highlight-code line-numbers="true" id="deckGoCode" carbon="false"
                        src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/core/src/components/deck/deckdeckgo-deck/deckdeckgo-deck.tsx">
 </deckgo-highlight-code>