[#2473] Added classes for nlds buttons

src/open_inwoner/components/readme.md

@@ -96,7 +96,7 @@ Given an example of a hyperlink with an icon:
 
 ```html
 {% load i18n %}
-<a class="button button--primary" href="{% url 'inbox:index' %}">
+<a class="utrecht-button button button--primary" href="{% url 'inbox:index' %}">
     <span class="material-icon">arrow_forward</span>
     {% trans 'My messages' %}
 </a>

src/open_inwoner/components/templates/components/Button/Button.html

@@ -2,7 +2,7 @@
 
 {% if href %}
     <a
-        class="{{ classes }}"
+        class="utrecht-button {{ classes }}"
         href="{{ href }}"
         title="{% firstof title text %}"
         aria-label="{% firstof text title %}"
@@ -23,7 +23,7 @@
     </a>
 {% else %}
     <button
-        class="{{ classes }}"
+        class="utrecht-button {{ classes }}"
         type="{{ type }}"
         name="{{ name }}"
         value="{{ value }}"

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

@@ -19,7 +19,7 @@ <h2 class="card__heading-2">
         {% endif %}
 
         <span class="spacer"></span>
-        <span class="button button--icon-before button--transparent button--secondary">
+        <span class="utrecht-button button button--icon-before button--transparent button--secondary">
         {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %}
         </span>
     </div>

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

@@ -26,7 +26,7 @@ <h2 class="card__heading-2"><span class="link link__text">{{ title }}</span></h2
             {% endif %}
 
             <span class="spacer"></span>
-            <span class="button button--icon-before button--transparent button--secondary">
+            <span class="utrecht-button button button--icon-before button--transparent button--secondary">
             {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %}
             </span>
 

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

@@ -7,7 +7,7 @@
         <label class="button button--primary file-input__label-empty" for="{{ field.auto_id }}">
             {% if multiple %}{% trans 'Sleep of selecteer bestanden' %}{% else %}{% trans 'Sleep of selecteer bestand' %}{% endif %}
         </label>
-        <label class="button button--borderless file-input__label-selected" for="{{ field.auto_id }}">
+        <label class="utrecht-button button button--borderless file-input__label-selected" for="{{ field.auto_id }}">
         {% icon icon="add_circle_outlined" icon_position="before" outlined=True %}
             {% if multiple %}{% trans 'Selecteer meer bestanden' %}{% else %}{% trans 'Selecteer ander bestand' %}{% endif %}
         </label>

src/open_inwoner/components/templates/components/Modal/Modal.html

@@ -8,8 +8,8 @@
         <h2 class="modal__title" id="modal__title"></h2>
         <div class="modal__text" id="modal__text"></div>
         <div class="modal__actions" id="modal__actions">
-            <button class="button modal__button button--error-confirm button-icon__confirm modal__confirm" type="submit" name="" value="" aria-label=""><span class="inner-text">Bevestig </span>{% icon icon="delete" icon_position="after" extra_classes="modal__visible-icon" outlined=True %}</button>
-            <button class="button modal__button modal__close button--primary button-icon--primary" type="button" name="" value="" aria-label=""><span class="inner-text">Sluiten </span>{% icon icon="cancel" icon_position="after" extra_classes="modal__visible-icon" outlined=True %}</button>
+            <button class="utrecht-button button modal__button button--error-confirm button-icon__confirm modal__confirm" type="submit" name="" value="" aria-label=""><span class="inner-text">Bevestig </span>{% icon icon="delete" icon_position="after" extra_classes="modal__visible-icon" outlined=True %}</button>
+            <button class="utrecht-button button modal__button modal__close button--primary button-icon--primary" type="button" name="" value="" aria-label=""><span class="inner-text">Sluiten </span>{% icon icon="cancel" icon_position="after" extra_classes="modal__visible-icon" outlined=True %}</button>
         </div>
     </div>
 </div>

src/open_inwoner/components/templatetags/button_tags.py

@@ -93,19 +93,19 @@ def get_classes():
             classnames += " button--bordered"
 
         if kwargs.get("primary"):
-            classnames += " button--primary"
+            classnames += " utrecht-button--primary-action button--primary"
 
         if kwargs.get("danger"):
             classnames += " button--danger"
 
         if kwargs.get("secondary"):
-            classnames += " button--secondary"
+            classnames += " utrecht-button--secondary-action button--secondary"
 
         if kwargs.get("transparent"):
             classnames += " button--transparent"
 
         if kwargs.get("disabled"):
-            classnames += " button--disabled"
+            classnames += " utrecht-button-disabled button--disabled"
 
         if kwargs.get("pill"):
             classnames += " button--pill"

src/open_inwoner/scss/components/Button/Button.scss

@@ -1,3 +1,5 @@
+@import '~@utrecht/components/dist/button/css/index.css';
+
 .button {
   align-items: center;
   border-radius: var(--border-radius);
@@ -16,12 +18,21 @@
   text-align: center;
   text-decoration: none;
   transition: transform 300ms, background-color 300ms;
-  font-weight: normal;
+  font-weight: var(--font-weight-body);
   // modified outline for accessibility focus
   outline-width: 1px;
   outline-offset: 1px;
   border: 0;
   white-space: nowrap;
+  // values from NLDS components that need to be unset
+  block-size: initial;
+  inline-size: initial;
+  justify-content: center;
+  max-inline-size: initial;
+  min-block-size: initial;
+  min-inline-size: initial;
+  scale: 1;
+  text-transform: none;
 
   &:focus,
   &:hover {

src/open_inwoner/scss/views/App.scss

@@ -198,6 +198,7 @@
   // Font-family = 'Heading' coming from both NLDS and/or the font-upload functionality
   --font-family-heading: var(--utrecht-heading-font-family);
   --font-weight-heading: bold;
+  --font-weight-body: normal;
 
   --font-color-heading-1: var(--font-color-heading);
   --font-family-heading-1: var(--font-family-heading);

src/open_inwoner/templates/500.html

@@ -132,7 +132,7 @@
   <h1 class="utrecht-heading-1">Sorry, a server error has occurred (500)</h1>
   <p class="lead">We have been automatically notified about the problem and will investigate as soon as possible.</p>
   <p class="lead">
-    <a href="/" class="button">Back to home</a>
+    <a href="/" class="utrecht-button button">Back to home</a>
   </p>
 </body>
 

src/open_inwoner/templates/cms/collaborate/active_plans_plugin.html

@@ -14,7 +14,7 @@ <h3 class="utrecht-heading-3 card__heading-3 plan-list">{{ plan.title }}</h3>
                     <p class="utrecht-paragraph">{{ plan.goal|truncatewords:20 }}</p>
                     <p class="utrecht-paragraph">{{ plan.description|truncatewords:20 }}</p>
                     <span class="spacer"></span>
-                    <span class="button button--icon-before button--transparent button--secondary">
+                    <span class="utrecht-button button button--icon-before button--transparent button--secondary">
                     {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %}
                     </span>
                 </div>

src/open_inwoner/templates/cms/plugins/appointments/appointments.html

@@ -14,7 +14,7 @@ <h2 class="utrecht-heading-2">{{ instance.title }}</h2>
                     <h2 class="plugin-card__heading">
                         <span class="status">{{ appointment.services.0.name|default:appointment.title }}</span>
                     </h2>
-                    <span class="button button--icon-before button--transparent">
+                    <span class="utrecht-button button button--icon-before button--transparent">
                         {% icon icon="east" icon_position="after" primary=True outlined=True %}
                     </span>
                 </div>

src/open_inwoner/templates/cms/plugins/userfeed/userfeed.html

@@ -33,7 +33,7 @@ <h3 class="utrecht-heading-3 userfeed__title">{{ item.title }}</h3>
                     <p class="userfeed-card__description">
                         <span class="status">{{ item.message }}</span>
                     </p>
-                    <span class="button button--icon-before button--transparent">
+                    <span class="utrecht-button button button--icon-before button--transparent">
                     {% icon icon="east" icon_position="after" primary=True outlined=True %}
                     </span>
                 </div>

src/open_inwoner/templates/djangocms_link/arrow/link.html

@@ -1,4 +1,4 @@
 {% load cms_tags button_tags icon_tags i18n %}{% spaceless %}
 {# copied and modified from 'default' #}
 {# this needs to be in one line for rendering purpose #}
-{% endspaceless %}<a class="button button--textless button--icon button--icon-before button--transparent"  href="{{ link }}"{% if instance.target %} target="{{ instance.target }}"{% endif %}{% if instance.attributes %} {{ instance.attributes_str }}{% endif %}>{% icon icon="arrow_forward" %}{% for plugin in instance.child_plugin_instances %}{% render_plugin plugin %}{% empty %}{{ instance.name }}{% endfor %}</a>
+{% endspaceless %}<a class="utrecht-button button button--textless button--icon button--icon-before button--transparent"  href="{{ link }}"{% if instance.target %} target="{{ instance.target }}"{% endif %}{% if instance.attributes %} {{ instance.attributes_str }}{% endif %}>{% icon icon="arrow_forward" %}{% for plugin in instance.child_plugin_instances %}{% render_plugin plugin %}{% empty %}{{ instance.name }}{% endfor %}</a>

src/open_inwoner/templates/pages/cases/status_inner.html

@@ -74,7 +74,7 @@ <h2 class="utrecht-heading-2 {% if case.new_docs %}indicator{% endif %}" id="doc
                 {% include "pages/questions/questions.html" with questions=case.questions only %}
                 {% if case.questions|length > 3 %}
                     <div class="expand">
-                        <a id="toggle-hide-elements" class="button button--textless button--icon button--icon-after button--secondary button--transparent" data-label-reveal="{% trans 'Toon alle vragen' %}" data-label-collapse="{% trans 'Toon minder' %}" data-label-num-elems={{ case.questions|length }} aria-expanded=false>
+                        <a id="toggle-hide-elements" class="utrecht-button button button--textless button--icon button--icon-after button--secondary button--transparent" data-label-reveal="{% trans 'Toon alle vragen' %}" data-label-collapse="{% trans 'Toon minder' %}" data-label-num-elems={{ case.questions|length }} aria-expanded=false>
                             {% icon extra_classes="expand-icon" icon="expand_more" icon_position="after" icon_outlined=True %}
                         </a>
                     </div>

src/open_inwoner/templates/pages/contactmoment/detail.html

@@ -26,13 +26,13 @@ <h2 class="contactmoment__heading">{% trans "Antwoord" %}</h2>
                         {% endif %}
                     </div>
                     <div>
-                        <a href="{{ origin.url }}" id="origin_link" class="button button--primary contactmoment__actions">
+                        <a href="{{ origin.url }}" id="origin_link" class="utrecht-button button button--primary contactmoment__actions">
                             {% icon "arrow_backward" %}{{ origin.label }}
                         </a>
                     </div>
                     {% if destination %}
                         <div>
-                            <a href="{{ destination.url }}" id="destination_link" class="button button--transparent contactmoment__actions">
+                            <a href="{{ destination.url }}" id="destination_link" class="utrecht-button button button--transparent contactmoment__actions">
                                 <span>{{ destination.label }}</span>{% icon "arrow_forward" %}
                             </a>
                         </div>

src/open_inwoner/templates/pages/plans/create.html

@@ -56,7 +56,7 @@ <h2 class="utrecht-heading-2 modal__title" id="modal__title">{{ plan_template.na
                                     </h2>
                                     <div class="modal__text" id="modal__text">{{ plan_template.string_preview }}</div>
                                     <div class="modal__actions modal__actions--align-right" id="modal__actions">
-                                        <button class="button modal__button modal__close button--primary button-icon--primary" type="button" aria-label="Sluit"><span class="inner-text">Sluiten </span></button>
+                                        <button class="utrecht-button button modal__button modal__close button--primary button-icon--primary" type="button" aria-label="Sluit"><span class="inner-text">Sluiten </span></button>
                                     </div>
                                 </div>
                             </div>