refacto(docs): display a regular table

Co-authored-by: Iris Benoit <iris.benoit@pix.fr> Co-authored-by: Fael Bassetti <fael.bassetti@pix.fr>
1024pix · Dec 11, 2024 · d3eb8db · d3eb8db
1 parent f31ea50
commit d3eb8db
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 21 deletions.
diff --git a/app/stories/pix-table.mdx b/app/stories/pix-table.mdx
@@ -22,36 +22,34 @@ Une table qui prend en argument des data et en `block content` des [PixTableColu
         {{row.name}}
       </:cell>
     </PixTableColumn>
-    <PixTableColumn @context={{context}}>
+    <PixTableColumn @context={{context}}  class='table__column--wide'>
       <:header>
         Description
       </:header>
       <:cell>
         <i>{{row.description}}</i>
       </:cell>
     </PixTableColumn>
-    <PixTableColumn @context={{context}} class='table__column--wide'>
+    <PixTableColumn @context={{context}} @type="number">
       <:header>
         Age
       </:header>
       <:cell>
-        il a
         {{row.age}}
-        ans
       </:cell>
     </PixTableColumn>
     <PixTableColumn @context={{context}}>
       <:header>
-        Info
+        Stars
       </:header>
       <:cell>
-        <PixIcon @name='info' @title={{concat row.name ' a ' row.age ' ans'}} />
+        <PixStars @count={{row.rate}} @total={{5}} @alt="message alternatif" @color="blue" />
       </:cell>
     </PixTableColumn>
   </:columns>
 </PixTable>
 <style>
-  .table__column--wide { width: 500px; }
+  .table__column--wide { width: 300px; }
 </style>
 ```
 

diff --git a/app/stories/pix-table.stories.js b/app/stories/pix-table.stories.js
@@ -44,45 +44,35 @@ const Template = (args) => {
   return {
     template: hbs`<PixTable @variant={{this.variant}} @data={{this.data}} @caption={{this.caption}}>
   <:columns as |row context|>
-    <PixTableColumn @context={{context}}>
+    <PixTableColumn @context={{context}} @type='text'>
       <:header>
         Nom
       </:header>
       <:cell>
         {{row.name}}
       </:cell>
     </PixTableColumn>
-    <PixTableColumn @context={{context}}>
+    <PixTableColumn @context={{context}} class='table__column--wide'>
       <:header>
         Description
       </:header>
       <:cell>
         <i>{{row.description}}</i>
       </:cell>
     </PixTableColumn>
-    <PixTableColumn @context={{context}} class='table__column--wide'>
+    <PixTableColumn @context={{context}} @type='number'>
       <:header>
         Age
       </:header>
       <:cell>
-        il a
         {{row.age}}
-        ans
-      </:cell>
-    </PixTableColumn>
-    <PixTableColumn @context={{context}}>
-      <:header>
-        Info
-      </:header>
-      <:cell>
-        <PixIcon @name='info' @title={{concat row.name ' a ' row.age ' ans'}} />
       </:cell>
     </PixTableColumn>
   </:columns>
 </PixTable>
 {{! template-lint-disable no-forbidden-elements}}
 <style>
-  .table__column--wide { width: 500px; }
+  .table__column--wide { width: 300px; }
 </style>`,
     context: args,
   };