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.

Sign up for GitHub

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

Jump to bottom

refactor(buttons): make proper use of composition - INNO-590 #172

Merged
merged 7 commits into from
Jun 8, 2017
Merged

refactor(buttons): make proper use of composition - INNO-590 #172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cf00c98
Make proper use of composition
yhuard Jun 7, 2017
f9b052c
Merge branch 'master' into refactor/buttons
kalinchernev Jun 7, 2017
a83c0f1
Merge branch 'master' into refactor/buttons
yhuard Jun 7, 2017
ec9cb15
Refactor @ec-europa/ecl-forms-text-inputs template
yhuard Jun 8, 2017
816cbc1
Merge branch 'master' into refactor/buttons
yhuard Jun 8, 2017
ed1a0cb
Fix tests
yhuard Jun 8, 2017
d9423e2
Fix whitespace issue
yhuard Jun 8, 2017
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
44 changes: 38 additions & 6 deletions framework/components/ecl-buttons/ecl-buttons.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,51 @@
{% set type = type|default('button') %}
{% set modifier = modifier|default('default') %}
{% set extraClass = '' %}

{# Internal properties #}

{% set _cssClass = 'ecl-button ecl-button--' ~ modifier %}
{% set _extraAttributes = '' %}

{# Internal logic - Process properties #}

{% if isBlock is defined and isBlock == true %}
{% set extraClass = ' ecl-button--block' %}
{% set _cssClass = _cssClass ~ ' ecl-button--block' %}
{% endif %}

{% if icon is defined %}
{% set extraClass = extraClass ~ ' ecl-button--' ~ icon %}
{% set _cssClass = _cssClass ~ ' ecl-button--' ~ icon %}
{% endif %}

{% if extraClass is defined %}
{% set _cssClass = _cssClass ~ ' ' ~ extraClass %}
{% endif %}

{% if extraAttributes is defined %}
{% for attr in extraAttributes %}
{% set _extraAttributes = _extraAttributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %}
{% endfor %}
{% endif %}

{% if type == 'link' %}
<a href="{{ to|default('#') }}" class="ecl-button ecl-button--{{ modifier }}{{ extraClass }}">{{ label }}</a>
<a
href="{{ to|default('#') }}"
class="{{ _cssClass }}"
{{ _extraAttributes }}
>
{{- label -}}
</a>
{% elseif type == 'input' %}
<input type="button" class="ecl-button ecl-button--{{ modifier }}{{ extraClass }}" value="{{ label }}">
<input
type="button"
class="{{ _cssClass }}"
value="{{ label }}"
{{ _extraAttributes }}
/>
{% else %}
<button class="ecl-button ecl-button--{{ modifier }}{{ extraClass }}">{{ label }}</button>
<button
class="{{ _cssClass }}"
{{ _extraAttributes }}
>
{{- label -}}
</button>
{% endif %}
43 changes: 43 additions & 0 deletions framework/components/ecl-forms/ecl-forms-text-inputs/ecl-forms-text-inputs.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,47 @@ module.exports = {
title: 'Text inputs',
label: 'Text inputs',
status: 'ready',
collated: true,
collator(markup, item) {
return `
<!-- Start: @${item.handle} -->\n
<label for="${item.context.id}">${item.label}\n</label>\n
${markup}\n
<!-- End: @${item.handle} -->\n
`;
},
variants: [
{
name: 'default',
label: 'Normal input',
context: {
id: 'example-input-id-1',
extraAttributes: [
{ name: 'placeholder', value: 'Some placeholder text.' },
],
},
},
{
name: 'disabled',
label: 'Disabled input',
context: {
id: 'example-input-id-2',
isDisabled: true,
extraAttributes: [
{ name: 'placeholder', value: 'Some placeholder text.' },
],
},
},
{
name: 'with-error',
label: 'Input with error',
context: {
id: 'example-input-id-3',
hasError: true,
extraAttributes: [
{ name: 'placeholder', value: 'Some placeholder text.' },
],
},
},
],
};
42 changes: 36 additions & 6 deletions framework/components/ecl-forms/ecl-forms-text-inputs/ecl-forms-text-inputs.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,38 @@
<label for="example-input-id-1">Normal input</label>
<input type="text" class="ecl-text-input" id="example-input-id-1" placeholder="Some placeholder text."/>
{% set type = type|default('text') %}
{% set id = id|default('default-id') %}
{% set name = name|default('default-name') %}

<label for="example-input-id-2">Disabled input</label>
<input type="text" class="ecl-text-input" id="example-input-id-2" name="field-name-3" disabled placeholder="Some placeholder text."/>
{# Internal properties #}

<label for="example-input-id-3">Input with error</label>
<input type="text" class="ecl-text-input ecl-text-input--has-error" id="example-input-id-3" name="field-name-4" placeholder="Some placeholder text."/>
{% set _cssClass = 'ecl-text-input' %}
{% set _extraAttributes = '' %}

{# Internal logic - Process properties #}

{% if hasError is defined and hasError == true %}
{% set _cssClass = _cssClass ~ ' ecl-text-input--has-error' %}
{% endif %}

{% if extraClass is defined %}
{% set _cssClass = _cssClass ~ ' ' ~ extraClass %}
{% endif %}

{% if isDisabled is defined and isDisabled == true %}
{% set _extraAttributes = _extraAttributes ~ ' disabled' %}
{% endif %}

{% if extraAttributes is defined %}
{% for attr in extraAttributes %}
{% set _extraAttributes = _extraAttributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~'"' %}
{% endfor %}
{% endif %}

{# Print the result #}

<input
type="{{ type }}"
class="{{ _cssClass }}"
id="{{ id }}"
name="{{ name }}"
{{ _extraAttributes }}
/>
63 changes: 44 additions & 19 deletions framework/components/ecl-search-forms/ecl-search-forms.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,50 @@
{% if variant is defined and variant == "internal" %}

<div class="ecl-search-form__wrapper">
<p class="ecl-paragraph">Search on this site</p>

<form class="ecl-search-form ecl-search-form--internal">
<div class="ecl-search-form__wrapper">
<p class="ecl-paragraph">Search on this site</p>
<form class="ecl-search-form ecl-search-form--internal">
<label class="ecl-search-form__textfield-wrapper">
<span class="ecl-sr-only">Search this website</span>
{% include '@ec-europa/ecl-forms-text-inputs' with {
'type': 'search',
'extraClass': 'ecl-search-form__textfield',
'extraAttributes': [
{ 'name': 'title', 'value': 'Search'}
]
} %}
</label>
{% include '@ec-europa/ecl-buttons' with {
'modifier': 'form-primary',
'label': 'Search',
'extraClass': 'ecl-search-form__button',
'extraAttributes': [
{ 'name': 'value', 'value': 'Search'},
{ 'name': 'type', 'value': 'submit'}
]
} %}
</form>
</div>
{% else %}
<form class="ecl-search-form">
<label class="ecl-search-form__textfield-wrapper">
<span class="ecl-sr-only">Search this website</span>
<input type="ecl-search" class="ecl-search-form__textfield ecl-text-input" title="Search">
{% include '@ec-europa/ecl-forms-text-inputs' with {
'type': 'search',
'extraClass': 'ecl-search-form__textfield',
'extraAttributes': [
{ 'name': 'title', 'value': 'Search'},
{ 'name': 'size', 'value': '60'},
{ 'name': 'maxlength', 'value': '128'}
]
} %}
</label>
<button class="ecl-search-form__button ecl-button ecl-button--form-primary" value="ecl-search" type="submit">Search</button>
{% include '@ec-europa/ecl-buttons' with {
'modifier': 'form',
'label': 'Search',
'extraClass': 'ecl-search-form__button',
'extraAttributes': [
{ 'name': 'value', 'value': 'Search'},
{ 'name': 'type', 'value': 'submit'}
]
} %}
</form>
</div>

{% else %}

<form class="ecl-search-form">
<label class="ecl-search-form__textfield-wrapper">
<span class="ecl-sr-only">Search this website</span>
<input type="ecl-search" class="ecl-search-form__textfield ecl-text-input" size="60" maxlength="128" title="Search">
</label>
<button class="ecl-search-form__button ecl-button ecl-button--form" value="ecl-search" type="submit">Search</button>
</form>

{% endif %}
2 changes: 1 addition & 1 deletion test/wdio.conf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ exports.config = {
// See the full list at http://mochajs.org/
mochaOpts: {
ui: 'bdd',
timeout: 60000,
timeout: 120000,
},

// =====
Expand Down