diff options
Diffstat (limited to 'stories/angular')
31 files changed, 3045 insertions, 0 deletions
diff --git a/stories/angular/accordion.stories.ts b/stories/angular/accordion.stories.ts new file mode 100644 index 0000000..20209eb --- /dev/null +++ b/stories/angular/accordion.stories.ts @@ -0,0 +1,154 @@ +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 } from '../../src/angular/components'; +import { SvgIconModule } from '../../src/angular/svg-icon/svg-icon.module'; + +const positions = ['right', 'left']; + +storiesOf('Accordion', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator( + moduleMetadata({ + declarations: [AccordionComponent], + imports: [ + SvgIconModule + ] + }) + ) + .add('Simple accordion', () => { + const _title = text('title', 'Accordion header'); + + return { + props: { + _title + }, + template: ` + <sdc-accordion [title]="_title"> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat dictum porttitor. + Nam facilisis, dui nec maximus facilisis, nisl eros mattis arcu, nec pharetra nisl nisi vitae metus. + Vestibulum urna nunc, fringilla nec imperdiet a, varius hendrerit neque. Aliquam pulvinar turpis enim, ac hendrerit dui blandit eu. + Curabitur ut mollis arcu, ac iaculis turpis. Pellentesque lobortis leo justo. Morbi commodo cursus dignissim. + Nam orci diam, mattis eget leo vel, tincidunt interdum dui. + Donec dapibus mauris non sapien ornare, non pharetra mi commodo. + </p> + </sdc-accordion> + ` + }}) + + .add('Accordion arrow position', () => { + const _title = text('title', 'Accordion header'); + const _arrow_direction = select('arrow-direction', positions, 'left', ''); + + return { + props: { + _title, _arrow_direction + }, + template: ` + <sdc-accordion + [title]="_title" + [arrow-direction]="_arrow_direction" + > + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat dictum porttitor. + Nam facilisis, dui nec maximus facilisis, nisl eros mattis arcu, nec pharetra nisl nisi vitae metus. + Vestibulum urna nunc, fringilla nec imperdiet a, varius hendrerit neque. Aliquam pulvinar turpis enim, ac hendrerit dui blandit eu. + Curabitur ut mollis arcu, ac iaculis turpis. Pellentesque lobortis leo justo. Morbi commodo cursus dignissim. + Nam orci diam, mattis eget leo vel, tincidunt interdum dui. + Donec dapibus mauris non sapien ornare, non pharetra mi commodo. + </p> + </sdc-accordion> + ` + }}) + + .add('Accordion custom class', () => { + const _title = text('title', 'Accordion header'); + const _arrow_direction = select('arrow-direction', positions, 'left', ''); + const _css_class = text('css_class', 'sdc-accordion-custom-class'); + + return { + props: { + _title, _arrow_direction, _css_class + }, + template: ` + <sdc-accordion + [title]="_title" + [arrow-direction]="_arrow_direction" + [css-class]="_css_class" + > + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat dictum porttitor. + Nam facilisis, dui nec maximus facilisis, nisl eros mattis arcu, nec pharetra nisl nisi vitae metus. + Vestibulum urna nunc, fringilla nec imperdiet a, varius hendrerit neque. Aliquam pulvinar turpis enim, ac hendrerit dui blandit eu. + Curabitur ut mollis arcu, ac iaculis turpis. Pellentesque lobortis leo justo. Morbi commodo cursus dignissim. + Nam orci diam, mattis eget leo vel, tincidunt interdum dui. + Donec dapibus mauris non sapien ornare, non pharetra mi commodo. + </p> + </sdc-accordion> + ` + }}) + + .add('Accordion open', () => { + const _title = text('title', 'Accordion header'); + const _arrow_direction = select('arrow-direction', positions, 'left', ''); + const _css_class = text('css_class', 'custom-class'); + const _open = boolean('open', true, ''); + + return { + props: { + _title, _arrow_direction, _css_class, _open + }, + template: ` + <sdc-accordion + [title]="_title" + [arrow-direction]="_arrow_direction" + [css-class]="_css_class" + [open]="_open" + > + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat dictum porttitor. + Nam facilisis, dui nec maximus facilisis, nisl eros mattis arcu, nec pharetra nisl nisi vitae metus. + Vestibulum urna nunc, fringilla nec imperdiet a, varius hendrerit neque. Aliquam pulvinar turpis enim, ac hendrerit dui blandit eu. + Curabitur ut mollis arcu, ac iaculis turpis. Pellentesque lobortis leo justo. Morbi commodo cursus dignissim. + Nam orci diam, mattis eget leo vel, tincidunt interdum dui. + Donec dapibus mauris non sapien ornare, non pharetra mi commodo. + </p> + </sdc-accordion> + ` + }}) + + .add('Accordion full', () => { + const _title = text('title', 'Accordion header'); + const _arrow_direction = select('arrow-direction', positions, 'left', ''); + const _css_class = text('css_class', 'custom-class'); + const _open = boolean('open', true, ''); + const _accordionChanged = text('(accordionChanged)', 'Accoridon changed event (see in action tab), '); + + return { + props: { + accordionChanged: action('Accordion changed event '), + _title, _arrow_direction, _css_class, _open + }, + template: ` + <sdc-accordion + [title]="_title" + [arrow-direction]="_arrow_direction" + [css-class]="_css_class" + [open]="_open" + (accordionChanged)="accordionChanged($event)" + > + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat dictum porttitor. + Nam facilisis, dui nec maximus facilisis, nisl eros mattis arcu, nec pharetra nisl nisi vitae metus. + Vestibulum urna nunc, fringilla nec imperdiet a, varius hendrerit neque. Aliquam pulvinar turpis enim, ac hendrerit dui blandit eu. + Curabitur ut mollis arcu, ac iaculis turpis. Pellentesque lobortis leo justo. Morbi commodo cursus dignissim. + Nam orci diam, mattis eget leo vel, tincidunt interdum dui. + Donec dapibus mauris non sapien ornare, non pharetra mi commodo. + </p> + </sdc-accordion> + ` + }}); diff --git a/stories/angular/autocomplete.stories.ts b/stories/angular/autocomplete.stories.ts new file mode 100644 index 0000000..89f1c23 --- /dev/null +++ b/stories/angular/autocomplete.stories.ts @@ -0,0 +1,127 @@ +import { storiesOf } from '@storybook/angular'; +import { withKnobs, text, number, boolean, array, select, color, date, button, object } from '@storybook/addon-knobs'; +import { withNotes } from '@storybook/addon-notes'; +import { action, configureActions } from '@storybook/addon-actions'; +import { moduleMetadata } from '@storybook/angular'; +import { AutoCompleteComponent, AutocompletePipe } from '../../src/angular/components'; +import { FilterBarModule } from '../../src/angular/filterbar/filter-bar.module'; +import { HttpClient, HttpHandler } from '@angular/common/http'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +storiesOf('AutoComplete', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator( + moduleMetadata({ + declarations: [ + AutoCompleteComponent + ], + imports: [ + FilterBarModule, + BrowserAnimationsModule + ], + providers: [ + HttpClient, HttpHandler, AutocompletePipe + ] + }) + ) + .add('Simple data', () => { + const sampleData = ['red', 'yellow', 'orange', 'green', 'white', 'black']; + + const _label = text('label', 'Simple data (Array)'); + const _placeholder = text('placeholder', 'Simple data'); + const _data = array('data', sampleData, ','); + const _event = text('(itemSelected)', 'Event thrown when item selected'); + + return { + props: { + itemSelected: action('Item was selected '), + _label, _placeholder, _data, _event + }, + template: ` + <div class='storybook-component-wrapper'> + <div class='storybook-component-info'>Start writing name of color to see autocomplete in action</div> + <sdc-autocomplete + [placeholder]="_placeholder" + [label]="_label" + [data]="_data" + (itemSelected)="itemSelected($event)" + > + </sdc-autocomplete> + </div> + ` + } + }, + { notes: `<h2>Simple data</h2> + Using simple data (array), do not need to pass dataSchema. + ` + } +).add('Complex data', () => { + const sampleData = [ + {id: 'redId', color: 'red'}, + {id: 'yellowId', color: 'yellow'}, + {id: 'orangeId', color: 'orange'}, + {id: 'greenId', color: 'green'}, + {id: 'whiteId', color: 'white'}, + {id: 'blackId', color: 'black'} + ]; + const sampleSchema = {key: 'id', value: 'color'}; + + const _label = text('label', 'Complex data (Object)'); + const _placeholder = text('placeholder', 'Complex data'); + const _data = array('*data', sampleData, ','); + const _dataSchema = object('dataSchema', sampleSchema); + const _event = text('*(itemSelected)', 'Event thrown when item selected'); + + return { + props: { + itemSelected: action('Item was selected '), + _label, _placeholder, _data, _dataSchema, _event + }, + template: ` + <sdc-autocomplete + [placeholder]="_placeholder" + [label]="_label" + [data]="_data" + [dataSchema]="_dataSchema" + (itemSelected)="itemSelected($event)" + > + </sdc-autocomplete> + ` + } + }, + { notes: `<h2>Complex data</h2> + Using complex data (object), need to pass also dataSchema. + ` + } +).add('Backend data', () => { + const sampleSchema = {key: 'id', value: 'color'}; + + const _label = text('label', 'Complex data (Object)'); + const _placeholder = text('placeholder', 'Complex data'); + const _dataUrl = text('dataUrl', '../angular/helpers/autocomplete-server-mock.json'); + const _dataSchema = object('dataSchema', sampleSchema); + const _event = text('*(itemSelected)', 'Event thrown when item selected'); + + return { + props: { + itemSelected: action('Item was selected '), + _label, _placeholder, _dataSchema, _dataUrl, _event + }, + template: ` + <sdc-autocomplete + [placeholder]="_placeholder" + [label]="_label" + [dataUrl]="_dataUrl" + [dataSchema]="_dataSchema" + (itemSelected)="itemSelected($event)" + > + </sdc-autocomplete> + ` + } + }, + { notes: `<h2>Data from server</h2> + Example of auto complete with complex data from server. (In this example the data is not really filtered, because it is from mock data). + ` + } +); diff --git a/stories/angular/button.stories.ts b/stories/angular/button.stories.ts new file mode 100644 index 0000000..582abbf --- /dev/null +++ b/stories/angular/button.stories.ts @@ -0,0 +1,229 @@ +import { storiesOf } from '@storybook/angular'; +import { ButtonComponent } from '../../src/angular/buttons/button.component'; +import { ButtonFileOpenerComponent } from '../../src/angular/buttons/button-file-opener.component'; +import { moduleMetadata } from '@storybook/angular'; +import { SvgIconModule } from '../../src/angular/svg-icon/svg-icon.module'; +import { action } from '@storybook/addon-actions'; +import { withKnobs, text, number, boolean, array, select, color, date, button } from '@storybook/addon-knobs'; +import { withNotes } from '@storybook/addon-notes'; + +const buttonTypes = ['primary', 'secondary', 'link', 'success', 'error', 'warning', 'info']; +const buttonSizes = ['large', 'medium', 'small', 'x-small', 'default']; +const positions = ['right', 'left']; +const iconsNames = ['settings-o', 'plus-circle-o', 'plus-circle', 'caret2-right-circle-o']; + +/** + * There is strange behaviour with Storybook storyname, if the name is string 'aaaa', then all stories + * need to be string, you can not do const aaaa = 'aaaa' and pass the parameter aaaa as storyname. + */ +const storiesNames = { + defaultButton: 'Default button', + typesButtons: 'Button ', + withIcon: 'Button with icon', + withSpinner: 'Button with spinner', + buttonFileOpener: 'Button file opener' +} + +let stories = storiesOf('Form elements|Buttons', module) +.addDecorator(withKnobs) +.addDecorator(withNotes) +.addDecorator( + moduleMetadata({ + declarations: [ + ButtonComponent, + ButtonFileOpenerComponent + ], + imports: [ + SvgIconModule + ] + }) +); + +stories.add(storiesNames.defaultButton, () => { + + const _text1 = text('text', 'Default button long text'); + const _testId1 = text('testId', 'button-test-id-1'); + const click1 = text('(click)', 'call back function'); + + const _text2 = text('text', 'Sample button'); + const _testId2 = text('testId', 'button-test-id-2'); + const click2 = text('(click)', 'call back function'); + + return { + props: { + buttonClick1: action('Button 1 was clicked'), + buttonClick2: action('Button 2 was clicked'), + _text1, _testId1, + _text2, _testId2 + }, + template: ` + <div class='storybook-component-wrapper'> + <div class='storybook-component-info'>With large text</div> + <sdc-button + [text]="_text1" + [testId]="_testId1" + (click)="buttonClick1()" + > + </sdc-button> + + <div class='storybook-component-info'>With small text</div> + <sdc-button + [text]="_text2" + [testId]="_testId2" + (click)="buttonClick2()" + > + </sdc-button> + </div> + ` + } + }, + { notes: `<h2>Default button</h2> + Does not need to supply type or size. + The size of the button set to 'default' so it will shrink or expand according to the content.` + } +); + +buttonTypes.forEach((buttonType) => { + + stories.add(storiesNames.typesButtons + buttonType, () => { + + const _text = text('text', buttonType); + const _type = text('type', buttonType); + // Do not allow this, because we are showing each button type as different story. + // const _type = select('type', buttonTypes, buttonType, ''); + const _testId = text('testId', 'button-test-id-' + buttonType); + // No need to add the size to prop, not using it + const _size = text('size', 'Avilable sizes: ' + buttonSizes); + const _disabled = boolean('disabled', true); + const click = text('(click)', 'call back function'); + + return { + props: { + buttonClick: action('Button was clicked (see in action logger tab)'), + _text, _testId, _type, _disabled + }, + template: + `<div class='storybook-new-row'>` + + buttonSizes.map((currentSize) => ` + <div class='storybook-component-wrapper'> + <div class='storybook-component-info'>${currentSize} size</div> + <sdc-button + [text]="_text" + [type]="_type" + size="${currentSize}" + [testId]="_testId" + (click)="buttonClick()"> + </sdc-button> + </div> + `).join('\n') + + `</div> + <div class='storybook-new-row'>` + .concat( + buttonSizes.map((currentSize) => ` + <div class='storybook-component-wrapper'> + <sdc-button + [text]="_text" + [type]="_type" + size="${currentSize}" + [testId]="_testId" + [disabled]="_disabled" + (click)="buttonClick()"> + </sdc-button> + </div> + `).join('\n') + + '</div>' + ) + }; + + }); +}); + +stories.add(storiesNames.withIcon, () => { + + const _text = text('text', 'Sample'); + const _testId = text('testId', 'button-test-id-with-icon'); + const _type = select('type', buttonTypes, 'primary', ''); + const _icon_position = select('icon_position', positions, 'left', ''); + const _icon_name = select('icon_name', iconsNames, 'settings-o', ''); + const click = text('(click)', 'call back function'); + + return { + props: { + buttonClick: action('Button was clicked (see in action logger tab)'), + _text, _testId, _type, _icon_position, _icon_name + }, + template: ` + <sdc-button + [text]="_text" + [testId]="_testId" + [type]="_type" + [icon_name]="_icon_name" + [icon_position]="_icon_position" + (click)="buttonClick()" + > + </sdc-button> + ` + }; + +}); + +stories.add(storiesNames.withSpinner, () => { + + const _text = text('text', 'Spinner button'); + const _testId = text('testId', 'button-test-id-with-icon'); + const _type = select('type', buttonTypes, 'primary', ''); + const _show_spinner = boolean('show_spinner', false, ''); + const _spinner_position = select('spinner_position', positions, 'right', ''); + const click = text('(click)', 'call back function'); + + return { + props: { + buttonClick: (button) => { + button.show_spinner = true; + setTimeout(() => {button.show_spinner = false},2000); + action('Button was clicked (see in action logger tab)'); + }, + _text, _testId, _type, _show_spinner, _spinner_position + }, + template: ` + <sdc-button + #button + [text]="_text" + [testId]="_testId" + [type]="_type" + [show_spinner]="_show_spinner" + [spinner_position]="_spinner_position" + (click)="buttonClick(button)" + > + </sdc-button> + ` + }; + }); + + +stories.add(storiesNames.buttonFileOpener, () => { + + const _text = text('text', 'Open file'); + const _testId = text('testId', 'button-test-id-file-opener'); + const _type = select('type', buttonTypes, 'primary', ''); + const _extensions = text('extensions', 'ts,js'); + const fileUpload = text('(fileUpload)', 'call back function when file upload'); + + return { + props: { + fileUpload: action('File updaload action'), + _text, _testId, _type, _extensions + }, + template: ` + <sdc-button-file-opener + #button + [text]="_text" + [testId]="_testId" + [type]="_type" + [extensions]="_extensions" + (fileUpload)="fileUpload($event)" + > + </sdc-button-file-opener> + ` + }; + }); diff --git a/stories/angular/checkbox.stories.ts b/stories/angular/checkbox.stories.ts new file mode 100644 index 0000000..c02e2e2 --- /dev/null +++ b/stories/angular/checkbox.stories.ts @@ -0,0 +1,50 @@ +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 { CheckboxComponent } from '../../src/angular/components'; +import { RippleClickAnimationDirective } from '../../src/angular/animations/ripple-click.animation.directive'; + +storiesOf('Form elements|Checkbox', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator( + moduleMetadata({ + declarations: [ + CheckboxComponent, + RippleClickAnimationDirective + ], + imports: [ + ] + }) + ) + .add('Simple checkbox', () => { + const _label = text('label', 'Simple checkbox'); + const _checked = boolean('checked', false); + const _disabled = boolean('disabled', false); + const _testId = text('testId', 'smalpe-test-id'); + const _checkedChange = text('*(checkedChange)', 'Event throws when checked changed, see in Action logger tab.'); + + return { + props: { + checkedChange: action('Checkbox value changed '), + _label, _checked, _disabled, _testId + }, + template: ` + <sdc-checkbox + [label]="_label" + [checked]="_checked" + [disabled]="_disabled" + [testId]="_testId" + (checkedChange)="checkedChange($event)" + > + </sdc-checkbox> + ` + } + }, + { notes: `<h2>Checkbox</h2> + Full example of checkbox. + Use the KNOBS tab to change values.` + } +) diff --git a/stories/angular/checklist.stories.ts b/stories/angular/checklist.stories.ts new file mode 100644 index 0000000..92e0ada --- /dev/null +++ b/stories/angular/checklist.stories.ts @@ -0,0 +1,51 @@ +import { storiesOf } from '@storybook/angular'; +import { withKnobs, text, number, boolean, array, select, color, date, button, object } from '@storybook/addon-knobs'; +import { withNotes } from '@storybook/addon-notes'; +import { action, configureActions } from '@storybook/addon-actions'; +import { moduleMetadata } from '@storybook/angular'; +import { ChecklistComponent, CheckboxComponent } from '../../src/angular/components'; +import { ChecklistModel, ChecklistItemModel } from '../../src/angular/common'; +import { RippleAnimationAction } from '../../src/angular/animations/ripple-click.animation.directive'; + +const checkListModelExample: ChecklistModel = new ChecklistModel([],[ + new ChecklistItemModel('apple'), + new ChecklistItemModel('banana'), + new ChecklistItemModel('orange') +]); + +storiesOf('Form elements|Checklist', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator( + moduleMetadata({ + declarations: [ + ChecklistComponent, + RippleAnimationAction, + CheckboxComponent + ], + imports: [ + ] + }) + ) + .add('Simple checklist', () => { + //const _checklistModel = object('checklistModel', checkListModelExample); + const _checkedChange = text('*(checkedChange)', 'Event throws when checklist changed, see in Action logger tab.'); + + return { + props: { + checkedChange: action('Checklist changed '), + checkListModelExample + }, + template: ` + <sdc-checklist + [checklistModel]="checkListModelExample"> + (checkedChange)="checkedChange($event)" + </sdc-checklist> + ` + } + }, + { notes: `<h2>Checklist</h2> + Full example of checklist. + Use the KNOBS tab to change values.` + } +) diff --git a/stories/angular/colors.stories.ts b/stories/angular/colors.stories.ts new file mode 100644 index 0000000..5fc9085 --- /dev/null +++ b/stories/angular/colors.stories.ts @@ -0,0 +1,81 @@ +import { storiesOf } from '@storybook/angular'; +import { moduleMetadata } from '@storybook/angular'; +import { withKnobs, text, number, boolean, array, select, color, date, button, object } from '@storybook/addon-knobs'; +import { withNotes } from '@storybook/addon-notes'; +import { ColorsTable } from './helpers/colors-table.component'; +import { KeysPipe } from './helpers/keys.pipe'; + +const colorMap = [ + { + 'darker-blue': '#323943', + 'dark-blue': '#0568ae', + 'blue': '#009fdb', + 'light-blue': '#1eb9f3', + 'disabled-blue': '#9dd9ef', + 'lighter-blue': '#e6f6fb', + }, + { + 'green': '#4ca90c', + 'light-green': '#56972b', + 'disabled-green': '#a8e083', + }, + { + 'red': '#cf2a2a', + 'light-red': '#ed4141', + 'disabled-red': '#f4adad', + }, + { + 'yellow': '#ffb81c', + 'light-yellow': '#dbbe7e', + 'disabled-yellow': '#aa8432', + }, + { + 'dark-purple': '#702f8a', + 'purple': '#9063cd', + 'light-purple': '#caa2dd', + }, + { + 'dark-gray': '#5a5a5a', + 'gray': '#959595', + 'light-gray': '#d2d2d2', + }, + { + 'silver': '#eaeaea', + 'light-silver': '#f2f2f2', + 'lighter-silver': '#f8f8f8', + }, + { + 'black': '#000000', + 'text-black': '#191919', + 'white': '#ffffff', + } +]; + +storiesOf('Typography|Colors', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator( + moduleMetadata({ + declarations: [ + ColorsTable, + KeysPipe + ], + imports: [ + ] + }) + ) + .add('Colors', () => { + + return { + props: { + colorMap + }, + template: ` + <colors-table tableTitle="Supported colors" [tableMapColors]="colorMap"></colors-table> + ` + } + }, + { notes: `<h2>Colors</h2> + List of supported colors.` + } +) diff --git a/stories/angular/dropdown.stories.ts b/stories/angular/dropdown.stories.ts new file mode 100644 index 0000000..6b4a05a --- /dev/null +++ b/stories/angular/dropdown.stories.ts @@ -0,0 +1,297 @@ +import { storiesOf } from '@storybook/angular'; +import { withKnobs, text, number, boolean, array, select, color, date, button, object } from '@storybook/addon-knobs'; +import { withNotes } from '@storybook/addon-notes'; +import { action, configureActions } from '@storybook/addon-actions'; +import { moduleMetadata } from '@storybook/angular'; +import { CheckboxComponent, DropDownComponent, SvgIconComponent } from '../../src/angular/components'; +import { RippleClickAnimationDirective } from '../../src/angular/animations/ripple-click.animation.directive'; +import { DropDownTypes, IDropDownOption, DropDownOptionType } from '../../src/angular/form-elements/dropdown/dropdown-models'; +import { DropDownTriggerDirective } from '../../src/angular/form-elements/dropdown/dropdown-trigger.directive'; + +const dropdownTypes = Object.values(DropDownTypes); +const options1: IDropDownOption[] = [ + { + label: 'First Option Label', + value: 'firstOptionValue', + }, + { + label: 'Second Option Label', + value: 'secondOptionValue', + }, + { + label: 'Third Option Label', + value: 'thirdOptionValue', + type: DropDownOptionType.Simple + } +]; +const options2: IDropDownOption[] = [ + { + label: 'Header Label', + value: 'headerValue', + type: DropDownOptionType.Header + }, + { + label: 'First Option Label', + value: 'firstOptionValue', + type: DropDownOptionType.Simple + }, + { + label: 'Disabled Option Label', + value: 'headerValue', + type: DropDownOptionType.Disable + }, + { + label: 'Second Option Label', + value: 'secondOptionValue', + type: DropDownOptionType.Simple + }, + { + label: 'Ruler Label', + value: 'rulerValue', + type: DropDownOptionType.HorizontalLine + }, + { + label: 'Third Option Label', + value: 'thirdOptionValue', + type: DropDownOptionType.Simple + }, + { + label: 'Fourth Option Label', + value: 'FourthOptionValue', + type: DropDownOptionType.Simple + }, + { + label: 'Fifth Option Label', + value: 'fifthOptionValue', + type: DropDownOptionType.Simple + }, + { + label: 'Ruler Label', + value: 'rulerValue', + type: DropDownOptionType.HorizontalLine + }, + { + label: 'Third Option Label', + value: 'thirdOptionValue', + type: DropDownOptionType.Simple + }, + { + label: 'Fourth Option Label', + value: 'FourthOptionValue', + type: DropDownOptionType.Simple + }, + { + label: 'Fifth Option Label', + value: 'fifthOptionValue', + type: DropDownOptionType.Simple + } +]; + +storiesOf('Form elements|Dropdown', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator( + moduleMetadata({ + declarations: [ + DropDownComponent, + RippleClickAnimationDirective, + SvgIconComponent, + DropDownTriggerDirective + ], + imports: [ + ] + }) + ) + .add('All options', () => { + const _label = text('label', 'Simple dropdown'); + const _placeHolder = text('placeHolder', 'Sample placeholder'); + const _disabled = boolean('disabled', false); + const _options = object('options', options1); + const _testId = text('testId', 'smalpe-test-id'); + const _required = boolean('required', false); + const _maxHeight = number('maxHeight', 20); + const _selectedOption = object('selectedOption', {}); + const _type = select('type', dropdownTypes, DropDownTypes.Regular); + const _onChange = text('*(onChange)', 'Event throws when dropdown changed, see in Action logger tab.'); + + return { + props: { + onChange: action('Dropdown value changed '), + _label, _placeHolder, _disabled, _required, _testId, _options, _maxHeight, _selectedOption, _type + }, + template: ` + <sdc-dropdown + [label]="_label" + [placeHolder]="_placeHolder" + [type]="_type" + [disabled]="_disabled" + [required]="_required" + [maxHeight]="_maxHeight" + [options]="_options" + [selectedOption]="_selectedOption" + (changed)="onChange($event)" + > + </sdc-dropdown> + ` + } + }, + { notes: `<h2>Checkbox</h2> + Full example of checkbox. + Use the KNOBS tab to change values.` + } +) +.add('With groups', () => { + const _label = text('label', 'Simple dropdown'); + const _placeHolder = text('placeHolder', 'Sample placeholder'); + const _disabled = boolean('disabled', false); + const _options = object('options', options2); + const _testId = text('testId', 'smalpe-test-id'); + const _required = boolean('required', false); + const _maxHeight = number('maxHeight', 20); + const _selectedOption = object('selectedOption', {}); + const _type = select('type', dropdownTypes, DropDownTypes.Regular); + const _onChange = text('*(onChange)', 'Event throws when dropdown changed, see in Action logger tab.'); + + return { + props: { + onChange: action('Dropdown value changed '), + _label, _placeHolder, _disabled, _required, _testId, _options, _maxHeight, _selectedOption, _type + }, + template: ` + <sdc-dropdown + [label]="_label" + [placeHolder]="_placeHolder" + [type]="_type" + [disabled]="_disabled" + [required]="_required" + [maxHeight]="_maxHeight" + [options]="_options" + [selectedOption]="_selectedOption" + (changed)="onChange($event)" + > + </sdc-dropdown> + ` + } + }, + { notes: `<h2>Checkbox</h2> + Full example of checkbox with groups. + Use the KNOBS tab to change values.` + } +) +.add('Pre selected', () => { + const _label = text('label', 'Simple dropdown'); + const _placeHolder = text('placeHolder', 'Sample placeholder'); + const _disabled = boolean('disabled', false); + const _options = object('options', options2); + const _testId = text('testId', 'smalpe-test-id'); + const _required = boolean('required', false); + const _maxHeight = number('maxHeight', 20); + const _selectedOption = object('selectedOption', { label: 'Second Option Label', value: 'secondOptionValue'}); + const _type = select('type', dropdownTypes, DropDownTypes.Regular); + const _onChange = text('*(onChange)', 'Event throws when dropdown changed, see in Action logger tab.'); + + return { + props: { + onChange: action('Dropdown value changed '), + _label, _placeHolder, _disabled, _required, _testId, _options, _maxHeight, _selectedOption, _type + }, + template: ` + <sdc-dropdown + [label]="_label" + [placeHolder]="_placeHolder" + [type]="_type" + [disabled]="_disabled" + [required]="_required" + [maxHeight]="_maxHeight" + [options]="_options" + [selectedOption]="_selectedOption" + (changed)="onChange($event)" + > + </sdc-dropdown> + ` + } + }, + { notes: `<h2>Checkbox</h2> + Full example of checkbox with groups pre selected option. + Use the KNOBS tab to change values.` + } +) +.add('Headless mode', () => { + const _label = text('label', 'Simple dropdown'); + const _placeHolder = text('placeHolder', 'Sample placeholder'); + const _disabled = boolean('disabled', false); + const _options = object('options', options1); + const _testId = text('testId', 'smalpe-test-id'); + const _required = boolean('required', false); + const _maxHeight = number('maxHeight', 20); + const _selectedOption = object('selectedOption', {}); + const _type = select('type', dropdownTypes, DropDownTypes.Headless); + const _onChange = text('*(onChange)', 'Event throws when dropdown changed, see in Action logger tab.'); + + return { + props: { + onChange: action('Dropdown value changed '), + _label, _placeHolder, _disabled, _required, _testId, _options, _maxHeight, _selectedOption, _type + }, + template: ` + <button SdcDropdownTrigger [dropDown]="dropDown1">Click to toggle!</button> + <sdc-dropdown + #dropDown1 + [label]="_label" + [placeHolder]="_placeHolder" + [type]="_type" + [disabled]="_disabled" + [required]="_required" + [maxHeight]="_maxHeight" + [options]="_options" + [selectedOption]="_selectedOption" + (changed)="onChange($event)" + > + </sdc-dropdown> + ` + } + }, + { notes: `<h2>Checkbox</h2> + Full example of checkbox (headless mode). + Use the KNOBS tab to change values.` + } +) +.add('Insert text (auto)', () => { + const _label = text('label', 'Simple dropdown'); + const _placeHolder = text('placeHolder', 'Sample placeholder'); + const _disabled = boolean('disabled', false); + const _options = object('options', options1); + const _testId = text('testId', 'smalpe-test-id'); + const _required = boolean('required', false); + const _maxHeight = number('maxHeight', 20); + const _selectedOption = object('selectedOption', {}); + const _type = select('type', dropdownTypes, DropDownTypes.Auto); + const _onChange = text('*(onChange)', 'Event throws when dropdown changed, see in Action logger tab.'); + + return { + props: { + onChange: action('Dropdown value changed '), + _label, _placeHolder, _disabled, _required, _testId, _options, _maxHeight, _selectedOption, _type + }, + template: ` + <sdc-dropdown + #dropDown1 + [label]="_label" + [placeHolder]="_placeHolder" + [type]="_type" + [disabled]="_disabled" + [required]="_required" + [maxHeight]="_maxHeight" + [options]="_options" + [selectedOption]="_selectedOption" + (changed)="onChange($event)" + > + </sdc-dropdown> + ` + } + }, + { notes: `<h2>Checkbox</h2> + Full example of checkbox (auto mode). + Use the KNOBS tab to change values.` + } +) diff --git a/stories/angular/filter-bar.stories.ts b/stories/angular/filter-bar.stories.ts new file mode 100644 index 0000000..a48b02f --- /dev/null +++ b/stories/angular/filter-bar.stories.ts @@ -0,0 +1,51 @@ +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 { FilterBarComponent, InputComponent } from '../../src/angular/components'; +import { FormElementsModule } from '../../src/angular/form-elements/form-elements.module'; + +storiesOf('Form elements|Filterbar', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator( + moduleMetadata({ + declarations: [ + FilterBarComponent + ], + imports: [ + FormElementsModule + ] + }) + ) + .add('Filterbar', () => { + const _label = text('label', 'Filterbar label'); + const _placeholder = text('placeholder', 'Filterbar placeholder'); + const _debounceTime = number('debounceTime', 200); + // const _testId = text('testId', 'smalpe-test-id'); + const _searchQuery = text('searchQuery', ''); + const _searchQueryOutput = text('*(searchQuery)', 'Event throws when search query changed'); + const _searchQueryChange = text('*(searchQueryChange)', 'Event throws when search query changed, see in Action logger tab.'); + + return { + props: { + onChange: action('Search query value changed '), + _label, _searchQuery, _placeholder, _debounceTime + }, + template: ` + <sdc-filter-bar + [placeholder]="_placeholder" + [label]="_label" + [debounceTime]="_debounceTime" + [(searchQuery)]="_searchQuery" + (searchQueryChange)="onChange($event)"> + </sdc-filter-bar> + ` + } + }, + { notes: `<h2>Filterbar</h2> + The filter bar component text is updated (after debounce time, default 200 miliseconds) while user write something. + Use the KNOBS tab to change values.` + } +) diff --git a/stories/angular/helpers/autocomplete-server-mock.json b/stories/angular/helpers/autocomplete-server-mock.json new file mode 100644 index 0000000..2521108 --- /dev/null +++ b/stories/angular/helpers/autocomplete-server-mock.json @@ -0,0 +1,8 @@ +[ + {"id": "redId", "color": "red"}, + {"id": "yellowId", "color": "yellow"}, + {"id": "orangeId", "color": "orange"}, + {"id": "greenId", "color": "green"}, + {"id": "whiteId", "color": "white"}, + {"id": "blackId", "color": "black"} +] diff --git a/stories/angular/helpers/colors-table.component.ts b/stories/angular/helpers/colors-table.component.ts new file mode 100644 index 0000000..4c8f83f --- /dev/null +++ b/stories/angular/helpers/colors-table.component.ts @@ -0,0 +1,28 @@ +import { Component, Input } from "@angular/core"; + +@Component({ + selector: "colors-table", + template: ` + + <h1>{{tableTitle}}</h1> + <div class="colors-table"> + <div class="color-group" *ngFor="let colorGroup of tableMapColors"> + <div class="color-section" *ngFor="let color of colorGroup | keys"> + <div class='sdc-bc-{{color}} color-circle'></div> + <div>{{color}}</div> + <div>{{colorGroup[color]}}</div> + </div> + </div> + </div> +` +}) +export class ColorsTable { + + @Input() tableTitle: string; + @Input() tableMapColors: Object; + + constructor() { + + } + +} diff --git a/stories/angular/helpers/index.ts b/stories/angular/helpers/index.ts new file mode 100644 index 0000000..00c35de --- /dev/null +++ b/stories/angular/helpers/index.ts @@ -0,0 +1,21 @@ +import { NgModule } from "@angular/core"; +import { KeysPipe } from "./keys.pipe"; +import { ColorsTable } from "./colors-table.component"; +import { CommonModule } from "@angular/common"; +import { FormsModule } from "@angular/forms"; +import { ButtonComponent } from "../../../src/angular/components"; + +@NgModule({ + declarations: [ + ColorsTable, + KeysPipe, + ButtonComponent + ], + imports: [ + CommonModule, + FormsModule, + ], + exports: [] +}) +export class SdcStoriesHelperModule { +} diff --git a/stories/angular/helpers/keys.pipe.ts b/stories/angular/helpers/keys.pipe.ts new file mode 100644 index 0000000..2a58cd8 --- /dev/null +++ b/stories/angular/helpers/keys.pipe.ts @@ -0,0 +1,13 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({name: 'keys'}) +export class KeysPipe implements PipeTransform { + transform(value, args:string[]) : any { + let keys = []; + for (let key in value) { + keys.push(key); + } + return keys; + } +} + diff --git a/stories/angular/helpers/modal-consumer.component.ts b/stories/angular/helpers/modal-consumer.component.ts new file mode 100644 index 0000000..87450e0 --- /dev/null +++ b/stories/angular/helpers/modal-consumer.component.ts @@ -0,0 +1,151 @@ +import {Component, Input, Output, EventEmitter, ComponentRef} from "@angular/core"; +import { ModalService } from "../../../src/angular/modals/modal.service"; +import { IModalConfig, ModalType, ModalSize } from "../../../src/angular/modals/models/modal-config"; +import { ModalButtonComponent } from './../../../src/angular/modals/modal-button.component'; +import { Placement, ButtonType } from "../../../src/angular/common/enums"; +import { ModalComponent } from "../../../src/angular/components"; +import { ModalInnerContent } from "./modal-inner-content-example.component"; +import {ButtonComponent} from "../../../src/angular/buttons/button.component" + +const MODAL_CONTENT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non,' + +'pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra'; + +@Component({ + selector: 'modal-consumer', + template: `<sdc-button [text]="'View Modal'" (click)="openModal()"></sdc-button>` +}) +export class ModalConsumerComponent { + @Input() action: string; + private customModal1: ModalComponent; + private customModal2: ModalComponent; + + constructor(private modalService: ModalService) { + } + + private openModal = (): void => { + if (this[this.action]) { + this[this.action](); + } + } + + private openInfoModal = (): void => { + this.modalService.openInfoModal("Info modal title", MODAL_CONTENT, 'infoModalTestId'); + } + + private openWarningModal = (): void => { + this.modalService.openWarningModal("Warning modal title", MODAL_CONTENT, 'warningModalTestId'); + } + + private openErrorModal = (): void => { + this.modalService.openErrorModal("Error modal title", MODAL_CONTENT, 'errorModalTestId'); + } + + private openSuccessModal = (): void => { + this.modalService.openSuccessModal("Success modal title", MODAL_CONTENT, 'successModalTestId'); + } + + private openInfoModalWithCustomButtons = (): void => { + const buttons = [ + { text: 'CONFIRM', type: ButtonType.info, callback: this.onConfirmAction, closeModal: true }, + { text: 'CANCEL', type: ButtonType.info, closeModal: true } + ] as ModalButtonComponent[]; + this.modalService.openInfoModal('Info modal title', MODAL_CONTENT, "infoModalCustomTestId", buttons); + } + + private openWarningModalWithCustomButtons = (): void => { + const buttons = [ + { text: 'SAVE', type: ButtonType.warning, callback: this.onSaveAction, closeModal: true }, + { text: 'APPLY', type: ButtonType.warning, callback: this.onApplyAction }, + { text: 'CANCEL', type: ButtonType.warning, closeModal: true } + ] as ModalButtonComponent[]; + this.modalService.openWarningModal('Warning modal title', MODAL_CONTENT, "warningModalCustomTestId", buttons); + } + + private onConfirmAction = (): void => { + alert("Action has been confirmed, modal will be closed"); + } + + private onSaveAction = (): void => { + alert("Action has been saved, modal will be close"); + } + + private onApplyAction = (): void => { + alert("Action has been applied, modal will not be close"); + } + + private openCustomModal1 = (): void => { + const modalConfig = { + size: ModalSize.medium, + title: 'Modal title', + type: ModalType.custom, + testId: 'sampleTestIdModal1', + buttons: [ + {id: "saveButton", text: "Save", callback: this.customModalOnSave1, closeModal: false}, + {id: "cancelButton", text: "Cancel", size: 'x-small', type: ButtonType.secondary , closeModal: true} + ] + } as IModalConfig; + this.customModal1 = this.modalService.openCustomModal(modalConfig, ModalInnerContent, {name: "Sample Content"}); + } + + private customModalOnSave1 = (): void => { + const saveButton: ModalButtonComponent = this.customModal1.getButtonById("saveButton"); + saveButton.show_spinner = true; + saveButton.spinner_position = Placement.right; + + // Show spinner for 2 seconds + console.log('Saving example, please wait ...'); + window.setTimeout((button: ModalButtonComponent) => { + button.show_spinner = false; + console.log('Finish saving'); + }, 2000, saveButton); + } + + private openCustomModal2 = (): void => { + const modalConfig = { + size: ModalSize.medium, + title: 'Title', + type: ModalType.custom, + testId: 'sampleTestIdModal2', + buttons: [ + {text: "Change title", callback: this.customModalChangeTitle2, closeModal: false}, + {text: "Change buttons", callback: this.customModalUpdateButtons2, closeModal: false}, + {text: "Disable close", callback: this.customModalUDisableClose2, closeModal: false} + ] + } as IModalConfig; + this.customModal2 = this.modalService.openCustomModal(modalConfig, ModalInnerContent, {name: "Sample Content"}); + } + + private customModalUDisableClose2 = (): void => { + this.customModal2.getCloseButton().disabled = true; + } + + private customModalChangeTitle2 = (): void => { + this.customModal2.setTitle('New title'); + } + + private customModalUpdateButtons2 = (): void => { + const newButtons = [ + {text: "Change title", callback: this.customModalChangeTitle2, closeModal: false}, + {text: "Do nothing", closeModal: false} + ] as ModalButtonComponent[]; + this.customModal2.setButtons(newButtons); + } + + private openErrorModalFromModal = ():void => { + this.modalService.openErrorModal("Error", "Error example!!", "second-modal"); + } + + private openCustomModal3 = (): void => { + const modalConfig = { + size: ModalSize.medium, + title: 'Title', + type: ModalType.custom, + testId: 'sampleTestIdModal3', + buttons: [ + {text: "Open Error", callback: this.openErrorModalFromModal, closeModal: false} + ] + } as IModalConfig; + this.modalService.openCustomModal(modalConfig, ModalInnerContent, {name: "Sample Content"}); + } + +} diff --git a/stories/angular/helpers/modal-inner-content-example.component.ts b/stories/angular/helpers/modal-inner-content-example.component.ts new file mode 100644 index 0000000..7e59ab1 --- /dev/null +++ b/stories/angular/helpers/modal-inner-content-example.component.ts @@ -0,0 +1,16 @@ +import { Component, Input } from "@angular/core"; + +@Component({ + selector: "inner-content", + template: ` + <div> + <sdc-input label="Enter value" [(value)]="name"> </sdc-input> + <sdc-input label="Enter value" [(value)]="name"> </sdc-input> + <sdc-input label="Enter value" [(value)]="name"> </sdc-input> + </div> +` +}) +export class ModalInnerContent { + + @Input() name:string; +} diff --git a/stories/angular/index.ts b/stories/angular/index.ts new file mode 100644 index 0000000..b42ef85 --- /dev/null +++ b/stories/angular/index.ts @@ -0,0 +1,112 @@ +import { storiesOf } from '@storybook/angular'; +import '!style-loader!css-loader!sass-loader!./styles.scss'; + +storiesOf('Welcome', module).add('to Storybook', () => ({ + template: ` + <div class="storybook-welcome"> + <h1>ONAP-UI-ANGULAR Style-Guide and Components</h1> + <p> + This project aims to create a unified UI styled components for multiple development teams who work on the same web-based applications. + This repository contains the definition of all the basic widgets and reusable controllers. + </p> + Note: the project is build of 3 different projects: + <ul> + <li><a href="https://github.com/onap-sdc/onap-ui-common">onap-ui-common</a> contains HTML and SCSS files for all components.</li> + <li><a href="https://github.com/onap-sdc/onap-ui-angular">onap-ui-angular</a> contains Angular components according to the HTML defined in onap-ui-common.</li> + <li><a href="https://github.com/onap-sdc/onap-ui-react">onap-ui-react</a> contains React components according to the HTML defined in onap-ui-common.</li> + </ul> + + <h2>Usage</h2> + <h3>Link the library's CSS file</h3> + <p> + There are several options to link to onap-ui-angular CSS file: + </p> + + <h4>SCSS</h4> + <code> + @import "path_to_node_modules/onap-ui/css/style.css"; + </code> + <br><br> + + <h4>HTML</h4> + <code> + <![CDATA[ + <link rel="stylesheet" href="path_to_node_modules/onap-ui/css/style.css"> + ]]> + </code> + <br><br> + + <h4>As Module (Using loading tool, i.e. <a href="https://webpack.github.io/">Webpack</a>)</h4> + <code>import "onap-ui/css/style.css";</code> + <br><br> + + <h4>Angular CLI projects</h4> + <p>You can add this line to style.css file:</p> + <code>@import "../node_modules/onap-ui/css/style.css";</code> + <br><br> + + <h3>Using the library in latest Angular (6)</h3> + <h4>Add the library to your module</h4> + <code> + <![CDATA[ + import { SdcUiComponentsModule, SdcUiComponents } from 'onap-ui-angular'; + @NgModule({ + declarations: [ + AppComponent + ], + imports: [ + BrowserModule, + FormsModule, + HttpModule, + SdcUiComponentsModule + ], + providers: [ + SdcUiComponents.ModalService + ], + bootstrap: [AppComponent] + }) + export class AppModule { } + ]]> + </code> + <br><br> + + <h2>Running storybook</h2> + The components in this library are displayed via <a href="https://github.com/storybooks/storybook">storybook</a>. + Head to <a href="http://onap-sdc.github.io/onap-ui-angular">http://onap-sdc.github.io/onap-ui-angular</a> to see the components that are in <b>master</b>. + While developing, just run <b>npm run storybook</b> in your terminal to launch a local storybook server where you can see your changes. For deploying storybook to your own fork repository, refer to the guides section below. + + <h3>Useful guides</h3> + <ul> + <li><a href="https://github.com/onap-sdc/onap-ui-angular/wiki/Adding-a-new-component">Adding a new component</a></li> + <li><a href="https://github.com/onap-sdc/onap-ui-angular/wiki/Deploying-storybook-to-a-fork's-github-pages">Deploying storybook to a fork's github pages</a></li> + <li><a href="https://github.com/onap-sdc/onap-ui-angular/wiki/Understanding-project-build">Understanding project build</a></li> + </ul> + + <h3>Having some trouble? Have an issue?</h3> + For bugs and issues, please use the <a href="https://github.com/onap-sdc/onap-ui-angular/issues">issues</a> page + + <h3>How to Contribute</h3> + <ul> + <li> + Contribution can be made only by following these guide lines + </li> + <li> + This project combines both <b>React</b> & <b>Angular</b> framework libraries. + Hence, every change in the basic HTML files structure, must be followed by changes on react and angular + projects (<a href="https://github.com/onap-sdc/onap-ui-angular">onap-ui-angular</a>, <a href="https://github.com/onap-sdc/onap-ui-react">onap-ui-react</a>). + </li> + <li> + There will be no any 3rd party UI framework imported (i.e. <b>Bootstrap</b>, <b>Material</b>, <b>Foundation</b>... etc.). + </li> + <li> + Contribution are done only by the <a href="https://github.com/onap-sdc/onap-ui-angular/wiki/Contribution-guide">contribution guide</a>. + Contributions submitted not in this format and guidelines will not be considered. + </li> + </ul> + </div> + `, + props: { + }, + moduleMetadata: { + }, +})); diff --git a/stories/angular/infinite-scroll.stories.ts b/stories/angular/infinite-scroll.stories.ts new file mode 100644 index 0000000..3a53a4f --- /dev/null +++ b/stories/angular/infinite-scroll.stories.ts @@ -0,0 +1,181 @@ +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 { InfiniteScrollDirective } from '../../src/angular/components'; + +const basicStyle = ` + .scroll-container { + margin: 12px; + border: none; + padding: 5px; + width: 200px; + height: 100px; + overflow: auto; + font-size: 20px !important; + box-shadow: #666 1px 1px 10px; + } + .example-source { + background: #eeeeee; + padding: 10px; + border: 1px solid #999999; + } + .example-source pre { + overflow: hidden; + background: #dddddd; + margin-top: 5px; + padding: 5px; + user-select: text; + } +`; + +const makeBasicStyleDistance = (distance: number) => ` + .scroll-container::after { + display: block; + content: ''; + height: ${distance}px; + background: red; + } +`; + +storiesOf('Infinite-Scroll', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator( + moduleMetadata({ + declarations: [ + InfiniteScrollDirective + ], + imports: [ + ] + }) + ) + .add('Simple', () => { + const _infiniteScroll = text('infiniteScroll', 'Event throws when scroll reach down'); + + return { + props: { + hitBottomCount: 0, + onScrollHitBottom: () => { + action('scroll hit bottom')(); + this.hitBottomCount++; + }, + numLines: Array(20).fill(null) + }, + styles: [basicStyle], + template: ` + <div (infiniteScroll)="onScrollHitBottom()" class="scroll-container"> + <div *ngFor="let _i of numLines; let i=index"> + Line {{i + 1}} + </div> + </div> + Hit bottom for <b>{{hitBottomCount}}</b> times! + ` + } + }, + { notes: `<h2>Infinite-Scroll</h2> + Simple infinite scroll, throws event when reach bottom (see in action logger). + Use the KNOBS tab to change values.` + } +) +.add('With bottom distance', () => { + const _infiniteScrollDistance = number('infiniteScrollDistance', 20); + const _infiniteScroll = text('infiniteScroll', 'Event throws when scroll reach down'); + + return { + props: { + hitBottomCount: 0, + onScrollHitBottom: () => { + action('scroll hit bottom')(); + this.hitBottomCount++; + }, + numLines: Array(20).fill(null), + _infiniteScrollDistance + }, + styles: [basicStyle, makeBasicStyleDistance(50)], + template: ` + <div (infiniteScroll)="onScrollHitBottom()" [infiniteScrollDistance]="_infiniteScrollDistance" class="scroll-container"> + <div *ngFor="let _i of numLines; let i=index"> + Line {{i + 1}} + </div> + </div> + Hit bottom for <b>{{hitBottomCount}}</b> times! + ` + } + }, + { notes: `<h2>Infinite-Scroll</h2> + Simple infinite scroll with distance at the bottom, throws event when reach bottom (see in action logger). + Use the KNOBS tab to change values.` + } +) +.add('Expanding content synchrony', () => { + const _infiniteScrollDistance = number('infiniteScrollDistance', 20); + const _infiniteScroll = text('infiniteScroll', 'Event throws when scroll reach down'); + + return { + props: { + hitBottomCount: 0, + onScrollHitBottom: () => { + action('scroll hit bottom')(); + this.hitBottomCount++; + this.insertPageImmediately(this.pageCount + 1); + this.pageCount++; + }, + numLines: Array(20).fill(null), + _infiniteScrollDistance + }, + styles: [basicStyle, makeBasicStyleDistance(50)], + template: ` + <div (infiniteScroll)="onScrollHitBottom()" [infiniteScrollDistance]="_infiniteScrollDistance" class="scroll-container"> + <div *ngFor="let _i of numLines; let i=index"> + Line {{i + 1}} + </div> + </div> + Hit bottom for <b>{{hitBottomCount}}</b> times! + ` + } + }, + { notes: `<h2>Infinite-Scroll</h2> + Simple infinite scroll with distance at the bottom, throws event when reach bottom (see in action logger). + Use the KNOBS tab to change values.` + } +) +.add('Expanding content asynchrony', () => { + const _infiniteScrollDistance = number('infiniteScrollDistance', 20); + const _infiniteScroll = text('infiniteScroll', 'Event throws when scroll reach down'); + + return { + props: { + hitBottomCount: 0, + onScrollHitBottom: () => { + action('scroll hit bottom')(); + this.hitBottomCount++; + if (!this.isPageLoading) { + this.isPageLoading = true; + this.loadPageAsync(this.pageCount + 1, 5000).then(() => { + this.pageCount++; + this.isPageLoading = false; + }); + } + }, + numLines: Array(20).fill(null), + _infiniteScrollDistance + }, + styles: [basicStyle, makeBasicStyleDistance(50)], + template: ` + <div (infiniteScroll)="onScrollHitBottom()" [infiniteScrollDistance]="_infiniteScrollDistance" class="scroll-container"> + <div *ngFor="let _i of numLines; let i=index"> + Line {{i + 1}} + </div> + </div> + Hit bottom for <b>{{hitBottomCount}}</b> times!<br/> + Loaded {{pageCount}} pages! <span *ngIf="isPageLoading">LOADING page #{{this.pageCount + 1}} ...</span> + ` + } + }, + { notes: `<h2>Infinite-Scroll</h2> + Simple infinite scroll with distance at the bottom, throws event when reach bottom (see in action logger). + Use the KNOBS tab to change values.` + } +) diff --git a/stories/angular/input.stories.ts b/stories/angular/input.stories.ts new file mode 100644 index 0000000..1c63427 --- /dev/null +++ b/stories/angular/input.stories.ts @@ -0,0 +1,120 @@ +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 { CheckboxComponent, InputComponent } from '../../src/angular/components'; +import { RippleClickAnimationDirective } from '../../src/angular/animations/ripple-click.animation.directive'; +import { FormElementsModule } from '../../src/angular/form-elements/form-elements.module'; + +storiesOf('Form elements|Input', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator( + moduleMetadata({ + declarations: [ + ], + imports: [ + FormElementsModule + ] + }) + ) + .add('Simple', () => { + const _label = text('label', 'Please Enter value'); + const _name = text('name', 'InputName'); + const _testId = text('testId', 'sample-test-id'); + + return { + props: { + checkedChange: action('Checkbox value changed '), + _label, _name, _testId + }, + template: ` + <sdc-input + [label]="_label" + [name]="_name" + [testId]="_testId" + > + </sdc-input> + ` + } + }, + { notes: `<h2>Simple Input</h2> + Simple input example. + Use the KNOBS tab to change values.` + } +) +.add('With debounce', () => { + const _label = text('label', 'Please Enter value'); + const _name = text('name', 'InputName'); + const _testId = text('testId', 'sample-test-id'); + const _debounceTime = number('debounceTime', 1000); + const _valueChange = text('*(valueChange)', 'Throws event when value changed.'); + + return { + props: { + onValueChanged: action('Input value changed '), + _label, _name, _testId, _debounceTime + }, + template: ` + <sdc-input + [label]="_label" + [name]="_name" + [testId]="_testId" + [debounceTime]="_debounceTime" + (valueChange)=onValueChanged($event); + > + </sdc-input> + ` + } + }, + { notes: `<h2>Input with debounce</h2> + Wait for 1000 miliseconds for value changed event . + Use the KNOBS tab to change values.` + } +) +.add('Full options', () => { + const _label = text('label', 'Please Enter value'); + const _name = text('name', 'InputName'); + const _placeHolder = text('placeHolder', 'Input placeHolder'); + const _value = text('value', 'Some value'); + const _type = select('type', ['text', 'number', 'email']); + const _disabled = boolean('disabled', false); + const _required = boolean('required', false); + const _testId = text('testId', 'sample-test-id'); + const _debounceTime = number('debounceTime', 1000); + const _minLength = number('minLength', 4); + const _maxLength = number('maxLength', 10); + const _classNames = text('classNames', 'custom-input-class'); + const _valueChange = text('*(valueChange)', 'Throws event when value changed.'); + + return { + props: { + onValueChanged: action('Input value changed '), + _label, _name, _value, _testId, _debounceTime, _type, _disabled, _placeHolder, _required, _maxLength, _minLength, _classNames + }, + template: ` + <sdc-input + [label]="_label" + [name]="_name" + [placeHolder]="_placeHolder" + [type]="_type" + [value]="_value" + [disabled]="_disabled" + [required]="_required" + [testId]="_testId" + [minLength]="_minLength" + [maxLength]="_maxLength" + [debounceTime]="_debounceTime" + [classNames]="_classNames" + (valueChange)=onValueChanged($event); + > + </sdc-input> + ` + } + }, + { notes: `<h2>Input with debounce</h2> + Wait for 1000 miliseconds for value changed event . + Use the KNOBS tab to change values.` + } +) diff --git a/stories/angular/loader.stories.ts b/stories/angular/loader.stories.ts new file mode 100644 index 0000000..ccc4152 --- /dev/null +++ b/stories/angular/loader.stories.ts @@ -0,0 +1,147 @@ +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 { LoaderComponent, ButtonComponent, InputComponent, SvgIconComponent } from '../../src/angular/components'; +import { FormElementsModule } from '../../src/angular/form-elements/form-elements.module'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { CommonModule } from '@angular/common'; +import { LoaderService } from '../../src/angular/loader/loader.service'; +import { LoaderSize } from '../../src/angular/loader/loader.component'; + +storiesOf('Loader', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator( + moduleMetadata({ + declarations: [ + LoaderComponent, + ButtonComponent, + InputComponent, + SvgIconComponent + ], + imports: [ + CommonModule, + FormsModule, + ReactiveFormsModule + ], + providers: [ + LoaderService + ] + }) + ) + .add('Relative loader', () => { + const _size = select('size', Object.values(LoaderSize), LoaderSize.large); + const _name = text('name', 'RelativeLoader'); + const _active = boolean('active', false); + + return { + props: { + activateLogger: (loader) => { + loader.activate(); + action('Loader activated')(); + }, + deactivateLogger: (loader) => { + loader.deactivate(); + action('Loader deactivated')(); + }, + _size, _name, _active + }, + template: ` + <h2>Loader visible: {{_active}}</h2> + <sdc-loader #loader1 [size]="_size" [name]="_name" [(active)]="_active"> + <div style="border:1px solid black; padding:20px 100px;"> + <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input> + <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input> + <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input> + <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input> + </div> + </sdc-loader > + <div style="margin:10px 0px;"> + <sdc-button text="Show loader" (click)="activateLogger(loader1)"></sdc-button> + <sdc-button text="Hide loader" (click)="deactivateLogger(loader1)"></sdc-button> + </div> + ` + } + }, + { notes: `<h2>Relative loader</h2> + Relative loader that wraps dom elements. + Use the KNOBS tab to change values.` + } +) +.add('Relative loader with service', () => { + const _size = select('size', Object.values(LoaderSize), LoaderSize.large); + const _name = text('name', 'RelativeLoader'); + const _active = boolean('active', false); + + return { + props: { + activateLogger: (loader) => { + loader.activate(); + action('Loader activated')(); + }, + deactivateLogger: (loader) => { + loader.deactivate(); + action('Loader deactivated')(); + }, + _size, _name, _active + }, + template: ` + <h2>Loader visible: {{_active}}</h2> + <sdc-loader #loader1 [size]="_size" [name]="_name" [(active)]="_active"> + <div style="border:1px solid black; padding:20px 100px;"> + <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input> + <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input> + <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input> + <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input> + </div> + </sdc-loader > + <div style="margin:10px 0px;"> + <sdc-button text="Show loader" (click)="activateLogger(loader1)"></sdc-button> + <sdc-button text="Hide loader" (click)="deactivateLogger(loader1)"></sdc-button> + </div> + ` + } + }, + { notes: `<h2>Relative loader</h2> + Relative loader that wraps dom elements. + Use the KNOBS tab to change values.` + } +) + + + + + + + + +.add('General loader', () => { + const _size = select('size', Object.values(LoaderSize), LoaderSize.large); + const _name = text('name', 'global'); + const _global = boolean('global', true); + + return { + props: { + activateLogger: (loader) => { + loader.loaderService.activate(loader.name); + setTimeout(() => { + loader.loaderService.deactivate(loader.name); + }, 2000); + action('Global loader activated')(); + }, + _size, _name, _global + }, + template: ` + <sdc-loader [global]="_global" [name]="_name" [size]="_size" #globalLoader></sdc-loader> + <sdc-button text="Show global loader" (click)="activateLogger(globalLoader)"></sdc-button> + ` + } + }, + { notes: `<h2>General loader</h2> + General loader to hide full screen. + For this sample added setTimeout() function so the loader will deactivated after 2 seconds. + Use the KNOBS tab to change values.` + } +) diff --git a/stories/angular/modal.stories.ts b/stories/angular/modal.stories.ts new file mode 100644 index 0000000..fdd42dc --- /dev/null +++ b/stories/angular/modal.stories.ts @@ -0,0 +1,59 @@ +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 { FormElementsModule } from '../../src/angular/form-elements/form-elements.module'; +import { ModalModule } from '../../src/angular/modals/modal.module'; +import { ModalConsumerComponent } from './helpers/modal-consumer.component'; +import { ModalService } from '../../src/angular/services'; +import { ButtonsModule } from '../../src/angular/buttons/buttons.module'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +let stories = storiesOf('Modal', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator( + moduleMetadata({ + declarations: [ + ModalConsumerComponent + ], + imports: [ + ModalModule, + FormElementsModule, + ButtonsModule, + BrowserAnimationsModule + ], + providers: [ + ModalService + ] + }) + ) + const modalTypes = ['Info', 'Warning', 'Error', 'Success']; + + modalTypes.forEach((buttonType) => { + + stories.add('Modal' + buttonType, () => { + + return { + props: { + openModal: action('Modal opened (see in action logger tab)'), + buttonType + }, + template: + `<b> ${buttonType} Modal</b><br><br> + <modal-consumer [action]="'open' + this.buttonType +'Modal'"></modal-consumer>` + + }; + + }, + { notes: `<h2>` + buttonType + ` modal</h2> + When click on view model ` + buttonType + ` model will open`+ + `<br>Source Code:` + + `<br><b>this.modalService.open`+ buttonType + `Modal('`+ buttonType + ` modal title', '`+ buttonType + + ` modal content', '`+ buttonType + `ModalTestId');</b>`+ + `<br>Use the KNOBS tab to change values.` + } + + ); + }); diff --git a/stories/angular/multiline-ellipsis.stories.ts b/stories/angular/multiline-ellipsis.stories.ts new file mode 100644 index 0000000..ab830bb --- /dev/null +++ b/stories/angular/multiline-ellipsis.stories.ts @@ -0,0 +1,77 @@ +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 { MultilineEllipsisModule } from '../../src/angular/multiline-ellipsis/multiline-ellipsis.module'; +import { ButtonsModule } from '../../src/angular/buttons/buttons.module'; +import { ButtonComponent } from '../../src/angular/buttons/button.component'; + +let stories = storiesOf('Multiline ellipsis', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator( + moduleMetadata({ + declarations: [ + + ], + imports: [ + MultilineEllipsisModule, + ButtonsModule + ] + }) + ) + + let containslines = true; + let containslineHeight = true; + let containsClassName = true; + let containsChangeText = true + + createStory(stories, "All options", containslines, containslineHeight, containsClassName, containsChangeText, "Multiline-ellipsis", "Full example of simple multiline ellipsis."); + createStory(stories, "With number of line", containslines, !containslineHeight, !containsClassName, !containsChangeText, "Multiline-ellipsis", "Example of simple multiline ellipsis With number of line."); + createStory(stories, "With line hight", !containslines, containslineHeight, !containsClassName, !containsChangeText, "Multiline-ellipsis", "Example of simple multiline ellipsis With line hight."); + createStory(stories, "With class name", !containslines, !containslineHeight, containsClassName, !containsChangeText, "Multiline-ellipsis", "Example of simple multiline ellipsis With class name."); + createStory(stories, "With change text", !containslines, !containslineHeight, !containsClassName, containsChangeText, "Multiline-ellipsis", "Example of simple multiline ellipsis With change text."); + + function createStory(stories, title, containslines, containslineHeight, containsClassName, containsChangeText, notesTitle, notesText){ + stories.add(title, () => { + const _lines = containslines || containslineHeight ? number('number of lines', 3) : null; + const _lineHeight = containslineHeight ? text('Line height', '18px') : null; + const _className = containsClassName ? text('Class name', 'yellow-ellipsis'): null; + const _shortText = containsChangeText ? text('Short text', 'Short text - No ellipsis!') :null; + const _longText = text('Long text','Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et molestie erat, sit amet rutrum purus. Mauris tristique efficitur felis, rutrum scelerisque enim sodales eu. Cras tristique ipsum a elementum auctor. Donec et elit id sapien tempus posuere. Nulla condimentum semper nisi, ac convallis augue dignissim nec. Nunc vestibulum nisi metus, ac rutrum enim consectetur nec. Vivamus volutpat ac risus aliquet iaculis.\nVestibulum et ex egestas, scelerisque enim et, vehicula nisi. Aenean posuere ornare dolor, in laoreet turpis mattis in. Fusce sodales blandit ornare. Donec porta eros vel tellus consequat, a ultricies augue ullamcorper. Vestibulum dolor diam, auctor ac magna quis, aliquet tincidunt odio. Nulla eu cursus metus. Maecenas laoreet in risus vel suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis facilisis orci rhoncus pharetra pretium. Nam blandit arcu lobortis eros luctus lobortis. Integer gravida iaculis finibus.') + const _hasEllipsisChanged = text('*(hasEllipsisChanged)', 'Event throws when number of lines or line height or class name changed, see in Action logger tab.'); + return { + props: { + showSortText: false, + hasEllipsis: true, + hasEllipsisChanged: action('Ellipsis changed and its'), + _lines, _lineHeight, _className, _shortText, _longText, + }, + template: containsChangeText ? ` + <multiline-ellipsis + [lines]="_lines" + [lineHeight]="_lineHeight" + [className]="_className" + (hasEllipsisChanged)="this.hasEllipsis = $event" + (hasEllipsisChanged)="hasEllipsisChanged($event)" + >{{ this.showSortText ? _shortText : _longText }} + </multiline-ellipsis> + <br/> + <sdc-button (click)="this.showSortText = !this.showSortText;" text="Toggle Text Length"></sdc-button> + <br/> + <span class="y">has ellipsis? <b>{{ this.hasEllipsis ? 'yes' : 'no' }}</b></span>`: + `<multiline-ellipsis + [lines]="_lines" + [lineHeight]="_lineHeight" + [className]="_className" + (hasEllipsisChanged)="this.hasEllipsis = $event" + (hasEllipsisChanged)="hasEllipsisChanged($event)" + >{{ this.showSortText ? _shortText : _longText }} + </multiline-ellipsis>` + } + }, + { notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.` + } + ) + } diff --git a/stories/angular/notifications.stories.ts b/stories/angular/notifications.stories.ts new file mode 100644 index 0000000..4e87517 --- /dev/null +++ b/stories/angular/notifications.stories.ts @@ -0,0 +1,55 @@ +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 { NotificationModule } from '../../src/angular/notifications/notification.module'; +import { NotificationSettings } from '../../src/angular/notifications/utilities/notification.config'; + +let stories = storiesOf('Notification', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator( + moduleMetadata({ + declarations: [ + ], + imports: [ + NotificationModule + + ] + }) + ) + createStory(stories, "All options", true, true, "Notification", "Full example of simple tabs."); + // createStory(stories, "Tabs with text", true, false, "Tabs with titles", "Simple tabs with text title."); + // createStory(stories, "Tabs with icons", false, true, "Tabs with icons", "Simple tabs with icon title."); + + function createStory(stories, title, containsTitle, containsTitleIcon, notesTitle, notesText){ + stories.add(title, () => { + const _type = select('Type', ["info", "warning", "error", "success"], 'left', ''); + const _notifyText = text('Text','notif info message test'); + const _notifyTitle = text('Title', 'Notif Titile Info'); + const _sticky = boolean('Sticky', false); + const _hasCustomContent = boolean('Has customer content', false); + const _duration = number('Duration', 2000); + let _notificationSetting = new NotificationSettings(_type, _notifyText, _notifyTitle, _duration, _sticky, _hasCustomContent) + // const innerComponentType: Type<any>; + // const innerComponentOptions: any; + + + return { + props: { + selectTab: action('select tab changed'), + _type, _notifyText, _notifyTitle, _sticky, _hasCustomContent, _duration + }, + template: ` + <sdc-notification + [notificationSetting] = "_notificationSetting" + > + </sdc-notification> + ` + } + }, + { notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.` + } + ) + } diff --git a/stories/angular/popup-menu.stories.ts b/stories/angular/popup-menu.stories.ts new file mode 100644 index 0000000..1fac579 --- /dev/null +++ b/stories/angular/popup-menu.stories.ts @@ -0,0 +1,185 @@ +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 { PopupMenuModule } from '../../src/angular/popup-menu/popup-menu.module'; +import { ButtonsModule } from '../../src/angular/buttons/buttons.module'; + + +let stories = storiesOf('Menu', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator( + moduleMetadata({ + declarations: [ + ], + imports: [ + PopupMenuModule, + ButtonsModule, + + ] + }) + ) + let containsPosition = true; + let containsRelative = true; + let containsClassName = true; + createMenuListStory(stories, "Menu list All options", containsPosition, containsRelative, containsClassName, "Menu list", "Full example of menu list."); + createMenuListStory(stories, "Menu list with position", containsPosition, !containsRelative, !containsClassName, "Menu list", "Full example of menu list with position."); + createMenuListStory(stories, "Menu list with relative", !containsPosition, containsRelative, !containsClassName, "Menu list", "Full example of menu list with relative."); + createMenuListStory(stories, "Menu list with class", !containsPosition, !containsRelative, containsClassName, "Menu list", "Full example of menu list with class."); + + createMenuItemStory(stories, "Menu item All options", "Tabs", "Full example of simple tabs."); + function createMenuListStory(stories, title, containsPosition, containsRelative, containsClassName, notesTitle, notesText){ + stories.add(title, () => { + const _className = containsClassName ? text('Class name', ''): null; + const _relative = containsRelative ? boolean('Relative', true) : true; + const _positionLeft = containsPosition ? number('Position left', 0): 0; + const _positionTop = containsPosition ? number('Position top', 0): 0; + const _open = containsPosition ? boolean('Menu list open', undefined): false; + const _openChange = text('*(openChange)', 'Event throws when menu is open or close, see in Action logger tab.'); + const _positionChange = text('*(positionChange)', 'Event throws when position changed, see in Action logger tab.'); + + return { + props: { + selectedItemValue: '', + selectedItemColor: '', + openChanged: action('Menu open status is'), + positionChanged: action('Menu position changed to'), + showSelectedItem: (itemPlace, color, selectedItem)=> { + selectedItem.innerText = itemPlace; + selectedItem.style.color = color; + }, + _className, _relative, _positionLeft, _positionTop, _open + }, + template: ` + <div style="position: relative; width: 400px; height: 200px; background: blue;" + (click)="menu.position = {x:$event.offsetX, y:$event.offsetY}; _open=true;"> + <span class="message">Click in the box...<br/> + (popup menu is {{menuStatus === undefined ? 'never opened' : (menuStatus ? 'open at '+menuPos.x+' , '+menuPos.y : 'closed')}})<br/> + selected: <span #selectedItem id="selectedItem" [style.color]="selectedItemColor">{{selectedItemValue}}</span> + </span> + <popup-menu-list #menu + [(open)]="_open" + [position] = "{x:_positionLeft, y:_positionTop}" + [relative] = "_relative" + [className] = "_className" + (openChange)="menuStatus=$event; openChanged($event)" + (positionChange)="menuPos=$event; positionChanged($event)"> + <popup-menu-item (action)="showSelectedItem('First', 'red', selectedItem)">First</popup-menu-item> + <popup-menu-item type="disabled">Disabled</popup-menu-item> + <popup-menu-item type="separator"></popup-menu-item> + <popup-menu-item (action)="showSelectedItem('Second', 'green', selectedItem)">Second</popup-menu-item> + <popup-menu-item>Third (none)</popup-menu-item> + </popup-menu-list> + </div> + ` + } + }, + { notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.` + } + ) + } + + function createMenuItemStory (stories, title, notesTitle, notesText){ + stories.add(title, () => { + const _item1ClassName = text('Item1 class name', ''); + const _item1Type = text('Item1 type', ''); + + const _item2ClassName = text('Item2 class name', ''); + const _item2Type = text('Item2 type', 'selected'); + + const _item3ClassName = text('Item3 class name', ''); + const _item3Type = text('Item3 type', 'disabled'); + + const _item4ClassName = text('Item4 class name', ''); + const _item4Type = text('Item4 type', 'separator'); + + const _item5ClassName = text('Item5 class name', ''); + const _item5Type = text('Item5 type', ''); + const _Action = text('*(action)', 'Event throws when select tab changed, see in Action logger tab.'); + + return { + props: { + openManu: (menu) =>{ + menu.position = {x:400, y:500}; + menu.open = true; + }, + showSelectedItem: action('select menu item'), + _item1ClassName, _item1Type, _item2ClassName, _item2Type, _item3ClassName, _item3Type, + _item4ClassName, _item4Type, _item5ClassName, _item5Type + }, + template: ` + <div> + <sdc-button text="open menu" (click)="openManu(menu); openMenuList = true"></sdc-button> + <br><br> + <popup-menu-list #menu> + <popup-menu-item + [type]="_item1Type" + [className]="_item1ClassName" + (action)="showSelectedItem('First')"> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24"> + <defs> + <path id="add-copy-a1" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L12,10 L12,7 C12,6.4 11.6,6 11,6 C10.4,6 10,6.4 10,7 L10,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L10,12 L10,15 C10,15.6 10.4,16 11,16 C11.6,16 12,15.6 12,15 L12,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/> + </defs> + <g fill="none" fill-rule="evenodd" transform="translate(1 1)"> + <use xlink:href="#add-copy-a1"/> + </g> + </svg> + First + </popup-menu-item> + <popup-menu-item + [type]="_item2Type" + [className]="_item2ClassName" + (action)="showSelectedItem('Selected')"> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24"> + <defs> + <path id="add-copy-a2" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L12,10 L12,7 C12,6.4 11.6,6 11,6 C10.4,6 10,6.4 10,7 L10,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L10,12 L10,15 C10,15.6 10.4,16 11,16 C11.6,16 12,15.6 12,15 L12,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/> + </defs> + <g fill="none" fill-rule="evenodd" transform="translate(1 1)"> + <use xlink:href="#add-copy-a2"/> + </g> + </svg> + Selected + </popup-menu-item> + <popup-menu-item + [type]="_item3Type" + [className]="_item3ClassName"> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24"> + <defs> + <path id="add-copy-a3" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L12,10 L12,7 C12,6.4 11.6,6 11,6 C10.4,6 10,6.4 10,7 L10,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L10,12 L10,15 C10,15.6 10.4,16 11,16 C11.6,16 12,15.6 12,15 L12,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/> + </defs> + <g fill="none" fill-rule="evenodd" transform="translate(1 1)"> + <use xlink:href="#add-copy-a3"/> + </g> + </svg> + Disabled + </popup-menu-item> + <popup-menu-item + [type]="_item4Type" + [className]="_item4ClassName"> + </popup-menu-item> + <popup-menu-item + [type]="_item5Type" + [className]="_item5ClassName" + (action)="showSelectedItem('Second')"> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24"> + <defs> + <path id="add-copy-a4" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L12,10 L12,7 C12,6.4 11.6,6 11,6 C10.4,6 10,6.4 10,7 L10,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L10,12 L10,15 C10,15.6 10.4,16 11,16 C11.6,16 12,15.6 12,15 L12,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/> + </defs> + <g fill="none" fill-rule="evenodd" transform="translate(1 1)"> + <use xlink:href="#add-copy-a4"/> + </g> + </svg> + Second + </popup-menu-item> + </popup-menu-list> + </div> + ` + } + }, + { notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.` + } + ) + } + diff --git a/stories/angular/radio-button-group.stories.ts b/stories/angular/radio-button-group.stories.ts new file mode 100644 index 0000000..97f1ce9 --- /dev/null +++ b/stories/angular/radio-button-group.stories.ts @@ -0,0 +1,84 @@ +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 { RadioGroupComponent } from '../../src/angular/components'; +import { FormElementsModule } from '../../src/angular/form-elements/form-elements.module'; + +let stories = storiesOf('Form elements|Radio button group', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator( + moduleMetadata({ + declarations: [ + + ], + imports: [ + FormElementsModule + ] + }) + ) + let containsLegend = true; + let containsDisabled = true; + let containsDirection = true; + createStory(stories, "All options", containsLegend, containsDisabled, containsDirection, "Radio buttons group", "Full example of radio buttons."); + createStory(stories, "With legend", containsLegend, !containsDisabled, !containsDirection, "Radio buttons group", "Example of radio buttons with legend."); + createStory(stories, "With disabled", !containsLegend, containsDisabled, !containsDirection, "Radio buttons group", "Example of radio buttons with disabled."); + createStory(stories, "With direction", !containsLegend, !containsDisabled, containsDirection, "Radio buttons group", "Example of radio buttons with direction."); + function createStory(stories, title, containsLegend, containsDisabled, containsDirection, notesTitle, notesText){ + stories.add(title, () => { + const _legend = containsLegend ? text('legend','Radio Buttons Group legend') : null; + const _options = { + items: [{ + value:'val1', + name: 'radio8', + label: 'Label of Radio1' + }, { + value:'val2', + name: 'radio8', + label: 'Label of Radio2' + }] + }; + const _disabled = containsDisabled ? boolean('disabled', false) : null; + const _direction = containsDirection ? text('direction','horizontal') : null; + const _selectedValue = text('selected value', 'val1'); + + const _selectedValueChange = text('*(valueChange)', 'Event throws when selected radio button, see in Action logger tab.'); + + return { + props: { + selectRadioButton: action('select radio button'), + _legend, _disabled, _direction, _options, _selectedValue + }, + template: ` + <sdc-radio-group + [legend]="_legend" + [(value)]="_selectedValue" + [options] = "{ + items: [ + { + value: 'val1', + name: 'radio5', + label: 'Label of Radio 1', + disabled: 'false' + }, + { + value: 'val2', + name: 'radio5', + label: 'Label of Radio 2', + disabled: 'false' + } + ]}" + [disabled]="_disabled" + [direction]="_direction" + (valueChange)= "selectRadioButton($event)" + ></sdc-radio-group> + <br><div>Selected Radio: {{_selectedValue}}</div> + ` + } + }, + { notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.` + } + ) + } diff --git a/stories/angular/search-bar.stories.ts b/stories/angular/search-bar.stories.ts new file mode 100644 index 0000000..634a0c4 --- /dev/null +++ b/stories/angular/search-bar.stories.ts @@ -0,0 +1,49 @@ +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 { SearchBarComponent, InputComponent } from '../../src/angular/components'; +import { FormElementsModule } from '../../src/angular/form-elements/form-elements.module'; + +storiesOf('Form elements|Searchbar', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator( + moduleMetadata({ + declarations: [ + SearchBarComponent + ], + imports: [ + FormElementsModule + ] + }) + ) + .add('Searchbar', () => { + const _label = text('label', 'Searchbar label'); + const _placeholder = text('placeholder', 'Searchbar placeholder'); + const _debounceTime = number('debounceTime', 200); + const _searchQuery = text('searchQuery', ''); + const _searchQueryClick = text('*(searchQueryClick)', 'Event throws when click on search query, see in Action logger tab.'); + + return { + props: { + onChange: action('click on search query'), + _label, _searchQuery, _placeholder, _debounceTime + }, + template: ` + <sdc-search-bar + [placeholder]="_placeholder" + [label]="_label" + [debounceTime]="_debounceTime" + [(searchQuery)]="_searchQuery" + (searchQueryClick)="onChange($event)"> + </sdc-search-bar> + ` + } + }, + { notes: `<h2>Searchrbar</h2> + The search bar component text is updated (after debounce time, default 200 miliseconds) while user write something. + Use the KNOBS tab to change values.` + } +) diff --git a/stories/angular/styles.scss b/stories/angular/styles.scss new file mode 100644 index 0000000..19dbc57 --- /dev/null +++ b/stories/angular/styles.scss @@ -0,0 +1,104 @@ +/* +Specific styles for storybook +*/ + +.sb-show-main { + padding: 20px; +} + +.storybook-new-row { + display: flex; + flex-direction: row; +} + +.storybook-component-wrapper { + margin: 10px; + padding: 10px; +} + +.storybook-component-info { + display: block; + text-align: left; + margin-bottom: 10px; +} + +.storybook-icons-showcase { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + + .storybook-component-wrapper { + width: 150px; + text-align: center; + width: 150px; + border: solid 1px #eeeeee; + border-radius: 5px; + } + + .storybook-component-info { + text-align: center; + font-size: 11px; + user-select: text; + } + + .storybook-debug-icon { + border: solid 1px #000000; + } +} + +/* +Specific styles for storybook components sample +*/ +.sdc-accordion-custom-class .sdc-accordion-header, +.sdc-accordion-custom-class .sdc-accordion-body.open { + padding: 10px; + border-radius: 3px; +} +.sdc-accordion-custom-class .sdc-accordion-header { + background-color: #d2d2d2; +} +.sdc-accordion-custom-class .sdc-accordion-body.open { + border: 1px solid #d2d2d2; + margin-top: 1px; + } + + + +.colors-table { + font-size: 13px; + + .color-group { + + display: flex; + flex-direction: row; + align-items: flex-start; + + .color-section { + + margin: 0 20px 20px 0; + text-align: center; + + div { + align-self: center; + user-select: text; + } + $circle-size: 80px; + .color-circle { + height: $circle-size; + width: $circle-size; + border-radius: $circle-size; + text-align: center; + } + } + } +} + +.storybook-welcome { + h1 { font-size: 30px; margin: 12px 0 12px 0; } + h2 { font-size: 24px; margin: 12px 0 12px 0; } + h3 { font-size: 20px; margin: 12px 0 12px 0; } + h4 { font-size: 14px; margin: 4px 0 4px 0; text-decoration: underline; } + code { font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 12px; } + ul li { list-style: circle; list-style-position: inside; } +}
\ No newline at end of file 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. + ` + } + ); diff --git a/stories/angular/tabs.stories.ts b/stories/angular/tabs.stories.ts new file mode 100644 index 0000000..dac99bb --- /dev/null +++ b/stories/angular/tabs.stories.ts @@ -0,0 +1,55 @@ +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 { TabsModule } from '../../src/angular/tabs/tabs.module'; +import { FormElementsModule } from '../../src/angular/form-elements/form-elements.module'; + +let stories = storiesOf('Tabs', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator( + moduleMetadata({ + declarations: [ + ], + imports: [ + TabsModule, + FormElementsModule + ] + }) + ) + let containsTitle = true; + let containsTitleIcon = true; + createStory(stories, "All options", containsTitle, containsTitleIcon, "Tabs", "Full example of simple tabs."); + createStory(stories, "Tabs with text", containsTitle, !containsTitleIcon, "Tabs with titles", "Simple tabs with text title."); + createStory(stories, "Tabs with icons", !containsTitle, containsTitleIcon, "Tabs with icons", "Simple tabs with icon title."); + + function createStory(stories, title, containsTitle, containsTitleIcon, notesTitle, notesText){ + stories.add(title, () => { + const _title1 = containsTitle ? text('Tab1 title', 'tab1 ') : null; + const _title2 = containsTitle ? text('Tab2 title', 'tab2 ') : null; + const _titleIcon1 = containsTitleIcon ? text('Tab1 titleIcon', 'inputs-o') : null; + const _titleIcon2 = containsTitleIcon ? text('Tab2 titleIcon', 'edit-file-o') : null; + const _active1 = boolean('Tab1 disabled', false); + const _active2 = boolean('Tab2 disabled', false); + const _selectTab = text('*(selectTab)', 'Event throws when select tab changed, see in Action logger tab.'); + + return { + props: { + selectTab: action('select tab changed'), + _title1, _titleIcon1, _active1, + _title2, _titleIcon2, _active2, _selectTab + }, + template: ` + <sdc-tabs (selectedTab)="selectTab($event)"> + <sdc-tab [title]="_title1" [titleIcon]="_titleIcon1" [active]="_active1">This is tab 1</sdc-tab> + <sdc-tab [title]="_title2" [titleIcon]="_titleIcon2" [active]="_active2">This is tab 2</sdc-tab> + </sdc-tabs> + ` + } + }, + { notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.` + } + ) + } diff --git a/stories/angular/tag-cloud.stories.ts b/stories/angular/tag-cloud.stories.ts new file mode 100644 index 0000000..ef5748e --- /dev/null +++ b/stories/angular/tag-cloud.stories.ts @@ -0,0 +1,64 @@ +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 { TagCloudModule } from '../../src/angular/tag-cloud/tag-cloud.module'; + +let stories = storiesOf('Tag Cloud', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator( + moduleMetadata({ + declarations: [ + ], + imports: [ + TagCloudModule, + ] + }) + ) + let containsViewOnlyList = true; + let containsViewOnly = true; + let containsUniqueList = true; + createStory(stories, "All options", !containsViewOnlyList, containsViewOnly, containsUniqueList, "Tag cloud", "Full example of simple tag cloud."); + createStory(stories, "View only", !containsViewOnlyList, containsViewOnly, !containsUniqueList, "Tag cloud", "Full example of simple tag cloud with View only."); + createStory(stories, "View only list", containsViewOnlyList, !containsViewOnly, !containsUniqueList, "Tag cloud", "Full example of simple tag cloud with View only list."); + createStory(stories, "Unique list", !containsViewOnlyList, !containsViewOnly, containsUniqueList, "Tag cloud", "Full example of simple tag cloud with View unique list."); + + function createStory(stories, title, containsViewOnlyList, containsViewOnly, containsUniqueList, notesTitle, notesText){ + stories.add(title, () => { + let _label = text('label', 'Please Enter value'); + let _list = array('List', ['aaa', 'bbb', 'ccc'], ','); + let _isViewOnly = containsViewOnly ? boolean('View only', false) : null; + let _listViewOnly = containsViewOnlyList ? array('List of view only params', [0,3], ',') : null; + let _isUniqueList = containsUniqueList ? boolean('Unique list', false) : null; + let _uniqueErrorMessage = containsUniqueList ? text('Unique error message', 'Unique error') : null; + let _placeholder = text('place holder', 'Type a value and then click enter or'); + let _listChanged = text('*(listChanged)', 'Event throws when tag cloud list changed, see in Action logger tab.'); + + return { + props: { + listChanged: action('tag cloud list changed'), + _label, _list, _isViewOnly, _listViewOnly, _isUniqueList, _uniqueErrorMessage, _placeholder, + containsViewOnly + + }, + template: ` + <sdc-tag-cloud + #tagCloud + [label] = "_label" + [(list)] = "_list" + [isViewOnly] = "this.containsViewOnly ? _isViewOnly : _listViewOnly" + [isUniqueList] = "_isUniqueList" + [uniqueErrorMessage] = "_uniqueErrorMessage" + [placeholder] = "_placeholder" + (listChanged)= "listChanged($event)" + > + </sdc-tag-cloud> + ` + } + }, + { notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.` + } + ) + } diff --git a/stories/angular/tile.stories.ts b/stories/angular/tile.stories.ts new file mode 100644 index 0000000..b177a7e --- /dev/null +++ b/stories/angular/tile.stories.ts @@ -0,0 +1,81 @@ +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 { TileModule } from '../../src/angular/tiles/tile.module'; +import { SvgIconModule } from '../../src/angular/svg-icon/svg-icon.module'; +import { Mode, Size, BackgroundShape, BackgroundColor } from "../../src/angular/common/enums"; + +const mode = Object.keys(Mode); +const size = Object.keys(Size); +const background_shape: Array<string> = Object.keys(BackgroundShape); +const background_color: Array<string> = Object.keys(BackgroundColor); + + +let stories = storiesOf('Tiles', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator( + moduleMetadata({ + declarations: [ + + ], + imports: [ + TileModule, + SvgIconModule + ] + }) + ) + + createStory(stories, "Tiles", "Tiles", "Full example of tiles."); + + function createStory(stories, title, notesTitle, notesText){ + stories.add(title, () => { + const _category = text('Category', 'resources_60') + const _name = text('Icon name', 'Border Element_60px') + const _mode = select('Mode', mode, 'primary', ''); + const _size = select('Size', size, 'x_large', ''); + const _backgroundShape = select('BackgroundShape', background_shape, '', ''); + const _backgroundColor = select('BackgroundColor', background_color, '', ''); + const _disabled = boolean('Disabled', false); + + return { + props: { + _category, _name, _mode, _size, _backgroundShape, _backgroundColor, _disabled + }, + template: ` + <sdc-tile> + <sdc-tile-header > + <div class="blue">P</div> + </sdc-tile-header> + <sdc-tile-content> + <div class='storybook-component-wrapper blue'> + <svg-icon + [ngClass] = "{'storybook-debug-icon': _debug_icon===true}" + [category] = "_category" + [name] = "_name" + [mode] = "_mode" + [size] = "_size" + [backgroundShape] = "_backgroundShape" + [backgroundColor] = "_backgroundColor" + [disabled] = "_disabled" + > + </svg-icon> + </div> + <div class="sdc-tile-content-info"> + <span class="sdc-tile-info-line title">Router</span> + <div class="sdc-tile-info-line subtitle">test</div> + </div> + </sdc-tile-content> + <sdc-tile-footer> + <span class="sdc-tile-footer-cell">Footer</span> + </sdc-tile-footer> + </sdc-tile> + ` + } + }, + { notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.` + } + ) + } diff --git a/stories/angular/tooltip.stories.ts b/stories/angular/tooltip.stories.ts new file mode 100644 index 0000000..4f1c5f5 --- /dev/null +++ b/stories/angular/tooltip.stories.ts @@ -0,0 +1,87 @@ +import { storiesOf } from '@storybook/angular'; +import { withKnobs, text, number, boolean, array, select, color, date, button, object } from '@storybook/addon-knobs'; +import { withNotes } from '@storybook/addon-notes'; +import { action, configureActions } from '@storybook/addon-actions'; +import { moduleMetadata } from '@storybook/angular'; +import { TooltipModule } from '../../src/angular/tooltip/tooltip.module'; +import { TooltipPlacement, ArrowPlacement } from '../../src/angular/tooltip/tooltip.directive'; + +let stories = storiesOf('Tooltip', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator( + moduleMetadata({ + declarations: [ + ], + imports: [ + TooltipModule + ] + }) + ) + let containsShortText = true; + let containsPlaceMent = true; + let containsCustomCssClass = true; + let containsArrowOffset = true; + let containsArrowPlacement = true; + let containsTooltipOffset = true; + let containsTemplate = true + createStory(stories, "All options", containsShortText, containsPlaceMent, containsCustomCssClass, containsArrowOffset, + containsArrowPlacement, containsTooltipOffset, !containsTemplate, "Tooltip", "Full example of Tooltip."); + createStory(stories, "Multi lines", !containsShortText, !containsPlaceMent, !containsCustomCssClass, !containsArrowOffset, + !containsArrowPlacement, !containsTooltipOffset, !containsTemplate, "Tooltip", "Example of Tooltip with multi lines."); + createStory(stories, "Placement", containsShortText, containsPlaceMent, !containsCustomCssClass, !containsArrowOffset, + !containsArrowPlacement, !containsTooltipOffset, !containsTemplate, "Tooltip", "Example of Tooltip with placement."); + createStory(stories, "Customer css class", containsShortText, !containsPlaceMent, containsCustomCssClass,!containsArrowOffset, + !containsArrowPlacement, !containsTooltipOffset, !containsTemplate, "Tooltip", "Full example of Tooltip with customer css class."); + createStory(stories, "Arrow offset", containsShortText, !containsPlaceMent, !containsCustomCssClass, containsArrowOffset, + !containsArrowPlacement, !containsTooltipOffset, !containsTemplate, "Tooltip", "Full example of Tooltip with arrow offset."); + createStory(stories, "Arrow placement", containsShortText, !containsPlaceMent, !containsCustomCssClass, !containsArrowOffset, + containsArrowPlacement, !containsTooltipOffset, !containsTemplate, "Tooltip", "Full example of Tooltip with arrow placement."); + createStory(stories, "Tooltip offset", containsShortText, !containsPlaceMent, !containsCustomCssClass, !containsArrowOffset, + !containsArrowPlacement, containsTooltipOffset, !containsTemplate, "Tooltip", "Full example of Tooltip with tooltip offset."); + createStory(stories, "Tooltip with template", containsShortText, !containsPlaceMent, !containsCustomCssClass,!containsArrowOffset, + !containsArrowPlacement, !containsTooltipOffset, containsTemplate, "Tooltip", "Full example of Tooltip with template."); + + function createStory(stories, title, containsShortText, containsPlaceMent, containsCustomCssClass, containsArrowOffset, + containsArrowPlacement, containsTooltipOffset, containsTemplate, notesTitle, notesText){ + stories.add(title, () => { + const _text = text('Text', containsShortText ? 'A short text name, short text' : 'Lorem ipsum dolor sit amet, ' + + 'consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non, pulvinar lacinia libero. Integer ' + + 'pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra'); + const _placement = containsPlaceMent ? object('placement', TooltipPlacement.Top) : TooltipPlacement.Top; + const _customCssClass = containsCustomCssClass ? text('custom css class', 'sdc-custom-tooltip'): null; + const _arrowOffset = containsArrowOffset ? number('Arrow offset', 10) : 10; + const _arrowPlacement = containsArrowPlacement ? object('Arrow placement', ArrowPlacement.LeftTop) : ArrowPlacement.LeftTop; + const _tooltipOffset = containsTooltipOffset ? number('Tooltip offset', 3): 3; + + return { + props: { + selectTab: action('select tab changed'), + _text, _placement, _customCssClass, _arrowOffset, _arrowPlacement, _tooltipOffset, + containsTemplate + }, + template: ` + <div style="padding-bottom: 20px; width: 350px;">Lorem ipsum dolor sit amet, + <span style="color: #009fdb" + sdc-tooltip + [tooltip-text] = "_text" + [tooltip-placement] = "_placement" + [tooltip-css-class] = "_customCssClass" + [tooltip-arrow-placement] = "_arrowPlacement" + [tooltip-arrow-offset] = "_arrowOffset" + [tooltip-offset] = "_tooltipOffset" + [tooltip-template] = "containsTemplate ? template : null" + >show tooltip + </span> + </div> + <ng-template #template> + <img src="../../../assets/images/logo_onap.png" class="sdc-custom-tooltip-template-image" /> + <p class="sdc-tooltip-template-content">A long text name, very long, long text ...</p> + </ng-template> + ` + } + }, + { notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.` + } + ) + } diff --git a/stories/angular/validation.stories.ts b/stories/angular/validation.stories.ts new file mode 100644 index 0000000..1214021 --- /dev/null +++ b/stories/angular/validation.stories.ts @@ -0,0 +1,184 @@ +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 { ValidationModule } from '../../src/angular/form-elements/validation/validation.module'; +import { FormElementsModule } from '../../src/angular/form-elements/form-elements.module'; +import { RegexPatterns } from '../../src/angular/common/enums'; +import { ButtonsModule } from '../../src/angular/buttons/buttons.module'; + +let stories = storiesOf('Validation', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator( + moduleMetadata({ + declarations: [ + + ], + imports: [ + ValidationModule, + FormElementsModule, + ButtonsModule + + ] + }) + ) + let containRequiredValid = true; + let containRegexValid = true; + let containCustomValid = true; + let containValidationDisabled = true; + let containValidatorsDisabled = true; + createStory(stories, "All options", containRequiredValid, containRegexValid, containCustomValid, containValidationDisabled, + containValidatorsDisabled, "Validations", "Full example of validation."); + createStory(stories, "Required validator", containRequiredValid, !containRegexValid, !containCustomValid, !containValidationDisabled, + !containValidatorsDisabled, "Validations", "Example of validation with required validator."); + createStory(stories, "Regex validator", !containRequiredValid, containRegexValid, !containCustomValid, !containValidationDisabled, + !containValidatorsDisabled, "Validations", "Example of validation with regex validator."); + createStory(stories, "Custom validator", !containRequiredValid, !containRegexValid, containCustomValid, !containValidationDisabled, + !containValidatorsDisabled, "Validations", "Example of validation with custom validator."); + createStory(stories, "Validation disabled", !containRequiredValid, !containRegexValid, !containCustomValid, containValidationDisabled, + !containValidatorsDisabled, "Validations", "Example of validation with validation disabled."); + createStory(stories, "Validator disabled", !containRequiredValid, !containRegexValid, !containCustomValid, !containValidationDisabled, + containValidatorsDisabled, "Validations", "Example of validation with validators disabled."); + + let containEnterValue = true + createEmailStory(stories, "Email validation", !containEnterValue, "Validations", "Example of email validation."); + createEmailStory(stories, "Value entered", containEnterValue, "Validations", "Example of validation with value already entered."); + + function createStory(stories, title, containRequiredValid, containRegexValid, containCustomValid, containValidationDisabled, + containValidatorsDisabled, notesTitle, notesText){ + stories.add(title, () => { + const _validationDisabled = containValidationDisabled ? boolean('Validation disabled', false): false; + const _requiredMessage = containRequiredValid ? text('Required Validator message', 'Field is required!'): 'Field is required!'; + const _regexMessage = containRegexValid ? text('Regex Validator message', 'This is not a number!'): 'This is not a number!'; + const _customMessage = containCustomValid ? text('custom Validator message', 'The number should be 100'): 'The number should be 100'; + const _pattern = containRegexValid ? text('Regex Validator pattern', RegexPatterns.numbers): RegexPatterns.numbers; + + const requiredValidDisabled = containValidatorsDisabled ? boolean('Required Validator disabled', false): false; + const regexValidDisabled = containValidatorsDisabled ? boolean('Regex Validator disabled', false): false; + const customValidDisabled = containValidatorsDisabled ? boolean('Custom Validator disabled', false): false; + + const _customCallback = containCustomValid ? text ('*(Callback)', 'User function that define a validation'): null; + const _validityChanged = text('*(validityChanged)', 'Event throws when validation changed, see in Action logger tab.'); + + return { + props: { + displayRequiredValid: containRequiredValid || containValidationDisabled || containValidatorsDisabled, + displayRegexValid: containRegexValid || containValidatorsDisabled, + displayCustomValid: containCustomValid || containValidatorsDisabled, + onChange: action('validation valids'), + isValueHundred: (value: any) => { + return (Number(value) === 100) ? true : false; + }, + _validationDisabled, _requiredMessage, _regexMessage, _customMessage, _pattern, + requiredValidDisabled, regexValidDisabled, customValidDisabled + }, + template: ` + <sdc-input #numberValidator label="Please enter some number" [maxLength]="10" required="true"></sdc-input> + <sdc-validation [validateElement]="numberValidator" (validityChanged)="onChange($event)" [disabled]="_validationDisabled"> + <sdc-required-validator *ngIf="this.displayRequiredValid" [message]="_requiredMessage" [disabled]="requiredValidDisabled"></sdc-required-validator> + <sdc-regex-validator *ngIf="this.displayRegexValid" [message]="_regexMessage" [pattern]="_pattern" [disabled]="regexValidDisabled"></sdc-regex-validator> + <sdc-custom-validator *ngIf="this.displayCustomValid" [message]="_customMessage" [callback]="isValueHundred" [disabled]="customValidDisabled"></sdc-custom-validator> + </sdc-validation> + ` + } + }, + { notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.` + } + ) + } + function createEmailStory(stories, title, conatainsEnterValue, notesTitle, notesText){ + stories.add(title, () => { + const _message = text('Validation message','This is not a valid email!'); + const _pattern = text('Regex validation pattern', RegexPatterns.email); + const validityChanged = text('*(validityChanged)', 'Event throws when validation changed, see in Action logger tab.'); + + return { + props: { + inputValue: conatainsEnterValue ? "firstName@" : "", + onChange: action('Email validation valids'), + _message, _pattern + }, + template: ` + <sdc-input #email label="Please enter valid email address" [maxLength]="50" required="true" [value]="inputValue"></sdc-input> + <sdc-validation [validateElement]="email" (validityChanged)="onChange($event)"> + <sdc-regex-validator [message]="_message" [pattern]="_pattern" ></sdc-regex-validator> + </sdc-validation> + ` + } + }, + { notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.` + } + ) + } + + stories.add('Validation in drop down', () => { + const validityChanged = text('*(validityChanged)', 'Event throws when validation changed, see in Action logger tab.'); + + return { + props: { + options:[ + { + "label": "First Option Label", + "value": "firstOptionValue" + }, + { + "label": "Second Option Label", + "value": "secondOptionValue" + }, + { + "label": "Third Option Label", + "value": "thirdOptionValue", + "type": "Simple" + } + ], + onChange: action('Dropdown validation valids'), + isThirdOption: (value: any) => { + return value === 'thirdOptionValue'; + } + }, + template: ` + <sdc-dropdown #mydropdown label="Hi I am a label" placeHolder="Please choose option" [options]="options" + (changed)="onChange(validation.validate())"></sdc-dropdown> + <sdc-validation #validation [validateElement]="mydropdown" (validityChanged)="onChange($event)"> + <sdc-required-validator message="Field is required!"></sdc-required-validator> + <sdc-custom-validator message="Please select the third option" [callback]="isThirdOption"></sdc-custom-validator> + </sdc-validation> + ` + } +}, +{ notes: `<h2>Validation in dropdown</h2> example of validation in dropdown<br>Use the KNOBS tab to change values.` +} +) + +stories.add('Validation group', () => { + const validityChanged = text('*(validityChanged)', 'Event throws when validation changed, see in Action logger tab.'); + + return { + props: { + emailPattern: RegexPatterns.email, + numberPattern: RegexPatterns.numbers, + checkValidateGroup: action('Group validation valids') + }, + template: ` + <sdc-validation-group #validationGroup> + <sdc-input #email label="Please enter valid email address" [maxLength]="50" required="true"></sdc-input> + <sdc-validation [validateElement]="email"> + <sdc-required-validator message="Field is required!"></sdc-required-validator> + <sdc-regex-validator message="This is not a valid email!" [pattern]="this.emailPattern"></sdc-regex-validator> + </sdc-validation> + + <sdc-input #numberValidator label="Please enter some number" [maxLength]="10" required="true"></sdc-input> + <sdc-validation [validateElement]="numberValidator"> + <sdc-required-validator message="Field is required!"></sdc-required-validator> + <sdc-regex-validator message="This is not a number!" [pattern]="this.numberPattern"></sdc-regex-validator> + </sdc-validation> + <sdc-button text="validate group" (click)="checkValidateGroup(validationGroup.validate())"></sdc-button> + ` + } +}, +{ notes: `<h2>Validation in dropdown</h2> example of validation in dropdown<br>Use the KNOBS tab to change values.` +} +) + |