Bug 1842248 - create "Show More" card for highlights component. r=sho…

…pping-reviewers,fluent-reviewers,flod,ayeddi,kpatenio Differential Revision: https://phabricator.services.mozilla.com/D184874
dothq · Aug 16, 2023 · 91427b1 · 91427b1
1 parent 9408b63
commit 91427b1
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 2 deletions.
diff --git a/browser/components/shopping/content/highlights.mjs b/browser/components/shopping/content/highlights.mjs
@@ -106,10 +106,15 @@ class ReviewHighlights extends MozLitElement {
       let highlightEl = this.createHighlightElement(key, value);
       highlightsTemplate.push(highlightEl);
     }
+
+    // Only use show-more card type if there are more than two highlights.
+    let isShowMore = Array.from(this.#highlightsMap.values()).flat().length > 2;
+
     return html`
       <shopping-card
         data-l10n-id="shopping-highlights-label"
         data-l10n-attrs="label"
+        type=${isShowMore ? "show-more" : ""}
       >
         <div slot="content" id="review-highlights-wrapper">
           <dl id="review-highlights-list">${highlightsTemplate}</dl>

diff --git a/browser/components/shopping/content/shopping-card.css b/browser/components/shopping/content/shopping-card.css
@@ -18,7 +18,7 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 8px;
-  padding: 12px;
+  padding: 8px 12px;
 }
 
 button {
@@ -82,3 +82,27 @@ details > summary:focus-visible {
 details[open] .chevron-icon {
   background-image: url("chrome://global/skin/icons/arrow-up.svg");
 }
+
+.show-more footer {
+  width: 100%;
+  background-color: var(--in-content-page-background);
+  box-shadow: 2px -10px 11px var(--in-content-page-background);
+  border-top: 1px solid var(--in-content-box-border-color);
+  position: absolute;
+  bottom: 0;
+  text-align: center;
+  padding-block: 12px 8px;
+}
+
+.show-more {
+  position: relative;
+}
+
+.show-more[expanded="false"]  {
+  overflow: clip;
+  height: 200px;
+}
+
+.show-more ::slotted(div) {
+  margin-block-end: 4rem;
+}
diff --git a/browser/components/shopping/content/shopping-card.mjs b/browser/components/shopping/content/shopping-card.mjs
@@ -14,12 +14,13 @@ import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
  *
  * @property {string} label - The label text that will be used for the card header
  * @property {string} type - (optional) The type of card. No type specified
- *   will be the default card. The other available type is "accordion".
+ *   will be the default card. The other available types are "accordion" and "show-more".
  */
 class ShoppingCard extends MozLitElement {
   static properties = {
     label: { type: String },
     type: { type: String },
+    _isExpanded: { type: Boolean },
   };
 
   static get queries() {
@@ -59,6 +60,26 @@ class ShoppingCard extends MozLitElement {
           <div id="content"><slot name="content"></slot></div>
         </details>
       `;
+    } else if (this.type === "show-more") {
+      return html`
+        ${this.labelTemplate()}
+        <article
+          id="content"
+          class="show-more"
+          aria-describedby="content"
+          expanded="false"
+        >
+          <slot name="content"></slot>
+
+          <footer>
+            <button
+              aria-controls="content"
+              data-l10n-id="shopping-show-more-button"
+              @click=${this.handleShowMoreButtonClick}
+            ></button>
+          </footer>
+        </article>
+      `;
     }
     return html`
       ${this.labelTemplate()}
@@ -68,6 +89,20 @@ class ShoppingCard extends MozLitElement {
     `;
   }
 
+  handleShowMoreButtonClick(e) {
+    this._isExpanded = !this._isExpanded;
+    // toggle show more/show less text
+    e.target.setAttribute(
+      "data-l10n-id",
+      this._isExpanded
+        ? "shopping-show-less-button"
+        : "shopping-show-more-button"
+    );
+    // toggle content expanded attribute
+    e.target.parentElement.parentElement.attributes.expanded.value =
+      this._isExpanded;
+  }
+
   handleChevronButtonClick() {
     this.detailsEl.open = !this.detailsEl.open;
   }

diff --git a/browser/components/shopping/content/shopping.ftl b/browser/components/shopping/content/shopping.ftl
@@ -74,6 +74,11 @@ shopping-highlight-shipping = Shipping
 shopping-highlight-competitiveness = Competitiveness
 shopping-highlight-packaging = Packaging
 
+## Strings for show more card
+
+shopping-show-more-button = Show more
+shopping-show-less-button = Show less
+
 ## Strings for the settings card
 
 shopping-settings-label =