feat: story for expense income date detail

projects/my-wallet-ds/documentation.json

@@ -148,7 +148,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "Meta<SvgComponent>",
-                "defaultValue": "{\n    title: 'Atoms/Svg',\n    component: SvgComponent,\n    tags: ['autodocs'],\n    args: {\n        width: \"24px\",\n        height: \"24px\",\n        color: \"#000000\",\n        symbol: \"stock-line\",\n    },\n    argTypes: {\n        width: {\n            description: 'Icon width with units (px, rem, etc)',\n            table: {defaultValue: {detail: 'Defaults to 24px', summary: '24px'}}\n        },\n        height: {\n            description: 'Icon height with units (px, rem, etc)',\n            table: {defaultValue: {detail: 'Defaults to 24px', summary: '24px'}}\n        },\n        color: {\n            description: 'Icon color',\n            table: {defaultValue: {detail: 'Defaults to black', summary: '#000000'}}\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)'}}\n        }, \n    }\n}"
+                "defaultValue": "{\n    title: 'Atoms/Svg',\n    component: SvgComponent,\n    tags: ['autodocs'],\n    args: {\n        width: \"24px\",\n        height: \"24px\",\n        color: \"#000000\",\n        symbol: \"stock-line\",\n    },\n    argTypes: {\n        width: {\n            description: 'Icon width with units (px, rem, etc)',\n            table: {defaultValue: {detail: 'Defaults to 24px', summary: '24px'}}\n        },\n        height: {\n            description: 'Icon height with units (px, rem, etc)',\n            table: {defaultValue: {detail: 'Defaults to 24px', summary: '24px'}}\n        },\n        color,\n        symbol, \n    }\n}"
             },
             {
                 "name": "meta",
@@ -158,7 +158,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "Meta<CircledIconComponent>",
-                "defaultValue": "{\n  title: 'Molecules/Circled Icon',\n  component: CircledIconComponent,\n  tags: ['autodocs'],\n  args: {\n    backgroundColor: '#c0c0c0',\n    color: '#000000',\n    symbol: 'stock-line',\n  },\n  argTypes: {\n    backgroundColor: {\n      control: 'color',\n      description: 'Circle background color',\n      table: {defaultValue: {detail: 'Defaults to white', summary: '#fff'}},\n    },\n    color: {\n      control: 'color',\n      description: 'Icon color',\n      table: {defaultValue: {detail: 'Defaults to black', summary: '#000000'}},\n    },\n    symbol: {\n      control: 'select',\n      description: 'Icon name',\n      options: svgList,\n      table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}}\n    }\n  },\n}",
+                "defaultValue": "{\n  title: 'Molecules/Circled Icon',\n  component: CircledIconComponent,\n  tags: ['autodocs'],\n  args: {\n    backgroundColor: '#c0c0c0',\n    color: '#000000',\n    symbol: 'stock-line',\n  },\n  argTypes: {\n    backgroundColor,\n    color,\n    symbol\n  },\n}",
                 "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"
             },
@@ -170,7 +170,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\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}"
+                "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      backgroundColor: '#f5ea42',\n      color: '#ffffff',\n      symbol: 'stethoscope-fill'\n    },\n    /*iconProps */\n    backgroundColor: '#f5ea42',\n    color: '#ffffff',\n    symbol: 'stethoscope-fill',\n  } as any,\n  argTypes: {\n    amount,\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    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    whom,\n    /*icon props */\n    backgroundColor: {...backgroundColor, table: {...backgroundColor.table, category: 'iconProps'}},\n    color: {...color, table: {...color.table, category: 'iconProps'}},\n    symbol: {...symbol, table: {...symbol.table, category: 'iconProps'}}\n  } as any\n}"
             },
             {
                 "name": "meta",
@@ -180,7 +180,17 @@
                 "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}"
+                "defaultValue": "{\n    title:'Molecules/ Expense Income Category Detail',\n    component: ExpenseIncomeCategoryDetailComponent,\n    tags: ['autodocs'],\n    args: {\n      amount: 9494,\n      iconProps:{\n        backgroundColor: '#FFC3CD',\n        color: '#ffffff',\n        symbol: 'riding-line'\n      },\n      category:\"Ocio, recreación y snacks\",\n      description:\"Pizza\",\n      variant:\"expense\",\n      whom:\"Rappi\",\n      /*iconProps*/\n      backgroundColor: '#FFC3CD',\n      color: '#ffffff',\n      symbol: 'riding-line',\n    } as any,\n    argTypes: {\n      amount,\n      category,\n      description,\n      iconProps: {\n        control: 'object',\n        description: 'Properties for the rendered icon'\n      },\n      variant,\n      whom,\n      /*icon props */\n      backgroundColor: {...backgroundColor, table: {...backgroundColor.table, category: 'iconProps'}},\n      color: {...color, table: {...color.table, category: 'iconProps'}},\n      symbol: {...symbol, table: {...symbol.table, category: 'iconProps'}}\n    } as any\n}"
+            },
+            {
+                "name": "meta",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-date-detail.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Meta",
+                "defaultValue": "{\n    title: 'Molecules / Expense income date detail',\n    component: ExpenseIncomeDateDetailComponent,\n    tags: ['autodocs'],\n    args: {\n\n    },\n    argTypes: {\n\n    }\n}"
             },
             {
                 "name": "Paragraph",
@@ -280,7 +290,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "StoryObj<ExpenseIncomeCategoryByAccountDetailComponent>",
-                "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}"
+                "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, color, backgroundColor }\"\n            [category]=\"category\"\n            [description]=\"description\"\n            [showCheckbox]=\"showCheckbox\"\n            [variant]=\"variant\"\n            [whom]=\"whom\"\n        />\n      </div>\n    `,\n  }),\n}"
             },
             {
                 "name": "Template",
@@ -290,7 +300,17 @@
                 "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}"
+                "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]=\"amount\"\n            [iconProps]=\"{ symbol: symbol, color: color, backgroundColor: backgroundColor }\"\n            [category]=\"category\"\n            [description]=\"description\" \n            [variant]=\"variant\"\n            [whom]=\"whom\"\n        />\n      </div>\n    `,\n  }),\n}"
+            },
+            {
+                "name": "Template",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-date-detail.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "StoryObj<ExpenseIncomeDateDetailComponent>",
+                "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-date-detail \n            [amount]=\"3854.75\"\n            [description]=\"dateDescription\"\n            [iconProps]=\"dateIconProps\"\n            variant=\"expense\"\n            whom=\"Veterinaria\"\n        />\n      </div>\n    `,\n  }),\n}"
             },
             {
                 "name": "WithCheckbox",
@@ -393,7 +413,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "Meta<CircledIconComponent>",
-                    "defaultValue": "{\n  title: 'Molecules/Circled Icon',\n  component: CircledIconComponent,\n  tags: ['autodocs'],\n  args: {\n    backgroundColor: '#c0c0c0',\n    color: '#000000',\n    symbol: 'stock-line',\n  },\n  argTypes: {\n    backgroundColor: {\n      control: 'color',\n      description: 'Circle background color',\n      table: {defaultValue: {detail: 'Defaults to white', summary: '#fff'}},\n    },\n    color: {\n      control: 'color',\n      description: 'Icon color',\n      table: {defaultValue: {detail: 'Defaults to black', summary: '#000000'}},\n    },\n    symbol: {\n      control: 'select',\n      description: 'Icon name',\n      options: svgList,\n      table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}}\n    }\n  },\n}",
+                    "defaultValue": "{\n  title: 'Molecules/Circled Icon',\n  component: CircledIconComponent,\n  tags: ['autodocs'],\n  args: {\n    backgroundColor: '#c0c0c0',\n    color: '#000000',\n    symbol: 'stock-line',\n  },\n  argTypes: {\n    backgroundColor,\n    color,\n    symbol\n  },\n}",
                     "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"
                 },
@@ -427,7 +447,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\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}"
+                    "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      backgroundColor: '#f5ea42',\n      color: '#ffffff',\n      symbol: 'stethoscope-fill'\n    },\n    /*iconProps */\n    backgroundColor: '#f5ea42',\n    color: '#ffffff',\n    symbol: 'stethoscope-fill',\n  } as any,\n  argTypes: {\n    amount,\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    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    whom,\n    /*icon props */\n    backgroundColor: {...backgroundColor, table: {...backgroundColor.table, category: 'iconProps'}},\n    color: {...color, table: {...color.table, category: 'iconProps'}},\n    symbol: {...symbol, table: {...symbol.table, category: 'iconProps'}}\n  } as any\n}"
                 },
                 {
                     "name": "Template",
@@ -437,7 +457,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "StoryObj<ExpenseIncomeCategoryByAccountDetailComponent>",
-                    "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}"
+                    "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, color, backgroundColor }\"\n            [category]=\"category\"\n            [description]=\"description\"\n            [showCheckbox]=\"showCheckbox\"\n            [variant]=\"variant\"\n            [whom]=\"whom\"\n        />\n      </div>\n    `,\n  }),\n}"
                 },
                 {
                     "name": "WithCheckbox",
@@ -469,7 +489,7 @@
                     "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}"
+                    "defaultValue": "{\n    title:'Molecules/ Expense Income Category Detail',\n    component: ExpenseIncomeCategoryDetailComponent,\n    tags: ['autodocs'],\n    args: {\n      amount: 9494,\n      iconProps:{\n        backgroundColor: '#FFC3CD',\n        color: '#ffffff',\n        symbol: 'riding-line'\n      },\n      category:\"Ocio, recreación y snacks\",\n      description:\"Pizza\",\n      variant:\"expense\",\n      whom:\"Rappi\",\n      /*iconProps*/\n      backgroundColor: '#FFC3CD',\n      color: '#ffffff',\n      symbol: 'riding-line',\n    } as any,\n    argTypes: {\n      amount,\n      category,\n      description,\n      iconProps: {\n        control: 'object',\n        description: 'Properties for the rendered icon'\n      },\n      variant,\n      whom,\n      /*icon props */\n      backgroundColor: {...backgroundColor, table: {...backgroundColor.table, category: 'iconProps'}},\n      color: {...color, table: {...color.table, category: 'iconProps'}},\n      symbol: {...symbol, table: {...symbol.table, category: 'iconProps'}}\n    } as any\n}"
                 },
                 {
                     "name": "Template",
@@ -479,7 +499,7 @@
                     "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}"
+                    "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]=\"amount\"\n            [iconProps]=\"{ symbol: symbol, color: color, backgroundColor: backgroundColor }\"\n            [category]=\"category\"\n            [description]=\"description\" \n            [variant]=\"variant\"\n            [whom]=\"whom\"\n        />\n      </div>\n    `,\n  }),\n}"
                 }
             ],
             "projects/my-wallet-ds/src/stories/button.stories.ts": [
@@ -607,7 +627,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "Meta<SvgComponent>",
-                    "defaultValue": "{\n    title: 'Atoms/Svg',\n    component: SvgComponent,\n    tags: ['autodocs'],\n    args: {\n        width: \"24px\",\n        height: \"24px\",\n        color: \"#000000\",\n        symbol: \"stock-line\",\n    },\n    argTypes: {\n        width: {\n            description: 'Icon width with units (px, rem, etc)',\n            table: {defaultValue: {detail: 'Defaults to 24px', summary: '24px'}}\n        },\n        height: {\n            description: 'Icon height with units (px, rem, etc)',\n            table: {defaultValue: {detail: 'Defaults to 24px', summary: '24px'}}\n        },\n        color: {\n            description: 'Icon color',\n            table: {defaultValue: {detail: 'Defaults to black', summary: '#000000'}}\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)'}}\n        }, \n    }\n}"
+                    "defaultValue": "{\n    title: 'Atoms/Svg',\n    component: SvgComponent,\n    tags: ['autodocs'],\n    args: {\n        width: \"24px\",\n        height: \"24px\",\n        color: \"#000000\",\n        symbol: \"stock-line\",\n    },\n    argTypes: {\n        width: {\n            description: 'Icon width with units (px, rem, etc)',\n            table: {defaultValue: {detail: 'Defaults to 24px', summary: '24px'}}\n        },\n        height: {\n            description: 'Icon height with units (px, rem, etc)',\n            table: {defaultValue: {detail: 'Defaults to 24px', summary: '24px'}}\n        },\n        color,\n        symbol, \n    }\n}"
                 },
                 {
                     "name": "Svg",
@@ -630,6 +650,28 @@
                     "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/molecules/expense-income-date-detail.stories.ts": [
+                {
+                    "name": "meta",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-date-detail.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Meta",
+                    "defaultValue": "{\n    title: 'Molecules / Expense income date detail',\n    component: ExpenseIncomeDateDetailComponent,\n    tags: ['autodocs'],\n    args: {\n\n    },\n    argTypes: {\n\n    }\n}"
+                },
+                {
+                    "name": "Template",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/my-wallet-ds/src/stories/molecules/expense-income-date-detail.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "StoryObj<ExpenseIncomeDateDetailComponent>",
+                    "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-date-detail \n            [amount]=\"3854.75\"\n            [description]=\"dateDescription\"\n            [iconProps]=\"dateIconProps\"\n            variant=\"expense\"\n            whom=\"Veterinaria\"\n        />\n      </div>\n    `,\n  }),\n}"
+                }
+            ],
             "projects/my-wallet-ds/src/stories/atoms/typography.stories.ts": [
                 {
                     "name": "Paragraph",
@@ -724,7 +766,7 @@
     },
     "routes": [],
     "coverage": {
-        "count": 3,
+        "count": 2,
         "status": "low",
         "files": [
             {
@@ -1017,6 +1059,26 @@
                 "coverageCount": "0/1",
                 "status": "low"
             },
+            {
+                "filePath": "projects/my-wallet-ds/src/stories/molecules/expense-income-date-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-date-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/page.stories.ts",
                 "type": "variable",

projects/my-wallet-ds/src/lib/molecules/expense-income-date-detail/expense-income-date-detail.component.ts

@@ -13,5 +13,8 @@ import { AbstractExpenseIncomeDetailComponent } from '../abstract-expense-income
   styleUrl: './expense-income-date-detail.component.css'
 })
 export class ExpenseIncomeDateDetailComponent extends AbstractExpenseIncomeDetailComponent{
+  /**
+   * @description Expense/income date
+   */
   date = input(new Date());
 }

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

@@ -0,0 +1,74 @@
+import { Meta, StoryObj } from "@storybook/angular";
+import { ExpenseIncomeDateDetailComponent } from "../../lib/molecules/expense-income-date-detail/expense-income-date-detail.component";
+import { amount, description, iconProps, 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 = {
+    title: 'Molecules / Expense Income Date Detail',
+    component: ExpenseIncomeDateDetailComponent,
+    tags: ['autodocs'],
+    args: {
+        amount: 9494,
+        date: new Date(),
+        description:"Pizza",
+        iconProps:{
+            backgroundColor: '#FFC3CD',
+            color: '#ffffff',
+            symbol: 'riding-line'
+        },
+        variant: 'expense',
+        whom: 'Rappi',
+        /*iconProps */
+        backgroundColor: '#FFC3CD',
+        color: '#ffffff',
+        symbol: 'riding-line',
+    },
+    argTypes: {
+        amount,
+        date: {
+            control: 'date',
+            description: 'Expense/income date',
+            table: {defaultValue: {detail: 'Defaults to new Date()', summary: 'new Date() (current date)'}}
+        },
+        description,
+        iconProps,
+        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'}}
+    }
+}
+
+export default meta;
+
+const Template: StoryObj<ExpenseIncomeDateDetailComponent> = {
+  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-date-detail
+            [amount]="amount"
+            [date]="date"
+            [description]="description"
+            [iconProps]="{backgroundColor, color, symbol}"
+            [variant]="variant"
+            [whom]="whom"
+        />
+      </div>
+    `,
+  }),
+};
+
+
+
+export const Default: StoryObj<ExpenseIncomeDateDetailComponent> = {
+  ...Template,
+};