[FEATURE] Amélioration PixTable (PIX-16753)

addon/components/pix-table.hbs

@@ -1,4 +1,4 @@
-<div class="pix-table">
+<div class="pix-table" ...attributes>
   <table class={{this.tableClass}}>
     <caption class="screen-reader-only">{{this.caption}}</caption>
     <thead class={{this.headerClass}}>
@@ -7,9 +7,12 @@
       </tr>
     </thead>
     <tbody>
-      {{#each @data as |row|}}
-        <tr>
-          {{yield row "cell" to="columns"}}
+      {{#each @data as |row index|}}
+        <tr
+          class={{if this.hasOnRowClick "pix-table__clickable-row" ""}}
+          {{on "click" (fn this.onClick row)}}
+        >
+          {{yield row "cell" index to="columns"}}
         </tr>
       {{/each}}
     </tbody>

addon/components/pix-table.js

@@ -1,4 +1,5 @@
 import { warn } from '@ember/debug';
+import { action } from '@ember/object';
 import Component from '@glimmer/component';
 
 export default class PixTable extends Component {
@@ -39,4 +40,16 @@ export default class PixTable extends Component {
   get headerClass() {
     return `pix-table-header--${this.variant}`;
   }
+
+  get hasOnRowClick() {
+    return typeof this.args.onRowClick === 'function';
+  }
+
+  @action
+  onClick(row, event) {
+    event.stopPropagation();
+    if (this.hasOnRowClick) {
+      this.args.onRowClick(row);
+    }
+  }
 }

addon/styles/_pix-table.scss

@@ -11,18 +11,38 @@
 
   @extend %pix-body-s;
 
-  .pix-table__condensed {
+  &__condensed {
     th, td {
       padding: var(--pix-spacing-2x) var(--pix-spacing-4x);
     }
   }
 
+  &__clickable-row {
+    cursor: pointer;
+
+    &:hover, &:focus, &:active {
+      transition: 0.25s ease;
+    }
+
+    &:hover {
+      background-color: rgba(var(--pix-neutral-100-inline), 0.50);
+    }
+
+    &:focus {
+      background-color: rgba(var(--pix-neutral-100-inline), 0.40);
+    }
+
+    &:active {
+      background-color: rgba(var(--pix-neutral-100-inline), 0.75);
+    }
+  }
+
   table {
     min-width: 100%;
     border-collapse: collapse;
 
-    tbody > tr:nth-of-type(even) {
-      background-color: var(--pix-neutral-20);
+    tbody > tr:nth-of-type(even):not(.pix-table__clickable-row:hover, .pix-table__clickable-row:focus, .pix-table__clickable-row:active) {
+      background-color: rgba(var(--pix-neutral-20-inline), 0.80);
     }
 
     thead.pix-table-header {

app/stories/pix-table.stories.js

@@ -20,6 +20,12 @@ export default {
         'Définition du rendu des différentes colonnes de la table en utilisant `<PixTableColumn>`. Expose les paramètres `row` et `context` (correspondant aux données de la ligne actuelle)',
       type: { name: 'block content', required: true },
     },
+    onRowClick: {
+      name: 'onRowClick',
+      description:
+        "Permet d'ajouter un onClick sur le <tr> de chaque ligne, la fonction en paramètre récupérera l'objet au complet.",
+      type: { name: 'function', required: false },
+    },
     variant: {
       name: 'variant',
       description: "Afficher le bon variant pour l'application",

tests/dummy/app/controllers/table-page.js

@@ -38,6 +38,9 @@ export default class TablePage extends Controller {
     }
   }
 
+  @action
+  onClick() {}
+
   @action
   onNumSort() {
     this.resetOrders('num');

tests/dummy/app/templates/table-page.hbs

@@ -1,4 +1,9 @@
-<PixTable @variant={{this.variant}} @data={{this.data}} @caption={{this.caption}}>
+<PixTable
+  @variant={{this.variant}}
+  @data={{this.data}}
+  @caption={{this.caption}}
+  @onRowClick={{this.onClick}}
+>
   <:columns as |row context|>
     <PixTableColumn
       @context={{context}}

tests/integration/components/pix-table-test.js

@@ -214,6 +214,55 @@ module('Integration | Component | table', function (hooks) {
     });
   });
 
+  module('#onRowClick', function () {
+    test('should call onClick on clicked row', async function (assert) {
+      this.onClick = sinon.stub();
+
+      const screen = await render(
+        hbs`<PixTable
+  @caption='Ceci est le caption de notre table'
+  @data={{this.data}}
+  @onRowClick={{this.onClick}}
+>
+  <:columns as |row context|>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Nom
+      </:header>
+      <:cell>
+        {{row.name}}
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Description
+      </:header>
+      <:cell>
+        {{row.description}}
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Age
+      </:header>
+      <:cell>
+        il a
+        {{row.age}}
+        ans
+      </:cell>
+    </PixTableColumn>
+  </:columns>
+</PixTable>`,
+      );
+
+      //when
+      await click(screen.getByText('jean'));
+
+      // then
+      assert.ok(this.onClick.calledWithExactly(this.data[0]));
+    });
+  });
+
   module('#sort', function () {
     test('it should call @onSort on click', async function (assert) {
       // given