From aa3a9340fbb4ed459deefcc7dffdbd1c077a3525 Mon Sep 17 00:00:00 2001
From: jiroghianni <jiro@maykinmedia.nl>
Date: Tue, 12 Dec 2023 14:38:24 +0100
Subject: [PATCH] :sparkles: [#1938] Expanded allowed CSS properties and set
 some NLDS classes

---
 .../cms/banner/tests/test_plugin_banner.py    |  4 +-
 .../scss/components/Typography/H1.scss        |  5 ++
 .../scss/components/Typography/H2.scss        |  5 ++
 .../scss/components/Typography/H3.scss        |  5 ++
 .../cms/banner/banner_text_plugin.html        |  4 +-
 src/open_inwoner/templates/master.html        |  2 +-
 src/open_inwoner/templates/pages/home.html    |  2 +-
 .../templates/pages/user-home.html            |  2 +-
 src/open_inwoner/utils/css.py                 | 60 ++++++++++++++++---
 9 files changed, 74 insertions(+), 15 deletions(-)

diff --git a/src/open_inwoner/cms/banner/tests/test_plugin_banner.py b/src/open_inwoner/cms/banner/tests/test_plugin_banner.py
index bcee63c78c..32dab5d998 100644
--- a/src/open_inwoner/cms/banner/tests/test_plugin_banner.py
+++ b/src/open_inwoner/cms/banner/tests/test_plugin_banner.py
@@ -39,7 +39,7 @@ def test_banner_text_is_rendered_in_plugin(self):
             BannerTextPlugin, plugin_data={"title": title}
         )
 
-        self.assertIn(f'<h1 class="h1">{title} </h1>', html)
+        self.assertIn(f'<h1 class="utrecht-heading-1">{title} </h1>', html)
 
     def test_banner_text_with_description_is_rendered_in_plugin(self):
         title = "A title for the banner"
@@ -48,5 +48,5 @@ def test_banner_text_with_description_is_rendered_in_plugin(self):
             BannerTextPlugin, plugin_data={"title": title, "description": description}
         )
 
-        self.assertIn(f'<h1 class="h1">{title} </h1>', html)
+        self.assertIn(f'<h1 class="utrecht-heading-1">{title} </h1>', html)
         self.assertIn(f'<p class="p">{description}</p>', html)
diff --git a/src/open_inwoner/scss/components/Typography/H1.scss b/src/open_inwoner/scss/components/Typography/H1.scss
index c37b381e88..8e59201dcb 100644
--- a/src/open_inwoner/scss/components/Typography/H1.scss
+++ b/src/open_inwoner/scss/components/Typography/H1.scss
@@ -29,3 +29,8 @@
 h1 + .card-container {
   margin-top: var(--gutter-width);
 }
+
+.utrecht-heading-1 {
+  font-size: var(--utrecht-heading-1-font-size);
+  font-weight: var(--utrecht-heading-1-font-weight);
+}
diff --git a/src/open_inwoner/scss/components/Typography/H2.scss b/src/open_inwoner/scss/components/Typography/H2.scss
index d079dc4ee3..bff1e440a9 100644
--- a/src/open_inwoner/scss/components/Typography/H2.scss
+++ b/src/open_inwoner/scss/components/Typography/H2.scss
@@ -39,3 +39,8 @@
 .p + .h2 {
   margin-top: var(--spacing-large);
 }
+
+.utrecht-heading-2 {
+  font-size: var(--utrecht-heading-2-font-size);
+  font-weight: var(--utrecht-heading-2-font-weight);
+}
diff --git a/src/open_inwoner/scss/components/Typography/H3.scss b/src/open_inwoner/scss/components/Typography/H3.scss
index f4f14ec629..bc474ee01d 100644
--- a/src/open_inwoner/scss/components/Typography/H3.scss
+++ b/src/open_inwoner/scss/components/Typography/H3.scss
@@ -17,3 +17,8 @@
 .p + .h3 {
   margin-top: var(--spacing-large);
 }
+
+.utrecht-heading-3 {
+  font-size: var(--utrecht-heading-3-font-size);
+  font-weight: var(--utrecht-heading-3-font-weight);
+}
diff --git a/src/open_inwoner/templates/cms/banner/banner_text_plugin.html b/src/open_inwoner/templates/cms/banner/banner_text_plugin.html
index 7faad2a243..9496310a50 100644
--- a/src/open_inwoner/templates/cms/banner/banner_text_plugin.html
+++ b/src/open_inwoner/templates/cms/banner/banner_text_plugin.html
@@ -1,5 +1,5 @@
-<h1 class="h1">{{ instance.title }} {{ request.user.get_full_name }}</h1>
+<h1 class="utrecht-heading-1">{{ instance.title }} {{ request.user.get_full_name }}</h1>
 
 {% if instance.description %}
     <p class="p">{{ instance.description|linebreaksbr }}</p>
-{% endif %}
\ No newline at end of file
+{% endif %}
diff --git a/src/open_inwoner/templates/master.html b/src/open_inwoner/templates/master.html
index 341aae5322..4690996840 100644
--- a/src/open_inwoner/templates/master.html
+++ b/src/open_inwoner/templates/master.html
@@ -1,5 +1,5 @@
 {% load static i18n header_tags card_tags button_tags link_tags notification_tags anchor_menu_tags logo_tags view_breadcrumbs utils session_tags django_htmx cms_tags menu_tags sekizai_tags %}<!DOCTYPE html>
-<html lang="nl" class="view {% block view_class %}view--{{ request.resolver_match.namespaces|join:'-' }}-{{ request.resolver_match.url_name }}{% endblock %}">
+<html lang="nl" class="view {% block view_class %}view--{{ request.resolver_match.namespaces|join:'-' }}-{{ request.resolver_match.url_name }}{% endblock %} openinwoner-theme">
     <head>
         <meta charset="utf-8">
         <title>{% block title %}{% if page_title %}{{ page_title }} - {% endif %}{{ site_name }}{% endblock %}</title>
diff --git a/src/open_inwoner/templates/pages/home.html b/src/open_inwoner/templates/pages/home.html
index bc607e3a7b..9ae30e6fc5 100644
--- a/src/open_inwoner/templates/pages/home.html
+++ b/src/open_inwoner/templates/pages/home.html
@@ -11,7 +11,7 @@
     <div class="home">
     {% block user_content %}
         <div class="grid__welcome">
-            <h1 class="h1">{{configurable_text.home_page.home_welcome_title}}</h1>
+            <h1 class="utrecht-heading-1">{{configurable_text.home_page.home_welcome_title}}</h1>
             <p class="p">{{configurable_text.home_page.home_welcome_intro|linebreaksbr}}</p>
         </div>
     {% endblock %}
diff --git a/src/open_inwoner/templates/pages/user-home.html b/src/open_inwoner/templates/pages/user-home.html
index 88a85b3ad0..9032e69082 100644
--- a/src/open_inwoner/templates/pages/user-home.html
+++ b/src/open_inwoner/templates/pages/user-home.html
@@ -4,7 +4,7 @@
 {% block header_image %}{% endblock header_image %}
 
 {% block user_content %}
-    <h1 class="h1">{{ configurable_text.home_page.home_welcome_title }} {{ request.user.get_full_name }}</h1>
+    <h1 class="utrecht-heading-1">{{ configurable_text.home_page.home_welcome_title }} {{ request.user.get_full_name }}</h1>
     <p class="p">{{ configurable_text.home_page.home_welcome_intro|linebreaksbr }}</p>
 
     {% if show_plans %}
diff --git a/src/open_inwoner/utils/css.py b/src/open_inwoner/utils/css.py
index 2d6937e41b..07ebac9e89 100644
--- a/src/open_inwoner/utils/css.py
+++ b/src/open_inwoner/utils/css.py
@@ -6,35 +6,72 @@
         # CSS properties
         #
         # "azimuth",
+        "align-content",
+        "align-items",
+        "align-self",
+        "all",
+        "animation",
+        "background-clip",
         "background-color",
-        "border-bottom-color",
+        "background-image",
+        "background-origin",
+        "background-position",
+        "background-repeat",
+        "background-size" "border-bottom-color",
         "border-collapse",
         "border-color",
         "border-left-color",
         "border-right-color",
         "border-top-color",
-        # "clear",
+        "clear",
         "color",
         "cursor",
         # "direction",
-        # "display",
+        "display",
         # "elevation",
-        # "float",
+        "float",
         "font",
+        "@font-face",
         "font-family",
         "font-size",
         "font-style",
         "font-variant",
         "font-weight",
-        # "height",
+        "height",
+        "@import",
+        "justify-content",
+        "@keyframes",
+        "left",
         "letter-spacing",
         "line-height",
-        # "overflow",
+        "list-style",
+        "list-style-image",
+        "list-style-position",
+        "list-style-type",
+        "margin",
+        "margin-bottom",
+        "margin-left",
+        "margin-right",
+        "margin-top",
+        "max-height",
+        "max-width",
+        "@media",
+        "min-height",
+        "min-width",
+        "overflow",
         # "pause",
         # "pause-after",
         # "pause-before",
         # "pitch",
         # "pitch-range",
+        "padding",
+        "padding-bottom",
+        "padding-left",
+        "padding-right",
+        "padding-top",
+        "pointer-events",
+        "position",
+        "@property",
         # "richness",
         # "speak",
         # "speak-header",
@@ -45,12 +82,19 @@
         "text-align",
         "text-decoration",
         "text-indent",
-        # "unicode-bidi",
+        "text-transform",
         "vertical-align",
+        "visibility",
+        # "unicode-bidi",
         # "voice-family",
         # "volume",
         "white-space",
-        # "width",
+        "width",
+        "word-break",
+        "word-spacing",
+        "word-wrap",
+        "writing-mode",
+        "z-index",
         #
         # SVG properties
         #