Icon Button Documentation (#268)

mobi · Oct 14, 2019 · 1a41c1a · 1a41c1a
1 parent 9594b40
commit 1a41c1a
Show file tree

Hide file tree

Showing 6 changed files with 226 additions and 0 deletions.
diff --git a/projects/go-style-guide/src/app/app.component.ts b/projects/go-style-guide/src/app/app.component.ts
@@ -30,6 +30,7 @@ export class AppComponent {
       { route: 'ui-kit/configuration', routeTitle: 'Configuration' },
       { route: 'ui-kit/copy', routeTitle: 'Copy' },
       { route: 'ui-kit/forms', routeTitle: 'Forms' },
+      { route: 'ui-kit/icon-button', routeTitle: 'Icon Button' },
       { route: 'ui-kit/layout', routeTitle: 'Layout' },
       { route: 'ui-kit/loader', routeTitle: 'Loader' },
       { route: 'ui-kit/icon', routeTitle: 'Icon' },

diff --git a/...guide/src/app/features/ui-kit/components/icon-button-docs/icon-button-docs.component.html b/...guide/src/app/features/ui-kit/components/icon-button-docs/icon-button-docs.component.html
@@ -0,0 +1,146 @@
+<header class="go-page-title">
+  <h1 class="go-heading-3">{{ pageTitle }}</h1>
+</header>
+<div class="go-container">
+  <div class="go-column go-column--100">
+    <go-card [showHeader]="false" class="go-column go-column--100" id="description">
+      <ng-container go-card-content>
+        <div class="go-container">
+          <div class="go-column go-column--100">
+            <!-- Intro -->
+            <h2 class="go-heading-5">Usage</h2>
+            <p class="go-body-copy">
+              The <code class="code-block--inline">&lt;go-icon-button&gt;</code>
+              component should be used for buttons that have no text.
+            </p>
+
+            <!-- Bindings -->
+            <h2 class="go-heading-5">Bindings</h2>
+            <code [highlight]="componentBindings"></code>
+          </div>
+          <div class="go-column go-column--100">
+            <h3 class="go-heading-6">buttonDisabled</h3>
+            <p class="go-body-copy">
+              Disables the button. This should be handled by the parent
+              component.
+            </p>
+
+            <h3 class="go-heading-6">buttonIcon</h3>
+            <p class="go-body-copy">
+              Changes the icon that is displayed within the button. See the 
+              <a class="go-link" href="https://material.io/tools/icons/">Material Design System Icons</a>
+              page for available icons.
+            </p>
+
+            <h3 class="go-heading-6">buttonSize</h3>
+            <p class="go-body-copy">
+              Changes the <code class="code-block--inline">font-size</code> property of the icon. 
+              This attribute defaults to "small", and the size options are as follows:
+            </p>
+            <ol class="go-list go-list--ordered">
+              <li><code class="code-block--inline">small</code> (1 rem)</li>
+              <li><code class="code-block--inline">medium</code> (1.5 rem)</li>
+              <li><code class="code-block--inline">large</code> (2 rem)</li>
+            </ol>
+
+            <h3 class="go-heading-6">buttonTitle</h3>
+            <p class="go-body-copy">
+              Changes the <code class="code-block--inline">title</code> attribute of the button,
+              causing a tooltip to be displayed when hovering over the button.
+            </p>
+          </div>
+        </div>
+      </ng-container>
+    </go-card>
+  </div>
+
+  <go-card class="go-column go-column--100" id="button-disabled">
+    <ng-container go-card-header>
+      <h2 class="go-heading-5">Button Disabled</h2>
+    </ng-container>
+    <ng-container go-card-content>
+      <section class="go-container">
+        <div class="go-column go-column--50">
+          <code [highlight]="disabledExample"></code>
+        </div>
+        <div class="go-column go-column--50">
+          <go-icon-button (handleClick)="testClick()" buttonIcon="home" buttonDisabled="true"></go-icon-button>
+        </div>
+      </section>
+    </ng-container>
+  </go-card>
+
+  <go-card class="go-column go-column--100" id="button-icon">
+    <ng-container go-card-header>
+      <h2 class="go-heading-5">Button Icon</h2>
+    </ng-container>
+    <ng-container go-card-content>
+      <section class="go-container">
+        <div class="go-column go-column--50">
+          <code [highlight]="iconExample"></code>
+        </div>
+        <div class="go-column go-column--50">
+          <div class="go-column">
+            <go-icon-button (handleClick)="testClick()" buttonIcon="home"></go-icon-button>
+          </div>
+          <div class="go-column">
+            <go-icon-button (handleClick)="testClick()" buttonIcon="school"></go-icon-button>
+          </div>
+          <div class="go-column">
+            <go-icon-button (handleClick)="testClick()" buttonIcon="work"></go-icon-button>
+          </div>
+        </div>
+      </section>
+    </ng-container>
+  </go-card>
+
+  <go-card class="go-column go-column--100" id="button-size">
+    <ng-container go-card-header>
+      <h2 class="go-heading-5">Button Size</h2>
+    </ng-container>
+    <ng-container go-card-content>
+      <section class="go-container">
+        <div class="go-column go-column--50">
+          <code [highlight]="sizeExample"></code>
+        </div>
+        <div class="go-column go-column--50">
+          <div class="go-column">
+            <go-icon-button (handleClick)="testClick()" buttonIcon="home" buttonSize="small"></go-icon-button>
+          </div>
+          <div class="go-column">
+            <go-icon-button (handleClick)="testClick()" buttonIcon="home" buttonSize="medium"></go-icon-button>
+          </div>
+          <div class="go-column">
+            <go-icon-button (handleClick)="testClick()" buttonIcon="home" buttonSize="large"></go-icon-button>
+          </div>
+        </div>
+      </section>
+    </ng-container>
+  </go-card>
+
+  <go-card class="go-column go-column--100" id="button-title">
+    <ng-container go-card-header>
+      <h2 class="go-heading-5">Button Title</h2>
+    </ng-container>
+    <ng-container go-card-content>
+      <p class="go-body-copy">Hover the icons to display their tooltips.</p>
+      <section class="go-container">
+        <div class="go-column go-column--50">
+          <code [highlight]="titleExample"></code>
+        </div>
+        <div class="go-column go-column--50">
+          <div class="go-column">
+            <go-icon-button (handleClick)="testClick()" buttonIcon="home" buttonTitle="Home"></go-icon-button>
+          </div>
+          <div class="go-column">
+            <go-icon-button (handleClick)="testClick()" buttonIcon="school" buttonTitle="School"></go-icon-button>
+          </div>
+          <div class="go-column">
+            <go-icon-button (handleClick)="testClick()" buttonIcon="work" buttonTitle="Work"></go-icon-button>
+          </div>
+        </div>
+      </section>
+    </ng-container>
+  </go-card>
+</div>
+
diff --git a/...de/src/app/features/ui-kit/components/icon-button-docs/icon-button-docs.component.spec.ts b/...de/src/app/features/ui-kit/components/icon-button-docs/icon-button-docs.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IconButtonDocsComponent } from './icon-button-docs.component';
+
+describe('IconButtonDocsComponent', () => {
+  let component: IconButtonDocsComponent;
+  let fixture: ComponentFixture<IconButtonDocsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ IconButtonDocsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IconButtonDocsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/...e-guide/src/app/features/ui-kit/components/icon-button-docs/icon-button-docs.component.ts b/...e-guide/src/app/features/ui-kit/components/icon-button-docs/icon-button-docs.component.ts
@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-icon-button-docs',
+  templateUrl: './icon-button-docs.component.html'
+})
+export class IconButtonDocsComponent {
+  pageTitle: string = 'Icon Button';
+
+  componentBindings: string = `
+  @Input() buttonDisabled: boolean;
+  @Input() buttonIcon: string;
+  @Input() buttonSize: string = 'small';
+  @Input() buttonTitle: string;
+
+  @Output() handleClick: EventEmitter<void> = new EventEmitter();
+  `;
+
+  disabledExample: string = `
+  <go-icon-button (handleClick)="testClick()" buttonIcon="home" buttonDisabled="true"></go-icon-button>
+  `;
+
+  iconExample: string = `
+  <go-icon-button (handleClick)="testClick()" buttonIcon="home"></go-icon-button>
+
+  <go-icon-button (handleClick)="testClick()" buttonIcon="school"></go-icon-button>
+
+  <go-icon-button (handleClick)="testClick()" buttonIcon="work"></go-icon-button>
+  `;
+
+  sizeExample: string = `
+  <go-icon-button (handleClick)="testClick()" buttonIcon="home" buttonSize="small"></go-icon-button>
+
+  <go-icon-button (handleClick)="testClick()" buttonIcon="home" buttonSize="medium"></go-icon-button>
+
+  <go-icon-button (handleClick)="testClick()" buttonIcon="home" buttonSize="large"></go-icon-button>
+  `;
+
+  titleExample: string = `
+  <go-icon-button (handleClick)="testClick()" buttonIcon="home" buttonTitle="Home"></go-icon-button>
+
+  <go-icon-button (handleClick)="testClick()" buttonIcon="school" buttonTitle="School"></go-icon-button>
+
+  <go-icon-button (handleClick)="testClick()" buttonIcon="work" buttonTitle="Work"></go-icon-button>
+  `;
+
+  public testClick(): void {
+    alert('Button clicked!');
+  }
+}
diff --git a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts
@@ -11,6 +11,7 @@ import { CopyDocsComponent } from '../components/copy-docs/copy-docs.component';
 import { DatepickerDocsComponent } from '../components/form-docs/components/datepicker-docs/datepicker-docs.component';
 import { FormDocsComponent } from '../components/form-docs/form-docs.component';
 import { FormsOverviewComponent } from '../components/form-docs/components/forms-overview/forms-overview.component';
+import { IconButtonDocsComponent } from '../components/icon-button-docs/icon-button-docs.component';
 import { IconDocsComponent } from '../components/icon-docs/icon-docs.component';
 import { InputDocsComponent } from '../components/form-docs/components/input-docs/input-docs.component';
 import { ModalDocsComponent } from '../components/modal-docs/modal-docs.component';
@@ -64,6 +65,7 @@ const routes: Routes = [
     { path: 'select', component: SelectDocsComponent },
     { path: 'textarea', component: TextAreaDocsComponent }
   ]},
+  { path: 'ui-kit/icon-button', component: IconButtonDocsComponent },
   { path: 'ui-kit/layout', component: LayoutDocsComponent, children: [
     { path: '', component: LayoutOverviewComponent },
     { path: 'header', component: LayoutHeaderComponent },

diff --git a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts
@@ -43,6 +43,7 @@ import { DatepickerDocsComponent } from './components/form-docs/components/datep
 import { FormControlDocsComponent } from './components/form-docs/components/form-control-docs/form-control-docs.component';
 import { FormDocsComponent } from './components/form-docs/form-docs.component';
 import { FormsOverviewComponent } from './components/form-docs/components/forms-overview/forms-overview.component';
+import { IconButtonDocsComponent } from './components/icon-button-docs/icon-button-docs.component';
 import { IconDocsComponent } from './components/icon-docs/icon-docs.component';
 import { InputDocsComponent } from './components/form-docs/components/input-docs/input-docs.component';
 import { ModalDocsComponent } from './components/modal-docs/modal-docs.component';
@@ -112,6 +113,7 @@ import { AccordionOverviewComponent } from './components/accordion-docs/componen
     DatepickerDocsComponent,
     FormDocsComponent,
     FormsOverviewComponent,
+    IconButtonDocsComponent,
     IconDocsComponent,
     InputDocsComponent,
     ModalDocsComponent,