From 9449791c2d4065b5ea0bc102861a3fef5178bf49 Mon Sep 17 00:00:00 2001 From: planctus Date: Tue, 28 Jan 2020 15:13:13 +0100 Subject: [PATCH] feat(table): Extra attributes and extra classes for the table rows - TWIG-203 (#305) --- src/ec/packages/ec-component-table/README.md | 6 + .../__snapshots__/table.test.js.snap | 448 ++++++++++++++++++ .../ec-component-table/ecl-table.html.twig | 15 +- .../ec-component-table/table.story.js | 14 + .../packages/ec-component-table/table.test.js | 35 +- 5 files changed, 510 insertions(+), 8 deletions(-) diff --git a/src/ec/packages/ec-component-table/README.md b/src/ec/packages/ec-component-table/README.md index 3a6e4c499..b4ee7547a 100644 --- a/src/ec/packages/ec-component-table/README.md +++ b/src/ec/packages/ec-component-table/README.md @@ -13,6 +13,8 @@ npm install --save @ecl-twig/ec-component-table - "label" (string or array of string) - "colspan" (string) (default: ''), - **"rows"** (array) (default: []) + - "extra_attributes": (string) (default: '') Extra attributes for the row (space separated) + - "extra_classes": (string) (default: '') Extra classes for the table row (space separated) - "label" (string or array of string) - "data-ecl-table-header" (string) (default: ''), - "data-ecl-table-header-group" (string) (default: '') @@ -44,6 +46,8 @@ npm install --save @ecl-twig/ec-component-table ], rows: [ [ + extra_classes: 'an-extra-class', + extra_attributes: 'an-extra-attribute="with_a_value", another-attribute', { label: 'John', 'data-ecl-table-header': 'Name' }, { label: 'September 14, 2013', @@ -67,6 +71,8 @@ npm install --save @ecl-twig/ec-component-table }, ], [ + extra_classes: 'an-extra-class', + extra_attributes: 'an-extra-attribute', { label: 'Ron', 'data-ecl-table-header': 'Name' }, { label: 'October 23, 2014', diff --git a/src/ec/packages/ec-component-table/__snapshots__/table.test.js.snap b/src/ec/packages/ec-component-table/__snapshots__/table.test.js.snap index 6ebfd9b38..6183448ad 100644 --- a/src/ec/packages/ec-component-table/__snapshots__/table.test.js.snap +++ b/src/ec/packages/ec-component-table/__snapshots__/table.test.js.snap @@ -644,6 +644,454 @@ exports[`EC - Table Default renders correctly with extra class names 1`] = ` `; +exports[`EC - Table Default renders correctly with row extra attributes 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Job title + + EFSI finance approved by EIB + + Location + + Organization + + Type of contract +
+ Administators in Competition Law + + AD7 + + Brussels (Belgium), Luxembourg (Luxembourg), Strasbourg (France) + + European Commission + + Permanent official +
+ Administators in Economic and Monetary Union Law + + AD7 + + Brussels (Belgium), Luxembourg (Luxembourg), Strasbourg (France) + + European Commission + + Permanent official +
+ Administators in Financial rules appliable to the EU budget + + AD7 + + Brussels (Belgium), Luxembourg (Luxembourg), Strasbourg (France) + + European Commission + + Permanent official +
+ Corporate Support Officer + + FG IV + + Prague (Czech Republic) + + European Commission + + Permanent official +
+ Policy Officer - Clean Energy For All Europeans + + FG II, FG III, FG IV + + Vigo (Spain) + + EU-LISA + + Seconded National Expert (SNE) +
+`; + +exports[`EC - Table Default renders correctly with row extra classes 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Job title + + EFSI finance approved by EIB + + Location + + Organization + + Type of contract +
+ Administators in Competition Law + + AD7 + + Brussels (Belgium), Luxembourg (Luxembourg), Strasbourg (France) + + European Commission + + Permanent official +
+ Administators in Economic and Monetary Union Law + + AD7 + + Brussels (Belgium), Luxembourg (Luxembourg), Strasbourg (France) + + European Commission + + Permanent official +
+ Administators in Financial rules appliable to the EU budget + + AD7 + + Brussels (Belgium), Luxembourg (Luxembourg), Strasbourg (France) + + European Commission + + Permanent official +
+ Corporate Support Officer + + FG IV + + Prague (Czech Republic) + + European Commission + + Permanent official +
+ Policy Officer - Clean Energy For All Europeans + + FG II, FG III, FG IV + + Vigo (Spain) + + EU-LISA + + Seconded National Expert (SNE) +
+`; + exports[`EC - Table Multi renders correctly 1`] = ` +
{% for header in _headers %} @@ -78,7 +81,13 @@ {% for row in _rows %} - + {% if row.extra_classes is defined and row.extra_classes is not empty %} + {% set _row_css_class = _row_css_class ~ ' ' ~ row.extra_classes %} + {% endif %} + {% if row.extra_attributes is defined and row.extra_attributes is not empty %} + {% set _row_extra_attributes = row.extra_attributes %} + {% endif %} + {% for cell in row %} {% set _cell_attribute = cell['data-ecl-table-header'] is not empty ? 'data-ecl-table-header="' ~ cell['data-ecl-table-header'] ~ '"' : '' %} {% if cell.group %} diff --git a/src/ec/packages/ec-component-table/table.story.js b/src/ec/packages/ec-component-table/table.story.js index d3010bd09..351e82dcb 100644 --- a/src/ec/packages/ec-component-table/table.story.js +++ b/src/ec/packages/ec-component-table/table.story.js @@ -7,6 +7,11 @@ import dataMulti from '@ecl/ec-specs-table/demo/data--multi'; import table from './ecl-table.html.twig'; import notes from './README.md'; +const dataWithRowExtraAttributes = dataDefault; +dataWithRowExtraAttributes.rows.forEach(row => { + row.extra_attributes = 'data-test data-test-another'; // eslint-disable-line no-param-reassign +}); + storiesOf('Components/Table', module) .addDecorator(withNotes) .addDecorator(withCode) @@ -20,6 +25,15 @@ storiesOf('Components/Table', module) notes: { markdown: notes, json: dataDefault }, } ) + .add( + 'default with row extra attributes', + () => { + return table(dataWithRowExtraAttributes); + }, + { + notes: { markdown: notes, json: dataWithRowExtraAttributes }, + } + ) .add( 'Zebra', () => { diff --git a/src/ec/packages/ec-component-table/table.test.js b/src/ec/packages/ec-component-table/table.test.js index f4b0ab69d..4b515884c 100644 --- a/src/ec/packages/ec-component-table/table.test.js +++ b/src/ec/packages/ec-component-table/table.test.js @@ -8,6 +8,17 @@ describe('EC - Table', () => { const template = '@ecl-twig/ec-component-table/ecl-table.html.twig'; const render = params => renderTwigFileAsNode(template, params); + describe('Zebra', () => { + test('renders correctly', () => { + expect.assertions(1); + const data = merge(dataDefault, { + zebra: true, + }); + + return expect(render(data)).resolves.toMatchSnapshot(); + }); + }); + describe('Default', () => { test('renders correctly', () => { expect.assertions(1); @@ -37,13 +48,27 @@ describe('EC - Table', () => { return expect(render(withExtraAttributes)).resolves.toMatchSnapshot(); }); - }); - describe('Zebra', () => { - test('renders correctly', () => { + test('renders correctly with row extra attributes', () => { expect.assertions(1); - dataDefault.zebra = true; - return expect(render(dataDefault)).resolves.toMatchSnapshot(); + + const withRowExtraAttributes = dataDefault; + withRowExtraAttributes.rows.forEach(row => { + row.extra_attributes = 'data-test data-test-another'; // eslint-disable-line no-param-reassign + }); + + return expect(render(withRowExtraAttributes)).resolves.toMatchSnapshot(); + }); + + test('renders correctly with row extra classes', () => { + expect.assertions(1); + + const withRowExtraClasses = dataDefault; + withRowExtraClasses.rows.forEach(row => { + row.extra_classes = 'row-extra-class'; // eslint-disable-line no-param-reassign + }); + + return expect(render(withRowExtraClasses)).resolves.toMatchSnapshot(); }); });