✨ [#1938] Expanded allowed CSS properties and set some NLDS classes

maykinmedia · Dec 14, 2023 · e9621af · e9621af
1 parent b1719bc
commit e9621af
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 7 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 %}
+{% endif %}
diff --git 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
@@ -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
@@ -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
@@ -71,6 +71,7 @@
         "padding-top",
         "pointer-events",
         "position",
+        "@property",
         # "richness",
         # "speak",
         # "speak-header",