[TECH] Autorise les lignes du tableaux à avoir une cellule de type heading scope "row" (PIX-16895)

addon/components/pix-table-column.hbs

@@ -13,7 +13,13 @@
     </div>
   </th>
 {{else}}
-  <td ...attributes class={{this.typeClass}}>
-    {{yield to="cell"}}
-  </td>
+  {{#if @isMainRow}}
+    <th scope="row" class={{this.typeClass}} ...attributes>
+      {{yield to="cell"}}
+    </th>
+  {{else}}
+    <td class={{this.typeClass}} ...attributes>
+      {{yield to="cell"}}
+    </td>
+  {{/if}}
 {{/if}}

addon/styles/_pix-table-column.scss

@@ -1,5 +1,5 @@
 .pix-table-column {
   &--number{
-    text-align: right;
+    text-align: left;
   }
 }

addon/styles/_pix-table.scss

@@ -59,11 +59,17 @@
       align-items: center;
     }
 
-    th {
+    th[scope='col'] {
+      font-weight: var(--pix-font-bold);
       text-align: start;
       vertical-align: middle;
     }
 
+    th[scope='row'] {
+      font-weight: var(--pix-font-normal);
+    }
+
+
     td, th {
       padding: var(--pix-spacing-6x) var(--pix-spacing-4x);
 

app/stories/pix-table-column.stories.js

@@ -58,6 +58,15 @@ export default {
         description: 'Defini le style avec lequel nous afficherons la colonne',
       },
     },
+    isMainRow: {
+      name: 'isMainRow',
+      description:
+        'Permet de définir la cellule qui portera la valeur principale de la ligne entière',
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
     header: {
       name: '<:header>',
       description: 'En-tête de la colonne',
@@ -75,7 +84,7 @@ const Template = (args) => {
   return {
     template: hbs`<PixTable @data={{this.data}} @caption={{this.caption}}>
   <:columns as |row context|>
-    <PixTableColumn @context={{context}}>
+    <PixTableColumn @context={{context}} @isMainRow={{this.isMainRow}}>
       <:header>
         Nom
       </:header>

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

@@ -107,7 +107,39 @@ module('Integration | Component | table-column', function (hooks) {
       const cell = screen.queryByRole('cell', { name: '15' });
       assert.dom(cell).exists();
       const textAlign = window.getComputedStyle(cell).getPropertyValue('text-align');
-      assert.strictEqual(textAlign, 'right');
+      assert.strictEqual(textAlign, 'left');
+    });
+  });
+
+  module('when isMainRow defined', function () {
+    test('it renders a defined row title', async function (assert) {
+      // when
+      const screen = await render(
+        hbs`<PixTable @caption='Ceci est le caption de notre table' @data={{this.data}}>
+  <:columns as |row context|>
+    <PixTableColumn @context={{context}} @isMainRow={{true}}>
+      <:header>
+        Nom
+      </:header>
+      <:cell>
+        {{row.name}}
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn @context={{context}} @type='number'>
+      <:header>
+        Âge
+      </:header>
+      <:cell>
+        {{row.age}}
+      </:cell>
+    </PixTableColumn>
+  </:columns>
+</PixTable>`,
+      );
+
+      // then
+      const row = screen.getByRole('row', { name: 'jean 15' });
+      assert.ok(row);
     });
   });
 });