@descope-ui/descope-badge 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.1.0 (2025-09-02)
+
+### Dependency Updates
+
+* `e2e-utils` updated to version `0.1.0`
+* `test-assets` updated to version `0.0.1`
+* `test-drivers` updated to version `0.0.1`
+* `@descope-ui/common` updated to version `0.1.0`
+* `@descope-ui/theme-globals` updated to version `0.0.20`
+
+### Features
+
+* Trusted Devices ([#697](https://github.com/descope/web-components-ui/issues/697)) ([fb2f0eb](https://github.com/descope/web-components-ui/commit/fb2f0eb6773ed624354ed9f0b97d713bb8b10fce))
+
+# Changelog

package/e2e/descope-badge.spec.ts

@@ -0,0 +1,37 @@
+import { test, expect } from '@playwright/test';
+import { getStoryUrl, loopConfig } from 'e2e-utils';
+
+import createBadgeTestDriver from '../testDriver/badgeTestDriver';
+
+const componentAttributes = {
+  bordered: ['true', 'false'],
+  mode: ['default', 'primary', 'secondary', 'success', 'error'],
+  size: ['xs', 'sm', 'md', 'lg'],
+  'full-width': ['true', 'false'],
+};
+
+const storyName = 'descope-badge';
+const componentName = 'descope-badge';
+
+test.describe('theme', () => {
+  loopConfig(componentAttributes, (attr, value) => {
+    test(`${attr}: ${value}`, async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, { [attr]: value }), {
+        waitUntil: 'networkidle',
+      });
+      const component = createBadgeTestDriver(page.locator(componentName));
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+  });
+
+  test(`direction: rtl`, async ({ page }) => {
+    await page.goto(
+      getStoryUrl(storyName, { direction: 'rtl', text: `-Label` }),
+      {
+        waitUntil: 'networkidle',
+      },
+    );
+    const component = createBadgeTestDriver(page.locator(componentName));
+    expect(await component.screenshot()).toMatchSnapshot();
+  });
+});

package/package.json

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

package/src/component/BadgeClass.js

@@ -0,0 +1,75 @@
+import {
+  componentNameValidationMixin,
+  createStyleMixin,
+  draggableMixin,
+} from '@descope-ui/common/components-mixins';
+import { createBaseClass } from '@descope-ui/common/base-classes';
+import { getComponentName } from '@descope-ui/common/components-helpers';
+import { compose } from '@descope-ui/common/utils';
+import { injectStyle } from '@descope-ui/common/components-helpers';
+
+export const componentName = getComponentName('badge');
+
+class RawBadge extends createBaseClass({
+  componentName,
+  baseSelector: ':host > div',
+}) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<div>
+      <slot></slot>
+		</div>
+		`;
+
+    injectStyle(
+      `
+      :host {
+        display: inline-flex;
+      }
+      :host > div {
+        width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+      `,
+      this,
+    );
+  }
+}
+
+export const BadgeClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: [{ selector: () => ':host', property: 'width' }],
+      hostDirection: { property: 'direction' },
+
+      fontFamily: {},
+      fontSize: {},
+      fontWeight: {},
+      textTransform: {},
+      verticalPadding: [
+        { property: 'padding-top' },
+        { property: 'padding-bottom' },
+      ],
+      horizontalPadding: [
+        { property: 'padding-left' },
+        { property: 'padding-right' },
+      ],
+
+      borderWidth: {},
+      borderStyle: {},
+      borderColor: {},
+      borderRadius: {},
+
+      backgroundColor: {},
+
+      textColor: { property: 'color' },
+      textAlign: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+)(RawBadge);

package/src/component/index.js

@@ -0,0 +1,5 @@
+import { componentName, BadgeClass } from './BadgeClass';
+
+customElements.define(componentName, BadgeClass);
+
+export { BadgeClass, componentName };

package/src/theme.js

@@ -0,0 +1,72 @@
+import globals from '@descope-ui/theme-globals';
+import { getThemeRefs } from '@descope-ui/common/theme-helpers';
+import { BadgeClass } from './component/BadgeClass';
+
+const globalRefs = getThemeRefs(globals);
+
+const vars = BadgeClass.cssVarList;
+
+const badge = {
+  [vars.hostWidth]: 'fit-content',
+  [vars.hostDirection]: globalRefs.direction,
+
+  [vars.textAlign]: 'center',
+
+  [vars.fontFamily]: globalRefs.fonts.font1.family,
+  [vars.fontWeight]: '400',
+
+  [vars.verticalPadding]: '0.25em',
+  [vars.horizontalPadding]: '0.5em',
+
+  [vars.borderWidth]: globalRefs.border.xs,
+  [vars.borderRadius]: globalRefs.radius.xs,
+  [vars.borderColor]: 'transparent',
+  [vars.borderStyle]: 'solid',
+
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+
+  size: {
+    xs: { [vars.fontSize]: '12px' },
+    sm: { [vars.fontSize]: '14px' },
+    md: { [vars.fontSize]: '16px' },
+    lg: { [vars.fontSize]: '18px' },
+  },
+
+  mode: {
+    default: {
+      [vars.textColor]: globalRefs.colors.surface.dark,
+      _bordered: {
+        [vars.borderColor]: globalRefs.colors.surface.light,
+      },
+    },
+    primary: {
+      [vars.textColor]: globalRefs.colors.primary.main,
+      _bordered: {
+        [vars.borderColor]: globalRefs.colors.primary.light,
+      },
+    },
+    secondary: {
+      [vars.textColor]: globalRefs.colors.secondary.main,
+      _bordered: {
+        [vars.borderColor]: globalRefs.colors.secondary.light,
+      },
+    },
+    error: {
+      [vars.textColor]: globalRefs.colors.error.main,
+      _bordered: {
+        [vars.borderColor]: globalRefs.colors.error.light,
+      },
+    },
+    success: {
+      [vars.textColor]: globalRefs.colors.success.main,
+      _bordered: {
+        [vars.borderColor]: globalRefs.colors.success.light,
+      },
+    },
+  },
+};
+
+export default badge;
+export { vars };

package/stories/descope-badge.stories.js

@@ -0,0 +1,60 @@
+import { componentName } from '../src/component';
+
+import {
+  textContentControl,
+  modeControl,
+  fullWidthControl,
+  sizeControl,
+  borderedControl,
+  directionControl,
+} from '@descope-ui/common/sb-controls';
+
+const Template = ({
+  mode,
+  'full-width': fullWidth,
+  size,
+  bordered,
+  text,
+  direction,
+}) => `
+  <descope-badge
+    mode="${mode}"
+    size="${size}"
+    bordered="${bordered}"
+    full-width="${fullWidth || false}"
+    st-host-direction="${direction ?? ''}"
+  >
+    ${text}
+  </descope-badge>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-badge',
+  parameters: {
+    panelPosition: 'right',
+    controls: { expanded: true },
+  },
+  argTypes: {
+    ...textContentControl,
+    ...modeControl,
+    ...fullWidthControl,
+    ...sizeControl,
+    ...directionControl,
+    ...borderedControl,
+    mode: {
+      ...modeControl.mode,
+      options: ['none', 'default', 'primary', 'secondary', 'success', 'error'],
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  text: 'Label',
+  mode: 'primary',
+  size: 'md',
+  bordered: 'true',
+  'full-width': 'false',
+};

package/testDriver/badgeTestDriver.ts

@@ -0,0 +1,10 @@
+import { Locator } from '@playwright/test';
+import { createComponentTestDriver } from 'test-drivers';
+
+const createBadgeTestDriver = (locator: Locator) => {
+  return {
+    ...createComponentTestDriver(locator),
+  };
+};
+
+export default createBadgeTestDriver;