From 098a4b9a8f7c98cb46c6eeb6ada2f9e6cfa726ea Mon Sep 17 00:00:00 2001 From: Jiro Ghianni Date: Tue, 21 May 2024 14:56:14 +0200 Subject: [PATCH 1/2] [#2480] Added NLDS paragraph components, and OIP modifiers --- package-lock.json | 14 +- package.json | 2 +- .../accounts/email_verification.html | 2 +- .../templates/accounts/invite_accept.html | 2 +- .../accounts/registration_necessary.html | 2 +- .../registration_complete.html | 2 +- .../registration/add_phone_number_1.html | 2 +- .../registration/add_phone_number_2.html | 2 +- .../templates/registration/verify_token.html | 2 +- .../cms/banner/tests/test_plugin_banner.py | 2 +- .../templates/components/Action/Actions.html | 4 +- .../components/Card/DescriptionCard.html | 2 +- .../components/Card/LocationCard.html | 6 +- .../components/Card/ProductCard.html | 2 +- .../components/Contact/ContactForm.html | 2 +- .../components/Dashboard/Dashboard.html | 2 +- .../templates/components/Faq/Faq.html | 2 +- .../templates/components/File/File.html | 10 +- .../templates/components/File/FileList.html | 2 +- .../components/Form/Autocomplete.html | 2 +- .../templates/components/Form/DateField.html | 2 +- .../templates/components/Form/Error.html | 2 +- .../templates/components/Form/FileInput.html | 2 +- .../templates/components/Form/ImageCrop.html | 4 +- .../templates/components/Form/Input.html | 2 +- .../components/Form/MultipleCheckbox.html | 2 +- .../components/Form/MultipleRadio.html | 2 +- .../templates/components/Form/Textarea.html | 2 +- .../templates/components/Header/Header.html | 2 +- .../templates/components/List/ListItem.html | 6 +- .../components/Messages/Message.html | 4 +- .../components/Messages/Messages.html | 8 +- .../components/Notification/Notification.html | 4 +- .../templates/components/Product/finder.html | 6 +- .../components/templatetags/string_tags.py | 2 +- .../components/tests/test_messages.py | 4 +- .../js/components/form/FileInput.js | 12 +- src/open_inwoner/js/components/map/index.js | 6 +- .../scss/components/Button/Button.scss | 16 ++- .../scss/components/Card/Card.scss | 4 +- .../components/Card/LocationCardList.scss | 13 +- .../CardContainer/CardContainer.scss | 13 +- .../scss/components/Cases/Cases.scss | 6 +- .../scss/components/File/File.scss | 2 +- .../scss/components/File/FileList.scss | 13 +- .../scss/components/Form/FileInput.scss | 6 +- .../scss/components/Form/Form.scss | 4 +- .../scss/components/Header/AnchorMenu.scss | 23 +++- .../scss/components/Header/Header.scss | 8 +- .../scss/components/List/_ListItem.scss | 10 +- .../scss/components/Map/_Map.scss | 23 +++- .../scss/components/Messages/_Messages.scss | 14 +- .../Notification/_Notification.scss | 6 +- .../components/Product/product-detail.scss | 6 + .../scss/components/Status/_StatusList.scss | 8 +- .../scss/components/Typography/H1.scss | 12 +- .../scss/components/Typography/H2.scss | 42 +++--- .../scss/components/Typography/H3.scss | 9 +- .../scss/components/Typography/H4.scss | 4 + .../scss/components/Typography/Link.scss | 9 +- .../scss/components/Typography/LinkList.scss | 9 +- .../scss/components/Typography/P.scss | 124 ++++++++++++------ .../scss/components/Typography/wysiwyg.scss | 11 +- .../scss/components/UserFeed/UserFeed.scss | 8 +- .../scss/overwrites/_ckeditor.scss | 18 ++- .../scss/views/_product_detail.scss | 9 +- src/open_inwoner/templates/404.html | 2 +- .../cms/banner/banner_text_plugin.html | 2 +- .../cms/collaborate/active_plans_plugin.html | 6 +- src/open_inwoner/templates/cms/fullwidth.html | 2 +- .../plugins/appointments/appointments.html | 2 +- .../cms/products/categories_plugin.html | 2 +- .../cms/products/product_location_plugin.html | 2 +- .../questionnaire/questionnaire_export.html | 8 +- .../templates/flatpages/default.html | 2 +- src/open_inwoner/templates/master.html | 6 +- .../templates/pages/cases/403.html | 2 +- .../templates/pages/cases/contact_form.html | 2 +- .../templates/pages/cases/document_form.html | 2 +- .../templates/pages/cases/list_inner.html | 2 +- .../templates/pages/cases/status_inner.html | 6 +- .../templates/pages/cases/statuses.html | 10 +- .../templates/pages/category/list.html | 2 +- .../templates/pages/contactmoment/list.html | 4 +- .../templates/pages/plans/create.html | 2 +- .../templates/pages/plans/detail.html | 4 +- .../templates/pages/plans/goal_edit.html | 2 +- .../templates/pages/plans/list.html | 2 +- .../templates/pages/product/detail.html | 6 +- .../templates/pages/product/finder.html | 2 +- .../pages/product/location_detail.html | 8 +- .../templates/pages/profile/categories.html | 2 +- .../pages/profile/contacts/list.html | 8 +- .../templates/pages/profile/me.html | 4 +- .../templates/pages/profile/mydata.html | 2 +- .../pages/profile/notifications.html | 2 +- .../questionnaire/questionnaire-step.html | 4 +- src/open_inwoner/templates/pages/search.html | 4 +- .../registration/password_change_done.html | 2 +- .../registration/password_change_form.html | 2 +- .../registration/password_reset_complete.html | 4 +- .../registration/password_reset_confirm.html | 4 +- .../registration/password_reset_done.html | 4 +- .../registration/password_reset_form.html | 4 +- 104 files changed, 446 insertions(+), 258 deletions(-) diff --git a/package-lock.json b/package-lock.json index bf6d26046e..41c23043af 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,7 +28,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.4", "@tarekraafat/autocomplete.js": "^10.2.6", "bem.js": "^1.0.10", "emojibase-data": "^7.0.1", @@ -4140,9 +4140,9 @@ } }, "node_modules/@open-inwoner/design-tokens": { - "version": "0.0.3-alpha.0", - "resolved": "https://registry.npmjs.org/@open-inwoner/design-tokens/-/design-tokens-0.0.3-alpha.0.tgz", - "integrity": "sha512-UXS6KK2onthn6+mWw7/DxzUvNHq5iGDaoKE2hLll3/O8EvsygTXm3PiTkxcsEpHQN6m9QLSY/GGSqg47Fg/Sdw==" + "version": "0.0.5-alpha.4", + "resolved": "https://registry.npmjs.org/@open-inwoner/design-tokens/-/design-tokens-0.0.5-alpha.4.tgz", + "integrity": "sha512-8DhJ1Tg/Hd/WFFzxn5TriX/3Lc9UC4j8wlJSGsfpRUKLsKNSvx5YKUQLqqMPYzJTeNXNebWJ5p3Km35Bu3wUdQ==" }, "node_modules/@popperjs/core": { "version": "2.11.5", @@ -22718,9 +22718,9 @@ } }, "@open-inwoner/design-tokens": { - "version": "0.0.3-alpha.0", - "resolved": "https://registry.npmjs.org/@open-inwoner/design-tokens/-/design-tokens-0.0.3-alpha.0.tgz", - "integrity": "sha512-UXS6KK2onthn6+mWw7/DxzUvNHq5iGDaoKE2hLll3/O8EvsygTXm3PiTkxcsEpHQN6m9QLSY/GGSqg47Fg/Sdw==" + "version": "0.0.5-alpha.4", + "resolved": "https://registry.npmjs.org/@open-inwoner/design-tokens/-/design-tokens-0.0.5-alpha.4.tgz", + "integrity": "sha512-8DhJ1Tg/Hd/WFFzxn5TriX/3Lc9UC4j8wlJSGsfpRUKLsKNSvx5YKUQLqqMPYzJTeNXNebWJ5p3Km35Bu3wUdQ==" }, "@popperjs/core": { "version": "2.11.5", diff --git a/package.json b/package.json index 73dde5857c..1be6de799c 100644 --- a/package.json +++ b/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.4", "@tarekraafat/autocomplete.js": "^10.2.6", "bem.js": "^1.0.10", "emojibase-data": "^7.0.1", diff --git a/src/open_inwoner/accounts/templates/accounts/email_verification.html b/src/open_inwoner/accounts/templates/accounts/email_verification.html index 591dbed32d..9ca1d11942 100644 --- a/src/open_inwoner/accounts/templates/accounts/email_verification.html +++ b/src/open_inwoner/accounts/templates/accounts/email_verification.html @@ -8,7 +8,7 @@ {% render_card tinted=True %} {% get_solo 'configurations.SiteConfiguration' as config %}

{% trans "E-mailadres bevestigen" %}


- {% if verification_text %}

{{ verification_text|linebreaksbr }}


{% endif %} + {% if verification_text %}

{{ verification_text|linebreaksbr }}


{% endif %}
{% csrf_token %} {% form_actions primary_icon='arrow_forward' primary_text=button_text %} diff --git a/src/open_inwoner/accounts/templates/accounts/invite_accept.html b/src/open_inwoner/accounts/templates/accounts/invite_accept.html index c874c31f88..1623f4c3c3 100644 --- a/src/open_inwoner/accounts/templates/accounts/invite_accept.html +++ b/src/open_inwoner/accounts/templates/accounts/invite_accept.html @@ -6,7 +6,7 @@

{% trans "Accept an invitation" %}

-

+

{% blocktranslate with inviter_name=object.inviter.get_full_name %}Accept invitation from {{ inviter_name }} and join Open Inwoner Platform {% endblocktranslate %}

diff --git a/src/open_inwoner/accounts/templates/accounts/registration_necessary.html b/src/open_inwoner/accounts/templates/accounts/registration_necessary.html index 373a946d63..95d0a02fbd 100644 --- a/src/open_inwoner/accounts/templates/accounts/registration_necessary.html +++ b/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 %}

{% trans "Registratie voltooien" %}


- {% if config.registration_text %}

{{ config.registration_text|urlize|linebreaksbr }}

{% endif %} + {% if config.registration_text %}

{{ config.registration_text|urlize|linebreaksbr }}

{% endif %} {% csrf_token %} diff --git a/src/open_inwoner/accounts/templates/django_registration/registration_complete.html b/src/open_inwoner/accounts/templates/django_registration/registration_complete.html index 36256e8c53..5e9962d694 100644 --- a/src/open_inwoner/accounts/templates/django_registration/registration_complete.html +++ b/src/open_inwoner/accounts/templates/django_registration/registration_complete.html @@ -3,5 +3,5 @@ {% block content %}

{% trans "Succes" %}

-

{% trans "U bent nu geregistreerd" %}

+

{% trans "U bent nu geregistreerd" %}

{% endblock content %} diff --git a/src/open_inwoner/accounts/templates/registration/add_phone_number_1.html b/src/open_inwoner/accounts/templates/registration/add_phone_number_1.html index 3c78e783b0..dc8b431567 100644 --- a/src/open_inwoner/accounts/templates/registration/add_phone_number_1.html +++ b/src/open_inwoner/accounts/templates/registration/add_phone_number_1.html @@ -4,7 +4,7 @@ {% block content %} {{ block.super }} -

+

{% 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. diff --git a/src/open_inwoner/accounts/templates/registration/add_phone_number_2.html b/src/open_inwoner/accounts/templates/registration/add_phone_number_2.html index 65eca03665..4f07f305c5 100644 --- a/src/open_inwoner/accounts/templates/registration/add_phone_number_2.html +++ b/src/open_inwoner/accounts/templates/registration/add_phone_number_2.html @@ -4,7 +4,7 @@ {% block content %} {{ block.super }} -

+

{% 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 Vorige om uw telefoon nummer te controleren en eventueel aan te passen.' %} diff --git a/src/open_inwoner/accounts/templates/registration/verify_token.html b/src/open_inwoner/accounts/templates/registration/verify_token.html index 898259acf5..7f05ec1e29 100644 --- a/src/open_inwoner/accounts/templates/registration/verify_token.html +++ b/src/open_inwoner/accounts/templates/registration/verify_token.html @@ -3,7 +3,7 @@ {% block content %}

{% trans 'Account verificatie' %}

-

+

{% 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 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 32dab5d998..cc3e380467 100644 --- a/src/open_inwoner/cms/banner/tests/test_plugin_banner.py +++ b/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'

{title}

', html) - self.assertIn(f'

{description}

', html) + self.assertIn(f'

{description}

', html) diff --git a/src/open_inwoner/components/templates/components/Action/Actions.html b/src/open_inwoner/components/templates/components/Action/Actions.html index 31eefdb828..49bb6d0c7e 100644 --- a/src/open_inwoner/components/templates/components/Action/Actions.html +++ b/src/open_inwoner/components/templates/components/Action/Actions.html @@ -7,7 +7,7 @@ {% button text=_("Filter") type="button" bordered=True %}
-

{% trans "Filter op:" %}

+

{% trans "Filter op:" %}

{% 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 @@
{% empty %} -

{% trans "er zijn geen acties gevonden met de huidige filters of er zijn geen acties" %}

+

{% trans "er zijn geen acties gevonden met de huidige filters of er zijn geen acties" %}

{% endfor %} diff --git a/src/open_inwoner/components/templates/components/Card/DescriptionCard.html b/src/open_inwoner/components/templates/components/Card/DescriptionCard.html index d42f567593..ca3816cf2e 100644 --- a/src/open_inwoner/components/templates/components/Card/DescriptionCard.html +++ b/src/open_inwoner/components/templates/components/Card/DescriptionCard.html @@ -8,7 +8,7 @@

{{ title }}

{% endif %} -

{{ description }}

+

{{ description }}

{% if object.end_date %}
{% trans "Einddatum" %}:
diff --git a/src/open_inwoner/components/templates/components/Card/LocationCard.html b/src/open_inwoner/components/templates/components/Card/LocationCard.html index a7a84acc4c..65f13ea926 100644 --- a/src/open_inwoner/components/templates/components/Card/LocationCard.html +++ b/src/open_inwoner/components/templates/components/Card/LocationCard.html @@ -4,9 +4,9 @@ {% if location_name %}

{% link href=location.get_absolute_url primary=True text=location_name %}

{% endif %} -
-

{{ address_line_1 }}

-

{{ address_line_2 }}

+
+

{{ address_line_1 }}

+

{{ address_line_2 }}

{% if phonenumber %} {% link href='tel:'|addstr:phonenumber secondary=True text=phonenumber %} {% endif %} diff --git a/src/open_inwoner/components/templates/components/Card/ProductCard.html b/src/open_inwoner/components/templates/components/Card/ProductCard.html index a3addc8c78..02f9a1e4db 100644 --- a/src/open_inwoner/components/templates/components/Card/ProductCard.html +++ b/src/open_inwoner/components/templates/components/Card/ProductCard.html @@ -15,7 +15,7 @@

{{ title }}

{{ title }}

{% endif %} -

{{ description }}

+

{{ description }}

{% if object.end_date %}
{% trans "Einddatum" %}:
diff --git a/src/open_inwoner/components/templates/components/Contact/ContactForm.html b/src/open_inwoner/components/templates/components/Contact/ContactForm.html index 7a7c542283..fad8315e41 100644 --- a/src/open_inwoner/components/templates/components/Contact/ContactForm.html +++ b/src/open_inwoner/components/templates/components/Contact/ContactForm.html @@ -28,7 +28,7 @@ {% endrender_form %} {% else %} -

{% trans "Contact formulier niet geconfigureerd." %}

+

{% trans "Contact formulier niet geconfigureerd." %}

{% endif %}
{% endrender_column %} diff --git a/src/open_inwoner/components/templates/components/Dashboard/Dashboard.html b/src/open_inwoner/components/templates/components/Dashboard/Dashboard.html index a8c99414cd..cf9d1ee43c 100644 --- a/src/open_inwoner/components/templates/components/Dashboard/Dashboard.html +++ b/src/open_inwoner/components/templates/components/Dashboard/Dashboard.html @@ -4,7 +4,7 @@
    {% for metric in metrics %}
  • -

    {{ metric.label }} {{ metric.value|default:'-' }}

    +

    {{ metric.label }} {{ metric.value|default:'-' }}

    • {% endfor %}
diff --git a/src/open_inwoner/components/templates/components/Faq/Faq.html b/src/open_inwoner/components/templates/components/Faq/Faq.html index 5c6d544412..87fd4cc8b1 100644 --- a/src/open_inwoner/components/templates/components/Faq/Faq.html +++ b/src/open_inwoner/components/templates/components/Faq/Faq.html @@ -14,7 +14,7 @@

{% 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" %}

-
{{ question.answer|ckeditor_content|safe }}
+
{{ question.answer|ckeditor_content|safe }}
{% endfor %} diff --git a/src/open_inwoner/components/templates/components/File/File.html b/src/open_inwoner/components/templates/components/File/File.html index 545d5b5c8e..74eebb98a0 100644 --- a/src/open_inwoner/components/templates/components/File/File.html +++ b/src/open_inwoner/components/templates/components/File/File.html @@ -3,15 +3,15 @@ diff --git a/src/open_inwoner/components/templates/components/File/FileList.html b/src/open_inwoner/components/templates/components/File/FileList.html index 7e1166f3dd..9dc45851fe 100644 --- a/src/open_inwoner/components/templates/components/File/FileList.html +++ b/src/open_inwoner/components/templates/components/File/FileList.html @@ -15,7 +15,7 @@

{{ title }}

{% file file=file.file created=created name=file.name uuid=file.uuid allow_delete=allow_delete download_url=download_url show_download=show_download %} {% empty %} -

  • {% trans "Er zijn nog geen bestanden geüpload" %}

    • +

  • {% trans "Er zijn nog geen bestanden geüpload" %}

    • {% endfor %}
    diff --git a/src/open_inwoner/components/templates/components/Form/Autocomplete.html b/src/open_inwoner/components/templates/components/Form/Autocomplete.html index 0755f06a3f..de512e0cb8 100644 --- a/src/open_inwoner/components/templates/components/Form/Autocomplete.html +++ b/src/open_inwoner/components/templates/components/Form/Autocomplete.html @@ -10,7 +10,7 @@ {% if field.help_text %} -

    {{ field.help_text }}

    +

    {{ field.help_text }}

    {% endif %} {% if field.errors %} diff --git a/src/open_inwoner/components/templates/components/Form/DateField.html b/src/open_inwoner/components/templates/components/Form/DateField.html index d23b4b3fd0..9656931b9c 100644 --- a/src/open_inwoner/components/templates/components/Form/DateField.html +++ b/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 %} -

    {{ field.help_text }}

    +

    {{ field.help_text }}

    {% endif %} {% if field.errors %} diff --git a/src/open_inwoner/components/templates/components/Form/Error.html b/src/open_inwoner/components/templates/components/Form/Error.html index 8496f683e0..8d90046f0d 100644 --- a/src/open_inwoner/components/templates/components/Form/Error.html +++ b/src/open_inwoner/components/templates/components/Form/Error.html @@ -5,7 +5,7 @@
    {% icon icon="warning_amber" icon_position="before" outlined=True %}
    -

    {{ message.message }}

    +

    {{ message.message }}

    diff --git a/src/open_inwoner/components/templates/components/Form/FileInput.html b/src/open_inwoner/components/templates/components/Form/FileInput.html index 0aa592f18a..f527861e20 100644 --- a/src/open_inwoner/components/templates/components/Form/FileInput.html +++ b/src/open_inwoner/components/templates/components/Form/FileInput.html @@ -13,7 +13,7 @@ {% endrender_card %} - {% if field.help_text %}

    {{ field.help_text }}

    {% endif %} + {% if field.help_text %}

    {{ field.help_text }}

    {% endif %} {% if field.errors %}{% errors errors=field.errors %}{% endif %}
    diff --git a/src/open_inwoner/components/templates/components/Form/ImageCrop.html b/src/open_inwoner/components/templates/components/Form/ImageCrop.html index 4be6e47ff3..dea4321474 100644 --- a/src/open_inwoner/components/templates/components/Form/ImageCrop.html +++ b/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 %} -

    {{ field.help_text }}

    +

    {{ field.help_text }}

    {% endif %} {% if field.errors %} {% errors errors=field.errors %} {% endif %} -
    \ No newline at end of file +
    diff --git a/src/open_inwoner/components/templates/components/Form/Input.html b/src/open_inwoner/components/templates/components/Form/Input.html index 334191aeac..28a7a5f91f 100644 --- a/src/open_inwoner/components/templates/components/Form/Input.html +++ b/src/open_inwoner/components/templates/components/Form/Input.html @@ -9,7 +9,7 @@ {% field_as_widget field "input" form_id %} {% if field.help_text and not no_help %} -

    {{ field.help_text }}

    +

    {{ field.help_text }}

    {% endif %} {% if field.errors %} diff --git a/src/open_inwoner/components/templates/components/Form/MultipleCheckbox.html b/src/open_inwoner/components/templates/components/Form/MultipleCheckbox.html index cf1dfd8b21..0ffeabf1ce 100644 --- a/src/open_inwoner/components/templates/components/Form/MultipleCheckbox.html +++ b/src/open_inwoner/components/templates/components/Form/MultipleCheckbox.html @@ -8,7 +8,7 @@ {% if field.help_text %} -

    {{ field.help_text }}

    +

    {{ field.help_text }}

    {% endif %} {% if field.errors %} diff --git a/src/open_inwoner/components/templates/components/Form/MultipleRadio.html b/src/open_inwoner/components/templates/components/Form/MultipleRadio.html index 65d7bdf819..7a68c6459a 100644 --- a/src/open_inwoner/components/templates/components/Form/MultipleRadio.html +++ b/src/open_inwoner/components/templates/components/Form/MultipleRadio.html @@ -15,7 +15,7 @@ {% if field.help_text %} -

    {{ field.help_text }}

    +

    {{ field.help_text }}

    {% endif %} {% if field.errors %} diff --git a/src/open_inwoner/components/templates/components/Form/Textarea.html b/src/open_inwoner/components/templates/components/Form/Textarea.html index 10ebb10def..17822ae4f8 100644 --- a/src/open_inwoner/components/templates/components/Form/Textarea.html +++ b/src/open_inwoner/components/templates/components/Form/Textarea.html @@ -5,7 +5,7 @@ {% firstof field.label label %} {{ field|addclass:"textarea" }} {% if field.help_text %} -

    {{ field.help_text }}

    +

    {{ field.help_text }}

    {% endif %} {% if field.errors %} diff --git a/src/open_inwoner/components/templates/components/Header/Header.html b/src/open_inwoner/components/templates/components/Header/Header.html index 450a9541c7..ad38f3eb75 100644 --- a/src/open_inwoner/components/templates/components/Header/Header.html +++ b/src/open_inwoner/components/templates/components/Header/Header.html @@ -85,7 +85,7 @@
    {% if request.user.is_authenticated %} -

    +

    {% icon icon="person" icon_position="before" outlined=True %}{% trans "Ingelogd als" %} {{ request.user.get_short_name }}

    -

    {{ message.created_on|time }}

    +

    {{ message.created_on|time }}

    diff --git a/src/open_inwoner/components/templates/components/Messages/Messages.html b/src/open_inwoner/components/templates/components/Messages/Messages.html index 2959266819..14e1ab745e 100644 --- a/src/open_inwoner/components/templates/components/Messages/Messages.html +++ b/src/open_inwoner/components/templates/components/Messages/Messages.html @@ -2,8 +2,8 @@
    -

    {{ subject }}

    -

    {{ status }}

    +

    {{ subject }}

    +

    {{ status }}

    @@ -17,7 +17,7 @@

    {{ subject }}

    {% for day in days %}
  • -

    {{ day.text }}

    +

    {{ day.text }}

      @@ -68,7 +68,7 @@

      {{ day.text }}

      {% form_actions primary_text=_("Verzenden") primary_icon='arrow_forward' %} {% endrender_form %} {% else %} -

      {% trans "De gebruiker is inactief. Het is niet mogelijk een bericht te sturen." %}

      +

      {% trans "De gebruiker is inactief. Het is niet mogelijk een bericht te sturen." %}

      {% endif %}
    • diff --git a/src/open_inwoner/components/templates/components/Notification/Notification.html b/src/open_inwoner/components/templates/components/Notification/Notification.html index 69f947a7ea..cea1fa2d00 100644 --- a/src/open_inwoner/components/templates/components/Notification/Notification.html +++ b/src/open_inwoner/components/templates/components/Notification/Notification.html @@ -8,7 +8,7 @@
    {% if title %}

    {{ title }}

    {% endif %} - {% if notification %}

    {{ notification }}

    {% endif %} + {% if notification %}

    {{ notification }}

    {% endif %} {% if action %}{% button href=action text=action_text %}{% endif %} {% if contents %} {{ contents }} @@ -16,7 +16,7 @@ {% if as_markdown %} {{ message|markdown|safe }} {% else %} -

    {{ message }}

    +

    {{ message }}

    {% endif %} {% endif %}
    diff --git a/src/open_inwoner/components/templates/components/Product/finder.html b/src/open_inwoner/components/templates/components/Product/finder.html index 278f8378a8..e109662bd2 100644 --- a/src/open_inwoner/components/templates/components/Product/finder.html +++ b/src/open_inwoner/components/templates/components/Product/finder.html @@ -2,13 +2,13 @@ {% render_column span=6 compact=True extra_classes="product-finder" %}

    {{configurable_text.home_page.home_product_finder_title}}

    -

    {{configurable_text.home_page.home_product_finder_intro|linebreaksbr}}

    +

    {{configurable_text.home_page.home_product_finder_intro|linebreaksbr}}

    {% if not conditions_done %}

    {{ condition.question }}

    {% if condition.rule %} -

    {{ condition.rule }}

    +

    {{ condition.rule }}

    {% endif %} {% if show_previous %} @@ -17,7 +17,7 @@

    {{ condition.question }}

    {% form id="product-finder" spaceless=True form_object=form method="POST" submit_text=primary_text %} {% endif %} {% else %} -

    +

    {% trans "Er zijn geen extra vragen meer. Bekijk de producten hiernaast." %}

    {% render_form id="product-finder" method="POST" form=form %} diff --git a/src/open_inwoner/components/templatetags/string_tags.py b/src/open_inwoner/components/templatetags/string_tags.py index 8d79d0e66f..5662f1c87f 100644 --- a/src/open_inwoner/components/templatetags/string_tags.py +++ b/src/open_inwoner/components/templatetags/string_tags.py @@ -25,7 +25,7 @@ def optional_paragraph(optional_text: str) -> str: if not optional_text: return "" return format_html( - '

    {optional_text}

    '.format( + '

    {optional_text}

    '.format( optional_text=linebreaksbr(optional_text) ) ) diff --git a/src/open_inwoner/components/tests/test_messages.py b/src/open_inwoner/components/tests/test_messages.py index 65cdc7afde..5885b32378 100644 --- a/src/open_inwoner/components/tests/test_messages.py +++ b/src/open_inwoner/components/tests/test_messages.py @@ -143,4 +143,6 @@ def test_status(self): Tests that: - Header renders the correct status. """ - self.assertTextContent(".messages__header .p", "Dolor sit amet.", self.config) + self.assertTextContent( + ".messages__header .utrecht-paragraph", "Dolor sit amet.", self.config + ) diff --git a/src/open_inwoner/js/components/form/FileInput.js b/src/open_inwoner/js/components/form/FileInput.js index a6a64a9083..f4b0ce9d25 100644 --- a/src/open_inwoner/js/components/form/FileInput.js +++ b/src/open_inwoner/js/components/form/FileInput.js @@ -293,14 +293,14 @@ export class FileInput extends Component { diff --git a/src/open_inwoner/components/templates/components/Form/FileInput.html b/src/open_inwoner/components/templates/components/Form/FileInput.html index f527861e20..3760fb5278 100644 --- a/src/open_inwoner/components/templates/components/Form/FileInput.html +++ b/src/open_inwoner/components/templates/components/Form/FileInput.html @@ -13,7 +13,7 @@ {% endrender_card %} - {% if field.help_text %}

    {{ field.help_text }}

    {% endif %} + {% if field.help_text %}

    {{ field.help_text }}

    {% endif %} {% if field.errors %}{% errors errors=field.errors %}{% endif %}
    diff --git a/src/open_inwoner/components/templates/components/List/ListItem.html b/src/open_inwoner/components/templates/components/List/ListItem.html index ab415d3aa5..4f62ebf2f5 100644 --- a/src/open_inwoner/components/templates/components/List/ListItem.html +++ b/src/open_inwoner/components/templates/components/List/ListItem.html @@ -3,7 +3,7 @@ {% if href %}{% endif %} {% if caption %}

    {{ caption }}

    {% endif %} {% if strong %} -

    {{ text }}

    +

    {{ text }}

    {% else %}

    {{ text }}

    {% endif %} diff --git a/src/open_inwoner/components/templates/components/Messages/Message.html b/src/open_inwoner/components/templates/components/Messages/Message.html index 1b29f14964..34003b3b07 100644 --- a/src/open_inwoner/components/templates/components/Messages/Message.html +++ b/src/open_inwoner/components/templates/components/Messages/Message.html @@ -12,6 +12,6 @@
    -

    {{ message.created_on|time }}

    +

    {{ message.created_on|time }}

    diff --git a/src/open_inwoner/components/templates/components/Messages/Messages.html b/src/open_inwoner/components/templates/components/Messages/Messages.html index 14e1ab745e..8df2113ee0 100644 --- a/src/open_inwoner/components/templates/components/Messages/Messages.html +++ b/src/open_inwoner/components/templates/components/Messages/Messages.html @@ -2,7 +2,7 @@
    -

    {{ subject }}

    +

    {{ subject }}

    {{ status }}

    @@ -17,7 +17,7 @@

    {{ subject }}

    {% for day in days %}
  • -

    {{ day.text }}

    +

    {{ day.text }}

      @@ -68,7 +68,7 @@

      {{ subject }}

      {% form_actions primary_text=_("Verzenden") primary_icon='arrow_forward' %} {% endrender_form %} {% else %} -

      {% trans "De gebruiker is inactief. Het is niet mogelijk een bericht te sturen." %}

      +

      {% trans "De gebruiker is inactief. Het is niet mogelijk een bericht te sturen." %}

      {% endif %}
    • diff --git a/src/open_inwoner/components/tests/test_list.py b/src/open_inwoner/components/tests/test_list.py index 302860f9d3..096a5a5671 100644 --- a/src/open_inwoner/components/tests/test_list.py +++ b/src/open_inwoner/components/tests/test_list.py @@ -21,11 +21,11 @@ def test_render(self): self.assertRender({"text": "Lorem ipsum"}) def test_text(self): - self.assertTextContent("h4", "Lorem ipsum", {"text": "Lorem ipsum"}) + self.assertTextContent("p", "Lorem ipsum", {"text": "Lorem ipsum"}) def test_description(self): self.assertTextContent( - "p", "Dolor sit", {"text": "Lorem ipsum", "description": "Dolor sit"} + "p", "Lorem ipsum", {"text": "Lorem ipsum", "description": "Dolor sit"} ) def test_href(self): diff --git a/src/open_inwoner/js/components/form/FileInput.js b/src/open_inwoner/js/components/form/FileInput.js index f4b0ce9d25..688ece6d37 100644 --- a/src/open_inwoner/js/components/form/FileInput.js +++ b/src/open_inwoner/js/components/form/FileInput.js @@ -308,13 +308,13 @@ export class FileInput extends Component { ${ typeError && sizeError ? ` -

    +

    Dit type bestand (${ext}) is ongeldig en te groot. Geldige bestandstypen zijn: ${uploadFileTypes}

    ` : typeError || sizeError ? ` -

    +

    ${ typeError diff --git a/src/open_inwoner/scss/components/Product/product-detail.scss b/src/open_inwoner/scss/components/Product/product-detail.scss index 4acd9e3fb5..6391c6ce5b 100644 --- a/src/open_inwoner/scss/components/Product/product-detail.scss +++ b/src/open_inwoner/scss/components/Product/product-detail.scss @@ -43,7 +43,7 @@ } .utrecht-paragraph--oip-summary { - margin-bottom: var(--gutter-width); + margin-bottom: var(--gutter-width) !important; } /// Legacy style diff --git a/src/open_inwoner/scss/components/Profile/_personal-overview.scss b/src/open_inwoner/scss/components/Profile/_personal-overview.scss index 2841a845ca..368fb2c828 100644 --- a/src/open_inwoner/scss/components/Profile/_personal-overview.scss +++ b/src/open_inwoner/scss/components/Profile/_personal-overview.scss @@ -63,6 +63,12 @@ } &.profile-section__newsletters { + .form { + gap: var(--spacing-large); + } + .checkbox__p.newsletter-remarks { + line-height: var(--font-line-height-body); + } .button { padding: var(--spacing-medium) var(--spacing-giant); } diff --git a/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss b/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss index c1d03cd3f4..dc17354774 100644 --- a/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss +++ b/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss @@ -1,10 +1,20 @@ .questionnaire { &__fieldset { border: 0 solid transparent; + legend { padding: 0; } + + *[class^='utrecht-heading'] + .utrecht-paragraph--oip-compact { + margin-top: 0; + } + + .utrecht-paragraph + .form { + margin-top: 0; + } } + &__list { list-style: none; margin: 0; diff --git a/src/open_inwoner/scss/components/Typography/P.scss b/src/open_inwoner/scss/components/Typography/P.scss index d33427c607..fcbba2e43a 100644 --- a/src/open_inwoner/scss/components/Typography/P.scss +++ b/src/open_inwoner/scss/components/Typography/P.scss @@ -7,11 +7,7 @@ // Takes style values from our own design-tokens NPM package margin: 0; - &-small { - font-size: var(--oip-utrecht-paragraph-small-font-size); - line-height: var(--oip-utrecht-paragraph-small-line-height); - } - + // Extensions of the utrecht-paragraph component with OIP-specific styles. &-muted { color: var(--oip-utrecht-paragraph-muted-color); } @@ -21,8 +17,8 @@ } &-compact { - margin-top: 0 !important; - margin-bottom: 0 !important; + margin-top: var(--oip-utrecht-paragraph-compact-margin-top); + margin-bottom: var(--oip-utrecht-paragraph-compact-margin-bottom); } &:empty { @@ -62,11 +58,14 @@ .content { text-decoration: underline; } + &:hover { text-decoration: none; } + .material-icons { text-decoration: none; + &:hover { text-decoration: none; } @@ -120,11 +119,14 @@ .content { text-decoration: underline; } + &:hover { text-decoration: none; } + .material-icons { text-decoration: none; + &:hover { text-decoration: none; } diff --git a/src/open_inwoner/scss/components/UserFeed/UserFeed.scss b/src/open_inwoner/scss/components/UserFeed/UserFeed.scss index a30e7fbc29..9d566734aa 100644 --- a/src/open_inwoner/scss/components/UserFeed/UserFeed.scss +++ b/src/open_inwoner/scss/components/UserFeed/UserFeed.scss @@ -14,7 +14,7 @@ background-color: var(--color-white); color: var(--color-red-notification); display: block; - line-height: var(--font-line-height-body); + line-height: var(--utrecht-document-line-height); position: relative; & * { @@ -71,6 +71,7 @@ } } + /// Cards in userfeed .card { justify-content: flex-start; @@ -101,6 +102,7 @@ font-family: var(--font-family-body); font-size: var(--font-size-body-small); font-weight: normal; + line-height: var(--utrecht-document-line-height); overflow-wrap: break-word; word-break: normal; padding: var(--font-size-body-small) var(--card-spacing) 0 @@ -113,7 +115,7 @@ color: var(--utrecht-heading-color); font-family: var(--utrecht-heading-font-family); font-size: var(--font-size-body); - line-height: var(--font-line-height-body); + line-height: var(--utrecht-document-line-height); margin: 0; padding: var(--spacing-medium) var(--row-height-big) var(--card-spacing) var(--card-spacing); diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss index ca17b98f4d..9e715264f8 100644 --- a/src/open_inwoner/scss/views/App.scss +++ b/src/open_inwoner/scss/views/App.scss @@ -36,7 +36,7 @@ --color-green: #d5e7d4; --color-green-dark: #248641; --color-red: #e50026; - --color-red-notification: #d94100; + --color-red-notification: var(--oip-color-red-notification); --color-white: #fff; --color-yellow: #f8d62d; --color-yellow-dark: #cca000; diff --git a/src/open_inwoner/templates/pages/cases/document_form.html b/src/open_inwoner/templates/pages/cases/document_form.html index 349b51ca8d..eee49080de 100644 --- a/src/open_inwoner/templates/pages/cases/document_form.html +++ b/src/open_inwoner/templates/pages/cases/document_form.html @@ -8,6 +8,6 @@ {% file_input form.files max_upload_size=openzaak_config.max_upload_size allowed_file_extensions=openzaak_config.allowed_file_extensions %} {% form_actions primary_text=_("Upload documenten") enctype="multipart/form-data" fullwidth=True %}

    {% endrender_form %} diff --git a/src/open_inwoner/templates/pages/cases/list_inner.html b/src/open_inwoner/templates/pages/cases/list_inner.html index 34f5a403ed..13fe550553 100644 --- a/src/open_inwoner/templates/pages/cases/list_inner.html +++ b/src/open_inwoner/templates/pages/cases/list_inner.html @@ -1,7 +1,7 @@ {% load link_tags button_tags i18n grid_tags icon_tags list_tags pagination_tags utils %}

    {{ page_title }} ({{ paginator.count }})

    -

    {{ title_text }}

    +

    {{ title_text }}

    {% render_grid %} diff --git a/src/open_inwoner/templates/pages/product/detail.html b/src/open_inwoner/templates/pages/product/detail.html index 0fc0a285d1..1844d2e921 100644 --- a/src/open_inwoner/templates/pages/product/detail.html +++ b/src/open_inwoner/templates/pages/product/detail.html @@ -33,7 +33,7 @@

    {% endif %}

    {% include "components/Tag/Tag.html" with tags=object.tags.all only %} -

    {{ object.summary }}

    +

    {{ object.summary }}

    {# Collapsable content #}