MWPW-153237: Test content for CCD validation (#3040)

* MWPW-153237: Test content for CCD validation * review comments * fix merge
adobecom · Oct 23, 2024 · c67ab1b · c67ab1b
1 parent 55d31ee
commit c67ab1b
Show file tree

Hide file tree

Showing 9 changed files with 167 additions and 3 deletions.
diff --git a/libs/features/mas/docs/ccd.html b/libs/features/mas/docs/ccd.html
@@ -0,0 +1,91 @@
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>CCD Gallery</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <script>
+      if (/localhost/.test(window.location.host)) {
+        const meta = document.createElement('meta');
+        meta.name = 'aem-base-url';
+        meta.content = 'http://localhost:8080'; // local AEM proxy URL
+        document.head.appendChild(meta);
+      }
+    </script>
+    <!-- Include your custom element script as an ES6 module -->
+    <script src="../../../features/spectrum-web-components/dist/button.js" type="module"></script>
+    <script type="module" src="../../../deps/mas/mas.js"></script>
+
+    <script type="module">
+      const params = new URLSearchParams(document.location.search);
+      // theme
+      const darkTheme = params?.get('theme')?.toLowerCase() === 'dark';
+      const theme = document.createElement('script');
+      theme.setAttribute('src', `../../../features/spectrum-web-components/dist/themes/${darkTheme ? 'dark' : 'light'}.js`);
+      theme.setAttribute('type', `module`);
+      document.head.appendChild(theme);
+      // mas-commerce-service
+      const masCommerceService = document.createElement('mas-commerce-service');
+      ['locale','language','env'].forEach((attribute) => {
+        const value = params.get(attribute);
+        if (value) masCommerceService.setAttribute(attribute, value);
+      });
+      document.head.appendChild(masCommerceService);
+    </script>
+    <link rel="stylesheet" href="../../../styles/styles.css">
+    <!-- Include any additional stylesheets -->
+    <link rel="stylesheet" href="styles.css">
+  </head>
+
+  <body>
+    <main>
+      <sp-theme color="light" scale="medium"> 
+        <div class="gallery-content">
+          <div class="vpn-banner">
+            Please enable VPN
+          </div>
+
+          <h1 id="ccd-gallery" tabindex="-1">CCD Gallery <a class="header-anchor" href="#ccd-gallery" href="#ccd-gallery" title="Permalink to this heading">#</a></h1>
+          Switch Theme: <a href="?theme=dark">Dark</a> OR <a href="?theme=light">Light</a>
+
+          <h2 id="ccd-slice-card" tabindex="-1">CCD Slice Card <a class="header-anchor" href="#ccd-slice-card" href="#ccd-slice-card" title="Permalink to this heading">#</a></h2>
+          <div class="gallery-grid-3">
+            <h5>Percentage</h5>
+            <h5>Two icons & pricing</h5>
+            <h5>See Terms link</h5>
+            <merch-card><aem-fragment fragment="0ef2a804-e788-4959-abb8-b4d96a18b0ef"></aem-fragment></merch-card>
+            <merch-card><aem-fragment fragment="58c7906f-70a6-4e2b-bc29-257ff2ade513"></aem-fragment></merch-card>
+            <merch-card><aem-fragment fragment="51c23f28-504f-450d-9764-0e60f1e279b2"></aem-fragment></merch-card>
+            <merch-card><aem-fragment fragment="2a293069-1f9a-45ae-9840-2fa0303fe685"></aem-fragment></merch-card>
+          </div>
+
+          <h2 id="ccd-slice-wide-card" tabindex="-1">CCD Slice Wide Card <a class="header-anchor" href="#ccd-slice-wide-card" href="#ccd-slice-wide-card" title="Permalink to this heading">#</a></h2>
+          <div>
+            <merch-card><aem-fragment fragment="bdf40d06-5914-4f1f-aa10-77c5676fe671"></aem-fragment></merch-card>
+          </div>
+
+          <h2 id="ccd-suggested-card" tabindex="-1">CCD Suggested Card <a class="header-anchor" href="#ccd-suggested-card" href="#ccd-suggested-card" title="Permalink to this heading">#</a></h2>
+          <div class="gallery-grid-3">
+            <h5>With eyebrow</h5>
+            <h5>See Terms link</h5>
+            <h5>No eyebrow, price with term</h5>
+            <merch-card><aem-fragment fragment="0a2ac7c9-1965-488e-beca-856849305313"></aem-fragment></merch-card>
+            <merch-card><aem-fragment fragment="549f6981-f5c8-4512-b41c-313d60f375b2"></aem-fragment></merch-card>
+            <merch-card><aem-fragment fragment="8b198434-f32d-4a77-8be0-cd6b9f7155b1"></aem-fragment></merch-card>
+            <merch-card><aem-fragment fragment="cdfae8c5-4129-43bc-a283-9ce46d07e21f"></aem-fragment></merch-card>
+            <merch-card><aem-fragment fragment="33c8f437-3c39-48cc-8afd-938a13af5732"></aem-fragment></merch-card>
+            <merch-card><aem-fragment fragment="45783ec8-ed85-4595-a445-3f018ac4ad9d"></aem-fragment></merch-card>
+            <merch-card><aem-fragment fragment="6217fb6d-e793-4235-af70-6f82401fc5de"></aem-fragment></merch-card>
+          </div>
+        </div>
+      </sp-theme>
+      <script type="module">
+        if (new URLSearchParams(document.location.search)?.get('theme')?.toLowerCase() === 'dark') {
+          document.querySelectorAll('sp-theme').forEach((theme) => theme.setAttribute('color', 'dark'));
+        }
+      </script>
+    </main>
+  </body>
+</html>
diff --git a/libs/features/mas/docs/mas.js.html b/libs/features/mas/docs/mas.js.html
@@ -46,6 +46,7 @@ <h2 id="introduction" tabindex="-1">Introduction <a class="header-anchor" href="
 <li><a href="/libs/features/mas/docs/inline-price.html">inline-price</a></li>
 <li><a href="/libs/features/mas/docs/checkout-link.html">checkout-link</a></li>
 <li><a href="/libs/features/mas/docs/merch-card.html">merch-card</a></li>
+<li><a href="/libs/features/mas/docs/ccd.html">CCD Gallery</a></li>
 </ul>
 <h2 id="enablement-mas-commerce-service" tabindex="-1">Enablement <code>mas-commerce-service</code> <a class="header-anchor" href="#enablement-mas-commerce-service" href="#enablement-mas-commerce-service" title="Permalink to this heading">#</a></h2>
 <p>You do need to have mas.js on your page / application, including it can be done like the following</p>

diff --git a/libs/features/mas/docs/styles.css b/libs/features/mas/docs/styles.css
@@ -6,7 +6,7 @@ main {
 
 sp-theme {
   width: 100%;
-  max-width: 1100px;
+  max-width: 1200px;
   font-family:
     var(
       --mod-body-sans-serif-font-family,
@@ -114,3 +114,28 @@ pre {
 button {
   margin-top: 16px;
 }
+
+.gallery-content {
+  background-color: var(--spectrum-gray-100);
+  color: var(--spectrum-gray-800);
+  padding: 30px;
+}
+
+.gallery-grid-3 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); /* 3 cards per row */
+  gap: 20px;
+  margin: 0 auto;
+}
+
+.vpn-banner {
+  background-color: #f8d7da; /* Light red */
+  color: #721c24; /* Dark red text */
+  padding: 15px;
+  text-align: center;
+  border: 1px solid #f5c6cb;
+  border-radius: 5px;
+  font-family: Arial, sans-serif;
+  font-size: 18px;
+  margin-bottom: 20px;
+}
diff --git a/libs/features/mas/mas/mas.js.md b/libs/features/mas/mas/mas.js.md
@@ -9,6 +9,7 @@ mas.js includes the followings custom elements:
 -   [inline-price](/libs/features/mas/docs/inline-price.html)
 -   [checkout-link](/libs/features/mas/docs/checkout-link.html)
 -   [merch-card](/libs/features/mas/docs/merch-card.html)
+-   [CCD Gallery](/libs/features/mas/docs/ccd.html)
 
 ## Enablement `mas-commerce-service`
 

diff --git a/libs/features/spectrum-web-components/build.mjs b/libs/features/spectrum-web-components/build.mjs
@@ -15,6 +15,8 @@ const ICONS = [
   'corner-triangle',
 ];
 
+const THEMES = ['dark', 'light'];
+
 /**
  * Mapping of modules that contain multiple components (e.g: sp-clear-button is included in button.js)
  */
@@ -97,8 +99,7 @@ build({
 });
 
 mods.forEach((mod) => {
-  if (mod === 'lit.js') return;
-  if (mod === 'polyfills') return;
+  if (['lit.js', 'polyfills', 'themes'].includes(mod)) return;
   build({
     define: DEFINE,
     bundle: true,
@@ -133,3 +134,20 @@ ICONS.forEach((icon) => {
     outfile: `./dist/icons/${icon}.js`,
   });
 });
+
+THEMES.forEach((theme) => {
+  console.log(`./src/themes/${theme}.js`);
+  build({
+    define: DEFINE,
+    bundle: true,
+    banner: { js: BANNER },
+    entryPoints: [`./src/themes/${theme}.js`],
+    platform: 'browser',
+    format: 'esm',
+    sourcemap: false,
+    legalComments: 'none',
+    target: TARGET,
+    minify: true,
+    outfile: `./dist/themes/${theme}.js`,
+  });
+});
diff --git a/libs/features/spectrum-web-components/dist/themes/dark.js b/libs/features/spectrum-web-components/dist/themes/dark.js
diff --git a/libs/features/spectrum-web-components/dist/themes/light.js b/libs/features/spectrum-web-components/dist/themes/light.js
diff --git a/libs/features/spectrum-web-components/src/themes/dark.js b/libs/features/spectrum-web-components/src/themes/dark.js
@@ -0,0 +1,4 @@
+import '@spectrum-web-components/theme/sp-theme.js';
+import '@spectrum-web-components/theme/theme-dark.js';
+import '@spectrum-web-components/theme/scale-medium.js';
+export * from '@spectrum-web-components/theme';
diff --git a/libs/features/spectrum-web-components/src/themes/light.js b/libs/features/spectrum-web-components/src/themes/light.js
@@ -0,0 +1,4 @@
+import '@spectrum-web-components/theme/sp-theme.js';
+import '@spectrum-web-components/theme/theme-light.js';
+import '@spectrum-web-components/theme/scale-medium.js';
+export * from '@spectrum-web-components/theme';