Final

README.md

@@ -11,7 +11,12 @@ Run WDS:
     $ npm run dev
 
 ## After updating Guidelines
+Imob
+
     $ cp ./node_modules/@kenlo/guidelines/dist/css/theme-imob.css ./dist
+Kenlo
+
+    $ cp ./node_modules/@kenlo/guidelines/dist/css/theme-kenlo.css ./dist
 
 ## Tests & Coverage
     $ npm run test

package-lock.json

@@ -569,11 +569,6 @@
         "webpack-dev-server": "3.8.0"
       },
       "dependencies": {
-        "camelcase": {
-          "version": "5.3.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
-        },
         "css-loader": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.1.tgz",
@@ -592,50 +587,6 @@
             "postcss-value-parser": "3.3.1",
             "source-list-map": "2.0.1"
           }
-        },
-        "marko": {
-          "version": "4.14.25",
-          "resolved": "https://registry.npmjs.org/marko/-/marko-4.14.25.tgz",
-          "integrity": "sha512-gF5J+ahzAp4cb9REv7Llf2Rp4MQHRrkPomtxt2qp/ps9R4QilpqxPeB5YMMUFDx+a688nYb4N9TEfaukXlhVGw==",
-          "requires": {
-            "app-module-path": "2.2.0",
-            "argly": "1.2.0",
-            "browser-refresh-client": "1.1.4",
-            "camelcase": "5.3.1",
-            "char-props": "0.1.5",
-            "complain": "1.6.0",
-            "deresolve": "1.1.2",
-            "escodegen": "1.12.0",
-            "esprima": "4.0.1",
-            "estraverse": "4.3.0",
-            "events": "1.1.1",
-            "events-light": "1.0.5",
-            "he": "1.2.0",
-            "htmljs-parser": "2.7.0",
-            "lasso-caching-fs": "1.0.2",
-            "lasso-modules-client": "2.0.5",
-            "lasso-package-root": "1.0.1",
-            "listener-tracker": "2.0.0",
-            "minimatch": "3.0.4",
-            "object-assign": "4.1.1",
-            "property-handlers": "1.1.1",
-            "raptor-json": "1.1.0",
-            "raptor-polyfill": "1.1.0",
-            "raptor-promises": "1.0.3",
-            "raptor-regexp": "1.0.1",
-            "raptor-util": "3.2.0",
-            "resolve-from": "2.0.0",
-            "shorthash": "0.0.2",
-            "simple-sha1": "2.1.2",
-            "strip-json-comments": "2.0.1",
-            "try-require": "1.2.1",
-            "warp10": "2.0.1"
-          }
-        },
-        "resolve-from": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-2.0.0.tgz",
-          "integrity": "sha1-lICrIOlP+h2egKgEx+oUdhGWa1c="
         }
       }
     },

src/components/first-component/component.js

-const { BasicComponent, Anime } = require('@kenlo/guidelines');
+const { BasicComponent } = require('@kenlo/guidelines');
 const { cloneDeep } = require('lodash');
 
 class Component {
@@ -12,28 +12,13 @@ class Component {
     const nameList = cloneDeep(this.state.nameList);
     nameList.push(name);
     this.setState({ nameList });
-    this.setStateDirty('nameList');
   }
 
   removeNameFromList(index) {
     const nameList = cloneDeep(this.state.nameList);
-    nameList.splice(index, 1);
     this.setState({ nameList: [] });
-    setTimeout(() => {
-      this.setState({ nameList });
-    }, 100);
-    this.setStateDirty('nameList');
-  }
-
-  removeName(index) {
-    Anime({
-      targets: this.getEl(`item-${index}`),
-      translateX: 100,
-      opacity: 0,
-      complete: () => {
-        this.removeNameFromList(index);
-      },
-    });
+    nameList.splice(index, 1);
+    this.setState({ nameList });
   }
 }
 

src/components/first-component/components/sub-component/index.marko

 div.sub-component
 	h6 -- Add new name
 	kl-input-text label="Name" value=state.value on-input('changeValue')
-	kl-button.secondary label="Action" on-click('addNewName')
+	kl-button.secondary label="Add" disabled=!state.value on-click('addNewName')

src/components/first-component/index.marko

@@ -3,11 +3,13 @@ div.first-component
 		@content
 			div.first-component-wrapper
 				h3 -- My first component
-				div.list
-					if(state.nameList)
-						for(index, name in state.nameList)
-							div.item key=`item-${index}` on-attach('animeIn', 'enterBottom', { easing: 'easeOutCirc' }, 0)
-								div.name -- ${`${index} | ${name}`}
-								div.action
-									kl-button icon="x" on-click('removeName', index)
+				if(state.nameList)
+					kl-section title="Names"
+						@content
+							div.list
+								for(index, name in state.nameList)
+									div.item key=`item-${index}` on-attach('animeIn', 'enterLeft', { easing: 'easeOutCirc' }, 0)
+										div.name -- ${name}
+										div.action
+											kl-button icon="x" on-click('removeNameFromList', index)
 				sub-component mobile=input.mobile on-new-name('addNameToList')

src/components/first-component/style.sass

 .first-component
 	.first-component-wrapper
-		> .list
+		max-width: 400px
+		.list
 			.item
 				display: flex
+				justify-content: space-between
+				padding: 10px
+				border-bottom: 1px solid $grey-light
+
 
 // Desktop
 .desktop