@descope/web-components-ui 3.5.1 → 3.7.0

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

@@ -0,0 +1,137 @@
+import { componentName } from '../src/components/phone-fields/descope-phone-field';
+import CountryCodes from '../src/components/phone-fields/CountryCodes';
+import { toggleDefaultErrorMessageValueMissingDecorator, withForm } from './helpers';
+import {
+  labelControl,
+  sizeControl,
+  fullWidthControl,
+  directionControl,
+  disabledControl,
+  readOnlyControl,
+  requiredControl,
+  borderedControl,
+  minLengthControl,
+  maxLengthControl,
+  errorMissingValueControl,
+  inputLabelTypeControl,
+  errorMessageIconAttrs,
+  errorMessageIconControl,
+  defaultValueMissingControl,
+} from './commonControls';
+
+const Template = ({
+  label,
+  'default-code': defaultCode,
+  size,
+  bordered,
+  'country-input-label': countryInputLabel,
+  'phone-input-placeholder': phoneInputPlaceholder,
+  'country-input-placeholder': countryInputPlaceholder,
+  'full-width': fullWidth,
+  minlength,
+  maxlength,
+  readonly,
+  direction,
+  required,
+  disabled,
+  'restrict-countries': restrictCountries,
+  'data-errormessage-value-missing': customErrorMissingValue,
+  'label-type': labelType,
+  'allow-alphanumeric-input': allowAlphanumericInput,
+  'format-value': formatValue,
+  'strict-validation': strictValidation,
+  errorMsgIcon,
+  'phone-input-type': phoneInputType,
+}) =>
+  `<descope-phone-field
+    size="${size}"
+    bordered="${bordered}"
+    label="${label || ''}"
+    required="${required || false}"
+    country-input-label="${countryInputLabel || ''}"
+    country-input-placeholder="${countryInputPlaceholder || ''}"
+    phone-input-placeholder="${phoneInputPlaceholder || ''}"
+    default-code="${defaultCode || ''}"
+    full-width="${fullWidth || false}"
+    readonly="${readonly || false}"
+    disabled="${disabled || false}"
+    minlength="${minlength}"
+    maxlength="${maxlength}"
+    restrict-countries="${restrictCountries || ''}"
+    data-errormessage-value-missing="${customErrorMissingValue || ''}"
+    st-host-direction="${direction ?? ''}"
+    label-type="${labelType || ''}"
+    allow-alphanumeric-input="${allowAlphanumericInput || false}"
+    format-value="${formatValue || false}"
+    strict-validation="${strictValidation || false}"
+    ${errorMsgIcon ? errorMessageIconAttrs : ''}
+    phone-input-type="${phoneInputType ?? ''}"
+  ></descope-phone-field>
+  `;
+export default {
+  component: componentName,
+  title: 'descope-phone-field',
+  decorators: [toggleDefaultErrorMessageValueMissingDecorator, withForm],
+  argTypes: {
+    ...labelControl,
+    ...sizeControl,
+    ...inputLabelTypeControl,
+    ...fullWidthControl,
+    ...disabledControl,
+    ...readOnlyControl,
+    ...requiredControl,
+    ...borderedControl,
+    ...minLengthControl,
+    ...maxLengthControl,
+    ...errorMissingValueControl,
+    ...directionControl,
+    ...errorMessageIconControl,
+    ...defaultValueMissingControl,
+    'country-input-label': {
+      name: 'Code Label',
+      control: { type: 'text' },
+    },
+    'country-input-placeholder': {
+      name: 'Code Placeholder',
+      control: { type: 'text' },
+    },
+    'phone-input-placeholder': {
+      name: 'Phone Placeholder',
+      control: { type: 'text' },
+    },
+    'default-code': {
+      name: 'Default Code',
+      options: [''].concat(CountryCodes.map((c) => c.code)),
+      control: { type: 'select' },
+    },
+    'restrict-countries': {
+      name: 'Allowed Countries',
+      control: { type: 'text' },
+    },
+    'allow-alphanumeric-input': {
+      control: { type: 'boolean' },
+    },
+    'format-value': {
+      name: 'Format Value',
+      control: { type: 'boolean' },
+    },
+    'strict-validation': {
+      name: 'Strict Validation',
+      control: { type: 'boolean' },
+    },
+    'phone-input-type': {
+      name: 'Phone Input Type',
+      control: { type: 'select' },
+      options: ['tel', 'text'],
+    },
+  },
+};
+
+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': 'Please fill out this field.',
+};

package/stories/descope-phone-input-box-field.stories.js

@@ -0,0 +1,128 @@
+import { componentName } from '../src/components/phone-fields/descope-phone-input-box-field';
+import CountryCodes from '../src/components/phone-fields/CountryCodes';
+import { toggleDefaultErrorMessageValueMissingDecorator, withForm } from './helpers';
+import {
+  labelControl,
+  sizeControl,
+  fullWidthControl,
+  directionControl,
+  disabledControl,
+  readOnlyControl,
+  requiredControl,
+  borderedControl,
+  minLengthControl,
+  maxLengthControl,
+  errorMissingValueControl,
+  inputLabelTypeControl,
+  errorMessageIconControl,
+  errorMessageIconAttrs,
+  errorPatternMismatchControl,
+  defaultValueMissingControl,
+} from './commonControls';
+
+const Template = ({
+  label,
+  size,
+  bordered,
+  direction,
+  'phone-input-placeholder': placeholder,
+  minlength,
+  maxlength,
+  readonly,
+  required,
+  disabled,
+  'default-code': defaultCode,
+  'full-width': fullWidth,
+  'restrict-countries': restrictCountries,
+  'data-errormessage-value-missing': customErrorMissingValue,
+  'data-errormessage-pattern-mismatch': customPatternMismatch,
+  'label-type': labelType,
+  'allow-alphanumeric-input': allowAlphanumericInput,
+  'format-value': formatValue,
+  'strict-validation': strictValidation,
+  errorMsgIcon,
+  'phone-input-type': phoneInputType,
+}) =>
+  `<descope-phone-input-box-field
+    size="${size}"
+    bordered="${bordered}"
+    label="${label || ''}"
+    required="${required || false}"
+    phone-input-placeholder="${placeholder || ''}"
+    default-code="${defaultCode || ''}"
+    full-width="${fullWidth || false}"
+    readonly="${readonly || false}"
+    disabled="${disabled || false}"
+    minlength="${minlength}"
+    maxlength="${maxlength}"
+    restrict-countries="${restrictCountries || ''}"
+    data-errormessage-value-missing="${customErrorMissingValue || ''}"
+    data-errormessage-pattern-mismatch="${customPatternMismatch || ''}"
+    allow-alphanumeric-input="${allowAlphanumericInput ? 'true' : 'false'}"
+    st-host-direction="${direction ?? ''}"
+    label-type="${labelType || ''}"
+    format-value="${formatValue || false}"
+    strict-validation="${strictValidation || false}"
+    ${errorMsgIcon ? errorMessageIconAttrs : ''}
+    phone-input-type="${phoneInputType ?? ''}"
+  ></descope-phone-input-box-field>`;
+export default {
+  component: componentName,
+  title: 'descope-phone-input-box-field',
+  decorators: [toggleDefaultErrorMessageValueMissingDecorator, withForm],
+  argTypes: {
+    ...labelControl,
+    ...sizeControl,
+    ...inputLabelTypeControl,
+    ...fullWidthControl,
+    ...disabledControl,
+    ...readOnlyControl,
+    ...requiredControl,
+    ...borderedControl,
+    ...minLengthControl,
+    ...maxLengthControl,
+    ...errorMissingValueControl,
+    ...errorPatternMismatchControl,
+    ...directionControl,
+    ...errorMessageIconControl,
+    ...defaultValueMissingControl,
+    'phone-input-placeholder': {
+      name: 'Phone Placeholder',
+      control: { type: 'text' },
+    },
+    'default-code': {
+      name: 'Default Code',
+      options: [''].concat(CountryCodes.map((c) => c.code)),
+      control: { type: 'select' },
+    },
+    'restrict-countries': {
+      name: 'Allowed Countries',
+      control: { type: 'text' },
+    },
+    'allow-alphanumeric-input': {
+      control: { type: 'boolean' },
+    },
+    'format-value': {
+      name: 'Format Value',
+      control: { type: 'boolean' },
+    },
+    'strict-validation': {
+      name: 'Strict Validation',
+      control: { type: 'boolean' },
+    },
+    'phone-input-type': {
+      name: 'Phone Input Type',
+      control: { type: 'select' },
+      options: ['tel', 'text'],
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'md',
+  bordered: true,
+  'data-errormessage-value-missing': 'Please fill out this field.',
+  'data-errormessage-pattern-mismatch': 'Please match the requested format.',
+};

package/stories/descope-policy-validation.stories.js

@@ -0,0 +1,92 @@
+import { componentName } from '../src/components/descope-policy-validation';
+import { directionControl } from './commonControls';
+
+const availablePolicies = [
+  {
+    id: 'minlength',
+    message: 'At least {{value}} characters',
+    pattern: '^.{{{value}},}$',
+    data: {
+      value: 8,
+    },
+  },
+  {
+    id: 'lowercase',
+    message: '1 lowercase letter',
+    pattern: '[a-z]',
+  },
+  {
+    id: 'uppercase',
+    message: '1 uppercase letter',
+    pattern: '[A-Z]',
+  },
+  {
+    id: 'number',
+    message: '1 number',
+    pattern: '\\d',
+  },
+  {
+    id: 'nonalphanumeric',
+    message: '1 symbol',
+    pattern: '[^a-zA-Z0-9]',
+  },
+];
+
+const Template = ({
+  value,
+  label,
+  data,
+  direction,
+  useNumber,
+  useLowercase,
+  useUppercase,
+  useSymbol,
+  useMinLength,
+  minLengthValue,
+}) => {
+  const policies = [
+    useMinLength ? 'minlength' : null,
+    useLowercase ? 'lowercase' : null,
+    useUppercase ? 'uppercase' : null,
+    useNumber ? 'number' : null,
+    useSymbol ? 'nonalphanumeric' : null,
+  ].filter(Boolean);
+
+  return `
+  <descope-policy-validation
+    label="${label}"
+    value="${value}"
+    data='${JSON.stringify(data) || ''}'
+    active-policies="${policies || ''}"
+    data-password-policy-value-minlength="${minLengthValue || ''}"
+    st-host-direction="${direction ?? ''}"
+  ></descope-policy-validation>
+`;
+};
+
+export default {
+  component: componentName,
+  title: 'descope-policy-validation',
+  parameters: {
+    panelPosition: 'right',
+    controls: { expanded: true },
+  },
+  argTypes: {
+    ...directionControl,
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  value: '',
+  label: 'Policy Validation',
+  data: availablePolicies,
+  'active-policies': [],
+  useNumber: false,
+  useLowercase: false,
+  useUppercase: false,
+  useSymbol: false,
+  useMinLength: false,
+  minLengthValue: undefined,
+};

package/stories/descope-radio-group.stories.js

@@ -0,0 +1,142 @@
+import { componentName } from '../src/components/descope-radio-group';
+import {
+  sizeControl,
+  labelControl,
+  requiredControl,
+  readOnlyControl,
+  helperTextControl,
+  disabledControl,
+  errorMissingValueControl,
+  fullWidthControl,
+  directionControl,
+  overrideRenderItemControl,
+  itemsSourceControl,
+  errorMessageIconAttrs,
+  errorMessageIconControl,
+  defaultValueMissingControl,
+} from './commonControls';
+import { toggleDefaultErrorMessageValueMissingDecorator, withForm } from './helpers';
+
+const Template = ({
+  size,
+  label,
+  required,
+  readonly,
+  'full-width': fullWidth,
+  direction,
+  disabled,
+  'helper-text': helperText,
+  'default-value': defaultValue,
+  'data-errormessage-value-missing': customErrorMissingValue,
+  data,
+  itemsSource,
+  'allow-deselect': allowDeselect,
+  layout,
+  buttonsRowGap,
+  buttonsColumnGap,
+  errorMsgIcon,
+}) => {
+  let serializedData;
+
+  try {
+    serializedData = JSON.stringify(data);
+  } catch (e) {
+    // do nothing
+  }
+
+  return `
+  <descope-radio-group
+    layout="${layout || ''}"
+    data='${(itemsSource === 'attr' && serializedData) || ''}'
+    full-width="${fullWidth || false}"
+    size="${size || ''}"
+    label="${label || ''}"
+    helper-text="${helperText || ''}"
+    default-value="${defaultValue || ''}"
+    required="${required || false}"
+    readonly="${readonly || false}"
+    disabled="${disabled || false}"
+    allow-deselect="${allowDeselect || false}"
+    data-errormessage-value-missing="${customErrorMissingValue || ''}"
+    st-host-direction="${direction ?? ''}"
+    st-buttons-row-gap="${buttonsRowGap || ''}"
+    st-buttons-column-gap="${buttonsColumnGap || ''}"
+    ${errorMsgIcon ? errorMessageIconAttrs : ''}
+  >
+    <descope-radio-button value="a" label="A">item1</descope-radio-button>
+    <descope-radio-button value="b" label="B">test test test test test test test test</descope-radio-button>
+    <descope-radio-button value="c" label="C">item2</descope-radio-button>
+    <descope-radio-button value="d" label="D">another item</descope-radio-button>
+  </descope-radio-group>
+`;
+};
+
+export default {
+  component: componentName,
+  title: 'descope-radio-group',
+  decorators: [
+    (story, { args }) => {
+      setTimeout(() => {
+        const ele = document.querySelector('descope-radio-group');
+        if (args.itemSource === 'prop') {
+          ele.data = args.data;
+        }
+      });
+      return story();
+    },
+    toggleDefaultErrorMessageValueMissingDecorator,
+    withForm,
+  ],
+  argTypes: {
+    ...sizeControl,
+    ...labelControl,
+    ...readOnlyControl,
+    ...requiredControl,
+    ...helperTextControl,
+    ...disabledControl,
+    ...errorMissingValueControl,
+    ...fullWidthControl,
+    'default-value': {
+      name: 'Default Value',
+      control: { type: 'text' },
+    },
+    'allow-deselect': {
+      name: 'Allow Deselect',
+      control: { type: 'boolean' },
+    },
+    readonly: {
+      name: 'Read Only',
+      control: { type: 'boolean' },
+    },
+    buttonsRowGap: {
+      name: 'Vertical gap between items',
+      control: { type: 'text' },
+    },
+    buttonsColumnGap: {
+      name: 'Horizontal gap between items',
+      control: { type: 'text' },
+    },
+    layout: {
+      name: 'Layout',
+      options: ['vertical', 'horizontal'],
+      control: { type: 'radio' },
+    },
+    ...itemsSourceControl,
+    ...directionControl,
+    ...errorMessageIconControl,
+    ...defaultValueMissingControl,
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  data: [
+    { value: 'a', label: 'data item 1' },
+    { value: 'b', label: 'data item 2' },
+    { value: 'c', label: 'data item 3' },
+    { value: 'd', label: 'data item 4' },
+  ],
+  itemsSource: 'children',
+  'data-errormessage-value-missing': 'Please fill out this field.',
+};

package/stories/descope-recaptcha.stories.js

@@ -0,0 +1,38 @@
+import { componentName } from '../src/components/descope-recaptcha';
+
+const Template = ({ enterprise, enabled, 'site-key': siteKey, variant, 'full-width': fullWidth }) =>
+  `
+    <descope-recaptcha
+      enterprise="${enterprise}"
+      site-key="${siteKey}"
+      enabled="${enabled}"
+      full-width="${fullWidth}"
+      ${variant && variant !== 'none' ? `variant="${variant}"` : ''}
+    >
+      ${
+        variant === 'text'
+          ? `<descope-enriched-text variant="body1" mode="primary">This site is protected by reCAPTCHA</descope-enriched-text>`
+          : ''
+      }
+    </descope-recaptcha>
+  `;
+
+export default {
+  component: componentName,
+  title: 'descope-recaptcha',
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['none', 'text', 'widget'],
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  enabled: false,
+  'site-key': '',
+  enterprise: false,
+  'full-width': false,
+};

package/stories/descope-saml-group-mappings.stories.js

@@ -0,0 +1,109 @@
+import { componentName } from '../src/components/mapping-fields/descope-saml-group-mappings';
+import { withForm } from './helpers';
+import {
+  sizeControl,
+  fullWidthControl,
+  disabledControl,
+  directionControl,
+  readOnlyControl,
+  errorPatternMismatchControl,
+  errorMessageIconAttrs,
+  errorMessageIconControl,
+} from './commonControls';
+
+const Template = ({
+  size,
+  variant,
+  'full-width': fullWidth,
+  disabled,
+  direction,
+  'label-group': labelGroup,
+  'label-value': labelValue,
+  'label-attr': labelAttr,
+  'button-label': buttonLabel,
+  separator,
+  options,
+  readonly,
+  'data-errormessage-pattern-mismatch': customErrorPatternMismatch,
+  errorMsgIcon,
+}) => {
+  let serializedOptions;
+
+  try {
+    serializedOptions = JSON.stringify(options);
+  } catch (e) {
+    // do nothing
+  }
+
+  return `
+  <descope-saml-group-mappings
+    size="${size}"
+    variant="${variant}"
+    disabled="${disabled || false}"
+    readonly="${readonly || false}"
+    full-width="${fullWidth || false}"
+    st-host-direction="${direction ?? ''}"
+    options='${serializedOptions || ''}'
+    button-label="${buttonLabel}"
+    separator="${separator}"
+    label-group="${labelGroup}"
+    label-value="${labelValue}"
+    label-attr="${labelAttr}"
+    data-errormessage-pattern-mismatch="${customErrorPatternMismatch || ''}"
+    ${errorMsgIcon ? errorMessageIconAttrs : ''}
+  >
+  </descope-saml-group-mappings>`;
+};
+
+export default {
+  component: componentName,
+  title: 'descope-saml-group-mappings',
+  decorators: [withForm],
+  argTypes: {
+    'label-group': {
+      name: 'Label Group Value',
+      control: { type: 'text' },
+    },
+    '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' },
+    },
+    ...sizeControl,
+    ...fullWidthControl,
+    ...disabledControl,
+    ...readOnlyControl,
+    ...directionControl,
+    ...errorPatternMismatchControl,
+    ...errorMessageIconControl,
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'md',
+  'full-width': false,
+  'label-group': 'Group Attribute Name',
+  'label-value': 'IdP Group Name',
+  'label-attr': 'Role',
+  'button-label': 'Add group 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' },
+  ],
+};