ueno-llc · Klimonov · Sep 11, 2020 · Sep 16, 2020
diff --git a/docs/src/components-spec.json b/docs/src/components-spec.json
@@ -240,6 +240,7 @@
     "events": { "update": "slider value changed" }
   },
   "gux-spin-button": {},
+  "gux-summary-palette": {},
   "gux-switch": {
     "attributes": { "selected-value": "text" },
     "events": { "selectionChanged": "switch state was changed" }

diff --git a/src/components/beta/gux-summary-palette/example.html b/src/components/beta/gux-summary-palette/example.html
@@ -0,0 +1,99 @@
+
+<div style="display: flex; height: 300px;">
+  <div style="padding: 48px; background: antiquewhite">
+    <h1 >Table</h1>
+  </div>
+  <gux-summary-palette-beta>
+    <gux-summary-palette-section slot="Forms" check-box="Optional">
+      <gux-summary-palette-section-option>
+        Performance Tiers
+      </gux-summary-palette-section-option>
+    </gux-summary-palette-section>
+    <gux-summary-palette-section slot="Evaluator">
+      <gux-summary-palette-section-option>
+        Location: Toronto
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Location: Wisconsin
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Location: Nevada
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Location: UK
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Location: Austria
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Location: Santa Monica
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Location: St Peterburg
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Location: Mexico
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Location: Toronto
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Location: Wisconsin
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Location: Nevada
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Location: UK
+      </gux-summary-palette-section-option>
+    </gux-summary-palette-section>
+    <gux-summary-palette-section options slot="Interaction Criteria">
+      <gux-summary-palette-section-option>
+        Agents: Workgroup A
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Date Range: Last 30 days
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Category: Exclude Billing Issues
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Agents: Workgroup A
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Date Range: Last 30 days
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Category: Exclude Billing Issues
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Agents: Workgroup A
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Date Range: Last 30 days
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Category: Exclude Billing Issues
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Agents: Workgroup A
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Date Range: Last 30 days
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Category: Exclude Billing Issues
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Agents: Workgroup A
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Date Range: Last 30 days
+      </gux-summary-palette-section-option>
+      <gux-summary-palette-section-option>
+        Category: Exclude Billing Issues
+      </gux-summary-palette-section-option>
+    </gux-summary-palette-section>
+  </div>
+  </gux-summary-palette-beta>
+</div>
diff --git a/src/components/beta/gux-summary-palette/gux-summary-palette.less b/src/components/beta/gux-summary-palette/gux-summary-palette.less
@@ -0,0 +1,124 @@
+// Variables part
+
+gux-summary-palette-beta {
+  .gux-summary-palette {
+    background-color: @gux-off-white-bg-2;
+
+  }
+  .gux-summary-palette-info {
+    padding: 0 48px;
+  }
+  .title {
+    padding-left: 16px;
+    font-weight: 100;
+    position: fixed;
+    background-color: @gux-off-white-bg-2;
+    width: 255px;
+    height: 40px;
+    margin-top: 0;
+    padding-top: 15px;
+  }
+  gux-accordion {
+    .gux-accordion {
+      padding-top: 55px;
+      background-color: inherit!important;
+      width: 272px;
+
+      .section .content {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+    }
+  }
+  gux-disclosure-button {
+    .disclosure-panel {
+      overflow-x: scroll;
+    }
+  }
+
+  .gux-summary-palette-section-option-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 0;
+  }
+
+  .gux-summary-palette-section-option,
+  .gux-summary-palette-section-deleted-option {
+    margin: 0;
+    padding: 5px 0;
+    width: 100%;
+    display: flow-root;
+  }
+
+  .icon-row {
+    position: relative;
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    margin-right: 5px;
+  }
+
+  .delete-icon,
+  .undo-icon {
+    cursor: pointer;
+    margin-right: 5px;
+    color: @gux-icons;
+    position: absolute;
+
+    &:hover {
+      color: @gux-dark-blue;
+    }
+  }
+
+  .gux-summary-palette-section-deleted-option {
+    color: @gux-grey-2;
+    opacity: .5;
+    white-space: nowrap;
+    overflow: hidden;
+    max-width: 170px;
+    text-overflow: ellipsis;
+
+    .icon-row {
+      margin-right: 8px;
+    }
+  }
+
+  .undo-icon {
+    color: @gux-grey-2;
+  }
+
+  .options-row > div {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin: 20px 0;
+  }
+}
+
+// Theming
+// Light
+.gux-summary-palette-light-theme {
+}
+.gux-light-theme {
+  gux-summary-palette-beta {
+    .gux-summary-palette-light-theme();
+  }
+}
+gux-summary-palette-beta.gux-light-theme {
+  .gux-summary-palette-light-theme();
+}
+// Dark
+.gux-summary-palette-dark-theme {
+}
+.gux-dark-theme {
+  gux-summary-palette-beta {
+    .gux-summary-palette-dark-theme();
+  }
+}
+gux-summary-palette-beta.gux-dark-theme {
+  .gux-summary-palette-dark-theme();
+}
+// Default
+gux-summary-palette-beta {
+  .gux-summary-palette-light-theme();
+}
diff --git a/src/components/beta/gux-summary-palette/gux-summary-palette.tsx b/src/components/beta/gux-summary-palette/gux-summary-palette.tsx
@@ -0,0 +1,51 @@
+import { Component, Element, h, Method, Prop, State } from '@stencil/core';
+
+interface IAccordionSection {
+  slotName: string;
+}
+
+@Component({
+  styleUrl: 'gux-summary-palette.less',
+  tag: 'gux-summary-palette-beta'
+})
+export class GuxSummaryPalette {
+  @Element()
+  root: HTMLElement;
+
+  sections: IAccordionSection[] = [];
+
+  componentWillLoad() {
+    this.initializeSections();
+  }
+
+  initializeSections() {
+    const children = Array.from(this.root.children);
+    children.map(element => {
+      const slot = element.getAttribute('slot');
+      if (slot) {
+        this.sections.push({
+          slotName: slot
+        });
+      }
+    });
+  }
+
+  render() {
+    return (
+      <div class="gux-summary-palette">
+        <gux-disclosure-button position="right">
+          <div slot="panel-content">
+            <div class="gux-summary-palette-info">
+              <gux-accordion>
+                {this.sections.map(slot => (
+                  <slot name={slot.slotName} />
+                ))}
+              </gux-accordion>
+              <h2 class="title">Evaluation Summary</h2>
+            </div>
+          </div>
+        </gux-disclosure-button>
+      </div>
+    );
+  }
+}
diff --git a/src/components/beta/gux-summary-palette/readme.md b/src/components/beta/gux-summary-palette/readme.md
@@ -0,0 +1,27 @@
+# gux-summary-palette
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Dependencies
+
+### Depends on
+
+- [gux-disclosure-button](../../stable/gux-disclosure-button)
+- [gux-accordion](../../stable/gux-accordion)
+
+### Graph
+```mermaid
+graph TD;
+  gux-summary-palette-beta --> gux-disclosure-button
+  gux-summary-palette-beta --> gux-accordion
+  gux-disclosure-button --> gux-icon
+  gux-accordion --> gux-icon
+  style gux-summary-palette-beta fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/...gux-summary-palette/summary-palette-section-option/gux-summary-palette-section-option.tsx b/...gux-summary-palette/summary-palette-section-option/gux-summary-palette-section-option.tsx
@@ -0,0 +1,64 @@
+import { Component, h, Prop, State } from '@stencil/core';
+
+@Component({
+  tag: 'gux-summary-palette-section-option'
+})
+export class GuxSummaryPaletteSectionOption {
+  @Prop()
+  slot: string;
+
+  @State()
+  element: HTMLElement | string;
+
+  @State()
+  isDeleteElement: boolean = false;
+
+  @State()
+  defaultElement: HTMLElement = (
+    <p class="gux-summary-palette-section-option">
+      <span class="icon-row">
+        <gux-icon
+          class="delete-icon"
+          icon-name="close"
+          decorative
+          onClick={() => this.deleteElement()}
+        />
+      </span>
+      <slot />
+    </p>
+  );
+
+  componentWillLoad() {
+    this.element = this.defaultElement;
+  }
+
+  private deleteElement() {
+    this.isDeleteElement = true;
+    this.element = (
+      <p class="gux-summary-palette-section-deleted-option">
+        <span class="icon-row">
+          <gux-icon
+            class="undo-icon"
+            icon-name="ic-undo"
+            decorative
+            onClick={() => this.undoDeletingElement()}
+          />
+        </span>
+        Undo | Removed: <slot />
+      </p>
+    );
+    setTimeout(() => {
+      if (this.isDeleteElement) this.element = null;
+      this.isDeleteElement = false;
+    }, 5000);
+  }
+
+  private undoDeletingElement() {
+    this.isDeleteElement = false;
+    this.element = this.defaultElement;
+  }
+
+  render() {
+    return this.element;
+  }
+}