Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MWPW-153237: Test content for CCD validation #3040

Merged
merged 4 commits into from
Oct 23, 2024
Merged

MWPW-153237: Test content for CCD validation #3040

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6bfa3e9
MWPW-153237: Test content for CCD validation
3ch023 Oct 15, 2024
aa94928
review comments
3ch023 Oct 15, 2024
37728f9
Merge remote-tracking branch 'upstream/stage' into ccd-gallery
3ch023 Oct 22, 2024
7e0c053
fix merge
3ch023 Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 91 additions & 0 deletions libs/features/mas/docs/ccd.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: it would be good to add title="Actual Product Title". It would help whom reads the MD file or updates it.

Copy link
Contributor Author

@3ch023 3ch023 Oct 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

some of cards have no title though (and some have the same title)
I was just using the copy markup function of studio

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't need to be matching with the exact title.
It is more descriptive, like cc, photoshop, illustrator.
I think as a best practice we should adopt it, maybe I'm wrong.

<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>
1 change: 1 addition & 0 deletions libs/features/mas/docs/mas.js.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,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" tabindex="-1">Enablement <a class="header-anchor" href="#enablement" href="#enablement" title="Permalink to this heading">#</a></h2>
<p>Add the following script in your document <code>head</code> element.</p>
Expand Down
37 changes: 34 additions & 3 deletions libs/features/mas/docs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ main {

sp-theme {
width: 100%;
max-width: 1100px;
max-width: 1200px;
font-family:
var(
--mod-body-sans-serif-font-family,
Expand Down Expand Up @@ -80,7 +80,7 @@ tr:nth-child(even) {
padding: 0 10px;
}

.placeholder-failed::after {
span.placeholder-failed::after {
content: "failed";
}

Expand All @@ -105,6 +105,37 @@ pre {
background-color: var(--spectrum-global-color-gray-100);
}

#log {
#log,
#log2,
#log3 {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this section is probably not part of your PR but that's okay, in the ccd branch for the rest of the docs it is needed.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ho, true. copy paste from ccd state..

display: block;
}

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;
}
1 change: 1 addition & 0 deletions libs/features/mas/mas/mas.js.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
22 changes: 20 additions & 2 deletions libs/features/spectrum-web-components/build.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
*/
Expand Down Expand Up @@ -97,8 +99,7 @@ build({
});

mods.forEach((mod) => {
if (mod === 'lit.js') return;
if (mod === 'polyfills') return;
if (mod === 'lit.js' || mod === 'polyfills' || mod === 'themes') return;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: if (['lit.js', 'polyfills', 'themes']).indexOf(mod) > -1 return;

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah right, i remember i promised
will change to ['lit.js', 'polyfills', 'themes'].includes(mod), good?

build({
define: DEFINE,
bundle: true,
Expand Down Expand Up @@ -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`,
});
});
10 changes: 10 additions & 0 deletions libs/features/spectrum-web-components/dist/themes/dark.js
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ [eslint] reported by reviewdog 🐶
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

Large diffs are not rendered by default.

10 changes: 10 additions & 0 deletions libs/features/spectrum-web-components/dist/themes/light.js
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ [eslint] reported by reviewdog 🐶
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions libs/features/spectrum-web-components/src/themes/dark.js
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ [eslint] reported by reviewdog 🐶
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

Original file line number Diff line number Diff line change
@@ -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';
4 changes: 4 additions & 0 deletions libs/features/spectrum-web-components/src/themes/light.js
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ [eslint] reported by reviewdog 🐶
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

Original file line number Diff line number Diff line change
@@ -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';
Loading