Merge pull request #53 from adobecom/stage

Release 24.3.0

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

@@ -14,7 +14,7 @@ jobs:
       - name: Check out repository
         uses: actions/checkout@v3
       - name: Run Nala
-        uses: adobecom/dme-partners@dme-nala-tests # 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,5 @@
+.announcement-date {
+  display: block;
+  padding: var(--spacing-s) 0;
+  border-top: 1px solid var(--color-gray-600);
+}

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/partners-navigation/features/profile/partners-dropdown.css

@@ -0,0 +1,123 @@
+:root {
+  --feds-color-profile-heading: #707070;
+  --feds-color-profile: #4b4b4b;
+  --feds-color-profile--emphasis: #2c2c2c;
+  --feds-border-profile: 1px solid #e1e1e1;
+}
+
+.feds-profile-menu {
+  position: absolute;
+  width: 320px;
+  right: 0;
+  top: 100%;
+  border: var(--feds-border-profile);
+  border-radius: 0 0 4px 4px;
+  background: var(--color-white);
+  overflow: hidden;
+  box-shadow: 0 2px 6px -1px rgb(0 0 0 / 10%);
+  display: none;
+  line-height: 1;
+  white-space: nowrap;
+  z-index: 1;
+  transform: translate3d(0,0,0); /* Fix Safari issues w/ position: sticky */
+}
+
+[dir = "rtl"] .feds-profile-menu {
+  right: initial;
+  left: 0;
+}
+
+.feds-profile-button[aria-expanded = "true"] + .feds-profile-menu {
+  display: block;
+}
+
+.feds-profile-header {
+  padding: 20px;
+  display: flex;
+  flex-direction: row;
+  outline-offset: -3px;
+  column-gap: 15px;
+}
+
+.feds-profile-header .feds-profile-img {
+  max-height: 64px;
+  max-width: 64px;
+}
+
+.feds-profile-details {
+  overflow: hidden;
+  line-height: 1.25;
+}
+
+.feds-profile-name,
+.feds-profile-email {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.feds-profile-name {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--feds-color-profile--emphasis);
+}
+
+.feds-profile-email {
+  margin: 0 0 6px;
+  font-size: 14px;
+  color: var(--feds-color-profile-heading);
+}
+
+.feds-profile-account {
+  margin: 0;
+  font-size: 14px;
+  text-decoration: underline;
+  color: var(--feds-color-profile);
+}
+
+.feds-local-menu {
+  border-top: var(--feds-border-profile);
+  padding: 6px 0;
+}
+
+.feds-local-menu h5 {
+  margin: 0;
+  padding: 8px 20px;
+  color: var(--feds-color-profile-heading);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.5;
+  text-transform: uppercase;
+}
+
+.feds-local-menu p {
+  margin: 0;
+}
+
+.feds-local-menu a,
+.feds-profile-actions a {
+  display: block;
+  color: var(--feds-color-link--light);
+}
+
+.feds-local-menu a:hover,
+.feds-profile-actions a:hover {
+  color: var(--feds-color-link--hover--light);
+  background-color: var(--feds-background-link--hover--light);
+}
+
+.feds-local-menu a {
+  padding: 6px 20px;
+  line-height: 1.4;
+  outline-offset: -1px;
+}
+
+.feds-profile-actions {
+  margin: 0;
+  padding: 0;
+}
+
+.feds-profile-action {
+  padding: 14px 20px;
+  border-top: var(--feds-border-profile);
+}

edsdme/blocks/partners-navigation/features/profile/partners-dropdown.js

@@ -0,0 +1,190 @@
+import { getLibs } from '../../../../scripts/utils.js';
+
+import { getConfig } from '../../../utils/utils.js';
+
+const miloLibs = getLibs();
+
+const { toFragment, getFedsPlaceholderConfig, trigger, closeAllDropdowns, logErrorFor } = await import(`${miloLibs}/blocks/global-navigation/utilities/utilities.js`);
+
+const { replaceKeyArray } = await import(`${miloLibs}/features/placeholders.js`);
+
+const decorateProfileLink = (service, path = '') => {
+  const defaultServiceUrls = {
+    adminconsole: 'https://adminconsole.adobe.com',
+    account: 'https://account.adobe.com',
+  };
+
+  if (!service.length || !defaultServiceUrls[service]) return '';
+
+  let serviceUrl;
+  const { env } = getConfig();
+
+  if (!env?.[service]) {
+    serviceUrl = defaultServiceUrls[service];
+  } else {
+    serviceUrl = new URL(defaultServiceUrls[service]);
+    serviceUrl.hostname = env[service];
+  }
+
+  return `${serviceUrl}${path}`;
+};
+
+const decorateEditProfileLink = () => {
+  const { env } = getConfig();
+  if (env.name === 'prod') {
+    return 'https://channelpartners.adobe.com/s/manageprofile/?appid=mp';
+  }
+  return 'https://channelpartners.stage2.adobe.com/s/manageprofile/?appid=mp';
+};
+
+const decorateAction = (label, path) => toFragment`<li><a class="feds-profile-action" href="${decorateProfileLink('adminconsole', path)}">${label}</a></li>`;
+
+class ProfileDropdown {
+  constructor({
+    rawElem,
+    decoratedElem,
+    avatar,
+    sections,
+    buttonElem,
+    openOnInit,
+  } = {}) {
+    this.placeholders = {};
+    this.profileData = {};
+    this.avatar = avatar;
+    this.buttonElem = buttonElem;
+    this.decoratedElem = decoratedElem;
+    this.sections = sections;
+    this.openOnInit = openOnInit;
+    this.localMenu = rawElem.querySelector('h5')?.parentElement;
+    logErrorFor(this.init.bind(this), 'ProfileDropdown.init()', 'errorType=error,module=gnav-profile');
+  }
+
+  async init() {
+    await this.getData();
+    this.setButtonLabel();
+    this.dropdown = this.decorateDropdown();
+    this.addEventListeners();
+
+    if (this.openOnInit) trigger({ element: this.buttonElem });
+
+    this.decoratedElem.append(this.dropdown);
+  }
+
+  async getData() {
+    [
+      [
+        this.placeholders.profileButton,
+        this.placeholders.signOut,
+        this.placeholders.viewAccount,
+        this.placeholders.manageTeams,
+        this.placeholders.manageEnterprise,
+        this.placeholders.profileAvatar,
+      ],
+      [
+        this.placeholders.editProfile,
+      ],
+      { displayName: this.profileData.displayName, email: this.profileData.email },
+    ] = await Promise.all([
+      replaceKeyArray(
+        ['profile-button', 'sign-out', 'view-account', 'manage-teams', 'manage-enterprise', 'profile-avatar'],
+        getFedsPlaceholderConfig(),
+      ),
+      replaceKeyArray(
+        ['edit-profile'],
+        getConfig(),
+      ),
+      window.adobeIMS.getProfile(),
+    ]);
+  }
+
+  setButtonLabel() {
+    if (this.buttonElem) this.buttonElem.setAttribute('aria-label', this.profileData.displayName);
+  }
+
+  decorateDropdown() {
+    // TODO: the account name and email might need a bit of adaptive behavior;
+    // historically we shrunk the font size and displayed the account name on two lines;
+    // the email had some special logic as well;
+    // for MVP, we took a simpler approach ("Some very long name, very l...")
+    this.avatarElem = toFragment`<img
+      class="feds-profile-img"
+      src="${this.avatar}"
+      tabindex="0"
+      alt="${this.placeholders.profileAvatar}"
+      data-url="${decorateEditProfileLink()}"></img>`;
+    return toFragment`
+      <div id="feds-profile-menu" class="feds-profile-menu">
+        <a
+          href="${decorateEditProfileLink()}"
+          target="_blank"
+          class="feds-profile-header"
+          daa-ll="${this.placeholders.editProfile}"
+          aria-label="${this.placeholders.editProfile}"
+        >
+          ${this.avatarElem}
+          <div class="feds-profile-details">
+            <p class="feds-profile-name">${this.profileData.displayName}</p>
+            <p class="feds-profile-email">${this.decorateEmail(this.profileData.email)}</p>
+            <p class="feds-profile-account">${this.placeholders.editProfile}</p>
+          </div>
+        </a>
+        ${this.localMenu ? this.decorateLocalMenu() : ''}
+        <ul class="feds-profile-actions">
+          ${this.sections?.manage?.items?.team?.id ? decorateAction(this.placeholders.manageTeams, '/team') : ''}
+          ${this.sections?.manage?.items?.enterprise?.id ? decorateAction(this.placeholders.manageEnterprise) : ''}
+          ${this.decorateSignOut()}
+        </ul>
+      </div>
+    `;
+  }
+
+  decorateEmail() {
+    const maxCharacters = 12;
+    const emailParts = this.profileData.email.split('@');
+    const username = emailParts[0].length <= maxCharacters
+      ? emailParts[0]
+      : `${emailParts[0].slice(0, maxCharacters)}…`;
+    const domainArr = emailParts[1].split('.');
+    const tld = domainArr.pop();
+    let domain = domainArr.join('.');
+    domain = domain.length <= maxCharacters
+      ? domain
+      : `${domain.slice(0, maxCharacters)}…`;
+
+    return `${username}@${domain}.${tld}`;
+  }
+
+  decorateLocalMenu() {
+    if (this.localMenu) this.localMenu.classList.add('feds-local-menu');
+
+    return this.localMenu;
+  }
+
+  decorateSignOut() {
+    const signOutLink = toFragment`
+      <li>
+        <a href="#" class="feds-profile-action" daa-ll="${this.placeholders.signOut}">${this.placeholders.signOut}</a>
+      </li>
+    `;
+
+    signOutLink.addEventListener('click', (e) => {
+      e.preventDefault();
+      window.dispatchEvent(new Event('feds:signOut'));
+      window.adobeIMS.signOut();
+    });
+
+    return signOutLink;
+  }
+
+  addEventListeners() {
+    this.buttonElem.addEventListener('click', (e) => trigger({ element: this.buttonElem, event: e }));
+    this.buttonElem.addEventListener('keydown', (e) => e.code === 'Escape' && closeAllDropdowns());
+    this.dropdown.addEventListener('keydown', (e) => e.code === 'Escape' && closeAllDropdowns());
+    this.avatarElem.addEventListener('click', (e) => {
+      e.preventDefault();
+      window.location.assign(this.avatarElem.dataset?.url);
+    });
+  }
+}
+
+export default ProfileDropdown;