Merge remote-tracking branch 'origin/stage' into MWPW-154136-profile-…

…dropdown

.github/workflows/run-nala-on-dme.yml

@@ -14,7 +14,7 @@ jobs:
       - name: Check out repository
         uses: actions/checkout@v3
       - name: Run Nala
-        uses: cod17828/nala@dev # Change if doing dev work
+        uses: adobecom/dme-partners@stage # Change if doing dev work
         env:
           labels: ${{ join(github.event.pull_request.labels.*.name, ' ') }}
           branch: ${{ github.event.pull_request.head.ref }}

action.yml

@@ -0,0 +1,13 @@
+name: 'Nala'
+
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Set up Node
+      uses: actions/setup-node@v3
+      with:
+        node-version: lts/*
+
+    - run: $GITHUB_ACTION_PATH/run.sh
+      shell: bash

edsdme/blocks/announcement-date/announcement-date.css

@@ -0,0 +1,4 @@
+.announcement-date {
+  display: block;
+  margin: 24px 0 32px;
+}

edsdme/blocks/announcement-date/announcement-date.js

@@ -0,0 +1,37 @@
+import { formatDate, getLocale } from '../../scripts/utils.js';
+import { createTag } from '../utils/utils.js';
+
+const CARD_METADATA_PROPERTY_CREATED = 'created';
+
+export default async function init(el) {
+  performance.mark('announcement-date:start');
+
+  let createdDateValue;
+  const cardMetadataEl = document.querySelector('.card-metadata');
+
+  if (cardMetadataEl) {
+    [...cardMetadataEl.children].forEach((row) => {
+      const firstColumn = row.children[0];
+      if (firstColumn && firstColumn.innerText.trim().toLowerCase() === CARD_METADATA_PROPERTY_CREATED) {
+        createdDateValue = row.children[1]?.innerText.trim();
+      }
+    });
+  }
+
+  const createdDate = new Date(createdDateValue);
+
+  if (!isNaN(createdDate)) {
+    const locale = getLocale();
+    el.innerHTML = '';
+    el.className = `announcement-date-wrapper content ${el.className}`;
+    el.classList.remove('announcement-date');
+    const month = String(createdDate.getMonth() + 1).padStart(2, '0');
+    const day = String(createdDate.getDate()).padStart(2, '0');
+    const datetime = `${createdDate.getFullYear()}-${month}-${day}`;
+    const dateEl = createTag('time', { datetime, class: 'announcement-date detail-m' }, formatDate(createdDateValue, locale.ietf));
+    el.append(dateEl);
+  }
+
+  performance.mark('announcement-date:end');
+  performance.measure('announcement-date block', 'announcement-date:start', 'announcement-date:end');
+}

edsdme/blocks/announcements/announcements.js

@@ -86,6 +86,7 @@ export default async function init(el) {
     pagination: 'load-more',
     isArchive,
     caasUrl: getCaasUrl(block),
+    ietf: config.locale.ietf,
   };
 
   const app = document.createElement('announcements-cards');

edsdme/blocks/search/SearchCards.js

@@ -40,7 +40,7 @@ export default class Search extends PartnerCards {
       return html`${repeat(
         this.paginatedCards,
         (card) => card.id,
-        (card) => html`<search-card class="card-wrapper" .data=${card} .localizedText="${this.blockData.localizedText}"></search-card>`,
+        (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">

edsdme/components/PartnerCards.js

@@ -229,7 +229,7 @@ export default class PartnerCards extends LitElement {
       return html`${repeat(
         this.paginatedCards,
         (card) => card.id,
-        (card) => html`<single-partner-card class="card-wrapper" .data=${card}></signle-partner-card>`,
+        (card) => html`<single-partner-card class="card-wrapper" .data=${card} .ietf=${this.blockData.ietf}></single-partner-card>`,
       )}`;
     }
 

edsdme/components/PartnerCardsStyles.js

@@ -436,7 +436,7 @@ export const partnerCardsStyles = css`
     display: block;
     right: 0;
     top: 30px;
-    z-index: 10;
+    z-index: 1;
     background-color: #fff;
     border-radius: 5px;
     border: 1px solid #eaeaea;

edsdme/components/SearchCard.js

@@ -8,6 +8,7 @@ class SearchCard extends LitElement {
   static properties = {
     data: { type: Object },
     localizedText: { type: Object },
+    ietf: { type: String },
   };
 
   static styles = searchCardStyles;
@@ -64,7 +65,7 @@ class SearchCard extends LitElement {
             : ''
           }
           <div class="card-text">
-            <span class="card-date">${this.localizedText['{{last-modified}}']}: ${formatDate(this.data.cardDate)}
+            <span class="card-date">${this.localizedText['{{last-modified}}']}: ${formatDate(this.data.cardDate, this.ietf)}
               <span class="card-size">${this.localizedText['{{size}}']}: ${this.data.contentArea?.size}</span>
             </span>
             <p class="card-description">${this.data.contentArea?.description}</p>

edsdme/components/SinglePartnerCard.js

@@ -7,7 +7,10 @@ const { html, LitElement } = await import(`${miloLibs}/deps/lit-all.min.js`);
 const DEFAULT_BACKGROUND_IMAGE_PATH = '/content/dam/solution/en/images/card-collection/sample_default.png';
 
 class SinglePartnerCard extends LitElement {
-  static properties = { data: { type: Object } };
+  static properties = {
+    data: { type: Object },
+    ietf: { type: String },
+  };
 
   static styles = singlePartnerCardStyles;
 
@@ -59,7 +62,7 @@ class SinglePartnerCard extends LitElement {
             <p class="card-description">${this.data.contentArea?.description}</p>
           </div>
           <div class="card-footer">
-            <span class="card-date">${formatDate(this.data.cardDate)}</span>
+            <span class="card-date">${formatDate(this.data.cardDate, this.ietf)}</span>
             <a class="card-btn" href="${this.transformCardUrl(this.data.contentArea?.url)}">${this.data.footer[0]?.right[0]?.text}</a>
           </div>
         </div>

edsdme/scripts/utils.js

@@ -55,7 +55,7 @@ export const prodHosts = [
  * ------------------------------------------------------------
  */
 
-export function formatDate(cardDate) {
+export function formatDate(cardDate, locale = 'en-US') {
   if (!cardDate) return;
 
   const dateObject = new Date(cardDate);
@@ -65,7 +65,7 @@ export function formatDate(cardDate) {
     day: 'numeric',
   };
 
-  const formattedDate = dateObject.toLocaleString('en-US', options);
+  const formattedDate = dateObject.toLocaleString(locale, options);
   // eslint-disable-next-line consistent-return
   return formattedDate;
 }
@@ -134,7 +134,7 @@ export function signedInNonMember() {
   return partnerIsSignedIn() && !isMember();
 }
 
-export function isReseller (level) {
+export function isReseller(level) {
   return RESSELER_LEVELS.includes(level?.toLowerCase());
 }
 

edsdme/styles/styles.css

@@ -40,3 +40,8 @@
 .personalization-hide {
   display: none;
 }
+
+/* announcement title section divider */
+.announcement-title.section.divider {
+  border-bottom: 1px solid rgb(109 109 109);
+}

nala/.nala-snippets/spec-snippet.code-snippets

@@ -0,0 +1,25 @@
+{
+  "Create Nala Spec": {
+    "prefix": "create nala spec",
+    "body": [
+      "module.exports = {",
+      "  FeatureName: '${1:Block or Feature Name}',",
+      "  features: [",
+      "    {",
+      "      tcid: '0',",
+      "      name: '@${2:spec-name}',",
+      "      path: '/drafts/nala/[${3:test-page-path}]',",
+      "      data: {",
+      "        attribute-1: '${4:value}',",
+      "        attribute-2: '${5:value}',",
+      "        attribute-3: '${6:value}',",
+      "      },",
+      "      tags: '@Block  @smoke @regression @dme',",
+      "    },",
+      "  ],",
+      "};"
+    ],
+    "description": "Create a Nala spec with block name or feature name"
+  }
+}
+

nala/blocks/announcements/announcements.page.js

@@ -0,0 +1,47 @@
+export default class AnnouncementsPage {
+  constructor(page) {
+    this.page = page;
+    this.signInButton = page.locator('button[daa-ll="Sign In"].feds-signIn');
+    this.resultNumber = page.locator('.partner-cards-cards-results').nth(0);
+    this.searchField = page.locator('.input');
+    this.clearSearchSelector = page.locator('[aria-label="Reset"]');
+    this.clearAllSelector = page.locator('[aria-label="Clear all"]');
+    this.firstCardTitle = page.locator('.card-title').nth(0);
+    this.firstCardDate = page.locator('.card-date').nth(0);
+    this.lastCardDate = page.locator('.card-date').nth(5);
+    this.sortBtn = page.locator('.sort-btn');
+    this.oldestOption = page.getByRole('button', { name: 'oldest' });
+    this.paginationText = page.locator('.pagination-total-results');
+    this.loadMore = page.locator('[aria-label="Load more"]');
+    this.cardCount = page.locator('.card-wrapper');
+    this.pageCount = page.locator('.page-btn');
+    this.readCard = page.locator('.card-btn');
+    this.paginationPrevButton = page.locator('button.pagination-prev-btn');
+    this.paginationNextButton = page.locator('button.pagination-next-btn');
+    this.pageNumButton = page.locator('button.page-btn');
+  }
+
+  async clickPageNumButton(pageNum) {
+      await this.page.locator(`button[aria-label="Page ${pageNum}"]`).click();
+    }
+
+    async expandFilterOptions(filterSection) {
+      await this.page.locator(`[aria-label="${filterSection}"]`).click();
+    }
+
+    async clickFilterOptions(filterOption) {
+      await this.page.locator(`sp-checkbox:text-is("${filterOption}")`).click();
+    }
+
+    async clickDateFilterOptions(dateFilterOption) {
+      await this.page.locator(`button[aria-label="${dateFilterOption}"]`).click();
+    }
+
+    async clearSideBarFilterButton(filterButton) {
+      await this.page.locator(`[aria-label="${filterButton}"]`).click();
+    }
+
+    async clearFilter(filter, number) {
+      await this.page.locator(`[aria-label="${filter}"] + [aria-label="${number}"]`).click();
+    }
+}