feat(docs): adding components description

packages/docs/src/app/shared/documentation-items/documentation-items.ts

@@ -39,6 +39,24 @@ const DOCS: { [key: string]: DocCategory[] } = {
                     name: 'Badges',
                     summary: '',
                     examples: ['badges-types']
+                },
+                {
+                    id: 'icon',
+                    name: 'Icon',
+                    summary: '',
+                    examples: ['icon-types']
+                },
+                {
+                    id: 'progress-bar',
+                    name: 'Progress-bar',
+                    summary: '',
+                    examples: ['progress-bar-types']
+                },
+                {
+                    id: 'progress-spinner',
+                    name: 'Progress-spinner',
+                    summary: '',
+                    examples: ['progress-spinner-types']
                 }
             ]
         },
@@ -114,6 +132,12 @@ const DOCS: { [key: string]: DocCategory[] } = {
                     name: 'Splitter',
                     summary: '',
                     examples: ['splitter-types']
+                },
+                {
+                    id: 'divider',
+                    name: 'Divider',
+                    summary: '',
+                    examples: ['divider-types']
                 }
             ]
         },
@@ -129,6 +153,19 @@ const DOCS: { [key: string]: DocCategory[] } = {
                     examples: ['button-types']
                 }
             ]
+        },
+        {
+            id: 'core/styles',
+            name: 'Styles',
+            summary: 'styles',
+            items: [
+                {
+                    id: 'typography',
+                    name: 'Typography',
+                    summary: '',
+                    examples: ['typography-types']
+                }
+            ]
         }
     ],
     [CDK]: [

packages/mosaic/core/styles/typography/typography.md

@@ -0,0 +1,64 @@
+### Usage and Override
+
+```scss
+@import "~@ptsecurity/mosaic/theming";
+
+// returns default typography config
+$typography: mc-typography-config();
+//If you need to get font size of mosaic small-text and don`t want to use .mc-small-text class
+.some-selector {
+    font-size: mc-font-size($typography, small-text);
+}
+```
+
+#### Partial config override
+```scss
+//mc-typography-level($font-size, $line-height: $font-size, $letter-spacing: normal, $font-weight: normal, $font-family: null, $text-transform: null)
+$typography: mc-typography-config($body: mc-typography-level(45px, 45px, 0.55px));
+```
+
+#### Full config override
+```scss
+$fonts: (
+    base: (
+        font-family: #{Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif}
+    ),
+    monospace: (
+        font-family: #{'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace}
+    )
+);
+
+$font-family:   map-get(map-get($fonts, base), font-family);
+$font-family-mono:   map-get(map-get($fonts, monospace), font-family);
+
+$typography: mc-typography-config(
+    $font-family,
+    $font-family-mono,
+    $display-1:         mc-typography-level(56px, 76px, -0.4px),
+    $display-2:         mc-typography-level(45px, 56px),
+    $display-3:         mc-typography-level(34px, 44px, 0.25px),
+
+    $headline:          mc-typography-level(24px, 32px),
+    $title:             mc-typography-level(20px, 28px, 0.15px, 500),
+    $subheading:        mc-typography-level(15px, 20px, 0.15px, 500),
+
+    $body:              mc-typography-level(45px, 20px, 0.55px),
+    $body-strong:       mc-typography-level(15px, 20px, 0.15px, 500),
+    $body-caps:         mc-typography-level(15px, 20px, 1.7px, normal, $font-family, uppercase),
+    $body-mono:         mc-typography-level(15px, 20px, normal, normal, $font-family-mono),
+
+    $caption:           mc-typography-level(13px, 16px, 0.25px),
+    $caption-caps:      mc-typography-level(13px, 16px, 1.5px, normal, $font-family, uppercase),
+    $caption-mono:      mc-typography-level(13px, 16px, normal, normal, $font-family-mono),
+
+    $small-text:        mc-typography-level(13px, 16px, 0.25px),
+    $extra-small-text:  mc-typography-level(11px, 16px, 0.22px)
+);
+
+```
+
+After override we need to apply changed config to all elements
+
+```scss
+@include mosaic-typography($typography);
+```

packages/mosaic/icon/icon.md

@@ -0,0 +1,30 @@
+### Installation
+Note that Mosaic Icons is optional package and it should be installed manually.
+
+##### NPM
+`npm install @ptsecurity/mosaic-icons --save`
+##### Yarn
+`yarn add @ptsecurity/mosaic-icons`
+
+Then you should add icons styles:
+
+`@import "~@ptsecurity/mosaic-icons/dist/styles/mc-icons.css";`
+
+And finally import McIconModule to your component module.
+
+`import { McIconModule } from '@ptsecurity/mosaic';`
+
+If mc-icons.css does't suit your project, you can also add:
+
+- mc-icons.less;
+- mc-icons-embed.css with embedded font included.
+
+### Variants
+
+There are two icon usage variants:
+
+1. `<i mc-icon="mc-gear_16"></i>`;
+
+    In this case you can provide `[color]` attribute. It can have following values: *primary*, *second*, *error*.
+
+2. Simply `<i class="mc mc-gear_16"></i>`.

tools/gulp/tasks/docs.ts

@@ -38,7 +38,6 @@ const MARKDOWN_TAGS_TO_CLASS_ALIAS = [
     'h5',
     'li',
     'ol',
-    'p',
     'table',
     'tbody',
     'thead',
@@ -50,8 +49,11 @@ const MARKDOWN_TAGS_TO_CLASS_ALIAS = [
     'img'
 ];
 
-// separating th to prevent it's conflict with thead
-const MARKDOWN_WHOLE_TAGS_TO_CLASS_ALIAS = [ 'th' ];
+// separating th and p to prevent it's conflict with thead and pre
+const MARKDOWN_WHOLE_TAGS_TO_CLASS_ALIAS = [
+    'th',
+    'p'
+];
 const CLASS_PREFIX: string = 'docs-markdown';
 const tagNameStringAliaser = createTagNameStringAliaser(CLASS_PREFIX);