refactor: rework plugins implementation using toolbar concept

pages/views/index.njk

@@ -24,7 +24,7 @@ isLandingPage: true
     </script>
     <uip-preview></uip-preview>
 
-    <uip-settings collapsible vertical="@+sm" target=".logo-content">
+    <uip-settings collapsible vertical="@+sm" target=".logo-content" theme-toggle dir-toggle>
       <uip-text-setting label="Alternative Button Text:" target=".get-started" attribute="data-test-msg"></uip-text-setting>
       <uip-slider-setting label="Width:" target=".logo-content svg" attribute="width" min="100" max="500"></uip-slider-setting>
       <uip-select-setting label="Color:" attribute="class" mode="append">

src/core/panel/plugin-panel.header.less

@@ -51,4 +51,12 @@
     box-shadow: none;
     appearance: none;
   }
+
+  &-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    z-index: 2;
+  }
 }

src/core/panel/plugin-panel.horizontal.less

@@ -35,6 +35,11 @@
     border-block: 1px solid var(--uip-plugin-divider, transparent);
   }
 
+  .uip-plugin-header-toolbar {
+    gap: 0.75rem;
+    margin-inline-end: 0.25rem;
+  }
+
   &[collapsible] .uip-plugin-header::after {
     content: '';
     justify-self: flex-end;

src/core/panel/plugin-panel.tsx

@@ -1,7 +1,9 @@
+import React from 'jsx-dom';
+
 import {CSSClassUtils} from '@exadel/esl/modules/esl-utils/dom';
 import {skipOneRender} from '@exadel/esl/modules/esl-utils/async';
 import {ESLMediaQuery} from '@exadel/esl/modules/esl-media-query/core';
-import {attr, boolAttr, listen} from '@exadel/esl/modules/esl-utils/decorators';
+import {attr, boolAttr, listen, memoize} from '@exadel/esl/modules/esl-utils/decorators';
 
 import {UIPPlugin} from '../base/plugin';
 
@@ -21,6 +23,33 @@ export class UIPPluginPanel extends UIPPlugin {
   /** Marker to make plugin panel vertical */
   @attr({defaultValue: 'not all'}) public vertical: string;
 
+
+  /** Plugin header icon */
+  protected get $icon(): JSX.Element | null {
+    return null;
+  }
+
+  /** Plugin header additional buttons section */
+  protected get $toolbar(): HTMLElement | null {
+    return null;
+  }
+
+  /** Header section block */
+  @memoize()
+  protected get $header(): HTMLElement {
+    const type = this.constructor as typeof UIPPluginPanel;
+    const a11yLabel = this.collapsible ? 'Collapse/expand' + this.label : this.label;
+    const hasToolbar = this.$toolbar?.children.length;
+    return (
+      <div class={type.is + '-header uip-plugin-header' + (this.label ? '' : ' no-label') + (hasToolbar ? ' has-toolbar' : '')}>
+        {this.$icon ? <span class="uip-plugin-header-icon" title={this.label}>{this.$icon}</span> : ''}
+        <span class="uip-plugin-header-title">{this.label}</span>
+        {this.collapsible ? <button type="button" class="uip-plugin-header-trigger" aria-label={a11yLabel} title={a11yLabel}/> : ''}
+        {hasToolbar ? this.$toolbar : ''}
+      </div>
+    ) as HTMLElement;
+  }
+
   protected override connectedCallback(): void {
     super.connectedCallback();
     this.classList.add('uip-plugin-panel');

src/core/panel/plugin-panel.vertical.less

@@ -4,7 +4,7 @@
 
   grid-area: sidebar;
   flex-direction: row;
-  min-height: 100%;
+  min-height: max(100%, 100px);
 
   .uip-plugin-inner {
     width: 250px;
@@ -34,10 +34,19 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    padding: 10px 4px;
+    padding: 2px 4px;
     border-inline-end: 1px solid var(--uip-plugin-divider-v, transparent);
   }
 
+  .uip-plugin-header-toolbar {
+    position: absolute;
+    flex-direction: column;
+    top: 0;
+    left: 0;
+    right: 0;
+    gap: 0.5rem;
+  }
+
   .uip-plugin-header-title {
     display: none;
   }

src/plugins/direction/uip-dir.icon.tsx

@@ -1,9 +1,9 @@
 import React from 'jsx-dom';
 
-export const UIPDirIcon = (): Element => (
+export const UIPDirIcon = (): JSX.Element => (
   <div class="uip-dir-icon">
     <span>L</span>
     <span>T</span>
     <span>R</span>
   </div>
-) as Element;
+);

src/plugins/direction/uip-dir.less

@@ -3,10 +3,13 @@ uip-toggle-dir {
   display: none;
   cursor: pointer;
   .uip-root &.uip-toggle-dir {
-    display: inline-block;
+    display: inline-flex;
   }
 
-  height: 1em;
+  align-items: center;
+  justify-content: center;
+
+  height: 1.5rem;
   line-height: 1em;
 
   svg {
@@ -24,4 +27,5 @@ uip-toggle-dir {
   pointer-events: none;
   font-weight: 500;
   letter-spacing: -1px;
+  margin: 0 0 0 -2px;
 }

src/plugins/editor/editor.less

@@ -8,14 +8,10 @@
     padding: 1em;
   }
 
-  &-header {
-    &-copy {
-      position: relative;
-      width: 25px;
-      height: 25px;
-      z-index: 2;
-      justify-content: flex-end;
-    }
+  &-header-copy {
+    position: relative;
+    width: 25px;
+    height: 25px;
   }
 
   &-container {

src/plugins/editor/editor.tsx

@@ -29,16 +29,16 @@ export class UIPEditor extends UIPPluginPanel {
   /** Marker to display copy widget */
   @boolAttr({name: 'copy'}) public showCopy: boolean;
 
-  /** Header section block */
+  protected override get $icon(): JSX.Element {
+    return <EditorIcon/>;
+  }
+
   @memoize()
-  protected get $header(): HTMLElement {
+  protected override get $toolbar(): HTMLElement {
     const type = this.constructor as typeof UIPEditor;
     return (
-      <div class={type.is + '-header uip-plugin-header'}>
-        <span class="uip-plugin-header-icon" title={this.label}><EditorIcon/></span>
-        <span class="uip-plugin-header-title">{this.label}</span>
+      <div class={type.is + '-toolbar uip-plugin-header-toolbar'}>
         {this.showCopy ? <uip-copy class={type.is + '-header-copy'}><CopyIcon/></uip-copy> : ''}
-        {this.collapsible ? <button class="uip-plugin-header-trigger" aria-label="Collapse/expand"/> : ''}
       </div>
     ) as HTMLElement;
   }

src/plugins/settings/settings.less

@@ -38,6 +38,11 @@ uip-settings {
     }
   }
 
+  &-toolbar-option {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
   .uip-editor-compact & .uip-settings-header {
     margin-bottom: -30px;
   }

src/plugins/settings/settings.tsx

@@ -1,9 +1,12 @@
 import React from 'jsx-dom';
 
 import {debounce} from '@exadel/esl/modules/esl-utils/async/debounce';
-import {attr, decorate, listen, memoize} from '@exadel/esl/modules/esl-utils/decorators';
+import {attr, boolAttr, decorate, listen, memoize, prop} from '@exadel/esl/modules/esl-utils/decorators';
 
 import {UIPPluginPanel} from '../../core/panel/plugin-panel';
+import {UIPDirIcon} from '../direction/uip-dir.icon';
+import {UIPThemeIcon} from '../theme/uip-theme.icon';
+
 import {UIPSetting} from './base-setting/base-setting';
 import {SettingsIcon} from './settings.icon';
 
@@ -17,18 +20,20 @@ export class UIPSettings extends UIPPluginPanel {
   /** Attribute to set all inner {@link UIPSetting} settings' {@link UIPSetting#target} targets */
   @attr() public target: string;
 
-  /** Header section block */
+  @boolAttr() public dirToggle: boolean;
+  @boolAttr() public themeToggle: boolean;
+
+  protected override get $icon(): JSX.Element {
+    return <SettingsIcon/>;
+  }
+
   @memoize()
-  protected get $header(): HTMLElement {
+  protected override get $toolbar(): HTMLElement {
     const type = this.constructor as typeof UIPSettings;
-    const a11yLabel = this.collapsible ? 'Collapse/expand' + this.label : this.label;
-    return (
-      <div class={type.is + '-header uip-plugin-header ' + (this.label ? '' : 'no-label')}>
-        <span class="uip-plugin-header-icon" title={this.label}><SettingsIcon/></span>
-        <span class="uip-plugin-header-title">{this.label}</span>
-        {this.collapsible ? <button type="button" class="uip-plugin-header-trigger" aria-label={a11yLabel} title={a11yLabel}/> : ''}
-      </div>
-    ) as HTMLElement;
+    return (<div class={type.is + '-toolbar uip-plugin-header-toolbar'}>
+      {this.dirToggle ? <uip-toggle-dir class={type.is + '-toolbar-option'}><UIPDirIcon/></uip-toggle-dir> : ''}
+      {this.themeToggle ? <uip-toggle-theme class={type.is + '-toolbar-option'}><UIPThemeIcon/></uip-toggle-theme> : ''}
+    </div>) as HTMLElement;
   }
 
   @memoize()

src/plugins/theme/uip-theme.less

@@ -5,8 +5,8 @@ uip-toggle-theme {
     display: inline-flex;
   }
 
-  width: 1em;
-  height: 1em;
+  width: 1.5rem;
+  height: 1.5rem;
 
   svg {
     width: 100%;