diff options
Diffstat (limited to 'stories/ng2-component-lab/button.component.exp.ts')
-rw-r--r-- | stories/ng2-component-lab/button.component.exp.ts | 164 |
1 files changed, 0 insertions, 164 deletions
diff --git a/stories/ng2-component-lab/button.component.exp.ts b/stories/ng2-component-lab/button.component.exp.ts deleted file mode 100644 index 6c5fb04..0000000 --- a/stories/ng2-component-lab/button.component.exp.ts +++ /dev/null @@ -1,164 +0,0 @@ -import { experimentOn } from '@islavi/ng2-component-lab'; - -const buttonTypes = ['primary', 'secondary', 'link', 'alert']; -const buttonSizes = ['large', 'medium', 'small', 'x-small', 'default']; -const experiment = experimentOn('Button'); - -experiment.group("Default button", [ - { - id: "defaultButton", - showSource: true, - description: `Default button, does not need to supply type or size. - <br>The size of the button set to 'default' so it will shrink or expand according to the content. - `, - context: { - buttonClicked: ():void => { - window.alert("OK"); - } - }, - title: "Default button", - template: ` - <sdc-button - text="Default button long text" - testId="longButton" - (click)="buttonClicked()"> - </sdc-button> - <sdc-button - text="Sample button" - (click)="buttonClicked()" - [testId]="'defaultButtonTestId'" - > - </sdc-button> - - - ` - } -]); - -buttonTypes.forEach((buttonType) => { - [false, true].forEach((buttonDisabled) => { - experiment.group(`Button ${buttonType} ${buttonDisabled ? ' disabled' : ''}`, [ { - id: `Button ${buttonType}${buttonDisabled ? ' disabled' : ''}`, - showSource: true, - context: { - buttonClicked: ():void => { - window.alert("OK"); - } - }, - title: `Button ${buttonType}${buttonDisabled ? ' disabled' : ''}`, - template: buttonSizes.map((buttonSize) => - ` - <span style="display: inline-block;"> - <div>${buttonSize}</div><br> - <sdc-button - text="Sample" - type="${buttonType}" - size="${buttonSize}" - (click)="buttonClicked()" - ${buttonDisabled ? ' [disabled]="true"' : ''}> - </sdc-button> - </span> - `).join('\n') - } - ]); - }); -}); - -experiment.group("Buttons with icons", [ - { - id: "buttonsWithIcons", - showSource: true, - description: `Buttons with icons forward`, - context: { - buttonClicked: (): void => { - window.alert("OK"); - } - }, - title: "Button with icons", - template: ` - <sdc-button - text="Default button long text" - (click)="buttonClicked()" - icon_name="settings-o" - icon_position="left" - > - </sdc-button> - - <sdc-button - text="Sample button" - (click)="buttonClicked()" - icon_name="plus-circle-o" - icon_position="left" - > - </sdc-button> - - <sdc-button - text="Sample button" - type="secondary" - (click)="buttonClicked()" - icon_name="plus-circle" - icon_position="right" - > - </sdc-button> - - <sdc-button - text="Sample button" - type="secondary" - (click)="buttonClicked()" - icon_name="caret2-right-circle-o" - icon_position="right" - > - </sdc-button> - - ` - } -]); - -experiment.group("Buttons with spinners", [ - { - id: "buttonsWithSpinnersRight", - showSource: true, - description: `Click the button to see the spinner shows for 2 seconds`, - context: { - buttonClicked: (button): void => { - button.show_spinner = true; - setTimeout(() => {button.show_spinner = false},2000); - }, - }, - title: "Button with spinner on the right", - template: ` - <sdc-button - text="Click to show spinner" - (click)="buttonClicked(button)" - [show_spinner]="false" - spinner_position="right" - #button - > - </sdc-button> - - ` - }, - { - id: "buttonsWithSpinnersLeft", - showSource: true, - description: `Click the button to see the spinner shows for 2 seconds`, - context: { - buttonClicked: (button): void => { - button.show_spinner = true; - setTimeout(() => {button.show_spinner = false},2000); - }, - }, - title: "Button with spinner on the left", - template: ` - <sdc-button - text="Click to show spinner" - (click)="buttonClicked(button)" - spinner_position="left" - #button - > - </sdc-button> - - ` - } -]); -export default experiment; |