Commit e76bba42 authored by Brendan's avatar Brendan

Merge branch 'fix-multi-line-form-label' into 186-make-new-backup-code

parents c1bdd86c 7f56a056
......@@ -12,7 +12,12 @@
<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="form-field__label">Email</label>
<app-form-label
[for]="form.controls.email.id"
[isLarge]="true"
>
Email
</app-form-label>
<input
type="email"
autofocus
......@@ -32,13 +37,19 @@
<div class="form-field form-field--large">
<div class="form-field__wrapper-for-link">
<label [for]="form.controls.password.id" class="form-field__label">Password</label>
<app-form-label
[for]="form.controls.password.id"
[isLarge]="true"
>
Password
</app-form-label>
<aside-link
text="Forgot? Recover your account"
tabindex="8"
[link]="['/reset-password']"
></aside-link>
</div>
<!--a class="text-link text-link--caret form-field__label-link" href="javascript:void(0)" [routerLink]="['/reset-password']" tabindex="8"><span class="u-visible--all-but-small">Forgot? </span>Recover&nbsp;your&nbsp;account</a-->
</div>
<input
type="password"
[ngrxFormControlState]="form.controls.password"
......
......@@ -14,6 +14,7 @@ import { Component, ChangeDetectionStrategy, Input } from "@angular/core";
<span
class="form-label__icon"
[class.form-label__icon--active]="isComplete"
[class.form-label__icon--inactive]="isInactive"
[inlineSVG]="'../assets/svg/check.svg'"
></span>
</ng-template>
......
......@@ -18,10 +18,12 @@ $transition-time: 0.2s;
font-weight $transition-time, letter-spacing $transition-time;
&--inactive {
display: inline-block;
color: $color-tiara;
font-size: 1.14583em;
font-weight: bold;
line-height: 1.77083em;
line-height: 1.27083em;
padding: 0.25em 0;
}
&--completed {
......@@ -41,5 +43,9 @@ $transition-time: 0.2s;
&--active {
opacity: 1;
}
&--inactive {
display: none;
}
}
}
......@@ -2,14 +2,13 @@ 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, select, text, withKnobs } from "@storybook/addon-knobs";
import { boolean, select, 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 { ResetPasswordComponent } from "../app/account/reset-password/reset-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";
......@@ -81,21 +80,90 @@ storiesOf("Account", module)
defaultFormLabelState
);
// If I don't do something like this, I get an error about
// FormLabelComponent being declared but not used
if (FormLabelComponent.name === "") {
}
const defaultLabelTextState = "Password";
const labelTextControls = {
Short: defaultLabelTextState,
Medium: "Verify Email Address",
Long: "Download PDF with New Backup Code",
"Extra Long":
"Download PDF with New Backup Code So That You Can Forget Your Password As Long As You Don't Forget Where You Kept This",
Weird: "🍫 ⋆ 🍭 🎀 𝒫𝒶𝓈𝓈𝒾𝓉 𝓁𝑒𝓉'𝓈 𝑔𝑒𝓉 𝓈𝒶𝒻𝑒 𝓉💙𝒹𝒶𝓎 🎀 🍭 ⋆ 🍫"
};
// any type is, I think, because storybook is 4.0 but types aren't
const labelTextControl: any = select(
"Label Text",
labelTextControls,
defaultLabelTextState
);
return {
template: `
<h3>Basic label</h3>
<app-form-label
for="nothing"
[isLarge]="${boolean("Is Large", true)}"
[isInactive]="${formLabelControl === "inactive" ? true : false}"
[isComplete]="${formLabelControl === "complete" ? true : false}"
>
${text("Label text", "Password")}
${labelTextControl}
</app-form-label>
<h3>Testing out consecutive fields (these are wrapped in large form-field divs)</h3>
<div class="form-field form-field--large">
<app-form-label
for="nothing"
[isLarge]="true"
[isInactive]="${formLabelControl === "inactive" ? true : false}"
[isComplete]="${formLabelControl === "complete" ? true : false}"
>
${labelTextControl}
</app-form-label>
</div>
<div class="form-field form-field--large">
<app-form-label
for="nothing"
[isLarge]="true"
[isInactive]="${formLabelControl === "inactive" ? true : false}"
[isComplete]="${formLabelControl === "complete" ? true : false}"
>
${labelTextControl}
</app-form-label>
</div>
<div class="form-field form-field--large">
<app-form-label
for="nothing"
[isLarge]="true"
[isInactive]="${formLabelControl === "inactive" ? true : false}"
[isComplete]="${formLabelControl === "complete" ? true : false}"
>
${labelTextControl}
</app-form-label>
</div>
<h3>Testing out a field with input and link to the right</h3>
<div style="max-width: 500px; margin: 0 auto;">
<div class="form-field form-field--large">
<div class="form-field__wrapper-for-link">
<app-form-label for="foo" [isLarge]="true">
${labelTextControl}
</app-form-label>
<a class="text-link text-link--caret form-field__label-link" href="javascript:void(0)" tabindex="8">
<span class="u-visible--all-but-small">Forgot? </span>Recover&nbsp;your&nbsp;account
</a>
</div>
<input
id="foo"
type="password"
class="form-field__input"
tabindex="3"
>
</div>
</div>
`
};
})
......
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