chromium/ash/webui/recorder_app_ui/resources/components/speaker-label-consent-dialog-content.ts

// Copyright 2024 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import {css, html, LitElement} from 'chrome://resources/mwc/lit/index.js';

import {i18n, NoArgStringName} from '../core/i18n.js';

// Since all string names need to be reported when recording user consent for
// speaker label, we declare separate constants here and use it for both the
// exported array and in the UI, to minimize the chance that those two got out
// of sync.
// Note that all of these (and using these as key to i18n) are still type
// checked with the NoArgStringName, and the consent recording method also only
// accepts arguments of the NoArgStringName type.
const DESCRIPTION_PREFIX_NAME: NoArgStringName =
  'onboardingDialogSpeakerLabelDescriptionPrefix';
const DESCRIPTION_LIST_ITEM_NAMES: NoArgStringName[] = [
  'onboardingDialogSpeakerLabelDescriptionListItem1',
  'onboardingDialogSpeakerLabelDescriptionListItem2',
  'onboardingDialogSpeakerLabelDescriptionListItem3',
];
const DESCRIPTION_SUFFIX_NAME: NoArgStringName =
  'onboardingDialogSpeakerLabelDescriptionSuffix';
const LINK_NAME: NoArgStringName = 'onboardingDialogSpeakerLabelLearnMoreLink';

export const DESCRIPTION_NAMES: NoArgStringName[] = [
  DESCRIPTION_PREFIX_NAME,
  ...DESCRIPTION_LIST_ITEM_NAMES,
  DESCRIPTION_SUFFIX_NAME,
  LINK_NAME,
];

/**
 * The content of the speaker label consent dialog.
 *
 * This is reused between speaker-label-consent-dialog and onboarding-dialog.
 */
export class SpeakerLabelConsentDialogContent extends LitElement {
  static override styles = css`
    :host {
      display: block;
    }

    ul {
      padding-inline-start: 20px;
    }

    a,
    a:visited {
      color: var(--cros-sys-primary);
    }
  `;

  // All description in this component MUST be exported in the
  // `DESCRIPTION_NAMES` for consent auditing purpose.
  override render(): RenderResult {
    const listItems = DESCRIPTION_LIST_ITEM_NAMES.map(
      (name) => html`<li>${i18n[name]}</li>`,
    );
    // TODO: b/336963138 - Add correct link
    return html`
      ${i18n[DESCRIPTION_PREFIX_NAME]}
      <ul>
        ${listItems}
      </ul>
      ${i18n[DESCRIPTION_SUFFIX_NAME]}
      <a href="javascript:;">${i18n[LINK_NAME]}</a>
    `;
  }
}

window.customElements.define(
  'speaker-label-consent-dialog-content',
  SpeakerLabelConsentDialogContent,
);

declare global {
  interface HTMLElementTagNameMap {
    'speaker-label-consent-dialog-content': SpeakerLabelConsentDialogContent;
  }
}