feat(sifrr-progress-round): update to use sifrr-dom 0.0.7

sifrr · Nov 2, 2019 · d4b3c6c · d4b3c6c
1 parent fb4112c
commit d4b3c6c
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 34 deletions.
diff --git a/elements/sifrr-carousel/src/sifrrcarousel.js b/elements/sifrr-carousel/src/sifrrcarousel.js
@@ -25,7 +25,7 @@ const template = SifrrDom.template`<style media="screen">
   <div class="arrow r">
     <span></span>
   </div>
-  <sifrr-tab-header options='{ "showUnderline": false }'>
+  <sifrr-tab-header :options="\${{ showUnderline: false }}">
     <slot name="preview"></slot>
   </sifrr-tab-header>
 </div>`;

diff --git a/elements/sifrr-progress-round/src/sifrrprogressround.js b/elements/sifrr-progress-round/src/sifrrprogressround.js
@@ -9,16 +9,11 @@ class SifrrProgressRound extends SifrrDom.Element {
   }
 
   onPropsChange(props) {
-    if (['progress', 'stroke', 'stroke-width'].filter(p => props.indexOf(p) > -1).length > 0)
+    if (['progress', 'stroke', 'strokeWidth'].filter(p => props.indexOf(p) > -1).length > 0)
       this.update();
   }
 }
 
-SifrrProgressRound.defaultState = {
-  progress: 0,
-  'stroke-width': 2,
-  stroke: '#fff'
-};
 SifrrDom.register(SifrrProgressRound);
 
 export default SifrrProgressRound;
diff --git a/elements/sifrr-progress-round/src/template.html b/elements/sifrr-progress-round/src/template.html
@@ -11,17 +11,17 @@
     r="28"
     fill="none"
     stroke="rgba(255, 255, 255, 0.6)"
-    stroke-width="${this['stroke-width']}"
+    stroke-width="${this.strokeWidth || 2}"
   />
   <circle
     id="top"
     cx="30"
     cy="30"
     r="28"
     fill="none"
-    stroke="${this.stroke}"
-    stroke-width="${this['stroke-width']}"
+    stroke="${this.stroke || '#fff'}"
+    stroke-width="${this.strokeWidth || 2}"
     stroke-dasharray="188.5"
-    stroke-dashoffset="${(100 - this.progress) / 100 * 188.5}"
+    stroke-dashoffset="${(100 - (this.progress || 0)) / 100 * 188.5}"
   />
 </svg>
diff --git a/elements/sifrr-progress-round/test/browser/progress.test.js b/elements/sifrr-progress-round/test/browser/progress.test.js
@@ -16,10 +16,10 @@ describe('shows correct progress', () => {
   });
 
   it('has correct progress after setting', async () => {
-    await page.$eval('sifrr-progress-round', el => (el.state = { progress: 10 }));
+    await page.$eval('sifrr-progress-round', el => el.setProp('progress', 10));
     assert.equal(await getProgress(), 90);
 
-    await page.$eval('sifrr-progress-round', el => (el.state = { progress: 70 }));
+    await page.$eval('sifrr-progress-round', el => el.setProp('progress', 70));
     assert.equal(await getProgress(), 30);
   });
 });
diff --git a/elements/sifrr-progress-round/test/browser/state.test.js b/elements/sifrr-progress-round/test/browser/state.test.js