@1024pix/pix-ui 14.4.0 → 14.7.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Pix-UI Changelog
 
+## v14.7.0 (28/06/2022)
+
+
+### :building_construction: Tech
+- [#226](https://github.com/1024pix/pix-ui/pull/226) [TECH] Permettre le passage en multi ligne du bandeau (PIX-5213)
+
+## v14.6.0 (27/06/2022)
+
+
+### :rocket: Amélioration
+- [#225](https://github.com/1024pix/pix-ui/pull/225) [FEATURE] Rendre le contenu de PixCollapsible en lazy
+
+### :coffee: Autre
+- [#167](https://github.com/1024pix/pix-ui/pull/167) Bump axios from 0.21.1 to 0.21.2
+
+## v14.5.0 (22/06/2022)
+
+
+### :coffee: Autre
+- [#223](https://github.com/1024pix/pix-ui/pull/223) [DOC] Ajouter  la palette des couleurs & la documentation pour les couleurs (PIX-5181) .
+
 ## v14.4.0 (17/06/2022)
 
 

package/addon/components/pix-collapsible.hbs

@@ -24,6 +24,8 @@
     class="pix-collapsible__content
       {{if this.isUnCollapsed ' pix-collapsible__content--uncollapse'}}"
   >
-    {{yield}}
+    {{#if this.isContentRendered}}
+      {{yield}}
+    {{/if}}
   </div>
 </div>

package/addon/components/pix-collapsible.js

@@ -8,11 +8,16 @@ export default class PixCollapsible extends Component {
   contentId = 'pix-collapsible-' + guidFor(this);
 
   @tracked isCollapsed = true;
+  @tracked hasUnCollapsedOnce = false;
 
   get isUnCollapsed() {
     return !this.isCollapsed;
   }
 
+  get isContentRendered() {
+    return this.hasUnCollapsedOnce;
+  }
+
   get title() {
     if (!this.args.title || !this.args.title.trim()) {
       throw new Error('ERROR in PixCollapsible component, @title param is not provided');
@@ -23,5 +28,6 @@ export default class PixCollapsible extends Component {
   @action
   toggleCollapsible() {
     this.isCollapsed = !this.isCollapsed;
+    this.hasUnCollapsedOnce = true;
   }
 }

package/addon/components/pix-filter-banner.hbs

@@ -1,26 +1,33 @@
 <div class="pix-filter-banner" ...attributes>
-  <div class="pix-filter-banner__container-left">
-    {{#if this.displayTitle}}
+  {{#if this.displayTitle}}
+    <div class="pix-filter-banner__container-title">
       <p class="pix-filter-banner__title">{{@title}}</p>
-    {{/if}}
+    </div>
+  {{/if}}
+
+  <div class="pix-filter-banner__container-filter">
     {{yield}}
   </div>
-  <div class="pix-filter-banner__container-right">
-    {{#if this.displayDetails}}
-      <p class="pix-filter-banner__details">{{@details}}</p>
-    {{/if}}
-    {{#if this.displayClearFilters}}
-      <div class="pix-filter-banner__button-container">
-        <PixButton
-          class="pix-filter-banner__button"
-          @shape="squircle"
-          @size="small"
-          @triggerAction={{@onClearFilters}}
-        >
-          <FaIcon class="pix-filter-banner-button__icon" @icon="trash-alt" @prefix="far" />
-          {{@clearFiltersLabel}}
-        </PixButton>
-      </div>
-    {{/if}}
-  </div>
+
+  {{#if this.displayActionMenu}}
+    <div class="pix-filter-banner__container-action">
+      {{#if this.displayDetails}}
+        <p class="pix-filter-banner__details">{{@details}}</p>
+      {{/if}}
+
+      {{#if this.displayClearFilters}}
+        <div class="pix-filter-banner__button-container">
+          <PixButton
+            class="pix-filter-banner__button"
+            @shape="squircle"
+            @size="small"
+            @triggerAction={{@onClearFilters}}
+          >
+            <FaIcon class="pix-filter-banner-button__icon" @icon="trash-alt" @prefix="far" />
+            {{@clearFiltersLabel}}
+          </PixButton>
+        </div>
+      {{/if}}
+    </div>
+  {{/if}}
 </div>

package/addon/components/pix-filter-banner.js

@@ -10,4 +10,8 @@ export default class PixFilterBanner extends Component {
   get displayClearFilters() {
     return Boolean(this.args.clearFiltersLabel);
   }
+
+  get displayActionMenu() {
+    return this.displayClearFilters || this.displayDetails;
+  }
 }

package/addon/styles/_colors.scss

@@ -17,7 +17,7 @@ $pix-secondary-5: #fff9e6;
 $pix-secondary-10: #ffeeb3;
 $pix-secondary-20: #ffe381;
 $pix-secondary: #ffd235;
-$pix-secondary-40: #eaa600;
+$pix-secondary-40: #ffbe00;
 $pix-secondary-50: #eaa600;
 $pix-secondary-60: #ce8900;
 $pix-secondary-70: #a95800;

package/addon/styles/_pix-filter-banner.scss

@@ -1,31 +1,14 @@
 .pix-filter-banner {
   @import 'reset-css';
-
-  position: relative;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  position: relative;
+  gap: $spacing-xs;
   width: 100%;
-
   background-color: $pix-neutral-0;
   box-shadow: 0 2px 5px 0 rgba($pix-neutral-110, 0.05);
   min-height: 64px;
-  padding: 14px 24px;
-
-  &__container-left {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-
-    > * > * {
-      width: 100%;
-    }
-  }
-
-  &__container-right {
-    display: flex;
-    flex-direction: column;
-  }
+  padding: $spacing-s $spacing-m;
 
   &__title {
     color: $pix-neutral-60;
@@ -34,14 +17,20 @@
     margin: 0;
   }
 
-  p.pix-filter-banner__details {
+  &__container-filter {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-s;
+  }
+
+  &__details {
     color: $pix-neutral-60;
     font-family: $font-roboto;
     font-weight: $font-medium;
+    padding: $spacing-xs 0 $spacing-xs 0;
+    margin: 0;
     font-size: 0.875rem;
-    margin-top: 10px;
-    padding-top: 10px;
-    border-top: 1px solid$pix-neutral-15;
+    border-top: 1px solid $pix-neutral-15;
   }
 
   &__button {
@@ -50,55 +39,41 @@
 }
 
 .pix-filter-banner-button__icon {
-  padding-right: 4px;
+  padding-right: $spacing-xxs;
 }
 
 @include device-is('tablet') {
   .pix-filter-banner {
-    flex-direction: row;
     justify-content: space-between;
     align-items: center;
+    flex-direction: row;
+    gap: $spacing-m;
 
-    &__container-left {
-      flex-direction: row;
-      height: 36px;
+    &__container-title {
+      display: flex;
       align-items: center;
     }
 
-    &__container-right {
+    &__container-filter {
       flex-direction: row;
-      height: 36px;
-      align-items: center;
-      justify-content: flex-end;
+      flex-wrap: wrap;
     }
 
-    &__content {
-      > * {
-        margin-right: 16px;
-      }
-
-      > *:last-child {
-        margin-right: 0;
-      }
-    }
-
-    &__title {
-      padding-right: 24px;
-      margin: 0;
+    &__container-action {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
     }
 
-    p.pix-filter-banner__details {
-      margin: 0;
-      margin-right: 16px;
-      padding-left: 16px;
-      padding-top: 4px;
+    &__details {
+      padding: 0 $spacing-s 0 0;
       text-align: center;
       border: none;
     }
 
     &__button-container {
       border-left: 1px solid $pix-neutral-15;
-      padding-left: 16px;
+      padding-left: $spacing-s;
     }
   }
 }

package/addon/styles/_pix-select.scss

@@ -11,7 +11,7 @@
     font-family: $font-roboto;
     font-size: 0.875rem;
     height: 36px;
-    max-width: 100%;
+    width: 100%;
     text-overflow: ellipsis;
 
     @include hoverFormElement();
@@ -55,7 +55,7 @@
     font-size: 11px;
     color: $pix-neutral-30;
     right: 10px;
-    top: calc(50% - 6px);
+    top: calc(50% - 4px);
     padding: 0 0 2px;
     position: absolute;
     pointer-events: none;

package/app/stories/pix-filter-banner.stories.js

@@ -7,6 +7,8 @@ export const filterBanner = (args) => {
       <PixFilterBanner @title={{title}} @details={{details}} @clearFiltersLabel={{clearFiltersLabel}} @onClearFilters={{onClearFilters}}>
         <PixSelect @options={{this.options}} @onChange={{this.onChange}} />
         <PixSelect @options={{this.options}} @onChange={{this.onChange}} />
+        <PixSelect @options={{this.options}} @onChange={{this.onChange}} />
+        <PixSelect @options={{this.options}} @onChange={{this.onChange}} />
       </PixFilterBanner>
     `,
     context: args,

package/app/stories/pix-filter-banner.stories.mdx

@@ -25,6 +25,7 @@ Une `FilterBanner` permet de wrapper les éléments de filtres (`Select`, `Multi
 <PixFilterBanner aria-label="Filtres sur les campagnes">
   <PixSelect @options={{options}} @onChange={{onChange}} />
   <PixSelect @options={{options}} @onChange={{onChange}} />
+  <PixSelect @options={{options}} @onChange={{onChange}} />
 </PixFilterBanner>
 ```
 

package/docs/colors-palette.stories.mdx

@@ -0,0 +1,239 @@
+<!-- Colors.stories.mdx -->
+
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
+
+<Meta title="Utiliser Pix UI/Design Tokens/Palette de couleurs" />
+
+# Palette de couleurs
+
+ > Pour infos :
+ >
+ > Cette page permet de connaitre les couleurs qui sont disponibles dans `Pix-UI`. [Figma](https://www.figma.com/file/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Pix?node-id=16%3A2) reste la source de vérité des couleurs du design system de `Pix`.
+ >
+ > Les variables SCSS présentes dans le fichier `_colors.scss` reprennent les noms des symboles utilisés sur les maquettes dans Figma,
+ > on préconise d'utiliser ses noms de variables plutôt que le code hexa.
+
+#### SOLID
+
+<ColorPalette>
+  <ColorItem
+    title="Pix Primary"
+    subtitle="$pix-primary-"
+    colors={{ 5: '#f2f9ff',
+              10: '#dcf1ff',
+              20: '#c4e6ff',
+              30: '#88beff',
+              40: '#5b94ff',
+              Primary: '#3d68ff',
+              60: '#2044dc',
+              70: '#0d25b3',
+              80: '#000e87'}}
+  />
+  <ColorItem
+    title="Pix Secondary"
+    subtitle="$pix-secondary-"
+    colors={{ 5: '#fff9e6',
+             10: '#ffeeb3',
+             20: '#ffe381',
+             Secondary: '#ffd235',
+             40: '#ffbe00',
+             50: '#eaa600',
+             60: '#ce8900',
+             70: '#a95800',
+             80: '#874d00'}}
+  />
+  <ColorItem
+    title="Pix Secondary Certif"
+    subtitle="$pix-secondary-certif-"
+    colors={{ 5: '#ccf6f5',
+             10: '#9aedeb',
+             20: '#67e4e0',
+             30: '#34dbd6',
+             SecondaryCertif: '#20b4af',
+             50: '#17817e',
+             60:' #126765',
+             70: '#0e4d4c',
+             80: '#093432'}}
+  />
+  <ColorItem
+    title="Pix Secondary Orga"
+    subtitle="$pix-secondary-orga-"
+    colors={{ 5: '#d5f9ff',
+             10: '#aaf4ff',
+             20: '#80eeff',
+             30: '#55e8ff',
+             SecondaryOrga: '#00ddff',
+             50: '#00c1df',
+             60: '#00a6bf',
+             70: '#008a9f',
+             80: '#006e80'}}
+  />
+  <ColorItem
+    title="Pix Tertiary"
+    subtitle="$pix-tertiary-"
+    colors={{ 5: '#ebe1ff',
+             10: '#d8c2ff',
+             20: '#c4a4ff',
+             30: '#b186ff',
+             Tertiary: '#9d67ff',
+             50: '#8a49ff',
+             60: '#6712ff',
+             70: '#4e00db',
+             80: '#3b00a4'}}
+  />
+  <ColorItem
+    title="Pix Success"
+    subtitle="$pix-success-"
+    colors={{5: '#ecfdf5',
+            10: '#d1fae5',
+            20: '#a7f3d0',
+            30: '#6ee7b7',
+            40: '#34d399',
+            50: '#27b481',
+            60: '#14865d',
+            70: '#176c4d',
+            80: '#104834'}}
+  />
+  <ColorItem
+    title="Pix Warning"
+    subtitle="$pix-warning-"
+    colors={{5: '#fff9e6',
+            10: '#fff1c5',
+            20: '#ffe381',
+            30: '#ffd235',
+            40: '#ffbe00',
+            50: '#eaa600',
+            60: '#ce8900',
+            70: '#ac6a00',
+            80: '#874d00'}}
+  />
+  <ColorItem
+    title="Pix Error"
+    subtitle="$pix-error-"
+    colors={{5: '#fef2f2',
+            10: '#fee2e2',
+            20: '#fecaca',
+            30: '#fca5a5',
+            40: '#f87171',
+            50: '#ef4444',
+            60: '#dc2626',
+            70: '#b91c1c',
+            80: '#991b1b'}}
+  />
+  <ColorItem
+    title="Pix Neutral ( 0 - 40 )"
+    subtitle="$pix-neutral-"
+    colors={{0: '#ffffff',
+             5: '#fafbfc',
+            10: '#f4f5f7',
+            15: '#eaecf0',
+            20: '#dfe1e6',
+            22: '#c1c7d0',
+            25: '#a5adba',
+            30: '#97a0af',
+            35: '#8993a4',
+            40: '#7a869a'}}
+  />
+  <ColorItem
+    title="Pix Neutral  ( 45 - 110 )"
+    subtitle="$pix-neutral-"
+    colors={{45: '#6b778c',
+             50: '#5e6c84',
+             60: '#505f79',
+             70: '#344563',
+             80: '#253858',
+             90: '#172b4d',
+            100: '#091e42',
+            110: '#07142e'}}
+  />
+  <ColorItem
+    title="Pix Shades"
+    subtitle="$pix-shades-"
+    colors={{100: '#000000'}}
+  />
+  <ColorItem
+    title="Pix Domain Information"
+    subtitle="$pix-information-"
+    colors={{Dark: '#f24645',
+            Light: '#f1a141'}}
+  />
+  <ColorItem
+    title="Pix Domain Content"
+    subtitle="$pix-content-"
+    colors={{Dark: '#1a8c89',
+            Light: '#52d987'}}
+  />
+  <ColorItem
+    title="Pix Domain Communication"
+    subtitle="$pix-communication-"
+    colors={{Dark: '#3d68ff',
+            Light: '#12a3ff'}}
+  />
+  <ColorItem
+    title="Pix Domain Security"
+    subtitle="$pix-security-"
+    colors={{Dark: '#ac008d',
+            Light: '#ff3f94'}}
+  />
+  <ColorItem
+    title="Pix Domain Environment"
+    subtitle="$pix-environment-"
+    colors={{Dark: '#5e2563',
+            Light: '#564da6'}}
+  />
+</ColorPalette>
+
+#### GRADIENT
+
+<ColorPalette>
+  <ColorItem
+    title="Primary Pix App"
+    subtitle="$pix-primary-app-gradient"
+    colors={{ PrimaryPixApp: 'linear-gradient(91.59deg, #3d68ff 0%, #8845ff 100%)'}}
+  />
+  <ColorItem
+    title="Secondary Pix App"
+    subtitle="$pix-secondary-app-gradient"
+    colors={{ SecondaryPixAppGradient: 'linear-gradient(91.59deg, #fedc41 0%, #ff9f00 100%)'}}
+  />
+  <ColorItem
+    title="Primary Certif"
+    subtitle="$pix-primary-certif-gradient"
+    colors={{ PrimaryCertif: 'linear-gradient(91.59deg, #52d987 0%, #1a8c89 100%)'}}
+  />
+  <ColorItem
+    title="Primary Orga"
+    subtitle="$pix-primary-orga-gradient"
+    colors={{ PrimaryOrga: 'linear-gradient(91.59deg, #00ddff 0%, #0095c0 100%)'}}
+   />
+   <ColorItem
+     title="Secondary Orga"
+     subtitle="$pix-primary-secondary-gradient"
+     colors={{SecondaryOrga: 'linear-gradient(91.59deg, #0d7dc4 0%, #213371 100%)'}}
+   />
+   <ColorItem
+     title="Domain Information"
+     subtitle="$pix-information-gradient"
+     colors={{DomainInformation: 'linear-gradient(180deg, #f24645 0%, #f1a141 100%)'}}
+   />
+   <ColorItem
+     title="Domain Content"
+     subtitle="$pix-content-gradient"
+     colors={{DomainContent: 'linear-gradient(180deg, #1a8c89 0%, #52d987 100%)'}}
+   />
+   <ColorItem
+     title="Domain Communication"
+     subtitle="$pix-communication-gradient"
+     colors={{DomainCommunication: 'linear-gradient(180deg, #3d68ff 0%, #12a3ff 100%)'}}
+   />
+   <ColorItem
+     title="Domain Security"
+     subtitle="$pix-security-gradient"
+     colors={{DomainSecurity: 'linear-gradient(180deg, #ac008d 0%, #ff3f94 100%)'}}
+   />
+   <ColorItem
+     title="Domain Environment"
+     subtitle="$pix-environment-gradient"
+     colors={{DomainEnvironment: 'linear-gradient(180deg, #5e2563 0%, #564da6 100%)'}}
+   />
+</ColorPalette>

package/docs/design-tokens.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 
-<Meta title="Utiliser Pix UI/Design Tokens" />
+<Meta title="Utiliser Pix UI/Design Tokens/ Utilisation" />
 
 # Design Tokens
 
@@ -29,4 +29,32 @@ Par exemple :
 .organization-title {
   @include design-tokens.text-bold;
 }
+````
+
+## Définir les alertes
+
+Les couleurs pour définir un état d'une alerte ont été attribuées pour uniformiser le visuel sur toutes les applications.
+
+### Success
+```
+Texte ou bordure : $pix-success-70
+Background : $pix-success-10
+```
+
+### Warning
+```
+Texte ou bordure : $pix-warning-60
+Background : $pix-warning-10
+```
+
+### Error
+```
+Texte ou bordure : $pix-error-70
+Background : $pix-error-10
+```
+
+### Information
+```
+Texte ou bordure : $pix-primary-70
+Background : $pix-primary-10
 ```

package/package.json

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

package/docs/pix-design-tokens.stories.mdx

@@ -1,23 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Utiliser Pix UI/Pix Design Tokens" />
-
-# Design Tokens
-
-> Les design tokens contiennent plusieurs éléments de base de la charte graphique (les couleurs, la typographie, les icônes, etc.)
-
-## Utiliser les classes, mixins et variables dans votre css
-
-En ajoutant la dépendance dans votre application avec `npm install`, pour avoir accès aux classes, mixins et variables,
-il faut ajouter le code ci-dessous dans le `new EmberApp()` de votre `ember-cli.build.js` qui se trouve à la racine du projet :
-
-```
-sassOptions: {
-  includePaths: ['node_modules/@1024pix/pix-ui/addon/styles'],
-},
-```
-
-Et aussi importer les design-tokens avec `@import 'design-tokens';` dans `app/styles/app.scss`.
-
-Par la suite vous aurez accès à toutes les variables des design tokens avec le `$`, par exemple `border: 1px solid $blue;`
-et les mixins avec `@include 'nom du mixin';`