Skip to content

Commit 5a5c8b6

Browse files
duboispduboisp
committed
Add GCDS loader and GCDS card example for co-existance tested version
1 parent 0d781a0 commit 5a5c8b6

18 files changed

Lines changed: 935 additions & 1 deletion

‎Gruntfile.coffee‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,8 @@ module.exports = (grunt) ->
220220
"copy:fonts"
221221
"copy:wetboew"
222222
"copy:depsJS_custom"
223+
"copy:gcdsLoader"
224+
"usebanner:gcdsLoader"
223225
]
224226
)
225227

@@ -583,6 +585,7 @@ module.exports = (grunt) ->
583585
"!{sites,common,components,templates,design-patterns,wet-boew}/**/assets"
584586
"!{sites,common,components,templates,design-patterns,wet-boew}/**/demo"
585587
"!{sites,common,components,templates,design-patterns,wet-boew}/**/demos"
588+
"!sites/gcdsloader.js"
586589
]
587590
dest: "<%= themeDist %>/js/theme.js"
588591
common:
@@ -666,6 +669,22 @@ module.exports = (grunt) ->
666669
"<%= themeDist %>/css/*.*",
667670
"<%= themeDist %>/méli-mélo/*.css"
668671
]
672+
673+
gcdsLoader:
674+
options:
675+
position: "replace"
676+
props:
677+
ver: "<%= pkg.peerDependencies[ '@cdssnc/gcds-components' ] %>"
678+
srijs: "<%= pkg[ 'io.github.wet-boew' ].gcdsSriJs %>"
679+
sricss: "<%= pkg[ 'io.github.wet-boew' ].gcdsSriCss %>"
680+
replace: (fileContents, newBanner, insertPositionMarker, src, options) ->
681+
# Replace GCDS version and SRIs in the source file
682+
return fileContents
683+
.replace( "@gcdsComponentVersion@", options.props.ver )
684+
.replace( "@gcdsSriJs@", options.props.srijs )
685+
.replace( "@gcdsSriCss@", options.props.sricss )
686+
src: "<%= themeDist %>/js/gcdsloader.js"
687+
669688
#
670689
# Use the name in the package.json as packageName in the theme
671690
# used to build the URL and to ease the reuse of this build script for derivative themes
@@ -839,6 +858,11 @@ module.exports = (grunt) ->
839858
cwd: "<%= themeDist %>/deps-js"
840859
src: "**/*.*"
841860
dest: "dist/wet-boew/js/deps"
861+
gcdsLoader:
862+
expand: true
863+
flatten: true
864+
src: "sites/gcdsloader.js"
865+
dest: "<%= themeDist %>/js"
842866

843867
wetboew_demos:
844868
expand: true

‎_data/components.json‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2326,6 +2326,182 @@
23262326
]
23272327
}
23282328
}
2329+
,{
2330+
"@context": {
2331+
"@version": 1.1,
2332+
"dct": "http://purl.org/dc/terms/",
2333+
"title": { "@id": "dct:title", "@container": "@language" },
2334+
"description": { "@id": "dct:description", "@container": "@language" },
2335+
"modified": "dct:modified"
2336+
},
2337+
"title": {
2338+
"en": "GCDS card",
2339+
"fr": "Carte GCDS"
2340+
},
2341+
"description": {
2342+
"en": "Co-existence pilot of the GCDSs card in GCWeb.",
2343+
"fr": "Pilote de co-existance des cartes GCDS dans GCWeb."
2344+
},
2345+
"modified": "2025-07-04",
2346+
"componentName": "gcds-card",
2347+
"status": "provisional",
2348+
"version": "1.0",
2349+
"pages": {
2350+
"examples": [
2351+
{
2352+
"title": "GCDS card",
2353+
"language": "en",
2354+
"path": "card-en.html"
2355+
},
2356+
{
2357+
"title": "Carte GCDS",
2358+
"language": "fr",
2359+
"path": "card-fr.html"
2360+
}
2361+
],
2362+
"docs": [
2363+
{
2364+
"title": "GCDS card",
2365+
"language": "en",
2366+
"path": "card-doc-en.html"
2367+
},
2368+
{
2369+
"title": "Carte GCDS",
2370+
"language": "fr",
2371+
"path": "card-doc-fr.html"
2372+
}
2373+
],
2374+
"test": [
2375+
{
2376+
"title": "GCDS Card with images",
2377+
"language": "en",
2378+
"path": "withimg-en.html"
2379+
},
2380+
{
2381+
"title": "Carte GCDS avec images",
2382+
"language": "fr",
2383+
"path": "withimg-fr.html"
2384+
},
2385+
{
2386+
"title": "GCDS Card as implemented in MWS",
2387+
"language": "en",
2388+
"path": "mws-en.html"
2389+
},
2390+
{
2391+
"title": "Carte GCDS tel que l'implémentation dans le système web géré",
2392+
"language": "fr",
2393+
"path": "mws-fr.html"
2394+
},
2395+
{
2396+
"title": "GCDS Card like as implemented in MWS (without workaround)",
2397+
"language": "en",
2398+
"path": "mws-no-workaround-en.html"
2399+
},
2400+
{
2401+
"title": "Carte GCDS similaire à l'implémentation dans le système web géré (sans contournement)",
2402+
"language": "fr",
2403+
"path": "mws-no-workaround-fr.html"
2404+
}
2405+
]
2406+
},
2407+
"a11yGuidance": "no accessibility guidance",
2408+
"variations": [
2409+
{
2410+
"name": {
2411+
"en": "GCDS Card - default",
2412+
"fr": "Carte GCDS - par défaut"
2413+
},
2414+
"status": "provisional",
2415+
"description": {
2416+
"en": "Co-existence pilot of the GCDS card in GCWeb.",
2417+
"fr": "Pilote de co-existance de la carte GCDS dans GCWeb."
2418+
},
2419+
"iteration": "_:implement_card",
2420+
"example": [
2421+
{
2422+
"en": { "href": "card-en.html", "text": "GCDS Card" },
2423+
"fr": { "href": "card-fr.html", "text": "Carte GCDS" }
2424+
}
2425+
],
2426+
"implementation": [
2427+
"_:implement_card"
2428+
],
2429+
"history": [
2430+
{
2431+
"en": "July 2025 - Initial implementation of the component co-existing with GCWeb.",
2432+
"fr": "Juillet 2025 - Implémentation initiale de la composante co-existant avec GCWeb."
2433+
}
2434+
]
2435+
}
2436+
],
2437+
"implementation": [
2438+
{
2439+
"@id": "_:implement_card",
2440+
"iteration": "_:iteration_card_1",
2441+
"name": {
2442+
"en": "Standard",
2443+
"fr": "Standard"
2444+
},
2445+
"introduction": {
2446+
"en": "This implementation is meant for developers/publishers adding the component manually and want to participate to the Principal Publisher pilot.",
2447+
"fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le composant manuellement et qui veulent participer au pilote avec l'Éditeur Principal."
2448+
},
2449+
"instructions": {
2450+
"en": [
2451+
"Add the GCDS loader into your page, distributed here <code>&lt;script blocking=\"render\" src=\"dist/GCWeb/js/gcdsloader.min.js\">&lt;/script></code>",
2452+
"Add your <code>gcds-card</code> inside a <code>gcds-grid</code> and then you can configure according to GCDS documentation"
2453+
],
2454+
"fr": [
2455+
"Ajoutez le chargeur de GCDS dans votre page, ce dernier est distribué ici <code>&lt;script blocking=\"render\" src=\"dist/GCWeb/js/gcdsloader.min.js\">&lt;/script></code>",
2456+
"Ajoutez vos <code>gcds-card</code> à l'intérieur d'une <code>gcds-grid</code> et après vous pouvez faire votre configuration tel que la documenation de GCDS."
2457+
]
2458+
},
2459+
"sample": {
2460+
"en": [
2461+
{
2462+
"@type": "source-code",
2463+
"description": "Code sample:",
2464+
"code": "<gcds-grid columns=\"1fr\" columns-tablet=\"1fr 1fr\" columns-desktop=\"1fr 1fr 1fr\">\n\n\t<gcds-card card-title=\"Lorem ipsum\" href=\"#\">\n\t\t<gcds-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</gcds-text>\n\t</gcds-card>\n\n\t<gcds-card card-title=\"Aenean id\" href=\"#\">\n\t\t<gcds-text>Aenean id sem tellus. Sed sodales mauris non sagittis auctor. Etiam tempus a metus in porta.</gcds-text>\n\t</gcds-card>\n\n\t<gcds-card card-title=\"Pellentesque dapibus\" href=\"#\" badge=\"badge\">\n\t\t<gcds-text>Pellentesque dapibus erat sit amet lectus scelerisque, sed gravida metus pellentesque.</gcds-text>\n\t</gcds-card>\n\n\t<gcds-card card-title=\"Proin at ligula\" href=\"#\">\n\t\t<gcds-text>Proin at ligula tincidunt neque convallis varius.</gcds-text>\n\t</gcds-card>\n\n</gcds-grid>"
2465+
}
2466+
],
2467+
"fr": [
2468+
{
2469+
"@type": "source-code",
2470+
"description": "Exemple de code&nbsp;:",
2471+
"code": "<gcds-grid columns=\"1fr\" columns-tablet=\"1fr 1fr\" columns-desktop=\"1fr 1fr 1fr\">\n\n\t<gcds-card card-title=\"Lorem ipsum\" href=\"#\">\n\t\t<gcds-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</gcds-text>\n\t</gcds-card>\n\n\t<gcds-card card-title=\"Aenean id\" href=\"#\">\n\t\t<gcds-text>Aenean id sem tellus. Sed sodales mauris non sagittis auctor. Etiam tempus a metus in porta.</gcds-text>\n\t</gcds-card>\n\n\t<gcds-card card-title=\"Pellentesque dapibus\" href=\"#\" badge=\"badge\">\n\t\t<gcds-text>Pellentesque dapibus erat sit amet lectus scelerisque, sed gravida metus pellentesque.</gcds-text>\n\t</gcds-card>\n\n\t<gcds-card card-title=\"Proin at ligula\" href=\"#\">\n\t\t<gcds-text>Proin at ligula tincidunt neque convallis varius.</gcds-text>\n\t</gcds-card>\n\n</gcds-grid>"
2472+
}
2473+
]
2474+
}
2475+
}
2476+
],
2477+
"iteration": [
2478+
{
2479+
"@id": "_:iteration_card_1",
2480+
"name": "GCDS card - Iteration 1",
2481+
"date": "2025-07",
2482+
"detectableBy": ".wb-enable gcds-card",
2483+
"assets": [
2484+
{
2485+
"@type": "source-code",
2486+
"@language": "en",
2487+
"description": "Code sample",
2488+
"code": "<gcds-grid columns=\"1fr\" columns-tablet=\"1fr 1fr\" columns-desktop=\"1fr 1fr 1fr\">\n\n\t<gcds-card card-title=\"Lorem ipsum\" href=\"#\">\n\t\t<gcds-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</gcds-text>\n\t</gcds-card>\n\n\t<gcds-card card-title=\"Aenean id\" href=\"#\">\n\t\t<gcds-text>Aenean id sem tellus. Sed sodales mauris non sagittis auctor. Etiam tempus a metus in porta.</gcds-text>\n\t</gcds-card>\n\n\t<gcds-card card-title=\"Pellentesque dapibus\" href=\"#\" badge=\"badge\">\n\t\t<gcds-text>Pellentesque dapibus erat sit amet lectus scelerisque, sed gravida metus pellentesque.</gcds-text>\n\t</gcds-card>\n\n\t<gcds-card card-title=\"Proin at ligula\" href=\"#\">\n\t\t<gcds-text>Proin at ligula tincidunt neque convallis varius.</gcds-text>\n\t</gcds-card>\n\n</gcds-grid>"
2489+
}
2490+
]
2491+
}
2492+
],
2493+
"changesets": [
2494+
{
2495+
"@id": "_:cs_card_1",
2496+
"name": "GCDS card",
2497+
"status": "provisional",
2498+
"detectableBy": ".wb-enable gcds-card",
2499+
"layout": "Not applicable",
2500+
"semantic": "Not applicable",
2501+
"notes": "Tested when used with the gcds-grid."
2502+
}
2503+
]
2504+
}
23292505
,{
23302506
"@context": {
23312507
"@version": 1.1,

‎components/gcds-card/_workaround.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/*
2+
* GCDS card co-existence workaround
3+
*
4+
*/
5+
6+
//
7+
// Workaround needed for implementation in the MWS which wrap every component inside divs
8+
// TODO:
9+
// -[ ] Evaluate the scope of use, like validating if a such fix are also required another CMS
10+
// -[ ] Check alternative solution
11+
//
12+
.gcdscardcontainer.section > gcds-grid[equal-row-height] > div.gcdscard > gcds-card {
13+
height: 100%;
14+
}

‎components/gcds-card/card-doc-en.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
{
3+
"layout": "documentation",
4+
"altLangPage": "card-doc-fr.html",
5+
"dateModified": "2025-07-04",
6+
"index_json": "index.json-ld",
7+
"description": "GCDS Card - Documentation",
8+
"language": "en",
9+
"title": "GCDS Card"
10+
}
11+
---

‎components/gcds-card/card-doc-fr.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
{
3+
"layout": "documentation",
4+
"altLangPage": "card-doc-en.html",
5+
"dateModified": "2025-07-04",
6+
"index_json": "index.json-ld",
7+
"description": "Carte GCDS - Documentation",
8+
"language": "fr",
9+
"title": "Carte GCDS"
10+
}
11+
---

‎components/gcds-card/card-en.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
dateModified: "2025-07-04"
3+
description: "Co-existence pilot of the GCDS card in GCWeb."
4+
language: "en"
5+
altLangPage: "card-fr.html"
6+
title: "GCDS Card"
7+
loadGCDS: true
8+
---
9+
10+
<gcds-grid columns="1fr" columns-tablet="1fr 1fr" columns-desktop="1fr 1fr 1fr">
11+
12+
<gcds-card card-title="Lorem ipsum" href="#">
13+
<gcds-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</gcds-text>
14+
</gcds-card>
15+
16+
<gcds-card card-title="Aenean id" href="#">
17+
<gcds-text>Aenean id sem tellus. Sed sodales mauris non sagittis auctor. Etiam tempus a metus in porta.</gcds-text>
18+
</gcds-card>
19+
20+
<gcds-card card-title="Pellentesque dapibus" href="#" badge="badge">
21+
<gcds-text>Pellentesque dapibus erat sit amet lectus scelerisque, sed gravida metus pellentesque.</gcds-text>
22+
</gcds-card>
23+
24+
<gcds-card card-title="Proin at ligula" href="#">
25+
<gcds-text>Proin at ligula tincidunt neque convallis varius.</gcds-text>
26+
</gcds-card>
27+
28+
</gcds-grid>
29+
30+
<h2>Additional working example</h2>
31+
32+
<p>The following examples are for comparative implementation purposes and for tracking coexistence changes across versions.</p>
33+
34+
<ul>
35+
<li><a href="withimg-en.html">GCDS Card with images</a></li>
36+
<li><a href="mws-en.html">GCDS Card as implemented in MWS</a></li>
37+
<li><a href="mws-no-workaround-en.html">GCDS Card like as implemented in MWS (without workaround)</a></li>
38+
</ul>

‎components/gcds-card/card-fr.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
dateModified: "2025-07-04"
3+
description: "Pilote de co-existance de la carte GCDS dans GCWeb."
4+
language: "fr"
5+
altLangPage: "card-en.html"
6+
title: "Carte GCDS"
7+
loadGCDS: true
8+
---
9+
10+
<gcds-grid columns="1fr" columns-tablet="1fr 1fr" columns-desktop="1fr 1fr 1fr">
11+
12+
<gcds-card card-title="Lorem ipsum" href="#">
13+
<gcds-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</gcds-text>
14+
</gcds-card>
15+
16+
<gcds-card card-title="Aenean id" href="#">
17+
<gcds-text>Aenean id sem tellus. Sed sodales mauris non sagittis auctor. Etiam tempus a metus in porta.</gcds-text>
18+
</gcds-card>
19+
20+
<gcds-card card-title="Pellentesque dapibus" href="#" badge="badge">
21+
<gcds-text>Pellentesque dapibus erat sit amet lectus scelerisque, sed gravida metus pellentesque.</gcds-text>
22+
</gcds-card>
23+
24+
<gcds-card card-title="Proin at ligula" href="#">
25+
<gcds-text>Proin at ligula tincidunt neque convallis varius.</gcds-text>
26+
</gcds-card>
27+
28+
</gcds-grid>
29+
30+
<h2>Exemple pratique additionel</h2>
31+
32+
<p>Les exemples suivant sont à des fins comparatives d’implémentation et de suivi des changements de coexistence à travers les versions.</p>
33+
34+
<ul>
35+
<li><a href="withimg-fr.html">Carte GCDS avec images</a></li>
36+
<li><a href="mws-fr.html">Carte GCDS tel que l'implémentation dans le système web géré</a></li>
37+
<li><a href="mws-no-workaround-fr.html">Carte GCDS similaire à l'implémentation dans le système web géré (sans contournement)</a></li>
38+
</ul>

0 commit comments

Comments
 (0)