@descope-ui/descope-button 0.0.1

package/CHANGELOG.md

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

package/e2e/descope-button.spec.ts

@@ -0,0 +1,73 @@
+import { expect, test } from '@playwright/test';
+import { getStoryUrl, loopConfig, loopPresets } from 'e2e-utils';
+
+const componentAttributes = {
+  mode: ['primary', 'secondary', 'success', 'error'],
+  variant: ['contained', 'outline', 'link'],
+  size: ['xs', 'sm', 'md', 'lg'],
+  'full-width': ['true', 'false'],
+  square: ['true', 'false'],
+  icon: 'true',
+  // loading: 'true',
+};
+
+const presets = {
+  'direction rtl': { direction: 'rtl', text: '-Click Me' },
+  'direction rtl with icon': { direction: 'rtl', text: '-Click Me', icon: 'true' },
+};
+
+const storyName = 'descope-button';
+const componentName = 'descope-button';
+
+test.describe('theme', () => {
+  loopConfig(componentAttributes, (attr, value) => {
+    test.describe(`${attr}: ${value}`, () => {
+      test.beforeEach(async ({ page }) => {
+        await page.goto(getStoryUrl(storyName, { [attr]: value }), { waitUntil: 'load' });
+      });
+      test('hover', async ({ page }) => {
+        const component = page.locator(componentName);
+
+        await component.hover();
+
+        expect(await component.screenshot()).toMatchSnapshot();
+      });
+
+      test('focus', async ({ page }) => {
+        const component = page.locator(componentName);
+
+        await component.focus();
+
+        expect(await component.screenshot()).toMatchSnapshot();
+      });
+
+      test('active', async ({ page }) => {
+        const component = page.locator(componentName);
+
+        await component.hover();
+        await page.mouse.down();
+
+        expect(await component.screenshot()).toMatchSnapshot();
+      });
+    });
+  });
+
+  loopPresets(presets, (preset, name) => {
+    test(name, async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, preset));
+      await page.waitForSelector(componentName);
+      const component = page.locator(componentName);
+      expect(
+        await component.screenshot({ animations: 'disabled', timeout: 3000, caret: 'hide' })
+      ).toMatchSnapshot();
+    });
+  });
+});
+
+test.describe('other', () => {
+  test('disabled', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, { disabled: 'true' }), { waitUntil: 'networkidle' });
+    const component = page.locator(componentName);
+    expect(await component.screenshot()).toMatchSnapshot();
+  });
+});

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@descope-ui/descope-button",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/ButtonClass.js"
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.38.1",
+    "e2e-utils": "0.0.1",
+    "test-assets": "0.0.1"
+  },
+  "dependencies": {
+    "@vaadin/button": "24.3.4",
+    "@descope-ui/common": "0.0.7",
+    "@descope-ui/theme-globals": "0.0.7",
+    "@descope-ui/descope-icon": "0.0.1"
+  },
+  "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-button",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/descope-button/src",
+  "projectType": "library",
+  "targets": {
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "trackDeps": true,
+        "push": false,
+        "preset": "conventional"
+      }
+    }
+  },
+  "tags": []
+}

package/src/component/ButtonClass.js

@@ -0,0 +1,163 @@
+import { compose } from '@descope-ui/common/utils';
+import { getComponentName } from '@descope-ui/common/components-helpers';
+import {
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  componentNameValidationMixin,
+} from '@descope-ui/common/components-mixins';
+import { IconClass } from '@descope-ui/descope-icon/class';
+import { clickableMixin } from './clickableMixin';
+
+export const componentName = getComponentName('button');
+
+const resetStyles = `
+	:host {
+		display: inline-block;
+		box-sizing: border-box;
+	}
+	vaadin-button::before,
+	vaadin-button::after {
+		opacity: 0;
+	}
+	vaadin-button {
+		margin: 0;
+		min-width: 0;
+		width: 100%;
+		height: auto;
+		box-shadow: none;
+	}
+	vaadin-button::part(label) {
+		padding: 0;
+    width: 100%;
+	}
+	vaadin-button::part(prefix) {
+		margin-left: 0;
+		margin-right: 0;
+	}
+`;
+
+const iconStyles = `
+	vaadin-button::part(prefix),
+	vaadin-button::part(label) {
+		display: flex;
+		align-items: center;
+	}
+`;
+
+const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
+
+const { host, label, slottedIcon } = {
+  host: { selector: () => ':host' },
+  label: { selector: '::part(label)' },
+  slottedIcon: { selector: () => '::slotted(descope-icon)' },
+};
+
+let loadingIndicatorStyles;
+
+export const ButtonClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { property: 'width' },
+      hostHeight: { property: 'height' },
+      hostDirection: { ...host, property: 'direction' },
+      fontSize: {},
+      fontFamily: {},
+
+      cursor: {},
+      backgroundColor: {},
+
+      outlineOffset: {},
+      outlineColor: {},
+      outlineStyle: {},
+      outlineWidth: {},
+
+      borderRadius: {},
+      borderColor: {},
+      borderStyle: {},
+      borderWidth: {},
+
+      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
+      horizontalPadding: [
+        { property: 'padding-right', fallback: '0.875em' },
+        { property: 'padding-left', fallback: '0.875em' },
+      ],
+
+      labelTextColor: { property: 'color' },
+      iconColor: {
+        selector: () => `::slotted(*)`,
+        property: IconClass.cssVarList.fill,
+      },
+      labelTextDecoration: { ...label, property: 'text-decoration' },
+      labelSpacing: { ...label, property: 'gap' },
+      textAlign: { ...label, property: 'justify-content', fallback: 'center' },
+
+      iconSize: [
+        { ...slottedIcon, property: 'width' },
+        { ...slottedIcon, property: 'height' },
+      ],
+    },
+  }),
+  clickableMixin,
+  draggableMixin,
+  componentNameValidationMixin
+)(
+  createProxy({
+    slots: ['', 'prefix', 'label', 'suffix'],
+    wrappedEleName: 'vaadin-button',
+    style: () => `
+			${resetStyles}
+			${iconStyles}
+			${loadingIndicatorStyles}
+			${editorOverrides}
+			:host {
+				padding: calc(var(${ButtonClass.cssVarList.outlineWidth}) + var(${ButtonClass.cssVarList.outlineOffset}));
+			}
+      :host([full-width="true"]) {
+        width: var(${ButtonClass.cssVarList.hostWidth});
+      }
+			vaadin-button {
+				height: calc(var(${ButtonClass.cssVarList.hostHeight}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));
+			}
+			[square="true"]:not([full-width="true"]) {
+				width: calc(var(${ButtonClass.cssVarList.hostWidth}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));
+        padding: 0;
+			}
+		`,
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
+);
+
+const { color, fontSize } = ButtonClass.cssVarList;
+loadingIndicatorStyles = `
+	@keyframes spin {
+		0% { -webkit-transform: rotate(0deg); }
+		100% { -webkit-transform: rotate(360deg); }
+	}
+	:host([loading="true"]) ::before {
+		animation: spin 2s linear infinite;
+		position: absolute;
+		content: '';
+		z-index: 1;
+		box-sizing: border-box;
+		border-radius: 50%;
+		border-bottom-color: transparent;
+		border-left-color: transparent;
+		border-style: solid;
+		color: var(${color});
+		top: calc(50% - (var(${fontSize}) / 2));
+		left: calc(50% - (var(${fontSize}) / 2));
+		border-width: calc(var(${fontSize}) / 10);
+		width: var(${fontSize});
+		height: var(${fontSize});
+	}
+	:host([disabled="true"]),
+	:host([loading="true"]) {
+		pointer-events: none;
+	}
+	:host([loading="true"])::part(prefix),
+	:host([loading="true"])::part(label) {
+		visibility: hidden;
+	}
+`;

package/src/component/clickableMixin.js

@@ -0,0 +1,10 @@
+export const clickableMixin = (superclass) =>
+  class ClickableMixinClass extends superclass {
+    get isLoading() {
+      return this.getAttribute('loading') === 'true';
+    }
+
+    click() {
+      this.isLoading || super.click();
+    }
+  };

package/src/component/index.js

@@ -0,0 +1,6 @@
+import { componentName, ButtonClass } from './ButtonClass';
+import '@vaadin/button';
+
+customElements.define(componentName, ButtonClass);
+
+export { ButtonClass, componentName };

package/src/theme.js

@@ -0,0 +1,133 @@
+import globals from '@descope-ui/theme-globals';
+import { getThemeRefs, createHelperVars } from '@descope-ui/common/theme-helpers';
+import { componentName, ButtonClass } from './component/ButtonClass';
+
+const globalRefs = getThemeRefs(globals);
+const compVars = ButtonClass.cssVarList;
+
+const mode = {
+  primary: globalRefs.colors.primary,
+  secondary: globalRefs.colors.secondary,
+  success: globalRefs.colors.success,
+  error: globalRefs.colors.error,
+  surface: globalRefs.colors.surface,
+};
+
+const [helperTheme, helperRefs, helperVars] = createHelperVars({ mode }, componentName);
+
+const button = {
+  ...helperTheme,
+
+  [compVars.fontFamily]: globalRefs.fonts.font1.family,
+
+  [compVars.cursor]: 'pointer',
+  [compVars.hostHeight]: '3em',
+  [compVars.hostWidth]: 'auto',
+  [compVars.hostDirection]: globalRefs.direction,
+
+  [compVars.borderRadius]: globalRefs.radius.sm,
+  [compVars.borderWidth]: globalRefs.border.xs,
+  [compVars.borderStyle]: 'solid',
+  [compVars.borderColor]: 'transparent',
+
+  [compVars.labelSpacing]: '0.25em',
+
+  [compVars.textAlign]: 'center', // default text align center
+  textAlign: {
+    right: { [compVars.textAlign]: 'right' },
+    left: { [compVars.textAlign]: 'left' },
+    center: { [compVars.textAlign]: 'center' },
+  },
+
+  [compVars.verticalPadding]: '1em',
+  [compVars.horizontalPadding]: '0.875em',
+
+  [compVars.outlineWidth]: globals.border.sm,
+  [compVars.outlineOffset]: '0px', // keep `px` unit for external calc
+  [compVars.outlineStyle]: 'solid',
+  [compVars.outlineColor]: 'transparent',
+
+  [compVars.iconSize]: '1.5em',
+
+  size: {
+    xs: { [compVars.fontSize]: '12px' },
+    sm: { [compVars.fontSize]: '14px' },
+    md: { [compVars.fontSize]: '16px' },
+    lg: { [compVars.fontSize]: '18px' },
+  },
+
+  _square: {
+    [compVars.hostHeight]: '3em',
+    [compVars.hostWidth]: '3em',
+    [compVars.verticalPadding]: '0',
+  },
+
+  _fullWidth: {
+    [compVars.hostWidth]: '100%',
+  },
+
+  _loading: {
+    [compVars.cursor]: 'wait',
+    [compVars.labelTextColor]: helperRefs.main,
+  },
+
+  _disabled: {
+    [helperVars.main]: globalRefs.colors.surface.light,
+    [helperVars.dark]: globalRefs.colors.surface.dark,
+    [helperVars.light]: globalRefs.colors.surface.light,
+    [helperVars.contrast]: globalRefs.colors.surface.main,
+    [compVars.iconColor]: globalRefs.colors.surface.main,
+  },
+
+  variant: {
+    contained: {
+      [compVars.labelTextColor]: helperRefs.contrast,
+      [compVars.backgroundColor]: helperRefs.main,
+      _hover: {
+        [compVars.backgroundColor]: helperRefs.dark,
+        _loading: {
+          [compVars.backgroundColor]: helperRefs.main,
+        },
+      },
+      _active: {
+        [compVars.backgroundColor]: helperRefs.main,
+      },
+    },
+
+    outline: {
+      [compVars.labelTextColor]: helperRefs.main,
+      [compVars.borderColor]: helperRefs.main,
+      _hover: {
+        [compVars.labelTextColor]: helperRefs.dark,
+        [compVars.borderColor]: helperRefs.dark,
+      },
+      _active: {
+        [compVars.labelTextColor]: helperRefs.main,
+        [compVars.borderColor]: helperRefs.main,
+      },
+    },
+
+    link: {
+      [compVars.labelTextColor]: helperRefs.main,
+      [compVars.horizontalPadding]: '0.125em',
+      _hover: {
+        [compVars.labelTextColor]: helperRefs.dark,
+        [compVars.labelTextDecoration]: 'underline',
+      },
+      _active: {
+        [compVars.labelTextColor]: helperRefs.main,
+      },
+    },
+  },
+
+  _focused: {
+    [compVars.outlineColor]: helperRefs.light,
+  },
+};
+
+export default button;
+
+export const vars = {
+  ...compVars,
+  ...helperVars,
+};

package/stories/descope-button.stories.js

@@ -0,0 +1,88 @@
+import { componentName } from '../src/component';
+import {
+  textContentControl,
+  sizeControl,
+  modeControl,
+  buttonVariantControl,
+  loadingControl,
+  fullWidthControl,
+  disabledControl,
+  directionControl,
+  textAlignControl,
+  labelSpacingControl,
+} from '@descope-ui/common/sb-controls';
+
+import {base64svg} from 'test-assets';
+
+const Template = ({
+  text,
+  variant,
+  mode,
+  size,
+  loading,
+  icon,
+  square,
+  'full-width': fullWidth,
+  disabled,
+  direction,
+  'text-align': textAlign,
+  'label-spacing': spacing,
+}) => `
+<style nonce="${window.DESCOPE_NONCE}">
+  .wrapper {
+    --descope-button-icon-color: currentColor;
+  }
+</style>
+
+  <div class="wrapper">
+    <descope-button
+      mode="${mode}"
+      variant="${variant}"
+      size="${size}"
+      loading="${loading || false}"
+      disabled="${disabled || false}"
+      square="${square || false}"
+      full-width="${fullWidth || false}"
+      text-align="${textAlign}"
+      st-label-spacing="${spacing}px"
+      st-host-direction="${direction ?? ''}">
+      ${icon ? `<descope-icon src=${base64svg}></descope-icon>` : ''}
+      ${text}
+    </descope-button>
+  </div>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-button',
+  argTypes: {
+    ...textContentControl,
+    ...modeControl,
+    ...sizeControl,
+    ...buttonVariantControl,
+    ...loadingControl,
+    ...fullWidthControl,
+    ...disabledControl,
+    ...directionControl,
+    ...textAlignControl,
+    ...labelSpacingControl,
+    square: {
+      name: 'Square',
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  text: 'Click',
+  variant: 'contained',
+  mode: 'primary',
+  size: 'md',
+  loading: false,
+  icon: false,
+  'full-width': false,
+  'text-align': 'center',
+  'label-spacing': 4,
+};