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

projects/my-wallet-ds/documentation.json

@@ -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>",
+                "rawtype": "StoryObj<CheckboxComponent>",
-                "file": "projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts",
+                "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>",
+                    "rawtype": "StoryObj<CheckboxComponent>",
-                    "file": "projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts",
+                    "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",
+                "filePath": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts",
-                "type": "type alias",
+                "type": "variable",
                 "linktype": "miscellaneous",
-                "linksubtype": "typealias",
+                "linksubtype": "variable",
-                "name": "Story",
+                "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"
             }
         ]
     }

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

@@ -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>

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

@@ -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);
+  /**
+   * @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);
 }

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

@@ -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({});