diff --git a/src/ec/packages/ec-component-text-area/.npmignore b/src/ec/packages/ec-component-text-area/.npmignore new file mode 100644 index 000000000..1081f3f2e --- /dev/null +++ b/src/ec/packages/ec-component-text-area/.npmignore @@ -0,0 +1,5 @@ +__snapshots__ +docs +*.story.js +*.test.js +**/*.md diff --git a/src/ec/packages/ec-component-text-area/README.md b/src/ec/packages/ec-component-text-area/README.md new file mode 100644 index 000000000..e56932865 --- /dev/null +++ b/src/ec/packages/ec-component-text-area/README.md @@ -0,0 +1 @@ +# ECL Twig - EC Text Area component diff --git a/src/ec/packages/ec-component-text-area/__snapshots__/text-area.test.js.snap b/src/ec/packages/ec-component-text-area/__snapshots__/text-area.test.js.snap new file mode 100644 index 000000000..a9f332112 --- /dev/null +++ b/src/ec/packages/ec-component-text-area/__snapshots__/text-area.test.js.snap @@ -0,0 +1,49 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EC - Text area Default renders correctly 1`] = ` +"
+ +
Help message
+
+" +`; + +exports[`EC - Text area Disabled renders correctly 1`] = ` +"
+ +
Help message
+
+" +`; + +exports[`EC - Text area With error renders correctly 1`] = ` +"
+ +
Error message
+
Help message
+
+" +`; diff --git a/src/ec/packages/ec-component-text-area/docs/text-area.md b/src/ec/packages/ec-component-text-area/docs/text-area.md new file mode 100644 index 000000000..b05194146 --- /dev/null +++ b/src/ec/packages/ec-component-text-area/docs/text-area.md @@ -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: + + +```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' } + ] +} %} +``` diff --git a/src/ec/packages/ec-component-text-area/package.json b/src/ec/packages/ec-component-text-area/package.json new file mode 100644 index 000000000..b987fa8d5 --- /dev/null +++ b/src/ec/packages/ec-component-text-area/package.json @@ -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" + ] +} diff --git a/src/ec/packages/ec-component-text-area/text-area.html.twig b/src/ec/packages/ec-component-text-area/text-area.html.twig new file mode 100644 index 000000000..9fa8ffc41 --- /dev/null +++ b/src/ec/packages/ec-component-text-area/text-area.html.twig @@ -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 %} +
+ {%- if _label is not empty -%} + + {%- endif -%} + + + + {%- if _invalid and _invalid_text is not empty -%} +
{%- block invalid_text _invalid_text -%}
+ {%- endif -%} + + {%- if _helper_text is not empty -%} +
{%- block helper_text _helper_text -%}
+ {%- endif -%} +
+{% endspaceless %} diff --git a/src/ec/packages/ec-component-text-area/text-area.story.js b/src/ec/packages/ec-component-text-area/text-area.story.js new file mode 100644 index 000000000..3aa9bd557 --- /dev/null +++ b/src/ec/packages/ec-component-text-area/text-area.story.js @@ -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 }, + } + ); diff --git a/src/ec/packages/ec-component-text-area/text-area.test.js b/src/ec/packages/ec-component-text-area/text-area.test.js new file mode 100644 index 000000000..04fe6e44a --- /dev/null +++ b/src/ec/packages/ec-component-text-area/text-area.test.js @@ -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(); + } + ); + }); + }); +}); diff --git a/yarn.lock b/yarn.lock index da368ca53..3e56d1e6b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -758,6 +758,13 @@ dependencies: "@ecl/ec-base" "^2.1.0" +"@ecl/ec-component-form-text-area@^2.1.0": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@ecl/ec-component-form-text-area/-/ec-component-form-text-area-2.1.1.tgz#9882c8ed8cfb6d6adad810881c95bca2705e5cbb" + integrity sha512-zk4VaCez+mCj0thzDmG3gq6VUwH1bxcV5BiP9hwUUj5u7f+Axk5z2ARDohKB2irXSCTJ1uWvO0aEXA0g6XneQg== + dependencies: + "@ecl/ec-base" "^2.1.1" + "@ecl/ec-component-form-text-input@^2.1.0": version "2.1.0" resolved "https://registry.yarnpkg.com/@ecl/ec-component-form-text-input/-/ec-component-form-text-input-2.1.0.tgz#9b0cf2fc535fd9b48a6c3af76b246ab431d9799d" @@ -880,6 +887,11 @@ resolved "https://registry.yarnpkg.com/@ecl/ec-specs-tag/-/ec-specs-tag-2.1.1.tgz#2923e92b939e335387093cf75a8094fef4aa4b6a" integrity sha512-deHcr7ZVoSnruOs9aWCx31UqLkCvT+bHrsdW7/ohSJOBinPirsSmGAjapAzCf2aHBouaCl4nk3HDKFNVuBUSeQ== +"@ecl/ec-specs-text-area@^2.1.0": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@ecl/ec-specs-text-area/-/ec-specs-text-area-2.1.1.tgz#b0ce474ccc2c7e9e73a7ca07174292e0505ffafb" + integrity sha512-I373y88eDKGkQinEzwvGIMR/3GT4u7eWrGoJVo33MGIupV/+mAFfKbokpws2kbC8Fz52vSCWyPi78oXoaKsXkg== + "@ecl/ec-specs-text-input@^2.1.0": version "2.1.0" resolved "https://registry.yarnpkg.com/@ecl/ec-specs-text-input/-/ec-specs-text-input-2.1.0.tgz#482bd4655ea8dde8b68bffacfb21e9d0936fe73c"