From b8299e5ab5362ba66c55faccec00681428667974 Mon Sep 17 00:00:00 2001 From: serotonine Date: Tue, 3 Sep 2019 10:09:45 +0000 Subject: [PATCH 1/5] feat(menu-legacy): menu-legacy twig implementation - TWIG-5 --- package.json | 2 +- .../ec-component-menu-legacy/.npmignore | 5 + .../ec-component-menu-legacy/CHANGELOG.md | 6 + .../ec-component-menu-legacy/README.md | 1 + .../__snapshots__/menu-legacy.test.js.snap | 3084 +++++++++++++++++ .../ec-component-menu-legacy/demo/data.js | 4 + .../docs/menu-legacy.md | 46 + .../menu-legacy.html.twig | 124 + .../menu-legacy.story.js | 43 + .../menu-legacy.test.js | 40 + .../ec-component-menu-legacy/package.json | 32 + src/ec/packages/ec-components/package.json | 2 +- 12 files changed, 3387 insertions(+), 2 deletions(-) create mode 100644 src/ec/packages/ec-component-menu-legacy/.npmignore create mode 100644 src/ec/packages/ec-component-menu-legacy/CHANGELOG.md create mode 100644 src/ec/packages/ec-component-menu-legacy/README.md create mode 100644 src/ec/packages/ec-component-menu-legacy/__snapshots__/menu-legacy.test.js.snap create mode 100644 src/ec/packages/ec-component-menu-legacy/demo/data.js create mode 100644 src/ec/packages/ec-component-menu-legacy/docs/menu-legacy.md create mode 100644 src/ec/packages/ec-component-menu-legacy/menu-legacy.html.twig create mode 100644 src/ec/packages/ec-component-menu-legacy/menu-legacy.story.js create mode 100644 src/ec/packages/ec-component-menu-legacy/menu-legacy.test.js create mode 100644 src/ec/packages/ec-component-menu-legacy/package.json diff --git a/package.json b/package.json index bdfed6859..80a11f2f8 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "postinstall": "lerna run postinstall && lerna run prepublish", "pretty-check": "prettier --check \"src/**/*.{md,mdx,html,json,yml,js}\"", "publish": "scripts/publish.sh", - "start:ec": "start-storybook -p 9001 -c ./src/ec/.storybook", + "start:ec": "start-storybook -p 8082 -c ./src/ec/.storybook", "start:eu": "echo \"Nothing to do...\"", "update-version": "lerna version --conventional-commits --no-push --no-git-tag-version", "test": "npm run jest" diff --git a/src/ec/packages/ec-component-menu-legacy/.npmignore b/src/ec/packages/ec-component-menu-legacy/.npmignore new file mode 100644 index 000000000..1081f3f2e --- /dev/null +++ b/src/ec/packages/ec-component-menu-legacy/.npmignore @@ -0,0 +1,5 @@ +__snapshots__ +docs +*.story.js +*.test.js +**/*.md diff --git a/src/ec/packages/ec-component-menu-legacy/CHANGELOG.md b/src/ec/packages/ec-component-menu-legacy/CHANGELOG.md new file mode 100644 index 000000000..c3351be9e --- /dev/null +++ b/src/ec/packages/ec-component-menu-legacy/CHANGELOG.md @@ -0,0 +1,6 @@ +# Change Log + +All notable changes to this project will be documented in this file. +See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +### Features diff --git a/src/ec/packages/ec-component-menu-legacy/README.md b/src/ec/packages/ec-component-menu-legacy/README.md new file mode 100644 index 000000000..fe172e06e --- /dev/null +++ b/src/ec/packages/ec-component-menu-legacy/README.md @@ -0,0 +1 @@ +# ECL Twig - EC Menu Legacy diff --git a/src/ec/packages/ec-component-menu-legacy/__snapshots__/menu-legacy.test.js.snap b/src/ec/packages/ec-component-menu-legacy/__snapshots__/menu-legacy.test.js.snap new file mode 100644 index 000000000..8647c0a32 --- /dev/null +++ b/src/ec/packages/ec-component-menu-legacy/__snapshots__/menu-legacy.test.js.snap @@ -0,0 +1,3084 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EC - Menu Legacy renders correctly 1`] = ` + +`; + +exports[`EC - Menu Legacy renders correctly with extra attributes 1`] = ` + +`; + +exports[`EC - Menu Legacy renders correctly with extra class names 1`] = ` + +`; diff --git a/src/ec/packages/ec-component-menu-legacy/demo/data.js b/src/ec/packages/ec-component-menu-legacy/demo/data.js new file mode 100644 index 000000000..8f71a5423 --- /dev/null +++ b/src/ec/packages/ec-component-menu-legacy/demo/data.js @@ -0,0 +1,4 @@ +/* eslint-disable import/no-extraneous-dependencies, no-param-reassign */ +import specData from '@ecl/ec-specs-menu-legacy/demo/data'; + +export default specData; diff --git a/src/ec/packages/ec-component-menu-legacy/docs/menu-legacy.md b/src/ec/packages/ec-component-menu-legacy/docs/menu-legacy.md new file mode 100644 index 000000000..9d5e9ec06 --- /dev/null +++ b/src/ec/packages/ec-component-menu-legacy/docs/menu-legacy.md @@ -0,0 +1,46 @@ +# ECL Twig - EC Navidation Menu + +npm package: `@ecl-twig/ec-component-navigation-menu` + +```shell +npm install --save @ecl-twig/ec-component-navigation-menu +``` + +## Inpage navigation + +### Parameters + +Parameters: + +- "title" (string) (default: '') +- "links" (associative array) (default: predefined structure): format: + { + href: (string) (default: ''), + label: (string) (default: '') + } +- "extra_classes" (string) (default: '') +- "extra_attributes" (array) (default: []): format: [ + { + "name" (string) (default: ''), + "value" (string) (default: '') + }, + ... + ] + +### Example: + + +```twig +{% include 'path/to/navigation-menu.html.twig' with { + title: 'Inpage navigation', + links: [ + { + href: '#heading1', + label: 'Heading 1', + }, + ... + ], + ... + ] +} %} +``` diff --git a/src/ec/packages/ec-component-menu-legacy/menu-legacy.html.twig b/src/ec/packages/ec-component-menu-legacy/menu-legacy.html.twig new file mode 100644 index 000000000..85675c689 --- /dev/null +++ b/src/ec/packages/ec-component-menu-legacy/menu-legacy.html.twig @@ -0,0 +1,124 @@ +{% spaceless %} + +{# + Parameters: + - "label" (string) (default: ''): visible on mobile + + - "items" (array) (default: []): [{ + "label" (string): label of the link + "href" (string): target of the link + "isCurrent" (boolean): does the menu contains the current page? (default: false) + "children" (array) (default: []): [{ + "items" (array) (default: [{}]): [{ + - "label" (string): label of the link + - "href" (string): target of the link + }] + }] + }] + + - "extra_classes" (string) (default: '') + - "extra_attributes" (array) (default: []): format: [ + { + "name" (string) (default: ''), + "value" (string) (default: '') + }, + ... + ] + +#} + +{# Internal properties #} + +{% set _menu_label = label|default('') %} +{% set _links = items|default([]) %} +{% set _css_class = 'ecl-menu-legacy' %} +{% set _prefix_class = 'ecl-menu-legacy' %} +{% set _extra_attributes = '' %} + +{% set _icon = { + path: 'static/media/icons.a11fa655.svg', + type: '', + name: 'ui--corner-arrow', + size: 'xs', + transform: 'rotate-180', + color: '', + extra_classes:'ecl-menu-legacy_link-icon ecl-link__icon ecl-icon'}|merge(icon|default({})) +%} + + + +{# 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 #} + + +{% endspaceless %} diff --git a/src/ec/packages/ec-component-menu-legacy/menu-legacy.story.js b/src/ec/packages/ec-component-menu-legacy/menu-legacy.story.js new file mode 100644 index 000000000..3547df01f --- /dev/null +++ b/src/ec/packages/ec-component-menu-legacy/menu-legacy.story.js @@ -0,0 +1,43 @@ +import { storiesOf } from '@storybook/html'; +import { withKnobs } from '@storybook/addon-knobs'; +import { withNotes } from '@ecl-twig/storybook-addon-notes'; +import withCode from '@ecl-twig/storybook-addon-code'; +import iconPath from '@ecl/ec-resources-icons/dist/sprites/icons.svg'; + +import menuLegacyDocs from './docs/menu-legacy.md'; + +import demoData from './demo/data'; + +import menuLegacy from './menu-legacy.html.twig'; + +storiesOf('Components/Navigation/Menu Legacy', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator(withCode) + .add( + 'default', + () => { + const fullDemoData = { ...demoData, icon_path: iconPath }; + + const html = menuLegacy(fullDemoData); + + const demo = document.createDocumentFragment(); + + const htmlElement = document.createElement('div'); + htmlElement.innerHTML = `
${html}
`; + demo.appendChild(htmlElement.firstChild); + + const scriptElement = document.createElement('script'); + scriptElement.innerHTML = ` + var elements = document.querySelectorAll('[data-ecl-menu-legacy]'); + var menuLegacy = new ECL.MenuLegacy(elements[0]); + menuLegacy.init(); + `; + demo.appendChild(scriptElement); + + return demo; + }, + { + notes: { markdown: menuLegacyDocs }, + } + ); diff --git a/src/ec/packages/ec-component-menu-legacy/menu-legacy.test.js b/src/ec/packages/ec-component-menu-legacy/menu-legacy.test.js new file mode 100644 index 000000000..52147f034 --- /dev/null +++ b/src/ec/packages/ec-component-menu-legacy/menu-legacy.test.js @@ -0,0 +1,40 @@ +/* eslint-disable no-param-reassign */ + +import path from 'path'; +import { merge, renderTwigFileAsNode } from '@ecl-twig/test-utils'; + +import demoData from './demo/data'; + +describe('EC - Menu Legacy', () => { + const template = path.resolve(__dirname, './menu-legacy.html.twig'); + const render = params => renderTwigFileAsNode(template, params); + + test('renders correctly', () => { + expect.assertions(1); + + return expect(render(demoData)).resolves.toMatchSnapshot(); + }); + + test('renders correctly with extra class names', () => { + expect.assertions(1); + + const optionsWithExtraClasses = merge(demoData, { + extra_classes: 'custom-class custom-class--test', + }); + + return expect(render(optionsWithExtraClasses)).resolves.toMatchSnapshot(); + }); + + test('renders correctly with extra attributes', () => { + expect.assertions(1); + + const optionsWithExtraClasses = merge(demoData, { + extra_attributes: [ + { name: 'data-test', value: 'data-test-value' }, + { name: 'data-test-1', value: 'data-test-value-1' }, + ], + }); + + return expect(render(optionsWithExtraClasses)).resolves.toMatchSnapshot(); + }); +}); diff --git a/src/ec/packages/ec-component-menu-legacy/package.json b/src/ec/packages/ec-component-menu-legacy/package.json new file mode 100644 index 000000000..291cd5184 --- /dev/null +++ b/src/ec/packages/ec-component-menu-legacy/package.json @@ -0,0 +1,32 @@ +{ + "name": "@ecl-twig/ec-component-menu-legacy", + "author": "European Commission", + "license": "EUPL-1.1", + "version": "2.8.0", + "description": "ECL Twig - EC Menu Legacy", + "publishConfig": { + "access": "public" + }, + "dependencies": { + "@ecl-twig/ec-component-icon": "2.8.0", + "@ecl-twig/ec-component-link": "2.8.0" + }, + "devDependencies": { + "@ecl/ec-component-menu-legacy": "~2.9.0", + "@ecl/ec-specs-menu-legacy": "~2.9.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-components/package.json b/src/ec/packages/ec-components/package.json index bf6f7a730..fd66f5eb7 100644 --- a/src/ec/packages/ec-components/package.json +++ b/src/ec/packages/ec-components/package.json @@ -14,7 +14,7 @@ "@ecl-twig/ec-component-breadcrumb": "2.8.0", "@ecl-twig/ec-component-button": "2.8.0", "@ecl-twig/ec-component-card": "2.8.0", - "@ecl-twig/ec-component-contextual-navigation": "2.8.0", + "@ecl-twig/ec-component-menu-legacy": "2.8.0", "@ecl-twig/ec-component-description-list": "2.8.0", "@ecl-twig/ec-component-expandable": "2.8.0", "@ecl-twig/ec-component-file": "2.8.0", From f3a4d7ec9aaa1cef6ce02c3b6fc463da7556282a Mon Sep 17 00:00:00 2001 From: serotonine Date: Tue, 3 Sep 2019 10:16:54 +0000 Subject: [PATCH 2/5] feat(menu-legacy): add yarn.lock to pass TEST=dependencies - TWIG-5 --- yarn.lock | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/yarn.lock b/yarn.lock index 395812e32..7f0e2a1b6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -939,6 +939,15 @@ dependencies: "@ecl/ec-base" "^2.9.0" +"@ecl/ec-component-menu-legacy@~2.9.0": + version "2.9.0" + resolved "https://registry.yarnpkg.com/@ecl/ec-component-menu-legacy/-/ec-component-menu-legacy-2.9.0.tgz#0920e7c52520af8582d0e8d7588004a0afebb222" + integrity sha512-yf/U5YKEJ+EiAtwDo4HtVU+G83rWh5uyGlix6GJSOK+aCpCM/JWCrHVmt9ProHFR8nEMX1Po+UdHhWUZ+IE/3A== + dependencies: + "@ecl/ec-base" "^2.9.0" + "@ecl/ec-component-button" "^2.9.0" + "@ecl/ec-component-link" "^2.9.0" + "@ecl/ec-component-message@~2.9.0": version "2.9.0" resolved "https://registry.yarnpkg.com/@ecl/ec-component-message/-/ec-component-message-2.9.0.tgz#457052481bfb911c2dba0c53a94c8c9592b4028f" @@ -1128,6 +1137,11 @@ resolved "https://registry.yarnpkg.com/@ecl/ec-specs-media-container/-/ec-specs-media-container-2.9.0.tgz#3e74b780a085e8c1c75d82d311d8f1cc571b2aff" integrity sha512-xjTvlJZCFsJijefWZErk7yzfggjDkkyfuHWCaHNQGGQ93JT5SAyriYL70pEvbXzEIMUPiWRPmWM771MDdCsZow== +"@ecl/ec-specs-menu-legacy@~2.9.0": + version "2.9.0" + resolved "https://registry.yarnpkg.com/@ecl/ec-specs-menu-legacy/-/ec-specs-menu-legacy-2.9.0.tgz#9fb620783532713d3089459cf69db2f0a92b1d62" + integrity sha512-HRCDwgCnYpFKLUUNWqzWTHGB+3Vy4KXuTMWqpxYLrKfov4nQDsnjpMyR93FehdOedmh8mZr8QJ1IGN/hRJI0Sw== + "@ecl/ec-specs-message@~2.9.0": version "2.9.0" resolved "https://registry.yarnpkg.com/@ecl/ec-specs-message/-/ec-specs-message-2.9.0.tgz#669be82bd928ed15c1d851ebcf3c859ded69a693" From 21f8afd995d2e5423959b864e1956334be1db921 Mon Sep 17 00:00:00 2001 From: serotonine Date: Wed, 4 Sep 2019 10:14:00 +0000 Subject: [PATCH 3/5] feat(menu-legacy): revert package.json port number - TWIG-5 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 80a11f2f8..bdfed6859 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "postinstall": "lerna run postinstall && lerna run prepublish", "pretty-check": "prettier --check \"src/**/*.{md,mdx,html,json,yml,js}\"", "publish": "scripts/publish.sh", - "start:ec": "start-storybook -p 8082 -c ./src/ec/.storybook", + "start:ec": "start-storybook -p 9001 -c ./src/ec/.storybook", "start:eu": "echo \"Nothing to do...\"", "update-version": "lerna version --conventional-commits --no-push --no-git-tag-version", "test": "npm run jest" From f4b10ca74b2d80ad3117af6c07ec9e365910b814 Mon Sep 17 00:00:00 2001 From: serotonine Date: Wed, 4 Sep 2019 15:16:12 +0000 Subject: [PATCH 4/5] feat(menu-legacy): menu-legacy add update doc and put prefix placeholders in html - TWIG-5 --- .../docs/menu-legacy.md | 71 ++++++++++++------- .../menu-legacy.html.twig | 36 +++++----- 2 files changed, 63 insertions(+), 44 deletions(-) diff --git a/src/ec/packages/ec-component-menu-legacy/docs/menu-legacy.md b/src/ec/packages/ec-component-menu-legacy/docs/menu-legacy.md index 9d5e9ec06..9e024c28d 100644 --- a/src/ec/packages/ec-component-menu-legacy/docs/menu-legacy.md +++ b/src/ec/packages/ec-component-menu-legacy/docs/menu-legacy.md @@ -1,46 +1,65 @@ -# ECL Twig - EC Navidation Menu +# ECL Twig - EC Menu Legacy -npm package: `@ecl-twig/ec-component-navigation-menu` +npm package: `@ecl-twig/ec-component-menu-legacy` ```shell -npm install --save @ecl-twig/ec-component-navigation-menu +npm install --save @ecl-twig/ec-component-menu-legacy ``` -## Inpage navigation +## menuLegacy navigation ### Parameters -Parameters: - -- "title" (string) (default: '') -- "links" (associative array) (default: predefined structure): format: - { - href: (string) (default: ''), - label: (string) (default: '') - } +- "label" (string) (default: ''): visible on mobile +- "items" (array) (default: []): [{ + - "label" (string) - label of the link + - "href" (string) - target of the link + - "isCurrent" (boolean) (default: false) - does the menu contains the current page? + - "children" (array) (default: [{}]) + - "title" (string) [optional](default:) + - "items" (array) (default: [{}]) + - "label" (string): label of the link + - "href" (string): target of the link + - "isCurrent" (boolean) (default: false) - "extra_classes" (string) (default: '') - "extra_attributes" (array) (default: []): format: [ - { - "name" (string) (default: ''), - "value" (string) (default: '') - }, - ... - ] + - "name" (string) (default: ''), + - "value" (string) (default: '') ### Example: ```twig -{% include 'path/to/navigation-menu.html.twig' with { - title: 'Inpage navigation', - links: [ +{% include 'path/to/menu-legacy.html.twig' with { + label: "Menu", + items: [ + { + label: "first menu item", + href: "node/101", + isCurrent: false, + children: [ + { + "title": "column 1", + "items": [ + { + label: "sub-menu column 1 link 1", + href: "#", + isCurrent: false + } + ... + ] + } + ... + ], + } + ], + extra_classes: "ecl-menu-legacy", + extra_attributes: [ { - href: '#heading1', - label: 'Heading 1', + name:"data-ecl-menu-legacy-menu", + value:"true" }, ... - ], - ... - ] + ] } %} ``` diff --git a/src/ec/packages/ec-component-menu-legacy/menu-legacy.html.twig b/src/ec/packages/ec-component-menu-legacy/menu-legacy.html.twig index 85675c689..ceae4540d 100644 --- a/src/ec/packages/ec-component-menu-legacy/menu-legacy.html.twig +++ b/src/ec/packages/ec-component-menu-legacy/menu-legacy.html.twig @@ -12,6 +12,7 @@ "items" (array) (default: [{}]): [{ - "label" (string): label of the link - "href" (string): target of the link + - "isCurrent" (boolean): target of the link }] }] }] @@ -63,11 +64,11 @@