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

feat: add sb documentation for expense income category by account detail cmp

Browse Source
This commit is contained in:
Gabriel De Los Rios
2025-08-23 00:08:48 -03:00
parent 868dd0a9e4
commit 4621784736
4 changed files with 419 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

396
projects/my-wallet-ds/documentation.json
View File

@@ -14,7 +14,7 @@
"name": "Checkbox",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/checkbox.stories.ts",
"file": "projects/my-wallet-ds/src/stories/atoms/checkbox.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "Story",
@@ -30,6 +30,16 @@
"type": "",
"defaultValue": "Template.bind({})"
},
{
"name": "ExpenseIncomeCategoryByAccountDetail",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "",
"defaultValue": "Template.bind({})"
},
{
"name": "Large",
"ctype": "miscellaneous",
@@ -90,16 +100,6 @@
"type": "Meta<ButtonComponent>",
"defaultValue": "{\n title: 'Atoms/Button',\n component: ButtonComponent,\n tags: ['autodocs'],\n argTypes: {\n backgroundColor: {\n control: 'color',\n },\n },\n // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args\n args: { onClick: fn() },\n}"
},
{
"name": "meta",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/checkbox.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "Meta<CheckboxComponent>",
"defaultValue": "{\n title: 'Atoms/Checkbox',\n component: CheckboxComponent,\n tags: ['autodocs'],\n argTypes: {\n checked: {\n description: 'Emitted when the checkbox is clicked',\n table: {\n category: 'Outputs',\n type: { summary: 'EventEmitter<Boolean>', detail: 'Emits true if checked, false otherwise' },\n }, \n }\n },\n\n}"
},
{
"name": "meta",
"ctype": "miscellaneous",
@@ -124,7 +124,17 @@
"name": "meta",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/svg.stories.ts",
"file": "projects/my-wallet-ds/src/stories/atoms/checkbox.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "Meta<CheckboxComponent>",
"defaultValue": "{\n title: 'Atoms/Checkbox',\n component: CheckboxComponent,\n tags: ['autodocs'],\n argTypes: {\n checked: {\n description: 'Emitted when the checkbox is clicked',\n table: {\n category: 'Outputs',\n type: { summary: 'EventEmitter<Boolean>', detail: 'Emits true if checked, false otherwise' },\n }, \n }\n },\n\n}"
},
{
"name": "meta",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/atoms/svg.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "Meta<SvgComponent>",
@@ -142,11 +152,21 @@
"rawdescription": "\n**Sizing**: the circled icon takes all space available in it's parent component",
"description": "<p><strong>Sizing</strong>: the circled icon takes all space available in it&#39;s parent component</p>\n"
},
{
"name": "meta",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "Meta<ExpenseIncomeCategoryByAccountDetailComponent>",
"defaultValue": "{\n title: 'Molecules/ Expense Income Category By Account Detail',\n component: ExpenseIncomeCategoryByAccountDetailComponent,\n tags: ['autodocs'],\n args: {\n amount: 3854.75,\n acumAmount: 15000,\n category: 'Mascota',\n description: 'Urinary SO 1.5kg \\nCuota 05/06',\n variant: 'expense',\n whom: 'Veterinaria',\n /*iconProps */\n iconProps: {\n backgroundColor: '#f5ea42',\n color: '#ffffff',\n symbol: 'stethoscope-fill'\n },\n showCheckbox: false,\n backgroundColor: '#f5ea42',\n color: '#ffffff',\n symbol: 'stethoscope-fill',\n } as any,\n argTypes: {\n amount: {\n control: 'number',\n description: 'Income/expense amount',\n table: {defaultValue: {detail: 'Defaults to 0', summary: '0'}},\n },\n acumAmount: {\n control: 'number',\n description: 'An accumulator for grouped income/expenses',\n table: {defaultValue: {detail: 'Defaults to 0', summary: '0'}},\n },\n category: {\n control: 'text',\n description: 'Expense/income category name',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},\n },\n checked: {\n description: 'Emitted when the checkbox is clicked',\n table: {\n category: 'Outputs',\n type: { summary: 'EventEmitter<Boolean>', detail: 'Emits true if checked, false otherwise' },\n }, \n },\n description: {\n control: 'text',\n description: 'Expense/income description',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},\n },\n iconProps: {\n control: 'object',\n description: 'Properties for the rendered icon'\n },\n showCheckbox: {\n control: 'boolean',\n description: 'Whether or not the element should show a checkbox',\n table: {defaultValue: {detail: 'Defaults to false', summary: 'false'}}\n },\n variant: {\n control: 'select',\n description: 'Kind of transaction',\n options: [\n 'expense',\n 'income', \n ],\n table: {defaultValue: {summary: \"income\", detail: \"Income transaction\"}},\n },\n whom: {\n control: 'text',\n description: 'Expense/income payer or payee',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},\n },\n /*icon props */\n backgroundColor: {\n control: 'color',\n description: 'Circle background color',\n table: {defaultValue: {detail: 'Defaults to white', summary: '#fff'}, category: 'iconProps'},\n },\n color: {\n control: 'color',\n description: 'Icon color',\n table: {defaultValue: {detail: 'Defaults to black', summary: '#000000'}, category: 'iconProps'},\n },\n symbol: {\n control: 'select',\n options: svgList,\n description: 'Icon name',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}, category: 'iconProps'}\n }\n } as any,\n parameters: {\n styles: `\n body {\n font-size: 10px;\n }\n `\n }\n}"
},
{
"name": "Paragraph",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/typography.stories.ts",
"file": "projects/my-wallet-ds/src/stories/atoms/typography.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "",
@@ -196,7 +216,7 @@
"name": "Svg",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/svg.stories.ts",
"file": "projects/my-wallet-ds/src/stories/atoms/svg.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "",
@@ -206,7 +226,7 @@
"name": "Template",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/svg.stories.ts",
"file": "projects/my-wallet-ds/src/stories/atoms/svg.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "",
@@ -216,7 +236,7 @@
"name": "Template",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/typography.stories.ts",
"file": "projects/my-wallet-ds/src/stories/atoms/typography.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "",
@@ -231,6 +251,36 @@
"deprecationMessage": "",
"type": "",
"defaultValue": "(args: {backgroundColor: string, color: string, symbol: string}) => ({\n props: args,\n template: `\n <div style=\"width: 36px; height: 36px; margin: auto;\">\n <mw-circled-icon\n backgroundColor=\"${args.backgroundColor}\"\n color=\"${args.color}\"\n symbol=\"${args.symbol}\"\n ></mw-circled-icon>\n </div>\n `\n})"
},
{
"name": "Template",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "",
"defaultValue": "(args: ExpenseIncomeCategoryByAccountDetailComponent) => ({\n props: args,\n styles: [\n `\n @import url('/assets/styles.css')\n `\n ],\n template: `\n <div style=\"width: 375px; height: 40px; margin: auto; padding: 0 4px;\">\n <mw-expense-income-category-by-account-detail\n [acumAmount]=\"acumAmount\"\n [amount]=\"amount\"\n [iconProps]=\"{symbol,color,backgroundColor}\"\n category=\"${args.category}\"\n description=\"${args.description}\"\n [showCheckbox]=\"showCheckbox\"\n variant=\"${args.variant}\"\n whom=\"${args.whom}\"\n />\n </div>\n `\n})"
},
{
"name": "TemplateCheckbox",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "",
"defaultValue": "(args: ExpenseIncomeCategoryByAccountDetailComponent) => ({\n props: args,\n styles: [\n `\n @import url('/assets/styles.css')\n `\n ],\n template: `\n <div style=\"width: 375px; height: 40px; margin: auto; padding: 0 4px;\">\n <mw-expense-income-category-by-account-detail\n [acumAmount]=\"acumAmount\"\n [amount]=\"amount\"\n [iconProps]=\"{symbol,color,backgroundColor}\"\n [showCheckbox]=\"true\"\n category=\"${args.category}\"\n description=\"${args.description}\"\n variant=\"${args.variant}\"\n whom=\"${args.whom}\"\n />\n </div>\n `\n})"
},
{
"name": "WithCheckbox",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "",
"defaultValue": "TemplateCheckbox.bind({})"
}
],
"functions": [],
@@ -246,17 +296,6 @@
"description": "",
"kind": 183
},
{
"name": "Story",
"ctype": "miscellaneous",
"subtype": "typealias",
"rawtype": "StoryObj<CheckboxComponent>",
"file": "projects/my-wallet-ds/src/stories/checkbox.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"description": "",
"kind": 183
},
{
"name": "Story",
"ctype": "miscellaneous",
@@ -283,8 +322,8 @@
"name": "Story",
"ctype": "miscellaneous",
"subtype": "typealias",
"rawtype": "StoryObj<CircledIconComponent>",
"file": "projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts",
"rawtype": "StoryObj<CheckboxComponent>",
"file": "projects/my-wallet-ds/src/stories/atoms/checkbox.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"description": "",
@@ -293,12 +332,12 @@
],
"enumerations": [],
"groupedVariables": {
"projects/my-wallet-ds/src/stories/checkbox.stories.ts": [
"projects/my-wallet-ds/src/stories/atoms/checkbox.stories.ts": [
{
"name": "Checkbox",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/checkbox.stories.ts",
"file": "projects/my-wallet-ds/src/stories/atoms/checkbox.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "Story",
@@ -308,7 +347,7 @@
"name": "meta",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/checkbox.stories.ts",
"file": "projects/my-wallet-ds/src/stories/atoms/checkbox.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "Meta<CheckboxComponent>",
@@ -349,6 +388,58 @@
"defaultValue": "(args: {backgroundColor: string, color: string, symbol: string}) => ({\n props: args,\n template: `\n <div style=\"width: 36px; height: 36px; margin: auto;\">\n <mw-circled-icon\n backgroundColor=\"${args.backgroundColor}\"\n color=\"${args.color}\"\n symbol=\"${args.symbol}\"\n ></mw-circled-icon>\n </div>\n `\n})"
}
],
"projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts": [
{
"name": "ExpenseIncomeCategoryByAccountDetail",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "",
"defaultValue": "Template.bind({})"
},
{
"name": "meta",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "Meta<ExpenseIncomeCategoryByAccountDetailComponent>",
"defaultValue": "{\n title: 'Molecules/ Expense Income Category By Account Detail',\n component: ExpenseIncomeCategoryByAccountDetailComponent,\n tags: ['autodocs'],\n args: {\n amount: 3854.75,\n acumAmount: 15000,\n category: 'Mascota',\n description: 'Urinary SO 1.5kg \\nCuota 05/06',\n variant: 'expense',\n whom: 'Veterinaria',\n /*iconProps */\n iconProps: {\n backgroundColor: '#f5ea42',\n color: '#ffffff',\n symbol: 'stethoscope-fill'\n },\n showCheckbox: false,\n backgroundColor: '#f5ea42',\n color: '#ffffff',\n symbol: 'stethoscope-fill',\n } as any,\n argTypes: {\n amount: {\n control: 'number',\n description: 'Income/expense amount',\n table: {defaultValue: {detail: 'Defaults to 0', summary: '0'}},\n },\n acumAmount: {\n control: 'number',\n description: 'An accumulator for grouped income/expenses',\n table: {defaultValue: {detail: 'Defaults to 0', summary: '0'}},\n },\n category: {\n control: 'text',\n description: 'Expense/income category name',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},\n },\n checked: {\n description: 'Emitted when the checkbox is clicked',\n table: {\n category: 'Outputs',\n type: { summary: 'EventEmitter<Boolean>', detail: 'Emits true if checked, false otherwise' },\n }, \n },\n description: {\n control: 'text',\n description: 'Expense/income description',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},\n },\n iconProps: {\n control: 'object',\n description: 'Properties for the rendered icon'\n },\n showCheckbox: {\n control: 'boolean',\n description: 'Whether or not the element should show a checkbox',\n table: {defaultValue: {detail: 'Defaults to false', summary: 'false'}}\n },\n variant: {\n control: 'select',\n description: 'Kind of transaction',\n options: [\n 'expense',\n 'income', \n ],\n table: {defaultValue: {summary: \"income\", detail: \"Income transaction\"}},\n },\n whom: {\n control: 'text',\n description: 'Expense/income payer or payee',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},\n },\n /*icon props */\n backgroundColor: {\n control: 'color',\n description: 'Circle background color',\n table: {defaultValue: {detail: 'Defaults to white', summary: '#fff'}, category: 'iconProps'},\n },\n color: {\n control: 'color',\n description: 'Icon color',\n table: {defaultValue: {detail: 'Defaults to black', summary: '#000000'}, category: 'iconProps'},\n },\n symbol: {\n control: 'select',\n options: svgList,\n description: 'Icon name',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}, category: 'iconProps'}\n }\n } as any,\n parameters: {\n styles: `\n body {\n font-size: 10px;\n }\n `\n }\n}"
},
{
"name": "Template",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "",
"defaultValue": "(args: ExpenseIncomeCategoryByAccountDetailComponent) => ({\n props: args,\n styles: [\n `\n @import url('/assets/styles.css')\n `\n ],\n template: `\n <div style=\"width: 375px; height: 40px; margin: auto; padding: 0 4px;\">\n <mw-expense-income-category-by-account-detail\n [acumAmount]=\"acumAmount\"\n [amount]=\"amount\"\n [iconProps]=\"{symbol,color,backgroundColor}\"\n category=\"${args.category}\"\n description=\"${args.description}\"\n [showCheckbox]=\"showCheckbox\"\n variant=\"${args.variant}\"\n whom=\"${args.whom}\"\n />\n </div>\n `\n})"
},
{
"name": "TemplateCheckbox",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "",
"defaultValue": "(args: ExpenseIncomeCategoryByAccountDetailComponent) => ({\n props: args,\n styles: [\n `\n @import url('/assets/styles.css')\n `\n ],\n template: `\n <div style=\"width: 375px; height: 40px; margin: auto; padding: 0 4px;\">\n <mw-expense-income-category-by-account-detail\n [acumAmount]=\"acumAmount\"\n [amount]=\"amount\"\n [iconProps]=\"{symbol,color,backgroundColor}\"\n [showCheckbox]=\"true\"\n category=\"${args.category}\"\n description=\"${args.description}\"\n variant=\"${args.variant}\"\n whom=\"${args.whom}\"\n />\n </div>\n `\n})"
},
{
"name": "WithCheckbox",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "",
"defaultValue": "TemplateCheckbox.bind({})"
}
],
"projects/my-wallet-ds/src/stories/button.stories.ts": [
{
"name": "Large",
@@ -465,12 +556,12 @@
"defaultValue": "{\n title: 'Organisms/Page',\n component: PageComponent,\n parameters: {\n // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout\n layout: 'fullscreen',\n },\n}"
}
],
"projects/my-wallet-ds/src/stories/svg.stories.ts": [
"projects/my-wallet-ds/src/stories/atoms/svg.stories.ts": [
{
"name": "meta",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/svg.stories.ts",
"file": "projects/my-wallet-ds/src/stories/atoms/svg.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "Meta<SvgComponent>",
@@ -480,7 +571,7 @@
"name": "Svg",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/svg.stories.ts",
"file": "projects/my-wallet-ds/src/stories/atoms/svg.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "",
@@ -490,19 +581,19 @@
"name": "Template",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/svg.stories.ts",
"file": "projects/my-wallet-ds/src/stories/atoms/svg.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "",
"defaultValue": "(args: { width: string, height: string, color: string, symbol: string,}) => ({\n props: args,\n template: `\n <div style=\"display:flex; justify-content: center;\">\n <mw-svg\n width=\"${args.width}\"\n height=\"${args.height}\"\n color=\"${args.color}\"\n symbol=\"${args.symbol}\"\n ></mw-svg>\n </div>`\n})"
}
],
"projects/my-wallet-ds/src/stories/typography.stories.ts": [
"projects/my-wallet-ds/src/stories/atoms/typography.stories.ts": [
{
"name": "Paragraph",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/typography.stories.ts",
"file": "projects/my-wallet-ds/src/stories/atoms/typography.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "",
@@ -512,7 +603,7 @@
"name": "Template",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/typography.stories.ts",
"file": "projects/my-wallet-ds/src/stories/atoms/typography.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "",
@@ -548,19 +639,6 @@
"kind": 183
}
],
"projects/my-wallet-ds/src/stories/checkbox.stories.ts": [
{
"name": "Story",
"ctype": "miscellaneous",
"subtype": "typealias",
"rawtype": "StoryObj<CheckboxComponent>",
"file": "projects/my-wallet-ds/src/stories/checkbox.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"description": "",
"kind": 183
}
],
"projects/my-wallet-ds/src/stories/header.stories.ts": [
{
"name": "Story",
@@ -587,13 +665,13 @@
"kind": 183
}
],
"projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts": [
"projects/my-wallet-ds/src/stories/atoms/checkbox.stories.ts": [
{
"name": "Story",
"ctype": "miscellaneous",
"subtype": "typealias",
"rawtype": "StoryObj<CircledIconComponent>",
"file": "projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts",
"rawtype": "StoryObj<CheckboxComponent>",
"file": "projects/my-wallet-ds/src/stories/atoms/checkbox.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"description": "",
@@ -617,6 +695,86 @@
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/atoms/checkbox.stories.ts",
"type": "variable",
"linktype": "miscellaneous",
"linksubtype": "variable",
"name": "Checkbox",
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/atoms/checkbox.stories.ts",
"type": "variable",
"linktype": "miscellaneous",
"linksubtype": "variable",
"name": "meta",
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/atoms/checkbox.stories.ts",
"type": "type alias",
"linktype": "miscellaneous",
"linksubtype": "typealias",
"name": "Story",
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/atoms/svg.stories.ts",
"type": "variable",
"linktype": "miscellaneous",
"linksubtype": "variable",
"name": "meta",
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/atoms/svg.stories.ts",
"type": "variable",
"linktype": "miscellaneous",
"linksubtype": "variable",
"name": "Svg",
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/atoms/svg.stories.ts",
"type": "variable",
"linktype": "miscellaneous",
"linksubtype": "variable",
"name": "Template",
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/atoms/typography.stories.ts",
"type": "variable",
"linktype": "miscellaneous",
"linksubtype": "variable",
"name": "Paragraph",
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/atoms/typography.stories.ts",
"type": "variable",
"linktype": "miscellaneous",
"linksubtype": "variable",
"name": "Template",
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/button.stories.ts",
"type": "variable",
@@ -677,36 +835,6 @@
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/checkbox.stories.ts",
"type": "variable",
"linktype": "miscellaneous",
"linksubtype": "variable",
"name": "Checkbox",
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/checkbox.stories.ts",
"type": "variable",
"linktype": "miscellaneous",
"linksubtype": "variable",
"name": "meta",
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/checkbox.stories.ts",
"type": "type alias",
"linktype": "miscellaneous",
"linksubtype": "typealias",
"name": "Story",
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/header.stories.ts",
"type": "variable",
@@ -778,11 +906,51 @@
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts",
"type": "type alias",
"filePath": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts",
"type": "variable",
"linktype": "miscellaneous",
"linksubtype": "typealias",
"name": "Story",
"linksubtype": "variable",
"name": "ExpenseIncomeCategoryByAccountDetail",
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts",
"type": "variable",
"linktype": "miscellaneous",
"linksubtype": "variable",
"name": "meta",
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts",
"type": "variable",
"linktype": "miscellaneous",
"linksubtype": "variable",
"name": "Template",
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts",
"type": "variable",
"linktype": "miscellaneous",
"linksubtype": "variable",
"name": "TemplateCheckbox",
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts",
"type": "variable",
"linktype": "miscellaneous",
"linksubtype": "variable",
"name": "WithCheckbox",
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
@@ -826,56 +994,6 @@
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/svg.stories.ts",
"type": "variable",
"linktype": "miscellaneous",
"linksubtype": "variable",
"name": "meta",
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/svg.stories.ts",
"type": "variable",
"linktype": "miscellaneous",
"linksubtype": "variable",
"name": "Svg",
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/svg.stories.ts",
"type": "variable",
"linktype": "miscellaneous",
"linksubtype": "variable",
"name": "Template",
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/typography.stories.ts",
"type": "variable",
"linktype": "miscellaneous",
"linksubtype": "variable",
"name": "Paragraph",
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/typography.stories.ts",
"type": "variable",
"linktype": "miscellaneous",
"linksubtype": "variable",
"name": "Template",
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
}
]
}

2
projects/my-wallet-ds/src/lib/molecules/expense-income-category-by-account-detail/expense-income-category-by-account-detail.component.html
View File

@@ -1,5 +1,5 @@
<div class="income-category-detail__container">
@if(showCheckBox()) {
@if(showCheckbox()) {
<div class="income-category-detail__checkbox">
<mw-checkbox (checked)="checked.emit($event)"></mw-checkbox>
</div>

16
projects/my-wallet-ds/src/lib/molecules/expense-income-category-by-account-detail/expense-income-category-by-account-detail.component.ts
View File

@@ -20,8 +20,20 @@ import { CheckboxComponent } from '../../atoms/checkbox/checkbox.component';
styleUrl: './expense-income-category-by-account-detail.component.css'
})
export class ExpenseIncomeCategoryByAccountDetailComponent extends AbstractExpenseIncomeDetailComponent {
/**
* @description An accumulator for grouped income/expenses
*/
acumAmount = input(0);
category = input('');
/**
* @description Expense/income category name
*/
category = input('');
/**
* @description Emitted when the checkbox is clicked
*/
checked = output<boolean>();
showCheckBox = input(false);
/**
* @description Whether or not the element should show a checkbox
*/
showCheckbox = input(false);
}

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

@@ -0,0 +1,147 @@
import type { Meta } 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';
const meta: Meta<ExpenseIncomeCategoryByAccountDetailComponent> = {
title: 'Molecules/ Expense Income Category By Account Detail',
component: ExpenseIncomeCategoryByAccountDetailComponent,
tags: ['autodocs'],
args: {
amount: 3854.75,
acumAmount: 15000,
category: 'Mascota',
description: 'Urinary SO 1.5kg \nCuota 05/06',
variant: 'expense',
whom: 'Veterinaria',
/*iconProps */
iconProps: {
backgroundColor: '#f5ea42',
color: '#ffffff',
symbol: 'stethoscope-fill'
},
showCheckbox: false,
backgroundColor: '#f5ea42',
color: '#ffffff',
symbol: 'stethoscope-fill',
} as any,
argTypes: {
amount: {
control: 'number',
description: 'Income/expense amount',
table: {defaultValue: {detail: 'Defaults to 0', summary: '0'}},
},
acumAmount: {
control: 'number',
description: 'An accumulator for grouped income/expenses',
table: {defaultValue: {detail: 'Defaults to 0', summary: '0'}},
},
category: {
control: 'text',
description: 'Expense/income category name',
table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},
},
checked: {
description: 'Emitted when the checkbox is clicked',
table: {
category: 'Outputs',
type: { summary: 'EventEmitter<Boolean>', detail: 'Emits true if checked, false otherwise' },
},
},
description: {
control: 'text',
description: 'Expense/income description',
table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},
},
iconProps: {
control: 'object',
description: 'Properties for the rendered icon'
},
showCheckbox: {
control: 'boolean',
description: 'Whether or not the element should show a checkbox',
table: {defaultValue: {detail: 'Defaults to false', summary: 'false'}}
},
variant: {
control: 'select',
description: 'Kind of transaction',
options: [
'expense',
'income',
],
table: {defaultValue: {summary: "income", detail: "Income transaction"}},
},
whom: {
control: 'text',
description: 'Expense/income payer or payee',
table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},
},
/*icon props */
backgroundColor: {
control: 'color',
description: 'Circle background color',
table: {defaultValue: {detail: 'Defaults to white', summary: '#fff'}, category: 'iconProps'},
},
color: {
control: 'color',
description: 'Icon color',
table: {defaultValue: {detail: 'Defaults to black', summary: '#000000'}, category: 'iconProps'},
},
symbol: {
control: 'select',
options: svgList,
description: 'Icon name',
table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}, category: 'iconProps'}
}
} as any
};
export default meta;
const Template = (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}"
category="${args.category}"
description="${args.description}"
[showCheckbox]="showCheckbox"
variant="${args.variant}"
whom="${args.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 ExpenseIncomeCategoryByAccountDetail = Template.bind({});
export const WithCheckbox = TemplateCheckbox.bind({});