feat(links): Links component (#31)

commitlint.config.js

@@ -12,6 +12,7 @@ module.exports = {
                 'common',
                 'typography',
                 'button',
+                'link',
                 'panel',
                 'list',
                 'checkbox',

package.json

@@ -150,6 +150,6 @@
         "server-dev:tree": "npm run server-dev -- --env.component tree",
         "server-dev:navbar": "npm run server-dev -- --env.component navbar",
         "server-dev:layout": "npm run server-dev -- --env.component layout",
-        "server-dev:modal": "npm run server-dev -- --env.component modal"
+        "server-dev:link": "npm run server-dev -- --env.component link"
     }
 }

src/lib-dev/link/module.ts

@@ -0,0 +1,36 @@
+import { Component, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { McIconModule } from '../../lib/icon';
+import { McLinkModule } from '../../lib/link';
+
+
+@Component({
+    selector: 'app',
+    template: require('./template.html'),
+    styleUrls: ['./styles.scss']
+})
+export class DemoComponent {}
+
+
+/* tslint:disable:max-classes-per-file */
+@NgModule({
+    declarations: [
+        DemoComponent
+    ],
+    imports: [
+        BrowserModule,
+        McLinkModule,
+        McIconModule
+    ],
+    bootstrap: [
+        DemoComponent
+    ]
+})
+export class DemoModule {}
+
+platformBrowserDynamic()
+    .bootstrapModule(DemoModule)
+    /* tslint:disable:no-console */
+    .catch((error) => console.error(error));

src/lib-dev/link/styles.scss

@@ -0,0 +1,2 @@
+@import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';
+@import '../../lib/core/theming/prebuilt/default-theme';

src/lib-dev/link/template.html

@@ -0,0 +1,69 @@
+<table cellpadding="10" cellspacing="10" style="margin: auto; text-align: left;">
+    <tr>
+        <td>Disabled</td>
+        <td>Normal</td>
+    </tr>
+    <tr>
+        <td><a class="mc-link mc-disabled" tabindex="-1" href=""><span class="mc-link__text">Сохранить</span></a></td>
+        <td><a class="mc-link" tabindex="0"><span class="mc-link__text">Сохранить</span></a></td>
+    </tr>
+    <tr>
+        <td><a class="mc-link mc-link_dashed mc-disabled" tabindex="-1" href=""><span class="mc-link__text">Сохранить</span></a></td>
+        <td><a class="mc-link mc-link_dashed" tabindex="0"><span class="mc-link__text">Сохранить</span></a></td>
+    </tr>
+    <tr>
+        <td>
+            <a class="mc-link mc-link_underlined mc-disabled" tabindex="-1" href="">
+                <span class="mc-link__text">Сохранить</span>
+            </a>
+        </td>
+        <td>
+            <a class="mc-link mc-link_underlined" tabindex="0" href="">
+                <span class="mc-link__text">Сохранить</span>
+            </a>
+        </td>
+
+    </tr>
+    <tr>
+        <td>
+            <a class="mc-link mc-disabled" tabindex="-1" href="">
+                <span class="mc-link__text">Сохранить</span>
+                <i mc-icon="mc-angle-L_16" class="mc-link__icon"></i>
+            </a>
+        </td>
+        <td>
+            <a class="mc-link" tabindex="0">
+                <span class="mc-link__text">Сохранить</span>
+                <i mc-icon="mc-angle-L_16" class="mc-link__icon"></i>
+            </a>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a class="mc-link mc-link_dashed mc-disabled" tabindex="-1" href="">
+                <span class="mc-link__text ">Сохранить</span>
+                <i mc-icon="mc-angle-L_16" class="mc-link__icon"></i>
+            </a>
+        </td>
+        <td>
+            <a class="mc-link mc-link_dashed" tabindex="0">
+                <span class="mc-link__text">Сохранить</span>
+                <i mc-icon="mc-angle-L_16" class="mc-link__icon"></i>
+            </a>
+        </td>
+    </tr>
+    <tr>
+        <td><a class="mc-link mc-link_dashed mc-disabled" tabindex="-1" href="">
+            <i mc-icon="mc-calendar_16" class="mc-link__icon"></i>
+            <span class="mc-link__text">Сохранить</span>
+            <i mc-icon="mc-angle-L_16" class="mc-link__icon"></i>
+        </a>
+        </td>
+        <td><a class="mc-link mc-link_dashed" tabindex="0">
+            <i mc-icon="mc-calendar_16" class="mc-link__icon"></i>
+            <span class="mc-link__text">Сохранить</span>
+            <i mc-icon="mc-angle-L_16" class="mc-link__icon"></i>
+        </a>
+        </td>
+    </tr>
+</table>

src/lib/core/styles/typography/_all-typography.scss

@@ -1,6 +1,7 @@
 @import './typography';
 @import '../badges';
 @import '../../../button/button-theme';
+@import '../../../link/link-theme';
 @import '../../../list/list-theme';
 @import '../../../tree/tree-theme';
 @import '../../../radio/radio-theme';
@@ -17,6 +18,7 @@
 
     @include mc-base-typography($config);
 
+    @include mc-link-typography($config);
     @include mc-badge-typography($config);
     @include mc-button-typography($config);
     @include mc-list-typography($config);

src/lib/core/theming/_all-theme.scss

@@ -2,6 +2,7 @@
 @import '../core';
 @import '../styles/badges';
 @import '../visual/panel-theme';
+@import '../../link/link-theme';
 @import '../../button/button-theme';
 @import '../../list/list-theme';
 @import '../../progress-bar/progress-bar-theme';
@@ -16,6 +17,7 @@
 
 @mixin mosaic-theme($theme) {
 
+    @include mc-link-theme($theme);
     @include mc-badge-theme($theme);
     @include mc-button-theme($theme);
     @include mc-list-theme($theme);

src/lib/core/theming/_theming.scss

@@ -46,7 +46,7 @@
         warn: $warn,
         is-dark: false,
         foreground: $mc-light-theme-foreground,
-        background: $mc-light-theme-background,
+        background: $mc-light-theme-background
     );
 }
 

src/lib/link/_link-base.scss

@@ -0,0 +1,12 @@
+$link-cursor-disabled: default;
+$link-border-radius: 3px;
+$link-padding: 2px 4px;
+
+%link-base {
+    display: inline-flex;
+    align-items: center;
+    padding: $link-padding;
+    text-decoration: none !important;
+    cursor: pointer;
+    outline: none;
+}

src/lib/link/_link-theme.scss

@@ -0,0 +1,131 @@
+@import '../core/theming/theming';
+@import '../core/theming/palette';
+@import '../core/styles/typography/typography-utils';
+
+
+@mixin _mc-link-dashes_mixin($color, $percentage: 66%, $opacity: 0.5) {
+    background: linear-gradient(90deg, rgba($color, $opacity) $percentage, transparent 0) repeat-x;
+    background-size: 5px 1px;
+    // 1.29em это меньше line-height что бы было видно подчеркивание
+    background-position: 0 1.29em;
+}
+
+@mixin mc-link-typography($config) {
+    .mc-link {
+        @include mc-typography-level-to-styles($config, body);
+    }
+}
+
+@mixin mc-link-theme($theme) {
+    $link: map-get($theme, primary);
+    $foreground: map-get($theme, foreground);
+    $link-disabled: mc-color($foreground, disabled-text);
+
+    .mc-link {
+        color: mc-color($link, 500);
+    }
+
+    &.mc-visited,
+    &:visited {
+        color: mc-color($link, 500);
+    }
+
+    &.mc-active,
+    &.mc-hovered,
+    &:active,
+    &:hover {
+        color: mc-color($link, 700);
+    }
+
+    &:hover.cdk-keyboard-focused,
+    &.mc-hovered.cdk-keyboard-focused,
+    &:hover.mc-focused {
+        outline: none;
+        box-shadow: 0 0 0 2px mc-color($link, 500);
+        color: mc-color($link, 700);
+    }
+
+    &.mc-focused,
+    &.cdk-keyboard-focused {
+        color: mc-color($link, 500);
+        border-color: mc-color($link, 500);
+        box-shadow: 0 0 0 2px mc-color($link, 500);
+    }
+
+    &.mc-disabled,
+    &[disabled] {
+        color: $link-disabled !important;
+        box-shadow: none;
+
+        &.mc-focused,
+        &:focus {
+            border-color: $link-disabled;
+            box-shadow: none;
+        }
+    }
+
+    &.mc-link_underlined {
+
+        & > .mc-link__text {
+            @include _mc-link-dashes_mixin(mc-color($link, 500), 100%, 0.32);
+        }
+
+        &.mc-visited,
+        &:visited {
+            & > .mc-link__text {
+                @include _mc-link-dashes_mixin(mc-color($link, 500), 100%, 0.32);
+            }
+        }
+
+        &.mc-active,
+        &.mc-hovered,
+        &.mc-focused,
+        &:active,
+        &:hover,
+        &:focus {
+            & > .mc-link__text {
+                @include _mc-link-dashes_mixin(mc-color($link, 700), 100%, 0.32);
+            }
+        }
+
+        &.mc-disabled,
+        &[disabled] {
+            & > .mc-link__text {
+                @include _mc-link-dashes_mixin($link-disabled, 100%, 0.32*0.3);
+            }
+        }
+    }
+
+    &.mc-link_dashed {
+
+        & > .mc-link__text {
+            @include _mc-link-dashes_mixin(mc-color($link, 500));
+        }
+
+        &.mc-visited,
+        &:visited {
+            & > .mc-link__text {
+                @include _mc-link-dashes_mixin(mc-color($link, 500));
+            }
+        }
+
+        &.mc-active,
+        &.mc-hovered,
+        &.mc-focused,
+        &:active,
+        &:hover,
+        &:focus {
+            & > .mc-link__text {
+                @include _mc-link-dashes_mixin(mc-color($link, 700));
+            }
+        }
+
+        &.mc-disabled,
+        &[disabled] {
+            & > .mc-link__text {
+                @include _mc-link-dashes_mixin($link-disabled, 66%, 0.32*0.3);
+            }
+        }
+    }
+}
+

src/lib/link/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

src/lib/link/link.component.ts

@@ -0,0 +1,30 @@
+import { Component, ElementRef, OnDestroy, ViewEncapsulation } from '@angular/core';
+
+import { FocusMonitor } from '@ptsecurity/cdk/a11y';
+
+
+@Component({
+    selector: 'a.mc-link',
+    template: `<ng-content></ng-content>`,
+    encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./link.css']
+})
+
+export class McLink implements OnDestroy {
+    constructor(private elementRef: ElementRef, private _focusMonitor: FocusMonitor) {
+
+        this._focusMonitor.monitor(elementRef.nativeElement, true);
+    }
+
+    ngOnDestroy() {
+        this._focusMonitor.stopMonitoring(this.elementRef.nativeElement);
+    }
+
+    focus(): void {
+        this._getHostElement().focus();
+    }
+
+    _getHostElement() {
+        return this.elementRef.nativeElement;
+    }
+}

src/lib/link/link.module.ts

@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { A11yModule } from '@ptsecurity/cdk/a11y';
+
+import { McLink } from './link.component';
+
+
+@NgModule({
+    imports: [
+        CommonModule,
+        A11yModule
+    ],
+    declarations: [
+        McLink
+    ],
+    exports: [
+        McLink
+    ]
+})
+export class McLinkModule {}