feat: story for money text

projects/my-wallet-ds/documentation.json

@@ -50,6 +50,46 @@
                 "type": "StoryObj<ExpenseIncomeCategoryDetailComponent>",
                 "defaultValue": "{\n  ...Template,\n}"
             },
+            {
+                "name": "Default",
+                "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  ...Template,\n}"
+            },
+            {
+                "name": "Default",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/my-wallet-ds/src/stories/molecules/money-text.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "StoryObj<MoneyTextComponent>",
+                "defaultValue": "{}"
+            },
+            {
+                "name": "Default",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/my-wallet-ds/src/stories/molecules/title-bar-category.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "StoryObj<TitleBarCategoryComponent>",
+                "defaultValue": "{\n    \n}"
+            },
+            {
+                "name": "Default",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/my-wallet-ds/src/stories/molecules/title-bar-date.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "StoryObj<TitleBarDateComponent>",
+                "defaultValue": "{}"
+            },
             {
                 "name": "Large",
                 "ctype": "miscellaneous",
@@ -138,7 +178,7 @@
                 "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}"
+                "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  render: (args) => ({\n    props: {...args, handler: (checked: boolean) => alert(`checked: ${checked}`)},\n    styles: [\n      `\n        @import url('/assets/styles.css');\n        :host {\n          display: flex;\n          justify-content: center;\n        }\n      `\n    ],\n    template: `\n      <mw-checkbox (checked)=\"handler($event)\"/>\n    `,\n  })\n\n}"
             },
             {
                 "name": "meta",
@@ -170,7 +210,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      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}"
+                "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    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 +220,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: '#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}"
+                "defaultValue": "{\n    title:'Molecules/ Expense Income Category Detail',\n    component: ExpenseIncomeCategoryDetailComponent,\n    tags: ['autodocs'],\n    args: {\n      amount: 9494,\n      category:\"Ocio, recreación y snacks\",\n      description:\"Pizza\",\n      iconProps:{\n        backgroundColor: '#FFC3CD',\n        color: '#ffffff',\n        symbol: 'riding-line'\n      },\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      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",
@@ -190,7 +230,37 @@
                 "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}"
+                "defaultValue": "{\n    title: 'Molecules / Expense Income Date Detail',\n    component: ExpenseIncomeDateDetailComponent,\n    tags: ['autodocs'],\n    args: {\n        amount: 9494,\n        date: new Date(),\n        description:\"Pizza\",\n        iconProps:{\n            backgroundColor: '#FFC3CD',\n            color: '#ffffff',\n            symbol: 'riding-line'\n        },\n        variant: 'expense',\n        whom: 'Rappi',\n        /*iconProps */\n        backgroundColor: '#FFC3CD',\n        color: '#ffffff',\n        symbol: 'riding-line',\n    },\n    argTypes: {\n        amount,\n        date: {\n            control: 'date',\n            description: 'Expense/income date',\n            table: {defaultValue: {detail: 'Defaults to new Date()', summary: 'new Date() (current date)'}}\n        },\n        description,\n        iconProps,\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    }\n}"
+            },
+            {
+                "name": "meta",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/my-wallet-ds/src/stories/molecules/money-text.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Meta",
+                "defaultValue": "{\n  title: 'Molecules / Money Text',\n  component: MoneyTextComponent,\n  tags:['autodocs'],\n  args: {\n    amount: 9999,\n    color: '#777777',\n    currencyCode: 'USD',\n    lineHeight: '1.6rem',\n    size: '1.6rem',\n  },\n  argTypes: {\n    amount: {\n      control: 'number',\n      description: 'Money amount',\n      table: {defaultValue: {detail: 'Defaults to 0', summary: '0'}},\n    },\n    color: {\n      description: 'Money amount color',\n      control: {type: 'color'},\n      table: {defaultValue: {detail: 'Defaults to var(--mw-gray-500) (#777777)', summary: '#777777'}}\n    },\n    currencyCode: {\n      control: {type: 'select'},\n      description: 'The ISO 4217 currency code',\n      table: {defaultValue: {detail: 'Defaults to USD', summary: 'USD'}},\n      options: currencyCodes\n    },\n    lineHeight: {\n      description: \"Sets the height of a line box for amount. Can be set to null, if null it will be the same as the font-size.\",\n      control: {\n          type: \"text\"\n      },\n      table: {defaultValue: {summary: \"1.4rem\", detail: \"Defaults to font-size\"}}\n    },\n    size: {\n      description: \"Amount font size with it's units\",\n      table: {defaultValue: {summary: \"1.4rem\", detail: \"Defaults to 1.6rem\"}},\n    },\n  },\n  render: (args) => ({\n    props: args,\n    styles: [\n    `\n       @import url('/assets/styles.css');\n       :host {\n         display: block;\n         height: 40px;\n         margin: auto;\n         padding: 0 4px;\n         width: 375px;\n       }\n    `],\n     template: `\n     <mw-money-text \n        [amount]=\"amount\"\n        [color]=\"color\"\n        [currencyCode]=\"currencyCode\"\n        [lineHeight]=\"lineHeight\"\n        [size]=\"size\"\n     />`\n  })\n}"
+            },
+            {
+                "name": "meta",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/my-wallet-ds/src/stories/molecules/title-bar-category.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Meta",
+                "defaultValue": "{\n    title: 'Molecules / Title Bar Category',\n    component: TitleBarCategoryComponent,\n    tags: ['autodocs'],\n    args: {\n        amount: 9494,\n        category: 'Ocio, recreación y snacks',\n        maxWidth: '19rem'\n    },\n    argTypes: {\n        amount,\n        category: {\n            control: 'text',\n            description: 'Title (group) category',\n            table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},\n        },\n        maxWidth: {\n            control: 'text',\n            description: 'Max width with it\\'s unit for the category text before ellipsis',\n            table: {defaultValue: {detail: 'Defaults to 19rem', summary: '19rem'}},\n        }\n    },\n    render: (args) => ({\n        props: args,\n        styles: [\n        `\n            @import url('/assets/styles.css');\n            :host {\n            display: block;\n            height: 40px; \n            margin: auto; \n            padding: 0 4px;\n            width: 375px; \n            }\n        `],\n        template: `\n            <mw-title-bar-category [amount]=\"amount\" [category]=\"category\" [maxWidth]=\"maxWidth\" />\n        `\n    })\n}"
+            },
+            {
+                "name": "meta",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/my-wallet-ds/src/stories/molecules/title-bar-date.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Meta",
+                "defaultValue": "{\n  title: 'Molecules / Title Bar Date',\n  component: TitleBarDateComponent,\n  tags:['autodocs'],\n  args: {\n    amount: 15000,\n    date: new Date(),\n  },\n  argTypes: {\n    amount,\n    date: {\n        control: 'date',\n        description: 'Title (group) date',\n        table: {defaultValue: {detail: 'Defaults to new Date()', summary: 'new Date() (current date)'}}\n    }\n  },\n  render: (args) => ({\n\n    props: args,\n    styles: [\n    `\n       @import url('/assets/styles.css');\n       :host {\n         display: block;\n         height: 40px;\n         margin: auto;\n         padding: 0 4px;\n         width: 375px;\n       }\n    `]\n  })\n}"
             },
             {
                 "name": "Paragraph",
@@ -260,7 +330,7 @@
                 "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})"
+                "defaultValue": "(args: { width: string, height: string, color: string, symbol: string,}) => ({\n  props: args,\n  styles: `\n    :host {\n        display:flex; \n        justify-content: center;\n    }\n  `,\n  template: `\n    <mw-svg\n        [width]=\"width\"\n        [height]=\"height\"\n        [color]=\"color\"\n        [symbol]=\"symbol\"\n    />\n  `\n})"
             },
             {
                 "name": "Template",
@@ -270,7 +340,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args: {variant: TypographyVariants, ellipsis: boolean, letterSpacing: string, lineHeight: null|string, size: string, color: string, maxWidth: null|string}) => ({\n  props: args,\n  template: `\n  <mw-typography \n    [variant]=\"${args.variant}\"\n    [ellipsis]=\"${args.ellipsis}\" \n    color=\"${args.color}\"\n    letterSpacing=\"${args.letterSpacing}\"\n    lineHeight=\"${args.lineHeight}\"\n    maxWidth=\"${args.maxWidth}\"\n    size=\"${args.size}\"\n    >Texto</mw-typography>`,\n})"
+                "defaultValue": "(args: {variant: TypographyVariants, ellipsis: boolean, letterSpacing: string, lineHeight: null|string, size: string, color: string, maxWidth: null|string}) => ({\n  props: args,\n  styles: [\n    `\n    @import url('/assets/styles.css');\n    :host {\n        display: flex;\n        justify-content: center;\n    }\n    `\n  ],\n  template: `\n  <mw-typography \n    [variant]=\"variant\"\n    [ellipsis]=\"ellipsis\" \n    [color]=\"color\"\n    [letterSpacing]=\"letterSpacing\"\n    [lineHeight]=\"lineHeight\"\n    [maxWidth]=\"maxWidth\"\n    [size]=\"size\"\n  >Texto</mw-typography>`,\n})"
             },
             {
                 "name": "Template",
@@ -290,7 +360,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, color, 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        :host {\n          display: block;\n          height: 40px; \n          margin: auto; \n          padding: 0 4px;\n          width: 375px; \n        }\n      `\n    ],\n    template: `\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    `,\n  }),\n}"
             },
             {
                 "name": "Template",
@@ -300,7 +370,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]=\"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}"
+                "defaultValue": "{\n  render: (args) => ({\n    props: args,\n    styles: [\n      `\n        @import url('/assets/styles.css');\n        :host {\n          display: block;\n          height: 40px; \n          margin: auto; \n          padding: 0 4px;\n          width: 375px; \n        }\n      `\n    ],\n    template: `\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    `,\n  }),\n}"
             },
             {
                 "name": "Template",
@@ -310,7 +380,7 @@
                 "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}"
+                "defaultValue": "{\n  render: (args) => ({\n    props: args,\n    styles: [\n      `\n        @import url('/assets/styles.css');\n        :host {\n          display: block;\n          height: 40px; \n          margin: auto; \n          padding: 0 4px;\n          width: 375px; \n        }\n      `\n    ],\n    template: `\n        <mw-expense-income-date-detail\n            [amount]=\"amount\"\n            [date]=\"date\"\n            [description]=\"description\"\n            [iconProps]=\"{backgroundColor, color, symbol}\"\n            [variant]=\"variant\"\n            [whom]=\"whom\"\n        />\n    `,\n  }),\n}"
             },
             {
                 "name": "WithCheckbox",
@@ -391,7 +461,7 @@
                     "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}"
+                    "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  render: (args) => ({\n    props: {...args, handler: (checked: boolean) => alert(`checked: ${checked}`)},\n    styles: [\n      `\n        @import url('/assets/styles.css');\n        :host {\n          display: flex;\n          justify-content: center;\n        }\n      `\n    ],\n    template: `\n      <mw-checkbox (checked)=\"handler($event)\"/>\n    `,\n  })\n\n}"
                 }
             ],
             "projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts": [
@@ -447,7 +517,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      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}"
+                    "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    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",
@@ -457,7 +527,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, color, 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        :host {\n          display: block;\n          height: 40px; \n          margin: auto; \n          padding: 0 4px;\n          width: 375px; \n        }\n      `\n    ],\n    template: `\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    `,\n  }),\n}"
                 },
                 {
                     "name": "WithCheckbox",
@@ -489,7 +559,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: '#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}"
+                    "defaultValue": "{\n    title:'Molecules/ Expense Income Category Detail',\n    component: ExpenseIncomeCategoryDetailComponent,\n    tags: ['autodocs'],\n    args: {\n      amount: 9494,\n      category:\"Ocio, recreación y snacks\",\n      description:\"Pizza\",\n      iconProps:{\n        backgroundColor: '#FFC3CD',\n        color: '#ffffff',\n        symbol: 'riding-line'\n      },\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      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",
@@ -499,7 +569,105 @@
                     "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]=\"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}"
+                    "defaultValue": "{\n  render: (args) => ({\n    props: args,\n    styles: [\n      `\n        @import url('/assets/styles.css');\n        :host {\n          display: block;\n          height: 40px; \n          margin: auto; \n          padding: 0 4px;\n          width: 375px; \n        }\n      `\n    ],\n    template: `\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    `,\n  }),\n}"
+                }
+            ],
+            "projects/my-wallet-ds/src/stories/molecules/expense-income-date-detail.stories.ts": [
+                {
+                    "name": "Default",
+                    "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  ...Template,\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        amount: 9494,\n        date: new Date(),\n        description:\"Pizza\",\n        iconProps:{\n            backgroundColor: '#FFC3CD',\n            color: '#ffffff',\n            symbol: 'riding-line'\n        },\n        variant: 'expense',\n        whom: 'Rappi',\n        /*iconProps */\n        backgroundColor: '#FFC3CD',\n        color: '#ffffff',\n        symbol: 'riding-line',\n    },\n    argTypes: {\n        amount,\n        date: {\n            control: 'date',\n            description: 'Expense/income date',\n            table: {defaultValue: {detail: 'Defaults to new Date()', summary: 'new Date() (current date)'}}\n        },\n        description,\n        iconProps,\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    }\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        :host {\n          display: block;\n          height: 40px; \n          margin: auto; \n          padding: 0 4px;\n          width: 375px; \n        }\n      `\n    ],\n    template: `\n        <mw-expense-income-date-detail\n            [amount]=\"amount\"\n            [date]=\"date\"\n            [description]=\"description\"\n            [iconProps]=\"{backgroundColor, color, symbol}\"\n            [variant]=\"variant\"\n            [whom]=\"whom\"\n        />\n    `,\n  }),\n}"
+                }
+            ],
+            "projects/my-wallet-ds/src/stories/molecules/money-text.stories.ts": [
+                {
+                    "name": "Default",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/my-wallet-ds/src/stories/molecules/money-text.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "StoryObj<MoneyTextComponent>",
+                    "defaultValue": "{}"
+                },
+                {
+                    "name": "meta",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/my-wallet-ds/src/stories/molecules/money-text.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Meta",
+                    "defaultValue": "{\n  title: 'Molecules / Money Text',\n  component: MoneyTextComponent,\n  tags:['autodocs'],\n  args: {\n    amount: 9999,\n    color: '#777777',\n    currencyCode: 'USD',\n    lineHeight: '1.6rem',\n    size: '1.6rem',\n  },\n  argTypes: {\n    amount: {\n      control: 'number',\n      description: 'Money amount',\n      table: {defaultValue: {detail: 'Defaults to 0', summary: '0'}},\n    },\n    color: {\n      description: 'Money amount color',\n      control: {type: 'color'},\n      table: {defaultValue: {detail: 'Defaults to var(--mw-gray-500) (#777777)', summary: '#777777'}}\n    },\n    currencyCode: {\n      control: {type: 'select'},\n      description: 'The ISO 4217 currency code',\n      table: {defaultValue: {detail: 'Defaults to USD', summary: 'USD'}},\n      options: currencyCodes\n    },\n    lineHeight: {\n      description: \"Sets the height of a line box for amount. Can be set to null, if null it will be the same as the font-size.\",\n      control: {\n          type: \"text\"\n      },\n      table: {defaultValue: {summary: \"1.4rem\", detail: \"Defaults to font-size\"}}\n    },\n    size: {\n      description: \"Amount font size with it's units\",\n      table: {defaultValue: {summary: \"1.4rem\", detail: \"Defaults to 1.6rem\"}},\n    },\n  },\n  render: (args) => ({\n    props: args,\n    styles: [\n    `\n       @import url('/assets/styles.css');\n       :host {\n         display: block;\n         height: 40px;\n         margin: auto;\n         padding: 0 4px;\n         width: 375px;\n       }\n    `],\n     template: `\n     <mw-money-text \n        [amount]=\"amount\"\n        [color]=\"color\"\n        [currencyCode]=\"currencyCode\"\n        [lineHeight]=\"lineHeight\"\n        [size]=\"size\"\n     />`\n  })\n}"
+                }
+            ],
+            "projects/my-wallet-ds/src/stories/molecules/title-bar-category.stories.ts": [
+                {
+                    "name": "Default",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/my-wallet-ds/src/stories/molecules/title-bar-category.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "StoryObj<TitleBarCategoryComponent>",
+                    "defaultValue": "{\n    \n}"
+                },
+                {
+                    "name": "meta",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/my-wallet-ds/src/stories/molecules/title-bar-category.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Meta",
+                    "defaultValue": "{\n    title: 'Molecules / Title Bar Category',\n    component: TitleBarCategoryComponent,\n    tags: ['autodocs'],\n    args: {\n        amount: 9494,\n        category: 'Ocio, recreación y snacks',\n        maxWidth: '19rem'\n    },\n    argTypes: {\n        amount,\n        category: {\n            control: 'text',\n            description: 'Title (group) category',\n            table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},\n        },\n        maxWidth: {\n            control: 'text',\n            description: 'Max width with it\\'s unit for the category text before ellipsis',\n            table: {defaultValue: {detail: 'Defaults to 19rem', summary: '19rem'}},\n        }\n    },\n    render: (args) => ({\n        props: args,\n        styles: [\n        `\n            @import url('/assets/styles.css');\n            :host {\n            display: block;\n            height: 40px; \n            margin: auto; \n            padding: 0 4px;\n            width: 375px; \n            }\n        `],\n        template: `\n            <mw-title-bar-category [amount]=\"amount\" [category]=\"category\" [maxWidth]=\"maxWidth\" />\n        `\n    })\n}"
+                }
+            ],
+            "projects/my-wallet-ds/src/stories/molecules/title-bar-date.stories.ts": [
+                {
+                    "name": "Default",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/my-wallet-ds/src/stories/molecules/title-bar-date.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "StoryObj<TitleBarDateComponent>",
+                    "defaultValue": "{}"
+                },
+                {
+                    "name": "meta",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/my-wallet-ds/src/stories/molecules/title-bar-date.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Meta",
+                    "defaultValue": "{\n  title: 'Molecules / Title Bar Date',\n  component: TitleBarDateComponent,\n  tags:['autodocs'],\n  args: {\n    amount: 15000,\n    date: new Date(),\n  },\n  argTypes: {\n    amount,\n    date: {\n        control: 'date',\n        description: 'Title (group) date',\n        table: {defaultValue: {detail: 'Defaults to new Date()', summary: 'new Date() (current date)'}}\n    }\n  },\n  render: (args) => ({\n\n    props: args,\n    styles: [\n    `\n       @import url('/assets/styles.css');\n       :host {\n         display: block;\n         height: 40px;\n         margin: auto;\n         padding: 0 4px;\n         width: 375px;\n       }\n    `]\n  })\n}"
                 }
             ],
             "projects/my-wallet-ds/src/stories/button.stories.ts": [
@@ -647,29 +815,7 @@
                     "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})"
+                    "defaultValue": "(args: { width: string, height: string, color: string, symbol: string,}) => ({\n  props: args,\n  styles: `\n    :host {\n        display:flex; \n        justify-content: center;\n    }\n  `,\n  template: `\n    <mw-svg\n        [width]=\"width\"\n        [height]=\"height\"\n        [color]=\"color\"\n        [symbol]=\"symbol\"\n    />\n  `\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": [
@@ -691,7 +837,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args: {variant: TypographyVariants, ellipsis: boolean, letterSpacing: string, lineHeight: null|string, size: string, color: string, maxWidth: null|string}) => ({\n  props: args,\n  template: `\n  <mw-typography \n    [variant]=\"${args.variant}\"\n    [ellipsis]=\"${args.ellipsis}\" \n    color=\"${args.color}\"\n    letterSpacing=\"${args.letterSpacing}\"\n    lineHeight=\"${args.lineHeight}\"\n    maxWidth=\"${args.maxWidth}\"\n    size=\"${args.size}\"\n    >Texto</mw-typography>`,\n})"
+                    "defaultValue": "(args: {variant: TypographyVariants, ellipsis: boolean, letterSpacing: string, lineHeight: null|string, size: string, color: string, maxWidth: null|string}) => ({\n  props: args,\n  styles: [\n    `\n    @import url('/assets/styles.css');\n    :host {\n        display: flex;\n        justify-content: center;\n    }\n    `\n  ],\n  template: `\n  <mw-typography \n    [variant]=\"variant\"\n    [ellipsis]=\"ellipsis\" \n    [color]=\"color\"\n    [letterSpacing]=\"letterSpacing\"\n    [lineHeight]=\"lineHeight\"\n    [maxWidth]=\"maxWidth\"\n    [size]=\"size\"\n  >Texto</mw-typography>`,\n})"
                 }
             ],
             "projects/my-wallet-ds/.storybook/preview.ts": [
@@ -1059,6 +1205,16 @@
                 "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": "Default",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
             {
                 "filePath": "projects/my-wallet-ds/src/stories/molecules/expense-income-date-detail.stories.ts",
                 "type": "variable",
@@ -1079,6 +1235,66 @@
                 "coverageCount": "0/1",
                 "status": "low"
             },
+            {
+                "filePath": "projects/my-wallet-ds/src/stories/molecules/money-text.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Default",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/my-wallet-ds/src/stories/molecules/money-text.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/title-bar-category.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Default",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/my-wallet-ds/src/stories/molecules/title-bar-category.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/title-bar-date.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Default",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/my-wallet-ds/src/stories/molecules/title-bar-date.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "meta",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
             {
                 "filePath": "projects/my-wallet-ds/src/stories/page.stories.ts",
                 "type": "variable",

projects/my-wallet-ds/src/stories/control-constants/currencyCodes.ts

@@ -0,0 +1,181 @@
+export const currencyCodes = [
+  "AED",
+  "AFN",
+  "ALL",
+  "AMD",
+  "AOA",
+  "ARS",
+  "AUD",
+  "AWG",
+  "AZN",
+  "BAM",
+  "BBD",
+  "BDT",
+  "BGN",
+  "BHD",
+  "BIF",
+  "BMD",
+  "BND",
+  "BOB",
+  "BOV",
+  "BRL",
+  "BSD",
+  "BTN",
+  "BWP",
+  "BYN",
+  "BZD",
+  "CAD",
+  "CDF",
+  "CHE",
+  "CHF",
+  "CHW",
+  "CLF",
+  "CLP",
+  "CNY",
+  "COP",
+  "COU",
+  "CRC",
+  "CUP",
+  "CVE",
+  "CZK",
+  "DJF",
+  "DKK",
+  "DOP",
+  "DZD",
+  "EGP",
+  "ERN",
+  "ETB",
+  "EUR",
+  "FJD",
+  "FKP",
+  "GBP",
+  "GEL",
+  "GHS",
+  "GIP",
+  "GMD",
+  "GNF",
+  "GTQ",
+  "GYD",
+  "HKD",
+  "HNL",
+  "HTG",
+  "HUF",
+  "IDR",
+  "ILS",
+  "INR",
+  "IQD",
+  "IRR",
+  "ISK",
+  "JMD",
+  "JOD",
+  "JPY",
+  "KES",
+  "KGS",
+  "KHR",
+  "KMF",
+  "KPW",
+  "KRW",
+  "KWD",
+  "KYD",
+  "KZT",
+  "LAK",
+  "LBP",
+  "LKR",
+  "LRD",
+  "LSL",
+  "LYD",
+  "MAD",
+  "MDL",
+  "MGA",
+  "MKD",
+  "MMK",
+  "MNT",
+  "MOP",
+  "MRU",
+  "MUR",
+  "MVR",
+  "MWK",
+  "MXN",
+  "MXV",
+  "MYR",
+  "MZN",
+  "NAD",
+  "NGN",
+  "NIO",
+  "NOK",
+  "NPR",
+  "NZD",
+  "OMR",
+  "PAB",
+  "PEN",
+  "PGK",
+  "PHP",
+  "PKR",
+  "PLN",
+  "PYG",
+  "QAR",
+  "RON",
+  "RSD",
+  "RUB",
+  "RWF",
+  "SAR",
+  "SBD",
+  "SCR",
+  "SDG",
+  "SEK",
+  "SGD",
+  "SHP",
+  "SLE",
+  "SOS",
+  "SRD",
+  "SSP",
+  "STN",
+  "SVC",
+  "SYP",
+  "SZL",
+  "THB",
+  "TJS",
+  "TMT",
+  "TND",
+  "TOP",
+  "TRY",
+  "TTD",
+  "TWD",
+  "TZS",
+  "UAH",
+  "UGX",
+  "USD",
+  "USN",
+  "UYI",
+  "UYU",
+  "UYW",
+  "UZS",
+  "VED",
+  "VES",
+  "VND",
+  "VUV",
+  "WST",
+  "XAD",
+  "XAF",
+  "XAG",
+  "XAU",
+  "XBA",
+  "XBB",
+  "XBC",
+  "XBD",
+  "XCD",
+  "XCG",
+  "XDR",
+  "XOF",
+  "XPD",
+  "XPF",
+  "XPT",
+  "XSU",
+  "XTS",
+  "XUA",
+  "XXX",
+  "YER",
+  "ZAR",
+  "ZMW",
+  "ZWG"
+]

projects/my-wallet-ds/src/stories/molecules/money-text.stories.ts

@@ -0,0 +1,71 @@
+import { Meta, StoryObj } from "@storybook/angular";
+import { MoneyTextComponent } from "../../public-api";
+import { currencyCodes } from "../control-constants/currencyCodes";
+
+const meta: Meta = {
+  title: 'Molecules / Money Text',
+  component: MoneyTextComponent,
+  tags:['autodocs'],
+  args: {
+    amount: 9999,
+    color: '#777777',
+    currencyCode: 'USD',
+    lineHeight: '1.6rem',
+    size: '1.6rem',
+  },
+  argTypes: {
+    amount: {
+      control: 'number',
+      description: 'Money amount',
+      table: {defaultValue: {detail: 'Defaults to 0', summary: '0'}},
+    },
+    color: {
+      description: 'Money amount color',
+      control: {type: 'color'},
+      table: {defaultValue: {detail: 'Defaults to var(--mw-gray-500) (#777777)', summary: '#777777'}}
+    },
+    currencyCode: {
+      control: {type: 'select'},
+      description: 'The ISO 4217 currency code',
+      table: {defaultValue: {detail: 'Defaults to USD', summary: 'USD'}},
+      options: currencyCodes
+    },
+    lineHeight: {
+      description: "Sets the height of a line box for amount. Can be set to null, if null it will be the same as the font-size.",
+      control: {
+          type: "text"
+      },
+      table: {defaultValue: {summary: "1.6rem", detail: "Defaults to font-size"}}
+    },
+    size: {
+      description: "Amount font size with it's units",
+      table: {defaultValue: {summary: "1.6rem", detail: "Defaults to 1.6rem"}},
+    },
+  },
+  render: (args) => ({
+    props: args,
+    styles: [
+    `
+       @import url('/assets/styles.css');
+       :host {
+         display: block;
+         height: 40px;
+         margin: auto;
+         padding: 0 4px;
+         width: 375px;
+       }
+    `],
+     template: `
+     <mw-money-text 
+        [amount]="amount"
+        [color]="color"
+        [currencyCode]="currencyCode"
+        [lineHeight]="lineHeight"
+        [size]="size"
+     />`
+  })
+}
+
+export default meta;
+
+export const Default: StoryObj<MoneyTextComponent> = {};