@descope/web-components-ui 3.5.1 → 3.7.0

package/src/components/descope-user-attribute/UserAttributeClass.js

@@ -1,6 +1,7 @@
 import { TextClass } from '@descope-ui/descope-text/class';
 import { ButtonClass } from '@descope-ui/descope-button/class';
 import { BadgeClass } from '@descope-ui/descope-badge/class';
+import { IconClass } from '@descope-ui/descope-icon/class';
 import { injectStyle } from '@descope-ui/common/components-helpers';
 import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
@@ -24,12 +25,12 @@ class RawUserAttribute extends createBaseClass({
           <descope-text st-text-align="auto" data-id="value-text" variant="body1" mode="primary" class="value"></descope-text>
           <div class="btn-wrapper">
             <descope-badge mode="default" bordered="true" size="xs"></descope-badge>
-            <descope-button size="xs" data-id="edit-btn" square="true" variant="link" mode="primary">
-              <slot name="edit-icon"></slot>
-            </descope-button>
-            <descope-button size="xs" data-id="delete-btn" square="true" variant="link" mode="primary">
+            <descope-button size="sm" data-id="delete-btn" variant="link" mode="primary">
               <slot name="delete-icon"></slot>
             </descope-button>
+            <descope-button size="sm" data-id="edit-btn" variant="link" mode="primary">
+              <slot name="edit-icon"></slot>
+            </descope-button>
           </div>
         </div>
       </div>
@@ -48,7 +49,7 @@ class RawUserAttribute extends createBaseClass({
           height: 100%;
           align-items: center;
         }
-        
+
         ::slotted(*) {
           display: flex;
           align-items: center;
@@ -66,6 +67,14 @@ class RawUserAttribute extends createBaseClass({
           justify-content: space-between;
           align-items: center;
           flex-grow: 0;
+          flex-shrink: 0;
+        }
+
+        slot[name="edit-icon"],
+        slot[name="delete-icon"] {
+          display: inline-flex;
+          flex-shrink: 0;
+          align-items: center;
         }
 
         .content-wrapper {
@@ -102,6 +111,7 @@ class RawUserAttribute extends createBaseClass({
 
         .hidden {
           visibility: hidden;
+          width: 0;
         }
 
         descope-text[data-id="label-text"].required:after {
@@ -111,6 +121,7 @@ class RawUserAttribute extends createBaseClass({
 
         :host([readonly="true"]) descope-button {
           visibility: hidden;
+          width: 0;
         }
           `,
       this
@@ -150,6 +161,21 @@ class RawUserAttribute extends createBaseClass({
     this.badge.setAttribute('title', this.badgeTooltipText || this.badgeLabel);
   }
 
+  updateButtonLabel(btnRef, label) {
+    let textSpanEle = btnRef.querySelector('span.btn-label');
+
+    if (label) {
+      if (!textSpanEle) {
+        textSpanEle = document.createElement('span');
+        textSpanEle.classList.add('btn-label');
+        btnRef.appendChild(textSpanEle);
+      }
+      textSpanEle.innerText = label;
+    } else {
+      textSpanEle?.remove();
+    }
+  }
+
   onIsRequiredChange() {
     this.labelText.classList.toggle('required', this.isRequired);
   }
@@ -178,12 +204,26 @@ class RawUserAttribute extends createBaseClass({
     return this.getAttribute('badge-tooltip-text') || '';
   }
 
+  get editButtonLabel() {
+    return this.getAttribute('edit-button-label') || '';
+  }
+
+  get deleteButtonLabel() {
+    return this.getAttribute('delete-button-label') || '';
+  }
+
+  get isDeleteHidden() {
+    return this.getAttribute('hide-delete') === 'true';
+  }
+
   init() {
     this.onLabelChange();
     this.onValueOrPlaceholderChange();
     this.onIsRequiredChange();
     this.onBadgeLabelChange();
     this.onBadgeTooltipTextChange();
+    this.updateButtonLabel(this.editButton, this.editButtonLabel);
+    this.updateButtonLabel(this.deleteButton, this.deleteButtonLabel);
     this.handleDeleteButtonVisibility();
 
     this.deleteButton.addEventListener('click', () =>
@@ -219,11 +259,17 @@ class RawUserAttribute extends createBaseClass({
       'required',
       'badge-label',
       'badge-tooltip-text',
+      'edit-button-label',
+      'delete-button-label',
+      'hide-delete',
     ].concat(super.observedAttributes);
   }
 
   handleDeleteButtonVisibility() {
-    this.deleteButton.classList.toggle('hidden', this.isRequired || !this.value);
+    this.deleteButton.classList.toggle(
+      'hidden',
+      this.isRequired || !this.value || this.isDeleteHidden
+    );
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -243,9 +289,13 @@ class RawUserAttribute extends createBaseClass({
       this.onBadgeLabelChange();
     } else if (name === 'badge-tooltip-text') {
       this.onBadgeTooltipTextChange();
+    } else if (name === 'edit-button-label') {
+      this.updateButtonLabel(this.editButton, this.editButtonLabel);
+    } else if (name === 'delete-button-label') {
+      this.updateButtonLabel(this.deleteButton, this.deleteButtonLabel);
     }
 
-    if (name === 'value' || name === 'required') {
+    if (name === 'value' || name === 'required' || name === 'hide-delete') {
       this.handleDeleteButtonVisibility();
     }
   }
@@ -276,6 +326,7 @@ export const UserAttributeClass = compose(
       contentMinWidth: { ...contentWrapper, property: 'min-width' },
       badgeMaxWidth: { ...badge, property: 'max-width' },
       itemsGap: [{ property: 'gap' }, { ...contentWrapper, property: 'gap' }],
+      iconColor: [{ selector: () => '::slotted(*)', property: IconClass.cssVarList.fill }],
     },
   }),
   draggableMixin,

package/src/theme/components/userAttribute.js

@@ -17,6 +17,7 @@ const userAttribute = {
   [vars.hostMinWidth]: '310px',
   [vars.hostWidth]: '530px',
   [vars.hostMaxWidth]: '100%',
+  [vars.iconColor]: 'currentcolor',
 
   _fullWidth: {
     [vars.hostWidth]: '100%',

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,
+};