adjust the list styles to accomodate MWS

wet-boew · Apr 15, 2024 · fcea0be · fcea0be
1 parent 320ac3d
commit fcea0be
Show file tree

Hide file tree

Showing 7 changed files with 885 additions and 11 deletions.
diff --git a/_data/common.json b/_data/common.json
@@ -236,6 +236,16 @@
 				"title": "Liste groupé",
 				"language": "fr",
 				"path": "list-group-fr.html"
+			},
+			{
+				"title": "Custom list styling using parent div element",
+				"language": "en",
+				"path": "lists-mws-en.html"
+			},
+			{
+				"title": "Style de liste personnalisé à l'aide de l'élément div parent",
+				"language": "fr",
+				"path": "lists-mws-fr.html"
 			}
 		]
 	}

diff --git a/_data/sites.json b/_data/sites.json
@@ -2377,6 +2377,28 @@
 				"language": "fr",
 				"path": "page-details-pft-share-fr.html"
 			}
+		],
+		"reports": [
+			{
+				"title": "Accessibility (Only new SC WCAG 2.1/2.2 Level AA)- Page Details - English report",
+				"language": "en",
+				"path": "reports/pre-a11y-1-en.html"
+			},
+			{
+				"title": "Accessibility (Only new SC WCAG 2.1/2.2 Level AA)- Page Details - French report",
+				"language": "fr",
+				"path": "reports/pre-a11y-1-fr.html"
+			},
+			{
+				"title": "Accessibility (Only new SC WCAG 2.1/2.2 Level AA)- Page Details (Basic Html version)- English report",
+				"language": "en",
+				"path": "reports/pre-a11y-basic-html-1-en.html"
+			},
+			{
+				"title": "Accessibility (Only new SC WCAG 2.1/2.2 Level AA)- Page Details (Basic Html version)- French report",
+				"language": "fr",
+				"path": "reports/pre-a11y-basic-html-1-fr.html"
+			}
 		]
 	},
 	"dependencies": [
@@ -3100,11 +3122,12 @@
 		"en": "Documentation and working example on how to use the skiplinks.",
 		"fr": "Documentation et example pratique sur l'utilisation des liens de saut de page."
 	},
-	"modified": "2022-01-12",
+	"modified": "2024-02-27",
 	"componentName": "skiplinks",
+	"processing": "baseline",
 	"status": "stable",
 	"pages": {
-		"docs": [
+		"examples": [
 			{
 				"title": "Skip links",
 				"language": "en",
@@ -3115,6 +3138,18 @@
 				"language": "fr",
 				"path": "skiplinks-fr.html"
 			}
+		],
+		"reports": [
+			{
+				"title": "Accessibility assessment #1 - Skip links",
+				"language": "en",
+				"path": "reports/a11y-1-en.html"
+			},
+			{
+				"title": "Évaluation d'accessibilité #1 - Liens de saut de page",
+				"language": "fr",
+				"path": "reports/a11y-1-fr.html"
+			}
 		]
 	}
 }

diff --git a/sites/baseline/lists/_lists.scss → common/list/_lists.scss b/sites/baseline/lists/_lists.scss → common/list/_lists.scss
@@ -6,7 +6,13 @@
  * @title: Lists
  *
  */
-
+/*
+ *
+*/
+ul,
+ol {
+	margin-top: 20px;
+}
 /*
  * List responsive style
  *
@@ -38,18 +44,13 @@
 /* Double space list items
 	Might worth to publish it upstream here instead: https://github.com/wet-boew/wet-boew/blob/master/src/base/lists/_base.scss#L30
  */
-
+div.lst-spcd-2>ul,
 .lst-spcd-2 {
 	> {
 		li {
 			margin-bottom: 20px;
 		}
 	}
-
-	ul,
-	ol {
-		margin-top: 20px;
-	}
 }
 
 /* Display lists in columns using Flexbox
@@ -73,7 +74,71 @@ ul[class*=list-col] {
 	}
 }
 
+/*
+ * this code is fully compatible with the equivalent CSS
+ * in the wet-boew code here: https://github.com/wet-boew/wet-boew/blob/master/src/base/lists/_base.scss
+*/
 ul.list-col-xs-1 > li { flex-basis: 100% }
 ul.list-col-xs-2 > li { flex-basis: 50% }
 ul.list-col-xs-3 > li { flex-basis: 33.33% }
 ul.list-col-xs-4 > li { flex-basis: 25% }
+
+
+div.lst-lwr-alph>ol,
+.lst-lwr-alph {
+	list-style-type: lower-alpha;
+}
+
+div.lst-upr-alph>ol,
+.lst-upr-alph {
+	list-style-type: upper-alpha;
+}
+
+div.lst-lwr-rmn>ol,
+.lst-lwr-rmn {
+	list-style-type: lower-roman;
+}
+
+div.lst-upr-rmn>ol,
+.lst-upr-rmn {
+	list-style-type: upper-roman;
+}
+
+.lst-num {
+	list-style-type: decimal;
+}
+
+div.lst-none>ul,
+.lst-none {
+	list-style-type: none;
+}
+
+div.lst-spcd>ul>li,
+div.lst-spcd>ol>li,
+.lst-spcd>li {
+	margin-bottom: 10px;
+}
+
+/*
+ * The CSS for list-unstyled and list-inline classes is adapted from
+ * https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/css/theme.min.css
+ * to address the specific scenario where these styles are applied to a parent div.
+ * This adaptation accommodates edge cases where the styles need to be inherited by the parent element.
+ */
+
+div.list-unstyled > ul {
+	list-style: none;
+	padding-left: 0;
+}
+
+div.list-inline > ul {
+	list-style: none;
+	margin-left: -5px;
+	padding-left: 0;
+
+	> li {
+		display: inline-block;
+		padding-left: 5px;
+		padding-right: 5px;
+	}
+}
diff --git a/common/list/index.json-ld b/common/list/index.json-ld
@@ -39,6 +39,16 @@
 				"title": "Liste groupé",
 				"language": "fr",
 				"path": "list-group-fr.html"
+			},
+			{
+				"title": "Custom list styling using parent div element",
+				"language": "en",
+				"path": "lists-mws-en.html"
+			},
+			{
+				"title": "Style de liste personnalisé à l'aide de l'élément div parent",
+				"language": "fr",
+				"path": "lists-mws-fr.html"
 			}
 		]
 	}