my-wallet/my-wallet-ds
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: story rendering for proper args switching between cmp states

Browse Source
This commit is contained in:
Gabriel De Los Rios
2025-08-23 12:18:21 -03:00
parent 4621784736
commit 64e2269455
1 changed files with 36 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts
View File

@@ -1,4 +1,4 @@
import type { Meta } from '@storybook/angular';
import type { Meta, StoryObj } from '@storybook/angular';
import { ExpenseIncomeCategoryByAccountDetailComponent } from '../../lib/molecules/expense-income-category-by-account-detail/expense-income-category-by-account-detail.component';
import { svgList } from '../svg-list';
@@ -19,7 +19,7 @@ const meta: Meta<ExpenseIncomeCategoryByAccountDetailComponent> = {
color: '#ffffff',
symbol: 'stethoscope-fill'
},
showCheckbox: false,
backgroundColor: '#f5ea42',
color: '#ffffff',
symbol: 'stethoscope-fill',
@@ -97,51 +97,43 @@ const meta: Meta<ExpenseIncomeCategoryByAccountDetailComponent> = {
export default meta;
const Template = (args: ExpenseIncomeCategoryByAccountDetailComponent) => ({
props: args,
styles: [
const Template: StoryObj<ExpenseIncomeCategoryByAccountDetailComponent> = {
render: (args) => ({
props: args,
styles: [
`
@import url('/assets/styles.css')
`
],
template: `
<div style="width: 375px; height: 40px; margin: auto; padding: 0 4px;">
<mw-expense-income-category-by-account-detail
[acumAmount]="acumAmount"
[amount]="amount"
[iconProps]="{symbol,color,backgroundColor}"
category="${args.category}"
description="${args.description}"
[showCheckbox]="showCheckbox"
variant="${args.variant}"
whom="${args.whom}"
/>
</div>
`
});
template: `
<div style="width: 375px; height: 40px; margin: auto; padding: 0 4px;">
<mw-expense-income-category-by-account-detail
[acumAmount]="acumAmount"
[amount]="amount"
[iconProps]="{ symbol: symbol, color: color, backgroundColor: backgroundColor }"
[category]="category"
[description]="description"
[showCheckbox]="showCheckbox"
[variant]="variant"
[whom]="whom"
/>
</div>
`,
}),
};
const TemplateCheckbox = (args: ExpenseIncomeCategoryByAccountDetailComponent) => ({
props: args,
styles: [
`
@import url('/assets/styles.css')
`
],
template: `
<div style="width: 375px; height: 40px; margin: auto; padding: 0 4px;">
<mw-expense-income-category-by-account-detail
[acumAmount]="acumAmount"
[amount]="amount"
[iconProps]="{symbol,color,backgroundColor}"
[showCheckbox]="true"
category="${args.category}"
description="${args.description}"
variant="${args.variant}"
whom="${args.whom}"
/>
</div>
`
});
export const Default: StoryObj<ExpenseIncomeCategoryByAccountDetailComponent> = {
...Template,
args: {
...meta.args,
showCheckbox: false,
},
};
export const ExpenseIncomeCategoryByAccountDetail = Template.bind({});
export const WithCheckbox = TemplateCheckbox.bind({});
export const WithCheckbox: StoryObj<ExpenseIncomeCategoryByAccountDetailComponent> = {
...Template,
args: {
...meta.args,
showCheckbox: true,
},
};