Merge branch 'develop' into feature/nightwatch-urls

stone-payments · Nov 8, 2018 · f9b31d6 · f9b31d6
2 parents 32d4bd3 + 9f1ca5e
commit f9b31d6
Show file tree

Hide file tree

Showing 34 changed files with 5,392 additions and 8,590 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sling-framework",
   "description": "Sling Web Framework main repo.",
-  "version": "1.11.3",
+  "version": "1.11.4",
   "private": true,
   "flat": true,
   "scripts": {

diff --git a/packages/sling-assets/package.json b/packages/sling-assets/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sling-assets",
-  "version": "1.11.3",
+  "version": "1.11.4",
   "description": "Sling Assets",
   "author": "Stone Pagamentos",
   "module": "src/index.js",

diff --git a/packages/sling-framework/package.json b/packages/sling-framework/package.json
@@ -1,12 +1,12 @@
 {
   "name": "sling-framework",
-  "version": "1.11.3",
+  "version": "1.11.4",
   "description": "Sling Framework",
   "module": "src/index.js",
   "main": "dist/cjs/es5/index.js",
   "jsnext:main": "dist/es/es6/index.js",
   "author": "Stone Pagamentos",
   "dependencies": {
-    "sling-helpers": "^1.11.3"
+    "sling-helpers": "^1.11.4"
   }
 }
diff --git a/packages/sling-helpers/package-lock.json b/packages/sling-helpers/package-lock.json
diff --git a/packages/sling-helpers/package.json b/packages/sling-helpers/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sling-helpers",
-  "version": "1.11.3",
+  "version": "1.11.4",
   "description": "Sling Helpers",
   "module": "src/index.js",
   "main": "dist/cjs/es5/index.js",

diff --git a/packages/sling-web-component-brand-icon/package.json b/packages/sling-web-component-brand-icon/package.json
@@ -1,13 +1,13 @@
 {
   "name": "sling-web-component-brand-icon",
-  "version": "1.11.3",
+  "version": "1.11.4",
   "description": "Sling Brand Icon",
   "module": "src/index.js",
   "main": "dist/cjs/es5/index.js",
   "jsnext:main": "dist/es/es6/index.js",
   "author": "Stone Pagamentos",
   "dependencies": {
-    "sling-framework": "^1.11.3",
-    "sling-helpers": "^1.11.3"
+    "sling-framework": "^1.11.4",
+    "sling-helpers": "^1.11.4"
   }
 }
diff --git a/packages/sling-web-component-button/package.json b/packages/sling-web-component-button/package.json
@@ -1,13 +1,13 @@
 {
   "name": "sling-web-component-button",
-  "version": "1.11.3",
+  "version": "1.11.4",
   "description": "Sling Button",
   "module": "src/index.js",
   "main": "dist/cjs/es5/index.js",
   "jsnext:main": "dist/es/es6/index.js",
   "author": "Stone Pagamentos",
   "dependencies": {
-    "sling-framework": "^1.11.3",
-    "sling-helpers": "^1.11.3"
+    "sling-framework": "^1.11.4",
+    "sling-helpers": "^1.11.4"
   }
 }
diff --git a/packages/sling-web-component-calendar/package-lock.json b/packages/sling-web-component-calendar/package-lock.json
diff --git a/packages/sling-web-component-calendar/package.json b/packages/sling-web-component-calendar/package.json
@@ -1,15 +1,15 @@
 {
   "name": "sling-web-component-calendar",
-  "version": "1.11.3",
+  "version": "1.11.4",
   "description": "Sling Calendar",
   "module": "src/index.js",
   "main": "dist/cjs/es5/index.js",
   "jsnext:main": "dist/es/es6/index.js",
   "author": "Stone Pagamentos",
   "dependencies": {
     "moment": "^2.22.2",
-    "sling-framework": "^1.11.3",
-    "sling-helpers": "^1.11.3",
-    "sling-web-component-paginator": "^1.11.3"
+    "sling-framework": "^1.11.4",
+    "sling-helpers": "^1.11.4",
+    "sling-web-component-paginator": "^1.11.4"
   }
 }
diff --git a/packages/sling-web-component-card/README.md b/packages/sling-web-component-card/README.md
@@ -21,19 +21,23 @@ npm install sling-web-component-card
 
 |Name|Type|Default Values|ReflectToAttribute|Observer|callSdk|
 |:--|:--|:--|:--:|:--|:--:|
+|backgroundheader|Boolean|**false**|:heavy_check_mark:|
 |nopadding|Boolean|**false**|:heavy_check_mark:|
 |nopaddingheader|Boolean|**false**|:heavy_check_mark:|
 |nopaddingbody|Boolean|**false**|:heavy_check_mark:|
 |nopaddingfooter|Boolean|**false**|:heavy_check_mark:|
+|nodivisors|Boolean|**false**|:heavy_check_mark:|
 
 ### Description
 
 |Name|Description|
 |:---|:---|
-|nopadding |Defines whether the entire card will have padding.|
-|nopaddingheader|Set the card's header will have padding.|
-|nopaddingbody|Defines whether the body of the card will have padding.|
-|nopaddingfooter|Sets whether the card's footer will have padding.|
+|backgroundheader|Define the background CSS property of the header.|
+|nopadding|Defines whether the card's header, body and footer will have padding.|
+|nopaddingheader|Defines whether the card's header will have padding.|
+|nopaddingbody|Defines whether the card's body will have padding.|
+|nopaddingfooter|Defines whether the card's footer will have padding.|
+|nodivisors|Sets whether the card will have lines between header, body and footer.|
 
 ## Events
 

diff --git a/packages/sling-web-component-card/package.json b/packages/sling-web-component-card/package.json
@@ -1,13 +1,13 @@
 {
   "name": "sling-web-component-card",
-  "version": "1.11.3",
+  "version": "1.11.4",
   "description": "Sling Card",
   "module": "src/index.js",
   "main": "dist/cjs/es5/index.js",
   "jsnext:main": "dist/es/es6/index.js",
   "author": "Stone Pagamentos",
   "dependencies": {
-    "sling-framework": "^1.11.3",
-    "sling-helpers": "^1.11.3"
+    "sling-framework": "^1.11.4",
+    "sling-helpers": "^1.11.4"
   }
 }
diff --git a/packages/sling-web-component-card/public/index.html b/packages/sling-web-component-card/public/index.html
@@ -46,12 +46,28 @@
     <span slot="footer">Footer</span>
   </sling-card>
 
+  <sling-card nodivisors>
+    <span slot="header">Header</span>
+    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua.
+    </div>
+    <span slot="footer">Footer</span>
+  </sling-card>
+
   <sling-card nopadding>
     <span slot="header">Header</span>
     <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
       magna aliqua.
     </div>
     <span slot="footer">Footer</span>
   </sling-card>
+
+  <sling-card nopadding nodivisors>
+    <span slot="header">Header</span>
+    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua.
+    </div>
+    <span slot="footer">Footer</span>
+  </sling-card>
 </body>
 </html>
diff --git a/packages/sling-web-component-card/src/assets/Card.css b/packages/sling-web-component-card/src/assets/Card.css
@@ -31,10 +31,14 @@
   display: none;
 }
 
-.emd-card__slot_visible + .emd-card__slot_visible {
+.emd-card__slot_visible ~ .emd-card__slot_visible {
   border-top: 1px solid #C3C8D2;
 }
 
+.emd-card_nodivisors .emd-card__slot_visible + .emd-card__slot_visible {
+  border-top: none;
+}
+
 .emd-card__slot_header {
   font-size: 16px;
   line-height: 24px;

diff --git a/packages/sling-web-component-card/src/component/Card.js b/packages/sling-web-component-card/src/component/Card.js
@@ -1,11 +1,11 @@
 import { html, SlingElement } from 'sling-framework';
 
-export const applySlotClass = (area, isVisible, hasPadding) => {
+export const applySlotClass = (area, isVisible, hidePadding) => {
   const base = 'emd-card__slot';
 
   return `${base} ${base}_${area}` +
     `${isVisible ? ` ${base}_visible` : ` ${base}_hidden`}` +
-    `${hasPadding ? '' : ` ${base}_nopadding`}`;
+    `${hidePadding ? ` ${base}_nopadding` : ''}`;
 };
 
 export class Card extends SlingElement {
@@ -27,38 +27,82 @@ export class Card extends SlingElement {
         type: Boolean,
         reflectToAttribute: true,
       },
-      backgroundHeader: {
+      backgroundheader: {
         type: String,
         reflectToAttribute: true,
       },
+      nodivisors: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+      showheader: {
+        type: String,
+        reflectToAttribute: false,
+      },
+      showbody: {
+        type: String,
+        reflectToAttribute: false,
+      },
+      showfooter: {
+        type: String,
+        reflectToAttribute: false,
+      },
     };
   }
 
+  connectedCallback() {
+    if (typeof super.connectedCallback === 'function' && this.childrenUpdated) {
+      super.connectedCallback();
+      const fn = this.childrenUpdated.bind(this);
+      this._mo = new MutationObserver(fn);
+      this._mo.observe(this, { childList: true });
+      fn();
+    }
+  }
+
+  disconnectedCallback() {
+    if (typeof super.disconnectedCallback === 'function') {
+      super.disconnectedCallback();
+      this._mo.disconnect();
+    }
+  }
+
+  childrenUpdated() {
+    this.visibleSlots = Array.from(this.children).map($el => $el.slot);
+    this.showheader = this.visibleSlots.includes('header');
+    this.showbody = this.visibleSlots.includes('');
+    this.showfooter = this.visibleSlots.includes('footer');
+  }
+
   render() {
     const {
+      showheader,
+      showbody,
+      showfooter,
       nopadding,
       nopaddingheader,
       nopaddingbody,
       nopaddingfooter,
+      nodivisors,
+      backgroundheader,
     } = this;
 
-    this.visibleSlots = Array.from(this.children).map($el => $el.slot);
-    const showHeader = this.visibleSlots.includes('header');
-    const showBody = this.visibleSlots.includes('');
-    const showFooter = this.visibleSlots.includes('footer');
-
     return html`
       <style>
         @import url('sling-web-component-card/src/index.css');
       </style>
-      <div class="emd-card">
-        <div className="${applySlotClass('header', showHeader, !nopadding && !nopaddingheader)}" style="background: ${this.backgroundHeader}">
+      <div className="emd-card${nodivisors ? ' emd-card_nodivisors' : ''}">
+        <div
+          className="${applySlotClass('header', showheader, nopadding || nopaddingheader)}"
+          style="${backgroundheader ? `background: ${backgroundheader}` : ''}">
           <slot name="header" class="emd-card__slot"></slot>
         </div>
-        <div className="${applySlotClass('body', showBody, !nopadding && !nopaddingbody)}">
+        <div
+          className="${applySlotClass('body', showbody, nopadding || nopaddingbody)}">
           <slot class="emd-card__slot"></slot>
         </div>
-        <div className="${applySlotClass('footer', showFooter, !nopadding && !nopaddingfooter)}">
+        <div
+          className="${applySlotClass('footer', showfooter, nopadding || nopaddingfooter)}">
           <slot name="footer" class="emd-card__slot"></slot>
         </div>
       </div>

diff --git a/packages/sling-web-component-card/src/component/Card.test.js b/packages/sling-web-component-card/src/component/Card.test.js
@@ -17,7 +17,7 @@ describe('Card', () => {
   });
 
   it('Should reflect "nopadding", "nopaddingheader", ' +
-  '"nopaddingbody" and "nopaddingfooter" attribute to property ', () => {
+    '"nopaddingbody" and "nopaddingfooter" attribute to property ', () => {
     $card.setAttribute('nopadding', '');
     $card.setAttribute('nopaddingheader', '');
     $card.setAttribute('nopaddingbody', '');
@@ -30,7 +30,7 @@ describe('Card', () => {
   });
 
   it('Should reflect "nopadding", "nopaddingheader", ' +
-  '"nopaddingbody" and "nopaddingfooter" property to attribute ', () => {
+    '"nopaddingbody" and "nopaddingfooter" property to attribute ', () => {
     $card.nopadding = false;
     $card.nopaddingheader = false;
     $card.nopaddingbody = false;
@@ -45,35 +45,35 @@ describe('Card', () => {
 
 describe('applySlotClass', () => {
   it('Should create properly className with card part ' +
-  'visible and padding for Card after be called', () => {
+    'visible and padding for Card after be called', () => {
     const area = 'cardPart';
     const isVisible = true;
-    const hasPadding = true;
-    const resultantClassName = applySlotClass(area, isVisible, hasPadding);
+    const hidePadding = true;
+    const resultantClassName = applySlotClass(area, isVisible, hidePadding);
 
     expect(resultantClassName).to.be.equals('emd-card__slot ' +
-    'emd-card__slot_cardPart emd-card__slot_visible');
+    'emd-card__slot_cardPart emd-card__slot_visible emd-card__slot_nopadding');
   });
 
   it('Should create properly className with card part ' +
-  'visible and no padding for Card after be called', () => {
+    'visible and no padding for Card after be called', () => {
     const area = 'cardPart';
     const isVisible = true;
-    const hasPadding = false;
-    const resultantClassName = applySlotClass(area, isVisible, hasPadding);
+    const hidePadding = false;
+    const resultantClassName = applySlotClass(area, isVisible, hidePadding);
 
     expect(resultantClassName).to.be.equals('emd-card__slot ' +
-    'emd-card__slot_cardPart emd-card__slot_visible emd-card__slot_nopadding');
+    'emd-card__slot_cardPart emd-card__slot_visible');
   });
 
   it('Should create properly className with card part ' +
-  'invisible and no padding for Card after be called', () => {
+    'invisible and no padding for Card after be called', () => {
     const area = 'cardPart';
     const isVisible = false;
-    const hasPadding = false;
-    const resultantClassName = applySlotClass(area, isVisible, hasPadding);
+    const hidePadding = false;
+    const resultantClassName = applySlotClass(area, isVisible, hidePadding);
 
     expect(resultantClassName).to.be.equals('emd-card__slot ' +
-    'emd-card__slot_cardPart emd-card__slot_hidden emd-card__slot_nopadding');
+    'emd-card__slot_cardPart emd-card__slot_hidden');
   });
 });
diff --git a/packages/sling-web-component-form/package.json b/packages/sling-web-component-form/package.json
@@ -1,15 +1,15 @@
 {
   "name": "sling-web-component-form",
-  "version": "1.11.3",
+  "version": "1.11.4",
   "description": "Sling Form",
   "module": "src/index.js",
   "main": "dist/cjs/es5/index.js",
   "jsnext:main": "dist/es/es6/index.js",
   "author": "Stone Pagamentos",
   "dependencies": {
-    "sling-framework": "^1.11.3",
-    "sling-helpers": "^1.11.3",
-    "sling-web-component-button": "^1.11.3",
-    "sling-web-component-input": "^1.11.3"
+    "sling-framework": "^1.11.4",
+    "sling-helpers": "^1.11.4",
+    "sling-web-component-button": "^1.11.4",
+    "sling-web-component-input": "^1.11.4"
   }
 }