@1024pix/pix-ui 51.2.0 → 51.4.0

package/addon/components/pix-table-column.hbs

@@ -1,9 +1,19 @@
 {{#if this.displayHeader}}
-  <th scope="col" ...attributes>
-    {{yield to="header"}}
+  <th scope="col" ...attributes aria-sort={{this.ariaSort}}>
+    <div class="pix-table-header-container">
+      {{yield to="header"}}
+      {{#if this.sortable}}
+        <PixIconButton
+          @ariaLabel={{this.iconLabel}}
+          @iconName={{this.iconName}}
+          @triggerAction={{@onSort}}
+          @size="small"
+        />
+      {{/if}}
+    </div>
   </th>
 {{else}}
-  <td ...attributes>
+  <td ...attributes class={{this.typeClass}}>
     {{yield to="cell"}}
   </td>
 {{/if}}

package/addon/components/pix-table-column.js

@@ -1,7 +1,87 @@
 import Component from '@glimmer/component';
+import { warn } from '@ember/debug';
 
 export default class PixTableColumn extends Component {
   get displayHeader() {
     return this.args.context === 'header';
   }
+
+  get type() {
+    return this.args.type ?? 'text';
+  }
+
+  get sortable() {
+    return Boolean(this.args.onSort);
+  }
+
+  get sortOrder() {
+    if (this.args.sortOrder === undefined) {
+      return undefined;
+    }
+    const correctSortOrders = ['asc', 'desc', null];
+    warn(
+      'PixTableColumn: you need to provide a valid sortOrder',
+      correctSortOrders.includes(this.args.sortOrder),
+      {
+        id: 'pix-ui.table-column.sortOrder.not-valid',
+      },
+    );
+    return this.args.sortOrder;
+  }
+
+  get iconName() {
+    const isText = this.type === 'text';
+    if (!this.sortOrder) {
+      return isText ? 'sortAz' : 'sort';
+    }
+    if (this.sortOrder === 'asc') {
+      return isText ? 'sortAzAsc' : 'sortAsc';
+    }
+    return isText ? 'sortAzDesc' : 'sortDesc';
+  }
+
+  get iconLabel() {
+    warn(
+      'PixTableColumn: parameters `@ariaLabelDefaultSort`, `@ariaLabelSortDesc` and `@ariaLabelSortAsc` are required for sort buttons',
+      ![
+        this.args.ariaLabelDefaultSort,
+        this.args.ariaLabelSortDesc,
+        this.args.ariaLabelSortAsc,
+      ].includes(undefined),
+      {
+        id: 'pix-ui.pix-table-column.sortAriaLabels.required',
+      },
+    );
+    if (!this.sortOrder) {
+      return this.args.ariaLabelDefaultSort;
+    }
+    if (this.sortOrder === 'asc') {
+      return this.args.ariaLabelSortDesc;
+    }
+    return this.args.ariaLabelSortAsc;
+  }
+
+  get ariaSort() {
+    if (!this.sortable) {
+      return undefined;
+    }
+    if (!this.sortOrder) {
+      return 'none';
+    }
+    if (this.sortOrder === 'asc') {
+      return 'ascending';
+    }
+    return 'descending';
+  }
+
+  get typeClass() {
+    const correctTypes = ['number', 'text'];
+    warn('PixTableColumn: you need to provide a valid type', correctTypes.includes(this.type), {
+      id: 'pix-ui.table-column.type.incorrect',
+    });
+    if (this.args.type === 'number') {
+      return `pix-table-column--number`;
+    }
+    return '';
+  }
 }

package/addon/styles/{_pix-table-basic-column.scss → _pix-table-column.scss}

@@ -1,4 +1,4 @@
-td.pix-table-basic-column {
+.pix-table-column {
   &--number{
     text-align: right;
   }

package/addon/styles/_pix-table.scss

@@ -1,4 +1,4 @@
-@import 'pix-table-basic-column';
+@import 'pix-table-column';
 
 .pix-table {
   width: 100%;
@@ -32,8 +32,15 @@
       }
     }
 
+    .pix-table-header-container {
+      display: flex;
+      gap: var(--pix-spacing-1x);
+      align-items: center;
+    }
+
     th {
       text-align: start;
+      vertical-align: middle;
     }
 
     td, th {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "51.2.0",
+  "version": "51.4.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"

package/addon/components/pix-table-basic-column.hbs

@@ -1,8 +0,0 @@
-<PixTableColumn @context={{@context}} class={{this.typeClass}}>
-  <:header>
-    {{@name}}
-  </:header>
-  <:cell>
-    {{@value}}
-  </:cell>
-</PixTableColumn>

package/addon/components/pix-table-basic-column.js

@@ -1,16 +0,0 @@
-import Component from '@glimmer/component';
-import { warn } from '@ember/debug';
-
-export default class PixTableBasicColumn extends Component {
-  get typeClass() {
-    const correctTypes = ['number', 'text'];
-    const type = this.args.type ?? 'text';
-    warn('PixTableBasicColumn: you need to provide a valid type', correctTypes.includes(type), {
-      id: 'pix-ui.table-basic-column.type.incorrect',
-    });
-    if (this.args.type === 'number') {
-      return `pix-table-basic-column--number`;
-    }
-    return '';
-  }
-}

package/app/components/pix-table-basic-column.js

@@ -1 +0,0 @@
-export { default } from '@1024pix/pix-ui/components/pix-table-basic-column';