feat(web): add support for sponsored sessions

Author: abraham

docs/default-firebase-data.json

@@ -150,6 +150,7 @@
       "language": "English",
       "presentation": "https://speakerdeck.com/gdglviv/mete-atamel-windows-and-net-on-google-cloud-platform",
       "speakers": ["mete_atamel", "adrian_kajda"],
+      "sponsor": "Google",
       "tags": ["Cloud"],
       "title": "Windows and .NET on Google Cloud Platform ",
       "day": "2016-09-09",

packages/storage/schemas/firestore.schema.json

@@ -243,6 +243,10 @@
           "type": "array",
           "items": { "type": "string" }
         },
+        "sponsor": {
+          "description": "The sponsor's name, for a session given to a sponsor. The schedule labels it as sponsored.",
+          "type": "string"
+        },
         "startTime": {
           "description": "When the session starts, in the event time zone.",
           "$ref": "#/$defs/time"

packages/translations/source/en.xlf

@@ -281,6 +281,9 @@
 <trans-unit id="schedule.tabs.day">
   <source>Day <x id="0" equiv-text="${index + 1}"/></source>
 </trans-unit>
+<trans-unit id="schedule.session.sponsored">
+  <source>Sponsored</source>
+</trans-unit>
 <trans-unit id="schedule.session.rate">
   <source>Rate <x id="0" equiv-text="${session.title}"/></source>
 </trans-unit>
@@ -680,6 +683,9 @@
 <trans-unit id="pages.session.details">
   <source>Session details</source>
 </trans-unit>
+<trans-unit id="pages.session.sponsored-by">
+  <source>Sponsored by <x id="0" equiv-text="${session.sponsor}"/></source>
+</trans-unit>
 <trans-unit id="pages.session.bookmarked">
   <source>Bookmarked</source>
 </trans-unit>

packages/web/src/components/schedule/session-element.test.ts

@@ -91,6 +91,22 @@ describe('session-element', () => {
     );
   });
 
+  it('labels a sponsored session before its tags', async () => {
+    const { shadowRoot } = await render({ session: { ...session, sponsor: 'Acme' } });
+    const chips = [...shadowRoot.querySelectorAll('.chips hb-chip')];
+
+    expect(chips.map((chip) => chip.textContent?.trim())).toEqual(['Sponsored', 'Web', 'Cloud']);
+    expect(chips[0]).toHaveAttribute('accent', '1');
+  });
+
+  it('labels a sponsored session without tags', async () => {
+    const { shadowRoot } = await render({
+      session: { ...session, tags: [], sponsor: 'Acme' },
+    });
+
+    expect(shadowRoot.querySelector('.chips')).toHaveTextContent('Sponsored');
+  });
+
   it('skips a speaker that does not exist', async () => {
     const { shadowRoot } = await render({
       session: { ...session, speakers: [...session.speakers!, { id: 12 }] } as never,

packages/web/src/components/schedule/session-element.ts

@@ -204,9 +204,18 @@ export class SessionElement extends ThemedElement {
         style="${styleMap({ '--stripe': session.mainTag ? tagColor(session.mainTag) : undefined })}"
       >
         ${
-          session.tags?.length
+          session.sponsor || session.tags?.length
             ? html`<ul class="chips">
-                ${session.tags.map(
+                ${
+                  session.sponsor
+                    ? html`<li>
+                        <hb-chip class="sponsored" accent="1">
+                          ${msg('Sponsored', { id: 'schedule.session.sponsored' })}
+                        </hb-chip>
+                      </li>`
+                    : nothing
+                }
+                ${(session.tags ?? []).map(
                   (tag) =>
                     html`<li><hb-chip style="${styleMap(tagChipStyle(tag))}">${tag}</hb-chip></li>`,
                 )}

packages/web/src/models/session.test.ts

@@ -16,6 +16,7 @@ describe('session', () => {
       'language',
       'presentation',
       'speakers',
+      'sponsor',
       'startTime',
       'tags',
       'title',

packages/web/src/models/session.ts

@@ -12,6 +12,8 @@ export interface SessionData {
   presentation?: string;
   speakers?: string[];
   source?: string;
+  /** The sponsor's name, for a session given to a sponsor. The schedule labels it as sponsored. */
+  sponsor?: string;
   startTime?: string;
   tags?: string[];
   title: string;

packages/web/src/views/session-page.test.ts

@@ -119,6 +119,13 @@ describe('session-page', () => {
     ]);
   });
 
+  it('names the sponsor of a sponsored session', async () => {
+    vi.mocked(selectSession).mockReturnValue({ ...session, sponsor: 'Acme' } as never);
+    const { shadowRoot } = await render();
+
+    expect(shadowRoot.querySelector('.details .sponsored')).toHaveTextContent('Sponsored by Acme');
+  });
+
   it('leaves out the language when the session has none', async () => {
     vi.mocked(selectSession).mockReturnValue({ ...session, language: undefined } as never);
     const { shadowRoot } = await render();

packages/web/src/views/session-page.ts

@@ -1,5 +1,5 @@
 import { Success } from '@abraham/remotedata';
-import { msg } from '@lit/localize';
+import { msg, str } from '@lit/localize';
 import { css, html, nothing, type PropertyValues } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -197,6 +197,17 @@ export class SessionPage extends ThemedElement {
     return html`
       <ul class="details" aria-label="${msg('Session details', { id: 'pages.session.details' })}">
         ${details.map((detail) => html`<li><hb-chip class="plain">${detail}</hb-chip></li>`)}
+        ${
+          session.sponsor
+            ? html`<li>
+                <hb-chip class="sponsored" accent="1">
+                  ${msg(str`Sponsored by ${session.sponsor}`, {
+                    id: 'pages.session.sponsored-by',
+                  })}
+                </hb-chip>
+              </li>`
+            : nothing
+        }
         ${(session.tags ?? []).map(
           (tag) => html`<li><hb-chip style="${styleMap(tagChipStyle(tag))}">${tag}</hb-chip></li>`,
         )}