[angular-xmcloud] Introduce angular SXA Promo component (#1897)

Co-authored-by: Artem Alexeyenko <[email protected]>

CHANGELOG.md

@@ -36,6 +36,7 @@ Our versioning strategy is as follows:
   * Row-Splitter ([#1901](https://github.com/Sitecore/jss/pull/1901))
   * Link-List ([#1898](https://github.com/Sitecore/jss/pull/1898))
   * Column-Splitter ([#1889](https://github.com/Sitecore/jss/pull/1889))
+  * Promo component ([#1897](https://github.com/Sitecore/jss/pull/1897))
 
 ### 🛠 Breaking Change
 

packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/promo/promo.component.html

@@ -0,0 +1,23 @@
+<div class="component promo {{ styles }}" [attr.id]="id">
+  <div class="component-content">
+    <ng-container *ngIf="rendering.fields; else empty">
+      <div class="field-promoicon">
+        <img *scImage="rendering.fields.PromoIcon" />
+      </div>
+      <div class="promo-text">
+        <div>
+          <div class="field-promotext">
+            <div *scRichText="rendering.fields.PromoText"></div>
+          </div>
+        </div>
+        <div class="field-promolink">
+          <a *scLink="rendering.fields.PromoLink"></a>
+        </div>
+      </div>
+    </ng-container>
+  </div>
+</div>
+
+<ng-template #empty>
+  <span className="is-empty-hint">Promo</span>
+</ng-template>

packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/promo/promo.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+import { SxaComponent } from '../sxa.component';
+
+@Component({
+  selector: 'app-promo',
+  templateUrl: './promo.component.html',
+})
+export class PromoComponent extends SxaComponent {}

packages/sitecore-jss-angular/src/components/link.directive.spec.ts

@@ -47,6 +47,16 @@ describe('<a *scLink />', () => {
     expect(de.children.length).toBe(0);
   });
 
+  it('should render nothing for empty field', () => {
+    const field = {
+      value: { href: '' },
+    };
+    comp.field = field;
+    fixture.detectChanges();
+
+    expect(de.children.length).toBe(0);
+  });
+
   it('should render editable with an editable value', () => {
     const field = {
       editableFirstPart: '<a class="yo" href="/services">Lorem',

packages/sitecore-jss-angular/src/components/link.directive.ts

@@ -76,11 +76,15 @@ export class LinkDirective implements OnChanges {
     }
   }
 
+  private shouldRender() {
+    return this.field && (this.field.href || this.field.value?.href || this.field.text);
+  }
+
   private updateView() {
     const field = this.field;
     if (this.editable && field && field.editableFirstPart && field.editableLastPart) {
       this.renderInlineWrapper(field.editableFirstPart, field.editableLastPart);
-    } else if (field && (field.href || field.value)) {
+    } else if (this.shouldRender()) {
       const props = field.href ? field : field.value;
 
       const linkText = field.text || field.value?.text || field.href || field.value?.href;