@descope/web-components-ui 3.5.1 → 3.7.0

package/stories/descope-scopes-list.stories.js

@@ -0,0 +1,81 @@
+import { componentName } from '../src/components/descope-scopes-list';
+import { directionControl, sizeControl } from './commonControls';
+
+const Template = ({
+  direction,
+  numberOfItems,
+  descText,
+  size,
+  variant,
+  gap,
+  dataSource,
+  readOnly,
+  'full-width': fullWidth,
+}) => `
+  <descope-scopes-list
+    st-host-direction="${direction || ''}"
+    size=${size || ''}
+    variant="${variant}"
+    st-gap="${gap}px"
+    readonly="${readOnly}"
+    full-width="${fullWidth}"
+  >
+  </descope-scopes-list>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-scopes-list',
+  decorators: [
+    (story, { args }) => {
+      const data = Array.from({ length: args.numberOfItems }, (_, i) => ({
+        desc: `${args.descText} ${i + 1}`,
+        id: `scope-${i}`,
+        required: i % 2 > 0,
+      }));
+
+      setTimeout(() => {
+        const ele = document.querySelector('descope-scopes-list');
+
+        if (args.dataSource === 'attribute') {
+          ele.setAttribute('data', JSON.stringify(data));
+        } else {
+          ele.data = data;
+        }
+      });
+
+      return story();
+    },
+  ],
+  argTypes: {
+    ...directionControl,
+    ...sizeControl,
+    variant: {
+      name: 'Variant',
+      options: ['checkbox', 'switch'],
+      control: { type: 'radio' },
+    },
+    gap: {
+      name: 'Gap',
+      control: { type: 'range', min: 0, max: 30, step: 1 },
+    },
+    dataSource: {
+      name: 'Data source',
+      options: ['attribute', 'parameter'],
+      control: { type: 'radio' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'sm',
+  numberOfItems: 10,
+  descText: 'Sample scope',
+  dataSource: 'attribute',
+  variant: 'checkbox',
+  gap: 10,
+  readOnly: false,
+  'full-width': false,
+};

package/stories/descope-security-questions-setup.stories.js

@@ -0,0 +1,125 @@
+import { componentName } from '../src/components/descope-security-questions-setup';
+import {
+  directionControl,
+  errorMessageIconAttrs,
+  errorMessageIconControl,
+  inputLabelTypeControl,
+  sizeControl,
+} from './commonControls';
+
+const questions = [
+  { id: '1', text: 'What is your favorite color?' },
+  {
+    id: '2',
+    text: 'What is the name of the city where you were born?',
+  },
+  {
+    id: '3',
+    text: 'What is the name of your first pet?',
+  },
+];
+
+const Template = ({
+  direction,
+  size,
+  gap,
+  count,
+  readOnly,
+  'full-width': fullWidth,
+  questionLabel,
+  questionPlaceholder,
+  answerLabel,
+  answerPlaceholder,
+  'label-type': labelType,
+  'question-data-errormessage-value-missing': questionDataErrorMessageValueMissing,
+  'answer-data-errormessage-value-missing': answerDataErrorMessageValueMissing,
+  errorMsgIcon,
+}) => `
+<style nonce="${window.DESCOPE_NONCE}">
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+</style>
+
+<div class="wrapper">
+  <descope-security-questions-setup
+    st-host-direction="${direction || ''}"
+    size=${size || ''}
+    st-gap="${gap}px"
+    readonly="${readOnly}"
+    full-width="${fullWidth}"
+    count="${count}"
+    questions='${JSON.stringify(questions)}'
+    question-label="${questionLabel}"
+    question-placeholder="${questionPlaceholder}"
+    answer-label="${answerLabel}"
+    answer-placeholder="${answerPlaceholder}"
+    label-type="${labelType}"
+    question-data-errormessage-value-missing="${questionDataErrorMessageValueMissing || ''}"
+    answer-data-errormessage-value-missing="${answerDataErrorMessageValueMissing || ''}"
+    ${errorMsgIcon ? errorMessageIconAttrs : ''}
+
+  >
+  </descope-security-questions-setup>
+
+  <div>
+    <button id="submit">Validate</button>
+  </div>
+</div>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-security-questions-setup',
+  decorators: [
+    (story) => {
+      setTimeout(() => {
+        const button = document.querySelector('#submit');
+        button.onclick = () => {
+          document.querySelector('descope-security-questions-setup').reportValidity();
+        };
+      });
+      return story();
+    },
+  ],
+  argTypes: {
+    ...directionControl,
+    ...sizeControl,
+    ...inputLabelTypeControl,
+    ...errorMessageIconControl,
+    'question-data-errormessage-value-missing': {
+      name: 'Question Custom Error: Mandatory',
+      control: { type: 'text' },
+    },
+    'answer-data-errormessage-value-missing': {
+      name: 'Answer Custom Error: Mandatory',
+      control: { type: 'text' },
+    },
+    gap: {
+      name: 'Gap',
+      control: { type: 'range', min: 0, max: 30, step: 1 },
+    },
+    count: {
+      name: 'Count',
+      control: { type: 'range', min: 1, max: questions.length, step: 1 },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'sm',
+  gap: 10,
+  readOnly: false,
+  count: 3,
+  'full-width': false,
+  questionLabel: 'Question',
+  questionPlaceholder: 'Question',
+  answerLabel: 'Answer',
+  answerPlaceholder: 'Answer',
+  'question-data-errormessage-value-missing': 'Please fill out this field.',
+  'answer-data-errormessage-value-missing': 'Please fill out this field.',
+};

package/stories/descope-security-questions-verify.stories.js

@@ -0,0 +1,111 @@
+import { componentName } from '../src/components/descope-security-questions-verify';
+import {
+  directionControl,
+  errorMessageIconAttrs,
+  errorMessageIconControl,
+  sizeControl,
+} from './commonControls';
+
+const questions = [
+  { id: '1', text: 'What is your favorite color?' },
+  {
+    id: '2',
+    text: 'What is the name of the city where you were born?',
+  },
+  {
+    id: '3',
+    text: 'What is the name of your first pet?',
+  },
+];
+
+const Template = ({
+  direction,
+  size,
+  gap,
+  readOnly,
+  'full-width': fullWidth,
+  answerPlaceholder,
+  'question-mode': questionMode,
+  'question-text-align': questionTextAlign,
+  'answer-data-errormessage-value-missing': answerDataErrorMessageValueMissing,
+  errorMsgIcon,
+}) => `
+<style nonce="${window.DESCOPE_NONCE}">
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+</style>
+<div class="wrapper">
+  <descope-security-questions-verify
+    st-host-direction="${direction || ''}"
+    size=${size || ''}
+    st-gap="${gap}px"
+    readonly="${readOnly}"
+    full-width="${fullWidth}"
+    questions='${JSON.stringify(questions)}'
+    answer-placeholder="${answerPlaceholder}"
+    question-mode="${questionMode}"
+    st-question-text-align="${questionTextAlign}"
+    answer-data-errormessage-value-missing="${answerDataErrorMessageValueMissing || ''}"
+    ${errorMsgIcon ? errorMessageIconAttrs : ''}
+  >
+  </descope-security-questions-verify>
+
+  <div>
+    <button id="submit">Validate</button>
+  </div>
+</div>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-security-questions-verify',
+  decorators: [
+    (story) => {
+      setTimeout(() => {
+        const button = document.querySelector('#submit');
+        button.onclick = () => {
+          document.querySelector('descope-security-questions-verify').reportValidity();
+        };
+      });
+      return story();
+    },
+  ],
+  argTypes: {
+    ...directionControl,
+    ...sizeControl,
+    ...errorMessageIconControl,
+    gap: {
+      name: 'Gap',
+      control: { type: 'range', min: 0, max: 30, step: 1 },
+    },
+    'question-mode': {
+      name: 'Mode',
+      options: ['none', 'primary', 'secondary', 'success', 'error'],
+      control: { type: 'select' },
+    },
+    'question-text-align': {
+      name: 'Text Align',
+      options: ['left', 'center', 'right'],
+      control: { type: 'select' },
+    },
+    'answer-data-errormessage-value-missing': {
+      name: 'Answer Custom Error: Mandatory',
+      control: { type: 'text' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'sm',
+  gap: 10,
+  readOnly: false,
+  'full-width': false,
+  answerPlaceholder: 'Answer',
+  'question-mode': 'primary',
+  'answer-data-errormessage-value-missing': 'Please fill out this field.',
+};

package/stories/descope-switch-toggle.stories.js

@@ -0,0 +1,74 @@
+import { componentName } from '../src/components/boolean-fields/descope-switch-toggle';
+import { toggleDefaultErrorMessageValueMissingDecorator, withForm } from './helpers';
+import {
+  labelControl,
+  sizeControl,
+  fullWidthControl,
+  directionControl,
+  disabledControl,
+  requiredControl,
+  borderedControl,
+  checkboxValueControl,
+  errorMissingValueControl,
+  readOnlyControl,
+  errorMessageIconControl,
+  errorMessageIconAttrs,
+  defaultValueMissingControl,
+} from './commonControls';
+
+const Template = ({
+  label,
+  checked,
+  size,
+  bordered,
+  direction,
+  disabled,
+  required,
+  readonly,
+  'full-width': fullWidth,
+  'data-errormessage-value-missing': customErrorMissingValue,
+  errorMsgIcon,
+}) =>
+  `
+    <descope-switch-toggle
+      size="${size}"
+      bordered="${bordered}"
+      label="${label || ''}"
+      checked="${checked || false}"
+      disabled="${disabled || false}"
+      required="${required || false}"
+      full-width="${fullWidth || false}"
+      readonly="${readonly || false}"
+      data-errormessage-value-missing="${customErrorMissingValue || ''}"
+      st-host-direction="${direction ?? ''}"
+      ${errorMsgIcon ? errorMessageIconAttrs : ''}
+    ></descope-switch-toggle>
+  `;
+
+export default {
+  component: componentName,
+  title: 'descope-switch-toggle',
+  decorators: [toggleDefaultErrorMessageValueMissingDecorator, withForm],
+  argTypes: {
+    ...labelControl,
+    ...sizeControl,
+    ...fullWidthControl,
+    ...disabledControl,
+    ...requiredControl,
+    ...borderedControl,
+    ...checkboxValueControl,
+    ...errorMissingValueControl,
+    ...readOnlyControl,
+    ...directionControl,
+    ...errorMessageIconControl,
+    ...defaultValueMissingControl,
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'md',
+  bordered: true,
+  'data-errormessage-value-missing': 'Please fill out this field.',
+};

package/stories/descope-text-area.stories.js

@@ -0,0 +1,77 @@
+import { componentName } from '../src/components/descope-text-area';
+import { toggleDefaultErrorMessageValueMissingDecorator, withForm } from './helpers';
+import {
+  labelControl,
+  placeholderControl,
+  sizeControl,
+  fullWidthControl,
+  directionControl,
+  disabledControl,
+  readOnlyControl,
+  requiredControl,
+  borderedControl,
+  textAlignControl,
+  errorMissingValueControl,
+  errorMessageIconControl,
+  errorMessageIconAttrs,
+  defaultValueMissingControl,
+} from './commonControls';
+
+const Template = ({
+  label,
+  placeholder,
+  size,
+  bordered,
+  direction,
+  required,
+  disabled,
+  readonly,
+  'full-width': fullWidth,
+  'text-align': textAlign,
+  'data-errormessage-value-missing': customErrorMissingValue,
+  errorMsgIcon,
+}) => `
+    <descope-text-area
+      size="${size}"
+      bordered="${bordered}"
+      label="${label || ''}"
+      placeholder="${placeholder || ''}"
+      required="${required || false}"
+      full-width="${fullWidth || false}"
+      readonly="${readonly || false}"
+      disabled="${disabled || false}"
+      text-align="${textAlign || ''}"
+      data-errormessage-value-missing="${customErrorMissingValue || ''}"
+      st-host-direction="${direction ?? ''}"
+      ${errorMsgIcon ? errorMessageIconAttrs : ''}
+    ></descope-text-area>
+  `;
+
+export default {
+  component: componentName,
+  title: 'descope-text-area',
+  decorators: [toggleDefaultErrorMessageValueMissingDecorator, withForm],
+  argTypes: {
+    ...labelControl,
+    ...placeholderControl,
+    ...sizeControl,
+    ...fullWidthControl,
+    ...disabledControl,
+    ...readOnlyControl,
+    ...requiredControl,
+    ...borderedControl,
+    ...errorMissingValueControl,
+    ...directionControl,
+    ...textAlignControl,
+    ...errorMessageIconControl,
+    ...defaultValueMissingControl,
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'md',
+  bordered: true,
+  'data-errormessage-value-missing': 'Please fill out this field.',
+};

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

@@ -0,0 +1,98 @@
+import { componentName } from '../src/components/descope-text-field';
+import { toggleDefaultErrorMessageValueMissingDecorator, withForm } from './helpers';
+import {
+  labelControl,
+  placeholderControl,
+  sizeControl,
+  fullWidthControl,
+  directionControl,
+  disabledControl,
+  readOnlyControl,
+  requiredControl,
+  borderedControl,
+  textAlignControl,
+  errorMissingValueControl,
+  helperTextControl,
+  inputLabelTypeControl,
+  inputCopyToClipboardControl,
+  errorMessageIconControl,
+  errorMessageIconAttrs,
+  defaultValueMissingControl,
+  obfuscatedControl,
+  valueControl,
+} from './commonControls';
+
+const Template = ({
+  label,
+  placeholder,
+  size,
+  bordered,
+  direction,
+  required,
+  disabled,
+  readonly,
+  obfuscated,
+  value,
+  'full-width': fullWidth,
+  'text-align': textAlign,
+  'helper-text': helperText,
+  'data-errormessage-value-missing': customErrorMessage,
+  'label-type': labelType,
+  'copy-to-clipboard': copyToClipboard,
+  errorMsgIcon,
+}) => `
+      <descope-text-field
+        size="${size}"
+        bordered="${bordered}"
+        label="${label || ''}"
+        disabled="${disabled || false}"
+        placeholder="${placeholder || ''}"
+        readonly="${readonly || false}"
+        required="${required || false}"
+        full-width="${fullWidth || false}"
+        text-align="${textAlign || ''}"
+        helper-text="${helperText || ''}"
+        data-errormessage-value-missing="${customErrorMessage || ''}"
+        st-host-direction="${direction ?? ''}"
+        label-type="${labelType || ''}"
+        copy-to-clipboard="${copyToClipboard || false}"
+        ${errorMsgIcon ? errorMessageIconAttrs : ''}
+        obfuscated="${obfuscated || false}"
+        value="${value || ''}"
+      ></descope-text-field>
+  `;
+
+export default {
+  component: componentName,
+  title: 'descope-text-field',
+  decorators: [toggleDefaultErrorMessageValueMissingDecorator, withForm],
+  argTypes: {
+    ...labelControl,
+    ...placeholderControl,
+    ...inputLabelTypeControl,
+    ...sizeControl,
+    ...fullWidthControl,
+    ...disabledControl,
+    ...readOnlyControl,
+    ...requiredControl,
+    ...borderedControl,
+    ...errorMissingValueControl,
+    ...directionControl,
+    ...textAlignControl,
+    ...helperTextControl,
+    ...inputCopyToClipboardControl,
+    ...errorMessageIconControl,
+    ...defaultValueMissingControl,
+    ...obfuscatedControl,
+    ...valueControl,
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  bordered: true,
+  size: 'md',
+  'copy-to-clipboard': false,
+  'data-errormessage-value-missing': 'Please fill out this field.',
+};

package/stories/descope-third-party-app-logo.stories.js

@@ -0,0 +1,42 @@
+import {
+  componentName,
+  ThirdPartyAppLogoClass,
+} from '../src/components/descope-third-party-app-logo/ThirdPartyAppLogoClass';
+import { LogoClass } from '../src/components/descope-logo';
+import { sizeControl } from './commonControls';
+// images generated by https://via.assets.so/img.jpg?w=150&h=200&tc=red&bg=blue
+import img150x200 from './images/150x200.jpg';
+import img800x150 from './images/800x150.jpg';
+
+const Template = ({ size, thirdPartyAppLogoUrl, companyLogoUrl }) => `
+<style nonce="${window.DESCOPE_NONCE}">
+  descope-third-party-app-logo {
+    ${companyLogoUrl ? `${LogoClass.cssVarList.url}: url('${companyLogoUrl}');` : ''}
+    ${
+      thirdPartyAppLogoUrl
+        ? `${ThirdPartyAppLogoClass.cssVarList.thirdPartyAppLogo}: url('${thirdPartyAppLogoUrl}');`
+        : ''
+    }
+  }
+</style>
+
+<descope-third-party-app-logo
+    size="${size}"
+  ></descope-third-party-app-logo
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-third-party-app-logo',
+  argTypes: {
+    ...sizeControl,
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  thirdPartyAppLogoUrl: img800x150,
+  companyLogoUrl: img150x200,
+  size: 'md',
+};

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

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