This repository has been archived by the owner on May 2, 2023. It is now read-only.
feat: EC Search Form #28
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| *.story.js |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| # ECL Twig - EC Search Form |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`EC - Search Form Default - search form renders correctly 1`] = ` | ||
| "<form class=\\"ecl-search-form\\" role=\\"search\\"> | ||
| <div class=\\"ecl-form-group ecl-form-group--text-input\\"> | ||
| <input | ||
| id=\\"input-email\\" | ||
| name=\\"email\\" | ||
| type=\\"text\\" | ||
| placeholder=\\"\\" | ||
| class=\\"ecl-text-input ecl-search-form__text-input\\" | ||
| /> | ||
| </div> | ||
|
|
||
| <button | ||
| class=\\"ecl-button ecl-button--search ecl-search-form__button\\" | ||
| type=\\"submit\\" | ||
| > | ||
| <span class=\\"ecl-button__container\\"> | ||
| <span class=\\"ecl-button__label\\">Search</span> | ||
|
|
||
| <svg | ||
| class=\\"ecl-icon ecl-icon--xs ecl-button__icon ecl-button__icon--after\\" | ||
| focusable=\\"false\\" | ||
| aria-hidden=\\"true\\" | ||
| > | ||
| <use xlink:href=\\"static/icons.svg#general--search\\"></use> | ||
| </svg> | ||
| </span> | ||
| </button> | ||
| </form> | ||
| " | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| # ECL Twig - EC Search Form | ||
|
|
||
| npm package: `@ecl-twig/ec-component-search-form` | ||
|
|
||
| ```shell | ||
| npm install --save @ecl-twig/ec-component-search-form | ||
| ``` | ||
|
|
||
| ## Search Form | ||
|
|
||
| ### Parameters | ||
|
|
||
| - "text_input" (associative array) default: A predefined structure for EC Text Input | ||
| - "button" (associative array) default: A predefined structure for EC Button | ||
| - "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the form | ||
| - "extra_attributes" (optional) (array) (default: []) Extra attributes for the form | ||
| - "name" (string) Attribute name, eg. 'data-test' | ||
| - "value" (string) Attribute value, eg: 'data-test-1' | ||
|
|
||
| ### Example: | ||
|
|
||
| ```twig | ||
| {% include 'path/to/icon.html.twig' with { | ||
| text_input: { | ||
| id: 'input-search', | ||
| name: 'search', | ||
| extra_classes: 'ecl-search-form__text-input' | ||
| }, | ||
| button: { | ||
| variant: 'search', | ||
| icon: { | ||
| type: 'general', | ||
| name: 'search', | ||
| path: '/path-to-the-icon-file', | ||
| }, | ||
| label: 'Search', | ||
| extra_classes: 'ecl-search-form__button' | ||
| } | ||
| } %} | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| { | ||
| "name": "@ecl-twig/ec-component-search-form", | ||
| "author": "European Commission", | ||
| "license": "EUPL-1.1", | ||
| "version": "0.0.1-alpha", | ||
| "description": "ECL Twig - EC Search Form", | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "dependencies": { | ||
| "@ecl-twig/ec-component-text-input": "^0.0.1-alpha" , | ||
| "@ecl-twig/ec-component-button": "^0.0.1-alpha" | ||
| }, | ||
| "devDependencies": { | ||
| "@ecl/ec-specs-search-form": "~2.1.0", | ||
| "@ecl/ec-component-search-form": "^2.1.0" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/ec-europa/ecl-twig.git" | ||
| }, | ||
| "bugs": { | ||
| "url": "https://github.com/ec-europa/ecl-twig/issues" | ||
| }, | ||
| "homepage": "https://github.com/ec-europa/ecl-twig", | ||
| "keywords": [ | ||
| "ecl", | ||
| "europa-component-library", | ||
| "design-system", | ||
| "twig" | ||
| ] | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| {# | ||
| Parameters: | ||
| - "text_input" (associative array) default: A predefined structure for EC Text Input | ||
| - "button" (associative array) default: A predefined structure for EC Button | ||
| - "extra_classes" (string) (default: '') | ||
| - "extra_attributes" (array) (default: []): format: [ | ||
| { | ||
| "name" (string) (default: ''), | ||
| "value" (string) (default: '') | ||
| }, | ||
| ... | ||
| ] | ||
| #} | ||
|
|
||
| {% set _css_class = ['ecl-search-form'] %} | ||
| {% set _extra_attributes = '' %} | ||
|
|
||
| {# Internal logic - Process properties #} | ||
| {% if extra_classes is defined and extra_classes is not empty %} | ||
| {% set _css_class = _css_class ~ ' ' ~ extra_classes %} | ||
| {% endif %} | ||
|
|
||
| {% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %} | ||
| {% for attr in extra_attributes %} | ||
| {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %} | ||
| {% endfor %} | ||
| {% endif %} | ||
|
|
||
| <form class="{{ _css_class }}" role="search"{{ _extra_attributes|raw }}> | ||
| {% if text_input is defined %} | ||
| {% include '../ec-component-text-input/text-input.html.twig' with text_input %} | ||
| {% endif %} | ||
|
|
||
| {% if button is defined %} | ||
| {% include '../ec-component-button/button.html.twig' with button %} | ||
| {% endif %} | ||
| </form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { storiesOf } from '@storybook/html'; | ||
| import { withKnobs, text } from '@storybook/addon-knobs'; | ||
| import { withNotes } from '@ecl-twig/storybook-addon-notes'; | ||
| import withCode from '@ecl-twig/storybook-addon-code'; | ||
|
|
||
| import defaultSprite from '@ecl/ec-resources-icons/dist/sprites/icons.svg'; | ||
|
|
||
| import searchFormDocs from './docs/search-form.md'; | ||
| import searchForm from './search-form.html.twig'; | ||
|
|
||
| storiesOf('Components/Search Form', module) | ||
| .addDecorator(withKnobs) | ||
| .addDecorator(withNotes) | ||
| .addDecorator(withCode) | ||
| .add( | ||
| 'default', | ||
| () => | ||
| searchForm({ | ||
| text_input: { | ||
| id: 'input-search', | ||
| name: 'search', | ||
| extra_classes: 'ecl-search-form__text-input', | ||
|
There was a problem hiding this comment. there should be a (hidden) label for the text input. Even if it is not displayed to the users, it offers better accessibility (for screen reader for instance) There was a problem hiding this comment. Please check if I added it well in 72483ba There was a problem hiding this comment. You should add a |
||
| hide_label: true, | ||
| label: text('Button label', 'Search'), | ||
| }, | ||
| button: { | ||
| variant: 'search', | ||
| icon: { | ||
| type: 'general', | ||
| name: 'search', | ||
| path: defaultSprite, | ||
| }, | ||
| label: text('Button label', 'Search'), | ||
| extra_classes: 'ecl-search-form__button', | ||
| }, | ||
| }), | ||
| { | ||
| notes: { markdown: searchFormDocs }, | ||
| } | ||
| ); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import path from 'path'; | ||
| import { renderTwigFile } from '@ecl-twig/test-utils'; | ||
|
|
||
| describe('EC - Search Form', () => { | ||
| const template = path.resolve(__dirname, './search-form.html.twig'); | ||
| const defaultIconPath = 'static/icons.svg'; | ||
|
|
||
| describe('Default', () => { | ||
| test(`- search form renders correctly`, done => { | ||
| expect.assertions(1); | ||
|
|
||
| const defaultDataStructure = { | ||
| text_input: { | ||
| id: 'input-email', | ||
| name: 'email', | ||
| extra_classes: 'ecl-search-form__text-input', | ||
| }, | ||
| button: { | ||
| variant: 'search', | ||
| icon: { | ||
| type: 'general', | ||
| name: 'search', | ||
| path: defaultIconPath, | ||
| }, | ||
| label: 'Search', | ||
| extra_classes: 'ecl-search-form__button', | ||
| }, | ||
| }; | ||
|
|
||
| renderTwigFile(template, defaultDataStructure, (err, html) => { | ||
| expect(html).toMatchSnapshot(); | ||
| done(); | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
as
ec-component-text-inputandec-component-buttonare used directly in the template, they should be added to dependenciesThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added in 72483ba
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
sorry, I meant a dependency to the twig component
@ecl-twig/ec-component-text-inputand@ecl-twig/ec-component-buttonAs they are included in the twig template, if they are not present it will crash. So the dependency is to prevent that.
Also these two should probably be in
dependenciesinstead ofdevDependencies