diff options
Diffstat (limited to 'stories/angular/svg-icon.stories.ts')
-rw-r--r-- | stories/angular/svg-icon.stories.ts | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/stories/angular/svg-icon.stories.ts b/stories/angular/svg-icon.stories.ts new file mode 100644 index 0000000..785a92d --- /dev/null +++ b/stories/angular/svg-icon.stories.ts @@ -0,0 +1,124 @@ +import { storiesOf } from '@storybook/angular'; +import { withKnobs, text, number, boolean, array, select, color, date, button } from '@storybook/addon-knobs'; +import { withNotes } from '@storybook/addon-notes'; +import { action, configureActions } from '@storybook/addon-actions'; +import { moduleMetadata } from '@storybook/angular'; +import { AccordionComponent, SvgIconComponent } from '../../src/angular/components'; +import { SvgIconModule } from '../../src/angular/svg-icon/svg-icon.module'; +import { Mode, Placement, Size, BackgroundShape, ButtonType, BackgroundColor } from "../../src/angular/common/enums"; + +const mode = Object.keys(Mode); +const size = Object.keys(Size); +const icons_categories: Array<string> = Object.keys(SvgIconComponent.Icons()); +const background_shape: Array<string> = Object.keys(BackgroundShape); +const background_color: Array<string> = Object.keys(BackgroundColor); + +const caption_full_options = 'Icon full options'; + +let stories = storiesOf('Icons|Show case', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator( + moduleMetadata({ + declarations: [SvgIconComponent], + imports: [ + ] + }) + ); + + background_shape.push(undefined); + background_color.push(undefined); + + // resource: #9063CD + // services: #71C5E8 + // red: + +console.log(icons_categories); + +icons_categories.map((category) => + + stories.add(category, () => { + + let _mode = select('mode', mode, 'primary', ''); + let _size = select('size', size, 'medium', ''); + let _backgroundShape = select('backgroundShape', background_shape, '', ''); + let _backgroundColor = select('backgroundColor', background_color, '', ''); + const _debug_icon = boolean('Debug icon', false); + + if (category === 'resources_60') { + _mode = select('mode', mode, 'white', ''); + _size = select('size', size, 'x_large', ''); + _backgroundShape = select('backgroundShape', background_shape, 'circle', ''); + _backgroundColor = select('backgroundColor', background_color, 'primary', ''); + } + + return { + props: { + _debug_icon, _mode, _size, _backgroundShape, _backgroundColor + }, + template: + `<div class='storybook-icons-showcase'>` + + Object.keys(SvgIconComponent.Icons()[category]).map((iconName) => + ` + <div class='storybook-component-wrapper'> + <div class='storybook-component-info'>${iconName}</div> + <svg-icon + [ngClass]="{'storybook-debug-icon': _debug_icon===true}" + category="${category}" + name="${iconName}" + [mode]="_mode" + [size]="_size" + [backgroundShape]="_backgroundShape" + [backgroundColor]="_backgroundColor" + > + </svg-icon> + </div> + ` + ).join('\n') + + `</div>` + } + }, + { notes: `<h2>Showcase of all icons</h2> + To see all the options for specific icon, select 'Icon full options' in left panel. + ` + }) +); + +stories.add(caption_full_options, () => { + const _mode = select('mode', mode, 'primary', ''); + const _size = select('size', size, 'x_large', ''); + const _category = select('category', icons_categories, 'common', ''); + const _name = select('name', Object.keys(SvgIconComponent.Icons().common), 'alert-triangle-o', ''); + const _backgroundShape = select('backgroundShape', background_shape, '', ''); + const _backgroundColor = select('backgroundColor', background_color, '', ''); + const _disabled = boolean('disabled', false); + const _clickable = boolean('clickable', true); + const _className = text('className', ''); + + return { + props: { + _mode, _size, _name, _backgroundShape, _backgroundColor, _disabled, _clickable, _className, _category + }, + template: ` + <div class='storybook-component-wrapper'> + <div class='storybook-component-info'>Full options, look in the KNOBS options</div> + <svg-icon + [name]="_name" + [mode]="_mode" + [size]="_size" + [backgroundShape]="_backgroundShape" + [backgroundColor]="_backgroundColor" + [disabled]="_disabled" + [clickable]="_clickable" + [className]="_className" + > + </svg-icon> + </div> + ` + } + }, + { notes: `<h2>SVG icon full example</h2> + Full example of SVG icon, use the KNOBS tab to change @Inputs. + ` + } + ); |