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 · f537dee · f537dee
1 parent 2fb9bff
commit f537dee
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 48 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
@@ -43,47 +43,36 @@ export default {
 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>
-    <PixTableColumn @context={{context}}>
-      <:header>
-        Description
-      </:header>
-      <:cell>
-        <i>{{row.description}}</i>
-      </:cell>
-    </PixTableColumn>
-    <PixTableColumn @context={{context}} class='table__column--wide'>
-      <: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; }
-</style>`,
+      <:columns as |row context|>
+        <PixTableColumn @context={{context}} @type="text">
+          <:header>
+            Nom
+          </:header>
+          <:cell>
+            {{row.name}}
+          </:cell>
+        </PixTableColumn>
+        <PixTableColumn @context={{context}}  class='table__column--wide'>
+          <:header>
+            Description
+          </:header>
+          <:cell>
+            <i>{{row.description}}</i>
+          </:cell>
+        </PixTableColumn>
+        <PixTableColumn @context={{context}} @type="number">
+          <:header>
+            Age
+          </:header>
+          <:cell>
+            {{row.age}}
+          </:cell>
+        </PixTableColumn>
+      </:columns>
+    </PixTable>
+    <style>
+      .table__column--wide { width: 300px; }
+    </style>`,
     context: args,
   };
 };