fix: port headings controller callsites

RedHat-UX · Jan 16, 2025 · 773e084 · 773e084
1 parent f65b971
commit 773e084
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 15 deletions.
diff --git a/elements/rh-accordion/rh-accordion-header.ts b/elements/rh-accordion/rh-accordion-header.ts
@@ -18,7 +18,8 @@ import { consume } from '@lit/context';
 import { context } from './context.js';
 
 import styles from './rh-accordion-header.css';
-import { HeadingLevelController } from '@rhds/elements/lib/context/headings/controller.js';
+
+import { HeadingLevelContextProvider } from '@rhds/elements/lib/context/headings/provider.js';
 
 export class AccordionHeaderChangeEvent extends Event {
   declare target: RhAccordionHeader;
@@ -65,7 +66,7 @@ export class RhAccordionHeader extends LitElement {
     ariaLevel: '2',
   });
 
-  #heading = new HeadingLevelController(this);
+  #heading = new HeadingLevelContextProvider(this);
 
   override connectedCallback() {
     super.connectedCallback();

diff --git a/elements/rh-audio-player/rh-audio-player-about.ts b/elements/rh-audio-player/rh-audio-player-about.ts
@@ -9,7 +9,7 @@ import '@rhds/elements/rh-avatar/rh-avatar.js';
 import panelStyles from './rh-audio-player-panel.css';
 import styles from './rh-audio-player-about.css';
 
-import { HeadingLevelContextConsumer } from '../../lib/context/headings/consumer.js';
+import { HeadingLevelContextConsumer, wrap } from '../../lib/context/headings/consumer.js';
 
 /**
  * Audio Player About Panel
@@ -42,7 +42,7 @@ export class RhAudioPlayerAbout extends LitElement {
   override render() {
     const { label, mediaseries, mediatitle } = this;
     const hasContent = (this.content?.length ?? 0) >= 1;
-    const heading = this.#headings.wrap(mediatitle ?? '');
+    const heading = wrap.call(this.#headings, mediatitle ?? '');
 
     return html`
       <rh-audio-player-scrolling-text-overflow id="title" part="heading">

diff --git a/elements/rh-audio-player/rh-audio-player-subscribe.ts b/elements/rh-audio-player/rh-audio-player-subscribe.ts
@@ -3,7 +3,7 @@ import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';
 
-import { HeadingLevelContextConsumer } from '../../lib/context/headings/consumer.js';
+import { HeadingLevelContextConsumer, wrap } from '../../lib/context/headings/consumer.js';
 
 import './rh-audio-player-scrolling-text-overflow.js';
 
@@ -37,7 +37,7 @@ export class RhAudioPlayerSubscribe extends LitElement {
   override render() {
     return html`
       <rh-audio-player-scrolling-text-overflow part="heading">
-        <slot name="heading">${this.#headings.wrap(this.menuLabel)}</slot>
+        <slot name="heading">${wrap.call(this.#headings, this.menuLabel)}</slot>
       </rh-audio-player-scrolling-text-overflow>
       <slot part="body" ?hidden="${(this.body?.length ?? 0) < 1}"></slot>
       <slot name="link" part="links"></slot>`;

diff --git a/elements/rh-audio-player/rh-cue.ts b/elements/rh-audio-player/rh-cue.ts
@@ -2,7 +2,7 @@ import { LitElement, html, nothing } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 
-import { HeadingLevelContextConsumer } from '../../lib/context/headings/consumer.js';
+import { HeadingLevelContextConsumer, wrap } from '../../lib/context/headings/consumer.js';
 
 import styles from './rh-cue.css';
 
@@ -105,7 +105,7 @@ export class RhCue extends LitElement {
 
   render() {
     const { start, voice } = this;
-    return html`${!this.#hasVoice ? nothing : this.#headings.wrap(this.#linkTemplate(html`
+    return html`${!this.#hasVoice ? nothing : wrap.call(this.#headings, this.#linkTemplate(html`
       <span id="start">${start}</span> - <span id="voice">${voice}</span>`, true))}${this.#linkTemplate(html`
       <slot></slot>
     `)}`;

diff --git a/elements/rh-audio-player/rh-transcript.ts b/elements/rh-audio-player/rh-transcript.ts
@@ -6,8 +6,7 @@ import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js
 
 import { RhCue, getFormattedTime } from './rh-cue.js';
 
-import { HeadingLevelContextConsumer } from '@rhds/elements/lib/context/headings/consumer.js';
-import { HeadingLevelContextProvider } from '@rhds/elements/lib/context/headings/provider.js';
+import { HeadingLevelContextProvider, wrap } from '@rhds/elements/lib/context/headings/provider.js';
 
 import buttonStyles from './rh-audio-player-button.css';
 import panelStyles from './rh-audio-player-panel.css';
@@ -48,10 +47,7 @@ export class RhTranscript extends LitElement {
 
   #duration?: number;
 
-  #headings = new HeadingLevelContextProvider(this, {
-    offset: 0,
-    parent: new HeadingLevelContextConsumer(this),
-  });
+  #headings = new HeadingLevelContextProvider(this, { offset: 0 });
 
   set autoscrollLabel(label: string) {
     this._autoscroll = label;
@@ -84,7 +80,7 @@ export class RhTranscript extends LitElement {
   render() {
     return html`
       <rh-audio-player-scrolling-text-overflow part="heading">
-        <slot name="heading">${this.#headings.wrap(this.menuLabel)}</slot>
+        <slot name="heading">${wrap.call(this.#headings, this.menuLabel)}</slot>
       </rh-audio-player-scrolling-text-overflow>
       <div class="panel-toolbar" part="toolbar">${this._cues.length < 0 ? '' : html`
         <label>