@1024pix/pix-ui 55.4.0 → 55.6.0

package/addon/components/pix-app-layout.js

@@ -1,3 +1,4 @@
+import { VARIANTS } from '@1024pix/pix-ui/helpers/variants';
 import { warn } from '@ember/debug';
 import Component from '@glimmer/component';
 
@@ -5,8 +6,8 @@ export default class PixAppLayout extends Component {
   get variant() {
     const value = this.args.variant ?? 'primary';
     warn(
-      `PixAppLayout: @variant "${value}" should be certif, orga or primary`,
-      ['primary', 'orga', 'certif'].includes(value),
+      `PixAppLayout: @variant "${value}" should be ${VARIANTS.join(', ')}`,
+      VARIANTS.includes(value),
       {
         id: 'pix-ui.pix-app-layout.variant.not-valid',
       },

package/addon/components/pix-block.js

@@ -1,14 +1,13 @@
+import { VARIANTS } from '@1024pix/pix-ui/helpers/variants';
 import { warn } from '@ember/debug';
 import Component from '@glimmer/component';
 
 export default class PixBlockComponent extends Component {
-  text = 'pix-block';
-
   get variant() {
-    const value = this.args.variant ?? 'default';
+    const value = this.args.variant ?? 'primary';
     warn(
-      `PixBlock: @variant "${value}" should be default, certif, orga or admin`,
-      ['default', 'orga', 'certif', 'admin'].includes(value),
+      `PixBlock: @variant "${value}" should be ${VARIANTS.join(', ')}`,
+      VARIANTS.includes(value),
       {
         id: 'pix-ui.pix-block.variant.not-valid',
       },

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

@@ -75,13 +75,16 @@ export default class PixTableColumn extends Component {
   }
 
   get typeClass() {
-    const correctTypes = ['number', 'text'];
+    const correctTypes = ['number', 'text', 'checkbox'];
     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`;
     }
+    if (this.args.type === 'checkbox') {
+      return `pix-table-column--checkbox`;
+    }
     return '';
   }
 }

package/addon/components/pix-table.hbs

@@ -1,4 +1,4 @@
-<div class={{this.tableClass}} ...attributes>
+<PixBlock @variant={{@variant}} class={{this.tableClass}} ...attributes>
   <table>
     <caption class="screen-reader-only">{{this.caption}}</caption>
     <thead class={{this.headerClass}}>
@@ -17,4 +17,4 @@
       {{/each}}
     </tbody>
   </table>
-</div>
+</PixBlock>

package/addon/components/pix-table.js

@@ -1,3 +1,4 @@
+import { VARIANTS } from '@1024pix/pix-ui/helpers/variants';
 import { warn } from '@ember/debug';
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
@@ -6,8 +7,8 @@ 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),
+      `PixTable: @variant "${value}" should be ${VARIANTS.join(', ')}`,
+      VARIANTS.includes(value),
       {
         id: 'pix-ui.pix-table.variant.not-valid',
       },

package/addon/helpers/variants.js

@@ -0,0 +1 @@
+export const VARIANTS = ['primary', 'orga', 'certif', 'admin'];

package/addon/styles/_pix-block.scss

@@ -5,7 +5,7 @@
   background-color: var(--pix-neutral-0);
   border-radius: var(--pix-spacing-2x);
 
-  &--default {
+  &--primary {
     padding: var(--pix-spacing-6x);
     border: solid 1px var(--pix-primary-100);
   }

package/addon/styles/_pix-table-column.scss

@@ -1,5 +1,9 @@
 .pix-table-column {
-  &--number{
+  &--number {
     text-align: left;
   }
+
+  &--checkbox {
+    width: 3.25rem;
+  }
 }

package/addon/styles/_pix-table.scss

@@ -2,12 +2,8 @@
 @use "pix-design-tokens/typography";
 
 .pix-table {
-  width: 100%;
-  padding: var(--pix-spacing-4x);
+  min-width: 100%;
   overflow: auto;
-  background-color: var(--pix-neutral-0);
-  border: solid 1px var(--pix-neutral-100);
-  border-radius: var(--pix-spacing-2x);
 
   @extend %pix-body-s;
 
@@ -32,7 +28,7 @@
   }
 
   table {
-    min-width: 100%;
+    width: 100%;
     border-collapse: collapse;
 
     tbody > tr:nth-of-type(even):not(.pix-table__clickable-row:hover, .pix-table__clickable-row:focus, .pix-table__clickable-row:active) {
@@ -51,6 +47,10 @@
       &--certif {
         background: var(--pix-certif-50);
       }
+
+      &--admin {
+        background: var(--pix-primary-100);
+      }
     }
 
     .pix-table-header-container {

package/package.json

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