@1024pix/pix-ui 60.7.0 → 60.8.0

package/addon/components/pix-modal.gjs

@@ -1,3 +1,4 @@
+import { MODAL_VARIANTS } from '@1024pix/pix-ui/helpers/variants';
 import { guidFor } from '@ember/object/internals';
 import Component from '@glimmer/component';
 
@@ -17,6 +18,18 @@ export default class PixModal extends Component {
     return guidFor(this);
   }
 
+  get variant() {
+    if (this.args.variant && !MODAL_VARIANTS.includes(this.args.variant)) {
+      throw new Error(
+        `ERROR in PixModal component: @variant should be one of ${MODAL_VARIANTS.join(', ')}`,
+      );
+    }
+
+    const value = this.args.variant ?? 'default';
+
+    return value;
+  }
+
   <template>
     <PixOverlay
       @isVisible={{@showModal}}
@@ -25,14 +38,14 @@ export default class PixModal extends Component {
       @hasCenteredContent={{true}}
     >
       <div
-        class="pix-modal"
+        class="pix-modal pix-modal--{{this.variant}}"
         role="dialog"
         aria-labelledby="modal-title--{{this.id}}"
         aria-describedby="modal-content--{{this.id}}"
         aria-modal="true"
         ...attributes
       >
-        <div class="pix-modal__header">
+        <div class="pix-modal__header pix-modal__header--{{this.variant}}">
           <h1 id="modal-title--{{this.id}}" class="pix-modal__title">{{@title}}</h1>
           <PixIconButton
             @iconName="close"

package/addon/helpers/variants.js

@@ -1 +1,3 @@
 export const VARIANTS = ['primary', 'orga', 'certif', 'admin', 'modulix'];
+
+export const MODAL_VARIANTS = ['default', 'orga', 'certif'];

package/addon/styles/_pix-modal.scss

@@ -3,8 +3,6 @@
 @use "pix-design-tokens/shadows";
 
 .pix-modal {
-  @extend %pix-shadow-sm;
-
   position: relative;
   left: 50%;
   width: min(32rem, calc(100% - var(--pix-spacing-4x)));
@@ -13,15 +11,38 @@
   border-radius: var(--pix-spacing-4x);
   transform: translateX(-50%);
 
+  &--default {
+    @extend %pix-shadow-default;
+  }
+
+  &--orga {
+    @extend %pix-shadow-orga;
+  }
+
+  &--certif {
+    @extend %pix-shadow-certif;
+  }
+
   &__header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     padding: var(--pix-spacing-6x) var(--pix-spacing-4x) var(--pix-spacing-6x) var(--pix-spacing-6x);
     color: var(--pix-neutral-900);
-    background: var(--pix-gradient-default-light);
     border-top-left-radius: var(--pix-spacing-4x) var(--pix-spacing-4x);
     border-top-right-radius: var(--pix-spacing-4x) var(--pix-spacing-4x);
+
+    &--default {
+      background: var(--pix-gradient-default-light);
+    }
+
+    &--orga {
+      background: var(--pix-gradient-orga-light);
+    }
+
+    &--certif {
+      background: var(--pix-gradient-certif-light);
+    }
   }
 
   &__close-button {

package/package.json

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