feat(demo): add Wrapper customization page (#153)

* feat(demo): add `Wrapper` customization page * chore(demo): remove theme page * chore(comments): fix Co-authored-by: Roman Sedov <darragon-nn@yandex.ru>
taiga-family · Jan 27, 2021 · eef8382 · eef8382
1 parent a6546e1
commit eef8382
Show file tree

Hide file tree

Showing 23 changed files with 287 additions and 352 deletions.
diff --git a/projects/core/components/button/button.component.ts b/projects/core/components/button/button.component.ts
@@ -92,7 +92,7 @@ export class TuiButtonComponent
                 this.updateHovered(hovered);
             });
         pressedObservable(elementRef.nativeElement)
-            .pipe(takeUntil(destroy$))
+            .pipe(watch(changeDetectorRef), takeUntil(destroy$))
             .subscribe(pressed => {
                 this.updatePressed(pressed);
             });

diff --git a/projects/core/components/wrapper/wrapper.component.ts b/projects/core/components/wrapper/wrapper.component.ts
@@ -10,7 +10,6 @@ import {TuiInteractiveState} from '@taiga-ui/core/enums';
 import {TUI_MODE} from '@taiga-ui/core/tokens';
 import {TuiBrightness} from '@taiga-ui/core/types';
 import {Observable} from 'rxjs';
-
 import {TUI_WRAPPER_PROVIDERS} from './wrapper.providers';
 
 @Component({

diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
@@ -52,6 +52,14 @@ export const ROUTES = [
             title: `Variables`,
         },
     },
+    {
+        path: 'wrapper',
+        loadChildren: () =>
+            import(`../customization/wrapper/wrapper.module`).then(m => m.WrapperModule),
+        data: {
+            title: `Wrapper`,
+        },
+    },
     {
         path: 'tui-doc',
         loadChildren: () => import(`../info/doc/doc.module`).then(m => m.DocModule),
@@ -533,7 +541,7 @@ export const ROUTES = [
                 m => m.ExampleTuiMobileThemesModule,
             ),
         data: {
-            title: `PWA themes`,
+            title: `Mobile`,
         },
     },
     {
@@ -972,14 +980,6 @@ export const ROUTES = [
             title: `Tables`,
         },
     },
-    {
-        path: 'theme',
-        loadChildren: () =>
-            import(`../markup/theme/theme.module`).then(m => m.ThemeModule),
-        data: {
-            title: `Theming`,
-        },
-    },
     {
         path: 'typography',
         loadChildren: () =>

diff --git a/projects/demo/src/modules/app/home/examples/angular-json-styles.txt b/projects/demo/src/modules/app/home/examples/angular-json-styles.txt
@@ -5,7 +5,7 @@
         "build": {
           "options": {
             "styles": [
-              "src/styles.scss",
+              "src/styles.css",
               "node_modules/@taiga-ui/core/styles/taiga-ui-global.less",
               "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less"
             ]

diff --git a/projects/demo/src/modules/app/home/examples/ie-support.txt b/projects/demo/src/modules/app/home/examples/ie-support.txt
diff --git a/projects/demo/src/modules/app/home/examples/import-base-less.txt b/projects/demo/src/modules/app/home/examples/import-base-less.txt
diff --git a/projects/demo/src/modules/app/home/home.component.ts b/projects/demo/src/modules/app/home/home.component.ts
@@ -6,11 +6,8 @@ import {default as appModule} from '!!raw-loader!./examples/app-module.txt';
 import {default as appTemplate} from '!!raw-loader!./examples/app-template.txt';
 import {default as assets} from '!!raw-loader!./examples/assets.txt';
 import {default as componentsStyles} from '!!raw-loader!./examples/components-styles.txt';
-import {default as ieSupport} from '!!raw-loader!./examples/ie-support.txt';
-import {default as importBaseLess} from '!!raw-loader!./examples/import-base-less.txt';
 import {default as importLocalLess} from '!!raw-loader!./examples/import-local-less.txt';
 import {default as main} from '!!raw-loader!./examples/main.txt';
-import {default as ponyfill} from '!!raw-loader!./examples/ponyfill.txt';
 import {Component} from '@angular/core';
 import {changeDetection} from '../../../change-detection-strategy';
 
@@ -29,11 +26,8 @@ export class HomeComponent {
         appModuleOptional,
         assets,
         componentsStyles,
-        importBaseLess,
         importLocalLess,
         main,
         addons,
-        ponyfill,
-        ieSupport,
     };
 }
diff --git a/projects/demo/src/modules/app/home/home.module.ts b/projects/demo/src/modules/app/home/home.module.ts
@@ -2,11 +2,10 @@ import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {TuiDocCodeModule} from '@taiga-ui/addon-doc';
 import {TuiLinkModule} from '@taiga-ui/core';
-import {TuiAccordionModule} from '@taiga-ui/kit';
 import {HomeComponent} from './home.component';
 
 @NgModule({
-    imports: [RouterModule, TuiDocCodeModule, TuiLinkModule, TuiAccordionModule],
+    imports: [RouterModule, TuiDocCodeModule, TuiLinkModule],
     entryComponents: [HomeComponent],
     declarations: [HomeComponent],
     exports: [HomeComponent],

diff --git a/projects/demo/src/modules/app/home/home.template.html b/projects/demo/src/modules/app/home/home.template.html
@@ -10,13 +10,8 @@
             </a>
         </li>
         <li>
-            <a tuiLink routerLink="." fragment="less" i18n>
-                Styles for LESS projects
-            </a>
-        </li>
-        <li>
-            <a tuiLink routerLink="." fragment="not-less" i18n>
-                Styles for not LESS projects
+            <a tuiLink routerLink="." fragment="styles" i18n>
+                Include styles
             </a>
         </li>
         <li>
@@ -28,10 +23,6 @@
             </a>
         </li>
         <li><a tuiLink routerLink="." fragment="icons" i18n>Icons</a></li>
-        <li><a tuiLink routerLink="." fragment="theme" i18n>Theming</a></li>
-        <li>
-            <a tuiLink routerLink="." fragment="ie">Internet Explorer</a>
-        </li>
     </ol>
 
     <ol class="b-demo-steps">
@@ -49,74 +40,25 @@
             ></tui-doc-code>
         </li>
 
-        <li id="less" i18n>
+        <li id="styles" i18n>
             <p>
-                We use <a tuiLink href="http://lesscss.org/">LESS</a> as CSS
-                preprocessor for our library. If you make a new project, you can
-                choose it by default with <code>--style less</code> flag.
+                Add theme and Taiga UI global styles to your
+                <code>angular.json</code>:
             </p>
 
-            <tui-accordion>
-                <tui-accordion-item>
-                    I have a project with LESS
-                    <ng-template tuiAccordionItemContent>
-                        Import our global styles in yours
-                        <code>styles.less</code>. It adds global classes and CSS
-                        variables
-
-                        <tui-doc-code
-                            filename="styles.less"
-                            [code]="examples.importBaseLess"
-                        ></tui-doc-code>
-
-                        <p>
-                            You can also add a set of our mixins and
-                            LESS-variables to use it in your LESS files
-
-                            <tui-doc-code
-                                filename="my.component.less"
-                                [code]="examples.importLocalLess"
-                            ></tui-doc-code>
-                        </p>
-                    </ng-template>
-                </tui-accordion-item>
-                <tui-accordion-item>
-                    I don't use LESS
-                    <ng-template tuiAccordionItemContent>
-                        Append our global styles to styles of your app in
-                        <code>angular.json</code>. It adds global classes and
-                        CSS-variables
-
-                        <tui-doc-code
-                            filename="angular.json"
-                            [code]="examples.angularJsonStyles"
-                        ></tui-doc-code>
-
-                        <p>
-                            It is not a regular case, but if you need to use our
-                            LESS-mixins or LESS-variables, you can add
-                            additional LESS-styles for your component
-                        </p>
-
-                        <tui-doc-code
-                            filename="my.component.ts"
-                            [code]="examples.componentsStyles"
-                        ></tui-doc-code>
-
-                        <p>Angular resolves it automatically</p>
-
-                        <tui-doc-code
-                            filename="my.component.less"
-                            [code]="examples.importLocalLess"
-                        ></tui-doc-code>
-                    </ng-template>
-                </tui-accordion-item>
-            </tui-accordion>
-        </li>
+            <tui-doc-code
+                filename="angular.json"
+                [code]="examples.angularJsonStyles"
+            ></tui-doc-code>
+
+            <p>
+                You can also add a set of our mixins to use it in your styles
 
-        <li id="not-less" i18n>
-            For non-LESS environment, do not forget about file type if you
-            import styles directly from our library
+                <tui-doc-code
+                    filename="my.component.less"
+                    [code]="examples.importLocalLess"
+                ></tui-doc-code>
+            </p>
         </li>
 
         <li id="root" i18n>
@@ -170,69 +112,5 @@
                 [code]="examples.appModuleIcons"
             ></tui-doc-code>
         </li>
-
-        <li id="theme" i18n>
-            See
-            <a tuiLink routerLink="/theme">Theme</a> to learn more about theming
-        </li>
-
-        <li id="ie" i18n>
-            Taiga UI uses CSS custom properties for styling that is not
-            supported by Internet Explorer.
-            <strong>If you need to support IE 11</strong>, use
-            <a
-                tuiLink
-                target="_blank"
-                href="https://www.npmjs.com/package/css-vars-ponyfill"
-            >
-                css-vars-ponyfill
-            </a>
-            package
-
-            <p>Install it:</p>
-
-            <tui-doc-code [code]="examples.ponyfill"></tui-doc-code>
-
-            <p>
-                Add polyfill to
-                <a
-                    tuiLink
-                    target="_blank"
-                    href="https://angular.io/api/core/APP_BOOTSTRAP_LISTENER"
-                    ><code>APP_BOOTSTRAP_LISTENER</code></a
-                >
-                of your app
-            </p>
-
-            <tui-doc-code
-                filename="app.module.ts"
-                [code]="examples.ieSupport"
-            ></tui-doc-code>
-
-            <p>
-                Internet Explorer also does not support native
-                <code>SVG</code> inlining. Taiga UI icons will be automatically
-                downloaded and inlined directly into DOM. However, Angular
-                <code>Sanitizer</code> removes <code>SVG</code> code in that
-                case. To use a custom sanitizer that properly supports
-                <code>SVG</code> provide the <code>TUI_SANITIZER</code> token. We
-                recommend you to use our library
-                <a
-                    target="_blank"
-                    href="https://github.com/TinkoffCreditSystems/ng-dompurify"
-                    tuiLink
-                >
-                    ng-dompurify
-                </a>
-                to properly sanitize code with
-                <a
-                    target="_blank"
-                    href="https://github.com/cure53/DOMPurify"
-                    tuiLink
-                >
-                    DOMPurify
-                </a>
-            </p>
-        </li>
     </ol>
 </div>
diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
@@ -87,12 +87,6 @@ export const pages: TuiDocPages = [
                 keywords: 'верстка, markup, таблицы, tables',
                 route: '/tables',
             },
-            {
-                section: $localize`Common`,
-                title: $localize`Theming`,
-                keywords: 'тема, custom, themes',
-                route: '/theme',
-            },
             {
                 section: $localize`Common`,
                 title: $localize`Skeleton`,
@@ -107,7 +101,7 @@ export const pages: TuiDocPages = [
             },
             {
                 section: $localize`Common`,
-                title: $localize`PWA themes`,
+                title: $localize`Mobile`,
                 keywords: 'верстка, pwa, мобильные, нативные',
                 route: '/mobile-themes',
             },
@@ -125,6 +119,12 @@ export const pages: TuiDocPages = [
         keywords: 'colors, css, vars, custom, properties, style',
         route: 'variables',
     },
+    {
+        section: $localize`Customization`,
+        title: `Wrapper`,
+        keywords: 'colors, css, theme, custom, style',
+        route: 'wrapper',
+    },
     {
         section: $localize`Components`,
         title: 'Accordion',

diff --git a/projects/demo/src/modules/components/mobile-themes/mobile-themes.template.html b/projects/demo/src/modules/components/mobile-themes/mobile-themes.template.html
@@ -1,4 +1,4 @@
-<tui-doc-page header="PWA themes" package="ADDON-MOBILE">
+<tui-doc-page header="Mobile themes" package="ADDON-MOBILE">
     <ng-template i18n pageTab="Android">
         Import <code>TuiThemeAndroidModule</code> into your app.module and add
         <code>tui-theme-android</code> component to enable Android theme.

diff --git a/projects/demo/src/modules/customization/wrapper/examples/1/index.html b/projects/demo/src/modules/customization/wrapper/examples/1/index.html
@@ -0,0 +1,7 @@
+<tui-input class="b-form" [(ngModel)]="value">Input example</tui-input>
+<div class="tui-space_vertical-4">
+    <tui-checkbox-labeled [(ngModel)]="checkbox">
+        Checkbox example
+    </tui-checkbox-labeled>
+</div>
+<button tuiButton size="s" appearance="material-button">Submit</button>