@internetarchive/collection-browser 2.1.4-alpha.3 → 2.1.4-alpha1

package/src/collection-browser.ts

@@ -136,8 +136,6 @@ export class CollectionBrowser
 
   @property({ type: Boolean }) suppressSortBar = false;
 
-  @property({ type: Boolean }) suppressDisplayModes = false;
-
   @property({ type: Boolean }) clearResultsOnEmptyQuery = false;
 
   @property({ type: String }) collectionPagePath: string = '/details/';
@@ -173,6 +171,8 @@ export class CollectionBrowser
    */
   @property({ type: Boolean }) isManageView = false;
 
+  @property({ type: String }) manageViewLabel = 'Select items to remove';
+
   /** Whether to replace the default sort options with a slot for customization (default: false) */
   @property({ type: Boolean }) enableSortOptionsSlot = false;
 
@@ -630,7 +630,6 @@ export class CollectionBrowser
         .prefixFilterCountMap=${this.dataSource.prefixFilterCountMap}
         .resizeObserver=${this.resizeObserver}
         .enableSortOptionsSlot=${this.enableSortOptionsSlot}
-        .suppressDisplayModes=${this.suppressDisplayModes}
         @sortChanged=${this.userChangedSort}
         @displayModeChanged=${this.displayModeChanged}
         @titleLetterChanged=${this.titleLetterSelected}
@@ -638,7 +637,6 @@ export class CollectionBrowser
       >
         <slot name="sort-options-left" slot="sort-options-left"></slot>
         <slot name="sort-options" slot="sort-options"></slot>
-        <slot name="sort-options-right" slot="sort-options-right"></slot>
       </sort-filter-bar>
     `;
   }
@@ -646,8 +644,10 @@ export class CollectionBrowser
   private get manageBarTemplate(): TemplateResult {
     return html`
       <manage-bar
+        label=${this.manageViewLabel}
         showSelectAll
         showUnselectAll
+        ?enableRemoveButton=${this.dataSource.checkedTileModels.length !== 0}
         @removeItems=${this.handleRemoveItems}
         @selectAll=${() => this.dataSource.checkAllTiles()}
         @unselectAll=${() => this.dataSource.uncheckAllTiles()}
@@ -1188,7 +1188,6 @@ export class CollectionBrowser
   connectedCallback(): void {
     super.connectedCallback?.();
     this.setupStateRestorationObserver();
-    this.setupResizeObserver();
   }
 
   disconnectedCallback(): void {
@@ -1342,7 +1341,7 @@ export class CollectionBrowser
   }
 
   private setupResizeObserver() {
-    if (!this.resizeObserver || !this.contentContainer) return;
+    if (!this.resizeObserver) return;
     this.resizeObserver.addObserver({
       target: this.contentContainer,
       handler: this,
@@ -1682,6 +1681,8 @@ export class CollectionBrowser
       // this.mapDataSource(model => ({ ...model }));
       const cellIndex = this.dataSource.indexOf(event.detail);
       if (cellIndex >= 0) this.infiniteScroller?.refreshCell(cellIndex);
+
+      this.requestUpdate();
     }
 
     this.analyticsHandler?.sendEvent({
@@ -1813,7 +1814,6 @@ export class CollectionBrowser
         #right-column {
           flex: 1;
           position: relative;
-          min-height: 90vh;
           border-left: 1px solid rgb(232, 232, 232);
           border-right: 1px solid rgb(232, 232, 232);
           padding-left: 1rem;
@@ -1930,9 +1930,7 @@ export class CollectionBrowser
 
         .mobile #left-column {
           width: 100%;
-          min-width: 0;
           padding: 0;
-          border: 0;
         }
 
         .clear-filters-btn-row {

package/src/manage/manage-bar.ts

@@ -2,6 +2,7 @@ import { msg } from '@lit/localize';
 import { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
+import iaButtonStyle from '../styles/ia-button';
 
 export interface ManageableItem {
   identifier: string;
@@ -14,7 +15,7 @@ export class ManageBar extends LitElement {
   /**
    * The label displayed in front of the management buttons
    */
-  @property({ type: String }) label = msg('Select items to un-favorite');
+  @property({ type: String }) label = msg('Select items to remove');
 
   /**
    * Whether to show the "Select All" button (default false)
@@ -26,15 +27,24 @@ export class ManageBar extends LitElement {
    */
   @property({ type: Boolean }) showUnselectAll = false;
 
+  /**
+   * Whether to active delete button for selectable items
+   */
+  @property({ type: Boolean }) enableRemoveButton = false;
+
   render(): TemplateResult {
     return html`
       <div class="manage-container">
         <span class="manage-label">${this.label}</span>
         <div class="manage-buttons">
-          <button class="cancel-btn" @click=${this.cancelClicked}>
+          <button class="ia-button dark" @click=${this.cancelClicked}>
             ${msg('Cancel')}
           </button>
-          <button class="remove-btn" @click=${this.removeClicked}>
+          <button
+            class="ia-button danger"
+            ?disabled=${!this.enableRemoveButton}
+            @click=${this.removeClicked}
+          >
             ${msg('Remove selected items')}
           </button>
           <div class="selection-buttons">
@@ -80,11 +90,12 @@ export class ManageBar extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
+      ${iaButtonStyle}
       .manage-container {
         display: flex;
         align-items: center;
         column-gap: 5px;
-        padding: 10px 0 20px;
+        padding: 20px 0 20px;
         flex-wrap: wrap;
       }
 
@@ -101,11 +112,14 @@ export class ManageBar extends LitElement {
         column-gap: 5px;
       }
 
+      .ia-button,
       button {
-        display: inline-block;
+        padding: 6px 12px;
         font-size: 1.4rem;
-        cursor: pointer;
-        white-space: nowrap;
+      }
+
+      .ia-button.danger:disabled {
+        opacity: 0.5;
       }
 
       button.link-styled {
@@ -116,36 +130,11 @@ export class ManageBar extends LitElement {
         background: none;
         color: var(--ia-theme-link-color, #4b64ff);
         text-decoration: none;
+        cursor: pointer;
       }
       button.link-styled:hover {
         text-decoration: underline;
       }
-
-      button:not(.link-styled) {
-        margin: 0;
-        padding: 6px 12px;
-        border-radius: 4px;
-        color: white;
-      }
-
-      /* Button styles derived from legacy version */
-      .cancel-btn {
-        background: #777777;
-        border: 1px solid #666666;
-      }
-      .cancel-btn:hover {
-        background: #6b6b6b;
-        border: 1px solid #505050;
-      }
-
-      .remove-btn {
-        background: #d9534f;
-        border: 1px solid #d43f3a;
-      }
-      .remove-btn:hover {
-        background: #d2322d;
-        border: 1px solid #ac2925;
-      }
     `;
   }
 }

package/src/sort-filter-bar/sort-filter-bar.ts

@@ -73,10 +73,6 @@ export class SortFilterBar
   @property({ type: Boolean, reflect: true }) enableSortOptionsSlot: boolean =
     false;
 
-  /** Whether to suppress showing the three display mode options on the right of the bar (default `false`) */
-  @property({ type: Boolean, reflect: true })
-  suppressDisplayModes: boolean = false;
-
   /** Maps of result counts for letters on the alphabet bar, for each letter filter type */
   @property({ type: Object }) prefixFilterCountMap?: Record<
     PrefixFilterType,
@@ -164,13 +160,8 @@ export class SortFilterBar
                 `
               : html`<slot name="sort-options"></slot>`}
           </div>
-          <slot name="sort-options-right"></slot>
 
-          ${this.suppressDisplayModes
-            ? nothing
-            : html`<div id="display-style-selector">
-                ${this.displayOptionTemplate}
-              </div>`}
+          <div id="display-style-selector">${this.displayOptionTemplate}</div>
         </section>
 
         ${this.dropdownBackdropVisible ? this.dropdownBackdrop : nothing}

package/src/styles/ia-button.ts

@@ -0,0 +1,107 @@
+import { css } from 'lit';
+
+const whiteColor = css`var(--white, #fff)`;
+const disabledButtonFillColor = css`var(--primaryDisableCTAFill, #767676)`;
+const disabledButtonBorderColor = css`var(--secondaryCTABorder, #999)`;
+
+const primaryButtonFillColor = css`var(--primaryCTAFill, #194880)`;
+const primaryButtonFillColorRGB = css`var(--primaryCTAFillRGB, 25, 72, 128)`; // RBG format of --primaryCTAFill
+const primaryButtonBorderColor = css`var(--primaryCTABorder, #c5d1df)`;
+
+const dangerButtonFillColor = css`var(--primaryErrorCTAFill, #d9534f)`;
+const dangerButtonFillColorRGB = css`var(--primaryErrorCTAFillRGB, 229, 28, 38)`; // RBG format of --primaryErrorCTAFill
+const dangerButtonBorderColor = css`var(--primaryErrorCTABorder, #d43f3a)`;
+
+const darkButtonFillColor = css`var(--secondaryCTAFill, #333)`;
+const darkButtonFillColorRGB = css`var(--secondaryCTAFillRGB, 51, 51, 51)`; // RBG format of --secondaryCTAFill
+const darkButtonBorderColor = css`var(--primaryCTABorder, #979797)`;
+
+const warningButtonBGColor = css`#ee8950`;
+const warningButtonBorderColor = css`#ec7939`;
+
+export default css`
+  .ia-button {
+    min-height: 3rem;
+    cursor: pointer;
+    color: ${whiteColor};
+    line-height: normal;
+    border-radius: 0.4rem;
+    font-size: 1.4rem;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    border: 1px solid transparent;
+    white-space: nowrap;
+    appearance: auto;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    transition: all 0.1s ease 0s;
+    vertical-align: middle;
+    padding: 0 3rem;
+    outline-color: ${whiteColor};
+    outline-offset: -4px;
+    user-select: none;
+    text-decoration: none;
+    width: fit-content;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+  }
+  .ia-button:focus-visible {
+    outline-style: double;
+  }
+  .ia-button:disabled {
+    cursor: not-allowed;
+    background-color: ${disabledButtonFillColor};
+    border: 1px solid ${disabledButtonBorderColor};
+  }
+  .ia-button.transparent {
+    background-color: transparent;
+  }
+  .ia-button.warning {
+    background-color: ${warningButtonBGColor}
+    border-color: ${warningButtonBorderColor};
+  }
+
+  .ia-button.primary {
+    background-color: ${primaryButtonFillColor};
+    border-color: ${primaryButtonBorderColor};
+  }
+  .ia-button.primary:hover {
+    background-color: rgba(${primaryButtonFillColorRGB}, 0.9);
+  }
+  .ia-button.primary:focus-visible {
+    background-color: rgba(${primaryButtonFillColorRGB}, 0.8);
+  }
+  .ia-button.primary:active {
+    background-color: rgba(${primaryButtonFillColorRGB}, 0.7);
+  }
+
+  .ia-button.danger {
+    background-color: ${dangerButtonFillColor};
+    border-color: ${dangerButtonBorderColor};
+  }
+  .ia-button.danger:hover {
+    background-color: rgba(${dangerButtonFillColorRGB}, 0.9);
+  }
+  .ia-button.danger:focus-visible {
+    background-color: rgba(${dangerButtonFillColorRGB}, 0.8);
+  }
+  .ia-button.danger:active {
+    background-color: rgba(${dangerButtonFillColorRGB}, 0.7);
+  }
+
+  .ia-button.dark {
+    background-color: ${darkButtonFillColor};
+    border-color: ${darkButtonBorderColor};
+  }
+  .ia-button.dark:hover {
+    background-color: rgba(${darkButtonFillColorRGB}, 0.9);
+  }
+  .ia-button.dark:focus-visible {
+    background-color: rgba(${darkButtonFillColorRGB}, 0.8);
+  }
+  .ia-button.dark:active {
+    background-color: rgba(${darkButtonFillColorRGB}, 0.7);
+  }
+`;

package/src/tiles/tile-dispatcher.ts

@@ -167,9 +167,7 @@ export class TileDispatcher
           type="checkbox"
           title=${this.manageCheckTitle}
           .checked=${this.model?.checked}
-          @change=${() => {
-            if (this.model) this.model.checked = !this.model.checked;
-          }}
+          @change=${this.handleLinkClicked}
         />
       </div>
     `;

package/test/collection-browser.test.ts

@@ -1816,6 +1816,44 @@ describe('Collection Browser', () => {
     expect(el.isManageView).to.be.false;
   });
 
+  it('enable/disable manage view delete button when you selectAll/unselectAll', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser .searchService=${searchService}>
+      </collection-browser>`
+    );
+
+    el.baseQuery = 'foo';
+    await el.updateComplete;
+    await el.initialSearchComplete;
+
+    el.isManageView = true;
+    await el.updateComplete;
+
+    const manageBar = el.shadowRoot?.querySelector('manage-bar');
+    expect(manageBar).to.exist;
+
+    // disable button exists
+    expect(manageBar?.shadowRoot?.querySelector('.danger:disabled')).to.be
+      .exist;
+
+    // Emit remove event from manage bar
+    manageBar!.dispatchEvent(new CustomEvent('selectAll'));
+    await el.updateComplete;
+
+    // disable button does not exists
+    expect(manageBar?.shadowRoot?.querySelector('.danger:disabled')).to.be.not
+      .exist;
+
+    // Emit remove event from manage bar
+    manageBar!.dispatchEvent(new CustomEvent('unselectAll'));
+    await el.updateComplete;
+
+    // disable button exists again
+    expect(manageBar?.shadowRoot?.querySelector('.danger:disabled')).to.be
+      .exist;
+  });
+
   it('applies loans tab properties to sort bar', async () => {
     const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(

package/test/manage/manage-bar.test.ts

@@ -45,6 +45,11 @@ describe('Manage bar', () => {
     expect(el.shadowRoot?.querySelector('.unselect-all-btn')).to.exist;
   });
 
+  it('have delete button disabled', async () => {
+    const el = await fixture<ManageBar>(html`<manage-bar></manage-bar>`);
+    expect(el.shadowRoot?.querySelector('.remove-btn:disabled')).to.exist;
+  });
+
   it('emits event when Cancel button clicked', async () => {
     const spy = Sinon.spy();
     const el = await fixture<ManageBar>(

package/tsconfig.json

@@ -1,21 +1,21 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true,
-    "importsNotUsedAsValues": "error"
-  },
-  "include": ["src", "test", "index.ts", "types"],
-}
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "importsNotUsedAsValues": "error"
+  },
+  "include": ["src", "test", "index.ts", "types"],
+}

package/web-dev-server.config.mjs

@@ -1,30 +1,30 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  nodeResolve: true,
-  open: '/',
-  watch: !hmr,
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  /** Confgure bare import resolve plugin */
-  // nodeResolve: {
-  //   exportConditions: ['browser', 'development']
-  // },
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-
-  http2: true,
-  sslCert: './local.archive.org.cert',
-  sslKey: './local.archive.org.key',
-});
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  nodeResolve: true,
+  open: '/',
+  watch: !hmr,
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  /** Confgure bare import resolve plugin */
+  // nodeResolve: {
+  //   exportConditions: ['browser', 'development']
+  // },
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
+
+  http2: true,
+  sslCert: './local.archive.org.cert',
+  sslKey: './local.archive.org.key',
+});

package/web-test-runner.config.mjs

@@ -1,41 +1,41 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
-
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
-  files: 'dist/test/**/*.test.js',
-
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
-});
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
+  files: 'dist/test/**/*.test.js',
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});