From 46dbb7e106b0ba51349171b509420555284dc360 Mon Sep 17 00:00:00 2001
From: Yury <RIP95_95@mail.ru>
Date: Thu, 18 Mar 2021 23:32:30 +0300
Subject: [PATCH 1/9] Refactor styles, add variable to adjust heading color
 (#14)

* refactor: use variables for font-weights

* feat: use existing variables to style endpoints title

* feat: add variable to adjust section heading color

* docs: adjust readme formatting
---
 README.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 2cd30d5..b1ed5df 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,10 @@
-# api-summary
+[![Published on NPM](https://img.shields.io/npm/v/@api-components/api-summary.svg)](https://www.npmjs.com/package/@api-components/api-summary)
+
+[![Build Status](https://travis-ci.org/advanced-rest-client/api-summary.svg?branch=stage)](https://travis-ci.org/advanced-rest-client/api-summary)
+
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@api-components/api-summary)
+
+# &lt;api-summary&gt;
 
 A component that renders basic information about an API.
 It uses AMF model to render the view.

From 2d8c98ebd05205fa58ddb14d3b3406dcd082c668 Mon Sep 17 00:00:00 2001
From: Benjamin Leong <bleong@salesforce.com>
Date: Tue, 16 Mar 2021 10:29:40 -0700
Subject: [PATCH 2/9] add css parts

---
 src/ApiSummary.js | 14 +++++++-------
 src/Styles.js     |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/ApiSummary.js b/src/ApiSummary.js
index fb14b33..e09210d 100644
--- a/src/ApiSummary.js
+++ b/src/ApiSummary.js
@@ -331,7 +331,7 @@ export class ApiSummary extends AmfHelperMixin(LitElement) {
       return '';
     }
     return html`
-    <div class="api-title" role="heading" aria-level="${titleLevel}">
+    <div class="api-title" role="heading" aria-level="${titleLevel}" part="api-title">
     <label>API title:</label>
     <span>${_apiTitle}</span>
     </div>`;
@@ -343,7 +343,7 @@ export class ApiSummary extends AmfHelperMixin(LitElement) {
       return '';
     }
     return html`
-    <p class="inline-description version">
+    <p class="inline-description version" part="api-version">
       <label>Version:</label>
       <span>${_version}</span>
     </p>`;
@@ -355,7 +355,7 @@ export class ApiSummary extends AmfHelperMixin(LitElement) {
       return '';
     }
     return html`
-    <div role="region" class="marked-description">
+    <div role="region" class="marked-description" part="marked-description">
       <arc-marked .markdown="${_description}" sanitize>
         <div slot="markdown-html" class="markdown-body"></div>
       </arc-marked>
@@ -427,16 +427,16 @@ export class ApiSummary extends AmfHelperMixin(LitElement) {
       `<a href="${_providerUrl}" target="_blank" class="app-link provider-url">${_providerUrl}</a>`,
     ): undefined;
     return html`
-    <section role="contentinfo" class="docs-section">
+    <section role="contentinfo" class="docs-section" part="info-section">
       <label class="section">Contact information</label>
-      <p class="inline-description">
+      <p class="inline-description" part="info-inline-desc">
         <span class="provider-name">${_providerName}</span>
         ${_providerEmail ? html`<a
             class="app-link link-padding provider-email"
             href="mailto:${_providerEmail}">${_providerEmail}</a>` : ''}
       </p>
       ${_providerUrl ? html`
-        <p class="inline-description">
+        <p class="inline-description" part="info-inline-desc">
           ${unsafeHTML(link)}
         </p>` : ''}
     </section>`;
@@ -451,7 +451,7 @@ export class ApiSummary extends AmfHelperMixin(LitElement) {
       `<a href="${_licenseUrl}" target="_blank" class="app-link">${_licenseName}</a>`,
     );
     return html`
-    <section aria-labelledby="licenseLabel" class="docs-section">
+    <section aria-labelledby="licenseLabel" class="docs-section" part="license-section">
       <label class="section" id="licenseLabel">License</label>
       <p class="inline-description">
         ${unsafeHTML(link)}
diff --git a/src/Styles.js b/src/Styles.js
index eab0a8c..23414e5 100644
--- a/src/Styles.js
+++ b/src/Styles.js
@@ -102,7 +102,7 @@ a:hover {
 .separator {
   background-color: var(--api-summary-separator-color, rgba(0, 0, 0, 0.12));
   height: 1px;
-  margin: 40px 0;
+  margin: var(--api-summary-separator-margin-y, 40px) var(--api-summary-separator-margin-x, 0);
 }
 
 .endpoint-item {

From 3fba682b5c86d1bee401a10d245cd7ee0c318277 Mon Sep 17 00:00:00 2001
From: Benjamin Leong <bleong@salesforce.com>
Date: Wed, 17 Mar 2021 17:40:42 -0700
Subject: [PATCH 3/9] part: separator, toc, api-title-label

---
 src/ApiSummary.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/ApiSummary.js b/src/ApiSummary.js
index e09210d..2738624 100644
--- a/src/ApiSummary.js
+++ b/src/ApiSummary.js
@@ -332,7 +332,7 @@ export class ApiSummary extends AmfHelperMixin(LitElement) {
     }
     return html`
     <div class="api-title" role="heading" aria-level="${titleLevel}" part="api-title">
-    <label>API title:</label>
+    <label part="api-title-label">API title:</label>
     <span>${_apiTitle}</span>
     </div>`;
   }
@@ -481,8 +481,8 @@ export class ApiSummary extends AmfHelperMixin(LitElement) {
     const result = _endpoints.map((item) => this._endpointTemplate(item));
     const pathLabel = this._isAsyncAPI(this.amf) ? 'channels' : 'endpoints';
     return html`
-    <div class="separator"></div>
-    <div class="toc">
+    <div class="separator" part="separator"></div>
+    <div class="toc" part="toc">
       <label class="section endpoints-title">API ${pathLabel}</label>
       ${result}
     </div>

From d79ab613ae75e718b29063872e2c1526da7e7981 Mon Sep 17 00:00:00 2001
From: Benjamin Leong <bleong@salesforce.com>
Date: Fri, 19 Mar 2021 11:46:36 -0700
Subject: [PATCH 4/9] hide toc

---
 src/ApiSummary.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/ApiSummary.js b/src/ApiSummary.js
index 2738624..ce1c574 100644
--- a/src/ApiSummary.js
+++ b/src/ApiSummary.js
@@ -43,6 +43,10 @@ export class ApiSummary extends AmfHelperMixin(LitElement) {
        * @default 2
        */
       titleLevel: { type: String },
+      /**
+       * A property to hide the table of contents list of endpoints.
+       */
+      hideToc: { type: Boolean },
 
       _providerName: { type: String },
       _providerEmail: { type: String },
@@ -99,6 +103,7 @@ export class ApiSummary extends AmfHelperMixin(LitElement) {
      * @type {string[]}
      */
     this.protocols = undefined;
+    this.hideToc = false;
   }
 
   __amfChanged() {
@@ -321,7 +326,7 @@ export class ApiSummary extends AmfHelperMixin(LitElement) {
         ${this._termsOfServiceTemplate()}
       </div>
 
-      ${this._endpointsTemplate()}
+      ${this.hideToc ? '' : this._endpointsTemplate()}
     `;
   }
 

From 72d90900cf663e1ed7691d419067b93601035b6f Mon Sep 17 00:00:00 2001
From: Benjamin Leong <bleong@salesforce.com>
Date: Mon, 22 Mar 2021 16:28:13 -0700
Subject: [PATCH 5/9] update unit tests

---
 test/api-summary.test.js | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/test/api-summary.test.js b/test/api-summary.test.js
index a334137..3911c8b 100644
--- a/test/api-summary.test.js
+++ b/test/api-summary.test.js
@@ -44,8 +44,8 @@ describe('ApiSummary', () => {
 
         it('renders api title', () => {
           const node = element.shadowRoot.querySelector('[role="heading"]');
-          assert.dom.equal(node, `<div aria-level="2" class="api-title" role="heading">
-            <label>
+          assert.dom.equal(node, `<div aria-level="2" class="api-title" role="heading" part="api-title">
+            <label part="api-title-label">
               API title:
             </label>
             <span>
@@ -96,6 +96,11 @@ describe('ApiSummary', () => {
           const node = element.shadowRoot.querySelector('api-url');
           assert.equal(node.url, `https://{instance}.domain.com`);
         });
+
+        it('renders endpoints template', () => {
+          const node = element.shadowRoot.querySelector('.endpoints-title');
+          assert.dom.equal(node, `<label class="endpoints-title section">API endpoints</label>`);
+        });
       });
 
       describe('OAS properties', () => {
@@ -411,6 +416,24 @@ describe('ApiSummary', () => {
           assert.equal(element.shadowRoot.querySelector('.section.endpoints-title').textContent, 'API channels');
         });
       });
+
+      describe('hideToc', () => {
+        let element = /** @type ApiSummary */ (null);
+        let amf;
+        before(async () => {
+          amf = await AmfLoader.load(compact);
+        });
+        beforeEach(async () => {
+          element = await basicFixture();
+          element.setAttribute('hideToc', 'true');
+          await aTimeout(0);
+        });
+
+        it('does not render endpoints template', () => {
+          const node = element.shadowRoot.querySelector('.toc');
+          assert.isNull(node);
+        });
+      });
     });
   });
 

From 67db3a0042ade9652e29a096014560e93a60a115 Mon Sep 17 00:00:00 2001
From: Benjamin Leong <bleong@salesforce.com>
Date: Tue, 23 Mar 2021 13:55:39 -0700
Subject: [PATCH 6/9] margin var

---
 src/Styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Styles.js b/src/Styles.js
index 23414e5..a684d4b 100644
--- a/src/Styles.js
+++ b/src/Styles.js
@@ -102,7 +102,7 @@ a:hover {
 .separator {
   background-color: var(--api-summary-separator-color, rgba(0, 0, 0, 0.12));
   height: 1px;
-  margin: var(--api-summary-separator-margin-y, 40px) var(--api-summary-separator-margin-x, 0);
+  margin: var(--api-summary-separator-margin, 40px 0);
 }
 
 .endpoint-item {

From 13cb83556224c397568bd763f3e53e2404c0e10d Mon Sep 17 00:00:00 2001
From: Benjamin Leong <bleong@salesforce.com>
Date: Tue, 23 Mar 2021 14:20:47 -0700
Subject: [PATCH 7/9] update type def

---
 src/ApiSummary.d.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/ApiSummary.d.ts b/src/ApiSummary.d.ts
index 55b4a14..480ec51 100644
--- a/src/ApiSummary.d.ts
+++ b/src/ApiSummary.d.ts
@@ -24,6 +24,10 @@ export declare class ApiSummary extends AmfHelperMixin(LitElement) {
    * @attribute
    */
   titleLevel: string;
+  /**
+   * A property to hide the table of contents list of endpoints.
+   */
+  hideToc: boolean;
 
   _providerName: string;
   _providerEmail: string;

From 2c5a533c72564b35ec246c1e27ca3ac118f23d2e Mon Sep 17 00:00:00 2001
From: Benjamin Leong <bleong@salesforce.com>
Date: Wed, 24 Mar 2021 13:15:17 -0700
Subject: [PATCH 8/9] update doc

---
 README.md  | 37 ++++++++++++++++++++++++++++++-------
 Styling.md | 13 +++++++++++++
 2 files changed, 43 insertions(+), 7 deletions(-)
 create mode 100644 Styling.md

diff --git a/README.md b/README.md
index b1ed5df..73032f5 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,4 @@
-[![Published on NPM](https://img.shields.io/npm/v/@api-components/api-summary.svg)](https://www.npmjs.com/package/@api-components/api-summary)
-
-[![Build Status](https://travis-ci.org/advanced-rest-client/api-summary.svg?branch=stage)](https://travis-ci.org/advanced-rest-client/api-summary)
-
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@api-components/api-summary)
-
-# &lt;api-summary&gt;
+# api-summary
 
 A component that renders basic information about an API.
 It uses AMF model to render the view.
@@ -49,6 +43,35 @@ npm install --save @api-components/api-summary
 </html>
 ```
 
+### Styling using CSS Shadow Parts
+
+```html
+<html>
+  <head>
+    <script type="module">
+      import '@api-components/api-summary/api-summary.js';
+    </script>
+    <style type="text/css">
+      api-summary::part(api-title) {
+        font-size: 24px;
+      }
+    </style>
+  </head>
+  <body>
+    <api-summary exportparts="api-title"></api-summary>
+    <script>
+    const amf = await getAmfModel();
+    document.body.querySelector('api-summary').api = amf;
+    window.addEventListener('api-navigation-selection-changed', (e) => {
+      console.log(e.detail.selected);
+      console.log(e.detail.type);
+    });
+    </script>
+  </body>
+</html>
+```
+For a complete list of parts, check out this [doc](./Styling.md).
+
 ### In a LitElement template
 
 ```js
diff --git a/Styling.md b/Styling.md
new file mode 100644
index 0000000..c74c51f
--- /dev/null
+++ b/Styling.md
@@ -0,0 +1,13 @@
+# Styling
+
+## List of CSS Shadow Parts
+ 
+- `api-title`
+- `api-title-label`
+- `api-version`
+- `marked-description`
+- `info-section`
+- `info-inline-desc`
+- `license-section`
+- `separator`
+- `toc`
\ No newline at end of file

From 74faf2355ffa09d7701c8e4815a7631b5b3ef2f5 Mon Sep 17 00:00:00 2001
From: Benjamin Leong <benri@users.noreply.github.com>
Date: Wed, 14 Apr 2021 17:02:41 -0700
Subject: [PATCH 9/9] bump version

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 413dcb6..f094d47 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@api-components/api-summary",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 26fbe24..1a997fa 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@api-components/api-summary",
   "description": "A summary view for an API base on AMF data model",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",