@1024pix/pix-ui 44.2.9 → 44.3.0

package/addon/components/pix-collapsible.hbs

@@ -8,7 +8,7 @@
     aria-expanded={{if this.isUnCollapsed "true" "false"}}
     ...attributes
   >
-    <span class="pix-collapsible-title__label">
+    <span>
       {{#if @titleIcon}}
         <FaIcon class="pix-collapsible-title__icon" @icon={{@titleIcon}} />
       {{/if}}
@@ -20,10 +20,17 @@
       {{/if}}
     </span>
 
-    <FaIcon
-      class="pix-collapsible-title__toggle-icon"
-      @icon="{{if this.isCollapsed 'chevron-down' 'chevron-up'}}"
-    />
+    <span class="pix-collapsible-title__container">
+      {{#if @tagContent}}
+        <PixTag @compact={{false}} @color={{@tagColor}}>
+          {{@tagContent}}
+        </PixTag>
+      {{/if}}
+      <FaIcon
+        class="pix-collapsible-title-container__toggle-icon"
+        @icon="{{if this.isCollapsed 'chevron-down' 'chevron-up'}}"
+      />
+    </span>
   </button>
 
   <div

package/addon/styles/_pix-collapsible.scss

@@ -53,7 +53,6 @@
 .pix-collapsible-title {
   &__container {
     display: flex;
-    flex-grow: 1;
     align-items: center;
   }
 
@@ -61,6 +60,9 @@
     margin-right: var(--pix-spacing-2x);
     color: var(--pix-neutral-500);
   }
+}
+
+.pix-collapsible-title-container {
 
   &__toggle-icon {
     width: 1rem;

package/app/stories/pix-collapsible.mdx

@@ -17,6 +17,12 @@ Par défaut le contenu est masqué et cliquer sur le libellé permet de montrer
 
 <Story of={ComponentStories.multipleCollapsible} height={260} />
 
+### Collapsible avec tag
+Les paramètres `tagContent` et `tagColor` permettent d'afficher un `Pix Tag` près du chevron.
+
+
+<Story of={ComponentStories.collapsibleWithTag} height={260} />
+
 
 ## Usage
 

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

@@ -13,6 +13,18 @@ export default {
       description: "Ajoute l'icône donnée en paramètre avant le titre du PixCollapsible",
       type: { name: 'string', required: false },
     },
+    tagContent: {
+      name: 'tagContent',
+      description: "Contenu du tag qui s'affiche près du chevron",
+      type: { name: 'string', required: false },
+    },
+    tagColor: {
+      name: 'tagColor',
+      description:
+        "Couleur du tag qui s'affiche près du chevron. Doit s'ajouter avec le paramètre tagContent. Voir le composant Pix Tag pour les couleurs disponibles",
+      type: { name: 'string', required: false },
+      table: { defaultValue: { summary: 'primary' } },
+    },
   },
 };
 
@@ -63,3 +75,30 @@ export const multipleCollapsible = (args) => {
     context: args,
   };
 };
+
+export const collapsibleWithTag = (args) => {
+  return {
+    template: hbs`{{! template-lint-disable no-inline-styles }}
+<div style='width:800px'>
+  {{! template-lint-disable no-inline-styles }}
+  <PixCollapsible
+    @title='Titre A'
+    @titleIcon={{this.titleIcon}}
+    @tagColor='success'
+    @tagContent='tag 1'
+  >
+    <div>Contenu A</div>
+  </PixCollapsible>
+
+  <PixCollapsible
+    @title='Titre B'
+    @titleIcon={{this.titleIcon}}
+    @tagColor='error'
+    @tagContent='tag 2'
+  >
+    <div>Contenu B</div>
+  </PixCollapsible>
+</div>`,
+    context: args,
+  };
+};

package/app/stories/pix-tag.mdx

@@ -25,7 +25,7 @@ Customiser la couleur du tag:
 <PixTag @color="purple"> This is a purple tag </PixTag>
 
 Tag Compact
-<PixTag @compact="{{true}}" @color="blue"> This is a compactg tag </PixTag>
+<PixTag @compact="{{true}}" @color="blue"> This is a compact tag </PixTag>
 ```
 
 ## Arguments

package/package.json

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