feat(design): add input component

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

@@ -18,7 +18,17 @@ <h3>Disabled</h3>
 
 <design-land-example-viewer-container example="input-disabled"></design-land-example-viewer-container>
 
+<h3>Input With Hint</h3>
+<p>The input in this example has a hint.</p>
+
+<design-land-example-viewer-container example="input-hint"></design-land-example-viewer-container>
+
 <h3>With Reactive Forms</h3>
 <p>The input in this example uses the <code>ReactiveFormsModule</code> to display errors.</p>
 
-<design-land-example-viewer-container example="input-error"></design-land-example-viewer-container>
+<design-land-example-viewer-container example="input-error"></design-land-example-viewer-container>
+
+<h3>Password With Reactive Forms</h3>
+<p>This is a special case where hints and errors for passwords are displayed.</p>
+
+<design-land-example-viewer-container example="password-with-form-field"></design-land-example-viewer-container>

libs/design/input/examples/src/examples.ts

@@ -1,11 +1,15 @@
 import { BasicInputComponent } from './basic-input/basic-input.component';
 import { InputDisabledComponent } from './input-disabled/input-disabled.component';
 import { InputErrorComponent } from './input-error/input-error.component';
+import { InputHintComponent } from './input-hint/input-hint.component';
 import { InputWithFormFieldComponent } from './input-with-form-field/input-with-form-field.component';
+import { PasswordWithFormFieldComponent } from './password-with-form-field/password-with-form-field.component';
 
 export const INPUT_EXAMPLES = [
   BasicInputComponent,
   InputWithFormFieldComponent,
   InputDisabledComponent,
   InputErrorComponent,
+  PasswordWithFormFieldComponent,
+  InputHintComponent,
 ];

libs/design/input/examples/src/input-disabled/input-disabled.component.html

@@ -1,3 +1,4 @@
 <daff-form-field>
-  <input disabled daff-input type="text" placeholder="Email" name="email" />
+  <input daff-input type="text" name="email" id="disabled-input" disabled/>
+  <label for="disabled-input">Label</label>
 </daff-form-field>

libs/design/input/examples/src/input-disabled/input-disabled.component.ts

@@ -17,5 +17,5 @@ import {
   imports: [DaffFormFieldModule, DaffInputModule],
 })
 export class InputDisabledComponent {
-
+  isDisabled = true;
 }

libs/design/input/examples/src/input-error/input-error.component.html

@@ -1,4 +1,12 @@
 <daff-form-field>
-  <input daff-input type="text" placeholder="Email" name="email" [formControl]="control" />
+  <input daff-input type="text" placeholder="Email" name="email" [formControl]="control" id="error-input"/>
+  <label for="error-input">Label</label>
+  @if (control.errors?.required) {
+    <daff-error-message>Email is a required field.</daff-error-message>
+  }
+  @if (control.errors?.email) {
+    <daff-error-message>Email is not valid.</daff-error-message>
+  }
+  <div class="hint">Hint goes here.</div>
 </daff-form-field>
 <p>Value: {{ control.value }} </p>

libs/design/input/examples/src/input-hint/input-hint.component.html

@@ -0,0 +1,5 @@
+<daff-form-field>
+  <input daff-input type="text" placeholder="Email" name="email" id="input-hint"/>
+  <label for="input-hint">Label</label>
+  <div class="hint">Hint goes here.</div>
+</daff-form-field>

libs/design/input/examples/src/input-hint/input-hint.component.ts

@@ -0,0 +1,23 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+
+import {
+  DaffFormFieldModule,
+  DaffInputModule,
+} from '@daffodil/design';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'input-hint',
+  templateUrl: './input-hint.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    DaffFormFieldModule,
+    DaffInputModule,
+  ],
+})
+export class InputHintComponent {
+}

libs/design/input/examples/src/input-with-form-field/input-with-form-field.component.html

@@ -1,3 +1,6 @@
 <daff-form-field>
-  <input daff-input type="text" placeholder="Email" name="email" />
-</daff-form-field>
+  <fa-icon [icon]="faUser" class="prefix"></fa-icon>
+  <input daff-input type="text" name="email" id="input" />
+  <label for="input">Label</label>
+  <fa-icon [icon]="faCircleXmark" class="suffix"></fa-icon>
+</daff-form-field>

libs/design/input/examples/src/input-with-form-field/input-with-form-field.component.ts

@@ -2,20 +2,27 @@ import {
   ChangeDetectionStrategy,
   Component,
 } from '@angular/core';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import {
+  faUser,
+  faCircleXmark,
+} from '@fortawesome/free-solid-svg-icons';
 
 import {
   DaffFormFieldModule,
   DaffInputModule,
 } from '@daffodil/design';
 
+
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'input-with-form-field',
   templateUrl: './input-with-form-field.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [DaffFormFieldModule, DaffInputModule],
+  imports: [DaffFormFieldModule, DaffInputModule, FontAwesomeModule],
 })
 export class InputWithFormFieldComponent {
-
+  faUser = faUser;
+  faCircleXmark = faCircleXmark;
 }

libs/design/input/examples/src/password-with-form-field/password-with-form-field.component.html

@@ -0,0 +1,5 @@
+<daff-form-field>
+  <input daff-input type="password" placeholder="Password" name="password" id="password-input" />
+  <!-- <input daff-input type="text" name="email" id="input"/> -->
+  <label for="password-input">Label</label>
+</daff-form-field>

libs/design/input/examples/src/password-with-form-field/password-with-form-field.component.ts

@@ -0,0 +1,25 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+import {
+  ReactiveFormsModule,
+  UntypedFormControl,
+} from '@angular/forms';
+
+import {
+  DaffFormFieldModule,
+  DaffInputModule,
+} from '@daffodil/design';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'password-with-form-field',
+  templateUrl: './password-with-form-field.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [DaffFormFieldModule, DaffInputModule, ReactiveFormsModule],
+})
+export class PasswordWithFormFieldComponent {
+  control: UntypedFormControl = new UntypedFormControl();
+}

libs/design/src/atoms/form/error-message/error-message.component.scss

@@ -3,5 +3,6 @@
 :host {
 	display: block;
 	font-size: t.$small-font-size;
-	margin-top: 5px;
+	margin-top: 4px;
+  padding-left: 16px;
 }

libs/design/src/atoms/form/form-field/form-field-control.ts

@@ -11,12 +11,14 @@ import { NgControl } from '@angular/forms';
  * in javascript, they get thrown out by the typescript compiler and cannot
  * be used for the necessary dependency injection.
  */
-export abstract class DaffFormFieldControl {
+export abstract class DaffFormFieldControl<T> {
   readonly ngControl: NgControl | null;
 
   readonly controlType?: any;
 
   readonly focused: boolean;
 
   abstract focus(event?: Event): void;
+
+  readonly value: T;
 };

libs/design/src/atoms/form/form-field/form-field/form-field-theme.scss

@@ -13,26 +13,33 @@
 	.daff-form-field {
 		&__control {
 			background: $base;
-			border: 1px solid theming.daff-illuminate($base, $neutral, 3);
-			color: theming.daff-illuminate($base-contrast, $neutral, 4);
+			border: 1px solid theming.daff-illuminate($base, $neutral, 6);
+			color: theming.daff-illuminate($base, $neutral, 6);
 
-			&:focus {
-				border: 1px solid $base-contrast;
+			&.daff-focus {
+        border: 1px solid theming.daff-color($primary, 'default');
 			}
 
 			&.daff-error {
 				border: 1px solid theming.daff-color(theming.$daff-red, 60);
-
-				&:focus {
-					border: 1px solid theming.daff-color(theming.$daff-red, 60);
-				}
 			}
 
 			&.daff-valid {
 				> * {
 					color: $base-contrast;
 				}
 			}
+
+      &:has(*:disabled),
+      &:has(*.isDisabled) {
+        border: 1px solid theming.daff-illuminate($base, $neutral, 4);
+        color: theming.daff-illuminate($base, $neutral, 4);
+      }
+
+      *:disabled,
+      .isDisabled {
+        background-color: transparent;
+      }
 		}
 	}
 }

libs/design/src/atoms/form/form-field/form-field/form-field.component.html

@@ -1,7 +1,24 @@
-<div class="daff-form-field__control" [class.daff-error]="isError" [class.daff-valid]="isValid" [class.daff-focus]="isFocused">
-  <ng-content></ng-content>
-  <div class="daff-form-field__icon" *ngIf="_control.controlType === 'native-select'">
-    <fa-icon [icon]="faChevronDown"></fa-icon>
-  </div>
+<div
+	class="daff-form-field__control"
+	[class.daff-focus]="isFocused"
+	[class.daff-error]="isError"
+	[class.daff-valid]="isValid"
+	[class.daff-filled]="isFilled"
+>
+  <span class="daff-form-field__icon daff-form-field__icon--prefix">
+    <ng-content select=".prefix"></ng-content>
+  </span>
+	<ng-content></ng-content>
+	<div
+		class="daff-form-field__icon"
+		*ngIf="_control.controlType === 'native-select'"
+	>
+		<fa-icon [icon]="faChevronDown"></fa-icon>
+	</div>
+  <span class="daff-form-field__icon daff-form-field__icon--suffix">
+    <ng-content select=".suffix"></ng-content>
+  </span>
 </div>
-<ng-content select="daff-error-message"></ng-content>
+@if (_control?.ngControl?.touched) {
+  <ng-content select="daff-error-message"></ng-content>
+}

libs/design/src/atoms/form/form-field/form-field/form-field.component.scss

@@ -3,19 +3,81 @@
 	position: relative;
 
 	&__control {
-		border-radius: 3px;
-		display: inline-block;
-		font-size: 1rem;
+		border-radius: 4px;
+		display: flex;
+		font-size: 16px;
 		height: inherit;
-		line-height: 1.5rem;
-		padding: 10px 15px;
+		line-height: 16px;
+		padding: 8px 16px;
+    max-width: 320px;
 		width: 100%;
+    position: relative;
+
+    label {
+      position: absolute;
+      left: 16px;
+      top: 50%;
+      transform: translateY(-50%);
+      transition: all 0.2s ease;
+      pointer-events: none;
+    }
+
+    input {
+      padding-top: 16px;
+
+      &:placeholder-shown ~ label,
+      &:focus ~ label {
+        top: 6px;
+        font-size: 12px;
+        transform: none;
+      }
+    }
+
+    &.daff-filled label {
+      top: 6px;
+      font-size: 12px;
+      transform: none;
+    }
 	}
 
 	&__icon {
 		display: inline-block;
 		pointer-events: none;
 		position: absolute;
-		right: 15px;
-	}
+    top: 50%;
+    transform: translateY(-50%);
+
+    &--prefix {
+      left: 16px;
+    }
+
+    &--suffix {
+      right: 16px;
+    }
+  }
+
+  :has(fa-icon.prefix) > label,
+  :has(fa-icon.prefix) > input {
+    padding-left: 28px;
+  }
+
+  .hint {
+    position: absolute;
+    top: 100%;
+    left: 16px;
+    margin-top: 8px;
+    font-size: 12px;
+  }
+
+  &:has(.hint) {
+    margin-bottom: 24px;
+
+    daff-error-message {
+      margin-top: 24px;
+    }
+
+    &:has(daff-error-message) {
+      margin-bottom: 0px;
+    }
+  }
 }

libs/design/src/atoms/form/form-field/form-field/form-field.component.spec.ts

@@ -33,7 +33,7 @@ describe('@daffodil/design | DaffFormFieldComponent | Usage', () => {
   let component: DaffFormFieldComponent;
   let fixture: ComponentFixture<WrapperComponent>;
   let formFieldControlElement: HTMLElement;
-  let control: DaffFormFieldControl;
+  let control: DaffFormFieldControl<unknown>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({