@descope-ui/descope-timer-button 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.0.1 (2025-03-11)
+
+### Dependency Updates
+
+* `e2e-utils` updated to version `0.0.1`
+* `test-drivers` updated to version `0.0.1`
+* `test-assets` updated to version `0.0.1`
+* `@descope-ui/common` updated to version `0.0.9`
+* `@descope-ui/theme-globals` updated to version `0.0.9`
+* `@descope-ui/descope-timer` updated to version `0.0.1`
+* `@descope-ui/descope-button` updated to version `0.0.4`
+# Changelog

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

@@ -0,0 +1,148 @@
+import { test, expect } from '@playwright/test';
+import { getStoryUrl, loopConfig, loopPresets } from 'e2e-utils';
+import { createTimerButtonTestDriver } from 'test-drivers';
+
+const componentAttributes = {
+  size: ['xs', 'sm', 'md', 'lg'],
+  horizontal: ['true', 'false'],
+  'hide-icon': ['true', 'false'],
+  'full-width': ['true', 'false'],
+  'button-variant': ['contained', 'outline', 'link'],
+  'button-mode': ['primary', 'secondary'],
+  icon: ['true', 'false'],
+};
+
+const storyName = 'descope-timer-button';
+const componentName = 'descope-timer-button';
+
+const presets = {
+  'full width horizontal': { 'full-width': 'true', horizontal: 'true' },
+  'full width vertical': { 'full-width': 'true' },
+};
+
+test.describe('theme', () => {
+  loopConfig(componentAttributes, (attr, value) => {
+    test(`${attr}: ${value}`, async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, { [attr]: value }), {
+        waitUntil: 'load',
+      });
+      const component = createTimerButtonTestDriver(
+        page.locator(componentName),
+      );
+      await component.timer.pause();
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+  });
+
+  ['left', 'center', 'right'].forEach((alignment) => {
+    test(`text-align: ${alignment}`, async ({ page }) => {
+      await page.goto(
+        getStoryUrl(storyName, {
+          'text-align': alignment,
+          'full-width': 'true',
+        }),
+        { waitUntil: 'load' },
+      );
+      const component = createTimerButtonTestDriver(
+        page.locator(componentName),
+      );
+      await component.timer.pause();
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+  });
+});
+
+test.describe('logic', () => {
+  test(`button restarts timer`, async ({ page }) => {
+    await page.goto(
+      getStoryUrl(storyName, {
+        seconds: '2',
+      }),
+      {
+        waitUntil: 'load',
+      },
+    );
+    const component = createTimerButtonTestDriver(page.locator(componentName));
+
+    await component.timer.stop();
+    expect(await component.screenshot()).toMatchSnapshot();
+
+    await component.timer.reset();
+    await page.waitForTimeout(3000);
+
+    expect(await component.screenshot()).toMatchSnapshot();
+  });
+
+  test(`disable button if timer is running`, async ({ page }) => {
+    await page.goto(
+      getStoryUrl(storyName, {
+        seconds: '3',
+      }),
+      {
+        waitUntil: 'load',
+      },
+    );
+    const component = createTimerButtonTestDriver(page.locator(componentName));
+
+    await component.timer.pause();
+    expect(await component.screenshot()).toMatchSnapshot();
+
+    await component.timer.resume();
+    await page.waitForTimeout(1000);
+
+    await component.timer.pause();
+    expect(await component.screenshot()).toMatchSnapshot();
+  });
+
+  test(`enable button if timer finished`, async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, { seconds: '2' }), {
+      waitUntil: 'load',
+    });
+
+    const component = createTimerButtonTestDriver(page.locator(componentName));
+
+    await component.timer.stop();
+    await component.timer.reset();
+    await component.timer.pause();
+    expect(await component.screenshot({ delay: 3000 })).toMatchSnapshot();
+
+    await component.timer.resume();
+    await page.waitForTimeout(4000);
+    expect(await component.screenshot()).toMatchSnapshot();
+  });
+
+  ['', '-1', '0', '1', '10', '100', '10000', '100000', '100000000'].forEach(
+    (seconds) => {
+      test(`format time: ${seconds || 'empty'} seconds`, async ({ page }) => {
+        await page.goto(getStoryUrl(storyName, { seconds }), {
+          waitUntil: 'load',
+        });
+        const component = createTimerButtonTestDriver(
+          page.locator(componentName),
+        );
+        await component.timer.pause();
+        expect(await component.screenshot()).toMatchSnapshot();
+      });
+    },
+  );
+});
+
+test.describe('presets', () => {
+  ['ltr', 'rtl'].forEach((direction) => {
+    loopPresets(presets, (preset, name) => {
+      test(`${name} - ${direction}`, async ({ page }) => {
+        await page.goto(getStoryUrl(storyName, preset));
+
+        const component = createTimerButtonTestDriver(
+          page.locator(componentName),
+        );
+
+        await component.timer.pause();
+
+        expect(
+          await component.screenshot({ animations: 'disabled' }),
+        ).toMatchSnapshot();
+      });
+    });
+  });
+});

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@descope-ui/descope-timer-button",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/TimerButtonClass.js"
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.38.1",
+    "e2e-utils": "0.0.1",
+    "test-drivers": "0.0.1",
+    "test-assets": "0.0.1"
+  },
+  "dependencies": {
+    "@descope-ui/common": "0.0.9",
+    "@descope-ui/theme-globals": "0.0.9",
+    "@descope-ui/descope-timer": "0.0.1",
+    "@descope-ui/descope-button": "0.0.4"
+  },
+  "publishConfig": {
+    "link-workspace-packages": false
+  },
+  "scripts": {
+    "test": "echo 'No tests defined' && exit 0",
+    "test:e2e": "echo 'No e2e tests defined' && exit 0"
+  }
+}

package/project.json

@@ -0,0 +1,17 @@
+{
+  "name": "@descope-ui/descope-timer-button",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/descope-timer-button/src",
+  "projectType": "library",
+  "targets": {
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "trackDeps": true,
+        "push": false,
+        "preset": "conventional"
+      }
+    }
+  },
+  "tags": []
+}

package/src/component/TimerButtonClass.js

@@ -0,0 +1,138 @@
+import {
+  createStyleMixin,
+  draggableMixin,
+  componentNameValidationMixin,
+} from '@descope-ui/common/components-mixins';
+import { createBaseClass } from '@descope-ui/common/base-classes';
+import { compose } from '@descope-ui/common/utils';
+import {
+  forwardAttrs,
+  getComponentName,
+  injectStyle,
+} from '@descope-ui/common/components-helpers';
+
+export const componentName = getComponentName('timer-button');
+
+const buttonAttrs = [
+  'button-variant',
+  'button-mode',
+  'size',
+  'text-align',
+  'full-width',
+];
+
+const mapButtonAttrs = {
+  'button-variant': 'variant',
+  'button-mode': 'mode',
+};
+
+const timerAttrs = [
+  'timer-seconds',
+  'timer-hide-icon',
+  'size',
+  'text-align',
+  'full-width',
+];
+
+const mapTimerAttrs = {
+  'timer-seconds': 'seconds',
+  'timer-hide-icon': 'hide-icon',
+};
+
+const BaseClass = createBaseClass({
+  componentName,
+  baseSelector: ':host > div',
+});
+
+class RawTimerButton extends BaseClass {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+      <div class="wrapper">
+        <descope-timer class="timer"></descope-timer>
+        <descope-button class="button">
+          <slot></slot>
+        </descope-button>
+      </div>
+		`;
+
+    injectStyle(
+      `
+      :host {
+        display: inline-flex;
+      }
+      .wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5em;
+        align-items: center;
+        width: 100%;
+      }
+      .timer {
+        flex: 1;
+      }
+    `,
+      this,
+    );
+
+    this.timer = this.shadowRoot.querySelector('.timer');
+    this.button = this.shadowRoot.querySelector('.button');
+
+    this.timer.addEventListener('timer-started', () => this.onTimerStarted());
+    this.timer.addEventListener('timer-ended', () => this.onTimerEnded());
+
+    this.button.addEventListener('click', this.onClick.bind(this));
+  }
+
+  init() {
+    super.init?.();
+
+    forwardAttrs(this, this.button, {
+      includeAttrs: buttonAttrs,
+      mapAttrs: mapButtonAttrs,
+    });
+
+    forwardAttrs(this, this.timer, {
+      includeAttrs: timerAttrs,
+      mapAttrs: mapTimerAttrs,
+    });
+  }
+
+  onTimerStarted() {
+    this.toggleButtonDisable(true);
+  }
+
+  onTimerEnded() {
+    this.toggleButtonDisable(false);
+  }
+
+  onClick() {
+    this.timer.reset();
+  }
+
+  toggleButtonDisable(isDisabled) {
+    isDisabled
+      ? this.button.setAttribute('disabled', 'true')
+      : this.button.removeAttribute('disabled');
+  }
+}
+
+const { host } = {
+  host: { selector: () => ':host' },
+  icon: { selector: '.icon' },
+  timer: { selector: '.timer' },
+};
+
+export const TimerButtonClass = compose(
+  createStyleMixin({
+    mappings: {
+      gap: {},
+      flexDirection: {},
+      hostWidth: { ...host, property: 'width' },
+      hostDirection: { ...host, property: 'direction' },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+)(RawTimerButton);

package/src/component/index.js

@@ -0,0 +1,7 @@
+import { componentName, TimerButtonClass } from './TimerButtonClass';
+import '@descope-ui/descope-button';
+import '@descope-ui/descope-timer';
+
+customElements.define(componentName, TimerButtonClass);
+
+export { TimerButtonClass, componentName };

package/src/theme.js

@@ -0,0 +1,23 @@
+import globals from '@descope-ui/theme-globals';
+import { getThemeRefs } from '@descope-ui/common/theme-helpers';
+import { TimerButtonClass } from './component/TimerButtonClass';
+
+const globalRefs = getThemeRefs(globals);
+const vars = TimerButtonClass.cssVarList;
+
+const timerButton = {
+  [vars.gap]: globalRefs.spacing.sm,
+  [vars.flexDirection]: 'column',
+
+  _horizontal: {
+    [vars.flexDirection]: 'row',
+  },
+
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+};
+
+export default timerButton;
+
+export { vars };

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

@@ -0,0 +1,89 @@
+import { componentName } from '../src/component';
+import {
+  buttonVariantControl,
+  directionControl,
+  fullWidthControl,
+  modeControl,
+  sizeControl,
+  textAlignControl,
+} from '@descope-ui/common/sb-controls';
+import { base64svg } from 'test-assets';
+
+const Template = ({
+  'timer-seconds': timerSeconds,
+  'timer-hide-icon': timerHideIcon,
+  size,
+  direction,
+  horizontal,
+  'full-width': fullWidth,
+  'text-align': textAlign,
+  'button-variant': buttonVariant,
+  'button-mode': buttonMode,
+  label,
+  icon,
+}) => `
+  <descope-timer-button
+    timer-seconds="${timerSeconds}"
+    timer-hide-icon="${timerHideIcon || false}"
+    size="${size}"
+    horizontal="${horizontal || false}"
+    full-width="${fullWidth || false}"
+    text-align="${textAlign}"
+    button-variant="${buttonVariant}"
+    button-mode="${buttonMode}"
+    st-host-direction="${direction ?? ''}"
+  >
+    ${icon ? `<descope-icon src=${base64svg}></descope-icon>` : ''}
+    ${label}
+  </descope-timer-button>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-timer-button',
+  argTypes: {
+    ...sizeControl,
+    ...directionControl,
+    ...fullWidthControl,
+    ...textAlignControl,
+    'button-variant': buttonVariantControl.variant,
+    'button-mode': modeControl.mode,
+    horizontal: {
+      name: 'Horizontal',
+      control: {
+        type: 'boolean',
+      },
+    },
+    'timer-seconds': {
+      name: 'Seconds',
+      control: {
+        type: 'number',
+      },
+    },
+    'timer-hide-icon': {
+      name: 'Hide Icon',
+      control: {
+        type: 'boolean',
+      },
+    },
+    icon: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'sm',
+  direction: '',
+  'timer-seconds': 5,
+  'timer-hide-icon': false,
+  horizontal: false,
+  'text-align': 'center',
+  'button-variant': 'contained',
+  'button-mode': 'primary',
+  'full-width': false,
+  icon: false,
+  label: 'Resend',
+};