@descope/web-components-ui 3.5.1 → 3.7.0

package/stories/descope-hybrid-field.stories.js

@@ -0,0 +1,151 @@
+import { componentName } from '../src/components/descope-hybrid-field';
+import {
+  labelControl,
+  placeholderControl,
+  sizeControl,
+  fullWidthControl,
+  directionControl,
+  disabledControl,
+  readOnlyControl,
+  requiredControl,
+  borderedControl,
+  inputLabelTypeControl,
+  errorMessageIconControl,
+  errorMessageIconAttrs,
+} from './commonControls';
+import CountryCodes from '../src/components/phone-fields/CountryCodes';
+
+const Template = ({
+  label,
+  placeholder,
+  size,
+  bordered,
+  direction,
+  disabled,
+  required,
+  readonly,
+  'label-type': labelType,
+  'full-width': fullWidth,
+  'external-input': externalInput,
+  'data-errormessage-pattern-mismatch-email': emailCustomErrorTypeMismatch,
+  'data-errormessage-value-missing-email': emailCustomErrorMissingValue,
+  'data-errormessage-value-missing-phone': phoneCustomErrorMissingValue,
+  // phone
+  'phone-input-label': phoneInputLabel,
+  'country-input-label': countryInputLabel,
+  'country-input-placeholder': countryInputPlaceholder,
+  'default-code': defaultCode,
+  'restrict-countries': restrictCountries,
+  'phone-variant': phoneVariant,
+  'phone-minlength': phoneMinLength,
+  'phone-format-value': phoneFormatValue,
+  'phone-strict-validation': phoneStrictValidation,
+  errorMsgIcon,
+}) => `
+    <descope-hybrid-field
+      size="${size}"
+      bordered="${bordered}"
+      disabled="${disabled || false}"
+      required="${required || false}"
+      readonly="${readonly || false}"
+      full-width="${fullWidth || false}"
+      st-host-direction="${direction ?? ''}"
+      external-input="${externalInput || false}"
+      label-type="${labelType || 'static'}"
+      phone-variant="${phoneVariant || ''}"
+      label="${label || ''}"
+      placeholder="${placeholder || ''}"
+      phone-input-label="${phoneInputLabel || ''}"
+      phone-format-value="${phoneFormatValue || false}"
+      phone-strict-validation="${phoneStrictValidation || false}"
+      country-input-label="${countryInputLabel || ''}"
+      country-input-placeholder="${countryInputPlaceholder || ''}"
+      default-code="${defaultCode || ''}"
+      restrict-countries="${restrictCountries || ''}"
+      phone-minlength="${phoneMinLength || ''}"
+      data-errormessage-value-missing-email="${emailCustomErrorMissingValue || ''}"
+      data-errormessage-pattern-mismatch-email="${emailCustomErrorTypeMismatch || ''}"
+      data-errormessage-value-missing-phone="${phoneCustomErrorMissingValue || ''}"
+      ${errorMsgIcon ? errorMessageIconAttrs : ''}
+    ></descope-hybrid-field>
+  <div>
+    <button id="validate">Validate</button>
+  </div>
+  `;
+
+export default {
+  component: componentName,
+  title: 'descope-hybrid-field',
+  decorators: [
+    (story, { args }) => {
+      setTimeout(() => {
+        const button = document.querySelector('#validate');
+        const ele = document.querySelector('descope-hybrid-field');
+        button.onclick = () => {
+          ele.reportValidity();
+        };
+      });
+      return story();
+    },
+  ],
+  argTypes: {
+    ...labelControl,
+    ...placeholderControl,
+    ...inputLabelTypeControl,
+    ...sizeControl,
+    ...fullWidthControl,
+    ...disabledControl,
+    ...readOnlyControl,
+    ...requiredControl,
+    ...borderedControl,
+    ...directionControl,
+    ...errorMessageIconControl,
+    'external-input': {
+      control: { type: 'boolean' },
+    },
+    // phone
+    'phone-input-label': {
+      control: { type: 'text' },
+    },
+    'country-input-label': {
+      control: { type: 'text' },
+    },
+    'country-input-placeholder': {
+      control: { type: 'text' },
+    },
+    'default-code': {
+      options: [''].concat(CountryCodes.map((c) => c.code)),
+      control: { type: 'select' },
+    },
+    'restrict-countries': {
+      control: { type: 'text' },
+    },
+    'phone-variant': {
+      options: ['countrySelection', 'inputBox'],
+      control: { type: 'select' },
+    },
+    'phone-minlength': {
+      control: { type: 'number' },
+    },
+    'phone-format-value': {
+      name: 'Format Value',
+      control: { type: 'boolean' },
+    },
+    'phone-strict-validation': {
+      name: 'Strict Validation',
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'md',
+  bordered: true,
+  'restrict-countries': 'IL,US', // for test purposes, as Storybook cannot load preview url with comma separted values
+  'data-errormessage-value-missing-phone': 'missing phone',
+  'data-errormessage-value-missing-email': 'missing email',
+  'data-errormessage-pattern-mismatch-email': 'pattern mismatch email',
+  'phone-minlength': 8,
+};

package/stories/descope-loader-linear.stories.js

@@ -0,0 +1,29 @@
+import { componentName } from '../src/components/descope-loader-linear';
+import { modeControl, sizeControl } from './commonControls';
+
+const Template = ({ mode, size }) => `
+  <descope-loader-linear
+    size="${size || ''}"
+    mode="${mode || ''}"
+  ></descope-loader-linear>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-loader-linear',
+  parameters: {
+    panelPosition: 'right',
+    controls: { expanded: true },
+  },
+  argTypes: {
+    ...modeControl,
+    ...sizeControl,
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'md',
+  mode: 'primary',
+};

package/stories/descope-loader-radial.stories.js

@@ -0,0 +1,29 @@
+import { componentName } from '../src/components/descope-loader-radial';
+import { modeControl, sizeControl } from './commonControls';
+
+const Template = ({ mode, size }) => `
+  <descope-loader-radial
+    size="${size || ''}"
+    mode="${mode || ''}"
+  ></descope-loader-radial>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-loader-radial',
+  parameters: {
+    panelPosition: 'right',
+    controls: { expanded: true },
+  },
+  argTypes: {
+    ...modeControl,
+    ...sizeControl,
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'md',
+  mode: 'primary',
+};

package/stories/descope-logo.stories.js

@@ -0,0 +1,40 @@
+import { componentName } from '../src/components/descope-logo';
+import { imgSrcControl } from './commonControls';
+
+const Template = ({ src, width, height }) => `
+  <style nonce="${window.DESCOPE_NONCE}">
+  body {
+    ${src ? `--descope-logo-url: url(${src});` : ''}
+  }
+  </style>
+  <descope-logo
+  st-width="${width || ''}"
+  st-height="${height || ''}"
+  ></descope-logo>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-logo',
+  parameters: {
+    panelPosition: 'right',
+    controls: { expanded: true },
+  },
+  argTypes: {
+    ...imgSrcControl,
+    width: {
+      name: 'Width',
+      control: { type: 'text' },
+    },
+    height: {
+      name: 'Height',
+      control: { type: 'text' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  src: 'https://static.descope.com/pages/P2KFKhheHR9aICDa9kYkrGsYNnk3/v2-alpha/light/logo.svg',
+};

package/stories/descope-mappings-field.stories.js

@@ -0,0 +1,108 @@
+import { componentName } from '../src/components/mapping-fields/descope-mappings-field';
+import { withForm } from './helpers';
+import {
+  sizeControl,
+  fullWidthControl,
+  disabledControl,
+  directionControl,
+  readOnlyControl,
+  errorPatternMismatchControl,
+  errorMessageIconAttrs,
+  errorMessageIconControl,
+} from './commonControls';
+
+const Template = ({
+  size,
+  'full-width': fullWidth,
+  disabled,
+  direction,
+  'label-value': labelValue,
+  'label-attr': labelAttr,
+  'button-label': buttonLabel,
+  separator,
+  options,
+  readonly,
+  'default-values': defaultValues,
+  'data-errormessage-pattern-mismatch': customErrorPatternMismatch,
+  errorMsgIcon,
+}) => {
+  let serializedOptions;
+  let serializedDefaultValues;
+
+  try {
+    serializedOptions = JSON.stringify(options);
+    serializedDefaultValues = JSON.stringify(defaultValues);
+  } catch (e) {
+    // do nothing
+  }
+
+  return `
+  <descope-mappings-field
+    size="${size}"
+    disabled="${disabled || false}"
+    readonly="${readonly || false}"
+    full-width="${fullWidth || false}"
+    st-host-direction="${direction ?? ''}"
+    options='${serializedOptions || ''}'
+    button-label="${buttonLabel}"
+    separator="${separator}"
+    label-value="${labelValue}"
+    label-attr="${labelAttr}"
+    data-errormessage-pattern-mismatch="${customErrorPatternMismatch || ''}"
+    default-values='${serializedDefaultValues || ''}'
+    ${errorMsgIcon ? errorMessageIconAttrs : ''}
+  >
+  </descope-mappings-field>`;
+};
+
+export default {
+  component: componentName,
+  title: 'descope-mappings-field',
+  decorators: [withForm],
+  argTypes: {
+    'label-value': {
+      name: 'Label Value',
+      control: { type: 'text' },
+    },
+    'label-attr': {
+      name: 'Label Attribute',
+      control: { type: 'text' },
+    },
+    'button-label': {
+      name: 'Button Label',
+      control: { type: 'text' },
+    },
+    separator: {
+      name: 'Separator',
+      control: { type: 'text' },
+    },
+    'default-values': {
+      name: 'Default Values',
+      control: { type: 'object' },
+    },
+    ...sizeControl,
+    ...fullWidthControl,
+    ...disabledControl,
+    ...readOnlyControl,
+    ...directionControl,
+    ...errorPatternMismatchControl,
+    ...errorMessageIconControl,
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'md',
+  'full-width': false,
+  'label-value': 'Value',
+  'label-attr': 'Attribute',
+  'button-label': 'Add mapping',
+  separator: 'map to',
+  options: [
+    { value: 'itemId1', label: 'item 1' },
+    { value: 'itemId2', label: 'item 2' },
+    { value: 'itemId3', label: 'item 3' },
+    { value: 'itemId4', label: 'item 4' },
+  ],
+};

package/stories/descope-modal.stories.js

@@ -0,0 +1,48 @@
+import { componentName } from '../src/components/descope-modal';
+
+const template = `
+<descope-container direction="column" st-horizontal-padding="1.25rem" st-vertical-padding="1.25rem" st-gap="0.75rem" st-background-color="transparent">
+  <descope-container direction="column" st-horizontal-padding="1.25rem" st-vertical-padding="1.25rem" st-gap="0.75rem" st-background-color="transparent">
+    <descope-text-field full-width="true" size="xs" bordered="true" label="Name"></descope-text-field>
+    <descope-email-field full-width="true" size="xs" bordered="true" label="Email"></descope-email-field>
+    <descope-phone-field full-width="true" size="xs" bordered="true" label="Phone"></descope-phone-field>
+  </descope-container>
+  <descope-container direction="row" justify-content="flex-end" st-horizontal-padding="1.25rem" st-vertical-padding="1.25rem" st-gap="0.75rem" st-background-color="transparent">
+    <descope-button variant="link" size="xs" mode="error">Cancel</descope-button>
+    <descope-button variant="contained" size="xs" mode="primary">Submit</descope-button>
+  </descope-container>
+</descope-container>`;
+
+const Template = ({ opened }) => {
+  const loader = `
+    <descope-container direction="column" st-align-items="center" st-horizontal-padding="1.25rem" st-vertical-padding="1.25rem" st-gap="0.75rem" st-background-color="transparent">
+      <descope-loader-radial size="sm" mode="primary"></descope-loader-radial>
+    </descope-container>
+  `;
+
+  return `
+    <descope-modal opened="${opened}">
+      ${loader}
+    </descope-modal>
+    `;
+};
+
+export default {
+  component: componentName,
+  title: 'descope-modal',
+  decorators: [
+    (render) => {
+      setTimeout(() => {
+        const modal = document.querySelector('descope-modal');
+        setTimeout(() => (modal.innerHTML = template), 500);
+      });
+      return render();
+    },
+  ],
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  opened: true,
+};

package/stories/descope-multi-select-combo-box.stories.js

@@ -0,0 +1,183 @@
+import { componentName } from '../src/components/descope-multi-select-combo-box';
+import { toggleDefaultErrorMessageValueMissingDecorator, withForm } from './helpers';
+import {
+  labelControl,
+  placeholderControl,
+  sizeControl,
+  fullWidthControl,
+  directionControl,
+  disabledControl,
+  minItemsSelectionControl,
+  maxItemsSelectionControl,
+  readOnlyControl,
+  requiredControl,
+  borderedControl,
+  errorMissingValueControl,
+  overrideRenderItemControl,
+  itemsSourceControl,
+  inputLabelTypeControl,
+  errorPatternMismatchControl,
+  errorMessageIconControl,
+  errorMessageIconAttrs,
+  defaultValueMissingControl,
+} from './commonControls';
+
+const altRenderItem = ({ displayName, label, value }) =>
+  `<span data-name="${displayName}" data-id="${value}">${label}</span>`;
+
+const Template = ({
+  'allow-custom-value': allowCustomValue,
+  label,
+  placeholder,
+  size,
+  bordered,
+  'full-width': fullWidth,
+  readonly,
+  required,
+  direction,
+  disabled,
+  data,
+  overrideRenderItem,
+  itemsSource,
+  minItemsSelection,
+  maxItemsSelection,
+  pattern,
+  'default-values': defaultValues,
+  'data-errormessage-value-missing': customErrorMissingValue,
+  'data-errormessage-pattern-mismatch': customErrorPatternMismatch,
+  'ignore-data': ignoreData,
+  'label-type': labelType,
+  errorMsgIcon,
+}) => {
+  let serializedData;
+  let serializedDefaultValues;
+
+  try {
+    serializedData = JSON.stringify(data);
+    serializedDefaultValues = JSON.stringify(defaultValues);
+  } catch (e) {
+    // do nothing
+  }
+
+  if (ignoreData) {
+    serializedData = '[]';
+  }
+
+  return `
+    <descope-multi-select-combo-box
+      clear-button-visible
+      data='${(itemsSource === 'attr' && serializedData) || ''}'
+      size="${size}"
+      bordered="${bordered}"
+      item-label-path="data-name"
+      item-value-path="data-id"
+      label="${label || ''}"
+      placeholder="${placeholder || ''}"
+      default-values='${serializedDefaultValues || ''}'
+      required="${required || false}"
+      full-width="${fullWidth || false}"
+      readonly="${readonly || false}"
+      disabled="${disabled || false}"
+      data-errormessage-value-missing="${customErrorMissingValue || ''}"
+      data-errormessage-pattern-mismatch="${customErrorPatternMismatch || ''}"
+      st-host-direction="${direction ?? ''}"
+      allow-custom-value="${allowCustomValue || false}"
+      min-items-selection="${minItemsSelection || ''}"
+      max-items-selection="${maxItemsSelection || ''}"
+      label-type="${labelType || ''}"
+      pattern="${pattern || ''}"
+      ${errorMsgIcon ? errorMessageIconAttrs : ''}
+    >
+    ${
+      itemsSource === 'children' &&
+      `
+        <span data-name="ItemName1" data-id="itemId1">Trojan War Heroes' Valor</span>
+        <span data-name="ItemName2" data-id="itemId2">Achilles' Fateful Wrath</span>
+        <span data-name="ItemName3" data-id="itemId3">Epic Battle of Gods</span>
+        <span data-name="ItemName4" data-id="itemId4">Hector's Brave Sacrifice</span>
+        <span data-name="ItemName5" data-id="itemId5">Trojan Horse Deception</span>
+        <span data-name="ItemName6" data-id="itemId6">Agamemnon's Royal Command</span>
+        <span data-name="ItemName7" data-id="itemId7">Odysseus' Cunning Strategy</span>
+        <span data-name="ItemName8" data-id="itemId8">Helen's Beauty's Curse</span>
+        <span data-name="ItemName9" data-id="itemId9">Achilles' Heel Weakness</span>
+        <span data-name="ItemName10" data-id="itemId10">Epic Poem of Ancient</span>
+      `
+    }
+    </descope-multi-select-combo-box>
+  `;
+};
+
+const allowCustomValueControl = {
+  'allow-custom-value': {
+    name: 'Allow Custom Values',
+    control: { type: 'boolean' },
+  },
+};
+
+export default {
+  component: componentName,
+  title: 'descope-multi-select-combo-box',
+  decorators: [
+    (story, { args }) => {
+      setTimeout(() => {
+        const ele = document.querySelector('descope-multi-select-combo-box');
+        if (args.itemsSource === 'prop') {
+          ele.data = args.data;
+        }
+        if (args.overrideRenderItem) {
+          ele.renderItem = altRenderItem;
+        }
+      });
+      return story();
+    },
+    toggleDefaultErrorMessageValueMissingDecorator,
+    withForm,
+  ],
+  argTypes: {
+    ...labelControl,
+    ...placeholderControl,
+    ...inputLabelTypeControl,
+    ...sizeControl,
+    ...fullWidthControl,
+    ...disabledControl,
+    ...readOnlyControl,
+    ...requiredControl,
+    ...borderedControl,
+    ...errorMissingValueControl,
+    ...errorPatternMismatchControl,
+    ...overrideRenderItemControl,
+    ...itemsSourceControl,
+    ...allowCustomValueControl,
+    ...minItemsSelectionControl,
+    ...maxItemsSelectionControl,
+    ...directionControl,
+    ...errorMessageIconControl,
+    ...defaultValueMissingControl,
+    'default-values': {
+      name: 'Default Values',
+      control: { type: 'object' },
+    },
+    // Control used to ignore the default data values, required for testing specific behavior
+    'ignore-data': {
+      name: 'Ignore Data Value',
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'md',
+  bordered: true,
+  itemsSource: 'children',
+  data: [
+    { displayName: 'Item1', value: '1', label: 'data item 1' },
+    { displayName: 'Item2', value: 'itemId2', label: 'data item 2' },
+    { displayName: 'Item3', value: '3', label: 'data item 3' },
+    { displayName: 'Item4', value: '4', label: 'data item 4' },
+  ],
+  pattern: '',
+  'data-errormessage-value-missing': 'Please fill out this field.',
+  'data-errormessage-pattern-mismatch': 'Please match the requested format.',
+};