@pega/dx-component-builder-sdk 0.23.13 → 0.23.15

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyTestText/index.tsx

@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types';
+import { Input } from '@pega/cosmos-react-core';
+
+import type { PConnFieldProps } from './PConnProps';
+
+import StyledPegaDxilMyTestTextWrapper from './styles';
+
+// interface for props
+interface PegaDxilMyTestTextProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+
+}
+
+// interface for StateProps object
+interface StateProps {
+  value: string;
+  hasSuggestions: boolean;
+}
+
+// Duplicated runtime code from Constellation Design System Component
+
+// props passed in combination of props from property panel (config.json) and run time props from Constellation
+// any default values in config.pros should be set in defaultProps at bottom of this file
+export default function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
+  const { getPConnect, value, placeholder, disabled, readOnly, required, label, hideLabel, testId } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const stateProps = pConn.getStateProps() as StateProps;
+  const propName: string = stateProps.value;
+
+  const handleOnChange = (event: any) => {
+    const { value: updatedValue } = event.target;
+    actions.updateFieldValue(propName, updatedValue);
+  };
+
+  return (
+    <StyledPegaDxilMyTestTextWrapper>
+      <Input
+        type='text'
+        value={value}
+        label={label}
+        labelHidden={hideLabel}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        required={required}
+        onChange={handleOnChange}
+        testId={testId}
+      />
+    </StyledPegaDxilMyTestTextWrapper>
+  );
+};
+
+PegaDxilMyTestText.defaultProps = {
+  value: '',
+  placeholder: '',
+  disabled: false,
+  readOnly: false,
+  required: false,
+  testId: ''
+};
+
+PegaDxilMyTestText.propTypes = {
+  label: PropTypes.string,
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+  getPConnect: PropTypes.func.isRequired,
+  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  testId: PropTypes.string
+};

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyTestText/mock.ts

@@ -0,0 +1,15 @@
+
+// @ts-nocheck
+export const configProps = {
+  value: '',
+  label: 'Text Sample',
+  placeholder: 'Text Placeholder',
+  helperText: 'Text Helper Text',
+  testId: 'Text-12345678',
+  hasSuggestions: false
+};
+
+export const stateProps = {
+  value: '.TextSample',
+  hasSuggestions: false
+};

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyTestText/styles.ts

@@ -0,0 +1,15 @@
+
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
+
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyBoolean/demo.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<typeof PegaDxilMyBoolean> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyBoolean>;
 
-export const BasePegaDxilMyBoolean: Story = (args) => {
+export const BasePegaDxilMyBoolean: Story = args => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -35,12 +35,16 @@ export const BasePegaDxilMyBoolean: Story = (args) => {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
             },
-            triggerFieldChange: () => { /* nothing */}
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
         getValidationApi: () => {
           return {
-            validate: () => { /* nothing */}
+            validate: () => {
+              /* nothing */
+            }
           };
         }
       };
@@ -60,5 +64,5 @@ BasePegaDxilMyBoolean.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyBoolean/index.tsx

@@ -2,28 +2,28 @@ import { useState, useEffect } from 'react';
 import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText } from '@material-ui/core';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
-import StyledPegaDxilMyBooleanWrapper from './styles';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import StyledPegaDxilMyBooleanWrapper from './styles';
 
 interface PegaDxilMyBooleanProps extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on this componentName
   value?: boolean;
   // eslint-disable-next-line react/no-unused-prop-types
   caption?: string;
+  trueLabel?: string;
+  falseLabel?: string;
 }
 
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
     getPConnect,
-    label,
     value = false,
     readOnly,
     testId,
@@ -33,7 +33,9 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
     helperText,
     validatemessage,
     displayMode,
-    hideLabel
+    hideLabel,
+    trueLabel,
+    falseLabel
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -50,11 +52,11 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
   }, [value]);
 
   if (displayMode === 'LABELS_LEFT') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value.toString()} />;
+    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value.toString()} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} variant='stacked' />;
   }
 
   const handleChange = event => {
@@ -62,7 +64,7 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
   };
 
   const handleBlur = event => {
-    thePConn.getValidationApi().validate(event.target.checked, ''); // 2nd arg empty string until typedef marked correctly as optional
+    thePConn.getValidationApi().validate(event.target.checked);
   };
 
   let theCheckbox = <Checkbox color='primary' disabled={disabled} />;
@@ -75,20 +77,20 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
 
   return (
     <StyledPegaDxilMyBooleanWrapper>
-    <FormControl required={required} error={status === 'error'}>
-      <FormGroup>
-        <FormControlLabel
-          control={theCheckbox}
-          checked={checked}
-          onChange={!readOnly ? handleChange : undefined}
-          onBlur={!readOnly ? handleBlur : undefined}
-          label={caption}
-          labelPlacement='end'
-          data-test-id={testId}
-        />
-      </FormGroup>
-      <FormHelperText>{helperTextToDisplay}</FormHelperText>
-    </FormControl>
+      <FormControl required={required} error={status === 'error'}>
+        <FormGroup>
+          <FormControlLabel
+            control={theCheckbox}
+            checked={checked}
+            onChange={!readOnly ? handleChange : undefined}
+            onBlur={!readOnly ? handleBlur : undefined}
+            label={caption}
+            labelPlacement='end'
+            data-test-id={testId}
+          />
+        </FormGroup>
+        <FormHelperText>{helperTextToDisplay}</FormHelperText>
+      </FormControl>
     </StyledPegaDxilMyBooleanWrapper>
   );
 }

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyCurrency/demo.stories.tsx

@@ -7,14 +7,14 @@ import { configProps, fieldMetadata } from './mock';
 window.PCore = {
   ...window.PCore,
   getEnvironmentInfo: (): any => {
-  return {
-    getUseLocale: () => {
-      return 'en-GB';
-    },
-    getLocale: () => {
-      return 'en-GB';
-    }
-  };
+    return {
+      getUseLocale: () => {
+        return 'en-GB';
+      },
+      getLocale: () => {
+        return 'en-GB';
+      }
+    };
 }
 };
 
@@ -27,7 +27,7 @@ const meta: Meta<typeof PegaDxilMyCurrency> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyCurrency>;
 
-export const BasePegaDxilMyCurrency: Story = (args) => {
+export const BasePegaDxilMyCurrency: Story = args => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -41,7 +41,9 @@ export const BasePegaDxilMyCurrency: Story = (args) => {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue?.toString());
             },
-            triggerFieldChange: () => {/* nothing */}
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
         getStateProps: () => {
@@ -60,7 +62,7 @@ export const BasePegaDxilMyCurrency: Story = (args) => {
     }
   };
 
-  return <PegaDxilMyCurrency {...props} {...args} />
+  return <PegaDxilMyCurrency {...props} {...args} />;
 };
 
 BasePegaDxilMyCurrency.args = {
@@ -73,5 +75,5 @@ BasePegaDxilMyCurrency.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyCurrency/index.tsx

@@ -19,7 +19,6 @@ interface PegaDxilMyCurrencyProps extends PConnFieldProps {
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 export default function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDate/demo.stories.tsx

@@ -9,21 +9,21 @@ window.PCore = {
   ...window.PCore,
   getLocaleUtils: (): any => {
     return {
-      getLocaleValue: (value) => {
+      getLocaleValue: value => {
         return value;
       }
-    }
+    };
   },
   getEnvironmentInfo: (): any => {
-  return {
-    getUseLocale: () => {
-      return 'en-GB';
-    },
-    getLocale: () => {
-      return 'en-GB';
-    }
-  };
- }
+    return {
+      getUseLocale: () => {
+        return 'en-GB';
+      },
+      getLocale: () => {
+        return 'en-GB';
+      }
+    };
+  }
 };
 
 const meta: Meta<typeof PegaDxilMyDate> = {
@@ -35,7 +35,7 @@ const meta: Meta<typeof PegaDxilMyDate> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyDate>;
 
-export const BasePegaDxilMyDate: Story = (args) => {
+export const BasePegaDxilMyDate: Story = args => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -47,7 +47,9 @@ export const BasePegaDxilMyDate: Story = (args) => {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
             },
-            triggerFieldChange: () => {/* nothing */}
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
         getStateProps: () => {
@@ -60,7 +62,7 @@ export const BasePegaDxilMyDate: Story = (args) => {
     }
   };
 
-  return <PegaDxilMyDate {...props} {...args} />
+  return <PegaDxilMyDate {...props} {...args} />;
 };
 
 BasePegaDxilMyDate.args = {
@@ -73,5 +75,5 @@ BasePegaDxilMyDate.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDate/index.tsx

@@ -16,11 +16,9 @@ interface PegaDxilMyDateProps extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
 }
 
-
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 export default function PegaDxilMyDate(props: PegaDxilMyDateProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const TextInput = getComponentFromMap('TextInput');
@@ -96,27 +94,27 @@ export default function PegaDxilMyDate(props: PegaDxilMyDateProps) {
   return (
     <StyledPegaDxilMyDateWrapper>
       <MuiPickersUtilsProvider utils={DayjsUtils}>
-    <KeyboardDatePicker
-      disableToolbar
-      variant='inline'
-      inputVariant='outlined'
-      placeholder={dateFormatInfo.dateFormatStringLC}
-      format={dateFormatInfo.dateFormatString}
-      mask={dateFormatInfo.dateFormatMask}
-      fullWidth
-      autoOk
-      required={required}
-      disabled={disabled}
-      error={status === 'error'}
-      helperText={helperTextToDisplay}
-      size='small'
-      label={label}
-      value={value || null}
-      onChange={handleChange}
-      onBlur={!readOnly ? onBlur : undefined}
-      onAccept={handleAccept}
-      InputProps={{ ...testProp }}
-    />
+        <KeyboardDatePicker
+          disableToolbar
+          variant='inline'
+          inputVariant='outlined'
+          placeholder={dateFormatInfo.dateFormatStringLC}
+          format={dateFormatInfo.dateFormatString}
+          mask={dateFormatInfo.dateFormatMask}
+          fullWidth
+          autoOk
+          required={required}
+          disabled={disabled}
+          error={status === 'error'}
+          helperText={helperTextToDisplay}
+          size='small'
+          label={label}
+          value={value || null}
+          onChange={handleChange}
+          onBlur={!readOnly ? onBlur : undefined}
+          onAccept={handleAccept}
+          InputProps={{ ...testProp }}
+        />
      </MuiPickersUtilsProvider>
     </StyledPegaDxilMyDateWrapper>
   );

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDateTime/demo.stories.tsx

@@ -4,19 +4,18 @@ import type { Meta, StoryObj } from '@storybook/react';
 import PegaDxilMyDateTime from './index';
 import { configProps, stateProps } from './mock';
 
-
 window.PCore = {
   ...window.PCore,
   getEnvironmentInfo: (): any => {
-  return {
-    getUseLocale: () => {
-      return 'en-GB';
-    },
-    getLocale: () => {
-      return 'en-GB';
-    }
-  };
-}
+    return {
+      getUseLocale: () => {
+        return 'en-GB';
+      },
+      getLocale: () => {
+        return 'en-GB';
+      }
+    };
+  }
 };
 
 const meta: Meta<typeof PegaDxilMyDateTime> = {
@@ -28,7 +27,7 @@ const meta: Meta<typeof PegaDxilMyDateTime> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyDateTime>;
 
-export const BasePegaDxilMyDateTime: Story = (args) => {
+export const BasePegaDxilMyDateTime: Story = args => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -40,7 +39,9 @@ export const BasePegaDxilMyDateTime: Story = (args) => {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
             },
-            triggerFieldChange: () => {/* nothing */}
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
         getStateProps: () => {
@@ -53,7 +54,7 @@ export const BasePegaDxilMyDateTime: Story = (args) => {
     }
   };
 
-  return <PegaDxilMyDateTime {...props} {...args} />
+  return <PegaDxilMyDateTime {...props} {...args} />;
 };
 
 BasePegaDxilMyDateTime.args = {
@@ -66,5 +67,5 @@ BasePegaDxilMyDateTime.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDateTime/index.tsx

@@ -12,11 +12,9 @@ interface PegaDxilMyDateTimeProps extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
 }
 
-
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 export default function PegaDxilMyDateTime(props: PegaDxilMyDateTimeProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const TextInput = getComponentFromMap('TextInput');
@@ -88,26 +86,26 @@ export default function PegaDxilMyDateTime(props: PegaDxilMyDateTimeProps) {
   return (
     <StyledPegaDxilMyDateTimeWrapper>
       <MuiPickersUtilsProvider utils={DayjsUtils}>
-    <KeyboardDateTimePicker
-      variant='inline'
-      inputVariant='outlined'
-      fullWidth
-      autoOk
-      required={required}
-      disabled={disabled}
-      placeholder={`${dateFormatInfo.dateFormatStringLC} hh:mm a`}
-      format={`${dateFormatInfo.dateFormatString} hh:mm a`}
-      mask={`${dateFormatInfo.dateFormatMask} __:__ _m`}
-      minutesStep={5}
-      error={status === 'error'}
-      helperText={helperTextToDisplay}
-      size='small'
-      label={label}
-      value={value || null}
-      onChange={handleChange}
-      onAccept={handleAccept}
-      data-test-id={testId}
-    />
+        <KeyboardDateTimePicker
+          variant='inline'
+          inputVariant='outlined'
+          fullWidth
+          autoOk
+          required={required}
+          disabled={disabled}
+          placeholder={`${dateFormatInfo.dateFormatStringLC} hh:mm a`}
+          format={`${dateFormatInfo.dateFormatString} hh:mm a`}
+          mask={`${dateFormatInfo.dateFormatMask} __:__ _m`}
+          minutesStep={5}
+          error={status === 'error'}
+          helperText={helperTextToDisplay}
+          size='small'
+          label={label}
+          value={value || null}
+          onChange={handleChange}
+          onAccept={handleAccept}
+          data-test-id={testId}
+        />
      </MuiPickersUtilsProvider>
     </StyledPegaDxilMyDateTimeWrapper>
   );

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDecimal/demo.stories.tsx

@@ -7,15 +7,15 @@ import { configProps, fieldMetadata } from './mock';
 window.PCore = {
   ...window.PCore,
   getEnvironmentInfo: (): any => {
-  return {
-    getUseLocale: () => {
-      return 'en-GB';
-    },
-    getLocale: () => {
-      return 'en-GB';
-    }
-  };
-}
+    return {
+      getUseLocale: () => {
+        return 'en-GB';
+      },
+      getLocale: () => {
+        return 'en-GB';
+      }
+    };
+  }
 };
 
 const meta: Meta<typeof PegaDxilMyDecimal> = {
@@ -27,7 +27,7 @@ const meta: Meta<typeof PegaDxilMyDecimal> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyDecimal>;
 
-export const BasePegaDxilMyDecimal: Story = (args) => {
+export const BasePegaDxilMyDecimal: Story = args => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -41,7 +41,9 @@ export const BasePegaDxilMyDecimal: Story = (args) => {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue?.toString());
             },
-            triggerFieldChange: () => {/* nothing */}
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
         getStateProps: () => {
@@ -60,7 +62,7 @@ export const BasePegaDxilMyDecimal: Story = (args) => {
     }
   };
 
-  return <PegaDxilMyDecimal {...props} {...args} />
+  return <PegaDxilMyDecimal {...props} {...args} />;
 };
 
 BasePegaDxilMyDecimal.args = {
@@ -73,6 +75,5 @@ BasePegaDxilMyDecimal.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };
-

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDecimal/index.tsx

@@ -3,7 +3,7 @@ import CurrencyTextField from '@unicef/material-ui-currency-textfield';
 
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
-import { format } from "@pega/react-sdk-components/lib/components/helpers/formatters";
+import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import StyledPegaDxilMyDecimalWrapper from './styles';
@@ -20,7 +20,6 @@ interface PegaDxilMyDecimalProps extends PConnFieldProps {
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 export default function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyEmail/demo.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<typeof PegaDxilMyEmail> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyEmail>;
 
-export const BasePegaDxilMyEmail: Story = (args) => {
+export const BasePegaDxilMyEmail: Story = args => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -33,8 +33,12 @@ export const BasePegaDxilMyEmail: Story = (args) => {
         }
       };
     },
-    onChange: (event) => { setValue(event.target.value); },
-    onBlur: () => { return configProps.value; }
+    onChange: event => {
+      setValue(event.target.value);
+    },
+    onBlur: () => {
+      return configProps.value;
+    }
   };
   return <PegaDxilMyEmail {...props} {...args} />;
 };
@@ -49,5 +53,5 @@ BasePegaDxilMyEmail.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };