Skip to content

Commit c75eaa0

Browse files
AxelcurenoAxelcureno
authored
MWPW-175246: Commerce docs page (#4440)
* Fix sticky CTA block functionality issue * adressed comments * Add spectrum-web-components scripts to commerce documentation * missing swc deps * prettier fix
1 parent 46877b4 commit c75eaa0

File tree

5 files changed

+108
-39
lines changed

5 files changed

+108
-39
lines changed

‎libs/features/mas/docs/commerce.html

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
2+
<!DOCTYPE html>
3+
<html>
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>M@S Web Components</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<link rel="stylesheet" href="spectrum.css">
9+
<link rel="stylesheet" href="styles.css">
10+
<link rel="stylesheet" href="https://p.typekit.net/p.css?s=1&amp;k=hah7vzn&amp;ht=tk&amp;f=7180.7181.7182.7183.22474.22749.22750.22751.22753&amp;a=8634977&amp;app=typekit&amp;e=css">
11+
<link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
12+
13+
<!-- Include your custom element script as an ES6 module -->
14+
<script type="module">
15+
import { init } from './common.js';
16+
init();
17+
</script>
18+
<!-- Include Highlight.js stylesheet for syntax highlighting -->
19+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
20+
<script type="module" src="./mas-sidenav.js"></script>
21+
</head>
22+
<body class="spectrum spectrum--medium spectrum--light">
23+
<aside is="mas-sidenav"></aside>
24+
<main>
25+
<sp-theme color="light" scale="medium">
26+
<script type="module" src="../../../features/spectrum-web-components/dist/theme.js"></script>
27+
<script type="module" src="../../../features/spectrum-web-components/dist/button.js"></script>
28+
<script type="module" src="../../../features/spectrum-web-components/dist/tooltip.js"></script>
29+
<script type="module" src="../../../features/spectrum-web-components/dist/overlay.js"></script>
30+
<script type="module" src="../../../features/spectrum-web-components/dist/popover.js"></script>
31+
<div class="commerce-gallery-content">
32+
<h1 id="commerce-gallery">Commerce Gallery</h1>
33+
<div class="commerce-container">
34+
<h2 id="commerce-plans">Commerce Plans <a class="header-anchor" href="#commerce-plans" title="Permalink to this heading">#</a></h2>
35+
<h3 class="size-header">Featured Commerce Plans</h3>
36+
<div class="four-merch-cards commerce-plans">
37+
<div class="commerce-item">
38+
<merch-card spectrum="swc"><aem-fragment fragment="8bd9c722-8b3c-4c65-b135-7f6a1b84f800"></aem-fragment></merch-card>
39+
<a class="commerce-link" target="_blank" href="https://main--mas--adobecom.aem.live/studio.html?#path=nala&query=8bd9c722-8b3c-4c65-b135-7f6a1b84f800"> Open in Studio</a>
40+
</div>
41+
<div class="commerce-item">
42+
<merch-card spectrum="swc"><aem-fragment fragment="8487f19d-b038-44fa-9db6-0dc55a85b326"></aem-fragment></merch-card>
43+
<a class="commerce-link" target="_blank" href="https://main--mas--adobecom.aem.live/studio.html?#path=nala&query=8487f19d-b038-44fa-9db6-0dc55a85b326"> Open in Studio</a>
44+
</div>
45+
<div class="commerce-item">
46+
<merch-card spectrum="swc"><aem-fragment fragment="a7179d35-1dd2-4f9a-9223-2f8c7062acc7"></aem-fragment></merch-card>
47+
<a class="commerce-link" target="_blank" href="https://main--mas--adobecom.aem.live/studio.html?#path=nala&query=a7179d35-1dd2-4f9a-9223-2f8c7062acc7"> Open in Studio</a>
48+
</div>
49+
<div class="commerce-item">
50+
<merch-card spectrum="swc"><aem-fragment fragment="e243cb07-cb53-439d-bb62-d80f0fd719e5"></aem-fragment></merch-card>
51+
<a class="commerce-link" target="_blank" href="https://main--mas--adobecom.aem.live/studio.html?#path=nala&query=e243cb07-cb53-439d-bb62-d80f0fd719e5"> Open in Studio</a>
52+
</div>
53+
</div>
54+
</div>
55+
</div>
56+
</sp-theme>
57+
</main>
58+
<script type="module">
59+
document.querySelectorAll('code.demo').forEach(el => {
60+
const targetContainer = document.createElement('div');
61+
targetContainer.classList.toggle('light', el.classList.contains('light'));
62+
targetContainer.innerHTML = `<h4>Demo: </h4><div class="demo-container">${el.textContent}</div>`;
63+
el.parentElement.after(targetContainer);
64+
// Extract and evaluate <script> tags
65+
const scriptTags = targetContainer.getElementsByTagName('script');
66+
for (let i = 0; i < scriptTags.length; i++) {
67+
const script = document.createElement('script');
68+
script.type = 'module';
69+
script.text = scriptTags[i].text;
70+
document.body.appendChild(script); // Appends to the document to execute
71+
scriptTags[i].remove(); // Remove the script tag
72+
}
73+
});
74+
</script>
75+
</body>
76+
</html>

‎libs/features/mas/docs/mas-sidenav.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ class MasSidenav extends HTMLElement {
1414
<a href="/libs/features/mas/docs/ccd.html">CCD Gallery</a>
1515
<a href="/libs/features/mas/docs/adobe-home.html">Adobe Home Gallery</a>
1616
<a href="/libs/features/mas/docs/plans.html">Plans Gallery</a>
17+
<a href="/libs/features/mas/docs/commerce.html">Commerce Gallery</a>
1718
<a href="/libs/features/mas/docs/benchmarks.html">Benchmarks</a>
1819
`;
1920
}

‎libs/features/mas/docs/src/build-docs.sh

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,6 @@ node ./build-docs.mjs step-by-step.md ../step-by-step.html
88
node ./build-docs.mjs mas.js.md ../mas.js.html
99
node ./build-docs.mjs merch-card.md ../merch-card.html
1010
node ./build-docs.mjs plans.md ../plans.html
11+
node ./build-docs.mjs commerce.md ../commerce.html
1112
node ./build-docs.mjs ccd.md ../ccd.html
1213
npx esbuild --bundle --outfile=../spectrum.js ./spectrum.mjs

‎libs/features/mas/docs/src/commerce.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script type="module" src="../../../features/spectrum-web-components/dist/theme.js"></script>
2+
<script type="module" src="../../../features/spectrum-web-components/dist/button.js"></script>
3+
<script type="module" src="../../../features/spectrum-web-components/dist/tooltip.js"></script>
4+
<script type="module" src="../../../features/spectrum-web-components/dist/overlay.js"></script>
5+
<script type="module" src="../../../features/spectrum-web-components/dist/popover.js"></script>
6+
<div class="commerce-gallery-content">
7+
<h1 id="commerce-gallery">Commerce Gallery</h1>
8+
<div class="commerce-container">
9+
<h2 id="commerce-plans">Commerce Plans <a class="header-anchor" href="#commerce-plans" title="Permalink to this heading">#</a></h2>
10+
<h3 class="size-header">Featured Commerce Plans</h3>
11+
<div class="four-merch-cards commerce-plans">
12+
<div class="commerce-item">
13+
<merch-card spectrum="swc"><aem-fragment fragment="8bd9c722-8b3c-4c65-b135-7f6a1b84f800"></aem-fragment></merch-card>
14+
<a class="commerce-link" target="_blank" href="https://main--mas--adobecom.aem.live/studio.html?#path=nala&query=8bd9c722-8b3c-4c65-b135-7f6a1b84f800"> Open in Studio</a>
15+
</div>
16+
<div class="commerce-item">
17+
<merch-card spectrum="swc"><aem-fragment fragment="8487f19d-b038-44fa-9db6-0dc55a85b326"></aem-fragment></merch-card>
18+
<a class="commerce-link" target="_blank" href="https://main--mas--adobecom.aem.live/studio.html?#path=nala&query=8487f19d-b038-44fa-9db6-0dc55a85b326"> Open in Studio</a>
19+
</div>
20+
<div class="commerce-item">
21+
<merch-card spectrum="swc"><aem-fragment fragment="a7179d35-1dd2-4f9a-9223-2f8c7062acc7"></aem-fragment></merch-card>
22+
<a class="commerce-link" target="_blank" href="https://main--mas--adobecom.aem.live/studio.html?#path=nala&query=a7179d35-1dd2-4f9a-9223-2f8c7062acc7"> Open in Studio</a>
23+
</div>
24+
<div class="commerce-item">
25+
<merch-card spectrum="swc"><aem-fragment fragment="e243cb07-cb53-439d-bb62-d80f0fd719e5"></aem-fragment></merch-card>
26+
<a class="commerce-link" target="_blank" href="https://main--mas--adobecom.aem.live/studio.html?#path=nala&query=e243cb07-cb53-439d-bb62-d80f0fd719e5"> Open in Studio</a>
27+
</div>
28+
</div>
29+
</div>
30+
</div>

0 commit comments

Comments
 (0)