bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-12 14:23:32 +00:00
Code Issues Releases Wiki Activity

[PM-2276] Upgrade Storybook to v7 (#5258)

Browse Source
This commit is contained in:
Oscar Hinton
2023-05-26 15:58:06 +02:00
committed by GitHub
parent 1638a1d6f5
commit f7b372a0b0
72 changed files with 6340 additions and 16409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
libs/components/src/form/form.stories.ts
View File

@@ -7,7 +7,7 @@ import {
ValidatorFn,
Validators,
} from "@angular/forms";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -81,67 +81,70 @@ function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
};
}
const FullExampleTemplate: Story = (args) => ({
props: {
formObj: exampleFormObj,
submit: () => exampleFormObj.markAllAsTouched(),
...args,
type Story = StoryObj;
export const FullExample: Story = {
render: (args) => ({
props: {
formObj: exampleFormObj,
submit: () => exampleFormObj.markAllAsTouched(),
...args,
},
template: `
<form [formGroup]="formObj" (ngSubmit)="submit()">
<bit-form-field>
<bit-label>Name</bit-label>
<input bitInput formControlName="name" />
</bit-form-field>
<bit-form-field>
<bit-label>Email</bit-label>
<input bitInput formControlName="email" />
</bit-form-field>
<bit-form-field>
<bit-label>Country</bit-label>
<bit-select formControlName="country">
<bit-option *ngFor="let country of countries" [value]="country.value" [label]="country.name"></bit-option>
</bit-select>
</bit-form-field>
<bit-form-field>
<bit-label>Age</bit-label>
<input
bitInput
type="number"
formControlName="age"
min="0"
max="150"
/>
</bit-form-field>
<bit-form-control>
<bit-label>Agree to terms</bit-label>
<input type="checkbox" bitCheckbox formControlName="terms">
<bit-hint>Required for the service to work properly</bit-hint>
</bit-form-control>
<bit-radio-group formControlName="updates">
<bit-label>Subscribe to updates?</bit-label>
<bit-radio-button value="yes">
<bit-label>Yes</bit-label>
</bit-radio-button>
<bit-radio-button value="no">
<bit-label>No</bit-label>
</bit-radio-button>
<bit-radio-button value="later">
<bit-label>Decide later</bit-label>
</bit-radio-button>
</bit-radio-group>
<button type="submit" bitButton buttonType="primary">Submit</button>
</form>
`,
}),
args: {
countries,
},
template: `
<form [formGroup]="formObj" (ngSubmit)="submit()">
<bit-form-field>
<bit-label>Name</bit-label>
<input bitInput formControlName="name" />
</bit-form-field>
<bit-form-field>
<bit-label>Email</bit-label>
<input bitInput formControlName="email" />
</bit-form-field>
<bit-form-field>
<bit-label>Country</bit-label>
<bit-select formControlName="country">
<bit-option *ngFor="let country of countries" [value]="country.value" [label]="country.name"></bit-option>
</bit-select>
</bit-form-field>
<bit-form-field>
<bit-label>Age</bit-label>
<input
bitInput
type="number"
formControlName="age"
min="0"
max="150"
/>
</bit-form-field>
<bit-form-control>
<bit-label>Agree to terms</bit-label>
<input type="checkbox" bitCheckbox formControlName="terms">
<bit-hint>Required for the service to work properly</bit-hint>
</bit-form-control>
<bit-radio-group formControlName="updates">
<bit-label>Subscribe to updates?</bit-label>
<bit-radio-button value="yes">
<bit-label>Yes</bit-label>
</bit-radio-button>
<bit-radio-button value="no">
<bit-label>No</bit-label>
</bit-radio-button>
<bit-radio-button value="later">
<bit-label>Decide later</bit-label>
</bit-radio-button>
</bit-radio-group>
<button type="submit" bitButton buttonType="primary">Submit</button>
</form>
`,
});
export const FullExample = FullExampleTemplate.bind({});
FullExample.args = {
countries,
};