@1024pix/pix-ui 55.3.0 → 55.5.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-banner-alert.js

@@ -4,6 +4,7 @@ import { tracked } from '@glimmer/tracking';
 const TYPE_INFO = 'information';
 const TYPE_ERROR = 'error';
 const TYPE_WARNING = 'warning';
+const TYPE_ENVIRONMENT = 'environment';
 const TYPE_COMMUNICATION = 'communication';
 const TYPE_COMMUNICATION_ORGA = 'communication-orga';
 const TYPE_COMMUNICATION_CERTIF = 'communication-certif';
@@ -12,6 +13,7 @@ const types = [
   TYPE_INFO,
   TYPE_ERROR,
   TYPE_WARNING,
+  TYPE_ENVIRONMENT,
   TYPE_COMMUNICATION,
   TYPE_COMMUNICATION_ORGA,
   TYPE_COMMUNICATION_CERTIF,
@@ -21,6 +23,7 @@ const icons = {
   [TYPE_INFO]: 'info',
   [TYPE_ERROR]: 'error',
   [TYPE_WARNING]: 'warning',
+  [TYPE_ENVIRONMENT]: 'displaySettings',
   [TYPE_COMMUNICATION]: 'campaign',
   [TYPE_COMMUNICATION_ORGA]: 'campaign',
   [TYPE_COMMUNICATION_CERTIF]: 'campaign',

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.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-banner-alert.scss

@@ -87,5 +87,25 @@
       }
     }
   }
+
+  &--environment {
+    color: var(--pix-primary-700);
+    background-color: var(--pix-primary-10);
+
+    .pix-icon-button {
+      color: currentcolor;
+      background-color: var(--pix-primary-10);
+
+      &:hover:enabled,
+      &:focus:enabled,
+      &:active:enabled {
+        background-color: var(--pix-primary-100);
+      }
+
+      &:focus:enabled {
+        outline-color: var(--pix-primary-700);
+      }
+    }
+  }
 }
 

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.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.3.0",
+  "version": "55.5.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"