[#2480] Added use of --small modifier, corrected hierarchy in message…

…center
maykinmedia · Jun 2, 2024 · 674573f · 674573f
1 parent 098a4b9
commit 674573f
Show file tree

Hide file tree

Showing 19 changed files with 55 additions and 35 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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.5-alpha.4",
+    "@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",

diff --git a/src/open_inwoner/accounts/templates/accounts/inbox.html b/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 %}

diff --git a/src/open_inwoner/components/templates/components/File/File.html b/src/open_inwoner/components/templates/components/File/File.html
@@ -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="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-small">{{ description }}</p>{% endif %}
+            {% if description %}<p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--small">{{ description }}</p>{% endif %}
         </div>
     </div>
 </aside>

diff --git a/src/open_inwoner/components/templates/components/Form/FileInput.html b/src/open_inwoner/components/templates/components/Form/FileInput.html
@@ -13,7 +13,7 @@
         </label>
     {% endrender_card %}
 
-    {% if field.help_text %}<p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-small utrecht-paragraph--oip-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">

diff --git 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 %}<a class="link" href="{{ href }}">{% 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="utrecht-paragraph">{{ text }}</p>
     {% endif %}

diff --git a/src/open_inwoner/components/templates/components/Messages/Message.html b/src/open_inwoner/components/templates/components/Messages/Message.html
@@ -12,6 +12,6 @@
     </div>
 
     <footer class="message__footer">
-        <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-muted utrecht-paragraph--oip-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>
diff --git a/src/open_inwoner/components/templates/components/Messages/Messages.html b/src/open_inwoner/components/templates/components/Messages/Messages.html
@@ -2,7 +2,7 @@
 
 <section class="messages">
     <header class="messages__header">
-        <h3 class="utrecht-heading-4">{{ subject }}</h3>
+        <h2 class="utrecht-heading-4">{{ subject }}</h2>
         <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-muted">{{ status }}</p>
     </header>
 
@@ -17,7 +17,7 @@ <h3 class="utrecht-heading-4">{{ subject }}</h3>
             {% for day in days %}
                 <li class="messages__day">
                     <header class="messages__day-header">
-                        <p class="utrecht-paragraph utrecht-paragraph--oip-paragraph-muted">{{ day.text }}</p>
+                        <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-paragraph-muted">{{ day.text }}</p>
                     </header>
 
                     <ol class="messages__list">
@@ -68,7 +68,7 @@ <h3 class="utrecht-heading-4">{{ subject }}</h3>
                 {% form_actions primary_text=_("Verzenden") primary_icon='arrow_forward' %}
             {% endrender_form %}
         {% else %}
-            <p class="utrecht-paragraph utrecht-paragraph--oip-paragraph-muted">{% trans "De gebruiker is inactief. Het is niet mogelijk een bericht te sturen." %}</p>
+            <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-paragraph-muted">{% trans "De gebruiker is inactief. Het is niet mogelijk een bericht te sturen." %}</p>
         {% endif %}
     </div>
 </section>
diff --git 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
@@ -308,13 +308,13 @@ export class FileInput extends Component {
           ${
             typeError && sizeError
               ? `
-              <p class="utrecht-paragraph utrecht-paragraph--oip-small error">
+              <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-small error">
                 <span aria-hidden="true" class="material-icons-outlined">warning_amber</span>
                 <span class="file-error__content">Dit type bestand (${ext}) is ongeldig en te groot. Geldige bestandstypen zijn: ${uploadFileTypes}</span>
               </p>`
               : typeError || sizeError
               ? `
-              <p class="utrecht-paragraph utrecht-paragraph--oip-small error">
+              <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-small error">
                 <span aria-hidden="true" class="material-icons-outlined">warning_amber</span>
                 ${
                   typeError

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 %}
     <div class="non-field-error" hidden>
-        <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-small utrecht-paragraph--oip-centered">{% trans "Verwijder eerst bestanden die niet voldoen aan de voorwaarden" %}</p>
+        <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--small utrecht-paragraph--oip-centered">{% trans "Verwijder eerst bestanden die niet voldoen aan de voorwaarden" %}</p>
     </div>
 {% endrender_form %}
diff --git 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 %}
 
 <h1 class="utrecht-heading-1" id="cases">{{ page_title }} ({{ paginator.count }})</h1>
-<p class="utrecht-paragraph utrecht-paragraph--oip-title-text">{{ title_text }}</p>
+<p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-title-text">{{ title_text }}</p>
 
 <div class="card__grid">
 {% render_grid %}

diff --git a/src/open_inwoner/templates/pages/product/detail.html b/src/open_inwoner/templates/pages/product/detail.html
@@ -33,7 +33,7 @@ <h1 class="utrecht-heading-1" id="title">
         {% endif %}
     </h1>
     {% include "components/Tag/Tag.html" with tags=object.tags.all only %}
-    <p class="utrecht-paragraph utrecht-paragraph--oip-summary">{{ object.summary }}</p>
+    <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-summary">{{ object.summary }}</p>
 
     {# Collapsable content #}
     <div class="readmore">