Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#2473] Convert main buttons to NLDS #1212

Draft
wants to merge 4 commits into
base: develop
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/open_inwoner/accounts/tests/test_action_views.py
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/components/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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-link-button button button--primary" href="{% url 'inbox:index' %}">
<span class="material-icon">arrow_forward</span>
{% trans 'My messages' %}
</a>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

{% if href %}
<a
class="{{ classes }}"
class="utrecht-link-button {{ classes }}"
href="{{ href }}"
title="{% firstof title text %}"
aria-label="{% firstof text title %}"
Expand All @@ -23,7 +23,7 @@
</a>
{% else %}
<button
class="{{ classes }}"
class="utrecht-button {{ classes }}"
type="{{ type }}"
name="{{ name }}"
value="{{ value }}"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
8 changes: 4 additions & 4 deletions src/open_inwoner/components/templatetags/button_tags.py
Original file line number Diff line number Diff line change
Expand Up @@ -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}"
Expand All @@ -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"
Expand Down
26 changes: 19 additions & 7 deletions src/open_inwoner/scss/components/Button/Button.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
@import '~@utrecht/components/dist/button/css/index.css';

.utrecht-button,
.button {
align-items: center;
border-radius: var(--border-radius);
Expand All @@ -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 {
Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down
1 change: 0 additions & 1 deletion src/open_inwoner/scss/components/Typography/H1.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@import '~@utrecht/components/dist/heading-1/css/index.css';
@import '~microscope-sass/lib/responsive';

.utrecht-heading-1 {
Expand Down
1 change: 0 additions & 1 deletion src/open_inwoner/scss/components/Typography/H2.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@import '~@utrecht/components/dist/heading-2/css/index.css';
@import '~microscope-sass/lib/responsive';

.utrecht-heading-2 {
Expand Down
1 change: 0 additions & 1 deletion src/open_inwoner/scss/components/Typography/H3.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@import '~@utrecht/components/dist/heading-3/css/index.css';
@import '~microscope-sass/lib/responsive';

.utrecht-heading-3 {
Expand Down
1 change: 0 additions & 1 deletion src/open_inwoner/scss/components/Typography/H4.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@import '~@utrecht/components/dist/heading-4/css/index.css';
@import '~microscope-sass/lib/responsive';

.utrecht-heading-4 {
Expand Down
12 changes: 10 additions & 2 deletions src/open_inwoner/scss/views/App.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand All @@ -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%;
Expand All @@ -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);
Expand All @@ -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);
Expand Down
2 changes: 2 additions & 0 deletions src/open_inwoner/scss/views/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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';
9 changes: 9 additions & 0 deletions src/open_inwoner/scss/views/_nl-design-system-community.scss
Original file line number Diff line number Diff line change
@@ -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';
6 changes: 6 additions & 0 deletions src/open_inwoner/scss/views/_nl-design-system-oip-theme.scss
Original file line number Diff line number Diff line change
@@ -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);
}
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/templates/djangocms_link/arrow/link.html
Original file line number Diff line number Diff line change
@@ -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-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>
2 changes: 1 addition & 1 deletion src/open_inwoner/templates/pages/cases/status_inner.html
Original file line number Diff line number Diff line change
Expand Up @@ -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-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>
Expand Down
4 changes: 2 additions & 2 deletions src/open_inwoner/templates/pages/contactmoment/detail.html
Original file line number Diff line number Diff line change
Expand Up @@ -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-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="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>
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/templates/pages/plans/create.html
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ <h2 class="utrecht-heading-2 modal__title" id="modal__title">{{ plan_template.na
</header>
<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>
Expand Down
Loading