Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#2480] Add NLDS paragraph components #1215

Merged
merged 2 commits into from
Jun 4, 2024
Merged

[#2480] Add NLDS paragraph components #1215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
098a4b9
[#2480] Added NLDS paragraph components, and OIP modifiers
jiromaykin May 21, 2024
674573f
[#2480] Added use of --small modifier, corrected hierarchy in message…
jiromaykin May 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/accounts/templates/accounts/email_verification.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
4 changes: 2 additions & 2 deletions src/open_inwoner/accounts/templates/accounts/inbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/accounts/templates/accounts/invite_accept.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/accounts/templates/accounts/registration_necessary.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}

Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/accounts/templates/django_registration/registration_complete.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
2 changes: 1 addition & 1 deletion src/open_inwoner/accounts/templates/registration/add_phone_number_1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/accounts/templates/registration/add_phone_number_2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.' %}
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/accounts/templates/registration/verify_token.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/cms/banner/tests/test_plugin_banner.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
4 changes: 2 additions & 2 deletions src/open_inwoner/components/templates/components/Action/Actions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" %}
Expand Down Expand Up @@ -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>
2 changes: 1 addition & 1 deletion src/open_inwoner/components/templates/components/Card/DescriptionCard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/open_inwoner/components/templates/components/Card/LocationCard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/components/templates/components/Card/ProductCard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/components/templates/components/Contact/ContactForm.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/components/templates/components/Dashboard/Dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/components/templates/components/Faq/Faq.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions src/open_inwoner/components/templates/components/File/File.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand All @@ -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">
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/components/templates/components/File/FileList.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion src/open_inwoner/components/templates/components/Form/Autocomplete.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/components/templates/components/Form/DateField.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/components/templates/components/Form/Error.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/components/templates/components/Form/FileInput.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions src/open_inwoner/components/templates/components/Form/ImageCrop.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion src/open_inwoner/components/templates/components/Form/Input.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/components/templates/components/Form/MultipleCheckbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/components/templates/components/Form/MultipleRadio.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/components/templates/components/Form/Textarea.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/components/templates/components/Header/Header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
8 changes: 4 additions & 4 deletions src/open_inwoner/components/templates/components/List/ListItem.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
4 changes: 2 additions & 2 deletions src/open_inwoner/components/templates/components/Messages/Message.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Loading
Loading