Commit 45964638 authored by Brendan's avatar Brendan

Create form label component and apply it to the register form

parent 4bc148f3
Pipeline #35247773 passed with stage
in 7 minutes and 22 seconds
......@@ -12,12 +12,14 @@
<app-non-field-messages *ngIf="errorMessage" [messages]="[errorMessage]"></app-non-field-messages>
<div class="form-field form-field--large">
<label [for]="form.controls.email.id" class="register-step__heading" [class.form-field__label]="stageValue === stages.Email"
[class.register-step__heading--completed]="stageValue !== stages.Email">
<app-form-label
[for]="form.controls.email.id"
[isLarge]="true"
[isComplete]="stageValue !== stages.Email"
>
Email
<span class="register-step__icon" [class.register-step__icon--active]="stageValue !== stages.Email" [inlineSVG]="'../assets/svg/check.svg'"></span>
</label>
</app-form-label>
<div [class.register-step__verified-input]="stageValue !== stages.Email">
<input
type="email"
......@@ -70,12 +72,14 @@
</div>
</div>
<div class="form-field form-field--large">
<label [for]="form.controls.password.id" class="register-step__heading" [class.form-field__label]="stageValue === stages.Password"
[class.register-step__heading--completed]="stageValue !== stages.Password && !form.errors._password" [class.register-step__heading--inactive]="stageValue !== stages.Password && form.errors._password">
<app-form-label
[for]="form.controls.password.id"
[isLarge]="true"
[isInactive]="stageValue !== stages.Password && form.errors._password"
[isComplete]="stageValue !== stages.Password && !form.errors._password"
>
Password
<span class="register-step__icon" [class.register-step__icon--active]="stageValue !== stages.Password && !form.errors._password"
[inlineSVG]="'../assets/svg/check.svg'"></span>
</label>
</app-form-label>
<div class="form-field form-field--large">
<div
......@@ -141,7 +145,11 @@
<div *ngIf="stageValue == stages.Password">
<div class="form-field form-field--large" *ngIf="form.value.showConfirm">
<label [for]="form.controls.passwordConfirm.id" class="form-field__label">Confirm Password</label>
<app-form-label
[for]="form.controls.passwordConfirm.id"
[isLarge]="true">
Confirm Password
</app-form-label>
<input type="password" [ngrxFormControlState]="form.controls.passwordConfirm"
class="form-field__input"
[class.form-field__input--invalid]="form.errors._passwordConfirm && form.isSubmitted"
......@@ -168,17 +176,15 @@
<div class="form-field form-field--large">
<label
[for]="form.controls.signUpNewsletter.id" class="register-step__heading"
[class.form-field__label]="stageValue === stages.Newsletter"
[class.register-step__heading--completed]="stageValue !== stages.Newsletter && (stageValue === stages.ConfirmEmail || stageValue === stages.BackupCode || stageValue === stages.Verified)"
[class.register-step__heading--inactive]="stageValue !== stages.Newsletter">
<app-form-label
[for]="form.controls.signUpNewsletter.id"
[isLarge]="true"
[isInactive]="stageValue !== stages.Newsletter"
[isComplete]="stageValue !== stages.Newsletter && (stageValue === stages.ConfirmEmail || stageValue === stages.BackupCode || stageValue === stages.Verified)"
>
Newsletter
<span
class="register-step__icon"
[class.register-step__icon--active]="stageValue !== stages.Newsletter && (stageValue === stages.ConfirmEmail || stageValue === stages.BackupCode || stageValue === stages.Verified)"
[inlineSVG]="'../assets/svg/check.svg'"></span>
</label>
</app-form-label>
<div *ngIf="stageValue !== stages.Newsletter && (stageValue === stages.ConfirmEmail || stageValue === stages.Verified)" class="register-step__verified-content">
{{ form.value.signUpNewsletter ? "Yes" : "No" }}
</div>
......@@ -209,11 +215,13 @@
</div>
<div class="form-field form-field--large">
<label for="userEmail" class="register-step__heading" [class.form-field__label]="stageValue === stages.BackupCode" [class.register-step__heading--completed]="stageValue > stages.BackupCode"
[class.register-step__heading--inactive]="stageValue !== stages.BackupCode">
Backup Code
<span class="register-step__icon" [class.register-step__icon--active]="stageValue > stages.BackupCode" [inlineSVG]="'../assets/svg/check.svg'"></span>
</label>
<app-form-label
[isLarge]="true"
[isInactive]="stageValue !== stages.BackupCode"
[isComplete]="stageValue > stages.BackupCode"
>
Backup Code
</app-form-label>
</div>
<app-backup-code
*ngIf="stageValue === stages.BackupCode"
......@@ -224,11 +232,14 @@
<div
class="form-field form-field--large"
[class.form-field--no-bottom-margin]="stageValue === stages.ConfirmEmail">
<label for="userEmail" class="register-step__heading" [class.form-field__label]="stageValue === stages.ConfirmEmail" [class.register-step__heading--completed]="stageValue === stages.Verified"
[class.register-step__heading--inactive]="stageValue !== stages.ConfirmEmail">
<app-form-label
[isLarge]="true"
[isInactive]="stageValue !== stages.ConfirmEmail"
[isComplete]="stageValue === stages.Verified"
>
Verify Email Address
<span class="register-step__icon" [class.register-step__icon--active]="stageValue === stages.Verified" [inlineSVG]="'../assets/svg/check.svg'"></span>
</label>
</app-form-label>
<div *ngIf="stageValue === stages.Verified" class="register-step__verified-content">
Verified
</div>
......
import { Component, ChangeDetectionStrategy, Input } from "@angular/core";
@Component({
selector: "app-form-label",
template: `
<ng-template #innerTemplate>
<span
class="form-label__text"
[class.form-label__text--completed]="isComplete"
[class.form-label__text--inactive]="isInactive"
>
<ng-content></ng-content>
</span>
<span
class="form-label__icon"
[class.form-label__icon--active]="isComplete"
[inlineSVG]="'../assets/svg/check.svg'"
></span>
</ng-template>
<label
*ngIf="for"
[for]="for"
class="form-label"
[class.form-label--large]="isLarge"
>
<ng-container *ngTemplateOutlet="innerTemplate"></ng-container>
</label>
<div
*ngIf="!for"
class="form-label"
[class.form-label--large]="isLarge"
>
<ng-container *ngTemplateOutlet="innerTemplate"></ng-container>
</div>
`,
styleUrls: ["./form-label.styles.scss"],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class FormLabelComponent {
@Input()
isComplete = false;
@Input()
isInactive = false;
@Input()
isLarge = false;
@Input()
for: string;
constructor() {}
}
@import "../../../styles/colors";
$transition-time: 0.2s;
.form-label {
display: block;
margin-bottom: 5px;
color: $color-thunder;
font-size: 0.8em;
font-weight: 600;
&--large {
font-size: 1.2em;
}
&__text {
transition: font-size $transition-time, color $transition-time,
font-weight $transition-time, letter-spacing $transition-time;
&--inactive {
color: $color-tiara;
font-size: 1.14583em;
font-weight: bold;
line-height: 1.77083em;
}
&--completed {
color: $color-de-york;
font-size: 0.9375em;
line-height: 1.45833em;
font-weight: bold;
}
}
&__icon {
fill: $color-de-york;
height: 0.78125em;
opacity: 0;
transition: opacity $transition-time;
&--active {
opacity: 1;
}
}
}
......@@ -9,6 +9,7 @@ import { SearchComponent } from "./search";
import { NgrxFormsModule } from "ngrx-forms";
import { CheckboxComponent } from "./checkbox/checkbox.component";
import { NonFieldMessagesComponent } from "./non-field-messages/non-field-messages.component";
import { FormLabelComponent } from "./form-label/form-label.component";
export const COMPONENTS = [
NavbarContainer,
......@@ -16,7 +17,8 @@ export const COMPONENTS = [
SearchComponent,
CheckboxComponent,
DemoComponent,
NonFieldMessagesComponent
NonFieldMessagesComponent,
FormLabelComponent,
];
@NgModule({
......
......@@ -2,13 +2,14 @@ import { InlineSVGModule } from "ng-inline-svg";
import { HttpClientModule } from "@angular/common/http";
import { storiesOf, moduleMetadata } from "@storybook/angular";
import { action } from "@storybook/addon-actions";
import { boolean, withKnobs } from "@storybook/addon-knobs";
import { boolean, select, text, withKnobs } from "@storybook/addon-knobs";
import { StoreModule } from "@ngrx/store";
import { NgrxFormsModule } from "ngrx-forms";
import { BackupCodeComponent } from "../app/account/backup-code/backup-code.component";
import { ForgotPasswordComponent } from "../app/account/forgot-password/forgot-password.component";
import { MarketingFrameComponent } from "../app/account/marketing-frame/marketing-frame.component";
import { FormLabelComponent } from "../app/shared/form-label/form-label.component";
import { LoginComponent } from "../app/account/login/login.component";
import { SharedModule } from "../app/shared";
import { ProgressIndicatorModule } from "../app/progress-indicator";
......@@ -60,6 +61,37 @@ storiesOf("Account", module)
.add("Marketing Frame", () => ({
component: MarketingFrameComponent
}))
.add("Form Label", () => {
const defaultFormLabelState = "active";
const formLabelControls = {
Default: defaultFormLabelState,
Inactive: "inactive",
Complete: "complete",
};
// any type is, I think, because storybook is 4.0 but types aren't
const formLabelControl: any = select(
'Label State',
formLabelControls,
defaultFormLabelState,
);
// If I don't do something like this, I get an error about
// FormLabelComponent being declared but not used
if (FormLabelComponent.name === '') {}
return {
template: `
<app-form-label
for="nothing"
[isLarge]="${boolean('Is Large', true)}"
[isInactive]="${formLabelControl === 'inactive' ? true : false}"
[isComplete]="${formLabelControl === 'complete' ? true : false}"
>
${text("Label text", "Password")}
</app-form-label>
`,
};
})
.add("Login", () => ({
component: LoginComponent,
props: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment