Fix missing code icon

package.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.6",
+  "version": "4.3.7",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",

src/ApiExampleRender.js

@@ -410,8 +410,7 @@ export class ApiExampleRender extends LitElement {
     const isJson = this._computeIsJson(this.isJson, example.value);
     return html`
     <div class="example-actions">
-    <arc-icon class="info-icon" icon="code"></arc-icon>
-      <div>
+
         <anypoint-button
           part="content-action-button, code-content-action-button"
           class="action-button"
@@ -442,7 +441,7 @@ export class ApiExampleRender extends LitElement {
             ?compatibility="${compatibility}"
             title="Toggle between JSON and example source view"
           >Source view</anypoint-button>` : ''}
-      </div>
+
     </div>`;
   }
 

src/ApiResourceExampleDocument.js

@@ -584,8 +584,6 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) {
    * @returns {TemplateResult|string} 
    */
   _titleTemplate(example) {
-    const { compatibility } = this;
-
     if (example.isScalar) {
       return '';
     }
@@ -594,7 +592,6 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) {
       class="example-title"
       @click="${this._handleCollapsePanel}"
       @keyup="${this._handleCollapsePanel}"
-      ?compatibility="${compatibility}"
     >
       <span>${label}</span>
       <anypoint-icon-button
@@ -668,6 +665,7 @@ 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/styles/Document.js

@@ -22,7 +22,7 @@ export default css`
   font-size: 1rem;
   display: var(--api-example-title-display, block);
   min-height: 36px;
-  padding: 0 10px 0 10px;
+  padding: 0px 12px;
   background-color: var(--api-example-title-background-color, #ff9800);
   color: var(--api-example-title-color, #000);
   border-radius: 0 2px 0 0;
@@ -94,4 +94,11 @@ api-example-render {
 .example-description {
   padding: 10px 12px;
 }
+
+.info-icon {
+  margin: 0 12px;
+  fill: var(--api-example-accent-color, #FF9800);
+  width: 24px;
+  height: 24px;
+}
 `;

src/styles/Render.js

@@ -8,7 +8,6 @@ export default css`
 
 .code-wrapper {
   padding: 0px;
-  margin-left: 42px;
 }
 
 [hidden] {
@@ -55,31 +54,26 @@ export default css`
   display: flex;
   align-items: center;
   flex-direction: row;
-  justify-content: space-between;
-  margin: 0;
-  margin-right: 10px;
+  justify-content: flex-end;
   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;
 }
 `;

test/api-resource-example-document.test.js

@@ -1,6 +1,6 @@
 /* eslint-disable prefer-destructuring */
 /* eslint-disable no-param-reassign */
-import { fixture, assert, nextFrame, aTimeout, html } from '@open-wc/testing';
+import { fixture, assert, nextFrame, aTimeout, html, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
 import { AmfLoader } from './amf-loader.js';
 import '../api-resource-example-document.js';
@@ -595,6 +595,13 @@ describe('ApiResourceExampleDocument', () => {
           assert.isDefined(examplePanelCollapsed);
           assert.isDefined(expandIconCollapsed);
         });
+
+        it('should render code icon', async () => {
+          const payloads = getPayload(element, amf, '/IncludedInType', 'post');
+          element.examples = payloads;
+          await waitUntil( () => Boolean(element.shadowRoot.querySelector('.info-icon')));
+          assert.exists(element.shadowRoot.querySelector('.info-icon'));
+        });
       });
     });
   });