Merge pull request #120 from adobecom/mwpw-154154/logos-page

Mwpw 154154/logos page

edsdme/blocks/logos/LogosCards.js

@@ -0,0 +1,84 @@
+import { getLibs } from '../../scripts/utils.js';
+import PartnerCards from '../../components/PartnerCards.js';
+import { searchCardsStyles } from '../search/SearchCardsStyles.js';
+import '../../components/SearchCard.js';
+import { generateRequestForSearchAPI } from '../utils/utils.js';
+
+const miloLibs = getLibs();
+const { html, repeat } = await import(`${miloLibs}/deps/lit-all.min.js`);
+
+export default class Logos extends PartnerCards {
+  static styles = [
+    PartnerCards.styles,
+    searchCardsStyles,
+  ];
+
+  constructor() {
+    super();
+    this.contentType = 'all';
+    this.contentTypeCounter = { countAll: 0, countAssets: 0, countPages: 0 };
+    this.hasResponseData = false;
+  }
+
+  async fetchData() {
+    const assetType = { filters: { assetType: ['logoLogotype'] } };
+    let apiData;
+    try {
+      const response = await generateRequestForSearchAPI(
+        {
+          sort: 'recent',
+          type: 'asset',
+        },
+        assetType,
+      );
+
+      if (!response.ok) {
+        throw new Error(`Error message: ${response.statusText}`);
+      }
+
+      apiData = await response.json();
+
+      this.allCards = apiData.cards;
+      this.cards = apiData.cards;
+      this.hasResponseData = !!apiData.cards;
+    } catch (error) {
+      this.hasResponseData = true;
+      // eslint-disable-next-line no-console
+      console.error('There was a problem with your fetch operation:', error);
+    }
+  }
+
+  get partnerCards() {
+    if (this.paginatedCards.length) {
+      return html`${repeat(
+        this.paginatedCards,
+        (card) => card.id,
+        (card) => html`<search-card class="card-wrapper" .data=${card} .localizedText=${this.blockData.localizedText} .ietf=${this.blockData.ietf}></search-card>`,
+      )}`;
+    }
+    return html`<div class="no-results">
+        <strong class="no-results-title">${this.blockData.localizedText['{{no-results-title}}']}</strong>
+      </div>`;
+  }
+
+  /* eslint-disable indent */
+  render() {
+    return html`
+      <div class="partner-cards-content">
+        <div class="partner-cards-collection">
+          ${this.hasResponseData
+            ? this.partnerCards
+            : html`
+              <div class="progress-circle-wrapper">
+                <sp-theme theme="spectrum" color="light" scale="medium">
+                  <sp-progress-circle label="Cards loading" indeterminate="" size="l" role="progressbar"></sp-progress-circle>
+                </sp-theme>
+              </div>
+            `
+          }
+        </div>
+      </div>
+    `;
+  }
+  /* eslint-disable indent */
+}

edsdme/blocks/logos/logos.css

@@ -0,0 +1,5 @@
+@media (min-width: 900px) {
+  .section:has(.logos-cards-wrapper.main) {
+    grid-template-columns: 1fr 3fr;
+  }
+}

edsdme/blocks/logos/logos.js

@@ -0,0 +1,58 @@
+import { getLibs } from '../../scripts/utils.js';
+import { replaceText, getConfig, populateLocalizedTextFromListItems } from '../utils/utils.js';
+import Logos from './LogosCards.js';
+
+function declareLogos() {
+  if (customElements.get('logos-cards')) return;
+  customElements.define('logos-cards', Logos);
+}
+
+async function localizationPromises(localizedText, config) {
+  return Promise.all(Object.keys(localizedText).map(async (key) => {
+    const value = await replaceText(key, config);
+    if (value.length) localizedText[key] = value;
+  }));
+}
+
+export default async function init(el) {
+  const miloLibs = getLibs();
+  const config = getConfig();
+
+  const sectionIndex = el.parentNode.getAttribute('data-idx');
+  const isMain = el.classList.contains('main');
+
+  const localizedText = {
+    '{{no-results-title}}': 'No Results Found',
+    '{{size}}': 'Size',
+    '{{last-modified}}': 'Last modified',
+  };
+
+  populateLocalizedTextFromListItems(el, localizedText);
+
+  const deps = await Promise.all([
+    localizationPromises(localizedText, config),
+    import(`${miloLibs}/features/spectrum-web-components/dist/theme.js`),
+    import(`${miloLibs}/features/spectrum-web-components/dist/button.js`),
+    import(`${miloLibs}/features/spectrum-web-components/dist/progress-circle.js`),
+    import(`${miloLibs}/features/spectrum-web-components/dist/action-button.js`),
+    import(`${miloLibs}/features/spectrum-web-components/dist/icons-workflow.js`),
+  ]);
+
+  declareLogos();
+
+  const blockData = {
+    localizedText,
+    tableData: el.children,
+    ietf: config.locale.ietf,
+    isMain,
+  };
+
+  const app = document.createElement('logos-cards');
+  app.className = `logos-cards-wrapper${blockData.isMain ? ' main' : ''}`;
+  app.blockData = blockData;
+  app.setAttribute('data-idx', sectionIndex);
+  el.replaceWith(app);
+
+  await deps;
+  return app;
+}

edsdme/components/SearchCard.js

@@ -19,8 +19,8 @@ class SearchCard extends LitElement {
     // eslint-disable-next-line consistent-return
     return html`${repeat(
       tags,
-      (tag) => tag,
-      (tag) => html`<span class="card-tag">${this.localizedText[`{{${tag.value}}}`]}</span>`,
+      (tag) => tag.key,
+      (tag) => html`<span class="card-tag">${this.localizedText[`{{${Object.values(tag)[0]}}}`]}</span>`,
     )}`;
   }