@descope-ui/descope-timer-button 0.0.1 → 0.0.2

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.2](https://github.com/descope/web-components-ui/compare/@descope-ui/descope-timer-button-0.0.1...@descope-ui/descope-timer-button-0.0.2) (2025-03-13)
+
+### Dependency Updates
+
+* `@descope-ui/descope-timer` updated to version `0.0.2`
 ## 0.0.1 (2025-03-11)
 
 ### Dependency Updates

package/e2e/descope-timer-button.spec.ts

@@ -5,11 +5,12 @@ import { createTimerButtonTestDriver } from 'test-drivers';
 const componentAttributes = {
   size: ['xs', 'sm', 'md', 'lg'],
   horizontal: ['true', 'false'],
-  'hide-icon': ['true', 'false'],
+  'timer-hide-icon': ['true', 'false'],
   'full-width': ['true', 'false'],
   'button-variant': ['contained', 'outline', 'link'],
   'button-mode': ['primary', 'secondary'],
   icon: ['true', 'false'],
+  'st-gap': ['0', '10', '20'],
 };
 
 const storyName = 'descope-timer-button';
@@ -18,6 +19,7 @@ const componentName = 'descope-timer-button';
 const presets = {
   'full width horizontal': { 'full-width': 'true', horizontal: 'true' },
   'full width vertical': { 'full-width': 'true' },
+  'horizontal with gap': { horizontal: 'true', 'st-gap': '35' },
 };
 
 test.describe('theme', () => {
@@ -56,7 +58,7 @@ test.describe('logic', () => {
   test(`button restarts timer`, async ({ page }) => {
     await page.goto(
       getStoryUrl(storyName, {
-        seconds: '2',
+        'timer-seconds': '2',
       }),
       {
         waitUntil: 'load',
@@ -65,18 +67,18 @@ test.describe('logic', () => {
     const component = createTimerButtonTestDriver(page.locator(componentName));
 
     await component.timer.stop();
-    expect(await component.screenshot()).toMatchSnapshot();
+    expect(await component.screenshot({ delay: 3000 })).toMatchSnapshot();
 
-    await component.timer.reset();
-    await page.waitForTimeout(3000);
+    await component.button.click();
+    await component.timer.pause();
 
-    expect(await component.screenshot()).toMatchSnapshot();
+    expect(await component.screenshot({ delay: 3000 })).toMatchSnapshot();
   });
 
   test(`disable button if timer is running`, async ({ page }) => {
     await page.goto(
       getStoryUrl(storyName, {
-        seconds: '3',
+        'timer-seconds': '3',
       }),
       {
         waitUntil: 'load',
@@ -95,7 +97,7 @@ test.describe('logic', () => {
   });
 
   test(`enable button if timer finished`, async ({ page }) => {
-    await page.goto(getStoryUrl(storyName, { seconds: '2' }), {
+    await page.goto(getStoryUrl(storyName, { 'timer-seconds': '2' }), {
       waitUntil: 'load',
     });
 
@@ -104,7 +106,7 @@ test.describe('logic', () => {
     await component.timer.stop();
     await component.timer.reset();
     await component.timer.pause();
-    expect(await component.screenshot({ delay: 3000 })).toMatchSnapshot();
+    expect(await component.screenshot()).toMatchSnapshot();
 
     await component.timer.resume();
     await page.waitForTimeout(4000);
@@ -131,7 +133,7 @@ test.describe('presets', () => {
   ['ltr', 'rtl'].forEach((direction) => {
     loopPresets(presets, (preset, name) => {
       test(`${name} - ${direction}`, async ({ page }) => {
-        await page.goto(getStoryUrl(storyName, preset));
+        await page.goto(getStoryUrl(storyName, { ...preset, direction }));
 
         const component = createTimerButtonTestDriver(
           page.locator(componentName),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/descope-timer-button",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "exports": {
     ".": {
       "import": "./src/component/index.js"
@@ -21,7 +21,7 @@
   "dependencies": {
     "@descope-ui/common": "0.0.9",
     "@descope-ui/theme-globals": "0.0.9",
-    "@descope-ui/descope-timer": "0.0.1",
+    "@descope-ui/descope-timer": "0.0.2",
     "@descope-ui/descope-button": "0.0.4"
   },
   "publishConfig": {

package/src/component/TimerButtonClass.js

@@ -29,6 +29,7 @@ const mapButtonAttrs = {
 const timerAttrs = [
   'timer-seconds',
   'timer-hide-icon',
+  'timer-paused',
   'size',
   'text-align',
   'full-width',
@@ -37,6 +38,7 @@ const timerAttrs = [
 const mapTimerAttrs = {
   'timer-seconds': 'seconds',
   'timer-hide-icon': 'hide-icon',
+  'timer-paused': 'paused',
 };
 
 const BaseClass = createBaseClass({
@@ -51,7 +53,7 @@ class RawTimerButton extends BaseClass {
     this.attachShadow({ mode: 'open' }).innerHTML = `
       <div class="wrapper">
         <descope-timer class="timer"></descope-timer>
-        <descope-button class="button">
+        <descope-button class="button" disabled="true">
           <slot></slot>
         </descope-button>
       </div>
@@ -97,6 +99,14 @@ class RawTimerButton extends BaseClass {
       includeAttrs: timerAttrs,
       mapAttrs: mapTimerAttrs,
     });
+
+    // When we sync attributes, the `disabled` attribute is being compared to the attribute
+    // on Vaadin component; since the Vaadin component has no `disabled` attribute, we sync
+    // that back to our component.
+    // This is pending a more generic fix in the way we sync attibutes.
+    this.button.shadowRoot
+      .querySelector('vaadin-button')
+      .setAttribute('disabled', 'true');
   }
 
   onTimerStarted() {
@@ -112,9 +122,11 @@ class RawTimerButton extends BaseClass {
   }
 
   toggleButtonDisable(isDisabled) {
-    isDisabled
-      ? this.button.setAttribute('disabled', 'true')
-      : this.button.removeAttribute('disabled');
+    setTimeout(() => {
+      isDisabled
+        ? this.button.setAttribute('disabled', 'true')
+        : this.button.removeAttribute('disabled');
+    });
   }
 }
 

package/stories/descope-timer-button.stories.js

@@ -12,6 +12,7 @@ import { base64svg } from 'test-assets';
 const Template = ({
   'timer-seconds': timerSeconds,
   'timer-hide-icon': timerHideIcon,
+  'timer-paused': timerPaused,
   size,
   direction,
   horizontal,
@@ -21,10 +22,12 @@ const Template = ({
   'button-mode': buttonMode,
   label,
   icon,
+  'st-gap': gap,
 }) => `
   <descope-timer-button
     timer-seconds="${timerSeconds}"
     timer-hide-icon="${timerHideIcon || false}"
+    timer-paused="${timerPaused || false}"
     size="${size}"
     horizontal="${horizontal || false}"
     full-width="${fullWidth || false}"
@@ -32,6 +35,7 @@ const Template = ({
     button-variant="${buttonVariant}"
     button-mode="${buttonMode}"
     st-host-direction="${direction ?? ''}"
+    st-gap="${gap ? `${gap}px` : ''}"
   >
     ${icon ? `<descope-icon src=${base64svg}></descope-icon>` : ''}
     ${label}
@@ -66,6 +70,16 @@ export default {
         type: 'boolean',
       },
     },
+    'timer-paused': {
+      name: 'Paused',
+      control: {
+        type: 'boolean',
+      },
+    },
+    'st-gap': {
+      name: 'Gap',
+      control: { type: 'text' },
+    },
     icon: {
       control: { type: 'boolean' },
     },
@@ -79,6 +93,7 @@ Default.args = {
   direction: '',
   'timer-seconds': 5,
   'timer-hide-icon': false,
+  'timer-paused': false,
   horizontal: false,
   'text-align': 'center',
   'button-variant': 'contained',