@internetarchive/collection-browser 2.18.3-alpha-webdev7768.0 → 2.18.3-alpha-webdev7768.1

package/src/collection-facets/smart-facets/smart-facet-bar.ts

@@ -49,6 +49,8 @@ export class SmartFacetBar extends LitElement {
 
   @property({ type: Boolean }) filterToggleActive = false;
 
+  @property({ type: String }) label?: string;
+
   @state() private heuristicRecs: SmartFacet[] = [];
 
   @state() private smartFacets: SmartFacet[][] = [];
@@ -62,9 +64,13 @@ export class SmartFacetBar extends LitElement {
   render() {
     if (!this.query) return nothing;
 
+    const shouldShowLabel = !!this.label && this.smartFacets.length > 0;
     return html`
       <div id="smart-facets-container">
         ${this.filtersToggleTemplate}
+        ${shouldShowLabel
+          ? html`<p id="filters-label">${this.label}</p>`
+          : nothing}
         ${repeat(
           this.smartFacets,
           f =>
@@ -363,6 +369,12 @@ export class SmartFacetBar extends LitElement {
       #filters-toggle.active > svg {
         filter: invert(1);
       }
+
+      #filters-label {
+        font-size: 1.4rem;
+        font-weight: bold;
+        margin: 0 -5px 0 0;
+      }
     `;
   }
 }

package/src/collection-facets/smart-facets/smart-facet-dropdown.ts

@@ -31,13 +31,13 @@ export class SmartFacetDropdown extends LitElement {
         <ia-dropdown
           class="dropdown"
           displayCaret
-          openViaButton
           closeOnSelect
           closeOnEscape
           closeOnBackdropClick
           includeSelectedOption
           .options=${this.dropdownOptions}
           .selectedOption=${this.activeDropdownOption}
+          .openViaButton=${false}
           @optionSelected=${this.optionSelected}
           @click=${this.onDropdownClick}
         >

package/src/tiles/grid/styles/tile-grid-shared-styles.ts

@@ -1,129 +1,129 @@
-import { css } from 'lit';
-import { srOnlyStyle } from '../../../styles/sr-only';
-
-/**
- * Base tile styles
- */
-
-const tileBackgroundColor = css`var(--tileBackgroundColor, #ffffff)`;
-const tileCornerRadius = css`var(--tileCornerRadius, 4px)`;
-
-export const baseTileStyles = css`
-  /* Include .sr-only styles for all tiles */
-  ${srOnlyStyle}
-
-  .container {
-    background-color: ${tileBackgroundColor};
-    border: 1px #2c2c2c;
-    border-radius: ${tileCornerRadius};
-    box-shadow: var(--tileBoxShadow, 1px 1px 2px 0);
-    box-sizing: border-box;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-
-  image-block {
-    display: block;
-    position: relative;
-    text-align: center;
-  }
-
-  .tile-details {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    row-gap: 10px;
-    font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
-  }
-
-  .item-info {
-    display: flex;
-    flex-direction: column;
-    row-gap: 5px;
-    flex-grow: 1;
-  }
-
-  #title {
-    padding: 0 5px;
-  }
-
-  .created-by,
-  .date-sorted-by,
-  .volume-issue,
-  .archivist-since {
-    display: flex;
-    justify-content: left;
-    align-items: flex-start;
-    padding: 0 5px;
-  }
-
-  .truncated {
-    flex: 1;
-    color: #2c2c2c;
-    min-width: 0; /* Important for long words! */
-    text-align: left;
-    line-height: 15px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    word-wrap: break-word;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-  }
-
-  h4.truncated {
-    display: -webkit-box;
-    margin: 0px;
-    line-height: 15px;
-    font-size: 14px;
-    font-weight: 500;
-    padding-bottom: 1px;
-  }
-
-  span {
-    display: -webkit-box;
-    font-size: 1.4rem;
-    line-height: 15px;
-    overflow: hidden;
-    word-wrap: break-word;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-    padding-bottom: 1px;
-  }
-
-  .container:hover > .tile-details > .item-info > #title > .truncated {
-    text-decoration: underline;
-  }
-
-  /** this is a workaround for Safari 15 where the hover effects are not working */
-  #title:hover > .truncated {
-    text-decoration: underline;
-  }
-
-  .info-button {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    margin: 0;
-    padding: 0;
-    border: none;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: rgba(220, 220, 220, 0.5);
-    color: white;
-    font-size: 2rem;
-    font-weight: bold;
-    line-height: 1;
-    text-shadow: black 1px 1px 3px;
-    overflow: visible;
-    aspect-ratio: 1 / 1;
-    z-index: 1;
-  }
-
-  .hidden {
-    display: none;
-  }
-`;
+import { css } from 'lit';
+import { srOnlyStyle } from '../../../styles/sr-only';
+
+/**
+ * Base tile styles
+ */
+
+const tileBackgroundColor = css`var(--tileBackgroundColor, #ffffff)`;
+const tileCornerRadius = css`var(--tileCornerRadius, 4px)`;
+
+export const baseTileStyles = css`
+  /* Include .sr-only styles for all tiles */
+  ${srOnlyStyle}
+
+  .container {
+    background-color: ${tileBackgroundColor};
+    border: 1px #2c2c2c;
+    border-radius: ${tileCornerRadius};
+    box-shadow: var(--tileBoxShadow, 1px 1px 2px 0);
+    box-sizing: border-box;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  image-block {
+    display: block;
+    position: relative;
+    text-align: center;
+  }
+
+  .tile-details {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    row-gap: 10px;
+    font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
+  }
+
+  .item-info {
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+    flex-grow: 1;
+  }
+
+  #title {
+    padding: 0 5px;
+  }
+
+  .created-by,
+  .date-sorted-by,
+  .volume-issue,
+  .archivist-since {
+    display: flex;
+    justify-content: left;
+    align-items: flex-start;
+    padding: 0 5px;
+  }
+
+  .truncated {
+    flex: 1;
+    color: #2c2c2c;
+    min-width: 0; /* Important for long words! */
+    text-align: left;
+    line-height: 15px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-wrap: break-word;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+
+  h4.truncated {
+    display: -webkit-box;
+    margin: 0px;
+    line-height: 15px;
+    font-size: 14px;
+    font-weight: 500;
+    padding-bottom: 1px;
+  }
+
+  span {
+    display: -webkit-box;
+    font-size: 1.4rem;
+    line-height: 15px;
+    overflow: hidden;
+    word-wrap: break-word;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    padding-bottom: 1px;
+  }
+
+  .container:hover > .tile-details > .item-info > #title > .truncated {
+    text-decoration: underline;
+  }
+
+  /** this is a workaround for Safari 15 where the hover effects are not working */
+  #title:hover > .truncated {
+    text-decoration: underline;
+  }
+
+  .info-button {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(220, 220, 220, 0.5);
+    color: white;
+    font-size: 2rem;
+    font-weight: bold;
+    line-height: 1;
+    text-shadow: black 1px 1px 3px;
+    overflow: visible;
+    aspect-ratio: 1 / 1;
+    z-index: 1;
+  }
+
+  .hidden {
+    display: none;
+  }
+`;