@internetarchive/modal-manager 2.0.2 → 2.0.3

package/src/modal-template.ts

@@ -6,6 +6,7 @@ import '@internetarchive/icon-close';
 
 import { ModalConfig } from './modal-config';
 import IALogoIcon from './assets/ia-logo-icon';
+import arrowLeftIcon from './assets/arrow-left-icon';
 
 @customElement('modal-template')
 export class ModalTemplate extends LitElement {
@@ -23,6 +24,9 @@ export class ModalTemplate extends LitElement {
       <div class="modal-wrapper">
         <div class="modal-container">
           <header style="background-color: ${this.config.headerColor}">
+            ${this.config.showLeftNavButton
+              ? this.leftNavButtonTemplate
+              : nothing}
             ${this.config.showCloseButton ? this.closeButtonTemplate : ''}
             ${this.config.showHeaderLogo
               ? html`<div class="logo-icon">${IALogoIcon}</div>`
@@ -84,6 +88,25 @@ export class ModalTemplate extends LitElement {
     this.dispatchEvent(event);
   }
 
+  /**
+   * Dispatch the `leftNavButtonPressed` event to the consumer
+   *
+   * @private
+   * @memberof ModalTemplate
+   */
+  private handleLeftNavButtonPressed(e: Event): void {
+    e.preventDefault();
+    if (
+      e.type === 'keydown' &&
+      (e as KeyboardEvent).key !== ' ' &&
+      (e as KeyboardEvent).key !== 'Enter'
+    ) {
+      return;
+    }
+    const event = new Event('leftNavButtonPressed');
+    this.dispatchEvent(event);
+  }
+
   /**
    * The close button template
    *
@@ -105,6 +128,17 @@ export class ModalTemplate extends LitElement {
     `;
   }
 
+  private get leftNavButtonTemplate(): TemplateResult {
+    return html`<button
+      type="button"
+      class="back-button"
+      @click=${this.handleLeftNavButtonPressed}
+      @keydown=${this.handleLeftNavButtonPressed}
+    >
+      ${arrowLeftIcon} ${this.config.leftNavButtonText ?? ''}
+    </button> `;
+  }
+
   /** @inheritdoc */
   static get styles(): CSSResult {
     const modalLogoSize = css`var(--modalLogoSize, 6.5rem)`;
@@ -261,6 +295,28 @@ export class ModalTemplate extends LitElement {
           0 4px 4px 0 rgba(0, 0, 0, 0.08);
       }
 
+      .back-button {
+        position: absolute;
+        left: 1.2rem;
+        top: 1.2rem;
+        height: 2rem;
+        background-color: transparent;
+        outline: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        color: white;
+        font-family: inherit;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .back-button svg {
+        height: 1.5rem;
+      }
+
       .sr-only {
         position: absolute;
         width: 1px;

package/test/modal-config.test.ts

@@ -24,6 +24,8 @@ describe('Modal Config', () => {
     const showProcessingIndicator = true;
     const processingImageMode = 'processing';
     const showCloseButton = false;
+    const showLeftNavButton = false;
+    const leftNavButtonText = 'Previous';
     const showHeaderLogo = false;
     const closeOnBackdropClick = false;
 
@@ -36,6 +38,8 @@ describe('Modal Config', () => {
       showProcessingIndicator: showProcessingIndicator,
       processingImageMode: processingImageMode,
       showCloseButton: showCloseButton,
+      showLeftNavButton: showLeftNavButton,
+      leftNavButtonText: leftNavButtonText,
       showHeaderLogo: showHeaderLogo,
       closeOnBackdropClick: closeOnBackdropClick,
     });
@@ -49,6 +53,8 @@ describe('Modal Config', () => {
     expect(config.showProcessingIndicator).to.equal(showProcessingIndicator);
     expect(config.processingImageMode).to.equal(processingImageMode);
     expect(config.showCloseButton).to.equal(showCloseButton);
+    expect(config.showLeftNavButton).to.equal(showLeftNavButton);
+    expect(config.leftNavButtonText).to.equal(leftNavButtonText);
     expect(config.showHeaderLogo).to.equal(showHeaderLogo);
     expect(config.closeOnBackdropClick).to.equal(closeOnBackdropClick);
   });
@@ -63,6 +69,8 @@ describe('Modal Config', () => {
     expect(config.showProcessingIndicator).to.equal(false);
     expect(config.processingImageMode).to.equal('complete');
     expect(config.showCloseButton).to.equal(true);
+    expect(config.showLeftNavButton).to.equal(false);
+    expect(config.leftNavButtonText).to.equal('');
     expect(config.showHeaderLogo).to.equal(true);
     expect(config.closeOnBackdropClick).to.equal(true);
   });

package/test/modal-manager.test.ts

@@ -151,6 +151,34 @@ describe('Modal Manager', () => {
     expect(callbackCalled).to.equal(false);
   });
 
+  it('calls the userPressedLeftNavButtonCallback when the user clicks the left nav button', async () => {
+    const el = (await fixture(html`
+      <modal-manager></modal-manager>
+    `)) as ModalManager;
+
+    const config = new ModalConfig();
+    config.showLeftNavButton = true;
+
+    let callbackCalled = false;
+    const callback = (): void => {
+      callbackCalled = true;
+    };
+    el.showModal({
+      config,
+      userPressedLeftNavButtonCallback: callback,
+    });
+    await elementUpdated(el);
+
+    const modalTemplate = el.shadowRoot?.querySelector('modal-template');
+    expect(modalTemplate).to.exist;
+
+    modalTemplate?.dispatchEvent(new Event('leftNavButtonPressed'));
+
+    await elementUpdated(el);
+
+    expect(callbackCalled).to.equal(true);
+  });
+
   it('mode is set to closed when close button is pressed', async () => {
     const el = (await fixture(html`
       <modal-manager></modal-manager>

package/test/modal-template.test.ts

@@ -57,6 +57,40 @@ describe('Modal Template', () => {
     expect(response).to.exist;
   });
 
+  it('emits leftNavButtonPressed event when left nav button is pressed', async () => {
+    const config = new ModalConfig();
+    config.showLeftNavButton = true;
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
+    const clickEvent = new MouseEvent('click');
+
+    setTimeout(() => {
+      leftNavButton?.dispatchEvent(clickEvent);
+    });
+    const response = await oneEvent(el, 'leftNavButtonPressed', false);
+    expect(response).to.exist;
+  });
+
+  it('emits leftNavButtonPressed event when left nav button gets spacebar pressed', async () => {
+    const config = new ModalConfig();
+    config.showLeftNavButton = true;
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
+    const clickEvent = new KeyboardEvent('keydown', { key: ' ' });
+
+    setTimeout(() => {
+      leftNavButton?.dispatchEvent(clickEvent);
+    });
+    const response = await oneEvent(el, 'leftNavButtonPressed', false);
+    expect(response).to.exist;
+  });
+
   it('shows the processing indicator if configured to', async () => {
     const config = new ModalConfig();
     config.showProcessingIndicator = true;
@@ -70,6 +104,54 @@ describe('Modal Template', () => {
     expect('hidden' in classList).to.equal(false);
   });
 
+  it('shows the left nav button if configured to', async () => {
+    const config = new ModalConfig();
+    config.showLeftNavButton = true;
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
+    expect(leftNavButton).to.exist;
+  });
+
+  it('hides the left nav button if configured to', async () => {
+    const config = new ModalConfig();
+    config.showCloseButton = false;
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const closeButton = el.shadowRoot?.querySelector('.close-button');
+    expect(closeButton).to.not.exist;
+  });
+
+  it('uses custom text for the left nav button if configured to', async () => {
+    const config = new ModalConfig();
+    config.showLeftNavButton = true;
+    config.leftNavButtonText = 'Previous';
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
+
+    expect(leftNavButton).to.exist;
+    expect(leftNavButton?.innerHTML).to.contain('Previous');
+  });
+
+  it('does not use any text for the left nav button if not configured to', async () => {
+    const config = new ModalConfig();
+    config.showLeftNavButton = true;
+
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
+    expect(leftNavButton?.innerHTML).not.to.contain('Previous');
+  });
+
   it('shows the close button if configured to', async () => {
     const config = new ModalConfig();
     config.showCloseButton = true;