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 diff --git a/src/open_inwoner/components/readme.md b/src/open_inwoner/components/readme.md index 0ea681f84e..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 cf0151a5f1..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 %} {% else %} - + + diff --git a/src/open_inwoner/components/templatetags/button_tags.py b/src/open_inwoner/components/templatetags/button_tags.py index 67c918baa0..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}" @@ -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..2b0023548e 100644 --- a/src/open_inwoner/scss/components/Button/Button.scss +++ b/src/open_inwoner/scss/components/Button/Button.scss @@ -1,3 +1,6 @@ +@import '~@utrecht/components/dist/button/css/index.css'; + +.utrecht-button, .button { align-items: center; border-radius: var(--border-radius); @@ -16,12 +19,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 { @@ -73,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 { @@ -84,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/components/Typography/H1.scss b/src/open_inwoner/scss/components/Typography/H1.scss index e2c6f89794..d440cbd9c7 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 090fb5ffa6..1265cc4696 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 570de0cc8b..d043d3e016 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/App.scss b/src/open_inwoner/scss/views/App.scss index 6e06c0707e..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); @@ -198,6 +205,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/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..05265c132f --- /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/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..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 52cef7126c..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 bb9e063566..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" %}
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 }}
- +