Skip to content

Commit 54bf92e

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

17 files changed

Lines changed: 725 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

‎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-fr.html">GCDS Card with images</a></li>
36+
<li><a href="mws-fr.html">GCDS Card as implemented in MWS</a></li>
37+
<li><a href="mws-no-workaround-fr.html">GCDS Card like how it's implemented in MWS</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-en.html">Carte GCDS avec images</a></li>
36+
<li><a href="mws-en.html">Carte GCDS tel que l'implémentation dans le système web géré</a></li>
37+
<li><a href="mws-no-workaround-en.html">Carte GCDS similaire à l'implémentation dans le système web géré</a></li>
38+
</ul>

‎components/gcds-card/index.json-ld‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
{
2+
"@context": {
3+
"@version": 1.1,
4+
"dct": "http://purl.org/dc/terms/",
5+
"title": { "@id": "dct:title", "@container": "@language" },
6+
"description": { "@id": "dct:description", "@container": "@language" },
7+
"modified": "dct:modified"
8+
},
9+
"title": {
10+
"en": "GCDS card",
11+
"fr": "Carte GCDS"
12+
},
13+
"description": {
14+
"en": "Co-existence pilot of the GCDS card in GCWeb.",
15+
"fr": "Pilote de co-existance de la carte GCDS dans GCWeb."
16+
},
17+
"modified": "2025-07-04",
18+
"componentName": "gcds-card",
19+
"status": "provisional",
20+
"version": "1.0",
21+
"pages": {
22+
"examples": [
23+
{
24+
"title": "GCDS card",
25+
"language": "en",
26+
"path": "card-en.html"
27+
},
28+
{
29+
"title": "Carte GCDS",
30+
"language": "fr",
31+
"path": "card-fr.html"
32+
}
33+
],
34+
"docs": [
35+
{
36+
"title": "GCDS card",
37+
"language": "en",
38+
"path": "card-doc-en.html"
39+
},
40+
{
41+
"title": "Carte GCDS",
42+
"language": "fr",
43+
"path": "card-doc-fr.html"
44+
}
45+
]
46+
},
47+
"a11yGuidance": "no accessibility guidance",
48+
"variations": [
49+
{
50+
"name": {
51+
"en": "GCDS Card - default",
52+
"fr": "Carte GCDS - par défaut"
53+
},
54+
"status": "stable",
55+
"description": {
56+
"en": "Co-existence pilot of the GCDS card in GCWeb.",
57+
"fr": "Pilote de co-existance de la carte GCDS dans GCWeb."
58+
},
59+
"iteration": "_:implement_card",
60+
"example": [
61+
{
62+
"en": { "href": "card-en.html", "text": "GCDS Card" },
63+
"fr": { "href": "card-fr.html", "text": "Carte GCDS" }
64+
}
65+
],
66+
"implementation": [
67+
"_:implement_card"
68+
],
69+
"history": [
70+
{
71+
"en": "July 2025 - Initial implementation of the component co-existing with GCWeb.",
72+
"fr": "Juilet 2025 - Implémentation initiale de la composante co-existant avec GCWeb."
73+
}
74+
]
75+
}
76+
],
77+
"implementation": [
78+
{
79+
"@id": "_:implement_card",
80+
"iteration": "_:iteration_card_1",
81+
"name": {
82+
"en": "Standard",
83+
"fr": "Standard"
84+
},
85+
"introduction": {
86+
"en": "This implementation is meant for developers/publishers adding the component manually and want to participate to the Principal Publisher pilot.",
87+
"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."
88+
},
89+
"instructions": {
90+
"en": [
91+
"Add your <code>gcds-card</code> inside a <code>gcds-grid</code> and then you can configure according to GCDS documenation"
92+
],
93+
"fr": [
94+
"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."
95+
]
96+
},
97+
"sample": {
98+
"en": [
99+
{
100+
"@type": "source-code",
101+
"description": "Code sample:",
102+
"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>"
103+
}
104+
],
105+
"fr": [
106+
{
107+
"@type": "source-code",
108+
"description": "Exemple de code&nbsp;:",
109+
"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>"
110+
}
111+
]
112+
}
113+
}
114+
],
115+
"iteration": [
116+
{
117+
"@id": "_:iteration_card_1",
118+
"name": "GCDS card - Iteration 1",
119+
"date": "2025-07",
120+
"detectableBy": ".wb-enable gcds-card",
121+
"assets": [
122+
{
123+
"@type": "source-code",
124+
"@language": "en",
125+
"description": "Code sample",
126+
"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>"
127+
}
128+
]
129+
}
130+
],
131+
"changesets": [
132+
{
133+
"@id": "_:cs_card_1",
134+
"name": "GCDS card",
135+
"status": "provisional",
136+
"detectableBy": ".wb-enable gcds-card",
137+
"layout": "Not applicable",
138+
"semantic": "Not applicable",
139+
"notes": "Tested when used with the gcds-grid."
140+
}
141+
]
142+
}

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
dateModified: "2025-07-04"
3+
description: "Co-existence pilot of the GCDS card in GCWeb as implemented in the managed web service."
4+
language: "en"
5+
altLangPage: "mws-fr.html"
6+
title: "GCDS Card as implemented in MWS"
7+
loadGCDS: true
8+
---
9+
10+
<p>This is an example test for comparative implementation purposes and for tracking coexistence changes across versions.</p>
11+
12+
<div class="gcdscardcontainer section">
13+
<gcds-grid columns-tablet="1fr 1fr" columns-desktop="1fr 1fr 1fr" columns="1fr">
14+
15+
<div class="gcdscard section">
16+
<gcds-card card-title="Lorem ipsum" href="#">
17+
<gcds-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</gcds-text>
18+
</gcds-card>
19+
</div>
20+
21+
<div class="gcdscard section">
22+
<gcds-card card-title="Aenean id" href="#">
23+
<gcds-text>Aenean id sem tellus. Sed sodales mauris non sagittis auctor. Etiam tempus a metus in porta.</gcds-text>
24+
</gcds-card>
25+
</div>
26+
27+
<div class="gcdscard section">
28+
<gcds-card card-title="Pellentesque dapibus" href="#" badge="badge">
29+
<gcds-text>Pellentesque dapibus erat sit amet lectus scelerisque, sed gravida metus pellentesque.</gcds-text>
30+
</gcds-card>
31+
</div>
32+
33+
<div class="gcdscard section">
34+
<gcds-card card-title="Proin at ligula" href="#">
35+
<gcds-text>Proin at ligula tincidunt neque convallis varius.</gcds-text>
36+
</gcds-card>
37+
</div>
38+
39+
</gcds-grid>
40+
</div>
41+
42+
<h2>With equal row height</h2>
43+
<div class="gcdscardcontainer section">
44+
<gcds-grid columns-tablet="1fr 1fr" columns-desktop="1fr 1fr 1fr" columns="1fr" equal-row-height>
45+
46+
<div class="gcdscard section">
47+
<gcds-card card-title="Lorem ipsum" href="#">
48+
<gcds-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</gcds-text>
49+
</gcds-card>
50+
</div>
51+
52+
<div class="gcdscard section">
53+
<gcds-card card-title="Aenean id" href="#">
54+
<gcds-text>Aenean id sem tellus. Sed sodales mauris non sagittis auctor. Etiam tempus a metus in porta.</gcds-text>
55+
</gcds-card>
56+
</div>
57+
58+
<div class="gcdscard section">
59+
<gcds-card card-title="Pellentesque dapibus" href="#" badge="badge">
60+
<gcds-text>Pellentesque dapibus erat sit amet lectus scelerisque, sed gravida metus pellentesque.</gcds-text>
61+
</gcds-card>
62+
</div>
63+
64+
<div class="gcdscard section">
65+
<gcds-card card-title="Proin at ligula" href="#">
66+
<gcds-text>Proin at ligula tincidunt neque convallis varius.</gcds-text>
67+
</gcds-card>
68+
</div>
69+
70+
</gcds-grid>
71+
</div>

0 commit comments

Comments
 (0)