From d04315db4f1e4de4c94873fc8344d4618b6c247c Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Thu, 28 Dec 2017 18:57:29 +0100 Subject: [PATCH 01/21] Update ClayList to use schema design --- packages/clay-list/src/ClayList.js | 53 +++++++++++------------------ packages/clay-list/src/ClayList.soy | 53 +++++++++++++---------------- 2 files changed, 43 insertions(+), 63 deletions(-) diff --git a/packages/clay-list/src/ClayList.js b/packages/clay-list/src/ClayList.js index 3f1c88571..adf2f03a4 100644 --- a/packages/clay-list/src/ClayList.js +++ b/packages/clay-list/src/ClayList.js @@ -54,41 +54,10 @@ ClayList.STATE = { * List of items. * @instance * @memberof ClayList - * @type {!array} + * @type {?array|undefined} * @default undefined */ - items: Config.arrayOf( - Config.shapeOf({ - actionItems: Config.arrayOf( - Config.shapeOf({ - disabled: Config.bool().value(false), - href: Config.string().required(), - icon: Config.string(), - label: Config.string().required(), - quickAction: Config.bool(), - separator: Config.bool().value(false), - }) - ), - description: Config.string(), - href: Config.string(), - icon: Config.string(), - iconShape: Config.oneOf(['circle', 'rounded']).value('rounded'), - labels: Config.arrayOf( - Config.shapeOf({ - label: Config.string(), - style: Config.oneOf([ - 'danger', - 'info', - 'secondary', - 'success', - 'warning', - ]).value('secondary'), - }) - ), - selected: Config.bool().value(false), - title: Config.string().required(), - }) - ).required(), + items: Config.array(), /** * Flag to indicate if the list group items are selectable. @@ -99,6 +68,24 @@ ClayList.STATE = { */ selectable: Config.bool().value(false), + /** + * Schema mapping list item fields with item data properties. + * @instance + * @memberof ClayList + * @type {!object} + * @default undefined + */ + schema: Config.shapeOf({ + actionItems: Config.string(), + description: Config.string(), + href: Config.string(), + icon: Config.string(), + iconShape: Config.string(), + labels: Config.string(), + selected: Config.string(), + title: Config.string(), + }).required(), + /** * The path to the SVG spritemap file containing the icons. * @instance diff --git a/packages/clay-list/src/ClayList.soy b/packages/clay-list/src/ClayList.soy index 830634e3d..7d9cf5dc3 100644 --- a/packages/clay-list/src/ClayList.soy +++ b/packages/clay-list/src/ClayList.soy @@ -4,29 +4,20 @@ * This renders the component's whole content. */ {template .render} - {@param items: list<[ - actionItems: list<[ - disabled: bool, - href: string, - icon: string, - label: string, - quickAction: bool, - separator: bool - ]>, + {@param schema: [ + actionItems: string, description: string, href: string, icon: string, iconShape: string, - labels: list<[ - label: string, - style: string - ]>, - selected: bool, + labels: string, + selected: string, title: string - ]>} + ]} {@param? elementClasses: string} {@param? handleItemToggled_: any} {@param? id: string} + {@param? items: list} {@param? selectable: bool} {@param? spritemap: string} {@param? title: string} @@ -50,20 +41,22 @@ {/if} - {foreach $item in $items} - {call ClayListItem.render} - {param actionItems: $item.actionItems /} - {param description: $item.description /} - {param events: ['itemToggled': $handleItemToggled_ ] /} - {param href: $item.href /} - {param icon: $item.icon /} - {param iconShape: $item.iconShape /} - {param labels: $item.labels /} - {param selectable: $selectable /} - {param selected: $item.selected /} - {param spritemap: $spritemap /} - {param title: $item.title /} - {/call} - {/foreach} + {if $items} + {foreach $item in $items} + {call ClayListItem.render} + {param actionItems: $item[$schema.actionItems] ?: $item.actionItems /} + {param description: $item[$schema.description] ?: $item.description /} + {param events: ['itemToggled': $handleItemToggled_ ] /} + {param href: $item[$schema.href] ?: $item.href /} + {param icon: $item[$schema.icon] ?: $item.icon /} + {param iconShape: $item[$schema.iconShape] ?: $item.iconShape /} + {param labels: $item[$schema.labels] ?: $item.labels /} + {param selectable: $selectable /} + {param selected: $item[$schema.selected] ?: $item.selected /} + {param spritemap: $spritemap /} + {param title: $item[$schema.title] ?: $item.title /} + {/call} + {/foreach} + {/if} {/template} \ No newline at end of file From 04ed614702cf2af739275cab1ad95faea50e5920 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Thu, 28 Dec 2017 18:57:39 +0100 Subject: [PATCH 02/21] Update ClayList demo --- packages/clay-list/demos/index.html | 459 ++++++++-------------------- 1 file changed, 128 insertions(+), 331 deletions(-) diff --git a/packages/clay-list/demos/index.html b/packages/clay-list/demos/index.html index 2048d2f0d..968c44559 100644 --- a/packages/clay-list/demos/index.html +++ b/packages/clay-list/demos/index.html @@ -73,425 +73,222 @@

Selectable List with Label

-
-
-

Selectable List with Action Menu

-
-
-
-

Selectable List with Quick Action Menu

-
+

Selectable List with Header Title

-
+

Selectable List with Selected Items

-
+
From fb28c41e2009d426509773b899fde4fa70ec3bc6 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Thu, 28 Dec 2017 19:14:20 +0100 Subject: [PATCH 03/21] Icon shapes in ClayList can be configure by regex --- packages/clay-list/src/ClayList.js | 2 +- packages/clay-list/src/ClayList.soy | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/clay-list/src/ClayList.js b/packages/clay-list/src/ClayList.js index adf2f03a4..a6e526aa4 100644 --- a/packages/clay-list/src/ClayList.js +++ b/packages/clay-list/src/ClayList.js @@ -80,7 +80,7 @@ ClayList.STATE = { description: Config.string(), href: Config.string(), icon: Config.string(), - iconShape: Config.string(), + iconShapesMap: Config.object(), labels: Config.string(), selected: Config.string(), title: Config.string(), diff --git a/packages/clay-list/src/ClayList.soy b/packages/clay-list/src/ClayList.soy index 7d9cf5dc3..04840ae0f 100644 --- a/packages/clay-list/src/ClayList.soy +++ b/packages/clay-list/src/ClayList.soy @@ -9,7 +9,7 @@ description: string, href: string, icon: string, - iconShape: string, + iconShapesMap: ?, labels: string, selected: string, title: string @@ -41,6 +41,7 @@ {/if} + {if $items} {foreach $item in $items} {call ClayListItem.render} @@ -49,7 +50,7 @@ {param events: ['itemToggled': $handleItemToggled_ ] /} {param href: $item[$schema.href] ?: $item.href /} {param icon: $item[$schema.icon] ?: $item.icon /} - {param iconShape: $item[$schema.iconShape] ?: $item.iconShape /} + {param iconShape: $schema.iconShapesMap ? $schema.iconShapesMap[$item.icon] ?: $schema.iconShapesMap['*'] : null /} {param labels: $item[$schema.labels] ?: $item.labels /} {param selectable: $selectable /} {param selected: $item[$schema.selected] ?: $item.selected /} From 42cd6723f8198afa388e5de1606b317e01e5583b Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Thu, 28 Dec 2017 19:14:27 +0100 Subject: [PATCH 04/21] Update ClayList demo --- packages/clay-list/demos/index.html | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/packages/clay-list/demos/index.html b/packages/clay-list/demos/index.html index 968c44559..db54e075e 100644 --- a/packages/clay-list/demos/index.html +++ b/packages/clay-list/demos/index.html @@ -125,7 +125,6 @@

Selectable List with Selected Items

descriptionField: 'Description 1', hrefField: '#1', iconField: 'folder', - iconShapeField: 'circle', labelsField: [ { label: 'Pending', @@ -139,7 +138,6 @@

Selectable List with Selected Items

descriptionField: 'Description 2', hrefField: '#2', iconField: 'folder', - iconShapeField: 'circle', labelsField: [ { label: 'Pending', @@ -153,7 +151,6 @@

Selectable List with Selected Items

descriptionField: 'Description 3', hrefField: '#3', iconField: 'folder', - iconShapeField: 'circle', labelsField: [ { label: 'Pending', @@ -216,7 +213,9 @@

Selectable List with Selected Items

description: 'descriptionField', href: 'hrefField', icon: 'iconField', - iconShape: 'iconShapeField', + iconShapesMap: { + '*': 'circle', + }, title: 'titleField', }, selectable: true, @@ -229,7 +228,9 @@

Selectable List with Selected Items

description: 'descriptionField', href: 'hrefField', icon: 'iconField', - iconShape: 'iconShapeField', + iconShapesMap: { + '*': 'circle', + }, labels: 'labelsField', title: 'titleField', }, @@ -244,7 +245,9 @@

Selectable List with Selected Items

description: 'descriptionField', href: 'hrefField', icon: 'iconField', - iconShape: 'iconShapeField', + iconShapesMap: { + '*': 'circle', + }, labels: 'labelsField', title: 'titleField', }, @@ -259,7 +262,9 @@

Selectable List with Selected Items

description: 'descriptionField', href: 'hrefField', icon: 'iconField', - iconShape: 'iconShapeField', + iconShapesMap: { + '*': 'circle', + }, labels: 'labelsField', title: 'titleField', }, @@ -268,7 +273,7 @@

Selectable List with Selected Items

title: 'Group Header 1', }, '#container9'); - + items[0].selected = true; items[1].selected = true; items[2].selected = true; @@ -280,7 +285,9 @@

Selectable List with Selected Items

description: 'descriptionField', href: 'hrefField', icon: 'iconField', - iconShape: 'iconShapeField', + iconShapesMap: { + '*': 'circle', + }, labels: 'labelsField', title: 'titleField', }, From 1cd1fa799479981c920bfef5faf025eaf316e592 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Thu, 28 Dec 2017 19:31:11 +0100 Subject: [PATCH 05/21] Icons in ClayList can be configure by regex --- packages/clay-list/src/ClayList.js | 1 + packages/clay-list/src/ClayList.soy | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/clay-list/src/ClayList.js b/packages/clay-list/src/ClayList.js index a6e526aa4..7ba680316 100644 --- a/packages/clay-list/src/ClayList.js +++ b/packages/clay-list/src/ClayList.js @@ -81,6 +81,7 @@ ClayList.STATE = { href: Config.string(), icon: Config.string(), iconShapesMap: Config.object(), + iconsMap: Config.object(), labels: Config.string(), selected: Config.string(), title: Config.string(), diff --git a/packages/clay-list/src/ClayList.soy b/packages/clay-list/src/ClayList.soy index 04840ae0f..258a33053 100644 --- a/packages/clay-list/src/ClayList.soy +++ b/packages/clay-list/src/ClayList.soy @@ -9,6 +9,7 @@ description: string, href: string, icon: string, + iconsMap: ?, iconShapesMap: ?, labels: string, selected: string, @@ -49,7 +50,7 @@ {param description: $item[$schema.description] ?: $item.description /} {param events: ['itemToggled': $handleItemToggled_ ] /} {param href: $item[$schema.href] ?: $item.href /} - {param icon: $item[$schema.icon] ?: $item.icon /} + {param icon: $schema.iconsMap and $schema.icon ? $schema.iconsMap[$item[$schema.icon]] ?: $schema.iconsMap['*'] : $item[$schema.icon] /} {param iconShape: $schema.iconShapesMap ? $schema.iconShapesMap[$item.icon] ?: $schema.iconShapesMap['*'] : null /} {param labels: $item[$schema.labels] ?: $item.labels /} {param selectable: $selectable /} From 7cd5c1ed4ce6d40b871af0b7200e296377fd7412 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Thu, 28 Dec 2017 19:32:08 +0100 Subject: [PATCH 06/21] Update ClayList demo --- packages/clay-list/demos/index.html | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/clay-list/demos/index.html b/packages/clay-list/demos/index.html index db54e075e..e63cf1134 100644 --- a/packages/clay-list/demos/index.html +++ b/packages/clay-list/demos/index.html @@ -201,6 +201,9 @@

Selectable List with Selected Items

description: 'descriptionField', href: 'hrefField', icon: 'iconField', + iconsMap: { + '*': 'folder', + }, title: 'titleField', }, selectable: true, @@ -213,6 +216,9 @@

Selectable List with Selected Items

description: 'descriptionField', href: 'hrefField', icon: 'iconField', + iconsMap: { + '*': 'folder', + }, iconShapesMap: { '*': 'circle', }, @@ -228,6 +234,9 @@

Selectable List with Selected Items

description: 'descriptionField', href: 'hrefField', icon: 'iconField', + iconsMap: { + '*': 'folder', + }, iconShapesMap: { '*': 'circle', }, @@ -245,6 +254,9 @@

Selectable List with Selected Items

description: 'descriptionField', href: 'hrefField', icon: 'iconField', + iconsMap: { + '*': 'folder', + }, iconShapesMap: { '*': 'circle', }, @@ -262,6 +274,9 @@

Selectable List with Selected Items

description: 'descriptionField', href: 'hrefField', icon: 'iconField', + iconsMap: { + '*': 'folder', + }, iconShapesMap: { '*': 'circle', }, @@ -285,6 +300,9 @@

Selectable List with Selected Items

description: 'descriptionField', href: 'hrefField', icon: 'iconField', + iconsMap: { + '*': 'folder', + }, iconShapesMap: { '*': 'circle', }, From 4fc192df2fa60bd8ae0c39260a4b7bec8fa0f06f Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Thu, 28 Dec 2017 19:43:36 +0100 Subject: [PATCH 07/21] Labels styles in ClayList can be configure by regex --- packages/clay-list/src/ClayList.js | 1 + packages/clay-list/src/ClayList.soy | 2 ++ packages/clay-list/src/ClayListItem.js | 24 +++++++++++------------- packages/clay-list/src/ClayListItem.soy | 17 +++++++---------- 4 files changed, 21 insertions(+), 23 deletions(-) diff --git a/packages/clay-list/src/ClayList.js b/packages/clay-list/src/ClayList.js index 7ba680316..6c034ca83 100644 --- a/packages/clay-list/src/ClayList.js +++ b/packages/clay-list/src/ClayList.js @@ -83,6 +83,7 @@ ClayList.STATE = { iconShapesMap: Config.object(), iconsMap: Config.object(), labels: Config.string(), + labelsStylesMap: Config.object(), selected: Config.string(), title: Config.string(), }).required(), diff --git a/packages/clay-list/src/ClayList.soy b/packages/clay-list/src/ClayList.soy index 258a33053..fa9b8c15d 100644 --- a/packages/clay-list/src/ClayList.soy +++ b/packages/clay-list/src/ClayList.soy @@ -12,6 +12,7 @@ iconsMap: ?, iconShapesMap: ?, labels: string, + labelsStylesMap: ?, selected: string, title: string ]} @@ -53,6 +54,7 @@ {param icon: $schema.iconsMap and $schema.icon ? $schema.iconsMap[$item[$schema.icon]] ?: $schema.iconsMap['*'] : $item[$schema.icon] /} {param iconShape: $schema.iconShapesMap ? $schema.iconShapesMap[$item.icon] ?: $schema.iconShapesMap['*'] : null /} {param labels: $item[$schema.labels] ?: $item.labels /} + {param labelsStylesMap: $schema.labelsStylesMap /} {param selectable: $selectable /} {param selected: $item[$schema.selected] ?: $item.selected /} {param spritemap: $spritemap /} diff --git a/packages/clay-list/src/ClayListItem.js b/packages/clay-list/src/ClayListItem.js index e3a03702b..d1b5352da 100644 --- a/packages/clay-list/src/ClayListItem.js +++ b/packages/clay-list/src/ClayListItem.js @@ -116,22 +116,20 @@ ClayListItem.STATE = { /** * Labels of the list item. * @instance - * @memberof ClayCard + * @memberof ClayListItem * @type {?array|undefined} * @default undefined */ - labels: Config.arrayOf( - Config.shapeOf({ - label: Config.string(), - style: Config.oneOf([ - 'danger', - 'info', - 'secondary', - 'success', - 'warning', - ]).value('secondary'), - }) - ), + labels: Config.arrayOf(Config.string()), + + /** + * Labels styles map. + * @instance + * @memberof ClayListItem + * @type {?object|undefined} + * @default undefined + */ + labelsStylesMap: Config.object(), /** * Flag to indicate if the list item is selectable. diff --git a/packages/clay-list/src/ClayListItem.soy b/packages/clay-list/src/ClayListItem.soy index 5171b76b2..90cd29096 100644 --- a/packages/clay-list/src/ClayListItem.soy +++ b/packages/clay-list/src/ClayListItem.soy @@ -21,10 +21,8 @@ {@param? icon: string} {@param? iconShape: string} {@param? id: string} - {@param? labels: list<[ - label: string, - style: string - ]>} + {@param? labels: list} + {@param? labelsStylesMap: ?} {@param? selectable: bool} {@param? selected: bool} {@param? spritemap: string} @@ -77,6 +75,7 @@ {param description: $description /} {param href: $href /} {param labels: $labels /} + {param labelsStylesMap: $labelsStylesMap /} {param spritemap: $spritemap /} {param title: $title /} {/delcall} @@ -133,10 +132,8 @@ {@param title: string} {@param? description: string} {@param? href: string} - {@param? labels: list<[ - label: string, - style: string - ]>} + {@param? labels: list} + {@param? labelsStylesMap: ?} {@param? spritemap: string}
@@ -159,8 +156,8 @@
{foreach $label in $labels} {call ClayLabel.render} - {param label: $label.label /} - {param style: $label.style /} + {param label: $label /} + {param style: $labelsStylesMap ? $labelsStylesMap[$label] ?: $labelsStylesMap['*'] : null /} {/call} {/foreach}
From 685ac04b9d9eb3f5c509eecaee420b8266af0ea0 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Thu, 28 Dec 2017 19:43:50 +0100 Subject: [PATCH 08/21] Update ClayList demo --- packages/clay-list/demos/index.html | 41 ++++++++++++++++------------- 1 file changed, 23 insertions(+), 18 deletions(-) diff --git a/packages/clay-list/demos/index.html b/packages/clay-list/demos/index.html index e63cf1134..cdd30aa20 100644 --- a/packages/clay-list/demos/index.html +++ b/packages/clay-list/demos/index.html @@ -125,12 +125,7 @@

Selectable List with Selected Items

descriptionField: 'Description 1', hrefField: '#1', iconField: 'folder', - labelsField: [ - { - label: 'Pending', - style: 'warning', - }, - ], + labelsField: ['Pending'], titleField: 'Item 1', }, { @@ -138,12 +133,7 @@

Selectable List with Selected Items

descriptionField: 'Description 2', hrefField: '#2', iconField: 'folder', - labelsField: [ - { - label: 'Pending', - style: 'warning', - }, - ], + labelsField: ['Watched'], titleField: 'Item 2', }, { @@ -151,12 +141,7 @@

Selectable List with Selected Items

descriptionField: 'Description 3', hrefField: '#3', iconField: 'folder', - labelsField: [ - { - label: 'Pending', - style: 'warning', - }, - ], + labelsField: ['Pending'], titleField: 'Item 3', }, ]; @@ -241,6 +226,11 @@

Selectable List with Selected Items

'*': 'circle', }, labels: 'labelsField', + labelsStylesMap: { + 'Watched': 'success', + 'Pending': 'warning', + '*': 'danger', + }, title: 'titleField', }, selectable: true, @@ -261,6 +251,11 @@

Selectable List with Selected Items

'*': 'circle', }, labels: 'labelsField', + labelsStylesMap: { + 'Watched': 'success', + 'Pending': 'warning', + '*': 'danger', + }, title: 'titleField', }, selectable: true, @@ -281,6 +276,11 @@

Selectable List with Selected Items

'*': 'circle', }, labels: 'labelsField', + labelsStylesMap: { + 'Watched': 'success', + 'Pending': 'warning', + '*': 'danger', + }, title: 'titleField', }, selectable: true, @@ -307,6 +307,11 @@

Selectable List with Selected Items

'*': 'circle', }, labels: 'labelsField', + labelsStylesMap: { + 'Watched': 'success', + 'Pending': 'warning', + '*': 'danger', + }, title: 'titleField', }, selectable: true, From 6fbf5166f1f3a36910976abb0c5727bb6a3e50f8 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Thu, 28 Dec 2017 20:04:54 +0100 Subject: [PATCH 09/21] Create groups in ClayList in the same way they are created in ClayTable --- packages/clay-list/src/ClayList.js | 9 ---- packages/clay-list/src/ClayList.soy | 83 +++++++++++++++++++++-------- 2 files changed, 60 insertions(+), 32 deletions(-) diff --git a/packages/clay-list/src/ClayList.js b/packages/clay-list/src/ClayList.js index 6c034ca83..487939012 100644 --- a/packages/clay-list/src/ClayList.js +++ b/packages/clay-list/src/ClayList.js @@ -96,15 +96,6 @@ ClayList.STATE = { * @default undefined */ spritemap: Config.string(), - - /** - * Header of the list group. - * @instance - * @memberof ClayList - * @type {?string|undefined} - * @default undefined - */ - title: Config.string(), }; defineWebComponent('clay-list', ClayList); diff --git a/packages/clay-list/src/ClayList.soy b/packages/clay-list/src/ClayList.soy index fa9b8c15d..f36d16288 100644 --- a/packages/clay-list/src/ClayList.soy +++ b/packages/clay-list/src/ClayList.soy @@ -22,7 +22,6 @@ {@param? items: list} {@param? selectable: bool} {@param? spritemap: string} - {@param? title: string} {let $attributes kind="attributes"} class="list-group show-quick-actions-on-hover @@ -37,30 +36,68 @@ {/let}
    - {if $title} -
  • -

    {$title}

    -
    • + {if $items} + {call .items} + {param handleItemToggled_: $handleItemToggled_ /} + {param items: $items /} + {param schema: $schema /} + {param selectable: $selectable /} + {param spritemap: $spritemap /} + {/call} {/if} +
+{/template} + +/** + * This renders all the items in the list, iteraing over the items and its + * possible nested items. + */ +{template .items} + {@param items: list} + {@param schema: [ + actionItems: string, + description: string, + href: string, + icon: string, + iconsMap: ?, + iconShapesMap: ?, + labels: string, + labelsStylesMap: ?, + selected: string, + title: string + ]} + {@param? handleItemToggled_: any} + {@param? selectable: bool} + {@param? spritemap: string} + {foreach $item in $items} + {if $item.items} +
  • +

    {$item.label}

    +
    • - {if $items} - {foreach $item in $items} - {call ClayListItem.render} - {param actionItems: $item[$schema.actionItems] ?: $item.actionItems /} - {param description: $item[$schema.description] ?: $item.description /} - {param events: ['itemToggled': $handleItemToggled_ ] /} - {param href: $item[$schema.href] ?: $item.href /} - {param icon: $schema.iconsMap and $schema.icon ? $schema.iconsMap[$item[$schema.icon]] ?: $schema.iconsMap['*'] : $item[$schema.icon] /} - {param iconShape: $schema.iconShapesMap ? $schema.iconShapesMap[$item.icon] ?: $schema.iconShapesMap['*'] : null /} - {param labels: $item[$schema.labels] ?: $item.labels /} - {param labelsStylesMap: $schema.labelsStylesMap /} - {param selectable: $selectable /} - {param selected: $item[$schema.selected] ?: $item.selected /} - {param spritemap: $spritemap /} - {param title: $item[$schema.title] ?: $item.title /} - {/call} - {/foreach} + {call .items} + {param handleItemToggled_: $handleItemToggled_ /} + {param items: $item.items /} + {param schema: $schema /} + {param selectable: $selectable /} + {param spritemap: $spritemap /} + {/call} + {else} + {call ClayListItem.render} + {param actionItems: $item[$schema.actionItems] ?: $item.actionItems /} + {param description: $item[$schema.description] ?: $item.description /} + {param events: ['itemToggled': $handleItemToggled_ ] /} + {param href: $item[$schema.href] ?: $item.href /} + {param icon: $schema.iconsMap and $schema.icon ? $schema.iconsMap[$item[$schema.icon]] ?: $schema.iconsMap['*'] : $item[$schema.icon] /} + {param iconShape: $schema.iconShapesMap ? $schema.iconShapesMap[$item.icon] ?: $schema.iconShapesMap['*'] : null /} + {param labels: $item[$schema.labels] ?: $item.labels /} + {param labelsStylesMap: $schema.labelsStylesMap /} + {param selectable: $selectable /} + {param selected: $item[$schema.selected] ?: $item.selected /} + {param spritemap: $spritemap /} + {param title: $item[$schema.title] ?: $item.title /} + {/call} {/if} - + {/foreach} {/template} \ No newline at end of file From cda70a54a288aed01fc673ad850fdbb007962c22 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Thu, 28 Dec 2017 20:05:04 +0100 Subject: [PATCH 10/21] Update ClayList demo --- packages/clay-list/demos/index.html | 57 +++++++++++++++-------------- 1 file changed, 30 insertions(+), 27 deletions(-) diff --git a/packages/clay-list/demos/index.html b/packages/clay-list/demos/index.html index cdd30aa20..93816ab4e 100644 --- a/packages/clay-list/demos/index.html +++ b/packages/clay-list/demos/index.html @@ -121,28 +121,33 @@

    Selectable List with Selected Items

    let items = [ { - actionItemsField: actionItemsWithQuickItems, - descriptionField: 'Description 1', - hrefField: '#1', - iconField: 'folder', - labelsField: ['Pending'], - titleField: 'Item 1', - }, - { - actionItemsField: actionItemsWithQuickItems, - descriptionField: 'Description 2', - hrefField: '#2', - iconField: 'folder', - labelsField: ['Watched'], - titleField: 'Item 2', - }, - { - actionItemsField: actionItemsWithQuickItems, - descriptionField: 'Description 3', - hrefField: '#3', - iconField: 'folder', - labelsField: ['Pending'], - titleField: 'Item 3', + items: [ + { + actionItemsField: actionItemsWithQuickItems, + descriptionField: 'Description 1', + hrefField: '#1', + iconField: 'folder', + labelsField: ['Pending'], + titleField: 'Item 1', + }, + { + actionItemsField: actionItemsWithQuickItems, + descriptionField: 'Description 2', + hrefField: '#2', + iconField: 'folder', + labelsField: ['Watched'], + titleField: 'Item 2', + }, + { + actionItemsField: actionItemsWithQuickItems, + descriptionField: 'Description 3', + hrefField: '#3', + iconField: 'folder', + labelsField: ['Pending'], + titleField: 'Item 3', + }, + ], + label: 'Group 1', }, ]; @@ -285,13 +290,12 @@

    Selectable List with Selected Items

    }, selectable: true, spritemap: spritemap, - title: 'Group Header 1', }, '#container9'); - items[0].selected = true; - items[1].selected = true; - items[2].selected = true; + items[0].items[0].selected = true; + items[0].items[1].selected = true; + items[0].items[2].selected = true; new metal.ClayList({ items: items, @@ -316,7 +320,6 @@

    Selectable List with Selected Items

    }, selectable: true, spritemap: spritemap, - title: 'Group Header 1', }, '#container10'); From ea40fd1032c6036c19341eaf9d7ce0ae72057e8e Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Thu, 28 Dec 2017 20:11:04 +0100 Subject: [PATCH 11/21] squash with Icons in ClayList can be configured by regex --- packages/clay-list/src/ClayList.soy | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clay-list/src/ClayList.soy b/packages/clay-list/src/ClayList.soy index f36d16288..cdca84cf7 100644 --- a/packages/clay-list/src/ClayList.soy +++ b/packages/clay-list/src/ClayList.soy @@ -89,7 +89,7 @@ {param description: $item[$schema.description] ?: $item.description /} {param events: ['itemToggled': $handleItemToggled_ ] /} {param href: $item[$schema.href] ?: $item.href /} - {param icon: $schema.iconsMap and $schema.icon ? $schema.iconsMap[$item[$schema.icon]] ?: $schema.iconsMap['*'] : $item[$schema.icon] /} + {param icon: $schema.iconsMap ? $schema.iconsMap[$item[$schema.icon]] ?: $schema.iconsMap['*'] : $item[$schema.icon] /} {param iconShape: $schema.iconShapesMap ? $schema.iconShapesMap[$item.icon] ?: $schema.iconShapesMap['*'] : null /} {param labels: $item[$schema.labels] ?: $item.labels /} {param labelsStylesMap: $schema.labelsStylesMap /} From c585f4125c3b10c9ab4382e3e4505426c78d9d71 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Thu, 28 Dec 2017 20:29:56 +0100 Subject: [PATCH 12/21] Support for just one label in ClayList --- packages/clay-list/src/ClayList.js | 4 ++-- packages/clay-list/src/ClayList.soy | 12 ++++++------ packages/clay-list/src/ClayListItem.js | 10 +++++----- packages/clay-list/src/ClayListItem.soy | 26 ++++++++++++------------- 4 files changed, 25 insertions(+), 27 deletions(-) diff --git a/packages/clay-list/src/ClayList.js b/packages/clay-list/src/ClayList.js index 487939012..bc66f941d 100644 --- a/packages/clay-list/src/ClayList.js +++ b/packages/clay-list/src/ClayList.js @@ -82,8 +82,8 @@ ClayList.STATE = { icon: Config.string(), iconShapesMap: Config.object(), iconsMap: Config.object(), - labels: Config.string(), - labelsStylesMap: Config.object(), + label: Config.string(), + labelStylesMap: Config.object(), selected: Config.string(), title: Config.string(), }).required(), diff --git a/packages/clay-list/src/ClayList.soy b/packages/clay-list/src/ClayList.soy index cdca84cf7..15402b602 100644 --- a/packages/clay-list/src/ClayList.soy +++ b/packages/clay-list/src/ClayList.soy @@ -11,8 +11,8 @@ icon: string, iconsMap: ?, iconShapesMap: ?, - labels: string, - labelsStylesMap: ?, + label: string, + labelStylesMap: ?, selected: string, title: string ]} @@ -61,8 +61,8 @@ icon: string, iconsMap: ?, iconShapesMap: ?, - labels: string, - labelsStylesMap: ?, + label: string, + labelStylesMap: ?, selected: string, title: string ]} @@ -91,8 +91,8 @@ {param href: $item[$schema.href] ?: $item.href /} {param icon: $schema.iconsMap ? $schema.iconsMap[$item[$schema.icon]] ?: $schema.iconsMap['*'] : $item[$schema.icon] /} {param iconShape: $schema.iconShapesMap ? $schema.iconShapesMap[$item.icon] ?: $schema.iconShapesMap['*'] : null /} - {param labels: $item[$schema.labels] ?: $item.labels /} - {param labelsStylesMap: $schema.labelsStylesMap /} + {param label: $item[$schema.label] ?: $item.label /} + {param labelStylesMap: $schema.labelStylesMap /} {param selectable: $selectable /} {param selected: $item[$schema.selected] ?: $item.selected /} {param spritemap: $spritemap /} diff --git a/packages/clay-list/src/ClayListItem.js b/packages/clay-list/src/ClayListItem.js index d1b5352da..13b954e6b 100644 --- a/packages/clay-list/src/ClayListItem.js +++ b/packages/clay-list/src/ClayListItem.js @@ -114,22 +114,22 @@ ClayListItem.STATE = { id: Config.string(), /** - * Labels of the list item. + * Label of the list item. * @instance * @memberof ClayListItem - * @type {?array|undefined} + * @type {?string|undefined} * @default undefined */ - labels: Config.arrayOf(Config.string()), + label: Config.string(), /** - * Labels styles map. + * Label styles map. * @instance * @memberof ClayListItem * @type {?object|undefined} * @default undefined */ - labelsStylesMap: Config.object(), + labelStylesMap: Config.object(), /** * Flag to indicate if the list item is selectable. diff --git a/packages/clay-list/src/ClayListItem.soy b/packages/clay-list/src/ClayListItem.soy index 90cd29096..723ee6f8c 100644 --- a/packages/clay-list/src/ClayListItem.soy +++ b/packages/clay-list/src/ClayListItem.soy @@ -21,8 +21,8 @@ {@param? icon: string} {@param? iconShape: string} {@param? id: string} - {@param? labels: list} - {@param? labelsStylesMap: ?} + {@param? label: string} + {@param? labelStylesMap: ?} {@param? selectable: bool} {@param? selected: bool} {@param? spritemap: string} @@ -44,7 +44,7 @@ {/let}
  • - {let $isSimple: not $description and not $selectable and not $icon and not $actionItems and not $labels/} + {let $isSimple: not $description and not $selectable and not $icon and not $actionItems and not $label/} {if $isSimple} {delcall ClayListItem.Simple variant="$contentRenderer"} @@ -74,8 +74,8 @@ {delcall ClayListItem.Content variant="$contentRenderer"} {param description: $description /} {param href: $href /} - {param labels: $labels /} - {param labelsStylesMap: $labelsStylesMap /} + {param label: $label /} + {param labelStylesMap: $labelStylesMap /} {param spritemap: $spritemap /} {param title: $title /} {/delcall} @@ -132,8 +132,8 @@ {@param title: string} {@param? description: string} {@param? href: string} - {@param? labels: list} - {@param? labelsStylesMap: ?} + {@param? label: string} + {@param? labelStylesMap: ?} {@param? spritemap: string}
    @@ -152,14 +152,12 @@

    {$description}

    {/if} - {if $labels} + {if $label}
    - {foreach $label in $labels} - {call ClayLabel.render} - {param label: $label /} - {param style: $labelsStylesMap ? $labelsStylesMap[$label] ?: $labelsStylesMap['*'] : null /} - {/call} - {/foreach} + {call ClayLabel.render} + {param label: $label /} + {param style: $labelStylesMap ? $labelStylesMap[$label] ?: $labelStylesMap['*'] : null /} + {/call}
    {/if}
    From d02f0bbd7b1f6a1344d5063c853e8fd36de528f6 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Thu, 28 Dec 2017 20:35:33 +0100 Subject: [PATCH 13/21] Update ClayList demo to same structure of ClayTable --- packages/clay-list/demos/index.html | 212 ++++++++++++++++------------ 1 file changed, 125 insertions(+), 87 deletions(-) diff --git a/packages/clay-list/demos/index.html b/packages/clay-list/demos/index.html index 93816ab4e..9747b1c27 100644 --- a/packages/clay-list/demos/index.html +++ b/packages/clay-list/demos/index.html @@ -80,17 +80,10 @@

    Selectable List with Quick Action Menu

    • -
    -
    -

    Selectable List with Header Title

    -
    -
    -
    -

    Selectable List with Selected Items

    -
    +
    @@ -123,34 +116,96 @@

    Selectable List with Selected Items

    { items: [ { - actionItemsField: actionItemsWithQuickItems, - descriptionField: 'Description 1', - hrefField: '#1', - iconField: 'folder', - labelsField: ['Pending'], - titleField: 'Item 1', + director: 'George Lucas', + downloadHref: '#', + rating: 10, + releaseDate: 'May 19th 1999', + status: 'Error', + title: 'Episode I: The Phantom Menace', + }, + { + director: 'George Lucas', + downloadHref: '#', + rating: 50, + releaseDate: 'May 12th 2002', + status: 'Watched', + title: 'Episode II: Attack of the Clones', + }, + { + director: 'George Lucas', + downloadHref: '#', + rating: 60, + releaseDate: 'May 12th 2005', + status: 'Watched', + title: 'Episode III: Revenge of the Sith', + }, + { + director: 'George Lucas', + downloadHref: '#', + rating: 90, + releaseDate: 'May 25th 1977', + status: 'Watched', + title: 'Episode IV: A New Hope', + }, + { + director: 'Irvin Kershner', + downloadHref: '#', + rating: 100, + releaseDate: 'May 21th 1980', + status: 'Watched', + title: 'Episode V: The Empire Strikes Back', }, { - actionItemsField: actionItemsWithQuickItems, - descriptionField: 'Description 2', - hrefField: '#2', - iconField: 'folder', - labelsField: ['Watched'], - titleField: 'Item 2', + director: 'Richard Marquand', + downloadHref: '#', + rating: 90, + releaseDate: 'May 21th 1980', + status: 'Watched', + title: 'Episode VI: Return of the Jedi', }, { - actionItemsField: actionItemsWithQuickItems, - descriptionField: 'Description 3', - hrefField: '#3', - iconField: 'folder', - labelsField: ['Pending'], - titleField: 'Item 3', + director: 'J. J. Abrams', + downloadHref: '#', + rating: 70, + releaseDate: 'December 14th 2015', + status: 'Watched', + title: 'Episode VII: The Force Awakens', + }, + { + director: 'Rian Johnson', + downloadHref: '#', + rating: 0, + releaseDate: 'December 9th 2017', + status: 'Pending', + title: 'Episode VIII: The Last Jedi', }, ], - label: 'Group 1', + label: 'Saga', }, + { + items: [ + { + director: 'Gareth Edwards', + downloadHref: '#', + rating: 70, + releaseDate: 'December 10th 2016', + status: 'Watched', + title: 'Rogue One: A Star Wars Story', + }, + { + director: 'Ron Howard', + downloadHref: '#', + rating: 0, + releaseDate: 'May 25th 2018', + status: 'Pending', + title: 'Solo: A Star Wars Story', + }, + ], + label: 'Expanded Universe' + } ]; + /** Simple List **/ new metal.ClayList({ items: items, schema: { @@ -158,39 +213,42 @@

    Selectable List with Selected Items

    }, }, '#container1'); + /** Simple List with Links**/ new metal.ClayList({ items: items, schema: { - href: 'hrefField', + href: 'downloadHref', title: 'titleField', }, }, '#container2'); - + + /** List with Descriptions **/ new metal.ClayList({ items: items, schema: { - description: 'descriptionField', - href: 'hrefField', + description: 'director', + href: 'downloadHref', title: 'titleField', }, }, '#container3'); + /** Selectable List **/ new metal.ClayList({ items: items, schema: { - description: 'descriptionField', - href: 'hrefField', + description: 'director', + href: 'downloadHref', title: 'titleField', }, selectable: true, }, '#container4'); - + + /** Selectable List with Icons **/ new metal.ClayList({ items: items, schema: { - description: 'descriptionField', - href: 'hrefField', - icon: 'iconField', + description: 'director', + href: 'downloadHref', iconsMap: { '*': 'folder', }, @@ -200,12 +258,12 @@

    Selectable List with Selected Items

    spritemap: spritemap, }, '#container5'); + /** Selectable List with Circle Icons **/ new metal.ClayList({ items: items, schema: { - description: 'descriptionField', - href: 'hrefField', - icon: 'iconField', + description: 'director', + href: 'downloadHref', iconsMap: { '*': 'folder', }, @@ -218,20 +276,20 @@

    Selectable List with Selected Items

    spritemap: spritemap, }, '#container6'); + /** Selectable List with Label **/ new metal.ClayList({ items: items, schema: { - description: 'descriptionField', - href: 'hrefField', - icon: 'iconField', + description: 'director', + href: 'downloadHref', iconsMap: { '*': 'folder', }, iconShapesMap: { '*': 'circle', }, - labels: 'labelsField', - labelsStylesMap: { + label: 'status', + labelStylesMap: { 'Watched': 'success', 'Pending': 'warning', '*': 'danger', @@ -242,46 +300,26 @@

    Selectable List with Selected Items

    spritemap: spritemap, }, '#container7'); - new metal.ClayList({ - items: items, - schema: { - actionItems: 'actionItemsField', - description: 'descriptionField', - href: 'hrefField', - icon: 'iconField', - iconsMap: { - '*': 'folder', - }, - iconShapesMap: { - '*': 'circle', - }, - labels: 'labelsField', - labelsStylesMap: { - 'Watched': 'success', - 'Pending': 'warning', - '*': 'danger', - }, - title: 'titleField', - }, - selectable: true, - spritemap: spritemap, - }, '#container8'); + /** Selectable List with Action Menu **/ + items.forEach(item => { + item.items.forEach(nestedItem => { + nestedItem.actionItems = actionItemsWithQuickItems; + }); + }); new metal.ClayList({ items: items, schema: { - actionItems: 'actionItemsField', - description: 'descriptionField', - href: 'hrefField', - icon: 'iconField', + description: 'director', + href: 'downloadHref', iconsMap: { '*': 'folder', }, iconShapesMap: { '*': 'circle', }, - labels: 'labelsField', - labelsStylesMap: { + label: 'status', + labelStylesMap: { 'Watched': 'success', 'Pending': 'warning', '*': 'danger', @@ -290,28 +328,28 @@

    Selectable List with Selected Items

    }, selectable: true, spritemap: spritemap, - }, '#container9'); - + }, '#container8'); - items[0].items[0].selected = true; - items[0].items[1].selected = true; - items[0].items[2].selected = true; + /** Selectable List with Selected Items **/ + items.forEach(item => { + item.items.forEach(nestedItem => { + nestedItem.selected = true; + }); + }); new metal.ClayList({ items: items, schema: { - actionItems: 'actionItemsField', - description: 'descriptionField', - href: 'hrefField', - icon: 'iconField', + description: 'director', + href: 'downloadHref', iconsMap: { '*': 'folder', }, iconShapesMap: { '*': 'circle', }, - labels: 'labelsField', - labelsStylesMap: { + label: 'status', + labelStylesMap: { 'Watched': 'success', 'Pending': 'warning', '*': 'danger', @@ -320,7 +358,7 @@

    Selectable List with Selected Items

    }, selectable: true, spritemap: spritemap, - }, '#container10'); + }, '#container9'); From d4d03dc8e056de352e077402a91f457620af7191 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Thu, 28 Dec 2017 20:40:28 +0100 Subject: [PATCH 14/21] Don't use schema defaults in ClayList --- packages/clay-list/src/ClayList.soy | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/clay-list/src/ClayList.soy b/packages/clay-list/src/ClayList.soy index 15402b602..4af47ffbd 100644 --- a/packages/clay-list/src/ClayList.soy +++ b/packages/clay-list/src/ClayList.soy @@ -86,17 +86,17 @@ {else} {call ClayListItem.render} {param actionItems: $item[$schema.actionItems] ?: $item.actionItems /} - {param description: $item[$schema.description] ?: $item.description /} + {param description: $item[$schema.description] /} {param events: ['itemToggled': $handleItemToggled_ ] /} - {param href: $item[$schema.href] ?: $item.href /} + {param href: $item[$schema.href] /} {param icon: $schema.iconsMap ? $schema.iconsMap[$item[$schema.icon]] ?: $schema.iconsMap['*'] : $item[$schema.icon] /} {param iconShape: $schema.iconShapesMap ? $schema.iconShapesMap[$item.icon] ?: $schema.iconShapesMap['*'] : null /} - {param label: $item[$schema.label] ?: $item.label /} + {param label: $item[$schema.label] /} {param labelStylesMap: $schema.labelStylesMap /} {param selectable: $selectable /} - {param selected: $item[$schema.selected] ?: $item.selected /} + {param selected: $item[$schema.selected] /} {param spritemap: $spritemap /} - {param title: $item[$schema.title] ?: $item.title /} + {param title: $item[$schema.title] /} {/call} {/if} {/foreach} From da4760755d422670dd02b5f8d77cc7d3b2a313ac Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Thu, 28 Dec 2017 20:40:36 +0100 Subject: [PATCH 15/21] Update ClayList demo --- packages/clay-list/demos/index.html | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/clay-list/demos/index.html b/packages/clay-list/demos/index.html index 9747b1c27..5fd75966e 100644 --- a/packages/clay-list/demos/index.html +++ b/packages/clay-list/demos/index.html @@ -209,7 +209,7 @@

    Selectable List with Selected Items

    new metal.ClayList({ items: items, schema: { - title: 'titleField', + title: 'title', }, }, '#container1'); @@ -218,7 +218,7 @@

    Selectable List with Selected Items

    items: items, schema: { href: 'downloadHref', - title: 'titleField', + title: 'title', }, }, '#container2'); @@ -228,7 +228,7 @@

    Selectable List with Selected Items

    schema: { description: 'director', href: 'downloadHref', - title: 'titleField', + title: 'title', }, }, '#container3'); @@ -238,7 +238,7 @@

    Selectable List with Selected Items

    schema: { description: 'director', href: 'downloadHref', - title: 'titleField', + title: 'title', }, selectable: true, }, '#container4'); @@ -252,7 +252,7 @@

    Selectable List with Selected Items

    iconsMap: { '*': 'folder', }, - title: 'titleField', + title: 'title', }, selectable: true, spritemap: spritemap, @@ -270,7 +270,7 @@

    Selectable List with Selected Items

    iconShapesMap: { '*': 'circle', }, - title: 'titleField', + title: 'title', }, selectable: true, spritemap: spritemap, @@ -294,7 +294,7 @@

    Selectable List with Selected Items

    'Pending': 'warning', '*': 'danger', }, - title: 'titleField', + title: 'title', }, selectable: true, spritemap: spritemap, @@ -324,7 +324,7 @@

    Selectable List with Selected Items

    'Pending': 'warning', '*': 'danger', }, - title: 'titleField', + title: 'title', }, selectable: true, spritemap: spritemap, @@ -354,7 +354,8 @@

    Selectable List with Selected Items

    'Pending': 'warning', '*': 'danger', }, - title: 'titleField', + selected: 'selected', + title: 'title', }, selectable: true, spritemap: spritemap, From 3dafe8ec9f565ba81bb0f0712d37c876f40778d0 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Thu, 28 Dec 2017 20:47:42 +0100 Subject: [PATCH 16/21] Update ClayList tests --- packages/clay-list/src/__tests__/ClayList.js | 47 ++++++++++--------- .../clay-list/src/__tests__/ClayListItem.js | 38 +++------------ .../__tests__/__snapshots__/ClayList.js.snap | 45 ++---------------- .../__snapshots__/ClayListItem.js.snap | 33 ++++--------- 4 files changed, 45 insertions(+), 118 deletions(-) diff --git a/packages/clay-list/src/__tests__/ClayList.js b/packages/clay-list/src/__tests__/ClayList.js index 2a69ccf39..63e9cf951 100644 --- a/packages/clay-list/src/__tests__/ClayList.js +++ b/packages/clay-list/src/__tests__/ClayList.js @@ -11,7 +11,7 @@ describe('ClayList', function() { it('should render the default markup', () => { component = new ClayList({ - items: [], + schema: {}, }); expect(component).toMatchSnapshot(); @@ -20,7 +20,7 @@ describe('ClayList', function() { it('should render a ClayList with classes', () => { component = new ClayList({ elementClasses: 'my-custom-class', - items: [], + schema: [], }); expect(component).toMatchSnapshot(); @@ -29,7 +29,7 @@ describe('ClayList', function() { it('should render a ClayList with id', () => { component = new ClayList({ id: 'myId', - items: [], + schema: [], }); expect(component).toMatchSnapshot(); @@ -39,35 +39,33 @@ describe('ClayList', function() { component = new ClayList({ items: [ { - description: 'Description 1', - href: '#1', - title: 'Item 1', - }, - { - description: 'Description 2', - href: '#2', - title: 'Item 2', - }, - { - description: 'Description 3', - href: '#3', - title: 'Item 3', + title: 'Star Wars', }, ], + schema: { + title: 'title', + }, selectable: true, }); expect(component).toMatchSnapshot(); }); - it('should render a selectable ClayList with header title', () => { + it('should render a selectable ClayList with groups', () => { component = new ClayList({ items: [ { - title: 'Item 1', + items: [ + { + title: 'Star Wars', + }, + ], + label: 'Movies', }, ], - title: 'Group Header 1', + schema: { + title: 'title', + }, }); expect(component).toMatchSnapshot(); @@ -80,9 +78,12 @@ describe('ClayList', function() { events: {itemToggled: spy}, items: [ { - title: 'Item 1', + title: 'Star Wars', }, ], + schema: { + title: 'title', + }, selectable: true, }); @@ -91,9 +92,11 @@ describe('ClayList', function() { expect(spy).toHaveBeenCalled(); }); - it('should fail when no items are passed', function() { + it('should fail when no schema is passed', function() { expect(() => { - component = new ClayList(); + component = new ClayList({ + items: [], + }); }).toThrow(); }); }); diff --git a/packages/clay-list/src/__tests__/ClayListItem.js b/packages/clay-list/src/__tests__/ClayListItem.js index 2b2c7b0c5..62bfa684f 100644 --- a/packages/clay-list/src/__tests__/ClayListItem.js +++ b/packages/clay-list/src/__tests__/ClayListItem.js @@ -147,29 +147,9 @@ describe('ClayListItem', function() { expect(component).toMatchSnapshot(); }); - it('should render a ClayListItem with one label', () => { + it('should render a ClayListItem with label', () => { component = new ClayListItem({ - labels: [ - { - label: 'Status', - }, - ], - title: 'Item 1', - }); - - expect(component).toMatchSnapshot(); - }); - - it('should render a ClayListItem with two labels', () => { - component = new ClayListItem({ - labels: [ - { - label: 'Aproved', - }, - { - label: 'Pending', - }, - ], + label: 'Status', title: 'Item 1', }); @@ -178,16 +158,10 @@ describe('ClayListItem', function() { it('should render a ClayListItem with labels with style', () => { component = new ClayListItem({ - labels: [ - { - label: 'Aproved', - style: 'info', - }, - { - label: 'Pending', - style: 'warning', - }, - ], + label: 'Status', + labelStylesMap: { + '*': 'info', + }, title: 'Item 1', }); diff --git a/packages/clay-list/src/__tests__/__snapshots__/ClayList.js.snap b/packages/clay-list/src/__tests__/__snapshots__/ClayList.js.snap index 2700d5579..2ef2e1da1 100644 --- a/packages/clay-list/src/__tests__/__snapshots__/ClayList.js.snap +++ b/packages/clay-list/src/__tests__/__snapshots__/ClayList.js.snap @@ -17,55 +17,18 @@ exports[`ClayList should render a selectable ClayList 1`] = `
    -

    - Item 1 -

    -

    Description 1

    -
    - -
  • -
    -
    - -
    -
    -
    -

    - Item 2 -

    -

    Description 2

    -
    -
    • -
  • -
    -
    - -
    -
    -
    -

    - Item 3 -

    -

    Description 3

    +

    Star Wars

    • `; -exports[`ClayList should render a selectable ClayList with header title 1`] = ` +exports[`ClayList should render a selectable ClayList with groups 1`] = `
    • -

      Group Header 1

      +

      Movies

      • -
    • Item 1
      • +
    • Star Wars
    `; diff --git a/packages/clay-list/src/__tests__/__snapshots__/ClayListItem.js.snap b/packages/clay-list/src/__tests__/__snapshots__/ClayListItem.js.snap index bef2fc22b..ccb024669 100644 --- a/packages/clay-list/src/__tests__/__snapshots__/ClayListItem.js.snap +++ b/packages/clay-list/src/__tests__/__snapshots__/ClayListItem.js.snap @@ -93,35 +93,34 @@ exports[`ClayListItem should render a ClayListItem with icon 1`] = ` exports[`ClayListItem should render a ClayListItem with id 1`] = `
  • My Item
    • `; -exports[`ClayListItem should render a ClayListItem with labels with style 1`] = ` +exports[`ClayListItem should render a ClayListItem with label 1`] = `

  • Item 1

    - Aproved - Pending + Status
    • `; -exports[`ClayListItem should render a ClayListItem with link 1`] = ` -
  • - Item 1 -
    • -`; - -exports[`ClayListItem should render a ClayListItem with one label 1`] = ` +exports[`ClayListItem should render a ClayListItem with labels with style 1`] = `

  • Item 1

    - Status + Status
    • `; +exports[`ClayListItem should render a ClayListItem with link 1`] = ` +
  • + Item 1 +
    • +`; + exports[`ClayListItem should render a ClayListItem with quick action menu 1`] = `
  • @@ -174,18 +173,6 @@ exports[`ClayListItem should render a ClayListItem with quick action menu 1`] =
    • `; -exports[`ClayListItem should render a ClayListItem with two labels 1`] = ` -
  • -
    -

    Item 1

    -
    - Aproved - Pending -
    -
    -
    • -`; - exports[`ClayListItem should render a selectable ClayListItem 1`] = `
  • From 3d05f22f8520104a34b55534d22cce8a2f175e79 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Thu, 28 Dec 2017 20:51:56 +0100 Subject: [PATCH 17/21] Fix Return of the Jedi release date in demos --- packages/clay-list/demos/index.html | 2 +- packages/clay-table/demos/index.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/clay-list/demos/index.html b/packages/clay-list/demos/index.html index 5fd75966e..c1515064f 100644 --- a/packages/clay-list/demos/index.html +++ b/packages/clay-list/demos/index.html @@ -159,7 +159,7 @@

    Selectable List with Selected Items

    director: 'Richard Marquand', downloadHref: '#', rating: 90, - releaseDate: 'May 21th 1980', + releaseDate: 'May 25th 1983', status: 'Watched', title: 'Episode VI: Return of the Jedi', }, diff --git a/packages/clay-table/demos/index.html b/packages/clay-table/demos/index.html index 862c751eb..2e93b03af 100644 --- a/packages/clay-table/demos/index.html +++ b/packages/clay-table/demos/index.html @@ -121,7 +121,7 @@

    director: 'Richard Marquand', downloadHref: '#', rating: 90, - releaseDate: 'May 21th 1980', + releaseDate: 'May 25th 1983', status: 'Watched', title: 'Episode VI: Return of the Jedi', }, From 59e2ab689295877bc325c8e2a3f3dcaac278e26c Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Fri, 29 Dec 2017 12:26:09 +0100 Subject: [PATCH 18/21] Refactor ClayList to fit exactly with ClayTable schema like design --- packages/clay-list/src/ClayList.js | 29 ++- packages/clay-list/src/ClayList.soy | 231 ++++++++++++++++++++---- packages/clay-list/src/ClayListItem.js | 176 ------------------ packages/clay-list/src/ClayListItem.soy | 198 -------------------- 4 files changed, 213 insertions(+), 421 deletions(-) delete mode 100644 packages/clay-list/src/ClayListItem.js delete mode 100644 packages/clay-list/src/ClayListItem.soy diff --git a/packages/clay-list/src/ClayList.js b/packages/clay-list/src/ClayList.js index bc66f941d..f38f855a2 100644 --- a/packages/clay-list/src/ClayList.js +++ b/packages/clay-list/src/ClayList.js @@ -1,14 +1,15 @@ +import 'clay-checkbox'; import 'clay-dropdown'; import 'clay-icon'; import 'clay-label'; import 'clay-link'; import 'clay-sticker'; -import './ClayListItem'; - +// eslint-disable-next-line +import { ClayActionsDropdown } from 'clay-dropdown'; +import {Config} from 'metal-state'; import Component from 'metal-component'; import defineWebComponent from 'metal-web-component'; import Soy from 'metal-soy'; -import {Config} from 'metal-state'; import templates from './ClayList.soy.js'; @@ -75,18 +76,16 @@ ClayList.STATE = { * @type {!object} * @default undefined */ - schema: Config.shapeOf({ - actionItems: Config.string(), - description: Config.string(), - href: Config.string(), - icon: Config.string(), - iconShapesMap: Config.object(), - iconsMap: Config.object(), - label: Config.string(), - labelStylesMap: Config.object(), - selected: Config.string(), - title: Config.string(), - }).required(), + schema: Config.arrayOf( + Config.shapeOf({ + contentRenderer: Config.string(), + fieldName: Config.string(), + fieldsMap: Config.object(), + iconsMap: Config.object(), + iconShapesMap: Config.object(), + labelStylesMap: Config.object(), + }) + ).required(), /** * The path to the SVG spritemap file containing the icons. diff --git a/packages/clay-list/src/ClayList.soy b/packages/clay-list/src/ClayList.soy index 4af47ffbd..5182d65fc 100644 --- a/packages/clay-list/src/ClayList.soy +++ b/packages/clay-list/src/ClayList.soy @@ -4,18 +4,14 @@ * This renders the component's whole content. */ {template .render} - {@param schema: [ - actionItems: string, - description: string, - href: string, - icon: string, + {@param schema: list<[ + contentRenderer: string, + fieldName: string, + fieldsMap: ?, iconsMap: ?, iconShapesMap: ?, - label: string, - labelStylesMap: ?, - selected: string, - title: string - ]} + labelStylesMap: ? + ]>} {@param? elementClasses: string} {@param? handleItemToggled_: any} {@param? id: string} @@ -48,24 +44,78 @@ {/template} +{template .item} + {@param item: ?} + {@param schema: list<[ + contentRenderer: string, + fieldName: string, + fieldsMap: ?, + iconsMap: ?, + iconShapesMap: ?, + labelStylesMap: ? + ]>} + {@param? handleItemToggled_: any} + {@param? selectable: bool} + {@param? spritemap: string} + + {let $listItemClasses kind="text"} + list-group-item list-group-item-flex + {if $item.selected} + {sp}active + {/if} + {/let} + +
  • + {if $selectable} +
    + {call ClayCheckbox.render} + {param checked: $item.selected /} + {param events: ['change': $handleItemToggled_] /} + {param hideLabel: true /} + {param label: 'select' /} + {/call} +
    + {/if} + + {foreach $fieldSchema in $schema} + {delcall ClayList.Field variant="$fieldSchema.contentRenderer"} + {param fieldSchema: $fieldSchema /} + {param item: $item /} + {param spritemap: $spritemap /} + {param value: $item[$fieldSchema.fieldName] /} + {/delcall} + {/foreach} + + {if $item.actionItems and $spritemap} +
    + {call .quickMenu} + {param items: $item.actionItems /} + {param spritemap: $spritemap /} + {/call} + + {call ClayActionsDropdown.render} + {param items: $item.actionItems /} + {param spritemap: $spritemap /} + {/call} +
    + {/if} +
    • +{/template} + /** * This renders all the items in the list, iteraing over the items and its * possible nested items. */ {template .items} {@param items: list} - {@param schema: [ - actionItems: string, - description: string, - href: string, - icon: string, + {@param schema: list<[ + contentRenderer: string, + fieldName: string, + fieldsMap: ?, iconsMap: ?, iconShapesMap: ?, - label: string, - labelStylesMap: ?, - selected: string, - title: string - ]} + labelStylesMap: ? + ]>} {@param? handleItemToggled_: any} {@param? selectable: bool} {@param? spritemap: string} @@ -84,20 +134,137 @@ {param spritemap: $spritemap /} {/call} {else} - {call ClayListItem.render} - {param actionItems: $item[$schema.actionItems] ?: $item.actionItems /} - {param description: $item[$schema.description] /} - {param events: ['itemToggled': $handleItemToggled_ ] /} - {param href: $item[$schema.href] /} - {param icon: $schema.iconsMap ? $schema.iconsMap[$item[$schema.icon]] ?: $schema.iconsMap['*'] : $item[$schema.icon] /} - {param iconShape: $schema.iconShapesMap ? $schema.iconShapesMap[$item.icon] ?: $schema.iconShapesMap['*'] : null /} - {param label: $item[$schema.label] /} - {param labelStylesMap: $schema.labelStylesMap /} + {call .item} + {param handleItemToggled_: $handleItemToggled_ /} + {param item: $item /} + {param schema: $schema /} {param selectable: $selectable /} - {param selected: $item[$schema.selected] /} {param spritemap: $spritemap /} - {param title: $item[$schema.title] /} {/call} {/if} {/foreach} -{/template} \ No newline at end of file +{/template} + +/** + * This renders the quick actions menu + */ +{template .quickMenu} + {@param items: list<[ + disabled: bool, + href: string, + icon: string, + label: string, + quickAction: bool, + separator: bool + ]>} + {@param spritemap: string} + +
    + {foreach $item in $items} + {if $item.quickAction and $item.icon and $spritemap} + {call ClayLink.render} + {param elementClasses: 'quick-action-item' /} + {param href: $item.href /} + {param icon: $item.icon /} + {param spritemap: $spritemap /} + {/call} + {/if} + {/foreach} +
    +{/template} + +/** + * This renders the content of the item. + */ +{deltemplate ClayList.Field variant="'content'"} + {@param fieldSchema: [ + contentRenderer: string, + fieldName: string, + fieldsMap: ?, + iconsMap: ?, + iconShapesMap: ?, + labelStylesMap: ? + ]} + {@param item: ?} + {@param value: ?} + {@param? spritemap: string} + +
    +

    + {if $fieldSchema.fieldsMap and $fieldSchema.fieldsMap.href and $item[$fieldSchema.fieldsMap.href]} + {call ClayLink.render} + {param href: $item[$fieldSchema.fieldsMap.href] /} + {param label: $item[$fieldSchema.fieldsMap.title] /} + {/call} + {else} + {$item[$fieldSchema.fieldsMap.title]} + {/if} +

    + + {if $fieldSchema.fieldsMap and $fieldSchema.fieldsMap.description and $item[$fieldSchema.fieldsMap.description]} +

    {$item[$fieldSchema.fieldsMap.description]}

    + {/if} + + {if $fieldSchema.fieldsMap and $fieldSchema.fieldsMap.label and $item[$fieldSchema.fieldsMap.label]} +
    + {call ClayLabel.render} + {param label: $item[$fieldSchema.fieldsMap.label] /} + {param style: $fieldSchema.labelStylesMap ? $fieldSchema.labelStylesMap[$item[$fieldSchema.fieldsMap.label]] ?: $fieldSchema.labelStylesMap['*'] : null /} + {/call} +
    + {/if} +
    +{/deltemplate} + +/** + * This renders the icon of the item. + */ +{deltemplate ClayList.Field variant="'icon'"} + {@param fieldSchema: [ + contentRenderer: string, + fieldName: string, + fieldsMap: ?, + iconsMap: ?, + iconShapesMap: ?, + labelStylesMap: ? + ]} + {@param item: ?} + {@param value: ?} + {@param? spritemap: string} + +
    + {if $spritemap} + {call ClaySticker.render} + {param icon: $fieldSchema.iconsMap ? $fieldSchema.iconsMap[$value] ?: $fieldSchema.iconsMap['*'] : $value /} + {param shape: $fieldSchema.iconShapesMap ? $fieldSchema.iconShapesMap[$value] ?: $fieldSchema.iconShapesMap['*'] : null /} + {param spritemap: $spritemap /} + {/call} + {/if} +
    +{/deltemplate} + +/** + * This renders a simple content of the item. + */ +{deltemplate ClayList.Field variant="'simple'"} + {@param fieldSchema: [ + contentRenderer: string, + fieldName: string, + fieldsMap: ?, + iconsMap: ?, + iconShapesMap: ?, + labelStylesMap: ? + ]} + {@param item: ?} + {@param value: ?} + {@param? spritemap: string} + + {if $fieldSchema.fieldsMap and $fieldSchema.fieldsMap.href and $item[$fieldSchema.fieldsMap.href]} + {call ClayLink.render} + {param href: $item[$fieldSchema.fieldsMap.href] /} + {param label: $item[$fieldSchema.fieldsMap.title] /} + {/call} + {else} + {$item[$fieldSchema.fieldsMap.title]} + {/if} +{/deltemplate} \ No newline at end of file diff --git a/packages/clay-list/src/ClayListItem.js b/packages/clay-list/src/ClayListItem.js deleted file mode 100644 index 13b954e6b..000000000 --- a/packages/clay-list/src/ClayListItem.js +++ /dev/null @@ -1,176 +0,0 @@ -import 'clay-checkbox'; -import 'clay-icon'; -import 'clay-label'; -import 'clay-link'; -import 'clay-sticker'; -// eslint-disable-next-line -import { ClayActionsDropdown } from 'clay-dropdown'; -import {Config} from 'metal-state'; -import Component from 'metal-component'; -import defineWebComponent from 'metal-web-component'; -import Soy from 'metal-soy'; - -import templates from './ClayListItem.soy.js'; - -/** - * Metal ClayListItem component. - */ -class ClayListItem extends Component { - /** - * Continues the propagation of the checkbox changed event - * @param {!Event} event - * @private - */ - handleItemCheckboxClick_(event) { - this.emit('itemToggled', event); - } -} - -/** - * State definition. - * @static - * @type {!Object} - */ -ClayListItem.STATE = { - /** - * List of items to display in the actions menu. - * @instance - * @memberof ClayListItem - * @type {!array} - * @default undefined - */ - actionItems: Config.arrayOf( - Config.shapeOf({ - disabled: Config.bool().value(false), - href: Config.string().required(), - icon: Config.string(), - label: Config.string().required(), - quickAction: Config.bool(), - separator: Config.bool().value(false), - }) - ), - - /** - * Name of the content renderer to use template variants. - * @instance - * @memberof ClayListItem - * @type {?string|undefined} - * @default undefined - */ - contentRenderer: Config.string(), - - /** - * Description of the item - * @instance - * @memberof ClayListItem - * @type {?string|undefined} - * @default undefined - */ - description: Config.string(), - - /** - * CSS classes to be applied to the element. - * @instance - * @memberof ClayListItem - * @type {?string|undefined} - * @default undefined - */ - elementClasses: Config.string(), - - /** - * Url of the item. - * @instance - * @memberof ClayListItem - * @type {?string|undefined} - * @default undefined - */ - href: Config.string(), - - /** - * Icon of the list item. - * @instance - * @memberof ClayListItem - * @type {?string|undefined} - * @default undefined - */ - icon: Config.string(), - - /** - * Shape of the icon of the list item. - * @instance - * @memberof ClayListItem - * @type {?string|undefined} - * @default rounded - */ - iconShape: Config.oneOf(['circle', 'rounded']).value('rounded'), - - /** - * Id to be applied to the element. - * @instance - * @memberof ClayListItem - * @type {?string|undefined} - * @default undefined - */ - id: Config.string(), - - /** - * Label of the list item. - * @instance - * @memberof ClayListItem - * @type {?string|undefined} - * @default undefined - */ - label: Config.string(), - - /** - * Label styles map. - * @instance - * @memberof ClayListItem - * @type {?object|undefined} - * @default undefined - */ - labelStylesMap: Config.object(), - - /** - * Flag to indicate if the list item is selectable. - * @instance - * @memberof ClayListItem - * @type {?bool|undefined} - * @default false - */ - selectable: Config.bool().value(false), - - /** - * Flag to indicate if the list item is selected. - * @instance - * @memberof ClayListItem - * @type {?bool|undefined} - * @default false - */ - selected: Config.bool().value(false), - - /** - * The path to the SVG spritemap file containing the icons. - * @instance - * @memberof ClayListItem - * @type {?string|undefined} - * @default undefined - */ - spritemap: Config.string(), - - /** - * Title of the list item. - * @instance - * @memberof ClayListItem - * @type {?string|undefined} - * @default undefined - */ - title: Config.string().required(), -}; - -defineWebComponent('clay-list-item', ClayListItem); - -Soy.register(ClayListItem, templates); - -export {ClayListItem}; -export default ClayListItem; diff --git a/packages/clay-list/src/ClayListItem.soy b/packages/clay-list/src/ClayListItem.soy deleted file mode 100644 index 723ee6f8c..000000000 --- a/packages/clay-list/src/ClayListItem.soy +++ /dev/null @@ -1,198 +0,0 @@ -{namespace ClayListItem} - -/** - * This renders the component's whole content. - */ -{template .render} - {@param title: string} - {@param? actionItems: list<[ - disabled: bool, - href: string, - icon: string, - label: string, - quickAction: bool, - separator: bool - ]>} - {@param? contentRenderer: string} - {@param? description: string} - {@param? elementClasses: string} - {@param? handleItemCheckboxClick_: any} - {@param? href: string} - {@param? icon: string} - {@param? iconShape: string} - {@param? id: string} - {@param? label: string} - {@param? labelStylesMap: ?} - {@param? selectable: bool} - {@param? selected: bool} - {@param? spritemap: string} - - {let $listItemAttributes kind="attributes"} - class="list-group-item list-group-item-flex - {if $elementClasses} - {sp}{$elementClasses} - {/if} - - {if $selected} - {sp}active - {/if} - " - - {if $id} - id="{$id}" - {/if} - {/let} - -
  • - {let $isSimple: not $description and not $selectable and not $icon and not $actionItems and not $label/} - - {if $isSimple} - {delcall ClayListItem.Simple variant="$contentRenderer"} - {param href: $href /} - {param title: $title /} - {/delcall} - {else} - {if $selectable} -
    - {call ClayCheckbox.render} - {param checked: $selected /} - {param events: ['change': $handleItemCheckboxClick_] /} - {param hideLabel: true /} - {param label: 'select' /} - {/call} -
    - {/if} - - {if $icon and $spritemap} - {delcall ClayListItem.Icon variant="$contentRenderer"} - {param icon: $icon /} - {param iconShape: $iconShape /} - {param spritemap: $spritemap /} - {/delcall} - {/if} - - {delcall ClayListItem.Content variant="$contentRenderer"} - {param description: $description /} - {param href: $href /} - {param label: $label /} - {param labelStylesMap: $labelStylesMap /} - {param spritemap: $spritemap /} - {param title: $title /} - {/delcall} - - {if $actionItems and $spritemap} -
    - {call .quickMenu} - {param items: $actionItems /} - {param spritemap: $spritemap /} - {/call} - - {call ClayActionsDropdown.render} - {param items: $actionItems /} - {param spritemap: $spritemap /} - {/call} -
    - {/if} - {/if} -
    • -{/template} - -/** - * This renders the quick actions menu - */ -{template .quickMenu} - {@param items: list<[ - disabled: bool, - href: string, - icon: string, - label: string, - quickAction: bool, - separator: bool - ]>} - {@param spritemap: string} - -
    - {foreach $item in $items} - {if $item.quickAction and $item.icon and $spritemap} - {call ClayLink.render} - {param elementClasses: 'quick-action-item' /} - {param href: $item.href /} - {param icon: $item.icon /} - {param spritemap: $spritemap /} - {/call} - {/if} - {/foreach} -
    -{/template} - -/** - * This renders the content of the item. - */ -{deltemplate ClayListItem.Content} - {@param title: string} - {@param? description: string} - {@param? href: string} - {@param? label: string} - {@param? labelStylesMap: ?} - {@param? spritemap: string} - -
    -

    - {if $href} - {call ClayLink.render} - {param href: $href /} - {param label: $title /} - {/call} - {else} - {$title} - {/if} -

    - - {if $description} -

    {$description}

    - {/if} - - {if $label} -
    - {call ClayLabel.render} - {param label: $label /} - {param style: $labelStylesMap ? $labelStylesMap[$label] ?: $labelStylesMap['*'] : null /} - {/call} -
    - {/if} -
    -{/deltemplate} - -/** - * This renders the icon of the item. - */ -{deltemplate ClayListItem.Icon} - {@param icon: string} - {@param spritemap: string} - {@param? iconShape: string} - -
    - {call ClaySticker.render} - {param icon: $icon /} - {param shape: $iconShape /} - {param spritemap: $spritemap /} - {/call} -
    -{/deltemplate} - -/** - * This renders a simple item. - */ -{deltemplate ClayListItem.Simple} - {@param title: string} - {@param? href: string} - - {if $href} - {call ClayLink.render} - {param href: $href /} - {param label: $title /} - {/call} - {else} - {$title} - {/if} -{/deltemplate} \ No newline at end of file From 9ac48cbeb1f361907bea128d1392883b14aeb741 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Fri, 29 Dec 2017 12:26:23 +0100 Subject: [PATCH 19/21] Update ClayList test --- packages/clay-list/src/__tests__/ClayList.js | 469 +++- .../__tests__/__snapshots__/ClayList.js.snap | 1932 ++++++++++++++++- 2 files changed, 2375 insertions(+), 26 deletions(-) diff --git a/packages/clay-list/src/__tests__/ClayList.js b/packages/clay-list/src/__tests__/ClayList.js index 63e9cf951..7ab0b4b1a 100644 --- a/packages/clay-list/src/__tests__/ClayList.js +++ b/packages/clay-list/src/__tests__/ClayList.js @@ -2,6 +2,146 @@ import ClayList from '../ClayList'; let component; +const actionItems = [ + { + href: '#1', + icon: 'trash', + label: 'Option 1', + }, + { + href: '#2', + icon: 'download', + label: 'Option 2', + separator: true, + }, + { + href: '#3', + icon: 'info-circle-open', + label: 'Option 3', + }, +]; + +const actionItemsWithQuickItems = [ + { + href: '#1', + icon: 'trash', + label: 'Option 1', + quickAction: true, + }, + { + href: '#2', + icon: 'download', + label: 'Option 2', + quickAction: true, + separator: true, + }, + { + href: '#3', + icon: 'info-circle-open', + label: 'Option 3', + quickAction: true, + }, +]; + +const sagaItems = [ + { + director: 'George Lucas', + downloadHref: '#', + rating: 10, + releaseDate: 'May 19th 1999', + status: 'Error', + title: 'Episode I: The Phantom Menace', + }, + { + director: 'George Lucas', + downloadHref: '#', + rating: 50, + releaseDate: 'May 12th 2002', + status: 'Watched', + title: 'Episode II: Attack of the Clones', + }, + { + director: 'George Lucas', + downloadHref: '#', + rating: 60, + releaseDate: 'May 12th 2005', + status: 'Watched', + title: 'Episode III: Revenge of the Sith', + }, + { + director: 'George Lucas', + downloadHref: '#', + rating: 90, + releaseDate: 'May 25th 1977', + status: 'Watched', + title: 'Episode IV: A New Hope', + }, + { + director: 'Irvin Kershner', + downloadHref: '#', + rating: 100, + releaseDate: 'May 21th 1980', + status: 'Watched', + title: 'Episode V: The Empire Strikes Back', + }, + { + director: 'Richard Marquand', + downloadHref: '#', + rating: 90, + releaseDate: 'May 25th 1983', + status: 'Watched', + title: 'Episode VI: Return of the Jedi', + }, + { + director: 'J. J. Abrams', + downloadHref: '#', + rating: 70, + releaseDate: 'December 14th 2015', + status: 'Watched', + title: 'Episode VII: The Force Awakens', + }, + { + director: 'Rian Johnson', + downloadHref: '#', + rating: 0, + releaseDate: 'December 9th 2017', + status: 'Pending', + title: 'Episode VIII: The Last Jedi', + }, +]; + +const expandedItems = [ + { + director: 'Gareth Edwards', + downloadHref: '#', + rating: 70, + releaseDate: 'December 10th 2016', + status: 'Watched', + title: 'Rogue One: A Star Wars Story', + }, + { + director: 'Ron Howard', + downloadHref: '#', + rating: 0, + releaseDate: 'May 25th 2018', + status: 'Pending', + title: 'Solo: A Star Wars Story', + }, +]; + +const groupedItems = [ + { + items: sagaItems, + label: 'Saga', + }, + { + items: expandedItems, + label: 'Expanded Universe', + }, +]; + +const spritemap = '../node_modules/lexicon-ux/build/images/icons/icons.svg'; + describe('ClayList', function() { afterEach(() => { if (component) { @@ -11,7 +151,7 @@ describe('ClayList', function() { it('should render the default markup', () => { component = new ClayList({ - schema: {}, + schema: [], }); expect(component).toMatchSnapshot(); @@ -35,16 +175,103 @@ describe('ClayList', function() { expect(component).toMatchSnapshot(); }); + it('should render a ClayList with simple items', () => { + component = new ClayList({ + items: sagaItems, + schema: [ + { + contentRenderer: 'simple', + fieldsMap: { + title: 'title', + }, + }, + ], + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render a ClayList with simple items with links', () => { + component = new ClayList({ + items: sagaItems, + schema: [ + { + contentRenderer: 'simple', + fieldsMap: { + href: 'downloadHref', + title: 'title', + }, + }, + ], + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render a ClayList with items', () => { + component = new ClayList({ + items: sagaItems, + schema: [ + { + contentRenderer: 'content', + fieldsMap: { + title: 'title', + }, + }, + ], + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render a ClayList with items with links', () => { + component = new ClayList({ + items: sagaItems, + schema: [ + { + contentRenderer: 'content', + fieldsMap: { + href: 'downloadHref', + title: 'title', + }, + }, + ], + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render a ClayList with items with description', () => { + component = new ClayList({ + items: sagaItems, + schema: [ + { + contentRenderer: 'content', + fieldsMap: { + description: 'director', + href: 'downloadHref', + title: 'title', + }, + }, + ], + }); + + expect(component).toMatchSnapshot(); + }); + it('should render a selectable ClayList', () => { component = new ClayList({ - items: [ + items: sagaItems, + schema: [ { - title: 'Star Wars', + contentRenderer: 'content', + fieldsMap: { + description: 'director', + href: 'downloadHref', + title: 'title', + }, }, ], - schema: { - title: 'title', - }, selectable: true, }); @@ -53,19 +280,218 @@ describe('ClayList', function() { it('should render a selectable ClayList with groups', () => { component = new ClayList({ - items: [ + items: groupedItems, + schema: [ + { + contentRenderer: 'content', + fieldsMap: { + description: 'director', + href: 'downloadHref', + title: 'title', + }, + }, + ], + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render a selectable ClayList with icons', () => { + component = new ClayList({ + items: groupedItems, + schema: [ + { + contentRenderer: 'icon', + fieldName: 'status', + iconsMap: { + 'Watched': 'check-circle', + '*': 'exclamation-circle', + }, + }, + { + contentRenderer: 'content', + fieldsMap: { + description: 'director', + href: 'downloadHref', + title: 'title', + }, + }, + ], + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render a selectable ClayList with circle icons', () => { + component = new ClayList({ + items: groupedItems, + schema: [ + { + contentRenderer: 'icon', + fieldName: 'status', + iconsMap: { + 'Watched': 'check-circle', + '*': 'exclamation-circle', + }, + iconShapesMap: { + 'Watched': 'circle', + '*': 'rounded', + }, + }, + { + contentRenderer: 'content', + fieldsMap: { + description: 'director', + href: 'downloadHref', + title: 'title', + }, + }, + ], + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render a selectable ClayList with label', () => { + component = new ClayList({ + items: groupedItems, + schema: [ + { + contentRenderer: 'icon', + fieldName: 'status', + iconsMap: { + 'Watched': 'check-circle', + '*': 'exclamation-circle', + }, + iconShapesMap: { + 'Watched': 'circle', + '*': 'rounded', + }, + }, + { + contentRenderer: 'content', + fieldsMap: { + description: 'director', + href: 'downloadHref', + label: 'status', + title: 'title', + }, + labelStylesMap: { + 'Watched': 'success', + 'Pending': 'warning', + '*': 'danger', + }, + }, + ], + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render a selectable ClayList with action menu', () => { + let itemsWithActionItems = []; + + sagaItems.forEach(item => { + let itemWithActionItems = {}; + + for (let key in item) { + if (Object.prototype.hasOwnProperty.call(item, key)) { + itemWithActionItems[key] = item[key]; + } + } + + itemWithActionItems.actionItems = actionItems; + + itemsWithActionItems.push(itemWithActionItems); + }); + + component = new ClayList({ + items: itemsWithActionItems, + schema: [ + { + contentRenderer: 'icon', + fieldName: 'status', + iconsMap: { + 'Watched': 'check-circle', + '*': 'exclamation-circle', + }, + iconShapesMap: { + 'Watched': 'circle', + '*': 'rounded', + }, + }, + { + contentRenderer: 'content', + fieldsMap: { + description: 'director', + href: 'downloadHref', + label: 'status', + title: 'title', + }, + labelStylesMap: { + 'Watched': 'success', + 'Pending': 'warning', + '*': 'danger', + }, + }, + ], + spritemap: spritemap, + }); + + expect(component).toMatchSnapshot(); + }); + + it('should render a selectable ClayList with quick action menu', () => { + let itemsWithActionItems = []; + + sagaItems.forEach(item => { + let itemWithActionItems = {}; + + for (let key in item) { + if (Object.prototype.hasOwnProperty.call(item, key)) { + itemWithActionItems[key] = item[key]; + } + } + + itemWithActionItems.actionItems = actionItemsWithQuickItems; + + itemsWithActionItems.push(itemWithActionItems); + }); + + component = new ClayList({ + items: itemsWithActionItems, + schema: [ + { + contentRenderer: 'icon', + fieldName: 'status', + iconsMap: { + 'Watched': 'check-circle', + '*': 'exclamation-circle', + }, + iconShapesMap: { + 'Watched': 'circle', + '*': 'rounded', + }, + }, { - items: [ - { - title: 'Star Wars', - }, - ], - label: 'Movies', + contentRenderer: 'content', + fieldsMap: { + description: 'director', + href: 'downloadHref', + label: 'status', + title: 'title', + }, + labelStylesMap: { + 'Watched': 'success', + 'Pending': 'warning', + '*': 'danger', + }, }, ], - schema: { - title: 'title', - }, + spritemap: spritemap, }); expect(component).toMatchSnapshot(); @@ -76,14 +502,15 @@ describe('ClayList', function() { component = new ClayList({ events: {itemToggled: spy}, - items: [ + items: groupedItems, + schema: [ { - title: 'Star Wars', + contentRenderer: 'simple', + fieldsMap: { + title: 'title', + }, }, ], - schema: { - title: 'title', - }, selectable: true, }); diff --git a/packages/clay-list/src/__tests__/__snapshots__/ClayList.js.snap b/packages/clay-list/src/__tests__/__snapshots__/ClayList.js.snap index 2ef2e1da1..a3145b2c7 100644 --- a/packages/clay-list/src/__tests__/__snapshots__/ClayList.js.snap +++ b/packages/clay-list/src/__tests__/__snapshots__/ClayList.js.snap @@ -4,6 +4,223 @@ exports[`ClayList should render a ClayList with classes 1`] = `
      `; +exports[`ClayList should render a ClayList with items 1`] = ` +
        +
      • +
        +

        Episode I: The Phantom Menace

        +
        +
        • +
      • +
        +

        Episode II: Attack of the Clones

        +
        +
        • +
      • +
        +

        Episode III: Revenge of the Sith

        +
        +
        • +
      • +
        +

        Episode IV: A New Hope

        +
        +
        • +
      • +
        +

        Episode V: The Empire Strikes Back

        +
        +
        • +
      • +
        +

        Episode VI: Return of the Jedi

        +
        +
        • +
      • +
        +

        Episode VII: The Force Awakens

        +
        +
        • +
      • +
        +

        Episode VIII: The Last Jedi

        +
        +
        • +
      +`; + +exports[`ClayList should render a ClayList with items with description 1`] = ` + +`; + +exports[`ClayList should render a ClayList with items with links 1`] = ` + +`; + +exports[`ClayList should render a ClayList with simple items 1`] = ` +
        +
      • Episode I: The Phantom Menace
        • +
      • Episode II: Attack of the Clones
        • +
      • Episode III: Revenge of the Sith
        • +
      • Episode IV: A New Hope
        • +
      • Episode V: The Empire Strikes Back
        • +
      • Episode VI: Return of the Jedi
        • +
      • Episode VII: The Force Awakens
        • +
      • Episode VIII: The Last Jedi
        • +
      +`; + +exports[`ClayList should render a ClayList with simple items with links 1`] = ` + +`; + exports[`ClayList should render a selectable ClayList 1`] = `
      • @@ -17,18 +234,1723 @@ exports[`ClayList should render a selectable ClayList 1`] = `

      -

      Star Wars

      +

      + Episode I: The Phantom Menace +

      +

      George Lucas

      +
      +
      • +
    • +
      +
      + +
      +
      +
      +

      + Episode II: Attack of the Clones +

      +

      George Lucas

      +
      +
      • +
    • +
      +
      + +
      +
      +
      +

      + Episode III: Revenge of the Sith +

      +

      George Lucas

      +
      +
      • +
    • +
      +
      + +
      +
      +
      +

      + Episode IV: A New Hope +

      +

      George Lucas

      +
      +
      • +
    • +
      +
      + +
      +
      +
      +

      + Episode V: The Empire Strikes Back +

      +

      Irvin Kershner

      +
      +
      • +
    • +
      +
      + +
      +
      +
      +

      + Episode VI: Return of the Jedi +

      +

      Richard Marquand

      +
      +
      • +
    • +
      +
      + +
      +
      +
      +

      + Episode VII: The Force Awakens +

      +

      J. J. Abrams

      +
      +
      • +
    • +
      +
      + +
      +
      +
      +

      + Episode VIII: The Last Jedi +

      +

      Rian Johnson

      • `; -exports[`ClayList should render a selectable ClayList with groups 1`] = ` +exports[`ClayList should render a selectable ClayList with action menu 1`] = ` +`; + +exports[`ClayList should render a selectable ClayList with circle icons 1`] = ` + +`; + +exports[`ClayList should render a selectable ClayList with groups 1`] = ` + +`; + +exports[`ClayList should render a selectable ClayList with icons 1`] = ` + +`; + +exports[`ClayList should render a selectable ClayList with label 1`] = ` + +`; + +exports[`ClayList should render a selectable ClayList with quick action menu 1`] = ` + `; From b148eac5db256e39f2581c50668267bb8e088a0b Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Fri, 29 Dec 2017 12:26:35 +0100 Subject: [PATCH 20/21] Remove ClayList obsolete tests --- .../clay-list/src/__tests__/ClayListItem.js | 210 ----------------- .../__snapshots__/ClayListItem.js.snap | 216 ------------------ 2 files changed, 426 deletions(-) delete mode 100644 packages/clay-list/src/__tests__/ClayListItem.js delete mode 100644 packages/clay-list/src/__tests__/__snapshots__/ClayListItem.js.snap diff --git a/packages/clay-list/src/__tests__/ClayListItem.js b/packages/clay-list/src/__tests__/ClayListItem.js deleted file mode 100644 index 62bfa684f..000000000 --- a/packages/clay-list/src/__tests__/ClayListItem.js +++ /dev/null @@ -1,210 +0,0 @@ -import ClayListItem from '../ClayListItem'; - -const spritemap = '../node_modules/lexicon-ux/build/images/icons/icons.svg'; - -let component; - -let actionItems = [ - { - href: '#1', - label: 'Option 1', - }, - { - href: '#2', - label: 'Option 2', - separator: true, - }, - { - href: '#3', - label: 'Option 3', - }, -]; - -let actionItemsWithQuickItems = [ - { - href: '#1', - icon: 'trash', - label: 'Option 1', - quickAction: true, - }, - { - href: '#2', - icon: 'download', - label: 'Option 2', - quickAction: true, - separator: true, - }, - { - href: '#3', - icon: 'info-circle-open', - label: 'Option 3', - quickAction: true, - }, -]; - -describe('ClayListItem', function() { - afterEach(() => { - if (component) { - component.dispose(); - } - }); - - it('should render the default markup', () => { - component = new ClayListItem({ - title: 'My Item', - }); - - expect(component).toMatchSnapshot(); - }); - - it('should render a ClayListItem with classes', () => { - component = new ClayListItem({ - elementClasses: 'my-custom-class', - title: 'My Item', - }); - - expect(component).toMatchSnapshot(); - }); - - it('should render a ClayListItem with id', () => { - component = new ClayListItem({ - id: 'myId', - title: 'My Item', - }); - - expect(component).toMatchSnapshot(); - }); - - it('should render a ClayListItem with link', () => { - component = new ClayListItem({ - href: '#1', - title: 'Item 1', - }); - - expect(component).toMatchSnapshot(); - }); - - it('should render a ClayListItem with description', () => { - component = new ClayListItem({ - description: 'Description 1', - title: 'Item 1', - }); - - expect(component).toMatchSnapshot(); - }); - - it('should render a ClayListItem with description and url', () => { - component = new ClayListItem({ - description: 'Description 1', - href: '#1', - title: 'Item 1', - }); - - expect(component).toMatchSnapshot(); - }); - - it('should render a selectable ClayListItem', () => { - component = new ClayListItem({ - description: 'Description 1', - href: '#1', - selectable: true, - title: 'Item 1', - }); - - expect(component).toMatchSnapshot(); - }); - - it('should render a selected ClayListItem', () => { - component = new ClayListItem({ - description: 'Description 1', - href: '#1', - selectable: true, - selected: true, - title: 'Item 1', - }); - - expect(component).toMatchSnapshot(); - }); - - it('should render a ClayListItem with icon', () => { - component = new ClayListItem({ - icon: 'folder', - spritemap: spritemap, - title: 'Item 1', - }); - - expect(component).toMatchSnapshot(); - }); - - it('should render a ClayListItem with circle icons', () => { - component = new ClayListItem({ - icon: 'folder', - iconShape: 'circle', - spritemap: spritemap, - title: 'Item 1', - }); - - expect(component).toMatchSnapshot(); - }); - - it('should render a ClayListItem with label', () => { - component = new ClayListItem({ - label: 'Status', - title: 'Item 1', - }); - - expect(component).toMatchSnapshot(); - }); - - it('should render a ClayListItem with labels with style', () => { - component = new ClayListItem({ - label: 'Status', - labelStylesMap: { - '*': 'info', - }, - title: 'Item 1', - }); - - expect(component).toMatchSnapshot(); - }); - - it('should render a ClayListItem with action menu', () => { - component = new ClayListItem({ - actionItems: actionItems, - spritemap: spritemap, - title: 'Item 1', - }); - - expect(component).toMatchSnapshot(); - }); - - it('should render a ClayListItem with quick action menu', () => { - component = new ClayListItem({ - actionItems: actionItemsWithQuickItems, - spritemap: spritemap, - title: 'Item 1', - }); - - expect(component).toMatchSnapshot(); - }); - - it('should render a ClayListItem and emit an event on item toggled', () => { - const spy = jest.fn(); - - component = new ClayListItem({ - events: {itemToggled: spy}, - selectable: true, - title: 'Item 1', - }); - - component.element.querySelector('input[type="checkbox"]').click(); - - expect(spy).toHaveBeenCalled(); - }); - - it('should fail when no title is passed', function() { - expect(() => { - component = new ClayListItem(); - }).toThrow(); - }); -}); diff --git a/packages/clay-list/src/__tests__/__snapshots__/ClayListItem.js.snap b/packages/clay-list/src/__tests__/__snapshots__/ClayListItem.js.snap deleted file mode 100644 index ccb024669..000000000 --- a/packages/clay-list/src/__tests__/__snapshots__/ClayListItem.js.snap +++ /dev/null @@ -1,216 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ClayListItem should render a ClayListItem with action menu 1`] = ` -
    • -
      -

      Item 1

      -
      -
      -
      -
      - -
      - -
      -
      -
      -
      • -`; - -exports[`ClayListItem should render a ClayListItem with circle icons 1`] = ` -
    • -
      - - - - - -
      -
      -

      Item 1

      -
      -
      • -`; - -exports[`ClayListItem should render a ClayListItem with classes 1`] = `
    • My Item
      • `; - -exports[`ClayListItem should render a ClayListItem with description 1`] = ` -
    • -
      -

      Item 1

      -

      Description 1

      -
      -
      • -`; - -exports[`ClayListItem should render a ClayListItem with description and url 1`] = ` -
    • -
      -

      - Item 1 -

      -

      Description 1

      -
      -
      • -`; - -exports[`ClayListItem should render a ClayListItem with icon 1`] = ` -
    • -
      - - - - - -
      -
      -

      Item 1

      -
      -
      • -`; - -exports[`ClayListItem should render a ClayListItem with id 1`] = `
    • My Item
      • `; - -exports[`ClayListItem should render a ClayListItem with label 1`] = ` -
    • -
      -

      Item 1

      -
      - Status -
      -
      -
      • -`; - -exports[`ClayListItem should render a ClayListItem with labels with style 1`] = ` -
    • -
      -

      Item 1

      -
      - Status -
      -
      -
      • -`; - -exports[`ClayListItem should render a ClayListItem with link 1`] = ` -
    • - Item 1 -
      • -`; - -exports[`ClayListItem should render a ClayListItem with quick action menu 1`] = ` -
    • -
      -

      Item 1

      -
      -
      -
      - - - - - - - - - -
      -
      - -
      - -
      -
      -
      -
      • -`; - -exports[`ClayListItem should render a selectable ClayListItem 1`] = ` -
    • -
      -
      - -
      -
      -
      -

      - Item 1 -

      -

      Description 1

      -
      -
      • -`; - -exports[`ClayListItem should render a selected ClayListItem 1`] = ` -
    • -
      -
      - -
      -
      -
      -

      - Item 1 -

      -

      Description 1

      -
      -
      • -`; - -exports[`ClayListItem should render the default markup 1`] = `
    • My Item
      • `; From 0d739ff4f1a55671984588bb7140b675b396f545 Mon Sep 17 00:00:00 2001 From: Carlos Lancha Date: Fri, 29 Dec 2017 12:26:46 +0100 Subject: [PATCH 21/21] Update ClayList demo --- packages/clay-list/demos/index.html | 185 ++++++++++++++++++---------- 1 file changed, 122 insertions(+), 63 deletions(-) diff --git a/packages/clay-list/demos/index.html b/packages/clay-list/demos/index.html index c1515064f..0f3eb687f 100644 --- a/packages/clay-list/demos/index.html +++ b/packages/clay-list/demos/index.html @@ -205,102 +205,144 @@

      Selectable List with Selected Items

      } ]; - /** Simple List **/ + // Simple List // new metal.ClayList({ items: items, - schema: { - title: 'title', - }, + schema: [{ + contentRenderer: 'simple', + fieldsMap: { + title: 'title', + } + }, + ], }, '#container1'); - /** Simple List with Links**/ + // Simple List with Links // new metal.ClayList({ items: items, - schema: { - href: 'downloadHref', - title: 'title', - }, + schema: [{ + contentRenderer: 'simple', + fieldsMap: { + href: 'downloadHref', + title: 'title', + } + }, + ], }, '#container2'); - /** List with Descriptions **/ + // List with Descriptions // new metal.ClayList({ items: items, - schema: { - description: 'director', - href: 'downloadHref', - title: 'title', - }, + schema: [{ + contentRenderer: 'content', + fieldsMap: { + description: 'director', + href: 'downloadHref', + title: 'title', + } + }, + ], }, '#container3'); - - /** Selectable List **/ + + // Selectable List // new metal.ClayList({ items: items, - schema: { - description: 'director', - href: 'downloadHref', - title: 'title', - }, + schema: [{ + contentRenderer: 'content', + fieldsMap: { + description: 'director', + href: 'downloadHref', + title: 'title', + } + }, + ], selectable: true, }, '#container4'); - /** Selectable List with Icons **/ + // Selectable List with Icons // new metal.ClayList({ items: items, - schema: { - description: 'director', - href: 'downloadHref', + schema: [{ + contentRenderer: 'icon', + fieldName: 'status', iconsMap: { - '*': 'folder', + 'Watched': 'check-circle', + '*': 'exclamation-circle', }, - title: 'title', }, + { + contentRenderer: 'content', + fieldsMap: { + description: 'director', + href: 'downloadHref', + title: 'title', + } + }], selectable: true, spritemap: spritemap, }, '#container5'); - /** Selectable List with Circle Icons **/ + // Selectable List with Circle Icons // new metal.ClayList({ items: items, - schema: { - description: 'director', - href: 'downloadHref', + schema: [{ + contentRenderer: 'icon', + fieldName: 'status', iconsMap: { - '*': 'folder', + 'Watched': 'check-circle', + '*': 'exclamation-circle', }, iconShapesMap: { - '*': 'circle', + 'Watched': 'circle', + '*': 'rounded', }, - title: 'title', }, + { + contentRenderer: 'content', + fieldsMap: { + description: 'director', + href: 'downloadHref', + title: 'title', + } + }], selectable: true, spritemap: spritemap, }, '#container6'); - /** Selectable List with Label **/ + // Selectable List with Label // new metal.ClayList({ items: items, - schema: { - description: 'director', - href: 'downloadHref', + schema: [{ + contentRenderer: 'icon', + fieldName: 'status', iconsMap: { - '*': 'folder', + 'Watched': 'check-circle', + '*': 'exclamation-circle', }, iconShapesMap: { - '*': 'circle', + 'Watched': 'circle', + '*': 'rounded', + }, + }, + { + contentRenderer: 'content', + fieldsMap: { + description: 'director', + href: 'downloadHref', + label: 'status', + title: 'title', }, - label: 'status', labelStylesMap: { 'Watched': 'success', 'Pending': 'warning', '*': 'danger', }, - title: 'title', - }, + }], selectable: true, spritemap: spritemap, }, '#container7'); - /** Selectable List with Action Menu **/ + // Selectable List with Action Menu // items.forEach(item => { item.items.forEach(nestedItem => { nestedItem.actionItems = actionItemsWithQuickItems; @@ -309,28 +351,37 @@

      Selectable List with Selected Items

      new metal.ClayList({ items: items, - schema: { - description: 'director', - href: 'downloadHref', + schema: [{ + contentRenderer: 'icon', + fieldName: 'status', iconsMap: { - '*': 'folder', + 'Watched': 'check-circle', + '*': 'exclamation-circle', }, iconShapesMap: { - '*': 'circle', + 'Watched': 'circle', + '*': 'rounded', + }, + }, + { + contentRenderer: 'content', + fieldsMap: { + description: 'director', + href: 'downloadHref', + label: 'status', + title: 'title', }, - label: 'status', labelStylesMap: { 'Watched': 'success', 'Pending': 'warning', '*': 'danger', }, - title: 'title', - }, + }], selectable: true, spritemap: spritemap, }, '#container8'); - /** Selectable List with Selected Items **/ + // Selectable List with Selected Items // items.forEach(item => { item.items.forEach(nestedItem => { nestedItem.selected = true; @@ -339,24 +390,32 @@

      Selectable List with Selected Items

      new metal.ClayList({ items: items, - schema: { - description: 'director', - href: 'downloadHref', + schema: [{ + contentRenderer: 'icon', + fieldName: 'status', iconsMap: { - '*': 'folder', + 'Watched': 'check-circle', + '*': 'exclamation-circle', }, iconShapesMap: { - '*': 'circle', + 'Watched': 'circle', + '*': 'rounded', + }, + }, + { + contentRenderer: 'content', + fieldsMap: { + description: 'director', + href: 'downloadHref', + label: 'status', + title: 'title', }, - label: 'status', labelStylesMap: { 'Watched': 'success', 'Pending': 'warning', '*': 'danger', }, - selected: 'selected', - title: 'title', - }, + }], selectable: true, spritemap: spritemap, }, '#container9');