docs(table): update table stories

Co-authored-by: Jérémie Jadé <jeremie.jade@pix.fr> Co-authored-by: Fael Bassetti <fael.bassetti@pix.fr>
1024pix · Dec 11, 2024 · a9725b2 · a9725b2
1 parent 4c4bd50
commit a9725b2
Show file tree

Hide file tree

Showing 6 changed files with 201 additions and 17 deletions.
diff --git a/app/stories/pix-table-basic-column.mdx b/app/stories/pix-table-basic-column.mdx
@@ -6,7 +6,8 @@ import * as ComponentStories from './pix-table-basic-column.stories';
 
 # PixTableBasicColumn
 
-Un composant enfant du PixTable qui affiche une colonne de type `text` ou `number`
+Un composant enfant du PixTable qui affiche une colonne de type `text` ou `number`.
+Tout comme `PixTableColumn`, elle peut être triée.
 
 <Story of={ComponentStories.Default} height={400} />
 

diff --git a/app/stories/pix-table-basic-column.stories.js b/app/stories/pix-table-basic-column.stories.js
@@ -26,6 +26,29 @@ export default {
       description: 'La valeur de la cellule',
       type: { name: 'string', required: true },
     },
+    sort: {
+      name: 'sort',
+      description: 'Fonction de tri, a la même signature que `Array.prototype.sort`',
+      type: { name: 'function', required: false },
+    },
+    ariaLabelDefaultSort: {
+      name: 'ariaLabelDefaultSort',
+      description:
+        "Label du bouton de tri, lorsqu'aucun tri n'est appliqué. ⚠️ Obligatoire si `@sort` est utilisé ⚠️",
+      type: { name: 'string', required: false },
+    },
+    ariaLabelSortAsc: {
+      name: 'ariaLabelSortAsc',
+      description:
+        'Label du bouton de tri (pour trier en ordre ascendant), lorsque le tri descendant est appliqué. ⚠️ Obligatoire si `@sort` est utilisé ⚠️',
+      type: { name: 'string', required: false },
+    },
+    ariaLabelSortDesc: {
+      name: 'ariaLabelSortDesc',
+      description:
+        'Label du bouton de tri (pour trier en ordre descendant), lorsque le tri ascendant est appliqué. ⚠️ Obligatoire si `@sort` est utilisé ⚠️',
+      type: { name: 'string', required: false },
+    },
   },
 };
 
@@ -38,12 +61,20 @@ const Template = (args) => {
       @type={{this.nameColumnType}}
       @name='Nom'
       @value={{row.name}}
+      @sort={{this.nameSort}}
+      @ariaLabelDefaultSort={{this.ariaLabelDefaultSort}}
+      @ariaLabelSortAsc={{this.ariaLabelSortAsc}}
+      @ariaLabelSortDesc={{this.ariaLabelSortDesc}}
     />
     <PixTableBasicColumn
       @context={{context}}
       @type={{this.ageColumnType}}
       @name='Âge'
       @value={{row.age}}
+      @sort={{this.ageSort}}
+      @ariaLabelDefaultSort={{this.ariaLabelDefaultSort}}
+      @ariaLabelSortAsc={{this.ariaLabelSortAsc}}
+      @ariaLabelSortDesc={{this.ariaLabelSortDesc}}
     />
   </:columns>
 </PixTable>`,
@@ -67,3 +98,25 @@ Default.args = {
   nameColumnType: 'text',
   ageColumnType: 'number',
 };
+
+export const Sorted = Template.bind({});
+Sorted.args = {
+  caption: 'Description du tableau',
+  data: [
+    {
+      name: 'jean',
+      age: 15,
+    },
+    {
+      name: 'brian',
+      age: 25,
+    },
+  ],
+  nameColumnType: 'text',
+  ageColumnType: 'number',
+  nameSort: (a, b) => a.name.localeCompare(b.name),
+  ageSort: (a, b) => a - b,
+  ariaLabelDefaultSort: 'click pour trier',
+  ariaLabelSortAsc: 'click pour trier en ordre ascendant',
+  ariaLabelSortDesc: 'click pour trier en ordre descendant',
+};
diff --git a/app/stories/pix-table-column.mdx b/app/stories/pix-table-column.mdx
@@ -15,6 +15,14 @@ Une colonne d'un [PixTable](/docs/data-display-table--docs), gère l'affichage d
 ```html
 <PixTable @data={{this.data}} @caption={{this.caption}}>
   <:columns as |row context|>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Nom
+      </:header>
+      <:cell>
+        {{row.name}}
+      </:cell>
+    </PixTableColumn>
     <PixTableColumn @context={{context}}>
       <:header>
         Info
@@ -27,6 +35,41 @@ Une colonne d'un [PixTable](/docs/data-display-table--docs), gère l'affichage d
 </PixTable>
 ```
 
+## Tri
+
+<Story of={ComponentStories.Sorted} height={400} />
+
+```html
+<PixTable @data={{this.data}} @caption={{this.caption}}>
+  <:columns as |row context|>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Nom
+      </:header>
+      <:cell>
+        {{row.name}}
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn
+      @context={{context}}
+      @sort={{this.sortNum}}
+      @ariaLabelDefaultSort={{this.otherArialLabelDefaultSort}}
+      @ariaLabelSortAsc={{this.ariaLabelSortAsc}}
+      @ariaLabelSortDesc={{this.ariaLabelSortDesc}}
+    >
+      <:header>
+        Age
+      </:header>
+      <:cell>
+        {{row.age}}
+      </:cell>
+    </PixTableColumn>
+  </:columns>
+</PixTable>
+```
+
+
+
 ## Arguments
 
 <ArgTypes />
diff --git a/app/stories/pix-table-column.stories.js b/app/stories/pix-table-column.stories.js
@@ -8,6 +8,29 @@ export default {
       description: 'Propriété a récupérer depuis le block element `<:columns>` du PixTable parent.',
       type: { name: 'privé', required: true },
     },
+    sort: {
+      name: 'sort',
+      description: 'Fonction de tri, a la même signature que `Array.prototype.sort`',
+      type: { name: 'function', required: false },
+    },
+    ariaLabelDefaultSort: {
+      name: 'ariaLabelDefaultSort',
+      description:
+        "Label du bouton de tri, lorsqu'aucun tri n'est appliqué. ⚠️ Obligatoire si `@sort` est utilisé ⚠️",
+      type: { name: 'string', required: false },
+    },
+    ariaLabelSortAsc: {
+      name: 'ariaLabelSortAsc',
+      description:
+        'Label du bouton de tri (pour trier en ordre ascendant), lorsque le tri descendant est appliqué. ⚠️ Obligatoire si `@sort` est utilisé ⚠️',
+      type: { name: 'string', required: false },
+    },
+    ariaLabelSortDesc: {
+      name: 'ariaLabelSortDesc',
+      description:
+        'Label du bouton de tri (pour trier en ordre descendant), lorsque le tri ascendant est appliqué. ⚠️ Obligatoire si `@sort` est utilisé ⚠️',
+      type: { name: 'string', required: false },
+    },
     header: {
       name: '<:header>',
       description: 'En-tête de la colonne',
@@ -25,6 +48,14 @@ const Template = (args) => {
   return {
     template: hbs`<PixTable @data={{this.data}} @caption={{this.caption}}>
   <:columns as |row context|>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Nom
+      </:header>
+      <:cell>
+        {{row.name}}
+      </:cell>
+    </PixTableColumn>
     <PixTableColumn @context={{context}}>
       <:header>
         Info
@@ -53,3 +84,56 @@ Default.args = {
     },
   ],
 };
+
+const TemplateSort = (args) => {
+  return {
+    template: hbs`<PixTable @data={{this.data}} @caption={{this.caption}}>
+  <:columns as |row context|>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Nom
+      </:header>
+      <:cell>
+        {{row.name}}
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn
+      @context={{context}}
+      @sort={{this.sortNum}}
+      @ariaLabelDefaultSort={{this.ariaLabelDefaultSort}}
+      @ariaLabelSortAsc={{this.ariaLabelSortAsc}}
+      @ariaLabelSortDesc={{this.ariaLabelSortDesc}}
+    >
+      <:header>
+        Age
+      </:header>
+      <:cell>
+        {{row.age}}
+      </:cell>
+    </PixTableColumn>
+  </:columns>
+</PixTable>`,
+    context: args,
+  };
+};
+
+export const Sorted = TemplateSort.bind({});
+Sorted.args = {
+  caption: 'Description du tableau',
+  data: [
+    {
+      name: 'jean',
+      age: 15,
+    },
+    {
+      name: 'brian',
+      age: 25,
+    },
+  ],
+  sortNum(a, b) {
+    return a.age - b.age;
+  },
+  ariaLabelDefaultSort: 'click pour trier',
+  ariaLabelSortAsc: 'click pour trier en ordre ascendant',
+  ariaLabelSortDesc: 'click pour trier en ordre descendant',
+};
diff --git a/app/stories/pix-table.mdx b/app/stories/pix-table.mdx
@@ -14,14 +14,14 @@ Une table qui prend en argument des data et en `block content` des [PixTableColu
 ```html
 <PixTable @variant={{this.variant}} @data={{this.data}} @caption={{this.caption}}>
   <:columns as |row context|>
-    <PixTableColumn @context={{context}}>
-      <:header>
-        Nom
-      </:header>
-      <:cell>
-        {{row.name}}
-      </:cell>
-    </PixTableColumn>
+   <PixTableBasicColumn
+      @context={{context}}
+      @type="text"
+      @name="Nom"
+      @value={{row.name}}
+      @onSort={{this.onNameSort}}
+      @sortOrder="asc"
+    />
     <PixTableColumn @context={{context}}>
       <:header>
         Description

diff --git a/app/stories/pix-table.stories.js b/app/stories/pix-table.stories.js
@@ -44,14 +44,14 @@ const Template = (args) => {
   return {
     template: hbs`<PixTable @variant={{this.variant}} @data={{this.data}} @caption={{this.caption}}>
   <:columns as |row context|>
-    <PixTableColumn @context={{context}}>
-      <:header>
-        Nom
-      </:header>
-      <:cell>
-        {{row.name}}
-      </:cell>
-    </PixTableColumn>
+    <PixTableBasicColumn
+      @context={{context}}
+      @type='text'
+      @name='Nom'
+      @value={{row.name}}
+      @onSort={{this.onNameSort}}
+      @sortOrder={{null}}
+    />
     <PixTableColumn @context={{context}}>
       <:header>
         Description
@@ -103,4 +103,7 @@ Default.args = {
       age: 25,
     },
   ],
+  onNameSort: () => {
+    alert('Fonctionnalité seulement disponible en local sur dummy');
+  },
 };