feat(options): add attributes for hiding options

pages/views/samples/image.njk

@@ -2,10 +2,10 @@
 title: Example with image
 ---
 
-<uip-root settings-collapsed>
+<uip-root editor-collapsed>
   <uip-header>
     <uip-snippets></uip-snippets>
-    <uip-options></uip-options>
+    <uip-options hide-theme hide-direction></uip-options>
   </uip-header>
   <script type="text/html" uip-snippet label="Image">
     <img class="demo-img" alt="patrick" src="{{ '/assets/patrick.png' | url }}">
@@ -16,7 +16,7 @@ title: Example with image
     </a>
   </script>
   <uip-preview></uip-preview>
-  <uip-settings target=".demo-img" class="collapsed">
+  <uip-settings target=".demo-img">
     <uip-text-setting label="Source" attribute="src"></uip-text-setting>
     <uip-text-setting label="Alternative text" attribute="alt"></uip-text-setting>
     <uip-slider-setting label="Height" attribute="height" min="0" max="1000"></uip-slider-setting>

src/plugins/options/README.md

@@ -5,21 +5,25 @@ Extends [UIPPlugin](src/core/base/README.md#uip-plugin).
 
 ## Description:
 
-**UIPOptions** component supports three settings: **theme**, **mode** and **direction**.
+**UIPOptions** component supports four options:
 
-- **Theme** can be *light* (default) and *dark*. It sets color theme for other elements.
-- **Mode** can be *vertical* (default) and *horizontal*. It controls UIP container's layout.
-- **Direction** can be *ltr* (default) and *rtl*. It changes the direction of preview's content.
+- **Theme** option toggles *light/dark* theme for UIP components. It uses root's *dark-theme* attribute and
+can be hidden with *hide-theme* options' attribute.
+- **Direction** option is used to change [UIPPreview](src/core/preview/README.md) content direction (*rtl/ltr*). It uses root's *rtl-direction* attribute and can be hidden with *hide-direction* options' attribute.
+- **Settings** option collapses/expands [UIPSettings](src/plugins/settings/README.md) plugin. It uses root's *settings-collapsed*
+attribute and can be hidden with *hide-settings* options' attribute.
+- **Editor** option collapses/expands [UIPEditor](src/plugins/editor/README.md) plugin. It uses root's *editor-collapsed*
+attribute and can be hidden with *hide-editor* options' attribute.
 
 These options can be manually set (and observed) with corresponding attributes:
 
 ```html
-<uip-root mode="horizontal" theme="dark" direction="rtl"></uip-root>
+<uip-root rtl-direction dark-theme></uip-root>
 ```
 
 **UIPOptions** element doesn't produce or observe UIPStateModel changes.
 
 ## Example:
 ```html
-<uip-options label="Options:"></uip-options>
+<uip-options hide-theme hide-settings></uip-options>
 ```

src/plugins/options/option/option.ts

@@ -4,12 +4,17 @@ import {ESLImage} from '@exadel/esl/modules/esl-image/core';
 import {EventUtils} from '@exadel/esl/modules/esl-utils/dom/events';
 import {ENTER} from '@exadel/esl/modules/esl-utils/dom/keys';
 
+/** Config used to create options. */
 export type OptionConfig = {
+    /** Attribute to toggle. */
     attribute: string;
+    /** Location of option's icon. */
     iconUrl: string;
+    /** Callback to indicate if option should be rendered. */
     canActivate?: () => boolean;
 };
 
+/** Custom element to toggle {@link UIPRoot} attributes. */
 export class UIPOption extends ESLBaseElement {
     static is = 'uip-option';
     @attr() public attribute: string;

src/plugins/options/options.ts

@@ -10,24 +10,29 @@ import {OptionConfig, UIPOption} from './option/option';
 export class UIPOptions extends UIPPlugin {
   static is = 'uip-options';
   options: Map<string, UIPOption>;
-  UIPOptionsConfig: OptionConfig[] = [
+  /** List of configs to create options. */
+  protected UIPOptionsConfig: OptionConfig[] = [
     {
       attribute: 'dark-theme',
       iconUrl: '../../static/icons/theme.svg',
+      canActivate: () => !this.hasAttribute('hide-theme')
     },
     {
       attribute: 'rtl-direction',
-      iconUrl: '../../static/icons/rtl.svg'
+      iconUrl: '../../static/icons/rtl.svg',
+      canActivate: () => !this.hasAttribute('hide-direction')
     },
     {
       attribute: 'settings-collapsed',
       iconUrl: '../../static/icons/settings.svg',
-      canActivate: () => !!this.root?.querySelector('uip-settings')
+      canActivate: () => !this.hasAttribute('hide-settings') &&
+      !!this.root?.querySelector('uip-settings')
     },
     {
       attribute: 'editor-collapsed',
       iconUrl: '../../static/icons/editor.svg',
-      canActivate: () => !!this.root?.querySelector('uip-editor')
+      canActivate: () => !this.hasAttribute('hide-editor') &&
+      !!this.root?.querySelector('uip-editor')
     }
   ];