feat: add sb documentation for svg component

projects/my-wallet-ds/documentation.json

@@ -90,6 +90,16 @@
                 "type": "Meta<PageComponent>",
                 "defaultValue": "{\n  title: 'Organisms/Page',\n  component: PageComponent,\n  parameters: {\n    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout\n    layout: 'fullscreen',\n  },\n}"
             },
+            {
+                "name": "meta",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/my-wallet-ds/src/stories/svg.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "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": "Paragraph",
                 "ctype": "miscellaneous",
@@ -140,6 +150,26 @@
                 "type": "Story",
                 "defaultValue": "{\n  args: {\n    size: 'small',\n    label: 'Button',\n  },\n}"
             },
+            {
+                "name": "Svg",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/my-wallet-ds/src/stories/svg.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "",
+                "defaultValue": "Template.bind({})"
+            },
+            {
+                "name": "Template",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/my-wallet-ds/src/stories/svg.stories.ts",
+                "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})"
+            },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
@@ -148,7 +178,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  <my-wallet-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</my-wallet-typography>`,\n})"
+                "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})"
             }
         ],
         "functions": [],
@@ -305,6 +335,38 @@
                     "defaultValue": "{\n  title: 'Organisms/Page',\n  component: PageComponent,\n  parameters: {\n    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout\n    layout: 'fullscreen',\n  },\n}"
                 }
             ],
+            "projects/my-wallet-ds/src/stories/svg.stories.ts": [
+                {
+                    "name": "meta",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/my-wallet-ds/src/stories/svg.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "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": "Svg",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/my-wallet-ds/src/stories/svg.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "Template.bind({})"
+                },
+                {
+                    "name": "Template",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/my-wallet-ds/src/stories/svg.stories.ts",
+                    "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/typography.stories.ts": [
                 {
                     "name": "Paragraph",
@@ -324,7 +386,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  <my-wallet-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</my-wallet-typography>`,\n})"
+                    "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})"
                 }
             ],
             "projects/my-wallet-ds/.storybook/preview.ts": [
@@ -539,6 +601,36 @@
                 "coverageCount": "0/1",
                 "status": "low"
             },
+            {
+                "filePath": "projects/my-wallet-ds/src/stories/svg.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "meta",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/my-wallet-ds/src/stories/svg.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Svg",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/my-wallet-ds/src/stories/svg.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Template",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
             {
                 "filePath": "projects/my-wallet-ds/src/stories/typography.stories.ts",
                 "type": "variable",

projects/my-wallet-ds/src/lib/atoms/svg/svg.component.ts

@@ -8,8 +8,20 @@ import { Component, input } from '@angular/core';
   styles: ``
 })
 export class SvgComponent {
+  /**
+   * @description Icon width with units px, rem, etc)
+   */
   width = input("24px");
+  /**
+   * @description Icon height with units px, rem, etc)
+   */
   height = input("24px");
+  /**
+   * @description Icon color
+   */
   color = input("#000000");
+  /**
+   * @description Icon name 
+   */
   symbol = input("");
 }

projects/my-wallet-ds/src/stories/svg-list.ts

@@ -0,0 +1,67 @@
+export const svgList = [
+    "wallet-line","bank-card-2-line","refund-2-line",
+    "price-tag-2-line","shopping-bag-line","shopping-cart-line",
+    "exchange-line","swap-fill","cash-line",
+    "coin-line","funds-line","funds-box-line",
+    "stock-line","cash-fill","btc-line",
+    "discount-percent-line","percent-line","coupon-2-line",
+    "folder-open-line","article-line","newspaper-line",
+    "receipt-line","numbers-line","vip-crown-line",
+    "brain-line","capsule-line","microscope-line",
+    "stethoscope-fill","map-line","earth-line",
+    "parking-fill","gas-station-fill","map-2-line",
+    "pushpin-line","bus-line","taxi-line",
+    "car-fill","flight-takeoff-line","subway-fill",
+    "ship-fill","riding-line","suitcase-2-line",
+    "film-line","clapperboard-line","camera-fill",
+    "music-2-fill","star-line","settings-5-fill",
+    "prohibited-2-line","alert-line","information-2-fill",
+    "check-double-line","close-line","add-line",
+    "divide-line","subtract-line","download-cloud-line",
+    "upload-cloud-line","delete-bin-6-line","eye-line",
+    "eye-off-line","lock-line","team-fill",
+    "user-line","robot-2-line","spy-line",
+    "parent-fill","sun-line","moon-line",
+    "cloudy-line","moon-foggy-line","fire-line",
+    "haze-line","basketball-line","billiards-fill",
+    "handbag-line","plug-line","lightbulb-line",
+    "key-2-line","key-2-fill","plant-line",
+    "leaf-line","t-shirt-line","umbrella-fill",
+    "recycle-fill","box-3-line","cross-fill",
+    "book-shelf-line","sofa-line","graduation-cap-fill",
+    "alarm-warning-line","filter-line","filter-off-line",
+    "hourglass-line","eye-close-line","check-line",
+    "add-box-line","checkbox-circle-line","indeterminate-circle-line",
+    "add-circle-line","close-circle-line","apps-2-line",
+    "bank-line","government-line","arrow-up-circle-line",
+    "arrow-right-circle-line","arrow-down-circle-line","arrow-left-circle-line",
+    "arrow-left-right-line","arrow-up-down-line","arrow-go-back-line",
+    "arrow-go-forward-line","arrow-turn-forward-line","arrow-turn-back-line",
+    "home-2-line","hotel-line","home-office-line",
+    "building-line","school-line","store-2-line",
+    "hospital-line","ancient-pavilion-line","tent-line",
+    "medal-line","award-line","archive-2-line",
+    "attachment-line","profile-line","bar-chart-fill",
+    "bar-chart-2-line","pie-chart-2-line","mail-line",
+    "line-chart-line","calculator-line","calendar-2-line",
+    "calendar-line","customer-service-2-line","flag-line",
+    "flag-2-line","printer-line","global-line",
+    "record-mail-line","send-plane-line","slideshow-line",
+    "shake-hands-line","stack-line","registered-line",
+    "id-card-line","megaphone-line","window-fill",
+    "reply-fill","briefcase-line","briefcase-3-line",
+    "pencil-line","edit-2-line","edit-box-line",
+    "drop-line","ruler-line","pencil-ruler-2-line",
+    "palette-line","pantone-line","hammer-line",
+    "circle-line","triangle-line","pentagon-line",
+    "tools-fill","terminal-box-fill","git-pull-request-line",
+    "bug-fill","computer-line","macbook-line",
+    "smartphone-line","device-line","hard-drive-3-line",
+    "server-line","database-2-line","phone-line",
+    "phone-fill","save-3-line","cpu-line",
+    "mouse-line","radar-fill","gamepad-line",
+    "shut-down-line","fingerprint-line","barcode-line",
+    "rss-line","bluetooth-connect-line","wifi-line",
+    "battery-line","tv-line","tablet-line",
+    "instance-line"
+];

projects/my-wallet-ds/src/stories/svg.stories.ts

@@ -0,0 +1,52 @@
+import type { Meta } from '@storybook/angular';
+import { SvgComponent } from '../lib/atoms/svg/svg.component';
+import { svgList } from './svg-list';
+
+const meta: Meta<SvgComponent> = {
+    title: 'Atoms/Svg',
+    component: SvgComponent,
+    tags: ['autodocs'],
+    args: {
+        width: "24px",
+        height: "24px",
+        color: "#000000",
+        symbol: "stock-line",
+    },
+    argTypes: {
+        width: {
+            description: 'Icon width with units (px, rem, etc)',
+            table: {defaultValue: {detail: 'Defaults to 24px', summary: '24px'}}
+        },
+        height: {
+            description: 'Icon height with units (px, rem, etc)',
+            table: {defaultValue: {detail: 'Defaults to 24px', summary: '24px'}}
+        },
+        color: {
+            description: 'Icon color',
+            table: {defaultValue: {detail: 'Defaults to black', summary: '#000000'}}
+        },
+        symbol: {
+            control: 'select',
+            options: svgList,
+            description: 'Icon name',
+            table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}}
+        }, 
+    }
+} ;
+
+export default meta;
+
+const Template = (args: { width: string, height: string, color: string, symbol: string,}) => ({
+  props: args,
+  template: `
+  <div style="display:flex; justify-content: center;">
+    <mw-svg
+        width="${args.width}"
+        height="${args.height}"
+        color="${args.color}"
+        symbol="${args.symbol}"
+    ></mw-svg>
+  </div>`
+});
+
+export const Svg = Template.bind({});