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

60
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 { ExpenseIncomeCategoryByAccountDetailComponent } from '../../lib/molecules/expense-income-category-by-account-detail/expense-income-category-by-account-detail.component';
import { svgList } from '../svg-list'; import { svgList } from '../svg-list';
@@ -19,7 +19,7 @@ const meta: Meta<ExpenseIncomeCategoryByAccountDetailComponent> = {
color: '#ffffff', color: '#ffffff',
symbol: 'stethoscope-fill' symbol: 'stethoscope-fill'
}, },
showCheckbox: false,
backgroundColor: '#f5ea42', backgroundColor: '#f5ea42',
color: '#ffffff', color: '#ffffff',
symbol: 'stethoscope-fill', symbol: 'stethoscope-fill',
@@ -97,7 +97,8 @@ const meta: Meta<ExpenseIncomeCategoryByAccountDetailComponent> = {
export default meta; export default meta;
const Template = (args: ExpenseIncomeCategoryByAccountDetailComponent) => ({ const Template: StoryObj<ExpenseIncomeCategoryByAccountDetailComponent> = {
render: (args) => ({
props: args, props: args,
styles: [ styles: [
` `
@@ -109,39 +110,30 @@ const Template = (args: ExpenseIncomeCategoryByAccountDetailComponent) => ({
<mw-expense-income-category-by-account-detail <mw-expense-income-category-by-account-detail
[acumAmount]="acumAmount" [acumAmount]="acumAmount"
[amount]="amount" [amount]="amount"
[iconProps]="{symbol,color,backgroundColor}" [iconProps]="{ symbol: symbol, color: color, backgroundColor: backgroundColor }"
category="${args.category}" [category]="category"
description="${args.description}" [description]="description"
[showCheckbox]="showCheckbox" [showCheckbox]="showCheckbox"
variant="${args.variant}" [variant]="variant"
whom="${args.whom}" [whom]="whom"
/> />
</div> </div>
` `,
}); }),
};
const TemplateCheckbox = (args: ExpenseIncomeCategoryByAccountDetailComponent) => ({ export const Default: StoryObj<ExpenseIncomeCategoryByAccountDetailComponent> = {
props: args, ...Template,
styles: [ args: {
` ...meta.args,
@import url('/assets/styles.css') showCheckbox: false,
` },
], };
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 ExpenseIncomeCategoryByAccountDetail = Template.bind({}); export const WithCheckbox: StoryObj<ExpenseIncomeCategoryByAccountDetailComponent> = {
export const WithCheckbox = TemplateCheckbox.bind({}); ...Template,
args: {
...meta.args,
showCheckbox: true,
},
};