@1024pix/pix-ui 11.1.0 → 13.0.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Pix-UI Changelog
 
+## v13.0.0 (27/01/2022)
+
+
+### :coffee: Various
+- [#188](https://github.com/1024pix/pix-ui/pull/188) [BREAKING_CHANGES] Input / InputPassword missing event on onChange (PIX-4243)
+
+## v12.0.0 (24/01/2022)
+
+
+### :rocket: Enhancement
+- [#94](https://github.com/1024pix/pix-ui/pull/94) [FEATURE] Ajout du composant PixModal
+
+### :bug: Bug fix
+- [#186](https://github.com/1024pix/pix-ui/pull/186) [BUGFIX] Désactiver l'autocomplete sur le composant Pix Select (PIX-4158)
+- [#187](https://github.com/1024pix/pix-ui/pull/187) [BUGFIX] Rendre tout le tag sélectionnable (PIX-4179)
+
+## v11.2.0 (14/01/2022)
+
+
+### :coffee: Various
+- [#185](https://github.com/1024pix/pix-ui/pull/185) [A11Y] Ajouter une nouvelle couleur dans la palette de PixTag (PIX-4109)
+
+## v11.1.1 (17/12/2021)
+
+
+### :building_construction: Tech
+- [#182](https://github.com/1024pix/pix-ui/pull/182) [TECH] Rendre responsive la PixFilterBanner
+
 ## v11.1.0 (16/12/2021)
 
 

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

@@ -3,9 +3,7 @@
     {{#if this.displayTitle}}
       <p class="pix-filter-banner__title">{{@title}}</p>
     {{/if}}
-    <div class="pix-filter-banner__content">
-      {{yield}}
-    </div>
+    {{yield}}
   </div>
   <div class="pix-filter-banner__container-right">
     {{#if this.displayDetails}}

package/addon/components/pix-input-password.hbs

@@ -20,7 +20,6 @@
       type={{if this.isPasswordVisible "text" "password"}}
       value={{@value}}
       aria-label={{this.ariaLabel}}
-      {{on "change" this.onChange}}
       ...attributes
     />
 

package/addon/components/pix-input-password.js

@@ -26,9 +26,4 @@ export default class PixInputPassword extends PixInput {
   togglePasswordVisibility() {
     this.isPasswordVisible = !this.isPasswordVisible;
   }
-
-  @action
-  onChange() {
-    if (typeof this.args.onChange === 'function') this.args.onChange();
-  }
 }

package/addon/components/pix-input.hbs

@@ -7,13 +7,7 @@
   {{/if}}
 
   <div class="pix-input__container">
-    <input
-      id={{this.id}}
-      class={{this.className}}
-      value={{@value}}
-      {{on "change" this.onChange}}
-      ...attributes
-    />
+    <input id={{this.id}} class={{this.className}} value={{@value}} ...attributes />
 
     {{#if @errorMessage}}
       <FaIcon @icon="times" class="pix-input__error-icon" />

package/addon/components/pix-input.js

@@ -1,9 +1,6 @@
 import Component from '@glimmer/component';
 
-import { action } from '@ember/object';
 export default class PixInput extends Component {
-  text = 'pix-input';
-
   get id() {
     if (!this.args.id || !this.args.id.toString().trim()) {
       throw new Error('ERROR in PixInput component, @id param is not provided');
@@ -18,9 +15,4 @@ export default class PixInput extends Component {
     this.args.isIconLeft && classNames.push('pix-input__input--icon-left');
     return classNames.join(' ');
   }
-
-  @action
-  onChange() {
-    if (typeof this.args.onChange === 'function') this.args.onChange();
-  }
 }

package/addon/components/pix-modal.hbs

@@ -0,0 +1,28 @@
+<div class="pix-modal__overlay">
+  <div
+    class="pix-modal"
+    role="dialog"
+    aria-labelledby="modal-title"
+    aria-describedby="modal-content"
+    aria-modal="true"
+    ...attributes
+  >
+    <header class="pix-modal__header">
+      <h1 id="modal-title" class="pix-modal__title">{{@title}}</h1>
+      <PixIconButton
+        @icon="times"
+        @triggerAction={{@onCloseButtonClick}}
+        @ariaLabel="Fermer"
+        @size="small"
+        @withBackground={{true}}
+        class="pix-modal__close-button"
+      />
+    </header>
+    <main id="modal-content" class="pix-modal__content">
+      {{yield to="content"}}
+    </main>
+    <footer class="pix-modal__footer">
+      {{yield to="footer"}}
+    </footer>
+  </div>
+</div>

package/addon/components/pix-modal.js

@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+
+export default class PixModal extends Component {
+  constructor(...args) {
+    super(...args);
+
+    if (!this.args.title) {
+      throw new Error('ERROR in PixModal component: @title argument is required.');
+    }
+  }
+}

package/addon/components/pix-select.hbs

@@ -12,6 +12,7 @@
       {{on "input" this.onChange}}
       class="{{if this.isValid "pix-select--is-valid"}} {{if this.isBig "pix-select--big"}}"
       ...attributes
+      autocomplete="off"
     />
 
     <datalist id={{this.datalistId}}>

package/addon/styles/_colors.scss

@@ -3,6 +3,7 @@
 // primary
 $blue: #3D68FF;
 $yellow: #FFBE00;
+$orange: #DA7601;
 $red: #D63F00;
 $blue-zodiac: #505F79;
 $black: #07142E;

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

@@ -3,9 +3,8 @@
 
   position: relative;
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
+  gap: 6px;
   width: 100%;
 
   background-color: $white;
@@ -15,53 +14,34 @@
 
   &__container-left {
     display: flex;
-    align-items: center;
-    height: 36px;
+    flex-direction: column;
+    gap: 12px;
+    
+    > * > * {
+      width: 100%;
+    }
   }
 
   &__container-right {
     display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    height: 36px;
+    flex-direction: column;
   }
 
   &__title {
     color: $grey-60;
     font-family: $font-roboto;
     font-size: 0.875rem;
-    padding-right: 24px;
     margin: 0;
   }
 
-  &__content {
-    display: flex;
-
-    > * {
-      margin-right: 16px;
-    }
-
-    > *:last-child {
-      margin-right: 0;
-    }
-  }
-
-  &__details {
+  p.pix-filter-banner__details {
     color: $grey-60;
     font-family: $font-roboto;
     font-weight: $font-medium;
-    padding-left: 16px;
     font-size: 0.875rem;
-    margin: 0;
-    margin-right: 16px;
-    height: 18px;
-    padding-top: 4px;
-    text-align: center;
-  }
-
-  &__button-container {
-    border-left: 1px solid $grey-15;
-    padding-left: 16px;
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px solid $grey-15;
   }
 
   &__button {
@@ -72,3 +52,53 @@
 .pix-filter-banner-button__icon {
   padding-right: 4px;
 }
+
+@include device-is('tablet') {
+  .pix-filter-banner {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    &__container-left {
+      flex-direction: row;
+      height: 36px;
+      align-items: center;
+    }
+
+    &__container-right {
+      flex-direction: row;
+      height: 36px;
+      align-items: center;
+      justify-content: flex-end;
+    }
+
+    &__content {
+      > * {
+        margin-right: 16px;
+      }
+
+      > *:last-child {
+        margin-right: 0;
+      }
+    }
+
+    &__title {
+      padding-right: 24px;
+      margin: 0;
+    }
+
+    p.pix-filter-banner__details {
+      margin: 0;
+      margin-right: 16px;
+      padding-left: 16px;
+      padding-top: 4px;
+      text-align: center;
+      border: none;
+    }
+
+    &__button-container {
+      border-left: 1px solid $grey-15;
+      padding-left: 16px;
+    }
+  }
+}

package/addon/styles/_pix-input.scss

@@ -59,10 +59,8 @@
   }
 
   input {
-    display: flex;
+    width: 100%;
     height: 36px;
-    flex-direction: column;
-    justify-content: center;
     border: 1px solid $grey-40;
 
     @include input();

package/addon/styles/_pix-modal.scss

@@ -0,0 +1,95 @@
+.pix-modal__overlay {
+  background-color: rgba(52, 69, 99, .7);
+  bottom: 0;
+  left: 0;
+  overflow-y: scroll;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+
+$modal-padding: 24px;
+$mobile-close-button-size: 32px;
+$tablet-close-button-size: 40px;
+$space-between-title-and-close-button: 8px;
+$button-margin: 16px;
+
+.pix-modal {
+  @import "reset-css";
+  box-shadow: 1px 1px 5px rgba(0,0,0,.1);
+  margin: 20vw auto;
+  max-width: 512px;
+  width: calc(100% - 24px);
+
+  &__header {
+    background: $white;
+    border-bottom: 1px solid $grey-20;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    padding: $modal-padding;
+    position: relative;
+  }
+
+  &__close-button {
+    flex-shrink: 0;
+    right: $modal-padding;
+    position: absolute;
+    top: $modal-padding;
+
+    @include device-is('tablet') {
+      height: $tablet-close-button-size;
+      width: $tablet-close-button-size;
+    }
+  }
+
+  &__title {
+    margin-bottom: 0;
+    font-family: $font-open-sans;
+    color: $grey-90;
+    font-size: 1.25rem;
+    line-height: 1.875rem;
+    font-weight: $font-normal;
+    padding-right: $mobile-close-button-size + $space-between-title-and-close-button;
+
+    @include device-is('tablet') {
+      padding-right: $tablet-close-button-size + $space-between-title-and-close-button;
+    }
+  }
+
+  &__content {
+    background-color: $grey-10;
+    padding: $modal-padding;
+    font-size: 0.875rem;
+    color: $grey-90;
+    line-height: 1.375rem;
+    font-family: $font-roboto;
+    font-weight: $font-normal;
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__footer {
+    background-color: $grey-10;
+    padding: 0 $modal-padding $modal-padding - $button-margin;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+
+    @include device-is('tablet') {
+      display: flex;
+      justify-content: flex-end;
+      flex-wrap: wrap;
+    }
+
+    .pix-button {
+      margin-bottom: $button-margin;
+      width: 100%;
+
+      @include device-is('tablet') {
+        margin: 0 0 $button-margin $button-margin;
+        width: auto;
+      }
+    }
+  }
+}

package/addon/styles/_pix-selectable-tag.scss

@@ -37,6 +37,10 @@ $checkmark-width-with-space: $checkmark-width + 0.438rem;
     position: absolute;
     opacity: 0;
     cursor: pointer;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
   }
 
   label {

package/addon/styles/_pix-tag.scss

@@ -50,6 +50,15 @@
     background-color: lighten($yellow, 35%);
   }
 
+  &--orange {
+    background-color: $orange;
+  }
+
+  &--orange-light {
+    color: darken($orange, 25%);
+    background-color: lighten($orange, 35%);
+  }
+
   &--grey {
     color: $grey-15;
     background-color: $grey-60;

package/addon/styles/addon.scss

@@ -25,6 +25,7 @@
 @import 'pix-input';
 @import 'pix-input-password';
 @import 'pix-radio-button';
+@import 'pix-modal';
 @import 'pix-input-code';
 @import 'pix-selectable-tag';
 

package/app/components/pix-modal-content.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-modal-content';

package/app/components/pix-modal-footer.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-modal-footer';

package/app/components/pix-modal.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-modal';

package/app/stories/pix-input-password.stories.mdx

@@ -60,7 +60,6 @@ Si vous utilisez le `PixInputPassword` sans label alors il faut renseigner le pa
   @value='{{value}}'
   @errorMessage='{{errorMessage}}'
   @prefix='{{prefix}}'
-  @onChange='{{onChange}}'
 />
 ```
 

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

@@ -48,8 +48,7 @@ Le PixInput permet de créer un champ de texte.
   @information='Complément du label'
   @errorMessage="Un message d'erreur"
   @icon="eye"
-  @isIconLeft={{false}}
-  @onChange={{onChange}} />
+  @isIconLeft={{false}} />
 ```
 
 ## Arguments

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

@@ -0,0 +1,40 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export const modal = (args) => {
+  return {
+    template: hbs`
+      <PixModal @title={{this.title}}>
+        <:content>
+          <p>
+            Une fenêtre modale est, dans une interface graphique, une fenêtre qui prend le contrôle total du clavier et
+            de l'écran. Elle est en général associée à une question à laquelle il est impératif que l'utilisateur
+            réponde avant de poursuivre, ou de modifier quoi que ce soit. La fenêtre modale a pour propos : d'obtenir
+            des informations de l'utilisateur (ces informations sont nécessaires pour réaliser une opération) ; de
+            fournir une information à l'utilisateur (ce dernier doit en prendre connaissance avant de pouvoir continuer
+            à utiliser l'application).
+          </p>
+        </:content>
+        <:footer>
+          <PixButton @backgroundColor="transparent-light" @isBorderVisible="true">Annuler</PixButton>
+          <PixButton>Valider</PixButton>
+        </:footer>
+      </PixModal>
+    `,
+    context: args,
+  };
+};
+
+export const argTypes = {
+  title: {
+    name: 'title',
+    description: 'Titre de la modale',
+    type: { name: 'string', required: false },
+    defaultValue: "Qu'est-ce qu'une modale ?",
+  },
+  onCloseButtonClick: {
+    name: 'onCloseButtonClick',
+    description: 'Fonction à executer lors du clic sur le bouton de fermeture de la modale',
+    type: { name: 'function', required: true },
+    defaultValue: null,
+  },
+};

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

@@ -0,0 +1,59 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+
+import * as stories from './pix-modal.stories.js';
+
+<Meta
+  title='Basics/Modal'
+  component='PixModal'
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# PixModal
+
+Une fenêtre modale responsive et scrollable avec un overlay.
+
+Ce composant possède deux `yield` :
+- `:content` est destiné à accueillir le contenu principal de la fenêtre modale. Il peut accueillir tout type de
+  contenu HTML (simple texte, image, formulaire, etc.)
+- `:footer` peut également accueillir tout type de contenu HTML, mais est destiné aux boutons permettant d'interagir
+  avec la modale, ce qui permettra de les positionner correctement dans tous les cas de figure.
+
+<Canvas>
+  <Story name='PixModal' story={stories.modal} height={500} />
+</Canvas>
+
+## Usage
+
+```html
+<PixModal
+  @title="Qu'est-ce qu'une modale ?"
+  @onCloseButtonClick={{this.closeModal}}
+>
+ <:content>
+  <p>
+    Une fenêtre modale est, dans une interface graphique, une fenêtre qui prend le contrôle total du clavier et
+    de l'écran. Elle est en général associée à une question à laquelle il est impératif que l'utilisateur
+    réponde avant de poursuivre, ou de modifier quoi que ce soit. La fenêtre modale a pour propos : d'obtenir
+    des informations de l'utilisateur (ces informations sont nécessaires pour réaliser une opération) ; de
+    fournir une information à l'utilisateur (ce dernier doit en prendre connaissance avant de pouvoir continuer
+    à utiliser l'application).
+  </p>
+ </:content>
+ <:footer>
+  <PixButton
+    @backgroundColor="transparent-light"
+    @isBorderVisible={{true}}
+    @triggerAction={{this.closeModal}}
+  >
+    Annuler
+  </PixButton>
+  <PixButton>Valider</PixButton>
+ </:footer>
+</PixModal>
+```
+
+## Arguments
+
+<ArgsTable story="PixModal" />

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

@@ -36,14 +36,16 @@ export const argTypes = {
       options: [
         'blue',
         'blue-light',
-        'purple',
-        'purple-light',
         'green',
         'green-light',
-        'yellow',
-        'yellow-light',
         'grey',
         'grey-light',
+        'purple',
+        'purple-light',
+        'orange',
+        'orange-light',
+        'yellow',
+        'yellow-light',
       ],
     },
   },

package/docs/test-component-without-release.stories.mdx

@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Développement/Tester un composant en developpement dans une app" />
+
+# Tester un composant en developpement dans une app
+
+Il est possible de tester l'intégration d'un composant dans une application
+Ember sans nécessairement créer une nouvelle release.
+
+Pour cela, dans le repertoire de l'application Ember, installer Pix UI
+en utilisant l'adresse du dépôt Github et le nom de la branche.
+Par exemple :
+
+```shell
+npm install "git://github.com/1024pix/pix-ui#add-modal-component" --save-dev
+```
+
+Une fois l'application Ember redémarrée, il sera possible d'accéder aux
+composants Pix UI tels qu'ils sont dans la branche en cours de développement.

package/package.json

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