refactor(pix-table): rewrite to block params API

Co-authored-by: Iris Benoit-Martin <[email protected]> Co-authored-by: Jérémie Jadé <[email protected]> Co-authored-by: Fael Bassetti <[email protected]>
1024pix · Nov 28, 2024 · 49c3f10 · 49c3f10
1 parent 43186c1
commit 49c3f10
Show file tree

Hide file tree

Showing 11 changed files with 243 additions and 49 deletions.
diff --git a/addon/components/pix-table-column.hbs b/addon/components/pix-table-column.hbs
@@ -0,0 +1,14 @@
+{{#if @context.isHeader}}
+  <th scope="col">
+    {{yield to="header"}}
+    {{@name}}
+  </th>
+{{else}}
+  <td>
+    {{#if (has-block "cell")}}
+      {{yield this.value @context.row to="cell"}}
+    {{else}}
+      {{this.value}}
+    {{/if}}
+  </td>
+{{/if}}
diff --git a/addon/components/pix-table-column.js b/addon/components/pix-table-column.js
@@ -0,0 +1,8 @@
+import Component from '@glimmer/component';
+
+export default class PixTableColumn extends Component {
+  get value() {
+    if (!this.args.key) return undefined;
+    return this.args.context.row[this.args.key];
+  }
+}
diff --git a/addon/components/pix-table.hbs b/addon/components/pix-table.hbs
@@ -6,19 +6,15 @@
         {{yield to="colgroup"}}
       </colgroup>
     {{/if}}
-    <thead>
+    <thead class={{this.headerClass}}>
       <tr>
-        {{#each @headers as |header|}}
-          <th scope="col" class={{this.headerClass}}>{{header.name}}</th>
-        {{/each}}
+        {{yield this.headerContext to="columns"}}
       </tr>
     </thead>
     <tbody>
-      {{#each this.computedData as |row|}}
+      {{#each @data as |row|}}
         <tr>
-          {{#each row as |value|}}
-            <td>{{value}}</td>
-          {{/each}}
+          {{yield (this.getRowContext row) to="columns"}}
         </tr>
       {{/each}}
     </tbody>

diff --git a/addon/components/pix-table.js b/addon/components/pix-table.js
@@ -25,4 +25,17 @@ export default class PixTable extends Component {
   get headerClass() {
     return `pix-table-header--${this.variant}`;
   }
+
+  get headerContext() {
+    return {
+      isHeader: true,
+    };
+  }
+
+  getRowContext(row) {
+    return {
+      isHeader: false,
+      row,
+    };
+  }
 }
diff --git a/addon/styles/_pix-table.scss b/addon/styles/_pix-table.scss
@@ -15,24 +15,24 @@
       background-color: var(--pix-neutral-20);
     }
 
-    th {
-      text-align: start;
-
-      &.pix-table-header {
-        &--primary {
-          background: var(--pix-primary-10);
-        }
+    thead.pix-table-header {
+      &--primary {
+        background: var(--pix-primary-10);
+      }
 
-        &--orga {
-          background: var(--pix-orga-50);
-        }
+      &--orga {
+        background: var(--pix-orga-50);
+      }
 
-        &--certif {
-          background: var(--pix-certif-50);
-        }
+      &--certif {
+        background: var(--pix-certif-50);
       }
     }
 
+    th {
+      text-align: start;
+    }
+
     td, th {
       padding: var(--pix-spacing-6x) var(--pix-spacing-4x);
 

diff --git a/app/components/pix-table-column.js b/app/components/pix-table-column.js
@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-table-column';
diff --git a/app/stories/pix-table-column.mdx b/app/stories/pix-table-column.mdx
@@ -0,0 +1,21 @@
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+
+import * as ComponentStories from './pix-table-column.stories';
+
+<Meta of={ComponentStories} />
+
+# PixTableColumn
+
+Une colonne qui s'affiche sous forme de header ou de colonne en enfant d'un [PixTable](/docs/data-display-table--docs)
+
+<Story of={ComponentStories.Default} height={200} />
+
+## Usage
+
+```html
+<PixTableColumn @context={{context}} @name='Description' @key='description'>
+```
+
+## Arguments
+
+<ArgTypes />
diff --git a/app/stories/pix-table-column.stories.js b/app/stories/pix-table-column.stories.js
@@ -0,0 +1,25 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export default {
+  title: 'Data display/Table/TableColumn',
+  // TODO: add component attributes information
+  // select attribute data type from https://storybook.js.org/docs/react/essentials/controls
+  argTypes: {
+    context: {
+      name: 'context',
+      description:
+        "Contexte de rendu donné par le composant PixTable parent. Permet de savoir si on doit afficher le header de la colonne ou le contenu d'une cellule.",
+      type: { name: 'object', required: true },
+    },
+  },
+};
+
+const Template = (args) => {
+  return {
+    template: hbs`<PixTableColumn />`,
+    context: args,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {};
diff --git a/app/stories/pix-table.mdx b/app/stories/pix-table.mdx
@@ -6,33 +6,100 @@ import * as ComponentStories from './pix-table.stories';
 
 # PixTable
 
-Une table qui prend en argument des headers et des data.
+Une table qui prend en argument des data et en `block content` des [PixTableColumn](/docs/data-display-table-tablecolumn--docs).
 
 ## Exemple basique
 <Story of={ComponentStories.Default} height={400} />
 
 ```html
 <PixTable
+  @variant={{this.variant}}
   @data={{this.data}}
-  @headers={{this.headers}}
   @caption={{this.caption}}
-/>
+>
+  <:columns as |context|>
+    <PixTableColumn
+      @context={{context}}
+      @name="Nom"
+      @key="name"
+    />
+    <PixTableColumn
+      @context={{context}}
+      @name="Description"
+      @key="description"
+    >
+      <:cell as |description|>
+        <i>{{description}}</i>
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn
+      @context={{context}}
+      @name="Âge"
+      @key="age"
+    >
+      <:cell as |age|>
+        il a {{age}} ans
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn
+      @context={{context}}
+    >
+      <:cell as |_ row|>
+        <PixIcon @name="info" @title={{concat row.name " a " row.age " ans"}} />
+      </:cell>
+    </PixTableColumn>
+  </:columns>
+</PixTable>
 ```
 
+
 ## Exemple avec un colgroup
+
 <Story of={ComponentStories.ColGroup} height={400} />
 
 ```html
 <PixTable
+  @variant={{this.variant}}
   @data={{this.data}}
-  @headers={{this.headers}}
   @caption={{this.caption}}
 >
   <:colgroup>
     <col />
-    <col class="table__column--wide" />
+    <col class='table__column--wide' />
     <col />
   </:colgroup>
+  <:columns as |context|>
+    <PixTableColumn
+      @context={{context}}
+      @name="Nom"
+      @key="name"
+    />
+    <PixTableColumn
+      @context={{context}}
+      @name="Description"
+      @key="description"
+    >
+      <:cell as |description|>
+        <i>{{description}}</i>
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn
+      @context={{context}}
+      @name="Âge"
+      @key="age"
+    >
+      <:cell as |age|>
+        il a {{age}} ans
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn
+      @context={{context}}
+    >
+      <:cell as |_ row|>
+        <PixIcon @name="info" @title={{concat row.name " a " row.age " ans"}} />
+      </:cell>
+    </PixTableColumn>
+  </:columns>
 </PixTable>
 <style>
   .table__column--wide { width: 500px; }

diff --git a/app/stories/pix-table.stories.js b/app/stories/pix-table.stories.js
@@ -9,10 +9,16 @@ export default {
       description: 'Liste des données du tableau',
       type: { name: 'array', required: true },
     },
-    headers: {
-      name: 'headers',
-      description: 'Nom des colonnes',
-      type: { name: 'array', required: true },
+    caption: {
+      name: 'caption',
+      description: "Description du tableau (lisible uniquement par les lecteurs d'écran)",
+      type: { name: 'string', required: true },
+    },
+    columns: {
+      name: '<:columns>',
+      description:
+        'Définition du rendu des différentes colonnes de la table en utilisant `<PixTableColumn>`',
+      type: { name: 'block content', required: true },
     },
     variant: {
       name: 'variant',
@@ -28,11 +34,6 @@ export default {
       },
       type: { name: 'string', required: false },
     },
-    caption: {
-      name: 'caption',
-      description: "Description du tableau (lisible uniquement par les lecteurs d'écran)",
-      type: { name: 'string', required: true },
-    },
     colgroup: {
       name: '<:colgroup>',
       description:
@@ -44,28 +45,59 @@ export default {
 
 const Template = (args) => {
   return {
-    template: hbs`<PixTable
-  @variant={{this.variant}}
-  @data={{this.data}}
-  @headers={{this.headers}}
-  @caption={{this.caption}}
-/>`,
+    template: hbs`<PixTable @variant={{this.variant}} @data={{this.data}} @caption={{this.caption}}>
+  <:columns as |context|>
+    <PixTableColumn @context={{context}} @name='Nom' @key='name' />
+    <PixTableColumn @context={{context}} @name='Description' @key='description'>
+      <:cell as |description|>
+        <i>{{description}}</i>
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn @context={{context}} @name='Âge' @key='age'>
+      <:cell as |age|>
+        il a
+        {{age}}
+        ans
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn @context={{context}}>
+      <:cell as |_ row|>
+        <PixIcon @name='info' @title={{concat row.name ' a ' row.age ' ans'}} />
+      </:cell>
+    </PixTableColumn>
+  </:columns>
+</PixTable>`,
     context: args,
   };
 };
 const Template2 = (args) => {
   return {
-    template: hbs`<PixTable
-  @variant={{this.variant}}
-  @data={{this.data}}
-  @headers={{this.headers}}
-  @caption={{this.caption}}
->
+    template: hbs`<PixTable @variant={{this.variant}} @data={{this.data}} @caption={{this.caption}}>
   <:colgroup>
     <col />
     <col class='table__column--wide' />
     <col />
   </:colgroup>
+  <:columns as |context|>
+    <PixTableColumn @context={{context}} @name='Nom' @key='name' />
+    <PixTableColumn @context={{context}} @name='Description' @key='description'>
+      <:cell as |description|>
+        <i>{{description}}</i>
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn @context={{context}} @name='Âge' @key='age'>
+      <:cell as |age|>
+        il a
+        {{age}}
+        ans
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn @context={{context}}>
+      <:cell as |_ row|>
+        <PixIcon @name='info' @title={{concat row.name ' a ' row.age ' ans'}} />
+      </:cell>
+    </PixTableColumn>
+  </:columns>
 </PixTable>
 {{! template-lint-disable no-forbidden-elements}}
 <style>
@@ -82,12 +114,12 @@ Default.args = {
     {
       name: 'jean',
       description: 'fort au jungle speed',
-      age: 'il a 15ans',
+      age: 15,
     },
     {
       name: 'brian',
       description: 'travail au peach pit',
-      age: 'il a 25ans',
+      age: 25,
     },
   ],
   headers: [

diff --git a/tests/integration/components/pix-table-column-test.js b/tests/integration/components/pix-table-column-test.js
@@ -0,0 +1,17 @@
+//! template-lint-disable
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@1024pix/ember-testing-library';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | table-column', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders the default PixTableColumn', async function (assert) {
+    // when
+    await render(hbs`<PixTableColumn />`);
+
+    // then
+    assert.ok(false);
+  });
+});