chore(demo): Svg improve documentation (#2737)

taiga-family · Sep 20, 2022 · 07d9aee · 07d9aee
1 parent 3d0582e
commit 07d9aee
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 11 deletions.
diff --git a/projects/demo/src/modules/components/svg/svg.module.ts b/projects/demo/src/modules/components/svg/svg.module.ts
@@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiLinkModule, TuiSvgModule} from '@taiga-ui/core';
+import {TuiLinkModule, TuiNotificationModule, TuiSvgModule} from '@taiga-ui/core';
 import {TuiPresentModule} from '@taiga-ui/kit';
 
 import {TuiSvgExample1} from './examples/1';
@@ -17,6 +17,7 @@ import {ExampleTuiSvgComponent} from './svg.component';
         TuiPresentModule,
         TuiLinkModule,
         TuiAddonDocModule,
+        TuiNotificationModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiSvgComponent)),
     ],
     declarations: [ExampleTuiSvgComponent, TuiSvgExample1, TuiSvgExample2],

diff --git a/projects/demo/src/modules/components/svg/svg.template.html b/projects/demo/src/modules/components/svg/svg.template.html
@@ -6,18 +6,32 @@
     <ng-template pageTab>
         <p i18n>
             <code>Svg</code>
-            is a component for working with SVG-image and its colors. If you want to use custom icons that you don't
-            trust, you need to provide a
-            <a
-                tuiLink
-                routerLink="/icon-set"
-                fragment="sanitizer"
-            >
-                sanitizer
-            </a>
-            .
+            is a component for working with SVG-image and its colors.
         </p>
 
+        <tui-notification
+            status="warning"
+            class="tui-space_top-6"
+        >
+            <h4 class="tui-space_top-0">
+                You need to
+                <a
+                    tuiLink
+                    routerLink="/icon-set"
+                    fragment="sanitizer"
+                >
+                    provide TUI_SANITIZER
+                </a>
+                if you want to use
+                <code>Svg</code>
+                -component with:
+            </h4>
+            <ul class="tui-list tui-list_small">
+                <li class="tui-list__item">icon which was imported from source code</li>
+                <li class="tui-list__item">custom icons that you don't trust</li>
+            </ul>
+        </tui-notification>
+
         <tui-doc-example
             id="all"
             i18n-heading