Merge pull request #594 from scania/improvement/upgrade_stencil_2

Improvement/upgrade stencil 2

.gitignore

@@ -3,6 +3,7 @@
 .build/
 .www/
 .data/
+src/**/**.md
 
 # Compiled theme
 src/themes.built/

.travis.yml

@@ -1,8 +1,11 @@
 #Xenial for upgraded pip -v
-dist: xenial
-language: python
-python:
-  - "3.6"
+# dist: xenial
+# language: python
+# python:
+#   - "3.6"
+language: node_js
+node_js:
+  - lts/*
 
 # Whitelist branch
 branches:

package.json

@@ -15,10 +15,8 @@
   "scripts": {
     "start": "npm run build -- --watch",
     "build": "npm run babel && npm run stencil --",
-    "stencil": "stencil build --docs-json dist/data/docs.json --esm --es5 && npm run rename && npm run renameDev",
+    "stencil": "stencil build --docs-json dist/data/docs.json",
     "babel": "mkdirp .build && babel src/helpers/index.js --out-file .build/index.js",
-    "rename": "renamer -f \"/^corporate-ui.js$/\" -r \"corporate-ui-stencil.js\" \"dist/*\"",
-    "renameDev": "renamer -f \"/^corporate-ui-dev.js$/\" -r \"corporate-ui.js\" \"dist/*\"",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "lint-fix": "npm run lint -- --fix",
     "lint-debug": "npm run lint -- --debug",
@@ -39,24 +37,24 @@
     ]
   },
   "devDependencies": {
-    "@stencil/core": "1.8.1",
+    "@stencil/core": "2.3.0",
     "@stencil/router": "1.0.1",
-    "@stencil/sass": "1.0.1",
-    "@types/jest": "24.0.23",
-    "@types/puppeteer": "1.19.0",
+    "@stencil/sass": "1.3.2",
+    "@stencil/store": "^1.3.0",
+    "@types/jest": "^26.0.14",
+    "@types/puppeteer": "^5.4.0",
     "babel-cli": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "bootstrap": "4.3.1",
     "highlight.js": "9.16.2",
-    "jest": "24.9.0",
-    "jest-cli": "24.9.0",
+    "jest": "^26.6.2",
+    "jest-cli": "^26.6.2",
     "jquery": "3.4.1",
     "js-cookie": "2.2.1",
     "mkdirp": "^0.5.1",
     "popper.js": "1.15.0",
     "puppeteer": "1.19.0",
     "redux": "4.0.4",
-    "renamer": "1.1.4",
     "rollup-plugin-dotenv": "0.2.0"
   },
   "license": "MIT"

src/components/content/content.spec.ts

@@ -1,13 +1,20 @@
 import { Content } from './content';
 import { applyTheme } from '../../global.spec';
+import store from '../../store';
 
-const component = new Content();
+describe('content', function () {
 
-describe('content', (function () {
+  beforeEach(() => {
+    store.dispose();
+  });
 
-  applyTheme.call(this);
+  it('set theme', () => {
+    const component = new Content();
+    applyTheme(component);
+  });
 
   it('is initiated', () => {
-    expect(this).toBeTruthy();
+    const component = new Content();
+    expect(component).toBeTruthy();
   });
-}).bind(component));
+});

src/components/content/content.tsx

@@ -2,21 +2,21 @@ import {
   Component, h, Prop, State, Element, Watch,
 } from '@stencil/core';
 
+import store from '../../store';
+
 @Component({
   tag: 'c-content',
   styleUrl: 'content.scss',
   shadow: true,
 })
 export class Content {
-  @Prop({ context: 'store' }) ContextStore: any;
-
   /** Per default, this will inherit the value from c-theme name property */
   @Prop({ mutable: true }) theme: string;
 
   /** This property is in experimental state */
   @Prop() router: boolean;
 
-  @State() store: any;
+  @State() store = store.state;
 
   @State() tagName: string;
 
@@ -26,16 +26,18 @@ export class Content {
 
   @Watch('theme')
   setTheme(name = undefined) {
-    this.theme = name || this.store.getState().theme.current;
-    this.currentTheme = this.store.getState().theme.items[this.theme];
+    this.theme = name || this.store.theme.current;
+    this.currentTheme = this.store.theme.items[this.theme];
   }
 
   componentWillLoad() {
-    this.store = this.ContextStore || (window as any).CorporateUi.store;
+    this.store.theme = store.get('theme');
 
-    this.setTheme(this.theme);
+    store.use({set: (function(value){
+      if(value === 'theme') this.theme = store.state.theme.current;
+    }).bind(this)});
 
-    this.store.subscribe(() => this.setTheme());
+    this.setTheme(this.theme);
 
     if (!(this.el && this.el.nodeName)) return;
 

src/components/cookie/cookie.tsx

@@ -1,7 +1,9 @@
 import {
   Component, h, Prop, State, Element, Watch
 } from '@stencil/core';
+
 import { themeStyle } from '../../helpers/themeStyle';
+import store from '../../store';
 
 import JsCookie from 'js-cookie';
 import Tab from 'bootstrap/js/src/tab';
@@ -12,8 +14,6 @@ import Tab from 'bootstrap/js/src/tab';
   shadow: true,
 })
 export class Cookie {
-  @Prop({ context: 'store' }) ContextStore: any;
-
   /** Per default, this will inherit the value from c-theme name property */
   @Prop({ mutable: true }) theme: string;
 
@@ -39,7 +39,7 @@ export class Cookie {
 
   @Prop() inline: boolean;
 
-  @State() store: any;
+  @State() store = store.state;
 
   @State() tagName: string;
 
@@ -49,7 +49,9 @@ export class Cookie {
 
   @State() items: Array<any> = [];
 
-  @State() tab;
+  @State() tab : HTMLElement;
+
+  @State() tabs : Array<HTMLElement> = [];
 
   @State() all = false;
 
@@ -67,8 +69,9 @@ export class Cookie {
 
   @Watch('theme')
   setTheme(name = undefined) {
-    this.theme = name || this.store.getState().theme.current;
-    this.currentTheme = this.store.getState().theme.items[this.theme];
+    this.theme = name || this.store.theme.current;
+    this.currentTheme = this.store.theme.items[this.theme];
+    themeStyle(this.currentTheme, this.tagName, this.style, this.el);
   }
 
   @Watch('inline')
@@ -77,23 +80,25 @@ export class Cookie {
     this.modalConfig = { ...this.modalConfig, backdrop: inline ? !inline : 'static' };
   }
 
-  @Watch('tab')
-  initTabs(el) {
+  @Watch('tabs')
+  initTabs(tabs) {
     // TODO: Maybe we can solve this in a better way later
     if(this.el.parentNode.nodeName !== 'C-CODE-SAMPLE') {
-      const tab = new Tab(el);
+      tabs.forEach(el => {
+        const tab = new Tab(el);
 
-      // We use a timeout here to make sure the dynamic tab-content have time to get added
-      setTimeout(() => {
-        const target = (this.el.shadowRoot || this.el).querySelector(el.getAttribute('href'));
+        // We use a timeout here to make sure the dynamic tab-content have time to get added
+        setTimeout(() => {
+          const target = (this.el.shadowRoot || this.el).querySelector(el.getAttribute('href'));
 
-        el.onclick = (event) => {
-          event.preventDefault();
-          tab.show();
+          el.onclick = (event) => {
+            event.preventDefault();
+            tab.show();
 
-          // Due to bs methods having document hardcoded we need to do this
-          tab._activate(target, target.parentNode, () => {});
-        }
+            // Due to bs methods having document hardcoded we need to do this
+            tab._activate(target, target.parentNode, () => {});
+          }
+        });
       });
     }
   }
@@ -141,17 +146,16 @@ export class Cookie {
   componentWillLoad() {
     this.loadLibs();
 
-    this.store = this.ContextStore || (window as any).CorporateUi.store;
+    this.store.theme = store.get('theme');
+
+    store.use({set: (function(value){
+      if(value === 'theme') this.theme = store.state.theme.current;
+    }).bind(this)});
 
     this.setTheme(this.theme);
 
     this.configureBackdrop(this.inline);
 
-    this.store.subscribe(() => {
-      this.setTheme();
-      themeStyle(this.currentTheme, this.tagName, this.style, this.el);
-    });
-
     if (!(this.el && this.el.nodeName)) return;
 
     this.tagName = this.el.nodeName.toLowerCase();
@@ -199,6 +203,10 @@ export class Cookie {
     });
   }
 
+  setRef = (function(ref){
+    this.tabs = [...this.tabs, ref];
+  }).bind(this);
+
   render() {
     return [
       <form onSubmit={event => this.save(event)} onReset={(event) => { event.preventDefault(); this.open = false }}>
@@ -217,8 +225,30 @@ export class Cookie {
                   </div>
                 : ''}
 
-                <nav class="list-group" id="v-pills-tab" role="tablist" aria-orientation="vertical">
-                  {this.items.map((item, index) => (
+                <nav class="list-group" role="tablist" aria-orientation="vertical">
+                  {
+                    this.items.map((item, index) => (
+                    <a href={'#v-pills-' + index}
+                      class={'list-group-item list-group-item-action' + (index === 0 ? ' active' : '')}
+                      data-toggle="pill"
+                      ref={this.setRef}
+                      onClick={() => this.active = true}
+                    >
+                      <span class="ml-3 mr-auto">{item.text}</span>
+
+                      {item.toggable ?
+                        item.attributes.disabled ?
+                          <input type="checkbox" name={item.type || item.id} checked={this.items[index].attributes.checked} value="true" hidden />
+                        :
+                          <div class="custom-control custom-switch" onClick={event => event.stopPropagation()}>
+                            <input type="checkbox" name={item.type || item.id} id={item.type || item.id} value="true" class="custom-control-input d-none" onChange={() => this.check(item, index)} { ... { ...item.attributes } } />
+                            <label class="custom-control-label" { ... { for: item.type || item.id } }></label>
+                          </div>
+                      : ''}
+                    </a>
+                    ))
+                  }
+                  {/* {this.items.map((item, index) => (
                     <a href={'#v-pills-' + index} class={'list-group-item list-group-item-action' + (index === 0 ? ' active' : '')} data-toggle="pill" ref={el => this.tab = el} onClick={() => this.active = true}>
                       <c-icon name='scania-angle-down' class="d-lg-none"></c-icon>
 
@@ -235,7 +265,7 @@ export class Cookie {
                       : ''}
 
                     </a>
-                  ))}
+                  ))} */}
 
                   <slot name="link" />
                 </nav>

src/components/dealer-header/dealer-header.spec.ts

@@ -1,14 +1,21 @@
-// import { store } from '../../store';
 import { applyTheme } from '../../global.spec';
+import store from '../../store';
 import { DealerHeader } from './dealer-header';
 
-const component = new DealerHeader();
+const dealerHeader = new DealerHeader();
 
-describe('dealer-header', (function () {
+describe('dealer-header', function () {
 
-  applyTheme.call(this);
+  beforeEach(() => {
+    store.dispose();
+  });
+
+  it('set theme', () => {
+    const component = new DealerHeader();
+    applyTheme(component);
+  });
 
   it('is initiated', () => {
-    expect(this).toBeTruthy();
+    expect(dealerHeader).toBeTruthy();
   });
-}).bind(component));
+});

src/components/dealer-header/dealer-header.tsx

@@ -2,6 +2,7 @@ import {
   Component, h, Element, Prop, State, Watch,
 } from '@stencil/core';
 import { themeStyle } from '../../helpers/themeStyle';
+import store from '../../store';
 
 @Component({
   tag: 'c-dealer-header',
@@ -23,11 +24,9 @@ export class DealerHeader {
 
   @Prop({ mutable: true }) theme: string;
 
-  @Prop({ context: 'store' }) ContextStore: any;
-
   @State() currentTheme = { components: [] };
 
-  @State() store: any;
+  @State() store = store.state;
 
   @State() tagName: string;
 
@@ -37,19 +36,19 @@ export class DealerHeader {
 
   @Watch('theme')
   setTheme(name = undefined) {
-    this.theme = name || this.store.getState().theme.current;
-    this.currentTheme = this.store.getState().theme.items[this.theme];
+    this.theme = name || this.store.theme.current;
+    this.currentTheme = this.store.theme.items[this.theme];
+    themeStyle(this.currentTheme, this.tagName, this.style, this.el);
   }
 
   componentWillLoad() {
-    this.store = this.ContextStore || (window as any).CorporateUi.store;
+    this.store.theme = store.get('theme');
 
-    this.setTheme(this.theme);
+    store.use({set: (function(value){
+      if(value === 'theme') this.theme = store.state.theme.current;
+    }).bind(this)});
 
-    this.store.subscribe(() => {
-      this.setTheme();
-      themeStyle(this.currentTheme, this.tagName, this.style, this.el);
-    });
+    this.setTheme(this.theme);
 
     if (!(this.el && this.el.nodeName)) return;