From 8f3ece7a23f74b17d472ff79c072bf1efdbed658 Mon Sep 17 00:00:00 2001 From: alexperez Date: Mon, 31 Jan 2022 10:08:32 -0300 Subject: [PATCH 01/16] APIC-830 PoC collapsable example panel --- src/ApiResourceExampleDocument.js | 34 ++++++++++++++++++++++++++++++- src/styles/Document.js | 5 +++++ 2 files changed, 38 insertions(+), 1 deletion(-) diff --git a/src/ApiResourceExampleDocument.js b/src/ApiResourceExampleDocument.js index 8fed051..ccc68e6 100644 --- a/src/ApiResourceExampleDocument.js +++ b/src/ApiResourceExampleDocument.js @@ -549,16 +549,48 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { this.table = e.detail.value; } + + /** + * Collapse the current example panel + * + * @param {Event} e + */ + _collapsePanel(e) { + const button = /** @type HTMLButtonElement */ (e.target); + console.log('button: ', button); + if ('part' in button) { + // @ts-ignore + button.part.add('close'); + // @ts-ignore + // button.part.add('code-content-action-button-disabled'); + } + // setTimeout(() => this._resetCopyButtonState(button), 1000); + } + /** * @param {Example} example * @returns {TemplateResult|string} */ _titleTemplate(example) { + const { compatibility } = this; + if (example.isScalar) { return ''; } const label = this._computeExampleTitle(example); - return html`
${label}
`; + return html` +
+ ${label} + + + +
`; } /** diff --git a/src/styles/Document.js b/src/styles/Document.js index 34cad72..020c44f 100644 --- a/src/styles/Document.js +++ b/src/styles/Document.js @@ -33,6 +33,11 @@ export default css` display: flex; } +.close{ + display: none; +} + + .info-icon { margin: 0 12px; fill: var(--api-example-accent-color, #FF9800); From ab5fa821a39637d6da0482751d6119c3b0590cf3 Mon Sep 17 00:00:00 2001 From: alexperez Date: Tue, 1 Feb 2022 16:59:15 -0300 Subject: [PATCH 02/16] APIC-830 Add behavior collapsable to panel example and icon --- src/ApiResourceExampleDocument.js | 45 +++++++++++++++++++------------ src/styles/Document.js | 22 ++++++++++----- 2 files changed, 44 insertions(+), 23 deletions(-) diff --git a/src/ApiResourceExampleDocument.js b/src/ApiResourceExampleDocument.js index ccc68e6..a21a843 100644 --- a/src/ApiResourceExampleDocument.js +++ b/src/ApiResourceExampleDocument.js @@ -324,7 +324,9 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { this.hasExamples = false; this.compatibility = false; this.renderReadOnly = false; + this._collapseExamplePanel = false; this._ensureJsonTable(); + this.expandIcon = this._getTypeExpandIcon(); } connectedCallback() { @@ -549,22 +551,31 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { this.table = e.detail.value; } + /** + * Returns icon to render for toggle button on header panel + * it depends by this._collapseExamplePanel is true or false + * @returns {String} 'expandMore' or 'expandLess' + */ + _getTypeExpandIcon() { + return this._collapseExamplePanel ? 'expandLess' : 'expandMore' + } /** * Collapse the current example panel - * - * @param {Event} e */ - _collapsePanel(e) { - const button = /** @type HTMLButtonElement */ (e.target); - console.log('button: ', button); - if ('part' in button) { - // @ts-ignore - button.part.add('close'); - // @ts-ignore - // button.part.add('code-content-action-button-disabled'); + _collapsePanel() { + const examplePanel = this.shadowRoot.querySelector('.renderer') + const infoIcon = this.shadowRoot.querySelector('.info-icon') + + if (this._collapseExamplePanel) { + examplePanel.classList.toggle('close') + infoIcon.classList.toggle('close') + } else { + examplePanel.classList.toggle('close') + infoIcon.classList.toggle('close') } - // setTimeout(() => this._resetCopyButtonState(button), 1000); + this._collapseExamplePanel = !this._collapseExamplePanel + this.requestUpdate('hasExamples'); } /** @@ -573,22 +584,22 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { */ _titleTemplate(example) { const { compatibility } = this; - + if (example.isScalar) { return ''; } const label = this._computeExampleTitle(example); return html` -
+
${label} - +
`; } diff --git a/src/styles/Document.js b/src/styles/Document.js index 020c44f..fccf55f 100644 --- a/src/styles/Document.js +++ b/src/styles/Document.js @@ -21,11 +21,20 @@ 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; + display: flex; + justify-content: space-between; + align-items: center; +} + +.expand-icon { + height: 30px; + width: 30px; } .renderer { @@ -33,11 +42,6 @@ export default css` display: flex; } -.close{ - display: none; -} - - .info-icon { margin: 0 12px; fill: var(--api-example-accent-color, #FF9800); @@ -45,6 +49,12 @@ export default css` height: 24px; } +.close { + height: 0; + margin: 0; + padding: 0; +} + api-example-render { flex: 1; background-color: inherit; From e85aac30a56f917c016a343ec0e0d4c7f06a6d83 Mon Sep 17 00:00:00 2001 From: alexperez Date: Tue, 1 Feb 2022 18:29:43 -0300 Subject: [PATCH 03/16] APIC-830 - Transition - Refactor to logic - Fixes --- src/ApiExampleRender.js | 43 +++++++++++++++++-------------- src/ApiResourceExampleDocument.js | 15 +++-------- src/styles/Document.js | 4 +++ src/styles/Render.js | 13 ++++------ 4 files changed, 35 insertions(+), 40 deletions(-) diff --git a/src/ApiExampleRender.js b/src/ApiExampleRender.js index 3a49c56..906cf64 100644 --- a/src/ApiExampleRender.js +++ b/src/ApiExampleRender.js @@ -410,15 +410,17 @@ export class ApiExampleRender extends LitElement { const isJson = this._computeIsJson(this.isJson, example.value); return html`
- Copy - ${isJson ? html` + +
+ Copy + ${isJson ? html` Table view` : ''} - ${hasRaw ? html` - Source view` : ''} + ${hasRaw ? html` + Source view` : ''} +
`; } diff --git a/src/ApiResourceExampleDocument.js b/src/ApiResourceExampleDocument.js index a21a843..ce32a90 100644 --- a/src/ApiResourceExampleDocument.js +++ b/src/ApiResourceExampleDocument.js @@ -554,7 +554,7 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { /** * Returns icon to render for toggle button on header panel * it depends by this._collapseExamplePanel is true or false - * @returns {String} 'expandMore' or 'expandLess' + * @returns {Icons} 'expandMore' or 'expandLess' */ _getTypeExpandIcon() { return this._collapseExamplePanel ? 'expandLess' : 'expandMore' @@ -565,17 +565,10 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { */ _collapsePanel() { const examplePanel = this.shadowRoot.querySelector('.renderer') - const infoIcon = this.shadowRoot.querySelector('.info-icon') + examplePanel.classList.toggle('close') - if (this._collapseExamplePanel) { - examplePanel.classList.toggle('close') - infoIcon.classList.toggle('close') - } else { - examplePanel.classList.toggle('close') - infoIcon.classList.toggle('close') - } this._collapseExamplePanel = !this._collapseExamplePanel - this.requestUpdate('hasExamples'); + this.requestUpdate('hasExamples') } /** @@ -595,7 +588,6 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { ?compatibility="${compatibility}"> ${label} @@ -665,7 +657,6 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { ${this._titleTemplate(item)} ${this._descriptionTemplate(item)}
- Date: Wed, 2 Feb 2022 10:47:25 -0300 Subject: [PATCH 04/16] APIC-830 Code review and improve transaction --- src/ApiResourceExampleDocument.js | 22 +++++++++++++++------- src/styles/Document.js | 11 +++++------ 2 files changed, 20 insertions(+), 13 deletions(-) diff --git a/src/ApiResourceExampleDocument.js b/src/ApiResourceExampleDocument.js index ce32a90..926716d 100644 --- a/src/ApiResourceExampleDocument.js +++ b/src/ApiResourceExampleDocument.js @@ -9,6 +9,7 @@ import elementStyles from './styles/Document.js'; /** @typedef {import('lit-element').TemplateResult} TemplateResult */ /** @typedef {import('@advanced-rest-client/arc-types').FormTypes.Example} Example */ +/** @typedef {import('@advanced-rest-client/arc-icons').ARCIconElement} Icon */ /** * `api-resource-example-document` @@ -117,6 +118,11 @@ 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 }, + }; } @@ -326,7 +332,7 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { this.renderReadOnly = false; this._collapseExamplePanel = false; this._ensureJsonTable(); - this.expandIcon = this._getTypeExpandIcon(); + this.expandIcon = this._getIconTypeExpand(); } connectedCallback() { @@ -554,9 +560,9 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { /** * Returns icon to render for toggle button on header panel * it depends by this._collapseExamplePanel is true or false - * @returns {Icons} 'expandMore' or 'expandLess' + * @returns {Icon|String} 'expandMore' or 'expandLess' */ - _getTypeExpandIcon() { + _getIconTypeExpand() { return this._collapseExamplePanel ? 'expandLess' : 'expandMore' } @@ -583,15 +589,17 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { } const label = this._computeExampleTitle(example); return html` -
+
${label} - +
`; } diff --git a/src/styles/Document.js b/src/styles/Document.js index 54cc981..41ff8e6 100644 --- a/src/styles/Document.js +++ b/src/styles/Document.js @@ -37,11 +37,11 @@ export default css` width: 30px; } -.renderer { +.example-panel { padding: 8px 0; display: flex; - min-height: 100%; - transition: all 2s; + height: 100%; + transition: 200ms all 200ms; } .info-icon { @@ -52,11 +52,10 @@ export default css` } .close { - height: 0; + height: 0%; margin: 0; padding: 0; - min-height: 0; - transition: all 2s; + transition: 200ms all 200ms; } api-example-render { From d96debeb2bf9190cf1b33df221c3ba8f44ccb287 Mon Sep 17 00:00:00 2001 From: alexperez Date: Wed, 2 Feb 2022 10:51:05 -0300 Subject: [PATCH 05/16] APIC-830 fix styles --- src/ApiResourceExampleDocument.js | 4 ++-- src/styles/Document.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/ApiResourceExampleDocument.js b/src/ApiResourceExampleDocument.js index 926716d..ad8febb 100644 --- a/src/ApiResourceExampleDocument.js +++ b/src/ApiResourceExampleDocument.js @@ -572,7 +572,7 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { _collapsePanel() { const examplePanel = this.shadowRoot.querySelector('.renderer') examplePanel.classList.toggle('close') - + this._collapseExamplePanel = !this._collapseExamplePanel this.requestUpdate('hasExamples') } @@ -591,7 +591,7 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { return html`
${label} diff --git a/src/styles/Document.js b/src/styles/Document.js index 41ff8e6..5873801 100644 --- a/src/styles/Document.js +++ b/src/styles/Document.js @@ -37,7 +37,7 @@ export default css` width: 30px; } -.example-panel { +.renderer { padding: 8px 0; display: flex; height: 100%; From 384d43e2ec2233f9e4861ce32e89042accd620cf Mon Sep 17 00:00:00 2001 From: alexperez Date: Wed, 2 Feb 2022 12:17:56 -0300 Subject: [PATCH 06/16] APIC-830 Improve transition + add mixins --- src/ApiResourceExampleDocument.js | 4 ++-- src/styles/Document.js | 17 ++++++++++++----- 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/ApiResourceExampleDocument.js b/src/ApiResourceExampleDocument.js index ad8febb..258de21 100644 --- a/src/ApiResourceExampleDocument.js +++ b/src/ApiResourceExampleDocument.js @@ -563,7 +563,7 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { * @returns {Icon|String} 'expandMore' or 'expandLess' */ _getIconTypeExpand() { - return this._collapseExamplePanel ? 'expandLess' : 'expandMore' + return this._collapseExamplePanel ? 'expandMore' : 'expandLess' } /** @@ -571,7 +571,7 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { */ _collapsePanel() { const examplePanel = this.shadowRoot.querySelector('.renderer') - examplePanel.classList.toggle('close') + examplePanel.classList.toggle('collapse') this._collapseExamplePanel = !this._collapseExamplePanel this.requestUpdate('hasExamples') diff --git a/src/styles/Document.js b/src/styles/Document.js index 5873801..708fe94 100644 --- a/src/styles/Document.js +++ b/src/styles/Document.js @@ -40,8 +40,11 @@ export default css` .renderer { padding: 8px 0; display: flex; - height: 100%; - transition: 200ms all 200ms; + 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; } .info-icon { @@ -51,11 +54,15 @@ export default css` height: 24px; } -.close { - height: 0%; +.collapse { + max-height: 0; margin: 0; + overflow: hidden; padding: 0; - transition: 200ms all 200ms; + -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; } api-example-render { From bd19ee39278c38ff61304f932cf7a40d8c7c84dd Mon Sep 17 00:00:00 2001 From: alexperez Date: Wed, 2 Feb 2022 13:58:29 -0300 Subject: [PATCH 07/16] APIC-830 Improve transition to panel example collapse --- src/ApiResourceExampleDocument.js | 13 +++++---- src/styles/Document.js | 45 ++++++++++++++++++++++--------- src/styles/Render.js | 7 +++++ 3 files changed, 47 insertions(+), 18 deletions(-) diff --git a/src/ApiResourceExampleDocument.js b/src/ApiResourceExampleDocument.js index 258de21..3c2dd60 100644 --- a/src/ApiResourceExampleDocument.js +++ b/src/ApiResourceExampleDocument.js @@ -571,6 +571,8 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { */ _collapsePanel() { 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 @@ -588,18 +590,19 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { return ''; } const label = this._computeExampleTitle(example); - return html` -
${label} - + title="Collapse panel" + > +
`; } diff --git a/src/styles/Document.js b/src/styles/Document.js index 708fe94..899b1db 100644 --- a/src/styles/Document.js +++ b/src/styles/Document.js @@ -33,6 +33,20 @@ export default css` } .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; } @@ -42,16 +56,9 @@ export default css` 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; -} - -.info-icon { - margin: 0 12px; - fill: var(--api-example-accent-color, #FF9800); - width: 24px; - height: 24px; + -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 { @@ -60,9 +67,21 @@ transition: all 0.4s 0.1s ease-in-out; 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; + -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; +} + +.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 { diff --git a/src/styles/Render.js b/src/styles/Render.js index 66d5792..96d6bfc 100644 --- a/src/styles/Render.js +++ b/src/styles/Render.js @@ -61,6 +61,13 @@ export default css` flex: 1; } +.info-icon { + margin: 0 12px; + fill: var(--api-example-accent-color, #FF9800); + width: 24px; + height: 24px; +} + anypoint-button { height: 28px; color: var(--api-resource-example-document-button-color); From cf4e6b8479d3af232ad9c501f845172c0e1eb9eb Mon Sep 17 00:00:00 2001 From: alexperez Date: Wed, 2 Feb 2022 14:10:00 -0300 Subject: [PATCH 08/16] APIC-830 Fix styles --- src/styles/Document.js | 3 +-- src/styles/Render.js | 7 ++++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/styles/Document.js b/src/styles/Document.js index 899b1db..3c87ccd 100644 --- a/src/styles/Document.js +++ b/src/styles/Document.js @@ -25,8 +25,7 @@ export default css` 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; diff --git a/src/styles/Render.js b/src/styles/Render.js index 96d6bfc..5113c36 100644 --- a/src/styles/Render.js +++ b/src/styles/Render.js @@ -8,7 +8,7 @@ export default css` .code-wrapper { padding: 0px; - margin-left: 60px; + margin-left: 42px; } [hidden] { @@ -56,7 +56,8 @@ export default css` align-items: center; flex-direction: row; justify-content: space-between; - margin: auto 10px; + margin: 0; + margin-right: 10px; flex-wrap: wrap; flex: 1; } @@ -78,6 +79,6 @@ anypoint-button { json-table { overflow: auto; max-width: 100%; - margin-left: 80px; + margin-left: 50px; } `; From a30c723c2e7ebc058f5130d0978bc498e1edbfbd Mon Sep 17 00:00:00 2001 From: alexperez Date: Wed, 2 Feb 2022 14:18:43 -0300 Subject: [PATCH 09/16] APIC-830 Refactor code --- src/ApiResourceExampleDocument.js | 11 ----------- src/styles/Render.js | 3 ++- 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/src/ApiResourceExampleDocument.js b/src/ApiResourceExampleDocument.js index 3c2dd60..a9b6434 100644 --- a/src/ApiResourceExampleDocument.js +++ b/src/ApiResourceExampleDocument.js @@ -9,7 +9,6 @@ import elementStyles from './styles/Document.js'; /** @typedef {import('lit-element').TemplateResult} TemplateResult */ /** @typedef {import('@advanced-rest-client/arc-types').FormTypes.Example} Example */ -/** @typedef {import('@advanced-rest-client/arc-icons').ARCIconElement} Icon */ /** * `api-resource-example-document` @@ -332,7 +331,6 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { this.renderReadOnly = false; this._collapseExamplePanel = false; this._ensureJsonTable(); - this.expandIcon = this._getIconTypeExpand(); } connectedCallback() { @@ -557,15 +555,6 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { this.table = e.detail.value; } - /** - * Returns icon to render for toggle button on header panel - * it depends by this._collapseExamplePanel is true or false - * @returns {Icon|String} 'expandMore' or 'expandLess' - */ - _getIconTypeExpand() { - return this._collapseExamplePanel ? 'expandMore' : 'expandLess' - } - /** * Collapse the current example panel */ diff --git a/src/styles/Render.js b/src/styles/Render.js index 5113c36..0678e75 100644 --- a/src/styles/Render.js +++ b/src/styles/Render.js @@ -76,7 +76,8 @@ anypoint-button { font-weight: var(--api-resource-example-document-button-font-weight); } -json-table { +json-table, +api-example-render { overflow: auto; max-width: 100%; margin-left: 50px; From d7de5658768ef0ebf72e26dad8273fea8ba3283f Mon Sep 17 00:00:00 2001 From: alexperez Date: Wed, 2 Feb 2022 14:38:12 -0300 Subject: [PATCH 10/16] APIC-830 Code review - Add custom set and getter and update render --- src/ApiResourceExampleDocument.js | 29 +++++++++++++++++++++++------ 1 file changed, 23 insertions(+), 6 deletions(-) diff --git a/src/ApiResourceExampleDocument.js b/src/ApiResourceExampleDocument.js index a9b6434..d827507 100644 --- a/src/ApiResourceExampleDocument.js +++ b/src/ApiResourceExampleDocument.js @@ -120,8 +120,7 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { /** * If enabled, the example panel would be closed */ - __collapseExamplePanel: { type: Boolean }, - + _collapseExamplePanel: { type: Boolean, reflect: true }, }; } @@ -318,6 +317,25 @@ 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); + this.dispatchEvent(new CustomEvent('collapse-example-panel-changed', { + composed: true, + detail: { + value + } + })); + } + constructor() { super(); this._onStorageChanged = this._onStorageChanged.bind(this); @@ -558,14 +576,13 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { /** * Collapse the current example panel */ - _collapsePanel() { + _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 - this.requestUpdate('hasExamples') } /** @@ -581,8 +598,8 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { const label = this._computeExampleTitle(example); return html`
${label} From 51ec1a479a30199b8f9267a14df2efd5c66f64b5 Mon Sep 17 00:00:00 2001 From: alexperez Date: Thu, 3 Feb 2022 14:05:50 -0300 Subject: [PATCH 11/16] APIC-830 Add unit test for toggle example panel --- src/ApiResourceExampleDocument.d.ts | 2 ++ src/ApiResourceExampleDocument.js | 4 +-- test/api-resource-example-document.test.js | 38 +++++++++++++++++++++- 3 files changed, 41 insertions(+), 3 deletions(-) diff --git a/src/ApiResourceExampleDocument.d.ts b/src/ApiResourceExampleDocument.d.ts index 260dcee..7dcae0b 100644 --- a/src/ApiResourceExampleDocument.d.ts +++ b/src/ApiResourceExampleDocument.d.ts @@ -216,4 +216,6 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { _computeExampleDescription(example: Example): string; _exampleTitleIsMediaType(example: Example): boolean; + + _handleCollapsePanel(): void; } diff --git a/src/ApiResourceExampleDocument.js b/src/ApiResourceExampleDocument.js index d827507..a132971 100644 --- a/src/ApiResourceExampleDocument.js +++ b/src/ApiResourceExampleDocument.js @@ -591,13 +591,13 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { */ _titleTemplate(example) { const { compatibility } = this; - + if (example.isScalar) { return ''; } const label = this._computeExampleTitle(example); return html`
{ assert.equal(titles[2].innerText.trim(), 'User 3'); assert.equal(titles[3].innerText.trim(), 'User 4'); }); + + it('test method _handleCollapsePanel for toggle panel', 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 { detail } = await oneEvent(element, 'collapse-example-panel-changed'); + + assert.isTrue(detail.value); + + 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('test toggle example panel when example title is clicked', 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); + }); }); }); }); From bf14e2795b01481c5629c1e1970d2b14b2281939 Mon Sep 17 00:00:00 2001 From: Alex Perez <96145153+alexpmule@users.noreply.github.com> Date: Fri, 4 Feb 2022 10:08:01 -0300 Subject: [PATCH 12/16] Update test/api-resource-example-document.test.js Co-authored-by: Carolina Wright --- test/api-resource-example-document.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/api-resource-example-document.test.js b/test/api-resource-example-document.test.js index a0ce95e..2c0b4c3 100644 --- a/test/api-resource-example-document.test.js +++ b/test/api-resource-example-document.test.js @@ -542,7 +542,7 @@ describe('ApiResourceExampleDocument', () => { assert.equal(titles[3].innerText.trim(), 'User 4'); }); - it('test method _handleCollapsePanel for toggle panel', async () => { + it('should expand example panel when _handleCollapsePanel is called', async () => { const payloads = getPayload(element, amf, '/IncludedInline', 'post'); element.examples = payloads; await aTimeout(100); From eed7f52866c18e198400364f6836675d6a35d990 Mon Sep 17 00:00:00 2001 From: Alex Perez <96145153+alexpmule@users.noreply.github.com> Date: Fri, 4 Feb 2022 10:08:13 -0300 Subject: [PATCH 13/16] Update test/api-resource-example-document.test.js Co-authored-by: Carolina Wright --- test/api-resource-example-document.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/api-resource-example-document.test.js b/test/api-resource-example-document.test.js index 2c0b4c3..0919c27 100644 --- a/test/api-resource-example-document.test.js +++ b/test/api-resource-example-document.test.js @@ -563,7 +563,7 @@ describe('ApiResourceExampleDocument', () => { assert.isDefined(expandIconCollapsed); }); - it('test toggle example panel when example title is clicked', async () => { + it('should expand example panel on click ', async () => { const payloads = getPayload(element, amf, '/IncludedInline', 'post'); element.examples = payloads; await aTimeout(100); From 4f60c94ea7cb9ed60c506edf9c6f3d7222fbfd30 Mon Sep 17 00:00:00 2001 From: alexperez Date: Fri, 4 Feb 2022 10:43:04 -0300 Subject: [PATCH 14/16] APIC-830 Add cursor pointer to the header of example-panel --- src/styles/Document.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/Document.js b/src/styles/Document.js index 3c87ccd..41d170b 100644 --- a/src/styles/Document.js +++ b/src/styles/Document.js @@ -29,6 +29,7 @@ export default css` display: flex; justify-content: space-between; align-items: center; + cursor: pointer; } .expand-icon { From 92e9e8d2e22538197f4b42d137e4770e1e15f2aa Mon Sep 17 00:00:00 2001 From: alexperez Date: Fri, 4 Feb 2022 11:14:25 -0300 Subject: [PATCH 15/16] APIC-830 Code review --- src/ApiResourceExampleDocument.js | 6 ------ test/api-resource-example-document.test.js | 5 +---- 2 files changed, 1 insertion(+), 10 deletions(-) diff --git a/src/ApiResourceExampleDocument.js b/src/ApiResourceExampleDocument.js index a132971..a885a2a 100644 --- a/src/ApiResourceExampleDocument.js +++ b/src/ApiResourceExampleDocument.js @@ -328,12 +328,6 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { } this.__collapseExamplePanel = value; this.requestUpdate('_collapseExamplePanel', old); - this.dispatchEvent(new CustomEvent('collapse-example-panel-changed', { - composed: true, - detail: { - value - } - })); } constructor() { diff --git a/test/api-resource-example-document.test.js b/test/api-resource-example-document.test.js index 0919c27..417f876 100644 --- a/test/api-resource-example-document.test.js +++ b/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, oneEvent } from '@open-wc/testing'; +import { fixture, assert, nextFrame, aTimeout, html } from '@open-wc/testing'; import sinon from 'sinon'; import { AmfLoader } from './amf-loader.js'; import '../api-resource-example-document.js'; @@ -553,9 +553,6 @@ describe('ApiResourceExampleDocument', () => { assert.isNull(expandIconNoCollapsed); setTimeout(() => element._handleCollapsePanel()); - const { detail } = await oneEvent(element, 'collapse-example-panel-changed'); - - assert.isTrue(detail.value); const examplePanelCollapsed = /** @type HTMLElement */ (element.shadowRoot.querySelector('.collapse')); assert.isDefined(examplePanelCollapsed); From d88238eb69c3a4f9f7139896241348bc551c9084 Mon Sep 17 00:00:00 2001 From: alexperez Date: Fri, 4 Feb 2022 11:21:41 -0300 Subject: [PATCH 16/16] 4.3.5 --- 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 e0a76b7..2ecf8d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@api-components/api-resource-example-document", - "version": "4.3.4", + "version": "4.3.5", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index b8668bd..f75e34f 100644 --- a/package.json +++ b/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.4", + "version": "4.3.5", "license": "Apache-2.0", "main": "index.js", "module": "index.js",