fix: replace the empty cart image with pure CSS and remove the image …

…file (#1319)

- remove the image alternative localization text
- add migration documentation

BREAKING CHANGES: The empty cart image is removed and replaced with localized text and CSS styling.

docs/guides/migrations.md

@@ -18,6 +18,8 @@ We still use deprecated form properties like 'templateOptions' and 'expressionPr
 
 The two small black triangle images `active_catalog.png` (header: when hovering a catalog) and `budget-bar-indicator.png` (my account: budget bar) are removed and replaced by CSS styling.
 
+The basket empty image `empty-cart.png` is removed and replaced with CSS styling.
+
 ## 3.0 to 3.1
 
 The SSR environment variable 'ICM_IDENTITY_PROVIDER' will be removed in a future release ( PWA 5.0 ).

src/app/pages/basket/shopping-basket-empty/shopping-basket-empty.component.html

@@ -8,7 +8,8 @@
 <ish-basket-validation-results></ish-basket-validation-results>
 
 <div class="empty-cart">
-  <img class="empty-cart-icon" src="assets/img/empty-cart.png" alt="{{ 'shopping_cart.empty.alt.text' | translate }}" />
+  <fa-icon [icon]="['fas', 'shopping-cart']" class="empty-cart-icon"></fa-icon>
+  <span class="empty-cart-icon-text">{{ 'shopping_cart.empty.zero.text' | translate }}</span>
 
   <h2>{{ 'shopping_cart.empty.text' | translate }}</h2>
 

src/app/pages/basket/shopping-basket-empty/shopping-basket-empty.component.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent } from 'ng-mocks';
 
@@ -20,6 +21,7 @@ describe('Shopping Basket Empty Component', () => {
         MockComponent(BasketInfoComponent),
         MockComponent(BasketValidationResultsComponent),
         MockComponent(ErrorMessageComponent),
+        MockComponent(FaIconComponent),
         ShoppingBasketEmptyComponent,
       ],
       imports: [TranslateModule.forRoot()],

src/assets/i18n/de_DE.json

@@ -1077,8 +1077,8 @@
   "shopping_cart.direct_order.heading": "Einen Artikel in den Warenkorb legen",
   "shopping_cart.direct_order.item_placeholder": "Artikelnummer",
   "shopping_cart.direct_order.link.multipleItems": "Schnellbestellung mehrerer Artikel",
-  "shopping_cart.empty.alt.text": "Ihr Warenkorb ist leer.",
   "shopping_cart.empty.text": "Es liegen keine Artikel in Ihrem Warenkorb.",
+  "shopping_cart.empty.zero.text": "0",
   "shopping_cart.heading": "Ihr Warenkorb",
   "shopping_cart.ministatus.empty_cart.text": "Ihr Warenkorb ist leer.",
   "shopping_cart.ministatus.items.text": "{{0}} Artikel",

src/assets/i18n/en_US.json

@@ -1077,8 +1077,8 @@
   "shopping_cart.direct_order.heading": "Add an Item to Cart",
   "shopping_cart.direct_order.item_placeholder": "Product ID",
   "shopping_cart.direct_order.link.multipleItems": "Quick Order of Multiple Items",
-  "shopping_cart.empty.alt.text": "Your Cart Is Empty",
   "shopping_cart.empty.text": "There are no items in your cart.",
+  "shopping_cart.empty.zero.text": "0",
   "shopping_cart.heading": "Your Shopping Cart",
   "shopping_cart.ministatus.empty_cart.text": "Your cart is currently empty.",
   "shopping_cart.ministatus.items.text": "{{0, plural, one{# item} other{# items}}}",

src/assets/i18n/fr_FR.json

@@ -1077,8 +1077,8 @@
   "shopping_cart.direct_order.heading": "Ajouter un article au panier",
   "shopping_cart.direct_order.item_placeholder": "ID du produit",
   "shopping_cart.direct_order.link.multipleItems": "Commande rapide de plusieurs articles",
-  "shopping_cart.empty.alt.text": "Votre panier est vide.",
   "shopping_cart.empty.text": "Il n’y a aucun article dans votre panier.",
+  "shopping_cart.empty.zero.text": "0",
   "shopping_cart.heading": "Votre panier",
   "shopping_cart.ministatus.empty_cart.text": "Votre panier est actuellement vide.",
   "shopping_cart.ministatus.items.text": "{{0, plural, one{# article} other{# articles}}}",

src/styles/pages/checkout/shopping-cart.scss

@@ -238,7 +238,21 @@
   border-bottom: $border-width-default solid $border-color-light;
 
   .empty-cart-icon {
-    padding: ($space-default * 4) 0 ($space-default * 2);
+    display: inline-block;
+    padding: ($space-default * 4) 0 0;
+    font-size: $space-default * 10;
+    line-height: inherit;
+    color: $border-color-light;
+  }
+
+  .empty-cart-icon-text {
+    position: relative;
+    top: -60px;
+    left: -95px;
+    padding: ($space-default * 4) 0 0;
+    font-family: $font-family-bold;
+    font-size: 70px;
+    color: $text-color-quaternary;
   }
 
   h2 {