feat: Adding form field wrapper

projects/components/src/form-field/form-field.component.scss

@@ -0,0 +1,34 @@
+@import 'mixins';
+
+.form-field {
+  padding-top: 8px;
+
+  &.optional {
+    margin-bottom: 18px;
+  }
+
+  .info-label {
+    display: flex;
+    padding-bottom: 4px;
+
+    .label {
+      @include body-2-medium($gray-7);
+      display: block;
+    }
+
+    .optional-label {
+      @include body-2-regular($gray-4);
+      padding-left: 4px;
+    }
+
+    .infobox {
+      cursor: pointer;
+      color: $gray-5;
+      padding-left: 6px;
+    }
+  }
+
+  .error-message {
+    @include footnote($red-6);
+  }
+}

projects/components/src/form-field/form-field.component.test.ts

@@ -0,0 +1,57 @@
+import { IconType } from '@hypertrace/assets-library';
+import { createHostFactory } from '@ngneat/spectator/jest';
+import { MockComponent, MockModule } from 'ng-mocks';
+import { IconComponent } from '../icon/icon.component';
+import { LabelComponent } from '../label/label.component';
+import { TooltipModule } from '../tooltip/tooltip.module';
+import { FormFieldComponent } from './form-field.component';
+
+describe('Form Field Component', () => {
+  const hostFactory = createHostFactory({
+    component: FormFieldComponent,
+    declarations: [MockComponent(LabelComponent), MockComponent(IconComponent)],
+    imports: [MockModule(TooltipModule)],
+    shallow: true
+  });
+
+  test('should show mandatory form field data', () => {
+    const spectator = hostFactory(
+      `
+    <ht-form-field [label]="label" [icon]="icon" [iconTooltip]="iconTooltip" [errorLabel]="errorLabel">
+    </ht-form-field>`,
+      {
+        hostProps: {
+          label: 'Label',
+          icon: IconType.Info,
+          iconTooltip: 'Add or update a text',
+          errorLabel: 'Error message'
+        }
+      }
+    );
+    const labels = spectator.queryAll(LabelComponent);
+    expect(labels[0].label).toEqual('Label');
+    expect(labels[1].label).toEqual('Error message');
+
+    const icon = spectator.query(IconComponent);
+    expect(icon?.icon).toEqual(IconType.Info);
+  });
+
+  test('should show optional form field data', () => {
+    const spectator = hostFactory(
+      `
+    <ht-form-field [label]="label" [isOptional]="isOptional" [iconTooltip]="iconTooltip">
+    </ht-form-field>`,
+      {
+        hostProps: {
+          label: 'Label',
+          icon: IconType.Info,
+          iconTooltip: 'Add or update a text',
+          isOptional: true
+        }
+      }
+    );
+    const labels = spectator.queryAll(LabelComponent);
+    expect(labels[0].label).toEqual('Label');
+    expect(labels[1].label).toEqual('(Optional)');
+  });
+});

projects/components/src/form-field/form-field.component.ts

@@ -0,0 +1,44 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { IconSize } from '../icon/icon-size';
+
+@Component({
+  selector: 'ht-form-field',
+  styleUrls: ['./form-field.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <section class="form-field" [ngClass]="{ optional: this.isOptional }">
+      <div class="info-label">
+        <ht-label *ngIf="this.label" class="label" [label]="this.label"></ht-label>
+        <ht-label *ngIf="this.isOptional" class="optional-label" label="(Optional)"></ht-label>
+        <ht-icon
+          *ngIf="this.icon"
+          class="infobox"
+          [icon]="this.icon"
+          [size]="this.iconSize"
+          [htTooltip]="this.iconTooltip"
+        ></ht-icon>
+      </div>
+      <ng-content></ng-content>
+      <ht-label *ngIf="!this.isOptional" class="error-message" [label]="this.errorLabel"></ht-label>
+    </section>
+  `
+})
+export class FormFieldComponent {
+  @Input()
+  public label?: string;
+
+  @Input()
+  public isOptional?: boolean = false;
+
+  @Input()
+  public icon?: string;
+
+  @Input()
+  public iconSize?: IconSize = IconSize.Small;
+
+  @Input()
+  public iconTooltip?: string;
+
+  @Input()
+  public errorLabel?: string = '';
+}

projects/components/src/form-field/form-field.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { IconModule } from '../icon/icon.module';
+import { LabelModule } from '../label/label.module';
+import { TooltipModule } from '../tooltip/tooltip.module';
+import { FormFieldComponent } from './form-field.component';
+
+@NgModule({
+  imports: [CommonModule, LabelModule, IconModule, TooltipModule],
+  declarations: [FormFieldComponent],
+  exports: [FormFieldComponent]
+})
+export class FormFieldModule {}

projects/components/src/public-api.ts

@@ -104,6 +104,10 @@ export * from './filtering/filter-modal/in-filter-modal.component';
 // Filter Parser
 export * from './filtering/filter/parser/filter-parser-lookup.service';
 
+// Form Section
+export * from './form-field/form-field.component';
+export * from './form-field/form-field.module';
+
 // Greeting label
 export { GreetingLabelModule } from './greeting-label/greeting-label.module';
 export { GreetingLabelComponent } from './greeting-label/greeting-label.component';