bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-12 22:33:35 +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

20
libs/components/src/form-field/bit-validators.stories.ts
View File

@@ -1,5 +1,5 @@
import { FormsModule, ReactiveFormsModule, FormBuilder } from "@angular/forms";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { StoryObj, Meta, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -46,11 +46,13 @@ const template = `
</bit-form-field>
</form>`;
export const ForbiddenCharacters: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) => ({
props: {
formObj: new FormBuilder().group({
name: ["", forbiddenCharacters(["\\", "/", "@", "#", "$", "%", "^", "&", "*", "(", ")"])],
}),
},
template,
});
export const ForbiddenCharacters: StoryObj<BitFormFieldComponent> = {
render: (args: BitFormFieldComponent) => ({
props: {
formObj: new FormBuilder().group({
name: ["", forbiddenCharacters(["\\", "/", "@", "#", "$", "%", "^", "&", "*", "(", ")"])],
}),
},
template,
}),
};

53
libs/components/src/form-field/error-summary.stories.ts
View File

@@ -1,5 +1,5 @@
import { UntypedFormBuilder, FormsModule, ReactiveFormsModule, 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";
@@ -50,29 +50,28 @@ function submit() {
formObj.markAllAsTouched();
}
const Template: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) => ({
props: {
formObj: formObj,
submit: submit,
...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>
<button type="submit" bitButton buttonType="primary">Submit</button>
<bit-error-summary [formGroup]="formObj"></bit-error-summary>
</form>
`,
});
export const Default = Template.bind({});
Default.props = {};
export const Default: StoryObj<BitFormFieldComponent> = {
render: (args) => ({
props: {
formObj: formObj,
submit: submit,
...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>
<button type="submit" bitButton buttonType="primary">Submit</button>
<bit-error-summary [formGroup]="formObj"></bit-error-summary>
</form>
`,
}),
};

313
libs/components/src/form-field/form-field.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";
@@ -87,173 +87,168 @@ function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
function submit() {
defaultFormObj.markAllAsTouched();
}
type Story = StoryObj<BitFormFieldComponent>;
const Template: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) => ({
props: {
formObj: defaultFormObj,
submit: submit,
...args,
},
template: `
<form [formGroup]="formObj">
export const Default: Story = {
render: (args) => ({
props: {
formObj: defaultFormObj,
submit: submit,
...args,
},
template: `
<form [formGroup]="formObj">
<bit-form-field>
<bit-label>Label</bit-label>
<input bitInput formControlName="name" />
<bit-hint>Optional Hint</bit-hint>
</bit-form-field>
</form>
`,
}),
};
export const Required: Story = {
render: (args) => ({
props: {
formObj: formObj,
...args,
},
template: `
<bit-form-field>
<bit-label>Label</bit-label>
<input bitInput formControlName="name" />
<bit-hint>Optional Hint</bit-hint>
<input bitInput required placeholder="Placeholder" />
</bit-form-field>
</form>
`,
});
<bit-form-field [formGroup]="formObj">
<bit-label>FormControl</bit-label>
<input bitInput formControlName="required" placeholder="Placeholder" />
</bit-form-field>
`,
}),
};
export const Default = Template.bind({});
Default.props = {};
export const Hint: Story = {
render: (args: BitFormFieldComponent) => ({
props: {
formObj: formObj,
...args,
},
template: `
<bit-form-field [formGroup]="formObj">
<bit-label>FormControl</bit-label>
<input bitInput formControlName="required" placeholder="Placeholder" />
<bit-hint>Long hint text</bit-hint>
</bit-form-field>
`,
}),
};
const RequiredTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) => ({
props: {
formObj: formObj,
...args,
},
template: `
<bit-form-field>
<bit-label>Label</bit-label>
<input bitInput required placeholder="Placeholder" />
</bit-form-field>
export const Disabled: Story = {
render: (args) => ({
props: args,
template: `
<bit-form-field>
<bit-label>Label</bit-label>
<input bitInput placeholder="Placeholder" disabled />
</bit-form-field>
`,
}),
args: {},
};
<bit-form-field [formGroup]="formObj">
<bit-label>FormControl</bit-label>
<input bitInput formControlName="required" placeholder="Placeholder" />
</bit-form-field>
`,
});
export const InputGroup: Story = {
render: (args) => ({
props: args,
template: `
<bit-form-field>
<bit-label>Label</bit-label>
<input bitInput placeholder="Placeholder" />
<span bitPrefix>$</span>
<span bitSuffix>USD</span>
</bit-form-field>
`,
}),
args: {},
};
export const Required = RequiredTemplate.bind({});
Required.props = {};
export const ButtonInputGroup: Story = {
render: (args) => ({
props: args,
template: `
<bit-form-field>
<button bitPrefix bitIconButton="bwi-star"></button>
<input bitInput placeholder="Placeholder" />
<button bitSuffix bitIconButton="bwi-eye"></button>
<button bitSuffix bitIconButton="bwi-clone"></button>
<button bitSuffix bitButton>
Apply
</button>
</bit-form-field>
`,
}),
args: {},
};
const HintTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) => ({
props: {
formObj: formObj,
...args,
},
template: `
<bit-form-field [formGroup]="formObj">
<bit-label>FormControl</bit-label>
<input bitInput formControlName="required" placeholder="Placeholder" />
<bit-hint>Long hint text</bit-hint>
</bit-form-field>
`,
});
export const DisabledButtonInputGroup: Story = {
render: (args) => ({
props: args,
template: `
<bit-form-field>
<bit-label>Label</bit-label>
<button bitPrefix bitIconButton="bwi-star" disabled></button>
<input bitInput placeholder="Placeholder" disabled />
<button bitSuffix bitIconButton="bwi-eye" disabled></button>
<button bitSuffix bitIconButton="bwi-clone" disabled></button>
<button bitSuffix bitButton disabled>
Apply
</button>
</bit-form-field>
`,
}),
args: {},
};
export const Hint = HintTemplate.bind({});
Required.props = {};
export const Select: Story = {
render: (args: BitFormFieldComponent) => ({
props: args,
template: `
<bit-form-field>
<bit-label>Label</bit-label>
<select bitInput>
<option>Select</option>
<option>Other</option>
</select>
</bit-form-field>
`,
}),
args: {},
};
const DisabledTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) => ({
props: args,
template: `
<bit-form-field>
<bit-label>Label</bit-label>
<input bitInput placeholder="Placeholder" disabled />
</bit-form-field>
`,
});
export const AdvancedSelect: Story = {
render: (args: BitFormFieldComponent) => ({
props: args,
template: `
<bit-form-field>
<bit-label>Label</bit-label>
<bit-select>
<bit-option label="Select"></bit-option>
<bit-option label="Other"></bit-option>
</bit-select>
</bit-form-field>
`,
}),
};
export const Disabled = DisabledTemplate.bind({});
Disabled.args = {};
const GroupTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) => ({
props: args,
template: `
<bit-form-field>
<bit-label>Label</bit-label>
<input bitInput placeholder="Placeholder" />
<span bitPrefix>$</span>
<span bitSuffix>USD</span>
</bit-form-field>
`,
});
export const InputGroup = GroupTemplate.bind({});
InputGroup.args = {};
const ButtonGroupTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) => ({
props: args,
template: `
<bit-form-field>
<button bitPrefix bitIconButton="bwi-star"></button>
<input bitInput placeholder="Placeholder" />
<button bitSuffix bitIconButton="bwi-eye"></button>
<button bitSuffix bitIconButton="bwi-clone"></button>
<button bitSuffix bitButton>
Apply
</button>
</bit-form-field>
`,
});
export const ButtonInputGroup = ButtonGroupTemplate.bind({});
ButtonInputGroup.args = {};
const DisabledButtonInputGroupTemplate: Story<BitFormFieldComponent> = (
args: BitFormFieldComponent
) => ({
props: args,
template: `
<bit-form-field>
<bit-label>Label</bit-label>
<button bitPrefix bitIconButton="bwi-star" disabled></button>
<input bitInput placeholder="Placeholder" disabled />
<button bitSuffix bitIconButton="bwi-eye" disabled></button>
<button bitSuffix bitIconButton="bwi-clone" disabled></button>
<button bitSuffix bitButton disabled>
Apply
</button>
</bit-form-field>
`,
});
export const DisabledButtonInputGroup = DisabledButtonInputGroupTemplate.bind({});
DisabledButtonInputGroup.args = {};
const SelectTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) => ({
props: args,
template: `
<bit-form-field>
<bit-label>Label</bit-label>
<select bitInput>
<option>Select</option>
<option>Other</option>
</select>
</bit-form-field>
`,
});
export const Select = SelectTemplate.bind({});
Select.args = {};
const AdvancedSelectTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) => ({
props: args,
template: `
<bit-form-field>
<bit-label>Label</bit-label>
<bit-select>
<bit-option label="Select"></bit-option>
<bit-option label="Other"></bit-option>
</bit-select>
</bit-form-field>
`,
});
export const AdvancedSelect = AdvancedSelectTemplate.bind({});
AdvancedSelectTemplate.args = {};
const TextareaTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) => ({
props: args,
template: `
<bit-form-field>
<bit-label>Textarea</bit-label>
<textarea bitInput rows="4"></textarea>
</bit-form-field>
`,
});
export const Textarea = TextareaTemplate.bind({});
Textarea.args = {};
export const Textarea: Story = {
render: (args: BitFormFieldComponent) => ({
props: args,
template: `
<bit-form-field>
<bit-label>Textarea</bit-label>
<textarea bitInput rows="4"></textarea>
</bit-form-field>
`,
}),
args: {},
};

423
libs/components/src/form-field/multi-select.stories.ts
View File

@@ -7,7 +7,7 @@ import {
} from "@angular/forms";
import { NgSelectModule } from "@ng-select/ng-select";
import { action } from "@storybook/addon-actions";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -75,209 +75,228 @@ function submit(formObj: FormGroup) {
formObj.markAllAsTouched();
}
const MultiSelectTemplate: Story<MultiSelectComponent> = (args: MultiSelectComponent) => ({
props: {
formObj: formObjFactory(),
submit: submit,
...args,
onItemsConfirmed: actionsData.onItemsConfirmed,
type Story = StoryObj<MultiSelectComponent & { name: string; hint: string }>;
export const Loading: Story = {
render: (args) => ({
props: {
formObj: formObjFactory(),
submit: submit,
...args,
onItemsConfirmed: actionsData.onItemsConfirmed,
},
template: `
<form [formGroup]="formObj" (ngSubmit)="submit(formObj)">
<bit-form-field>
<bit-label>{{ name }}</bit-label>
<bit-multi-select
class="tw-w-full"
formControlName="select"
[baseItems]="baseItems"
[removeSelectedItems]="removeSelectedItems"
[loading]="loading"
[disabled]="disabled"
(onItemsConfirmed)="onItemsConfirmed($event)">
</bit-multi-select>
<bit-hint>{{ hint }}</bit-hint>
</bit-form-field>
<button type="submit" bitButton buttonType="primary">Submit</button>
</form>
`,
}),
args: {
baseItems: [] as any,
name: "Loading",
hint: "This is what a loading multi-select looks like",
loading: true,
},
template: `
<form [formGroup]="formObj" (ngSubmit)="submit(formObj)">
<bit-form-field>
<bit-label>{{ name }}</bit-label>
<bit-multi-select
class="tw-w-full"
formControlName="select"
[baseItems]="baseItems"
[removeSelectedItems]="removeSelectedItems"
[loading]="loading"
[disabled]="disabled"
(onItemsConfirmed)="onItemsConfirmed($event)">
</bit-multi-select>
<bit-hint>{{ hint }}</bit-hint>
</bit-form-field>
<button type="submit" bitButton buttonType="primary">Submit</button>
</form>
`,
});
export const Loading = MultiSelectTemplate.bind({});
Loading.args = {
baseItems: [],
name: "Loading",
hint: "This is what a loading multi-select looks like",
loading: "true",
};
export const Disabled = MultiSelectTemplate.bind({});
Disabled.args = {
name: "Disabled",
disabled: "true",
hint: "This is what a disabled multi-select looks like",
};
export const Groups = MultiSelectTemplate.bind({});
Groups.args = {
name: "Select groups",
hint: "Groups will be assigned to the associated member",
baseItems: [
{ id: "1", listName: "Group 1", labelName: "Group 1", icon: "bwi-family" },
{ id: "2", listName: "Group 2", labelName: "Group 2", icon: "bwi-family" },
{ id: "3", listName: "Group 3", labelName: "Group 3", icon: "bwi-family" },
{ id: "4", listName: "Group 4", labelName: "Group 4", icon: "bwi-family" },
{ id: "5", listName: "Group 5", labelName: "Group 5", icon: "bwi-family" },
{ id: "6", listName: "Group 6", labelName: "Group 6", icon: "bwi-family" },
{ id: "7", listName: "Group 7", labelName: "Group 7", icon: "bwi-family" },
],
};
export const Members = MultiSelectTemplate.bind({});
Members.args = {
name: "Select members",
hint: "Members will be assigned to the associated group/collection",
baseItems: [
{ id: "1", listName: "Joe Smith (jsmith@mail.me)", labelName: "Joe Smith", icon: "bwi-user" },
{
id: "2",
listName: "Tania Stone (tstone@mail.me)",
labelName: "Tania Stone",
icon: "bwi-user",
},
{
id: "3",
listName: "Matt Matters (mmatters@mail.me)",
labelName: "Matt Matters",
icon: "bwi-user",
},
{
id: "4",
listName: "Bob Robertson (brobertson@mail.me)",
labelName: "Bob Robertson",
icon: "bwi-user",
},
{
id: "5",
listName: "Ashley Fletcher (aflectcher@mail.me)",
labelName: "Ashley Fletcher",
icon: "bwi-user",
},
{ id: "6", listName: "Rita Olson (rolson@mail.me)", labelName: "Rita Olson", icon: "bwi-user" },
{
id: "7",
listName: "Final listName (fname@mail.me)",
labelName: "(fname@mail.me)",
icon: "bwi-user",
},
],
};
export const Collections = MultiSelectTemplate.bind({});
Collections.args = {
name: "Select collections",
hint: "Collections will be assigned to the associated member",
baseItems: [
{ id: "1", listName: "Collection 1", labelName: "Collection 1", icon: "bwi-collection" },
{ id: "2", listName: "Collection 2", labelName: "Collection 2", icon: "bwi-collection" },
{ id: "3", listName: "Collection 3", labelName: "Collection 3", icon: "bwi-collection" },
{
id: "3.5",
listName: "Child Collection 1 for Parent 1",
labelName: "Child Collection 1 for Parent 1",
icon: "bwi-collection",
parentGrouping: "Parent 1",
},
{
id: "3.55",
listName: "Child Collection 2 for Parent 1",
labelName: "Child Collection 2 for Parent 1",
icon: "bwi-collection",
parentGrouping: "Parent 1",
},
{
id: "3.59",
listName: "Child Collection 3 for Parent 1",
labelName: "Child Collection 3 for Parent 1",
icon: "bwi-collection",
parentGrouping: "Parent 1",
},
{
id: "3.75",
listName: "Child Collection 1 for Parent 2",
labelName: "Child Collection 1 for Parent 2",
icon: "bwi-collection",
parentGrouping: "Parent 2",
},
{ id: "4", listName: "Collection 4", labelName: "Collection 4", icon: "bwi-collection" },
{ id: "5", listName: "Collection 5", labelName: "Collection 5", icon: "bwi-collection" },
{ id: "6", listName: "Collection 6", labelName: "Collection 6", icon: "bwi-collection" },
{ id: "7", listName: "Collection 7", labelName: "Collection 7", icon: "bwi-collection" },
],
};
export const MembersAndGroups = MultiSelectTemplate.bind({});
MembersAndGroups.args = {
name: "Select groups and members",
hint: "Members/Groups will be assigned to the associated collection",
baseItems: [
{ id: "1", listName: "Group 1", labelName: "Group 1", icon: "bwi-family" },
{ id: "2", listName: "Group 2", labelName: "Group 2", icon: "bwi-family" },
{ id: "3", listName: "Group 3", labelName: "Group 3", icon: "bwi-family" },
{ id: "4", listName: "Group 4", labelName: "Group 4", icon: "bwi-family" },
{ id: "5", listName: "Group 5", labelName: "Group 5", icon: "bwi-family" },
{ id: "6", listName: "Joe Smith (jsmith@mail.me)", labelName: "Joe Smith", icon: "bwi-user" },
{
id: "7",
listName: "Tania Stone (tstone@mail.me)",
labelName: "(tstone@mail.me)",
icon: "bwi-user",
},
],
};
export const RemoveSelected = MultiSelectTemplate.bind({});
RemoveSelected.args = {
name: "Select groups",
hint: "Groups will be removed from the list once the dropdown is closed",
baseItems: [
{ id: "1", listName: "Group 1", labelName: "Group 1", icon: "bwi-family" },
{ id: "2", listName: "Group 2", labelName: "Group 2", icon: "bwi-family" },
{ id: "3", listName: "Group 3", labelName: "Group 3", icon: "bwi-family" },
{ id: "4", listName: "Group 4", labelName: "Group 4", icon: "bwi-family" },
{ id: "5", listName: "Group 5", labelName: "Group 5", icon: "bwi-family" },
{ id: "6", listName: "Group 6", labelName: "Group 6", icon: "bwi-family" },
{ id: "7", listName: "Group 7", labelName: "Group 7", icon: "bwi-family" },
],
removeSelectedItems: "true",
};
const StandaloneTemplate: Story<MultiSelectComponent> = (args: MultiSelectComponent) => ({
props: {
...args,
onItemsConfirmed: actionsData.onItemsConfirmed,
export const Disabled: Story = {
...Loading,
args: {
name: "Disabled",
disabled: true,
hint: "This is what a disabled multi-select looks like",
},
};
export const Groups: Story = {
...Loading,
args: {
name: "Select groups",
hint: "Groups will be assigned to the associated member",
baseItems: [
{ id: "1", listName: "Group 1", labelName: "Group 1", icon: "bwi-family" },
{ id: "2", listName: "Group 2", labelName: "Group 2", icon: "bwi-family" },
{ id: "3", listName: "Group 3", labelName: "Group 3", icon: "bwi-family" },
{ id: "4", listName: "Group 4", labelName: "Group 4", icon: "bwi-family" },
{ id: "5", listName: "Group 5", labelName: "Group 5", icon: "bwi-family" },
{ id: "6", listName: "Group 6", labelName: "Group 6", icon: "bwi-family" },
{ id: "7", listName: "Group 7", labelName: "Group 7", icon: "bwi-family" },
],
},
};
export const Members: Story = {
...Loading,
args: {
name: "Select members",
hint: "Members will be assigned to the associated group/collection",
baseItems: [
{ id: "1", listName: "Joe Smith (jsmith@mail.me)", labelName: "Joe Smith", icon: "bwi-user" },
{
id: "2",
listName: "Tania Stone (tstone@mail.me)",
labelName: "Tania Stone",
icon: "bwi-user",
},
{
id: "3",
listName: "Matt Matters (mmatters@mail.me)",
labelName: "Matt Matters",
icon: "bwi-user",
},
{
id: "4",
listName: "Bob Robertson (brobertson@mail.me)",
labelName: "Bob Robertson",
icon: "bwi-user",
},
{
id: "5",
listName: "Ashley Fletcher (aflectcher@mail.me)",
labelName: "Ashley Fletcher",
icon: "bwi-user",
},
{
id: "6",
listName: "Rita Olson (rolson@mail.me)",
labelName: "Rita Olson",
icon: "bwi-user",
},
{
id: "7",
listName: "Final listName (fname@mail.me)",
labelName: "(fname@mail.me)",
icon: "bwi-user",
},
],
},
};
export const Collections: Story = {
...Loading,
args: {
name: "Select collections",
hint: "Collections will be assigned to the associated member",
baseItems: [
{ id: "1", listName: "Collection 1", labelName: "Collection 1", icon: "bwi-collection" },
{ id: "2", listName: "Collection 2", labelName: "Collection 2", icon: "bwi-collection" },
{ id: "3", listName: "Collection 3", labelName: "Collection 3", icon: "bwi-collection" },
{
id: "3.5",
listName: "Child Collection 1 for Parent 1",
labelName: "Child Collection 1 for Parent 1",
icon: "bwi-collection",
parentGrouping: "Parent 1",
},
{
id: "3.55",
listName: "Child Collection 2 for Parent 1",
labelName: "Child Collection 2 for Parent 1",
icon: "bwi-collection",
parentGrouping: "Parent 1",
},
{
id: "3.59",
listName: "Child Collection 3 for Parent 1",
labelName: "Child Collection 3 for Parent 1",
icon: "bwi-collection",
parentGrouping: "Parent 1",
},
{
id: "3.75",
listName: "Child Collection 1 for Parent 2",
labelName: "Child Collection 1 for Parent 2",
icon: "bwi-collection",
parentGrouping: "Parent 2",
},
{ id: "4", listName: "Collection 4", labelName: "Collection 4", icon: "bwi-collection" },
{ id: "5", listName: "Collection 5", labelName: "Collection 5", icon: "bwi-collection" },
{ id: "6", listName: "Collection 6", labelName: "Collection 6", icon: "bwi-collection" },
{ id: "7", listName: "Collection 7", labelName: "Collection 7", icon: "bwi-collection" },
],
},
};
export const MembersAndGroups: Story = {
...Loading,
args: {
name: "Select groups and members",
hint: "Members/Groups will be assigned to the associated collection",
baseItems: [
{ id: "1", listName: "Group 1", labelName: "Group 1", icon: "bwi-family" },
{ id: "2", listName: "Group 2", labelName: "Group 2", icon: "bwi-family" },
{ id: "3", listName: "Group 3", labelName: "Group 3", icon: "bwi-family" },
{ id: "4", listName: "Group 4", labelName: "Group 4", icon: "bwi-family" },
{ id: "5", listName: "Group 5", labelName: "Group 5", icon: "bwi-family" },
{ id: "6", listName: "Joe Smith (jsmith@mail.me)", labelName: "Joe Smith", icon: "bwi-user" },
{
id: "7",
listName: "Tania Stone (tstone@mail.me)",
labelName: "(tstone@mail.me)",
icon: "bwi-user",
},
],
},
};
export const RemoveSelected: Story = {
...Loading,
args: {
name: "Select groups",
hint: "Groups will be removed from the list once the dropdown is closed",
baseItems: [
{ id: "1", listName: "Group 1", labelName: "Group 1", icon: "bwi-family" },
{ id: "2", listName: "Group 2", labelName: "Group 2", icon: "bwi-family" },
{ id: "3", listName: "Group 3", labelName: "Group 3", icon: "bwi-family" },
{ id: "4", listName: "Group 4", labelName: "Group 4", icon: "bwi-family" },
{ id: "5", listName: "Group 5", labelName: "Group 5", icon: "bwi-family" },
{ id: "6", listName: "Group 6", labelName: "Group 6", icon: "bwi-family" },
{ id: "7", listName: "Group 7", labelName: "Group 7", icon: "bwi-family" },
],
removeSelectedItems: true,
},
};
export const Standalone: Story = {
render: (args) => ({
props: {
...args,
onItemsConfirmed: actionsData.onItemsConfirmed,
},
template: `
<bit-multi-select
class="tw-w-full"
[baseItems]="baseItems"
[removeSelectedItems]="removeSelectedItems"
[loading]="loading"
[disabled]="disabled"
(onItemsConfirmed)="onItemsConfirmed($event)">
</bit-multi-select>
`,
}),
args: {
baseItems: [
{ id: "1", listName: "Group 1", labelName: "Group 1", icon: "bwi-family" },
{ id: "2", listName: "Group 2", labelName: "Group 2", icon: "bwi-family" },
{ id: "3", listName: "Group 3", labelName: "Group 3", icon: "bwi-family" },
{ id: "4", listName: "Group 4", labelName: "Group 4", icon: "bwi-family" },
{ id: "5", listName: "Group 5", labelName: "Group 5", icon: "bwi-family" },
{ id: "6", listName: "Group 6", labelName: "Group 6", icon: "bwi-family" },
{ id: "7", listName: "Group 7", labelName: "Group 7", icon: "bwi-family" },
],
removeSelectedItems: true,
},
template: `
<bit-multi-select
class="tw-w-full"
[baseItems]="baseItems"
[removeSelectedItems]="removeSelectedItems"
[loading]="loading"
[disabled]="disabled"
(onItemsConfirmed)="onItemsConfirmed($event)">
</bit-multi-select>
`,
});
export const Standalone = StandaloneTemplate.bind({});
Standalone.args = {
baseItems: [
{ id: "1", listName: "Group 1", labelName: "Group 1", icon: "bwi-family" },
{ id: "2", listName: "Group 2", labelName: "Group 2", icon: "bwi-family" },
{ id: "3", listName: "Group 3", labelName: "Group 3", icon: "bwi-family" },
{ id: "4", listName: "Group 4", labelName: "Group 4", icon: "bwi-family" },
{ id: "5", listName: "Group 5", labelName: "Group 5", icon: "bwi-family" },
{ id: "6", listName: "Group 6", labelName: "Group 6", icon: "bwi-family" },
{ id: "7", listName: "Group 7", labelName: "Group 7", icon: "bwi-family" },
],
removeSelectedItems: "true",
};

83
libs/components/src/form-field/password-input-toggle.stories.ts
View File

@@ -1,5 +1,5 @@
import { FormsModule, ReactiveFormsModule } 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";
@@ -38,49 +38,42 @@ export default {
},
} as Meta;
const Template: Story<BitPasswordInputToggleDirective> = (
args: BitPasswordInputToggleDirective
) => ({
props: {
...args,
},
template: `
<form>
<bit-form-field>
<bit-label>Password</bit-label>
<input bitInput type="password" />
<button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
</bit-form-field>
</form>
`,
});
type Story = StoryObj<BitPasswordInputToggleDirective>;
export const Default = Template.bind({});
Default.props = {};
const TemplateBinding: Story<BitPasswordInputToggleDirective> = (
args: BitPasswordInputToggleDirective
) => ({
props: {
...args,
},
template: `
<form>
<bit-form-field>
<bit-label>Password</bit-label>
<input bitInput type="password" />
<button type="button" bitIconButton bitSuffix bitPasswordInputToggle [(toggled)]="toggled"></button>
</bit-form-field>
<label class="tw-text-main">
Checked:
<input type="checkbox" [(ngModel)]="toggled" [ngModelOptions]="{standalone: true}" />
</label>
</form>
`,
});
export const Binding = TemplateBinding.bind({});
Binding.props = {
toggled: false,
export const Default: Story = {
render: (args) => ({
props: args,
template: `
<form>
<bit-form-field>
<bit-label>Password</bit-label>
<input bitInput type="password" />
<button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
</bit-form-field>
</form>
`,
}),
};
export const Binding: Story = {
render: (args) => ({
props: args,
template: `
<form>
<bit-form-field>
<bit-label>Password</bit-label>
<input bitInput type="password" />
<button type="button" bitIconButton bitSuffix bitPasswordInputToggle [(toggled)]="toggled"></button>
</bit-form-field>
<label class="tw-text-main">
Checked:
<input type="checkbox" [(ngModel)]="toggled" [ngModelOptions]="{standalone: true}" />
</label>
</form>
`,
}),
args: {
toggled: false,
},
};