diff options
Diffstat (limited to 'stories/angular/popup-menu.stories.ts')
| -rw-r--r-- | stories/angular/popup-menu.stories.ts | 185 |
1 files changed, 185 insertions, 0 deletions
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.` + } + ) + } + |