[Chore] Forms Enhancements

projects/go-lib/src/lib/components/go-card/go-card.component.scss

@@ -28,10 +28,6 @@
       &:last-child {
         padding-right: 0;
       }
-
-      &:hover {
-        color: $base-primary;
-      }
     }
   }
 }

projects/go-lib/src/lib/components/go-select/go-select.component.scss

@@ -137,6 +137,7 @@
 }
 
 .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+  color: $theme-light-color;
   font-size: .875rem;
   padding: .5rem;
 
@@ -147,6 +148,7 @@
   &.ng-option-selected,
   &.ng-option-selected.ng-option-marked {
     background-color: $theme-light-bg-hover;
+    color: $theme-light-color;
 
     .ng-option-label {
       font-weight: $weight-light;
@@ -176,6 +178,8 @@ body > .ng-dropdown-panel {
 // overrides ng-select styles when theme is dark
 .ng-select.go-select--dark {
   .ng-dropdown-panel {
+    box-shadow: $global-box-shadow--dark-popup;
+
     &.ng-select-bottom {
       border: 0;
     }
@@ -193,6 +197,7 @@ body > .ng-dropdown-panel {
       &.ng-option-selected,
       &.ng-option-selected.ng-option-marked {
         background-color: $base-dark-secondary;
+        color: $theme-dark-color;
 
         .ng-option-label {
           font-weight: $weight-light;

projects/go-lib/src/lib/components/go-timepicker/go-time.component.html

@@ -4,7 +4,8 @@
     [ngClass]="{
       'go-time--above': displayAbove,
       'go-time--right': displayFromRight,
-      'go-time--append-to-content': appendToContent
+      'go-time--append-to-content': appendToContent,
+      'go-time--dark': theme === 'dark'
     }"
   >
   <div class="go-time-column">
@@ -47,15 +48,22 @@
     </div>
     <!-- AM / PM Button -->
     <div class="go-time-column go-time-format">
-      <go-button buttonVariant="secondary" (click)="changeFormat()">
+      <go-button
+        buttonVariant="secondary"
+        [useDarkTheme]="theme === 'dark'"
+        (handleClick)="changeFormat()">
        {{ format ? 'AM' : 'PM' }}
       </go-button>
     </div>
     <!-- Action Button Group -->
     <div>
       <ul class="go-button-group go-time-action">
         <li class="go-button-group__item">
-          <go-button class="go-time-button" buttonVariant="secondary" (handleClick)="clear()">
+          <go-button
+            class="go-time-button"
+            buttonVariant="secondary"
+            [useDarkTheme]="theme === 'dark'"
+            (handleClick)="clear()">
             Clear
           </go-button>
         </li>

projects/go-lib/src/lib/components/go-timepicker/go-time.component.scss

@@ -25,6 +25,12 @@
   &--wrapper {
     display: flex;
   }
+
+  &--dark {
+    background: $theme-dark-bg;
+    border-color: $base-dark-secondary;
+    box-shadow: $global-box-shadow--dark-popup;
+  }
 }
 
 .colon-content {

projects/go-lib/src/lib/components/go-timepicker/go-time.component.ts

@@ -24,6 +24,8 @@ export class GoTimeComponent implements OnInit, AfterViewInit {
   @Input() selectedTime: string;
   @Input() displayAbove: boolean;
   @Input() displayFromRight: boolean;
+  @Input() theme: 'light' | 'dark' = 'light';
+
   @Output() timePicked: EventEmitter<object> = new EventEmitter();
   @Output() closeTime: EventEmitter<void> = new EventEmitter();
 

projects/go-lib/src/lib/components/go-timepicker/go-timepicker.component.html

@@ -35,6 +35,7 @@
     [selectedTime] = "openTimeValue"
     (timePicked)="timePicked($event)"
     (closeTime) = "closeTime()"
+    [theme]="theme"
   >
   </go-time>
 </div>

projects/go-lib/src/lib/components/go-timepicker/go-timepicker.component.ts

@@ -21,7 +21,7 @@ export class GoTimepickerComponent implements OnInit, AfterViewInit {
   @Input() control: FormControl;
   @Input() hints: string[];
   @Input() placeholder: string = '';
-  @Input() theme: string = 'light';
+  @Input() theme: 'light' | 'dark' = 'light';
   @Input() appendToContent: boolean = false;
 
   selectedTime: string = '';

projects/go-lib/src/styles/_forms.scss

@@ -189,6 +189,7 @@ $input--disabled-background: rgba($base-dark-secondary, .4);
 
   // Dark Overrides
   // ---------------------------------------------
+  &--dark,
   &--dark &__input,
   &--dark &__select,
   &__input--dark,

projects/go-lib/src/styles/_mixins.scss

@@ -69,6 +69,7 @@ $z-index: (
   border: 1px solid lighten($theme-light-border, 13.5%);
   border-radius: $global-radius;
   box-shadow: none;
+  color: $theme-light-color;
   font-family: $primary-font-stack;
   font-size: .875rem;
   font-weight: $weight-light;

projects/go-lib/src/styles/_typography.scss

@@ -55,6 +55,41 @@ strong {
     color: $ui-color-neutral;
     outline: none;
   }
+
+  &--unstyled {
+    color: inherit;
+    text-decoration: none;
+
+    &:active,
+    &:focus,
+    &:hover,
+    &:visited {
+      color: inherit;
+    }
+  }
+
+  &--dark {
+    color: $theme-dark-color;
+
+    &:active,
+    &:visited {
+      color: $theme-dark-color;
+    }
+
+    &.go-link {
+      &--unstyled {
+        color: inherit;
+        text-decoration: none;
+
+        &:active,
+        &:focus,
+        &:hover,
+        &:visited {
+          color: inherit;
+        }
+      }
+    }
+  }
 }
 
 .go-ordered-list {

projects/go-lib/src/styles/_variables.scss

@@ -13,6 +13,7 @@ $global-box-shadow--regular: 0 0 2px 0 rgba(0, 0, 0, .12), 0 3px 6px 0 rgba(0, 0
 $global-box-shadow--search: 0 1px 6px 0 rgba(32, 33, 36, .28);
 $global-box-shadow--large: 0 7px 14px 0 rgba(65, 54, 94, .10), 0 3px 6px 0 rgba(0, 0, 0, .07);
 $global-box-shadow--small: 0 1px 2px 0 rgba(0, 0, 0, .20);
+$global-box-shadow--dark-popup: 0 2px 7px 2px rgb(0 0 0 / 22%), 0 2px 4px 0 rgb(0 0 0 / 20%);
 // scss-lint:enable ColorVariable
 
 // Structural

projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/forms-overview/forms-overview.component.html

@@ -15,7 +15,7 @@ <h4 class="go-heading-4">As per the <a class="go-link" href="https://angular.io/
         form inputs and values are provided as streams of input
         values, which can be accessed synchronously.
       </p>
-      <p class="go-body-copy">
+      <p class="go-body-copy go-body-copy--no-margin">
         Reactive forms differ from template-driven forms in distinct
         ways. Reactive forms provide more predictability with
         synchronous access to the data model, immutability with
@@ -27,4 +27,115 @@ <h4 class="go-heading-4">As per the <a class="go-link" href="https://angular.io/
       </p>
     </ng-container>
   </go-card>
+
+  <go-card class="go-column go-column--100">
+    <ng-container go-card-header>
+      <h3 class="go-heading-3">
+        Form Elements Example
+      </h3>
+      <ul class="card__action-list">
+        <li>
+          <a
+            target="_blank"
+            class="go-link go-link--unstyled"
+            href="https://github.com/mobi/goponents/tree/dev/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/forms-overview">
+            <go-icon-button buttonIcon="code">
+            </go-icon-button>
+          </a>
+        </li>
+      </ul>
+    </ng-container>
+    <ng-container go-card-content>
+      <div class="go-container">
+        <go-select
+          class="go-column go-column--100 go-column--no-padding"
+          label="Form Theme"
+          [clearable]="false"
+          [control]="themeSelect"
+          [items]="['light', 'dark']">
+        </go-select>
+      </div>
+      <hr class="go-hr">
+      <form
+        class="go-container go-form go-container--form"
+        [ngClass]="{ 'go-form--dark card-form-dark': themeSelect.value === 'dark' }"
+        [formGroup]="form">
+        <div class="go-column go-column--100 go-column--no-padding">
+          <h4 class="go-heading go-heading-4">Create Profile</h4>
+        </div>
+        <go-input
+          label="Name"
+          class="go-column go-column--100"
+          [control]="form.get('name')">
+        </go-input>
+        <go-text-area
+          label="Bio"
+          class="go-column go-column--100"
+          [control]="form.get('bio')">
+        </go-text-area>
+        <go-datepicker
+          label="Date of Birth"
+          class="go-column go-column--100"
+          [theme]="themeSelect.value"
+          [maxDate]="maxBirthDate"
+          [control]="form.get('birthday')">
+        </go-datepicker>
+        <go-timepicker
+          label="Time of Birth"
+          class="go-column go-column--100"
+          [theme]="themeSelect.value"
+          [control]="form.get('birthtime')">
+        </go-timepicker>
+        <go-file-upload
+          label="Profile Photo"
+          class="go-column go-column--100"
+          [control]="form.get('picture')"
+          [theme]="themeSelect.value">
+        </go-file-upload>
+        <go-select
+          label="Favorite Character"
+          class="go-column go-column--100"
+          [control]="form.get('favoriteCharacter')"
+          [theme]="themeSelect.value"
+          [items]="hpCharacters">
+        </go-select>
+        <go-switch-toggle
+          label="Enable Notifications"
+          class="go-column go-column--100"
+          [control]="form.get('enableNotifications')">
+        </go-switch-toggle>
+        <go-radio-group
+          legend="Notification Method"
+          class="go-column go-column--100"
+          [control]="form.get('notificationMethod')">
+          <div>
+            <go-radio-button
+              label="Push" formValue="push">
+            </go-radio-button>
+          </div>
+          <div>
+            <go-radio-button
+              label="Email" formValue="email">
+            </go-radio-button>
+          </div>
+        </go-radio-group>
+        <go-checkbox-group
+          legend="Notifications Received"
+          class="go-column go-column--100"
+          [control]="form.get('notificationsReceived')">
+          <go-checkbox
+            label="Comments"
+            [control]="form.get('notificationsReceived').get('comments')">
+          </go-checkbox>
+          <go-checkbox
+            label="Mentions"
+            [control]="form.get('notificationsReceived').get('mentions')">
+          </go-checkbox>
+        </go-checkbox-group>
+        <div class="go-column go-column--100 go-column--no-padding">
+          <go-button>Submit</go-button>
+        </div>
+      </form>
+    </ng-container>
+  </go-card>
 </section>

projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/forms-overview/forms-overview.component.scss

@@ -0,0 +1,9 @@
+@import '../../../../../../../../../go-lib/src/styles/variables';
+
+.card-form-dark {
+  background: $theme-dark-bg;
+  border-radius: $global-radius;
+  margin-bottom: -$column-gutter;
+  padding-bottom: $column-gutter;
+  padding-top: $column-gutter;
+}

projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/forms-overview/forms-overview.component.ts

@@ -1,16 +1,47 @@
 import { Component } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
 import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service';
 
 @Component({
-  templateUrl: './forms-overview.component.html'
+  templateUrl: './forms-overview.component.html',
+  styleUrls: ['./forms-overview.component.scss']
 })
 export class FormsOverviewComponent {
 
+  themeSelect: FormControl = new FormControl('light');
+
+  hpCharacters: string[] = [
+    'Harry',
+    'Ron',
+    'Hermione',
+    'Dumbledore',
+    'Snape',
+    'Voldemort'
+  ];
+
+  maxBirthDate: Date = new Date();
+
+  form: FormGroup = new FormGroup({
+    name: new FormControl(),
+    bio: new FormControl(),
+    birthday: new FormControl(),
+    birthtime: new FormControl(),
+    picture: new FormControl(),
+    favoriteCharacter: new FormControl(),
+    enableNotifications: new FormControl(true),
+    notificationMethod: new FormControl('push'),
+    notificationsReceived: new FormGroup({
+      comments: new FormControl(true),
+      mentions: new FormControl(true)
+    })
+  });
+
   constructor(
     private subNavService: SubNavService
   ) {
     this.subNavService.pageTitle = 'Forms Overview';
     this.subNavService.linkToSource =
       'https://github.com/mobi/goponents/tree/dev/projects/go-style-guide/src/app/features/standards/components/forms';
+    this.maxBirthDate.setDate(this.maxBirthDate.getDate() - 1);
   }
 }

projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule, DatePipe, TitleCasePipe } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HighlightModule } from 'ngx-highlightjs';
 import { SharedModule } from '../../shared/shared.module';
 
@@ -142,6 +142,7 @@ import { WysiwygDocsComponent } from './components/wysiwyg-docs/wysiwyg-docs.com
     UiKitRoutesModule,
     GoSharedModule,
     FormsModule,
+    ReactiveFormsModule,
     GoTreeModule,
     GoTimepickerModule
   ],