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

[CL-550] Update cipher form story (#14019)

Browse Source
This commit is contained in:
Vicki League
2025-03-28 13:41:53 -04:00
committed by GitHub
parent 7ed2145393
commit 6204e2a092
2 changed files with 44 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
libs/vault/src/cipher-form/cipher-form.mdx
View File

@@ -12,6 +12,9 @@ It is configured via a `CipherFormConfig` object that is passed to the component
create it. A default implementation of the `CipherFormConfigService` exists in the
`@bitwarden/vault` library.
The cipher form has a slot for `attachment-button`, which should be included when the form is in
`edit` mode.
<Primary />
<Controls include={["config", "submitBtn"]} />

50
libs/vault/src/cipher-form/cipher-form.stories.ts
View File

@@ -29,7 +29,7 @@ import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
import { LoginView } from "@bitwarden/common/vault/models/view/login.view";
import { AsyncActionsModule, ButtonModule, ToastService } from "@bitwarden/components";
import { AsyncActionsModule, ButtonModule, ItemModule, ToastService } from "@bitwarden/components";
import {
CipherFormConfig,
CipherFormGenerationService,
@@ -131,7 +131,7 @@ export default {
component: CipherFormComponent,
decorators: [
moduleMetadata({
imports: [CipherFormModule, AsyncActionsModule, ButtonModule],
imports: [CipherFormModule, AsyncActionsModule, ButtonModule, ItemModule],
providers: [
{
provide: CipherFormService,
@@ -246,7 +246,7 @@ export default {
type Story = StoryObj<CipherFormComponent>;
export const Default: Story = {
export const Add: Story = {
render: (args) => {
return {
props: {
@@ -254,15 +254,28 @@ export const Default: Story = {
...args,
},
template: /*html*/ `
<vault-cipher-form [config]="config" (cipherSaved)="onSave($event)" formId="test-form" [submitBtn]="submitBtn"></vault-cipher-form>
<button type="submit" form="test-form" bitButton buttonType="primary" #submitBtn>Submit</button>
<vault-cipher-form [config]="config" (cipherSaved)="onSave($event)" formId="test-form"></vault-cipher-form>
`,
};
},
};
export const Edit: Story = {
...Default,
render: (args) => {
return {
props: {
onSave: actionsData.onSave,
...args,
},
template: /*html*/ `
<vault-cipher-form [config]="config" (cipherSaved)="onSave($event)" formId="test-form" [submitBtn]="submitBtn">
<bit-item slot="attachment-button">
<button bit-item-content type="button">Attachments</button>
</bit-item>
</vault-cipher-form>
`,
};
},
args: {
config: {
...defaultConfig,
@@ -273,7 +286,7 @@ export const Edit: Story = {
};
export const PartialEdit: Story = {
...Default,
...Add,
args: {
config: {
...defaultConfig,
@@ -284,7 +297,7 @@ export const PartialEdit: Story = {
};
export const Clone: Story = {
...Default,
...Add,
args: {
config: {
...defaultConfig,
@@ -294,8 +307,27 @@ export const Clone: Story = {
},
};
export const WithSubmitButton: Story = {
render: (args) => {
return {
props: {
onSave: actionsData.onSave,
...args,
},
template: /*html*/ `
<div class="tw-p-4">
<vault-cipher-form [config]="config" (cipherSaved)="onSave($event)" formId="test-form" [submitBtn]="submitBtn"></vault-cipher-form>
</div>
<div class="tw-p-4">
<button type="submit" form="test-form" bitButton buttonType="primary" #submitBtn>Submit</button>
</div>
`,
};
},
};
export const NoPersonalOwnership: Story = {
...Default,
...Add,
args: {
config: {
...defaultConfig,