Added test

Author: oleersoy

package.json

@@ -1,11 +1,13 @@
 {
   "name": "superfly-css-component-button",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "CSS Button Component.",
   "main": "src/main/css/index.css",
   "scripts": {
-    "test": "gulp clean && gulp build:css && gulp test:css",
-    "clean": "gulp clean"
+    "update": "ncu -a && npm i",
+    "clean": "gulp clean",
+    "build": "npm run clean && gulp build:css",
+    "test": "npm run build && gulp test:css"
   },
   "repository": {
     "type": "git",
@@ -25,15 +27,16 @@
   "homepage": "https://github.com/superfly-css/superfly-css-component-button#readme",
   "devDependencies": {
     "gulp": "^3.9.1",
-    "superfly-css-component-site": "0.0.2",
+    "superfly-css-component-site": "0.0.3",
+    "superfly-css-component-test": "0.0.12",
     "superfly-css-foundation": "0.0.8",
-    "superfly-css-task-build": "^0.1.9",
+    "superfly-css-task-build": "^0.1.10",
     "superfly-css-task-clean": "0.0.1",
     "superfly-css-task-test": "^0.3.0",
-    "superfly-css-utilities-colors": "^0.1.3",
-    "superfly-css-utilities-effects": "0.0.3",
-    "superfly-css-utilities-fonts": "0.0.11",
+    "superfly-css-utilities-colors": "^0.1.10",
+    "superfly-css-utilities-effects": "0.0.4",
+    "superfly-css-utilities-fonts": "0.0.13",
     "superfly-css-utilities-icons": "0.0.2",
-    "superfly-css-utilities-layout": "0.0.10"
+    "superfly-css-utilities-layout": "0.1.3"
   }
 }

src/test/css/index.css

@@ -0,0 +1,88 @@
+@import "../../main/css/index.css";
+@import "superfly-css-utilities-icons";
+@import "superfly-css-utilities-fonts";
+@import "superfly-css-utilities-layout";
+@import "superfly-css-component-site";
+@import "superfly-css-component-test";
+@import "superfly-css-foundation";
+@import "superfly-css-utilities-effects";
+@import "superfly-css-utilities-colors";
+
+body {
+  counter-reset: test-counter;
+}
+
+.Site {
+  @apply(--Site);
+  @apply(--u-background-color-soft-white);
+}
+
+.Site_header {
+    @apply(--Site_header);
+    @apply(--u-font-weight-200);
+    @apply(--u-font-size-500);
+    @apply(--u-flex);
+    @apply(--u-flex-justify-around);
+    @apply(--u-flex-align-items-center);
+    @apply(--u-flex-align-items-center);
+    @apply(--u-text-color-888);
+}
+
+.Test {
+  @apply(--Test);
+  @apply(--u-background-color-444);
+}
+
+
+.Test_when {
+  @apply(--Test_when);
+  @apply(--u-text-color-444);
+}
+
+.Test_then {
+  @apply(--Test_when);
+  @apply(--u-text-color-444);
+}
+
+.Test_description {
+  @apply(--u-text-color-444);
+}
+
+.Test_markup {
+  @apply(--u-text-color-tomato);
+}
+
+.Test_container {
+    @apply(--Test_container);
+    @apply(--u-background-color-silver-grey);
+}
+
+.Test_counter {
+  @apply(--Test_counter);
+  @apply(--u-text-color-tomato);
+}
+
+
+.Button--wut {
+  border-radius: 4px;
+  border: 1px solid #333;
+  font-size: 1.5em;
+  color: #fff;
+  font-family: Helvetica;
+  background-color: tomato;
+  background-image: linear-gradient(tomato 0%, white 500%);
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 1px 3px rgba(0, 0, 0, .2);
+  border: 1px solid #d7c6b3;
+}
+
+.Button--wut:active, .Button--wut:focus, .Button--wut:hover {
+    background-color: #e0811b;
+    background-image: linear-gradient(white 10%, tomato 200%);
+    color: grey;
+}
+
+.Button:active, .Button:focus, .Button:hover {
+    background-color: #555;
+    color: grey;
+}