my-wallet/my-wallet-ds
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: my-wallet:d1a4f9decef3fcf65cd5fce8f938e19dbc73895f
Branches Tags
my-wallet:master
...
compare: my-wallet:master
Branches Tags
my-wallet:master

3 Commits
d1a4f9dece ... master

Author SHA1 Message Date
Gabriel De Los Rios
c1add7231e fix: typography component import path 2025-10-11 18:56:46 -03:00
Gabriel De Los Rios
be4fcc7f1e refactor: update storybook docs 2025-10-11 18:55:36 -03:00
Gabriel De Los Rios
577e02c127 refactor: update icon, fix path 2025-10-11 18:55:02 -03:00
4 changed files with 105 additions and 14 deletions
Expand all files Collapse all files

112
projects/my-wallet-ds/documentation.json
View File

@@ -90,6 +90,16 @@
"type": "StoryObj<TitleBarDateComponent>",
"defaultValue": "{}"
},
{
"name": "Img",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/atoms/img.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "",
"defaultValue": "Template.bind({})"
},
{
"name": "Large",
"ctype": "miscellaneous",
@@ -180,6 +190,16 @@
"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 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",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/atoms/img.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "Meta<ImgComponent>",
"defaultValue": "{\n title: 'Atoms/Img',\n component: ImgComponent,\n tags: ['autodocs'],\n args: {\n alt: 'Alt text',\n hasPriority: false,\n height: 36,\n src: '/assets/icons/blank.png',\n width: 36 \n },\n argTypes: {\n alt: {\n description: 'An alternative text description of the image',\n type: 'string',\n table: {defaultValue: {detail: 'Defaults to \\'img\\'.', summary: 'img'}}\n },\n hasPriority: {\n description: 'Indicates whether this image should have a high priority.',\n table: {defaultValue: {detail: 'Defaults to false.', summary: 'false'}},\n type: 'boolean',\n },\n height: {\n description: 'The intrinsic height of the image in pixels',\n table: {defaultValue: {detail: 'Defaults to 36px.', summary: '36',}},\n type: 'number',\n },\n src: {\n control: 'select',\n description: 'The path to the png asset',\n options: pngIconsList,\n table: {defaultValue: {detail:'Defaults to transparent png', summary:'/assets/icons/blank.png'}},\n type: 'string',\n },\n width: {\n description: 'The intrinsic width of the image in pixels.',\n table: {defaultValue: {detail: 'Defaults to 36px.', summary: '36',}},\n type: 'number'\n }\n\n }\n}"
},
{
"name": "meta",
"ctype": "miscellaneous",
@@ -198,7 +218,7 @@
"deprecated": false,
"deprecationMessage": "",
"type": "Meta<CircledIconComponent>",
"defaultValue": "{\n title: 'Molecules/Circled Icon',\n component: CircledIconComponent,\n tags: ['autodocs'],\n args: {\n backgroundColor: '#c0c0c0',\n color: '#000000',\n symbol: 'stock-line',\n },\n argTypes: {\n backgroundColor,\n color,\n symbol\n },\n}",
"defaultValue": "{\n title: 'Molecules/Circled Icon',\n component: CircledIconComponent,\n tags: ['autodocs'],\n args: {\n backgroundColor: '#c0c0c0',\n iconPath: '/assets/icons/caticon0.png',\n },\n argTypes: {\n backgroundColor,\n iconPath: {\n control: 'select',\n options: pngIconsList,\n description: 'The path to the icon png',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}}\n }\n },\n}",
"rawdescription": "\n**Sizing**: the circled icon takes all space available in it's parent component",
"description": "<p><strong>Sizing</strong>: the circled icon takes all space available in it&#39;s parent component</p>\n"
},
@@ -210,7 +230,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 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 pngPath: '/assets/icons/caticon0.png'\n },\n /*iconProps */\n pngPath: '/assets/icons/caticon0.png',\n backgroundColor: '#f5ea42',\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",
@@ -240,7 +260,7 @@
"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}"
"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.6rem\", detail: \"Defaults to font-size\"}}\n },\n size: {\n description: \"Amount font size with it's units\",\n table: {defaultValue: {summary: \"1.6rem\", 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",
@@ -322,6 +342,16 @@
"type": "",
"defaultValue": "Template.bind({})"
},
{
"name": "Template",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/atoms/img.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "",
"defaultValue": "(args: { alt: string, hasPriority: boolean, height: number, src: string, width: number}) => ({\n props: args,\n styles: `\n :host {\n display:flex; \n justify-content: center;\n background-color:#000;\n padding: 20px 0;\n }\n `,\n template: `\n <mw-img\n [alt]='alt'\n [hasPriority]='hasPriority'\n [height]='height'\n [src]='src'\n [width]='width'\n />\n `\n})"
},
{
"name": "Template",
"ctype": "miscellaneous",
@@ -350,7 +380,7 @@
"deprecated": false,
"deprecationMessage": "",
"type": "",
"defaultValue": "(args: {backgroundColor: string, color: string, symbol: string}) => ({\n props: args,\n template: `\n <div style=\"width: 36px; height: 36px; margin: auto;\">\n <mw-circled-icon\n backgroundColor=\"${args.backgroundColor}\"\n color=\"${args.color}\"\n symbol=\"${args.symbol}\"\n ></mw-circled-icon>\n </div>\n `\n})"
"defaultValue": "(args: {backgroundColor: string, color: string, iconPath: string}) => ({\n props: args,\n template: `\n <div style=\"width: 48px; height: 48px; margin: auto;\">\n <mw-circled-icon\n backgroundColor=\"${args.backgroundColor}\"\n color=\"${args.color}\"\n iconPath=\"${args.iconPath}\"\n ></mw-circled-icon>\n </div>\n `\n})"
},
{
"name": "Template",
@@ -360,7 +390,7 @@
"deprecated": false,
"deprecationMessage": "",
"type": "StoryObj<ExpenseIncomeCategoryByAccountDetailComponent>",
"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}"
"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]=\"{ pngPath, color, backgroundColor }\"\n [category]=\"category\"\n [description]=\"description\"\n [showCheckbox]=\"showCheckbox\"\n [variant]=\"variant\"\n [whom]=\"whom\"\n />\n `,\n }),\n}"
},
{
"name": "Template",
@@ -483,7 +513,7 @@
"deprecated": false,
"deprecationMessage": "",
"type": "Meta<CircledIconComponent>",
"defaultValue": "{\n title: 'Molecules/Circled Icon',\n component: CircledIconComponent,\n tags: ['autodocs'],\n args: {\n backgroundColor: '#c0c0c0',\n color: '#000000',\n symbol: 'stock-line',\n },\n argTypes: {\n backgroundColor,\n color,\n symbol\n },\n}",
"defaultValue": "{\n title: 'Molecules/Circled Icon',\n component: CircledIconComponent,\n tags: ['autodocs'],\n args: {\n backgroundColor: '#c0c0c0',\n iconPath: '/assets/icons/caticon0.png',\n },\n argTypes: {\n backgroundColor,\n iconPath: {\n control: 'select',\n options: pngIconsList,\n description: 'The path to the icon png',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}}\n }\n },\n}",
"rawdescription": "\n**Sizing**: the circled icon takes all space available in it's parent component",
"description": "<p><strong>Sizing</strong>: the circled icon takes all space available in it&#39;s parent component</p>\n"
},
@@ -495,7 +525,7 @@
"deprecated": false,
"deprecationMessage": "",
"type": "",
"defaultValue": "(args: {backgroundColor: string, color: string, symbol: string}) => ({\n props: args,\n template: `\n <div style=\"width: 36px; height: 36px; margin: auto;\">\n <mw-circled-icon\n backgroundColor=\"${args.backgroundColor}\"\n color=\"${args.color}\"\n symbol=\"${args.symbol}\"\n ></mw-circled-icon>\n </div>\n `\n})"
"defaultValue": "(args: {backgroundColor: string, color: string, iconPath: string}) => ({\n props: args,\n template: `\n <div style=\"width: 48px; height: 48px; margin: auto;\">\n <mw-circled-icon\n backgroundColor=\"${args.backgroundColor}\"\n color=\"${args.color}\"\n iconPath=\"${args.iconPath}\"\n ></mw-circled-icon>\n </div>\n `\n})"
}
],
"projects/my-wallet-ds/src/stories/molecules/expense-income-category-by-account-detail.stories.ts": [
@@ -517,7 +547,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 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 pngPath: '/assets/icons/caticon0.png'\n },\n /*iconProps */\n pngPath: '/assets/icons/caticon0.png',\n backgroundColor: '#f5ea42',\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",
@@ -527,7 +557,7 @@
"deprecated": false,
"deprecationMessage": "",
"type": "StoryObj<ExpenseIncomeCategoryByAccountDetailComponent>",
"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}"
"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]=\"{ pngPath, color, backgroundColor }\"\n [category]=\"category\"\n [description]=\"description\"\n [showCheckbox]=\"showCheckbox\"\n [variant]=\"variant\"\n [whom]=\"whom\"\n />\n `,\n }),\n}"
},
{
"name": "WithCheckbox",
@@ -623,7 +653,7 @@
"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}"
"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.6rem\", detail: \"Defaults to font-size\"}}\n },\n size: {\n description: \"Amount font size with it's units\",\n table: {defaultValue: {summary: \"1.6rem\", 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": [
@@ -670,6 +700,38 @@
"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/atoms/img.stories.ts": [
{
"name": "Img",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/atoms/img.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "",
"defaultValue": "Template.bind({})"
},
{
"name": "meta",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/atoms/img.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "Meta<ImgComponent>",
"defaultValue": "{\n title: 'Atoms/Img',\n component: ImgComponent,\n tags: ['autodocs'],\n args: {\n alt: 'Alt text',\n hasPriority: false,\n height: 36,\n src: '/assets/icons/blank.png',\n width: 36 \n },\n argTypes: {\n alt: {\n description: 'An alternative text description of the image',\n type: 'string',\n table: {defaultValue: {detail: 'Defaults to \\'img\\'.', summary: 'img'}}\n },\n hasPriority: {\n description: 'Indicates whether this image should have a high priority.',\n table: {defaultValue: {detail: 'Defaults to false.', summary: 'false'}},\n type: 'boolean',\n },\n height: {\n description: 'The intrinsic height of the image in pixels',\n table: {defaultValue: {detail: 'Defaults to 36px.', summary: '36',}},\n type: 'number',\n },\n src: {\n control: 'select',\n description: 'The path to the png asset',\n options: pngIconsList,\n table: {defaultValue: {detail:'Defaults to transparent png', summary:'/assets/icons/blank.png'}},\n type: 'string',\n },\n width: {\n description: 'The intrinsic width of the image in pixels.',\n table: {defaultValue: {detail: 'Defaults to 36px.', summary: '36',}},\n type: 'number'\n }\n\n }\n}"
},
{
"name": "Template",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "projects/my-wallet-ds/src/stories/atoms/img.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "",
"defaultValue": "(args: { alt: string, hasPriority: boolean, height: number, src: string, width: number}) => ({\n props: args,\n styles: `\n :host {\n display:flex; \n justify-content: center;\n background-color:#000;\n padding: 20px 0;\n }\n `,\n template: `\n <mw-img\n [alt]='alt'\n [hasPriority]='hasPriority'\n [height]='height'\n [src]='src'\n [width]='width'\n />\n `\n})"
}
],
"projects/my-wallet-ds/src/stories/button.stories.ts": [
{
"name": "Large",
@@ -955,6 +1017,36 @@
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/atoms/img.stories.ts",
"type": "variable",
"linktype": "miscellaneous",
"linksubtype": "variable",
"name": "Img",
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/atoms/img.stories.ts",
"type": "variable",
"linktype": "miscellaneous",
"linksubtype": "variable",
"name": "meta",
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/atoms/img.stories.ts",
"type": "variable",
"linktype": "miscellaneous",
"linksubtype": "variable",
"name": "Template",
"coveragePercent": 0,
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "projects/my-wallet-ds/src/stories/atoms/svg.stories.ts",
"type": "variable",

3
projects/my-wallet-ds/src/lib/molecules/expense-income-base-detail/expense-income-base-detail.component.html
View File

@@ -1,9 +1,8 @@
<div class="detail">
<div class="icon">
<mw-circled-icon
[symbol]="iconProps().symbol"
[iconPath]="iconProps().symbol"
[backgroundColor]="iconProps().backgroundColor"
[color]="iconProps().color"
></mw-circled-icon>
</div>
<div>

2
projects/my-wallet-ds/src/lib/molecules/expense-income-base-detail/expense-income-base-detail.component.ts
View File

@@ -1,6 +1,6 @@
import { Component, input } from '@angular/core';
import { CircledIconComponent } from "../circled-icon/circled-icon.component";
import { MoneyTextComponent } from "../../../../../../dist/my-wallet-ds";
import { MoneyTextComponent } from '../money-text/money-text.component';
@Component({
selector: 'mw-expense-income-base-detail',

2
projects/my-wallet-ds/src/lib/molecules/expense-income-category-detail/expense-income-category-detail.component.ts
View File

@@ -1,6 +1,6 @@
import { Component, input } from '@angular/core';
import { ExpenseIncomeBaseDetailComponent } from "../expense-income-base-detail/expense-income-base-detail.component";
import { TypographyComponent } from "../../../../../../dist/my-wallet-ds";
import { TypographyComponent } from '../../atoms';
import { ExpenseIcomeDetailBoxComponent } from "../../atoms/expense-icome-detail-box/expense-icome-detail-box.component";
import { AbstractExpenseIncomeDetailComponent } from '../abstract-expense-income-detail/abstract-expense-income-detail.component';