@1024pix/pix-ui 60.13.1 → 60.15.0

package/addon/components/pix-accordions.gjs

@@ -28,11 +28,15 @@ export default class PixAccordions extends Component {
     this.hasUnCollapsedOnce = true;
   }
 
+  get isV2Version() {
+    return this.args.isV2Version ? '-v2' : '';
+  }
+
   <template>
-    <div class="pix-accordions">
+    <div class="pix-accordions{{this.isV2Version}}">
 
       <button
-        class="pix-accordions__title"
+        class="pix-accordions{{this.isV2Version}}__title"
         type="button"
         {{on "click" this.toggleAccordions}}
         aria-controls={{this.contentId}}
@@ -40,10 +44,10 @@ export default class PixAccordions extends Component {
         ...attributes
       >
 
-        <span class="pix-accordions-title__container">
+        <span class="pix-accordions{{this.isV2Version}}-title__container">
           {{#if @iconName}}
             <PixIcon
-              class="pix-accordions-title__icon"
+              class="pix-accordions{{this.isV2Version}}-title__icon"
               @name={{@iconName}}
               @plainIcon={{@plainIcon}}
               @ariaHidden={{true}}
@@ -53,14 +57,14 @@ export default class PixAccordions extends Component {
           {{yield to="title"}}
         </span>
 
-        <span class="pix-accordions-title__container">
+        <span class="pix-accordions{{this.isV2Version}}-title__container">
           {{#if @tagContent}}
             <PixTag @color={{@tagColor}}>
               {{@tagContent}}
             </PixTag>
           {{/if}}
           <PixIcon
-            class="pix-accordions-title-container__toggle-icon"
+            class="pix-accordions{{this.isV2Version}}-title-container__toggle-icon"
             @ariaHidden={{true}}
             @name="{{if this.isCollapsed 'chevronBottom' 'chevronTop'}}"
           />
@@ -69,7 +73,7 @@ export default class PixAccordions extends Component {
 
       <div
         id={{this.contentId}}
-        class="pix-accordions__content"
+        class="pix-accordions{{this.isV2Version}}__content"
         aria-hidden={{if this.isCollapsed "true" "false"}}
       >
         {{#if this.isContentRendered}}

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/styles/_pix-accordions-v2.scss

@@ -0,0 +1,98 @@
+@use "pix-design-tokens/typography";
+@use 'pix-design-tokens/shadows';
+@use 'pix-design-tokens/breakpoints';
+
+.pix-accordions-v2 {
+  background-color: var(--pix-neutral-0);
+  border-bottom: 1px solid var(--pix-neutral-100);
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:has(.pix-accordions-v2__title[aria-expanded='true']) {
+    @extend %pix-shadow-default;
+
+    margin: var(--pix-spacing-3x) 0;
+    border-bottom: none;
+    border-radius: 8px;
+  }
+
+  &:has(.pix-accordions-v2__title:hover) {
+    border-radius: 8px;
+  }
+
+  &:has(.pix-accordions-v2__title:not(:active)) {
+    &:focus-within {
+      background-color: var(--pix-primary-50);
+      border: 1px solid var(--pix-primary-500);
+      outline: 2px solid var(--pix-primary-300);
+    }
+  }
+
+  &__content {
+    @extend %pix-body-l;
+
+    padding: var(--pix-spacing-4x);
+    background-color: var(--pix-primary-10);
+    border-bottom-right-radius: 8px;
+    border-bottom-left-radius: 8px;
+
+    &[aria-hidden='true'] {
+      display: none;
+    }
+  }
+}
+
+.pix-accordions-v2__title {
+  @extend %pix-title-xs;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--pix-spacing-4x) var(--pix-spacing-2x);
+
+  @include breakpoints.device-is('mobile') {
+    padding: var(--pix-spacing-3x) var(--pix-spacing-2x);
+  }
+
+  &:hover:not([aria-expanded='true']) {
+    border-radius: 8px;
+  }
+
+  &:active:not([aria-expanded='true'])  {
+    @extend %pix-shadow-default;
+  }
+
+  &:hover,
+  &[aria-expanded='true'] {
+    background-color: var(--pix-primary-50);
+  }
+
+  &[aria-expanded='true'] {
+    background-color: var(--pix-primary-10);
+    border-bottom: 1px solid var(--pix-neutral-100);
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+  }
+}
+
+.pix-accordions-v2-title {
+  &__container {
+    display: flex;
+    align-items: center;
+  }
+
+  &__icon {
+    margin-right: var(--pix-spacing-2x);
+    color: var(--pix-neutral-800);
+  }
+}
+
+.pix-accordions-v2-title-container {
+  &__toggle-icon {
+    margin-left: var(--pix-spacing-2x);
+    border-radius: 50%;
+  }
+}

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/addon.scss

@@ -53,6 +53,7 @@
 @use 'pix-gauge';
 @use 'pix-stepper';
 @use 'pix-card';
+@use 'pix-accordions-v2';
 
 // at the end so it can override it's children scss
 @use 'pix-filterable-and-searchable-select';

package/package.json

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