Merge 71e3443 into b05e4e2

package.json

@@ -39,7 +39,6 @@
     "eslint": "^4.19.0",
     "eslint-config-airbnb-base": "^12.1.0",
     "eslint-plugin-import": "^2.9.0",
-    "faker": "^4.1.0",
     "fs-extra": "^5.0.0",
     "globby": "^8.0.1",
     "html-replace-webpack-plugin": "^2.5.3",

packages/sling-framework/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sling-framework",
   "version": "1.5.0",
-  "description": "",
+  "description": "Sling Framework",
   "module": "src/index.js",
   "main": "dist/cjs/es6/index.js",
   "jsnext:main": "dist/es/es6/index.js",

packages/sling-helpers/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sling-helpers",
   "version": "1.5.0",
-  "description": "",
+  "description": "Sling Helpers",
   "module": "src/index.js",
   "main": "dist/cjs/es6/index.js",
   "jsnext:main": "dist/es/es6/index.js",

packages/sling-helpers/src/dom/makeRequest.test.js

@@ -1,5 +1,4 @@
 import sinon from 'sinon';
-import faker from 'faker';
 import { makeRequest } from './makeRequest.js';
 
 const mockFetch = response => () => Promise.resolve(response);
@@ -11,8 +10,8 @@ const mockFetchReturningParams = (url, params) => Promise.resolve({
   json() { return { url, params }; },
 });
 
-const fakeUrl = faker.internet.url();
-const fakeUserName = faker.internet.userName();
+const fakeUrl = 'http://sling-web.com/';
+const fakeUserName = 'Sling Web';
 
 describe('makeRequest', () => {
   it('Should have a default error handler that just returns the response ' +

packages/sling-web-component-brand-icon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sling-web-component-brand-icon",
   "version": "1.5.0",
-  "description": "",
+  "description": "Sling Brand Icon",
   "module": "src/index.js",
   "main": "dist/cjs/es6/index.js",
   "jsnext:main": "dist/es/es6/index.js",

packages/sling-web-component-button/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sling-web-component-button",
   "version": "1.5.0",
-  "description": "",
+  "description": "Sling Button",
   "module": "src/index.js",
   "main": "dist/cjs/es6/index.js",
   "jsnext:main": "dist/es/es6/index.js",

packages/sling-web-component-calendar/README.md

@@ -1,7 +1,7 @@
-# sling-web-component-calendar    
-`Sling-web-component-calendar` is a simple, customizable calendar,
- receives an Array with data to be shown
- according to the configuration also passed to the component.
+# sling-web-component-calendar
+
+The calendar component is a simple and customizable calendar that receives an array with data to be shown according to the configuration passed.
+
 
 ## Install      
 ```

packages/sling-web-component-calendar/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sling-web-component-calendar",
   "version": "1.5.0",
-  "description": "Sling Calendar component",
+  "description": "Sling Calendar",
   "module": "src/index.js",
   "main": "dist/cjs/es6/index.js",
   "jsnext:main": "dist/es/es6/index.js",

packages/sling-web-component-card/README.md

@@ -1,7 +1,5 @@
 # sling-web-component-card
 
-Sling Card Basic Component.
-
 ## Install
 
 ```

packages/sling-web-component-card/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sling-web-component-card",
   "version": "1.5.0",
-  "description": "",
+  "description": "Sling Card",
   "module": "src/index.js",
   "main": "dist/cjs/es6/index.js",
   "jsnext:main": "dist/es/es6/index.js",

packages/sling-web-component-form/.npmignore

@@ -0,0 +1,2 @@
+node_modules/
+dev/

packages/sling-web-component-form/README.md

@@ -0,0 +1,61 @@
+# sling-web-component-form
+
+## Install
+
+```
+npm instal sling-web-component-form
+```
+
+## Tag
+
+```HTML
+  <sling-form></sling-form>
+```
+
+## Dependencies
+
+### Required
+
+* **sling-framework**
+* **sling-helpers**
+
+### Recommended
+
+* **sling-web-component-button**
+* **sling-web-component-input**
+
+## Attributes and properties
+
+|Name|Type|Default Values|ReflectToAttribute|Observer|callSdk|
+|:--|:--|:--|:--:|:--|:--:|
+|formdata|Object|**false**|:x:|:heavy_check_mark:|
+|validation|Array|**[]**|:x:|:x:|
+
+### Description
+
+|Name|Description|
+|:---|:---|
+|formdata|Object that contains the data from the form|
+|validation|A list of `sling-helper` methods for validations|
+
+## Events  
+* **formsubmit**
+**Description:** Event triggered every time that the form is submitted.     
+
+* **formupdate**
+**Description:** Event triggered when any value of the form is changed.     
+
+### Use
+
+Use it like you are using a `<form>` tag. You can put anything form-related inside of it.
+
+ ```HTML      
+<sling-form>
+  <sling-input name="name" type="text" label="Name"></sling-input>
+  <!-- ... -->
+</sling-form>      
+```      
+
+## Examples            
+All component examples can be emulated using the `npm start sling-web-component-form` command.
+

packages/sling-web-component-form/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "sling-web-component-form",
+  "version": "1.4.0",
+  "description": "Sling Form",
+  "module": "src/index.js",
+  "main": "dist/cjs/es6/index.js",
+  "jsnext:main": "dist/es/es6/index.js",
+  "browser": "dist/iife/es6/index.js",
+  "author": "Stone Pagamentos",
+  "dependencies": {
+    "sling-web-component-button": "^1.4.0",
+    "sling-web-component-input": "^1.4.0",
+    "sling-framework": "^1.4.0",
+    "sling-helpers": "^1.4.0"
+  }
+}

packages/sling-web-component-form/public/index.css

@@ -0,0 +1,9 @@
+@import url('https://fonts.googleapis.com/css?family=Heebo:400,500');
+
+body {
+  font-family: 'Heebo', sans-serif;
+}
+
+body > * {
+  margin: 20px;
+}

packages/sling-web-component-form/public/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="index.css">
+  <title>sling-form</title>
+</head>
+<body>
+  <sling-form>
+    <sling-input name="name" type="text" label="Nome"></sling-input>
+    <sling-input name="email" type="email" label="E-mail"></sling-input>
+    <sling-input name="phone" type="phone" label="Telefone com DDD" placeholder="(00) 0000-0000"></sling-input>
+    <sling-input name="cpf" type="cpf" label="CPF"></sling-input>
+    <sling-input name="cnpj" type="cnpj" label="CNPJ"></sling-input>
+    <sling-button type="submit" layout="outline" color="success">Enviar</sling-button>
+  </sling-form>
+</body>
+</html>

packages/sling-web-component-form/public/index.js

@@ -0,0 +1,24 @@
+import 'sling-web-component-input';
+import 'sling-web-component-button';
+
+import {
+  isNotEmpty,
+  isValidEmail,
+  isValidPhone,
+  isValidCPF,
+  isValidCNPJ,
+} from 'sling-helpers';
+
+const $form = document.querySelector('sling-form');
+
+$form.validation = [
+  isNotEmpty('name'),
+  isNotEmpty('email'),
+  isValidEmail('email'),
+  isNotEmpty('phone'),
+  isValidPhone('phone'),
+  isNotEmpty('cpf'),
+  isValidCPF('cpf'),
+  isNotEmpty('cnpj'),
+  isValidCNPJ('cnpj'),
+];

packages/sling-web-component-form/src/assets/host.css

@@ -0,0 +1,9 @@
+:host {
+  display: grid;
+}
+
+/* for compatibility */
+
+sling-form {
+  display: grid;
+}