1 files changed, 164 insertions, 0 deletions
diff --git a/stories/ng2-component-lab/button.component.exp.ts b/stories/ng2-component-lab/button.component.exp.ts
new file mode 100644
index 0000000..6c5fb04
--- /dev/null
+++ b/stories/ng2-component-lab/button.component.exp.ts
@@ -0,0 +1,164 @@
+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;