@1024pix/pix-ui 49.3.0 → 49.4.0

package/addon/components/pix-label-wrapped.hbs

@@ -19,12 +19,12 @@
   {{yield to="inputElement"}}
 
   <span class="{{if @screenReaderOnly 'screen-reader-only'}}">
+    {{yield}}
+
     {{#if @requiredLabel}}
       <abbr title={{@requiredLabel}} class="mandatory-mark">*</abbr>
     {{/if}}
 
-    {{yield}}
-
     {{#if @subLabel}}
       <span class="pix-label__sub-label">{{@subLabel}}</span>
     {{/if}}

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

@@ -0,0 +1,9 @@
+{{#if this.displayHeader}}
+  <th scope="col" ...attributes>
+    {{yield to="header"}}
+  </th>
+{{else}}
+  <td ...attributes>
+    {{yield to="cell"}}
+  </td>
+{{/if}}

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

@@ -0,0 +1,7 @@
+import Component from '@glimmer/component';
+
+export default class PixTableColumn extends Component {
+  get displayHeader() {
+    return this.args.context === 'header';
+  }
+}

package/addon/components/pix-table.hbs

@@ -0,0 +1,17 @@
+<div class="pix-table">
+  <table>
+    <caption class="screen-reader-only">{{this.caption}}</caption>
+    <thead class={{this.headerClass}}>
+      <tr>
+        {{yield null "header" to="columns"}}
+      </tr>
+    </thead>
+    <tbody>
+      {{#each @data as |row|}}
+        <tr>
+          {{yield row "cell" to="columns"}}
+        </tr>
+      {{/each}}
+    </tbody>
+  </table>
+</div>

package/addon/components/pix-table.js

@@ -0,0 +1,28 @@
+import Component from '@glimmer/component';
+import { warn } from '@ember/debug';
+
+export default class PixTable extends Component {
+  get variant() {
+    const value = this.args.variant ?? 'primary';
+    warn(
+      `PixTable: @variant "${value}" should be certif, orga or primary`,
+      ['primary', 'orga', 'certif'].includes(value),
+      {
+        id: 'pix-ui.pix-table.variant.not-valid',
+      },
+    );
+
+    return value;
+  }
+
+  get caption() {
+    warn(`PixTable: @caption is required`, Boolean(this.args.caption), {
+      id: 'pix-ui.pix-table.caption.required',
+    });
+    return this.args.caption;
+  }
+
+  get headerClass() {
+    return `pix-table-header--${this.variant}`;
+  }
+}

package/addon/styles/_pix-table.scss

@@ -0,0 +1,49 @@
+.pix-table {
+  width: 100%;
+  padding: var(--pix-spacing-4x);
+  overflow: auto;
+  border: solid 1px var(--pix-neutral-100);
+  border-radius: var(--pix-spacing-2x);
+
+  @extend %pix-body-s;
+
+  table {
+    min-width: 100%;
+    border-collapse: collapse;
+
+    tbody > tr:nth-of-type(even) {
+      background-color: var(--pix-neutral-20);
+    }
+
+    thead.pix-table-header {
+      &--primary {
+        background: var(--pix-primary-10);
+      }
+
+      &--orga {
+        background: var(--pix-orga-50);
+      }
+
+      &--certif {
+        background: var(--pix-certif-50);
+      }
+    }
+
+    th {
+      text-align: start;
+    }
+
+    td, th {
+      padding: var(--pix-spacing-6x) var(--pix-spacing-4x);
+
+      &:first-child {
+        border-radius: var(--pix-spacing-2x) 0 0 var(--pix-spacing-2x);
+      }
+
+      &:last-child {
+        border-radius: 0 var(--pix-spacing-2x) var(--pix-spacing-2x) 0;
+      }
+    }
+  }
+}
+

package/addon/styles/addon.scss

@@ -18,6 +18,7 @@
 @import 'pix-select-list';
 @import 'pix-stars';
 @import 'pix-tag';
+@import 'pix-table';
 @import 'pix-textarea';
 @import 'pix-tooltip';
 @import 'pix-button-upload';

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

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

package/app/components/pix-table.js

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

package/package.json

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