@1024pix/pix-ui 60.13.0 → 60.14.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/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/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.0",
+  "version": "60.14.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"