🚧 [#2473] Experiment with replacement

maykinmedia · Jul 11, 2024 · ecca7a2 · ecca7a2
1 parent 4317a57
commit ecca7a2
Show file tree

Hide file tree

Showing 15 changed files with 26 additions and 13 deletions.
diff --git a/src/open_inwoner/components/readme.md b/src/open_inwoner/components/readme.md
@@ -96,7 +96,7 @@ Given an example of a hyperlink with an icon:
 
 ```html
 {% load i18n %}
-<a class="utrecht-button button button--primary" href="{% url 'inbox:index' %}">
+<a class="utrecht-link-button button button--primary" href="{% url 'inbox:index' %}">
     <span class="material-icon">arrow_forward</span>
     {% trans 'My messages' %}
 </a>

diff --git a/src/open_inwoner/components/templates/components/Button/Button.html b/src/open_inwoner/components/templates/components/Button/Button.html
@@ -2,7 +2,7 @@
 
 {% if href %}
     <a
-        class="utrecht-button {{ classes }}"
+        class="utrecht-link-button {{ classes }}"
         href="{{ href }}"
         title="{% firstof title text %}"
         aria-label="{% firstof text title %}"

diff --git a/src/open_inwoner/components/templatetags/button_tags.py b/src/open_inwoner/components/templatetags/button_tags.py
@@ -68,7 +68,7 @@ def button(text, **kwargs):
 
     def get_classes():
         extra_classes = kwargs.get("extra_classes")
-        classnames = "button"
+        classnames = "utrecht-button"
 
         if extra_classes:
             classnames += f" {extra_classes}"

diff --git a/src/open_inwoner/scss/components/Button/Button.scss b/src/open_inwoner/scss/components/Button/Button.scss
@@ -1,6 +1,6 @@
 @import '~@utrecht/components/dist/button/css/index.css';
 
-.button {
+.utrecht-button {
   align-items: center;
   border-radius: var(--border-radius);
   box-sizing: border-box;

diff --git a/src/open_inwoner/scss/components/Typography/H1.scss b/src/open_inwoner/scss/components/Typography/H1.scss
@@ -1,4 +1,3 @@
-@import '~@utrecht/components/dist/heading-1/css/index.css';
 @import '~microscope-sass/lib/responsive';
 
 .utrecht-heading-1 {

diff --git a/src/open_inwoner/scss/components/Typography/H2.scss b/src/open_inwoner/scss/components/Typography/H2.scss
@@ -1,4 +1,3 @@
-@import '~@utrecht/components/dist/heading-2/css/index.css';
 @import '~microscope-sass/lib/responsive';
 
 .utrecht-heading-2 {

diff --git a/src/open_inwoner/scss/components/Typography/H3.scss b/src/open_inwoner/scss/components/Typography/H3.scss
@@ -1,4 +1,3 @@
-@import '~@utrecht/components/dist/heading-3/css/index.css';
 @import '~microscope-sass/lib/responsive';
 
 .utrecht-heading-3 {

diff --git a/src/open_inwoner/scss/components/Typography/H4.scss b/src/open_inwoner/scss/components/Typography/H4.scss
@@ -1,4 +1,3 @@
-@import '~@utrecht/components/dist/heading-4/css/index.css';
 @import '~microscope-sass/lib/responsive';
 
 .utrecht-heading-4 {

diff --git a/src/open_inwoner/scss/views/_index.scss b/src/open_inwoner/scss/views/_index.scss
@@ -2,6 +2,8 @@
 @import './App.scss';
 @import './body';
 @import './Categories.scss';
+@import './nl-design-system-community';
+@import './nl-design-system-oip-theme';
 @import './Plans.scss';
 @import './product_detail';
 @import './view';
diff --git a/src/open_inwoner/scss/views/_nl-design-system-community.scss b/src/open_inwoner/scss/views/_nl-design-system-community.scss
@@ -0,0 +1,9 @@
+@import '@utrecht/components/dist/document/css/index.css';
+@import '~@utrecht/components/dist/heading-1/css/index.css';
+@import '~@utrecht/components/dist/heading-2/css/index';
+@import '~@utrecht/components/dist/heading-3/css/index';
+@import '~@utrecht/components/dist/heading-4/css/index';
+@import '~@utrecht/components/dist/heading-5/css/index';
+@import '@utrecht/components/dist/button/css/index.css';
+@import '@utrecht/components/dist/link-button/css/index.css';
+@import '@utrecht/components/dist/paragraph/css/index.css';
diff --git a/src/open_inwoner/scss/views/_nl-design-system-oip-theme.scss b/src/open_inwoner/scss/views/_nl-design-system-oip-theme.scss
@@ -0,0 +1,6 @@
+.openinwoner-theme {
+  --oip-color-primary: var(--color-primary);
+  --oip-color-secondary: var(--color-secondary);
+  --oip-color-primary-darker: var(--color-primary-darker);
+  --oip-color-secondary-darker: var(--color-secondary-darker);
+}
diff --git a/src/open_inwoner/templates/500.html b/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="utrecht-button button">Back to home</a>
+    <a href="/" class="button">Back to home</a>
   </p>
 </body>
 

diff --git a/src/open_inwoner/templates/djangocms_link/arrow/link.html b/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="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>
+{% endspaceless %}<a class="utrecht-link-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>
diff --git a/src/open_inwoner/templates/pages/cases/status_inner.html b/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="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>
+                        <a id="toggle-hide-elements" class="utrecht-link-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>

diff --git a/src/open_inwoner/templates/pages/contactmoment/detail.html b/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="utrecht-button button button--primary contactmoment__actions">
+                        <a href="{{ origin.url }}" id="origin_link" class="utrecht-link-button button button--primary contactmoment__actions">
                             {% icon "arrow_backward" %}{{ origin.label }}
                         </a>
                     </div>
                     {% if destination %}
                         <div>
-                            <a href="{{ destination.url }}" id="destination_link" class="utrecht-button button button--transparent contactmoment__actions">
+                            <a href="{{ destination.url }}" id="destination_link" class="utrecht-link-button button button--transparent contactmoment__actions">
                                 <span>{{ destination.label }}</span>{% icon "arrow_forward" %}
                             </a>
                         </div>