Skip to content

Commit 95ce199

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

17 files changed

+757
-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

‎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 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-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é</a></li>
38+
</ul>

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

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
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+
"test": [
47+
{
48+
"title": "GCDS Card with images",
49+
"language": "en",
50+
"path": "withimg-en.html"
51+
},
52+
{
53+
"title": "Carte GCDS avec images",
54+
"language": "fr",
55+
"path": "withimg-fr.html"
56+
},
57+
{
58+
"title": "GCDS Card as implemented in MWS",
59+
"language": "en",
60+
"path": "mws-en.html"
61+
},
62+
{
63+
"title": "Carte GCDS tel que l'implémentation dans le système web géré",
64+
"language": "fr",
65+
"path": "mws-fr.html"
66+
},
67+
{
68+
"title": "GCDS Card like how it's implemented in MWS",
69+
"language": "en",
70+
"path": "mws-no-workaround-en.htmll"
71+
},
72+
{
73+
"title": "Carte GCDS similaire à l'implémentation dans le système web géré",
74+
"language": "fr",
75+
"path": "mws-no-workaround-fr.html"
76+
}
77+
]
78+
},
79+
"a11yGuidance": "no accessibility guidance",
80+
"variations": [
81+
{
82+
"name": {
83+
"en": "GCDS Card - default",
84+
"fr": "Carte GCDS - par défaut"
85+
},
86+
"status": "stable",
87+
"description": {
88+
"en": "Co-existence pilot of the GCDS card in GCWeb.",
89+
"fr": "Pilote de co-existance de la carte GCDS dans GCWeb."
90+
},
91+
"iteration": "_:implement_card",
92+
"example": [
93+
{
94+
"en": { "href": "card-en.html", "text": "GCDS Card" },
95+
"fr": { "href": "card-fr.html", "text": "Carte GCDS" }
96+
}
97+
],
98+
"implementation": [
99+
"_:implement_card"
100+
],
101+
"history": [
102+
{
103+
"en": "July 2025 - Initial implementation of the component co-existing with GCWeb.",
104+
"fr": "Juilet 2025 - Implémentation initiale de la composante co-existant avec GCWeb."
105+
}
106+
]
107+
}
108+
],
109+
"implementation": [
110+
{
111+
"@id": "_:implement_card",
112+
"iteration": "_:iteration_card_1",
113+
"name": {
114+
"en": "Standard",
115+
"fr": "Standard"
116+
},
117+
"introduction": {
118+
"en": "This implementation is meant for developers/publishers adding the component manually and want to participate to the Principal Publisher pilot.",
119+
"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."
120+
},
121+
"instructions": {
122+
"en": [
123+
"Add your <code>gcds-card</code> inside a <code>gcds-grid</code> and then you can configure according to GCDS documenation"
124+
],
125+
"fr": [
126+
"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."
127+
]
128+
},
129+
"sample": {
130+
"en": [
131+
{
132+
"@type": "source-code",
133+
"description": "Code sample:",
134+
"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>"
135+
}
136+
],
137+
"fr": [
138+
{
139+
"@type": "source-code",
140+
"description": "Exemple de code&nbsp;:",
141+
"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>"
142+
}
143+
]
144+
}
145+
}
146+
],
147+
"iteration": [
148+
{
149+
"@id": "_:iteration_card_1",
150+
"name": "GCDS card - Iteration 1",
151+
"date": "2025-07",
152+
"detectableBy": ".wb-enable gcds-card",
153+
"assets": [
154+
{
155+
"@type": "source-code",
156+
"@language": "en",
157+
"description": "Code sample",
158+
"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>"
159+
}
160+
]
161+
}
162+
],
163+
"changesets": [
164+
{
165+
"@id": "_:cs_card_1",
166+
"name": "GCDS card",
167+
"status": "provisional",
168+
"detectableBy": ".wb-enable gcds-card",
169+
"layout": "Not applicable",
170+
"semantic": "Not applicable",
171+
"notes": "Tested when used with the gcds-grid."
172+
}
173+
]
174+
}

0 commit comments

Comments
 (0)