@1024pix/pix-ui 23.2.1 → 24.0.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Pix-UI Changelog
 
+## v24.0.0 (09/01/2023)
+
+
+### :coffee: Autre
+- [#314](https://github.com/1024pix/pix-ui/pull/314) [BREAKING_CHANGE] Ajouter un normalize/reset css dans Pix UI (pix-6723)
+
+## v23.3.0 (29/12/2022)
+
+
+### :rocket: Amélioration
+- [#307](https://github.com/1024pix/pix-ui/pull/307) [FEATURE] Création du composant carte (PIX-6141).
+
+### :building_construction: Tech
+- [#313](https://github.com/1024pix/pix-ui/pull/313) [TECH] Ne plus ajouter de lien vers la review-app dans la pull-request 
+
 ## v23.2.1 (21/12/2022)
 
 

package/addon/components/pix-indicator-card.hbs

@@ -0,0 +1,45 @@
+<section class="indicator-card" ...attributes>
+  {{#if @isLoading}}
+    <p class="screen-reader-only">{{@loadingMessage}}</p>
+    <div class="indicator-card__icon" aria-hidden="true"></div>
+    <div class="indicator-card__content" aria-hidden="true"></div>
+  {{else}}
+    <div
+      id={{this.iconId}}
+      class="indicator-card__icon"
+      aria-hidden="true"
+      {{did-insert this.setIconColor}}
+    >
+      <FaIcon @icon={{@icon}} />
+    </div>
+    <dl class="indicator-card__content">
+      <div class="indicator-card__title">
+        <dt>{{@title}}</dt>
+        {{#if @info}}
+          <PixTooltip
+            @id={{this.tooltipId}}
+            @position="top"
+            @isWide={{true}}
+            class="indicator-card__tooltip hide-on-mobile"
+          >
+            <:triggerElement>
+              <FaIcon
+                @icon="circle-question"
+                class="indicator-card__tooltip-icon"
+                tabindex="0"
+                aria-describedby={{this.tooltipId}}
+              />
+            </:triggerElement>
+            <:tooltip>
+              {{@info}}
+            </:tooltip>
+          </PixTooltip>
+        {{/if}}
+      </div>
+      <dd class="indicator-card__value">{{yield}}</dd>
+      <p class="indicator-card__sub">
+        {{yield to="sub"}}
+      </p>
+    </dl>
+  {{/if}}
+</section>

package/addon/components/pix-indicator-card.js

@@ -0,0 +1,21 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+import accessibleContrastedColorGenerator from '@1024pix/pix-ui/utils/accessible-contrasted-color-generator';
+
+export default class PixIndicatorCard extends Component {
+  id = guidFor(this);
+  iconId = 'icon-' + this.id;
+  tooltipId = 'tooltip-' + this.id;
+
+  @action
+  setIconColor() {
+    const element = document.getElementById(this.iconId);
+    try {
+      element.style.color = this.args.color;
+      element.style.backgroundColor = accessibleContrastedColorGenerator(this.args.color);
+    } catch (error) {
+      console.error(error.message);
+    }
+  }
+}

package/addon/styles/_pix-banner.scss

@@ -1,5 +1,4 @@
 .pix-banner {
-  @import 'reset-css';
   font-family: $font-roboto;
   font-weight: $font-normal;
   padding: 16px 24px;

package/addon/styles/_pix-button-base.scss

@@ -1,6 +1,4 @@
 .pix-button {
-  @import 'reset-css';
-
   color: $pix-neutral-0;
   font-family: $font-roboto;
   font-size: 0.875rem;

package/addon/styles/_pix-checkbox.scss

@@ -1,5 +1,4 @@
 .pix-checkbox {
-  @import 'reset-css';
   align-items: center;
   display: flex;
 

package/addon/styles/_pix-collapsible.scss

@@ -1,6 +1,4 @@
 .pix-collapsible {
-  @import 'reset-css';
-
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -21,7 +19,6 @@
     border: none;
     color: $pix-neutral-60;
     font-size: 1rem;
-    font-weight: 500;
     align-items: center;
 
     &:hover {

package/addon/styles/_pix-dropdown.scss

@@ -1,5 +1,4 @@
 .pix-dropdown {
-  @import 'reset-css';
   width: 100%;
   position: relative;
 

package/addon/styles/_pix-icon-button.scss

@@ -1,6 +1,4 @@
 .pix-icon-button {
-  @import 'reset-css';
-
   border-radius: 50%;
   cursor: pointer;
   border: none;

package/addon/styles/_pix-indicator-card.scss

@@ -0,0 +1,65 @@
+.indicator-card {
+  display: flex;
+  width: 100%;
+  background-color: $pix-neutral-0;
+  border-radius: 8px;
+  min-height: 112px;
+
+  box-shadow: 0 4px 8px rgba($pix-neutral-110, 0.05);
+  padding: 0;
+
+  &__icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 8px 0 0 8px;
+    background-color: $pix-neutral-20;
+    min-width: 96px;
+    font-size: 2.5rem;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    color: $pix-neutral-60;
+    padding: $spacing-s $spacing-m;
+    margin: 0;
+  }
+
+  &__title {
+    @include text-large();
+    display: flex;
+    align-items: center;
+    font-weight: $font-medium;
+    font-size: 1rem;
+    line-height: 1.375rem;
+    margin-bottom: $spacing-xxs;
+  }
+
+  &__value {
+    font-family: $font-open-sans;
+    font-weight: $font-medium;
+    font-size: 2rem;
+    line-height: 2.5rem;
+    margin: 0;
+    margin-bottom: $spacing-xxs;
+  }
+
+  &__sub {
+    @include text-small();
+    font-weight: $font-normal;
+    display: flex;
+    gap: 10px;
+    margin: 0
+  }
+
+  &__tooltip {
+    font-weight: $font-normal;
+  }
+
+  &__tooltip-icon {
+    color: $pix-neutral-30;
+    margin: 0 $spacing-xs;
+  }
+}

package/addon/styles/_pix-input-code.scss

@@ -1,5 +1,4 @@
 .pix-input-code {
-  @import 'reset-css';
   display: flex;
 
   // hide up/down cursors

package/addon/styles/_pix-input-password.scss

@@ -1,6 +1,4 @@
 .pix-input-password {
-  @import 'reset-css';
-
   display: flex;
   flex-direction: column;
   position: relative;

package/addon/styles/_pix-input.scss

@@ -1,6 +1,4 @@
 .pix-input {
-  @import 'reset-css';
-
   display: flex;
   flex-direction: column;
   position: relative;

package/addon/styles/_pix-message.scss

@@ -1,6 +1,4 @@
 .pix-message {
-  @import 'reset-css';
-
   margin: 0;
   padding: 0.75rem 1rem;
   font-size: 0.875rem;

package/addon/styles/_pix-modal.scss

@@ -35,7 +35,7 @@ $space-between-title-and-close-button: 8px;
 $button-margin: 16px;
 
 .pix-modal {
-  @import 'reset-css';
+  
   display: inline-block;
   vertical-align: middle; // Centered vertically with the .pix-modal__overlay::after which is 100% height
   width: 512px;

package/addon/styles/_pix-return-to.scss

@@ -1,6 +1,4 @@
 .pix-return-to {
-  @import 'reset-css';
-
   font-size: 1rem;
   font-weight: $font-medium;
   letter-spacing: 0.15px;

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

@@ -17,7 +17,6 @@ $checkmark-width-with-space: $checkmark-width + 0.438rem;
 }
 
 .pix-selectable-tag {
-  @import 'reset-css';
   display: inline-block;
   text-align: center;
   position: relative;

package/addon/styles/_pix-sidebar.scss

@@ -22,7 +22,7 @@ $space-between-title-and-close-button: 8px;
 $button-margin: 16px;
 
 .pix-sidebar {
-  @import 'reset-css';
+  
   display: flex;
   flex-direction: column;
   height: 100%;

package/addon/styles/_pix-stars.scss

@@ -1,5 +1,4 @@
 .pix-stars {
-  @import 'reset-css';
   line-height: 0;
 
   > svg {

package/addon/styles/_pix-tag.scss

@@ -1,6 +1,4 @@
 .pix-tag {
-  @import 'reset-css';
-
   display: inline-block;
   text-align: center;
   vertical-align: baseline;

package/addon/styles/_pix-textarea.scss

@@ -1,6 +1,4 @@
 .pix-textarea {
-  @import 'reset-css';
-
   textarea {
     width: 100%;
     border: 1px solid $pix-neutral-40;

package/addon/styles/_pix-tooltip.scss

@@ -1,6 +1,4 @@
 .pix-tooltip {
-  @import 'reset-css';
-
   position: relative;
   display: flex;
   justify-content: center;

package/addon/styles/addon.scss

@@ -1,4 +1,5 @@
 @import 'pix-design-tokens';
+@import 'normalize-reset';
 @import 'a11y';
 @import 'pix-background-header';
 @import 'pix-banner';
@@ -17,7 +18,6 @@
 @import 'pix-tag';
 @import 'pix-textarea';
 @import 'pix-tooltip';
-@import 'pix-button-link';
 @import 'pix-button-upload';
 @import 'pix-input';
 @import 'pix-input-password';
@@ -30,19 +30,8 @@
 @import 'pix-pagination';
 @import 'pix-checkbox';
 @import 'pix-toggle';
+@import 'pix-indicator-card';
 @import 'trap-focus';
 
 // at the end so it can override it's children scss
 @import 'pix-filterable-and-searchable-select';
-
-html {
-  font-size: 16px;
-}
-
-body {
-  font-family: $font-roboto;
-}
-
-* {
-  box-sizing: border-box;
-}

package/addon/styles/normalize-reset/_normalize.scss

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+  
+  /* Sections
+     ========================================================================== */
+  
+  /**
+   * Remove the margin in all browsers.
+   */
+  
+  body {
+    margin: 0;
+  }
+  
+  /**
+   * Render the `main` element consistently in IE.
+   */
+  
+  main {
+    display: block;
+  }
+  
+  /**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+  
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+  
+  /* Grouping content
+     ========================================================================== */
+  
+  /**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+  
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /* Text-level semantics
+     ========================================================================== */
+  
+  /**
+   * Remove the gray background on active links in IE 10.
+   */
+  
+  a {
+    background-color: transparent;
+  }
+  
+  /**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+  
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+  
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+  
+  b,
+  strong {
+    font-weight: bolder;
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /**
+   * Add the correct font size in all browsers.
+   */
+  
+  small {
+    font-size: 80%;
+  }
+  
+  /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+  
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  
+  sub {
+    bottom: -0.25em;
+  }
+  
+  sup {
+    top: -0.5em;
+  }
+  
+  /* Embedded content
+     ========================================================================== */
+  
+  /**
+   * Remove the border on images inside links in IE 10.
+   */
+  
+  img {
+    border-style: none;
+  }
+  
+  /* Forms
+     ========================================================================== */
+  
+  /**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+  
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+  
+  /**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+  
+  button,
+  input { /* 1 */
+    overflow: visible;
+  }
+  
+  /**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+  
+  button,
+  select { /* 1 */
+    text-transform: none;
+  }
+  
+  /**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+  
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+  
+  /**
+   * Remove the inner border and padding in Firefox.
+   */
+  
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+  
+  /**
+   * Restore the focus styles unset by the previous rule.
+   */
+  
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+  
+  /**
+   * Correct the padding in Firefox.
+   */
+  
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+  
+  /**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+  
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
+  
+  /**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+  
+  progress {
+    vertical-align: baseline;
+  }
+  
+  /**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+  
+  textarea {
+    overflow: auto;
+  }
+  
+  /**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+  
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+  
+  /**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+  
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+  
+  /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+  
+  [type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+  
+  /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+  
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  
+  /**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+  
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+  
+  /* Interactive
+     ========================================================================== */
+  
+  /*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+  
+  details {
+    display: block;
+  }
+  
+  /*
+   * Add the correct display in all browsers.
+   */
+  
+  summary {
+    display: list-item;
+  }
+  
+  /* Misc
+     ========================================================================== */
+  
+  /**
+   * Add the correct display in IE 10+.
+   */
+  
+  template {
+    display: none;
+  }
+  
+  /**
+   * Add the correct display in IE 10.
+   */
+  
+  [hidden] {
+    display: none;
+  }

package/addon/styles/normalize-reset/_reset.scss

@@ -0,0 +1,20 @@
+/****** Elad Shechter's RESET *******/
+/*** box sizing border-box for all elements ***/
+html {
+    font-size: 16px;
+  }  
+body {
+    font-family: $font-roboto;
+}
+*,
+*::before,
+*::after{box-sizing:border-box;}
+a{text-decoration:none; color:inherit; cursor:pointer;}
+button{background-color:transparent; color:inherit; border-width:0; padding:0; cursor:pointer;}
+figure{margin:0;}
+input::-moz-focus-inner {border:0; padding:0; margin:0;}
+ul, ol, dd{margin:0; padding:0; list-style:none;}
+h1, h2, h3, h4, h5, h6{margin:0; font-size:inherit; font-weight:inherit;}
+p{margin:0;}
+cite {font-style:normal;}
+fieldset{border-width:0; padding:0; margin:0;}

package/addon/styles/normalize-reset/index.scss

@@ -0,0 +1,2 @@
+@import 'normalize';
+@import 'reset';

package/addon/utils/accessible-contrasted-color-generator.js

@@ -0,0 +1,29 @@
+import Color from 'color';
+
+// See this link that explains why we had to implement lightenBy and darkenBy  https://github.com/Qix-/color/issues/53#issuecomment-487822576
+function lightenBy(color, ratio) {
+  const lightness = color.lightness();
+  return color.lightness(lightness + (100 - lightness) * ratio);
+}
+
+function darkenBy(color, ratio) {
+  const lightness = color.lightness();
+  return color.lightness(lightness - lightness * ratio);
+}
+
+export default function (hex) {
+  const color = Color(hex);
+  let newColor = color;
+  let contrast;
+  do {
+    if (color.luminosity() < 0.5) {
+      newColor = lightenBy(newColor, 0.05);
+    } else {
+      newColor = darkenBy(newColor, 0.05);
+    }
+    contrast = color.contrast(newColor);
+
+    // newColor.luminosity() can return 0.9999..99 when newColor is white but reinstanciating Color with the hexacode #FFFFFF returns 1
+  } while (contrast < 4.5 && Color(newColor.hex()).luminosity() < 1);
+  return newColor.hex();
+}

package/app/components/pix-indicator-card.js

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

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

@@ -1,11 +1,7 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import * as stories from './pix-block.stories.js';
 
-<Meta
-  title='Layout/Block'
-  component='PixBlock'
-  argTypes={stories.argTypes}
-/>
+<Meta title="Layout/Block" component="PixBlock" argTypes={stories.argTypes} />
 
 # Pix Block
 
@@ -21,18 +17,16 @@ Un \`Block\` est un bloc de fond blanc dont les bords sont arrondis et ayant une
   <Story name="Block" story={stories.block} height={60} />
 </Canvas>
 
-
 ## Usage
 
 ```html
 <PixBlock @shadow="light">
-  <div> Un bloc avec une ombre faible </div>
+  <div>Un bloc avec une ombre faible</div>
 </PixBlock>
 
 <PixBlock @shadow="heavy">
-  <div> Un bloc avec une ombre forte </div>
+  <div>Un bloc avec une ombre forte</div>
 </PixBlock>
-
 ```
 
 ## Arguments

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

@@ -9,7 +9,7 @@ export const Template = (args) => {
   @labelSize={{this.labelSize}}
   @checked={{this.checked}}
 >
-  {{label}}
+  {{this.label}}
 </PixCheckbox>`,
     context: args,
   };

package/app/stories/pix-indicator-card.stories.js

@@ -0,0 +1,57 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+const Template = (args) => {
+  return {
+    template: hbs`
+    <div style="min-width:300px">
+      <PixIndicatorCard
+        @title={{this.title}}
+        @color={{this.color}}
+        @icon={{this.icon}}
+        @info={{this.info}}
+        @isLoading={{this.isLoading}}
+        @loadingMessage={{this.loadingMessage}}
+      >
+        <:default>{{this.value}}</:default>
+        <:sub>
+          <span>En cours : 1</span><span>En attente : 2</span><span>Envoyés : 3</span>
+        </:sub>
+      </PixIndicatorCard>
+    </div>`,
+    context: args,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Hello Dedans',
+  color: 'purple',
+  icon: 'circle-question',
+  value: '42',
+  info: "Coucou la bulle d'infos",
+  isLoading: false,
+  loadingMessage: 'texte de chargement ScreenReader',
+};
+
+export const argTypes = {
+  title: {
+    name: 'Title',
+    description: 'Titre de la carte',
+  },
+  color: {
+    name: 'Color',
+    description: "Couleur de l'icone",
+  },
+  icon: {
+    name: 'Icon',
+    description: "Icone dans l'encart",
+  },
+  value: {
+    name: 'Value',
+    description: 'Contenu principal',
+  },
+  info: {
+    name: 'Info',
+    description: "Contenu de la bulle d'info",
+  },
+};

package/app/stories/pix-indicator-card.stories.mdx

@@ -0,0 +1,38 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import * as stories from './pix-indicator-card.stories.js';
+
+<Meta title="Others/Indicator Card" component="PixIndicatorCard" argTypes={stories.argTypes} />
+
+# Pix Indicator Card
+
+Une carte est un bloc en 2 parties dont les bords sont arrondis et ayant une ombre projetée.
+
+> La carte adapte la couleur de fond avec la couleur de l'icone passée en paramètre.
+
+> La carte peut contenir un titre, une tooltip ainsi que des infos complémentaires.
+
+## Default
+
+<Canvas>
+  <Story name="Default" story={stories.Default} height={200} />
+</Canvas>
+
+## Usage
+
+```html
+    <PixIndicatorCard
+      @title={{this.title}}
+      @color={{this.color}}
+      @icon={{this.icon}}
+      @info={{this.info}}
+      @isLoading={{this.isLoading}}
+      @loadingMessage={{this.loadingMessage}}
+    >
+      <:default>{{this.value}}</:default>
+      <:sub>
+        <span>En cours : 1</span><span>En attente : 2</span><span>Envoyés : 3</span>
+      </:sub>
+    </PixIndicatorCard>
+```
+
+<ArgsTable story="Default" />

package/app/stories/pix-multi-select.stories.js

@@ -8,7 +8,7 @@ const Template = (args) => ({
       border : none;
     }
   </style>
-  <h4>⚠️ La sélection des éléments ne fonctionne pas dans Storybook.</h4>
+  <h4><strong>⚠️ La sélection des éléments ne fonctionne pas dans Storybook.</strong></h4>
   {{#if this.id}}
     <div>
       <label for={{this.id}}>Un label en dehors du composant</label>
@@ -54,7 +54,7 @@ Default.args = {
 export const multiSelectWithChildComponent = (args) => {
   return {
     template: hbs`
-      <h4>⚠️ La sélection des éléments ne fonctionne pas dans Storybook.</h4>
+      <h4><strong>⚠️ La sélection des éléments ne fonctionne pas dans Storybook.</strong></h4>
       <PixMultiSelect
         @label={{this.label}}
         @placeholder={{this.placeholder}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "23.2.1",
+  "version": "24.0.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -23,7 +23,7 @@
     "test": "tests"
   },
   "scripts": {
-    "build": "./scripts/build.sh && npm run signal-github",
+    "build": "./scripts/build.sh",
     "build-ember": "ember build --environment=production",
     "build-storybook": "ember build && cp -v CNAME dist && build-storybook -s dist",
     "clean": "rm -rf dist node_modules",
@@ -39,10 +39,10 @@
     "storybook": "ember build && ember serve & start-storybook -p 9001 -s dist",
     "test": "ember test",
     "test:ember": "ember test",
-    "test:ember-compatibility": "ember try:each",
-    "signal-github": "./scripts/signal-deploy-to-pr.sh"
+    "test:ember-compatibility": "ember try:each"
   },
   "dependencies": {
+    "color": "^4.2.3",
     "ember-cli-babel": "^7.26.8",
     "ember-cli-htmlbars": "^6.1.1",
     "ember-cli-sass": "^11.0.1",
@@ -82,6 +82,7 @@
     "core-js": "^3.26.1",
     "ember-auto-import": "^2.5.0",
     "ember-cli": "^4.8.0",
+    "ember-cli-cjs-transform": "^2.0.0",
     "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sri": "^2.1.1",

package/addon/styles/_pix-button-link.scss

@@ -1,3 +0,0 @@
-.pix-button-link {
-  @import 'reset-css';
-}

package/addon/styles/_reset-css.scss

@@ -1,30 +0,0 @@
-ul, ol, li, form, fieldset, legend
-{
-	margin: 0;
-	padding: 0;
-}
-
-h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
-
-fieldset,img { border: 0; }
-
-legend { color: #000; }
-
-li { list-style: none; }
-
-sup { vertical-align: text-top; }
-
-sub { vertical-align: text-bottom; }
-
-table
-{
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-
-caption, th, td
-{
-	text-align: left;
-	vertical-align: top;
-	font-weight: normal;
-}