MWPW-165520: Adobe Home 'Single Plan' merch card

adobecom · Jan 17, 2025 · aae89dd · aae89dd
1 parent 6eb0401
commit aae89dd
Show file tree

Hide file tree

Showing 8 changed files with 869 additions and 268 deletions.
diff --git a/libs/deps/mas/mas.js b/libs/deps/mas/mas.js
diff --git a/libs/deps/mas/merch-card.js b/libs/deps/mas/merch-card.js
diff --git a/libs/features/mas/dist/mas.js b/libs/features/mas/dist/mas.js
diff --git a/libs/features/mas/docs/adobe-home.html b/libs/features/mas/docs/adobe-home.html
@@ -0,0 +1,126 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <title>Adobe Home Gallery</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="stylesheet" href="styles.css" />
+        <link
+            rel="stylesheet"
+            href="https://p.typekit.net/p.css?s=1&k=hah7vzn&ht=tk&f=7180.7181.7182.7183.22474.22749.22750.22751.22753&a=8634977&app=typekit&e=css"
+        />
+        <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css" />
+        <script src="/libs/deps/lit-all.min.js" type="module"></script>
+
+        <script>
+            const ENVS = {
+                qa: 'qa-odin',
+                stage: 'stage-odin',
+                prod: 'odin',
+            };
+            const href = window.location.href;
+            const envOverride = new URL(href).searchParams.get('aem.env');
+            const env =
+                envOverride && ENVS[envOverride]
+                    ? ENVS[envOverride]
+                    : ENVS.prod;
+            const meta = document.createElement('meta');
+            meta.name = 'aem-base-url';
+            meta.content = `https://${env}.adobe.com`;
+            document.head.appendChild(meta);
+
+            const params = new URLSearchParams(document.location.search);
+            function toggleTheme(theme) {
+                document
+                    .querySelectorAll('sp-theme')
+                    .forEach((el) => el.remove());
+
+                const spTheme = document.createElement('sp-theme');
+                spTheme.setAttribute('theme', 'spectrum');
+                spTheme.setAttribute('color', theme);
+                spTheme.setAttribute('scale', 'medium');
+
+                document.body.appendChild(spTheme);
+            }
+
+            document.addEventListener('DOMContentLoaded', () => {
+                toggleTheme('light');
+
+                setTimeout(() => {
+                    toggleTheme('darkest');
+                }, 5000);
+            });
+        </script>
+
+        <script
+            src="../../../features/spectrum-web-components/dist/shared.js"
+            type="module"
+        ></script>
+        <script
+            src="../../../features/spectrum-web-components/dist/button.js"
+            type="module"
+        ></script>
+        <script
+            src="../../../features/spectrum-web-components/dist/base.js"
+            type="module"
+        ></script>
+        <script type="module" src="../dist/mas.js"></script>
+
+        <script type="module">
+            // 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);
+            });
+            masCommerceService.setAttribute('host-env', 'prod');
+            masCommerceService.setAttribute('lana-tags', 'ah');
+            masCommerceService.setAttribute('lana-sample-rate', '100'); // optional, default value is set to '1'
+            document.head.appendChild(masCommerceService);
+        </script>
+    </head>
+
+    <body class="spectrum spectrum--medium spectrum--light">
+        <main>
+            <div class="gallery-content">
+                <h1 id="ah-gallery" tabindex="-1">
+                    Adobe Home Gallery
+                    <a
+                        class="header-anchor"
+                        href="#ah-gallery"
+                        title="Permalink to this heading"
+                        >#</a
+                    >
+                </h1>
+                <!--
+        ToDo: Implement theme switch once dark theme designs are ready
+        Switch Theme: <a class="spectrum-Link pectrum-Link--secondary" href="javascript:toggleTheme('darkest');">Darkest</a> OR <a class="spectrum-Link pectrum-Link--secondary" href="javascript:toggleTheme('light');">Light</a> -->
+
+                <div class="adobe-home-container">
+                    <h2 id="ah-single-plan" tabindex="-1">
+                        Adobe Home Single Plan
+                        <a
+                            class="header-anchor"
+                            href="#ah-single-plan"
+                            title="Permalink to this heading"
+                            >#</a
+                        >
+                    </h2>
+                    <div class="three-merch-cards ah-single-plan">
+                        <merch-card
+                            ><aem-fragment
+                                fragment="d61c8b50-184c-40af-be3e-87ad3990ebcf"
+                            ></aem-fragment
+                        ></merch-card>
+                    </div>
+                </div>
+            </div>
+        </main>
+        <script>
+            const theme = params.get('theme');
+            if (theme) toggleTheme(theme);
+        </script>
+    </body>
+</html>