feat: add sb documentation for svg component
This commit is contained in:
@@ -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",
|
||||
|
||||
@@ -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("");
|
||||
}
|
||||
|
||||
67
projects/my-wallet-ds/src/stories/svg-list.ts
Normal file
67
projects/my-wallet-ds/src/stories/svg-list.ts
Normal file
@@ -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"
|
||||
];
|
||||
52
projects/my-wallet-ds/src/stories/svg.stories.ts
Normal file
52
projects/my-wallet-ds/src/stories/svg.stories.ts
Normal file
@@ -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({});
|
||||
Reference in New Issue
Block a user