Skip to content

Commit caf2d23

Browse files
duboispduboisp
committed
Add GCDS loader and GCDS card example for co-existance tested version
1 parent 7d1e6b8 commit caf2d23

18 files changed

+935
-1
lines changed

‎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
@@ -2194,6 +2194,182 @@
21942194
]
21952195
}
21962196
}
2197+
,{
2198+
"@context": {
2199+
"@version": 1.1,
2200+
"dct": "http://purl.org/dc/terms/",
2201+
"title": { "@id": "dct:title", "@container": "@language" },
2202+
"description": { "@id": "dct:description", "@container": "@language" },
2203+
"modified": "dct:modified"
2204+
},
2205+
"title": {
2206+
"en": "GCDS card",
2207+
"fr": "Carte GCDS"
2208+
},
2209+
"description": {
2210+
"en": "Co-existence pilot of the GCDSs card in GCWeb.",
2211+
"fr": "Pilote de co-existance des cartes GCDS dans GCWeb."
2212+
},
2213+
"modified": "2025-07-04",
2214+
"componentName": "gcds-card",
2215+
"status": "provisional",
2216+
"version": "1.0",
2217+
"pages": {
2218+
"examples": [
2219+
{
2220+
"title": "GCDS card",
2221+
"language": "en",
2222+
"path": "card-en.html"
2223+
},
2224+
{
2225+
"title": "Carte GCDS",
2226+
"language": "fr",
2227+
"path": "card-fr.html"
2228+
}
2229+
],
2230+
"docs": [
2231+
{
2232+
"title": "GCDS card",
2233+
"language": "en",
2234+
"path": "card-doc-en.html"
2235+
},
2236+
{
2237+
"title": "Carte GCDS",
2238+
"language": "fr",
2239+
"path": "card-doc-fr.html"
2240+
}
2241+
],
2242+
"test": [
2243+
{
2244+
"title": "GCDS Card with images",
2245+
"language": "en",
2246+
"path": "withimg-en.html"
2247+
},
2248+
{
2249+
"title": "Carte GCDS avec images",
2250+
"language": "fr",
2251+
"path": "withimg-fr.html"
2252+
},
2253+
{
2254+
"title": "GCDS Card as implemented in MWS",
2255+
"language": "en",
2256+
"path": "mws-en.html"
2257+
},
2258+
{
2259+
"title": "Carte GCDS tel que l'implémentation dans le système web géré",
2260+
"language": "fr",
2261+
"path": "mws-fr.html"
2262+
},
2263+
{
2264+
"title": "GCDS Card like as implemented in MWS (without workaround)",
2265+
"language": "en",
2266+
"path": "mws-no-workaround-en.html"
2267+
},
2268+
{
2269+
"title": "Carte GCDS similaire à l'implémentation dans le système web géré (sans contournement)",
2270+
"language": "fr",
2271+
"path": "mws-no-workaround-fr.html"
2272+
}
2273+
]
2274+
},
2275+
"a11yGuidance": "no accessibility guidance",
2276+
"variations": [
2277+
{
2278+
"name": {
2279+
"en": "GCDS Card - default",
2280+
"fr": "Carte GCDS - par défaut"
2281+
},
2282+
"status": "provisional",
2283+
"description": {
2284+
"en": "Co-existence pilot of the GCDS card in GCWeb.",
2285+
"fr": "Pilote de co-existance de la carte GCDS dans GCWeb."
2286+
},
2287+
"iteration": "_:implement_card",
2288+
"example": [
2289+
{
2290+
"en": { "href": "card-en.html", "text": "GCDS Card" },
2291+
"fr": { "href": "card-fr.html", "text": "Carte GCDS" }
2292+
}
2293+
],
2294+
"implementation": [
2295+
"_:implement_card"
2296+
],
2297+
"history": [
2298+
{
2299+
"en": "July 2025 - Initial implementation of the component co-existing with GCWeb.",
2300+
"fr": "Juillet 2025 - Implémentation initiale de la composante co-existant avec GCWeb."
2301+
}
2302+
]
2303+
}
2304+
],
2305+
"implementation": [
2306+
{
2307+
"@id": "_:implement_card",
2308+
"iteration": "_:iteration_card_1",
2309+
"name": {
2310+
"en": "Standard",
2311+
"fr": "Standard"
2312+
},
2313+
"introduction": {
2314+
"en": "This implementation is meant for developers/publishers adding the component manually and want to participate to the Principal Publisher pilot.",
2315+
"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."
2316+
},
2317+
"instructions": {
2318+
"en": [
2319+
"Add the GCDS loader into your page, distributed here <code>&lt;script blocking=\"render\" src=\"dist/GCWeb/js/gcdsloader.min.js\">&lt;/script></code>",
2320+
"Add your <code>gcds-card</code> inside a <code>gcds-grid</code> and then you can configure according to GCDS documentation"
2321+
],
2322+
"fr": [
2323+
"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>",
2324+
"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."
2325+
]
2326+
},
2327+
"sample": {
2328+
"en": [
2329+
{
2330+
"@type": "source-code",
2331+
"description": "Code sample:",
2332+
"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>"
2333+
}
2334+
],
2335+
"fr": [
2336+
{
2337+
"@type": "source-code",
2338+
"description": "Exemple de code&nbsp;:",
2339+
"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>"
2340+
}
2341+
]
2342+
}
2343+
}
2344+
],
2345+
"iteration": [
2346+
{
2347+
"@id": "_:iteration_card_1",
2348+
"name": "GCDS card - Iteration 1",
2349+
"date": "2025-07",
2350+
"detectableBy": ".wb-enable gcds-card",
2351+
"assets": [
2352+
{
2353+
"@type": "source-code",
2354+
"@language": "en",
2355+
"description": "Code sample",
2356+
"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>"
2357+
}
2358+
]
2359+
}
2360+
],
2361+
"changesets": [
2362+
{
2363+
"@id": "_:cs_card_1",
2364+
"name": "GCDS card",
2365+
"status": "provisional",
2366+
"detectableBy": ".wb-enable gcds-card",
2367+
"layout": "Not applicable",
2368+
"semantic": "Not applicable",
2369+
"notes": "Tested when used with the gcds-grid."
2370+
}
2371+
]
2372+
}
21972373
,{
21982374
"@context": {
21992375
"@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)