feat: story for expense income category detail

projects/my-wallet-ds/documentation.json

@@ -31,14 +31,24 @@
                 "defaultValue": "Template.bind({})"
             },
             {
-                "name": "ExpenseIncomeCategoryByAccountDetail",
+                "name": "Default",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
                 "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
-                "type": "",
+                "type": "StoryObj<ExpenseIncomeCategoryByAccountDetailComponent>",
-                "defaultValue": "Template.bind({})"
+                "defaultValue": "{\n  ...Template,\n  args: {\n    ...meta.args,\n    showCheckbox: false,\n  },\n}"
+            },
+            {
+                "name": "Default",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-detail.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "StoryObj<ExpenseIncomeCategoryDetailComponent>",
+                "defaultValue": "{\n  ...Template,\n}"
             },
             {
                 "name": "Large",
@@ -160,7 +170,17 @@
                 "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}"
+                "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\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    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}"
+            },
+            {
+                "name": "meta",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-detail.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Meta<ExpenseIncomeCategoryDetailComponent>",
+                "defaultValue": "{\n    title:'Molecules/ Expense Income Category Detail',\n    component: ExpenseIncomeCategoryDetailComponent,\n    tags: ['autodocs'],\n    args: {\n      amount: 9494,\n      iconProps:{\n        backgroundColor: '#f5ea42',\n        color: '#ffffff',\n        symbol: 'riding-line'\n      },\n      category:\"Ocio, recreación y snacks\",\n      description:\"Pizza\",\n      variant:\"income\",\n      whom:\"Rappi\"\n    },\n    argTypes: {\n      category,\n    } \n}"
             },
             {
                 "name": "Paragraph",
@@ -259,18 +279,18 @@
                 "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
-                "type": "",
+                "type": "StoryObj<ExpenseIncomeCategoryByAccountDetailComponent>",
-                "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})"
+                "defaultValue": "{\n  render: (args) => ({\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: symbol, color: color, backgroundColor: backgroundColor }\"\n            [category]=\"category\"\n            [description]=\"description\"\n            [showCheckbox]=\"showCheckbox\"\n            [variant]=\"variant\"\n            [whom]=\"whom\"\n        />\n      </div>\n    `,\n  }),\n}"
             },
             {
-                "name": "TemplateCheckbox",
+                "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts",
+                "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-detail.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
-                "type": "",
+                "type": "StoryObj<ExpenseIncomeCategoryDetailComponent>",
-                "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})"
+                "defaultValue": "{\n  render: (args) => ({\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-detail \n            [amount]=\"9494\"\n            [iconProps]=\"iconProps\"\n            category=\"Ocio, recreación y snacks\"\n            description=\"Pizza\" \n            variant=\"income\"\n            whom=\"Rappi\"\n        />\n      </div>\n    `,\n  }),\n}"
             },
             {
                 "name": "WithCheckbox",
@@ -279,8 +299,8 @@
                 "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
-                "type": "",
+                "type": "StoryObj<ExpenseIncomeCategoryByAccountDetailComponent>",
-                "defaultValue": "TemplateCheckbox.bind({})"
+                "defaultValue": "{\n  ...Template,\n  args: {\n    ...meta.args,\n    showCheckbox: true,\n  },\n}"
             }
         ],
         "functions": [],
@@ -390,14 +410,14 @@
             ],
             "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts": [
                 {
-                    "name": "ExpenseIncomeCategoryByAccountDetail",
+                    "name": "Default",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "",
+                    "type": "StoryObj<ExpenseIncomeCategoryByAccountDetailComponent>",
-                    "defaultValue": "Template.bind({})"
+                    "defaultValue": "{\n  ...Template,\n  args: {\n    ...meta.args,\n    showCheckbox: false,\n  },\n}"
                 },
                 {
                     "name": "meta",
@@ -407,7 +427,7 @@
                     "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}"
+                    "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\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    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}"
                 },
                 {
                     "name": "Template",
@@ -416,18 +436,8 @@
                     "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "",
+                    "type": "StoryObj<ExpenseIncomeCategoryByAccountDetailComponent>",
-                    "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})"
+                    "defaultValue": "{\n  render: (args) => ({\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: symbol, color: color, backgroundColor: backgroundColor }\"\n            [category]=\"category\"\n            [description]=\"description\"\n            [showCheckbox]=\"showCheckbox\"\n            [variant]=\"variant\"\n            [whom]=\"whom\"\n        />\n      </div>\n    `,\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",
@@ -436,8 +446,40 @@
                     "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "",
+                    "type": "StoryObj<ExpenseIncomeCategoryByAccountDetailComponent>",
-                    "defaultValue": "TemplateCheckbox.bind({})"
+                    "defaultValue": "{\n  ...Template,\n  args: {\n    ...meta.args,\n    showCheckbox: true,\n  },\n}"
+                }
+            ],
+            "projects/my-wallet-ds/src/stories/molecules/expense-income-category-detail.stories.ts": [
+                {
+                    "name": "Default",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-detail.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "StoryObj<ExpenseIncomeCategoryDetailComponent>",
+                    "defaultValue": "{\n  ...Template,\n}"
+                },
+                {
+                    "name": "meta",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-detail.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Meta<ExpenseIncomeCategoryDetailComponent>",
+                    "defaultValue": "{\n    title:'Molecules/ Expense Income Category Detail',\n    component: ExpenseIncomeCategoryDetailComponent,\n    tags: ['autodocs'],\n    args: {\n      amount: 9494,\n      iconProps:{\n        backgroundColor: '#f5ea42',\n        color: '#ffffff',\n        symbol: 'riding-line'\n      },\n      category:\"Ocio, recreación y snacks\",\n      description:\"Pizza\",\n      variant:\"income\",\n      whom:\"Rappi\"\n    },\n    argTypes: {\n      category,\n    } \n}"
+                },
+                {
+                    "name": "Template",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-detail.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "StoryObj<ExpenseIncomeCategoryDetailComponent>",
+                    "defaultValue": "{\n  render: (args) => ({\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-detail \n            [amount]=\"9494\"\n            [iconProps]=\"iconProps\"\n            category=\"Ocio, recreación y snacks\"\n            description=\"Pizza\" \n            variant=\"income\"\n            whom=\"Rappi\"\n        />\n      </div>\n    `,\n  }),\n}"
                 }
             ],
             "projects/my-wallet-ds/src/stories/button.stories.ts": [
@@ -910,7 +952,7 @@
                 "type": "variable",
                 "linktype": "miscellaneous",
                 "linksubtype": "variable",
-                "name": "ExpenseIncomeCategoryByAccountDetail",
+                "name": "Default",
                 "coveragePercent": 0,
                 "coverageCount": "0/1",
                 "status": "low"
@@ -940,17 +982,37 @@
                 "type": "variable",
                 "linktype": "miscellaneous",
                 "linksubtype": "variable",
-                "name": "TemplateCheckbox",
+                "name": "WithCheckbox",
                 "coveragePercent": 0,
                 "coverageCount": "0/1",
                 "status": "low"
             },
             {
-                "filePath": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts",
+                "filePath": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-detail.stories.ts",
                 "type": "variable",
                 "linktype": "miscellaneous",
                 "linksubtype": "variable",
-                "name": "WithCheckbox",
+                "name": "Default",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/my-wallet-ds/src/stories/molecules/expense-income-category-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-detail.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Template",
                 "coveragePercent": 0,
                 "coverageCount": "0/1",
                 "status": "low"

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

@@ -0,0 +1,71 @@
+import { Meta, StoryObj } from "@storybook/angular";
+import { ExpenseIncomeCategoryDetailComponent } from "../../lib/molecules/expense-income-category-detail/expense-income-category-detail.component";
+import { amount, category, description, variant, whom } from "../control-constants/expense-income-detail";
+import { backgroundColor } from "../control-constants/circled-icon";
+import { color, symbol } from "../control-constants/svg";
+
+const meta: Meta<ExpenseIncomeCategoryDetailComponent> = {
+    title:'Molecules/ Expense Income Category Detail',
+    component: ExpenseIncomeCategoryDetailComponent,
+    tags: ['autodocs'],
+    args: {
+      amount: 9494,
+      iconProps:{
+        backgroundColor: '#FFC3CD',
+        color: '#ffffff',
+        symbol: 'riding-line'
+      },
+      category:"Ocio, recreación y snacks",
+      description:"Pizza",
+      variant:"expense",
+      whom:"Rappi",
+      /*iconProps*/
+      backgroundColor: '#FFC3CD',
+      color: '#ffffff',
+      symbol: 'riding-line',
+    } as any,
+    argTypes: {
+      amount,
+      category,
+      description,
+      iconProps: {
+        control: 'object',
+        description: 'Properties for the rendered icon'
+      },
+      variant,
+      whom,
+      /*icon props */
+      backgroundColor: {...backgroundColor, table: {...backgroundColor.table, category: 'iconProps'}},
+      color: {...color, table: {...color.table, category: 'iconProps'}},
+      symbol: {...symbol, table: {...symbol.table, category: 'iconProps'}}
+    } as any
+}
+
+export default meta;
+
+const Template: StoryObj<ExpenseIncomeCategoryDetailComponent> = {
+  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-detail 
+            [amount]="amount"
+            [iconProps]="{ symbol: symbol, color: color, backgroundColor: backgroundColor }"
+            [category]="category"
+            [description]="description" 
+            [variant]="variant"
+            [whom]="whom"
+        />
+      </div>
+    `,
+  }),
+};
+
+export const Default: StoryObj<ExpenseIncomeCategoryDetailComponent> = {
+  ...Template,
+};