@descope/web-components-ui 3.5.1 → 3.7.0

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

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

@@ -0,0 +1,131 @@
+import { componentName } from '../src/components/button-selection-group-fields/descope-button-selection-group';
+import {
+  sizeControl,
+  labelControl,
+  requiredControl,
+  readOnlyControl,
+  helperTextControl,
+  disabledControl,
+  errorMissingValueControl,
+  fullWidthControl,
+  directionControl,
+  overrideRenderItemControl,
+  itemsSourceControl,
+  errorMessageIconAttrs,
+  errorMessageIconControl,
+  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,
+  'helper-text': helperText,
+  'default-value': defaultValue,
+  'data-errormessage-value-missing': customErrorMissingValue,
+  data,
+  itemsSource,
+  overrideRenderItem,
+  'allow-deselect': allowDeselect,
+  errorMsgIcon,
+}) => {
+  let serializedData;
+
+  try {
+    serializedData = JSON.stringify(data);
+  } catch (e) {
+    // do nothing
+  }
+
+  return `
+  <descope-button-selection-group
+    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 ?? ''}"
+    ${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-selection-group>
+`;
+};
+
+export default {
+  component: componentName,
+  title: 'descope-button-selection-group',
+  decorators: [
+    (story, { args }) => {
+      setTimeout(() => {
+        const ele = document.querySelector('descope-button-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,
+    'default-value': {
+      name: 'Default Value',
+      control: { type: 'text' },
+    },
+    'allow-deselect': {
+      name: 'Allow Deselect',
+      control: { type: 'boolean' },
+    },
+    readonly: {
+      name: 'Read Only',
+      control: { type: 'boolean' },
+    },
+    ...overrideRenderItemControl,
+    ...itemsSourceControl,
+    ...directionControl,
+    ...errorMessageIconControl,
+    ...defaultValueMissingControl,
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  data: [
+    { value: '1', label: 'data item 1' },
+    { value: '2', label: 'data item 2' },
+    { value: '3', label: 'data item 3' },
+    { value: '4', label: 'data item 4' },
+  ],
+  itemsSource: 'children',
+  'data-errormessage-value-missing': 'Please fill out this field.',
+};

package/stories/descope-calendar.stories.js

@@ -0,0 +1,115 @@
+import { componentName } from '../src/components/descope-date-field/descope-calendar';
+import { withForm } from './helpers';
+import {
+  sizeControl,
+  fullWidthControl,
+  directionControl,
+  disabledControl,
+  readOnlyControl,
+  requiredControl,
+  borderedControl,
+  textAlignControl,
+  errorMissingValueControl,
+} from './commonControls';
+
+const Template = ({
+  size,
+  bordered,
+  direction,
+  required,
+  disabled,
+  readonly,
+  'initial-value': initialValue,
+  'initial-month': initialMonth,
+  'initial-year': initialYear,
+  'years-range': yearsRange,
+  'full-width': fullWidth,
+  'data-errormessage-value-missing': customErrorMessage,
+  'calendar-months': dataMonths,
+  'calendar-weekdays': dataWeekdays,
+  'calendar-label-today': dataLabelToday,
+  'calendar-label-submit': dataLabelCalendarSubmit,
+  'calendar-label-cancel': dataLabelCalendarCancel,
+}) => `
+      <descope-calendar
+        size="${size}"
+        bordered="${bordered}"
+        disabled="${disabled || false}"
+        initial-month="${initialMonth || ''}"
+        initial-year="${initialYear || ''}"
+        initial-value="${initialValue || ''}"
+        readonly="${readonly || false}"
+        required="${required || false}"
+        full-width="${fullWidth || false}"
+        data-errormessage-value-missing="${customErrorMessage || ''}"
+        st-host-direction="${direction ?? ''}"
+        years-range="${yearsRange || ''}"
+        calendar-months="${dataMonths || ''}"
+        calendar-weekdays="${dataWeekdays || ''}"
+        calendar-label-today="${dataLabelToday || ''}"
+        calendar-label-submit="${dataLabelCalendarSubmit || ''}"
+        calendar-label-cancel="${dataLabelCalendarCancel || ''}"
+      ></descope-calendar>
+  `;
+
+export default {
+  component: componentName,
+  title: 'descope-calendar',
+  decorators: [
+    (story, { args }) => {
+      setTimeout(() => {
+        const calendar = document.querySelector('descope-calendar');
+        calendar.addEventListener('month-changed', (e) => console.log('month changed', e.detail));
+        calendar.addEventListener('year-changed', (e) => console.log('year changed', e.detail));
+        calendar.addEventListener('day-changed', (e) => console.log('day changed', e.detail));
+        calendar.addEventListener('date-submit', (e) => console.log('submit', e.detail));
+        calendar.addEventListener('date-cancel', (e) => console.log('cancel', e.detail));
+      });
+      return story();
+    },
+    withForm,
+  ],
+  argTypes: {
+    ...sizeControl,
+    ...fullWidthControl,
+    ...disabledControl,
+    ...readOnlyControl,
+    ...requiredControl,
+    ...borderedControl,
+    ...errorMissingValueControl,
+    ...directionControl,
+    ...textAlignControl,
+    'initial-value': {
+      name: 'Initial Value',
+      control: { type: 'text' },
+    },
+    'initial-year': {
+      name: 'Initial Year',
+      control: { type: 'number' },
+    },
+    'initial-month': {
+      name: 'Initial Month',
+      control: { type: 'number' },
+    },
+    'years-range': {
+      name: 'Years Range',
+      control: { type: 'text' },
+    },
+    'calendar-months': {
+      name: 'Custom Months',
+      control: { type: 'text' },
+    },
+    'calendar-weekdays': {
+      name: 'Custom Weekdays',
+      control: { type: 'text' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  bordered: true,
+  size: 'md',
+  'years-range': '2000-2050',
+};

package/stories/descope-checkbox.stories.js

@@ -0,0 +1,74 @@
+import { componentName } from '../src/components/boolean-fields/descope-checkbox';
+import { toggleDefaultErrorMessageValueMissingDecorator, withForm } from './helpers';
+import {
+  labelControl,
+  sizeControl,
+  fullWidthControl,
+  directionControl,
+  disabledControl,
+  requiredControl,
+  borderedControl,
+  checkboxValueControl,
+  errorMissingValueControl,
+  readOnlyControl,
+  errorMessageIconAttrs,
+  errorMessageIconControl,
+  defaultValueMissingControl,
+} from './commonControls';
+
+const Template = ({
+  label,
+  checked,
+  size,
+  bordered,
+  direction,
+  disabled,
+  required,
+  readonly,
+  'full-width': fullWidth,
+  'data-errormessage-value-missing': customErrorMissingValue,
+  errorMsgIcon,
+}) =>
+  `
+    <descope-checkbox
+      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-checkbox>
+  `;
+
+export default {
+  component: componentName,
+  title: 'descope-checkbox',
+  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-code-snippet.stories.js

@@ -0,0 +1,118 @@
+import { componentName } from '../src/components/descope-code-snippet';
+import { textContentControl } from './commonControls';
+
+const textSamples = {
+  html: `
+  <!-- HTML comment -->
+
+  <div id="myId" class="my-class">
+    <p data-type="paragraph">
+      Snippet 1
+    </p>
+    <label for="myInput">
+      <input id="myInput" type="text"/>
+    </label>
+  </div>
+  `,
+  xml: `
+<Response xmlns="urn:oasis:names:tc:SAML:2.0:protocol" ID="id44273893780247019773985" InResponseTo="_811889ea-3312-48b3-9cdd-02948193487d" Destination="http://localhost:8000/v1/auth/saml/acs?projectId=P2gpW2KNAJabsOajsyop7MO6iMOL&tenantId=T2gzxO43zRDsvq9uMLmc7Ec0yBUS" Version="2.0" IssueInstant="2024-05-28T11:08:10.898Z">
+  <Status xmlns="urn:oasis:names:tc:SAML:2.0:protocol">
+      <StatusCode xmlns="urn:oasis:names:tc:SAML:2.0:protocol" Value="urn:oasis:names:tc:SAML:2.0:status:Success"></StatusCode>
+  </Status>
+  <Issuer xmlns="urn:oasis:names:tc:SAML:2.0:assertion">http://www.okta.com/exke4wdqfgKpAp5TN5d7</Issuer>
+  <Assertion xmlns="urn:oasis:names:tc:SAML:2.0:assertion" Version="2.0" ID="id4427389379724851920862989" IssueInstant="2024-05-28T11:08:10.898Z">
+      <Issuer xmlns="urn:oasis:names:tc:SAML:2.0:assertion">http://www.okta.com/exke4wdqfgKpAp5TN5d7</Issuer>
+      <Subject xmlns="urn:oasis:names:tc:SAML:2.0:assertion">
+          <NameID xmlns="urn:oasis:names:tc:SAML:2.0:assertion">user@email.com</NameID>
+          <SubjectConfirmation xmlns="urn:oasis:names:tc:SAML:2.0:assertion" Method="urn:oasis:names:tc:SAML:2.0:cm:bearer">
+              <SubjectConfirmationData xmlns="urn:oasis:names:tc:SAML:2.0:assertion" NotOnOrAfter="2024-05-28T11:13:10.898Z" Recipient="http://localhost:8000/v1/auth/saml/acs?projectId=P2gpW2KNAJabsOajsyop7MO6iMOL&tenantId=T2gzxO43zRDsvq9uMLmc7Ec0yBUS" InResponseTo="_811889ea-3312-48b3-9cdd-02948193487d"></SubjectConfirmationData>
+          </SubjectConfirmation>
+      </Subject>
+      <Conditions xmlns="urn:oasis:names:tc:SAML:2.0:assertion" NotBefore="2024-05-28T11:03:10.898Z" NotOnOrAfter="2024-05-28T11:13:10.898Z">
+          <AudienceRestriction xmlns="urn:oasis:names:tc:SAML:2.0:assertion">
+              <Audience xmlns="urn:oasis:names:tc:SAML:2.0:assertion">P2gpW2KNAJabsOajsyop7MO6iMOL-T2gzxO43zRDsvq9uMLmc7Ec0yBUS</Audience>
+          </AudienceRestriction>
+      </Conditions>
+  </Assertion>
+</Response>
+  `,
+  css: `
+/* CSS comment */
+
+.my-class {
+  background: lightgreen;
+  border: 1px solid #000;
+  padding: 1em;
+  margin: 0.25em 0.25em;
+  box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
+}
+  `,
+  javascript: `
+  // JS comment 1
+  /* JS comment 2 */
+
+  const myObj = {
+    p1: "bla1",
+    p2: "bla2",
+    p3: {
+      q1: "fff"
+    },
+  };
+
+  console.log('myObj', myObj);
+`,
+  json: `
+{
+  "xd": [
+    {
+      "id": "user@email.com-T2gzxO43zRDsvq9uMLmc7Ec0yBUS",
+      "ty": "saml"
+    }
+  ],
+  "nm": "Doron",
+  "fn": "Doron",
+  "em": "user@email.com",
+  "vem": true,
+  "vph": true,
+  "ts": [
+    "T2gzxO43zRDsvq9uMLmc7Ec0yBUS"
+  ],
+  "saml": true
+}
+  `,
+};
+
+const Template = ({ inline, lang, text, copyButton }) =>
+  `
+    <descope-code-snippet
+      inline="${inline || false}"
+      lang="${lang || ''}"
+      copy-button="${copyButton || false}"
+    >${text || textSamples[lang]}</descope-code-snippet>
+  `;
+
+export default {
+  component: componentName,
+  title: 'descope-code-snippet',
+  argTypes: {
+    ...textContentControl,
+    lang: {
+      name: 'lang',
+      options: ['xml', 'html', 'css', 'javascript', 'json'],
+      control: { type: 'select' },
+    },
+    copyButton: {
+      name: 'copy-button',
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  text: '',
+  inline: false,
+  lang: '',
+  copyButton: false,
+};

package/stories/descope-container.stories.js

@@ -0,0 +1,96 @@
+import { componentName } from '../src/components/descope-container';
+import {
+  boxShadowControl,
+  borderRadiusControl,
+  customHeightControl,
+  customWidthControl,
+  directionControl,
+} from './commonControls';
+import bgImageUrl from './images/game.png';
+
+const Template = ({
+  'vertical-alignment': verticalAlignment,
+  'horizontal-alignment': horizontalAlignment,
+  'vertical-padding': verticalPadding,
+  'horizontal-padding': horizontalPadding,
+  'flex-direction': flexDirection,
+  direction,
+  'space-between': spaceBetween,
+  shadow,
+  'border-radius': borderRadius,
+  'st-host-height': customHeight,
+  'st-host-width': customWidth,
+  'st-background-color': backgroundColor,
+  'st-items-grow': itemsGrow,
+  isBackgroundImage,
+}) => `
+  <descope-container
+    vertical-alignment="${verticalAlignment || ''}"
+    horizontal-alignment="${horizontalAlignment || ''}"
+    vertical-padding="${verticalPadding || ''}"
+    horizontal-padding="${horizontalPadding || ''}"
+    direction="${flexDirection || ''}"
+    st-host-direction="${direction || ''}"
+    space-between="${spaceBetween || ''}"
+    shadow="${shadow || ''}"
+    border-radius="${borderRadius || ''}"
+    st-host-height="${customHeight || ''}"
+    st-host-width="${customWidth || ''}"
+    st-background-color="${backgroundColor || ''}"
+    st-background-image="${isBackgroundImage ? `url(${bgImageUrl})` : ''}"
+    st-items-grow="${itemsGrow || '0'}"
+  >
+    <descope-button variant="contained" size="md" mode="primary">Button</descope-button>
+    <descope-button variant="contained" size="md" mode="secondary">Button</descope-button>
+  </descope-container>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-container',
+  argTypes: {
+    ...boxShadowControl,
+    ...borderRadiusControl,
+    ...customHeightControl,
+    ...customWidthControl,
+    ...directionControl,
+    'vertical-alignment': {
+      name: 'Vertical Alignment',
+      options: ['start', 'center', 'end'],
+      control: { type: 'select' },
+    },
+    'horizontal-alignment': {
+      name: 'Horizontal Alignment',
+      options: ['start', 'center', 'end'],
+      control: { type: 'select' },
+    },
+    'vertical-padding': {
+      name: 'Vertical Padding',
+      options: ['sm', 'md', 'lg'],
+      control: { type: 'select' },
+    },
+    'horizontal-padding': {
+      name: 'Horizontal Padding',
+      options: ['sm', 'md', 'lg'],
+      control: { type: 'select' },
+    },
+    'flex-direction': {
+      name: 'Direction',
+      options: ['row', 'column'],
+      control: { type: 'select' },
+    },
+    'space-between': {
+      name: 'Space Between',
+      options: ['sm', 'md', 'lg'],
+      control: { type: 'select' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  'st-background-color': '',
+  isBackgroundImage: false,
+  'st-items-grow': '0',
+};