Merge remote-tracking branch 'origin' into toggle-button-mobile-view

.lintstagedrc

@@ -1,14 +1,11 @@
 {
 	"*.{ts,json,md,scss,html}": [
-		"prettier --write",
-		"git add"
+		"prettier --write"
 	],
 	"*.ts": [
-		"eslint --fix",
-		"git add"
+		"eslint --fix"
 	],
 	"*.scss": [
-		"stylelint --fix",
-		"git add"
+		"stylelint --fix"
 	]
 }

libs/extensions/angular/image-banner/src/image-banner.component.html

@@ -25,7 +25,7 @@
 
   <div class="main-content-wrapper">
     <div class="main-content-image-wrapper">
-      <img class="main-content-image" [src]="imagePath" alt="" />
+      <img class="main-content-image" [src]="imagePath" alt="" (error)="onImageError($event)" />
     </div>
 
     <div class="main-content">

libs/extensions/angular/image-banner/src/image-banner.component.stories.ts

@@ -10,20 +10,44 @@ const meta: Meta<ImageBannerComponent> = {
   component: ImageBannerComponent,
   title: 'Components/Banner/Image Banner',
   parameters: {
-    actions: { handles: ['dismissClick'] },
-    controls: { exclude: ['bannerClicked', 'dismissClicked'] },
-    chromatic: { modes: { ...responsiveModes } },
+    actions: {
+      handles: ['dismissClick'],
+    },
+    controls: {
+      exclude: ['bannerClicked', 'dismissClicked', 'onImageError', 'translations'],
+    },
+    chromatic: {
+      modes: {
+        ...responsiveModes,
+      },
+    },
   },
   argTypes: {
+    title: {
+      control: 'text',
+    },
+    bodyText: {
+      control: 'text',
+    },
+    actionButtonText: {
+      control: 'text',
+    },
+    imagePath: {
+      control: 'text',
+    },
+    bannerClick: {
+      control: false,
+    },
+    dismissClick: {
+      control: false,
+    },
+    imageError: {
+      control: false,
+    },
     showButtonInMobileView: { control: 'boolean' },
-
-    title: { control: 'text' },
-    bodyText: { control: 'text' },
-    actionButtonText: { control: 'text' },
-    imagePath: { control: 'text' },
-    bannerClick: { control: false },
-    dismissClick: { control: false },
-    externalLink: { control: 'text' },
+    externalLink: {
+      control: 'text',
+    },
   },
 };
 export default meta;
@@ -172,3 +196,22 @@ export const UsageInGridAndButtonInNarrowView: Story = {
     `,
   }),
 };
+
+const handleImageError = (event: Event) => {
+  const image = event?.target as HTMLImageElement;
+  image.src = 'assets/images/not-found.png';
+};
+
+/**
+ * If a fallback image is needed when the provided image path results in an error,
+ * subscribe to the `imageError` event and update the imagePath to an alternative image in your handler function.
+ */
+export const ImageError: Story = {
+  args: {
+    title: 'Image Banner with Fallback Image',
+    bodyText: 'This is the body text.',
+    actionButtonText: 'Read more',
+    imageError: handleImageError,
+    imagePath: 'assets/images/does-not-exist.jpg',
+  },
+};

libs/extensions/angular/image-banner/src/image-banner.component.ts

@@ -59,6 +59,12 @@ export class ImageBannerComponent {
    */
   @Output() dismissClick = new EventEmitter<Event>();
 
+  /**
+   * If the input imagePath results in an error, it will be reflected in this output.
+   */
+  @Output()
+  imageError = new EventEmitter<ErrorEvent>();
+
   constructor(public translations: TranslationService) {}
 
   public bannerClicked(event: Event) {
@@ -71,4 +77,8 @@ export class ImageBannerComponent {
   public dismissClicked(event: Event) {
     this.dismissClick.emit(event);
   }
+
+  public onImageError($event: ErrorEvent) {
+    this.imageError.emit($event);
+  }
 }