Merge pull request #1215 from maykinmedia/feature/2480-add-NLDS-parag…

…raphs

[#2480] Add NLDS paragraph components

package.json

@@ -42,7 +42,7 @@
     "@emotion/styled": "^11.3.0",
     "@fortawesome/fontawesome-free": "^6.4.2",
     "@joeattardi/emoji-button": "^4.6.4",
-    "@open-inwoner/design-tokens": "^0.0.3-alpha.0",
+    "@open-inwoner/design-tokens": "^0.0.5-alpha.5",
     "@tarekraafat/autocomplete.js": "^10.2.6",
     "bem.js": "^1.0.10",
     "emojibase-data": "^7.0.1",

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

@@ -8,7 +8,7 @@
         {% render_card tinted=True  %}
             {% get_solo 'configurations.SiteConfiguration' as config %}
             <h1 class="utrecht-heading-1">{% trans "E-mailadres bevestigen" %}</h1><br>
-            {% if verification_text %}<p class="p">{{ verification_text|linebreaksbr }}</p><br>{% endif %}
+            {% if verification_text %}<p class="utrecht-paragraph">{{ verification_text|linebreaksbr }}</p><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

@@ -22,9 +22,9 @@ <h1 class="utrecht-heading-1">{% trans 'Mijn berichten' %}</h1>
             {% for conv in conversations.page_obj %}
                 {% with conv_thread_url=conv.thread_url|qs_page:conversations.page_obj.number %}
                     {% if other_user.uuid == conv.other_user_uuid %}
-                        {% list_item conv.other_user_full_name|truncatechars:25 conv.content|truncatechars:25 conv_thread_url active=True %}
+                        {% list_item conv.other_user_full_name|truncatechars:25 conv.content|truncatechars:25 conv_thread_url active=True strong=True %}
                     {% else %}
-                        {% list_item conv.other_user_full_name|truncatechars:25 conv.content|truncatechars:25 conv_thread_url %}
+                        {% list_item conv.other_user_full_name|truncatechars:25 conv.content|truncatechars:25 conv_thread_url strong=True %}
                     {% endif %}
                 {% endwith %}
             {% endfor %}

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

@@ -6,7 +6,7 @@
 <h1 class="utrecht-heading-1">
     {% trans "Accept an invitation" %}
 </h1>
-<p class="p">
+<p class="utrecht-paragraph">
     {% blocktranslate with inviter_name=object.inviter.get_full_name %}Accept invitation from {{ inviter_name }} and join Open Inwoner Platform {% endblocktranslate %}
 </p>
 

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

@@ -7,7 +7,7 @@
         {% 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="p">{{ config.registration_text|urlize|linebreaksbr }}</p>{% endif %}
+            {% if config.registration_text %}<p class="utrecht-paragraph">{{ config.registration_text|urlize|linebreaksbr }}</p>{% endif %}
             <form method="POST" id="necessary-form" action="{{ request.get_full_path }}" class="form" novalidate>
                 {% csrf_token %}
 

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

@@ -3,5 +3,5 @@
 
 {% block content %}
 <h1 class="utrecht-heading-1">{% trans "Succes" %}</h1>
-<p class="p">{% trans "U bent nu geregistreerd" %}</p>
+<p class="utrecht-paragraph">{% trans "U bent nu geregistreerd" %}</p>
 {% endblock content %}

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

@@ -4,7 +4,7 @@
 {% block content %}
     {{ block.super }}
 
-    <p class="p">
+    <p class="utrecht-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.

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

@@ -4,7 +4,7 @@
 {% block content %}
     {{ block.super }}
 
-    <p class="p">
+    <p class="utrecht-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.' %}

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

@@ -3,7 +3,7 @@
 
 {% block content %}
     <h2 class="utrecht-heading-2">{% trans 'Account verificatie' %}</h2>
-    <p class="p">
+    <p class="utrecht-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

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

@@ -49,4 +49,4 @@ def test_banner_text_with_description_is_rendered_in_plugin(self):
         )
 
         self.assertIn(f'<h1 class="utrecht-heading-1">{title} </h1>', html)
-        self.assertIn(f'<p class="p">{description}</p>', html)
+        self.assertIn(f'<p class="utrecht-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="p">{% trans "Filter op:" %}</p>
+            <p class="utrecht-paragraph">{% trans "Filter op:" %}</p>
             {% 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" %}
@@ -89,7 +89,7 @@
                 </div>
             </div>
         {% empty %}
-            <div class="table__item" colspan="4"><p class="p">{% trans "er zijn geen acties gevonden met de huidige filters of er zijn geen acties" %}</p></div>
+            <div class="table__item" colspan="4"><p class="utrecht-paragraph">{% trans "er zijn geen acties gevonden met de huidige filters of er zijn geen acties" %}</p></div>
         {% endfor %}
     </div>
 </div>

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="p">{{ description }}</p>
+        <p class="utrecht-paragraph">{{ description }}</p>
         {% if object.end_date %}
             <div class="card__tabled">
                 <div>{% trans "Einddatum" %}:</div>

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

@@ -4,9 +4,9 @@
     {% if location_name %}
         <h3 class="utrecht-heading-3 card__heading-3">{% link href=location.get_absolute_url primary=True text=location_name %}</h3>
     {% endif %}
-        <div class="card__body--flex p--no-margin">
-            <p class="p">{{ address_line_1 }}</p>
-            <p class="p">{{ address_line_2 }}</p>
+        <div class="card__body--flex container--no-margin">
+            <p class="utrecht-paragraph">{{ address_line_1 }}</p>
+            <p class="utrecht-paragraph">{{ address_line_2 }}</p>
             {% 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="p">{{ description }}</p>
+            <p class="utrecht-paragraph">{{ description }}</p>
             {% if object.end_date %}
             <div class="card__tabled">
                 <div>{% trans "Einddatum" %}:</div>

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

@@ -28,7 +28,7 @@
             {% endrender_form %}
 
         {% else %}
-            <p class="p">{% trans "Contact formulier niet geconfigureerd." %}</p>
+            <p class="utrecht-paragraph">{% trans "Contact formulier niet geconfigureerd." %}</p>
         {% endif %}
         </div>
     {% endrender_column %}

src/open_inwoner/components/templates/components/Dashboard/Dashboard.html

@@ -4,7 +4,7 @@
     <ul class="dashboard__list">
         {% for metric in metrics %}
             <li class="dashboard__list-item">
-                <p class="p p--compact"><span class="dashboard__item-label">{{ metric.label }}</span> {{ metric.value|default:'-' }}</p>
+                <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-compact"><span class="dashboard__item-label">{{ metric.label }}</span> {{ metric.value|default:'-' }}</p>
             </li>
         {% endfor %}
     </ul>

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

@@ -14,7 +14,7 @@ <h3 class="utrecht-heading-3">
                     {% 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"  %}
                 </h3>
-                <div id="{{ answer_id }}" class="p faq__answer">{{ question.answer|ckeditor_content|safe }}</div>
+                <div id="{{ answer_id }}" class="faq__answer">{{ question.answer|ckeditor_content|safe }}</div>
             </li>
         {% endfor %}
     </ul>

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

@@ -3,15 +3,15 @@
 <aside class="file">
     <div class="file__container {% if recently_added %}file__container--recent{% endif %}">
         <div class="file__file">
-            <p class="file__symbol">
+            <div class="file__symbol">
                 {% if is_image %}
                     {% icon icon="image" outlined=True %}
                 {% else %}
                     {% icon icon="insert_drive_file" outlined=True %}
                 {% endif %}
-            </p>
+            </div>
 
-            <p class="file__data">
+            <div class="file__data">
                 {% if recently_added %}
                     <span class="file__file--recent">{% icon icon="fiber_manual_record" outlined=False extra_classes="file__file--recent" %}{% trans "Nieuw" %}</span>
                 {% endif %}
@@ -26,7 +26,7 @@
                     {% endif %}
                 </span>
                 <span class="file__date">{{ created|date:'j F Y' }}</span>
-            </p>
+            </div>
             {% if allow_delete %}
                 {% dropdown icon="more_horiz" %}
                     <div class="dropdown__item">
@@ -52,7 +52,7 @@
                 {% trans "Download" as download %}
                 {% link href=url text=download primary=True download=True hide_text=True extra_classes="file__download" icon="download" icon_outlined=True icon_position="before" %}
             {% endif %}
-            {% if description %}<p class="p p--small">{{ description }}</p>{% endif %}
+            {% if description %}<p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--small">{{ description }}</p>{% endif %}
         </div>
     </div>
 </aside>

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

@@ -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="p">{% trans "Er zijn nog geen bestanden geüpload" %}</p></li>
+            <li><p class="utrecht-paragraph">{% trans "Er zijn nog geen bestanden geüpload" %}</p></li>
         {% endfor %}
     </ul>
 </div>

src/open_inwoner/components/templates/components/Form/Autocomplete.html

@@ -10,7 +10,7 @@
         <input id="{{ field.auto_id }}-autocomplete" name="{{ field.name }}-autocomplete" class="input" type="search" spellcheck=false autocomplete="off" autocapitalize="off" {% include "django/forms/widgets/attrs.html" with widget=field.field.widget %}>
 
         {% if field.help_text %}
-            <p class="p">{{ field.help_text }}</p>
+            <p class="utrecht-paragraph">{{ field.help_text }}</p>
         {% endif %}
 
         {% if field.errors %}

src/open_inwoner/components/templates/components/Form/DateField.html

@@ -6,7 +6,7 @@
         {% if not no_label %}{{ field.label }}{% endif %}
         {{ field|addclass:"input datefield" }}
         {% if field.help_text and not no_help %}
-            <p class="p">{{ field.help_text }}</p>
+            <p class="utrecht-paragraph">{{ field.help_text }}</p>
         {% endif %}
 
         {% if field.errors %}

src/open_inwoner/components/templates/components/Form/Error.html

@@ -5,7 +5,7 @@
         <div class="notification notification--warning">
             {% icon icon="warning_amber" icon_position="before" outlined=True %}
             <div class="notification__content">
-                <p class="p p--compact">{{ message.message }}</p>
+                <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-compact">{{ message.message }}</p>
             </div>
         </div>
     </div>

src/open_inwoner/components/templates/components/Form/FileInput.html

@@ -13,7 +13,7 @@
         </label>
     {% endrender_card %}
 
-    {% if field.help_text %}<p class="p p--small p--centered">{{ field.help_text }}</p>{% endif %}
+    {% if field.help_text %}<p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--small utrecht-paragraph--oip-centered">{{ field.help_text }}</p>{% endif %}
     {% if field.errors %}{% errors errors=field.errors %}{% endif %}
 
     <div class="file-list" aria-live="polite">

src/open_inwoner/components/templates/components/Form/ImageCrop.html

@@ -5,11 +5,11 @@
         {{ field.label }}
         {{ field|addclass:"image-ratio" }}
         {% if field.help_text and not no_help %}
-            <p class="p">{{ field.help_text }}</p>
+            <p class="utrecht-paragraph">{{ field.help_text }}</p>
         {% endif %}
 
         {% if field.errors %}
             {% errors errors=field.errors %}
         {% endif %}
     </label>
-</div>
+</div>

src/open_inwoner/components/templates/components/Form/Input.html

@@ -9,7 +9,7 @@
         </span>
         {% field_as_widget field "input" form_id %}
         {% if field.help_text and not no_help %}
-            <p class="p">{{ field.help_text }}</p>
+            <p class="utrecht-paragraph">{{ field.help_text }}</p>
         {% endif %}
 
         {% if field.errors %}

src/open_inwoner/components/templates/components/Form/MultipleCheckbox.html

@@ -8,7 +8,7 @@
     </div>
 
     {% if field.help_text %}
-        <p class="p">{{ field.help_text }}</p>
+        <p class="utrecht-paragraph">{{ field.help_text }}</p>
     {% endif %}
 
     {% if field.errors %}

src/open_inwoner/components/templates/components/Form/MultipleRadio.html

@@ -15,7 +15,7 @@
     </fieldset>
 
     {% if field.help_text %}
-        <p class="p">{{ field.help_text }}</p>
+        <p class="utrecht-paragraph">{{ field.help_text }}</p>
     {% endif %}
 
     {% if field.errors %}

src/open_inwoner/components/templates/components/Form/Textarea.html

@@ -5,7 +5,7 @@
         {% firstof field.label label %}
         {{ field|addclass:"textarea" }}
         {% if field.help_text %}
-            <p class="p">{{ field.help_text }}</p>
+            <p class="utrecht-paragraph">{{ field.help_text }}</p>
         {% endif %}
 
         {% if field.errors %}

src/open_inwoner/components/templates/components/Header/Header.html

@@ -85,7 +85,7 @@
                     <div class="header__text-actions">
 
                         {% if request.user.is_authenticated %}
-                            <p class="p">
+                            <p class="utrecht-paragraph">
                                 {% icon icon="person" icon_position="before" outlined=True %}{% trans "Ingelogd als" %} {{ request.user.get_short_name }}
                             </p>
                             <ul class="header__list">

src/open_inwoner/components/templates/components/List/ListItem.html

@@ -1,12 +1,12 @@
 {% load link_tags %}
 <li class="list-item{% if active %} list-item--active{% endif %}{% if compact %} list-item--compact{% endif %}{% if extra_compact %} list-item--extra-compact{% endif %}">
     {% if href %}<a class="link" href="{{ href }}">{% endif %}
-    {% if caption %}<p class="p list-item__caption">{{ caption }}</p>{% endif %}
+    {% if caption %}<p class="utrecht-paragraph list-item__caption">{{ caption }}</p>{% endif %}
     {% if strong %}
-        <h4 class="utrecht-heading-4">{{ text }}</h4>
+        <p class="utrecht-heading-4">{{ text }}</p>
     {% else %}
-        <p class="p">{{ text }}</p>
+        <p class="utrecht-paragraph">{{ text }}</p>
     {% endif %}
-    {% if description %}<p class="p p--muted">{{ description }}</p>{% endif %}
+    {% if description %}<p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-muted">{{ description }}</p>{% endif %}
     {% if href %}</a>{% endif %}
 </li>

src/open_inwoner/components/templates/components/Messages/Message.html

@@ -7,11 +7,11 @@
             {% url "inbox:download" uuid=message.uuid as download_url %}
             {% link href=download_url text=message.file secondary=True download=True %}
         {% else %}
-            <p class="p">{{ message.content|linebreaksbr }}</p>
+            <p class="utrecht-paragraph">{{ message.content|linebreaksbr }}</p>
         {% endif %}
     </div>
 
     <footer class="message__footer">
-        <p class="p p--muted p--small" title="{{ message.created_on }}">{{ message.created_on|time }}</p>
+        <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-muted utrecht-paragraph--small" title="{{ message.created_on }}">{{ message.created_on|time }}</p>
     </footer>
 </aside>