feat: Add svg icon for all extensible areas

samples/sample-generic-content-sidekick-plugin/src/components/sample-generic-content-sidekick-plugin-item/component.tsx

@@ -11,6 +11,20 @@ import * as ReactDOM from 'react-dom/client';
 import { SampleGenericContentSidekickPluginProps } from './types';
 import { GenericContentSidekickExample } from '../generic-content-sidekick-example/component';
 
+function BatteryIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1}
+      stroke="currentColor"
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M21 10.5h.375c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125H21M4.5 10.5H18V15H4.5v-4.5ZM3.75 18h15A2.25 2.25 0 0 0 21 15.75v-6a2.25 2.25 0 0 0-2.25-2.25h-15A2.25 2.25 0 0 0 1.5 9.75v6A2.25 2.25 0 0 0 3.75 18Z" />
+    </svg>
+  );
+}
+
 function SampleGenericContentSidekickPlugin(
   { pluginUuid: uuid }: SampleGenericContentSidekickPluginProps,
 ): React.ReactNode {
@@ -28,7 +42,9 @@ function SampleGenericContentSidekickPlugin(
         name: 'Generic Content 1',
         section: 'Section 1',
         dataTest: 'section-1-generic-content-sidekick-abc',
-        buttonIcon: 'video',
+        buttonIcon: {
+          svgContent: <BatteryIcon />,
+        },
         open: false,
         contentFunction: (element: HTMLElement) => {
           const root = ReactDOM.createRoot(element);

src/extensible-areas/action-button-dropdown-item/component.ts

@@ -2,6 +2,7 @@ import { ActionButtonDropdownItemType } from './enums';
 import {
   ActionButtonDropdownInterface, ActionButtonDropdownOptionProps,
 } from './types';
+import { PluginIconType } from '../common/icon';
 
 // ActionButtonDropdown Extensible Area
 
@@ -12,7 +13,7 @@ export class ActionButtonDropdownOption implements ActionButtonDropdownInterface
 
   label: string;
 
-  icon: string;
+  icon: PluginIconType;
 
   tooltip: string;
 

src/extensible-areas/action-button-dropdown-item/types.ts

@@ -1,15 +1,16 @@
 import { PluginProvidedUiItemDescriptor } from '../base';
+import { PluginIconType } from '../common/icon';
 
 /**
  * Interface for a generic item for the action button dropdown.
  */
-export interface ActionButtonDropdownInterface extends PluginProvidedUiItemDescriptor{
+export interface ActionButtonDropdownInterface extends PluginProvidedUiItemDescriptor {
 }
 
 export interface ActionButtonDropdownOptionProps {
   id?: string;
   label: string;
-  icon: string;
+  icon: PluginIconType;
   tooltip: string;
   dataTest?: string;
   allowed: boolean;

src/extensible-areas/actions-bar-item/component.ts

@@ -9,8 +9,8 @@ import {
   SelectOption,
   ToggleGroupOption,
   ActionsBarToggleGroupProps,
-  ActionsBarIconType,
 } from './types';
+import { PluginIconType } from '../common/icon';
 
 // ActionsBar Extensible Area
 
@@ -34,13 +34,13 @@ class ActionsBarItem implements ActionsBarInterface {
     this.dataTest = dataTest;
   }
 
-  setItemId(id: string):void {
+  setItemId(id: string): void {
     this.id = `ActionsBar${this.type}_${id}`;
   }
 }
 
 export class ActionsBarButton extends ActionsBarItem {
-  icon: ActionsBarIconType;
+  icon: PluginIconType;
 
   tooltip: string;
 
@@ -63,7 +63,7 @@ export class ActionsBarButton extends ActionsBarItem {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5)
    */
   constructor({
-    id, icon, tooltip = '', dataTest = '', onClick = () => {}, position = ActionsBarPosition.RIGHT,
+    id, icon, tooltip = '', dataTest = '', onClick = () => { }, position = ActionsBarPosition.RIGHT,
     color = 'primary',
   }: ActionsBarButtonProps) {
     super({
@@ -78,7 +78,7 @@ export class ActionsBarButton extends ActionsBarItem {
 }
 
 export class ActionsBarSeparator extends ActionsBarItem {
-  icon: string;
+  icon: PluginIconType;
 
   /**
    * Returns object to be used in the setter for action bar. In this case,
@@ -134,7 +134,7 @@ export class ActionsBarSelector extends ActionsBarItem {
     options = [],
     defaultOption = options[0],
     dataTest = '',
-    onChange = () => {},
+    onChange = () => { },
     position = ActionsBarPosition.RIGHT,
     width = 140,
   }: ActionsBarSelectorProps) {
@@ -184,7 +184,7 @@ export class ActionsBarToggleGroup extends ActionsBarItem {
     options = [],
     defaultOption = options[0],
     dataTest = '',
-    onChange = () => {},
+    onChange = () => { },
     position = ActionsBarPosition.RIGHT,
   }: ActionsBarToggleGroupProps) {
     super({

src/extensible-areas/actions-bar-item/types.ts

@@ -1,6 +1,7 @@
 import { ChangeEvent, MouseEvent } from 'react';
 import { PluginProvidedUiItemDescriptor } from '../base';
 import { ActionsBarItemType, ActionsBarPosition } from './enums';
+import { PluginIconType } from '../common/icon';
 
 /**
  * Interface for the generic Actions bar item. (`position` is mandatory)
@@ -16,22 +17,9 @@ export interface ActionsBarItemProps {
   dataTest?: string;
 }
 
-export interface ActionsBarButtonIconSvg {
-  svgContent: React.SVGProps<SVGSVGElement>;
-}
-
-export interface ActionsBarButtonIconName {
-  /**
-   * Default icon name defined by BBB (see options there).
-   */
-  iconName: string;
-}
-
-export type ActionsBarIconType = ActionsBarButtonIconSvg | ActionsBarButtonIconName
-
 export interface ActionsBarButtonProps {
   id?: string;
-  icon: ActionsBarIconType;
+  icon: PluginIconType;
   tooltip: string;
   position: ActionsBarPosition;
   dataTest?: string;
@@ -41,7 +29,7 @@ export interface ActionsBarButtonProps {
 
 export interface ActionsBarSeparatorProps {
   position: ActionsBarPosition;
-  icon?: string;
+  icon?: PluginIconType;
   dataTest?: string;
 }
 

src/extensible-areas/audio-settings-dropdown-item/component.ts

@@ -2,6 +2,7 @@ import { AudioSettingsDropdownItemType } from './enums';
 import {
   AudioSettingsDropdownInterface, AudioSettingsDropdownOptionProps,
 } from './types';
+import { PluginIconType } from '../common/icon';
 
 // AudioSettingsDropdown Extensible Area
 
@@ -12,7 +13,7 @@ export class AudioSettingsDropdownOption implements AudioSettingsDropdownInterfa
 
   label: string;
 
-  icon: string;
+  icon: PluginIconType;
 
   dataTest: string;
 

src/extensible-areas/audio-settings-dropdown-item/types.ts

@@ -1,4 +1,5 @@
 import { PluginProvidedUiItemDescriptor } from '../base';
+import { PluginIconType } from '../common/icon';
 
 /**
  * Audio Settings Dropdown Item - The general Audio settings extensible area
@@ -7,13 +8,13 @@ import { PluginProvidedUiItemDescriptor } from '../base';
  * To make this dropdown appear, the user needs to enter with audio, either listen only
  * or microphone. This will make a small downward arrow appear (chevron).
  */
-export interface AudioSettingsDropdownInterface extends PluginProvidedUiItemDescriptor{
+export interface AudioSettingsDropdownInterface extends PluginProvidedUiItemDescriptor {
 }
 
 export interface AudioSettingsDropdownOptionProps {
   id?: string;
   label: string;
-  icon: string;
+  icon: PluginIconType;
   dataTest?: string;
   onClick: () => void;
 }

src/extensible-areas/camera-settings-dropdown-item/component.ts

@@ -2,6 +2,7 @@ import { CameraSettingsDropdownItemType } from './enums';
 import {
   CameraSettingsDropdownInterface, CameraSettingsDropdownOptionProps,
 } from './types';
+import { PluginIconType } from '../common/icon';
 
 // CameraSettingsDropdown Extensible Area
 
@@ -12,7 +13,7 @@ export class CameraSettingsDropdownOption implements CameraSettingsDropdownInter
 
   label: string;
 
-  icon: string;
+  icon: PluginIconType;
 
   dataTest: string = '';
 
@@ -30,7 +31,7 @@ export class CameraSettingsDropdownOption implements CameraSettingsDropdownInter
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    id, label = '', icon = '', dataTest = '', onClick = () => {},
+    id, label = '', icon = '', dataTest = '', onClick = () => { },
   }: CameraSettingsDropdownOptionProps) {
     if (id) {
       this.id = id;

src/extensible-areas/camera-settings-dropdown-item/types.ts

@@ -1,4 +1,5 @@
 import { PluginProvidedUiItemDescriptor } from '../base';
+import { PluginIconType } from '../common/icon';
 
 /**
  * Camera Settings Dropdown Item - The general Camera settings extensible area
@@ -7,13 +8,13 @@ import { PluginProvidedUiItemDescriptor } from '../base';
  * To make this dropdown appear, the user needs to enter with webcam.
  * This will make a small downward arrow appear in the camera icon (the chevron).
  */
-export interface CameraSettingsDropdownInterface extends PluginProvidedUiItemDescriptor{
+export interface CameraSettingsDropdownInterface extends PluginProvidedUiItemDescriptor {
 }
 
 export interface CameraSettingsDropdownOptionProps {
   id?: string;
   label: string;
-  icon: string;
+  icon: PluginIconType;
   dataTest?: string;
   onClick: () => void;
 }

src/extensible-areas/common/icon/index.ts

@@ -0,0 +1 @@
+export * from './types';

src/extensible-areas/common/icon/types.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export interface PluginIconName {
+  iconName: string;
+}
+
+export interface PluginIconSvgContent {
+  svgContent: React.SVGProps<SVGSVGElement>;
+}
+
+export type PluginIconType = string | PluginIconName | PluginIconSvgContent;

src/extensible-areas/common/index.ts

@@ -0,0 +1 @@
+export * from './icon';

src/extensible-areas/generic-content-item/component.ts

@@ -1,6 +1,7 @@
 import * as ReactDOM from 'react-dom/client';
 import { GenericContentType } from './enums';
 import { GenericContentInterface, GenericContentMainAreaProps, GenericContentSidekickAreaProps } from './types';
+import { PluginIconType } from '../common/icon';
 
 // GenericContent Extensible Area
 
@@ -48,7 +49,7 @@ export class GenericContentSidekickArea implements GenericContentInterface {
 
   section: string = '';
 
-  buttonIcon: string = '';
+  buttonIcon: PluginIconType = '';
 
   open: boolean = false;
 

src/extensible-areas/generic-content-item/types.ts

@@ -1,5 +1,6 @@
 import * as ReactDOM from 'react-dom/client';
 import { PluginProvidedUiItemDescriptor } from '../base';
+import { PluginIconType } from '../common/icon';
 
 export interface GenericContentInterface extends PluginProvidedUiItemDescriptor {
 }
@@ -15,7 +16,7 @@ export interface GenericContentSidekickAreaProps {
   contentFunction: (element: HTMLElement) => ReactDOM.Root;
   name: string;
   section: string;
-  buttonIcon: string;
+  buttonIcon: PluginIconType;
   open: boolean;
   dataTest?: string;
 }

src/extensible-areas/index.ts

@@ -1,3 +1,4 @@
+export * from './common/icon';
 export * from './presentation-toolbar-item';
 export * from './user-list-dropdown-item';
 export * from './action-button-dropdown-item';

src/extensible-areas/nav-bar-item/component.ts

@@ -3,6 +3,7 @@ import {
   NavBarInterface, NavBarButtonProps,
   NavBarInfoProps,
 } from './types';
+import { PluginIconType } from '../common/icon';
 
 // NavBar Extensible Area
 
@@ -13,7 +14,7 @@ export class NavBarButton implements NavBarInterface {
 
   label: string;
 
-  icon: string;
+  icon: PluginIconType;
 
   tooltip: string;
 
@@ -45,7 +46,7 @@ export class NavBarButton implements NavBarInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    id, label = '', icon = '', tooltip = '', disabled = true, dataTest = '', onClick = () => {},
+    id, label = '', icon = '', tooltip = '', disabled = true, dataTest = '', onClick = () => { },
     position = NavBarItemPosition.RIGHT, hasSeparator = true,
   }: NavBarButtonProps) {
     if (id) {

src/extensible-areas/nav-bar-item/types.ts

@@ -1,15 +1,16 @@
 import { PluginProvidedUiItemDescriptor } from '../base';
 import { NavBarItemPosition } from './enums';
+import { PluginIconType } from '../common/icon';
 
-export interface NavBarInterface extends PluginProvidedUiItemDescriptor{
+export interface NavBarInterface extends PluginProvidedUiItemDescriptor {
   position: NavBarItemPosition;
   hasSeparator: boolean;
 }
 
 export interface NavBarButtonProps {
   id?: string;
   label: string;
-  icon: string;
+  icon: PluginIconType;
   tooltip: string;
   disabled: boolean;
   hasSeparator: boolean;

src/extensible-areas/options-dropdown-item/component.ts

@@ -2,6 +2,7 @@ import { OptionsDropdownItemType } from './enums';
 import {
   OptionsDropdownInterface, OptionsDropdownOptionProps,
 } from './types';
+import { PluginIconType } from '../common/icon';
 
 // OptionsDropdown Extensible Area
 
@@ -12,7 +13,7 @@ export class OptionsDropdownOption implements OptionsDropdownInterface {
 
   label: string;
 
-  icon: string;
+  icon: PluginIconType;
 
   dataTest: string;
 
@@ -30,7 +31,7 @@ export class OptionsDropdownOption implements OptionsDropdownInterface {
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    id, label = '', icon = '', dataTest = '', onClick = () => {},
+    id, label = '', icon = '', dataTest = '', onClick = () => { },
   }: OptionsDropdownOptionProps) {
     if (id) {
       this.id = id;