Merge branch 'adobecom:main' into main

suhjainadobe · Jan 16, 2024 · c7801a6 · c7801a6
2 parents 8a47ef0 + b5b41ad
commit c7801a6
Show file tree

Hide file tree

Showing 36 changed files with 6,944 additions and 19 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -31,4 +31,7 @@ module.exports = {
   plugins: [
     'chai-friendly',
   ],
+  ignorePatterns: [
+    '/creativecloud/deps/*',
+  ],
 };
diff --git a/.github/workflows/run-lint.yaml b/.github/workflows/run-lint.yaml
@@ -0,0 +1,27 @@
+name: Lint
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+    paths:
+      - '**.js'
+
+jobs:
+  run-lint:
+    name: Running eslint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run eslint on changed files
+        uses: tj-actions/eslint-changed-files@v20
+        with:
+          config_path: ".eslintrc.js"
+          # ignore_path: "/path/to/.eslintignore"
+          # extra_args: "--max-warnings=0"
diff --git a/.github/workflows/run-tests.yaml b/.github/workflows/run-tests.yaml
@@ -1,4 +1,4 @@
-name: Unit Tests and Linting
+name: Unit Tests
 on:
   push:
     branches:
@@ -32,9 +32,6 @@ jobs:
 
     - name: Install dependencies
       run: npm install
-
-    - name: Run the linter
-      run: npm run lint  
 
     - name: Run the tests
       run: xvfb-run -a npm test

diff --git a/404.html b/404.html
@@ -4,6 +4,9 @@
 <head>
   <title>404</title>
   <meta name="template" content="404" />
+  <meta name="404" content="feds" />
+  <meta name="header" content="global-navigation" />
+  <meta name="footer" content="global-footer" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <script src="/creativecloud/scripts/scripts.js" type="module"></script>
   <link rel="icon" href="data:," />

diff --git a/creativecloud/blocks/interactive-marquee/interactive-marquee.css b/creativecloud/blocks/interactive-marquee/interactive-marquee.css
@@ -0,0 +1 @@
+/* Interactive-marquee common css */
diff --git a/creativecloud/blocks/interactive-marquee/interactive-marquee.js b/creativecloud/blocks/interactive-marquee/interactive-marquee.js
@@ -0,0 +1,101 @@
+import { getLibs } from '../../scripts/utils.js';
+
+// [headingSize, bodySize, detailSize, titlesize]
+const typeSizes = ['xxl', 'xl', 'l', 'xs'];
+
+function decorateText(el, createTag) {
+  const headings = el.querySelectorAll('h1, h2, h3, h4, h5, h6');
+  const heading = headings[headings.length - 1];
+  const config = typeSizes;
+  const decorate = (headingEl, typeSize) => {
+    headingEl.classList.add(`heading-${typeSize[0]}`);
+    const bodyEl = headingEl.nextElementSibling;
+    bodyEl?.classList.add(`body-${typeSize[1]}`);
+    bodyEl?.nextElementSibling?.classList.add(`body-${typeSize[1]}`, 'pricing');
+    const sib = headingEl.previousElementSibling;
+    if (sib) {
+      const className = sib.querySelector('img, .icon') ? 'icon-area' : `detail-${typeSize[2]}`;
+      sib.classList.add(className);
+      sib.previousElementSibling?.classList.add('icon-area');
+    }
+    const iconAreaElements = el.querySelector('.icon-area');
+    const iconText = createTag('div', { class: `heading-${typeSize[3]} icon-text` });
+    iconAreaElements.appendChild(iconText);
+    iconAreaElements?.classList.add('icon-area');
+    iconText.innerText = (iconAreaElements.textContent.trim());
+    iconText.previousSibling.textContent = '';
+  };
+  decorate(heading, config);
+}
+
+function extendButtonsClass(text) {
+  const buttons = text.querySelectorAll('.con-button');
+  if (buttons.length === 0) return;
+  buttons.forEach((button) => { button.classList.add('button-justified-mobile'); });
+}
+
+function interactiveInit(el, decorateButtons, decorateBlockBg, createTag) {
+  const isLight = el.classList.contains('light');
+  if (!isLight) el.classList.add('dark');
+  const children = el.querySelectorAll(':scope > div');
+  const foreground = children[children.length - 1];
+  if (children.length > 1) {
+    children[0].classList.add('background');
+    decorateBlockBg(el, children[0], { useHandleFocalpoint: true });
+  }
+  foreground.classList.add('foreground', 'container');
+  const headline = foreground.querySelector('h1, h2, h3, h4, h5, h6');
+  const text = headline.closest('div');
+  text.classList.add('text');
+  const mediaElements = foreground.querySelectorAll(':scope > div:not([class])');
+  const media = mediaElements[0];
+  if (media) {
+    const interactiveBox = createTag('div', { class: 'interactive-container' });
+    mediaElements.forEach((mediaDiv) => {
+      mediaDiv.classList.add('media');
+      interactiveBox.appendChild(mediaDiv);
+    });
+    foreground.appendChild(interactiveBox);
+  }
+
+  const firstDivInForeground = foreground.querySelector(':scope > div');
+  if (firstDivInForeground?.classList.contains('media')) el.classList.add('row-reversed');
+
+  decorateButtons(text, 'button-xl');
+  decorateText(text, createTag);
+  extendButtonsClass(text);
+}
+
+export default async function init(el) {
+  const miloLibs = getLibs('/libs');
+  const { decorateButtons, decorateBlockBg } = await import(`${miloLibs}/utils/decorate.js`);
+  const { createTag, loadStyle } = await import(`${miloLibs}/utils/utils.js`);
+  switch (true) {
+    case el.classList.contains('changebg'): {
+      const { default: changeBg } = await import('../../features/changeBg/changeBg.js');
+      changeBg(el);
+      break;
+    }
+    case el.classList.contains('genfill'): {
+      loadStyle('/creativecloud/blocks/interactive-marquee/milo-marquee.css');
+      loadStyle('/creativecloud/features/genfill/genfill-interactive.css');
+      interactiveInit(el, decorateButtons, decorateBlockBg, createTag);
+      const { default: decorateGenfill } = await import('../../features/genfill/genfill-interactive.js');
+      await decorateGenfill(el, { createTag });
+      break;
+    }
+    case el.classList.contains('firefly'): {
+      loadStyle('/creativecloud/blocks/interactive-marquee/milo-marquee.css');
+      loadStyle('/creativecloud/features/interactive-elements/interactive-elements.css');
+      loadStyle('/creativecloud/features/firefly/firefly-interactive.css');
+      interactiveInit(el, decorateButtons, decorateBlockBg, createTag);
+      const { default: setInteractiveFirefly } = await import('../../features/firefly/firefly-interactive.js');
+      await setInteractiveFirefly(el);
+      break;
+    }
+    default:
+      loadStyle('/creativecloud/blocks/interactive-marquee/milo-marquee.css');
+      interactiveInit(el, decorateButtons, decorateBlockBg, createTag);
+      break;
+  }
+}
diff --git a/creativecloud/blocks/interactive-marquee/milo-marquee.css b/creativecloud/blocks/interactive-marquee/milo-marquee.css
@@ -0,0 +1,192 @@
+.interactive-marquee {
+  position: relative;
+  color: var(--color-white);
+  display: flex;
+  flex-direction: column;
+}
+
+.interactive-marquee.light {
+  color: var(--text-color);
+}
+
+.interactive-marquee .foreground {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-m);
+  padding: var(--spacing-xxl) 0;
+}
+
+.interactive-marquee .interactive-container {
+  height: 300px;
+  width: 300px;
+  margin: 0 auto;
+  border: 4px;
+}
+
+.interactive-marquee .media {
+  max-width: 300px;
+  position: relative;
+}
+
+.interactive-marquee .text {
+  display: flex;
+  flex-direction: column;
+  margin: 0 0 0 auto;
+  order: 2;
+}
+
+[dir="rtl"] .interactive-marquee .text {
+  margin: 0 auto 0 0;
+}
+
+.interactive-marquee .text p:last-of-type {
+  margin-bottom: 0;
+}
+
+.interactive-marquee .text .detail-l,
+.interactive-marquee .text .heading-xl,
+.interactive-marquee .text .heading-xxl {
+  margin-bottom: var(--spacing-xs);
+}
+
+.interactive-marquee .icon-area {
+  display: flex;
+  margin-bottom: var(--spacing-s);
+  margin-top: 0;
+}
+
+.interactive-marquee .icon-text {
+  margin: auto var(--spacing-xs);
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 22.5px;
+  font-style: normal;
+}
+
+.interactive-marquee .icon-area picture,
+.interactive-marquee .icon-area a {
+  display: contents;
+}
+
+.interactive-marquee .icon-area img {
+  height: 40px;
+  width: auto;
+  display: block;
+}
+
+.interactive-marquee .pricing {
+  margin-top: var(--spacing-xs);
+}
+
+.interactive-marquee .action-area {
+  display: flex;
+  margin: 0;
+  gap: var(--spacing-s);
+  flex-flow: column wrap;
+  align-items: stretch;
+  padding: var(--spacing-s) 0 0;
+}
+
+.interactive-marquee .text .action-area {
+  margin-bottom: var(--spacing-s);
+}
+
+.interactive-marquee .text .supplemental-text {
+  margin-bottom: var(--spacing-s);
+  font-weight: 700;
+}
+
+.interactive-marquee .background img {
+  object-fit: cover;
+  height: 100%;
+  width: 100%;
+}
+
+.interactive-marquee .background .tablet-only,
+.interactive-marquee .background .desktop-only {
+  display: none;
+}
+
+.interactive-marquee .background picture {
+  display: block;
+  position: absolute;
+  inset: 0;
+  line-height: 0;
+}
+
+@media screen and (min-width: 600px) {
+  .interactive-marquee .background .mobile-only,
+  .interactive-marquee .background .desktop-only {
+    display: none;
+  }
+
+  .interactive-marquee .background .tablet-only {
+    display: block;
+  }
+
+  .interactive-marquee .interactive-container {
+    height: 604px;
+    width: 569px;
+  }
+
+  .interactive-marquee .media {
+    max-width: 569px;
+    top: 35px;
+  }
+
+  .interactive-marquee .action-area {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-s);
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .interactive-marquee .background .mobile-only,
+  .interactive-marquee .background .tablet-only {
+    display: none;
+  }
+
+  .interactive-marquee .background .desktop-only {
+    display: block;
+  }
+
+  .interactive-marquee {
+    min-height: 700px;
+    flex-direction: row;
+  }
+
+  .interactive-marquee .foreground {
+    padding: 0;
+    gap: 100px;
+    flex-direction: row;
+    align-items: center;
+    order: unset;
+    width: 100%;
+  }
+
+  .interactive-marquee .interactive-container {
+    order: unset;
+    width: 50%;
+    height: 100%;
+    margin: 0;
+  }
+
+  .interactive-marquee .media {
+    top: 91px;
+    margin: 0 auto;
+  }
+
+  .interactive-marquee .supplemental-text {
+    margin: var(--spacing-s) 0 0 0;
+  }
+
+  .interactive-marquee .text {
+    padding: var(--spacing-xl) 0;
+    order: unset;
+    display: block;
+    max-width: 500px;
+  }
+}
diff --git a/creativecloud/deps/interactive-marquee-changebg/81b9f6a0.js b/creativecloud/deps/interactive-marquee-changebg/81b9f6a0.js