feat(typography): Implement mdc-typography-button directive (#148)

Closes #142
trimox · Sep 9, 2017 · 0727217 · 0727217
1 parent 5c92a6d
commit 0727217
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 10 deletions.
diff --git a/src/demo-app/components/typography-demo/typography-demo.component.html b/src/demo-app/components/typography-demo/typography-demo.component.html
@@ -13,6 +13,12 @@ <h1 mdc-typography-display1>Typography</h1>
         </tr>
       </thead>
       <tbody>
+        <tr>
+          <td>mdc-typography-button</td>
+          <td>
+            <div mdc-typography-button>Button</div>
+          </td>
+        </tr>
         <tr>
           <td>mdc-typography-body1</td>
           <td>

diff --git a/src/lib/typography/index.ts b/src/lib/typography/index.ts
@@ -1,35 +1,37 @@
 import { NgModule } from '@angular/core';
 
 import {
-  MdcTypography,
   MdcAdjustMarginDirective,
+  MdcBody1Directive,
+  MdcBody2Directive,
+  MdcButtonDirective,
+  MdcCaptionDirective,
   MdcDisplay1Directive,
   MdcDisplay2Directive,
   MdcDisplay3Directive,
   MdcDisplay4Directive,
   MdcHeadlineDirective,
-  MdcTitleDirective,
   MdcSubheading1Directive,
   MdcSubheading2Directive,
-  MdcBody1Directive,
-  MdcBody2Directive,
-  MdcCaptionDirective
+  MdcTitleDirective,
+  MdcTypography,
 } from './typography.directive';
 
 const TYPOGRAPHY_DIRECTIVES = [
-  MdcTypography,
   MdcAdjustMarginDirective,
+  MdcBody1Directive,
+  MdcBody2Directive,
+  MdcButtonDirective,
+  MdcCaptionDirective,
   MdcDisplay1Directive,
   MdcDisplay2Directive,
   MdcDisplay3Directive,
   MdcDisplay4Directive,
   MdcHeadlineDirective,
-  MdcTitleDirective,
   MdcSubheading1Directive,
   MdcSubheading2Directive,
-  MdcBody1Directive,
-  MdcBody2Directive,
-  MdcCaptionDirective
+  MdcTitleDirective,
+  MdcTypography,
 ];
 
 @NgModule({

diff --git a/src/lib/typography/typography.directive.ts b/src/lib/typography/typography.directive.ts
@@ -93,3 +93,10 @@ export class MdcBody1Directive {
 export class MdcCaptionDirective {
   @HostBinding('class.mdc-typography--caption') isHostClass = true;
 }
+
+@Directive({
+  selector: '[mdc-typography-button]'
+})
+export class MdcButtonDirective {
+  @HostBinding('class.mdc-typography--button') isHostClass = true;
+}