@1024pix/pix-ui 54.10.0 → 54.12.0

package/addon/components/pix-table.hbs

@@ -1,4 +1,4 @@
-<div class="pix-table">
+<div class="pix-table" ...attributes>
   <table class={{this.tableClass}}>
     <caption class="screen-reader-only">{{this.caption}}</caption>
     <thead class={{this.headerClass}}>
@@ -7,9 +7,12 @@
       </tr>
     </thead>
     <tbody>
-      {{#each @data as |row|}}
-        <tr>
-          {{yield row "cell" to="columns"}}
+      {{#each @data as |row index|}}
+        <tr
+          class={{if this.hasOnRowClick "pix-table__clickable-row" ""}}
+          {{on "click" (fn this.onClick row)}}
+        >
+          {{yield row "cell" index to="columns"}}
         </tr>
       {{/each}}
     </tbody>

package/addon/components/pix-table.js

@@ -1,4 +1,5 @@
 import { warn } from '@ember/debug';
+import { action } from '@ember/object';
 import Component from '@glimmer/component';
 
 export default class PixTable extends Component {
@@ -39,4 +40,16 @@ export default class PixTable extends Component {
   get headerClass() {
     return `pix-table-header--${this.variant}`;
   }
+
+  get hasOnRowClick() {
+    return typeof this.args.onRowClick === 'function';
+  }
+
+  @action
+  onClick(row, event) {
+    event.stopPropagation();
+    if (this.hasOnRowClick) {
+      this.args.onRowClick(row);
+    }
+  }
 }

package/addon/styles/_pix-table.scss

@@ -11,18 +11,38 @@
 
   @extend %pix-body-s;
 
-  .pix-table__condensed {
+  &__condensed {
     th, td {
       padding: var(--pix-spacing-2x) var(--pix-spacing-4x);
     }
   }
 
+  &__clickable-row {
+    cursor: pointer;
+
+    &:hover, &:focus, &:active {
+      transition: 0.25s ease;
+    }
+
+    &:hover {
+      background-color: rgba(var(--pix-neutral-100-inline), 0.50);
+    }
+
+    &:focus {
+      background-color: rgba(var(--pix-neutral-100-inline), 0.40);
+    }
+
+    &:active {
+      background-color: rgba(var(--pix-neutral-100-inline), 0.75);
+    }
+  }
+
   table {
     min-width: 100%;
     border-collapse: collapse;
 
-    tbody > tr:nth-of-type(even) {
-      background-color: var(--pix-neutral-20);
+    tbody > tr:nth-of-type(even):not(.pix-table__clickable-row:hover, .pix-table__clickable-row:focus, .pix-table__clickable-row:active) {
+      background-color: rgba(var(--pix-neutral-20-inline), 0.80);
     }
 
     thead.pix-table-header {

package/addon/styles/addon.scss

@@ -13,7 +13,6 @@
 @use 'pix-notification-alert';
 @use 'pix-multi-select';
 @use 'pix-progress-bar';
-@use 'pix-return-to';
 @use 'pix-select';
 @use 'pix-select-list';
 @use 'pix-stars';

package/package.json

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

package/addon/components/pix-return-to.hbs

@@ -1,13 +0,0 @@
-<LinkTo
-  @route={{this.route}}
-  @models={{if @model (array @model) this.defaultModel}}
-  class="pix-return-to pix-return-to--{{this.shade}}"
-  ...attributes
->
-  {{#if (has-block)}}
-    <PixIcon @name="arrowLeft" @ariaHidden={{true}} class="pix-return-to__icon" />
-    <span class="pix-return-to__text"> {{yield}} </span>
-  {{else}}
-    <PixIcon class="pix-return-to__icon" aria-label={{@arrowLabel}} @name="arrowLeft" />
-  {{/if}}
-</LinkTo>

package/addon/components/pix-return-to.js

@@ -1,21 +0,0 @@
-import { warn } from '@ember/debug';
-import Component from '@glimmer/component';
-
-export default class PixReturnTo extends Component {
-  text = 'pix-return-to';
-  availableShades = ['neutral-dark', 'neutral-light'];
-  defaultModel = [];
-
-  get route() {
-    const routeParam = this.args.route;
-    warn('PixReturnTo: @route param is not provided', routeParam !== undefined, {
-      id: 'pix-ui.returnTo.route.required',
-    });
-    return routeParam;
-  }
-
-  get shade() {
-    const shadeParam = this.args.shade;
-    return this.availableShades.includes(shadeParam) ? shadeParam : this.availableShades[0];
-  }
-}

package/addon/styles/_pix-return-to.scss

@@ -1,65 +0,0 @@
-@use "pix-design-tokens/typography";
-
-.pix-return-to {
-  @extend %pix-body-l;
-
-  display: inline-flex;
-  gap: var(--pix-spacing-1x);
-  align-items: center;
-  text-decoration: none;
-  border-bottom: transparent solid 2px;
-
-  &__icon {
-    position: relative;
-    width: 2.3rem;
-    height: 2.3rem;
-    padding: var(--pix-spacing-1x) var(--pix-spacing-2x);
-  }
-
-  &:focus,
-  &:hover,
-  &:active {
-    background-color: transparent;
-    border-bottom-color: transparent;
-    outline: 0;
-    cursor: pointer;
-  }
-
-  @mixin coloriseLink($defaultColor, $focusColor) {
-    color: $defaultColor;
-
-    &:hover {
-      .pix-return-to__icon {
-        color: var(--pix-neutral-900);
-        background-color: var(--pix-neutral-20);
-        border-radius: 50%;
-      }
-    }
-
-    &:focus {
-      .pix-return-to__icon {
-        color: $focusColor;
-        background-color: $defaultColor;
-        border-radius: 50%;
-        outline: 1px solid $focusColor;
-        outline-offset: -3px;
-      }
-    }
-
-    &:active {
-      .pix-return-to__icon {
-        color: var(--pix-neutral-900);
-        background-color: var(--pix-neutral-100);
-        border-radius: 50%;
-      }
-    }
-  }
-
-  &--neutral-light {
-    @include coloriseLink(var(--pix-neutral-20), var(--pix-neutral-900));
-  }
-
-  &--neutral-dark {
-    @include coloriseLink(var(--pix-neutral-900), var(--pix-neutral-0));
-  }
-}

package/app/components/pix-return-to.js

@@ -1 +0,0 @@
-export { default } from '@1024pix/pix-ui/components/pix-return-to';