[FEATURE] Montée de version de PixUI vers la 51.2.0 (PIX-15700)

#10798
1024pix · Dec 13, 2024 · b474fba · b474fba
2 parents c2b2b41 + 7873745
commit b474fba
Show file tree

Hide file tree

Showing 13 changed files with 42 additions and 35 deletions.
diff --git a/orga/app/components/banner/certification.gjs b/orga/app/components/banner/certification.gjs
@@ -1,4 +1,4 @@
-import PixBannerAlert from '@1024pix/pix-ui/components/pix-banner-alert';
+import PixNotificationAlert from '@1024pix/pix-ui/components/pix-notification-alert';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { t } from 'ember-intl';
@@ -21,15 +21,15 @@ export default class InformationBanner extends Component {
 
   <template>
     {{#if this.displayCertificationBanner}}
-      <PixBannerAlert @type="warning">
+      <PixNotificationAlert @type="warning" @withIcon={{true}}>
         {{t
           "banners.certification.message"
           documentationLink="https://cloud.pix.fr/s/DEarDXyxFxM78ps"
           linkClasses="link link--banner link--bold link--underlined"
           htmlSafe=true
           year=this.year
         }}
-      </PixBannerAlert>
+      </PixNotificationAlert>
     {{/if}}
   </template>
 }
diff --git a/orga/app/components/banner/sco-communication.gjs b/orga/app/components/banner/sco-communication.gjs
@@ -1,4 +1,4 @@
-import PixBannerAlert from '@1024pix/pix-ui/components/pix-banner-alert';
+import PixNotificationAlert from '@1024pix/pix-ui/components/pix-notification-alert';
 import { LinkTo } from '@ember/routing';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
@@ -24,7 +24,7 @@ export default class ScommunicationBanner extends Component {
 
   <template>
     {{#if this.shouldDisplayBanner}}
-      <PixBannerAlert @type="communication-orga">
+      <PixNotificationAlert @type="communication-orga" @withIcon={{true}}>
         {{t "banners.import.message"}}
         <ol class="banner-list">
           <li>
@@ -40,7 +40,7 @@ export default class ScommunicationBanner extends Component {
           <li>{{t "banners.import.step2" htmlSafe=true}}</li>
           <li>{{t "banners.import.step3" htmlSafe=true}}</li>
         </ol>
-      </PixBannerAlert>
+      </PixNotificationAlert>
     {{/if}}
   </template>
 }
diff --git a/orga/app/components/banner/survey.gjs b/orga/app/components/banner/survey.gjs
@@ -1,4 +1,4 @@
-import PixBannerAlert from '@1024pix/pix-ui/components/pix-banner-alert';
+import PixNotificationAlert from '@1024pix/pix-ui/components/pix-notification-alert';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { t } from 'ember-intl';
@@ -35,14 +35,14 @@ export default class SurveyBanner extends Component {
 
   <template>
     {{#if this.shouldDisplayBanner}}
-      <PixBannerAlert @type="information">
+      <PixNotificationAlert @type="information" @withIcon={{true}}>
         {{t
           "banners.survey.message"
           documentationLink=ENV.APP.SURVEY_LINK
           linkClasses="link link--banner link--bold link--underlined"
           htmlSafe=true
         }}
-      </PixBannerAlert>
+      </PixNotificationAlert>
     {{/if}}
   </template>
 }
diff --git a/orga/app/components/campaign/filter/campaign-filters.gjs b/orga/app/components/campaign/filter/campaign-filters.gjs
@@ -54,8 +54,8 @@ export default class CampaignFilters extends Component {
 
       <PixToggleButton @toggled={{this.isToggleSwitched}} @onChange={{this.onToggle}} @screenReaderOnly={{true}}>
         <:label>{{t "pages.campaigns-list.action.campaign.label"}}</:label>
-        <:on>{{t "pages.campaigns-list.action.campaign.ongoing"}}</:on>
-        <:off>{{t "pages.campaigns-list.action.campaign.archived"}}</:off>
+        <:viewA>{{t "pages.campaigns-list.action.campaign.ongoing"}}</:viewA>
+        <:viewB>{{t "pages.campaigns-list.action.campaign.archived"}}</:viewB>
       </PixToggleButton>
     </PixFilterBanner>
   </template>

diff --git a/orga/app/components/places/capacity-alert.gjs b/orga/app/components/places/capacity-alert.gjs
@@ -1,11 +1,11 @@
-import PixBannerAlert from '@1024pix/pix-ui/components/pix-banner-alert';
+import PixNotificationAlert from '@1024pix/pix-ui/components/pix-notification-alert';
 import { t } from 'ember-intl';
 import { gt } from 'ember-truth-helpers';
 
 <template>
   {{#if (gt @occupied @total)}}
-    <PixBannerAlert class="capacity-alert" @type="error" @withIcon="true">
+    <PixNotificationAlert class="capacity-alert" @type="error" @withIcon={{true}}>
       {{t "banners.over-capacity.message"}}
-    </PixBannerAlert>
+    </PixNotificationAlert>
   {{/if}}
 </template>
diff --git a/orga/app/components/places/places-lot-alert.gjs b/orga/app/components/places/places-lot-alert.gjs
@@ -1,4 +1,4 @@
-import PixBannerAlert from '@1024pix/pix-ui/components/pix-banner-alert';
+import PixNotificationAlert from '@1024pix/pix-ui/components/pix-notification-alert';
 import dayjs from 'dayjs';
 import { t } from 'ember-intl';
 import { STATUSES } from 'pix-orga/models/organization-places-lot.js';
@@ -29,8 +29,8 @@ function isAlertVisible(placesLots) {
 
 <template>
   {{#if (isAlertVisible @placesLots)}}
-    <PixBannerAlert class="places-lots-alert" @type="warning" @withIcon="true">
+    <PixNotificationAlert class="places-lots-alert" @type="warning" @withIcon="true">
       {{t "banners.last-places-lot-available.message" days=(getCountdDownDays @placesLots)}}
-    </PixBannerAlert>
+    </PixNotificationAlert>
   {{/if}}
 </template>
diff --git a/orga/app/templates/authenticated/missions/list.hbs b/orga/app/templates/authenticated/missions/list.hbs
@@ -1,6 +1,6 @@
 {{page-title (t "pages.missions.title")}}
 
-<PixBannerAlert @type="communication-orga" @withIcon="true" class="mission-list-banner">
+<PixNotificationAlert class="mission-list-banner" @type="communication-orga" @withIcon={{true}}>
   {{t "pages.missions.list.banner.welcome"}}
   <br />
   <ul>
@@ -58,7 +58,7 @@
       <span>{{html-unsafe (t "pages.missions.list.banner.step3")}}</span>
     </li>
   </ul>
-</PixBannerAlert>
+</PixNotificationAlert>
 
 <h1 class="mission-list__title page-title">{{t "pages.missions.title"}}</h1>
 {{#if @model.missions}}

diff --git a/orga/app/templates/authenticated/team/new.hbs b/orga/app/templates/authenticated/team/new.hbs
@@ -5,7 +5,9 @@
   <h1 class="page__title page-title">
     {{t "pages.team-new.title"}}
   </h1>
-  <PixBannerAlert @type="warning" class="new-team-page__warning-banner">{{t "pages.team-new.warning"}}</PixBannerAlert>
+  <PixNotificationAlert @type="warning" class="new-team-page__warning-banner" @withIcon={{true}}>{{t
+      "pages.team-new.warning"
+    }}</PixNotificationAlert>
 
   <p class="paragraph">
     {{t "pages.team-new.email-requirement"}}<br />

diff --git a/orga/package-lock.json b/orga/package-lock.json
diff --git a/orga/package.json b/orga/package.json
@@ -55,7 +55,7 @@
     "@1024pix/ember-matomo-tag-manager": "^2.4.3",
     "@1024pix/ember-testing-library": "^3.0.6",
     "@1024pix/eslint-config": "^1.3.8",
-    "@1024pix/pix-ui": "^49.4.1",
+    "@1024pix/pix-ui": "^51.2.0",
     "@1024pix/stylelint-config": "^5.1.24",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-decorators": "^7.20.13",

diff --git a/orga/tests/integration/components/banner/sco-communication-test.gjs b/orga/tests/integration/components/banner/sco-communication-test.gjs
@@ -8,6 +8,10 @@ import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';
 module('Integration | Component | Banner::Sco-communication', function (hooks) {
   setupIntlRenderingTest(hooks);
 
+  hooks.beforeEach(function () {
+    this.intl = this.owner.lookup('service:intl');
+  });
+
   module('Import Banner', function () {
     module('when prescriber’s organization is of type SCO that manages students', function () {
       [
@@ -34,7 +38,7 @@ module('Integration | Component | Banner::Sco-communication', function (hooks) {
             const screen = await render(<template><Scommunication /></template>);
 
             // then
-            assert.ok(screen.getByRole('alert'));
+            assert.ok(screen.getByText(this.intl.t('banners.import.message')));
 
             const downloadLink = screen.getByRole('link', { name: 'télécharger les résultats' });
             assert.strictEqual(downloadLink.href, 'https://cloud.pix.fr/s/WjTnkSbFs9TDcSC');

diff --git a/orga/tests/integration/components/places/capacity-alert_test.gjs b/orga/tests/integration/components/places/capacity-alert_test.gjs
@@ -13,20 +13,20 @@ module('Integration | Component | Places | CapacityAlert', function (hooks) {
     const screen = await render(<template><CapacityAlert @occupied="2" @total="1" /></template>);
 
     // then
-    assert.ok(screen.getByRole('alert', { value: t('banners.over-capacity.message') }));
+    assert.ok(screen.getByText(t('banners.over-capacity.message')));
   });
   test('it should not show alert if occupied seats is equal to total seats', async function (assert) {
     // when
     const screen = await render(<template><CapacityAlert @occupied="1" @total="1" /></template>);
 
     // then
-    assert.notOk(screen.queryByRole('alert', { value: t('banners.over-capacity.message') }));
+    assert.notOk(screen.queryByText(t('banners.over-capacity.message')));
   });
   test('it should not show alert if occupied seats is less to total seats', async function (assert) {
     // when
     const screen = await render(<template><CapacityAlert @occupied="0" @total="1" /></template>);
 
     // then
-    assert.notOk(screen.queryByRole('alert', { value: t('banners.over-capacity.message') }));
+    assert.notOk(screen.queryByText(t('banners.over-capacity.message')));
   });
 });
diff --git a/orga/tests/integration/components/places/places-lot-alert-test.gjs b/orga/tests/integration/components/places/places-lot-alert-test.gjs
@@ -33,7 +33,8 @@ module('Integration | Component | Places | PlacesLotsAlert', function (hooks) {
     ];
     // when
     const screen = await render(<template><PlacesLotsAlert @placesLots={{placesLots}} /></template>);
-    const banner = screen.getByRole('alert', { value: t('banners.last-places-lot-available.message') });
+    const banner = screen.getByText(t('banners.last-places-lot-available.message', { days: 27 }));
+
     // then
     assert.strictEqual(banner.outerText, t('banners.last-places-lot-available.message', { days: 27 }));
   });
@@ -57,7 +58,7 @@ module('Integration | Component | Places | PlacesLotsAlert', function (hooks) {
     const screen = await render(<template><PlacesLotsAlert @placesLots={{placesLots}} /></template>);
 
     // then
-    assert.notOk(screen.queryByRole('alert', { value: t('banners.last-places-lot-available.message') }));
+    assert.notOk(screen.queryByText(t('banners.last-places-lot-available.message')));
   });
   test('it should not show an alert if remaining days before places lot expires in more than 30 days', async function (assert) {
     // given
@@ -73,7 +74,7 @@ module('Integration | Component | Places | PlacesLotsAlert', function (hooks) {
     const screen = await render(<template><PlacesLotsAlert @placesLots={{placesLots}} /></template>);
 
     // then
-    assert.notOk(screen.queryByRole('alert', { value: t('banners.last-places-lot-available.message') }));
+    assert.notOk(screen.queryByText(t('banners.last-places-lot-available.message')));
   });
   test('it should not show alert if there is `PENDING` placesLots', async function (assert) {
     // given
@@ -95,7 +96,7 @@ module('Integration | Component | Places | PlacesLotsAlert', function (hooks) {
     const screen = await render(<template><PlacesLotsAlert @placesLots={{placesLots}} /></template>);
 
     // then
-    assert.notOk(screen.queryByRole('alert', { value: t('banners.last-places-lot-available.message') }));
+    assert.notOk(screen.queryByText(t('banners.last-places-lot-available.message')));
   });
   test('it should not show alert if there is no ACTIVE placesLots', async function (assert) {
     // given
@@ -111,7 +112,7 @@ module('Integration | Component | Places | PlacesLotsAlert', function (hooks) {
     const screen = await render(<template><PlacesLotsAlert @placesLots={{placesLots}} /></template>);
 
     // then
-    assert.notOk(screen.queryByRole('alert', { value: t('banners.last-places-lot-available.message') }));
+    assert.notOk(screen.queryByText(t('banners.last-places-lot-available.message')));
   });
   test('it should not show alert if there is no placesLots', async function (assert) {
     // given
@@ -120,6 +121,6 @@ module('Integration | Component | Places | PlacesLotsAlert', function (hooks) {
     const screen = await render(<template><PlacesLotsAlert @placesLots={{placesLots}} /></template>);
 
     // then
-    assert.notOk(screen.queryByRole('alert', { value: t('banners.last-places-lot-available.message') }));
+    assert.notOk(screen.queryByText(t('banners.last-places-lot-available.message')));
   });
 });