diff --git a/src/ec/packages/ec-component-search-form/.npmignore b/src/ec/packages/ec-component-search-form/.npmignore new file mode 100644 index 000000000..496a263d7 --- /dev/null +++ b/src/ec/packages/ec-component-search-form/.npmignore @@ -0,0 +1 @@ +*.story.js diff --git a/src/ec/packages/ec-component-search-form/README.md b/src/ec/packages/ec-component-search-form/README.md new file mode 100644 index 000000000..21f288a06 --- /dev/null +++ b/src/ec/packages/ec-component-search-form/README.md @@ -0,0 +1 @@ +# ECL Twig - EC Search Form diff --git a/src/ec/packages/ec-component-search-form/__snapshots__/search-form.test.js.snap b/src/ec/packages/ec-component-search-form/__snapshots__/search-form.test.js.snap new file mode 100644 index 000000000..5fa3c2c69 --- /dev/null +++ b/src/ec/packages/ec-component-search-form/__snapshots__/search-form.test.js.snap @@ -0,0 +1,33 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EC - Search Form Default - search form renders correctly 1`] = ` +"
+
+ +
+ + +
+" +`; diff --git a/src/ec/packages/ec-component-search-form/docs/search-form.md b/src/ec/packages/ec-component-search-form/docs/search-form.md new file mode 100644 index 000000000..ec1cc19db --- /dev/null +++ b/src/ec/packages/ec-component-search-form/docs/search-form.md @@ -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' + } +} %} +``` diff --git a/src/ec/packages/ec-component-search-form/package.json b/src/ec/packages/ec-component-search-form/package.json new file mode 100644 index 000000000..e5df8b8c9 --- /dev/null +++ b/src/ec/packages/ec-component-search-form/package.json @@ -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" + ] +} diff --git a/src/ec/packages/ec-component-search-form/search-form.html.twig b/src/ec/packages/ec-component-search-form/search-form.html.twig new file mode 100644 index 000000000..b4d1b19cb --- /dev/null +++ b/src/ec/packages/ec-component-search-form/search-form.html.twig @@ -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 %} + + diff --git a/src/ec/packages/ec-component-search-form/search-form.story.js b/src/ec/packages/ec-component-search-form/search-form.story.js new file mode 100644 index 000000000..af9bb4481 --- /dev/null +++ b/src/ec/packages/ec-component-search-form/search-form.story.js @@ -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', + 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 }, + } + ); diff --git a/src/ec/packages/ec-component-search-form/search-form.test.js b/src/ec/packages/ec-component-search-form/search-form.test.js new file mode 100644 index 000000000..d130e6633 --- /dev/null +++ b/src/ec/packages/ec-component-search-form/search-form.test.js @@ -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(); + }); + }); + }); +}); diff --git a/yarn.lock b/yarn.lock index 0b3342023..ce2775511 100644 --- a/yarn.lock +++ b/yarn.lock @@ -707,6 +707,19 @@ resolved "https://registry.yarnpkg.com/@ecl/ec-base/-/ec-base-2.1.0.tgz#a5f4ff88417563195045d66ed0cc8bb1f6ab0da1" integrity sha512-VAymf9N9+afEPuErE0ABg5sH96+maUYqHCnYElaTCpjj/EAu7PeybU57k1rnlOXkXjnzEGmrqODC8Hu7XXXZJA== +"@ecl/ec-base@^2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@ecl/ec-base/-/ec-base-2.1.1.tgz#7dcb382ebe55d19511a2a112d8603111c334db6b" + integrity sha512-q+IXLQcoumzdO/pHlX9R+JPtqYjiZYKZkLVzxTHZx+9L/UR4pRZo9aN3nKBgm78YzoeP137KRrItKZ7qgl1TaQ== + +"@ecl/ec-component-button@^2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@ecl/ec-component-button/-/ec-component-button-2.1.1.tgz#7ea70e9e4c8b1744831ac33ad0e0c9d5cce521d4" + integrity sha512-5w4EIsLLwklr6GEvP9S4wVHs1HPFnFAfzmXaDMKRXz8ok0iyPU7vvWw5FLOEutlvoCy33kALE9W3AC4Ws/W3aA== + dependencies: + "@ecl/ec-base" "^2.1.1" + "@ecl/ec-component-icon" "^2.1.1" + "@ecl/ec-component-form-feedback-message@^2.1.0": version "2.1.0" resolved "https://registry.yarnpkg.com/@ecl/ec-component-form-feedback-message/-/ec-component-form-feedback-message-2.1.0.tgz#2b885399ab9eff231a244f271fa02241d5734df5" @@ -742,6 +755,31 @@ dependencies: "@ecl/ec-base" "^2.1.0" +"@ecl/ec-component-form-text-input@^2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@ecl/ec-component-form-text-input/-/ec-component-form-text-input-2.1.1.tgz#ef684f47103c875c73bdd976ebce11e3251ae185" + integrity sha512-izSvOKnAXlRik3qbEb5XqlvCn5CdiBn8TkoVBloIEr8FsxHd0KpZINGAs+vqLCbswSmZR04w/MEGuuobpb/0dA== + dependencies: + "@ecl/ec-base" "^2.1.1" + +"@ecl/ec-component-icon@^2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@ecl/ec-component-icon/-/ec-component-icon-2.1.1.tgz#15fbb83e5fd940c208fc05d482d12cfa51f655c2" + integrity sha512-6aUDaXCWZgdyFv9B+zix6mBADPb9OzuoPxvfsARC689zToCPYl+zcYzsFPT9b4wW3+naqRnngl9RVQUG8ksheg== + dependencies: + "@ecl/ec-base" "^2.1.1" + +"@ecl/ec-component-search-form@^2.1.0": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@ecl/ec-component-search-form/-/ec-component-search-form-2.1.1.tgz#b9cbbd15b3536fc083b8090cf43318cf80530bc8" + integrity sha512-Y8HmmksmjjecB6ErHQtotEPm+0cUvMvGUEvGS/c+dRYJJGzytJiKsaqyTlYzj4OD/iugpNrztuaW/WS8QDe56g== + dependencies: + "@ecl/ec-base" "^2.1.1" + "@ecl/ec-component-button" "^2.1.1" + "@ecl/ec-component-form-text-input" "^2.1.1" + "@ecl/ec-component-icon" "^2.1.1" + "@ecl/ec-utility-screen-reader" "^2.1.1" + "@ecl/ec-resources-icons@^2.1.1", "@ecl/ec-resources-icons@~2.1.0": version "2.1.1" resolved "https://registry.yarnpkg.com/@ecl/ec-resources-icons/-/ec-resources-icons-2.1.1.tgz#e0a034a3c9aa499d9179a137ebe02e5518033eec" @@ -774,6 +812,11 @@ resolved "https://registry.yarnpkg.com/@ecl/ec-specs-link/-/ec-specs-link-2.1.1.tgz#35a576c0e9a7d7db8b862f480171b172b9e36c86" integrity sha512-Dt1MK3S/e4neDATp6ymzYKeF1+vOoO28/stJaNPLpQHT2mOIqa2rKmvlyqU5WjF2CcUvzfBmrLw+vyPKBnkwrA== +"@ecl/ec-specs-search-form@~2.1.0": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@ecl/ec-specs-search-form/-/ec-specs-search-form-2.1.1.tgz#2dce0524030efd55e823bcacc1c419381aec6d27" + integrity sha512-MpYlOXUpZ2oBx56KakpmV/ARsWEfJPM6L9tnKOU6vdPjdj3cUofklCWKB23P+Oy0v8xnWA9cjjpQKQBCTPql9A== + "@ecl/ec-specs-tag@~2.1.0": version "2.1.1" resolved "https://registry.yarnpkg.com/@ecl/ec-specs-tag/-/ec-specs-tag-2.1.1.tgz#2923e92b939e335387093cf75a8094fef4aa4b6a" @@ -784,6 +827,13 @@ resolved "https://registry.yarnpkg.com/@ecl/ec-specs-text-input/-/ec-specs-text-input-2.1.0.tgz#482bd4655ea8dde8b68bffacfb21e9d0936fe73c" integrity sha512-u/1UHaZXgDkI6BbmRQVVGleI7IM1dUc/lV23rdNy6xylMgLE0DcmMKz+gUiVilcrd8AOGgm6UVCb4T/GYQzHqA== +"@ecl/ec-utility-screen-reader@^2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@ecl/ec-utility-screen-reader/-/ec-utility-screen-reader-2.1.1.tgz#1b3808b7e43281986c14cc2b598a7974a4fdea01" + integrity sha512-E8CARlHky++r90+92/6MY720vEt+jdhWRcTvjtcZfh8gxqxc7bIxasLOxNNibE0DNQoRxlk9pb018mfIdyeUlw== + dependencies: + "@ecl/ec-base" "^2.1.1" + "@ecl/eu-base@^2.1.0": version "2.1.0" resolved "https://registry.yarnpkg.com/@ecl/eu-base/-/eu-base-2.1.0.tgz#a2987c4d3298c2ee822d726cc1d70e91d6b81ed2"