@playpilot/tpi 8.37.2 → 8.38.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.37.2",
+	"version": "8.38.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/injectionElements.ts

@@ -17,7 +17,7 @@ export function getLinkInjectionElements(parentElement: HTMLElement, excludeElem
     if (validElements.includes(element)) continue
     if (excludeElementsSelector && element.matches(excludeElementsSelector)) continue
 
-    if (/^(A|BUTTON|SCRIPT|NOSCRIPT|STYLE|IFRAME|FIGCAPTION|TIME|LABEL|BLOCKQUOTE|H1)$/.test(element.tagName)) continue
+    if (/^(A|BUTTON|SCRIPT|NOSCRIPT|STYLE|IFRAME|FIGCAPTION|TIME|LABEL|BLOCKQUOTE|H1|H2|H3|H4|H5)$/.test(element.tagName)) continue
 
     // Ignore elements that are visibly hidden as they are likely only for screen readers.
     // These elements can be hidden via display: none or via a tiny width or perhaps even a clip path.

package/src/routes/components/Participants/Participant.svelte

@@ -49,21 +49,25 @@
 </script>
 
 <div class="header" class:small>
-  <ParticipantImage {participant} />
+  {#if participant.image}
+    <ParticipantImage {participant} />
+  {/if}
 
   <div>
-    <div class="heading" use:heading={2} id="heading">{name}</div>
+    <div class="heading" class:no-image={!participant.image} use:heading={2} id="heading">{name}</div>
 
     {#if description}
       <p class="description" class:expanded={descriptionExpanded}>
         {description}
       </p>
 
-      <div class="read-more">
-        <Button variant="link" onclick={() => descriptionExpanded = !descriptionExpanded}>
-          {descriptionExpanded ? t('Read Less') : t('Read More')}
-        </Button>
-      </div>
+      {#if !small}
+        <div class="read-more">
+          <Button variant="link" onclick={() => descriptionExpanded = !descriptionExpanded}>
+            {descriptionExpanded ? t('Read Less') : t('Read More')}
+          </Button>
+        </div>
+      {/if}
     {/if}
   </div>
 </div>
@@ -126,6 +130,10 @@
       font-size: theme(detail-title-small-font-size, margin(1.25));
     }
 
+    &.no-image {
+      margin-top: margin(0.5);
+    }
+
     .small & {
       font-size: 1.25em;
     }
@@ -166,6 +174,11 @@
     &.expanded {
       display: block;
     }
+
+    .small & {
+      font-size: theme(font-size-small);
+      line-height: 1.5;
+    }
   }
 
   .read-more {

package/src/routes/components/Participants/ParticipantImage.svelte

@@ -24,7 +24,7 @@
   }
 </script>
 
-<div class="image">
+<div class="image" data-testid="participant-image">
   {#if participant?.image}
     <img loading="lazy" src={participant.image} alt="" />
 

package/src/tests/lib/injectionElements.test.js

@@ -79,9 +79,11 @@ describe('injectionElements.ts', () => {
       expect(getLinkInjectionElements(parent)[1].tagName).toBe('OL')
     })
 
-    it('Should ignore links, buttons, script tags, style tags, iframes, h1, and more', () => {
+    it('Should ignore links, buttons, script tags, style tags, iframes, headings, and more', () => {
       document.body.innerHTML = `<section>
         <h1>Some header</h1>
+        <h2>Some header</h2>
+        <h3>Some header</h3>
 
         <a>I am a link</a>
         <button>And I am a button</button>
@@ -97,7 +99,7 @@ describe('injectionElements.ts', () => {
 
         <div>
           <a>I am another link</a>
-          <h4>Some smaller header</h4>
+          <span>Some smaller header</span>
           <p>And finally, some text</p>
         </div>
       </section>`

package/src/tests/routes/components/Editorial/ManualInjection.test.js

@@ -152,9 +152,9 @@ describe('ManualInjection.svelte', () => {
     vi.mocked(searchTitles).mockResolvedValueOnce([title])
     vi.mocked(getIndexOfSelection).mockReturnValueOnce({ start: 0, end: 0 })
 
-    document.body.innerHTML = '<main><h2>Some title</h2> <p>Some paragraph</p></main>'
+    document.body.innerHTML = '<main><span>Some title</span> <p>Some paragraph</p></main>'
 
-    const container = document.querySelector('h2')
+    const container = document.querySelector('span')
 
     // @ts-ignore
     window.getSelection = vi.fn(() => ({

package/src/tests/routes/components/Participants/Participant.test.js

@@ -1,4 +1,4 @@
-import { fireEvent, render, waitFor  } from '@testing-library/svelte'
+import { fireEvent, getByTestId, render, waitFor  } from '@testing-library/svelte'
 import { describe, expect, it, vi, beforeEach } from 'vitest'
 
 import Participant from '../../../../routes/components/Participants/Participant.svelte'
@@ -124,18 +124,19 @@ describe('Participant.svelte', () => {
   it('Should render image if given', async () => {
     const participantWithImage = { ...participants[0], image: 'some-image.jpg' }
 
-    const { getByRole } = render(Participant, { participant: participantWithImage })
+    const { getByTestId } = render(Participant, { participant: participantWithImage })
 
     await waitFor(() => {
-      expect(getByRole('presentation')).toBeTruthy()
+      expect(getByTestId('participant-image')).toBeTruthy()
     })
   })
 
   it('Should not render image if not given', async () => {
-    const { queryByRole } = render(Participant, { participant: participants[0] })
+    const { queryByTestId } = render(Participant, { participant: participants[0] })
 
     await waitFor(() => {
-      expect(queryByRole('presentation')).not.toBeTruthy()
+      expect(queryByTestId('participant-image')).not.toBeTruthy()
+      expect(queryByTestId('participant-image')).not.toBeTruthy()
     })
   })