@1024pix/pix-ui 60.14.0 → 61.0.0

package/addon/components/pix-block.gjs

@@ -5,6 +5,7 @@ import Component from '@glimmer/component';
 export default class PixBlockComponent extends Component {
   get variant() {
     const value = this.args.variant ?? 'primary';
+
     warn(
       `PixBlock: @variant "${value}" should be ${VARIANTS.join(', ')}`,
       VARIANTS.includes(value),
@@ -17,7 +18,7 @@ export default class PixBlockComponent extends Component {
   }
 
   get cssClass() {
-    const cssClass = ['pix-block', `pix-block--${this.variant}`];
+    const cssClass = ['pix-block', `pix-block--variant-${this.variant}`];
 
     if (this.args.condensed) {
       cssClass.push('pix-block--condensed');

package/addon/components/pix-modal-header.gjs

@@ -8,7 +8,7 @@ export default class PixModalHeader extends Component {
   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(', ')}`,
+        `ERROR in PixModalHeader component: @variant should be one of ${MODAL_VARIANTS.join(', ')}`,
       );
     }
 
@@ -18,7 +18,7 @@ export default class PixModalHeader extends Component {
   }
 
   <template>
-    <div class="pix-modal-header pix-modal-header--{{this.variant}}">
+    <div class="pix-modal-header pix-modal-header--{{this.variant}}" ...attributes>
       <section class="pix-modal-header__title-section">
         {{#if @iconName}}
           <div

package/addon/components/pix-side-panel.gjs

@@ -0,0 +1,68 @@
+import { MODAL_VARIANTS } from '@1024pix/pix-ui/helpers/variants';
+import { guidFor } from '@ember/object/internals';
+import Component from '@glimmer/component';
+
+import PixModalHeader from './pix-modal-header';
+import PixOverlay from './pix-overlay';
+
+export default class PixSidePanel extends Component {
+  constructor(...args) {
+    super(...args);
+
+    if (!this.args.title) {
+      throw new Error('ERROR in PixSidePanel component: @title argument is required.');
+    }
+  }
+
+  get variant() {
+    if (this.args.variant && !MODAL_VARIANTS.includes(this.args.variant)) {
+      throw new Error(
+        `ERROR in PixSidePanel component: @variant should be one of ${MODAL_VARIANTS.join(', ')}`,
+      );
+    }
+
+    const value = this.args.variant ?? 'default';
+
+    return value;
+  }
+
+  get id() {
+    return guidFor(this);
+  }
+
+  <template>
+    <PixOverlay
+      class="pix-side-panel__overlay"
+      @isVisible={{@showSidePanel}}
+      @onClose={{@onClose}}
+      @focusOnClose={{@focusOnClose}}
+    >
+      <div
+        class="pix-side-panel pix-side-panel--{{this.variant}}
+          {{unless @showSidePanel ' pix-side-panel--hidden'}}"
+        role="dialog"
+        aria-labelledby="side-panel-title--{{this.id}}"
+        aria-describedby="side-panel-content--{{this.id}}"
+        aria-modal="true"
+        ...attributes
+      >
+        <PixModalHeader
+          class="pix-side-panel__header"
+          @id="side-panel-title--{{this.id}}"
+          @title={{@title}}
+          @subtitle={{@subtitle}}
+          @iconName={{@iconName}}
+          @variant={{this.variant}}
+          @onCloseButtonClick={{@onClose}}
+        />
+
+        <div id="side-panel-content--{{this.id}}" class="pix-side-panel__content">
+          {{yield to="content"}}
+        </div>
+        <div class="pix-side-panel__footer pix-side-panel__footer--{{this.variant}}">
+          {{yield to="footer"}}
+        </div>
+      </div>
+    </PixOverlay>
+  </template>
+}

package/addon/styles/_pix-block.scss

@@ -2,27 +2,26 @@
 
 .pix-block {
   position: relative;
+  padding: var(--pix-spacing-3x);
   background-color: var(--pix-neutral-0);
-  border-radius: var(--pix-spacing-2x);
+  border-radius: var(--pix-spacing-5x);
+
+  &--variant-primary {
+    @extend %pix-shadow-default;
 
-  &--primary {
     padding: var(--pix-spacing-6x);
-    border: solid 1px var(--pix-primary-100);
   }
 
-  &--orga {
-    padding: var(--pix-spacing-3x);
-    border: solid 1px rgb(var(--pix-orga-500-inline), 0.45);
+  &--variant-orga {
+    @extend %pix-shadow-orga;
   }
 
-  &--certif {
-    padding: var(--pix-spacing-3x);
-    border: solid 1px rgb(var(--pix-certif-500-inline), 0.45);
+  &--variant-certif {
+    @extend %pix-shadow-certif;
   }
 
-  &--admin {
-    padding: var(--pix-spacing-3x);
-    border: solid 1px var(--pix-primary-100);
+  &--variant-admin {
+    @extend %pix-shadow-default;
   }
 
   &--condensed {

package/addon/styles/_pix-modal-header.scss

@@ -6,7 +6,7 @@
   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);
+  padding: var(--pix-spacing-6x) var(--pix-spacing-4x) var(--pix-spacing-10x) var(--pix-spacing-6x);
   color: var(--pix-neutral-900);
   border-top-left-radius: var(--pix-spacing-4x) var(--pix-spacing-4x);
   border-top-right-radius: var(--pix-spacing-4x) var(--pix-spacing-4x);
@@ -27,6 +27,7 @@
     display: flex;
     gap: var(--pix-spacing-4x);
     align-items: center;
+    align-self: center;
   }
 
   &__icon-container {
@@ -70,6 +71,7 @@
     margin-bottom: 0;
     padding-right: var(--pix-spacing-8x) + var(--pix-spacing-2x);
     color: var(--pix-neutral-900);
+    text-wrap: balance;
 
     @include breakpoints.device-is('tablet') {
       padding-right: var(--pix-spacing-10x) + var(--pix-spacing-2x);

package/addon/styles/_pix-side-panel.scss

@@ -0,0 +1,86 @@
+@use 'pix-design-tokens/breakpoints';
+@use 'pix-design-tokens/typography';
+@use 'pix-design-tokens/shadows';
+
+.pix-side-panel__overlay {
+  overflow-x: hidden;
+}
+
+.pix-side-panel {
+  @extend %pix-shadow-default;
+
+  display: flex;
+  flex-direction: column;
+  width: 256px;
+  height: 100%;
+  margin-left: auto;
+  background: var(--pix-neutral-0);
+  border-radius: var(--pix-spacing-4x) 0 0 var(--pix-spacing-4x);
+  transform: translate(0);
+  transition: transform 0.3s ease-in-out;
+
+  @include breakpoints.device-is('tablet') {
+    width: 412px;
+  }
+
+  &--hidden {
+    transform: translate(100%);
+  }
+
+  &--default {
+    @extend %pix-shadow-default;
+  }
+
+  &--orga {
+    @extend %pix-shadow-orga;
+  }
+
+  &--certif {
+    @extend %pix-shadow-certif;
+  }
+
+  &__header {
+    border-top-right-radius: 0;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: var(--pix-spacing-2x);
+    padding: var(--pix-spacing-4x) var(--pix-spacing-6x);
+    overflow: auto;
+  }
+
+  &__footer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--pix-spacing-2x);
+    align-items: center;
+    padding: var(--pix-spacing-6x);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: var(--pix-spacing-4x);
+
+    @include breakpoints.device-is('tablet') {
+      flex-flow: row wrap;
+      gap: var(--pix-spacing-4x);
+      justify-content: flex-end;
+    }
+
+    &--default {
+      background-color: var(--pix-primary-10);
+    }
+
+    &--orga {
+      background-color: var(--pix-orga-50);
+    }
+
+    &--certif {
+      background-color: var(--pix-certif-50);
+    }
+
+    > ul {
+      display: contents;
+    }
+  }
+}

package/addon/styles/addon.scss

@@ -30,7 +30,7 @@
 @use 'pix-radio-button';
 @use 'pix-modal';
 @use 'pix-modal-header';
-@use 'pix-sidebar';
+@use 'pix-side-panel';
 @use 'pix-input-code';
 @use 'pix-selectable-tag';
 @use 'pix-pagination';

package/app/components/pix-side-panel.js

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

package/package.json

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

package/addon/components/pix-sidebar.gjs

@@ -1,49 +0,0 @@
-import { guidFor } from '@ember/object/internals';
-import Component from '@glimmer/component';
-
-import PixIconButton from './pix-icon-button';
-import PixOverlay from './pix-overlay';
-export default class PixSidebar extends Component {
-  constructor(...args) {
-    super(...args);
-
-    if (!this.args.title) {
-      throw new Error('ERROR in PixSidebar component: @title argument is required.');
-    }
-  }
-
-  get id() {
-    return guidFor(this);
-  }
-
-  <template>
-    <PixOverlay @isVisible={{@showSidebar}} @onClose={{@onClose}} @focusOnClose={{@focusOnClose}}>
-      <div
-        class="pix-sidebar {{unless @showSidebar ' pix-sidebar--hidden'}}"
-        role="dialog"
-        aria-labelledby="sidebar-title--{{this.id}}"
-        aria-describedby="sidebar-content--{{this.id}}"
-        aria-modal="true"
-        ...attributes
-      >
-        <div class="pix-sidebar__header">
-          <h1 id="sidebar-title--{{this.id}}" class="pix-sidebar__title">{{@title}}</h1>
-          <PixIconButton
-            @iconName="close"
-            @triggerAction={{@onClose}}
-            @ariaLabel="Fermer"
-            @size="small"
-            @withBackground={{true}}
-            class="pix-sidebar__close-button"
-          />
-        </div>
-        <div id="sidebar-content--{{this.id}}" class="pix-sidebar__content">
-          {{yield to="content"}}
-        </div>
-        <div class="pix-sidebar__footer">
-          {{yield to="footer"}}
-        </div>
-      </div>
-    </PixOverlay>
-  </template>
-}

package/addon/styles/_pix-sidebar.scss

@@ -1,79 +0,0 @@
-@use "pix-design-tokens/breakpoints";
-@use "pix-design-tokens/typography";
-
-.pix-sidebar__overlay {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1000;
-  overflow-y: scroll;
-  background-color: rgba(52, 69, 99, 0.7);
-  transition: all 0.3s ease-in-out;
-
-  &--hidden {
-    visibility: hidden;
-    opacity: 0;
-  }
-}
-
-.pix-sidebar {
-  --sidebar-padding: var(--pix-spacing-4x);
-  --mobile-close-button-size: var(--pix-spacing-8x);
-  --tablet-close-button-size: var(--pix-spacing-10x);
-  --space-between-title-and-close-button: var(--pix-spacing-2x);
-  --button-margin: var(--pix-spacing-4x);
-
-  display: flex;
-  flex-direction: column;
-  max-width: 320px;
-  height: 100%;
-  background: var(--pix-neutral-0);
-  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
-  transform: translate(0);
-  transition: transform 0.3s ease-in-out;
-
-  &--hidden {
-    transform: translate(-100%);
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--sidebar-padding);
-    border-bottom: 1px solid var(--pix-neutral-100);
-  }
-
-  &__close-button {
-    flex-shrink: 0;
-
-    @include breakpoints.device-is('tablet') {
-      width: var(--tablet-close-button-size);
-      height: var(--tablet-close-button-size);
-    }
-  }
-
-  &__content {
-    flex-grow: 1;
-    overflow: auto;
-  }
-
-  &__title {
-    @extend %pix-title-s;
-
-    margin-bottom: 0;
-    padding-right: var(--mobile-close-button-size) + var(--space-between-title-and-close-button);
-    color: var(--pix-neutral-900);
-
-    @include breakpoints.device-is('tablet') {
-      padding-right: var(--tablet-close-button-size) + var(--space-between-title-and-close-button);
-    }
-  }
-
-  &__footer {
-    padding: var(--sidebar-padding);
-    border-top: 1px solid var(--pix-neutral-100);
-  }
-}

package/app/components/pix-sidebar.js

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