Merge pull request #8 from phase2/Phase2-Sprint6-4

Phase2-Sprint6-4
acquia-pso · Nov 25, 2024 · 070443c · 070443c
2 parents 6aa63a0 + 3263404
commit 070443c
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 19 deletions.
diff --git a/src/components/outline-yext-vertical/teaser.ts b/src/components/outline-yext-vertical/teaser.ts
@@ -27,14 +27,15 @@ export function displayTeaser(vertical: string, result: verticalSearchResult) {
   const teaserFunctions = {
     healthcare_professionals: () =>
       healthcareProfessionalTeaser(
+        result.data.address,
         result.data.headshot?.url,
         title,
         url,
-        highlightField('c_specialties') || []
+        result.data["c_specialties"] || [],
       ),
     testimonial: () =>
       testimonialTeaser(result.data.c_testimonial_Photo, title, url, cleanData),
-    person: () => personTeaser(result.data.c_person_Photos, title, url, highlightField('c_title')),
+    person: () => personTeaser(result.data.c_person_Photos, title, url, highlightField('c_title'), cleanData),
     page: () => defaultTeaser(highlightField('c_title'), url, cleanData),
     locationsearch: () =>
       locationTeaser(
@@ -91,10 +92,11 @@ export function defaultTeaser(title: string, url: string, snippet: string) {
   ></outline-teaser>`;
 }
 
-export function personTeaser(image: string, title: string, url: string, snippet: string) {
+export function personTeaser(image: string, title: string, url: string, subtitle: string, snippet: string) {
   return html`<outline-teaser
     url="${url}"
     title="${title}"
+    subtitle="${subtitle}"
     image="${image}"
     snippet="${snippet}"
   ></outline-teaser>`;
@@ -117,21 +119,32 @@ export function newsTeaser(
 }
 
 export function healthcareProfessionalTeaser(
+  address: Address | undefined,
   image: string | undefined,
   title: string,
   url: string,
   specialties: string[]
 ) {
   return html`
-    <outline-teaser image="${image}" title="${title}" url="${url}">
-      ${specialties.length > 0
-        ? html`
-            <ul class="specialty-list">
-              ${specialties.map(
-                (el: string) => html`<li class="specialty">${el}</li>`
-              )}
-            </ul>
-          `
+    <outline-teaser teaser-type="healthcare_professional" image="${image}" title="${title}" url="${url}">
+    ${specialties.length > 0
+      ? html`
+          <ul class="specialty-list">
+          <li class="specialty">
+            ${specialties.map((el: string, index: number) => html`
+              ${el}${index < specialties.length - 1 ? ',' : ''}
+            `)}
+            </li>
+          </ul>
+        `
+      : null}
+      ${address
+        ? unsafeHTML(`
+      <div slot="address">
+        ${address.line1}<br />
+        ${address.city}, ${address.region} ${address.postalCode}<br />
+      </div>
+      `)
         : null}
       <outline-button
         slot="cta"

diff --git a/src/components/shared/outline-teaser/outline-teaser.css b/src/components/shared/outline-teaser/outline-teaser.css
@@ -152,3 +152,7 @@
 .highlight {
   font-weight: bold;
 }
+
+.address-padding-top {
+  padding-top: 0.5rem;
+}
diff --git a/src/components/shared/outline-teaser/outline-teaser.ts b/src/components/shared/outline-teaser/outline-teaser.ts
@@ -56,6 +56,9 @@ export class OutlineTeaser extends LitElement {
   @property({ type: String, attribute: 'date' })
   teaserDate?: string;
 
+  @property({ type: String, attribute: 'teaser-type' })
+  teaserType?: string;
+
   @state() hasAddressSlot?: boolean;
   @state() hasCtaSlot?: boolean;
 
@@ -64,12 +67,18 @@ export class OutlineTeaser extends LitElement {
       <div class="location-information">
         <div class="inner">
           ${this.hasAddressSlot
-            ? html`
-                <h4>Location</h4>
-                <div class="address">
-                  <slot name="address"></slot>
-                </div>
-              `
+            ? this.teaserType != 'healthcare_professional'
+              ? html`
+                  <h4>Location</h4>
+                  <div class="address">
+                    <slot name="address"></slot>
+                  </div>
+                `
+              : html`
+                  <div class="address address-padding-top">
+                    <slot name="address"></slot>
+                  </div>
+                `
             : null}
           ${this.teaserPhone
             ? html`<a href="tel:${this.teaserPhone}" class="phone" title=""
@@ -125,7 +134,7 @@ export class OutlineTeaser extends LitElement {
             `
           : null}
         ${this.teaserSubtitle
-          ? html` <div class="subtitle">${this.teaserSubtitle}</div> `
+          ? html` <div class="subtitle">${unsafeHTML(this.teaserSubtitle)}</div> `
           : null}
 
         <div
@@ -134,6 +143,7 @@ export class OutlineTeaser extends LitElement {
             'has-hours': this.teaserHours,
             'is-mobile': isMobile,
           })}"
+          title=""
         >
           ${this.teaserSnippet
             ? html`${unsafeHTML(this.teaserSnippet)}`