@1024pix/pix-ui 15.0.2 → 17.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Pix-UI Changelog
 
+## v17.0.0 (09/08/2022)
+
+
+### :coffee: Autre
+- [#239](https://github.com/1024pix/pix-ui/pull/239) [BREAKING_CHANGES][BUGFIX] Correction des couleurs du design system par rapport à Figma (PIX-5331).
+
+## v16.1.0 (03/08/2022)
+
+
+### :rocket: Amélioration
+- [#232](https://github.com/1024pix/pix-ui/pull/232) [FEATURE] Ajout du composant checkbox (PIX-3030)
+
+## v16.0.0 (13/07/2022)
+
+
+### :building_construction: Tech
+- [#238](https://github.com/1024pix/pix-ui/pull/238) [TECH] Monter de version fontawesome (PIX-5325)
+
 ## v15.0.2 (11/07/2022)
 
 

package/addon/components/pix-banner.hbs

@@ -6,7 +6,7 @@
       {{#if this.isExternalLink}}
         <a class="pix-banner__action" href={{@actionUrl}} target="_blank" rel="noopener noreferrer">
           {{@actionLabel}}
-          <FaIcon class="external-link" @icon="external-link-alt" />
+          <FaIcon class="external-link" @icon="up-right-from-square" />
         </a>
       {{else}}
         <LinkTo class="pix-banner__action" @route={{@actionUrl}}>{{@actionLabel}}</LinkTo>

package/addon/components/pix-banner.js

@@ -16,9 +16,9 @@ const types = [
 ];
 
 const icons = {
-  [TYPE_INFO]: 'info-circle',
-  [TYPE_ERROR]: 'exclamation-triangle',
-  [TYPE_WARNING]: 'exclamation-circle',
+  [TYPE_INFO]: 'circle-info',
+  [TYPE_ERROR]: 'triangle-exclamation',
+  [TYPE_WARNING]: 'circle-exclamation',
   [TYPE_COMMUNICATION]: 'bullhorn',
   [TYPE_COMMUNICATION_ORGA]: 'bullhorn',
   [TYPE_COMMUNICATION_CERTIF]: 'bullhorn',

package/addon/components/pix-checkbox.hbs

@@ -0,0 +1,14 @@
+<div class="pix-checkbox">
+  <label
+    class="pix-checkbox__label {{this.labelSizeClass}} {{if @screenReaderOnly 'sr-only'}}"
+    for={{this.id}}
+  >
+    {{this.label}}
+  </label>
+  <input
+    id={{this.id}}
+    type="checkbox"
+    class="pix-checkbox__input {{if @isIndeterminate ' pix-checkbox__input--indeterminate'}}"
+    ...attributes
+  />
+</div>

package/addon/components/pix-checkbox.js

@@ -0,0 +1,30 @@
+import Component from '@glimmer/component';
+import { htmlSafe } from '@ember/string';
+
+const labelSizeToClass = new Map([
+  ['small', 'pix-checkbox__label--small'],
+  ['default', 'pix-checkbox__label--default'],
+  ['large', 'pix-checkbox__label--large'],
+]);
+
+export default class PixCheckbox extends Component {
+  constructor() {
+    super(...arguments);
+
+    if (!this.args.label) {
+      throw new Error('ERROR in PixCheckbox component, you must provide @label params');
+    }
+    this.label = htmlSafe(this.args.label);
+  }
+
+  get id() {
+    if (!this.args.id || !this.args.id.toString().trim()) {
+      throw new Error('ERROR in PixCheckbox component, @id param is not provided');
+    }
+    return this.args.id;
+  }
+
+  get labelSizeClass() {
+    return labelSizeToClass.get(this.args.labelSize);
+  }
+}

package/addon/components/pix-dropdown.hbs

@@ -33,7 +33,7 @@
         aria-label={{@clearLabel}}
         {{on "click" this.clearSelection}}
       >
-        <FaIcon @icon="times" />
+        <FaIcon @icon="xmark" />
       </button>
     {{/if}}
 
@@ -62,7 +62,7 @@
 
     {{#if @isSearchable}}
       <div class="pix-dropdown__menu--search">
-        <FaIcon class="pix-dropdown__menu--search-icon" @icon="search" />
+        <FaIcon class="pix-dropdown__menu--search-icon" @icon="magnifying-glass" />
         <label
           class="pix-dropdown__menu--search-input-label"
           for={{this.searchInputId}}

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

@@ -23,7 +23,7 @@
             @size="small"
             @triggerAction={{@onClearFilters}}
           >
-            <FaIcon class="pix-filter-banner-button__icon" @icon="trash-alt" @prefix="far" />
+            <FaIcon class="pix-filter-banner-button__icon" @icon="trash-can" @prefix="far" />
             {{@clearFiltersLabel}}
           </PixButton>
         </div>

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

@@ -42,7 +42,7 @@
     />
 
     {{#if @errorMessage}}
-      <FaIcon @icon="times" class="pix-input-password__error-icon" />
+      <FaIcon @icon="xmark" class="pix-input-password__error-icon" />
     {{/if}}
   </div>
 

package/addon/components/pix-input.hbs

@@ -26,7 +26,7 @@
     />
 
     {{#if @errorMessage}}
-      <FaIcon @icon="times" class="pix-input__error-icon" />
+      <FaIcon @icon="xmark" class="pix-input__error-icon" />
     {{/if}}
   </div>
 

package/addon/components/pix-message.js

@@ -19,11 +19,11 @@ export default class PixMessage extends Component {
 
   get iconClass() {
     const classes = {
-      [TYPE_INFO]: 'info-circle',
-      [TYPE_SUCCESS]: 'check-circle',
-      [TYPE_WARNING]: 'exclamation-circle',
-      [TYPE_ALERT]: 'exclamation-triangle',
-      [TYPE_ERROR]: 'exclamation-triangle',
+      [TYPE_INFO]: 'circle-info',
+      [TYPE_SUCCESS]: 'circle-check',
+      [TYPE_WARNING]: 'circle-exclamation',
+      [TYPE_ALERT]: 'triangle-exclamation',
+      [TYPE_ERROR]: 'triangle-exclamation',
     };
     return classes[this.type];
   }

package/addon/components/pix-modal.hbs

@@ -10,7 +10,7 @@
     <header class="pix-modal__header">
       <h1 id="modal-title" class="pix-modal__title">{{@title}}</h1>
       <PixIconButton
-        @icon="times"
+        @icon="xmark"
         @triggerAction={{@onCloseButtonClick}}
         @ariaLabel="Fermer"
         @size="small"

package/addon/components/pix-multi-select.hbs

@@ -8,7 +8,7 @@
     <label class="pix-multi-select-header {{if this.isBig 'pix-multi-select-header--big'}}">
 
       <span class="pix-multi-select-header__title">{{@title}}</span>
-      <FaIcon @icon="search" class="pix-multi-select-header__search-icon" />
+      <FaIcon @icon="magnifying-glass" class="pix-multi-select-header__search-icon" />
 
       <input
         id={{@id}}

package/addon/styles/_colors.scss

@@ -14,7 +14,7 @@ $pix-primary-80: #000e87;
 
 // Secondary
 $pix-secondary-5: #fff9e6;
-$pix-secondary-10: #ffeeb3;
+$pix-secondary-10: #fff1c5;
 $pix-secondary-20: #ffe381;
 $pix-secondary: #ffd235;
 $pix-secondary-40: #ffbe00;
@@ -75,7 +75,7 @@ $pix-warning-30: #ffd235;
 $pix-warning-40: #ffbe00;
 $pix-warning-50: #eaa600;
 $pix-warning-60: #ce8900;
-$pix-warning-70: #ac6a00;
+$pix-warning-70: #a95800;
 $pix-warning-80: #874d00;
 
 // Error
@@ -489,20 +489,20 @@ $yellow-alert-dark: #a95800;
 /**
  * @deprecated
  *-To style text or border : $pix-error-70
- *-To style background : $pix-error-10
+ *-To style background : $pix-error-5
  */
 $error: #ff4b00;
 
 /**
  * @deprecated
  *-To style text or border : $pix-success-70
- *-To style background : $pix-success-10
+ *-To style background : $pix-success-5
  */
 $success: #57c884;
 
 /**
  * @deprecated
- *-To style text or border : $pix-warning-60
- *-To style background : $pix-warning-10
+ *-To style text or border : $pix-warning-70
+ *-To style background : $pix-warning-5
  */
 $warning: #ffbe00;

package/addon/styles/_pix-banner.scss

@@ -36,17 +36,17 @@
   }
 
   &--information {
-    background-color: $pix-primary-10;
+    background-color: $pix-primary-5;
     color: $pix-primary-70;
   }
 
   &--warning {
-    background-color: $pix-warning-10;
-    color: $pix-warning-60;
+    background-color: $pix-warning-5;
+    color: $pix-warning-70;
   }
 
   &--error {
-    background-color: $pix-error-10;
+    background-color: $pix-error-5;
     color: $pix-error-70;
   }
 

package/addon/styles/_pix-checkbox.scss

@@ -0,0 +1,77 @@
+.pix-checkbox {
+  @import 'reset-css';
+  display: flex;
+  align-items: center;
+  display: flex;
+  flex-direction: row-reverse;
+
+  label, input {
+    cursor: pointer;
+  }
+
+  &__label {
+    color: $pix-neutral-70;
+    @include text;
+
+    &--small {
+      @include text-small;
+    }
+    &--default {
+      @include text;
+    }
+    &--large {
+      @include text-large;
+    }
+  }
+
+  &__input {
+    appearance: none;
+    margin: 0 10px;
+    min-width: 18px;
+    min-height: 18px;
+    border: 1.2px solid $pix-neutral-90;
+    border-radius: 2px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover, &:focus {
+      box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 6px $pix-neutral-15;
+    }
+
+    &:active {
+      box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 6px $pix-neutral-22;
+    }
+
+    &:checked {
+      background: $pix-primary border-box;
+      border-color: $pix-primary;
+
+      &::after {
+        content: '';
+        background-image: url("data:image/svg+xml,%3Csvg width='13' height='10' viewBox='0 0 13 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 3L0 4.5L5 9.5L13 1.5L11.5 0L5 6.5L1.5 3Z' fill='white'/%3E%3C/svg%3E%0A");
+        background-repeat: no-repeat;
+        background-position: center;
+        width: 16px;
+        height: 16px;
+
+      }
+    }
+
+    &.pix-checkbox__input--indeterminate {
+      &:checked {
+        background: $pix-neutral-60 border-box;
+        border-color: $pix-neutral-60;
+
+        &::after {
+          content: '';
+          background-image: url("data:image/svg+xml,%3Csvg width='10' height='2' viewBox='0 0 10 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='10' height='2' fill='white'/%3E%3C/svg%3E%0A");
+          background-repeat: no-repeat;
+          background-position: center;
+          width: 16px;
+          height: 16px;
+        }
+      }
+    }
+  }
+}

package/addon/styles/_pix-message.scss

@@ -10,23 +10,23 @@
 
   &.pix-message--info {
     color: $pix-primary-70;
-    background-color: $pix-primary-10;
+    background-color: $pix-primary-5;
   }
   &.pix-message--alert {
     color: $pix-error-70;
-    background-color: $pix-error-10;
+    background-color: $pix-error-5;
   }
   &.pix-message--error {
     color: $pix-error-70;
-    background-color: $pix-error-10;
+    background-color: $pix-error-5;
   }
   &.pix-message--success {
     color: $pix-success-70;
-    background-color: $pix-success-10;
+    background-color: $pix-success-5;
   }
   &.pix-message--warning {
-    color: $pix-warning-60;
-    background-color: $pix-warning-10;
+    color: $pix-warning-70;
+    background-color: $pix-warning-5;
   }
 
   svg {

package/addon/styles/addon.scss

@@ -26,6 +26,7 @@
 @import 'pix-selectable-tag';
 @import 'pix-dropdown';
 @import 'pix-pagination';
+@import 'pix-checkbox';
 
 html {
   font-size: 16px;

package/app/components/pix-checkbox.js

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

package/app/stories/form.stories.js

@@ -67,6 +67,10 @@ export const form = (args) => {
       />
       <br>
 
+      <PixCheckbox @id="spam-pub" @labelSize="small" @label="Acceptez-vous de vous faire spammer de PUB ?" />
+
+      <br><br>
+
       <div class="pix-form__actions">
         <PixButton @triggerAction={{cancel}} @backgroundColor="transparent-light" @isBorderVisible={{true}}>
           Annuler

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

@@ -0,0 +1,88 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export const Template = (args) => {
+  return {
+    template: hbs`
+      <PixCheckbox
+        @id={{id}}
+        @label={{label}}
+        @screenReaderOnly={{screenReaderOnly}}
+        @isIndeterminate={{isIndeterminate}}
+        @labelSize={{labelSize}}
+      />
+    `,
+    context: args,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  id: 'acceptNewsletter',
+  label: 'Recevoir la newsletter',
+};
+
+export const indeterminateCheckbox = Template.bind({});
+indeterminateCheckbox.args = {
+  id: 'acceptNewsletter2',
+  label: 'Recevoir la newsletter',
+  isIndeterminate: true,
+};
+
+export const checkboxWithSmallLabel = Template.bind({});
+checkboxWithSmallLabel.args = {
+  id: 'acceptNewsletter2',
+  label: 'Recevoir la newsletter',
+  labelSize: 'small',
+};
+
+export const checkboxWithLargeLabel = Template.bind({});
+checkboxWithLargeLabel.args = {
+  id: 'acceptNewsletter2',
+  label: 'Recevoir la newsletter',
+  labelSize: 'large',
+};
+
+export const argTypes = {
+  id: {
+    name: 'id',
+    description: 'Identifiant du champ permettant de lui attacher un label',
+    type: { name: 'string', required: true },
+    defaultValue: null,
+  },
+  label: {
+    name: 'label',
+    description: "Le label de l'input",
+    type: { name: 'string', required: false },
+    defaultValue: null,
+  },
+  screenReaderOnly: {
+    name: 'screenReaderOnly',
+    description:
+      "Permet de ne pas afficher le label à l'écran. Sert à garder un label qui sera lisible par les lecteurs d'écran.",
+    type: { name: 'boolean', required: true },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  isIndeterminate: {
+    name: 'isIndeterminate',
+    description:
+      "Rendre la checkbox indéterminée, état indiquant que la/les case(s) n'est/ne sont ni cochée(s) ni décochée(s) (exemple: une checkbox parente indiquant la sélection partielle de plusieurs checkbox enfants)",
+    type: { name: 'boolean', required: true },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  labelSize: {
+    name: 'labelSize',
+    description: 'Correspond à la taille de la police du label.',
+    type: { name: 'string', required: false },
+    defaultValue: { summary: 'default' },
+    control: {
+      type: 'select',
+      options: ['small', 'default', 'large'],
+    },
+  },
+};

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

@@ -0,0 +1,50 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+
+import * as stories from './pix-checkbox.stories.js';
+
+<Meta
+  title='Form/Checkbox'
+  component='PixCheckbox'
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# PixCheckbox
+
+La PixCheckbox permet de créer des checkbox basiques ou des checkbox mixées (checkbox servant d'indicateur lors d'une sélection multiple).
+
+<Canvas>
+  <Story name='Default' story={stories.Default} height={60} />
+</Canvas>
+
+## Checkbox indéterminée
+<Canvas>
+  <Story name='Indeterminate' story={stories.indeterminateCheckbox} height={60} />
+</Canvas>
+
+## Checkbox avec un petit label
+<Canvas>
+  <Story name='SmallLabel' story={stories.checkboxWithSmallLabel} height={60} />
+</Canvas>
+
+## Checkbox avec un grand label
+<Canvas>
+  <Story name='LargeLabel' story={stories.checkboxWithLargeLabel} height={60} />
+</Canvas>
+
+## Usage
+
+```html
+<PixCheckbox
+  @id="superId"
+  @label="Recevoir la newsletter"
+  @screenReaderOnly={{false}}
+  @isIndeterminate={{false}}
+  @labelSize="small"
+/>
+```
+
+## Arguments
+
+<ArgsTable story="Default" />

package/app/stories/pix-icon-button.stories.js

@@ -20,7 +20,7 @@ const Template = (args) => {
 export const Default = Template.bind({});
 Default.args = {
   ariaLabel: 'Action du bouton',
-  icon: 'times',
+  icon: 'xmark',
   triggerAction: () => {
     return new Promise().resolves();
   },
@@ -43,13 +43,12 @@ export const argTypes = {
     name: 'ariaLabel',
     description: "l'action du bouton, pour l'accessibilité",
     type: { name: 'string', required: true },
-    table: { defaultValue: { summary: 'times' } },
   },
   icon: {
     name: 'icon',
     description: 'Icône font-awesome',
     type: { name: 'string', required: true },
-    table: { defaultValue: { summary: 'times' } },
+    table: { defaultValue: { summary: 'plus' } },
   },
   iconPrefix: {
     name: 'iconPrefix',

package/app/stories/pix-icon-button.stories.mdx

@@ -81,7 +81,7 @@ Bouton d'action
 ```html
 <PixIconButton
     @ariaLabel="L'action du bouton"
-    @icon="times"
+    @icon="xmark"
     disabled={{true}}
     aria-disabled={{true}}
 />

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

@@ -38,7 +38,7 @@ const TemplateWithHTMLElement = (args) => {
         </:triggerElement>
 
         <:tooltip>
-          <FaIcon @icon="external-link-alt" /> <strong>HTML/Ember</strong>
+          <FaIcon @icon="up-right-from-square" /> <strong>HTML/Ember</strong>
         </:tooltip>
       </PixTooltip>
     `,

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

@@ -37,7 +37,7 @@ Si vous utilisez un élément `<div>` ou `<span>`, il faut ajouter `tabindex="0"
 </PixTooltip>
 ```
 
-Les tooltips doivent prendre un `@id` et être référencées par leur élément déclencheur 
+Les tooltips doivent prendre un `@id` et être référencées par leur élément déclencheur
 
 - soit via `aria-describedby` si l'élément possèdent déjà un label, car le tooltip agit alors comme une description supplémentaire.
 
@@ -131,7 +131,7 @@ Infobulle contenant des éléments HTML
     <button>Tooltip par défaut</button>
   </:triggerElement>
   <:tooltip>
-    <FaIcon @icon="external-link-alt" /> Avec des <strong>éléments</strong> HTML/Ember
+    <FaIcon @icon="up-right-from-square" /> Avec des <strong>éléments</strong> HTML/Ember
   </:tooltip>
 </PixTooltip>
 

package/docs/colors-palette.stories.mdx

@@ -33,7 +33,7 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
     title="Pix Secondary"
     subtitle="$pix-secondary-"
     colors={{ 5: '#fff9e6',
-             10: '#ffeeb3',
+             10: '#fff1c5',
              20: '#ffe381',
              Secondary: '#ffd235',
              40: '#ffbe00',
@@ -104,7 +104,7 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
             40: '#ffbe00',
             50: '#eaa600',
             60: '#ce8900',
-            70: '#ac6a00',
+            70: '#a95800',
             80: '#874d00'}}
   />
   <ColorItem

package/docs/design-tokens.stories.mdx

@@ -38,23 +38,23 @@ Les couleurs pour définir un état d'une alerte ont été attribuées pour unif
 ### Success
 ```
 Texte ou bordure : $pix-success-70
-Background : $pix-success-10
+Background : $pix-success-5
 ```
 
 ### Warning
 ```
-Texte ou bordure : $pix-warning-60
-Background : $pix-warning-10
+Texte ou bordure : $pix-warning-70
+Background : $pix-warning-5
 ```
 
 ### Error
 ```
 Texte ou bordure : $pix-error-70
-Background : $pix-error-10
+Background : $pix-error-5
 ```
 
 ### Information
 ```
 Texte ou bordure : $pix-primary-70
-Background : $pix-primary-10
+Background : $pix-primary-5
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "15.0.2",
+  "version": "17.0.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -58,8 +58,8 @@
     "@ember/test-helpers": "^2.6.0",
     "@formatjs/intl": "^2.1.0",
     "@fortawesome/ember-fontawesome": "^0.2.3",
-    "@fortawesome/free-regular-svg-icons": "^5.15.4",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
     "@storybook/addon-a11y": "^6.3.7",