feat(vote): add vote component #INF-169

demo/src/app/app.routes.ts

@@ -59,6 +59,7 @@ import { DemoLinkSectionComponent } from './global/+link';
 import { DemoRebootSectionComponent } from './global/+reboot';
 import { DemoTypographyComponent } from './components/+typography/typography.component';
 import { DemoSkeletonSectionComponent } from './components/+skeleton';
+import { DemoVoteComponent } from './components/+vote/vote.component';
 import { DemoResultSectionComponent } from './components/+result/result-section.component';
 
 const appRoutes = [
@@ -307,6 +308,10 @@ const appRoutes = [
         path: 'components/skeleton',
         component: DemoSkeletonSectionComponent
     },
+    {
+        path: 'components/vote',
+        component: DemoVoteComponent
+    },
     {
         path: 'components/result',
         component: DemoResultSectionComponent

demo/src/app/components/+vote/vote.component.html

@@ -0,0 +1,25 @@
+<div>
+  <p>thyVote:primary / thyLayout: horizontal</p>
+  <thy-vote class="mt-3" [thyVoteCount]="vote_count" [thyHasVoted]="has_voted" (click)="toggleVote($event)"></thy-vote>
+</div>
+<div class="mt-3">
+  <p>thyVote:success / thyLayout: vertical</p>
+  <div
+    [thyVote]="'success'"
+    [thyLayout]="'vertical'"
+    [thyVoteCount]="vote_count"
+    [thyHasVoted]="has_voted"
+    (click)="toggleVote($event)"
+  ></div>
+  <div
+    class="mt-3"
+    [thyVote]="'success'"
+    [thyLayout]="'vertical'"
+    [thyVoteCount]="vote_count"
+    [thyHasVoted]="has_voted"
+    thySize="md"
+    (click)="toggleVote($event)"
+  ></div>
+</div>
+<pre class="mt-1"><code lang="typescript" [highlight]="exampleCode"></code></pre>
+<api-parameters [parameters]="apiParameters"></api-parameters>

demo/src/app/components/+vote/vote.component.ts

@@ -0,0 +1,69 @@
+import { Component } from '@angular/core';
+import { LiveDemoCodeExample } from 'app/core/live-demo/live-demo.component';
+
+@Component({
+    selector: 'demo-vote',
+    templateUrl: './vote.component.html'
+})
+export class DemoVoteComponent {
+    public apiParameters = [
+        {
+            property: 'thyVote',
+            description: '标签类型（primary、success)',
+            type: 'ThyVote',
+            default: 'primary'
+        },
+        {
+            property: 'thyLayout',
+            description: '标签类型（horizontal、vertical)',
+            type: 'thyLayout',
+            default: 'horizontal'
+        },
+        {
+            property: 'thySizs',
+            description: 'thyLayout="vertical"支持"sm"和"md",thyLayout="horizontal"支持"sm"',
+            type: 'String',
+            default: 'sm'
+        },
+        {
+            property: 'thyHasVoted',
+            description: '是否赞同',
+            type: 'boolean',
+            default: 'false'
+        },
+        {
+            property: 'thyVoteCount',
+            description: '赞同的数量',
+            type: 'number | string',
+            default: ''
+        }
+    ];
+
+    exampleCode = `
+  <thy-vote [thyVoteCount]="vote_count" [thyHasVoted]="has_voted" (click)="toggleVote($event)"></thy-vote>
+  <div
+    [thyVote]="'success'"
+    [thyLayout]="'vertical'"
+    [thyVoteCount]="vote_count"
+    [thyHasVoted]="has_voted"
+    (click)="toggleVote($event)"
+  ></div>
+  <div
+    [thyVote]="'success'"
+    [thyLayout]="'vertical'"
+    [thyVoteCount]="vote_count"
+    [thyHasVoted]="has_voted"
+    thySize="md"
+    (click)="toggleVote($event)"
+  ></div>
+    `;
+    constructor() {}
+
+    vote_count = 112;
+
+    has_voted = true;
+
+    toggleVote() {
+        this.has_voted = !this.has_voted;
+    }
+}

demo/src/app/components/index.ts

@@ -83,6 +83,7 @@ import { DemoUploaderSectionComponent } from './+uploader/uploader-section.compo
 import { DemoWTDSectionLinkComponent } from './+wtd/wtd.component';
 import { DemoSkeletonModule } from './+skeleton';
 import { DemoAlertModule } from './+alert/module';
+import { DemoVoteComponent } from './+vote/vote.component';
 import { DemoResultBasicComponent } from './+result/basic/basic.component';
 import { DemoResultSectionComponent } from './+result/result-section.component';
 import { DemoCopySectionComponent } from './+copy/copy-section.component';
@@ -147,6 +148,7 @@ export const COMPONENTS = [
     DemoTreeSelectSectionComponent,
     DemoStepperSectionComponent,
     DemoCascaderSectionComponent,
+    DemoVoteComponent,
 
     DemoTooltipSectionComponent,
     DemoOverlaySectionComponent,

demo/src/app/core/menu.ts

@@ -59,6 +59,7 @@ export const allMenus = [
                     { name: 'Cascader', zhName: '级联选择菜单', routePath: 'cascader' },
                     { name: 'Property Operation', zhName: '属性操作', routePath: 'property-operation' },
                     { name: 'Arrow-switcher', zhName: '上下条切换', routePath: 'arrow-switcher' },
+                    { name: 'Vote', zhName: '投票', routePath: 'vote' },
                     { name: 'Copy', zhName: '复制', routePath: 'copy' }
                 ]
             },

src/module.ts

@@ -53,6 +53,7 @@ import { ThyFlexibleTextModule } from './flexible-text';
 import { ThyDragDropModule } from './drag-drop/module';
 import { ThySelectCommonModule } from './core/select/module';
 import { ThySkeletonModule } from './skeleton';
+import { ThyVoteModule } from './vote';
 import { ThyResultModule } from './result';
 
 const IMPORT_EXPORT_MODULES = [
@@ -111,6 +112,7 @@ const IMPORT_EXPORT_MODULES = [
     ThyDragDropModule,
     ThySelectCommonModule,
     ThySkeletonModule,
+    ThyVoteModule,
     ThyResultModule
 ];
 

src/styles/index.scss

@@ -67,5 +67,6 @@
 @import '../icon/styles.scss';
 @import '../flexible-text/styles/flexible-text.scss';
 @import '../skeleton/styles.scss';
+@import '../vote/styles/vote.scss';
 @import '../result/styles/result.scss';
 @import '../markdown/markdown.scss';

src/styles/variables.scss

@@ -622,6 +622,15 @@ $list-grid-option-icon-size: 32px;
 $list-grid-option-name-margin-top: 15px;
 $list-grid-option-sm-name-margin-top: 7px;
 
+// vote
+$vote-layout-vertical-sm: 36px;
+$vote-layout-vertical-padding-sm: 5px;
+$vote-layout-vertical-md: 48px;
+$vote-layout-vertical-padding-md: 7px;
+$vote-layout-horizontal-with-sm: 50px;
+$vote-layout-horizontal-height-sm: 20px;
+$vote-layout-horizontal-padding-sm: 4px 7px;
+
 // result
 $result-padding: 30px !default;
 $result-title-font-size: $font-size-xlg !default;

src/vote/index.ts

@@ -0,0 +1,2 @@
+export * from './vote.module';
+export * from './vote.component';

src/vote/styles/vote.scss

@@ -0,0 +1,79 @@
+@mixin vote-color-variant($color) {
+    &:hover {
+        background: $color !important;
+        color: $white !important;
+    }
+    &.has-voted {
+        background: rgba($color, 0.1);
+        color: $color;
+    }
+}
+@mixin vote-variant($width, $height, $padding, $fontSize, $iconSize) {
+    width: $width;
+    height: $height;
+    padding: $padding;
+    line-height: $fontSize;
+    font-size: $fontSize;
+    .thy-icon {
+        font-size: $iconSize;
+    }
+}
+
+.thy-vote {
+    display: flex;
+    background-color: $gray-100;
+    color: $gray-600;
+    border-radius: 4px;
+    cursor: pointer;
+    .thy-icon {
+        display: block;
+    }
+}
+.thy-vote-vertical {
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.thy-vote-vertical-size-sm {
+    @include vote-variant(
+        $vote-layout-vertical-sm,
+        $vote-layout-vertical-sm,
+        $vote-layout-vertical-padding-sm,
+        $font-size-xs,
+        $font-size-sm
+    );
+}
+
+.thy-vote-vertical-size-md {
+    @include vote-variant(
+        $vote-layout-vertical-md,
+        $vote-layout-vertical-md,
+        $vote-layout-vertical-padding-md,
+        $font-size-base,
+        $font-size-md
+    );
+}
+
+.thy-vote-horizontal {
+    align-items: center;
+    justify-content: space-between;
+}
+
+.thy-vote-horizontal-size-sm {
+    @include vote-variant(
+        $vote-layout-horizontal-with-sm,
+        $vote-layout-horizontal-height-sm,
+        $vote-layout-horizontal-padding-sm,
+        $font-size-sm,
+        $font-size-sm
+    );
+}
+
+.thy-vote-success {
+    @include vote-color-variant($success);
+}
+
+.thy-vote-primary {
+    @include vote-color-variant($primary);
+}

src/vote/test/vote.spec.ts

@@ -0,0 +1,88 @@
+import { fakeAsync, TestBed, ComponentFixture } from '@angular/core/testing';
+import { ThyVoteModule } from '../vote.module';
+import { NgModule, Component } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { ThyVoteComponent } from '../vote.component';
+
+describe('ThyVote', () => {
+    let fixture: ComponentFixture<ThyDemoVoteBasicComponent>;
+    let basicTestComponent: ThyDemoVoteBasicComponent;
+    let voteComponent;
+
+    beforeEach(fakeAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [ThyVoteModule, VoteTestModule],
+            providers: [
+                // { provide: Location, useClass: SpyLocation }
+            ]
+        });
+
+        TestBed.compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ThyDemoVoteBasicComponent);
+        basicTestComponent = fixture.debugElement.componentInstance;
+        voteComponent = fixture.debugElement.query(By.directive(ThyVoteComponent));
+    });
+
+    it('should have correct class', () => {
+        fixture.detectChanges();
+        expect(voteComponent.nativeElement.classList.contains('thy-vote')).toBe(true);
+        expect(voteComponent.nativeElement.classList.contains('thy-vote-primary')).toBe(true);
+        expect(voteComponent.nativeElement.classList.contains('thy-vote-horizontal')).toBe(true);
+        expect(voteComponent.nativeElement.classList.contains('thy-vote-horizontal-size-sm')).toBe(true);
+    });
+
+    it('should have thy-vote-success when thyVote is success', () => {
+        basicTestComponent.thyVote = 'success';
+        fixture.detectChanges();
+        expect(voteComponent.nativeElement.classList.contains('thy-vote-success')).toBe(true);
+    });
+
+    it('should have thy-vote-vertical and hy-vote-vertical-size-sm when thyLayout is vertical', () => {
+        basicTestComponent.layout = `vertical`;
+        fixture.detectChanges();
+        expect(voteComponent.nativeElement.classList.contains('thy-vote')).toBe(true);
+        expect(voteComponent.nativeElement.classList.contains('thy-vote-vertical')).toBe(true);
+        expect(voteComponent.nativeElement.classList.contains('thy-vote-vertical-size-sm')).toBe(true);
+        expect(voteComponent.nativeElement.classList.contains('thy-vote-horizontal')).toBe(false);
+    });
+
+    it('should have thy-vote-vertical and thy-vote-vertical-size-sm when thySize is md', () => {
+        basicTestComponent.layout = `vertical`;
+        basicTestComponent.size = `md`;
+        fixture.detectChanges();
+        expect(voteComponent.nativeElement.classList.contains('thy-vote')).toBe(true);
+        expect(voteComponent.nativeElement.classList.contains('thy-vote-vertical')).toBe(true);
+        expect(voteComponent.nativeElement.classList.contains('thy-vote-vertical-size-md')).toBe(true);
+        expect(voteComponent.nativeElement.classList.contains('thy-vote-horizontal')).toBe(false);
+    });
+});
+
+@Component({
+    selector: 'thy-demo-label-basic',
+    template: `
+        <div
+            [thyVote]="thyVote"
+            [thyVoteCount]="vote_count"
+            [thyHasVoted]="has_voted"
+            [thyLayout]="layout"
+            [thySize]="size"
+        ></div>
+    `
+})
+class ThyDemoVoteBasicComponent {
+    vote_count = '10';
+    hasVoted = true;
+    thyVote = '';
+    layout = '';
+    size = '';
+}
+
+@NgModule({
+    imports: [ThyVoteModule],
+    declarations: [ThyDemoVoteBasicComponent],
+    exports: [ThyDemoVoteBasicComponent]
+})
+export class VoteTestModule {}

src/vote/vote.component.html

@@ -0,0 +1,2 @@
+<thy-icon thyIconName="thumb-up" [thyIconType]="_hasVoted ? 'fill' : ''"></thy-icon>
+<div>{{ thyVoteCount }}</div>