Commit 8b07ef35 authored by Brendan's avatar Brendan

Expand form-label story to test different cases

parent 75a45087
Pipeline #38128717 failed with stage
in 13 minutes and 55 seconds
......@@ -9,7 +9,6 @@ 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