@1024pix/pix-ui 48.9.0 → 49.0.0

package/addon/components/{pix-collapsible.hbs → pix-accordions.hbs}

@@ -1,18 +1,18 @@
-<div class="pix-collapsible">
+<div class="pix-accordions">
 
   <button
-    class="pix-collapsible__title"
+    class="pix-accordions__title"
     type="button"
-    {{on "click" this.toggleCollapsible}}
+    {{on "click" this.toggleAccordions}}
     aria-controls={{this.contentId}}
     aria-expanded={{if this.isUnCollapsed "true" "false"}}
     ...attributes
   >
 
-    <span class="pix-collapsible-title__container">
+    <span class="pix-accordions-title__container">
       {{#if @iconName}}
         <PixIcon
-          class="pix-collapsible-title__icon"
+          class="pix-accordions-title__icon"
           @name={{@iconName}}
           @plainIcon={{@plainIcon}}
           @ariaHidden={{true}}
@@ -22,14 +22,14 @@
       {{yield to="title"}}
     </span>
 
-    <span class="pix-collapsible-title__container">
+    <span class="pix-accordions-title__container">
       {{#if @tagContent}}
         <PixTag @color={{@tagColor}}>
           {{@tagContent}}
         </PixTag>
       {{/if}}
       <PixIcon
-        class="pix-collapsible-title-container__toggle-icon"
+        class="pix-accordions-title-container__toggle-icon"
         @ariaHidden={{true}}
         @name="{{if this.isCollapsed 'chevronBottom' 'chevronTop'}}"
       />
@@ -38,7 +38,7 @@
 
   <div
     id={{this.contentId}}
-    class="pix-collapsible__content"
+    class="pix-accordions__content"
     aria-hidden={{if this.isCollapsed "true" "false"}}
   >
     {{#if this.isContentRendered}}

package/addon/components/{pix-collapsible.js → pix-accordions.js}

@@ -3,9 +3,9 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 
-export default class PixCollapsible extends Component {
-  text = 'pix-collapsible';
-  contentId = 'pix-collapsible-' + guidFor(this);
+export default class PixAccordions extends Component {
+  text = 'pix-accordions';
+  contentId = 'pix-accordions-' + guidFor(this);
 
   @tracked isCollapsed = true;
   @tracked hasUnCollapsedOnce = false;
@@ -19,7 +19,7 @@ export default class PixCollapsible extends Component {
   }
 
   @action
-  toggleCollapsible() {
+  toggleAccordions() {
     this.isCollapsed = !this.isCollapsed;
     this.hasUnCollapsedOnce = true;
   }

package/addon/components/{pix-banner.hbs → pix-banner-alert.hbs}

@@ -1,17 +1,17 @@
 {{#if this.displayBanner}}
-  <div class="pix-banner pix-banner--{{this.type}}" role="alert" ...attributes>
+  <div class="pix-banner-alert pix-banner-alert--{{this.type}}" role="alert" ...attributes>
     <PixIcon
       @name={{this.icon}}
       @plainIcon={{true}}
       @ariaHidden={{true}}
-      class="pix-banner__icon"
+      class="pix-banner-alert__icon"
     />
     <div>
       {{yield}}
       {{#if this.displayAction}}
         {{#if this.isExternalLink}}
           <a
-            class="pix-banner__action"
+            class="pix-banner-alert__action"
             href={{@actionUrl}}
             target="_blank"
             rel="noopener noreferrer"
@@ -20,12 +20,12 @@
             <PixIcon @name="openNew" class="external-link" />
           </a>
         {{else}}
-          <LinkTo class="pix-banner__action" @route={{@actionUrl}}>{{@actionLabel}}</LinkTo>
+          <LinkTo class="pix-banner-alert__action" @route={{@actionUrl}}>{{@actionLabel}}</LinkTo>
         {{/if}}
       {{/if}}
     </div>
     {{#if this.canCloseBanner}}
-      <div class="pix-banner__close">
+      <div class="pix-banner-alert__close">
         <PixIconButton
           @ariaLabel="Fermer"
           @iconName="close"

package/addon/components/{pix-banner.js → pix-banner-alert.js}

@@ -26,7 +26,7 @@ const icons = {
   [TYPE_COMMUNICATION_CERTIF]: 'campaign',
 };
 
-export default class PixBanner extends Component {
+export default class PixBannerAlert extends Component {
   @tracked isBannerVisible = true;
   get type() {
     return types.includes(this.args.type) ? this.args.type : TYPE_INFO;

package/addon/components/pix-notification-alert.hbs

@@ -0,0 +1,13 @@
+<p class="pix-notification-alert {{concat 'pix-notification-alert--' this.type}}" ...attributes>
+  {{#if @withIcon}}
+    <PixIcon
+      @name={{this.iconName}}
+      @ariaHidden={{true}}
+      @plainIcon={{true}}
+      class="pix-notification-alert__icon"
+    />
+  {{/if}}
+  <span class="pix-notification-alert__content">
+    {{yield}}
+  </span>
+</p>

package/addon/components/{pix-message.js → pix-notification-alert.js}

@@ -5,7 +5,7 @@ const TYPE_SUCCESS = 'success';
 const TYPE_WARNING = 'warning';
 const TYPE_ERROR = 'error';
 
-export default class PixMessage extends Component {
+export default class PixNotificationAlert extends Component {
   get type() {
     const correctTypes = [TYPE_INFO, TYPE_SUCCESS, TYPE_WARNING, TYPE_ERROR];
 

package/addon/components/{pix-progress-gauge.hbs → pix-progress-bar.hbs}

@@ -1,19 +1,19 @@
 <div
-  class="progress-gauge {{this.themeMode}} {{this.colorClass}}"
+  class="progress-bar {{this.themeMode}} {{this.colorClass}}"
   aria-hidden={{if @isDecorative "true"}}
   ...attributes
 >
   {{#unless @hidePercentage}}
-    <div class="progress-gauge__text" role="presentation">{{this.percentageValue}}</div>
+    <div class="progress-bar__text" role="presentation">{{this.percentageValue}}</div>
   {{/unless}}
   <label for={{this.id}} class="screen-reader-only">{{@label}}</label>
   <progress
-    class="progress-gauge__bar"
+    class="progress-bar__bar"
     id={{this.id}}
     max="100"
     value={{this.value}}
   >{{this.value}}%</progress>
   {{#if @subtitle}}
-    <p class="progress-gauge__sub-title">{{@subtitle}}</p>
+    <p class="progress-bar__sub-title">{{@subtitle}}</p>
   {{/if}}
 </div>

package/addon/components/{pix-progress-gauge.js → pix-progress-bar.js}

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { guidFor } from '@ember/object/internals';
 
-export default class PixProgressGauge extends Component {
+export default class PixProgressBar extends Component {
   get id() {
     return guidFor(this);
   }
@@ -10,7 +10,7 @@ export default class PixProgressGauge extends Component {
     if (Number(this.args.value) <= 0) return 0;
     if (Number(this.args.value) > 100) return 100;
     if (!this.args.value) {
-      throw new Error('ERROR in PixProgressGauge component, @value param is not provided.');
+      throw new Error('ERROR in PixProgressBar component, @value param is not provided.');
     }
     return Number(this.args.value);
   }
@@ -23,7 +23,7 @@ export default class PixProgressGauge extends Component {
     const thereIsNoLabel = !this.args.label || !this.args.label.trim();
 
     if (thereIsNoLabel && !this.args.isDecorative) {
-      throw new Error('ERROR in PixProgressGauge component, @label param is not provided.');
+      throw new Error('ERROR in PixProgressBar component, @label param is not provided.');
     }
     return this.args.label;
   }
@@ -36,7 +36,7 @@ export default class PixProgressGauge extends Component {
         ? this.args.themeMode
         : 'light';
 
-    return `progress-gauge--theme-${themeMode}`;
+    return `progress-bar--theme-${themeMode}`;
   }
 
   get colorClass() {
@@ -53,6 +53,6 @@ export default class PixProgressGauge extends Component {
     const color =
       this.args.color && availableColor.includes(this.args.color) ? this.args.color : 'primary';
 
-    return `progress-gauge--content-${color}`;
+    return `progress-bar--content-${color}`;
   }
 }

package/addon/components/{pix-toggle.hbs → pix-toggle-button.hbs}

@@ -7,16 +7,16 @@
     @inlineLabel={{@inlineLabel}}
   >{{yield to="label"}}</PixLabel>
   <button
-    class="pix-toggle__button{{if @useIcons ' pix-toggle__button--icon'}}"
+    class="pix-toggle-button__button{{if @useIcons ' pix-toggle-button__button--icon'}}"
     id={{this.id}}
     aria-pressed={{if @toggled "true" "false"}}
     type="button"
     {{on "click" this.onToggle}}
   >
-    <span class="pix-toggle__on{{if @useIcons ' pix-toggle__with-icon'}}">
+    <span class="pix-toggle-button__on{{if @useIcons ' pix-toggle-button__with-icon'}}">
       {{yield to="on"}}
     </span>
-    <span class="pix-toggle__off{{if @useIcons ' pix-toggle__with-icon'}}">
+    <span class="pix-toggle-button__off{{if @useIcons ' pix-toggle-button__with-icon'}}">
       {{yield to="off"}}
     </span>
   </button>

package/addon/components/{pix-toggle.js → pix-toggle-button.js}

@@ -2,15 +2,15 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 
-export default class PixToggle extends Component {
+export default class PixToggleButton extends Component {
   get className() {
-    const classes = ['pix-toggle'];
+    const classes = ['pix-toggle-button'];
     if (this.args.toggled) {
-      classes.push('pix-toggle--pressed');
+      classes.push('pix-toggle-button--pressed');
     }
 
     if (this.args.inlineLabel) {
-      classes.push('pix-toggle--inline');
+      classes.push('pix-toggle-button--inline');
     }
 
     return classes.join(' ');

package/addon/styles/{_pix-collapsible.scss → _pix-accordions.scss}

@@ -1,15 +1,15 @@
-.pix-collapsible {
+.pix-accordions {
   background-color: var(--pix-neutral-0);
   border: 1px solid var(--pix-neutral-100);
 
   &:first-child,
-  &:first-child .pix-collapsible__title {
+  &:first-child .pix-accordions__title {
     border-top-left-radius: 0.5rem;
     border-top-right-radius: 0.5rem;
   }
 
   &:last-child,
-  &:last-child .pix-collapsible__title:not([aria-expanded='true']) {
+  &:last-child .pix-accordions__title:not([aria-expanded='true']) {
     border-bottom-right-radius: 0.5rem;
     border-bottom-left-radius: 0.5rem;
   }
@@ -28,7 +28,7 @@
   }
 }
 
-.pix-collapsible__title {
+.pix-accordions__title {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -50,7 +50,7 @@
   }
 }
 
-.pix-collapsible-title {
+.pix-accordions-title {
   &__container {
     display: flex;
     align-items: center;
@@ -62,7 +62,7 @@
   }
 }
 
-.pix-collapsible-title-container {
+.pix-accordions-title-container {
 
   &__toggle-icon {
     margin-left: var(--pix-spacing-2x);
@@ -70,11 +70,11 @@
   }
 }
 
-.pix-collapsible__title:hover .pix-collapsible-title__toggle-icon {
+.pix-accordions__title:hover .pix-accordions-title__toggle-icon {
   background-color: var(--pix-neutral-100);
 }
 
-.pix-collapsible__content {
+.pix-accordions__content {
   padding: var(--pix-spacing-4x);
   color: var(--pix-neutral-500);
   font-size: 0.875rem;

package/addon/styles/{_pix-banner.scss → _pix-banner-alert.scss}

@@ -1,4 +1,4 @@
-.pix-banner {
+.pix-banner-alert {
   display: flex;
   gap: var(--pix-spacing-2x);
   align-items: center;

package/addon/styles/{_pix-message.scss → _pix-notification-alert.scss}

@@ -1,4 +1,4 @@
-.pix-message {
+.pix-notification-alert {
   @extend %pix-body-s;
 
   display: flex;
@@ -10,27 +10,27 @@
   border: 1px solid currentcolor;
   border-radius: var(--pix-spacing-1x);
 
-  &.pix-message--info {
+  &.pix-notification-alert--info {
     color: var(--pix-info-700);
     background-color: var(--pix-info-50);
   }
 
-  &.pix-message--alert {
+  &.pix-notification-alert--alert {
     color: var(--pix-error-700);
     background-color: var(--pix-error-50);
   }
 
-  &.pix-message--error {
+  &.pix-notification-alert--error {
     color: var(--pix-error-700);
     background-color: var(--pix-error-50);
   }
 
-  &.pix-message--success {
+  &.pix-notification-alert--success {
     color: var(--pix-success-700);
     background-color: var(--pix-success-50);
   }
 
-  &.pix-message--warning {
+  &.pix-notification-alert--warning {
     color: var(--pix-warning-700);
     background-color: var(--pix-warning-50);
   }

package/addon/styles/{_pix-progress-gauge.scss → _pix-progress-bar.scss}

@@ -1,4 +1,4 @@
-.progress-gauge {
+.progress-bar {
   position: relative;
   display: grid;
   grid-template-areas:
@@ -60,68 +60,68 @@
 }
 
 // THEME DARK
-.progress-gauge--theme-dark {
-  .progress-gauge__bar {
+.progress-bar--theme-dark {
+  .progress-bar__bar {
     border: 2px solid var(--pix-neutral-0);
   }
 
-  .progress-gauge__bar::-webkit-progress-bar {
+  .progress-bar__bar::-webkit-progress-bar {
     background-color: var(--pix-neutral-0);
   }
 
-  .progress-gauge__text,
-  .progress-gauge__sub-title {
+  .progress-bar__text,
+  .progress-bar__sub-title {
     color: var(--pix-neutral-0);
   }
 }
 
 // SPECIFIC BAR COLORS
-.progress-gauge--content-blue, .progress-gauge--content-primary {
-  .progress-gauge__bar::-webkit-progress-value {
+.progress-bar--content-blue, .progress-bar--content-primary {
+  .progress-bar__bar::-webkit-progress-value {
     background-color: var(--pix-primary-500);
   }
 
-  .progress-gauge__bar::-moz-progress-bar {
+  .progress-bar__bar::-moz-progress-bar {
     background-color: var(--pix-primary-500);
   }
 
-  &:not(.progress-gauge--theme-dark) {
-    .progress-gauge__text,
-    .progress-gauge__sub-title {
+  &:not(.progress-bar--theme-dark) {
+    .progress-bar__text,
+    .progress-bar__sub-title {
       color: var(--pix-primary-500);
     }
   }
 }
 
-.progress-gauge--content-green, .progress-gauge--content-success {
-  .progress-gauge__bar::-webkit-progress-value {
+.progress-bar--content-green, .progress-bar--content-success {
+  .progress-bar__bar::-webkit-progress-value {
     background-color: var(--pix-success-700);
   }
 
-  .progress-gauge__bar::-moz-progress-bar {
+  .progress-bar__bar::-moz-progress-bar {
     background-color: var(--pix-success-700);
   }
 
-  &:not(.progress-gauge--theme-dark) {
-    .progress-gauge__text,
-    .progress-gauge__sub-title {
+  &:not(.progress-bar--theme-dark) {
+    .progress-bar__text,
+    .progress-bar__sub-title {
       color: var(--pix-success-700);
     }
   }
 }
 
-.progress-gauge--content-purple, .progress-gauge--content-tertiary {
-  .progress-gauge__bar::-webkit-progress-value {
+.progress-bar--content-purple, .progress-bar--content-tertiary {
+  .progress-bar__bar::-webkit-progress-value {
     background-color: var(--pix-tertiary-900);
   }
 
-  .progress-gauge__bar::-moz-progress-bar {
+  .progress-bar__bar::-moz-progress-bar {
     background-color: var(--pix-tertiary-900);
   }
 
-  &:not(.progress-gauge--theme-dark) {
-    .progress-gauge__text,
-    .progress-gauge__sub-title {
+  &:not(.progress-bar--theme-dark) {
+    .progress-bar__text,
+    .progress-bar__sub-title {
       color: var(--pix-tertiary-900);
     }
   }

package/addon/styles/{_pix-toggle.scss → _pix-toggle-button.scss}

@@ -1,4 +1,4 @@
-.pix-toggle {
+.pix-toggle-button {
   display: inline-flex;
   flex-direction: column;
   gap: var(--pix-spacing-1x);
@@ -48,7 +48,7 @@
   }
 
   &--pressed {
-    .pix-toggle {
+    .pix-toggle-button {
       &__on {
         color: var(--pix-neutral-20);
         font-weight: inherit;

package/addon/styles/addon.scss

@@ -3,16 +3,16 @@
 @import 'a11y';
 @import 'pix-icon';
 @import 'pix-background-header';
-@import 'pix-banner';
+@import 'pix-banner-alert';
 @import 'pix-block';
 @import 'pix-button-base';
 @import 'pix-button';
-@import 'pix-collapsible';
+@import 'pix-accordions';
 @import 'pix-filter-banner';
 @import 'pix-icon-button';
-@import 'pix-message';
+@import 'pix-notification-alert';
 @import 'pix-multi-select';
-@import 'pix-progress-gauge';
+@import 'pix-progress-bar';
 @import 'pix-return-to';
 @import 'pix-select';
 @import 'pix-select-list';
@@ -32,7 +32,7 @@
 @import 'pix-selectable-tag';
 @import 'pix-pagination';
 @import 'pix-checkbox';
-@import 'pix-toggle';
+@import 'pix-toggle-button';
 @import 'pix-indicator-card';
 @import 'trap-focus';
 @import 'pix-search-input';

package/app/components/pix-accordions.js

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

package/app/components/pix-banner-alert.js

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

package/app/components/pix-notification-alert.js

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

package/app/components/{pix-progress-gauge.js → pix-progress-bar.js}

@@ -1 +1 @@
-export { default } from '@1024pix/pix-ui/components/pix-progress-gauge';
+export { default } from '@1024pix/pix-ui/components/pix-progress-bar';

package/app/components/pix-toggle-button.js

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

package/package.json

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

package/addon/components/pix-message.hbs

@@ -1,13 +0,0 @@
-<p class="pix-message {{concat 'pix-message--' this.type}}" ...attributes>
-  {{#if @withIcon}}
-    <PixIcon
-      @name={{this.iconName}}
-      @ariaHidden={{true}}
-      @plainIcon={{true}}
-      class="pix-message__icon"
-    />
-  {{/if}}
-  <span class="pix-message__content">
-    {{yield}}
-  </span>
-</p>

package/app/components/pix-banner.js

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

package/app/components/pix-collapsible.js

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

package/app/components/pix-message.js

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

package/app/components/pix-toggle.js

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