feat: Add property to condense pixTable

Co-authored-by: Iris Benoit <[email protected]> Co-authored-by: Fael Bassetti <[email protected]> Co-authored-by: Laura Bergoens <[email protected]>
1024pix · Jan 13, 2025 · 88bfeee · 88bfeee
1 parent 8c67f09
commit 88bfeee
Show file tree

Hide file tree

Showing 5 changed files with 145 additions and 2 deletions.
diff --git a/addon/components/pix-table.hbs b/addon/components/pix-table.hbs
@@ -1,5 +1,5 @@
 <div class="pix-table">
-  <table>
+  <table class={{this.tableClass}}>
     <caption class="screen-reader-only">{{this.caption}}</caption>
     <thead class={{this.headerClass}}>
       <tr>

diff --git a/addon/components/pix-table.js b/addon/components/pix-table.js
@@ -22,6 +22,20 @@ export default class PixTable extends Component {
     return this.args.caption;
   }
 
+  get tableClass() {
+    warn(
+      'PixTable: @condensed must be a boolean, default undefined',
+      [true, false, undefined].includes(this.args.condensed),
+      {
+        id: 'pix-ui.pix-table.condensed.not-boolean',
+      },
+    );
+    if (this.args.condensed) {
+      return 'pix-table--condensed';
+    }
+    return null;
+  }
+
   get headerClass() {
     return `pix-table-header--${this.variant}`;
   }

diff --git a/addon/styles/_pix-table.scss b/addon/styles/_pix-table.scss
@@ -11,6 +11,12 @@
 
   @extend %pix-body-s;
 
+  .pix-table__condensed {
+    th, td {
+      padding: var(--pix-spacing-2x) var(--pix-spacing-4x);
+    }
+  }
+
   table {
     min-width: 100%;
     border-collapse: collapse;

diff --git a/app/stories/pix-table.stories.js b/app/stories/pix-table.stories.js
@@ -37,12 +37,25 @@ export default {
         required: false,
       },
     },
+    condensed: {
+      name: 'condensed',
+      description: 'Afficher le tableau en mode condensé',
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
   },
 };
 
 const Template = (args) => {
   return {
-    template: hbs`<PixTable @variant={{this.variant}} @data={{this.data}} @caption={{this.caption}}>
+    template: hbs`<PixTable
+  @variant={{this.variant}}
+  @data={{this.data}}
+  @caption={{this.caption}}
+  @condensed={{this.condensed}}
+>
   <:columns as |row context|>
     <PixTableColumn @context={{context}} @type='text'>
       <:header>
@@ -81,6 +94,7 @@ const Template = (args) => {
 export const Default = Template.bind({});
 Default.args = {
   caption: 'Description du tableau',
+  condensed: false,
   data: [
     {
       name: 'jean',

diff --git a/tests/integration/components/pix-table-test.js b/tests/integration/components/pix-table-test.js
@@ -124,6 +124,96 @@ module('Integration | Component | table', function (hooks) {
     });
   });
 
+  module('#condensed', function () {
+    test('it should not be condensed by default', async function (assert) {
+      // when
+      await render(
+        hbs`<PixTable @caption='Ceci est le caption de notre table' @data={{this.data}}>
+  <:columns as |row context|>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Nom
+      </:header>
+      <:cell>
+        {{row.name}}
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Description
+      </:header>
+      <:cell>
+        {{row.description}}
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Age
+      </:header>
+      <:cell>
+        il a
+        {{row.age}}
+        ans
+      </:cell>
+    </PixTableColumn>
+  </:columns>
+</PixTable>`,
+      );
+
+      // then
+      assert.notOk(this.element.querySelector('table').getAttribute('class'));
+    });
+
+    test('it should be condensed', async function (assert) {
+      // given
+      this.condensed = true;
+
+      // when
+      await render(
+        hbs`<PixTable
+  @caption='Ceci est le caption de notre table'
+  @data={{this.data}}
+  @condensed={{this.condensed}}
+>
+  <:columns as |row context|>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Nom
+      </:header>
+      <:cell>
+        {{row.name}}
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Description
+      </:header>
+      <:cell>
+        {{row.description}}
+      </:cell>
+    </PixTableColumn>
+    <PixTableColumn @context={{context}}>
+      <:header>
+        Age
+      </:header>
+      <:cell>
+        il a
+        {{row.age}}
+        ans
+      </:cell>
+    </PixTableColumn>
+  </:columns>
+</PixTable>`,
+      );
+
+      // then
+      assert.strictEqual(
+        this.element.querySelector('table').getAttribute('class'),
+        'pix-table__condensed',
+      );
+    });
+  });
+
   module('#sort', function () {
     test('it should call @onSort on click', async function (assert) {
       // given
@@ -318,6 +408,25 @@ module('Integration | Component | table', function (hooks) {
       );
     });
 
+    test('it should warn when @condensed is incorrect', async function (assert) {
+      // when
+      this.data = [];
+      await render(
+        hbs`<PixTable @data={{this.data}} @condensed={{null}} @caption='On condense ?'>
+  <:columns as |row context|>
+    <PixTableColumn @context={{context}} />
+  </:columns>
+</PixTable>`,
+      );
+
+      // then
+      assert.ok(
+        warnStub.calledWithExactly(
+          'WARNING: PixTable: @condensed must be a boolean, default undefined',
+        ),
+      );
+    });
+
     [
       {
         ariaLabelDefaultSort: 'tri',