feat: story for money text
This commit is contained in:
@@ -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})"
|
||||
}
|
||||
],
|
||||
"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}"
|
||||
"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/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",
|
||||
|
||||
@@ -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"
|
||||
]
|
||||
@@ -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> = {};
|
||||
Reference in New Issue
Block a user