🚧 PR#36 update nl-paragraphs and nl-headings 🚧

package.json

@@ -36,6 +36,10 @@
     "@fortawesome/fontawesome-free": "^6.4.2",
     "@gemeente-denhaag/action": "^4.0.1",
     "@gemeente-denhaag/side-navigation": "^4.0.2",
+    "@nl-design-system-candidate/heading-css": "^1.1.3",
+    "@nl-design-system-candidate/heading-react": "^1.1.7",
+    "@nl-design-system-candidate/paragraph-css": "^2.1.3",
+    "@nl-design-system-candidate/paragraph-react": "^2.2.2",
     "@open-inwoner/design-tokens": "^0.0.25",
     "@tarekraafat/autocomplete.js": "^10.2.6",
     "@utrecht/button-css": "^2.3.1",

src/open_inwoner/accounts/templates/accounts/email_verification.html

@@ -7,8 +7,8 @@
     {% render_column span=9 %}
         {% render_card tinted=True  %}
             {% get_solo 'configurations.SiteConfiguration' as config %}
-            <h1 class="utrecht-heading-1">{% trans "E-mail is verzonden" %}</h1><br>
-            {% if verification_text %}<p class="utrecht-paragraph">{{ verification_text|linebreaksbr }}</p><br>{% endif %}
+            <h1 class="nl-heading nl-heading--level-1">{% trans "E-mail is verzonden" %}</h1><br>
+            {% if verification_text %}<nl-paragraph>{{ verification_text|linebreaksbr }}</nl-paragraph><br>{% endif %}
             <form method="POST" id="email-verification-form" action="{{ request.get_full_path }}" class="form" novalidate>
                 {% csrf_token %}
                 {% form_actions primary_icon='arrow_forward' primary_text=button_text %}

src/open_inwoner/accounts/templates/accounts/inbox.html

@@ -5,7 +5,7 @@
 {% block main_inner %}
     {% render_grid %}
         {% render_column start=1 span=9 %}
-            <h1 class="utrecht-heading-1">{% trans 'Mijn berichten' %}</h1>
+            <h1 class="nl-heading nl-heading--level-1">{% trans 'Mijn berichten' %}</h1>
         {% endrender_column %}
 
         {% render_column start=10 span=3 extra_classes="fix__align-right" %}

src/open_inwoner/accounts/templates/accounts/inbox_start.html

@@ -3,7 +3,7 @@
 
 
 {% block main_inner %}
-    <h1 class="utrecht-heading-1">{% trans 'Nieuw bericht' %}</h1>
+    <h1 class="nl-heading nl-heading--level-1">{% trans 'Nieuw bericht' %}</h1>
     {{ block.super }}
 {% endblock %}
 

src/open_inwoner/accounts/templates/accounts/invite_accept.html

@@ -3,12 +3,12 @@
 
 
 {% block content %}
-<h1 class="utrecht-heading-1">
+<h1 class="nl-heading nl-heading--level-1">
     {% trans "Accept an invitation" %}
 </h1>
-<p class="utrecht-paragraph">
+<nl-paragraph>
     {% blocktranslate with inviter_name=object.inviter.get_full_name %}Accept invitation from {{ inviter_name }} and join Open Inwoner Platform {% endblocktranslate %}
-</p>
+</nl-paragraph>
 
 {% render_form id="invite-form" method="POST" form=form extra_classes="form--flex" %}
     {% csrf_token %}

src/open_inwoner/accounts/templates/accounts/registration_necessary.html

@@ -6,8 +6,8 @@
     {% render_grid %}
         {% render_column start=5 span=5 %}
             {% get_solo 'configurations.SiteConfiguration' as config %}
-            <h1 class="utrecht-heading-1">{% trans "Registratie voltooien" %}</h1><br>
-            {% if config.registration_text %}<p class="utrecht-paragraph">{{ config.registration_text|urlize|linebreaksbr }}</p>{% endif %}
+            <h1 class="nl-heading nl-heading--level-1">{% trans "Registratie voltooien" %}</h1><br>
+            {% if config.registration_text %}<nl-paragraph>{{ config.registration_text|urlize|linebreaksbr }}</nl-paragraph>{% endif %}
             <form method="POST" id="necessary-form" action="{{ request.get_full_path }}" class="form form__choice-list" novalidate>
                 {% csrf_token %}
 
@@ -33,7 +33,7 @@ <h1 class="utrecht-heading-1">{% trans "Registratie voltooien" %}</h1><br>
 
 
                 {% if config.any_notifications_enabled %}
-                    <h3 class="utrecht-heading-3">{% trans "Notification preferences" %}</h3>
+                    <h3 class="nl-heading nl-heading--level-3">{% trans "Notification preferences" %}</h3>
 
                     {# Start of multiple checkbox fields #}
                     <ul class="choice-list choice-list-multiple">
@@ -74,7 +74,7 @@ <h3 class="utrecht-heading-3">{% trans "Notification preferences" %}</h3>
 
                     {# Choice of zaken notification channel #}
                     {% if form.case_notification_channel %}
-                        <p class="utrecht-paragraph choice-list__p">{% trans "Hoe wilt u deze meldingen ontvangen?" %}</p>
+                        <p class="nl-paragraph choice-list__p">{% trans "Hoe wilt u deze meldingen ontvangen?" %}</p>
                         {% with form.case_notification_channel as field %}
                             {% choice_list single=True cols=True %}
                                 {% for choice in field.field.choices %}

src/open_inwoner/accounts/templates/django_registration/registration_complete.html

@@ -2,6 +2,6 @@
 {% load i18n %}
 
 {% block content %}
-<h1 class="utrecht-heading-1">{% trans "Succes" %}</h1>
-<p class="utrecht-paragraph">{% trans "U bent nu geregistreerd" %}</p>
+<h1 class="nl-heading nl-heading--level-1">{% trans "Succes" %}</h1>
+    <nl-paragraph>{% trans "U bent nu geregistreerd" %}</nl-paragraph>
 {% endblock content %}

src/open_inwoner/accounts/templates/django_registration/registration_form.html

@@ -3,7 +3,7 @@
 
 {% block content %}
 
-<h1 class="utrecht-heading-1">{% trans 'Registreren' %}</h1>
+<h1 class="nl-heading nl-heading--level-1">{% trans 'Registreren' %}</h1>
   {% render_grid %}
    {% if settings.DIGID_ENABLED and digid_url %}
     {% render_column start=5 span=5 %}
@@ -30,7 +30,7 @@ <h1 class="utrecht-heading-1">{% trans 'Registreren' %}</h1>
   {% if login_allow_registration %}
         {% render_column start=5 span=5 %}
             {% render_card tinted=True compact=True  %}
-                <h3 class="utrecht-heading-3">{% trans "Registreren met E-mail" %}</h3>
+                <h3 class="nl-heading nl-heading--level-3">{% trans "Registreren met E-mail" %}</h3>
                 {% form form_object=form method="POST" id="registration-form" submit_text=_('Registreren') extra_classes="form__registration" show_required=True %}
             {% endrender_card %}
         {% endrender_column %}

src/open_inwoner/accounts/templates/registration/add_phone_number_1.html

@@ -4,14 +4,14 @@
 {% block content %}
     {{ block.super }}
 
-    <p class="utrecht-paragraph">
+    <nl-paragraph>
         {% blocktrans trimmed %}
             Het nummer van uw mobiele telefoon is nog niet bij de Open Inwoner Platform bekend
             en is nodig voor toegang tot deze website.
         {% endblocktrans %}
         {% trans 'Vul alstublieft het nummer van uw mobiele telefoon in. ' %}
         {% trans 'U ontvangt nadat u op <em>bevestigen</em> klikt een SMS bericht met daarin een code.' %}
-    </p>
+    </nl-paragraph>
 
     {% render_form id="add-phonenumber-1-form" form=wizard.form no_action=True method="POST" %}
         {% csrf_token %}

src/open_inwoner/accounts/templates/registration/add_phone_number_2.html

@@ -4,11 +4,11 @@
 {% block content %}
     {{ block.super }}
 
-    <p class="utrecht-paragraph">
+    <nl-paragraph>
         {% trans 'U ontvangt een SMS bericht op uw mobiele telefoon nummer met daarin een code. ' %}
         {% trans 'Vul hieronder de code in. Geen bericht ontvangen? ' %}
         {% trans 'Kies <em>Vorige</em> om uw telefoon nummer te controleren en eventueel aan te passen.' %}
-    </p>
+    </nl-paragraph>
 
     {% render_form id="add-phonenumber-2-form" form=wizard.form no_action=True method="POST" %}
         {% csrf_token %}

src/open_inwoner/accounts/templates/registration/add_phone_number_base.html

@@ -6,7 +6,7 @@
 {% endblock %}
 
 {% block content %}
-    <h2 class="utrecht-heading-2">
+    <h2 class="nl-heading nl-heading--level-2">
         {% blocktranslate with step=wizard.steps.step1 count=wizard.steps.count %}
             Account verificatie (stap {{ step }} van {{ count }})
         {% endblocktranslate %}

src/open_inwoner/accounts/templates/registration/login.html

@@ -7,7 +7,7 @@
 {% endblock header_image %}
 
 {% block content %}
-    <h1 class="utrecht-heading-1">{% trans 'Welkom' %}</h1>
+    <h1 class="nl-heading nl-heading--level-1">{% trans 'Welkom' %}</h1>
     {% if login_text.html %}
         <div class="wysiwyg">{{ login_text.html|safe }}</div>
     {% endif %}

src/open_inwoner/accounts/templates/registration/verify_token.html

@@ -2,16 +2,16 @@
 {% load i18n form_tags link_tags string_tags%}
 
 {% block content %}
-    <h2 class="utrecht-heading-2">{% trans 'Account verificatie' %}</h2>
-    <p class="utrecht-paragraph">
+    <h2 class="nl-heading nl-heading--level-2">{% trans 'Account verificatie' %}</h2>
+    <nl-paragraph>
         {% blocktrans trimmed %}
             U ontvangt binnen 1 minuut een sms-bericht op uw mobiele telefoon.
             Vul de code die in het bericht staat hieronder in en klik op
             <em>Log in</em>. De code is maximaal 5 minuten geldig.
             Mocht het niet lukken om de code binnen deze tijd in te voeren, klik
             dan op <em>Verstuur nieuwe SMS</em>.
         {% endblocktrans %}
-    </p>
+    </nl-paragraph>
 
     {% render_form id="verify-token-form" form=form no_action=True method="POST" %}
         {% csrf_token %}

src/open_inwoner/cms/banner/tests/test_plugin_banner.py

@@ -38,7 +38,7 @@ def test_banner_text_is_rendered_in_plugin(self):
             BannerTextPlugin, plugin_data={"title": title}
         )
 
-        self.assertIn(f'<h1 class="utrecht-heading-1">{title} </h1>', html)
+        self.assertIn(f'<h1 class="nl-heading nl-heading--level-1">{title} </h1>', html)
 
     def test_banner_text_with_description_is_rendered_in_plugin(self):
         title = "A title for the banner"
@@ -47,5 +47,5 @@ def test_banner_text_with_description_is_rendered_in_plugin(self):
             BannerTextPlugin, plugin_data={"title": title, "description": description}
         )
 
-        self.assertIn(f'<h1 class="utrecht-heading-1">{title} </h1>', html)
-        self.assertIn(f'<p class="utrecht-paragraph">{description}</p>', html)
+        self.assertIn(f'<h1 class="nl-heading nl-heading--level-1">{title} </h1>', html)
+        self.assertIn(f'<p class="nl-paragraph">{description}</p>', html)

src/open_inwoner/components/templates/components/Action/Actions.html

@@ -7,7 +7,7 @@
             {% button text=_("Filter") type="button" bordered=True %}
         </div>
         <div class="actions__filter-container filter__container">
-            <p class="utrecht-paragraph">{% trans "Filter op:" %}</p>
+            <nl-paragraph>{% trans "Filter op:" %}</nl-paragraph>
             {% date_field action_form.end_date no_label=True no_help=True icon="today" %}
             {% input action_form.is_for no_label=True no_help=True icon="person" %}
             {% input action_form.status no_label=True no_help=True icon="expand_more" %}
@@ -19,12 +19,12 @@
             <div class="action" aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}">
                 <div class="action__header">
                     <section>
-                        <h3 class="utrecht-heading-3">
+                        <h3 class="nl-heading nl-heading--level-3">
                             {% button extra_classes='action__header-button' icon="keyboard_arrow_down" text=action.name icon_position="after" icon_outlined=True transparent=True type="button" ariaExpanded=forloop.first|lower %}
                         </h3>
                     </section>
                     {% if action.description %}
-                        <p class="utrecht-paragraph">{{ action.description }}</p>
+                        <nl-paragraph>{{ action.description }}</nl-paragraph>
                     {% endif %}
                     {% if action.file %}
                         {% url "profile:action_download" uuid=action.uuid as download_url %}
@@ -89,7 +89,7 @@ <h3 class="utrecht-heading-3">
                 {% endif %}
             </div>
         {% empty %}
-            <div class="table__item"><p class="utrecht-paragraph"><strong>{% trans "er zijn geen acties gevonden met de huidige filters of er zijn geen acties" %}</strong></p></div>
+            <div class="table__item"><nl-paragraph><strong>{% trans "er zijn geen acties gevonden met de huidige filters of er zijn geen acties" %}</strong></nl-paragraph></div>
         {% endfor %}
     </div>
     {% if actions|length > 3 %}

src/open_inwoner/components/templates/components/Card/CategoryCard.html

@@ -6,7 +6,7 @@
 <div class="card card__category-card">
     <div class="card__body">
         {% if category %}
-            <h3 class="utrecht-heading-3 card__heading-3">
+            <h3 class="nl-heading nl-heading--level-3 card__heading-3">
                 <a href="{{ category.slug }}" class="link link__text">{{ category }}</a>
             </h3>
         {% endif %}
@@ -26,7 +26,7 @@ <h3 class="utrecht-heading-3 card__heading-3">
     <a href="{{ category.slug }}" class="card">
         <div class="card__body">
             {% if category %}
-                <p class="utrecht-heading-3 card__heading-3">
+                <p class="nl-heading nl-heading--level-3 card__heading-3">
                     <span class="link link__text">{{ category }}</span>
                 </p>
             {% endif %}

src/open_inwoner/components/templates/components/Card/DescriptionCard.html

@@ -8,7 +8,7 @@ <h2 class="card__heading-2">
                 <span class="link link__text">{{ title }}</span>
             </h2>
         {% endif %}
-        <p class="utrecht-paragraph">{{ description }}</p>
+        <nl-paragraph>{{ description }}</nl-paragraph>
         {% if object.end_date %}
             <div class="card__tabled">
                 <div>{% trans "Einddatum" %}:</div>

src/open_inwoner/components/templates/components/Card/LocationCard.html

@@ -2,11 +2,11 @@
 <div class="card card__location-card">
     <div class="card__body">
     {% if location_name %}
-        <h3 class="utrecht-heading-3 card__heading-3">{% link href=location.get_absolute_url primary=True text=location_name %}</h3>
+        <h3 class="nl-heading nl-heading--level-3 card__heading-3">{% link href=location.get_absolute_url primary=True text=location_name %}</h3>
     {% endif %}
         <div class="card__body--flex container--no-margin">
-            <p class="utrecht-paragraph">{{ address_line_1 }}</p>
-            <p class="utrecht-paragraph">{{ address_line_2 }}</p>
+            <nl-paragraph>{{ address_line_1 }}</nl-paragraph>
+            <nl-paragraph>{{ address_line_2 }}</nl-paragraph>
             {% if phonenumber %}
                 {% link href='tel:'|addstr:phonenumber secondary=True text=phonenumber %}
             {% endif %}

src/open_inwoner/components/templates/components/Card/ProductCard.html

@@ -15,7 +15,7 @@ <h2 class="card__heading-2"><span class="link link__text">{{ title }}</span></h2
             <div class="card__content">
             <h2 class="card__heading-2"><span class="link link__text">{{ title }}</span></h2>
     {% endif %}
-            <p class="utrecht-paragraph">{{ description }}</p>
+    <nl-paragraph>{{ description }}</nl-paragraph>
             {% if object.end_date %}
             <div class="card__tabled">
                 <div>{% trans "Einddatum" %}:</div>

src/open_inwoner/components/templates/components/Contact/ContactForm.html

@@ -26,9 +26,9 @@
                 {% if form_object.captcha %}
                     <div class="form__control ">
                         <div class="captcha">
-                            <p class="utrecht-paragraph">
+                            <nl-paragraph>
                                 {{ form_object.captcha.label }}<span class="label__label--required"> * </span>
-                            </p>
+                            </nl-paragraph>
                             <label class="label captcha__label">
                                 <span class="captcha__check">
                                     {{ form_object.request_session.captcha_question }}

src/open_inwoner/components/templates/components/Faq/Faq.html

@@ -3,13 +3,13 @@
 {% trans "Veelgestelde vragen" as default_title %}
 <aside class="faq" aria-label="{{ default_title }}">
     {% if not hide_title %}
-        <h2 id="faq" class="utrecht-heading-2">{{ title|default:default_title }}</h2>
+        <h2 id="faq" class="nl-heading nl-heading--level-2">{{ title|default:default_title }}</h2>
     {% endif %}
 
     <ul class="faq__list">
         {% for question in questions %}
             <li class="faq__list-item">
-                <h3 class="utrecht-heading-3">
+                <h3 class="nl-heading nl-heading--level-3">
                     {% firstof question.pk|slugify as id %}
                     {% firstof 'question-'|add:id|add:'-answer' as answer_id %}
                     {% link bold=True href='#'|add:answer_id icon='keyboard_arrow_down' secondary=True text=question.question toggle="open"  %}

src/open_inwoner/components/templates/components/File/FileList.html

@@ -3,9 +3,9 @@
 <div class="file-list">
     {% if title %}
         {% if h1 %}
-            <h1 class="utrecht-heading-1 utrecht-heading-1--bottom" id="files">{{ title }}</h1>
+            <h1 class="nl-heading nl-heading--level-1 nl-heading nl-heading--level-1--bottom" id="files">{{ title }}</h1>
         {% else %}
-            <h3 class="utrecht-heading-3" id="files">{{ title }}</h3>
+            <h3 class="nl-heading nl-heading--level-3" id="files">{{ title }}</h3>
         {% endif %}
     {% endif %}
     <ul class="file-list__list">
@@ -15,7 +15,7 @@ <h3 class="utrecht-heading-3" id="files">{{ title }}</h3>
                 {% file file=file.file created=created name=file.name uuid=file.uuid allow_delete=allow_delete download_url=download_url show_download=show_download %}
             </li>
         {% empty %}
-            <li><p class="utrecht-paragraph">{% trans "Er zijn nog geen bestanden geüpload" %}</p></li>
+            <li><nl-paragraph>{% trans "Er zijn nog geen bestanden geüpload" %}</nl-paragraph></li>
         {% endfor %}
     </ul>
 </div>