@descope/web-components-ui 3.5.1 → 3.7.0

package/stories/descope-new-password.stories.js

@@ -0,0 +1,206 @@
+import { componentName } from '../src/components/descope-new-password';
+import { toggleDefaultErrorMessageValueMissingDecorator, withForm } from './helpers';
+import {
+  sizeControl,
+  fullWidthControl,
+  directionControl,
+  disabledControl,
+  readOnlyControl,
+  requiredControl,
+  borderedControl,
+  errorMissingValueControl,
+  errorPatternMismatchControl,
+  errorBadInputControl,
+  minLengthControl,
+  inputLabelTypeControl,
+  errorMessageIconControl,
+  errorMessageIconAttrs,
+  defaultValueMissingControl,
+} from './commonControls';
+
+const policyData = [
+  {
+    id: 'minlength',
+    message: 'At least {{value}} characters',
+    pattern: '^.{{{value}},}$',
+    data: {
+      value: 8,
+    },
+  },
+  {
+    id: 'passwordstrength',
+    message: 'Password strength',
+    compare: 'GTE',
+    data: {
+      expected: 1,
+    },
+  },
+  {
+    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 = ({
+  'password-label': passwordLabel,
+  'confirm-label': confirmLabel,
+  'password-placeholder': passwordPlaceholder,
+  'confirm-placeholder': confirmPlaceholder,
+  size,
+  bordered,
+  direction,
+  required,
+  minlength,
+  'full-width': fullWidth,
+  disabled,
+  readonly,
+  'external-input': externalInput,
+  'has-confirm': hasConfirm,
+  'has-validation': hasValidation,
+  'policy-label': policyLabel,
+  'available-policies': availablePolicies,
+  'data-password-policy-value-minlength': minLengthDataAttr,
+  'data-password-policy-value-passwordstrength': passwordStrengthDataAttr,
+  'active-policies': activePolicies,
+  'data-errormessage-value-missing': customErrorMissingValue,
+  'data-errormessage-pattern-mismatch': customErrorTypeMismatch,
+  'data-errormessage-bad-input': customErrorPolicyMismatch,
+  'st-policy-preview-background-color': stPolicyPreviewBgColor,
+  'st-policy-preview-padding': stPolicyPreviewPadding,
+  'label-type': labelType,
+  'manual-visibility-toggle': manualVisibilityToggle,
+  errorMsgIcon,
+}) =>
+  `
+    <descope-new-password
+      size="${size}"
+      bordered="${bordered}"
+      password-label="${passwordLabel || ''}"
+      password-placeholder="${passwordPlaceholder || ''}"
+      confirm-label="${confirmLabel || ''}"
+      confirm-placeholder="${confirmPlaceholder || ''}"
+      has-confirm="${hasConfirm || false}"
+      has-validation="${hasValidation || false}"
+      required="${required || false}"
+      full-width="${fullWidth || false}"
+      disabled="${disabled || false}"
+      readonly="${readonly || false}"
+      minlength="${minlength || ''}"
+      data-errormessage-value-missing="${customErrorMissingValue || ''}"
+      data-errormessage-pattern-mismatch="${customErrorTypeMismatch || ''}"
+      data-errormessage-bad-input="${customErrorPolicyMismatch || ''}"
+      data-password-policy-value-minlength="${minLengthDataAttr}"
+      data-password-policy-value-passwordstrength="${passwordStrengthDataAttr}"
+      st-host-direction="${direction ?? ''}"
+      available-policies='${JSON.stringify(availablePolicies) || ''}'
+      active-policies="${activePolicies || ''}"
+      policy-label="${policyLabel || ''}"
+      st-policy-preview-background-color="${stPolicyPreviewBgColor || ''}"
+      st-policy-preview-padding="${stPolicyPreviewPadding || ''}"
+      label-type="${labelType || ''}"
+      manual-visibility-toggle="${manualVisibilityToggle}"
+      external-input="${externalInput || false}"
+      ${errorMsgIcon ? errorMessageIconAttrs : ''}
+    ></descope-new-password>
+  `;
+
+export default {
+  component: componentName,
+  title: 'descope-new-password',
+  decorators: [toggleDefaultErrorMessageValueMissingDecorator, withForm],
+  argTypes: {
+    ...sizeControl,
+    ...inputLabelTypeControl,
+    ...fullWidthControl,
+    ...disabledControl,
+    ...readOnlyControl,
+    ...requiredControl,
+    ...borderedControl,
+    ...errorMissingValueControl,
+    ...errorPatternMismatchControl,
+    ...errorBadInputControl,
+    ...minLengthControl,
+    ...directionControl,
+    ...errorMessageIconControl,
+    ...defaultValueMissingControl,
+    'has-confirm': {
+      name: 'Has Confirmation',
+      control: { type: 'boolean' },
+    },
+    'password-label': {
+      name: 'Password Label',
+      control: { type: 'text' },
+    },
+    'confirm-label': {
+      name: 'Confirm Label',
+      control: { type: 'text' },
+    },
+    'password-placeholder': {
+      name: 'Password Placeholder',
+      control: { type: 'text' },
+    },
+    'confirm-placeholder': {
+      name: 'Confirm Placeholder',
+      control: { type: 'text' },
+    },
+    'has-validation': {
+      name: 'Has Validation',
+      control: { type: 'boolean' },
+    },
+    'policy-label': {
+      name: 'Policy Label',
+      control: { type: 'text' },
+    },
+    'available-policies': {
+      name: 'Available Policies',
+      control: { type: 'object' },
+    },
+    'manual-visibility-toggle': {
+      name: 'Manual Visibility Toggle',
+      control: { type: 'boolean' },
+    },
+    'external-input': {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'md',
+  bordered: true,
+  'has-validation': false,
+  'policy-label': 'Your password must have:',
+  'available-policies': policyData,
+  'active-policies': [
+    'minlength',
+    'lowercase',
+    'uppercase',
+    'number',
+    'nonalphanumeric',
+    'passwordstrength',
+  ],
+  'data-password-policy-value-minlength': '8',
+  'data-password-policy-value-passwordstrength': '2',
+  'st-policy-preview-background-color': 'transparent',
+  'st-policy-preview-padding': '0',
+  'data-errormessage-value-missing': 'Please fill out this field.',
+  'data-errormessage-pattern-mismatch': 'Please match the requested format.',
+};

package/stories/descope-notification.stories.js

@@ -0,0 +1,81 @@
+import { componentName } from '../src/components/descope-notification';
+import { borderedControl, sizeControl } from './commonControls';
+
+const Template = ({ content, position, duration, mode, bordered, size }) => `
+    <style nonce="${window.DESCOPE_NONCE}">
+      #notification-root {
+        width: 100%;
+        height: 400px;
+        background: pink;
+        position: relative;
+      }
+    </style>
+    <div id="notification-root">
+      <button id="add-notification">Add Notification</button>
+    </div>
+  `;
+
+export default {
+  component: componentName,
+  title: 'descope-notification',
+  decorators: [
+    (story, { args }) => {
+      setTimeout(() => {
+        document.querySelector('#add-notification').addEventListener('click', (e) => {
+          const tpl = document.createElement('template');
+          tpl.innerHTML = `<descope-notification
+        opened='true'
+        mode='${args.mode}'
+        position='${args.position}'
+        duration='${args.duration}'
+        size='${args.size}'
+        bordered='${args.bordered}'
+      >
+        ${args.content}
+        <button slot="close" data-id="closeNotification">close</button>
+      </descope-notification>
+      `;
+
+          document.querySelector('#notification-root').appendChild(tpl.content.cloneNode(true));
+        });
+      });
+
+      return story();
+    },
+  ],
+  argTypes: {
+    ...sizeControl,
+    ...borderedControl,
+    mode: {
+      name: 'Mode',
+      options: ['success', 'error'],
+      control: { type: 'select' },
+    },
+    position: {
+      name: 'Position',
+      options: [
+        'top-stretch',
+        'top-start',
+        'top-center',
+        'top-end',
+        'middle',
+        'bottom-start',
+        'bottom-center',
+        'bottom-end',
+        'bottom-stretch',
+      ],
+      control: { type: 'select' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  position: 'bottom-start',
+  duration: 3000,
+  size: 'md',
+  bordered: false,
+  mode: 'success',
+  content: 'Action completed with status',
+};

package/stories/descope-notp-image.stories.js

@@ -0,0 +1,29 @@
+import { componentName } from '../src/components/descope-notp-image';
+import { customHeightControl, customWidthControl } from './commonControls';
+
+const Template = ({ 'st-width': customWidth, 'st-height': customHeight }) => `
+  <descope-notp-image
+    st-height="${customHeight || ''}"
+    st-width="${customWidth || ''}"
+  ></descope-notp-image>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-notp-image',
+  parameters: {
+    panelPosition: 'right',
+    controls: { expanded: true },
+  },
+  argTypes: {
+    ...customHeightControl,
+    ...customWidthControl,
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  'st-width': '',
+  'st-height': '',
+};

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

@@ -0,0 +1,83 @@
+import { componentName } from '../src/components/descope-number-field';
+import { toggleDefaultErrorMessageValueMissingDecorator, withForm } from './helpers';
+import {
+  labelControl,
+  placeholderControl,
+  sizeControl,
+  fullWidthControl,
+  directionControl,
+  disabledControl,
+  readOnlyControl,
+  requiredControl,
+  borderedControl,
+  errorMissingValueControl,
+  errorPatternMismatchControl,
+  inputLabelTypeControl,
+  errorMessageIconControl,
+  errorMessageIconAttrs,
+  defaultValueMissingControl,
+} from './commonControls';
+
+const Template = ({
+  label,
+  placeholder,
+  size,
+  bordered,
+  direction,
+  required,
+  disabled,
+  readonly,
+  'full-width': fullWidth,
+  'data-errormessage-value-missing': customErrorMissingValue,
+  'data-errormessage-pattern-mismatch': customErrorTypeMismatch,
+  'label-type': labelType,
+  errorMsgIcon,
+}) =>
+  `
+    <descope-number-field
+      size="${size}"
+      bordered="${bordered}"
+      label="${label || ''}"
+      placeholder="${placeholder || ''}"
+      required="${required || false}"
+      disabled="${disabled || false}"
+      readonly="${readonly || false}"
+      full-width="${fullWidth || false}"
+      data-errormessage-value-missing="${customErrorMissingValue || ''}"
+      data-errormessage-pattern-mismatch="${customErrorTypeMismatch || ''}"
+      st-host-direction="${direction ?? ''}"
+      label-type="${labelType || ''}"
+      ${errorMsgIcon ? errorMessageIconAttrs : ''}
+    ></descope-number-field>
+  `;
+
+export default {
+  component: componentName,
+  title: 'descope-number-field',
+  decorators: [toggleDefaultErrorMessageValueMissingDecorator, withForm],
+  argTypes: {
+    ...labelControl,
+    ...placeholderControl,
+    ...inputLabelTypeControl,
+    ...sizeControl,
+    ...fullWidthControl,
+    ...disabledControl,
+    ...readOnlyControl,
+    ...requiredControl,
+    ...borderedControl,
+    ...errorMissingValueControl,
+    ...errorPatternMismatchControl,
+    ...directionControl,
+    ...errorMessageIconControl,
+    ...defaultValueMissingControl,
+  },
+};
+
+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-passcode.stories.js

@@ -0,0 +1,89 @@
+import { componentName } from '../src/components/descope-passcode';
+import {
+  toggleDefaultErrorMessagePatternMismatchDecorator,
+  toggleDefaultErrorMessageValueMissingDecorator,
+  withForm,
+} from './helpers';
+import {
+  labelControl,
+  loadingControl,
+  sizeControl,
+  fullWidthControl,
+  directionControl,
+  disabledControl,
+  readOnlyControl,
+  requiredControl,
+  borderedControl,
+  errorMissingValueControl,
+  errorPatternMismatchControl,
+  errorMessageIconControl,
+  errorMessageIconAttrs,
+  defaultValueMissingControl,
+  defaultPatternMismatchControl,
+} from './commonControls';
+
+const Template = ({
+  label,
+  loading,
+  size,
+  bordered,
+  direction,
+  required,
+  'full-width': fullWidth,
+  disabled,
+  readonly,
+  'data-errormessage-value-missing': customErrorMissingValue,
+  'data-errormessage-pattern-mismatch': customErrorTypeMismatch,
+  errorMsgIcon,
+}) =>
+  `
+    <descope-passcode
+      label="${label || ''}"
+      size="${size}"
+      bordered="${bordered}"
+      required="${required || false}"
+      full-width="${fullWidth || false}"
+      disabled="${disabled || false}"
+      readonly="${readonly || false}"
+      loading="${loading || false}"
+      data-errormessage-value-missing="${customErrorMissingValue || ''}"
+      data-errormessage-pattern-mismatch="${customErrorTypeMismatch || ''}"
+      st-host-direction="${direction ?? ''}"
+      ${errorMsgIcon ? errorMessageIconAttrs : ''}
+    ></descope-passcode>
+  `;
+
+export default {
+  component: componentName,
+  title: 'descope-passcode',
+  decorators: [
+    toggleDefaultErrorMessageValueMissingDecorator,
+    toggleDefaultErrorMessagePatternMismatchDecorator,
+    withForm,
+  ],
+  argTypes: {
+    ...labelControl,
+    ...sizeControl,
+    ...fullWidthControl,
+    ...disabledControl,
+    ...readOnlyControl,
+    ...requiredControl,
+    ...loadingControl,
+    ...borderedControl,
+    ...errorMissingValueControl,
+    ...errorPatternMismatchControl,
+    ...directionControl,
+    ...errorMessageIconControl,
+    ...defaultValueMissingControl,
+    ...defaultPatternMismatchControl,
+  },
+};
+
+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-password.stories.js

@@ -0,0 +1,89 @@
+import { componentName } from '../src/components/descope-password';
+import { toggleDefaultErrorMessageValueMissingDecorator, withForm } from './helpers';
+import {
+  labelControl,
+  placeholderControl,
+  sizeControl,
+  fullWidthControl,
+  directionControl,
+  disabledControl,
+  readOnlyControl,
+  requiredControl,
+  borderedControl,
+  errorMissingValueControl,
+  inputLabelTypeControl,
+  errorMessageIconControl,
+  errorMessageIconAttrs,
+  defaultValueMissingControl,
+} from './commonControls';
+
+const Template = ({
+  label,
+  placeholder,
+  size,
+  bordered,
+  direction,
+  required,
+  'full-width': fullWidth,
+  disabled,
+  readonly,
+  'external-input': externalInput,
+  'manual-visibility-toggle': manualVisibilityToggle,
+  'data-errormessage-value-missing': customErrorMissingValue,
+  'label-type': labelType,
+  errorMsgIcon,
+}) =>
+  `
+    <descope-password
+      size="${size}"
+      bordered="${bordered}"
+      label="${label || ''}"
+      placeholder="${placeholder || ''}"
+      required="${required || false}"
+      full-width="${fullWidth || false}"
+      disabled="${disabled || false}"
+      readonly="${readonly || false}"
+      data-errormessage-value-missing="${customErrorMissingValue || ''}"
+      st-host-direction="${direction ?? ''}"
+      label-type="${labelType || ''}"
+      manual-visibility-toggle="${manualVisibilityToggle}"
+      external-input="${externalInput || false}"
+      ${errorMsgIcon ? errorMessageIconAttrs : ''}
+    ></descope-password>
+  `;
+
+export default {
+  component: componentName,
+  title: 'descope-password',
+  decorators: [toggleDefaultErrorMessageValueMissingDecorator, withForm],
+  argTypes: {
+    ...labelControl,
+    ...placeholderControl,
+    ...inputLabelTypeControl,
+    ...sizeControl,
+    ...fullWidthControl,
+    ...disabledControl,
+    ...readOnlyControl,
+    ...requiredControl,
+    ...borderedControl,
+    ...errorMissingValueControl,
+    ...directionControl,
+    ...errorMessageIconControl,
+    ...defaultValueMissingControl,
+    'manual-visibility-toggle': {
+      name: 'Manual Visibility Toggle',
+      control: { type: 'boolean' },
+    },
+    'external-input': {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'md',
+  bordered: true,
+  'data-errormessage-value-missing': 'Please fill out this field.',
+};