docs: add code examples for Tree Select, Tree Autocomplete, Tooltip

projects/composition/src/app/pages/tooltip-page/tooltip-page.component.html

@@ -1,9 +1,8 @@
 <app-component-docs-viewer [componentData]="componentData">
   <!-- Example of component's usage -->
-  <div class="tooltip-elems-group">
-    <div class="tooltip-elems-group-title">
-      Different tooltip positions (auto repositioning if doesn't fit the screen)
-    </div>
+  <app-code-example
+    label="Different tooltip positions (auto repositioning if doesn't fit the screen)"
+    [htmlCode]="examples.tooltipPositions.html">
     <div class="tooltip-elems-group-row">
       <cps-button
         cpsTooltip="Bottom tooltip"
@@ -26,10 +25,11 @@
         label="Top tooltip">
       </cps-button>
     </div>
-  </div>
+  </app-code-example>
 
-  <div class="tooltip-elems-group">
-    <div class="tooltip-elems-group-title">Different opening methods</div>
+  <app-code-example
+    label="Different opening methods"
+    [htmlCode]="examples.openingMethods.html">
     <div class="tooltip-elems-group-elem-left">
       <cps-button
         label="Open on hover"
@@ -44,10 +44,11 @@
         tooltipOpenOn="click">
       </cps-button>
     </div>
-  </div>
+  </app-code-example>
 
-  <div class="tooltip-elems-group">
-    <div class="tooltip-elems-group-title">Long open and close delays</div>
+  <app-code-example
+    label="Long open and close delays"
+    [htmlCode]="examples.openCloseDelays.html">
     <div class="tooltip-elems-group-elem-left">
       <cps-button
         cpsTooltip="1 second open delay"
@@ -62,23 +63,24 @@
         [tooltipCloseDelay]="1000">
       </cps-button>
     </div>
-  </div>
+  </app-code-example>
 
-  <div class="tooltip-elems-group">
-    <div class="tooltip-elems-group-title">
-      Persistent tooltip with inner HTML and custom style
-    </div>
+  <app-code-example
+    label="Persistent tooltip with inner HTML and custom style"
+    [htmlCode]="examples.persistentHtmlTooltip.html">
     <cps-button
       cpsTooltip="<span class='ttip-hdr'>Follow the link</span> <a href='https://www.google.com/' target='_blank' rel='noopener noreferrer'>Google</a> <a href='https://www.bing.com/' target='_blank' rel='noopener noreferrer'>Bing</a>"
       tooltipPosition="right"
       tooltipContentClass="my-tooltip-content"
       label="Tooltip with clickable content"
       [tooltipPersistent]="true">
     </cps-button>
-  </div>
+  </app-code-example>
 
-  <div class="tooltip-elems-group">
-    <div class="tooltip-elems-group-title">Tooltip disabled state</div>
+  <app-code-example
+    label="Tooltip disabled state"
+    [htmlCode]="examples.disabledTooltipState.html"
+    [tsCode]="examples.disabledTooltipState.ts">
     <div class="tooltip-elems-group-elem-left">
       <cps-button
         tooltipPosition="bottom"
@@ -90,5 +92,5 @@
         [(ngModel)]="ttipEnabled"
         [label]="ttipEnabled ? 'Deactivate' : 'Activate'"></cps-checkbox>
     </div>
-  </div>
+  </app-code-example>
 </app-component-docs-viewer>

projects/composition/src/app/pages/tooltip-page/tooltip-page.component.scss

@@ -1,33 +1,18 @@
 :host {
-  .tooltip-elems-group {
-    margin-bottom: 2rem;
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
-
-    &-title {
-      font-size: 1.5rem;
-      color: var(--cps-color-depth);
-      border-bottom: 0.0625rem solid lightgrey;
-      margin-bottom: 0.75rem;
-      padding-bottom: 0.5rem;
-      font-weight: 600;
-    }
-    &-elem-left {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.75rem 2.5rem;
-      align-items: center;
-    }
+  .tooltip-elems-group-elem-left {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem 2.5rem;
+    align-items: center;
+  }
 
-    &-row {
-      width: 100%;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      gap: 0.75rem;
-      margin-bottom: 1.125rem;
-      align-items: center;
-    }
+  .tooltip-elems-group-row {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 0.75rem;
+    align-items: center;
   }
 }
 

projects/composition/src/app/pages/tooltip-page/tooltip-page.component.ts

@@ -5,10 +5,10 @@ import {
   CpsCheckboxComponent,
   CpsTooltipDirective
 } from 'cps-ui-kit';
-
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
-
+import { CodeExampleComponent } from '../../components/code-example/code-example.component';
 import ComponentData from '../../api-data/cps-tooltip.json';
+import { tooltipExamples } from './tooltip-page.examples';
 
 @Component({
   selector: 'tooltip-page',
@@ -17,7 +17,8 @@ import ComponentData from '../../api-data/cps-tooltip.json';
     CpsButtonComponent,
     CpsTooltipDirective,
     CpsCheckboxComponent,
-    ComponentDocsViewerComponent
+    ComponentDocsViewerComponent,
+    CodeExampleComponent
   ],
   templateUrl: './tooltip-page.component.html',
   styleUrls: ['./tooltip-page.component.scss'],
@@ -26,4 +27,5 @@ import ComponentData from '../../api-data/cps-tooltip.json';
 export class TooltipPageComponent {
   componentData = ComponentData;
   ttipEnabled = false;
+  readonly examples = tooltipExamples;
 }

projects/composition/src/app/pages/tooltip-page/tooltip-page.examples.ts

@@ -0,0 +1,83 @@
+export const tooltipExamples: Record<string, { html: string; ts?: string }> = {
+  tooltipPositions: {
+    html: `
+<cps-button
+  cpsTooltip="Bottom tooltip"
+  tooltipPosition="bottom"
+  label="Bottom tooltip">
+</cps-button>
+<cps-button
+  cpsTooltip="Left tooltip"
+  tooltipPosition="left"
+  label="Left tooltip">
+</cps-button>
+<cps-button
+  cpsTooltip="Right tooltip"
+  tooltipPosition="right"
+  label="Right tooltip">
+</cps-button>
+<cps-button
+  cpsTooltip="Top tooltip"
+  tooltipPosition="top"
+  label="Top tooltip">
+</cps-button>`
+  },
+
+  openingMethods: {
+    html: `
+<cps-button
+  label="Open on hover"
+  tooltipPosition="bottom"
+  cpsTooltip="Triggered on hover"
+  tooltipOpenOn="hover">
+</cps-button>
+<cps-button
+  label="Open on click"
+  tooltipPosition="right"
+  cpsTooltip="Triggered on click"
+  tooltipOpenOn="click">
+</cps-button>`
+  },
+
+  openCloseDelays: {
+    html: `
+<cps-button
+  cpsTooltip="1 second open delay"
+  label="Open delay"
+  tooltipPosition="bottom"
+  [tooltipOpenDelay]="1000">
+</cps-button>
+<cps-button
+  cpsTooltip="1 second close delay"
+  label="Close delay"
+  tooltipPosition="right"
+  [tooltipCloseDelay]="1000">
+</cps-button>`
+  },
+
+  persistentHtmlTooltip: {
+    html: `
+<cps-button
+  cpsTooltip="<span class='ttip-hdr'>Follow the link</span> <a href='https://www.google.com/' target='_blank' rel='noopener noreferrer'>Google</a> <a href='https://www.bing.com/' target='_blank' rel='noopener noreferrer'>Bing</a>"
+  tooltipPosition="right"
+  tooltipContentClass="my-tooltip-content"
+  label="Tooltip with clickable content"
+  [tooltipPersistent]="true">
+</cps-button>`
+  },
+
+  disabledTooltipState: {
+    html: `
+<cps-button
+  tooltipPosition="bottom"
+  [label]="ttipEnabled ? 'Enabled tooltip' : 'Disabled tooltip'"
+  [tooltipDisabled]="!ttipEnabled"
+  cpsTooltip="<span><strong>Some bold text</strong></span>">
+</cps-button>
+<cps-checkbox
+  [(ngModel)]="ttipEnabled"
+  [label]="ttipEnabled ? 'Deactivate' : 'Activate'"></cps-checkbox>`,
+    ts: `
+ttipEnabled = false;`
+  }
+};