@descope/web-components-ui 3.5.1 → 3.6.0

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "3.5.1",
+  "version": "3.6.0",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "src",
+    "stories"
   ],
   "license": "MIT",
   "devDependencies": {
@@ -51,10 +52,10 @@
     "webpack-cli": "^7.0.0",
     "webpack-dev-server": "^5.0.0",
     "webpack-subresource-integrity": "5.2.0-rc.1",
-    "rollup-replace-plugin": "3.5.1",
-    "test-drivers": "3.5.1",
-    "webpack-extract-font-loader": "3.5.1",
-    "webpack-replace-plugin": "3.5.1"
+    "rollup-replace-plugin": "3.6.0",
+    "webpack-extract-font-loader": "3.6.0",
+    "test-drivers": "3.6.0",
+    "webpack-replace-plugin": "3.6.0"
   },
   "dependencies": {
     "@vaadin/checkbox": "24.3.4",
@@ -78,33 +79,33 @@
     "libphonenumber-js": "^1.11.12",
     "lodash.debounce": "4.0.8",
     "lodash.merge": "4.6.2",
-    "@descope-ui/common": "3.5.1",
-    "@descope-ui/descope-country-subdivision-city-field": "3.5.1",
-    "@descope-ui/descope-apps-list": "3.5.1",
-    "@descope-ui/descope-address-field": "3.5.1",
-    "@descope-ui/descope-autocomplete-field": "3.5.1",
-    "@descope-ui/descope-avatar": "3.5.1",
-    "@descope-ui/descope-badge": "3.5.1",
-    "@descope-ui/descope-button": "3.5.1",
-    "@descope-ui/descope-collapsible-container": "3.5.1",
-    "@descope-ui/descope-combo-box": "3.5.1",
-    "@descope-ui/descope-enriched-text": "3.5.1",
-    "@descope-ui/descope-image": "3.5.1",
-    "@descope-ui/descope-link": "3.5.1",
-    "@descope-ui/descope-list": "3.5.1",
-    "@descope-ui/descope-list-item": "3.5.1",
-    "@descope-ui/descope-outbound-app-button": "3.5.1",
-    "@descope-ui/descope-outbound-apps": "3.5.1",
-    "@descope-ui/descope-icon": "3.5.1",
-    "@descope-ui/descope-password-strength": "3.5.1",
-    "@descope-ui/descope-ponyhot": "3.5.1",
-    "@descope-ui/descope-recovery-codes": "3.5.1",
-    "@descope-ui/descope-text": "3.5.1",
-    "@descope-ui/descope-timer": "3.5.1",
-    "@descope-ui/descope-timer-button": "3.5.1",
-    "@descope-ui/descope-tooltip": "3.5.1",
-    "@descope-ui/descope-trusted-devices": "3.5.1",
-    "@descope-ui/descope-attachment": "3.5.1"
+    "@descope-ui/common": "3.6.0",
+    "@descope-ui/descope-address-field": "3.6.0",
+    "@descope-ui/descope-apps-list": "3.6.0",
+    "@descope-ui/descope-avatar": "3.6.0",
+    "@descope-ui/descope-badge": "3.6.0",
+    "@descope-ui/descope-button": "3.6.0",
+    "@descope-ui/descope-collapsible-container": "3.6.0",
+    "@descope-ui/descope-country-subdivision-city-field": "3.6.0",
+    "@descope-ui/descope-combo-box": "3.6.0",
+    "@descope-ui/descope-icon": "3.6.0",
+    "@descope-ui/descope-enriched-text": "3.6.0",
+    "@descope-ui/descope-list": "3.6.0",
+    "@descope-ui/descope-autocomplete-field": "3.6.0",
+    "@descope-ui/descope-link": "3.6.0",
+    "@descope-ui/descope-outbound-app-button": "3.6.0",
+    "@descope-ui/descope-outbound-apps": "3.6.0",
+    "@descope-ui/descope-password-strength": "3.6.0",
+    "@descope-ui/descope-ponyhot": "3.6.0",
+    "@descope-ui/descope-recovery-codes": "3.6.0",
+    "@descope-ui/descope-text": "3.6.0",
+    "@descope-ui/descope-timer": "3.6.0",
+    "@descope-ui/descope-timer-button": "3.6.0",
+    "@descope-ui/descope-tooltip": "3.6.0",
+    "@descope-ui/descope-list-item": "3.6.0",
+    "@descope-ui/descope-trusted-devices": "3.6.0",
+    "@descope-ui/descope-image": "3.6.0",
+    "@descope-ui/descope-attachment": "3.6.0"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",

package/stories/commonControls.js

@@ -0,0 +1,359 @@
+import errorMessageIconBase64 from './icons/errorMessageIconBase64';
+
+export const labelControl = {
+  label: {
+    name: 'Label',
+    control: { type: 'text' },
+  },
+};
+
+export const helperTextControl = {
+  'helper-text': {
+    name: 'Helper Text',
+    control: { type: 'text' },
+  },
+};
+
+export const placeholderControl = {
+  placeholder: {
+    name: 'Placeholder',
+    control: { type: 'text' },
+  },
+};
+
+export const sizeControl = {
+  size: {
+    name: 'Size',
+    options: ['xs', 'sm', 'md', 'lg'],
+    control: { type: 'select' },
+  },
+};
+
+export const loadingControl = {
+  loading: {
+    name: 'Loading',
+    control: { type: 'boolean' },
+  },
+};
+
+export const fullWidthControl = {
+  'full-width': {
+    name: 'Full Width',
+    control: { type: 'boolean' },
+  },
+};
+
+export const disabledControl = {
+  disabled: {
+    name: 'Disabled',
+    control: { type: 'boolean' },
+  },
+};
+
+export const readOnlyControl = {
+  readonly: {
+    name: 'Read Only',
+    control: { type: 'boolean' },
+  },
+};
+
+export const requiredControl = {
+  required: {
+    name: 'Required',
+    control: { type: 'boolean' },
+  },
+};
+
+export const directionControl = {
+  direction: {
+    name: 'Direction',
+    options: ['ltr', 'rtl'],
+    control: { type: 'select' },
+  },
+};
+
+export const borderedControl = {
+  bordered: {
+    name: 'Bordered',
+    control: { type: 'boolean' },
+  },
+};
+
+export const minLengthControl = {
+  minlength: {
+    name: 'Min. Length',
+    control: { type: 'number' },
+  },
+};
+
+export const maxLengthControl = {
+  maxlength: {
+    name: 'Max. Length',
+    control: { type: 'number' },
+  },
+};
+
+export const textContentControl = {
+  text: {
+    name: 'Content',
+    control: { type: 'text' },
+  },
+};
+
+export const modeControl = {
+  mode: {
+    name: 'Mode',
+    options: ['none', 'primary', 'secondary', 'success', 'error'],
+    control: { type: 'select' },
+  },
+};
+
+export const textAlignControl = {
+  'text-align': {
+    name: 'Text Align',
+    options: ['left', 'center', 'right'],
+    control: { type: 'select' },
+  },
+};
+
+export const errorMissingValueControl = {
+  'data-errormessage-value-missing': {
+    name: 'Custom Error: Mandatory',
+    control: { type: 'text' },
+  },
+};
+
+export const errorPatternMismatchControl = {
+  'data-errormessage-pattern-mismatch': {
+    name: 'Custom Error: Pattern Mismatch',
+    control: { type: 'text' },
+  },
+};
+
+export const errorTypeMismatchControl = {
+  'data-errormessage-type-mismatch': {
+    name: 'Custom Error: Type Mismatch',
+    control: { type: 'text' },
+  },
+};
+
+export const errorBadInputControl = {
+  'data-errormessage-bad-input': {
+    name: 'Custom Error: Bad Input',
+    control: { type: 'text' },
+  },
+};
+
+export const errorRangeUnderflowControl = {
+  'data-errormessage-range-underflow': {
+    name: 'Custom Error: Below minimum value',
+    control: { type: 'text' },
+  },
+};
+
+export const errorRangeOverflowControl = {
+  'data-errormessage-range-overflow': {
+    name: 'Custom Error: Exceeds maximum value',
+    control: { type: 'text' },
+  },
+};
+
+export const fillControl = {
+  'st-fill': {
+    name: 'Fill',
+    control: { type: 'color' },
+  },
+};
+
+export const customHeightControl = {
+  'st-host-height': {
+    name: 'Custom Height',
+    control: { type: 'text' },
+  },
+};
+
+export const customWidthControl = {
+  'st-host-width': {
+    name: 'Custom Width',
+    control: { type: 'text' },
+  },
+};
+
+export const checkboxValueControl = {
+  checked: {
+    name: 'Checked',
+    control: { type: 'boolean' },
+  },
+};
+
+export const buttonVariantControl = {
+  variant: {
+    name: 'Button Variant',
+    options: ['contained', 'outline', 'link'],
+    control: { type: 'select' },
+  },
+};
+
+export const boxShadowControl = {
+  shadow: {
+    name: 'Shadow',
+    options: ['sm', 'md', 'lg', 'xl', '2xl'],
+    control: { type: 'select' },
+  },
+};
+
+export const borderRadiusControl = {
+  'border-radius': {
+    name: 'Radius',
+    options: ['sm', 'md', 'lg', 'xl', '2xl', '3xl'],
+    control: { type: 'select' },
+  },
+};
+
+export const imgSrcControl = {
+  src: {
+    name: 'Image Source',
+    control: { type: 'text' },
+  },
+};
+
+export const typographyVariantControl = {
+  variant: {
+    name: 'Variant',
+    options: ['h1', 'h2', 'h3', 'subtitle1', 'subtitle2', 'body1', 'body2'],
+    control: { type: 'select' },
+  },
+};
+
+export const overrideRenderItemControl = {
+  overrideRenderItem: {
+    name: 'Override the default item renderer function',
+    control: { type: 'boolean' },
+  },
+};
+
+export const itemsSourceControl = {
+  itemsSource: {
+    name: 'Where to take the items from',
+    control: {
+      type: 'select',
+      labels: {
+        children: 'Children',
+        attr: '"data" attribute',
+        prop: '"data" property',
+      },
+    },
+    options: ['children', 'attr', 'prop'],
+  },
+};
+
+export const minItemsSelectionControl = {
+  minItemsSelection: {
+    name: 'Min Items Selection',
+    control: { type: 'number' },
+  },
+};
+
+export const maxItemsSelectionControl = {
+  maxItemsSelection: {
+    name: 'Max Items Selection',
+    control: { type: 'number' },
+  },
+};
+
+export const labelSpacingControl = {
+  'label-spacing': {
+    name: 'Label Spacing',
+    control: { type: 'range', min: 0, max: 200, step: 1 },
+  },
+};
+
+export const inputLabelTypeControl = {
+  'label-type': {
+    name: 'Label Type',
+    control: {
+      type: 'select',
+    },
+    options: ['static', 'floating'],
+  },
+};
+
+export const inputCopyToClipboardControl = {
+  'copy-to-clipboard': {
+    name: 'Copy to clipboard',
+    control: {
+      type: 'boolean',
+    },
+  },
+};
+
+export const errorMessageIconControl = {
+  errorMsgIcon: {
+    name: 'Error Message Icon',
+    control: {
+      type: 'boolean',
+    },
+  },
+};
+
+export const defaultValueMissingControl = {
+  defaultErrorMessageValueMissing: {
+    name: 'Default error-message: Value missing',
+    control: {
+      type: 'boolean',
+    },
+  },
+};
+
+export const defaultPatternMismatchControl = {
+  defaultErrorMessagePatternMismatch: {
+    name: 'Default error-message: Pattern mismatch',
+    control: {
+      type: 'boolean',
+    },
+  },
+};
+
+export const errorMessageIconAttrs = `
+    st-error-message-icon="url(${errorMessageIconBase64})"
+    st-error-message-icon-size="14px"
+    st-error-message-icon-padding="1.5em"
+  `;
+
+export const tooltipPositionControl = {
+  tooltipPosition: {
+    control: { type: 'select' },
+    options: [
+      'top',
+      'top-start',
+      'top-end',
+      'bottom',
+      'bottom-start',
+      'bottom-end',
+      'start',
+      'start-top',
+      'start-bottom',
+      'end',
+      'end-top',
+      'end-bottom',
+    ],
+  },
+};
+
+export const obfuscatedControl = {
+  obfuscated: {
+    name: 'Toggle input obfuscation',
+    control: {
+      type: 'boolean',
+    },
+  },
+};
+
+export const valueControl = {
+  value: {
+    name: 'Input Value',
+    control: {
+      type: 'text',
+    },
+  },
+};

package/stories/descope-alert.stories.js

@@ -0,0 +1,102 @@
+import { componentName } from '../src/components/descope-alert';
+
+import {
+  fullWidthControl,
+  directionControl,
+  borderRadiusControl,
+  borderedControl,
+  typographyVariantControl,
+} from './commonControls';
+
+import icon from './icons/alert.svg?no-inline';
+
+const iconAttrs = `st-icon="url(${icon})"`;
+
+const Template = ({
+  text,
+  direction,
+  mode,
+  variant,
+  spacing,
+  bordered,
+  'text-align': textAlign,
+  'link-target-blank': linkTargetBlank,
+  'full-width': fullWidth,
+  'background-color': backgroundColor,
+  'border-color': borderColor,
+  'border-radius': radius,
+  'border-width': borderWidth,
+  hasIcon,
+}) =>
+  `
+    <descope-alert
+      bordered="${bordered || false}"
+      full-width="${fullWidth || false}"
+      spacing="${spacing || ''}"
+      mode="${mode || ''}"
+      variant="${variant || ''}"
+      border-radius="${radius || ''}"
+      border-width="${borderWidth || ''}"
+      link-target-blank="${linkTargetBlank || false}"
+      text-align="${textAlign || ''}"
+      st-background-color="${backgroundColor || ''}"
+      st-border-color="${borderColor || ''}"
+      st-host-direction="${direction ?? ''}"
+      ${hasIcon ? iconAttrs : ''}
+    >
+      ${text}
+    </descope-alert>
+  `;
+
+export default {
+  component: componentName,
+  title: 'descope-alert',
+  argTypes: {
+    ...fullWidthControl,
+    ...directionControl,
+    ...borderRadiusControl,
+    ...borderedControl,
+    ...typographyVariantControl,
+    mode: {
+      name: 'Mode',
+      options: ['success', 'error'],
+      control: { type: 'select' },
+    },
+    hasIcon: {
+      name: 'Has Icon',
+      control: { type: 'boolean' },
+    },
+    'border-width': {
+      name: 'Border Width',
+      control: { type: 'select' },
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+    'background-color': {
+      name: 'Background Color',
+      control: { type: 'color' },
+    },
+    'border-color': {
+      name: 'Border Color',
+      control: { type: 'color' },
+    },
+    spacing: {
+      name: 'Spacing',
+      control: { type: 'select' },
+      options: ['', 'xs', 'sm', 'md', 'lg', 'xl'],
+    },
+    'text-align': {
+      name: 'Text Align',
+      control: { type: 'select' },
+      options: ['left', 'center', 'right'],
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  text: 'Alert text ([link](https://descope.com))',
+  mode: 'error',
+  variant: 'body1',
+  'link-target-blank': true,
+};

package/stories/descope-button-multi-selection-group.stories.js

@@ -0,0 +1,130 @@
+import { componentName } from '../src/components/button-selection-group-fields/descope-button-multi-selection-group';
+import {
+  sizeControl,
+  labelControl,
+  requiredControl,
+  readOnlyControl,
+  helperTextControl,
+  disabledControl,
+  minItemsSelectionControl,
+  maxItemsSelectionControl,
+  errorMissingValueControl,
+  fullWidthControl,
+  directionControl,
+  overrideRenderItemControl,
+  itemsSourceControl,
+  errorMessageIconControl,
+  errorMessageIconAttrs,
+  defaultValueMissingControl,
+} from './commonControls';
+import { toggleDefaultErrorMessageValueMissingDecorator, withForm } from './helpers';
+
+const altRenderItem = ({ label, value }) => `<span value="${value}">${label}</span>`;
+
+const Template = ({
+  size,
+  label,
+  required,
+  readonly,
+  'full-width': fullWidth,
+  direction,
+  disabled,
+  minItemsSelection,
+  maxItemsSelection,
+  'helper-text': helperText,
+  'default-values': defaultValues,
+  'data-errormessage-value-missing': customErrorMissingValue,
+  data,
+  itemsSource,
+  errorMsgIcon,
+}) => {
+  let serializedData;
+  let serializedDefaultValues;
+
+  try {
+    serializedData = JSON.stringify(data);
+    serializedDefaultValues = JSON.stringify(defaultValues);
+  } catch (e) {
+    // do nothing
+  }
+
+  return `
+  <descope-button-multi-selection-group
+    data='${(itemsSource === 'attr' && serializedData) || ''}'
+    full-width="${fullWidth || false}"
+    size="${size || ''}"
+    label="${label || ''}"
+    helper-text="${helperText || ''}"
+    default-values='${serializedDefaultValues || ''}'
+    required="${required || false}"
+    readonly="${readonly || false}"
+    disabled="${disabled || false}"
+    data-errormessage-value-missing="${customErrorMissingValue || ''}"
+    st-host-direction="${direction ?? ''}"
+    min-items-selection="${minItemsSelection || ''}"
+    max-items-selection="${maxItemsSelection || ''}"
+    ${errorMsgIcon ? errorMessageIconAttrs : ''}
+  >
+    <descope-button-selection-group-item value="1">item1</descope-button-selection-group-item>
+    <descope-button-selection-group-item value="2">test test test test test test test test</descope-button-selection-group-item>
+    <descope-button-selection-group-item value="3">item2</descope-button-selection-group-item>
+    <descope-button-selection-group-item value="4">another item</descope-button-selection-group-item>
+  </descope-button-multi-selection-group>
+`;
+};
+
+export default {
+  component: componentName,
+  title: 'descope-button-multi-selection-group',
+  decorators: [
+    (story, { args }) => {
+      setTimeout(() => {
+        const ele = document.querySelector('descope-button-multi-selection-group');
+
+        if (args.itemsSource === 'prop') ele.data = args.data;
+        if (args.overrideRenderItem) ele.renderItem = altRenderItem;
+      });
+      return story();
+    },
+    toggleDefaultErrorMessageValueMissingDecorator,
+    withForm,
+  ],
+  argTypes: {
+    ...sizeControl,
+    ...labelControl,
+    ...readOnlyControl,
+    ...requiredControl,
+    ...helperTextControl,
+    ...disabledControl,
+    ...errorMissingValueControl,
+    ...fullWidthControl,
+    ...minItemsSelectionControl,
+    ...maxItemsSelectionControl,
+    'default-values': {
+      name: 'Default Values',
+      control: { type: 'object' },
+    },
+    readonly: {
+      name: 'Read Only',
+      control: { type: 'boolean' },
+    },
+    ...overrideRenderItemControl,
+    ...itemsSourceControl,
+    ...directionControl,
+    ...errorMessageIconControl,
+    ...defaultValueMissingControl,
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  data: [
+    { value: 'itemId1', label: 'data item 1' },
+    { value: 'itemId2', label: 'data item 2' },
+    { value: 'itemId3', label: 'data item 3' },
+    { value: 'itemId4', label: 'data item 4' },
+  ],
+  itemsSource: 'children',
+  'data-errormessage-value-missing': 'Please fill out this field.',
+};