This repository has been archived by the owner on May 2, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add text input component (#20)
Add component text input (EC and EU)
- Loading branch information
Showing
29 changed files
with
764 additions
and
27 deletions.
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
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
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
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
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
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 Text Input component |
57 changes: 57 additions & 0 deletions
57
src/ec/packages/ec-component-text-input/__snapshots__/text-input.test.js.snap
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,57 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`EC - Text input Default renders correctly 1`] = ` | ||
| "<div class=\\"ecl-form-group ecl-form-group--text-input\\"> | ||
| <label class=\\"ecl-form-label\\" for=\\"example-id\\"> Label </label> | ||
| <input | ||
| id=\\"example-id\\" | ||
| name=\\"example-name\\" | ||
| type=\\"text\\" | ||
| placeholder=\\"Placeholder\\" | ||
| class=\\"ecl-text-input\\" | ||
| /> | ||
| <div class=\\"ecl-help-block\\">Help message</div> | ||
| </div> | ||
| " | ||
| `; | ||
| exports[`EC - Text input Disabled renders correctly 1`] = ` | ||
| "<div class=\\"ecl-form-group ecl-form-group--text-input\\"> | ||
| <label class=\\"ecl-form-label\\" for=\\"example-id\\"> Label </label> | ||
| <input | ||
| id=\\"example-id\\" | ||
| name=\\"\\" | ||
| type=\\"text\\" | ||
| placeholder=\\"Placeholder\\" | ||
| class=\\"ecl-text-input\\" | ||
| disabled | ||
| /> | ||
| <div class=\\"ecl-help-block\\">Help message</div> | ||
| </div> | ||
| " | ||
| `; | ||
| exports[`EC - Text input With error renders correctly 1`] = ` | ||
| "<div class=\\"ecl-form-group ecl-form-group--text-input\\"> | ||
| <label class=\\"ecl-form-label ecl-form-label--invalid\\" for=\\"example-id\\"> | ||
| Label | ||
| </label> | ||
| <input | ||
| id=\\"example-id\\" | ||
| name=\\"example-name\\" | ||
| type=\\"text\\" | ||
| placeholder=\\"Placeholder\\" | ||
| class=\\"ecl-text-input ecl-text-input--invalid\\" | ||
| /> | ||
| <div class=\\"ecl-feedback-message\\">Error message</div> | ||
| <div class=\\"ecl-help-block\\">Help message</div> | ||
| </div> | ||
| " | ||
| `; |
45 changes: 45 additions & 0 deletions
45
src/ec/packages/ec-component-text-input/docs/text-input.md
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,45 @@ | ||
| # ECL Twig - EC Text Input component | ||
|
|
||
| npm package: `@ecl-twig/ec-component-text-input` | ||
|
|
||
| ```shell | ||
| npm install --save @ecl-twig/ec-component-text-input | ||
| ``` | ||
|
|
||
| ## Text input | ||
|
|
||
| ### Parameters: | ||
|
|
||
| - "id" (string) (default: '') | ||
| - "disabled" (boolean) (default: false) | ||
| - "invalid" (boolean) (default: false) | ||
| - "invalid_icon_label" (string) (default: '') | ||
| - "name" (string) (default: '') | ||
| - "hide_label" (boolean) (default: '') | ||
| - "placeholder" (string) (default: '') | ||
| - "type" (string) (default: 'text') | ||
| - "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the icon | ||
| - "extra_attributes" (optional) (array) (default: []) Extra attributes for icon | ||
| - "name" (string) Attribute name, eg. 'data-test' | ||
| - "value" (string) Attribute value, eg: 'data-test-1' | ||
|
|
||
| ### Blocks: | ||
|
|
||
| - "helper_text" | ||
| - "invalid_text" | ||
| - "label" | ||
|
|
||
| ### Example: | ||
|
|
||
| ```twig | ||
| {% include 'path/to/text-input.html.twig' with { | ||
| label: 'Email address', | ||
| placeholder: 'Please enter your email address', | ||
| invalid_text: "Invalid email address. Valid e-mail can contain only latin letters, numbers, '@' and '.'", | ||
| helper_text: 'This address will be used for contact purpose', | ||
| id: 'input-email', | ||
| name: 'email', | ||
| extra_classes: 'my-extra-class-1 my-extra-class-2', | ||
| extra_attributes: [{ name: 'data-test-1', value: 'data-test-value-1' },{ name: 'data-test-2', value: 'data-test-value-2' }] | ||
| } %} | ||
| ``` |
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-text-input", | ||
| "author": "European Commission", | ||
| "license": "EUPL-1.1", | ||
| "version": "0.0.1-alpha", | ||
| "description": "ECL Twig - EC Text Input", | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "devDependencies": { | ||
| "@ecl/ec-component-form-feedback-message": "^2.1.0", | ||
| "@ecl/ec-component-form-form-group": "^2.1.0", | ||
| "@ecl/ec-component-form-help-block": "^2.1.0", | ||
| "@ecl/ec-component-form-label": "^2.1.0", | ||
| "@ecl/ec-component-form-text-input": "^2.1.0", | ||
| "@ecl/ec-specs-text-input": "^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" | ||
| ] | ||
| } |
82 changes: 82 additions & 0 deletions
82
src/ec/packages/ec-component-text-input/text-input.html.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,82 @@ | ||
| {# | ||
| Parameters: | ||
| - "id" (string) (default: '') | ||
| - "disabled" (boolean) (default: false) | ||
| - "invalid" (boolean) (default: false) | ||
| - "invalid_icon_label" (string) (default: '') | ||
| - "name" (string) (default: '') | ||
| - "hide_label" (boolean) (default: '') | ||
| - "placeholder" (string) (default: '') | ||
| - "type" (string) (default: 'text') | ||
| - "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the icon | ||
| - "extra_attributes" (optional) (array) (default: []) Extra attributes for icon | ||
| - "name" (string) Attribute name, eg. 'data-test' | ||
| - "value" (string) Attribute value, eg: 'data-test-1' | ||
| Blocks: | ||
| - "helper_text" | ||
| - "invalid_text" | ||
| - "label" | ||
| #} | ||
|
|
||
| {# Internal properties #} | ||
| {% set _id = id|default('') %} | ||
| {% set _disabled = disabled|default(false) %} | ||
| {% set _invalid = invalid|default(false) %} | ||
| {% set _invalid_icon_label = invalid_icon_label|default('') %} | ||
| {% set _name = name|default('') %} | ||
| {% set _hide_label = hide_label|default(false) %} | ||
| {% set _placeholder = placeholder|default('') %} | ||
| {% set _type = type|default('text') %} | ||
|
|
||
| {% set _helper_text = helper_text|default('') %} | ||
| {% set _invalid_text = invalid_text|default('') %} | ||
| {% set _label = label|default('') %} | ||
|
|
||
| {% set _css_class = ['ecl-text-input'] %} | ||
| {% if _invalid %} | ||
| {% set _css_class=_css_class|merge(['ecl-text-input--invalid']) %} | ||
| {% endif %} | ||
| {% set _css_class=_css_class|join(' ') %} | ||
|
|
||
| {% 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 %} | ||
|
|
||
| {# Print the result #} | ||
| <div class="ecl-form-group ecl-form-group--text-input"> | ||
| {% if _label is not empty %} | ||
| <label | ||
| class="ecl-form-label{{invalid ? ' ecl-form-label--invalid'}}{{hide_label ? ' ecl-form-label--hidden'}}" | ||
| for={{_id}} | ||
| > | ||
| {% block label _label %} | ||
| </label> | ||
| {% endif %} | ||
|
|
||
| <input | ||
| id="{{_id}}" | ||
| name="{{_name}}" | ||
| type="{{_type}}" | ||
| placeholder="{{_placeholder}}" | ||
| class="{{_css_class}}" | ||
| {{_disabled ? "disabled"}} | ||
| {{ _extra_attributes|raw }} | ||
| /> | ||
|
|
||
| {% if _invalid and _invalid_text is not empty %} | ||
| <div class="ecl-feedback-message">{% block invalid_text _invalid_text %}</div> | ||
| {% endif %} | ||
|
|
||
| {% if _helper_text is not empty %} | ||
| <div class="ecl-help-block">{% block helper_text _helper_text %}</div> | ||
| {% endif %} | ||
| </div> |
31 changes: 31 additions & 0 deletions
31
src/ec/packages/ec-component-text-input/text-input.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,31 @@ | ||
| import { storiesOf } from '@storybook/html'; | ||
| import { withKnobs, text, boolean } from '@storybook/addon-knobs'; | ||
| import { withNotes } from '@ecl-twig/storybook-addon-notes'; | ||
| import withCode from '@ecl-twig/storybook-addon-code'; | ||
|
|
||
| import textInputDocs from './docs/text-input.md'; | ||
|
|
||
| import textInput from './text-input.html.twig'; | ||
|
|
||
| storiesOf('Components/Text input', module) | ||
| .addDecorator(withKnobs) | ||
| .addDecorator(withNotes) | ||
| .addDecorator(withCode) | ||
| .add( | ||
| 'default', | ||
| () => | ||
| textInput({ | ||
| label: text('Label', 'Label'), | ||
| placeholder: text('Placeholder', 'Placeholder'), | ||
| invalid: boolean('Invalid', false), | ||
| invalid_text: text('Error message', 'Error message'), | ||
| helper_text: text('Help message', 'Help message'), | ||
| disabled: boolean('Disabled', false), | ||
| hide_label: boolean('Hide label', false), | ||
| id: 'example-id', | ||
| name: 'example-name', | ||
| }), | ||
| { | ||
| notes: { markdown: textInputDocs }, | ||
| } | ||
| ); |
71 changes: 71 additions & 0 deletions
71
src/ec/packages/ec-component-text-input/text-input.test.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,71 @@ | ||
| import path from 'path'; | ||
| import { renderTwigFile } from '@ecl-twig/test-utils'; | ||
|
|
||
| describe('EC - Text input', () => { | ||
| const template = path.resolve(__dirname, './text-input.html.twig'); | ||
|
|
||
| describe('Default', () => { | ||
| test('renders correctly', done => { | ||
| expect.assertions(1); | ||
|
|
||
| renderTwigFile( | ||
| template, | ||
| { | ||
| label: 'Label', | ||
| placeholder: 'Placeholder', | ||
| helper_text: 'Help message', | ||
| id: 'example-id', | ||
| name: 'example-name', | ||
| }, | ||
| (err, html) => { | ||
| expect(html).toMatchSnapshot(); | ||
| done(); | ||
| } | ||
| ); | ||
| }); | ||
| }); | ||
|
|
||
| describe('Disabled', () => { | ||
| test('renders correctly', done => { | ||
| expect.assertions(1); | ||
|
|
||
| renderTwigFile( | ||
| template, | ||
| { | ||
| label: 'Label', | ||
| placeholder: 'Placeholder', | ||
| helper_text: 'Help message', | ||
| disabled: true, | ||
| id: 'example-id', | ||
| }, | ||
| (err, html) => { | ||
| expect(html).toMatchSnapshot(); | ||
| done(); | ||
| } | ||
| ); | ||
| }); | ||
| }); | ||
|
|
||
| describe('With error', () => { | ||
| test('renders correctly', done => { | ||
| expect.assertions(1); | ||
|
|
||
| renderTwigFile( | ||
| template, | ||
| { | ||
| label: 'Label', | ||
| placeholder: 'Placeholder', | ||
| invalid: true, | ||
| invalid_text: 'Error message', | ||
| helper_text: 'Help message', | ||
| id: 'example-id', | ||
| name: 'example-name', | ||
| }, | ||
| (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
Oops, something went wrong.