APIC-830 collapsable example panel (#26)

* APIC-830 Add behavior collapsable to panel example 

Co-authored-by: Carolina Wright <carolina.wright@mulesoft.com>

Author: alexpmule

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@api-components/api-resource-example-document",
   "description": "A viewer for examples in a resource based on AMF model",
-  "version": "4.3.4",
+  "version": "4.3.5",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",

package.json

@@ -410,15 +410,17 @@ export class ApiExampleRender extends LitElement {
     const isJson = this._computeIsJson(this.isJson, example.value);
     return html`
     <div class="example-actions">
-      <anypoint-button
-        part="content-action-button, code-content-action-button"
-        class="action-button"
-        data-action="copy"
-        @click="${this._copyToClipboard}"
-        ?compatibility="${compatibility}"
-        title="Copy example to clipboard"
-      >Copy</anypoint-button>
-      ${isJson ? html`
+    <arc-icon class="info-icon" icon="code"></arc-icon>
+      <div>
+        <anypoint-button
+          part="content-action-button, code-content-action-button"
+          class="action-button"
+          data-action="copy"
+          @click="${this._copyToClipboard}"
+          ?compatibility="${compatibility}"
+          title="Copy example to clipboard"
+        >Copy</anypoint-button>
+        ${isJson ? html`
         <anypoint-button
           part="content-action-button, code-content-action-button"
           class="action-button"
@@ -429,17 +431,18 @@ export class ApiExampleRender extends LitElement {
           ?compatibility="${compatibility}"
           title="Toggle between table and JSON view"
         >Table view</anypoint-button>` : ''}
-      ${hasRaw ? html`
-        <anypoint-button
-          part="content-action-button, code-content-action-button"
-          class="action-button"
-          data-action="code"
-          toggles
-          .active="${this.sourceOpened}"
-          @active-changed="${this._toggleSourceOpened}"
-          ?compatibility="${compatibility}"
-          title="Toggle between JSON and example source view"
-        >Source view</anypoint-button>` : ''}
+        ${hasRaw ? html`
+          <anypoint-button
+            part="content-action-button, code-content-action-button"
+            class="action-button"
+            data-action="code"
+            toggles
+            .active="${this.sourceOpened}"
+            @active-changed="${this._toggleSourceOpened}"
+            ?compatibility="${compatibility}"
+            title="Toggle between JSON and example source view"
+          >Source view</anypoint-button>` : ''}
+      </div>
     </div>`;
   }
 

src/ApiExampleRender.js

@@ -216,4 +216,6 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) {
   _computeExampleDescription(example: Example): string;
 
   _exampleTitleIsMediaType(example: Example): boolean;
+
+  _handleCollapsePanel(): void;
 }

src/ApiResourceExampleDocument.d.ts

@@ -117,6 +117,10 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) {
        * read-only properties to the example
        */
       renderReadOnly: { type: Boolean },
+      /**
+       * If enabled, the example panel would be closed
+       */
+      _collapseExamplePanel: { type: Boolean, reflect: true },
     };
   }
 
@@ -313,6 +317,19 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) {
     }));
   }
 
+  get _collapseExamplePanel() {
+    return this.__collapseExamplePanel
+  }
+
+  set _collapseExamplePanel(value) {
+    const old = this.__collapseExamplePanel;
+    if (old === value) {
+      return;
+    }
+    this.__collapseExamplePanel = value;
+    this.requestUpdate('_collapseExamplePanel', old);
+  }
+
   constructor() {
     super();
     this._onStorageChanged = this._onStorageChanged.bind(this);
@@ -324,6 +341,7 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) {
     this.hasExamples = false;
     this.compatibility = false;
     this.renderReadOnly = false;
+    this._collapseExamplePanel = false;
     this._ensureJsonTable();
   }
 
@@ -549,16 +567,44 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) {
     this.table = e.detail.value;
   }
 
+  /**
+   * Collapse the current example panel
+   */
+  _handleCollapsePanel() {
+    const examplePanel = this.shadowRoot.querySelector('.renderer')
+    const icon = this.shadowRoot.querySelector('.expand-icon')
+    icon.classList.toggle('expand-icon-collapse')
+    examplePanel.classList.toggle('collapse')
+
+    this._collapseExamplePanel = !this._collapseExamplePanel
+  }
+
   /**
    * @param {Example} example
    * @returns {TemplateResult|string} 
    */
   _titleTemplate(example) {
+    const { compatibility } = this;
+
     if (example.isScalar) {
       return '';
     }
     const label = this._computeExampleTitle(example);
-    return html`<div class="example-title">${label}</div>`;
+    return html`<div
+      class="example-title"
+      @click="${this._handleCollapsePanel}"
+      @keyup="${this._handleCollapsePanel}"
+      ?compatibility="${compatibility}"
+    >
+      <span>${label}</span>
+      <anypoint-icon-button
+        class="expand-icon-wrapper"
+        data-action="collapse"
+        title="Collapse panel"
+      >
+          <arc-icon class="expand-icon" icon="expandLess"></arc-icon> 
+      </anypoint-icon-button>
+    </div>`;
   }
 
   /**
@@ -622,7 +668,6 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) {
       ${this._titleTemplate(item)}
       ${this._descriptionTemplate(item)}
       <div class="renderer">
-        <arc-icon class="info-icon" icon="code"></arc-icon>
         <api-example-render
           exportParts="${parts}"
           class="example"

src/ApiResourceExampleDocument.js

@@ -21,23 +21,67 @@ export default css`
   line-height: var(--arc-font-body1-line-height);
   font-size: 1rem;
   display: var(--api-example-title-display, block);
-  padding: 8px 12px;
+  min-height: 36px;
+  padding: 0 10px 0px 10px;
   background-color: var(--api-example-title-background-color, #ff9800);
   color: var(--api-example-title-color, #000);
-  border-top-right-radius: 2px;
-  border-top-left-radius: 2px;
+  border-radius: 0px 2px 0px 0px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+}
+
+.expand-icon {
+  height: 25px;
+  width: 25px;
+  -moz-transform:none;
+  -webkit-transform:none;
+  -o-transform:none;
+  -ms-transform:none;
+  transform:none;
+  -webkit-transition: transform 0.2s 0.2s ease;
+  -moz-transition: transform 0.2s 0.2s ease;
+  -o-transition: transform 0.2s 0.2s ease;
+  transition: transform 0.2s 0.2s ease;
+}
+
+.expand-icon-wrapper {
+  height: 30px;
+  width: 30px;
 }
 
 .renderer {
   padding: 8px 0;
   display: flex;
+  max-height: 500px;
+  -webkit-transition: all 0.4s 0.1s ease-in-out;
+  -moz-transition: all 0.4s 0.1s ease-in-out;
+  -o-transition: all 0.4s 0.1s ease-in-out;
+  transition: all 0.4s 0.1s ease-in-out;
+}
+
+.collapse {
+  max-height: 0;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  -webkit-transition: all 0.4s 0.1s ease-in-out;
+  -moz-transition: all 0.4s 0.1s ease-in-out;
+  -o-transition: all 0.4s 0.1s ease-in-out;
+  transition: all 0.4s 0.1s ease-in-out;
 }
 
-.info-icon {
-  margin: 0 12px;
-  fill: var(--api-example-accent-color, #FF9800);
-  width: 24px;
-  height: 24px;
+.expand-icon-collapse {
+  -moz-transform: rotate(180deg);
+  -webkit-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+  -webkit-transition: transform 0.2s 0.2s ease;
+  -moz-transition: transform 0.2s 0.2s ease;
+  -o-transition: transform 0.2s 0.2s ease;
+  transition: transform 0.2s 0.2s ease;
 }
 
 api-example-render {

src/styles/Document.js

@@ -8,6 +8,7 @@ export default css`
 
 .code-wrapper {
   padding: 0px;
+  margin-left: 42px;
 }
 
 [hidden] {
@@ -54,26 +55,31 @@ export default css`
   display: flex;
   align-items: center;
   flex-direction: row;
-  justify-content: flex-end;
+  justify-content: space-between;
+  margin: 0;
+  margin-right: 10px;
   flex-wrap: wrap;
   flex: 1;
 }
 
+.info-icon {
+  margin: 0 12px;
+  fill: var(--api-example-accent-color, #FF9800);
+  width: 24px;
+  height: 24px;
+}
+
 anypoint-button {
-  margin-bottom: 8px;
   height: 28px;
   color: var(--api-resource-example-document-button-color);
   font-size: var(--api-resource-example-document-button-font-size);
   font-weight: var(--api-resource-example-document-button-font-weight);
 }
 
-api-example-render {
-  background-color: inherit;
-}
-
 json-table,
 api-example-render {
   overflow: auto;
   max-width: 100%;
+  margin-left: 50px;
 }
 `;

src/styles/Render.js

@@ -541,6 +541,39 @@ describe('ApiResourceExampleDocument', () => {
           assert.equal(titles[2].innerText.trim(), 'User 3');
           assert.equal(titles[3].innerText.trim(), 'User 4');
         });
+
+        it('should expand example panel when _handleCollapsePanel is called',  async () => {
+          const payloads = getPayload(element, amf, '/IncludedInline', 'post');
+          element.examples = payloads;
+          await aTimeout(100);
+
+          const examplePanelNoCollapsed = /** @type HTMLElement */ (element.shadowRoot.querySelector('.collapse'));
+          assert.isNull(examplePanelNoCollapsed);
+          const expandIconNoCollapsed = /** @type HTMLElement */ (element.shadowRoot.querySelector('.expand-icon-collapse'));
+          assert.isNull(expandIconNoCollapsed);
+
+          setTimeout(() => element._handleCollapsePanel());
+
+          const examplePanelCollapsed = /** @type HTMLElement */ (element.shadowRoot.querySelector('.collapse'));
+          assert.isDefined(examplePanelCollapsed);
+          const expandIconCollapsed = /** @type HTMLElement */ (element.shadowRoot.querySelector('.expand-icon-collapse'));
+          assert.isDefined(expandIconCollapsed);
+        });
+
+        it('should expand example panel on click ',  async () => {
+          const payloads = getPayload(element, amf, '/IncludedInline', 'post');
+          element.examples = payloads;
+          await aTimeout(100);
+
+          const examplePanel = /** @type HTMLElement */ (element.shadowRoot.querySelector('.renderer'));
+          examplePanel.click()
+          await aTimeout(100);
+
+          const examplePanelCollapsed = /** @type HTMLElement */ (element.shadowRoot.querySelector('.collapse'));
+          const expandIconCollapsed = /** @type HTMLElement */ (element.shadowRoot.querySelector('.expand-icon-collapse'));
+          assert.isDefined(examplePanelCollapsed);
+          assert.isDefined(expandIconCollapsed);
+        });
       });
     });
   });