From 65b37c4cb0f2e92ad78390993711ce767a9b639f Mon Sep 17 00:00:00 2001 From: Gabriel De Los Rios Date: Fri, 22 Aug 2025 21:11:25 -0300 Subject: [PATCH] feat: add sb documentation for circled icon component --- projects/my-wallet-ds/documentation.json | 154 +++++++++++++++--- .../circled-icon/circled-icon.component.ts | 9 + .../stories/molecules/circled-icon.stories.ts | 55 +++++++ 3 files changed, 191 insertions(+), 27 deletions(-) create mode 100644 projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts diff --git a/projects/my-wallet-ds/documentation.json b/projects/my-wallet-ds/documentation.json index d8dae45..d50acd2 100644 --- a/projects/my-wallet-ds/documentation.json +++ b/projects/my-wallet-ds/documentation.json @@ -17,6 +17,16 @@ "file": "projects/my-wallet-ds/src/stories/checkbox.stories.ts", "deprecated": false, "deprecationMessage": "", + "type": "Story", + "defaultValue": "{}" + }, + { + "name": "CircledIcon", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts", + "deprecated": false, + "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, @@ -88,7 +98,7 @@ "deprecated": false, "deprecationMessage": "", "type": "Meta", - "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', detail: 'Emits true if checked, false otherwise' },\n },\n control: {'type':'boolean', value: false},\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', detail: 'Emits true if checked, false otherwise' },\n }, \n }\n },\n\n}" }, { "name": "meta", @@ -120,6 +130,18 @@ "type": "Meta", "defaultValue": "{\n title: 'Atoms/Svg',\n component: SvgComponent,\n tags: ['autodocs'],\n args: {\n width: \"24px\",\n height: \"24px\",\n color: \"#000000\",\n symbol: \"stock-line\",\n },\n argTypes: {\n width: {\n description: 'Icon width with units (px, rem, etc)',\n table: {defaultValue: {detail: 'Defaults to 24px', summary: '24px'}}\n },\n height: {\n description: 'Icon height with units (px, rem, etc)',\n table: {defaultValue: {detail: 'Defaults to 24px', summary: '24px'}}\n },\n color: {\n description: 'Icon color',\n table: {defaultValue: {detail: 'Defaults to black', summary: '#000000'}}\n },\n symbol: {\n control: 'select',\n options: svgList,\n description: 'Icon name',\n table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}}\n }, \n }\n}" }, + { + "name": "meta", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Meta", + "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 control: 'color',\n description: 'Circle background color',\n table: {defaultValue: {detail: 'Defaults to white', summary: '#fff'}},\n },\n color: {\n control: 'color',\n description: 'Icon color',\n table: {defaultValue: {detail: 'Defaults to black', summary: '#000000'}},\n },\n symbol: {\n control: 'select',\n description: 'Icon name',\n options: svgList,\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": "

Sizing: the circled icon takes all space available in it's parent component

\n" + }, { "name": "Paragraph", "ctype": "miscellaneous", @@ -180,16 +202,6 @@ "type": "", "defaultValue": "Template.bind({})" }, - { - "name": "Template", - "ctype": "miscellaneous", - "subtype": "variable", - "file": "projects/my-wallet-ds/src/stories/checkbox.stories.ts", - "deprecated": false, - "deprecationMessage": "", - "type": "", - "defaultValue": "() => ({\n template: `\n
\n
console.log('clicked'\">\n \n
\n
`\n})" - }, { "name": "Template", "ctype": "miscellaneous", @@ -209,6 +221,16 @@ "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 Texto`,\n})" + }, + { + "name": "Template", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "", + "defaultValue": "(args: {backgroundColor: string, color: string, symbol: string}) => ({\n props: args,\n template: `\n
\n \n
\n `\n})" } ], "functions": [], @@ -256,6 +278,17 @@ "deprecationMessage": "", "description": "", "kind": 183 + }, + { + "name": "Story", + "ctype": "miscellaneous", + "subtype": "typealias", + "rawtype": "StoryObj", + "file": "projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "kind": 183 } ], "enumerations": [], @@ -268,8 +301,8 @@ "file": "projects/my-wallet-ds/src/stories/checkbox.stories.ts", "deprecated": false, "deprecationMessage": "", - "type": "", - "defaultValue": "Template.bind({})" + "type": "Story", + "defaultValue": "{}" }, { "name": "meta", @@ -279,17 +312,41 @@ "deprecated": false, "deprecationMessage": "", "type": "Meta", - "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', detail: 'Emits true if checked, false otherwise' },\n },\n control: {'type':'boolean', value: false},\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', detail: 'Emits true if checked, false otherwise' },\n }, \n }\n },\n\n}" + } + ], + "projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts": [ + { + "name": "CircledIcon", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "", + "defaultValue": "Template.bind({})" + }, + { + "name": "meta", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Meta", + "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 control: 'color',\n description: 'Circle background color',\n table: {defaultValue: {detail: 'Defaults to white', summary: '#fff'}},\n },\n color: {\n control: 'color',\n description: 'Icon color',\n table: {defaultValue: {detail: 'Defaults to black', summary: '#000000'}},\n },\n symbol: {\n control: 'select',\n description: 'Icon name',\n options: svgList,\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": "

Sizing: the circled icon takes all space available in it's parent component

\n" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", - "file": "projects/my-wallet-ds/src/stories/checkbox.stories.ts", + "file": "projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", - "defaultValue": "() => ({\n template: `\n
\n
console.log('clicked'\">\n \n
\n
`\n})" + "defaultValue": "(args: {backgroundColor: string, color: string, symbol: string}) => ({\n props: args,\n template: `\n
\n \n
\n `\n})" } ], "projects/my-wallet-ds/src/stories/button.stories.ts": [ @@ -529,12 +586,25 @@ "description": "", "kind": 183 } + ], + "projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts": [ + { + "name": "Story", + "ctype": "miscellaneous", + "subtype": "typealias", + "rawtype": "StoryObj", + "file": "projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "kind": 183 + } ] } }, "routes": [], "coverage": { - "count": 0, + "count": 3, "status": "low", "files": [ { @@ -627,16 +697,6 @@ "coverageCount": "0/1", "status": "low" }, - { - "filePath": "projects/my-wallet-ds/src/stories/checkbox.stories.ts", - "type": "variable", - "linktype": "miscellaneous", - "linksubtype": "variable", - "name": "Template", - "coveragePercent": 0, - "coverageCount": "0/1", - "status": "low" - }, { "filePath": "projects/my-wallet-ds/src/stories/checkbox.stories.ts", "type": "type alias", @@ -687,6 +747,46 @@ "coverageCount": "0/1", "status": "low" }, + { + "filePath": "projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "CircledIcon", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, + { + "filePath": "projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "meta", + "coveragePercent": 100, + "coverageCount": "1/1", + "status": "very-good" + }, + { + "filePath": "projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "Template", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, + { + "filePath": "projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts", + "type": "type alias", + "linktype": "miscellaneous", + "linksubtype": "typealias", + "name": "Story", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, { "filePath": "projects/my-wallet-ds/src/stories/page.stories.ts", "type": "variable", diff --git a/projects/my-wallet-ds/src/lib/molecules/circled-icon/circled-icon.component.ts b/projects/my-wallet-ds/src/lib/molecules/circled-icon/circled-icon.component.ts index 9569fa0..3c0997c 100644 --- a/projects/my-wallet-ds/src/lib/molecules/circled-icon/circled-icon.component.ts +++ b/projects/my-wallet-ds/src/lib/molecules/circled-icon/circled-icon.component.ts @@ -9,7 +9,16 @@ import { SvgComponent } from '../../atoms/svg/svg.component'; styleUrl: './circled-icon.component.css' }) export class CircledIconComponent { + /** + * @description Circle background color + */ backgroundColor = input("#fff"); + /** + * @description Icon color + */ color = input("#000000"); + /** + * @description Icon name + */ symbol = input(""); } diff --git a/projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts b/projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts new file mode 100644 index 0000000..dbdfd5a --- /dev/null +++ b/projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts @@ -0,0 +1,55 @@ +import type { Meta } from '@storybook/angular'; +import { CircledIconComponent } from '../../lib/molecules/circled-icon/circled-icon.component'; +import { svgList } from '../svg-list'; +/** + * + * **Sizing**: the circled icon takes all space available in it's parent component + */ + + +const meta: Meta = { + title: 'Molecules/Circled Icon', + component: CircledIconComponent, + tags: ['autodocs'], + args: { + backgroundColor: '#c0c0c0', + color: '#000000', + symbol: 'stock-line', + }, + argTypes: { + backgroundColor: { + control: 'color', + description: 'Circle background color', + table: {defaultValue: {detail: 'Defaults to white', summary: '#fff'}}, + }, + color: { + control: 'color', + description: 'Icon color', + table: {defaultValue: {detail: 'Defaults to black', summary: '#000000'}}, + }, + symbol: { + control: 'select', + description: 'Icon name', + options: svgList, + table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}} + } + }, +}; + +export default meta; + +const Template = (args: {backgroundColor: string, color: string, symbol: string}) => ({ + props: args, + template: ` +
+ +
+ ` +}); + +export const CircledIcon = Template.bind({}); +