Merge pull request #52 from advanced-rest-client/fix-icon

[W-19307418] Enhance ApiSummary component by replacing the agent pill with a metho…

Author: alexpmule

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@api-components/api-summary",
   "description": "A summary view for an API base on AMF data model",
-  "version": "4.6.11",
+  "version": "4.6.12",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",

package.json

@@ -9,7 +9,8 @@ import labelStyles from "@api-components/http-method-label/http-method-label-com
 import sanitizer from "dompurify";
 import "@advanced-rest-client/arc-marked/arc-marked.js";
 import "@api-components/api-method-documentation/api-url.js";
-import '@advanced-rest-client/icons/arc-icon.js';
+import { codegenie } from '@advanced-rest-client/icons/ArcIcons.js';
+
 import styles from "./Styles.js";
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
@@ -633,17 +634,13 @@ export class ApiSummary extends AmfHelperMixin(LitElement) {
         data-id="${item.id}"
         data-shape-type="method"
         title="Open method documentation"
-        >${item.method}</a
-      >
-
-       ${item.hasAgent
-        ? html`
-            <span class="agent-pill" title="Enabled for Agent">
-              Enabled for Agent
-              <arc-icon icon="infoOutline" class="info-icon"></arc-icon>
-            </span>
-          `
-        : ''}
+        >${item.method}
+        ${
+          item.hasAgent 
+          ? html`<span class="method-icon">${codegenie}</span>` 
+          : ""
+        }
+      </a>
     `;
   }
 

src/ApiSummary.js

@@ -56,6 +56,14 @@ export default css`
     white-space: nowrap;
   }
 
+  .method-icon {
+    display: inline-flex;
+    width: 13px;
+    height: 13px;
+    padding-left: 7px;
+    fill: var(--http-method-label-post-color, #fff);
+  }
+
   label.section {
     color: var(--arc-font-subhead-color);
     font-weight: var(--arc-font-subhead-font-weight);

src/Styles.js

@@ -371,7 +371,7 @@ describe('ApiSummary', () => {
         });
 
         it('renders the agent pill', async () => {
-          const node = element.shadowRoot.querySelector('.agent-pill');
+          const node = element.shadowRoot.querySelector('.method-icon');
           assert.ok(node);
         });
       });