[#1910] Added Utrecht NLDS CSS and component packages

maykinmedia · Dec 19, 2023 · afe1dac · afe1dac
1 parent e3f1018
commit afe1dac
Show file tree

Hide file tree

Showing 10 changed files with 429 additions and 148 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,7 +7,9 @@
     "doc": "doc"
   },
   "scripts": {
-    "build": "npm run collect && npm run bundle",
+    "build": "npm run collect && npm run bundle && npm --prefix design-tokens/open-inwoner-design-tokens run build",
+    "build-design-tokens": "npm --prefix design-tokens/open-inwoner-design-tokens run build",
+    "watch-design-tokens": "npm --prefix design-tokens/open-inwoner-design-tokens run start",
     "bundle": "webpack",
     "collect": "cp -r node_modules/leaflet/dist/images src/open_inwoner/static/bundles && cp -r node_modules/material-icons/iconfont/*.woff src/open_inwoner/static/bundles && cp -r node_modules/material-icons/iconfont/*.woff2 src/open_inwoner/static/bundles && cp -r node_modules/@fortawesome/fontawesome-free/webfonts src/open_inwoner/static/",
     "test": "karma start",
@@ -62,6 +64,8 @@
     "@babel/polyfill": "latest",
     "@babel/preset-env": "latest",
     "@types/leaflet": "^1.7.6",
+    "@utrecht/component-library-css": "3.0.1-alpha.0",
+    "@utrecht/components": "3.0.1-alpha.0",
     "autoprefixer": "^9.0.0",
     "babel-loader": "^8.2.5",
     "chai": "latest",

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
@@ -1,5 +1,16 @@
+@import '@utrecht/components/dist/heading-1/css/index.css';
 @import '~microscope-sass/lib/responsive';
 
+.utrecht-heading-1 {
+  color: var(--font-color-heading-1);
+  font-family: var(--font-family-heading-1);
+  font-size: var(--font-size-heading-1);
+  font-weight: var(--font-weight-heading-1);
+  line-height: var(--font-line-height-heading-1);
+  display: flex;
+  justify-content: space-between;
+}
+
 .h1 {
   color: var(--font-color-heading-1);
   font-family: var(--font-family-heading-1);

diff --git a/src/open_inwoner/scss/screen.scss b/src/open_inwoner/scss/screen.scss
@@ -7,6 +7,9 @@
 @import '~leaflet/dist/leaflet.css';
 @import '~flatpickr/dist/flatpickr.min.css';
 
+// output the design tokens under the .openinwoner-theme classname
+@import '/design-tokens/open-inwoner-design-tokens/dist/css/index.css';
+
 // Internal
 @import 'settings';
 @import 'components';

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/cms/fullwidth.html b/src/open_inwoner/templates/cms/fullwidth.html
@@ -24,7 +24,7 @@
 {% block content %}
     {% if not request.user.is_authenticated %}
         <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>
     {% else %}

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 openinwoner-theme {% block view_class %}view--{{ request.resolver_match.namespaces|join:'-' }}-{{ request.resolver_match.url_name }}{% endblock %}">
     <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 %}