@1024pix/pix-ui 20.0.0 → 20.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Pix-UI Changelog
 
+## v20.1.0 (13/10/2022)
+
+
+### :rocket: Amélioration
+- [#241](https://github.com/1024pix/pix-ui/pull/241) [FEATURE] PixCollapsible : Autoriser l'utilisation d'un Block Content pour le titre
+
+### :bug: Correction
+- [#264](https://github.com/1024pix/pix-ui/pull/264) [BUGFIX] Réparer l'ombre du compsant Pix Block.
+- [#263](https://github.com/1024pix/pix-ui/pull/263) [BUGFIX] Permettre le scroll quand la modale est détruite
+
+## v20.0.1 (11/10/2022)
+
+
+### :bug: Correction
+- [#262](https://github.com/1024pix/pix-ui/pull/262) [BUGFIX] suppression d'un display flex inutile sur le conteneur principal de PixBackgroundHeader
+
 ## v20.0.0 (11/10/2022)
 
 

package/addon/components/pix-collapsible.hbs

@@ -8,14 +8,22 @@
     aria-expanded={{if this.isUnCollapsed "true" "false"}}
     ...attributes
   >
-    <span>
+    <span class="pix-collapsible-title__container">
       {{#if @titleIcon}}
         <FaIcon @icon={{@titleIcon}} class="pix-collapsible-title__icon" />
       {{/if}}
-      {{this.title}}
+
+      {{#if (has-block "title")}}
+        {{yield to="title"}}
+      {{else}}
+        {{this.title}}
+      {{/if}}
     </span>
 
-    <FaIcon @icon="{{if this.isCollapsed 'plus' 'minus'}}" class="pix-collapsible-title__icon" />
+    <FaIcon
+      @icon="{{if this.isCollapsed 'plus' 'minus'}}"
+      class="pix-collapsible-title__toggle-icon"
+    />
   </button>
 
   <div

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

@@ -1,9 +1,6 @@
 .pix-background-header {
   position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0 24px;
+  padding: 68px 24px 0;
 
   &__background {
     position: absolute;

package/addon/styles/_pix-block.scss

@@ -4,11 +4,10 @@
   border-radius: 5px;
 
   &--shadow-light {
-    box-shadow: 0px 4px 8px 0px $pix-neutral-110;
+    box-shadow: 0px 4px 8px rgba($pix-neutral-110, 0.08);
   }
 
   &--shadow-heavy {
-    box-shadow: 0 50px 54px -40px rgba($pix-neutral-110, 0.4),
-      0 7px 14px 0 rgba($pix-neutral-100, 0.1);
+    box-shadow: 0px 12px 24px rgba($pix-neutral-110, 0.08);
   }
 }

package/addon/styles/_pix-collapsible.scss

@@ -12,7 +12,7 @@
   background-color: $pix-neutral-0;
 
   &__title {
-    padding: 14px 10px 14px 16px;
+    padding: 14px 16px;
     min-width: 100%;
     cursor: pointer;
     display: flex;
@@ -22,11 +22,7 @@
     color: $pix-neutral-60;
     font-size: 1rem;
     font-weight: 500;
-
-    .pix-collapsible-title__icon {
-      color: $pix-neutral-45;
-      margin-right: 6px;
-    }
+    align-items: center;
 
     &:hover {
       background-color: $pix-neutral-10;
@@ -41,6 +37,25 @@
     }
   }
 
+  &-title {
+
+    &__container {
+      align-items: center;
+      display: flex;
+      flex-grow: 1;
+    }
+
+    &__icon{
+      color: $pix-neutral-45;
+      margin-right: 6px;
+    }
+
+    &__toggle-icon{
+      color: $pix-neutral-45;
+      margin-left: 16px;
+    }
+  }
+
   &__content {
     padding: 16px 20px;
     display: none;

package/app/modifiers/trap-focus.js

@@ -22,6 +22,7 @@ export default modifier(function trapFocus(element, [isOpen]) {
     element.removeEventListener('keydown', (event) => {
       handleKeyDown(event, element);
     });
+    allowPageScrolling();
   };
 });
 

package/app/stories/pix-background-header.stories.js

@@ -5,7 +5,7 @@ export const backgroundHeader = (args) => {
     template: hbs`
       <PixBackgroundHeader>
 
-        <PixBlock style="margin: 68px 0 32px; padding: 14px 24px;">Un panel avec du text</PixBlock>
+        <PixBlock style="margin: 0 0 32px; padding: 14px 24px;">Un panel avec du text</PixBlock>
 
         <PixBlock style="padding: 14px 24px;">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a interdum mauris. Morbi ac diam varius, maximus massa id, venenatis lectus. Fusce interdum tincidunt mattis. Nullam porta sollicitudin lorem, sodales cursus arcu finibus in. Nam pretium congue diam sollicitudin faucibus. Aliquam nec augue massa. Pellentesque eleifend nec arcu eu tincidunt. Pellentesque at quam dignissim, lacinia sem et, pharetra magna. Etiam venenatis felis augue, id sollicitudin sapien interdum at. Cras bibendum fermentum eros, rutrum varius turpis venenatis vitae. Suspendisse aliquet iaculis sem in blandit. Mauris vitae erat lobortis est volutpat bibendum non molestie purus.

package/app/stories/pix-collapsible.stories.js

@@ -13,6 +13,23 @@ export const collapsible = (args) => {
   };
 };
 
+export const collapsibleWithBlockTitle = (args) => {
+  return {
+    template: hbs`
+    <PixCollapsible
+      @titleIcon={{titleIcon}}>
+      <:title>
+        <span>Titre avec <em>contenu de type block</em></span>
+      </:title>
+      <:default>
+        <div>Contenu du PixCollapsible</div>
+      </:default>
+      </PixCollapsible>
+    `,
+    context: args,
+  };
+};
+
 export const multipleCollapsible = (args) => {
   return {
     template: hbs`

package/app/stories/pix-collapsible.stories.mdx

@@ -20,6 +20,10 @@ Par défaut le contenu est masqué et cliquer sur le libellé permet de montrer
   <Story name='PixCollapsible' story={stories.collapsible} height={150} />
 </Canvas>
 
+<Canvas>
+  <Story name='With block title' story={stories.collapsibleWithBlockTitle} height={150} />
+</Canvas>
+
 <Canvas>
   <Story name='MultiplePixCollapsible' story={stories.multipleCollapsible} height={260} />
 </Canvas>

package/package.json

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