Skip to content
This repository has been archived by the owner on May 2, 2023. It is now read-only.

Commit

Permalink
feat(search-form): (almost) green diff with ECL - TWIG-238 (#301)
Browse files Browse the repository at this point in the history
  • Loading branch information
@planctus @papegaill
planctus authored and papegaill committed Jan 27, 2020
1 parent 1c2430f commit 9fc9a92
Show file tree
Hide file tree
Showing 4 changed files with 53 additions and 47 deletions.
2 changes: 1 addition & 1 deletion src/ec/packages/ec-component-button/ecl-button.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@

{# Print the result #}

<button class="{{ _css_class }}" type="{{ _type }}"{{ _extra_attributes|raw }}>
<button class="{{ _css_class }}" type="{{ _type }}" {{ _extra_attributes|raw }}>
{%- if _icon.name is not empty %}
<span class="ecl-button__container">
{% if _icon_position == 'before' %}
Expand Down
64 changes: 44 additions & 20 deletions src/ec/packages/ec-component-search-form/__snapshots__/search-form.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,20 @@ exports[`EC - Search Form Default renders correctly 1`] = `
<div
class="ecl-form-group ecl-form-group--text-input"
>
<label
class="ecl-form-label ecl-search-form__label"
for="search-input"
>
Search
</label>
<input
class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
id="input-email"
name="email"
type="text"
id="search-input"
type="search"
/>
</div>
<button
aria-label="Search"
class="ecl-button ecl-button--search ecl-search-form__button"
type="submit"
>
Expand All @@ -30,12 +36,12 @@ exports[`EC - Search Form Default renders correctly 1`] = `
</span>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--fluid ecl-button__icon ecl-button__icon--after"
class="ecl-icon ecl-icon--xs ecl-button__icon ecl-button__icon--after"
data-ecl-icon=""
focusable="false"
>
<use
xlink:href="static/icons.svg#general--search"
xlink:href="/icons.svg#general--search"
/>
</svg>
</span>
Expand All @@ -53,14 +59,20 @@ exports[`EC - Search Form Default renders correctly with extra attributes 1`] =
<div
class="ecl-form-group ecl-form-group--text-input"
>
<label
class="ecl-form-label ecl-search-form__label"
for="search-input"
>
Search
</label>
<input
class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
id="input-email"
name="email"
type="text"
id="search-input"
type="search"
/>
</div>
<button
aria-label="Search"
class="ecl-button ecl-button--search ecl-search-form__button"
type="submit"
>
Expand All @@ -75,12 +87,12 @@ exports[`EC - Search Form Default renders correctly with extra attributes 1`] =
</span>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--fluid ecl-button__icon ecl-button__icon--after"
class="ecl-icon ecl-icon--xs ecl-button__icon ecl-button__icon--after"
data-ecl-icon=""
focusable="false"
>
<use
xlink:href="static/icons.svg#general--search"
xlink:href="/icons.svg#general--search"
/>
</svg>
</span>
Expand All @@ -96,14 +108,20 @@ exports[`EC - Search Form Default renders correctly with extra class names 1`] =
<div
class="ecl-form-group ecl-form-group--text-input"
>
<label
class="ecl-form-label ecl-search-form__label"
for="search-input"
>
Search
</label>
<input
class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
id="input-email"
name="email"
type="text"
id="search-input"
type="search"
/>
</div>
<button
aria-label="Search"
class="ecl-button ecl-button--search ecl-search-form__button"
type="submit"
>
Expand All @@ -118,12 +136,12 @@ exports[`EC - Search Form Default renders correctly with extra class names 1`] =
</span>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--fluid ecl-button__icon ecl-button__icon--after"
class="ecl-icon ecl-icon--xs ecl-button__icon ecl-button__icon--after"
data-ecl-icon=""
focusable="false"
>
<use
xlink:href="static/icons.svg#general--search"
xlink:href="/icons.svg#general--search"
/>
</svg>
</span>
Expand All @@ -139,14 +157,20 @@ exports[`EC - Search Form Default renders correctly with extra form elements 1`]
<div
class="ecl-form-group ecl-form-group--text-input"
>
<label
class="ecl-form-label ecl-search-form__label"
for="search-input"
>
Search
</label>
<input
class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
id="input-email"
name="email"
type="text"
id="search-input"
type="search"
/>
</div>
<button
aria-label="Search"
class="ecl-button ecl-button--search ecl-search-form__button"
type="submit"
>
Expand All @@ -161,12 +185,12 @@ exports[`EC - Search Form Default renders correctly with extra form elements 1`]
</span>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--fluid ecl-button__icon ecl-button__icon--after"
class="ecl-icon ecl-icon--xs ecl-button__icon ecl-button__icon--after"
data-ecl-icon=""
focusable="false"
>
<use
xlink:href="static/icons.svg#general--search"
xlink:href="/icons.svg#general--search"
/>
</svg>
</span>
Expand Down
5 changes: 3 additions & 2 deletions src/ec/packages/ec-component-search-form/demo/data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,21 @@ import specs from '@ecl/ec-specs-search-form/demo/data';
const data = {
text_input: {
id: specs.textInputId,
name: 'search',
extra_classes: 'ecl-search-form__text-input',
label: specs.inputLabel,
type: 'search',
},
button: {
variant: 'search',
icon: {
type: 'general',
name: 'search',
path: '/icons.svg',
size: 'fluid',
size: 'xs',
},
label: specs.buttonLabel,
extra_classes: 'ecl-search-form__button',
extra_attributes: [{ name: 'aria-label', value: 'Search' }],
},
};

Expand Down
29 changes: 5 additions & 24 deletions src/ec/packages/ec-component-search-form/search-form.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,21 @@
import { merge, renderTwigFileAsNode } from '@ecl-twig/test-utils';
import data from './demo/data';

describe('EC - Search Form', () => {
const template =
'@ecl-twig/ec-component-search-form/ecl-search-form.html.twig';
const render = params => renderTwigFileAsNode(template, params);
const defaultIconPath = 'static/icons.svg';

describe('Default', () => {
const options = {
text_input: {
id: 'input-email',
name: 'email',
extra_classes: 'ecl-search-form__text-input',
},
button: {
variant: 'search',
icon: {
type: 'general',
name: 'search',
path: defaultIconPath,
size: 'fluid',
},
label: 'Search',
extra_classes: 'ecl-search-form__button',
},
};

test('renders correctly', () => {
expect.assertions(1);
return expect(render(options)).resolves.toMatchSnapshot();
return expect(render(data)).resolves.toMatchSnapshot();
});

test('renders correctly with extra class names', () => {
expect.assertions(1);

const withExtraClasses = merge(options, {
const withExtraClasses = merge(data, {
extra_classes: 'custom-class custom-class--test',
});

Expand All @@ -44,7 +25,7 @@ describe('EC - Search Form', () => {
test('renders correctly with extra attributes', () => {
expect.assertions(1);

const withExtraAttributes = merge(options, {
const withExtraAttributes = merge(data, {
extra_attributes: [
{ name: 'data-test', value: 'data-test-value' },
{ name: 'data-test-1', value: 'data-test-value-1' },
Expand All @@ -57,7 +38,7 @@ describe('EC - Search Form', () => {
test('renders correctly with extra form elements', () => {
expect.assertions(1);

const withExtraFormElements = merge(options, {
const withExtraFormElements = merge(data, {
extra_form_elements:
'<input type="hidden" id="custId" name="custId" value="1">',
});
Expand Down

0 comments on commit 9fc9a92

Please sign in to comment.