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: `
+
+ `
+ })
+}
+
+export default meta;
+
+export const Default: StoryObj = {
+
+}
\ No newline at end of file