feat(design): add textarea component

apps/design-land/src/app/app-routing.module.ts

@@ -34,6 +34,7 @@ export const appRoutes: Routes = [
   { path: 'sidebar', loadChildren: () => import('./sidebar/sidebar.module').then(m => m.SidebarModule) },
   { path: 'checkbox', loadChildren: () => import('./checkbox/checkbox.module').then(m => m.CheckboxModule) },
   { path: 'radio', loadChildren: () => import('./radio/radio.module').then(m => m.RadioModule) },
+  { path: 'text-area', loadChildren: () => import('./text-area/text-area.module').then(m => m.DesignLandTextAreaModule) },
   { path: 'typography', loadChildren: () => import('./typography/typography.module').then(m => m.DesignLandTypographyModule) }
 ]
 

apps/design-land/src/app/app.component.html

@@ -13,6 +13,7 @@
       <a daff-link-set-item routerLink="image">Image</a>
       <a daff-link-set-item routerLink="progress-indicator">Progress Indicator</a>
       <a daff-link-set-item routerLink="radio">Radio</a>
+			<a daff-link-set-item routerLink="text-area">Text Area</a>
     </daff-link-set>
     <daff-link-set>
       <div daffLinkSetHeading>Molecules</div>

apps/design-land/src/app/text-area/text-area-routing.module.ts

@@ -0,0 +1,20 @@
+import {
+  Routes,
+  RouterModule,
+} from '@angular/router';
+import { NgModule } from '@angular/core';
+import { DesignLandTextAreaComponent } from './text-area.component';
+
+export const formRoutes: Routes = [
+  { path: '', component: DesignLandTextAreaComponent },
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(formRoutes),
+  ],
+  exports: [
+    RouterModule,
+  ],
+})
+export class DesignLandTextAreaRoutingModule {}

apps/design-land/src/app/text-area/text-area.component.html

@@ -0,0 +1,12 @@
+<form [formGroup]="form" #ngForm="ngForm">
+	<daff-form-field>
+		<label golfFormLabel>Comments/Questions?</label>
+		<textarea daff-textarea type="text"
+			[formControl]="form.controls['textareaExample']"
+			[formSubmitted]="ngForm.submitted"></textarea>
+		<daff-error-message *ngIf="form.controls['textareaExample'].errors && (form.controls['textareaExample'].touched || ngForm.submitted)">This is a required field >:(</daff-error-message>
+		<div class="form__error-placeholder" *ngIf="!(form.controls['textareaExample'].errors && (form.controls['textareaExample'].touched || ngForm.submitted))"></div>
+	</daff-form-field>
+	<button daff-button type="submit" daff-button>Submit</button>
+</form>
+

apps/design-land/src/app/text-area/text-area.component.scss

@@ -0,0 +1,10 @@
+.form {
+
+  & input {
+    height: 50px;
+    font-size: 40px;
+  }
+  &__error-placeholder {
+    height: 18px;
+  }
+}

apps/design-land/src/app/text-area/text-area.component.ts

@@ -0,0 +1,29 @@
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
+import {
+  FormBuilder,
+  Validators,
+  FormGroup,
+} from '@angular/forms';
+
+@Component({
+  selector: 'design-land-text-area',
+  templateUrl: './text-area.component.html',
+  styleUrls: ['./text-area.component.scss'],
+})
+export class DesignLandTextAreaComponent implements OnInit {
+
+  form: FormGroup;
+
+  constructor(
+    private fb: FormBuilder,
+  ) {}
+
+  ngOnInit() {
+    this.form = this.fb.group({
+      textareaExample: ['', Validators.required],
+    });
+  }
+}

apps/design-land/src/app/text-area/text-area.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { DesignLandTextAreaRoutingModule } from './text-area-routing.module';
+
+import { DesignLandTextAreaComponent } from './text-area.component';
+import {
+  DaffTextareaModule,
+  DaffFormFieldModule,
+  DaffButtonModule,
+	DaffInputModule,
+} from '@daffodil/design';
+import { ReactiveFormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [
+    DesignLandTextAreaComponent,
+  ],
+  imports: [
+    CommonModule,
+		DaffTextareaModule,
+		DaffInputModule,
+    DaffFormFieldModule,
+    DesignLandTextAreaRoutingModule,
+    ReactiveFormsModule,
+    DaffButtonModule,
+  ],
+})
+export class DesignLandTextAreaModule { }

libs/design/src/atoms/form/textarea/public_api.ts

@@ -0,0 +1,2 @@
+export { DaffTextareaComponent } from './textarea.component';
+export { DaffTextareaModule } from './textarea.module';

libs/design/src/atoms/form/textarea/textarea.component.scss

@@ -0,0 +1,23 @@
+@import 'daff-util';
+
+:host {
+	background: transparent;
+	border: none;
+	border-radius: 3px;
+	box-shadow: none;
+	font-size: 1rem;
+	line-height: 1.25rem;
+	margin: 0;
+	width: 100% !important; /* stylelint-disable-line declaration-no-important */
+	box-sizing: border-box;
+
+	&:focus {
+		border: none;
+		box-shadow: none;
+		outline: none;
+	}
+
+	&::placeholder {
+		color: transparent;
+	}
+}

libs/design/src/atoms/form/textarea/textarea.component.spec.ts

@@ -0,0 +1,46 @@
+import {
+  Component,
+  DebugElement,
+} from '@angular/core';
+import {
+  waitForAsync,
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { DaffTextareaComponent } from './textarea.component';
+
+
+@Component ({
+  template: `<textarea daff-textarea></textarea>`,
+})
+
+class WrapperComponent {}
+
+describe('DaffTextareaComponent', () => {
+  let fixture: ComponentFixture<WrapperComponent>;
+  let de: DebugElement;
+  let wrapper: WrapperComponent;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        DaffTextareaComponent,
+        WrapperComponent,
+      ],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WrapperComponent);
+    wrapper = fixture.componentInstance;
+    de = fixture.debugElement.query(By.css('textarea[daff-textarea]'));
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(wrapper).toBeTruthy();
+  });
+});

libs/design/src/atoms/form/textarea/textarea.component.ts

@@ -0,0 +1,54 @@
+import {
+  Component,
+  Input,
+  Optional,
+  Self,
+  ChangeDetectionStrategy,
+  HostListener,
+  ElementRef,
+} from '@angular/core';
+import { NgControl } from '@angular/forms';
+
+import { DaffFormFieldControl } from '../form-field/form-field-control';
+
+/**
+ * A component for standardizing textarea form fields.
+ */
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'textarea[daff-textarea]',
+  template: '<ng-content></ng-content>',
+  styleUrls: ['./textarea.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+		 { provide: DaffFormFieldControl, useExisting: DaffTextareaComponent },
+  ],
+})
+export class DaffTextareaComponent implements DaffFormFieldControl {
+
+  focused = false;
+
+  get disabled() {
+    return this.ngControl.disabled;
+  }
+
+  /**
+   * Has the form been submitted.
+   */
+  @Input() formSubmitted: boolean;
+
+  @HostListener('focus') onFocus() {
+    this.focused = true;
+  }
+
+  @HostListener('blur') onBlur() {
+    this.focused = false;
+  }
+
+  constructor(@Optional() @Self() public ngControl: NgControl, private _elementRef: ElementRef<HTMLInputElement>) {}
+
+  focus() {
+    this._elementRef.nativeElement.focus();
+  }
+}

libs/design/src/atoms/form/textarea/textarea.md

@@ -0,0 +1,26 @@
+# Textarea
+`[daff-textarea]` is a component selector that allows the native `<textarea>` element to work with `<daff-form-field>`. It has the same functionality as a native `<textarea>` and contains custom styling and functionality. It is used for multi-line text input. It can not be used by itself and must be contained inside of a `<daff-form-field>`.
+
+## Form Field Features
+There are many features in `<daff-form-field>` that can be used with the `[daff-textarea]` component. These include `[daffFormLabel]` and `<daff-error-message>`.
+
+For additional information about these features, see the <a href="/form-field">form field</a> documentation.
+
+## Accessibility
+  The `[daff-textarea]` component works with the native `<textarea>` element to provide an accessible experience. `[daffFormLabel` should always be used in conjuction with `[daff-textarea]` even if `placeholder="placeholder text"` is used. An error will occur if `[daffFormLabel]` is not defined.
+
+## Usage
+```
+<h3>Basic Textarea</h3>
+<daff-form-field>
+  <label daffFormLabel>Comments/Questions?</label>
+  <textarea daff-textarea [formControl]="comments"></textarea>
+  <daff-error-message *ngIf="comments.invalid">This field is required.</daff-error-message>
+</daff-form-field>
+
+<h3>Disabled Textarea</h3>
+<daff-form-field>
+  <label daffFormLabel>Comments/Questions?</label>
+  <textarea daff-textarea [formControl]="comments2"></textarea>
+</daff-form-field>
+```

libs/design/src/atoms/form/textarea/textarea.module.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { DaffTextareaComponent } from './textarea.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  exports: [
+    DaffTextareaComponent,
+  ],
+  declarations: [
+    DaffTextareaComponent,
+  ],
+})
+export class DaffTextareaModule {}

libs/design/src/public_api.ts

@@ -11,6 +11,7 @@ export * from './atoms/image/public_api';
 export * from './atoms/form/input/public_api';
 export * from './atoms/form/select/public_api';
 export * from './atoms/form/checkbox/public_api';
+export * from './atoms/form/textarea/public_api';
 export * from './atoms/container/public_api';
 export * from './atoms/loading-icon/public_api';
 export * from './atoms/progress-indicator/public_api';