From 34b9586b65e399b4986a2e36358617242f9b56ea Mon Sep 17 00:00:00 2001
From: Gabriel De Los Rios <gabriel.delosrios@tutamail.com>
Date: Sun, 24 Aug 2025 01:46:46 -0300
Subject: [PATCH] feat:  story for title bar category

---
 .../title-bar-category.component.ts           |  9 ++++
 .../stories/control-constants/title-bar.ts    |  7 +++
 .../molecules/title-bar-category.stories.ts   | 51 +++++++++++++++++++
 3 files changed, 67 insertions(+)
 create mode 100644 projects/my-wallet-ds/src/stories/control-constants/title-bar.ts
 create mode 100644 projects/my-wallet-ds/src/stories/molecules/title-bar-category.stories.ts

diff --git a/projects/my-wallet-ds/src/lib/molecules/title-bar-category/title-bar-category.component.ts b/projects/my-wallet-ds/src/lib/molecules/title-bar-category/title-bar-category.component.ts
index e9ff27f..ee583a9 100644
--- a/projects/my-wallet-ds/src/lib/molecules/title-bar-category/title-bar-category.component.ts
+++ b/projects/my-wallet-ds/src/lib/molecules/title-bar-category/title-bar-category.component.ts
@@ -10,8 +10,17 @@ import { TitleBarBaseMoneyComponent } from "../title-bar-base-money/title-bar-ba
   styleUrl: './title-bar-category.component.css'
 })
 export class TitleBarCategoryComponent {
+  /**
+   * @description Title (group) amount
+   */
   amount = input(0);
+  /**
+   * @description Title (group) category
+   */
   category = input('');
+  /**
+   * @description Max width with it's unit for the category text before ellipsis
+   */
   maxWidth = input('19rem')
   protected amountProps = {
     lineHeight: null,
diff --git a/projects/my-wallet-ds/src/stories/control-constants/title-bar.ts b/projects/my-wallet-ds/src/stories/control-constants/title-bar.ts
new file mode 100644
index 0000000..4d4d484
--- /dev/null
+++ b/projects/my-wallet-ds/src/stories/control-constants/title-bar.ts
@@ -0,0 +1,7 @@
+import { InputType } from "storybook/internal/types";
+
+export const amount: InputType = {
+    control: 'number',
+    description: 'Title (group) amount',
+    table: {defaultValue: {detail: 'Defaults to 0', summary: '0'}},
+}
\ No newline at end of file
diff --git a/projects/my-wallet-ds/src/stories/molecules/title-bar-category.stories.ts b/projects/my-wallet-ds/src/stories/molecules/title-bar-category.stories.ts
new file mode 100644
index 0000000..c3b407e
--- /dev/null
+++ b/projects/my-wallet-ds/src/stories/molecules/title-bar-category.stories.ts
@@ -0,0 +1,51 @@
+import { Meta, StoryObj } from "@storybook/angular";
+import { TitleBarCategoryComponent } from "./../../lib/molecules/title-bar-category/title-bar-category.component";
+import { amount } from "../control-constants/title-bar";
+
+
+const meta: Meta = {
+    title: 'Molecules / Title Bar Category',
+    component: TitleBarCategoryComponent,
+    tags: ['autodocs'],
+    args: {
+        amount: 9494,
+        category: 'Ocio, recreación y snacks',
+        maxWidth: '19rem'
+    },
+    argTypes: {
+        amount,
+        category: {
+            control: 'text',
+            description: 'Title (group) category',
+            table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}},
+        },
+        maxWidth: {
+            control: 'text',
+            description: 'Max width with it\'s unit for the category text before ellipsis',
+            table: {defaultValue: {detail: 'Defaults to 19rem', summary: '19rem'}},
+        }
+    },
+    render: (args) => ({
+        props: args,
+        styles: [
+        `
+            @import url('/assets/styles.css');
+            :host {
+            display: block;
+            height: 40px; 
+            margin: auto; 
+            padding: 0 4px;
+            width: 375px; 
+            }
+        `],
+        template: `
+            <mw-title-bar-category [amount]="amount" [category]="category" [maxWidth]="maxWidth" />
+        `
+    })
+}
+
+export default meta;
+
+export const Default: StoryObj<TitleBarCategoryComponent> = {
+    
+}
\ No newline at end of file