docs: add code examples for Textarea, Timepicker, Tag, Switch

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

@@ -1,26 +1,52 @@
 <app-component-docs-viewer [componentData]="componentData">
   <!-- Example of component's usage -->
-  <div class="switches-group">
+  <app-code-example
+    label="Switch with tooltip"
+    [htmlCode]="examples.tooltipSwitch.html">
     <cps-switch
       label="Switch with tooltip"
       [value]="false"
       infoTooltip="Provide any information here">
     </cps-switch>
+  </app-code-example>
+
+  <app-code-example label="Basic switch" [htmlCode]="examples.basicSwitch.html">
     <cps-switch label="Basic switch" [value]="true"></cps-switch>
+  </app-code-example>
+
+  <app-code-example
+    label="Unlabeled switch"
+    [htmlCode]="examples.unlabeledSwitch.html">
     <cps-switch ariaLabel="Unlabeled switch" [value]="true"></cps-switch>
+  </app-code-example>
+
+  <app-code-example
+    label="Disabled switch checked"
+    [htmlCode]="examples.disabledCheckedSwitch.html">
     <cps-switch
       label="Disabled switch checked"
       [disabled]="true"
       [value]="true"></cps-switch>
+  </app-code-example>
+
+  <app-code-example
+    label="Disabled switch unchecked"
+    [htmlCode]="examples.disabledUncheckedSwitch.html">
     <cps-switch
       label="Disabled switch unchecked"
       [disabled]="true"
       [value]="false"></cps-switch>
+  </app-code-example>
+
+  <app-code-example
+    label="Two-way binding"
+    [htmlCode]="examples.twoWayBindingSwitch.html"
+    [tsCode]="examples.twoWayBindingSwitch.ts">
     <div class="sync-val-example">
       <cps-switch
         label="Switch with two-way binding"
         [(ngModel)]="syncVal"></cps-switch>
       <div class="sync-val">Is checked: {{ syncVal }}</div>
     </div>
-  </div>
+  </app-code-example>
 </app-component-docs-viewer>

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

@@ -1,10 +1,3 @@
-.switches-group {
-  gap: 2rem;
-  display: flex;
-  flex-direction: column;
-  margin-left: 0.5rem;
-}
-
 .sync-val-example {
   .sync-val {
     margin-top: 1rem;

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

@@ -1,16 +1,18 @@
 import { Component } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CpsSwitchComponent } from 'cps-ui-kit';
-
 import ComponentData from '../../api-data/cps-switch.json';
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
+import { CodeExampleComponent } from '../../components/code-example/code-example.component';
+import { switchExamples } from './switch-page.examples';
 
 @Component({
   imports: [
     CpsSwitchComponent,
     ReactiveFormsModule,
     FormsModule,
-    ComponentDocsViewerComponent
+    ComponentDocsViewerComponent,
+    CodeExampleComponent
   ],
   selector: 'app-switch-page',
   templateUrl: './switch-page.component.html',
@@ -20,4 +22,5 @@ import { ComponentDocsViewerComponent } from '../../components/component-docs-vi
 export class SwitchPageComponent {
   syncVal = true;
   componentData = ComponentData;
+  readonly examples = switchExamples;
 }

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

@@ -0,0 +1,48 @@
+export const switchExamples: Record<string, { html: string; ts?: string }> = {
+  tooltipSwitch: {
+    html: `
+<cps-switch
+  label="Switch with tooltip"
+  [value]="false"
+  infoTooltip="Provide any information here">
+</cps-switch>`
+  },
+
+  basicSwitch: {
+    html: `
+<cps-switch label="Basic switch" [value]="true"></cps-switch>`
+  },
+
+  unlabeledSwitch: {
+    html: `
+<cps-switch ariaLabel="Unlabeled switch" [value]="true"></cps-switch>`
+  },
+
+  disabledCheckedSwitch: {
+    html: `
+<cps-switch
+  label="Disabled switch checked"
+  [disabled]="true"
+  [value]="true"></cps-switch>`
+  },
+
+  disabledUncheckedSwitch: {
+    html: `
+<cps-switch
+  label="Disabled switch unchecked"
+  [disabled]="true"
+  [value]="false"></cps-switch>`
+  },
+
+  twoWayBindingSwitch: {
+    html: `
+<div class="sync-val-example">
+  <cps-switch
+    label="Switch with two-way binding"
+    [(ngModel)]="syncVal"></cps-switch>
+  <div class="sync-val">Is checked: {{ syncVal }}</div>
+</div>`,
+    ts: `
+syncVal = true;`
+  }
+};

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

@@ -1,8 +1,17 @@
 <app-component-docs-viewer [componentData]="componentData">
   <!-- Example of component's usage -->
-  <div class="tags-group">
+  <app-code-example label="Regular tag" [htmlCode]="examples.regularTag.html">
     <cps-tag color="warn" label="Regular tag"></cps-tag>
+  </app-code-example>
+
+  <app-code-example label="Disabled tag" [htmlCode]="examples.disabledTag.html">
     <cps-tag [disabled]="true" color="red" label="Disabled tag"></cps-tag>
+  </app-code-example>
+
+  <app-code-example
+    label="Selectable tag"
+    [htmlCode]="examples.selectableTag.html"
+    [tsCode]="examples.selectableTag.ts">
     <div class="sync-val-example">
       <cps-tag
         [selectable]="true"
@@ -12,5 +21,5 @@
 
       <div class="sync-val">Is selected: {{ syncVal }}</div>
     </div>
-  </div>
+  </app-code-example>
 </app-component-docs-viewer>

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

@@ -1,10 +1,3 @@
-.tags-group {
-  margin-left: 0.5rem;
-  gap: 2rem;
-  display: flex;
-  flex-direction: column;
-}
-
 .sync-val-example {
   .sync-val {
     margin-top: 1rem;

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

@@ -1,16 +1,18 @@
 import { Component } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CpsTagComponent } from 'cps-ui-kit';
-
 import ComponentData from '../../api-data/cps-tag.json';
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
+import { CodeExampleComponent } from '../../components/code-example/code-example.component';
+import { tagExamples } from './tag-page.examples';
 
 @Component({
   imports: [
     CpsTagComponent,
     ReactiveFormsModule,
     FormsModule,
-    ComponentDocsViewerComponent
+    ComponentDocsViewerComponent,
+    CodeExampleComponent
   ],
   selector: 'app-tag-page',
   templateUrl: './tag-page.component.html',
@@ -20,4 +22,5 @@ import { ComponentDocsViewerComponent } from '../../components/component-docs-vi
 export class TagPageComponent {
   syncVal = true;
   componentData = ComponentData;
+  readonly examples = tagExamples;
 }

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

@@ -0,0 +1,25 @@
+export const tagExamples: Record<string, { html: string; ts?: string }> = {
+  regularTag: {
+    html: `
+<cps-tag color="warn" label="Regular tag"></cps-tag>`
+  },
+
+  disabledTag: {
+    html: `
+<cps-tag [disabled]="true" color="red" label="Disabled tag"></cps-tag>`
+  },
+
+  selectableTag: {
+    html: `
+<div class="sync-val-example">
+  <cps-tag
+    [selectable]="true"
+    color="info"
+    [(ngModel)]="syncVal"
+    label="Selectable tag"></cps-tag>
+  <div class="sync-val">Is selected: {{ syncVal }}</div>
+</div>`,
+    ts: `
+syncVal = true;`
+  }
+};

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

@@ -1,7 +1,10 @@
 <app-component-docs-viewer [componentData]="componentData">
   <!-- Example of component's usage -->
-  <form [formGroup]="form">
-    <div class="textarea-group">
+  <app-code-example
+    label="Required textarea with a tooltip"
+    [htmlCode]="examples.requiredTextarea.html"
+    [tsCode]="examples.requiredTextarea.ts">
+    <form [formGroup]="form">
       <cps-textarea
         label="Required textarea with a tooltip"
         placeholder="Please enter any text"
@@ -10,36 +13,52 @@
         [clearable]="true"
         formControlName="requiredTextarea">
       </cps-textarea>
+    </form>
+  </app-code-example>
 
-      <cps-textarea label="Disabled textarea" [disabled]="true"></cps-textarea>
+  <app-code-example
+    label="Disabled textarea"
+    [htmlCode]="examples.disabledTextarea.html">
+    <cps-textarea label="Disabled textarea" [disabled]="true"></cps-textarea>
+  </app-code-example>
 
-      <cps-textarea
-        label="Readonly textarea"
-        hint="This textarea is readonly"
-        value="Value to show"
-        [readonly]="true">
-      </cps-textarea>
+  <app-code-example
+    label="Readonly textarea"
+    [htmlCode]="examples.readonlyTextarea.html">
+    <cps-textarea
+      label="Readonly textarea"
+      hint="This textarea is readonly"
+      value="Value to show"
+      [readonly]="true">
+    </cps-textarea>
+  </app-code-example>
+
+  <app-code-example
+    label="Clearable textarea with persistent clear icon"
+    [htmlCode]="examples.clearableTextarea.html">
+    <cps-textarea
+      label="Clearable textarea with persistent clear icon"
+      hint="This textarea is clearable"
+      value="Clear me"
+      [clearable]="true"
+      [persistentClear]="true">
+    </cps-textarea>
+  </app-code-example>
 
+  <app-code-example
+    label="Two-way binding"
+    [htmlCode]="examples.twoWayBindingTextarea.html"
+    [tsCode]="examples.twoWayBindingTextarea.ts">
+    <div class="sync-val-example">
       <cps-textarea
-        label="Clearable textarea with persistent clear icon"
-        hint="This textarea is clearable"
-        value="Clear me"
-        [clearable]="true"
-        [persistentClear]="true">
+        width="25rem"
+        label="Textarea with two-way binding, type something in"
+        [(ngModel)]="syncVal"
+        resizable="none"
+        hint="This textarea has a fixed width of 25rem and is not resizable"
+        [ngModelOptions]="{ standalone: true }">
       </cps-textarea>
-
-      <div class="sync-val-example">
-        <cps-textarea
-          width="25rem"
-          label="Textarea with two-way binding, type something in"
-          [(ngModel)]="syncVal"
-          resizable="none"
-          hint="This textarea has a fixed width of 25rem and is not resizable"
-          [ngModelOptions]="{ standalone: true }">
-          >
-        </cps-textarea>
-        <span class="sync-val">{{ syncVal }}</span>
-      </div>
+      <span class="sync-val">{{ syncVal }}</span>
     </div>
-  </form>
+  </app-code-example>
 </app-component-docs-viewer>

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

@@ -1,9 +1,3 @@
-.textarea-group {
-  gap: 1.5rem;
-  display: flex;
-  flex-direction: column;
-}
-
 .sync-val-example {
   display: flex;
   align-items: center;

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

@@ -7,17 +7,19 @@ import {
   Validators
 } from '@angular/forms';
 import { CpsTextareaComponent } from 'cps-ui-kit';
-
 import ComponentData from '../../api-data/cps-textarea.json';
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
+import { CodeExampleComponent } from '../../components/code-example/code-example.component';
+import { textareaExamples } from './textarea-page.examples';
 
 @Component({
   selector: 'app-textarea-page',
   imports: [
     CpsTextareaComponent,
     ReactiveFormsModule,
     FormsModule,
-    ComponentDocsViewerComponent
+    ComponentDocsViewerComponent,
+    CodeExampleComponent
   ],
   templateUrl: './textarea-page.component.html',
   styleUrls: ['./textarea-page.component.scss'],
@@ -27,6 +29,7 @@ export class TextareaPageComponent implements OnInit {
   form!: UntypedFormGroup;
   syncVal = '';
   componentData = ComponentData;
+  readonly examples = textareaExamples;
 
   // eslint-disable-next-line no-useless-constructor
   constructor(private _formBuilder: UntypedFormBuilder) {}