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.
* init component * update component * add test * fix bad copy/paste * eye candy
- Loading branch information
1 parent
ec9ef71
commit a38e2b1
Showing
9 changed files
with
333 additions
and
0 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| __snapshots__ | ||
| docs | ||
| *.story.js | ||
| *.test.js | ||
| **/*.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 @@ | ||
| # ECL Twig - EC Text Area component |
49 changes: 49 additions & 0 deletions
49
src/ec/packages/ec-component-text-area/__snapshots__/text-area.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,49 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`EC - Text area Default renders correctly 1`] = ` | ||
| "<div class=\\"ecl-form-group ecl-form-group--text-area\\"> | ||
| <label class=\\"ecl-form-label\\" for=\\"example-id\\">Label</label | ||
| ><textarea | ||
| id=\\"example-id\\" | ||
| name=\\"example-name\\" | ||
| rows=\\"4\\" | ||
| placeholder=\\"Placeholder\\" | ||
| class=\\"ecl-text-area\\" | ||
| ></textarea> | ||
| <div class=\\"ecl-help-block\\">Help message</div> | ||
| </div> | ||
| " | ||
| `; | ||
| exports[`EC - Text area Disabled renders correctly 1`] = ` | ||
| "<div class=\\"ecl-form-group ecl-form-group--text-area\\"> | ||
| <label class=\\"ecl-form-label\\" for=\\"example-id\\">Label</label | ||
| ><textarea | ||
| id=\\"example-id\\" | ||
| name=\\"\\" | ||
| rows=\\"4\\" | ||
| placeholder=\\"Placeholder\\" | ||
| class=\\"ecl-text-area\\" | ||
| disabled | ||
| ></textarea> | ||
| <div class=\\"ecl-help-block\\">Help message</div> | ||
| </div> | ||
| " | ||
| `; | ||
| exports[`EC - Text area With error renders correctly 1`] = ` | ||
| "<div class=\\"ecl-form-group ecl-form-group--text-area\\"> | ||
| <label class=\\"ecl-form-label ecl-form-label--invalid\\" for=\\"example-id\\" | ||
| >Label</label | ||
| ><textarea | ||
| id=\\"example-id\\" | ||
| name=\\"example-name\\" | ||
| rows=\\"4\\" | ||
| placeholder=\\"Placeholder\\" | ||
| class=\\"ecl-text-area ecl-text-area--invalid\\" | ||
| ></textarea> | ||
| <div class=\\"ecl-feedback-message\\">Error message</div> | ||
| <div class=\\"ecl-help-block\\">Help message</div> | ||
| </div> | ||
| " | ||
| `; |
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,49 @@ | ||
| # ECL Twig - EC Text Area component | ||
|
|
||
| npm package: `@ecl-twig/ec-component-text-area` | ||
|
|
||
| ```shell | ||
| npm install --save @ecl-twig/ec-component-text-area | ||
| ``` | ||
|
|
||
| ## Text area | ||
|
|
||
| ### Parameters: | ||
|
|
||
| - "id" (string) (default: '') | ||
| - "disabled" (boolean) (default: false) | ||
| - "invalid" (boolean) (default: false) | ||
| - "name" (string) (default: '') | ||
| - "hide_label" (boolean) (default: '') | ||
| - "placeholder" (string) (default: '') | ||
| - "rows" (int) (default: 4) | ||
| - "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the text area | ||
| - "extra_attributes" (optional) (array) (default: []) Extra attributes for text area | ||
| - "name" (string) Attribute name, eg. 'data-test' | ||
| - "value" (string) Attribute value, eg: 'data-test-1' | ||
|
|
||
| ### Blocks: | ||
|
|
||
| - "helper_text" | ||
| - "invalid_text" | ||
| - "label" | ||
|
|
||
| ### Example: | ||
|
|
||
| <!-- prettier-ignore --> | ||
| ```twig | ||
| {% include 'path/to/text-area.html.twig' with { | ||
| label: 'Comment', | ||
| placeholder: 'Please enter your comment', | ||
| invalid_text: "Comment have been locked on this article", | ||
| helper_text: 'Your comment may be 255 characters long maximum', | ||
| id: 'input-comment', | ||
| name: 'comment', | ||
| rows: 4, | ||
| 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-area", | ||
| "author": "European Commission", | ||
| "license": "EUPL-1.1", | ||
| "version": "0.0.1-alpha", | ||
| "description": "ECL Twig - EC Text Area", | ||
| "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-area": "^2.1.0", | ||
| "@ecl/ec-specs-text-area": "^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" | ||
| ] | ||
| } |
83 changes: 83 additions & 0 deletions
83
src/ec/packages/ec-component-text-area/text-area.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,83 @@ | ||
| {# | ||
| Parameters: | ||
| - "id" (string) (default: '') | ||
| - "disabled" (boolean) (default: false) | ||
| - "invalid" (boolean) (default: false) | ||
| - "name" (string) (default: '') | ||
| - "hide_label" (boolean) (default: '') | ||
| - "placeholder" (string) (default: '') | ||
| - "rows" (int) (default: 4) | ||
| - "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the text area | ||
| - "extra_attributes" (optional) (array) (default: []) Extra attributes for text area | ||
| - "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 _name = name|default('') %} | ||
| {% set _hide_label = hide_label|default(false) %} | ||
| {% set _placeholder = placeholder|default('') %} | ||
| {% set _rows = rows|default(4) %} | ||
|
|
||
| {% set _helper_text = helper_text|default('') %} | ||
| {% set _invalid_text = invalid_text|default('') %} | ||
| {% set _label = label|default('') %} | ||
|
|
||
| {% set _css_class = ['ecl-text-area'] %} | ||
| {% if _invalid %} | ||
| {% set _css_class = _css_class|merge(['ecl-text-area--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 #} | ||
| {% spaceless %} | ||
| <div class="ecl-form-group ecl-form-group--text-area"> | ||
| {%- 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 -%} | ||
|
|
||
| <textarea | ||
| id="{{- _id -}}" | ||
| name="{{- _name -}}" | ||
| rows="{{- _rows -}}" | ||
| placeholder="{{- _placeholder -}}" | ||
| class="{{- _css_class -}}" | ||
| {{- _disabled ? "disabled" -}} | ||
| {{- _extra_attributes|raw -}} | ||
| > | ||
| </textarea> | ||
|
|
||
| {%- 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> | ||
| {% endspaceless %} |
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 textAreaDocs from './docs/text-area.md'; | ||
|
|
||
| import textArea from './text-area.html.twig'; | ||
|
|
||
| storiesOf('Components/Text area', module) | ||
| .addDecorator(withKnobs) | ||
| .addDecorator(withNotes) | ||
| .addDecorator(withCode) | ||
| .add( | ||
| 'default', | ||
| () => | ||
| textArea({ | ||
| 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: textAreaDocs }, | ||
| } | ||
| ); |
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 area', () => { | ||
| const template = path.resolve(__dirname, './text-area.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