docs: add code examples for Progress Circular, Progress Linear, Radio

projects/composition/src/app/pages/progress-circular-page/progress-circular-page.component.html

@@ -8,19 +8,23 @@
       <a routerLink="/loader">Loader component</a>
     </div>
   </div>
-  <div class="progr-circ-group">
-    <cps-progress-circular
-      color="luxury"
-      diameter="7.5rem"
-      strokeWidth="0.5rem"></cps-progress-circular>
-    <cps-progress-circular diameter="3.75rem"></cps-progress-circular>
-    <cps-progress-circular
-      color="surprise"
-      diameter="1.875rem"
-      strokeWidth="0.1875rem"></cps-progress-circular>
-    <cps-progress-circular
-      color="prepared"
-      diameter="0.9375rem"
-      strokeWidth="0.125rem"></cps-progress-circular>
-  </div>
+  <app-code-example
+    label="Progress circular"
+    [htmlCode]="examples.variants.html">
+    <div class="progr-circ-group">
+      <cps-progress-circular
+        color="luxury"
+        diameter="7.5rem"
+        strokeWidth="0.5rem"></cps-progress-circular>
+      <cps-progress-circular diameter="3.75rem"></cps-progress-circular>
+      <cps-progress-circular
+        color="surprise"
+        diameter="1.875rem"
+        strokeWidth="0.1875rem"></cps-progress-circular>
+      <cps-progress-circular
+        color="prepared"
+        diameter="0.9375rem"
+        strokeWidth="0.125rem"></cps-progress-circular>
+    </div>
+  </app-code-example>
 </app-component-docs-viewer>

projects/composition/src/app/pages/progress-circular-page/progress-circular-page.component.ts

@@ -2,14 +2,17 @@ import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { CpsIconComponent, CpsProgressCircularComponent } 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-progress-circular.json';
+import { progressCircularExamples } from './progress-circular-page.examples';
 
 @Component({
   imports: [
     CpsIconComponent,
     CpsProgressCircularComponent,
     ComponentDocsViewerComponent,
-    RouterModule
+    RouterModule,
+    CodeExampleComponent
   ],
   selector: 'app-progress-circular-page',
   templateUrl: './progress-circular-page.component.html',
@@ -18,4 +21,5 @@ import ComponentData from '../../api-data/cps-progress-circular.json';
 })
 export class ProgressCircularPageComponent {
   componentData = ComponentData;
+  readonly examples = progressCircularExamples;
 }

projects/composition/src/app/pages/progress-circular-page/progress-circular-page.examples.ts

@@ -0,0 +1,23 @@
+export const progressCircularExamples: Record<
+  string,
+  { html: string; ts?: string }
+> = {
+  variants: {
+    html: `
+<div style="display: flex; align-items: center; gap: 3rem; overflow: hidden;">
+  <cps-progress-circular
+    color="luxury"
+    diameter="7.5rem"
+    strokeWidth="0.5rem"></cps-progress-circular>
+  <cps-progress-circular diameter="3.75rem"></cps-progress-circular>
+  <cps-progress-circular
+    color="surprise"
+    diameter="1.875rem"
+    strokeWidth="0.1875rem"></cps-progress-circular>
+  <cps-progress-circular
+    color="prepared"
+    diameter="0.9375rem"
+    strokeWidth="0.125rem"></cps-progress-circular>
+</div>`
+  }
+};

projects/composition/src/app/pages/progress-linear-page/progress-linear-page.component.html

@@ -1,24 +1,26 @@
 <app-component-docs-viewer [componentData]="componentData">
   <!-- Example of component's usage -->
-  <div class="progr-lin-group">
-    <cps-progress-linear></cps-progress-linear>
-    <cps-progress-linear
-      color="energy"
-      radius="0.25rem"
-      bgColor="energy-highlighten"
-      height="0.75rem">
-    </cps-progress-linear>
-    <cps-progress-linear
-      height="0.1875rem"
-      radius="0.25rem"
-      opacity="0.3"
-      bgColor="transparent">
-    </cps-progress-linear>
-    <cps-progress-linear
-      color="grounded"
-      radius="0.625rem"
-      bgColor="grounded-highlighten"
-      width="25rem"
-      height="0.75rem"></cps-progress-linear>
-  </div>
+  <app-code-example label="Progress linear" [htmlCode]="examples.variants.html">
+    <div class="progr-lin-group">
+      <cps-progress-linear></cps-progress-linear>
+      <cps-progress-linear
+        color="energy"
+        radius="0.25rem"
+        bgColor="energy-highlighten"
+        height="0.75rem">
+      </cps-progress-linear>
+      <cps-progress-linear
+        height="0.1875rem"
+        radius="0.25rem"
+        opacity="0.3"
+        bgColor="transparent">
+      </cps-progress-linear>
+      <cps-progress-linear
+        color="grounded"
+        radius="0.625rem"
+        bgColor="grounded-highlighten"
+        width="25rem"
+        height="0.75rem"></cps-progress-linear>
+    </div>
+  </app-code-example>
 </app-component-docs-viewer>

projects/composition/src/app/pages/progress-linear-page/progress-linear-page.component.ts

@@ -1,16 +1,22 @@
 import { Component } from '@angular/core';
 import { CpsProgressLinearComponent } from 'cps-ui-kit';
-
 import ComponentData from '../../api-data/cps-progress-linear.json';
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
+import { CodeExampleComponent } from '../../components/code-example/code-example.component';
+import { progressLinearExamples } from './progress-linear-page.examples';
 
 @Component({
-  imports: [CpsProgressLinearComponent, ComponentDocsViewerComponent],
+  imports: [
+    CpsProgressLinearComponent,
+    ComponentDocsViewerComponent,
+    CodeExampleComponent
+  ],
   selector: 'app-progress-linear-page',
   templateUrl: './progress-linear-page.component.html',
   styleUrls: ['./progress-linear-page.component.scss'],
   host: { class: 'composition-page' }
 })
 export class ProgressLinearPageComponent {
   componentData = ComponentData;
+  readonly examples = progressLinearExamples;
 }

projects/composition/src/app/pages/progress-linear-page/progress-linear-page.examples.ts

@@ -0,0 +1,29 @@
+export const progressLinearExamples: Record<
+  string,
+  { html: string; ts?: string }
+> = {
+  variants: {
+    html: `
+<div style="display: flex; flex-direction: column; gap: 3rem;">
+  <cps-progress-linear></cps-progress-linear>
+  <cps-progress-linear
+    color="energy"
+    radius="0.25rem"
+    bgColor="energy-highlighten"
+    height="0.75rem">
+  </cps-progress-linear>
+  <cps-progress-linear
+    height="0.1875rem"
+    radius="0.25rem"
+    opacity="0.3"
+    bgColor="transparent">
+  </cps-progress-linear>
+  <cps-progress-linear
+    color="grounded"
+    radius="0.625rem"
+    bgColor="grounded-highlighten"
+    width="25rem"
+    height="0.75rem"></cps-progress-linear>
+</div>`
+  }
+};

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

@@ -1,36 +1,69 @@
 <app-component-docs-viewer [componentData]="componentData">
   <!-- Example of component's usage -->
-  <div class="radiogroups-group">
+  <app-code-example
+    label="Required radio group"
+    [htmlCode]="examples.requiredRadioGroup.html"
+    [tsCode]="examples.requiredRadioGroup.ts">
     <form [formGroup]="form">
       <cps-radio-group
         groupLabel="Radio group where 3rd option must be selected"
         formControlName="requiredRadio"
         [options]="options">
       </cps-radio-group>
     </form>
+  </app-code-example>
+
+  <app-code-example
+    label="Radio group with a tooltip"
+    [htmlCode]="examples.tooltipRadioGroup.html"
+    [tsCode]="examples.tooltipRadioGroup.ts">
     <cps-radio-group
       groupLabel="Radio group with a tooltip"
       [options]="options"
       infoTooltip="Provide any information here"
       value="second">
     </cps-radio-group>
+  </app-code-example>
+
+  <app-code-example
+    label="Vertical radio group"
+    [htmlCode]="examples.verticalRadioGroup.html"
+    [tsCode]="examples.verticalRadioGroup.ts">
     <cps-radio-group
       groupLabel="Vertical radio group"
       [options]="options"
       value="second"
       [vertical]="true">
     </cps-radio-group>
+  </app-code-example>
+
+  <app-code-example
+    label="Disabled vertical radio group"
+    [htmlCode]="examples.disabledVerticalRadioGroup.html"
+    [tsCode]="examples.disabledVerticalRadioGroup.ts">
     <cps-radio-group
       groupLabel="Disabled vertical radio group"
       [options]="options"
       value="second"
       [disabled]="true"
       [vertical]="true">
     </cps-radio-group>
+  </app-code-example>
+
+  <app-code-example
+    label="Radio group with partially disabled options"
+    [htmlCode]="examples.partiallyDisabledRadioGroup.html"
+    [tsCode]="examples.partiallyDisabledRadioGroup.ts">
     <cps-radio-group
       groupLabel="Radio group with partially disabled options and targeted tooltips"
       [options]="partiallyDisabledOptions">
     </cps-radio-group>
+  </app-code-example>
+
+  <app-code-example
+    label="Radio group with two-way binding"
+    [htmlCode]="examples.twoWayBindingRadioGroup.html"
+    [tsCode]="examples.twoWayBindingRadioGroup.ts">
     <div class="sync-val-example">
       <cps-radio-group
         groupLabel="Radio group with two-way binding"
@@ -39,6 +72,12 @@
       </cps-radio-group>
       <div class="sync-val">Selected value: {{ syncVal }}</div>
     </div>
+  </app-code-example>
+
+  <app-code-example
+    label="Radio group with custom content"
+    [htmlCode]="examples.customContentRadioGroup.html"
+    [tsCode]="examples.customContentRadioGroup.ts">
     <cps-radio-group
       groupLabel="Radio group with custom content"
       class="custom-content-example"
@@ -90,5 +129,5 @@
       </cps-radio>
       <cps-radio [option]="{ label: 'Simple option', value: 2 }"></cps-radio>
     </cps-radio-group>
-  </div>
+  </app-code-example>
 </app-component-docs-viewer>

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

@@ -1,9 +1,3 @@
-.radiogroups-group {
-  gap: 2.25rem;
-  display: flex;
-  flex-direction: column;
-}
-
 .sync-val-example {
   .sync-val {
     margin-top: 1rem;

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

@@ -15,9 +15,10 @@ import {
   CpsSelectComponent,
   CpsRadioOption
 } from 'cps-ui-kit';
-
 import ComponentData from '../../api-data/cps-radio-group.json';
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
+import { CodeExampleComponent } from '../../components/code-example/code-example.component';
+import { radioExamples } from './radio-page.examples';
 
 @Component({
   imports: [
@@ -27,14 +28,16 @@ import { ComponentDocsViewerComponent } from '../../components/component-docs-vi
     CpsRadioComponent,
     CpsSelectComponent,
     CpsCheckboxComponent,
-    ComponentDocsViewerComponent
+    ComponentDocsViewerComponent,
+    CodeExampleComponent
   ],
   selector: 'app-radio-page',
   templateUrl: './radio-page.component.html',
   styleUrls: ['./radio-page.component.scss'],
   host: { class: 'composition-page' }
 })
 export class RadioPageComponent implements OnInit {
+  readonly examples = radioExamples;
   form!: UntypedFormGroup;
 
   options: CpsRadioOption[] = [
@@ -106,7 +109,7 @@ export class RadioPageComponent implements OnInit {
     if (!val) return null;
 
     if (val !== 'third') {
-      return { mustMatch8Dig: 'Only third option must be selected' };
+      return { mustSelectThird: 'Only third option must be selected' };
     }
     return null;
   }