feat: add sb documentation for circled icon component

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<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      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<Boolean>', detail: 'Emits true if checked, false otherwise' },\n      },      \n    }\n  },\n\n}"
             },
             {
                 "name": "meta",
@@ -120,6 +130,18 @@
                 "type": "Meta<SvgComponent>",
                 "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<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      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": "<p><strong>Sizing</strong>: the circled icon takes all space available in it&#39;s parent component</p>\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  <div id=\"asdf\" style=\"display:flex; justify-content: center;\">\n      <div onclick=\"() => console.log('clicked'\">\n        <mw-checkbox\n          \n        ></mw-checkbox>\n      <div>\n  </div>`\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  <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})"
+            },
+            {
+                "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  <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})"
             }
         ],
         "functions": [],
@@ -256,6 +278,17 @@
                 "deprecationMessage": "",
                 "description": "",
                 "kind": 183
+            },
+            {
+                "name": "Story",
+                "ctype": "miscellaneous",
+                "subtype": "typealias",
+                "rawtype": "StoryObj<CircledIconComponent>",
+                "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": "",
+                    "type": "Story",
-                    "defaultValue": "Template.bind({})"
+                    "defaultValue": "{}"
                 },
                 {
                     "name": "meta",
@@ -279,17 +312,41 @@
                     "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      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<Boolean>', 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<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      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": "<p><strong>Sizing</strong>: the circled icon takes all space available in it&#39;s parent component</p>\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  <div id=\"asdf\" style=\"display:flex; justify-content: center;\">\n      <div onclick=\"() => console.log('clicked'\">\n        <mw-checkbox\n          \n        ></mw-checkbox>\n      <div>\n  </div>`\n})"
+                    "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})"
                 }
             ],
             "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<CircledIconComponent>",
+                    "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",

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("");
 }

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<CircledIconComponent> = {
+  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: `
+  <div style="width: 36px; height: 36px; margin: auto;">
+    <mw-circled-icon
+      backgroundColor="${args.backgroundColor}"
+      color="${args.color}"
+      symbol="${args.symbol}"
+    ></mw-circled-icon>
+  </div>
+  `
+});
+
+export const CircledIcon = Template.bind({});
+