Merge 651949f into cfc9e83

stone-payments · Sep 27, 2018 · dc49238 · dc49238
2 parents cfc9e83 + 651949f
commit dc49238
Show file tree

Hide file tree

Showing 10 changed files with 269 additions and 0 deletions.
diff --git a/packages/sling-web-component-list/.npmignore b/packages/sling-web-component-list/.npmignore
@@ -0,0 +1,2 @@
+node_modules/
+dev/
diff --git a/packages/sling-web-component-list/README.md b/packages/sling-web-component-list/README.md
@@ -0,0 +1,81 @@
+# sling-web-component-list
+
+Sling Card Basic Component.
+
+## Install
+
+```
+npm instal sling-web-component-list
+```
+
+## Tag
+
+```HTML
+  <sling-list></sling-list>
+```
+
+## Dependencies
+
+* **sling-framework**
+* **sling-helpers**
+
+## Attributes and properties
+
+|Name|Type|Default Values|ReflectToAttribute|Observer|callSdk|
+|:--|:--|:--|:--:|:--|:--:|
+|srcdata|Array|||
+|srckeys|Array|||
+|cascadelist|Boolean|**false**|:heavy_check_mark:|
+
+### Description
+
+|Name|Description|
+|:---|:---|
+|srcdata |Uma lista que define o conteudo do componente..|
+|srckeys|Uma lista de chaves que dispõe com base na lista de dados a ordem dos dados.|
+|cascadelist|Define se a lista vai ser em cascata ou não.|
+
+## Events
+
+This component have no events.
+
+### Usage
+
+```HTML
+    <sling-list
+      srcdata=""
+      srckeys="">
+    </sling-list>
+
+    <script>
+      const keys = [
+        'Descrição',
+        'UF',
+        'Cidade',
+        'Endereço',
+        'Número',
+        'Complemento',
+        'Bairro',
+      ];
+
+      const data = [
+        {
+          Descrição: 'teste',
+          UF: 'teste',
+          Cidade: 'teste',
+          Endereço: 'teste',
+          Número: 'teste',
+          Complemento: 'teste',
+          Bairro: 'teste',
+        },
+      ]
+
+      const $list = Array.from(document.querySelectorAll('sling-list'));
+      $list.forEach($list=> {
+        $list.srcdata = data;
+        $list.srckeys = keys;
+      });
+    </script>
+```
+
+![image](https://user-images.githubusercontent.com/22959060/46169828-82201100-c272-11e8-918a-05f1faa8dcfa.png)
diff --git a/packages/sling-web-component-list/package.json b/packages/sling-web-component-list/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "sling-web-component-list",
+  "version": "0.17.0",
+  "description": "Sling List component",
+  "author": "Stone Pagamentos",
+  "module": "src/index.js",
+  "main": "dist/cjs/es5/index.js",
+  "jsnext:main": "dist/es/es6/index.js",
+  "browser": "dist/iife/es6/index.js",
+  "dependencies": {
+    "sling-framework": "^1.5.0",
+    "sling-helpers": "^1.5.0"
+  }
+}
diff --git a/packages/sling-web-component-list/public/index.html b/packages/sling-web-component-list/public/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <script src="../../../scripts/helpers/injectDependencies.js"></script>
+    <title>sling-list</title>
+  </head>
+  <body>
+    <!-- cascade-list attribute for vertical view and slot for title-->
+    <sling-list
+      cascadelist
+      srcdata=""
+      srckeys="">
+    </sling-list>
+
+    <sling-list
+      srcdata=""
+      srckeys="">
+    </sling-list>
+
+    <script>
+      const keys = [
+        'Descrição',
+        'UF',
+        'Cidade',
+        'Endereço',
+        'Número',
+        'Complemento',
+        'Bairro',
+      ];
+
+      const data = [
+        {
+          Descrição: 'teste',
+          UF: 'teste',
+          Cidade: 'teste',
+          Endereço: 'teste',
+          Número: 'teste',
+          Complemento: 'teste',
+          Bairro: 'teste',
+        },
+      ]
+
+      const $list = Array.from(document.querySelectorAll('sling-list'));
+      $list.forEach($list=> {
+        $list.srcdata = data;
+        $list.srckeys = keys;
+      });
+    </script>
+  </body>
+</html>
diff --git a/packages/sling-web-component-list/src/assets/List.css b/packages/sling-web-component-list/src/assets/List.css
@@ -0,0 +1,35 @@
+.list-view {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 20px 0;
+}
+
+.list-view__row {
+  color: #181c24;
+  text-align: left;
+  display: flex;
+  font-size: 24px;
+}
+
+.list-view__key,
+.list-view__value {
+  flex-basis: 0;
+}
+
+.list-view__key {
+  font-weight: bold;
+  padding: 5px;
+  margin-top: 0;
+  color: #424b54;
+  white-space: nowrap;
+}
+
+.list-view__value {
+  flex-grow: 1;
+  padding: 5px;
+  color: #181c24;
+}
+
+.list-view_cascade .list-view__row {
+  flex-direction: column;
+}
diff --git a/packages/sling-web-component-list/src/assets/host.css b/packages/sling-web-component-list/src/assets/host.css
@@ -0,0 +1,9 @@
+:host {
+  display: block;
+}
+
+/* for compatibility */
+
+sling-list {
+  display: block;
+}
diff --git a/packages/sling-web-component-list/src/component/List.js b/packages/sling-web-component-list/src/component/List.js
@@ -0,0 +1,37 @@
+import { html, SlingElement } from 'sling-framework';
+
+export class List extends SlingElement {
+  static get properties() {
+    return {
+      srcdata: Array,
+      srckeys: Array,
+      cascadelist: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+    };
+  }
+
+  render() {
+    const data = this.srcdata || [];
+    const keys = this.srckeys || [];
+
+    return html`
+      <style>
+        @import url('sling-web-component-list/src/index.css');
+      </style>
+      ${data.map(list => html`
+        <ul className="list-view ${this.cascadelist ? 'list-view_cascade' : ''}">
+        ${Object.values(list).map((item, index) => html`
+          <li class="list-view__row">
+            <span class="list-view__key">
+              ${keys[index]}${this.cascadelist ? '' : ':'}
+            </span>
+            <span class="list-view__value">${item != null ? item : '---'}</span>
+          </li>
+        `)}
+        </ul>
+      `)}
+    `;
+  }
+}
diff --git a/packages/sling-web-component-list/src/component/List.test.js b/packages/sling-web-component-list/src/component/List.test.js
@@ -0,0 +1,32 @@
+import { registerComponent } from 'sling-helpers';
+import { List } from './List.js';
+
+registerComponent('sling-list', List);
+
+let $List;
+
+describe('List', () => {
+  beforeEach(() => {
+    $List = document.createElement('sling-list');
+    document.body.appendChild($List);
+  });
+
+  afterEach(() => {
+    if ($List != null) {
+      document.body.removeChild($List);
+      $List = undefined;
+    }
+  });
+
+  it('Should reflect "cascadelist" to attribute to property', () => {
+    $List.setAttribute('cascadelist', '');
+
+    expect($List.cascadelist).to.be.true;
+  });
+
+  it('Should reflect "cascadelist" to attribute to property', () => {
+    $List.cascadelist = false;
+
+    expect($List.cascadelist).to.be.false;
+  });
+});
diff --git a/packages/sling-web-component-list/src/index.css b/packages/sling-web-component-list/src/index.css
@@ -0,0 +1,2 @@
+@import url('assets/List.css');
+@import url('assets/host.css');
diff --git a/packages/sling-web-component-list/src/index.js b/packages/sling-web-component-list/src/index.js
@@ -0,0 +1,4 @@
+import { registerComponent } from 'sling-helpers';
+import { List } from './component/List.js';
+
+registerComponent('sling-list', List);