feat: story for title bar category

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,

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'}},
+}

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> = {
+    
+}