From eac60c8daea2d76ae859020d1f783b2626ba5b3c Mon Sep 17 00:00:00 2001 From: Jiro Ghianni Date: Thu, 16 May 2024 16:44:37 +0200 Subject: [PATCH 1/4] [#2473] Added classes for nlds buttons --- src/open_inwoner/components/readme.md | 2 +- .../templates/components/Button/Button.html | 4 ++-- .../templates/components/Card/DescriptionCard.html | 2 +- .../templates/components/Card/ProductCard.html | 2 +- .../templates/components/Form/FileInput.html | 2 +- .../templates/components/Modal/Modal.html | 4 ++-- .../components/templatetags/button_tags.py | 6 +++--- src/open_inwoner/scss/components/Button/Button.scss | 13 ++++++++++++- src/open_inwoner/scss/views/App.scss | 1 + src/open_inwoner/templates/500.html | 2 +- .../cms/collaborate/active_plans_plugin.html | 2 +- .../cms/plugins/appointments/appointments.html | 2 +- .../templates/cms/plugins/userfeed/userfeed.html | 2 +- .../templates/djangocms_link/arrow/link.html | 2 +- .../templates/pages/cases/status_inner.html | 2 +- .../templates/pages/contactmoment/detail.html | 4 ++-- src/open_inwoner/templates/pages/plans/create.html | 2 +- 17 files changed, 33 insertions(+), 21 deletions(-) diff --git a/src/open_inwoner/components/readme.md b/src/open_inwoner/components/readme.md index 0ea681f84e..a5b62a711a 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 %} - + arrow_forward {% trans 'My messages' %} diff --git a/src/open_inwoner/components/templates/components/Button/Button.html b/src/open_inwoner/components/templates/components/Button/Button.html index cf0151a5f1..5902c8d348 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 %} {% else %} - + + diff --git a/src/open_inwoner/components/templatetags/button_tags.py b/src/open_inwoner/components/templatetags/button_tags.py index 67c918baa0..61174df883 100644 --- a/src/open_inwoner/components/templatetags/button_tags.py +++ b/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" diff --git a/src/open_inwoner/scss/components/Button/Button.scss b/src/open_inwoner/scss/components/Button/Button.scss index a796c54ce2..04a8fcdc64 100644 --- a/src/open_inwoner/scss/components/Button/Button.scss +++ b/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 { diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss index 6e06c0707e..63abd0a087 100644 --- a/src/open_inwoner/scss/views/App.scss +++ b/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); diff --git a/src/open_inwoner/templates/500.html b/src/open_inwoner/templates/500.html index b9e7cf0ea1..5a54f800ae 100644 --- a/src/open_inwoner/templates/500.html +++ b/src/open_inwoner/templates/500.html @@ -132,7 +132,7 @@

Sorry, a server error has occurred (500)

We have been automatically notified about the problem and will investigate as soon as possible.

- Back to home + Back to home

diff --git a/src/open_inwoner/templates/cms/collaborate/active_plans_plugin.html b/src/open_inwoner/templates/cms/collaborate/active_plans_plugin.html index 5669c00768..c03102e2f5 100644 --- a/src/open_inwoner/templates/cms/collaborate/active_plans_plugin.html +++ b/src/open_inwoner/templates/cms/collaborate/active_plans_plugin.html @@ -14,7 +14,7 @@

{{ plan.title }}

{{ plan.goal|truncatewords:20 }}

{{ plan.description|truncatewords:20 }}

- + {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %} diff --git a/src/open_inwoner/templates/cms/plugins/appointments/appointments.html b/src/open_inwoner/templates/cms/plugins/appointments/appointments.html index eb163da19a..7fecbbc49a 100644 --- a/src/open_inwoner/templates/cms/plugins/appointments/appointments.html +++ b/src/open_inwoner/templates/cms/plugins/appointments/appointments.html @@ -14,7 +14,7 @@

{{ instance.title }}

{{ appointment.services.0.name|default:appointment.title }}

- + {% icon icon="east" icon_position="after" primary=True outlined=True %} diff --git a/src/open_inwoner/templates/cms/plugins/userfeed/userfeed.html b/src/open_inwoner/templates/cms/plugins/userfeed/userfeed.html index c3fe841c06..441eac32b9 100644 --- a/src/open_inwoner/templates/cms/plugins/userfeed/userfeed.html +++ b/src/open_inwoner/templates/cms/plugins/userfeed/userfeed.html @@ -33,7 +33,7 @@

{{ item.title }}

{{ item.message }}

- + {% icon icon="east" icon_position="after" primary=True outlined=True %} diff --git a/src/open_inwoner/templates/djangocms_link/arrow/link.html b/src/open_inwoner/templates/djangocms_link/arrow/link.html index 3a3d5ec9b8..8fe6d21873 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 %}{% icon icon="arrow_forward" %}{% for plugin in instance.child_plugin_instances %}{% render_plugin plugin %}{% empty %}{{ instance.name }}{% endfor %} +{% endspaceless %}{% icon icon="arrow_forward" %}{% for plugin in instance.child_plugin_instances %}{% render_plugin plugin %}{% empty %}{{ instance.name }}{% endfor %} diff --git a/src/open_inwoner/templates/pages/cases/status_inner.html b/src/open_inwoner/templates/pages/cases/status_inner.html index 52cef7126c..b65d1e288a 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 @@

3 %}
-
diff --git a/src/open_inwoner/templates/pages/contactmoment/detail.html b/src/open_inwoner/templates/pages/contactmoment/detail.html index bb9e063566..db9cf256a2 100644 --- a/src/open_inwoner/templates/pages/contactmoment/detail.html +++ b/src/open_inwoner/templates/pages/contactmoment/detail.html @@ -26,13 +26,13 @@

{% trans "Antwoord" %}

{% endif %}
- + {% icon "arrow_backward" %}{{ origin.label }}
{% if destination %}
- + {{ destination.label }}{% icon "arrow_forward" %}
diff --git a/src/open_inwoner/templates/pages/plans/create.html b/src/open_inwoner/templates/pages/plans/create.html index 87f8b2fd91..06f848e431 100644 --- a/src/open_inwoner/templates/pages/plans/create.html +++ b/src/open_inwoner/templates/pages/plans/create.html @@ -57,7 +57,7 @@

{{ plan_template.na
{{ plan_template.string_preview }}
- +
From 9ab345690ce20b2744f010d62218e30b40ef207c Mon Sep 17 00:00:00 2001 From: Jiro Ghianni Date: Thu, 16 May 2024 17:40:42 +0200 Subject: [PATCH 2/4] :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 %} - + arrow_forward {% trans 'My messages' %} diff --git a/src/open_inwoner/components/templates/components/Button/Button.html b/src/open_inwoner/components/templates/components/Button/Button.html index 5902c8d348..4264d0ff3c 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 %} Sorry, a server error has occurred (500)

We have been automatically notified about the problem and will investigate as soon as possible.

- Back to home + Back to home

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 %}{% icon icon="arrow_forward" %}{% for plugin in instance.child_plugin_instances %}{% render_plugin plugin %}{% empty %}{{ instance.name }}{% endfor %} +{% endspaceless %}{% icon icon="arrow_forward" %}{% for plugin in instance.child_plugin_instances %}{% render_plugin plugin %}{% empty %}{{ instance.name }}{% endfor %} 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 @@

3 %}
-
diff --git a/src/open_inwoner/templates/pages/contactmoment/detail.html b/src/open_inwoner/templates/pages/contactmoment/detail.html index db9cf256a2..9b558c2f1a 100644 --- a/src/open_inwoner/templates/pages/contactmoment/detail.html +++ b/src/open_inwoner/templates/pages/contactmoment/detail.html @@ -26,13 +26,13 @@

{% trans "Antwoord" %}

{% endif %}
- + {% icon "arrow_backward" %}{{ origin.label }}
{% if destination %}
- + {{ destination.label }}{% icon "arrow_forward" %}
From 2634f3f9f2362afe1220e2d2bc6371c5ee396858 Mon Sep 17 00:00:00 2001 From: Jiro Ghianni Date: Thu, 23 May 2024 13:05:07 +0200 Subject: [PATCH 3/4] [#2473] prepare for new tokens --- .../scss/components/Button/Button.scss | 15 ++++++++------- src/open_inwoner/scss/views/App.scss | 11 +++++++++-- .../scss/views/_nl-design-system-oip-theme.scss | 2 +- 3 files changed, 18 insertions(+), 10 deletions(-) diff --git a/src/open_inwoner/scss/components/Button/Button.scss b/src/open_inwoner/scss/components/Button/Button.scss index 5524edbb88..2b0023548e 100644 --- a/src/open_inwoner/scss/components/Button/Button.scss +++ b/src/open_inwoner/scss/components/Button/Button.scss @@ -1,6 +1,7 @@ @import '~@utrecht/components/dist/button/css/index.css'; -.utrecht-button { +.utrecht-button, +.button { align-items: center; border-radius: var(--border-radius); box-sizing: border-box; @@ -84,9 +85,9 @@ } &#{&}--primary { - background-color: var(--color-primary); - border: 1px solid var(--color-primary); - color: var(--color-font-primary); + background-color: var(--utrecht-button-primary-action-background-color); + border: 1px solid var(--utrecht-button-primary-action-background-color); + color: var(--utrecht-button-secondary-color); &:focus, &:hover { @@ -95,9 +96,9 @@ } &--secondary { - background-color: var(--color-secondary); - border: 1px solid var(--color-secondary); - color: var(--color-white); + background-color: var(--utrecht-button-secondary-action-background-color); + border: 1px solid var(--utrecht-button-secondary-action-background-color); + color: var(--utrecht-button-secondary-action-color); &:focus, &:hover { diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss index 63abd0a087..ff8c918807 100644 --- a/src/open_inwoner/scss/views/App.scss +++ b/src/open_inwoner/scss/views/App.scss @@ -148,6 +148,7 @@ calc(var(--color-error-l) + 50%) ); + // From color picker --color-info-h: 2010; --color-info-s: 64%; --color-info-l: 80%; @@ -167,6 +168,12 @@ calc(var(--color-info-l) - 40%) ); + // From design-tokens + --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); + --color-success-h: 115; --color-success-s: 26%; --color-success-l: 37%; @@ -182,8 +189,8 @@ ); // color-success-l was +50% but +57% is needed for 4.5:1 contrast - --color-font-primary: var(--color-white); - --color-font-secondary: var(--color-white); + //--color-font-primary: var(--color-white); + //--color-font-secondary: var(--color-white); --color-font-accent: var(--color-gray-dark); --color-body: var(--color-gray-dark); 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 index 51ded51abd..05265c132f 100644 --- a/src/open_inwoner/scss/views/_nl-design-system-oip-theme.scss +++ b/src/open_inwoner/scss/views/_nl-design-system-oip-theme.scss @@ -1,5 +1,5 @@ .openinwoner-theme { - --oip-color-primary: var(--color-primary); + //--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); From 5a12f640c894fa9e70c3314ee08343ca0af9bedc Mon Sep 17 00:00:00 2001 From: Jiro Ghianni Date: Thu, 11 Jul 2024 17:32:43 +0200 Subject: [PATCH 4/4] [#2473] experiment --- src/open_inwoner/accounts/tests/test_action_views.py | 1 + 1 file changed, 1 insertion(+) diff --git a/src/open_inwoner/accounts/tests/test_action_views.py b/src/open_inwoner/accounts/tests/test_action_views.py index b32c258158..0976772360 100644 --- a/src/open_inwoner/accounts/tests/test_action_views.py +++ b/src/open_inwoner/accounts/tests/test_action_views.py @@ -361,6 +361,7 @@ def test_action_status(self, mock_solo): expect(dropdown_button).to_contain_text(open_label) # grab buttons + # remove role status_closed_button = dropdown_content.get_by_role("button", name=closed_label) status_approval_button = dropdown_content.get_by_role( "button", name=approval_label