OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	02/20/2020 06:40:48 AM	rwxr-xr-x
📄 AlertBanner.ts	2 KB	02/20/2020 06:38:31 AM	rw-r--r--
📄 Button.ts	5.25 KB	02/20/2020 06:38:32 AM	rw-r--r--
📄 Checkbox.ts	3.22 KB	02/20/2020 06:38:33 AM	rw-r--r--
📄 FormEvents.ts	1.8 KB	02/20/2020 06:38:35 AM	rw-r--r--
📄 FormValues.ts	2.85 KB	02/20/2020 06:38:35 AM	rw-r--r--
📄 HtmlPanel.ts	1.18 KB	02/20/2020 06:38:36 AM	rw-r--r--
📄 Listbox.ts	1.39 KB	02/20/2020 06:38:36 AM	rw-r--r--
📄 NavigableObject.ts	2.09 KB	02/20/2020 06:38:37 AM	rw-r--r--
📄 Notification.ts	6.05 KB	02/20/2020 06:38:37 AM	rw-r--r--
📄 OuterContainer.ts	6.77 KB	02/20/2020 06:38:38 AM	rw-r--r--
📄 PanelButton.ts	2.52 KB	02/20/2020 06:38:38 AM	rw-r--r--
📄 Tooltips.ts	1.23 KB	02/20/2020 06:38:39 AM	rw-r--r--
📄 UiFactory.ts	5.48 KB	02/20/2020 06:38:39 AM	rw-r--r--

Editing: AlertBanner.ts

/**
 * Copyright (c) Tiny Technologies, Inc. All rights reserved.
 * Licensed under the LGPL or a commercial license.
 * For LGPL see License.txt in the project root for license information.
 * For commercial licenses see https://www.tiny.cloud/
 */

import { UiFactoryBackstageProviders } from '../../backstage/Backstage';
import { AlloyTriggers, Button, Container, SketchSpec } from '@ephox/alloy';
import { formActionEvent } from 'tinymce/themes/silver/ui/general/FormEvents';
import * as Icons from '../icons/Icons';

export interface AlertBanner {
  text: string;
  level: 'info' | 'warn' | 'error' | 'success';
  icon: string;
  url?: string;
  actionLabel: string;
}

export const renderAlertBanner = (spec: AlertBanner, providersBackstage: UiFactoryBackstageProviders): SketchSpec => {
  // For using the alert banner inside a dialog
  return Container.sketch({
    dom: {
      tag: 'div',
      attributes: {
        role: 'alert'
      },
      classes: [ 'tox-notification', 'tox-notification--in', `tox-notification--${spec.level}` ]
    },
    components: [
      {
        dom: {
          tag: 'div',
          classes: [ 'tox-notification__icon' ]
        },
        components: [
          Button.sketch({
            dom: {
              tag: 'button',
              classes: [ 'tox-button', 'tox-button--naked', 'tox-button--icon' ],
              innerHtml: Icons.get(spec.icon, providersBackstage.icons),
              attributes: {
                title: providersBackstage.translate(spec.actionLabel)
              }
            },
            // TODO: aria label this button!
            action: (comp) => {
              AlloyTriggers.emitWith(comp, formActionEvent, { name: 'alert-banner', value: spec.url });
            }
          })
        ]
      },
      {
        dom: {
          tag: 'div',
          classes: [ 'tox-notification__body'],
          // TODO: AP-247: Escape this text so that it can't contain script tags
          innerHtml: providersBackstage.translate(spec.text)
        }
      }
    ]
  });
};