From 49045a24959a121210c5fb4b31dec5f61692390f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Mon, 11 Dec 2017 21:28:04 -0300 Subject: [PATCH 01/29] Create ClayTable --- packages/clay-table/LICENSE.md | 29 ++ packages/clay-table/README.md | 26 ++ packages/clay-table/demos/index.html | 353 ++++++++++++++++ packages/clay-table/package.json | 59 +++ packages/clay-table/src/ClayTable.js | 76 ++++ packages/clay-table/src/ClayTable.soy | 89 ++++ packages/clay-table/src/ClayTableItem.js | 115 ++++++ packages/clay-table/src/ClayTableItem.soy | 243 +++++++++++ .../clay-table/src/__tests__/ClayTable.js | 133 ++++++ .../clay-table/src/__tests__/ClayTableItem.js | 384 ++++++++++++++++++ .../__tests__/__snapshots__/ClayTable.js.snap | 65 +++ .../__snapshots__/ClayTableItem.js.snap | 252 ++++++++++++ packages/clay-table/src/items_validator.js | 59 +++ packages/clay-table/webpack.config.js | 31 ++ 14 files changed, 1914 insertions(+) create mode 100644 packages/clay-table/LICENSE.md create mode 100644 packages/clay-table/README.md create mode 100644 packages/clay-table/demos/index.html create mode 100644 packages/clay-table/package.json create mode 100644 packages/clay-table/src/ClayTable.js create mode 100644 packages/clay-table/src/ClayTable.soy create mode 100644 packages/clay-table/src/ClayTableItem.js create mode 100644 packages/clay-table/src/ClayTableItem.soy create mode 100644 packages/clay-table/src/__tests__/ClayTable.js create mode 100644 packages/clay-table/src/__tests__/ClayTableItem.js create mode 100644 packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap create mode 100644 packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap create mode 100644 packages/clay-table/src/items_validator.js create mode 100644 packages/clay-table/webpack.config.js diff --git a/packages/clay-table/LICENSE.md b/packages/clay-table/LICENSE.md new file mode 100644 index 000000000..70f93e946 --- /dev/null +++ b/packages/clay-table/LICENSE.md @@ -0,0 +1,29 @@ +# Software License Agreement (BSD License) + +Copyright (c) 2014, Liferay Inc. +All rights reserved. + +Redistribution and use of this software in source and binary forms, with or without modification, are +permitted provided that the following conditions are met: + +* Redistributions of source code must retain the above + copyright notice, this list of conditions and the + following disclaimer. + +* Redistributions in binary form must reproduce the above + copyright notice, this list of conditions and the + following disclaimer in the documentation and/or other + materials provided with the distribution. + +* The name of Liferay Inc. may not be used to endorse or promote products + derived from this software without specific prior + written permission of Liferay Inc. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED +WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A +PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR +ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS +INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR +TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF +ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. diff --git a/packages/clay-table/README.md b/packages/clay-table/README.md new file mode 100644 index 000000000..5138b1083 --- /dev/null +++ b/packages/clay-table/README.md @@ -0,0 +1,26 @@ +# clay-table + +Metal Clay Table component + +## Setup + +1. Install NodeJS >= v0.12.0 and NPM >= v3.0.0, if you don't have it yet. You +can find it [here](https://nodejs.org). + +2. Install local dependencies: + + ``` + npm install + ``` + +3. Build the code: + + ``` + npm run build + ``` + +4. Open the demo at demos/index.html on your browser. + +## Contribute + +We'd love to get contributions from you! Please, check our [Contributing Guidelines](CONTRIBUTING.md) to see how you can help us improve. diff --git a/packages/clay-table/demos/index.html b/packages/clay-table/demos/index.html new file mode 100644 index 000000000..3b9daf091 --- /dev/null +++ b/packages/clay-table/demos/index.html @@ -0,0 +1,353 @@ + + + + + + Demo: ClayTable + + + + + + + + +

+ ClayTable +

+ +
+
+ + + + diff --git a/packages/clay-table/package.json b/packages/clay-table/package.json new file mode 100644 index 000000000..c48389d2f --- /dev/null +++ b/packages/clay-table/package.json @@ -0,0 +1,59 @@ +{ + "name": "clay-table", + "version": "1.0.0-alpha.5", + "description": "Metal ClayTable component", + "license": "BSD", + "repository": "https://github.com/metal/metal-clay-components/tree/master/packages/clay-table", + "engines": { + "node": ">=0.12.0", + "npm": ">=3.0.0" + }, + "main": "lib/ClayTable.js", + "esnext:main": "src/ClayTable.js", + "jsnext:main": "src/ClayTable.js", + "files": [ + "lib", + "src", + "test" + ], + "scripts": { + "build": "npm run soy && webpack", + "compile": "babel -d lib/ src/ -s --ignore src/__tests__", + "prepublish": "npm run soy && npm run compile", + "soy": "metalsoy --soyDeps '../../node_modules/clay-+(dropdown|label|sticker|progress-bar|button|checkbox|icon|link|radio)/src/**/*.soy'" + }, + "keywords": [ + "clay", + "metal" + ], + "dependencies": { + "clay-checkbox": "^1.0.0-alpha.5", + "clay-dropdown": "^1.0.0-alpha.5", + "clay-icon": "^1.0.0-alpha.5", + "clay-label": "^1.0.0-alpha.5", + "clay-link": "^1.0.0-alpha.5", + "clay-progress-bar": "^1.0.0-alpha.5", + "clay-radio": "^1.0.0-alpha.5", + "clay-sticker": "^1.0.0-alpha.5", + "metal": "^2.14.0", + "metal-component": "^2.14.0", + "metal-soy": "^2.14.0", + "metal-state": "^2.14.0", + "metal-web-component": "^2.14.0" + }, + "devDependencies": { + "babel-cli": "^6.24.1", + "babel-core": "^6.25.0", + "babel-loader": "^7.0.0", + "babel-plugin-transform-node-env-inline": "^0.1.1", + "babel-preset-env": "^1.6.0", + "browserslist-config-clay-components": "^1.0.0-alpha.2", + "clay": "^2.0.0-beta.4", + "metal-dom": "^2.13.2", + "metal-tools-soy": "^4.2.1", + "webpack": "^3.0.0" + }, + "browserslist": [ + "extends browserslist-config-clay-components" + ] +} diff --git a/packages/clay-table/src/ClayTable.js b/packages/clay-table/src/ClayTable.js new file mode 100644 index 000000000..9b150c121 --- /dev/null +++ b/packages/clay-table/src/ClayTable.js @@ -0,0 +1,76 @@ +import './ClayTableItem'; +import {Config} from 'metal-state'; +import Component from 'metal-component'; +import defineWebComponent from 'metal-web-component'; +import itemsValidator from './items_validator'; +import Soy from 'metal-soy'; + +import templates from './ClayTable.soy.js'; + +/** + * Metal ClayTable component. + */ +class ClayTable extends Component {} + +/** + * State definition. + * @static + * @type {!Object} + */ +ClayTable.STATE = { + /** + * CSS classes to be applied to the element. + * @instance + * @memberof ClayTable + * @type {?string|undefined} + * @default undefined + */ + elementClasses: Config.string(), + + /** + * Used to render the header of a column. + * @instance + * @memberof ClayTable + * @type {?array|undefined} + * @default undefined + */ + header: Config.arrayOf( + Config.shapeOf({ + label: Config.string(), + }) + ), + + /** + * Id to be applied to the element. + * @instance + * @memberof ClayTable + * @type {?string|undefined} + * @default undefined + */ + id: Config.string(), + + /** + * List the items of the table. + * @instance + * @memberof ClayTable + * @type {?array|undefined} + * @default undefined + */ + items: itemsValidator, + + /** + * The path to the SVG spritemap file containing the icons. + * @instance + * @memberof ClayTable + * @type {!string} + * @default undefined + */ + spritemap: Config.string().required(), +}; + +defineWebComponent('clay-table', ClayTable); + +Soy.register(ClayTable, templates); + +export {ClayTable}; +export default ClayTable; diff --git a/packages/clay-table/src/ClayTable.soy b/packages/clay-table/src/ClayTable.soy new file mode 100644 index 000000000..6629118cd --- /dev/null +++ b/packages/clay-table/src/ClayTable.soy @@ -0,0 +1,89 @@ +{namespace ClayTable} + +/** + * This renders the component's whole content. + */ +{template .render} + {@param spritemap: string} + {@param? elementClasses: string} + {@param? header: list<[ + label: string + ]>} + {@param? id: string} + {@param? items: list<[ + actionItems: list<[ + disabled: bool, + icon: string, + label: string, + quickAction: bool, + separator: bool, + url: string + ]>, + columns: list<[ + label: string, + labelStyle: string, + progressBar: [ + maxValue: int, + minValue: int, + status: string, + value: int + ], + stickerLabel: string, + stickerStyle: string, + text: string, + url: string, + useEllipse: bool + ]>, + disabled: bool, + inputName: string, + inputValue: string, + selectable: bool, + selected: bool, + group: string + ]>} + + {let $attributes kind="attributes"} + class="table table-autofit table-heading-nowrap table-hover table-list show-quick-actions-on-hover + {if $elementClasses} + {sp}{$elementClasses} + {/if} + " + + {if $id} + id="{$id}" + {/if} + {/let} + +
+ + {if $header} + + {foreach $item in $header} + + {/foreach} + + {/if} + {if $items} + + {foreach $item in $items} + {call ClayTableItem.render} + {param actionItems: $item.actionItems /} + {param columns: $item.columns /} + {param disabled: $item.disabled /} + {param group: $item.group /} + {param inputName: $item.inputName /} + {param inputValue: $item.inputValue /} + {param selectable: $item.selectable /} + {param selected: $item.selected /} + {param spritemap: $spritemap /} + {/call} + {/foreach} + + {/if} +
+ {if $item.label} + {$item.label} + {/if} +
+
+{/template} diff --git a/packages/clay-table/src/ClayTableItem.js b/packages/clay-table/src/ClayTableItem.js new file mode 100644 index 000000000..799292558 --- /dev/null +++ b/packages/clay-table/src/ClayTableItem.js @@ -0,0 +1,115 @@ +import 'clay-checkbox'; +import 'clay-dropdown'; +import 'clay-icon'; +import 'clay-label'; +import 'clay-link'; +import 'clay-progress-bar'; +import 'clay-radio'; +import 'clay-sticker'; +import {actionsItemsValidator, columnsValidator} from './items_validator'; +import {Config} from 'metal-state'; +import Component from 'metal-component'; +import defineWebComponent from 'metal-web-component'; +import Soy from 'metal-soy'; + +import templates from './ClayTableItem.soy.js'; + +/** + * Metal ClayTableItem component. + */ +class ClayTableItem extends Component {} + +/** + * State definition. + * @static + * @type {!Object} + */ +ClayTableItem.STATE = { + /** + * List of items to display in the actions menu. + * @instance + * @memberof ClayTableItem + * @type {?array|undefined} + * @default undefined + */ + actionItems: actionsItemsValidator, + + /** + * List of the columns in the row. + * @instance + * @memberof ClayTableItem + * @type {?array|undefined} + * @default undefined + */ + columns: columnsValidator, + + /** + * Flag to indicate if the item is disabled or not. + * @instance + * @memberof ClayTableItem + * @type {?bool} + * @default false + */ + disabled: Config.bool().value(false), + + /** + * Table group separator. + * @instance + * @memberof ClayTableItem + * @type {?string|undefined} + * @default undefined + */ + group: Config.string(), + + /** + * Name to be applied to the input element. + * @instance + * @memberof ClayTableItem + * @type {?string|undefined} + * @default undefined + */ + inputName: Config.string(), + + /** + * Value to be applied to the input element. + * @instance + * @memberof ClayTableItem + * @type {?string|undefined} + * @default undefined + */ + inputValue: Config.string(), + + /** + * Flag to indicate if the item is selectable. + * @instance + * @memberof ClayTableItem + * @type {?bool} + * @default false + */ + selectable: Config.bool().value(false), + + /** + * Flag to indicate if the item is selected or not. + * @instance + * @memberof ClayTableItem + * @type {?bool} + * @default false + */ + selected: Config.bool().value(false), + + /** + * The path to the SVG spritemap file containing the icons. + * @instance + * @memberof ClayTableItem + * @type {!string} + * @default undefined + */ + spritemap: Config.string().required(), +}; + +defineWebComponent('clay-table-item', ClayTableItem); + +Soy.register(ClayTableItem, templates); + +export {ClayTableItem}; +export default ClayTableItem; diff --git a/packages/clay-table/src/ClayTableItem.soy b/packages/clay-table/src/ClayTableItem.soy new file mode 100644 index 000000000..1c3bbd5ba --- /dev/null +++ b/packages/clay-table/src/ClayTableItem.soy @@ -0,0 +1,243 @@ +{namespace ClayTableItem} + +/** + * This renders the component's whole content. + */ +{template .render} + {@param spritemap: string} + {@param? actionItems: list<[ + disabled: bool, + icon: string, + label: string, + quickAction: bool, + separator: bool, + url: string + ]>} + {@param? columns: list<[ + label: string, + labelStyle: string, + progressBar: [ + maxValue: int, + minValue: int, + status: string, + value: int + ], + stickerLabel: string, + stickerStyle: string, + text: string, + url: string, + useEllipse: bool + ]>} + {@param? disabled: bool} + {@param? group: string} + {@param? inputName: string} + {@param? inputValue: string} + {@param? selectable: bool} + {@param? selected: bool} + + {let $attributes kind="attributes"} + class=" + {if $selectable and $selected} + table-active + {/if} + + {if $group} + table-divider + {/if} + " + {/let} + + + {if $group} + {$group} + {else} + {call .content} + {param actionItems: $actionItems /} + {param columns: $columns /} + {param disabled: $disabled /} + {param inputName: $inputName /} + {param inputValue: $inputValue /} + {param selectable: $selectable /} + {param selected: $selected /} + {param spritemap: $spritemap /} + {/call} + {/if} + +{/template} + +/** + * This renders the content of the row. + */ +{template .content} + {@param spritemap: string} + {@param? actionItems: list<[ + disabled: bool, + icon: string, + label: string, + quickAction: bool, + separator: bool, + url: string + ]>} + {@param? columns: list<[ + label: string, + labelStyle: string, + progressBar: [ + maxValue: int, + minValue: int, + status: string, + value: int + ], + stickerLabel: string, + stickerStyle: string, + text: string, + url: string, + useEllipse: bool + ]>} + {@param? disabled: bool} + {@param? inputName: string} + {@param? inputValue: string} + {@param? selectable: bool} + {@param? selected: bool} + + {if $selectable} + + {call ClayCheckbox.render} + {param checked: $selected /} + {param disabled: $disabled /} + {param hideLabel: true /} + {param name: $inputName /} + {param value: $inputValue /} + {/call} + + {/if} + + {if $columns} + {foreach $column in $columns} + {let $isColumnFirst: index($column) == '0' and not $selectable or index($column) == '1' and $selectable /} + + {call .column} + {param isColumnFirst: $isColumnFirst /} + {param label: $column.label /} + {param labelStyle: $column.labelStyle /} + {param progressBar: $column.progressBar /} + {param stickerLabel: $column.stickerLabel /} + {param stickerStyle: $column.stickerStyle /} + {param text: $column.text /} + {param url: $column.url /} + {param useEllipse: $column.useEllipse /} + {/call} + {/foreach} + {/if} + + {if $actionItems} + + {call .quickMenu} + {param actionItems: $actionItems /} + {param spritemap: $spritemap /} + {/call} + + {call ClayActionsDropdown.render} + {param items: $actionItems /} + {param spritemap: $spritemap /} + {/call} + + {/if} +{/template} + +/** + * This renders a multiples columns of the row. + */ +{template .column} + {@param? isColumnFirst: bool} + {@param? label: string} + {@param? labelStyle: string} + {@param? progressBar: [ + maxValue: int, + minValue: int, + status: string, + value: int + ]} + {@param? stickerLabel: string} + {@param? stickerStyle: string} + {@param? text: string} + {@param? url: string} + {@param? useEllipse: bool} + + {let $textContent kind="html"} + {if $stickerLabel and $isColumnFirst} + {call ClaySticker.render} + {param label: $stickerLabel /} + {param shape: 'circle' /} + {param style: $stickerStyle /} + {/call} + {/if} + {$text} + {/let} + + {let $content kind="html"} + {if $label} + {call ClayLabel.render} + {param label: $label /} + {param style: $labelStyle /} + {/call} + {elseif $progressBar} + {call ClayProgressBar.render} + {param minValue: $progressBar.minValue /} + {param maxValue: $progressBar.maxValue /} + {param status: $progressBar.status /} + {param value: $progressBar.value /} + {/call} + {elseif $useEllipse} + {$textContent} + {elseif $text and not $url} + {$textContent} + {elseif $text and $url} + {call ClayLink.render} + {param href: $url /} + {param label: $text /} + {/call} + {/if} + {/let} + + {let $attributes kind="attributes"} + {if $useEllipse} + class="table-cell-content" + {/if} + {/let} + + + {$content} + +{/template} + +/** + * This renders the quick actions menu. + */ +{template .quickMenu} + {@param actionItems: list<[ + disabled: bool, + icon: string, + label: string, + quickAction: bool, + separator: bool, + url: string + ]>} + {@param spritemap: string} + +
+ {foreach $item in $actionItems} + {if $item.quickAction and $item.icon} + {call ClayLink.render} + {param elementClasses: 'quick-action-item' /} + {param href: $item.url /} + {param label kind="html"} + {call ClayIcon.render} + {param spritemap: $spritemap /} + {param symbol: $item.icon /} + {/call} + {/param} + {/call} + {/if} + {/foreach} +
+{/template} diff --git a/packages/clay-table/src/__tests__/ClayTable.js b/packages/clay-table/src/__tests__/ClayTable.js new file mode 100644 index 000000000..e78790928 --- /dev/null +++ b/packages/clay-table/src/__tests__/ClayTable.js @@ -0,0 +1,133 @@ +import ClayTable from '../ClayTable'; + +let component; +let spritemap = 'icons.svg'; +let items = [ + { + columns: [ + { + text: 'suffing-photo.png', + cellContent: true, + }, + { + text: 'Juan Anton', + }, + { + text: '264KB', + }, + { + labels: [ + { + label: 'Approved', + style: 'success', + }, + ], + }, + { + text: '15 Minutes Ago', + }, + { + text: '15 Minutes Ago', + }, + ], + }, + { + columns: [ + { + text: 'suffing-photo.png', + cellContent: true, + }, + { + text: 'Juan Anton', + }, + { + text: '264KB', + }, + { + labels: [ + { + label: 'Approved', + style: 'success', + }, + ], + }, + { + text: '15 Minutes Ago', + }, + { + text: '15 Minutes Ago', + }, + ], + }, +]; + +describe('ClayTable', function() { + afterEach(() => { + if (component) { + component.dispose(); + } + }); + + it('should render the default markup', () => { + component = new ClayTable({ + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render a ClayTable with classes', () => { + component = new ClayTable({ + elementClasses: 'my-custom-class', + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render a ClayTable with id', () => { + component = new ClayTable({ + id: 'myId', + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render a ClayTable with multiples items', () => { + component = new ClayTable({ + items: items, + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render a ClayTable with multiples columns in header', () => { + component = new ClayTable({ + header: [ + { + label: 'Title', + }, + { + label: 'Author', + }, + { + label: 'Size', + }, + { + label: 'Status', + }, + ], + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should fail when no spritemap is passed', () => { + expect(() => { + component = new ClayTable(); + }).toThrow(); + }); +}); diff --git a/packages/clay-table/src/__tests__/ClayTableItem.js b/packages/clay-table/src/__tests__/ClayTableItem.js new file mode 100644 index 000000000..3ca3db1e5 --- /dev/null +++ b/packages/clay-table/src/__tests__/ClayTableItem.js @@ -0,0 +1,384 @@ +import ClayTableItem from '../ClayTableItem'; + +let component; +let spritemap = 'icons.svg'; + +describe('ClayTableItem', function() { + afterEach(() => { + if (component) { + component.dispose(); + } + }); + + it('should render the default markup', () => { + component = new ClayTableItem({ + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render the ClayTableItem with id', () => { + component = new ClayTableItem({ + id: 'myId', + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render the ClayTableItem with custom element class', () => { + component = new ClayTableItem({ + elementClasses: 'my-custom-class', + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render the ClayTableItem with columns', () => { + component = new ClayTableItem({ + columns: [ + { + text: 'Foo', + cellContent: true, + }, + { + text: 'Bar', + url: '#1', + }, + { + text: 'Foo', + }, + { + text: 'Bar', + }, + ], + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render the ClayTableItem with multiples stickers in the column', () => { + component = new ClayTableItem({ + columns: [ + { + stickers: [ + { + label: 'AA', + style: 'danger', + }, + { + label: 'BB', + style: 'dark', + }, + { + label: 'CC', + style: 'info', + }, + { + label: 'CC', + style: 'light', + }, + { + label: 'CC', + style: 'primary', + }, + { + label: 'CC', + style: 'secondary', + }, + { + label: 'CC', + style: 'success', + }, + { + label: 'CC', + style: 'warning', + }, + ], + }, + ], + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render the ClayTableItem with multiples badges in the column', () => { + component = new ClayTableItem({ + columns: [ + { + badges: [ + { + label: '01', + style: 'danger', + }, + { + label: '01', + style: 'dark', + }, + { + label: '01', + style: 'info', + }, + { + label: '01', + style: 'light', + }, + { + label: '01', + style: 'primary', + }, + { + label: '01', + style: 'secondary', + }, + { + label: '01', + style: 'success', + }, + { + label: '01', + style: 'warning', + }, + ], + }, + ], + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render the ClayTableItem with multiples labels in the column', () => { + component = new ClayTableItem({ + columns: [ + { + labels: [ + { + label: 'Approved', + style: 'success', + }, + { + label: 'Rejected', + style: 'danger', + }, + { + label: 'Status', + style: 'info', + }, + { + label: 'Label text', + style: 'secondary', + }, + { + label: 'Pending', + style: 'warning', + }, + ], + }, + ], + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render the ClayTableItem with actionItems', () => { + component = new ClayTableItem({ + actionItems: [ + { + label: 'Option 1', + url: '#1', + }, + { + label: 'Option 2', + separator: true, + url: '#2', + }, + { + label: 'Option 3', + url: '#3', + }, + ], + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render the ClayTableItem with actionItems and quick menu', () => { + component = new ClayTableItem({ + actionItems: [ + { + icon: 'trash', + label: 'Option 1', + quickAction: true, + url: '#1', + }, + { + icon: 'download', + label: 'Option 2', + quickAction: true, + separator: true, + url: '#2', + }, + { + icon: 'info-circle-open', + label: 'Option 3', + quickAction: true, + url: '#3', + }, + ], + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render the ClayTableItem selectable', () => { + component = new ClayTableItem({ + columns: [ + { + text: 'Foo', + cellContent: true, + }, + { + text: 'Bar', + url: '#1', + }, + { + text: 'Foo', + }, + { + text: 'Bar', + }, + ], + selectable: true, + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render the ClayTableItem selected', () => { + component = new ClayTableItem({ + columns: [ + { + text: 'Foo', + cellContent: true, + }, + { + text: 'Bar', + url: '#1', + }, + { + text: 'Foo', + }, + { + text: 'Bar', + }, + ], + selectable: true, + selected: true, + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render the ClayTableItem disabled', () => { + component = new ClayTableItem({ + columns: [ + { + text: 'Foo', + cellContent: true, + }, + { + text: 'Bar', + url: '#1', + }, + { + text: 'Foo', + }, + { + text: 'Bar', + }, + ], + selectable: true, + disabled: true, + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render the ClayTableItem with input name', () => { + component = new ClayTableItem({ + columns: [ + { + text: 'Foo', + cellContent: true, + }, + { + text: 'Bar', + url: '#1', + }, + { + text: 'Foo', + }, + { + text: 'Bar', + }, + ], + inputName: 'name', + selectable: true, + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render the ClayTableItem with input value', () => { + component = new ClayTableItem({ + columns: [ + { + text: 'Foo', + cellContent: true, + }, + { + text: 'Bar', + url: '#1', + }, + { + text: 'Foo', + }, + { + text: 'Bar', + }, + ], + inputValue: 'value', + selectable: true, + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render the ClayTableItem with group', () => { + component = new ClayTableItem({ + group: 'Group 1', + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should fail when no spritemap is passed', () => { + expect(() => { + component = new ClayTableItem(); + }).toThrow(); + }); +}); diff --git a/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap b/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap new file mode 100644 index 000000000..0b6b09ae1 --- /dev/null +++ b/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap @@ -0,0 +1,65 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ClayTable should render a ClayTable with classes 1`] = ` +
+
+
+`; + +exports[`ClayTable should render a ClayTable with id 1`] = ` +
+
+
+`; + +exports[`ClayTable should render a ClayTable with multiples columns in header 1`] = ` +
+ + + + + + + +
TitleAuthorSizeStatus
+
+`; + +exports[`ClayTable should render a ClayTable with multiples items 1`] = ` +
+ + + + + + + + + + + + + + + + + + + +
+ suffing-photo.png + Juan Anton264KB + Approved + 15 Minutes Ago15 Minutes Ago
+ suffing-photo.png + Juan Anton264KB + Approved + 15 Minutes Ago15 Minutes Ago
+
+`; + +exports[`ClayTable should render the default markup 1`] = ` +
+
+
+`; diff --git a/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap b/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap new file mode 100644 index 000000000..743d257e6 --- /dev/null +++ b/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap @@ -0,0 +1,252 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ClayTableItem should render the ClayTableItem disabled 1`] = ` + + +
+ +
+ + + Foo + + + Bar + + Foo + Bar + +`; + +exports[`ClayTableItem should render the ClayTableItem selectable 1`] = ` + + +
+ +
+ + + Foo + + + Bar + + Foo + Bar + +`; + +exports[`ClayTableItem should render the ClayTableItem selected 1`] = ` + + +
+ +
+ + + Foo + + + Bar + + Foo + Bar + +`; + +exports[`ClayTableItem should render the ClayTableItem with actionItems 1`] = ` + + +
+
+ +
+ +
+
+ + +`; + +exports[`ClayTableItem should render the ClayTableItem with actionItems and quick menu 1`] = ` + + +
+ + + + + + + + + +
+
+ +
+ +
+
+ + +`; + +exports[`ClayTableItem should render the ClayTableItem with columns 1`] = ` + + + Foo + + + Bar + + Foo + Bar + +`; + +exports[`ClayTableItem should render the ClayTableItem with custom element class 1`] = ``; + +exports[`ClayTableItem should render the ClayTableItem with group 1`] = ` + + Group 1 + +`; + +exports[`ClayTableItem should render the ClayTableItem with id 1`] = ``; + +exports[`ClayTableItem should render the ClayTableItem with input name 1`] = ` + + +
+ +
+ + + Foo + + + Bar + + Foo + Bar + +`; + +exports[`ClayTableItem should render the ClayTableItem with input value 1`] = ` + + +
+ +
+ + + Foo + + + Bar + + Foo + Bar + +`; + +exports[`ClayTableItem should render the ClayTableItem with multiples badges in the column 1`] = ` + + + 01 + 01 + 01 + 01 + 01 + 01 + 01 + 01 + + +`; + +exports[`ClayTableItem should render the ClayTableItem with multiples labels in the column 1`] = ` + + + Approved + Rejected + Status + Label text + Pending + + +`; + +exports[`ClayTableItem should render the ClayTableItem with multiples stickers in the column 1`] = ` + + + AA + BB + CC + CC + CC + CC + CC + CC + + +`; + +exports[`ClayTableItem should render the default markup 1`] = ``; diff --git a/packages/clay-table/src/items_validator.js b/packages/clay-table/src/items_validator.js new file mode 100644 index 000000000..cd9e5dfcd --- /dev/null +++ b/packages/clay-table/src/items_validator.js @@ -0,0 +1,59 @@ +import {Config} from 'metal-state'; + +let actionItems = { + disabled: Config.bool().value(false), + icon: Config.string(), + label: Config.string(), + quickAction: Config.bool().value(false), + separator: Config.bool().value(false), + url: Config.string().required(), +}; + +let columns = { + label: Config.string(), + labelStyle: Config.oneOf([ + 'danger', + 'info', + 'secondary', + 'success', + 'warning', + ]).value('secondary'), + progressBar: Config.shapeOf({ + maxValue: Config.number(), + minValue: Config.number(), + status: Config.oneOf(['complete', 'warning']), + value: Config.number(), + }), + stickerLabel: Config.any(), + stickerStyle: Config.oneOf([ + 'danger', + 'dark', + 'info', + 'light', + 'primary', + 'secondary', + 'success', + 'warning', + ]).value('primary'), + text: Config.string(), + url: Config.string(), + useEllipse: Config.bool().value(false), +}; + +let items = { + actionItems: Config.arrayOf(Config.shapeOf(actionItems)), + columns: Config.arrayOf(Config.shapeOf(columns)), + disabled: Config.bool().value(false), + group: Config.string(), + inputName: Config.string(), + inputValue: Config.string(), + selectable: Config.bool().value(false), + selected: Config.bool().value(false), +}; + +const actionsItemsValidator = Config.arrayOf(Config.shapeOf(actionItems)); +const columnsValidator = Config.arrayOf(Config.shapeOf(columns)); +const itemsValidator = Config.arrayOf(Config.shapeOf(items)); + +export {actionsItemsValidator, columnsValidator, itemsValidator}; +export default itemsValidator; diff --git a/packages/clay-table/webpack.config.js b/packages/clay-table/webpack.config.js new file mode 100644 index 000000000..63267c1da --- /dev/null +++ b/packages/clay-table/webpack.config.js @@ -0,0 +1,31 @@ +const path = require('path'); +const webpack = require('webpack'); + +module.exports = { + entry: './src/ClayTable.js', + module: { + rules: [ + { + test: /\.js$/, + exclude: /(node_modules|bower_components)/, + use: { + loader: 'babel-loader', + options: { + compact: false, + presets: ['babel-preset-env'], + plugins: ['babel-plugin-transform-node-env-inline'], + }, + }, + }, + ], + }, + output: { + library: 'metal', + libraryTarget: 'this', + filename: './build/globals/clay-table.js', + }, + plugins: [new webpack.optimize.ModuleConcatenationPlugin()], + resolve: { + mainFields: ['esnext:main', 'main'], + }, +}; From ad96e545bf313bdd92f43a6ca435e13941286779 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Tue, 12 Dec 2017 10:58:32 -0300 Subject: [PATCH 02/29] Separate column for flexible use with deltemplate --- packages/clay-table/src/ClayTableItem.js | 9 +++ packages/clay-table/src/ClayTableItem.soy | 72 ++++++++++++++++------- 2 files changed, 60 insertions(+), 21 deletions(-) diff --git a/packages/clay-table/src/ClayTableItem.js b/packages/clay-table/src/ClayTableItem.js index 799292558..13f4d00e7 100644 --- a/packages/clay-table/src/ClayTableItem.js +++ b/packages/clay-table/src/ClayTableItem.js @@ -43,6 +43,15 @@ ClayTableItem.STATE = { */ columns: columnsValidator, + /** + * Name of the content renderer to use template variants. + * @instance + * @memberof ClayTableItem + * @type {?string|undefined} + * @default undefined + */ + contentRenderer: Config.string(), + /** * Flag to indicate if the item is disabled or not. * @instance diff --git a/packages/clay-table/src/ClayTableItem.soy b/packages/clay-table/src/ClayTableItem.soy index 1c3bbd5ba..7706cfbc4 100644 --- a/packages/clay-table/src/ClayTableItem.soy +++ b/packages/clay-table/src/ClayTableItem.soy @@ -28,6 +28,7 @@ url: string, useEllipse: bool ]>} + {@param? contentRenderer: string} {@param? disabled: bool} {@param? group: string} {@param? inputName: string} @@ -54,6 +55,7 @@ {call .content} {param actionItems: $actionItems /} {param columns: $columns /} + {param contentRenderer: $contentRenderer /} {param disabled: $disabled /} {param inputName: $inputName /} {param inputValue: $inputValue /} @@ -93,6 +95,7 @@ url: string, useEllipse: bool ]>} + {@param? contentRenderer: string} {@param? disabled: bool} {@param? inputName: string} {@param? inputValue: string} @@ -115,7 +118,7 @@ {foreach $column in $columns} {let $isColumnFirst: index($column) == '0' and not $selectable or index($column) == '1' and $selectable /} - {call .column} + {delcall ClayTableItem.Column variant="$contentRenderer"} {param isColumnFirst: $isColumnFirst /} {param label: $column.label /} {param labelStyle: $column.labelStyle /} @@ -125,7 +128,7 @@ {param text: $column.text /} {param url: $column.url /} {param useEllipse: $column.useEllipse /} - {/call} + {/delcall} {/foreach} {/if} @@ -147,9 +150,9 @@ /** * This renders a multiples columns of the row. */ -{template .column} +{deltemplate ClayTableItem.Column} {@param? isColumnFirst: bool} - {@param? label: string} + {@param? label: string} {@param? labelStyle: string} {@param? progressBar: [ maxValue: int, @@ -164,14 +167,13 @@ {@param? useEllipse: bool} {let $textContent kind="html"} - {if $stickerLabel and $isColumnFirst} - {call ClaySticker.render} - {param label: $stickerLabel /} - {param shape: 'circle' /} - {param style: $stickerStyle /} - {/call} - {/if} - {$text} + {call .text} + {param isColumnFirst: $isColumnFirst /} + {param stickerLabel: $stickerLabel /} + {param stickerStyle: $stickerStyle /} + {param text: $text /} + {param url: $url /} + {/call} {/let} {let $content kind="html"} @@ -187,15 +189,12 @@ {param status: $progressBar.status /} {param value: $progressBar.value /} {/call} - {elseif $useEllipse} - {$textContent} - {elseif $text and not $url} - {$textContent} - {elseif $text and $url} - {call ClayLink.render} - {param href: $url /} - {param label: $text /} - {/call} + {elseif $text} + {if $useEllipse} + {$textContent} + {else} + {$textContent} + {/if} {/if} {/let} @@ -208,6 +207,37 @@ {$content} +{/deltemplate} + +/** + * This renders a text of the column. + */ +{template .text} + {@param? isColumnFirst: bool} + {@param? stickerLabel: string} + {@param? stickerStyle: string} + {@param? text: string} + {@param? url: string} + + {let $textContent kind="html"} + {if $stickerLabel and $isColumnFirst} + {call ClaySticker.render} + {param label: $stickerLabel /} + {param shape: 'circle' /} + {param style: $stickerStyle /} + {/call} + {/if} + {$text} + {/let} + + {if $text and not $url} + {$textContent} + {elseif $text and $url} + {call ClayLink.render} + {param href: $url /} + {param label: $text /} + {/call} + {/if} {/template} /** From ed4c70a6c2321c3b3a02da2dcb2536e06f2eeb07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Tue, 12 Dec 2017 11:20:15 -0300 Subject: [PATCH 03/29] Update ClayTable tests --- .../clay-table/src/__tests__/ClayTable.js | 20 +-- .../clay-table/src/__tests__/ClayTableItem.js | 117 +++--------------- 2 files changed, 24 insertions(+), 113 deletions(-) diff --git a/packages/clay-table/src/__tests__/ClayTable.js b/packages/clay-table/src/__tests__/ClayTable.js index e78790928..8ce735dec 100644 --- a/packages/clay-table/src/__tests__/ClayTable.js +++ b/packages/clay-table/src/__tests__/ClayTable.js @@ -7,7 +7,7 @@ let items = [ columns: [ { text: 'suffing-photo.png', - cellContent: true, + useEllipse: true, }, { text: 'Juan Anton', @@ -16,12 +16,8 @@ let items = [ text: '264KB', }, { - labels: [ - { - label: 'Approved', - style: 'success', - }, - ], + label: 'Approved', + labelStyle: 'success', }, { text: '15 Minutes Ago', @@ -35,7 +31,7 @@ let items = [ columns: [ { text: 'suffing-photo.png', - cellContent: true, + useEllipse: true, }, { text: 'Juan Anton', @@ -44,12 +40,8 @@ let items = [ text: '264KB', }, { - labels: [ - { - label: 'Approved', - style: 'success', - }, - ], + label: 'Approved', + labelStyle: 'success', }, { text: '15 Minutes Ago', diff --git a/packages/clay-table/src/__tests__/ClayTableItem.js b/packages/clay-table/src/__tests__/ClayTableItem.js index 3ca3db1e5..3a405c629 100644 --- a/packages/clay-table/src/__tests__/ClayTableItem.js +++ b/packages/clay-table/src/__tests__/ClayTableItem.js @@ -41,7 +41,7 @@ describe('ClayTableItem', function() { columns: [ { text: 'Foo', - cellContent: true, + useEllipse: true, }, { text: 'Bar', @@ -60,44 +60,14 @@ describe('ClayTableItem', function() { expect(component).toMatchSnapshot(); }); - it('should render the ClayTableItem with multiples stickers in the column', () => { + it('should render the ClayTableItem with user sticker in the column', () => { component = new ClayTableItem({ columns: [ { - stickers: [ - { - label: 'AA', - style: 'danger', - }, - { - label: 'BB', - style: 'dark', - }, - { - label: 'CC', - style: 'info', - }, - { - label: 'CC', - style: 'light', - }, - { - label: 'CC', - style: 'primary', - }, - { - label: 'CC', - style: 'secondary', - }, - { - label: 'CC', - style: 'success', - }, - { - label: 'CC', - style: 'warning', - }, - ], + stickerLabel: 'AA', + stickerStyle: 'primary', + text: 'Name', + useEllipse: true, }, ], spritemap: spritemap, @@ -106,44 +76,13 @@ describe('ClayTableItem', function() { expect(component).toMatchSnapshot(); }); - it('should render the ClayTableItem with multiples badges in the column', () => { + it('should render the ClayTableItem with ClayProgressBar in the column', () => { component = new ClayTableItem({ columns: [ { - badges: [ - { - label: '01', - style: 'danger', - }, - { - label: '01', - style: 'dark', - }, - { - label: '01', - style: 'info', - }, - { - label: '01', - style: 'light', - }, - { - label: '01', - style: 'primary', - }, - { - label: '01', - style: 'secondary', - }, - { - label: '01', - style: 'success', - }, - { - label: '01', - style: 'warning', - }, - ], + progressBar: { + value: 40, + }, }, ], spritemap: spritemap, @@ -152,32 +91,12 @@ describe('ClayTableItem', function() { expect(component).toMatchSnapshot(); }); - it('should render the ClayTableItem with multiples labels in the column', () => { + it('should render the ClayTableItem with label in the column', () => { component = new ClayTableItem({ columns: [ { - labels: [ - { - label: 'Approved', - style: 'success', - }, - { - label: 'Rejected', - style: 'danger', - }, - { - label: 'Status', - style: 'info', - }, - { - label: 'Label text', - style: 'secondary', - }, - { - label: 'Pending', - style: 'warning', - }, - ], + label: 'Approved', + labelStyle: 'success', }, ], spritemap: spritemap, @@ -243,7 +162,7 @@ describe('ClayTableItem', function() { columns: [ { text: 'Foo', - cellContent: true, + useEllipse: true, }, { text: 'Bar', @@ -268,7 +187,7 @@ describe('ClayTableItem', function() { columns: [ { text: 'Foo', - cellContent: true, + useEllipse: true, }, { text: 'Bar', @@ -294,7 +213,7 @@ describe('ClayTableItem', function() { columns: [ { text: 'Foo', - cellContent: true, + useEllipse: true, }, { text: 'Bar', @@ -320,7 +239,7 @@ describe('ClayTableItem', function() { columns: [ { text: 'Foo', - cellContent: true, + useEllipse: true, }, { text: 'Bar', @@ -346,7 +265,7 @@ describe('ClayTableItem', function() { columns: [ { text: 'Foo', - cellContent: true, + useEllipse: true, }, { text: 'Bar', From 3f77126295a2f587720f7a1cb60fbd4f0ad3d939 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Tue, 12 Dec 2017 11:20:39 -0300 Subject: [PATCH 04/29] Update ClayTable snapshots --- .../__snapshots__/ClayTableItem.js.snap | 48 +++++++------------ 1 file changed, 18 insertions(+), 30 deletions(-) diff --git a/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap b/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap index 743d257e6..27c33a569 100644 --- a/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap +++ b/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap @@ -66,6 +66,19 @@ exports[`ClayTableItem should render the ClayTableItem selected 1`] = ` `; +exports[`ClayTableItem should render the ClayTableItem with ClayProgressBar in the column 1`] = ` + + +
+
+
+
+
40%
+
+ + +`; + exports[`ClayTableItem should render the ClayTableItem with actionItems 1`] = ` @@ -207,44 +220,19 @@ exports[`ClayTableItem should render the ClayTableItem with input value 1`] = ` `; -exports[`ClayTableItem should render the ClayTableItem with multiples badges in the column 1`] = ` - - - 01 - 01 - 01 - 01 - 01 - 01 - 01 - 01 - - -`; - -exports[`ClayTableItem should render the ClayTableItem with multiples labels in the column 1`] = ` +exports[`ClayTableItem should render the ClayTableItem with label in the column 1`] = ` Approved - Rejected - Status - Label text - Pending `; -exports[`ClayTableItem should render the ClayTableItem with multiples stickers in the column 1`] = ` +exports[`ClayTableItem should render the ClayTableItem with user sticker in the column 1`] = ` - - AA - BB - CC - CC - CC - CC - CC - CC + + + AAName `; From 25047fed8adce3f085628ef967c532ee66bb8534 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Tue, 12 Dec 2017 11:23:30 -0300 Subject: [PATCH 05/29] SF --- packages/clay-table/package.json | 1 - packages/clay-table/src/ClayTableItem.js | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/clay-table/package.json b/packages/clay-table/package.json index c48389d2f..ce9d4b432 100644 --- a/packages/clay-table/package.json +++ b/packages/clay-table/package.json @@ -33,7 +33,6 @@ "clay-label": "^1.0.0-alpha.5", "clay-link": "^1.0.0-alpha.5", "clay-progress-bar": "^1.0.0-alpha.5", - "clay-radio": "^1.0.0-alpha.5", "clay-sticker": "^1.0.0-alpha.5", "metal": "^2.14.0", "metal-component": "^2.14.0", diff --git a/packages/clay-table/src/ClayTableItem.js b/packages/clay-table/src/ClayTableItem.js index 13f4d00e7..ec01cf100 100644 --- a/packages/clay-table/src/ClayTableItem.js +++ b/packages/clay-table/src/ClayTableItem.js @@ -4,7 +4,6 @@ import 'clay-icon'; import 'clay-label'; import 'clay-link'; import 'clay-progress-bar'; -import 'clay-radio'; import 'clay-sticker'; import {actionsItemsValidator, columnsValidator} from './items_validator'; import {Config} from 'metal-state'; From 00a73487922107118f560b549772a7ea8afeb618 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Tue, 12 Dec 2017 15:13:48 -0300 Subject: [PATCH 06/29] Restrict the use of the sticker on the columns --- packages/clay-table/src/ClayTable.js | 2 + packages/clay-table/src/ClayTable.soy | 42 ++++++++++++++------ packages/clay-table/src/ClayTableItem.js | 36 +++++++++++++++++ packages/clay-table/src/ClayTableItem.soy | 46 ++++++++++------------ packages/clay-table/src/items_validator.js | 23 +++++------ 5 files changed, 101 insertions(+), 48 deletions(-) diff --git a/packages/clay-table/src/ClayTable.js b/packages/clay-table/src/ClayTable.js index 9b150c121..ba9f272a9 100644 --- a/packages/clay-table/src/ClayTable.js +++ b/packages/clay-table/src/ClayTable.js @@ -36,7 +36,9 @@ ClayTable.STATE = { */ header: Config.arrayOf( Config.shapeOf({ + colSpan: Config.number(), label: Config.string(), + sort: Config.bool().value(false), }) ), diff --git a/packages/clay-table/src/ClayTable.soy b/packages/clay-table/src/ClayTable.soy index 6629118cd..b69ee2e53 100644 --- a/packages/clay-table/src/ClayTable.soy +++ b/packages/clay-table/src/ClayTable.soy @@ -7,7 +7,9 @@ {@param spritemap: string} {@param? elementClasses: string} {@param? header: list<[ - label: string + colSpan: int, + label: string, + sort: bool ]>} {@param? id: string} {@param? items: list<[ @@ -28,18 +30,19 @@ status: string, value: int ], - stickerLabel: string, - stickerStyle: string, text: string, url: string, useEllipse: bool ]>, disabled: bool, + group: string, inputName: string, inputValue: string, selectable: bool, selected: bool, - group: string + stickerLabel: string, + stickerStyle: string, + stickerShape: string ]>} {let $attributes kind="attributes"} @@ -58,13 +61,27 @@ {if $header} - {foreach $item in $header} - - {/foreach} + + {foreach $item in $header} + {let $thAttributes kind="attributes"} + {if $item.colSpan} + colspan="{$item.colSpan}" + {/if} + {/let} + + + {/foreach} + {/if} {if $items} @@ -80,6 +97,9 @@ {param selectable: $item.selectable /} {param selected: $item.selected /} {param spritemap: $spritemap /} + {param stickerLabel: $item.stickerLabel /} + {param stickerStyle: $item.stickerStyle /} + {param stickerShape: $item.stickerShape /} {/call} {/foreach} diff --git a/packages/clay-table/src/ClayTableItem.js b/packages/clay-table/src/ClayTableItem.js index ec01cf100..c63dbed46 100644 --- a/packages/clay-table/src/ClayTableItem.js +++ b/packages/clay-table/src/ClayTableItem.js @@ -113,6 +113,42 @@ ClayTableItem.STATE = { * @default undefined */ spritemap: Config.string().required(), + + /** + * The path to the SVG spritemap file containing the icons. + * @instance + * @memberof ClayTableItem + * @type {?string|undefined} + * @default undefined + */ + stickerLabel: Config.string(), + + /** + * The path to the SVG spritemap file containing the icons. + * @instance + * @memberof ClayTableItem + * @type {?string} + * @default primary + */ + stickerStyle: Config.oneOf([ + 'danger', + 'dark', + 'info', + 'light', + 'primary', + 'secondary', + 'success', + 'warning', + ]).value('primary'), + + /** + * The path to the SVG spritemap file containing the icons. + * @instance + * @memberof ClayTableItem + * @type {?string} + * @default circle + */ + stickerShape: Config.string().value('circle'), }; defineWebComponent('clay-table-item', ClayTableItem); diff --git a/packages/clay-table/src/ClayTableItem.soy b/packages/clay-table/src/ClayTableItem.soy index 7706cfbc4..f33597ece 100644 --- a/packages/clay-table/src/ClayTableItem.soy +++ b/packages/clay-table/src/ClayTableItem.soy @@ -22,8 +22,6 @@ status: string, value: int ], - stickerLabel: string, - stickerStyle: string, text: string, url: string, useEllipse: bool @@ -35,6 +33,9 @@ {@param? inputValue: string} {@param? selectable: bool} {@param? selected: bool} + {@param? stickerLabel: string} + {@param? stickerStyle: string} + {@param? stickerShape: string} {let $attributes kind="attributes"} class=" @@ -62,6 +63,9 @@ {param selectable: $selectable /} {param selected: $selected /} {param spritemap: $spritemap /} + {param stickerLabel: $stickerLabel /} + {param stickerStyle: $stickerStyle /} + {param stickerShape: $stickerShape /} {/call} {/if} @@ -89,8 +93,6 @@ status: string, value: int ], - stickerLabel: string, - stickerStyle: string, text: string, url: string, useEllipse: bool @@ -101,6 +103,9 @@ {@param? inputValue: string} {@param? selectable: bool} {@param? selected: bool} + {@param? stickerLabel: string} + {@param? stickerStyle: string} + {@param? stickerShape: string} {if $selectable} {/if} + {if $stickerLabel} + + {/if} + {if $columns} {foreach $column in $columns} {let $isColumnFirst: index($column) == '0' and not $selectable or index($column) == '1' and $selectable /} @@ -123,8 +138,6 @@ {param label: $column.label /} {param labelStyle: $column.labelStyle /} {param progressBar: $column.progressBar /} - {param stickerLabel: $column.stickerLabel /} - {param stickerStyle: $column.stickerStyle /} {param text: $column.text /} {param url: $column.url /} {param useEllipse: $column.useEllipse /} @@ -160,17 +173,12 @@ status: string, value: int ]} - {@param? stickerLabel: string} - {@param? stickerStyle: string} {@param? text: string} {@param? url: string} {@param? useEllipse: bool} {let $textContent kind="html"} {call .text} - {param isColumnFirst: $isColumnFirst /} - {param stickerLabel: $stickerLabel /} - {param stickerStyle: $stickerStyle /} {param text: $text /} {param url: $url /} {/call} @@ -213,25 +221,11 @@ * This renders a text of the column. */ {template .text} - {@param? isColumnFirst: bool} - {@param? stickerLabel: string} - {@param? stickerStyle: string} {@param? text: string} {@param? url: string} - {let $textContent kind="html"} - {if $stickerLabel and $isColumnFirst} - {call ClaySticker.render} - {param label: $stickerLabel /} - {param shape: 'circle' /} - {param style: $stickerStyle /} - {/call} - {/if} - {$text} - {/let} - {if $text and not $url} - {$textContent} + {$text} {elseif $text and $url} {call ClayLink.render} {param href: $url /} diff --git a/packages/clay-table/src/items_validator.js b/packages/clay-table/src/items_validator.js index cd9e5dfcd..4f3668394 100644 --- a/packages/clay-table/src/items_validator.js +++ b/packages/clay-table/src/items_validator.js @@ -24,17 +24,6 @@ let columns = { status: Config.oneOf(['complete', 'warning']), value: Config.number(), }), - stickerLabel: Config.any(), - stickerStyle: Config.oneOf([ - 'danger', - 'dark', - 'info', - 'light', - 'primary', - 'secondary', - 'success', - 'warning', - ]).value('primary'), text: Config.string(), url: Config.string(), useEllipse: Config.bool().value(false), @@ -49,6 +38,18 @@ let items = { inputValue: Config.string(), selectable: Config.bool().value(false), selected: Config.bool().value(false), + stickerLabel: Config.string(), + stickerStyle: Config.oneOf([ + 'danger', + 'dark', + 'info', + 'light', + 'primary', + 'secondary', + 'success', + 'warning', + ]).value('primary'), + stickerShape: Config.string().value('circle'), }; const actionsItemsValidator = Config.arrayOf(Config.shapeOf(actionItems)); From d8cf140d342fb20f16ec9599d2f1da2e513aa1c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Tue, 12 Dec 2017 15:19:04 -0300 Subject: [PATCH 07/29] Update ClayTableItem tests with use the sticker --- packages/clay-table/src/__tests__/ClayTableItem.js | 4 ++-- .../src/__tests__/__snapshots__/ClayTable.js.snap | 10 ++++++---- .../src/__tests__/__snapshots__/ClayTableItem.js.snap | 6 ++++-- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/clay-table/src/__tests__/ClayTableItem.js b/packages/clay-table/src/__tests__/ClayTableItem.js index 3a405c629..871e7e735 100644 --- a/packages/clay-table/src/__tests__/ClayTableItem.js +++ b/packages/clay-table/src/__tests__/ClayTableItem.js @@ -64,13 +64,13 @@ describe('ClayTableItem', function() { component = new ClayTableItem({ columns: [ { - stickerLabel: 'AA', - stickerStyle: 'primary', text: 'Name', useEllipse: true, }, ], spritemap: spritemap, + stickerLabel: 'AA', + stickerStyle: 'primary', }); expect(component).toMatchSnapshot(); diff --git a/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap b/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap index 0b6b09ae1..ab4f5970a 100644 --- a/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap +++ b/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap @@ -16,10 +16,12 @@ exports[`ClayTable should render a ClayTable with multiples columns in header 1`
- {if $item.label} - {$item.label} - {/if} -
+ {if $item.label} + {$item.label} + {/if} + {if $item.sort} + {call ClayIcon.render} + {param spritemap: $spritemap /} + {param symbol: 'order-arrow-down' /} + {/call} + {/if} +
@@ -114,6 +119,16 @@ + {call ClaySticker.render} + {param label: $stickerLabel /} + {param shape: $stickerShape ?: 'circle' /} + {param style: $stickerStyle /} + {/call} +
- - - - + + + + + +
TitleAuthorSizeStatus
TitleAuthorSizeStatus
diff --git a/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap b/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap index 27c33a569..03c3244f5 100644 --- a/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap +++ b/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap @@ -230,9 +230,11 @@ exports[`ClayTableItem should render the ClayTableItem with label in the column exports[`ClayTableItem should render the ClayTableItem with user sticker in the column 1`] = ` + + AA + - - AAName + Name `; From 97f012f8dfea4dfe2f3a3e28c144e6603e250689 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Tue, 12 Dec 2017 19:47:15 -0300 Subject: [PATCH 08/29] Fix JSDOC on ClayTableItem --- packages/clay-table/src/ClayTableItem.js | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/packages/clay-table/src/ClayTableItem.js b/packages/clay-table/src/ClayTableItem.js index c63dbed46..dee23c8e0 100644 --- a/packages/clay-table/src/ClayTableItem.js +++ b/packages/clay-table/src/ClayTableItem.js @@ -115,7 +115,7 @@ ClayTableItem.STATE = { spritemap: Config.string().required(), /** - * The path to the SVG spritemap file containing the icons. + * Sets the text to be rendered inside sticker. * @instance * @memberof ClayTableItem * @type {?string|undefined} @@ -124,7 +124,17 @@ ClayTableItem.STATE = { stickerLabel: Config.string(), /** - * The path to the SVG spritemap file containing the icons. + * Shape of sticker. Available shapes are `circle`, `rounded`. + * @instance + * @memberof ClayTableItem + * @type {?string} + * @default circle + */ + stickerShape: Config.string().value('circle'), + + /** + * Sticker style. Available sizes are: `danger`, `dark`, `info`, `light`, + * `primary`, `secondary`, `success`, `warning`. * @instance * @memberof ClayTableItem * @type {?string} @@ -140,15 +150,6 @@ ClayTableItem.STATE = { 'success', 'warning', ]).value('primary'), - - /** - * The path to the SVG spritemap file containing the icons. - * @instance - * @memberof ClayTableItem - * @type {?string} - * @default circle - */ - stickerShape: Config.string().value('circle'), }; defineWebComponent('clay-table-item', ClayTableItem); From f8a639872f104efa381853b732ad4f68b4f7991b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Tue, 12 Dec 2017 21:07:19 -0300 Subject: [PATCH 09/29] Add handleSortColumn with icon direction in ClayTable --- packages/clay-table/src/ClayTable.js | 11 ++++++++++- packages/clay-table/src/ClayTable.soy | 18 +++++++++++------- 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/packages/clay-table/src/ClayTable.js b/packages/clay-table/src/ClayTable.js index ba9f272a9..3bede4616 100644 --- a/packages/clay-table/src/ClayTable.js +++ b/packages/clay-table/src/ClayTable.js @@ -10,7 +10,14 @@ import templates from './ClayTable.soy.js'; /** * Metal ClayTable component. */ -class ClayTable extends Component {} +class ClayTable extends Component { + /** + * Handle button sort in header. + */ + handleSortColum_(event) { + this.emit('buttonSortClicked', event); + } +} /** * State definition. @@ -37,8 +44,10 @@ ClayTable.STATE = { header: Config.arrayOf( Config.shapeOf({ colSpan: Config.number(), + elementClasses: Config.string(), label: Config.string(), sort: Config.bool().value(false), + sortDirection_: Config.oneOf(['down', 'up']).value('down'), }) ), diff --git a/packages/clay-table/src/ClayTable.soy b/packages/clay-table/src/ClayTable.soy index b69ee2e53..b1e108f33 100644 --- a/packages/clay-table/src/ClayTable.soy +++ b/packages/clay-table/src/ClayTable.soy @@ -9,8 +9,10 @@ {@param? header: list<[ colSpan: int, label: string, - sort: bool + sort: bool, + sortDirection_: string ]>} + {@param? handleSortColum_: any} {@param? id: string} {@param? items: list<[ actionItems: list<[ @@ -70,13 +72,15 @@ {/let} - {if $item.label} + {if $item.label and not $item.sort} {$item.label} - {/if} - {if $item.sort} - {call ClayIcon.render} + {elseif $item.sort and $item.label} + {call ClayLink.render} + {param events: ['click': $handleSortColum_] /} + {param href: '#sort' /} + {param icon: 'order-arrow-' + $item.sortDirection_ ?: 'down' /} + {param iconAlignment: 'right' /} {param spritemap: $spritemap /} - {param symbol: 'order-arrow-down' /} {/call} {/if} @@ -98,8 +102,8 @@ {param selected: $item.selected /} {param spritemap: $spritemap /} {param stickerLabel: $item.stickerLabel /} - {param stickerStyle: $item.stickerStyle /} {param stickerShape: $item.stickerShape /} + {param stickerStyle: $item.stickerStyle /} {/call} {/foreach} From e4839e38e116dfbf1d4efd0d5e7a804346b91c88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Tue, 12 Dec 2017 21:00:55 -0300 Subject: [PATCH 10/29] Add elementClasses for th and td columns in ClayTable and ClayTableItem --- packages/clay-table/src/ClayTable.soy | 8 ++++++++ packages/clay-table/src/ClayTableItem.soy | 22 ++++++++++++++++------ packages/clay-table/src/items_validator.js | 1 + 3 files changed, 25 insertions(+), 6 deletions(-) diff --git a/packages/clay-table/src/ClayTable.soy b/packages/clay-table/src/ClayTable.soy index b1e108f33..596c4eb55 100644 --- a/packages/clay-table/src/ClayTable.soy +++ b/packages/clay-table/src/ClayTable.soy @@ -8,6 +8,7 @@ {@param? elementClasses: string} {@param? header: list<[ colSpan: int, + elementClasses: string, label: string, sort: bool, sortDirection_: string @@ -24,6 +25,7 @@ url: string ]>, columns: list<[ + elementClasses: string, label: string, labelStyle: string, progressBar: [ @@ -66,6 +68,12 @@ {foreach $item in $header} {let $thAttributes kind="attributes"} + class=" + {if $item.elementClasses} + {$item.elementClasses} + {/if} + " + {if $item.colSpan} colspan="{$item.colSpan}" {/if} diff --git a/packages/clay-table/src/ClayTableItem.soy b/packages/clay-table/src/ClayTableItem.soy index f33597ece..0a8f6f990 100644 --- a/packages/clay-table/src/ClayTableItem.soy +++ b/packages/clay-table/src/ClayTableItem.soy @@ -14,6 +14,7 @@ url: string ]>} {@param? columns: list<[ + elementClasses: string, label: string, labelStyle: string, progressBar: [ @@ -34,8 +35,8 @@ {@param? selectable: bool} {@param? selected: bool} {@param? stickerLabel: string} - {@param? stickerStyle: string} {@param? stickerShape: string} + {@param? stickerStyle: string} {let $attributes kind="attributes"} class=" @@ -64,8 +65,8 @@ {param selected: $selected /} {param spritemap: $spritemap /} {param stickerLabel: $stickerLabel /} - {param stickerStyle: $stickerStyle /} {param stickerShape: $stickerShape /} + {param stickerStyle: $stickerStyle /} {/call} {/if} @@ -85,6 +86,7 @@ url: string ]>} {@param? columns: list<[ + elementClasses: string, label: string, labelStyle: string, progressBar: [ @@ -104,8 +106,8 @@ {@param? selectable: bool} {@param? selected: bool} {@param? stickerLabel: string} - {@param? stickerStyle: string} {@param? stickerShape: string} + {@param? stickerStyle: string} {if $selectable} @@ -134,6 +136,7 @@ {let $isColumnFirst: index($column) == '0' and not $selectable or index($column) == '1' and $selectable /} {delcall ClayTableItem.Column variant="$contentRenderer"} + {param elementClasses: $column.elementClasses /} {param isColumnFirst: $isColumnFirst /} {param label: $column.label /} {param labelStyle: $column.labelStyle /} @@ -164,6 +167,7 @@ * This renders a multiples columns of the row. */ {deltemplate ClayTableItem.Column} + {@param? elementClasses: string} {@param? isColumnFirst: bool} {@param? label: string} {@param? labelStyle: string} @@ -207,9 +211,15 @@ {/let} {let $attributes kind="attributes"} - {if $useEllipse} - class="table-cell-content" - {/if} + class=" + {if $elementClasses} + {$elementClasses} + {/if} + + {if $useEllipse} + {sp}table-cell-content + {/if} + " {/let} diff --git a/packages/clay-table/src/items_validator.js b/packages/clay-table/src/items_validator.js index 4f3668394..0f2f41dd3 100644 --- a/packages/clay-table/src/items_validator.js +++ b/packages/clay-table/src/items_validator.js @@ -10,6 +10,7 @@ let actionItems = { }; let columns = { + elementClasses: Config.string(), label: Config.string(), labelStyle: Config.oneOf([ 'danger', From 62d8493947fb511f80a97c7831088a3478cce46a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Tue, 12 Dec 2017 21:01:41 -0300 Subject: [PATCH 11/29] Update demo --- packages/clay-table/demos/index.html | 126 +++++++++++++++------------ 1 file changed, 68 insertions(+), 58 deletions(-) diff --git a/packages/clay-table/demos/index.html b/packages/clay-table/demos/index.html index 3b9daf091..c30976298 100644 --- a/packages/clay-table/demos/index.html +++ b/packages/clay-table/demos/index.html @@ -70,11 +70,10 @@

new metal.ClayTable({ header: [ + {}, { - label: '' - }, - { - label: 'Title' + label: 'Title', + sort: true }, { label: 'Author' @@ -91,9 +90,7 @@

{ label: 'Modified Date' }, - { - label: '' - } + {} ], items: [ { @@ -216,134 +213,147 @@

new metal.ClayTable({ header: [ + {}, { - label: 'Title' - }, - { - label: 'Author' - }, - { - label: 'Size' + label: 'Title', + colSpan: 2 }, { label: 'Status' }, { - label: 'Creation Date' + label: 'Items' }, { - label: 'Modified Date' + label: 'Start Date' }, { - - } + label: 'Duration' + }, + {}, + {} ], items: [ { - group: 'Group 1' + group: 'In progress' }, { actionItems: actionItems, columns: [ { - stickerLabel: 'AA', - stickerStyle: 'primary', - text: 'Name', + text: 'Publication Ttitle', useEllipse: true }, { - text: 'Juan Anton' + label: 'In progress', + labelStyle: 'warning' }, { - text: '264KB' + text: '100.000' }, - {}, { - text: '15 Minutes Ago' + text: '2017.11.24 - 17:15' }, { - text: '15 Minutes Ago' + text: '4 Minutes' + }, + { + progressBar: { + value: 30 + } } - ] + ], + selectable: true, + stickerLabel: 'MT', + stickerStyle: 'danger', }, { actionItems: actionItems, columns: [ { - text: 'suffing-photo-ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual.jpg', + text: 'Publication Ttitle', useEllipse: true }, { - text: 'Juan Anton' + label: 'In progress', + labelStyle: 'warning' }, { - text: '264KB' + text: '10' }, { - progressBar: { - value: 40 - } + text: '2017.11.24 - 17:15' }, { - text: '15 Minutes Ago' + text: '45 hours' }, { - text: '15 Minutes Ago' + progressBar: { + value: 30 + } } - ] + ], + selectable: true, + stickerLabel: 'BB', + stickerStyle: 'danger', + }, + { + group: 'Sdheduled' }, { actionItems: actionItems, columns: [ { - text: 'suffing-photo-ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual.jpg', + text: 'Publication Ttitle', useEllipse: true }, { - text: 'Juan Anton' + label: 'Sdheduled', + labelStyle: 'info' }, { - text: '264KB' + text: '20' }, { - label: 'Rejected', - labelStyle: 'danger' + text: '2017.11.24 - 17:15' }, { - text: '15 Minutes Ago' + text: '1 hour' }, - { - text: '15 Minutes Ago' - } - ] + {} + ], + selectable: true, + stickerLabel: 'CC', + stickerStyle: 'danger', }, { - group: 'Group 2' + group: 'Completed' }, { actionItems: actionItems, columns: [ { - text: 'suffing-photo-ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual.jpg', + text: 'Publication Ttitle', useEllipse: true }, { - text: 'Juan Anton' + label: 'Successful', + labelStyle: 'success' }, { - text: '264KB' + text: '29.999' }, { - label: 'In progress', - labelStyle: 'warning' + text: '2017.11.24 - 17:15' }, { - text: '15 Minutes Ago' + text: '4 Minutes' }, - { - text: '15 Minutes Ago' - } - ] + {} + ], + selectable: true, + stickerLabel: 'AA', + stickerStyle: 'danger', } ], spritemap: spritemap From f60349d3ad556737b5fc25eb883825d0afd631d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Tue, 12 Dec 2017 21:17:33 -0300 Subject: [PATCH 12/29] SF --- packages/clay-table/src/ClayTable.js | 1 + packages/clay-table/src/ClayTable.soy | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/clay-table/src/ClayTable.js b/packages/clay-table/src/ClayTable.js index 3bede4616..aff7c2f2d 100644 --- a/packages/clay-table/src/ClayTable.js +++ b/packages/clay-table/src/ClayTable.js @@ -1,4 +1,5 @@ import './ClayTableItem'; +import 'clay-link'; import {Config} from 'metal-state'; import Component from 'metal-component'; import defineWebComponent from 'metal-web-component'; diff --git a/packages/clay-table/src/ClayTable.soy b/packages/clay-table/src/ClayTable.soy index 596c4eb55..2ea116d31 100644 --- a/packages/clay-table/src/ClayTable.soy +++ b/packages/clay-table/src/ClayTable.soy @@ -83,10 +83,12 @@ {if $item.label and not $item.sort} {$item.label} {elseif $item.sort and $item.label} + {let $icon: $item.sortDirection_ ?: 'down' /} + {call ClayLink.render} {param events: ['click': $handleSortColum_] /} {param href: '#sort' /} - {param icon: 'order-arrow-' + $item.sortDirection_ ?: 'down' /} + {param icon: 'order-arrow-{$icon}' /} {param iconAlignment: 'right' /} {param spritemap: $spritemap /} {/call} From ac75751a599f5f5b799fc6b7310e7bd64cce23c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Tue, 12 Dec 2017 21:26:47 -0300 Subject: [PATCH 13/29] Add support for images when using sticker on ClayTable --- packages/clay-table/src/ClayTable.soy | 4 ++++ packages/clay-table/src/ClayTableItem.js | 18 +++++++++++++++ packages/clay-table/src/ClayTableItem.soy | 26 +++++++++++++++++----- packages/clay-table/src/items_validator.js | 4 +++- 4 files changed, 45 insertions(+), 7 deletions(-) diff --git a/packages/clay-table/src/ClayTable.soy b/packages/clay-table/src/ClayTable.soy index 2ea116d31..6c7951b33 100644 --- a/packages/clay-table/src/ClayTable.soy +++ b/packages/clay-table/src/ClayTable.soy @@ -44,6 +44,8 @@ inputValue: string, selectable: bool, selected: bool, + stickerImageAlt: string, + stickerImageSrc: string, stickerLabel: string, stickerStyle: string, stickerShape: string @@ -111,6 +113,8 @@ {param selectable: $item.selectable /} {param selected: $item.selected /} {param spritemap: $spritemap /} + {param stickerImageAlt: $item.stickerImageAlt /} + {param stickerImageSrc: $item.stickerImageSrc /} {param stickerLabel: $item.stickerLabel /} {param stickerShape: $item.stickerShape /} {param stickerStyle: $item.stickerStyle /} diff --git a/packages/clay-table/src/ClayTableItem.js b/packages/clay-table/src/ClayTableItem.js index dee23c8e0..506264fb3 100644 --- a/packages/clay-table/src/ClayTableItem.js +++ b/packages/clay-table/src/ClayTableItem.js @@ -114,6 +114,24 @@ ClayTableItem.STATE = { */ spritemap: Config.string().required(), + /** + * Alternate text of the image sticker. + * @instance + * @memberof ClayTableItem + * @type {?string|undefined} + * @default undefined + */ + stickerImageAlt: Config.string(), + + /** + * Source of the image to be rendered inside the sticker. + * @instance + * @memberof ClayTableItem + * @type {?string|undefined} + * @default undefined + */ + stickerImageSrc: Config.string(), + /** * Sets the text to be rendered inside sticker. * @instance diff --git a/packages/clay-table/src/ClayTableItem.soy b/packages/clay-table/src/ClayTableItem.soy index 0a8f6f990..b44e40b72 100644 --- a/packages/clay-table/src/ClayTableItem.soy +++ b/packages/clay-table/src/ClayTableItem.soy @@ -34,6 +34,8 @@ {@param? inputValue: string} {@param? selectable: bool} {@param? selected: bool} + {@param? stickerImageAlt: string} + {@param? stickerImageSrc: string} {@param? stickerLabel: string} {@param? stickerShape: string} {@param? stickerStyle: string} @@ -64,6 +66,8 @@ {param selectable: $selectable /} {param selected: $selected /} {param spritemap: $spritemap /} + {param stickerImageAlt: $stickerImageAlt /} + {param stickerImageSrc: $stickerImageSrc /} {param stickerLabel: $stickerLabel /} {param stickerShape: $stickerShape /} {param stickerStyle: $stickerStyle /} @@ -105,6 +109,8 @@ {@param? inputValue: string} {@param? selectable: bool} {@param? selected: bool} + {@param? stickerImageAlt: string} + {@param? stickerImageSrc: string} {@param? stickerLabel: string} {@param? stickerShape: string} {@param? stickerStyle: string} @@ -121,13 +127,21 @@ {/if} - {if $stickerLabel} + {if $stickerLabel or $stickerImageSrc} - {call ClaySticker.render} - {param label: $stickerLabel /} - {param shape: $stickerShape ?: 'circle' /} - {param style: $stickerStyle /} - {/call} + {if $stickerImageSrc} + {call ClaySticker.render} + {param imageAlt: $stickerImageAlt /} + {param imageSrc: $stickerImageSrc /} + {param shape: $stickerShape ?: 'circle' /} + {/call} + {else} + {call ClaySticker.render} + {param label: $stickerLabel /} + {param shape: $stickerShape ?: 'circle' /} + {param style: $stickerStyle /} + {/call} + {/if} {/if} diff --git a/packages/clay-table/src/items_validator.js b/packages/clay-table/src/items_validator.js index 0f2f41dd3..ab4106646 100644 --- a/packages/clay-table/src/items_validator.js +++ b/packages/clay-table/src/items_validator.js @@ -39,7 +39,10 @@ let items = { inputValue: Config.string(), selectable: Config.bool().value(false), selected: Config.bool().value(false), + stickerImageAlt: Config.string(), + stickerImageSrc: Config.string(), stickerLabel: Config.string(), + stickerShape: Config.string().value('circle'), stickerStyle: Config.oneOf([ 'danger', 'dark', @@ -50,7 +53,6 @@ let items = { 'success', 'warning', ]).value('primary'), - stickerShape: Config.string().value('circle'), }; const actionsItemsValidator = Config.arrayOf(Config.shapeOf(actionItems)); From fab40d33d2c235b75d658cf3d653d73267be8cb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Wed, 13 Dec 2017 12:03:48 -0300 Subject: [PATCH 14/29] Rename ClayTableItem url params to href --- packages/clay-table/demos/index.html | 3 +- packages/clay-table/src/ClayTable.soy | 6 +- packages/clay-table/src/ClayTableItem.soy | 49 ++++++++------- .../clay-table/src/__tests__/ClayTableItem.js | 22 +++---- .../__tests__/__snapshots__/ClayTable.js.snap | 32 +++++----- .../__snapshots__/ClayTableItem.js.snap | 61 ++++++++++--------- packages/clay-table/src/items_validator.js | 4 +- 7 files changed, 90 insertions(+), 87 deletions(-) diff --git a/packages/clay-table/demos/index.html b/packages/clay-table/demos/index.html index c30976298..804dd9266 100644 --- a/packages/clay-table/demos/index.html +++ b/packages/clay-table/demos/index.html @@ -106,7 +106,8 @@

useEllipse: true }, { - text: 'Juan Anton' + text: 'Juan Anton', + href: '#1' }, { text: '264KB' diff --git a/packages/clay-table/src/ClayTable.soy b/packages/clay-table/src/ClayTable.soy index 6c7951b33..e7f587937 100644 --- a/packages/clay-table/src/ClayTable.soy +++ b/packages/clay-table/src/ClayTable.soy @@ -18,14 +18,15 @@ {@param? items: list<[ actionItems: list<[ disabled: bool, + href: string, icon: string, label: string, quickAction: bool, - separator: bool, - url: string + separator: bool ]>, columns: list<[ elementClasses: string, + href: string, label: string, labelStyle: string, progressBar: [ @@ -35,7 +36,6 @@ value: int ], text: string, - url: string, useEllipse: bool ]>, disabled: bool, diff --git a/packages/clay-table/src/ClayTableItem.soy b/packages/clay-table/src/ClayTableItem.soy index b44e40b72..716ae8bb9 100644 --- a/packages/clay-table/src/ClayTableItem.soy +++ b/packages/clay-table/src/ClayTableItem.soy @@ -7,14 +7,15 @@ {@param spritemap: string} {@param? actionItems: list<[ disabled: bool, + href: string, icon: string, label: string, quickAction: bool, - separator: bool, - url: string + separator: bool ]>} {@param? columns: list<[ elementClasses: string, + href: string, label: string, labelStyle: string, progressBar: [ @@ -24,7 +25,6 @@ value: int ], text: string, - url: string, useEllipse: bool ]>} {@param? contentRenderer: string} @@ -83,14 +83,15 @@ {@param spritemap: string} {@param? actionItems: list<[ disabled: bool, + href: string, icon: string, label: string, quickAction: bool, - separator: bool, - url: string + separator: bool ]>} {@param? columns: list<[ elementClasses: string, + href: string, label: string, labelStyle: string, progressBar: [ @@ -100,7 +101,6 @@ value: int ], text: string, - url: string, useEllipse: bool ]>} {@param? contentRenderer: string} @@ -151,12 +151,12 @@ {delcall ClayTableItem.Column variant="$contentRenderer"} {param elementClasses: $column.elementClasses /} + {param href: $column.href /} {param isColumnFirst: $isColumnFirst /} {param label: $column.label /} {param labelStyle: $column.labelStyle /} {param progressBar: $column.progressBar /} {param text: $column.text /} - {param url: $column.url /} {param useEllipse: $column.useEllipse /} {/delcall} {/foreach} @@ -182,6 +182,7 @@ */ {deltemplate ClayTableItem.Column} {@param? elementClasses: string} + {@param? href: string} {@param? isColumnFirst: bool} {@param? label: string} {@param? labelStyle: string} @@ -192,13 +193,12 @@ value: int ]} {@param? text: string} - {@param? url: string} {@param? useEllipse: bool} {let $textContent kind="html"} {call .text} + {param href: $href /} {param text: $text /} - {param url: $url /} {/call} {/let} @@ -224,19 +224,17 @@ {/if} {/let} - {let $attributes kind="attributes"} - class=" - {if $elementClasses} - {$elementClasses} - {/if} + {let $classes kind="text"} + {if $elementClasses} + {$elementClasses} + {/if} - {if $useEllipse} - {sp}table-cell-content - {/if} - " + {if $useEllipse} + {sp}table-cell-content + {/if} {/let} - + {$content} {/deltemplate} @@ -245,14 +243,15 @@ * This renders a text of the column. */ {template .text} + {@param? href: string} {@param? text: string} - {@param? url: string} - {if $text and not $url} + {if $text and not $href} {$text} - {elseif $text and $url} + {elseif $text and $href} + {log}{$href}{/log} {call ClayLink.render} - {param href: $url /} + {param href: $href /} {param label: $text /} {/call} {/if} @@ -268,7 +267,7 @@ label: string, quickAction: bool, separator: bool, - url: string + href: string ]>} {@param spritemap: string} @@ -277,7 +276,7 @@ {if $item.quickAction and $item.icon} {call ClayLink.render} {param elementClasses: 'quick-action-item' /} - {param href: $item.url /} + {param href: $item.href /} {param label kind="html"} {call ClayIcon.render} {param spritemap: $spritemap /} diff --git a/packages/clay-table/src/__tests__/ClayTableItem.js b/packages/clay-table/src/__tests__/ClayTableItem.js index 871e7e735..95ccd15d8 100644 --- a/packages/clay-table/src/__tests__/ClayTableItem.js +++ b/packages/clay-table/src/__tests__/ClayTableItem.js @@ -110,16 +110,16 @@ describe('ClayTableItem', function() { actionItems: [ { label: 'Option 1', - url: '#1', + href: '#1', }, { label: 'Option 2', separator: true, - url: '#2', + href: '#2', }, { label: 'Option 3', - url: '#3', + href: '#3', }, ], spritemap: spritemap, @@ -135,20 +135,20 @@ describe('ClayTableItem', function() { icon: 'trash', label: 'Option 1', quickAction: true, - url: '#1', + href: '#1', }, { icon: 'download', label: 'Option 2', quickAction: true, separator: true, - url: '#2', + href: '#2', }, { icon: 'info-circle-open', label: 'Option 3', quickAction: true, - url: '#3', + href: '#3', }, ], spritemap: spritemap, @@ -166,7 +166,7 @@ describe('ClayTableItem', function() { }, { text: 'Bar', - url: '#1', + href: '#1', }, { text: 'Foo', @@ -191,7 +191,7 @@ describe('ClayTableItem', function() { }, { text: 'Bar', - url: '#1', + href: '#1', }, { text: 'Foo', @@ -217,7 +217,7 @@ describe('ClayTableItem', function() { }, { text: 'Bar', - url: '#1', + href: '#1', }, { text: 'Foo', @@ -243,7 +243,7 @@ describe('ClayTableItem', function() { }, { text: 'Bar', - url: '#1', + href: '#1', }, { text: 'Foo', @@ -269,7 +269,7 @@ describe('ClayTableItem', function() { }, { text: 'Bar', - url: '#1', + href: '#1', }, { text: 'Foo', diff --git a/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap b/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap index ab4f5970a..4b7cd1011 100644 --- a/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap +++ b/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap @@ -17,10 +17,10 @@ exports[`ClayTable should render a ClayTable with multiples columns in header 1` - - - - + + + +
TitleAuthorSizeStatusTitleAuthorSizeStatus
@@ -32,28 +32,28 @@ exports[`ClayTable should render a ClayTable with multiples items 1`] = ` - - - - + + - - + + - - - - + + - - + +
+ suffing-photo.png Juan Anton264KB + Juan Anton264KB Approved 15 Minutes Ago15 Minutes Ago15 Minutes Ago15 Minutes Ago
+ suffing-photo.png Juan Anton264KB + Juan Anton264KB Approved 15 Minutes Ago15 Minutes Ago15 Minutes Ago15 Minutes Ago
diff --git a/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap b/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap index 03c3244f5..a3b90d505 100644 --- a/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap +++ b/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap @@ -11,14 +11,14 @@ exports[`ClayTableItem should render the ClayTableItem disabled 1`] = ` - + Foo - + Bar - Foo - Bar + Foo + Bar `; @@ -33,14 +33,14 @@ exports[`ClayTableItem should render the ClayTableItem selectable 1`] = ` - + Foo - + Bar - Foo - Bar + Foo + Bar `; @@ -55,20 +55,20 @@ exports[`ClayTableItem should render the ClayTableItem selected 1`] = ` - + Foo - + Bar - Foo - Bar + Foo + Bar `; exports[`ClayTableItem should render the ClayTableItem with ClayProgressBar in the column 1`] = ` - +
@@ -86,6 +86,7 @@ exports[`ClayTableItem should render the ClayTableItem with actionItems 1`] = `
@@ -114,16 +115,19 @@ exports[`ClayTableItem should render the ClayTableItem with actionItems and quic
@@ -131,6 +135,7 @@ exports[`ClayTableItem should render the ClayTableItem with actionItems and quic
@@ -155,14 +160,12 @@ exports[`ClayTableItem should render the ClayTableItem with actionItems and quic exports[`ClayTableItem should render the ClayTableItem with columns 1`] = ` - + Foo - - Bar - - Foo - Bar + Bar + Foo + Bar `; @@ -187,14 +190,14 @@ exports[`ClayTableItem should render the ClayTableItem with input name 1`] = `
- + Foo - + Bar - Foo - Bar + Foo + Bar `; @@ -209,20 +212,20 @@ exports[`ClayTableItem should render the ClayTableItem with input value 1`] = `
- + Foo - + Bar - Foo - Bar + Foo + Bar `; exports[`ClayTableItem should render the ClayTableItem with label in the column 1`] = ` - + Approved @@ -233,7 +236,7 @@ exports[`ClayTableItem should render the ClayTableItem with user sticker in the AA - + Name diff --git a/packages/clay-table/src/items_validator.js b/packages/clay-table/src/items_validator.js index ab4106646..ce510a295 100644 --- a/packages/clay-table/src/items_validator.js +++ b/packages/clay-table/src/items_validator.js @@ -6,11 +6,12 @@ let actionItems = { label: Config.string(), quickAction: Config.bool().value(false), separator: Config.bool().value(false), - url: Config.string().required(), + href: Config.string().required(), }; let columns = { elementClasses: Config.string(), + href: Config.string(), label: Config.string(), labelStyle: Config.oneOf([ 'danger', @@ -26,7 +27,6 @@ let columns = { value: Config.number(), }), text: Config.string(), - url: Config.string(), useEllipse: Config.bool().value(false), }; From 525b9b14e62bf6631c63845161bf08ad162300f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Wed, 13 Dec 2017 13:26:42 -0300 Subject: [PATCH 15/29] SF --- packages/clay-table/src/ClayTable.js | 2 +- packages/clay-table/src/ClayTable.soy | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/clay-table/src/ClayTable.js b/packages/clay-table/src/ClayTable.js index aff7c2f2d..a975f4a67 100644 --- a/packages/clay-table/src/ClayTable.js +++ b/packages/clay-table/src/ClayTable.js @@ -15,7 +15,7 @@ class ClayTable extends Component { /** * Handle button sort in header. */ - handleSortColum_(event) { + handleButtonSortColumn_(event) { this.emit('buttonSortClicked', event); } } diff --git a/packages/clay-table/src/ClayTable.soy b/packages/clay-table/src/ClayTable.soy index e7f587937..b5a1c4757 100644 --- a/packages/clay-table/src/ClayTable.soy +++ b/packages/clay-table/src/ClayTable.soy @@ -13,7 +13,7 @@ sort: bool, sortDirection_: string ]>} - {@param? handleSortColum_: any} + {@param? handleButtonSortColumn_: any} {@param? id: string} {@param? items: list<[ actionItems: list<[ @@ -88,10 +88,11 @@ {let $icon: $item.sortDirection_ ?: 'down' /} {call ClayLink.render} - {param events: ['click': $handleSortColum_] /} + {param events: ['click': $handleButtonSortColumn_] /} {param href: '#sort' /} - {param icon: 'order-arrow-{$icon}' /} + {param icon: 'order-arrow-' + $icon /} {param iconAlignment: 'right' /} + {param label: $item.label /} {param spritemap: $spritemap /} {/call} {/if} From 9e610f3b63c1a9950b585b645e3099ddfec1dc72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Wed, 13 Dec 2017 16:21:33 -0300 Subject: [PATCH 16/29] Add test using sticker with image in ClayTableItem --- .../clay-table/src/__tests__/ClayTableItem.js | 16 ++++++++++++++++ .../__snapshots__/ClayTableItem.js.snap | 13 +++++++++++++ 2 files changed, 29 insertions(+) diff --git a/packages/clay-table/src/__tests__/ClayTableItem.js b/packages/clay-table/src/__tests__/ClayTableItem.js index 95ccd15d8..6ac825445 100644 --- a/packages/clay-table/src/__tests__/ClayTableItem.js +++ b/packages/clay-table/src/__tests__/ClayTableItem.js @@ -76,6 +76,22 @@ describe('ClayTableItem', function() { expect(component).toMatchSnapshot(); }); + it('should render ClayTableItem with sticker with image in column', () => { + component = new ClayTableItem({ + columns: [ + { + text: 'Name', + useEllipse: true, + }, + ], + spritemap: spritemap, + stickerImageSrc: 'image.png', + stickerImageAlt: 'Image', + }); + + expect(component).toMatchSnapshot(); + }); + it('should render the ClayTableItem with ClayProgressBar in the column', () => { component = new ClayTableItem({ columns: [ diff --git a/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap b/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap index a3b90d505..dd5859d83 100644 --- a/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap +++ b/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap @@ -1,5 +1,18 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`ClayTableItem should render ClayTableItem with sticker with image in column 1`] = ` + + + + Image + + + + Name + + +`; + exports[`ClayTableItem should render the ClayTableItem disabled 1`] = ` From 4c5dc223f35b6b6949d08c5cb8ddac62a61a62d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Wed, 13 Dec 2017 16:40:46 -0300 Subject: [PATCH 17/29] Add elementClasses the fixed columns of Sticker, Dropdown and Checkbox on ClayTable --- packages/clay-table/src/ClayTable.soy | 6 +++++ packages/clay-table/src/ClayTableItem.js | 27 ++++++++++++++++++++++ packages/clay-table/src/ClayTableItem.soy | 16 +++++++++---- packages/clay-table/src/items_validator.js | 3 +++ 4 files changed, 48 insertions(+), 4 deletions(-) diff --git a/packages/clay-table/src/ClayTable.soy b/packages/clay-table/src/ClayTable.soy index b5a1c4757..5d65a2fd1 100644 --- a/packages/clay-table/src/ClayTable.soy +++ b/packages/clay-table/src/ClayTable.soy @@ -24,6 +24,7 @@ quickAction: bool, separator: bool ]>, + actionColumnElementClasses: string, columns: list<[ elementClasses: string, href: string, @@ -43,7 +44,9 @@ inputName: string, inputValue: string, selectable: bool, + selectableElementClasses: string, selected: bool, + stickerElementClasses: string, stickerImageAlt: string, stickerImageSrc: string, stickerLabel: string, @@ -106,14 +109,17 @@ {foreach $item in $items} {call ClayTableItem.render} {param actionItems: $item.actionItems /} + {param actionColumnElementClasses: $item.actionColumnElementClasses /} {param columns: $item.columns /} {param disabled: $item.disabled /} {param group: $item.group /} {param inputName: $item.inputName /} {param inputValue: $item.inputValue /} {param selectable: $item.selectable /} + {param selectableElementClasses: $item.selectableElementClasses /} {param selected: $item.selected /} {param spritemap: $spritemap /} + {param stickerElementClasses: $item.stickerElementClasses /} {param stickerImageAlt: $item.stickerImageAlt /} {param stickerImageSrc: $item.stickerImageSrc /} {param stickerLabel: $item.stickerLabel /} diff --git a/packages/clay-table/src/ClayTableItem.js b/packages/clay-table/src/ClayTableItem.js index 506264fb3..7c6684c00 100644 --- a/packages/clay-table/src/ClayTableItem.js +++ b/packages/clay-table/src/ClayTableItem.js @@ -33,6 +33,15 @@ ClayTableItem.STATE = { */ actionItems: actionsItemsValidator, + /** + * CSS classes to be applied to the td of the dropdown. + * @instance + * @memberof ClayTableItem + * @type {?string|undefined} + * @default undefined + */ + actionColumnElementClasses: Config.string(), + /** * List of the columns in the row. * @instance @@ -96,6 +105,15 @@ ClayTableItem.STATE = { */ selectable: Config.bool().value(false), + /** + * CSS classes to be applied to the td of the selectable. + * @instance + * @memberof ClayTableItem + * @type {?string|undefined} + * @default undefined + */ + selectableElementClasses: Config.string(), + /** * Flag to indicate if the item is selected or not. * @instance @@ -114,6 +132,15 @@ ClayTableItem.STATE = { */ spritemap: Config.string().required(), + /** + * CSS classes to be applied to the td of the sticker. + * @instance + * @memberof ClayTableItem + * @type {?string|undefined} + * @default undefined + */ + stickerElementClasses: Config.string(), + /** * Alternate text of the image sticker. * @instance diff --git a/packages/clay-table/src/ClayTableItem.soy b/packages/clay-table/src/ClayTableItem.soy index 716ae8bb9..29ac516c9 100644 --- a/packages/clay-table/src/ClayTableItem.soy +++ b/packages/clay-table/src/ClayTableItem.soy @@ -13,6 +13,7 @@ quickAction: bool, separator: bool ]>} + {@param? actionColumnElementClasses: string} {@param? columns: list<[ elementClasses: string, href: string, @@ -33,7 +34,9 @@ {@param? inputName: string} {@param? inputValue: string} {@param? selectable: bool} + {@param? selectableElementClasses: string} {@param? selected: bool} + {@param? stickerElementClasses: string} {@param? stickerImageAlt: string} {@param? stickerImageSrc: string} {@param? stickerLabel: string} @@ -58,14 +61,17 @@ {else} {call .content} {param actionItems: $actionItems /} + {param actionColumnElementClasses: $actionColumnElementClasses /} {param columns: $columns /} {param contentRenderer: $contentRenderer /} {param disabled: $disabled /} {param inputName: $inputName /} {param inputValue: $inputValue /} {param selectable: $selectable /} + {param selectableElementClasses: $selectableElementClasses /} {param selected: $selected /} {param spritemap: $spritemap /} + {param stickerElementClasses: $stickerElementClasses /} {param stickerImageAlt: $stickerImageAlt /} {param stickerImageSrc: $stickerImageSrc /} {param stickerLabel: $stickerLabel /} @@ -89,6 +95,7 @@ quickAction: bool, separator: bool ]>} + {@param? actionColumnElementClasses: string} {@param? columns: list<[ elementClasses: string, href: string, @@ -108,7 +115,9 @@ {@param? inputName: string} {@param? inputValue: string} {@param? selectable: bool} + {@param? selectableElementClasses: string} {@param? selected: bool} + {@param? stickerElementClasses: string} {@param? stickerImageAlt: string} {@param? stickerImageSrc: string} {@param? stickerLabel: string} @@ -116,7 +125,7 @@ {@param? stickerStyle: string} {if $selectable} - + {call ClayCheckbox.render} {param checked: $selected /} {param disabled: $disabled /} @@ -128,7 +137,7 @@ {/if} {if $stickerLabel or $stickerImageSrc} - + {if $stickerImageSrc} {call ClaySticker.render} {param imageAlt: $stickerImageAlt /} @@ -163,7 +172,7 @@ {/if} {if $actionItems} - + {call .quickMenu} {param actionItems: $actionItems /} {param spritemap: $spritemap /} @@ -249,7 +258,6 @@ {if $text and not $href} {$text} {elseif $text and $href} - {log}{$href}{/log} {call ClayLink.render} {param href: $href /} {param label: $text /} diff --git a/packages/clay-table/src/items_validator.js b/packages/clay-table/src/items_validator.js index ce510a295..2e94df4bf 100644 --- a/packages/clay-table/src/items_validator.js +++ b/packages/clay-table/src/items_validator.js @@ -32,13 +32,16 @@ let columns = { let items = { actionItems: Config.arrayOf(Config.shapeOf(actionItems)), + actionColumnElementClasses: Config.string(), columns: Config.arrayOf(Config.shapeOf(columns)), disabled: Config.bool().value(false), group: Config.string(), inputName: Config.string(), inputValue: Config.string(), selectable: Config.bool().value(false), + selectableElementClasses: Config.string(), selected: Config.bool().value(false), + stickerElementClasses: Config.string(), stickerImageAlt: Config.string(), stickerImageSrc: Config.string(), stickerLabel: Config.string(), From d06034521070fda20a0442026751270ed7362441 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Wed, 13 Dec 2017 22:40:47 -0300 Subject: [PATCH 18/29] Improve demo of ClayTable --- packages/clay-table/demos/image.jpg | Bin 0 -> 31655 bytes packages/clay-table/demos/index.html | 625 +++++++++++++++++++++------ 2 files changed, 499 insertions(+), 126 deletions(-) create mode 100644 packages/clay-table/demos/image.jpg diff --git a/packages/clay-table/demos/image.jpg b/packages/clay-table/demos/image.jpg new file mode 100644 index 0000000000000000000000000000000000000000..fbaaa2468c22f5474bb6c7cbb298526de9b5c773 GIT binary patch literal 31655 zcmbrlbyOQs_cj`!NNIu6qD6}oNh!sOLxJK}+zGBlgF~Ru0xfQV;>9%tOL2EEmf)_z z-Qn`S-|v3kTKBKJ?%iiHv)7t)_MB(t%*ozoKl3p4umpIaAR{jWz`y_i?MD!+0zJjMo6{|LOpM0tVIp*3~gs|ECTn01#>mc=A7W z^dFD^kw?q_Y5hM(tUnn4$KoH%|GPGZ!XK>vt)Kp<*~1<{;ERoun-kc^$(f$#{Re=6 zq`dNz|5$&N|LV;DRbNcdL`+8mDxYkBd-{9#QqupS6+n!Kaf+dUg~0&8B*wrZ#(3xi z&^`778{@z7-)4_H3{0#i*f_X&Pw}5URzSP}U}9ilVLrja#{SP`Fd&cT0Z)jrU%ugz zz@-_2Y7FITPUcQg~0)j$PpQUAF z<>VDKG_|yKboKPjEiA39ZEWqpZtfnQUfw?6e*}kw{`?gd7oPx4O!}RilAV*AmtRm= zR9snAjrdzrTUX!S(b?7A)7#fSHa;hg+#I}ndVGB&HC z?I|OV`XQ;A>nJ`M6Ynzf(SM-*7uo+iU_t+%ko|99{|DDBKnj3~iHY?nk3Gl!kKp1w z3NAh_-ebWh!heSUxDgQ&6B0cBC|(g0zoMX~Ag7>aprc~|vH=AI6dxXqVEq3!GXFR% zNgrka&#^Eb2NM=CKpb$Z(xoKOC4;Rb3^qPhzB0}&iq~N*wh<_)c)n6^rW|g=K8F7b zhrK^+tH4~aXE2#8U#*KcPo)@GpFAMYfEn#G`ooz(OX~tgL7wNSF?ZrZ?7?>mKl^ljNV=R{`YeW7|^@)bebT1`M+dhFUnn@{7ehn3Ssc%ja#uMz=0@A;r0>0a8WubS6 zj~-Hl8vk%C-LvwSNMF__dc|f`z3`paz}2}_NXHsG8JA*YSwq)mH3W-vUMlw>n*Q~E zgtywUz+9V(j>162g8vAuuoLd(fJ%yEK>!s`#mGh&MAX!DW>FF%e0nqs_nWcA=gNcTpjpb8%d+ zU+hz9&8}nF=hZEp)p0ka_a}cZOAc?8kKiGE4rKSFiNe1P9KF~WB65m$`{%xchWLNo zauja)K=)G%^&9y;;(l94hT!)$1z=6kuCx>(B_*&TP-{ecJBM1k?l%FXGZKsvg)2ZL zI(CHO8Rdurn(K^o<9T*HArxrDQI`Bo zU`MAbw6Ls9YTeEp=F4|4OO3P^_b484XzRU4%=B5wc$LonbkShN&){mXZ&`7voFzO< zXW|>5lm32*6m2JR1X4=VB3{Q`%^nC&n^JZI-`j+WLmgFc?RrwvP)wsc|9n`?*)@0K zFOe3p-xm-Yw4DzCg~521KL^GTKb}#<#TcS7mRG-} zp6t6xDt*X4@%?*WF*l}tP|3g3ZCUlw+O>@;OVgAFCI~lsc)tB`@$HCA+;N3kx{4hU z7esYaHHnl=e42EKQ^O*$p6=n_t?Il6<8v*CNqWA0Nm*MLqAOCLS7VhE$cX0xWxs{v zPxx|Z2=u>r6(6l)!V1RfZIg$X!r3C8Yi<#6i)d~E|E3Ds^_ceKx(wM$5&{mi)O@rq zzwH=DvVe!-G?cLXBMu*q+PiTGaM5vlBSFRb3nflbdr2FN zKvtX|rXG3*m!zZY@NJ`62z^0s)*NzJooT0=!?O7W6Z@vyPWazzx! z``dBwgybi03iF72+?1QSdhUWyu)=xd-a^lMnmns!@zO?4S#%9}`vHJ|OFpsh!06rB z;N1G6(xPSsS7B?vnbO$ylXoGUSb#9C3~~oN7$Ndfe-g&e^_0n(B90pe0(842xZ`bk;);DDBm=TH^Kg=XNyd8CQSFd;6zgN0#X*$e$vSgid zK{Q>W2O;W&+rMD|P7ufV;2LW_K3({VGVhd;^79hJsu`Z>(L$Xt)#V<7Nz za}*wPMIQ5eDyrBggm&o|sMs#lZh!fA?B=Zw&I^1t4vh`FWW-i@NW~7>+gSMWU4jGPDe{8*S0p%|u zblR5#I6~_1F-Hq)GO^;G_Q#)YgP5e2KSt0cpw4I|I^Dp}TZll?fq8cK<+#LS6T>ZNaz(x4LkYR;Qz~uT$EQY2+GtIx&-8wk}!ic)f z8nW7hvATgR8Ll0pvt0_@ur>HHg(J|C<7vl)-y$-Uz@2tnm!IOQ7G|XFni~2CF4}_B z=9bwtD=$(1Fj=+xfx-^zPhw-}V=0R;A7Y3&=`uCku?q-4DOHR#RdHQ}dAqwLpfu3V zbw&cS?bHD&F7Z%Y2*fy@pEG;fiWL+8!IQ zK&%VdmPNy?P&J zGD>skaG~Xa5z)iwt^9#HoLtBEpL89QMrL#Yl4vXyerJ&qaH+ znCq0X#06!@q?D7DozCtq>P4zYK{#pYGE=|Z+wFFcWh(~tVH~TPY)1H#(<0_&e9}m_ z8+go>v4*#ep*AgbA|CLM&OnJERE?4g$?E0od$jgO%Amxq< zgYWq}y4Xu6l798>VOo!h>(N7D?RfP=?e8K(^-fi#uJIGq0c<1d#-*BJN15NWgT~vn z%>|$DyKE2nDk?QYZ>uu9xdxB=pUt0-*CaO3O*V3|N3#wX$$CSKGkNx}JjF2XO5o#) zle^4HSbTLHQR^x^pjUKMR;Ed!U}ST{-Cx)PVBAdyHz`C#?1#=KugCECnZO9?9ci1U zxkx+~ONq1HePqs6NmTj1_q|POrG_%|CdtSQe7dCzOKsEy`=nmn@V4LCe!Ktn0dN<6 zMxv`epPD8gc)8Jh2S6>&xqR34TYN=Qnz{kvxyJo=q~2-qn}yA&TLix540`GI06=Vc zs*%o*wj9K#TrPh3r^fI1d!>2z2tYS|;l0T!?Uz~73UCA>m*y;%Wpc^FGadjwBF((5 z8YS9kGs?#X`_>~q-DxB>1I7+TGuSLq-f(-=DwYeJX;Q9l7pk*1`sp+1b2ItS%Z=SDDGII3!@!-Y%Jc@wWq_s~+#@{HRrls9vAI5GK z#1*`#HMmr1>fmZTqc&b$M#1%3?m<4$2QR3)8kU?A+?ZmLDpzJTl+}- z0Dvk{`ykEgTJwma&a%r0e^tjtC6_q&BSvzL1xw21PYCVHA|Yxc`k@UKb6dM2%cpSd zs-8rzJ!9qUw0^{n2Nu_L%FWjlopAAwD+1Mzug-7EuSf=B8=`ak(FC71(O}!3*IP=L+}=ah1PS!!Ds_ZYrMa{_FsB3SJ+YUXX_XO@9@Q?~iVpyca8|oqNZh8UDn|>{4+blGax~MN zi^92~`V&yA>^HQc`xnbt9ADU1*)vXbfzv55BUNTI`0|Ij2e6AT$dmdEZgIr8^jCG+ zn4`3B;tW1p8GhV(@35jDo+10j?au2!j~{Doa~xqa_j(u_HQoim-||!R^vMuhWgc{m z@ZdYl>;(9ooWUDKEW|zONe^o}`Rh9u%SI$t zSFuoiA5p>^sST}_rf`)9fKKb4v2b=kss4GS@EvFw^k>brQFWj;F{#mYrbheXtjzT# zQJ&j%?Nvsd?#QZfX=d{XZQR|A=+1J&cXrX8{Y6aTdcvlXC8Cf@Q`8Q~(~CCXjJDIC z0^ZcxH-JTYH-4DGA6hk-06TBdIAdJqKo4b0J7s3P^m+hT*5NdLl>0=Tawz^o2f%1@ zJQ_il=gaXAIuW!Kc?F2tf_z#|7sDh(x;A9Lt8% zV7p&bgrU7l_adl1vJ0lz5lVP{izA8Lo}ZX_Bui}7{lI&!E7T^UX_x{GYCIff%zW1t z;6Yt7Cd7Co@&Lf4*bodd5Q4Sn-HaSrZ*%U7W^)|;bT`=8wzSDoz0u(6y-jRU?|{32 zQs~N=$^w>IzxsvtszVO#Ps;(msO5WR?Szy5?IuP%)~ojh_XWGnl&0pgjCqfa*JMIw zfOp;{km8;md~Q}U8b#o@xw5zd&vHlIO@UPGH;E_|Pej4ajqXwDjtb8M2-rAlMenKSDV%Yl`DhPRXBkt?5b(izGPOkbeE}bjtGyUFFtE2vKfUgH zQr-aAQ=o8uL-zr-d1Ui(R7bEnbRmE%|v+F z+?^Gz@IY3zR0s?*4_+5e!F!7LN46Av8D1THDeqF4qlG?YsLdb#ofVQ(5U)lH%upIN zw7s?CIV<8(OKDdfto}Ko|8oKs7E<|Dn_?n4E0QkQVvRTYVd7R|g!gugShdS7-el66NEnnt#JgDv**Hx3*)fJ!6h+YPqxvxa~OCdbFVrYDO##{Beb$Y=7k779yVNoZhohQP4;EqE<8BNKOyG$+PcHeE{^ST`z``3Rdd##|1P#&J0xCeA%BZ ze07HWc^qJG;CYBfZ@=r;SK&QQ(I2c+MuHIuN|%!}3F+5#d|pu|lyy5p-o}6Kz}rTs zUvICbJU0*FJdLTsl>yx??ycjGqmz9DT30e6g|niTfp{jLP>kZX7SH2xnUV3;DPXQx zM|*EZP+Td=?|}#}Z~eyT)a~~k0HoIaF1z+C;&jm|#=a?6&2IyC$7FXisQqj+D4qSm zLmKAV`&{*f74UBKfOf#=as4+DQ-yj>+ub>KE2$IPKgSl%$PRpbpKHp_)a4GTzsL}p z_&nZQ*jsAAJ}Bb|r7ZB7u&Vf)1ydXE<)g7W!+My!l{wApX`(nU`ru-~xVZirTlK|8 z7G^<&cEw9$nKY@e>hLe0*>`Qn!lzDc+t1&zA8BAHgb5UpfXAvfgjZE1UTD>#QX(}n zpq3X`evU;UY`s|p9!F`eg*=U~aePb|_;E&kDGprm5pthvMZGx2 zT+8_8Ig;l}Jo`c+i7K#7YZG_wbOhmvW1?e|n!l##|La`27f8eM@03 z9kF(ZqiPEBjZwL@^5myPGw0EL34C$hctPbv zRX7p4#+=-@FTb}3B1&66+#wfK@kA|0JpevJYH-whCI@WVq^7%I*31s#^)1>E*irO( zZEE*PBby!4qj)X*&r3ndrHT=dsWD0Y-C3WxL&@KbEedlH>mX74%_ogK+#!^X{s(k{ zWzmYwiDVHO)9S)U{h96cAFevnv#Y~KS?6^x><))%<6NVv;v3V(lK2-O1WN}|3&Mwd zH-@(UZysIZ2rlIaJh80F@0`c*LJ^(^05-#AMS+kk#MiV)cH%C3LS~=H;phY4ng(%o zQizr`ku4k+C6Y2M)eomw-Q54ne#GZInRkOGL5pvsX=Y?NsUOx-wiApe6oI_Pt<;Fnahz zt7QaWfg(Ip(qiT7bR&z!h2nM$;-m@7I-H-FTreV3$TC17V7J3Q;YCl&E$`$IjmYlW z;^bgiLQR;>;>NCjy6TOz4f$}_aw5IzLbog*g6NmqodR3nATL_H1ixC z6EjV#KMr?K;+>G#^JdyS{8%G55u7cWN$Jog+qpL!ts~kK zV<%SMg%e>d=;%w~qf=o?o+n3^t5qb4B$S1{meSOM8Ygt>mj@vVIKC9CUsyP8%M#Hc zo8WS75!QKL8NbE7GWE}4biyR=_lRpUDaK=emeBe;rNvi})u>b)(b}@NW0Uiq);9QZ zuFg2C5vU^jatZ1$$t!c~3cF9fL+_7h2#FNdbE^1th#mVm6N}AfFun+`){Hg(YO9++ zfJDb^ss$&`&Mh8VmZ}MPn^dqI&_cJHxi5pRl>=+4rkI@hU%1qWUZXNqi)Ocu_RSi4 zuOtMW9D%KVS}PLo;)DtIJC|Bm9sn@o3`Tz4cff+DGpZi-0c~P>7F>fB|4OuzcQXc-{x53-whe&spGl_fCy^PDkj1z zr9s(dACj-34GvC`&)@&KV67GrdsZCHUbA3G_eDHUa**OMKq!20X!D08=o#hKtYH8bf3LSU=ybntxUtEGDZm74! z5d7LvT4vBTHBu^OzJcxmb^Ar%izFzY^j~yQ7^S+5U_N+A`DNO_Ae6n7*(5j$sLv!~ zRiw{JT1Da>ECV4VgHFh+36LB@g;;3Vma)Ntw1YOgpG#))F!SWlmOttMgz_Z?oZk2_ zIuDudP^XQ#c06J53GtLpoy}AfLBF$XKT!+#QYU=-sMP*-3HS}A(-%U_!qd0Sp`)i$ z=F&mNA_!b2i+xf1(+pbG0t=qB2d#*w!zu z5a8<3)U+nFY!AG}eM@cIlQMgcS6`WZC{9KpVzv#rDAsyeCt3eYvvF zQ&Zfta|X|G%OsGt`$g?ij4?$BJ@r|y-*+tMvAe|;@wqL2_PcUe z0^a;Y4Mnri_zaJlKHJLtnE3o$uH8sB6&mDPom6@Tl z8lhwbjnmnR4spDF>JwZ+**da4p-pwEeI)UQP$+6nXQpOG$skH6tL*IqKn}!pZ+Ptk zHg;qQE$W&#JTEu2*0$G-jw=}3H)rB@KQBaD&Gc=Mj;KW$OqK6}WYGE~PPa6;q?UnD6KU9QV|*A4`@7FrF6}QHWBuGM*6qj zz|_9)0b3X&4(%1}`z$-=J|2ph{JA^d%QQ6vO#F0`*w!B@O4j;VNNr+rc2PE?yVKS- zH2t-n*5NB|bN-*QizJOHKjCahyK1hF-RT`ybeom`PJs#v zZX2B#xFy9Nr$t7jIs0hJeDb+>pYRIrIN450dST5@y~mP8I$$&_;;YNn1|P2AwHr%V zWvyP>9lh43g|YwpvC6c{?1oZ{W>EouAusGJ>??b!TvZZlqX6O^yJII~NY3=hu=@Dx zLc>#2GG^?VHzCImzxP=_9gLs$G?hr|F$1NAl_!VIr=8cMFtds3rj-J;6)jUwcok() zkB7ewuNP8ey&Q7rgr*j-VAkYB=ebTMmR|1?(jJDFpGAi`D^&mLQSefFy_zuM@MV;= z(_QG3uIJhw)4@oMzfGek}-G~^NY{+h@zLP+!))l`c4O$Q|jbO(V*f&6C*D?t7 z&TrB5d?AtsDWTB1*tf9YQhn)-8c79HH^ zUq(W2#g7*6xV$>#8iH4Nti zSC^-Avu?5K?1YZ|P0_`^-vy;Lca|c0BF|Pq?8J!N+-#xq$rqCM;(4|`R)4TEJKYM$ z86N;BeY~{i-?07DW!ML#4sVrGofZQQH=t=$x&X*s@%*t6oFy6+7J^mn*e1RSQ+1(d zZ%sSO9B!ge7_|;pCzuG|bv+r#Y>HS#jg`OWa4ntYtMDB5aTYA?dx{Yl&~RyiBCs{S zrX8jw&>uz#HVilygGc;OxP_fqbQ|{noUE`_#Dz}owEB7s@3ofA9Y*Oipn@Ph$J58< z8qINTm#C+k$Xcqx*Bot0OkB5+o#_43Sqt(kp!w}Xci-gK%qX)T zUD?rWQz9;7T}_Y4-7jlJ*Bgc~b$SEEk$Qe8WubXwgiB?R<{uC&(is@2F0e1qgRIM< z$j?Q{?^TQoHt=3RJVjLqWOU8telER`quxNgoSN$mrnh8mE#ahKLM60$9M#wSo&yiy z?|t>tqsG&HDYq}QS)+eF_uf{)M-!TKMaLXIV6TBp@Xn~YN);zIi!4)gHTQcXu&zsp zSUx5Xk@wbxHp^0|a`nlJ&XagUnW{hXLrbF|`mp)N zYuZFv9rS6IWPYUWj(KQp1Y-;ljkL~NggYyg$;natb?=a0u#M}mVwKq6w7ML!`bgd% zV<`%qOsK~kik9g3crVyA z8e>tm+pVz6RffvbiT)^H)-NF!V|P9DNaMhk|32fY3cCa)6F{&;?XwDiw4z|^WI<5( zu()N1+5aUMTJ@Ml+4b$(n0yP9uW|n)p8?i1SYp7R@i~O#-QM=~9k!1sEc4t=ZKmy} zFAw^;O#DY|3~qTry94i*6!EZ%)+)U>heuix@Q;CSsH+9TfLJbwDwiB?}fhxdtPWNH{YtYp5#!=lA#qxaE1 z2yaxS21u6TfuOP%vki2nW6kzQgn!2snS#UJpT(m@9{{g!UjLp{Ayc|Fpp%`|azMku zjG8TR`(AA#E%!o*emkY{xhG%btte>j05G{slQ@kL3c5&JFV|_4bSI{8U#tX;3;7H9 z`ve+q8IIZH`Q|=q=vtAax>^f+rP1_hQim$e1HgK!Q`bzE(h)efSBkk>qj2@NqsOOc zs)EVH-y5q2;o}r4;>#P)pbVf-v!JF%p|7;QatOI?cW(ok-Taw5DW12(6eja*jraRy z;T#zsxCOh6UYJw6=x{K}lNwA0q#IhSnfRh6+f(Fjo15SI?TK<^NwSvz?(3t-SEMq> z6+DN105HAqI?y^;k0kzeHVnZwf+i=hcylb&Q%_EYQv-N1R1vNh6>@ceqlkOHe{+`^ z$QOC3R8@vr7vXM6ge^8-TH_$Vu*M>$yS4O&sf+SzE_M40b^AWUu0|&7w3EjGLjLL< z5g1wXp3i_y&>(O1FU0=6L!SI|LT4FZJN)45KE#TQkbNvXy1$$8#h-{J9loMHlcm7k z-s`Z17Ul5FvD)z2E~X$k_$zXt5zlrx@BRw1ho!KRrmmYOWsMK7F&P}$Klu+NMj2{& zS_%v~$+2XCQql$cWxQ7~?4LOm+r%ZuCWi?94qgB1e#&R+sB12+3e#MRQWdpx2Vlj< z2*PQ(J^!8MLJ_=Q97Wk(%yc&e=!_>rm}ce!@&m5VYD`7qmUU9LbC_BBkp-f<0tL)K zM(K^|7f~O)#gj`?;kUuk)Fy!$E~=H~F}>75&H?y4{*$ls71=*f;L=D#2wxGfu?ecE zjrDQxiioH%d`Qr=Ei#&K8X<>zHio%UrA7PnGUDd>kmcp4CdOH`0n?yoaIsiQ`60i* z!bI%q#}3mMvJ##H_|)*<)?NDjG4uQ~sc2oyI5MT+~26?o=$|I+#uewz3GdAOavEbf%h!&y7d-zsF%b3>(vCD6TxNQkNSnp3v zSXm-YBJi)N6TiomXk5AJgFgEQbn8wnPreqn^MpW$iHs)7;8roYDzlX(fm3((!<-IQ zdg6ZO5>X`e@mHAklL%i$0`@UVPBZdXeJAe>q6mf79%DbZi!yvw3OisdZtU0Gw0AH5 z00LSA;p$Bk8XiSzi@waBCsVg|eM8%H8NDUBHZ}SY6}c|^pE_JXzgf@t&WwYXGYP_N zV7HekUx}d2IxJiE-OV&RI`Q)(9P`tO0uw~(UjTzXw|{hU(8faL^6NEmcm)(j4ZUq= zefL^tbE4FI?8c)rCmt6lM`Ychh{_RPak1uATv$u(&4ti(Bd+c1D#={hoX4nNcT+O) zsb*BqNm*w5#ov>*=SPZbQf|XnXb02l&g`;Sgq{mGgd>!1%7s@NS3#)rZpmg>Uw4K-HPM<#M%xbNymDc`t697K zdvxFce|bqFj~A9)y;Py0pP( zIaeD$S8JxF%U-PLt6$|k-o!6qQ^&M;v^{$O5gKV7^hi&_?1dK=AfmVzWU^R$%)cMZ zy!$>jt1*Q9 z0g+Z{a*1P!C6rUyOn8t~cbLmX!kP}o``|(xyjV&pbEiZpS|9u?5eK32MvVlNtb=Mz z>u^L|yjsEgVsy9GIJvP{%c^cfn}y-22wfIzNLIC}!Xs*9*xnoWjb&uaJ>`zB277Fe zq`)~mqw|D~k7?ZKb;YTdqYi2Rc=&Vy_^tbFrulabCO?db)eVr#oQB@_7Y5%tY|l#) z6=OzYZ+eG6ongV8W!MHF!_x|*r#$lj0de=bYu~YHMdrq2f`7-Nc0-+BW?aV^vS*~q zDoou%ry~j~hbgwZ-7tY_l+-lLi7~OwLM{F=yYco!ByMknpqGy>bl(~7s6yJ-?aQaS zwx?sY1jlSHT46SZzOAmjfUWtRvExT7jQae&o4rcwSdh1N+bz{W{hOExF7=E_{ryRs z4k8SZ)~KC#jl%2rCU-%bP%qsUJSu->=wLe2h|RmUJ)rOEBQ}(Al0T*q6(6Q^BFpws zLeNml4|!i?#|Z5fd-PVnGmx6$!D&mWnZ~zveVpSG%us4|yhm#OBxj}j8gi+;Ez#R@ zY*WQN6OXxF$7q;f63MT&5|$_0@@W6;EU!x9-V(B6k*>mWT#B-mb|Jd~p1FQ;cf2{- zqG75}Y{DeJ^iDSjT!?mU^%&7Og;SAgk3D8U&gKg6nj)A`lBLd7 z<@@s2YbjHepPcBi_B*F&*W7Q1$iBRwX=$D4Fbr#x0!`#oPpGPYk>3z*_nnX&^ImGe%)!4rJo-ut@)uVqM zt{rLm@9hsxu5K~Vd9pk_tx?dE$@bm!{F?Fxpo7t)eUtvIkM!J-NB=U@V(m)3L9u?~ z)~VBvTh~kL+;*tO>c$u;@~Ru92=-=+tSmV$Bb1q34O`YbY$!e(uY;y~DEjr#!unQ^ zij%nRmkAegkBRgfl>;2!L(a1k?q#GQFd9FN ze>dYPpy%j-l+g$x)03>|-TL5ztO<1MsU39$go{}WOE8XyokkOQIifd=Xos@q$d~CBjBcI`w<^Ir}?S9U{%>JVrXHqRQEp4UTq%uyF?2!ymzt?s12C%|H5&TQ! zw$++8-TsXAh8h1$o@%06fvuvW)olyo)dA7Zt~*DVq4pb<^p#~5e!nD?=e#UPgAny4 zQ!dhp!6Aa5b^gSWpqs)v1_B&1Jrbxr$%ZoMrfhu7_zX&p6?_98KZLc=p^Gbc)zaSC zM|i$%4Cv6QX!IOl@(q6%TO{5-QnPWr(&(qn*Fmh1V42-~!?VZT*fML1USXG7h?h5z zfu7z(6|CrV0{a~Oha4A_Y$=Gdsqu20>ch8t-uc8E+h#ut|20Zn^{%X$L z5zr6Vq|I)&t(n+=?I9PN%f+b5DA%(dwYU-cs~6+bP84*`zMeShqN5>&=gAAEcv)h} zV$^d>cMUqNC*Mea0egpBZB0MWGCbZiX=JjyCDo5*rLmmQkqbG)7lOrU6|O(%fEy~v zc^h~DV^=Th(w6#qM7+vD^8WtJRnvQ!47Mh%SB$+C$#P8V@uDvA<6-mVN6|CCbIRp~ zO%4}o`Oso74y(0=aQ?g}rF4915~Uf#6&Q=QUmqc{RWx;5wD#+&g?@20?>U7VaJR1< z--?kn7WjJ=2z*@`jwow>#?xuGC7B5KE1lOF(~JB%KO* z{WlQbDt^RTPX|Gch-L;(ll>~Vt~~*fP$7a9cxShtz#9(q-gkf2_r1~Av?kbfY_pE# z4{6WP>qlNm@tmg7Tv|FbXYQc-aEDl)WwHG{*6c%_BD6-^HCfj*!lEPdU9e*n|p%b32 z5yB9`KAw`cOy^y)bCGeb$Yxrs5}&ubJ**mQ6LW4`Uy>D2CV462S;I?(w zsROm6NHIsB09lIx`ir6k7{%NU&l4ScNXml0;nq~Tj$N*!oQX@{J9N~nLd+|-^RkI zjJm>YG>@SiI!XB%KHIGF2W#2{us)^SBX7fv?YlZggl04?A?wov!|hC1y|$A?pdzW- z#GzP0pm7%Gt)iPEHWq<9Q(Riw`Wq+qHY>s zqdUZ33PPd4Oz`X>+J3WSV9|P4Pn7gb-^Yz5`6X+1G=?RkZ{{*pJ&}1-Q;9~qkcMi> zOcr&J;hKf1_pmQg>4!X!zhz5EC-0W6+LljblZrk?i8dJv>!_4bd(Zo;hbmEC!vVPb zD7_dSx{p`OI!5;)!dZ)m`g|KCa0yn`cwgkG`-*|>lW^P*Fv!r)a(uO-DsHp|$;8zY z`D6KGnY?3XJcxqsB^}|8)R1Qsa$D`am|=ofrMkr8I#Uqt7jJmh@}NT0`?R$^O69Ja z{79$E%;d}1V30O6Yp74*mG+L+X-)FUn!c~-mL$duq5mJV;=jQn*9jkE;6q##r<7>_ zpr+YQT8f%Xeg1mem(z1Hip3^~#>lwVz&=S8&6}l(dyIead#~oXY1X{uGy0o+u2Zg4 z1Pvbm)oh~y1T|Y@=;X_8VM@gt+P^H){2HGxlwm2t1XvxmmX;0b%Elk8u*@F*gz~i5unTx<9RX zuKX?Clblf&uA(U>AroZ5!a62RUHy6b03bvk&vX=bLD=o2j;%IKV+%Z-ItTZ_bcEsmtP|Jy7Rj?@Z`teo2qdiyu4ax}!XwTELKzs8h$R^vxo~JP;?Eu7f4Mr2;G`(8JE)AzG??)Pl4ZQ4qAEL;pQgzOX9Wz zzVRm=ubCrUd2Bz)e0deIMz{#`iT(*Ag*$rSwVr^S67$TvS0le2lmDZg92m^?%X8TV z>8M0Ak)^-$lQD>J%~4&buY`;cO`fLa5mihPoy*ez2jQo_MY=&l(E&&Bd;}i(h6w(u z<8B~(aUDyZm+mcQQGG|rd^I-Z zDe2bhPOcx3}=b%$LdVkBBNAsPcPulX6pIqtm{rSbM}gQl-1HXYT`wD zah`lTx5 zy+9-*+$6b`GTly2hunyNH2ioTc~^C-w|7rEvJKyCtElS}zjKjJfZ4M})>}uMWQ-7* z$G(u0*gvniTvgEdFHAWLQsz z!{(wya+@;ImH9|^`dRmLGwfR#P<`3w^`F(0mGA%VT1chYdd)C9!4Ym^&~5T~0t1Ed z{4d?BD&Av$t2oa>Ujm{FQLQv8ZYXm;YWakK@)NbI#u(hrrIB zmoj+xT$zovYqW@*(&*FK1boeRW6z0$oLw?|bp}@jb6E1Dtw%F!EY*zLU$iul!ee79 zUVbc&j}P1dN&7t;^BdCMli{wA!rb5LTGtL3Yg8BZ2ovCL5%~^8OQjKw-V?sNqa_Y`28dAx~E25xuJjcNyYeVGVS@v@rS|G3#M(1TtmmS1y~WU zKq(*+*zY;Xo9HLehj64SjTA{rqlX+dM9UmO3st#U_sLYeN*1s%kF#f2n8J+dS z1tfpzzhE6`5x3mO{*;LbZg+LxPtRCuXpzJ1PtXg`ccyh5xdcF9Z4~*f8k?(R#(Jt{cqk%cnzG6r)ry^li zRf`=a^6C8crj3=x#qPqF8aLX_H(h(K=aoqr zonTu#iY34v;$Z!?hNxcZ#loi^KJ>=qMl78`+ig#it-X*N_ow1dW-d`e+T3l$WiaWt zxs#2_npM#y-NBU70*jXQSDE;B*Z$eowMoPNRE#viHeT<~Au85Ywb5W~W(%y^UHdK7 z7h5k3N{Be=k6nz#3692`XyrI+Ud1>A*X%6=v^pi#i?0kWkQa5=*w0sYYW2EFa)xvE zg=dgL5aAx%e6tSC;LYkM!O!|4GF9O|*EP%0p{I%^RLQ4fH8M7ze$hm@8r0W1ECrAO zx`{{+!BcZP5@T?%9GgZ|jFUVk@LUWS z#oe#g)-#QS3RT%osCj<(U6>y+J`zha-appSlZzd=KMlG)IU)Y0S_T|Gh~uNAx1bxV zadZb(Kk?r8+Ujw>vyX0SdPfnHe9+@_T|fDTVj4(?ooLD~AuVY1enEy~S7M@khCE*$ zvvx>wg+i-NB*Ho$5^Q5v|GoPul}=PEA!0KL)w79R)eQy-M|F39Z=> zM>pVXhtO75WF_@o0kX=%RoRR5h@+=*V1xoJ;DX}c?IS57=yN{iDlgi#dz zjIuALgqFzX1g+y*3E`EsV9QOFDa&My(qvlJUCNZ2<@*Pc-gvuC9o76NZ1c}gZ`i9- zXW3OFtvKHDr-JV?nKBP)LvQVK@atAtr#8#3EGhlM&NUJxGFO)F?79;2DLrVl8fYIs zqVdUPIL^1EbMKa|D2YlfZ@q~&H`1(&Gg=vZ8(+UQiZUd9>UcHM`z301oNvQ3wvu;v zUdHRuf7sFS-MspH^wGyz)*qOJ%*MyUn%ERufTEIpPsexTZ$=aKyp;114)D6Pw{pUP zn}WBt7g8H@xX=0h-9KhIt@VG}`eb?ix^z&FT)f@+k=SM?-__6Q24S$BF3aU(n2;<` z7$WKO#s5&Pu3eP2XBY6u8%vH8*_UF%kqh)WePpAEK9mFm?@97ql->Ge>mwWlyC0G5f!IJchZJ55u&eUlNSdU z%DT!|nH<+nj5U_|uXNIMvV#D9e8&RCQG87C6?ab)+W9^tq{=riT6G~6Z$9D}92a1j{6? z>Kb;{1rh4N#SJE3oupqyEM$vX@HICxwl1cIe)dH^a9*Zn(2j9UXg{RH(%I5sZara* z`tgIsM=E)G4qo33CG#&jn_Y8?5z;drd%$HJTAt3-K}@d3B);w*T`u|ocNN5UxsPK5 zTWedUlwhn8@h9CroPVz$H@P!VckJh)dKcN?KxO;y>OIM66X7_{WSh9P-bK zVR#WY`ju+eDeL~BrCVtIw4k5X3U4Cm0sR30eV8x|y;eJ)KX&ulE_lVPNk z^b#$pl9rgL?_VIX()VljvFAOj#-<#VxLZ$Khul6c(AyWban@Sfj_{@X;`5OGItIr9 zd%88;#l6V~qyMzE>v|QtYTGMjQ`wVBQbkly!nF?nuK?sZ8^+$CRz-;P$9nP`d+@Kd zhdt}4x4L+pBnJRsn$HDUQ+JPjNzCxhv>KOHq3qhU!yp5nmpQHrP`Epo7d(vr0QIW; znuniivSe}Z*A>a%T;+Q52VYwDF&Kp{Z@J)La88@Gw%q2myRp!Zab9_-TsB*t{km5{ ztlXB)4sl!^)W_DoOEIq7YUk*gP8lS$Gwx?#4>itQN)CCe_c9zB#FXbeiupWMT~D;b zQc5H){`FOxnwZr?%MYlpDst5CwuNhu3$XtHYac^duq!OY9th9rS~868_hM?Sh(^}O zRL9~gC%gN~T@C5uZHp)zj34o?qfDGF(Z}4KL#}#fp{#op^J3YLynv5ty=x17mNw7& zxmi8NMS7T9#%ZqC`?vhhKM`jZpQqkk)NNWbk@t6GeGh7Nv_;ZI?x3H_wWl6!u{i9l z_0MXG#vk;6KfE*e9tf{dP+rknX&!5?{hPk=Gp(HM^yD0UI@H>wu$5$pa(3lU>-trA zQxZCp(X;p-wW3Io#(68182u?hDM7{c(A$}*b1s^mcc|lGR_LT)_Zi^h@~(N*smJ*> z*Z6|l%U++u{MdggnF_heDwD(B*95qEMYD;1ud8t>LgB2?Fu3H;6 zSvd!hNynu`Nu=B=*Qt{~|JVGJlHsv{cr^>Y;m=xtx6AaXLvvnyB7WswyKh%}goi!o zw>XhLw8lP^Lilz1*FxCx+?PCGnmzZzP4cG|>A3_COxKh6MgCRIda||@V2b#>!ZxVS z=$;>)@Kn7Gy(%eE{{T%38S@O0x-K!hb8va>fnQa4HW2zQh@xc=sO!%uCxuZQW^Dc# z#%t#P01HkIqicCFEVg!%kPkdT3xrYV0V5UlFT(u*-st`ghFr9aE{tKbvtTNjBOQKI zit_8tD7|(^ZFwamo{3rCB( z?{NH^t8H}UUy<@WaWD2N%ImG~^JmUFY*GEV`Mp^r+6VWsfn9cpii|^T8*&eE#c=nH zFZP8oq)T)kGuR`<&U zMYG1ze+v26#vUb?Gi{KN#PTcN-D8;7G_kKAdv0sn&%+HXQMuG+Hpu9aM;vMZ z#`otq_5!|P(>yI5m_K8lNFN(=j#T68nrX7}1%#7Lr}&2cGU^1oW!?xJasZ#~bJ$5ECi8CIk-M@~{&bH${!@_HNII{0yA70tE1m+oYiV81UO zTBn5n7Gn)B(Sw0?yRk)zDL;QxGK|yC{Gzms^!)7z5MKTw;0|V9G*pXP)oYh9=XMM z{idZepf0SWHV8d&UdLk-NvFiy3WgkUgT-TplAD`~-Co1YVeHf+CbzZA+Ge4{A?c5= zTA`~+jMh!8jTG(4-pC=I2~)|v65}QdY@;P!6joJ>lmzt99Ff*8RoMH=DvQryFQARh^Zp+RS+H7^s958 zwO6snUbVw7i0DL2qiUaA(lmL7KnG5hEOxHZDQ|OHF~P*68~~)BtvFL}rt9<~bGK6F zj579se-I+N31Klqe4uoiHmq$74>r>yqp1CBuhb(89pUfiFX#n(cv^R(&D#F}`bpzr zs@k%Tdw=OfcIv)cE`I7@eO8@r;U~3kr|L#UGT#T!J&Fb&jY({T%WJrHh@Zu)(WbA- zZkq|hXZWt%ggESXf51q`^R5cnfR!`Q{HN&L8uZT+uz1zf^@k(q za!2y7Go1inLE)EhuP-)@tMe}=dO2j9ppzJ4D#cG#BpER2TYi&N_ z&f4H?j#P}0bLI$R*f~Afv-PhZ6GcfbUi$eSo+>h_7Y^%n+eH5W26I}Z(b=nMo3^#X z+)psT+(gnBT>4>f2=}iN_}L3vS?RB{0$s-)O9>rDN9A1xrKw4EtXj<(K6H&VL5SmQ zSc@c{<(Qi1zCAnrvd#dwSfaK55)7D)9|(UXs&R6?1%NNeO6!eyU9ua09J$_$E9=L4%C3uFYUAc04(E>eS6pG z*>u!12t~T;eK^=LoLcY;T z1Dt&;jlQ>3#~kLoY-L)`{MJ5~1MKY{TeBk0KqXQ@C)A4XtaX-`%ZTF(>0AMiwmNm@ zwCrZ`pFPi7;-Ow~()wRhqZNjQMSClyqdGgL+U0;BO6TrpKQ>6~)~`=FAfENj+{%B# zoob6+NW)QjU!j$F{GNN(70DPJ)|Je}3}dGltUIYcO7O8V(VtO+i$-MTsK0YoBzmDF zmO`4q4RH(ru^~ z{D85#j&OfUL_!wtu-d%T(%)O4VZ0V>00&+;rk|P{q5;b~0bY|)y_3C@+tHjY%G$20 z^Ci)u{{Ty}UA<+`<(ldB=TwaF33&-+w)uUIBPC^O+MVW{L7YuFw2fIia%QDtnEw8gswj5=lz<;)1%*Sj_tSfIj+{) z+^K%$P!ss`Ue*GOlw#i2M~jcHqbV+}v&!}Fmhwz<^XK!Z$3nw`tHJj*b6kl1p_?2N z%~zf*L6OGXG5TjU)BiS`;S)!t*6iW`^e^Ot+^xqS>yisBvc!? zrI&=a{{VA8nKfLsd6VDnJqW!5PEAFRtvIzabx3@V|Iz$xX6Z(Fs94gYde=HXPL%G+ zN$Fa5GN`rF;!%tVB!6~x!2E#4WHVIira=hZ-(mL2tGD1N)weodX(jll`X0gIHZiPB z!>G!G+4CdUD6wyoW-(Ge}#Y$N+jO@Bpt(g5kF91pL5c4)yYQ`1|d%`U8e4 zuc^T&bhdrZWbh`d4YlpP$Cj?q$X!%}mStRE{{XTH0Dd*}#rCMWUWY7;g=nIA+~W

M|9#yJB$DF;Vz⁢Tt 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

{J~3jMg2}k}`9Z;EK@HS7z2+ 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

=EywJ&k>86o6TiNcC( pokcmm==^F|+Vl`5Jash0r;exTP9UC$KzPkKQ%BvW3K>z@|JfSH-jV @@ -24,8 +28,75 @@

ClayTable

-
-
+
+
+

Simple Table

+
+
+
+ +
+
+

Simple Table with links

+ +
+
+ +
+
+

Simple Table with Label

+
+
+
+ +
+
+

Simple Table with Progress Bar

+
+
+
+ +
+
+

Selectable Table

+
+
+
+ +
+
+

Selectable Table with Sticker

+
+
+
+ +
+
+

Selectable Table with Action Menu

+
+
+
+ +
+
+

Selectable Table with Quick Action Menu

+
+
+
+ +
+
+

Selectable Table with group separator

+
+
+
+ +
+
+

Selectable Table with Selected Items

+
+
+
From 5c527b8afce70857d8cd8e0594d16e99f31b2c69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Wed, 13 Dec 2017 23:29:32 -0300 Subject: [PATCH 19/29] Improving ClayTable tests --- .../clay-table/src/__tests__/ClayTable.js | 51 ++++++ .../clay-table/src/__tests__/ClayTableItem.js | 90 ++++++++++- .../__tests__/__snapshots__/ClayTable.js.snap | 40 ++++- .../__snapshots__/ClayTableItem.js.snap | 152 +++++++++++++----- 4 files changed, 290 insertions(+), 43 deletions(-) diff --git a/packages/clay-table/src/__tests__/ClayTable.js b/packages/clay-table/src/__tests__/ClayTable.js index 8ce735dec..266f9a794 100644 --- a/packages/clay-table/src/__tests__/ClayTable.js +++ b/packages/clay-table/src/__tests__/ClayTable.js @@ -6,6 +6,7 @@ let items = [ { columns: [ { + href: '#1', text: 'suffing-photo.png', useEllipse: true, }, @@ -30,6 +31,7 @@ let items = [ { columns: [ { + href: '#1', text: 'suffing-photo.png', useEllipse: true, }, @@ -117,6 +119,55 @@ describe('ClayTable', function() { expect(component).toMatchSnapshot(); }); + it('should render a ClayTable with colspan in columns header', () => { + component = new ClayTable({ + header: [ + { + colSpan: 2, + label: 'Foo', + }, + { + label: 'Bar', + }, + ], + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render a ClayTable with elementClasses in the columns', () => { + component = new ClayTable({ + header: [ + { + elementClasses: 'custom1-column', + label: 'Foo', + }, + { + elementClasses: 'custom2-column', + label: 'Bar', + }, + ], + items: [ + { + columns: [ + { + elementClasses: 'custom1-column', + text: 'Foo', + }, + { + elementClasses: 'custom2-column', + text: 'Bar', + }, + ], + }, + ], + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + it('should fail when no spritemap is passed', () => { expect(() => { component = new ClayTable(); diff --git a/packages/clay-table/src/__tests__/ClayTableItem.js b/packages/clay-table/src/__tests__/ClayTableItem.js index 6ac825445..b1ec58a1d 100644 --- a/packages/clay-table/src/__tests__/ClayTableItem.js +++ b/packages/clay-table/src/__tests__/ClayTableItem.js @@ -76,6 +76,23 @@ describe('ClayTableItem', function() { expect(component).toMatchSnapshot(); }); + it('should render the ClayTableItem with custom classes in column of sticker', () => { + component = new ClayTableItem({ + columns: [ + { + text: 'Name', + useEllipse: true, + }, + ], + spritemap: spritemap, + stickerElementClasses: 'custom-column', + stickerLabel: 'AA', + stickerStyle: 'primary', + }); + + expect(component).toMatchSnapshot(); + }); + it('should render ClayTableItem with sticker with image in column', () => { component = new ClayTableItem({ columns: [ @@ -92,7 +109,24 @@ describe('ClayTableItem', function() { expect(component).toMatchSnapshot(); }); - it('should render the ClayTableItem with ClayProgressBar in the column', () => { + it('should render ClayTableItem with sticker shape `rounded`', () => { + component = new ClayTableItem({ + columns: [ + { + text: 'Name', + useEllipse: true, + }, + ], + spritemap: spritemap, + stickerImageSrc: 'image.png', + stickerImageAlt: 'Image', + stickerShape: 'rounded', + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render the ClayTableItem with progress bar in the column', () => { component = new ClayTableItem({ columns: [ { @@ -121,7 +155,30 @@ describe('ClayTableItem', function() { expect(component).toMatchSnapshot(); }); - it('should render the ClayTableItem with actionItems', () => { + it('should render the ClayTableItem with action menu', () => { + component = new ClayTableItem({ + actionItems: [ + { + label: 'Option 1', + href: '#1', + }, + { + label: 'Option 2', + separator: true, + href: '#2', + }, + { + label: 'Option 3', + href: '#3', + }, + ], + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render the ClayTableItem with custom classes in column of `action menu`', () => { component = new ClayTableItem({ actionItems: [ { @@ -138,13 +195,14 @@ describe('ClayTableItem', function() { href: '#3', }, ], + actionColumnElementClasses: 'custom-column', spritemap: spritemap, }); expect(component).toMatchSnapshot(); }); - it('should render the ClayTableItem with actionItems and quick menu', () => { + it('should render the ClayTableItem with quick action menu', () => { component = new ClayTableItem({ actionItems: [ { @@ -198,6 +256,32 @@ describe('ClayTableItem', function() { expect(component).toMatchSnapshot(); }); + it('should render the ClayTableItem with custom classes in columns of selectable', () => { + component = new ClayTableItem({ + columns: [ + { + text: 'Foo', + useEllipse: true, + }, + { + text: 'Bar', + href: '#1', + }, + { + text: 'Foo', + }, + { + text: 'Bar', + }, + ], + selectable: true, + selectableElementClasses: 'custom-column', + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + it('should render the ClayTableItem selected', () => { component = new ClayTableItem({ columns: [ diff --git a/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap b/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap index 4b7cd1011..6424cad6b 100644 --- a/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap +++ b/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap @@ -6,6 +6,38 @@ exports[`ClayTable should render a ClayTable with classes 1`] = `

`; +exports[`ClayTable should render a ClayTable with colspan in columns header 1`] = ` +
+ + + + + + + +
FooBar
+
+`; + +exports[`ClayTable should render a ClayTable with elementClasses in the columns 1`] = ` +
+ + + + + + + + + + + + + +
FooBar
FooBar
+
+`; + exports[`ClayTable should render a ClayTable with id 1`] = `
@@ -33,7 +65,9 @@ exports[`ClayTable should render a ClayTable with multiples items 1`] = ` - suffing-photo.png + + suffing-photo.png + Juan Anton 264KB @@ -45,7 +79,9 @@ exports[`ClayTable should render a ClayTable with multiples items 1`] = ` - suffing-photo.png + + suffing-photo.png + Juan Anton 264KB diff --git a/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap b/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap index dd5859d83..d7971e69d 100644 --- a/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap +++ b/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap @@ -1,5 +1,18 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`ClayTableItem should render ClayTableItem with sticker shape \`rounded\` 1`] = ` + + + + Image + + + + Name + + +`; + exports[`ClayTableItem should render ClayTableItem with sticker with image in column 1`] = ` @@ -79,20 +92,7 @@ exports[`ClayTableItem should render the ClayTableItem selected 1`] = ` `; -exports[`ClayTableItem should render the ClayTableItem with ClayProgressBar in the column 1`] = ` - - -
-
-
-
-
40%
-
- - -`; - -exports[`ClayTableItem should render the ClayTableItem with actionItems 1`] = ` +exports[`ClayTableItem should render the ClayTableItem with action menu 1`] = `
@@ -122,29 +122,21 @@ exports[`ClayTableItem should render the ClayTableItem with actionItems 1`] = ` `; -exports[`ClayTableItem should render the ClayTableItem with actionItems and quick menu 1`] = ` +exports[`ClayTableItem should render the ClayTableItem with columns 1`] = ` - -
- - - - - - - - - -
+ + Foo + + Bar + Foo + Bar + +`; + +exports[`ClayTableItem should render the ClayTableItem with custom classes in column of \`action menu\` 1`] = ` + + +
+
+ +
+
+ + +`; + exports[`ClayTableItem should render the ClayTableItem with user sticker in the column 1`] = ` From 9011c4f46537b5d8c54e5aceee2b177a6901e7d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Thu, 14 Dec 2017 00:14:22 -0300 Subject: [PATCH 20/29] SF --- packages/clay-table/demos/index.html | 6 +++--- packages/clay-table/package.json | 8 ++++---- packages/clay-table/src/ClayTable.soy | 6 +++--- packages/clay-table/src/ClayTableItem.js | 12 ++++++------ packages/clay-table/src/ClayTableItem.soy | 8 ++++---- packages/clay-table/src/items_validator.js | 2 +- 6 files changed, 21 insertions(+), 21 deletions(-) diff --git a/packages/clay-table/demos/index.html b/packages/clay-table/demos/index.html index 8019fdbe1..e5901f72f 100644 --- a/packages/clay-table/demos/index.html +++ b/packages/clay-table/demos/index.html @@ -580,7 +580,7 @@

Selectable Table with Selected Items

}, '#quick-action-menu-block'); /** - * Selectable Table with Action Menu + * Selectable Table with group separator */ new metal.ClayTable({ header: [ @@ -656,7 +656,7 @@

Selectable Table with Selected Items

}, '#group-block'); /** - * Selectable Table with Action Menu + * Selectable Table with Selected Items */ new metal.ClayTable({ header: [ @@ -726,7 +726,7 @@

Selectable Table with Selected Items

selectable: true, selectableElementClasses: 'custom-column', selected: true, - stickerElementClasses: 'custom-column' + stickerElementClasses: 'custom-column', stickerImageSrc: './image.jpg', } ], diff --git a/packages/clay-table/package.json b/packages/clay-table/package.json index ce9d4b432..566291055 100644 --- a/packages/clay-table/package.json +++ b/packages/clay-table/package.json @@ -1,6 +1,6 @@ { "name": "clay-table", - "version": "1.0.0-alpha.5", + "version": "1.0.0-alpha.8", "description": "Metal ClayTable component", "license": "BSD", "repository": "https://github.com/metal/metal-clay-components/tree/master/packages/clay-table", @@ -28,10 +28,10 @@ ], "dependencies": { "clay-checkbox": "^1.0.0-alpha.5", - "clay-dropdown": "^1.0.0-alpha.5", + "clay-dropdown": "^1.0.0-alpha.8", "clay-icon": "^1.0.0-alpha.5", - "clay-label": "^1.0.0-alpha.5", - "clay-link": "^1.0.0-alpha.5", + "clay-label": "^1.0.0-alpha.8", + "clay-link": "^1.0.0-alpha.8", "clay-progress-bar": "^1.0.0-alpha.5", "clay-sticker": "^1.0.0-alpha.5", "metal": "^2.14.0", diff --git a/packages/clay-table/src/ClayTable.soy b/packages/clay-table/src/ClayTable.soy index 5d65a2fd1..6ae791635 100644 --- a/packages/clay-table/src/ClayTable.soy +++ b/packages/clay-table/src/ClayTable.soy @@ -6,6 +6,7 @@ {template .render} {@param spritemap: string} {@param? elementClasses: string} + {@param? handleButtonSortColumn_: any} {@param? header: list<[ colSpan: int, elementClasses: string, @@ -13,9 +14,9 @@ sort: bool, sortDirection_: string ]>} - {@param? handleButtonSortColumn_: any} {@param? id: string} {@param? items: list<[ + actionColumnElementClasses: string, actionItems: list<[ disabled: bool, href: string, @@ -24,7 +25,6 @@ quickAction: bool, separator: bool ]>, - actionColumnElementClasses: string, columns: list<[ elementClasses: string, href: string, @@ -108,8 +108,8 @@ {foreach $item in $items} {call ClayTableItem.render} - {param actionItems: $item.actionItems /} {param actionColumnElementClasses: $item.actionColumnElementClasses /} + {param actionItems: $item.actionItems /} {param columns: $item.columns /} {param disabled: $item.disabled /} {param group: $item.group /} diff --git a/packages/clay-table/src/ClayTableItem.js b/packages/clay-table/src/ClayTableItem.js index 7c6684c00..26c446277 100644 --- a/packages/clay-table/src/ClayTableItem.js +++ b/packages/clay-table/src/ClayTableItem.js @@ -25,22 +25,22 @@ class ClayTableItem extends Component {} */ ClayTableItem.STATE = { /** - * List of items to display in the actions menu. + * CSS classes to be applied to the td of the actions menu. * @instance * @memberof ClayTableItem - * @type {?array|undefined} + * @type {?string|undefined} * @default undefined */ - actionItems: actionsItemsValidator, + actionColumnElementClasses: Config.string(), /** - * CSS classes to be applied to the td of the dropdown. + * List of items to display in the actions menu. * @instance * @memberof ClayTableItem - * @type {?string|undefined} + * @type {?array|undefined} * @default undefined */ - actionColumnElementClasses: Config.string(), + actionItems: actionsItemsValidator, /** * List of the columns in the row. diff --git a/packages/clay-table/src/ClayTableItem.soy b/packages/clay-table/src/ClayTableItem.soy index 29ac516c9..7808d31a0 100644 --- a/packages/clay-table/src/ClayTableItem.soy +++ b/packages/clay-table/src/ClayTableItem.soy @@ -5,6 +5,7 @@ */ {template .render} {@param spritemap: string} + {@param? actionColumnElementClasses: string} {@param? actionItems: list<[ disabled: bool, href: string, @@ -13,7 +14,6 @@ quickAction: bool, separator: bool ]>} - {@param? actionColumnElementClasses: string} {@param? columns: list<[ elementClasses: string, href: string, @@ -60,8 +60,8 @@ {$group} {else} {call .content} - {param actionItems: $actionItems /} {param actionColumnElementClasses: $actionColumnElementClasses /} + {param actionItems: $actionItems /} {param columns: $columns /} {param contentRenderer: $contentRenderer /} {param disabled: $disabled /} @@ -87,6 +87,7 @@ */ {template .content} {@param spritemap: string} + {@param? actionColumnElementClasses: string} {@param? actionItems: list<[ disabled: bool, href: string, @@ -95,7 +96,6 @@ quickAction: bool, separator: bool ]>} - {@param? actionColumnElementClasses: string} {@param? columns: list<[ elementClasses: string, href: string, @@ -219,8 +219,8 @@ {/call} {elseif $progressBar} {call ClayProgressBar.render} - {param minValue: $progressBar.minValue /} {param maxValue: $progressBar.maxValue /} + {param minValue: $progressBar.minValue /} {param status: $progressBar.status /} {param value: $progressBar.value /} {/call} diff --git a/packages/clay-table/src/items_validator.js b/packages/clay-table/src/items_validator.js index 2e94df4bf..a42d99df3 100644 --- a/packages/clay-table/src/items_validator.js +++ b/packages/clay-table/src/items_validator.js @@ -31,8 +31,8 @@ let columns = { }; let items = { - actionItems: Config.arrayOf(Config.shapeOf(actionItems)), actionColumnElementClasses: Config.string(), + actionItems: Config.arrayOf(Config.shapeOf(actionItems)), columns: Config.arrayOf(Config.shapeOf(columns)), disabled: Config.bool().value(false), group: Config.string(), From 92523a817a476b570fd58de6ac6bc031b20fbabb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Thu, 14 Dec 2017 01:02:14 -0300 Subject: [PATCH 21/29] Add support for sizes to ClayTable --- packages/clay-table/src/ClayTable.js | 9 +++++ packages/clay-table/src/ClayTable.soy | 12 +++++- .../clay-table/src/__tests__/ClayTable.js | 36 ++++++++++++++++++ .../__tests__/__snapshots__/ClayTable.js.snap | 38 +++++++++++++++---- 4 files changed, 86 insertions(+), 9 deletions(-) diff --git a/packages/clay-table/src/ClayTable.js b/packages/clay-table/src/ClayTable.js index a975f4a67..068b296bb 100644 --- a/packages/clay-table/src/ClayTable.js +++ b/packages/clay-table/src/ClayTable.js @@ -70,6 +70,15 @@ ClayTable.STATE = { */ items: itemsValidator, + /** + * Table responsive sizes. Available `lg`, `md`, `sm` and `xl`. + * @instance + * @memberof ClayTable + * @type {?string|undefined} + * @default undefined + */ + size: Config.oneOf(['lg', 'md', 'sm', 'xl']), + /** * The path to the SVG spritemap file containing the icons. * @instance diff --git a/packages/clay-table/src/ClayTable.soy b/packages/clay-table/src/ClayTable.soy index 6ae791635..2aa418873 100644 --- a/packages/clay-table/src/ClayTable.soy +++ b/packages/clay-table/src/ClayTable.soy @@ -53,9 +53,10 @@ stickerStyle: string, stickerShape: string ]>} + {@param? size: string} {let $attributes kind="attributes"} - class="table table-autofit table-heading-nowrap table-hover table-list show-quick-actions-on-hover + class="table table-autofit table-hover table-list show-quick-actions-on-hover {if $elementClasses} {sp}{$elementClasses} {/if} @@ -66,7 +67,14 @@ {/if} {/let} -
+ {let $classes kind="text"} + table-responsive + {if $size} + -{$size} + {/if} + {/let} + +
{if $header} diff --git a/packages/clay-table/src/__tests__/ClayTable.js b/packages/clay-table/src/__tests__/ClayTable.js index 266f9a794..47db71314 100644 --- a/packages/clay-table/src/__tests__/ClayTable.js +++ b/packages/clay-table/src/__tests__/ClayTable.js @@ -79,6 +79,42 @@ describe('ClayTable', function() { expect(component).toMatchSnapshot(); }); + it('should render a ClayTable with size `lg`', () => { + component = new ClayTable({ + size: 'lg', + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render a ClayTable with size `md`', () => { + component = new ClayTable({ + size: 'md', + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render a ClayTable with size `sm`', () => { + component = new ClayTable({ + size: 'sm', + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render a ClayTable with size `xl`', () => { + component = new ClayTable({ + size: 'xl', + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + it('should render a ClayTable with id', () => { component = new ClayTable({ id: 'myId', diff --git a/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap b/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap index 6424cad6b..c06f70c72 100644 --- a/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap +++ b/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap @@ -2,13 +2,13 @@ exports[`ClayTable should render a ClayTable with classes 1`] = `
-
+
`; exports[`ClayTable should render a ClayTable with colspan in columns header 1`] = `
- +
@@ -21,7 +21,7 @@ exports[`ClayTable should render a ClayTable with colspan in columns header 1`] exports[`ClayTable should render a ClayTable with elementClasses in the columns 1`] = `
-
Foo
+
@@ -40,13 +40,13 @@ exports[`ClayTable should render a ClayTable with elementClasses in the columns exports[`ClayTable should render a ClayTable with id 1`] = `
-
Foo
+
`; exports[`ClayTable should render a ClayTable with multiples columns in header 1`] = `
- +
@@ -61,7 +61,7 @@ exports[`ClayTable should render a ClayTable with multiples columns in header 1` exports[`ClayTable should render a ClayTable with multiples items 1`] = `
-
Title
+
- {foreach $item in $header} - {let $thAttributes kind="attributes"} - class=" - {if $item.elementClasses} - {$item.elementClasses} - {/if} - " - - {if $item.colSpan} - colspan="{$item.colSpan}" - {/if} - {/let} - - - {/foreach} + {call .header} + {param handleSortColumn_: $handleSortColumn_ /} + {param header: $header /} + {param spritemap: $spritemap /} + {/call} {/if} {if $items} - {foreach $item in $items} - {call ClayTableItem.render} - {param actionColumnElementClasses: $item.actionColumnElementClasses /} - {param actionItems: $item.actionItems /} - {param columns: $item.columns /} - {param disabled: $item.disabled /} - {param group: $item.group /} - {param inputName: $item.inputName /} - {param inputValue: $item.inputValue /} - {param selectable: $item.selectable /} - {param selectableElementClasses: $item.selectableElementClasses /} - {param selected: $item.selected /} - {param spritemap: $spritemap /} - {param stickerElementClasses: $item.stickerElementClasses /} - {param stickerImageAlt: $item.stickerImageAlt /} - {param stickerImageSrc: $item.stickerImageSrc /} - {param stickerLabel: $item.stickerLabel /} - {param stickerShape: $item.stickerShape /} - {param stickerStyle: $item.stickerStyle /} - {/call} - {/foreach} + {call .body} + {param handleClickCheckbox_: $handleClickCheckbox_ /} + {param items: $items /} + {param spritemap: $spritemap /} + {/call} {/if}
@@ -96,8 +96,32 @@ exports[`ClayTable should render a ClayTable with multiples items 1`] = ` `; +exports[`ClayTable should render a ClayTable with size \`lg\` 1`] = ` +
+
+
+`; + +exports[`ClayTable should render a ClayTable with size \`md\` 1`] = ` +
+
+
+`; + +exports[`ClayTable should render a ClayTable with size \`sm\` 1`] = ` +
+
+
+`; + +exports[`ClayTable should render a ClayTable with size \`xl\` 1`] = ` +
+
+
+`; + exports[`ClayTable should render the default markup 1`] = `
-
+
`; From 7154d958a7d0c652e7372833383131d9c0b866dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Fri, 15 Dec 2017 16:43:59 -0300 Subject: [PATCH 22/29] Add supported to focus the quick actions menus in ClayTable --- packages/clay-table/package.json | 6 ++- packages/clay-table/src/ClayTable.js | 57 +++++++++++++++++++++++++++- 2 files changed, 59 insertions(+), 4 deletions(-) diff --git a/packages/clay-table/package.json b/packages/clay-table/package.json index 566291055..b9d1daf37 100644 --- a/packages/clay-table/package.json +++ b/packages/clay-table/package.json @@ -34,11 +34,13 @@ "clay-link": "^1.0.0-alpha.8", "clay-progress-bar": "^1.0.0-alpha.5", "clay-sticker": "^1.0.0-alpha.5", - "metal": "^2.14.0", "metal-component": "^2.14.0", + "metal-dom": "^2.14.0", + "metal-events": "^2.14.0", "metal-soy": "^2.14.0", "metal-state": "^2.14.0", - "metal-web-component": "^2.14.0" + "metal-web-component": "^2.14.0", + "metal": "^2.14.0" }, "devDependencies": { "babel-cli": "^6.24.1", diff --git a/packages/clay-table/src/ClayTable.js b/packages/clay-table/src/ClayTable.js index 068b296bb..1d73785ee 100644 --- a/packages/clay-table/src/ClayTable.js +++ b/packages/clay-table/src/ClayTable.js @@ -1,8 +1,10 @@ import './ClayTableItem'; import 'clay-link'; import {Config} from 'metal-state'; +import {EventHandler} from 'metal-events'; import Component from 'metal-component'; import defineWebComponent from 'metal-web-component'; +import dom from 'metal-dom'; import itemsValidator from './items_validator'; import Soy from 'metal-soy'; @@ -12,11 +14,62 @@ import templates from './ClayTable.soy.js'; * Metal ClayTable component. */ class ClayTable extends Component { + /** + * @inheritDoc + */ + attached() { + this.eventHandler_.add( + dom.delegate( + document, + 'click', + 'body', + this.handleClickDocument_.bind(this) + ), + dom.delegate(this.element, 'focus', 'tr', this.handleFocus_) + ); + } + + /** + * @inheritDoc + */ + created() { + this.eventHandler_ = new EventHandler(); + } + + /** + * @inheritDoc + */ + detached() { + super.detached(); + this.eventHandler_.removeAllListeners(); + } + + /** + * Handle click in document for remove the class `table-focus` of tr. + * @private + */ + handleClickDocument_() { + dom.removeClasses(this.element.querySelectorAll('tr'), 'table-focus'); + } + + /** + * Handle focus the tr for add class `table-focus`. + * @private + */ + handleFocus_(event) { + const getFirstTable = dom.closest(event.target, 'table'); + const getFirstTr = dom.closest(event.target, 'tr'); + + dom.removeClasses(getFirstTable.querySelectorAll('tr'), 'table-focus'); + dom.addClasses(getFirstTr, 'table-focus'); + } + /** * Handle button sort in header. + * @private */ - handleButtonSortColumn_(event) { - this.emit('buttonSortClicked', event); + handleSortColumn_(event) { + this.emit('sortClick', event); } } From 11f29ed77917f0fe797ccda99aa997f08d25f260 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Fri, 15 Dec 2017 17:38:59 -0300 Subject: [PATCH 23/29] Add table-active when change checkbox and improve the using of groups in ClayTable --- packages/clay-table/src/ClayTable.js | 12 +- packages/clay-table/src/ClayTable.soy | 166 +++++++++++++++------- packages/clay-table/src/ClayTableItem.js | 23 +-- packages/clay-table/src/ClayTableItem.soy | 88 ++++-------- 4 files changed, 164 insertions(+), 125 deletions(-) diff --git a/packages/clay-table/src/ClayTable.js b/packages/clay-table/src/ClayTable.js index 1d73785ee..d54a59a80 100644 --- a/packages/clay-table/src/ClayTable.js +++ b/packages/clay-table/src/ClayTable.js @@ -44,6 +44,15 @@ class ClayTable extends Component { this.eventHandler_.removeAllListeners(); } + /** + * Propagate the change of the checkbox event. + * @param {!Event} event + * @private + */ + handleClickCheckbox_(event) { + this.emit('itemToggled', event); + } + /** * Handle click in document for remove the class `table-focus` of tr. * @private @@ -54,6 +63,7 @@ class ClayTable extends Component { /** * Handle focus the tr for add class `table-focus`. + * @param {!Event} event * @private */ handleFocus_(event) { @@ -69,7 +79,7 @@ class ClayTable extends Component { * @private */ handleSortColumn_(event) { - this.emit('sortClick', event); + this.emit('sortColumn', event); } } diff --git a/packages/clay-table/src/ClayTable.soy b/packages/clay-table/src/ClayTable.soy index 2aa418873..52df2e860 100644 --- a/packages/clay-table/src/ClayTable.soy +++ b/packages/clay-table/src/ClayTable.soy @@ -6,7 +6,8 @@ {template .render} {@param spritemap: string} {@param? elementClasses: string} - {@param? handleButtonSortColumn_: any} + {@param? handleClickCheckbox_: any} + {@param? handleSortColumn_: any} {@param? header: list<[ colSpan: int, elementClasses: string, @@ -43,6 +44,7 @@ group: string, inputName: string, inputValue: string, + items: list, selectable: bool, selectableElementClasses: string, selected: bool, @@ -79,64 +81,124 @@ {if $header}
- {if $item.label and not $item.sort} - {$item.label} - {elseif $item.sort and $item.label} - {let $icon: $item.sortDirection_ ?: 'down' /} - - {call ClayLink.render} - {param events: ['click': $handleButtonSortColumn_] /} - {param href: '#sort' /} - {param icon: 'order-arrow-' + $icon /} - {param iconAlignment: 'right' /} - {param label: $item.label /} - {param spritemap: $spritemap /} - {/call} - {/if} -
{/template} + +/** + * This renders a rows of the table. + */ +{template .body} + {@param items: list} + {@param spritemap: string} + {@param? handleClickCheckbox_: any} + + {foreach $item in $items} + {if $item.group} + + {$item.group} + + {if $item.items} + {foreach $itemToGroup in $item.items} + {call ClayTableItem.render} + {param actionColumnElementClasses: $itemToGroup.actionColumnElementClasses /} + {param actionItems: $itemToGroup.actionItems /} + {param columns: $itemToGroup.columns /} + {param disabled: $itemToGroup.disabled /} + {param events: ['itemToggled': $handleClickCheckbox_] /} + {param inputName: $itemToGroup.inputName /} + {param inputValue: $itemToGroup.inputValue /} + {param selectable: $itemToGroup.selectable /} + {param selectableElementClasses: $itemToGroup.selectableElementClasses /} + {param selected: $itemToGroup.selected /} + {param spritemap: $spritemap /} + {param stickerElementClasses: $itemToGroup.stickerElementClasses /} + {param stickerImageAlt: $itemToGroup.stickerImageAlt /} + {param stickerImageSrc: $itemToGroup.stickerImageSrc /} + {param stickerLabel: $itemToGroup.stickerLabel /} + {param stickerShape: $itemToGroup.stickerShape /} + {param stickerStyle: $itemToGroup.stickerStyle /} + {/call} + {/foreach} + {/if} + {else} + {call ClayTableItem.render} + {param actionColumnElementClasses: $item.actionColumnElementClasses /} + {param actionItems: $item.actionItems /} + {param columns: $item.columns /} + {param disabled: $item.disabled /} + {param events: ['itemToggled': $handleClickCheckbox_] /} + {param inputName: $item.inputName /} + {param inputValue: $item.inputValue /} + {param selectable: $item.selectable /} + {param selectableElementClasses: $item.selectableElementClasses /} + {param selected: $item.selected /} + {param spritemap: $spritemap /} + {param stickerElementClasses: $item.stickerElementClasses /} + {param stickerImageAlt: $item.stickerImageAlt /} + {param stickerImageSrc: $item.stickerImageSrc /} + {param stickerLabel: $item.stickerLabel /} + {param stickerShape: $item.stickerShape /} + {param stickerStyle: $item.stickerStyle /} + {/call} + {/if} + {/foreach} +{/template} + +/** + * This renders columns to the header of the table. + */ +{template .header} + {@param header: list} + {@param spritemap: string} + {@param? handleSortColumn_: any} + + {foreach $item in $header} + {let $thAttributes kind="attributes"} + class=" + {if $item.elementClasses} + {$item.elementClasses} + {/if} + " + + {if $item.colSpan} + colspan="{$item.colSpan}" + {/if} + {/let} + + + {if $item.label and not $item.sort} + {$item.label} + {elseif $item.sort and $item.label} + {let $icon: $item.sortDirection_ ?: 'down' /} + + {call ClayLink.render} + {param events: ['click': $handleSortColumn_] /} + {param href: '#sort' /} + {param icon: 'order-arrow-' + $icon /} + {param iconAlignment: 'right' /} + {param id: '' + index($item) /} + {param label: $item.label /} + {param spritemap: $spritemap /} + {/call} + {/if} + + {/foreach} +{/template} diff --git a/packages/clay-table/src/ClayTableItem.js b/packages/clay-table/src/ClayTableItem.js index 26c446277..ec6798329 100644 --- a/packages/clay-table/src/ClayTableItem.js +++ b/packages/clay-table/src/ClayTableItem.js @@ -9,6 +9,7 @@ import {actionsItemsValidator, columnsValidator} from './items_validator'; import {Config} from 'metal-state'; import Component from 'metal-component'; import defineWebComponent from 'metal-web-component'; +import dom from 'metal-dom'; import Soy from 'metal-soy'; import templates from './ClayTableItem.soy.js'; @@ -16,7 +17,18 @@ import templates from './ClayTableItem.soy.js'; /** * Metal ClayTableItem component. */ -class ClayTableItem extends Component {} +class ClayTableItem extends Component { + /** + * Handle input of type `checkbox` for add class `table-active` in tr. + * @param {!Event} event + * @private + */ + handleItemToggled_(event) { + dom.toggleClasses(this.element, 'table-active'); + + this.emit('itemToggled', event); + } +} /** * State definition. @@ -69,15 +81,6 @@ ClayTableItem.STATE = { */ disabled: Config.bool().value(false), - /** - * Table group separator. - * @instance - * @memberof ClayTableItem - * @type {?string|undefined} - * @default undefined - */ - group: Config.string(), - /** * Name to be applied to the input element. * @instance diff --git a/packages/clay-table/src/ClayTableItem.soy b/packages/clay-table/src/ClayTableItem.soy index 7808d31a0..aeec73323 100644 --- a/packages/clay-table/src/ClayTableItem.soy +++ b/packages/clay-table/src/ClayTableItem.soy @@ -30,7 +30,7 @@ ]>} {@param? contentRenderer: string} {@param? disabled: bool} - {@param? group: string} + {@param? handleItemToggled_: any} {@param? inputName: string} {@param? inputValue: string} {@param? selectable: bool} @@ -48,37 +48,30 @@ {if $selectable and $selected} table-active {/if} - - {if $group} - table-divider - {/if} " {/let} - {if $group} - {$group} - {else} - {call .content} - {param actionColumnElementClasses: $actionColumnElementClasses /} - {param actionItems: $actionItems /} - {param columns: $columns /} - {param contentRenderer: $contentRenderer /} - {param disabled: $disabled /} - {param inputName: $inputName /} - {param inputValue: $inputValue /} - {param selectable: $selectable /} - {param selectableElementClasses: $selectableElementClasses /} - {param selected: $selected /} - {param spritemap: $spritemap /} - {param stickerElementClasses: $stickerElementClasses /} - {param stickerImageAlt: $stickerImageAlt /} - {param stickerImageSrc: $stickerImageSrc /} - {param stickerLabel: $stickerLabel /} - {param stickerShape: $stickerShape /} - {param stickerStyle: $stickerStyle /} - {/call} - {/if} + {call .content} + {param actionColumnElementClasses: $actionColumnElementClasses /} + {param actionItems: $actionItems /} + {param columns: $columns /} + {param contentRenderer: $contentRenderer /} + {param disabled: $disabled /} + {param handleItemToggled_: $handleItemToggled_ /} + {param inputName: $inputName /} + {param inputValue: $inputValue /} + {param selectable: $selectable /} + {param selectableElementClasses: $selectableElementClasses /} + {param selected: $selected /} + {param spritemap: $spritemap /} + {param stickerElementClasses: $stickerElementClasses /} + {param stickerImageAlt: $stickerImageAlt /} + {param stickerImageSrc: $stickerImageSrc /} + {param stickerLabel: $stickerLabel /} + {param stickerShape: $stickerShape /} + {param stickerStyle: $stickerStyle /} + {/call} {/template} @@ -88,30 +81,11 @@ {template .content} {@param spritemap: string} {@param? actionColumnElementClasses: string} - {@param? actionItems: list<[ - disabled: bool, - href: string, - icon: string, - label: string, - quickAction: bool, - separator: bool - ]>} - {@param? columns: list<[ - elementClasses: string, - href: string, - label: string, - labelStyle: string, - progressBar: [ - maxValue: int, - minValue: int, - status: string, - value: int - ], - text: string, - useEllipse: bool - ]>} + {@param? actionItems: list} + {@param? columns: list} {@param? contentRenderer: string} {@param? disabled: bool} + {@param? handleItemToggled_: any} {@param? inputName: string} {@param? inputValue: string} {@param? selectable: bool} @@ -129,6 +103,7 @@ {call ClayCheckbox.render} {param checked: $selected /} {param disabled: $disabled /} + {param events: ['change': $handleItemToggled_] /} {param hideLabel: true /} {param name: $inputName /} {param value: $inputValue /} @@ -156,12 +131,9 @@ {if $columns} {foreach $column in $columns} - {let $isColumnFirst: index($column) == '0' and not $selectable or index($column) == '1' and $selectable /} - {delcall ClayTableItem.Column variant="$contentRenderer"} {param elementClasses: $column.elementClasses /} {param href: $column.href /} - {param isColumnFirst: $isColumnFirst /} {param label: $column.label /} {param labelStyle: $column.labelStyle /} {param progressBar: $column.progressBar /} @@ -192,7 +164,6 @@ {deltemplate ClayTableItem.Column} {@param? elementClasses: string} {@param? href: string} - {@param? isColumnFirst: bool} {@param? label: string} {@param? labelStyle: string} {@param? progressBar: [ @@ -269,14 +240,7 @@ * This renders the quick actions menu. */ {template .quickMenu} - {@param actionItems: list<[ - disabled: bool, - icon: string, - label: string, - quickAction: bool, - separator: bool, - href: string - ]>} + {@param actionItems: list} {@param spritemap: string}
From 8a90db1949b9dd80a78ca1c13e7f1639887f30fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Fri, 15 Dec 2017 17:44:24 -0300 Subject: [PATCH 24/29] Update the ClayTable demo using groups --- packages/clay-table/demos/index.html | 147 +++++++++++++++++++-------- 1 file changed, 102 insertions(+), 45 deletions(-) diff --git a/packages/clay-table/demos/index.html b/packages/clay-table/demos/index.html index e5901f72f..3ebd58777 100644 --- a/packages/clay-table/demos/index.html +++ b/packages/clay-table/demos/index.html @@ -122,20 +122,20 @@

Selectable Table with Selected Items

icon: 'trash', label: 'Option 1', quickAction: true, - url: '#1', + href: '#1', }, { icon: 'download', label: 'Option 2', quickAction: true, separator: true, - url: '#2', + href: '#2', }, { icon: 'info-circle-open', label: 'Option 3', quickAction: true, - url: '#3', + href: '#3', }, ]; @@ -601,55 +601,112 @@

Selectable Table with Selected Items

], items: [ { - actionItems: actionItemsWithQuickItems, - actionColumnElementClasses: 'custom-column', - columns: [ - { - text: 'Foo' - }, - { - label: 'Approved', - labelStyle: 'success' - }, - { - progressBar: { - maxValue: 100, - minValue: 0, - value: 80 - } + items: [ + { + actionItems: actionItemsWithQuickItems, + actionColumnElementClasses: 'custom-column', + columns: [ + { + text: 'Foo' + }, + { + label: 'Approved', + labelStyle: 'success' + }, + { + progressBar: { + maxValue: 100, + minValue: 0, + value: 80 + } + } + ], + selectable: true, + selectableElementClasses: 'custom-column', + stickerLabel: 'MT', + stickerStyle: 'danger', + stickerElementClasses: 'custom-column' + }, + { + actionItems: actionItemsWithQuickItems, + actionColumnElementClasses: 'custom-column', + columns: [ + { + text: 'Bar' + }, + { + label: 'Approved', + labelStyle: 'success' + }, + { + progressBar: { + maxValue: 100, + minValue: 0, + value: 80 + } + } + ], + selectable: true, + selectableElementClasses: 'custom-column', + stickerLabel: 'MT', + stickerStyle: 'danger', + stickerElementClasses: 'custom-column' } ], - selectable: true, - selectableElementClasses: 'custom-column', - stickerLabel: 'MT', - stickerStyle: 'danger', - stickerElementClasses: 'custom-column' - }, - { group: 'Group 1' }, { - actionItems: actionItemsWithQuickItems, - actionColumnElementClasses: 'custom-column', - columns: [ - { - text: 'Foo' - }, - { - label: 'In progress', - labelStyle: 'warning' - }, - { - progressBar: { - status: 'warning', - value: 20 - } + items: [ + { + actionItems: actionItemsWithQuickItems, + actionColumnElementClasses: 'custom-column', + columns: [ + { + text: 'Foo' + }, + { + label: 'In progress', + labelStyle: 'warning' + }, + { + progressBar: { + status: 'warning', + value: 20 + } + } + ], + selectable: true, + selectableElementClasses: 'custom-column', + stickerImageSrc: './image.jpg', + stickerElementClasses: 'custom-column' + }, + { + actionItems: actionItemsWithQuickItems, + actionColumnElementClasses: 'custom-column', + columns: [ + { + text: 'Bar' + }, + { + label: 'Approved', + labelStyle: 'success' + }, + { + progressBar: { + maxValue: 100, + minValue: 0, + value: 80 + } + } + ], + selectable: true, + selectableElementClasses: 'custom-column', + stickerLabel: 'MT', + stickerStyle: 'danger', + stickerElementClasses: 'custom-column' } ], - selectable: true, - selectableElementClasses: 'custom-column', - stickerImageSrc: './image.jpg', - stickerElementClasses: 'custom-column' + group: 'Group 2' } ], spritemap: spritemap From 89a22463ad8f9e957a4cd7c6b91346439cd3271e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Fri, 15 Dec 2017 18:02:04 -0300 Subject: [PATCH 25/29] Update the ClayTable and ClayTableItem test --- .../clay-table/src/__tests__/ClayTable.js | 34 +++++++++++++++++++ .../clay-table/src/__tests__/ClayTableItem.js | 26 ++++++++++++-- .../__tests__/__snapshots__/ClayTable.js.snap | 21 ++++++++++++ .../__snapshots__/ClayTableItem.js.snap | 6 ---- 4 files changed, 78 insertions(+), 9 deletions(-) diff --git a/packages/clay-table/src/__tests__/ClayTable.js b/packages/clay-table/src/__tests__/ClayTable.js index 47db71314..c3433aa7a 100644 --- a/packages/clay-table/src/__tests__/ClayTable.js +++ b/packages/clay-table/src/__tests__/ClayTable.js @@ -204,6 +204,40 @@ describe('ClayTable', function() { expect(component).toMatchSnapshot(); }); + it('should render the ClayTable with group', () => { + component = new ClayTable({ + items: [ + { + items: [ + { + columns: [ + { + text: 'Foo', + }, + ], + }, + ], + group: 'Group 1', + }, + { + items: [ + { + columns: [ + { + text: 'Foo', + }, + ], + }, + ], + group: 'Group 2', + }, + ], + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + it('should fail when no spritemap is passed', () => { expect(() => { component = new ClayTable(); diff --git a/packages/clay-table/src/__tests__/ClayTableItem.js b/packages/clay-table/src/__tests__/ClayTableItem.js index b1ec58a1d..439029851 100644 --- a/packages/clay-table/src/__tests__/ClayTableItem.js +++ b/packages/clay-table/src/__tests__/ClayTableItem.js @@ -386,13 +386,33 @@ describe('ClayTableItem', function() { expect(component).toMatchSnapshot(); }); - it('should render the ClayTableItem with group', () => { + it('should render a selectable ClayTableItem and emit an event on itemToggle', () => { component = new ClayTableItem({ - group: 'Group 1', + columns: [ + { + text: 'Foo', + }, + { + text: 'Bar', + href: '#1', + }, + { + text: 'Foo', + }, + { + text: 'Bar', + }, + ], + selectable: true, spritemap: spritemap, }); - expect(component).toMatchSnapshot(); + const spy = jest.spyOn(component, 'emit'); + + component.element.querySelector('input[type="checkbox"]').click(); + + expect(spy).toHaveBeenCalled(); + expect(spy).toHaveBeenCalledWith('itemToggled', expect.any(Object)); }); it('should fail when no spritemap is passed', () => { diff --git a/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap b/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap index c06f70c72..89369437f 100644 --- a/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap +++ b/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap @@ -120,6 +120,27 @@ exports[`ClayTable should render a ClayTable with size \`xl\` 1`] = `
`; +exports[`ClayTable should render the ClayTable with group 1`] = ` +
+ + + + + + + + + + + + + + + +
Group 1
Foo
Group 2
Foo
+
+`; + exports[`ClayTable should render the default markup 1`] = `
diff --git a/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap b/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap index d7971e69d..9203ecdf0 100644 --- a/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap +++ b/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap @@ -198,12 +198,6 @@ exports[`ClayTableItem should render the ClayTableItem with custom classes in co exports[`ClayTableItem should render the ClayTableItem with custom element class 1`] = ``; -exports[`ClayTableItem should render the ClayTableItem with group 1`] = ` - - Group 1 - -`; - exports[`ClayTableItem should render the ClayTableItem with id 1`] = ``; exports[`ClayTableItem should render the ClayTableItem with input name 1`] = ` From 473894103ceaa43321f7ab2079a2b9d56a2f8c69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Fri, 15 Dec 2017 18:03:55 -0300 Subject: [PATCH 26/29] Ignore ClayTable in mcritic --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 70597f2d8..2a88a95f5 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "jest": "jest", "lerna": "lerna bootstrap -- --no-optional --no-package-lock", "lint": "eslint packages/clay-*/src/*.js packages/clay-*/src/**/*.js && npm run mcritic", - "mcritic": "mcritic packages/ --ignore '**/{browserslist-config-clay-components,generator-metal-clay,clay-dropdown,clay-alert,clay-list,clay-management-toolbar,clay-card,node_modules}/**'", + "mcritic": "mcritic packages/ --ignore '**/{browserslist-config-clay-components,generator-metal-clay,clay-dropdown,clay-alert,clay-list,clay-management-toolbar,clay-card,clay-table,node_modules}/**'", "precommit": "lint-staged", "prettier": "prettier-eslint packages/clay-*/src/*.js packages/clay-*/src/**/*.js", "start": "http-server . -p 4000", From 9730ca69e04862a638a0046bf7f3610f7be21f09 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Fri, 15 Dec 2017 18:14:03 -0300 Subject: [PATCH 27/29] Update table-cell-content to table-cell-expand in ClayTableItem --- packages/clay-table/src/ClayTableItem.soy | 2 +- .../__tests__/__snapshots__/ClayTable.js.snap | 4 ++-- .../__snapshots__/ClayTableItem.js.snap | 22 +++++++++---------- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/clay-table/src/ClayTableItem.soy b/packages/clay-table/src/ClayTableItem.soy index aeec73323..cfdda1be9 100644 --- a/packages/clay-table/src/ClayTableItem.soy +++ b/packages/clay-table/src/ClayTableItem.soy @@ -210,7 +210,7 @@ {/if} {if $useEllipse} - {sp}table-cell-content + {sp}table-cell-expand {/if} {/let} diff --git a/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap b/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap index 89369437f..72c30f3d8 100644 --- a/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap +++ b/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap @@ -64,7 +64,7 @@ exports[`ClayTable should render a ClayTable with multiples items 1`] = ` - - - @@ -20,7 +20,7 @@ exports[`ClayTableItem should render ClayTableItem with sticker with image in co Image - @@ -37,7 +37,7 @@ exports[`ClayTableItem should render the ClayTableItem disabled 1`] = ` - - - - @@ -168,7 +168,7 @@ exports[`ClayTableItem should render the ClayTableItem with custom classes in co - @@ -185,7 +185,7 @@ exports[`ClayTableItem should render the ClayTableItem with custom classes in co - - - - From 8a0b1a9c8bc1d810da23e53cab66ac76164be33c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Fri, 15 Dec 2017 19:07:39 -0300 Subject: [PATCH 28/29] Improve the ClayTable API and add button support --- packages/clay-table/demos/index.html | 112 ++++++++++-------- packages/clay-table/package.json | 1 + packages/clay-table/src/ClayTable.soy | 3 +- packages/clay-table/src/ClayTableItem.js | 1 + packages/clay-table/src/ClayTableItem.soy | 41 ++++--- .../clay-table/src/__tests__/ClayTable.js | 30 ++--- .../clay-table/src/__tests__/ClayTableItem.js | 101 ++++++++++------ .../__snapshots__/ClayTableItem.js.snap | 24 ++++ packages/clay-table/src/items_validator.js | 5 +- 9 files changed, 203 insertions(+), 115 deletions(-) diff --git a/packages/clay-table/demos/index.html b/packages/clay-table/demos/index.html index 3ebd58777..5fcbf15c7 100644 --- a/packages/clay-table/demos/index.html +++ b/packages/clay-table/demos/index.html @@ -104,16 +104,16 @@

Selectable Table with Selected Items

let actionItems = [ { label: 'Option 1', - url: '#1', + href: '#1', }, { label: 'Option 2', separator: true, - url: '#2', + href: '#2', }, { label: 'Option 3', - url: '#3', + href: '#3', }, ]; @@ -155,20 +155,20 @@

Selectable Table with Selected Items

{ columns: [ { - text: 'Foo' + label: 'Foo' }, { - text: 'Bar' + label: 'Bar' } ] }, { columns: [ { - text: 'Foo' + label: 'Foo' }, { - text: 'Bar' + label: 'Bar' } ] } @@ -192,22 +192,22 @@

Selectable Table with Selected Items

{ columns: [ { - text: 'Foo', + label: 'Foo', href: '#foo' }, { - text: 'Bar' + label: 'Bar' } ] }, { columns: [ { - text: 'Foo', + label: 'Foo', href: '#foo' }, { - text: 'Bar' + label: 'Bar' } ] } @@ -231,22 +231,24 @@

Selectable Table with Selected Items

{ columns: [ { - text: 'Foo' + label: 'Foo' }, { label: 'Approved', - labelStyle: 'success' + labelStyle: 'success', + type: 'label' } ] }, { columns: [ { - text: 'Foo' + label: 'Foo' }, { label: 'In progress', - labelStyle: 'warning' + labelStyle: 'warning', + type: 'label' } ] } @@ -271,11 +273,12 @@

Selectable Table with Selected Items

{ columns: [ { - text: 'Foo' + label: 'Foo' }, { label: 'Approved', - labelStyle: 'success' + labelStyle: 'success', + type: 'label' }, { progressBar: { @@ -289,11 +292,12 @@

Selectable Table with Selected Items

{ columns: [ { - text: 'Foo' + label: 'Foo' }, { label: 'In progress', - labelStyle: 'warning' + labelStyle: 'warning', + type: 'label' }, { progressBar: { @@ -327,11 +331,12 @@

Selectable Table with Selected Items

{ columns: [ { - text: 'Foo' + label: 'Foo' }, { label: 'Approved', - labelStyle: 'success' + labelStyle: 'success', + type: 'label' }, { progressBar: { @@ -347,11 +352,12 @@

Selectable Table with Selected Items

{ columns: [ { - text: 'Foo' + label: 'Foo' }, { label: 'In progress', - labelStyle: 'warning' + labelStyle: 'warning', + type: 'label' }, { progressBar: { @@ -388,11 +394,12 @@

Selectable Table with Selected Items

{ columns: [ { - text: 'Foo' + label: 'Foo' }, { label: 'Approved', - labelStyle: 'success' + labelStyle: 'success', + type: 'label' }, { progressBar: { @@ -411,11 +418,12 @@

Selectable Table with Selected Items

{ columns: [ { - text: 'Foo' + label: 'Foo' }, { label: 'In progress', - labelStyle: 'warning' + labelStyle: 'warning', + type: 'label' }, { progressBar: { @@ -459,11 +467,12 @@

Selectable Table with Selected Items

actionColumnElementClasses: 'custom-column', columns: [ { - text: 'Foo' + label: 'Foo' }, { label: 'Approved', - labelStyle: 'success' + labelStyle: 'success', + type: 'label' }, { progressBar: { @@ -484,11 +493,12 @@

Selectable Table with Selected Items

actionColumnElementClasses: 'custom-column', columns: [ { - text: 'Foo' + label: 'Foo' }, { label: 'In progress', - labelStyle: 'warning' + labelStyle: 'warning', + type: 'label' }, { progressBar: { @@ -532,11 +542,12 @@

Selectable Table with Selected Items

actionColumnElementClasses: 'custom-column', columns: [ { - text: 'Foo' + label: 'Foo' }, { label: 'Approved', - labelStyle: 'success' + labelStyle: 'success', + type: 'label' }, { progressBar: { @@ -557,11 +568,12 @@

Selectable Table with Selected Items

actionColumnElementClasses: 'custom-column', columns: [ { - text: 'Foo' + label: 'Foo' }, { label: 'In progress', - labelStyle: 'warning' + labelStyle: 'warning', + type: 'label' }, { progressBar: { @@ -607,11 +619,12 @@

Selectable Table with Selected Items

actionColumnElementClasses: 'custom-column', columns: [ { - text: 'Foo' + label: 'Foo' }, { label: 'Approved', - labelStyle: 'success' + labelStyle: 'success', + type: 'label' }, { progressBar: { @@ -632,11 +645,12 @@

Selectable Table with Selected Items

actionColumnElementClasses: 'custom-column', columns: [ { - text: 'Bar' + label: 'Bar' }, { label: 'Approved', - labelStyle: 'success' + labelStyle: 'success', + type: 'label' }, { progressBar: { @@ -662,11 +676,12 @@

Selectable Table with Selected Items

actionColumnElementClasses: 'custom-column', columns: [ { - text: 'Foo' + label: 'Foo' }, { label: 'In progress', - labelStyle: 'warning' + labelStyle: 'warning', + type: 'label' }, { progressBar: { @@ -685,11 +700,12 @@

Selectable Table with Selected Items

actionColumnElementClasses: 'custom-column', columns: [ { - text: 'Bar' + label: 'Bar' }, { label: 'Approved', - labelStyle: 'success' + labelStyle: 'success', + type: 'label' }, { progressBar: { @@ -738,11 +754,12 @@

Selectable Table with Selected Items

actionColumnElementClasses: 'custom-column', columns: [ { - text: 'Foo' + label: 'Foo' }, { label: 'Approved', - labelStyle: 'success' + labelStyle: 'success', + type: 'label' }, { progressBar: { @@ -767,11 +784,12 @@

Selectable Table with Selected Items

actionColumnElementClasses: 'custom-column', columns: [ { - text: 'Foo' + label: 'Foo' }, { label: 'In progress', - labelStyle: 'warning' + labelStyle: 'warning', + type: 'label' }, { progressBar: { diff --git a/packages/clay-table/package.json b/packages/clay-table/package.json index b9d1daf37..1868c66aa 100644 --- a/packages/clay-table/package.json +++ b/packages/clay-table/package.json @@ -27,6 +27,7 @@ "metal" ], "dependencies": { + "clay-button": "^1.0.0-alpha.8", "clay-checkbox": "^1.0.0-alpha.5", "clay-dropdown": "^1.0.0-alpha.8", "clay-icon": "^1.0.0-alpha.5", diff --git a/packages/clay-table/src/ClayTable.soy b/packages/clay-table/src/ClayTable.soy index 52df2e860..d3defa41a 100644 --- a/packages/clay-table/src/ClayTable.soy +++ b/packages/clay-table/src/ClayTable.soy @@ -27,6 +27,7 @@ separator: bool ]>, columns: list<[ + buttonStyle: string, elementClasses: string, href: string, label: string, @@ -37,7 +38,7 @@ status: string, value: int ], - text: string, + type: string, useEllipse: bool ]>, disabled: bool, diff --git a/packages/clay-table/src/ClayTableItem.js b/packages/clay-table/src/ClayTableItem.js index ec6798329..511461cfa 100644 --- a/packages/clay-table/src/ClayTableItem.js +++ b/packages/clay-table/src/ClayTableItem.js @@ -1,3 +1,4 @@ +import 'clay-button'; import 'clay-checkbox'; import 'clay-dropdown'; import 'clay-icon'; diff --git a/packages/clay-table/src/ClayTableItem.soy b/packages/clay-table/src/ClayTableItem.soy index cfdda1be9..e636c8313 100644 --- a/packages/clay-table/src/ClayTableItem.soy +++ b/packages/clay-table/src/ClayTableItem.soy @@ -15,6 +15,7 @@ separator: bool ]>} {@param? columns: list<[ + buttonStyle: string, elementClasses: string, href: string, label: string, @@ -25,7 +26,7 @@ status: string, value: int ], - text: string, + type: string, useEllipse: bool ]>} {@param? contentRenderer: string} @@ -132,12 +133,13 @@ {if $columns} {foreach $column in $columns} {delcall ClayTableItem.Column variant="$contentRenderer"} + {param buttonStyle: $column.buttonStyle /} {param elementClasses: $column.elementClasses /} {param href: $column.href /} {param label: $column.label /} {param labelStyle: $column.labelStyle /} {param progressBar: $column.progressBar /} - {param text: $column.text /} + {param type: $column.type ?: 'text' /} {param useEllipse: $column.useEllipse /} {/delcall} {/foreach} @@ -162,6 +164,7 @@ * This renders a multiples columns of the row. */ {deltemplate ClayTableItem.Column} + {@param? buttonStyle: string} {@param? elementClasses: string} {@param? href: string} {@param? label: string} @@ -172,18 +175,18 @@ status: string, value: int ]} - {@param? text: string} + {@param? type: string} {@param? useEllipse: bool} - {let $textContent kind="html"} - {call .text} + {let $labelContent kind="html"} + {call .label} {param href: $href /} - {param text: $text /} + {param label: $label /} {/call} {/let} {let $content kind="html"} - {if $label} + {if $type == 'label'} {call ClayLabel.render} {param label: $label /} {param style: $labelStyle /} @@ -195,11 +198,17 @@ {param status: $progressBar.status /} {param value: $progressBar.value /} {/call} - {elseif $text} + {elseif $type == 'button'} + {call ClayButton.render} + {param label: $label /} + {param size: 'sm' /} + {param style: $labelStyle /} + {/call} + {elseif $type == 'text'} {if $useEllipse} - {$textContent} + {$labelContent} {else} - {$textContent} + {$labelContent} {/if} {/if} {/let} @@ -222,17 +231,17 @@ /** * This renders a text of the column. */ -{template .text} +{template .label} {@param? href: string} - {@param? text: string} + {@param? label: string} - {if $text and not $href} - {$text} - {elseif $text and $href} + {if $label and $href} {call ClayLink.render} {param href: $href /} - {param label: $text /} + {param label: $label /} {/call} + {else} + {$label} {/if} {/template} diff --git a/packages/clay-table/src/__tests__/ClayTable.js b/packages/clay-table/src/__tests__/ClayTable.js index c3433aa7a..528cf83a3 100644 --- a/packages/clay-table/src/__tests__/ClayTable.js +++ b/packages/clay-table/src/__tests__/ClayTable.js @@ -7,24 +7,25 @@ let items = [ columns: [ { href: '#1', - text: 'suffing-photo.png', + label: 'suffing-photo.png', useEllipse: true, }, { - text: 'Juan Anton', + label: 'Juan Anton', }, { - text: '264KB', + label: '264KB', }, { label: 'Approved', labelStyle: 'success', + type: 'label', }, { - text: '15 Minutes Ago', + label: '15 Minutes Ago', }, { - text: '15 Minutes Ago', + label: '15 Minutes Ago', }, ], }, @@ -32,24 +33,25 @@ let items = [ columns: [ { href: '#1', - text: 'suffing-photo.png', + label: 'suffing-photo.png', useEllipse: true, }, { - text: 'Juan Anton', + label: 'Juan Anton', }, { - text: '264KB', + label: '264KB', }, { label: 'Approved', labelStyle: 'success', + type: 'label', }, { - text: '15 Minutes Ago', + label: '15 Minutes Ago', }, { - text: '15 Minutes Ago', + label: '15 Minutes Ago', }, ], }, @@ -189,11 +191,11 @@ describe('ClayTable', function() { columns: [ { elementClasses: 'custom1-column', - text: 'Foo', + label: 'Foo', }, { elementClasses: 'custom2-column', - text: 'Bar', + label: 'Bar', }, ], }, @@ -212,7 +214,7 @@ describe('ClayTable', function() { { columns: [ { - text: 'Foo', + label: 'Foo', }, ], }, @@ -224,7 +226,7 @@ describe('ClayTable', function() { { columns: [ { - text: 'Foo', + label: 'Foo', }, ], }, diff --git a/packages/clay-table/src/__tests__/ClayTableItem.js b/packages/clay-table/src/__tests__/ClayTableItem.js index 439029851..6318a3c4c 100644 --- a/packages/clay-table/src/__tests__/ClayTableItem.js +++ b/packages/clay-table/src/__tests__/ClayTableItem.js @@ -40,18 +40,18 @@ describe('ClayTableItem', function() { component = new ClayTableItem({ columns: [ { - text: 'Foo', + label: 'Foo', useEllipse: true, }, { - text: 'Bar', + label: 'Bar', url: '#1', }, { - text: 'Foo', + label: 'Foo', }, { - text: 'Bar', + label: 'Bar', }, ], spritemap: spritemap, @@ -64,7 +64,7 @@ describe('ClayTableItem', function() { component = new ClayTableItem({ columns: [ { - text: 'Name', + label: 'Name', useEllipse: true, }, ], @@ -80,7 +80,7 @@ describe('ClayTableItem', function() { component = new ClayTableItem({ columns: [ { - text: 'Name', + label: 'Name', useEllipse: true, }, ], @@ -97,7 +97,7 @@ describe('ClayTableItem', function() { component = new ClayTableItem({ columns: [ { - text: 'Name', + label: 'Name', useEllipse: true, }, ], @@ -113,7 +113,7 @@ describe('ClayTableItem', function() { component = new ClayTableItem({ columns: [ { - text: 'Name', + label: 'Name', useEllipse: true, }, ], @@ -147,6 +147,7 @@ describe('ClayTableItem', function() { { label: 'Approved', labelStyle: 'success', + type: 'label', }, ], spritemap: spritemap, @@ -235,18 +236,18 @@ describe('ClayTableItem', function() { component = new ClayTableItem({ columns: [ { - text: 'Foo', + label: 'Foo', useEllipse: true, }, { - text: 'Bar', + label: 'Bar', href: '#1', }, { - text: 'Foo', + label: 'Foo', }, { - text: 'Bar', + label: 'Bar', }, ], selectable: true, @@ -260,18 +261,18 @@ describe('ClayTableItem', function() { component = new ClayTableItem({ columns: [ { - text: 'Foo', + label: 'Foo', useEllipse: true, }, { - text: 'Bar', + label: 'Bar', href: '#1', }, { - text: 'Foo', + label: 'Foo', }, { - text: 'Bar', + label: 'Bar', }, ], selectable: true, @@ -286,18 +287,18 @@ describe('ClayTableItem', function() { component = new ClayTableItem({ columns: [ { - text: 'Foo', + label: 'Foo', useEllipse: true, }, { - text: 'Bar', + label: 'Bar', href: '#1', }, { - text: 'Foo', + label: 'Foo', }, { - text: 'Bar', + label: 'Bar', }, ], selectable: true, @@ -312,18 +313,18 @@ describe('ClayTableItem', function() { component = new ClayTableItem({ columns: [ { - text: 'Foo', + label: 'Foo', useEllipse: true, }, { - text: 'Bar', + label: 'Bar', href: '#1', }, { - text: 'Foo', + label: 'Foo', }, { - text: 'Bar', + label: 'Bar', }, ], selectable: true, @@ -338,18 +339,18 @@ describe('ClayTableItem', function() { component = new ClayTableItem({ columns: [ { - text: 'Foo', + label: 'Foo', useEllipse: true, }, { - text: 'Bar', + label: 'Bar', href: '#1', }, { - text: 'Foo', + label: 'Foo', }, { - text: 'Bar', + label: 'Bar', }, ], inputName: 'name', @@ -364,18 +365,18 @@ describe('ClayTableItem', function() { component = new ClayTableItem({ columns: [ { - text: 'Foo', + label: 'Foo', useEllipse: true, }, { - text: 'Bar', + label: 'Bar', href: '#1', }, { - text: 'Foo', + label: 'Foo', }, { - text: 'Bar', + label: 'Bar', }, ], inputValue: 'value', @@ -390,17 +391,17 @@ describe('ClayTableItem', function() { component = new ClayTableItem({ columns: [ { - text: 'Foo', + label: 'Foo', }, { - text: 'Bar', + label: 'Bar', href: '#1', }, { - text: 'Foo', + label: 'Foo', }, { - text: 'Bar', + label: 'Bar', }, ], selectable: true, @@ -415,6 +416,34 @@ describe('ClayTableItem', function() { expect(spy).toHaveBeenCalledWith('itemToggled', expect.any(Object)); }); + it('should render the ClayTableItem with button', () => { + component = new ClayTableItem({ + columns: [ + { + label: 'Foo', + useEllipse: true, + }, + { + label: 'Bar', + href: '#1', + }, + { + label: 'Foo', + }, + { + label: 'Bar', + buttonStyle: 'primary', + type: 'button', + }, + ], + inputValue: 'value', + selectable: true, + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + it('should fail when no spritemap is passed', () => { expect(() => { component = new ClayTableItem(); diff --git a/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap b/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap index 128347069..3fe6c52e8 100644 --- a/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap +++ b/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap @@ -122,6 +122,30 @@ exports[`ClayTableItem should render the ClayTableItem with action menu 1`] = ` `; +exports[`ClayTableItem should render the ClayTableItem with button 1`] = ` + + + + + + + +`; + exports[`ClayTableItem should render the ClayTableItem with columns 1`] = `
+ suffing-photo.png @@ -78,7 +78,7 @@ exports[`ClayTable should render a ClayTable with multiples items 1`] = ` 15 Minutes Ago
+ suffing-photo.png diff --git a/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap b/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap index 9203ecdf0..128347069 100644 --- a/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap +++ b/packages/clay-table/src/__tests__/__snapshots__/ClayTableItem.js.snap @@ -7,7 +7,7 @@ exports[`ClayTableItem should render ClayTableItem with sticker shape \`rounded\ Image + Name
+ Name
+ Foo @@ -59,7 +59,7 @@ exports[`ClayTableItem should render the ClayTableItem selectable 1`] = ` + Foo @@ -81,7 +81,7 @@ exports[`ClayTableItem should render the ClayTableItem selected 1`] = ` + Foo @@ -124,7 +124,7 @@ exports[`ClayTableItem should render the ClayTableItem with action menu 1`] = ` exports[`ClayTableItem should render the ClayTableItem with columns 1`] = `
+ Foo Bar AA + Name
+ Foo @@ -211,7 +211,7 @@ exports[`ClayTableItem should render the ClayTableItem with input name 1`] = ` + Foo @@ -233,7 +233,7 @@ exports[`ClayTableItem should render the ClayTableItem with input value 1`] = ` + Foo @@ -319,7 +319,7 @@ exports[`ClayTableItem should render the ClayTableItem with user sticker in the AA + Name
+
+ +
+ 		+ Foo + + Bar + Foo + +
diff --git a/packages/clay-table/src/items_validator.js b/packages/clay-table/src/items_validator.js index a42d99df3..1478b49b8 100644 --- a/packages/clay-table/src/items_validator.js +++ b/packages/clay-table/src/items_validator.js @@ -10,6 +10,9 @@ let actionItems = { }; let columns = { + buttonStyle: Config.oneOf(['link', 'primary', 'secondary']).value( + 'primary' + ), elementClasses: Config.string(), href: Config.string(), label: Config.string(), @@ -26,7 +29,7 @@ let columns = { status: Config.oneOf(['complete', 'warning']), value: Config.number(), }), - text: Config.string(), + type: Config.oneOf(['text', 'button', 'label']).value('text'), useEllipse: Config.bool().value(false), }; From c34ee52e56b43260307efc09e54a05c83698481c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= Date: Fri, 15 Dec 2017 20:21:18 -0300 Subject: [PATCH 29/29] SF --- packages/clay-table/src/ClayTable.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/clay-table/src/ClayTable.js b/packages/clay-table/src/ClayTable.js index d54a59a80..7a9185789 100644 --- a/packages/clay-table/src/ClayTable.js +++ b/packages/clay-table/src/ClayTable.js @@ -76,6 +76,7 @@ class ClayTable extends Component { /** * Handle button sort in header. + * @param {!Event} event * @private */ handleSortColumn_(event) {