@1024pix/pix-ui 13.4.3 → 13.5.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Pix-UI Changelog
 
+## v13.5.1 (12/04/2022)
+
+
+### :bug: Correction
+- [#211](https://github.com/1024pix/pix-ui/pull/211) [BUGFIX] Ne permettre qu'un label dans les composants Pix Input et Input Password (PIX-4125).
+
+## v13.5.0 (11/04/2022)
+
+
+### :rocket: Amélioration
+- [#204](https://github.com/1024pix/pix-ui/pull/204) [FEATURE] Permettre de rendre Pix Input et Pix Input Password obligatoires (PIX-4138).
+
+## v13.4.4 (11/04/2022)
+
+
+### :bug: Correction
+- [#209](https://github.com/1024pix/pix-ui/pull/209) [BUGFIX]  Remplace la page courante si elle n'existe plus
+
 ## v13.4.2 (07/04/2022)
 
 

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

@@ -1,9 +1,16 @@
 <div class="pix-input-password">
   {{#if this.label}}
-    <label for={{this.id}} class="pix-input__label">{{this.label}}</label>
-  {{/if}}
-  {{#if @information}}
-    <label for={{this.id}} class="pix-input__information">{{@information}}</label>
+    <label for={{this.id}} class="pix-input__label">
+      {{#if @requiredLabel}}
+        <abbr title={{@requiredLabel}} class="mandatory-mark" aria-hidden="true">*</abbr>
+      {{/if}}
+
+      {{this.label}}
+
+      {{#if @information}}
+        <span class="pix-input__information">{{@information}}</span>
+      {{/if}}
+    </label>
   {{/if}}
   <div
     class="pix-input-password__container
@@ -20,6 +27,9 @@
       type={{if this.isPasswordVisible "text" "password"}}
       value={{@value}}
       aria-label={{this.ariaLabel}}
+      aria-required="{{if @requiredLabel true false}}"
+      required={{if @requiredLabel true false}}
+      aria-describedby={{if @errorMessage "text-input-password-error"}}
       ...attributes
     />
 
@@ -37,6 +47,6 @@
   </div>
 
   {{#if @errorMessage}}
-    <label for={{this.id}} class="pix-input__error-message">{{@errorMessage}}</label>
+    <p id="text-input-password-error" class="pix-input__error-message">{{@errorMessage}}</p>
   {{/if}}
 </div>

package/addon/components/pix-input.hbs

@@ -1,13 +1,28 @@
 <div class="pix-input">
   {{#if @label}}
-    <label for={{this.id}} class="pix-input__label">{{@label}}</label>
-  {{/if}}
-  {{#if @information}}
-    <label for={{this.id}} class="pix-input__information">{{@information}}</label>
+    <label for={{this.id}} class="pix-input__label">
+      {{#if @requiredLabel}}
+        <abbr title={{@requiredLabel}} class="mandatory-mark" aria-hidden="true">*</abbr>
+      {{/if}}
+
+      {{@label}}
+
+      {{#if @information}}
+        <span class="pix-input__information">{{@information}}</span>
+      {{/if}}
+    </label>
   {{/if}}
 
   <div class="pix-input__container">
-    <input id={{this.id}} class={{this.className}} value={{@value}} ...attributes />
+    <input
+      id={{this.id}}
+      class={{this.className}}
+      value={{@value}}
+      aria-required="{{if @requiredLabel true false}}"
+      required={{if @requiredLabel true false}}
+      aria-describedby={{if @errorMessage "text-input-error"}}
+      ...attributes
+    />
 
     {{#if @errorMessage}}
       <FaIcon @icon="times" class="pix-input__error-icon" />
@@ -19,6 +34,6 @@
   </div>
 
   {{#if @errorMessage}}
-    <label for={{this.id}} class="pix-input__error-message">{{@errorMessage}}</label>
+    <p id="text-input-error" class="pix-input__error-message">{{@errorMessage}}</p>
   {{/if}}
 </div>

package/addon/components/pix-pagination.hbs

@@ -1,4 +1,4 @@
-<footer class={{this.isCondensed}}>
+<footer class={{this.isCondensed}} {{did-update this.checkCurrentPageAgainstPageCount @pagination}}>
   <section class="pix-pagination__size">
     <span class="pagination-size__label">{{this.beforeResultsPerPage}}</span>
     <PixSelect

package/addon/components/pix-pagination.js

@@ -118,4 +118,13 @@ export default class PixPagination extends Component {
   goToPreviousPage() {
     this.router.replaceWith({ queryParams: { pageNumber: this.previousPage } });
   }
+
+  @action
+  checkCurrentPageAgainstPageCount() {
+    const pageCount = this.args.pagination.pageCount;
+    if (pageCount === 0) return;
+    if (this.currentPage > pageCount) {
+      this.router.replaceWith({ queryParams: { pageNumber: pageCount } });
+    }
+  }
 }

package/addon/styles/_pix-input.scss

@@ -6,14 +6,19 @@
   position: relative;
 
   &__label {
-    @include label();
+    font-family: $font-roboto;
+    font-size: 0.875rem;
+    color: $grey-70;
+    margin-bottom: 4px;
   }
 
   &__information {
     font-family: $font-roboto;
     font-size: 0.75rem;
+    margin-top: 4px;
     color: $blue-zodiac;
-    margin-bottom: 4px;
+
+    display: block;
   }
 
   &__container {
@@ -54,8 +59,12 @@
 
   &__error-message {
     @include errorMessage();
-    margin-top: 4px;
+    margin-bottom: 0;
     bottom: calc(-4px - 1px - 0.75rem);
+
+    &.pix-input__error-message {
+      margin-top:4px;
+    }
   }
 
   input {

package/app/stories/form.stories.js

@@ -5,7 +5,7 @@ export const form = (args) => {
   return {
     template: hbs`
     <form>
-      <PixInput @id='firstName' @label='Prénom' @errorMessage={{genericErrorMessage}} />
+      <PixInput @id='firstName' @label='Prénom' @errorMessage={{genericErrorMessage}} @requiredLabel='champ obligatoire'/>
       <br>
       <PixInputPassword @id='password' @label='Mot de passe' @errorMessage={{genericErrorMessage}} />
       <br>
@@ -13,7 +13,7 @@ export const form = (args) => {
       <PixMultiSelect
         @title="Votre notation en étoiles..."
         @id="form__pix-mutli-select"
-        @label="A quel point aimez vous Pix-UI ?"
+        @label="A quel point aimez vous Pix UI ?"
         @onSelect={{onSelect}}
         @selected={{selected}}
         @options={{options}} as |star|

package/app/stories/form.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 import centered from '@storybook/addon-centered/ember';
 import * as stories from './form.stories.js';
 
@@ -12,5 +12,5 @@ import * as stories from './form.stories.js';
 Un formulaire complet avec les composants Pix UI :
 
 <Canvas>
-  <Story name="Form" story={stories.form} height={600} />
+  <Story name="Form" story={stories.form} height={700} />
 </Canvas>

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

@@ -10,6 +10,7 @@ export const Template = (args) => {
         @information={{information}}
         @errorMessage={{errorMessage}}
         @prefix={{prefix}}
+        @requiredLabel={{requiredLabel}}
       />
     `,
     context: args,
@@ -43,6 +44,13 @@ withPrefix.args = {
   prefix: 'C -',
 };
 
+export const withRequiredLabel = Template.bind({});
+withRequiredLabel.args = {
+  id: 'password',
+  label: 'Mot de passe',
+  requiredLabel: 'Champ obligatoire',
+};
+
 export const argTypes = {
   id: {
     name: 'id',
@@ -86,4 +94,13 @@ export const argTypes = {
     type: { name: 'string', required: false },
     defaultValue: null,
   },
+  requiredLabel: {
+    name: 'requiredLabel',
+    description:
+      'Label indiquant que le champ est requis, le paramètre @label devient obligatoire avec ce paramètre.',
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
 };

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

@@ -41,7 +41,7 @@ Si vous utilisez le `PixInputPassword` sans label alors il faut renseigner le pa
 ## With error message
 
 <Canvas>
-  <Story story={stories.withErrorMessage} height={130} />
+  <Story story={stories.withErrorMessage} height={100} />
 </Canvas>
 
 ## With prefix
@@ -50,16 +50,23 @@ Si vous utilisez le `PixInputPassword` sans label alors il faut renseigner le pa
   <Story story={stories.withPrefix} height={100} />
 </Canvas>
 
+## With required label
+
+<Canvas>
+  <Story story={stories.withRequiredLabel} height={100} />
+</Canvas>
+
 ## Usage
 
 ```html
 <PixInputPassword
-  @id='{{id}}'
-  @label='{{label}}'
-  @information='{{information}}'
-  @value='{{value}}'
-  @errorMessage='{{errorMessage}}'
-  @prefix='{{prefix}}'
+  @id='password'
+  @label='Mot de passe'
+  @information='8 caractères dont une majuscule...'
+  @value='pix123'
+  @errorMessage='Le mot de passe est erroné'
+  @prefix='C-'
+  @requiredLabel='Champ obligatoire'
 />
 ```
 

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

@@ -10,7 +10,9 @@ export const Template = (args) => {
         @errorMessage={{errorMessage}}
         @icon={{icon}}
         @isIconLeft={{isIconLeft}}
-        placeholder='Jeanne, Pierre ...' />
+        placeholder='Jeanne, Pierre ...'
+        @requiredLabel={{requiredLabel}}
+      />
     `,
     context: args,
   };
@@ -43,6 +45,13 @@ withIcon.args = {
   icon: 'eye',
 };
 
+export const withRequiredLabel = Template.bind({});
+withRequiredLabel.args = {
+  id: 'firstName',
+  label: 'Prénom',
+  requiredLabel: 'Champ obligatoire',
+};
+
 export const argTypes = {
   id: {
     name: 'id',
@@ -91,4 +100,13 @@ export const argTypes = {
       defaultValue: { summary: 'false' },
     },
   },
+  requiredLabel: {
+    name: 'requiredLabel',
+    description:
+      'Label indiquant que le champ est requis, le paramètre @label devient obligatoire avec ce paramètre.',
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
 };

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

@@ -39,6 +39,12 @@ Le PixInput permet de créer un champ de texte.
   <Story story={stories.withIcon} height={130} />
 </Canvas>
 
+## With required label
+
+<Canvas>
+  <Story story={stories.withRequiredLabel} height={130} />
+</Canvas>
+
 ## Usage
 
 ```html
@@ -46,9 +52,11 @@ Le PixInput permet de créer un champ de texte.
   @id='firstName'
   @label='Prénom'
   @information='Complément du label'
-  @errorMessage="Un message d'erreur"
-  @icon="eye"
-  @isIconLeft={{false}} />
+  @errorMessage='Un message d`erreur'
+  @icon='eye'
+  @isIconLeft={{false}}
+  @requiredLabel='Champ obligatoire'
+/>
 ```
 
 ## Arguments

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "13.4.3",
+  "version": "13.5.1",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -52,6 +52,7 @@
   "devDependencies": {
     "@1024pix/ember-testing-library": "^0.5.0",
     "@ember/optional-features": "^2.0.0",
+    "@ember/render-modifiers": "^2.0.4",
     "@ember/test-helpers": "^2.6.0",
     "@formatjs/intl": "^2.1.0",
     "@fortawesome/ember-fontawesome": "^0.2.3",