From adcbbdbc767326b76657d61aa9d257262b8003a2 Mon Sep 17 00:00:00 2001 From: planctus Date: Thu, 11 Feb 2021 12:03:00 +0200 Subject: [PATCH 1/5] feat(taxonomies): Adding variant for the description list, file and card components - front-2012 --- src/ec/packages/ec-component-card/README.md | 5 + .../__snapshots__/card.test.js.snap | 517 +++++++++--------- src/ec/packages/ec-component-card/adapter.js | 24 +- .../packages/ec-component-card/card.story.js | 52 +- .../packages/ec-component-card/card.test.js | 40 +- .../demo/data--card-taxonomy.js | 93 ++++ .../ec-component-card/demo/data--event.js | 4 - .../demo/data--tile-taxonomy.js | 64 +++ .../ec-component-card/ecl-card.html.twig | 18 +- .../ec-component-description-list/README.md | 4 +- .../description-list.test.js.snap | 96 +++- .../demo/data--taxonomy.js | 53 ++ .../description-list.story.js | 22 +- .../description-list.test.js | 29 +- .../ecl-description-list.html.twig | 19 +- src/ec/packages/ec-component-file/README.md | 11 +- .../__snapshots__/file.test.js.snap | 379 +++++++++++++ src/ec/packages/ec-component-file/adapter.js | 4 + .../demo/data--thumbnail-taxonomy.js | 60 ++ .../ec-component-file/ecl-file.html.twig | 22 +- .../packages/ec-component-file/file.story.js | 9 + .../packages/ec-component-file/file.test.js | 7 + 22 files changed, 1188 insertions(+), 344 deletions(-) create mode 100644 src/ec/packages/ec-component-card/demo/data--card-taxonomy.js delete mode 100644 src/ec/packages/ec-component-card/demo/data--event.js create mode 100644 src/ec/packages/ec-component-card/demo/data--tile-taxonomy.js create mode 100644 src/ec/packages/ec-component-description-list/demo/data--taxonomy.js create mode 100644 src/ec/packages/ec-component-file/demo/data--thumbnail-taxonomy.js diff --git a/src/ec/packages/ec-component-card/README.md b/src/ec/packages/ec-component-card/README.md index bb8599c8a..c770a0ba2 100644 --- a/src/ec/packages/ec-component-card/README.md +++ b/src/ec/packages/ec-component-card/README.md @@ -21,6 +21,11 @@ npm install --save @ecl-twig/ec-component-card - "links" (array) (default: []): List of links (required if Card type is a 'tile'). The format of each element in the array - "label" (string) (default: ''): Label of link - "path" (string) (default: ''): Link url (href attribute) + - "lists" (array) (default: []) Array of objects of type "description list" + - "variant" (optional) (taxonomy or horizontal) + - "items" (array) + - term (string) + - definition (string, array of strings or array of objects) - **"icon_path"** (string) (default: '') Path to icons file - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated) - **"extra_attributes"** (optional) (array) (default: []) Extra attributes diff --git a/src/ec/packages/ec-component-card/__snapshots__/card.test.js.snap b/src/ec/packages/ec-component-card/__snapshots__/card.test.js.snap index 9453162ab..52b6c6dab 100644 --- a/src/ec/packages/ec-component-card/__snapshots__/card.test.js.snap +++ b/src/ec/packages/ec-component-card/__snapshots__/card.test.js.snap @@ -365,6 +365,174 @@ exports[`EC - Card Default renders correctly with extra class names 1`] = ` `; +exports[`EC - Card Default renders correctly with taxonomies 1`] = ` + +
+
+
+
+
+ Transparently designing and evaluating evidence-based EU legislation, backed by citizens views. +
+
+
+
    +
  • + + + 2018/10/22 + +
    • +
  • + + + Luxembourg + +
    • +
+
+
+ EU contribution +
+
+ 1.000.000,00 euro (100% of the overall budget) +
+
+
+
+ Science areas +
+
+ + Energy and transport + + + Standards + +
+
+ Keywords +
+
+ + Electricity + + + Electromobility + + + Energy + + + Energy storage + + + Security + + + Transport + + + Low carbon + +
+
+
+
+ +`; + exports[`EC - Card Default with validation enabled and missing input data returns the right warning message 1`] = `
`; -exports[`EC - Card Events renders correctly 1`] = ` - -
-
-
-
-
- Transparently designing and evaluating evidence-based EU legislation, backed by citizens views. -
-
-
-
    -
  • - - - 2018/10/22 - -
    • -
  • - - - Luxembourg - -
    • -
-
-
- -`; - -exports[`EC - Card Events renders correctly with extra attributes 1`] = ` - -
-
-
-
-
- Transparently designing and evaluating evidence-based EU legislation, backed by citizens views. -
-
-
-
    -
  • - - - 2018/10/22 - -
    • -
  • - - - Luxembourg - -
    • -
-
-
- -`; - -exports[`EC - Card Events renders correctly with extra class names 1`] = ` - -
-
-
-
-
- Transparently designing and evaluating evidence-based EU legislation, backed by citizens views. -
-
-
-
    -
  • - - - 2018/10/22 - -
    • -
  • - - - Luxembourg - -
    • -
-
-
- -`; - exports[`EC - Card Tile renders correctly 1`] = `
`; + +exports[`EC - Card Tile renders correctly with taxonomies 1`] = ` + +
+
+

+

+
+
+
+ EU contribution +
+
+ 1.000.000,00 euro (100% of the overall budget) +
+
+
+
+ Science areas +
+
+ + Energy and transport + + + Standards + +
+
+ Keywords +
+
+ + Electricity + + + Electromobility + + + Energy + + + Energy storage + + + Security + + + Transport + + + Low carbon + +
+
+
+
+ +`; diff --git a/src/ec/packages/ec-component-card/adapter.js b/src/ec/packages/ec-component-card/adapter.js index d4de26b84..174f990ad 100644 --- a/src/ec/packages/ec-component-card/adapter.js +++ b/src/ec/packages/ec-component-card/adapter.js @@ -6,7 +6,14 @@ const adapter = (initialData) => { const adaptedData = JSON.parse(JSON.stringify(initialData)); adaptedData.card = {}; adaptedData.card.description = adaptedData.description; - adaptedData.card.title = adaptedData.title; + if (adaptedData.title) { + adaptedData.card.title = adaptedData.title; + if (adaptedData.title.href) { + adaptedData.card.title.path = adaptedData.card.title.href; + adaptedData.card.title.type = 'standalone'; + } + delete adaptedData.title; + } delete adaptedData.description; if (adaptedData.type) { adaptedData.card.type = adaptedData.type; @@ -25,11 +32,6 @@ const adapter = (initialData) => { }); delete adaptedData.tags; } - if (adaptedData.card.title.href) { - adaptedData.card.title.path = adaptedData.card.title.href; - adaptedData.card.title.type = 'standalone'; - delete adaptedData.card.title.href; - } if (adaptedData.image) { adaptedData.card.image = adaptedData.image; delete adaptedData.image; @@ -52,7 +54,15 @@ const adapter = (initialData) => { ); delete adaptedData.links; } - delete adaptedData.title; + if (adaptedData.list) { + adaptedData.card.lists = []; + adaptedData.card.lists.push(adaptedData.list); + adaptedData.card.lists[0].variant = 'horizontal'; + delete adaptedData.list; + adaptedData.card.lists.push(adaptedData.taxonomy); + adaptedData.card.lists[1].variant = 'taxonomy'; + delete adaptedData.taxonomy; + } return adaptedData; }; diff --git a/src/ec/packages/ec-component-card/card.story.js b/src/ec/packages/ec-component-card/card.story.js index 8f17543b8..27adf4a04 100644 --- a/src/ec/packages/ec-component-card/card.story.js +++ b/src/ec/packages/ec-component-card/card.story.js @@ -17,8 +17,9 @@ import { import defaultSprite from '@ecl/ec-resources-icons/dist/sprites/icons.svg'; import dataCard from './demo/data--card'; -import dataCardEvent from './demo/data--event'; +import dataCardTaxonomy from './demo/data--card-taxonomy'; import dataCardTile from './demo/data--tile'; +import dataCardTileTaxonomy from './demo/data--tile-taxonomy'; import card from './ecl-card.html.twig'; import notes from './README.md'; @@ -29,21 +30,31 @@ generalIcons.forEach((icon) => { }); const prepareCard = (data) => { - data.card.title.label = he.decode( - text('card.title.label', data.card.title.label, tabLabels.required) - ); - - if (data.card.title.type) { - data.card.title.type = text( - 'card.title.type', - data.card.title.type, + if (data.card.title) { + data.card.title.label = he.decode( + text('card.title.label', data.card.title.label, tabLabels.required) + ); + if (data.card.title.type) { + data.card.title.type = text( + 'card.title.type', + data.card.title.type, + tabLabels.optional + ); + } + } + if (data.card.description) { + data.card.description = he.decode( + text('card.description', data.card.description, tabLabels.optional) + ); + } + if (data.card.meta) { + data.card.meta = array( + 'card.meta', + data.card.meta, + '|', tabLabels.optional ); } - data.card.description = he.decode( - text('card.description', data.card.description, tabLabels.optional) - ); - data.card.meta = array('card.meta', data.card.meta, '|', tabLabels.optional); if (data.card.tags) { data.card.tags.forEach((tag, i) => { tag.label = he.decode( @@ -132,12 +143,21 @@ export const Card = () => card(prepareCard(dataCard)); Card.storyName = 'card'; Card.parameters = { notes: { markdown: notes, json: dataCard } }; +export const CardTaxonomy = () => card(prepareCard(dataCardTaxonomy)); + +CardTaxonomy.storyName = 'card (taxonomy)'; +CardTaxonomy.parameters = { + notes: { markdown: notes, json: dataCardTaxonomy }, +}; + export const Tile = () => card(prepareCard(dataCardTile)); Tile.storyName = 'tile'; Tile.parameters = { notes: { markdown: notes, json: dataCardTile } }; -export const Event = () => card(prepareCard(dataCardEvent)); +export const TileTaxonomy = () => card(prepareCard(dataCardTileTaxonomy)); -Event.storyName = 'event'; -Event.parameters = { notes: { markdown: notes, json: dataCardEvent } }; +TileTaxonomy.storyName = 'tile (taxonomy)'; +TileTaxonomy.parameters = { + notes: { markdown: notes, json: dataCardTileTaxonomy }, +}; diff --git a/src/ec/packages/ec-component-card/card.test.js b/src/ec/packages/ec-component-card/card.test.js index 0e4d30981..b61903247 100644 --- a/src/ec/packages/ec-component-card/card.test.js +++ b/src/ec/packages/ec-component-card/card.test.js @@ -1,7 +1,8 @@ import { merge, renderTwigFileAsNode } from '@ecl-twig/test-utils'; import dataCard from './demo/data--card'; -import dataCardEvent from './demo/data--event'; +import dataCardTaxonomy from './demo/data--card-taxonomy'; import dataTile from './demo/data--tile'; +import dataTileTaxonomy from './demo/data--tile-taxonomy'; describe('EC - Card', () => { const template = '@ecl-twig/ec-component-card/ecl-card.html.twig'; @@ -36,6 +37,11 @@ describe('EC - Card', () => { return expect(render(withExtraAttributes)).resolves.toMatchSnapshot(); }); + test('renders correctly with taxonomies', () => { + expect.assertions(1); + return expect(render(dataCardTaxonomy)).resolves.toMatchSnapshot(); + }); + test('with validation enabled and missing input data returns the right warning message', () => { expect.assertions(1); @@ -58,44 +64,18 @@ describe('EC - Card', () => { const withExtraClasses = merge(dataTile, { extra_classes: 'custom-class custom-class--test', }); - return expect(render(withExtraClasses)).resolves.toMatchSnapshot(); }); - test('renders correctly with extra attributes', () => { + test('renders correctly with taxonomies', () => { expect.assertions(1); - - const withExtraAttributes = merge(dataTile, { - extra_attributes: [ - { name: 'data-test', value: 'data-test-value' }, - { name: 'data-test-1', value: 'data-test-value-1' }, - ], - }); - - return expect(render(withExtraAttributes)).resolves.toMatchSnapshot(); - }); - }); - - describe('Events', () => { - test('renders correctly', () => { - expect.assertions(1); - return expect(render(dataCardEvent)).resolves.toMatchSnapshot(); - }); - - test('renders correctly with extra class names', () => { - expect.assertions(1); - - const withExtraClasses = merge(dataCardEvent, { - extra_classes: 'custom-class custom-class--test', - }); - - return expect(render(withExtraClasses)).resolves.toMatchSnapshot(); + return expect(render(dataTileTaxonomy)).resolves.toMatchSnapshot(); }); test('renders correctly with extra attributes', () => { expect.assertions(1); - const withExtraAttributes = merge(dataCardEvent, { + const withExtraAttributes = merge(dataTile, { extra_attributes: [ { name: 'data-test', value: 'data-test-value' }, { name: 'data-test-1', value: 'data-test-value-1' }, diff --git a/src/ec/packages/ec-component-card/demo/data--card-taxonomy.js b/src/ec/packages/ec-component-card/demo/data--card-taxonomy.js new file mode 100644 index 000000000..e25074277 --- /dev/null +++ b/src/ec/packages/ec-component-card/demo/data--card-taxonomy.js @@ -0,0 +1,93 @@ +import adapter from '../adapter'; + +const specCardTaxonomy = { + image: { + alt: 'card image', + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg', + }, + meta: 'Meta1 | Meta2', + title: { + variant: 'standalone', + label: 'Better regulation', + href: '/example', + level: 1, + }, + description: + 'Transparently designing and evaluating evidence-based EU legislation, backed by citizens views.', + infos: [ + { + icon: { + shape: 'general--calendar', + size: 'xs', + }, + label: '2018/10/22', + }, + { + icon: { + shape: 'general--location', + size: 'xs', + }, + label: 'Luxembourg', + }, + ], + list: { + items: [ + { + term: 'EU contribution', + definition: '1.000.000,00 euro (100% of the overall budget)', + }, + ], + }, + taxonomy: { + items: [ + { + term: 'Science areas', + definition: [ + { + label: 'Energy and transport', + variant: 'display', + }, + { + label: 'Standards', + variant: 'display', + }, + ], + }, + { + term: 'Keywords', + definition: [ + { + label: 'Electricity', + variant: 'display', + }, + { + label: 'Electromobility', + variant: 'display', + }, + { + label: 'Energy', + variant: 'display', + }, + { + label: 'Energy storage', + variant: 'display', + }, + { + label: 'Security', + variant: 'display', + }, + { + label: 'Transport', + variant: 'display', + }, + { + label: 'Low carbon', + variant: 'display', + }, + ], + }, + ], + }, +}; + +export default adapter(specCardTaxonomy); diff --git a/src/ec/packages/ec-component-card/demo/data--event.js b/src/ec/packages/ec-component-card/demo/data--event.js deleted file mode 100644 index 56a043cc4..000000000 --- a/src/ec/packages/ec-component-card/demo/data--event.js +++ /dev/null @@ -1,4 +0,0 @@ -import specCardEvent from '@ecl/ec-specs-card/demo/data--card-event'; -import adapter from '../adapter'; - -export default adapter(specCardEvent); diff --git a/src/ec/packages/ec-component-card/demo/data--tile-taxonomy.js b/src/ec/packages/ec-component-card/demo/data--tile-taxonomy.js new file mode 100644 index 000000000..e9617d663 --- /dev/null +++ b/src/ec/packages/ec-component-card/demo/data--tile-taxonomy.js @@ -0,0 +1,64 @@ +import adapter from '../adapter'; + +const specsTileTaxonomy = { + list: { + items: [ + { + term: 'EU contribution', + definition: '1.000.000,00 euro (100% of the overall budget)', + }, + ], + }, + taxonomy: { + items: [ + { + term: 'Science areas', + definition: [ + { + label: 'Energy and transport', + variant: 'display', + }, + { + label: 'Standards', + variant: 'display', + }, + ], + }, + { + term: 'Keywords', + definition: [ + { + label: 'Electricity', + variant: 'display', + }, + { + label: 'Electromobility', + variant: 'display', + }, + { + label: 'Energy', + variant: 'display', + }, + { + label: 'Energy storage', + variant: 'display', + }, + { + label: 'Security', + variant: 'display', + }, + { + label: 'Transport', + variant: 'display', + }, + { + label: 'Low carbon', + variant: 'display', + }, + ], + }, + ], + }, +}; + +export default adapter(specsTileTaxonomy); diff --git a/src/ec/packages/ec-component-card/ecl-card.html.twig b/src/ec/packages/ec-component-card/ecl-card.html.twig index 513495d00..0d1405568 100644 --- a/src/ec/packages/ec-component-card/ecl-card.html.twig +++ b/src/ec/packages/ec-component-card/ecl-card.html.twig @@ -23,7 +23,18 @@ path: (string) (default: ''): Link url (href attribute) }, ... - ] + ], + lists [], (array) (default: []) Array of objects of type "description list". Format: [ + { + - "variant" (optional) (taxonomy or horizontal) + - "items" (array) [ + { + - term (string) + - definition (string, array of strings or array of objects) + } + ], + }, + ], }, - "icon_path" (string) (default: '') Path to the icons file - "extra_classes" (string) (default: '') @@ -169,6 +180,11 @@ {% endfor %} {% endif %} + {% if _card.lists is defined and _card.lists is not empty and _card.lists is iterable %} + {% for _list in _card.lists %} + {% include '@ecl-twig/ec-component-description-list/ecl-description-list.html.twig' with _list|merge({ extra_classes: 'ecl-card__list'}) only %} + {% endfor %} + {% endif %}
diff --git a/src/ec/packages/ec-component-description-list/README.md b/src/ec/packages/ec-component-description-list/README.md index 435d6c1c5..b75c647f1 100644 --- a/src/ec/packages/ec-component-description-list/README.md +++ b/src/ec/packages/ec-component-description-list/README.md @@ -10,8 +10,8 @@ npm install --save @ecl-twig/ec-component-description-list - **"items"** (array) (default: []) - "term" (string or array of string) - - "definition" (string or array of string) -- **"variant"** (optional) (string) (default: '') Modifier of the component + - "definition" (string or array of string or array of objects of type "tag") +- **"variant"** (optional) (string) (default: '') Modifier of the component (horizontal, vertical, taxonomy) - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated) - **"extra_attributes"** (optional) (array) (default: []) Extra attributes - "name" (string) Attribute name, eg. 'data-test' diff --git a/src/ec/packages/ec-component-description-list/__snapshots__/description-list.test.js.snap b/src/ec/packages/ec-component-description-list/__snapshots__/description-list.test.js.snap index 7c3c37e09..4780ff89c 100644 --- a/src/ec/packages/ec-component-description-list/__snapshots__/description-list.test.js.snap +++ b/src/ec/packages/ec-component-description-list/__snapshots__/description-list.test.js.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`EC - Description list Default renders correctly 1`] = ` +exports[`EC - Description list Horizontal renders correctly 1`] = `
European Union
+
+ An association of European nations formed in 1993 for the purpose of achieving political and economic integration. +
- EU + Citizen
- An association of European nations formed in 1993 for the purpose of achieving political and economic integration. + A native or naturalized member of a state or nation who owes allegiance to its government and is entitled to its protection
+
+ +`; + +exports[`EC - Description list Taxonomy renders correctly 1`] = ` + +
- Citizen + Science areas
- A native or naturalized member of a state or nation who owes allegiance to its government and is entitled to its protection + + Energy and transport + + + Standards +
+
+ Keywords +
- An inhabitant of a city or town, especially one entitled to its privileges or franchises. + + Electricity + + + Electromobility + + + Energy + + + Energy storage + + + Security + + + Transport + + + Low carbon +
`; -exports[`EC - Description list Default renders correctly in the horizontal variant 1`] = ` +exports[`EC - Description list Vertical renders correctly 1`] = `
European Union
+
+ EU +
@@ -84,11 +151,16 @@ exports[`EC - Description list Default renders correctly in the horizontal varia > A native or naturalized member of a state or nation who owes allegiance to its government and is entitled to its protection
+
+ An inhabitant of a city or town, especially one entitled to its privileges or franchises. +
`; -exports[`EC - Description list Default renders correctly with extra attributes 1`] = ` +exports[`EC - Description list Vertical renders correctly with extra attributes 1`] = `
`; -exports[`EC - Description list Default renders correctly with extra class names 1`] = ` +exports[`EC - Description list Vertical renders correctly with extra class names 1`] = `
`; -exports[`EC - Description list Default with missing input data and debug enabled shows the right warning message 1`] = ` +exports[`EC - Description list Vertical with missing input data and debug enabled shows the right warning message 1`] = `
{ item.term = text(`items[${i}].term`, item.term, tabLabels.required); } if (Array.isArray(item.definition)) { - item.definition.forEach((definitionItem, k) => { - data.items[i].definition[k] = text( - `items[${i}].definition[${k}]`, - definitionItem, - tabLabels.required - ); - }); + if (item.definition !== 'object') { + item.definition.forEach((definitionItem, k) => { + data.items[i].definition[k] = text( + `items[${i}].definition[${k}]`, + definitionItem, + tabLabels.required + ); + }); + } } else { item.definition = text( `items[${i}].definition`, @@ -70,3 +73,8 @@ export const Horizontal = () => descriptionList(prepareList(specsHorizontal)); Horizontal.storyName = 'horizontal'; Horizontal.parameters = { notes: { markdown: notes, json: specsHorizontal } }; + +export const Taxonomy = () => descriptionList(prepareList(specsTaxonomy)); + +Taxonomy.storyName = 'horizontal (taxononmy)'; +Taxonomy.parameters = { notes: { markdown: notes, json: specsTaxonomy } }; diff --git a/src/ec/packages/ec-component-description-list/description-list.test.js b/src/ec/packages/ec-component-description-list/description-list.test.js index 3879c17e0..444385b0d 100644 --- a/src/ec/packages/ec-component-description-list/description-list.test.js +++ b/src/ec/packages/ec-component-description-list/description-list.test.js @@ -1,29 +1,20 @@ import { merge, renderTwigFileAsNode } from '@ecl-twig/test-utils'; import data from './demo/data'; import dataHorizontal from './demo/data--horizontal'; +import dataTaxonomy from './demo/data--taxonomy'; describe('EC - Description list', () => { const template = '@ecl-twig/ec-component-description-list/ecl-description-list.html.twig'; const render = (params) => renderTwigFileAsNode(template, params); - describe('Default', () => { + describe('Vertical', () => { test('renders correctly', () => { expect.assertions(1); return expect(render(data)).resolves.toMatchSnapshot(); }); - test('renders correctly in the horizontal variant', () => { - expect.assertions(1); - - const horizontal = merge(dataHorizontal, { - variant: 'horizontal', - }); - - return expect(render(horizontal)).resolves.toMatchSnapshot(); - }); - test('renders correctly with extra class names', () => { expect.assertions(1); @@ -59,4 +50,20 @@ describe('EC - Description list', () => { return expect(render(dataCompliance)).resolves.toMatchSnapshot(); }); }); + + describe('Horizontal', () => { + test('renders correctly', () => { + expect.assertions(1); + + return expect(render(dataHorizontal)).resolves.toMatchSnapshot(); + }); + }); + + describe('Taxonomy', () => { + test('renders correctly', () => { + expect.assertions(1); + + return expect(render(dataTaxonomy)).resolves.toMatchSnapshot(); + }); + }); }); diff --git a/src/ec/packages/ec-component-description-list/ecl-description-list.html.twig b/src/ec/packages/ec-component-description-list/ecl-description-list.html.twig index a58577fde..17f624809 100644 --- a/src/ec/packages/ec-component-description-list/ecl-description-list.html.twig +++ b/src/ec/packages/ec-component-description-list/ecl-description-list.html.twig @@ -5,11 +5,11 @@ - "items" (array) (default: []): format: [ { "term" (string or array of string) - "definition" (string or array of string) + "definition" (string or array of string or array of objects of type tag) }, ... ] - - "variant" (string) (default: '') + - "variant" (string) (default: '') (horizontal, vertical, taxonomy) - "extra_classes" (string) (default: '') - "extra_attributes" (array) (default: []): format: [ { @@ -64,9 +64,22 @@ {% endif %} {% if _item.definition is not empty %} {% if _item.definition is iterable %} + {% if _item.definition[0].label is defined %} +
+ {% endif %} {% for _definition in _item.definition %} -
{{ _definition }}
+ {% if _definition.label is not defined %} +
{{ _definition }}
+ {% else %} + {% include '@ecl-twig/ec-component-tag/ecl-tag.html.twig' with { + tag: _definition|merge({ type: 'display' }), + extra_classes: 'ecl-description-list__tag' + } only %} + {% endif %} {% endfor %} + {% if _item.definition[0].label is defined %} + + {% endif %} {% else %}
{{ _item.definition }}
{% endif %} diff --git a/src/ec/packages/ec-component-file/README.md b/src/ec/packages/ec-component-file/README.md index 80200839b..a58d430a3 100644 --- a/src/ec/packages/ec-component-file/README.md +++ b/src/ec/packages/ec-component-file/README.md @@ -9,13 +9,15 @@ npm install --save @ecl-twig/ec-component-file ### Parameters - **"icon"** (object) (default: {}): object of type Icon; file type -- **"variant"** (string) (default: '') Thumbnail +- **"variant"** (string) (default: '') (thumbnail) - **"title"** (string) (default: '') - **"description"** (string) (default: '') - **"language"** (string) (default: '') - **"meta"** (string) (default: '') - **"detail_meta"** (array) (default: []) Meta element for the thumbnail variant - **"download"** (object) (default: {}): object of type Link +- **"image"** (object) (default: {}): image for the thumbnail variant +- **"label"** (object) (default: {}) label for the thumbnail variant - **"translation"** (array) (default: []): - "toggle" (object) (default: {}): object of type Button - "items" (array) (default: []): @@ -23,7 +25,12 @@ npm install --save @ecl-twig/ec-component-file - "meta" (string) (default: '') - "lang" (string) (default: '') - "download" (object) (default to the parent download property) object of type Link - - "description (string) (default:'') +- **"description"** (string) (default:'') +- **"lists"** (array) (default: []) Array of objects of type "description list" + - "variant" (optional) (taxonomy or horizontal) + - "items" (array) + - term (string) + - definition (string, array of strings or array of objects) - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated) - **"extra_attributes"** (optional) (array) (default: []) Extra attributes - "name" (string) Attribute name, eg. 'data-test' diff --git a/src/ec/packages/ec-component-file/__snapshots__/file.test.js.snap b/src/ec/packages/ec-component-file/__snapshots__/file.test.js.snap index 8749ec5e1..71c63ec08 100644 --- a/src/ec/packages/ec-component-file/__snapshots__/file.test.js.snap +++ b/src/ec/packages/ec-component-file/__snapshots__/file.test.js.snap @@ -299,6 +299,385 @@ exports[`EC - File Thumbnail renders correctly 1`] = ` `; +exports[`EC - File Thumbnail renders correctly with taxonomies 1`] = ` + +
+
+
+ + highlighted + +
+
+
+
+ + Resource type + + + Publication date + +
+
+ State of the Union 2018 brochure +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur. Duis vitae pulvinar turpis. Donec maximus pharetra ex a ultricies. +
+
+ thumbnail alt +
+
+
+
+ Science areas +
+
+ + Energy and transport + + + Standards + +
+
+ Keywords +
+
+ + Electricity + + + Electromobility + + + Energy + + + Energy storage + + + Security + + + Transport + + + Low carbon + +
+
+
+
+
+ English +
+
+ (16.2 MB - PDF) +
+
+ + + Download + +   + + +
+
+ +
    +
  • +
    +
    + Title bg +
    +
    + Morbi fringilla turpis augue, et interdum ipsum egestas sed. Proin tristique, ante id aliquet malesuada, lorem dolor vulputate magna, a commodo purus ante nec massa. +
    +
    +
    +
    + български +
    +
    + (15.7 MB - PDF) +
    +
    + + + Download + +   + + +
    • +
  • +
    +
    + Title es +
    +
    + Proin sagittis nisi hendrerit purus porta. +
    +
    +
    +
    + español +
    +
    + (15.8 MB - PDF) +
    +
    + + + Download + +   + + +
    • +
  • +
    +
    + Title fr +
    +
    + Duis eget lacinia arcu. Nullam mattis ornare nibh. Proin tristique, ante id aliquet malesuada. Pellentesque porttitor commodo libero sed fringilla. Curabitur varius sodales elit, id tincidunt erat. Aenean tincidunt luctus molestie. +
    +
    +
    +
    + français +
    +
    + (15.4 MB - PDF) +
    +
    + + + Download + +   + + +
    • +
  • + Looking for another language which is not on the list? Find out why. +
    • +
+
+
+ +`; + exports[`EC - File Thumbnail renders correctly without an image 1`] = `
{ }); } delete adaptedData.ariaLabel; + if (adaptedData.taxonomy) { + adaptedData.lists = [adaptedData.taxonomy]; + delete adaptedData.taxonomy; + } return adaptedData; }; diff --git a/src/ec/packages/ec-component-file/demo/data--thumbnail-taxonomy.js b/src/ec/packages/ec-component-file/demo/data--thumbnail-taxonomy.js new file mode 100644 index 000000000..742f965f4 --- /dev/null +++ b/src/ec/packages/ec-component-file/demo/data--thumbnail-taxonomy.js @@ -0,0 +1,60 @@ +import specs from '@ecl/ec-specs-file/demo/data--thumbnail'; +import adapter from '../adapter'; + +specs.label = { + variant: 'highlight', + label: 'highlighted', +}; +specs.taxonomy = { + variant: 'taxonomy', + items: [ + { + term: 'Science areas', + definition: [ + { + label: 'Energy and transport', + variant: 'display', + }, + { + label: 'Standards', + variant: 'display', + }, + ], + }, + { + term: 'Keywords', + definition: [ + { + label: 'Electricity', + variant: 'display', + }, + { + label: 'Electromobility', + variant: 'display', + }, + { + label: 'Energy', + variant: 'display', + }, + { + label: 'Energy storage', + variant: 'display', + }, + { + label: 'Security', + variant: 'display', + }, + { + label: 'Transport', + variant: 'display', + }, + { + label: 'Low carbon', + variant: 'display', + }, + ], + }, + ], +}; + +export default adapter(specs); diff --git a/src/ec/packages/ec-component-file/ecl-file.html.twig b/src/ec/packages/ec-component-file/ecl-file.html.twig index e77318c19..18c6beed0 100644 --- a/src/ec/packages/ec-component-file/ecl-file.html.twig +++ b/src/ec/packages/ec-component-file/ecl-file.html.twig @@ -11,6 +11,7 @@ - "detail_meta" (array) (default: []) Meta element(s) for the thumbnail variant - "download" (object) (default: {}): object of type Link - "image" (object) (default: {}): image for the thumbnail variant + - "label" (object) (default: {}) Object of type label - "translation" (array) (default: []): - "toggle" (object) (default: {}): object of type Button - "items" (array) (default: []): @@ -18,7 +19,12 @@ - "meta" (string) (default: '') - "lang" (string) (default: '') - "download" (object) (default to the parent download property) object of type Link - - "description (string) (default:'') + - "description" (string) (default:'') + - "lists" (array) (default: []) Array of objects of type "description list". + - "variant" (optional) (taxonomy or horizontal) + - "items" (array) + - "term" (string) + - "definition" (string, array of strings or array of objects) - "extra_classes" (optional) (string) (default: '') - "extra_attributes" (optional) (array) (default: []) [{ - "name" (string) Attribute name, eg. 'data-test' @@ -38,8 +44,10 @@ {% set _download = download|default({}) %} {% set _detail_meta = detail_meta|default([]) %} {% set _translation = translation|default([]) %} +{% set _lists = lists|default([]) %} {% set _css_class = 'ecl-file' %} {% set _image = image|default({}) %} +{% set _label = label|default({}) %} {% set _meta_detail_string = '' %} {% set _variant = variant|default('') %} {% set _description = description|default('') %} @@ -83,6 +91,11 @@
{% if _variant == 'thumbnail' %} + {% if _label is not empty %} +
+ {% include '@ecl-twig/ec-component-label/ecl-label.html.twig' with _label only %} +
+ {% endif %}
{% if _meta_detail_string is not empty %} @@ -103,6 +116,13 @@ /> {% endif %}
+ {% if _lists is not empty and _lists is iterable %} +
+ {% for _list in _lists %} + {% include '@ecl-twig/ec-component-description-list/ecl-description-list.html.twig' with _list only %} + {% endfor %} +
+ {% endif %} {% else %} {% include '@ecl-twig/ec-component-icon/ecl-icon.html.twig' with { icon: _icon, diff --git a/src/ec/packages/ec-component-file/file.story.js b/src/ec/packages/ec-component-file/file.story.js index 050761337..81a2635f7 100644 --- a/src/ec/packages/ec-component-file/file.story.js +++ b/src/ec/packages/ec-component-file/file.story.js @@ -12,6 +12,7 @@ import defaultSprite from '@ecl/ec-resources-icons/dist/sprites/icons.svg'; import dataWithTranslation from './demo/data--with-translation'; import dataWithoutTranslation from './demo/data--without-translation'; import dataThumbnail from './demo/data--thumbnail'; +import dataThumbnailTaxonomy from './demo/data--thumbnail-taxonomy'; import file from './ecl-file.html.twig'; import notes from './README.md'; @@ -152,3 +153,11 @@ export const Thumbnail = () => file(prepareFile(dataThumbnail, 'thumbnail')); Thumbnail.storyName = 'thumbnail'; Thumbnail.parameters = { notes: { markdown: notes, json: dataThumbnail } }; + +export const ThumbnailTaxonomy = () => + file(prepareFile(dataThumbnailTaxonomy, 'thumbnail')); + +ThumbnailTaxonomy.storyName = 'thumbnail (taxonomy)'; +ThumbnailTaxonomy.parameters = { + notes: { markdown: notes, json: dataThumbnailTaxonomy }, +}; diff --git a/src/ec/packages/ec-component-file/file.test.js b/src/ec/packages/ec-component-file/file.test.js index c1802b269..47fe51593 100644 --- a/src/ec/packages/ec-component-file/file.test.js +++ b/src/ec/packages/ec-component-file/file.test.js @@ -4,6 +4,7 @@ import { merge, renderTwigFileAsNode } from '@ecl-twig/test-utils'; import dataWithTranslation from './demo/data--with-translation'; import dataWithoutTranslation from './demo/data--without-translation'; import dataThumbnail from './demo/data--thumbnail'; +import dataThumbnailTaxonomy from './demo/data--thumbnail-taxonomy'; describe('EC - File', () => { const template = '@ecl-twig/ec-component-file/ecl-file.html.twig'; @@ -105,5 +106,11 @@ describe('EC - File', () => { return expect(render(dataThumbnail)).resolves.toMatchSnapshot(); }); + + test('renders correctly with taxonomies', () => { + expect.assertions(1); + + return expect(render(dataThumbnailTaxonomy)).resolves.toMatchSnapshot(); + }); }); }); From c96c850d68791dc6b271724ea02420ceef552b18 Mon Sep 17 00:00:00 2001 From: planctus Date: Thu, 11 Feb 2021 12:32:19 +0200 Subject: [PATCH 2/5] feat(taxonomies): Using ECL 2.36.0 - front-2012 --- .../demo/data--card-taxonomy.js | 91 +------------ .../packages/ec-component-card/package.json | 6 +- .../demo/data--taxonomy.js | 54 +------- .../package.json | 4 +- src/ec/packages/ec-component-file/adapter.js | 1 + .../demo/data--thumbnail-taxonomy.js | 58 +------- .../packages/ec-component-file/package.json | 10 +- src/ec/storybook/.storybook/preview-head.html | 24 ++-- src/eu/storybook/.storybook/preview-head.html | 24 ++-- yarn.lock | 125 ++++++++++++------ 10 files changed, 122 insertions(+), 275 deletions(-) diff --git a/src/ec/packages/ec-component-card/demo/data--card-taxonomy.js b/src/ec/packages/ec-component-card/demo/data--card-taxonomy.js index e25074277..05fa88241 100644 --- a/src/ec/packages/ec-component-card/demo/data--card-taxonomy.js +++ b/src/ec/packages/ec-component-card/demo/data--card-taxonomy.js @@ -1,93 +1,4 @@ +import specCardTaxonomy from '@ecl/ec-specs-card/demo/data--card-taxonomy'; import adapter from '../adapter'; -const specCardTaxonomy = { - image: { - alt: 'card image', - src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg', - }, - meta: 'Meta1 | Meta2', - title: { - variant: 'standalone', - label: 'Better regulation', - href: '/example', - level: 1, - }, - description: - 'Transparently designing and evaluating evidence-based EU legislation, backed by citizens views.', - infos: [ - { - icon: { - shape: 'general--calendar', - size: 'xs', - }, - label: '2018/10/22', - }, - { - icon: { - shape: 'general--location', - size: 'xs', - }, - label: 'Luxembourg', - }, - ], - list: { - items: [ - { - term: 'EU contribution', - definition: '1.000.000,00 euro (100% of the overall budget)', - }, - ], - }, - taxonomy: { - items: [ - { - term: 'Science areas', - definition: [ - { - label: 'Energy and transport', - variant: 'display', - }, - { - label: 'Standards', - variant: 'display', - }, - ], - }, - { - term: 'Keywords', - definition: [ - { - label: 'Electricity', - variant: 'display', - }, - { - label: 'Electromobility', - variant: 'display', - }, - { - label: 'Energy', - variant: 'display', - }, - { - label: 'Energy storage', - variant: 'display', - }, - { - label: 'Security', - variant: 'display', - }, - { - label: 'Transport', - variant: 'display', - }, - { - label: 'Low carbon', - variant: 'display', - }, - ], - }, - ], - }, -}; - export default adapter(specCardTaxonomy); diff --git a/src/ec/packages/ec-component-card/package.json b/src/ec/packages/ec-component-card/package.json index b8aa3dbbb..94f1c7e95 100644 --- a/src/ec/packages/ec-component-card/package.json +++ b/src/ec/packages/ec-component-card/package.json @@ -13,9 +13,9 @@ "@ecl-twig/ec-component-tag": "2.35.2" }, "devDependencies": { - "@ecl/ec-component-card": "2.35.0", - "@ecl/ec-resources-icons": "2.35.0", - "@ecl/ec-specs-card": "2.35.0" + "@ecl/ec-component-card": "2.36.0", + "@ecl/ec-resources-icons": "2.36.0", + "@ecl/ec-specs-card": "2.36.0" }, "repository": { "type": "git", diff --git a/src/ec/packages/ec-component-description-list/demo/data--taxonomy.js b/src/ec/packages/ec-component-description-list/demo/data--taxonomy.js index 2f71dba20..6545dab05 100644 --- a/src/ec/packages/ec-component-description-list/demo/data--taxonomy.js +++ b/src/ec/packages/ec-component-description-list/demo/data--taxonomy.js @@ -1,53 +1,5 @@ -const specsTaxonomy = { - variant: 'taxonomy', - items: [ - { - term: 'Science areas', - definition: [ - { - label: 'Energy and transport', - variant: 'display', - }, - { - label: 'Standards', - variant: 'display', - }, - ], - }, - { - term: 'Keywords', - definition: [ - { - label: 'Electricity', - variant: 'display', - }, - { - label: 'Electromobility', - variant: 'display', - }, - { - label: 'Energy', - variant: 'display', - }, - { - label: 'Energy storage', - variant: 'display', - }, - { - label: 'Security', - variant: 'display', - }, - { - label: 'Transport', - variant: 'display', - }, - { - label: 'Low carbon', - variant: 'display', - }, - ], - }, - ], -}; +import specsTaxonomy from '@ecl/ec-specs-description-list/demo/data--taxonomy'; + +specsTaxonomy.variant = 'thumbnail'; export default specsTaxonomy; diff --git a/src/ec/packages/ec-component-description-list/package.json b/src/ec/packages/ec-component-description-list/package.json index c88dd87ea..3fc4a8e13 100644 --- a/src/ec/packages/ec-component-description-list/package.json +++ b/src/ec/packages/ec-component-description-list/package.json @@ -8,8 +8,8 @@ "access": "public" }, "devDependencies": { - "@ecl/ec-component-description-list": "2.35.0", - "@ecl/ec-specs-description-list": "2.35.0" + "@ecl/ec-component-description-list": "2.36.0", + "@ecl/ec-specs-description-list": "2.36.0" }, "repository": { "type": "git", diff --git a/src/ec/packages/ec-component-file/adapter.js b/src/ec/packages/ec-component-file/adapter.js index 0d081c720..9b6aa1837 100644 --- a/src/ec/packages/ec-component-file/adapter.js +++ b/src/ec/packages/ec-component-file/adapter.js @@ -40,6 +40,7 @@ const adapter = (initialData) => { delete adaptedData.ariaLabel; if (adaptedData.taxonomy) { adaptedData.lists = [adaptedData.taxonomy]; + adaptedData.lists[0].variant = 'taxonomy'; delete adaptedData.taxonomy; } diff --git a/src/ec/packages/ec-component-file/demo/data--thumbnail-taxonomy.js b/src/ec/packages/ec-component-file/demo/data--thumbnail-taxonomy.js index 742f965f4..7286f9bd0 100644 --- a/src/ec/packages/ec-component-file/demo/data--thumbnail-taxonomy.js +++ b/src/ec/packages/ec-component-file/demo/data--thumbnail-taxonomy.js @@ -1,60 +1,4 @@ -import specs from '@ecl/ec-specs-file/demo/data--thumbnail'; +import specs from '@ecl/ec-specs-file/demo/data--taxonomy'; import adapter from '../adapter'; -specs.label = { - variant: 'highlight', - label: 'highlighted', -}; -specs.taxonomy = { - variant: 'taxonomy', - items: [ - { - term: 'Science areas', - definition: [ - { - label: 'Energy and transport', - variant: 'display', - }, - { - label: 'Standards', - variant: 'display', - }, - ], - }, - { - term: 'Keywords', - definition: [ - { - label: 'Electricity', - variant: 'display', - }, - { - label: 'Electromobility', - variant: 'display', - }, - { - label: 'Energy', - variant: 'display', - }, - { - label: 'Energy storage', - variant: 'display', - }, - { - label: 'Security', - variant: 'display', - }, - { - label: 'Transport', - variant: 'display', - }, - { - label: 'Low carbon', - variant: 'display', - }, - ], - }, - ], -}; - export default adapter(specs); diff --git a/src/ec/packages/ec-component-file/package.json b/src/ec/packages/ec-component-file/package.json index 9f600a870..f290d937e 100644 --- a/src/ec/packages/ec-component-file/package.json +++ b/src/ec/packages/ec-component-file/package.json @@ -10,11 +10,11 @@ "@ecl-twig/ec-component-link": "2.35.2" }, "devDependencies": { - "@ecl/ec-component-file": "2.35.0", - "@ecl/ec-resources-icons": "2.35.0", - "@ecl/ec-specs-file": "2.35.0", - "@ecl/eu-resources-icons": "2.35.0", - "@ecl/eu-specs-file": "2.35.0" + "@ecl/ec-component-file": "2.36.0", + "@ecl/ec-resources-icons": "2.36.0", + "@ecl/ec-specs-file": "2.36.0", + "@ecl/eu-resources-icons": "2.36.0", + "@ecl/eu-specs-file": "2.36.0" }, "publishConfig": { "access": "public" diff --git a/src/ec/storybook/.storybook/preview-head.html b/src/ec/storybook/.storybook/preview-head.html index 5c8bf875a..c50d270e9 100644 --- a/src/ec/storybook/.storybook/preview-head.html +++ b/src/ec/storybook/.storybook/preview-head.html @@ -1,18 +1,18 @@ @@ -22,10 +22,10 @@ /> diff --git a/src/eu/storybook/.storybook/preview-head.html b/src/eu/storybook/.storybook/preview-head.html index de65ca2fb..f6ddab426 100644 --- a/src/eu/storybook/.storybook/preview-head.html +++ b/src/eu/storybook/.storybook/preview-head.html @@ -1,18 +1,18 @@ @@ -22,10 +22,10 @@ /> diff --git a/yarn.lock b/yarn.lock index f3654c3d2..645b3f825 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1826,6 +1826,11 @@ resolved "https://registry.yarnpkg.com/@ecl/ec-base/-/ec-base-2.35.0.tgz#5d92af3bb822a56bb089a5950bfa656a7b9ad09a" integrity sha512-mI0+P9FO4tkkVGpi4g3cYIqvobOMwTeun/eA0Aoo76W67yvo6+3MHOqf88r0V+oAD0SAI13tAaA3sMhbNaLVpg== +"@ecl/ec-base@^2.36.0": + version "2.36.0" + resolved "https://registry.yarnpkg.com/@ecl/ec-base/-/ec-base-2.36.0.tgz#f4021741cd43e2efd4fb0ddefb095b35031d895b" + integrity sha512-ln0L8d+g9j2giwuxhQbtQYFpSKKFUbtj/GBlAg0L9N7rA4gCEbCe+IjGjQaCVq0T9ksiBpWiIn6rsxal4U3wyw== + "@ecl/ec-component-accordion@2.35.0": version "2.35.0" resolved "https://registry.yarnpkg.com/@ecl/ec-component-accordion/-/ec-component-accordion-2.35.0.tgz#b65374afe9e1449508a181790954a5c7ba0ddc14" @@ -1878,15 +1883,24 @@ "@ecl/ec-base" "^2.35.0" "@ecl/ec-component-icon" "^2.35.0" -"@ecl/ec-component-card@2.35.0": - version "2.35.0" - resolved "https://registry.yarnpkg.com/@ecl/ec-component-card/-/ec-component-card-2.35.0.tgz#54e989738bdf4cb2801d59f3267e9b587cfaffd8" - integrity sha512-BVAg5BqqpC1R4cf4ledhyVXrNekPtrn/xNdLEWqGSkovY4BfP6+wfVC5Wqf71igf/qooGxn6ApSjVhvUVOOgGg== +"@ecl/ec-component-button@^2.36.0": + version "2.36.0" + resolved "https://registry.yarnpkg.com/@ecl/ec-component-button/-/ec-component-button-2.36.0.tgz#3313159deed95b3206e3f9b1a0463dc8daa4d9a1" + integrity sha512-lDhozRpP8Kw5NBYvLNeEaPSuPf6Fpk9qRNCI3h5SvSvYImGNJxk9p03PsBRR9Z+julQSCx9e/n91M/tTshNvig== dependencies: - "@ecl/ec-base" "^2.35.0" - "@ecl/ec-component-icon" "^2.35.0" - "@ecl/ec-component-link" "^2.35.0" - "@ecl/ec-component-tag" "^2.35.0" + "@ecl/ec-base" "^2.36.0" + "@ecl/ec-component-icon" "^2.36.0" + +"@ecl/ec-component-card@2.36.0": + version "2.36.0" + resolved "https://registry.yarnpkg.com/@ecl/ec-component-card/-/ec-component-card-2.36.0.tgz#886e40ab1486008c358e5365d7753f43397a2146" + integrity sha512-bjaIPtJyluVhtTr8+bk7j4/R+ioZCeI0ZGVje/TEF4zDMWWxlaFcx/2r/dPBsGQmbPh/wN5QFu4W9FjMdRAcKw== + dependencies: + "@ecl/ec-base" "^2.36.0" + "@ecl/ec-component-description-list" "^2.36.0" + "@ecl/ec-component-icon" "^2.36.0" + "@ecl/ec-component-link" "^2.36.0" + "@ecl/ec-component-tag" "^2.36.0" "@ecl/ec-component-contextual-navigation@2.35.0": version "2.35.0" @@ -1902,12 +1916,12 @@ dependencies: "@ecl/ec-base" "^2.35.0" -"@ecl/ec-component-description-list@2.35.0": - version "2.35.0" - resolved "https://registry.yarnpkg.com/@ecl/ec-component-description-list/-/ec-component-description-list-2.35.0.tgz#f6363c42fc667a66ea00455eff2af8f7d72e0e46" - integrity sha512-ZgBjxrkEiW+ImUUzplcXM1XkLE+rLMmdjYYvU2ikr6JLNVJrPhD4cQ1rqQlXygwnLo9C+3lGqy4bckqO2iGBzw== +"@ecl/ec-component-description-list@2.36.0", "@ecl/ec-component-description-list@^2.36.0": + version "2.36.0" + resolved "https://registry.yarnpkg.com/@ecl/ec-component-description-list/-/ec-component-description-list-2.36.0.tgz#fa2619f04808544b7558efdfa7277f789813fbce" + integrity sha512-1Ybz4j++uKxOn8U4nuRSr56LmkxnaJqT3n8RfT4A16ooovcSz3Yl87h6IgZaIO2jHoHPRPPlrfxwLSUQYMIbgA== dependencies: - "@ecl/ec-base" "^2.35.0" + "@ecl/ec-base" "^2.36.0" "@ecl/ec-component-dropdown-legacy@2.35.0": version "2.35.0" @@ -1930,15 +1944,15 @@ dependencies: "@ecl/ec-base" "^2.35.0" -"@ecl/ec-component-file@2.35.0": - version "2.35.0" - resolved "https://registry.yarnpkg.com/@ecl/ec-component-file/-/ec-component-file-2.35.0.tgz#0205310c2a720fb92a6ca282a2a22d405a9b35a9" - integrity sha512-4NjLOeCk4Duv8K/zhx+YJ4qClcqjbdO9yY0oK0X9MiSFg1/0ituk94RGIZo9YSLKHgVzcoHm2AyNAFMH9C1d9w== +"@ecl/ec-component-file@2.36.0": + version "2.36.0" + resolved "https://registry.yarnpkg.com/@ecl/ec-component-file/-/ec-component-file-2.36.0.tgz#ef18724d732e1f53c07654094da946d5b6fe9ac2" + integrity sha512-viNscSZmP8gD2/SyCfY+5gAZXTg71voOwwbdxNq2Uj17yjZVdaSVcKHK0wULzgdX5Fed9kOsTw9rRbOu1hIyLg== dependencies: - "@ecl/ec-base" "^2.35.0" - "@ecl/ec-component-button" "^2.35.0" - "@ecl/ec-component-icon" "^2.35.0" - "@ecl/ec-component-link" "^2.35.0" + "@ecl/ec-base" "^2.36.0" + "@ecl/ec-component-button" "^2.36.0" + "@ecl/ec-component-icon" "^2.36.0" + "@ecl/ec-component-link" "^2.36.0" "@ecl/ec-component-footer-core@2.35.0": version "2.35.0" @@ -2081,6 +2095,13 @@ dependencies: "@ecl/ec-base" "^2.35.0" +"@ecl/ec-component-icon@^2.36.0": + version "2.36.0" + resolved "https://registry.yarnpkg.com/@ecl/ec-component-icon/-/ec-component-icon-2.36.0.tgz#8f3ef5231b08f6c482a86221b2ae0d1662af30e8" + integrity sha512-rDeqhJxGWHD6ARfvL3GPl3rgWbba+06WHuSEJSj5iGNfESeiqfnUPnGnNV6tn8K7RN5bBVvMJ6n6UnugWkaLRw== + dependencies: + "@ecl/ec-base" "^2.36.0" + "@ecl/ec-component-inpage-navigation@2.35.0": version "2.35.0" resolved "https://registry.yarnpkg.com/@ecl/ec-component-inpage-navigation/-/ec-component-inpage-navigation-2.35.0.tgz#c45888d085068d064f13254c050f025c2d9e04f6" @@ -2117,6 +2138,14 @@ "@ecl/ec-base" "^2.35.0" "@ecl/ec-component-icon" "^2.35.0" +"@ecl/ec-component-link@^2.36.0": + version "2.36.0" + resolved "https://registry.yarnpkg.com/@ecl/ec-component-link/-/ec-component-link-2.36.0.tgz#4861d855cce4c9e050ecd804d8f3d3e248ec0a3e" + integrity sha512-lG7oVHUuxjwsK39LjV35/0SdWbNx2z47blf5EglJm+Qa0+Zkyy3Tf5yaHtePzsY5fm6A93K37y/1n1rENiBzOg== + dependencies: + "@ecl/ec-base" "^2.36.0" + "@ecl/ec-component-icon" "^2.36.0" + "@ecl/ec-component-list@2.35.0": version "2.35.0" resolved "https://registry.yarnpkg.com/@ecl/ec-component-list/-/ec-component-list-2.35.0.tgz#62cf5b6bac865f2f49da2420a71520bebb3f2085" @@ -2294,13 +2323,13 @@ dependencies: "@ecl/ec-base" "^2.35.0" -"@ecl/ec-component-tag@^2.35.0": - version "2.35.0" - resolved "https://registry.yarnpkg.com/@ecl/ec-component-tag/-/ec-component-tag-2.35.0.tgz#5f2cf3e752bbfd60a08a035c6482c59104367227" - integrity sha512-uzhxZu7bXuNLvg99wGNT8yRojNb+AhFcE3Q43hY6OiJULNIO0Om3BBYZKydu6XZddOlbNfAvNY4H9XcFkfTIZA== +"@ecl/ec-component-tag@^2.36.0": + version "2.36.0" + resolved "https://registry.yarnpkg.com/@ecl/ec-component-tag/-/ec-component-tag-2.36.0.tgz#0004443f243a8b335665b8816831a05fda162250" + integrity sha512-ksd2b10BLWSTIszosF/8mBCuZWLavN7J/jWPJrxtoJAMoq+0FjIw/iqib0wr/iJNr5wFTPpxUR6r+YztmxNBug== dependencies: - "@ecl/ec-base" "^2.35.0" - "@ecl/ec-component-icon" "^2.35.0" + "@ecl/ec-base" "^2.36.0" + "@ecl/ec-component-icon" "^2.36.0" "@ecl/ec-component-timeline@2.35.0": version "2.35.0" @@ -2321,6 +2350,11 @@ resolved "https://registry.yarnpkg.com/@ecl/ec-resources-icons/-/ec-resources-icons-2.35.0.tgz#c8f40052ff2ffa702ea44fe5316b78fec4f5cd66" integrity sha512-CqaQrw2EbSVzEm7Lop6vI1/hrSf9UEzdW5gFbUt3apYo4eB1MwvgNcGNNh7AmCE8cJlTy2oVz/L3WyimIDTfTQ== +"@ecl/ec-resources-icons@2.36.0": + version "2.36.0" + resolved "https://registry.yarnpkg.com/@ecl/ec-resources-icons/-/ec-resources-icons-2.36.0.tgz#1f6582a54368bf7ba0e2e16d286251039a4cf517" + integrity sha512-rETR2BkiYgV3E0zaFA/w1QF2qQosTwzNdKFP/Drqc2iRKofQOZuceVs99/cmDSQRZJ+IgcykhxMm2PBmn+rmgQ== + "@ecl/ec-resources-logo@2.35.0": version "2.35.0" resolved "https://registry.yarnpkg.com/@ecl/ec-resources-logo/-/ec-resources-logo-2.35.0.tgz#a817d5c6390eb47d542e8c5c91b1ea38ba4d5bb3" @@ -2366,10 +2400,10 @@ resolved "https://registry.yarnpkg.com/@ecl/ec-specs-button/-/ec-specs-button-2.35.0.tgz#eedadbd0ea123ff4e1fdf7af9d35969b036b3996" integrity sha512-wCfoFVLiCvSRS5NZz7pslyKJRgyKnr6BgnfxrYilQWgE3mjFXogMTA0CAxrSJS/9NiAvnRGZ6C74scrlvgL4rA== -"@ecl/ec-specs-card@2.35.0": - version "2.35.0" - resolved "https://registry.yarnpkg.com/@ecl/ec-specs-card/-/ec-specs-card-2.35.0.tgz#1e7168a16ce6217fad088f75161f87c6fc52f0a5" - integrity sha512-NkYmL8HS1vEBj4c+5+xyYsVktErAqQvWjRU6dMJ29eh6hsA6ybieBrk6Noo17HngqVg2S3ksKVVRA5ppGyjLig== +"@ecl/ec-specs-card@2.36.0": + version "2.36.0" + resolved "https://registry.yarnpkg.com/@ecl/ec-specs-card/-/ec-specs-card-2.36.0.tgz#5fa1f60c0fa80e76c2c2d0b0765964bf654b0f65" + integrity sha512-n9W5XdCksRDDcjtGwhA7iR8cYc0VOCzLeTYxHQ39QsgnAZqJ4iGeF1F4dx+qd/C1oIZNA+72xDZij0DiCg6a7Q== "@ecl/ec-specs-checkbox@2.35.0": version "2.35.0" @@ -2391,10 +2425,10 @@ resolved "https://registry.yarnpkg.com/@ecl/ec-specs-datepicker/-/ec-specs-datepicker-2.35.0.tgz#297e1e9d152c07a17b17b73aae4c5cf95a13e2fb" integrity sha512-qJBkyuUG5MuYbUWAd7TH3p92AtZN5si5KY/fk5VOHzWZeZdzxAhLA6WDdF4iqJhOPHAflwjAigmahE8X2lO0Xg== -"@ecl/ec-specs-description-list@2.35.0": - version "2.35.0" - resolved "https://registry.yarnpkg.com/@ecl/ec-specs-description-list/-/ec-specs-description-list-2.35.0.tgz#e8c78556dca1eb41c1138547b27ca8b8971d2dc9" - integrity sha512-8G0qC608CrJM7xLIjJqPkA0P1yoJhN8AKHxbaGNn3mCwneLRxVmJyIXWMX+JvA7htgrz1aJvLU1JZFt6HgBIMg== +"@ecl/ec-specs-description-list@2.36.0": + version "2.36.0" + resolved "https://registry.yarnpkg.com/@ecl/ec-specs-description-list/-/ec-specs-description-list-2.36.0.tgz#b85e73aec080642f675d860b77743c4a86518995" + integrity sha512-8lmKht+91Ht3aQbQmU9ZCt/tjLkEOZhbtkEwo1+e9k0lm2LFa6WaVuSfI2Fm8QwqN73/c36ywYLvAQwmbdSpvA== "@ecl/ec-specs-dropdown-legacy@2.35.0": version "2.35.0" @@ -2416,10 +2450,10 @@ resolved "https://registry.yarnpkg.com/@ecl/ec-specs-file-upload/-/ec-specs-file-upload-2.35.0.tgz#0b986c451d733953c1a64be669b56719918f5e13" integrity sha512-PRI7iWgt3sNqAG/Cn8IaAzQXkhXXsj0t8fx2Wk7JSxnSUXME2paHLYFI7/aJb+wDVco2pQ/GFN9dHgiwK8mIig== -"@ecl/ec-specs-file@2.35.0": - version "2.35.0" - resolved "https://registry.yarnpkg.com/@ecl/ec-specs-file/-/ec-specs-file-2.35.0.tgz#4d4d7af5de70b6d4b7700d38b95c6a2d19b534b9" - integrity sha512-BHYepNzXtUfAfZLYKwEEKJY218NRc0luIkgDmvSzmYPL2Asz17fdxqwv7cfDuqG8TByXdO7w0/+8H4pTASrzjA== +"@ecl/ec-specs-file@2.36.0": + version "2.36.0" + resolved "https://registry.yarnpkg.com/@ecl/ec-specs-file/-/ec-specs-file-2.36.0.tgz#cd1e5ce03dbde63627f92742a963e7d55393712e" + integrity sha512-uRJZysRY4LZCH0jEvrOlcXnCQrRpNtRip3IuQ5K4uO7Ut+bsReCRyTKsJcfO4UZ9P+xsMoVtTKRp9D1out91qQ== "@ecl/ec-specs-footer-core@2.35.0": version "2.35.0" @@ -2654,6 +2688,11 @@ resolved "https://registry.yarnpkg.com/@ecl/eu-resources-icons/-/eu-resources-icons-2.35.0.tgz#571d9f9911432a6df63bfdf94d24b78f421447ad" integrity sha512-AVI2JPNp6VseSpkY4KN8PwcNSjAzr1o28BCwSnS+roj6iFQ0LdFPYTh6cfNx3OyGzC+7DrFwxH3M5VjRewApoQ== +"@ecl/eu-resources-icons@2.36.0": + version "2.36.0" + resolved "https://registry.yarnpkg.com/@ecl/eu-resources-icons/-/eu-resources-icons-2.36.0.tgz#21940804a88913429864eed212c941676a4ee98d" + integrity sha512-bEon3dXA87mbU+ySzx8Mqw8a2GVGJcKeXvrFCX7H9D3ow4PV+0D7u6arW9Y3cnT1lvQnG2C/ptvh3xtH+XLg8A== + "@ecl/eu-resources-logo@2.35.0": version "2.35.0" resolved "https://registry.yarnpkg.com/@ecl/eu-resources-logo/-/eu-resources-logo-2.35.0.tgz#3ba80c1bb928ce7db593c5d454a067033a16f189" @@ -2679,10 +2718,10 @@ resolved "https://registry.yarnpkg.com/@ecl/eu-specs-breadcrumb/-/eu-specs-breadcrumb-2.35.0.tgz#f45d1c27e4bda24c419c0235c54d78b1e092ed76" integrity sha512-zR3J+SiAVFAOlAtxh9lIN5ibwwKe34ZrmWctM+j40GJSUJoCe2v3LeNrN5xRQl0o+d2UWh7HotxJBlTEFPkYLw== -"@ecl/eu-specs-file@2.35.0": - version "2.35.0" - resolved "https://registry.yarnpkg.com/@ecl/eu-specs-file/-/eu-specs-file-2.35.0.tgz#7c678dce38d02020c1a867d86a68c9ca15d7dae5" - integrity sha512-+Hgb54q7O78CdgmmLpthjFG1yybZKjOZ/O6DPhnsfmltqs4A7Hs1yZ13rM/BfR+wqhx1kdosEW06dGIS1VDkyA== +"@ecl/eu-specs-file@2.36.0": + version "2.36.0" + resolved "https://registry.yarnpkg.com/@ecl/eu-specs-file/-/eu-specs-file-2.36.0.tgz#926249f053f0cbe78d30ea8f645cce9d0429f444" + integrity sha512-7+WpKyXOM/D0ezH4L8AfnBK8qIC+l1uLrw1b2vPSzIFfr8j69UMHo0Xntr+zJpmjmD0CXIf4Uut9kAwB/VfNfQ== "@ecl/eu-specs-footer-core@2.35.0": version "2.35.0" From 0231475ca9207c6f0020f29d0a9fff41e6e34ea2 Mon Sep 17 00:00:00 2001 From: planctus Date: Thu, 11 Feb 2021 12:39:23 +0200 Subject: [PATCH 3/5] feat(taxonomies): fiing mistyped variant name - front-2012 --- .../ec-component-description-list/demo/data--taxonomy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ec/packages/ec-component-description-list/demo/data--taxonomy.js b/src/ec/packages/ec-component-description-list/demo/data--taxonomy.js index 6545dab05..686b0968f 100644 --- a/src/ec/packages/ec-component-description-list/demo/data--taxonomy.js +++ b/src/ec/packages/ec-component-description-list/demo/data--taxonomy.js @@ -1,5 +1,5 @@ import specsTaxonomy from '@ecl/ec-specs-description-list/demo/data--taxonomy'; -specsTaxonomy.variant = 'thumbnail'; +specsTaxonomy.variant = 'taxonomy'; export default specsTaxonomy; From 8d99fa8c8ee280135b33c60b19c11a20d70fb1bd Mon Sep 17 00:00:00 2001 From: planctus Date: Thu, 11 Feb 2021 16:04:07 +0200 Subject: [PATCH 4/5] feat(taxonomy): adding knobs, fixing complaince for always complaint component - front-2012 --- .../__snapshots__/card.test.js.snap | 2 +- .../packages/ec-component-card/card.story.js | 38 ++++++++++++++ .../packages/ec-component-card/card.test.js | 2 + .../description-list.story.js | 23 ++++++--- .../components/ecl-compliance-card.html.twig | 5 +- .../packages/ec-component-file/file.story.js | 50 ++++++++++++++++++- 6 files changed, 107 insertions(+), 13 deletions(-) diff --git a/src/ec/packages/ec-component-card/__snapshots__/card.test.js.snap b/src/ec/packages/ec-component-card/__snapshots__/card.test.js.snap index 52b6c6dab..d64ea46ab 100644 --- a/src/ec/packages/ec-component-card/__snapshots__/card.test.js.snap +++ b/src/ec/packages/ec-component-card/__snapshots__/card.test.js.snap @@ -939,7 +939,7 @@ exports[`EC - Card Tile renders correctly with extra class names 1`] = ` exports[`EC - Card Tile renders correctly with taxonomies 1`] = `
{ iconsList.push(icon); @@ -126,6 +128,42 @@ const prepareCard = (data) => { tabLabels.optional ); } + if (data.card.lists) { + data.card.lists.forEach((list, j) => { + list.variant = text( + `card.lists[${j}].variant`, + list.variant, + tabLabels.optional + ); + list.items.forEach((item, k) => { + item.term = text( + `card.lists[${j}].items[${k}].term`, + item.term, + tabLabels.optional + ); + if (!Array.isArray(item.definition)) { + item.defitiion = text( + `card.lists[${j}].items[${k}].definition`, + item.definition, + tabLabels.optional + ); + } else { + item.definition.forEach((def, l) => { + def.label = text( + `card.lists[${j}].items[${k}].definition[${l}].label`, + def.label, + tabLabels.optional + ); + def.variant = text( + `card.lists[${j}].items[${k}].definition[${l}].variant`, + def.variant, + tabLabels.optional + ); + }); + } + }); + }); + } getExtraKnobs(data); getComplianceKnob(data); diff --git a/src/ec/packages/ec-component-card/card.test.js b/src/ec/packages/ec-component-card/card.test.js index b61903247..717d2ce09 100644 --- a/src/ec/packages/ec-component-card/card.test.js +++ b/src/ec/packages/ec-component-card/card.test.js @@ -4,6 +4,8 @@ import dataCardTaxonomy from './demo/data--card-taxonomy'; import dataTile from './demo/data--tile'; import dataTileTaxonomy from './demo/data--tile-taxonomy'; +dataTileTaxonomy.card.type = 'tile'; + describe('EC - Card', () => { const template = '@ecl-twig/ec-component-card/ecl-card.html.twig'; const render = (params) => renderTwigFileAsNode(template, params); diff --git a/src/ec/packages/ec-component-description-list/description-list.story.js b/src/ec/packages/ec-component-description-list/description-list.story.js index ca400b6a7..572e06deb 100644 --- a/src/ec/packages/ec-component-description-list/description-list.story.js +++ b/src/ec/packages/ec-component-description-list/description-list.story.js @@ -35,15 +35,22 @@ const prepareList = (data) => { item.term = text(`items[${i}].term`, item.term, tabLabels.required); } if (Array.isArray(item.definition)) { - if (item.definition !== 'object') { - item.definition.forEach((definitionItem, k) => { - data.items[i].definition[k] = text( - `items[${i}].definition[${k}]`, - definitionItem, + item.definition.forEach((def, k) => { + if (!def.label) { + def = text(`items[${i}].definition[${k}]`, def, tabLabels.required); + } else { + def.label = text( + `items[${i}].definition[${k}].label`, + def.label, tabLabels.required ); - }); - } + def.variant = text( + `items[${i}].definition[${k}].variant`, + def.variant, + tabLabels.required + ); + } + }); } else { item.definition = text( `items[${i}].definition`, @@ -76,5 +83,5 @@ Horizontal.parameters = { notes: { markdown: notes, json: specsHorizontal } }; export const Taxonomy = () => descriptionList(prepareList(specsTaxonomy)); -Taxonomy.storyName = 'horizontal (taxononmy)'; +Taxonomy.storyName = 'horizontal (taxonomy)'; Taxonomy.parameters = { notes: { markdown: notes, json: specsTaxonomy } }; diff --git a/src/ec/packages/ec-component-ecl-compliance/components/ecl-compliance-card.html.twig b/src/ec/packages/ec-component-ecl-compliance/components/ecl-compliance-card.html.twig index 2c35f0956..ed051b613 100644 --- a/src/ec/packages/ec-component-ecl-compliance/components/ecl-compliance-card.html.twig +++ b/src/ec/packages/ec-component-ecl-compliance/components/ecl-compliance-card.html.twig @@ -8,8 +8,9 @@ {% set message = '' %} {% set component = 'card' %} {% set no_title_case = - card.title is not defined or card.title is empty or - card.title.label is not defined or card.title.label is empty + ((card.title is not defined or card.title is empty) or + (card.title.label is not defined or card.title.label is empty)) and + card.type != 'tile' %} {% set not_compliant = no_title_case %} {% set message = message ~ ' {{ card.title.label }} property needs to set and filled in.' %} diff --git a/src/ec/packages/ec-component-file/file.story.js b/src/ec/packages/ec-component-file/file.story.js index 81a2635f7..d924ffca7 100644 --- a/src/ec/packages/ec-component-file/file.story.js +++ b/src/ec/packages/ec-component-file/file.story.js @@ -21,6 +21,18 @@ const prepareFile = (data, variant) => { data.title = he.decode(text('title', data.title, tabLabels.required)); data.language = text('language', data.language, tabLabels.required); data.meta = text('meta', data.meta, tabLabels.required); + if (data.label) { + data.label.label = text( + 'data.label.label', + data.label.label, + tabLabels.optional + ); + data.label.variant = text( + 'data.label.variant', + data.label.variant, + tabLabels.optional + ); + } if (variant) { data.description = he.decode( text('description', data.description, tabLabels.optional) @@ -58,7 +70,6 @@ const prepareFile = (data, variant) => { { display: 'inline-radio' }, tabLabels.required ); - if (data.translation) { data.translation.description = he.decode( text( @@ -79,7 +90,42 @@ const prepareFile = (data, variant) => { { display: 'inline-radio' }, tabLabels.required ); - + if (data.lists) { + data.lists.forEach((list, j) => { + list.variant = text( + `lists[${j}].variant`, + list.variant, + tabLabels.optional + ); + list.items.forEach((item, k) => { + item.term = text( + `lists[${j}].items[${k}].term`, + item.term, + tabLabels.optional + ); + if (!Array.isArray(item.definition)) { + item.defitiion = text( + `lists[${j}].items[${k}].definition`, + item.definition, + tabLabels.optional + ); + } else { + item.definition.forEach((def, l) => { + def.label = text( + `lists[${j}].items[${k}].definition[${l}].label`, + def.label, + tabLabels.optional + ); + def.variant = text( + `lists[${j}].items[${k}].definition[${l}].variant`, + def.variant, + tabLabels.optional + ); + }); + } + }); + }); + } data.translation.items.forEach((item, i) => { data.translation.items[i].title = text( `data.translation.items[${i}].title`, From 1a93715563f015d12ccb7045ffb0fd15b419699f Mon Sep 17 00:00:00 2001 From: planctus Date: Thu, 11 Feb 2021 16:49:47 +0200 Subject: [PATCH 5/5] feat(taxonomy): Using spec in data-card--tile - front-2012 --- .../demo/data--tile-taxonomy.js | 62 +------------------ 1 file changed, 1 insertion(+), 61 deletions(-) diff --git a/src/ec/packages/ec-component-card/demo/data--tile-taxonomy.js b/src/ec/packages/ec-component-card/demo/data--tile-taxonomy.js index e9617d663..9b63caa83 100644 --- a/src/ec/packages/ec-component-card/demo/data--tile-taxonomy.js +++ b/src/ec/packages/ec-component-card/demo/data--tile-taxonomy.js @@ -1,64 +1,4 @@ +import specsTileTaxonomy from '@ecl/ec-specs-card/demo/data--tile-taxonomy'; import adapter from '../adapter'; -const specsTileTaxonomy = { - list: { - items: [ - { - term: 'EU contribution', - definition: '1.000.000,00 euro (100% of the overall budget)', - }, - ], - }, - taxonomy: { - items: [ - { - term: 'Science areas', - definition: [ - { - label: 'Energy and transport', - variant: 'display', - }, - { - label: 'Standards', - variant: 'display', - }, - ], - }, - { - term: 'Keywords', - definition: [ - { - label: 'Electricity', - variant: 'display', - }, - { - label: 'Electromobility', - variant: 'display', - }, - { - label: 'Energy', - variant: 'display', - }, - { - label: 'Energy storage', - variant: 'display', - }, - { - label: 'Security', - variant: 'display', - }, - { - label: 'Transport', - variant: 'display', - }, - { - label: 'Low carbon', - variant: 'display', - }, - ], - }, - ], - }, -}; - export default adapter(specsTileTaxonomy);