refactor(uip-editor): fework compact design and fix small inconsistency in editor section behaviour

Author: ala-n

Diff for: src/plugins/editor/editor.header.less

@@ -22,11 +22,24 @@ html {
     padding: 2px 10px;
   }
 
+  &-icon {
+    display: inline-flex;
+    width: 1.5rem;
+    height: 1.25rem;
+    margin-inline-end: 5px;
+
+    > svg {
+      fill: currentColor;
+      stroke: currentColor;
+    }
+  }
+
   &-title {
     margin-inline-end: auto;
   }
 
   &-title:not(:empty) {
+    line-height: 1em;
     padding: 5px;
   }
 
@@ -35,6 +48,7 @@ html {
     width: 25px;
     height: 25px;
     z-index: 2;
+    justify-content: flex-end;
   }
 
   &-trigger {
@@ -51,28 +65,18 @@ html {
     appearance: none;
   }
 
-  &.no-label {
+  [compact] & {
+    padding: 2px 4px;
     background: transparent;
+    border-top: none;
     justify-content: center;
   }
-
-  &.no-label &-title {
-    display: none;
+  [compact] &-icon {
+    margin: 0 auto;
   }
-
-  &.no-label &-trigger {
-    left: 50%;
-    width: 100px;
-    transform: translateX(-50%);
-
-    background: var(--uip-editor-header-bg, transparent);
-    border-radius: 50px 50px 0 0;
-    opacity: 0.5;
-    transition: opacity 0.3s ease-in-out;
-
-    &:hover {
-      opacity: 1;
-    }
+  [compact] &-title,
+  [compact] &::after {
+    display: none;
   }
 
   [collapsible] &::after {

Diff for: src/plugins/editor/editor.icon.tsx

@@ -0,0 +1,8 @@
+/* eslint-disable-file max-len */
+import React from 'jsx-dom';
+
+export const EditorIcon = (): SVGElement => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="#1f1f1f" viewBox="0 0 34 20">
+    <path stroke="none" d="m3.094 10.453 7.336 2.965v2.297L.844 11.273v-1.71l9.586-4.43V7.43l-7.336 3.023Zm11.191 9.012h-1.863L19.547.938h1.851l-7.113 18.527Zm17.133-9.082-7.746-3.035V5.12l10.008 4.43v1.71l-10.008 4.442v-2.25l7.746-3.07Z"/>
+  </svg>
+) as SVGElement;

Diff for: src/plugins/editor/editor.tsx

@@ -11,19 +11,24 @@ import {debounce} from '@exadel/esl/modules/esl-utils/async/debounce';
 import {bind, boolAttr, decorate, listen, memoize} from '@exadel/esl/modules/esl-utils/decorators';
 
 import {UIPPlugin} from '../../core/base/plugin';
-import {UIPOptionIcons} from '../header/options/option-icons';
+import {CopyIcon} from '../copy/uip-copy.icon';
+
+import {EditorIcon} from './editor.icon';
 
 /**
  * Editor {@link UIPPlugin} custom element definition
  * Uses Codejar code editor to provide an ability to modify UIP state markup
  */
 export class UIPEditor extends UIPPlugin {
   public static override is = 'uip-editor';
-  public static override observedAttributes = ['collapsible', 'copy', 'label'];
+  public static override observedAttributes = ['collapsible', 'compact', 'copy', 'label'];
 
   /** Highlight method declaration  */
   public static highlight = (editor: HTMLElement): void => Prism.highlightElement(editor, false);
 
+  /** Marker to make header compact */
+  @boolAttr() public compact: boolean;
+
   /** Marker to collapse editor area */
   @boolAttr() public collapsed: boolean;
 
@@ -38,9 +43,10 @@ export class UIPEditor extends UIPPlugin {
   protected get $header(): HTMLElement {
     const type = this.constructor as typeof UIPEditor;
     return (
-      <div class={type.is + '-header ' + (this.label ? '' : 'no-label')}>
+      <div class={type.is + '-header '}>
+        <span class={type.is + '-header-icon'} title={this.label}><EditorIcon/></span>
         <span class={type.is + '-header-title'}>{this.label}</span>
-        {this.showCopy ? <uip-copy class={type.is + '-header-copy'}>{UIPOptionIcons.copySVG}</uip-copy> : ''}
+        {this.showCopy ? <uip-copy class={type.is + '-header-copy'}><CopyIcon/></uip-copy> : ''}
         {this.collapsible ? <button class={type.is + '-header-trigger'} aria-label="Collapse/expand"/> : ''}
       </div>
     ) as HTMLElement;
@@ -105,6 +111,7 @@ export class UIPEditor extends UIPPlugin {
 
   protected override attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
     super.attributeChangedCallback(attrName, oldVal, newVal);
+    this.root?.classList.toggle(UIPEditor.is + '-compact', this.compact);
     this.$header.remove();
     memoize.clear(this, '$header');
     this.insertAdjacentElement('afterbegin', this.$header);