From ecca7a2445830d7610a7e4e885545a610bf6772f Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Thu, 16 May 2024 17:40:42 +0200
Subject: [PATCH] :construction: [#2473] Experiment with replacement

---
 src/open_inwoner/components/readme.md                    | 2 +-
 .../components/templates/components/Button/Button.html   | 2 +-
 src/open_inwoner/components/templatetags/button_tags.py  | 2 +-
 src/open_inwoner/scss/components/Button/Button.scss      | 2 +-
 src/open_inwoner/scss/components/Typography/H1.scss      | 1 -
 src/open_inwoner/scss/components/Typography/H2.scss      | 1 -
 src/open_inwoner/scss/components/Typography/H3.scss      | 1 -
 src/open_inwoner/scss/components/Typography/H4.scss      | 1 -
 src/open_inwoner/scss/views/_index.scss                  | 2 ++
 .../scss/views/_nl-design-system-community.scss          | 9 +++++++++
 .../scss/views/_nl-design-system-oip-theme.scss          | 6 ++++++
 src/open_inwoner/templates/500.html                      | 2 +-
 .../templates/djangocms_link/arrow/link.html             | 2 +-
 src/open_inwoner/templates/pages/cases/status_inner.html | 2 +-
 .../templates/pages/contactmoment/detail.html            | 4 ++--
 15 files changed, 26 insertions(+), 13 deletions(-)
 create mode 100644 src/open_inwoner/scss/views/_nl-design-system-community.scss
 create mode 100644 src/open_inwoner/scss/views/_nl-design-system-oip-theme.scss

diff --git a/src/open_inwoner/components/readme.md b/src/open_inwoner/components/readme.md
index a5b62a711a..6bfbcbe478 100644
--- 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
index 5b79bb464d..1478a26395 100644
--- 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
index 61174df883..cdb40b0d30 100644
--- 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
index 31ffc7a43e..0aa9d15075 100644
--- 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
index 07d937e36e..8dcee6b2c1 100644
--- 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
index 8ff8c2186a..c2e6e80e67 100644
--- 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
index 7d59c8ea66..6989c52c2c 100644
--- 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
index c78d337426..61fb12af41 100644
--- 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
index 9b5eeda4d0..414cd240b9 100644
--- 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
new file mode 100644
index 0000000000..f0403594f0
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..51ded51abd
--- /dev/null
+++ 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
index 5a54f800ae..b9e7cf0ea1 100644
--- 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
index 8fe6d21873..686e5f1ec1 100644
--- 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
index b65d1e288a..0b84912b1b 100644
--- 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
index 20006d34fa..e1073dcff8 100644
--- 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>