fix(core): update Illustrated Messages to lates design and add respon…

…siveness

libs/core/illustrated-message/illustrated-message.component.html

@@ -1,10 +1,12 @@
-@if (!noSvg || _inlineSvg) {
-    <svg class="fd-illustrated-message__illustration" [attr.aria-label]="svgAriaLabel">
-        <use [attr.href]="_href"></use>
-    </svg>
-}
-@if (_inlineSvg) {
-    <div [style.display]="'none'" [innerHTML]="_inlineSvg"></div>
-}
-<ng-content select="[fd-illustrated-message-figcaption]"></ng-content>
+<div class="fd-illustrated-message__container">
+    @if (!noSvg || _inlineSvg) {
+        <svg class="fd-illustrated-message__illustration" [attr.aria-label]="svgAriaLabel">
+            <use [attr.href]="_href"></use>
+        </svg>
+    }
+    @if (_inlineSvg) {
+        <div [style.display]="'none'" [innerHTML]="_inlineSvg"></div>
+    }
+    <ng-content select="[fd-illustrated-message-figcaption]"></ng-content>
+</div>
 <ng-content select="fd-illustrated-message-actions"></ng-content>

libs/core/illustrated-message/illustrated-message.component.scss

@@ -1 +1,5 @@
 @import 'fundamental-styles/dist/illustrated-message';
+
+.fd-illustrated-message__illustration {
+    height: var(--illustrationMaxWidth);
+}

libs/core/illustrated-message/illustrated-message.component.spec.ts

@@ -48,8 +48,8 @@ describe('IllustratedMessageComponent', () => {
         expect(illustratedMessageElementRef).toBeTruthy();
     });
 
-    it('Should have scene type by default', () => {
-        expect(illustratedMessageElementRef.nativeElement.classList.contains('fd-illustrated-message--scene')).toBe(
+    it('Should have assigned class', () => {
+        expect(illustratedMessageElementRef.nativeElement.classList.contains('fd-illustrated-message')).toBe(
             true
         );
     });
@@ -69,4 +69,12 @@ describe('IllustratedMessageComponent', () => {
             true
         );
     });
+
+    it('Should add base type', () => {
+        testComponent.type = 'base';
+        fixture.detectChanges();
+        expect(illustratedMessageElementRef.nativeElement.classList.contains('fd-illustrated-message--base')).toBe(
+            true
+        );
+    });
 });

libs/core/illustrated-message/illustrated-message.component.ts

@@ -29,7 +29,15 @@ export interface SvgItemConfig {
     file: string;
 }
 
-export type IllustratedMessageType = 'scene' | 'dialog' | 'spot' | 'dot';
+export type IllustratedMessageType = 'scene' | 'dialog' | 'spot' | 'dot' | 'base';
+
+export enum IllustratedMessageTypes {
+    SCENE = 'scene',
+    DIALOG = 'dialog',
+    SPOT = 'spot',
+    DOT = 'dot',
+    BASE = 'base'
+}
 
 let illustratedMessageUniqueId = 0;
 
@@ -46,11 +54,11 @@ let illustratedMessageUniqueId = 0;
 export class IllustratedMessageComponent implements AfterViewInit, OnChanges, OnDestroy, OnInit, CssClassBuilder {
     /**
      * The type of the Illustrated Message
-     * Options include: 'scene' | 'spot' | 'dialog' | 'dot'.
+     * Options include: 'scene' | 'spot' | 'dialog' | 'dot' | 'base'.
      * The default type is set to 'scene'
      */
     @Input()
-    type: IllustratedMessageType = 'scene';
+    type: IllustratedMessageType = IllustratedMessageTypes.SCENE;
 
     /**
      * An object containing url and id for each type used to construct the svg href
@@ -94,6 +102,9 @@ export class IllustratedMessageComponent implements AfterViewInit, OnChanges, On
     /** @hidden */
     _inlineSvg: SafeHtml | undefined;
 
+    /** @hidden */
+    _containerWidth: number;
+
     /** @hidden */
     private _subscriptions = new Subscription();
 
@@ -131,9 +142,9 @@ export class IllustratedMessageComponent implements AfterViewInit, OnChanges, On
 
     /** @hidden */
     ngAfterViewInit(): void {
-        if (this.type === 'scene') {
-            this._subscriptions.add(fromEvent(window, 'resize').subscribe(() => this._constructHref()));
-        }
+        this._containerWidth = this.elementRef.nativeElement.offsetWidth;
+        this._constructHref();
+        this._subscriptions.add(fromEvent(window, 'resize').subscribe(() => this._constructHref()));
     }
 
     /** @hidden */
@@ -145,28 +156,47 @@ export class IllustratedMessageComponent implements AfterViewInit, OnChanges, On
     private _constructHref(): void {
         let inlineSvg: string | undefined;
         this._inlineSvg = undefined;
-        if (this.svgConfig) {
-            switch (this.type) {
-                case 'scene':
-                    this._isSmallScreen = window.innerWidth < 600;
 
-                    inlineSvg = this._isSmallScreen ? this.svgConfig.dialog?.file : this.svgConfig.scene?.file;
+        this._containerWidth = this.elementRef.nativeElement.offsetWidth;
+
+        if (this._containerWidth >= 682) {
+            this.type = IllustratedMessageTypes.SCENE;
+        }
+
+        if (this._containerWidth >= 361 && this._containerWidth <= 681) {
+            this.type = IllustratedMessageTypes.DIALOG;
+        }
 
-                    this._href = this._isSmallScreen
-                        ? `${this.svgConfig.dialog?.url || ''}#${this.svgConfig.dialog?.id}`
-                        : `${this.svgConfig.scene?.url || ''}#${this.svgConfig.scene?.id}`;
+        if (this._containerWidth >= 261 && this._containerWidth <= 360) {
+            this.type = IllustratedMessageTypes.SPOT;
+        }
+
+        if (this._containerWidth >= 161 && this._containerWidth <= 260) {
+            this.type = IllustratedMessageTypes.DOT;
+        }
+
+        if (this._containerWidth <= 160) {
+            this.type = IllustratedMessageTypes.BASE;
+        }
+
+        if (this.svgConfig) {
+            switch (this.type) {
+                case IllustratedMessageTypes.SCENE:
+                    inlineSvg = this.svgConfig.scene?.file;
+                    this._href = `${this.svgConfig.scene?.url || ''}#${this.svgConfig.scene?.id}`;
                     break;
 
-                case 'dialog':
+                case IllustratedMessageTypes.DIALOG:
                     inlineSvg = this.svgConfig.dialog?.file;
                     this._href = `${this.svgConfig.dialog?.url || ''}#${this.svgConfig.dialog?.id}`;
                     break;
 
-                case 'spot':
+                case IllustratedMessageTypes.SPOT:
                     inlineSvg = this.svgConfig.spot?.file;
                     this._href = `${this.svgConfig.spot?.url || ''}#${this.svgConfig.spot?.id}`;
                     break;
-                case 'dot':
+
+                case IllustratedMessageTypes.DOT:
                     inlineSvg = this.svgConfig.dot?.file;
                     this._href = `${this.svgConfig.dot?.url || ''}#${this.svgConfig.dot?.id}`;
                     break;
@@ -176,6 +206,7 @@ export class IllustratedMessageComponent implements AfterViewInit, OnChanges, On
             this._inlineSvg = this._sanitizer.bypassSecurityTrustHtml(inlineSvg);
         }
 
+        this.buildComponentCssClass();
         this._cdRef.detectChanges();
     }
 }

libs/docs/core/illustrated-message/examples/illustrated-message-dialog-example.component.ts

@@ -25,7 +25,9 @@ import { TitleComponent } from '@fundamental-ngx/core/title';
 })
 export class IllustratedMessageDialogExampleComponent {
     dialogSvgConfig = {
-        dialog: { url: 'assets/images/sapIllus-Dialog-NoMail.svg', id: 'sapIllus-Dialog-NoMail' }
+        dialog: { url: 'assets/images/sapIllus-Dialog-NoMail.svg', id: 'sapIllus-Dialog-NoMail' },
+        spot: { url: 'assets/images/sapIllus-Spot-NoMail.svg', id: 'sapIllus-Spot-NoEmail' },
+        dot: { url: 'assets/images/sapIllus-Spot-NoMail.svg', id: 'sapIllus-Spot-NoEmail' }
     };
     dialogId = 'im-dialog-81mf46';
 

libs/docs/core/illustrated-message/examples/illustrated-message-example.component.html

@@ -1,12 +1,11 @@
 <div [style.width.%]="100" [style.display]="'flex'" [style.justify-content]="'center'">
     <figure fd-illustrated-message [svgConfig]="sceneConfig" svgAriaLabel="Illustration label">
         <figcaption fd-illustrated-message-figcaption>
-            <h3 fd-illustrated-message-title>Headline text goes here</h3>
-            <p fd-illustrated-message-text>Description provides user with clarity and possible next steps.</p>
+            <h3 fd-illustrated-message-title>Let's get some results</h3>
+            <p fd-illustrated-message-text>Start by providing your search criteria.</p>
         </figcaption>
         <fd-illustrated-message-actions>
-            <button fd-button label="Action One"></button>
-            <button fd-button label="Action Two"></button>
+            <button fd-button label="Button"></button>
         </fd-illustrated-message-actions>
     </figure>
 </div>

libs/docs/core/illustrated-message/examples/illustrated-message-example.component.ts

@@ -11,6 +11,8 @@ import { IllustratedMessageModule } from '@fundamental-ngx/core/illustrated-mess
 export class IllustratedMessageExampleComponent {
     sceneConfig = {
         scene: { url: 'assets/images/sapIllus-Scene-NoMail.svg', id: 'sapIllus-Scene-NoMail-1' },
-        dialog: { url: 'assets/images/sapIllus-Dialog-NoMail.svg', id: 'sapIllus-Dialog-NoMail' }
+        dialog: { url: 'assets/images/sapIllus-Dialog-NoMail.svg', id: 'sapIllus-Dialog-NoMail' },
+        spot: { url: 'assets/images/sapIllus-Spot-NoMail.svg', id: 'sapIllus-Spot-NoEmail' },
+        dot: { url: 'assets/images/sapIllus-Spot-NoMail.svg', id: 'sapIllus-Spot-NoEmail' }
     };
 }

libs/docs/core/illustrated-message/examples/illustrated-message-inline-example.component.html

@@ -1,12 +1,11 @@
 <div [style.width.%]="100" [style.display]="'flex'" [style.justify-content]="'center'">
     <figure fd-illustrated-message [svgConfig]="sceneConfig()">
         <figcaption fd-illustrated-message-figcaption>
-            <h3 fd-illustrated-message-title>Headline text goes here</h3>
-            <p fd-illustrated-message-text>Description provides user with clarity and possible next steps.</p>
+            <h3 fd-illustrated-message-title>No new mail</h3>
+            <p fd-illustrated-message-text>Check back again later.</p>
         </figcaption>
         <fd-illustrated-message-actions>
-            <button fd-button label="Action One"></button>
-            <button fd-button label="Action Two"></button>
+            <button fd-button label="Compose"></button>
         </fd-illustrated-message-actions>
     </figure>
 </div>

libs/docs/core/illustrated-message/examples/illustrated-message-inline-example.component.ts

@@ -6,6 +6,8 @@ import { Observable, map, zip } from 'rxjs';
 
 const sceneSvg = 'assets/images/sapIllus-Scene-NoMail.svg';
 const dialogSvg = 'assets/images/sapIllus-Dialog-NoMail.svg';
+const spotSvg = 'assets/images/sapIllus-Spot-NoMail.svg';
+const dotSvg = 'assets/images/sapIllus-Spot-NoMail.svg';
 
 const getAsset = (path: string): Observable<string> =>
     inject(HttpClient)
@@ -26,13 +28,15 @@ const getAsset = (path: string): Observable<string> =>
 })
 export class IllustratedMessageInlineExampleComponent implements AfterViewInit {
     sceneConfig: WritableSignal<SvgConfig> = signal({});
-    assets = [getAsset(sceneSvg), getAsset(dialogSvg)];
+    assets = [getAsset(sceneSvg), getAsset(dialogSvg), getAsset(spotSvg), getAsset(dotSvg)];
 
     ngAfterViewInit() {
-        zip(...this.assets).subscribe(([scene, dialog]) => {
+        zip(...this.assets).subscribe(([scene, dialog, spot, dot]) => {
             this.sceneConfig.set({
                 scene: { file: scene, id: 'sapIllus-Scene-NoMail-1' },
-                dialog: { file: dialog, id: 'sapIllus-Dialog-NoMail' }
+                dialog: { file: dialog, id: 'sapIllus-Dialog-NoMail' },
+                spot: { file: spot, id: 'sapIllus-Spot-NoEmail' },
+                dot: { file: dot, id: 'sapIllus-Spot-NoEmail' }
             });
         });
     }

libs/docs/core/illustrated-message/examples/illustrated-message-spot-example.component.html

@@ -1,4 +1,4 @@
-<div [style.max-width.px]="400">
+<div [style.max-width.px]="340">
     <fd-card aria-labelledby="spot-label" aria-describedby="spot-description" role="group">
         <fd-card-header>
             <fd-card-main-header>

libs/docs/core/illustrated-message/examples/illustrated-message-spot-example.component.ts

@@ -11,6 +11,7 @@ import { IllustratedMessageModule } from '@fundamental-ngx/core/illustrated-mess
 })
 export class IllustratedMessageSpotExampleComponent {
     spotConfig = {
-        spot: { url: 'assets/images/sapIllus-Spot-NoMail.svg', id: 'sapIllus-Spot-NoEmail' }
+        spot: { url: 'assets/images/sapIllus-Spot-NoMail.svg', id: 'sapIllus-Spot-NoEmail' },
+        dot: { url: 'assets/images/sapIllus-Spot-NoMail.svg', id: 'sapIllus-Spot-NoEmail' }
     };
 }

libs/docs/core/illustrated-message/illustrated-message-docs.component.html

@@ -1,7 +1,7 @@
 <fd-docs-section-title id="scene" componentName="illustrated-message"> Scene </fd-docs-section-title>
 <description
-    >The configuration object passed to <code>[svgConfig]</code> should contain values for both 'scene' and 'dialog'.
-    For screens smaller than 600px the 'dialog' svg is applied.</description
+    >The configuration object passed to <code>[svgConfig]</code> should contain values for 'scene', 'dialog', 'spot' and
+    'dot'.</description
 >
 <component-example>
     <fd-illustrated-message-example></fd-illustrated-message-example>
@@ -47,7 +47,11 @@
 <fd-docs-section-title id="inline" componentName="illustrated-message"> Inline SVG </fd-docs-section-title>
 <description>
     <p>In some cases it's not applicable to use URLs for the SVG locations.</p>
-    <p>In this case developers can load SVG directly into their js code and pass it as a string to the component.</p>
+    <p>
+        In this case developers can load SVG directly into their js code and pass it as a string to the component. The
+        configuration object passed to <code>[svgConfig]</code> should contain values for 'scene', 'dialog', 'spot' and
+        'dot'.
+    </p>
 </description>
 <component-example>
     <fd-illustrated-message-inline-example></fd-illustrated-message-inline-example>

package.json

@@ -47,7 +47,7 @@
     "@angular/platform-browser": "18.0.3",
     "@angular/platform-browser-dynamic": "18.0.3",
     "@angular/router": "18.0.3",
-    "@fundamental-styles/cx": "0.37.7",
+    "@fundamental-styles/cx": "0.38.0-rc.1",
     "@nx/angular": "19.2.3",
     "@sap-theming/theming-base-content": "11.18.0",
     "@stackblitz/sdk": "1.9.0",
@@ -58,7 +58,7 @@
     "fast-deep-equal": "3.1.3",
     "focus-trap": "7.1.0",
     "focus-visible": "5.2.1",
-    "fundamental-styles": "0.37.7",
+    "fundamental-styles": "0.38.0-rc.1",
     "fuse.js": "7.0.0",
     "highlight.js": "11.7.0",
     "intl": "1.2.5",

yarn.lock

@@ -3585,10 +3585,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fundamental-styles/cx@npm:0.37.7":
-  version: 0.37.7
-  resolution: "@fundamental-styles/cx@npm:0.37.7"
-  checksum: 10/755cba4a65cb68a68bcfd9f589f2a7607e6ea736f18abcdfed7a3cc9bafbcc1248ba5f4b4c3b62dca99591c7b5c3791d546a70c122f1c303ac9ed5351aec5b29
+"@fundamental-styles/cx@npm:0.38.0-rc.1":
+  version: 0.38.0-rc.1
+  resolution: "@fundamental-styles/cx@npm:0.38.0-rc.1"
+  checksum: 10/e3fa733bb460d8358b27d3e2caaa786d51715390875c28860b4b9bc468c7f30925d81efe89150bad4efb87eaec53c8d8302d9db763b16f8ba9ac54140f82b6d3
   languageName: node
   linkType: hard
 
@@ -13465,7 +13465,7 @@ __metadata:
     "@angular/router": "npm:18.0.3"
     "@commitlint/cli": "npm:18.6.1"
     "@commitlint/config-conventional": "npm:18.6.1"
-    "@fundamental-styles/cx": "npm:0.37.7"
+    "@fundamental-styles/cx": "npm:0.38.0-rc.1"
     "@jsdevtools/npm-publish": "npm:3.0.1"
     "@nx/angular": "npm:19.2.3"
     "@nx/devkit": "npm:19.2.3"
@@ -13522,7 +13522,7 @@ __metadata:
     fast-glob: "npm:3.3.1"
     focus-trap: "npm:7.1.0"
     focus-visible: "npm:5.2.1"
-    fundamental-styles: "npm:0.37.7"
+    fundamental-styles: "npm:0.38.0-rc.1"
     fuse.js: "npm:7.0.0"
     highlight.js: "npm:11.7.0"
     husky: "npm:8.0.2"
@@ -13569,13 +13569,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"fundamental-styles@npm:0.37.7":
-  version: 0.37.7
-  resolution: "fundamental-styles@npm:0.37.7"
+"fundamental-styles@npm:0.38.0-rc.1":
+  version: 0.38.0-rc.1
+  resolution: "fundamental-styles@npm:0.38.0-rc.1"
   peerDependencies:
     "@sap-theming/theming-base-content": ^11.18.0
-    "@sap-ui/common-css": 0.37.7
-  checksum: 10/0d33001fa1a6e7aefdc81a2c316c25139875452c64cd81c564357dbba06b4a5d8b1623f61e7918343b1dc4a08d6e725b61fda0ac79e7e57c1b2b8fe9ef4e5b80
+    "@sap-ui/common-css": 0.38.0-rc.1
+  checksum: 10/d5a97e5d84683929a66a658406e2446be07997be4aefbabfb270a5853d16006d70fa9c54eb5fa8de4f7f51ddd3d387fcb22acd4f00e082b53d92181de26dbe53
   languageName: node
   linkType: hard