Skip to content

Commit 7e5933c

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

9 files changed

Lines changed: 449 additions & 1 deletion

File tree

‎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/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: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
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>As per implemented in MWS (without equal row)</h2>
31+
<div class="gcdscardcontainer section">
32+
<gcds-grid columns-tablet="1fr 1fr" columns-desktop="1fr 1fr 1fr" columns="1fr">
33+
34+
<div class="gcdscard section">
35+
<gcds-card card-title="Lorem ipsum" href="#">
36+
<gcds-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</gcds-text>
37+
</gcds-card>
38+
</div>
39+
40+
<div class="gcdscard section">
41+
<gcds-card card-title="Aenean id" href="#">
42+
<gcds-text>Aenean id sem tellus. Sed sodales mauris non sagittis auctor. Etiam tempus a metus in porta.</gcds-text>
43+
</gcds-card>
44+
</div>
45+
46+
<div class="gcdscard section">
47+
<gcds-card card-title="Pellentesque dapibus" href="#" badge="badge">
48+
<gcds-text>Pellentesque dapibus erat sit amet lectus scelerisque, sed gravida metus pellentesque.</gcds-text>
49+
</gcds-card>
50+
</div>
51+
52+
<div class="gcdscard section">
53+
<gcds-card card-title="Proin at ligula" href="#">
54+
<gcds-text>Proin at ligula tincidunt neque convallis varius.</gcds-text>
55+
</gcds-card>
56+
</div>
57+
58+
</gcds-grid>
59+
</div>
60+
61+
<h2>As per implemented in MWS (with equal row)</h2>
62+
<div class="gcdscardcontainer section">
63+
<gcds-grid columns-tablet="1fr 1fr" columns-desktop="1fr 1fr 1fr" columns="1fr" equal-row-height>
64+
65+
<div class="gcdscard section">
66+
<gcds-card card-title="Lorem ipsum" href="#">
67+
<gcds-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</gcds-text>
68+
</gcds-card>
69+
</div>
70+
71+
<div class="gcdscard section">
72+
<gcds-card card-title="Aenean id" href="#">
73+
<gcds-text>Aenean id sem tellus. Sed sodales mauris non sagittis auctor. Etiam tempus a metus in porta.</gcds-text>
74+
</gcds-card>
75+
</div>
76+
77+
<div class="gcdscard section">
78+
<gcds-card card-title="Pellentesque dapibus" href="#" badge="badge">
79+
<gcds-text>Pellentesque dapibus erat sit amet lectus scelerisque, sed gravida metus pellentesque.</gcds-text>
80+
</gcds-card>
81+
</div>
82+
83+
<div class="gcdscard section">
84+
<gcds-card card-title="Proin at ligula" href="#">
85+
<gcds-text>Proin at ligula tincidunt neque convallis varius.</gcds-text>
86+
</gcds-card>
87+
</div>
88+
89+
</gcds-grid>
90+
</div>

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

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
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>Tel qu'implémenté dans le MWS (sans égalisateur de ligne)</h2>
31+
<div class="gcdscardcontainer section">
32+
<gcds-grid columns-tablet="1fr 1fr" columns-desktop="1fr 1fr 1fr" columns="1fr">
33+
34+
<div class="gcdscard section">
35+
<gcds-card card-title="Lorem ipsum" href="#">
36+
<gcds-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</gcds-text>
37+
</gcds-card>
38+
</div>
39+
40+
<div class="gcdscard section">
41+
<gcds-card card-title="Aenean id" href="#">
42+
<gcds-text>Aenean id sem tellus. Sed sodales mauris non sagittis auctor. Etiam tempus a metus in porta.</gcds-text>
43+
</gcds-card>
44+
</div>
45+
46+
<div class="gcdscard section">
47+
<gcds-card card-title="Pellentesque dapibus" href="#" badge="badge">
48+
<gcds-text>Pellentesque dapibus erat sit amet lectus scelerisque, sed gravida metus pellentesque.</gcds-text>
49+
</gcds-card>
50+
</div>
51+
52+
<div class="gcdscard section">
53+
<gcds-card card-title="Proin at ligula" href="#">
54+
<gcds-text>Proin at ligula tincidunt neque convallis varius.</gcds-text>
55+
</gcds-card>
56+
</div>
57+
58+
</gcds-grid>
59+
</div>
60+
61+
<h2>Tel qu'implémenté dans le MWS (avec l'égalisateur de ligne)</h2>
62+
<div class="gcdscardcontainer section">
63+
<gcds-grid columns-tablet="1fr 1fr" columns-desktop="1fr 1fr 1fr" columns="1fr" equal-row-height>
64+
65+
<div class="gcdscard section">
66+
<gcds-card card-title="Lorem ipsum" href="#">
67+
<gcds-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</gcds-text>
68+
</gcds-card>
69+
</div>
70+
71+
<div class="gcdscard section">
72+
<gcds-card card-title="Aenean id" href="#">
73+
<gcds-text>Aenean id sem tellus. Sed sodales mauris non sagittis auctor. Etiam tempus a metus in porta.</gcds-text>
74+
</gcds-card>
75+
</div>
76+
77+
<div class="gcdscard section">
78+
<gcds-card card-title="Pellentesque dapibus" href="#" badge="badge">
79+
<gcds-text>Pellentesque dapibus erat sit amet lectus scelerisque, sed gravida metus pellentesque.</gcds-text>
80+
</gcds-card>
81+
</div>
82+
83+
<div class="gcdscard section">
84+
<gcds-card card-title="Proin at ligula" href="#">
85+
<gcds-text>Proin at ligula tincidunt neque convallis varius.</gcds-text>
86+
</gcds-card>
87+
</div>
88+
89+
</gcds-grid>
90+
</div>

0 commit comments

Comments
 (0)