@descope-ui/descope-text 0.0.1

package/e2e/descope-text.spec.ts

@@ -0,0 +1,35 @@
+import { test, expect } from '@playwright/test';
+import { getStoryUrl, loopConfig } from 'e2e-utils';
+
+const componentAttributes = {
+  text: 'Test Text',
+  variant: ['h1', 'h2', 'h3', 'subtitle1', 'subtitle2', 'body1', 'body2'],
+  mode: ['primary', 'secondary', 'success', 'error'],
+  'text-align': ['left', 'center', 'right'],
+  'hide-when-empty': ['true'],
+};
+
+const storyName = 'descope-text';
+const componentName = 'descope-text';
+
+test.describe('theme', () => {
+  loopConfig(componentAttributes, (attr, value) => {
+    test(`${attr}: ${value}`, async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, { [attr]: value }));
+      const component = page.locator(componentName);
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+  });
+
+  test(`full-width: false`, async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, { 'full-width': false }));
+    const component = page.locator(componentName);
+    expect(await component.screenshot()).toMatchSnapshot();
+  });
+
+  test(`direction: rtl`, async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, { direction: 'rtl', text: '-Hello World' }));
+    const component = page.locator(componentName);
+    expect(await component.screenshot()).toMatchSnapshot();
+  });
+});

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@descope-ui/descope-text",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/TextClass.js"
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.38.1",
+    "e2e-utils": "0.0.1"
+  },
+  "dependencies": {
+    "@descope-ui/common": "0.0.1",
+    "@descope-ui/theme-globals": "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,7 @@
+{
+  "name": "@descope-ui/descope-text",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/descope-text/src",
+  "projectType": "library",
+  "tags": []
+}

package/src/component/TextClass.js

@@ -0,0 +1,73 @@
+import {
+  createStyleMixin,
+  draggableMixin,
+  componentNameValidationMixin,
+} from '@descope-ui/common/components-mixins';
+import { compose } from '@descope-ui/common/utils';
+import {
+  getComponentName,
+  observeChildren,
+} from '@descope-ui/common/components-helpers';
+import { createBaseClass } from '@descope-ui/common/base-classes';
+
+export const componentName = getComponentName('text');
+
+class RawText extends createBaseClass({
+  componentName,
+  baseSelector: ':host > slot',
+}) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <style>
+      :host {
+        display: inline-block;
+        line-height: 1em;
+      }
+      :host > slot {
+        width: 100%;
+        display: inline-block;
+      }
+    </style>
+    <slot part="text-wrapper"></slot>
+    `;
+  }
+
+  get hideWhenEmpty() {
+    return this.getAttribute('hide-when-empty') === 'true';
+  }
+
+  init() {
+    super.init();
+
+    observeChildren(this, () => {
+      const hasChildren = !!this.childNodes.length;
+      this.style.display = !hasChildren && this.hideWhenEmpty ? 'none' : '';
+    });
+  }
+}
+
+export const TextClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      fontSize: {},
+      textColor: { property: 'color' },
+      textLineHeight: { property: 'line-height' },
+      textLetterSpacing: { property: 'letter-spacing' },
+      textShadow: {},
+      textAlign: {},
+      textTransform: {},
+      fontFamily: {},
+      fontStyle: {},
+      fontWeight: {},
+      borderWidth: {},
+      borderStyle: {},
+      borderColor: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+)(RawText);

package/src/component/index.js

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

package/src/theme.js

@@ -0,0 +1,91 @@
+import globals from '@descope-ui/theme-globals';
+import { getThemeRefs } from '@descope-ui/common/theme-helpers';
+import { TextClass } from './component/TextClass';
+
+const globalRefs = getThemeRefs(globals);
+const vars = TextClass.cssVarList;
+
+const text = {
+  [vars.hostDirection]: globalRefs.direction,
+  [vars.textLineHeight]: '1.35em',
+  [vars.textAlign]: 'left',
+  [vars.textColor]: globalRefs.colors.surface.dark,
+
+  variant: {
+    h1: {
+      [vars.fontSize]: globalRefs.typography.h1.size,
+      [vars.fontWeight]: globalRefs.typography.h1.weight,
+      [vars.fontFamily]: globalRefs.typography.h1.font,
+    },
+    h2: {
+      [vars.fontSize]: globalRefs.typography.h2.size,
+      [vars.fontWeight]: globalRefs.typography.h2.weight,
+      [vars.fontFamily]: globalRefs.typography.h2.font,
+    },
+    h3: {
+      [vars.fontSize]: globalRefs.typography.h3.size,
+      [vars.fontWeight]: globalRefs.typography.h3.weight,
+      [vars.fontFamily]: globalRefs.typography.h3.font,
+    },
+    subtitle1: {
+      [vars.fontSize]: globalRefs.typography.subtitle1.size,
+      [vars.fontWeight]: globalRefs.typography.subtitle1.weight,
+      [vars.fontFamily]: globalRefs.typography.subtitle1.font,
+    },
+    subtitle2: {
+      [vars.fontSize]: globalRefs.typography.subtitle2.size,
+      [vars.fontWeight]: globalRefs.typography.subtitle2.weight,
+      [vars.fontFamily]: globalRefs.typography.subtitle2.font,
+    },
+    body1: {
+      [vars.fontSize]: globalRefs.typography.body1.size,
+      [vars.fontWeight]: globalRefs.typography.body1.weight,
+      [vars.fontFamily]: globalRefs.typography.body1.font,
+    },
+    body2: {
+      [vars.fontSize]: globalRefs.typography.body2.size,
+      [vars.fontWeight]: globalRefs.typography.body2.weight,
+      [vars.fontFamily]: globalRefs.typography.body2.font,
+    },
+  },
+
+  mode: {
+    primary: {
+      [vars.textColor]: globalRefs.colors.surface.contrast,
+    },
+    secondary: {
+      [vars.textColor]: globalRefs.colors.surface.dark,
+    },
+    error: {
+      [vars.textColor]: globalRefs.colors.error.main,
+    },
+    success: {
+      [vars.textColor]: globalRefs.colors.success.main,
+    },
+  },
+
+  textAlign: {
+    right: { [vars.textAlign]: 'right' },
+    left: { [vars.textAlign]: 'left' },
+    center: { [vars.textAlign]: 'center' },
+  },
+
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+
+  _italic: {
+    [vars.fontStyle]: 'italic',
+  },
+
+  _uppercase: {
+    [vars.textTransform]: 'uppercase',
+  },
+
+  _lowercase: {
+    [vars.textTransform]: 'lowercase',
+  },
+};
+
+export default text;
+export { vars };

package/stories/descope-text.stories.js

@@ -0,0 +1,55 @@
+import { componentName } from '../src/component/TextClass';
+import {
+  textContentControl,
+  textAlignControl,
+  modeControl,
+  fullWidthControl,
+  typographyVariantControl,
+  directionControl,
+} from '@descope-ui/common/sb-controls';
+
+const Template = ({
+  variant,
+  mode,
+  'text-align': textAlign,
+  'full-width': fullWidth,
+  text,
+  'hide-when-empty': hideWhenEmpty,
+  direction,
+}) => `
+    <descope-text
+      mode="${mode || ''}"
+      variant="${variant || ''}"
+      full-width="${fullWidth || false}"
+      text-align="${textAlign}"
+      hide-when-empty="${hideWhenEmpty}"
+      st-host-direction="${direction ?? ''}"
+    >${text}</descope-text>
+  `;
+
+export default {
+  component: componentName,
+  title: 'descope-text',
+  parameters: {
+    panelPosition: 'right',
+    controls: { expanded: true },
+  },
+  argTypes: {
+    ...textContentControl,
+    ...modeControl,
+    ...textAlignControl,
+    ...fullWidthControl,
+    ...typographyVariantControl,
+    ...directionControl,
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  text: 'Lorem Ipsum',
+  variant: 'h1',
+  mode: 'primary',
+  'hide-when-empty': false,
+  fullWidth: true, // full-width is true by default for test purposes, which expect this as default and test the FALSE override only
+};