@pega/dx-component-builder-sdk 0.1.46 → 0.1.48

package/src/tasks/create/templates/SDK-React/field/Decimal/index.tsx.mustache

@@ -1,13 +1,16 @@
-
-import React from 'react';
-import { TextField } from '@material-ui/core';
-import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
+/* eslint-disable react/no-unused-prop-types */
+import React, { useState, useEffect } from 'react';
+import CurrencyTextField from '@unicef/material-ui-currency-textfield';
 import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
+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 PropTypes from 'prop-types';
 
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
+// Using control from: https://github.com/unicef/material-ui-currency-textfield
 
 // Duplicated runtime code from React SDK
 
@@ -15,55 +18,102 @@ import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 // any default values in config.pros should be set in defaultProps at bottom of this file
 export default function {{COMPONENT_CLASS_NAME}}(props: any) {
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
+    /* onChange, onBlur, */
     readOnly,
     helperText,
     displayMode,
-    hideLabel
+    hideLabel,
+    currencyISOCode = "USD",
+    decimalPrecision = 2,
+    showGroupSeparators = true,
+    testId
   } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = pConn.getStateProps().value;
   const helperTextToDisplay = validatemessage || helperText;
 
+  const [decValue, setDecimalvalue] = useState("");
+  const [theCurrDec, setCurrDec] = useState(".");
+  const [theCurrSep, setCurrSep] = useState(",");
+
+  useEffect(() => {
+    const theSymbols = getCurrencyCharacters(currencyISOCode);
+    setCurrDec(theSymbols.theDecimalIndicator);
+    setCurrSep(theSymbols.theDigitGroupSeparator);
+  }, [currencyISOCode]);
+
+  useEffect(() => {
+    setDecimalvalue(value.toString());
+  }, [value]);
+
+  const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
+  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+
   if (displayMode === 'LABELS_LEFT') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
+  let readOnlyProp = {}; // Note: empty if NOT ReadOnly
+
   if (readOnly) {
-    return <TextInput {...props} />;
+    readOnlyProp = { readOnly: true };
+  }
+
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
+  function decimalOnChange(event) {
+    // update internal value
+    setDecimalvalue(event?.target?.value);
   }
 
+  function decimalOnBlur(event, inValue) {
+    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
+  }
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-     <TextField
-      fullWidth
-      variant={readOnly ? 'standard' : 'outlined'}
-      helperText={helperTextToDisplay}
-      placeholder=''
-      size='small'
-      required={required}
-      disabled={disabled}
-      onChange={onChange}
-      onBlur={!readOnly ? onBlur : undefined}
-      error={status === 'error'}
-      label={label}
-      value={value}
-      type='text'
-{{! pick new delimiteres for mustache }}
+      <CurrencyTextField
+        fullWidth
+        variant={readOnly ? 'standard' : 'outlined'}
+        helperText={helperTextToDisplay}
+        placeholder=''
+        size='small'
+        required={required}
+        disabled={disabled}
+        onChange={decimalOnChange}
+        onBlur={!readOnly ? decimalOnBlur : undefined}
+        error={status === 'error'}
+        label={label}
+        value={decValue}
+        type='text'
+        outputFormat='number'
+        textAlign='left'
+{{! pick new delimiters for mustache }}
 {{=<% %>=}}
-      inputProps={{ inputMode: 'decimal', pattern: '[0-9]*' }}
-<%={{ }}=%>     {{! revert delimiteres for mustache }}
-    />
+        InputProps={{ ...readOnlyProp, inputProps: { ...testProp, value: decValue } }}
+<%={{ }}=%>     {{! revert delimiters for mustache }}
+        currencySymbol=''
+        decimalCharacter={theCurrDec}
+        digitGroupSeparator={showGroupSeparators ? theCurrSep : ''}
+        decimalPlaces={decimalPrecision}
+      />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/field/Decimal-Currency/index.tsx.mustache

@@ -49,7 +49,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     'data-test-id': testId
   };
 
-  const [currValue, setCurrValue] = useState();
+  const [currValue, setCurrValue] = useState("");
   const [theCurrSym, setCurrSym] = useState("$");
   const [theCurrDec, setCurrDec] = useState(".");
   const [theCurrSep, setCurrSep] = useState(",");
@@ -109,10 +109,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
       type='text'
       outputFormat='number'
       textAlign='left'
-{{! pick new delimiteres for mustache }}
+{{! pick new delimiters for mustache }}
 {{=<% %>=}}
       InputProps={{ ...readOnlyProp, inputProps: { ...testProp, value: currValue } }}
-<%={{ }}=%>     {{! revert delimiteres for mustache }}
+<%={{ }}=%>     {{! revert delimiters for mustache }}
       currencySymbol={theCurrSym}
       decimalCharacter={theCurrDec}
       digitGroupSeparator={theCurrSep}

package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/index.tsx.mustache

@@ -88,10 +88,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
       label={label}
       value={value}
       type='number'
-{{! pick new delimiteres for mustache }}
+{{! pick new delimiters for mustache }}
 {{=<% %>=}}
       inputProps={{ ...testProp }}
-<%={{ }}=%>     {{! revert delimiteres for mustache }}
+<%={{ }}=%>     {{! revert delimiters for mustache }}
     />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );

package/src/tasks/create/templates/SDK-React/field/Integer/index.tsx.mustache

@@ -83,10 +83,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
       label={label}
       value={value}
       type='text'
-{{! pick new delimiteres for mustache }}
+{{! pick new delimiters for mustache }}
 {{=<% %>=}}
       inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', ...testProp }}
-<%={{ }}=%>     {{! revert delimiteres for mustache }}
+<%={{ }}=%>     {{! revert delimiters for mustache }}
     />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );

package/src/tasks/create/templates/SDK-React/field/Picklist/demo.stories.jsx.mustache

@@ -39,6 +39,19 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
               return undefined;
             }
           };
+        },
+        getCaseInfo: () => {
+          return {
+            getClassName: () => {
+              return undefined;
+            }
+          };
+        },
+        getLocalizedValue: val => {
+          return val;
+        },
+        getLocaleRuleNameFromKeys: () => {
+          return undefined;
         }
       };
     }

package/src/tasks/create/templates/SDK-React/field/Picklist/index.tsx.mustache

@@ -24,7 +24,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     label,
     required,
     disabled,
-    placeholder,
     value = '',
     datasource = [],
     validatemessage,
@@ -34,21 +33,38 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     helperText,
     displayMode,
     hideLabel,
-    onRecordChange
+    onRecordChange,
+    fieldMetadata
   } = props;
+  let { placeholder } = props;
+  placeholder = placeholder || 'Select...';
   const [options, setOptions] = useState<Array<IOption>>([]);
   const helperTextToDisplay = validatemessage || helperText;
 
   const thePConn = getPConnect();
   const actionsApi = thePConn.getActionsApi();
   const propName = thePConn.getStateProps().value;
+  const className = thePConn.getCaseInfo().getClassName();
+  const refName = propName?.slice(propName.lastIndexOf('.') + 1);
 
   useEffect(() => {
-    const optionsList = Utils.getOptionList(props, getPConnect().getDataObject());
-    optionsList.unshift({ key: 'Select', value: 'Select...' });
+    const list = Utils.getOptionList(props, getPConnect().getDataObject());
+    const optionsList = [...list];
+    optionsList.unshift({ key: placeholder, value: placeholder });
     setOptions(optionsList);
   }, [datasource]);
 
+  const metaData = Array.isArray(fieldMetadata)
+    ? fieldMetadata.filter((field) => field?.classID === className)[0]
+    : fieldMetadata;
+
+  let displayName = metaData?.datasource?.propertyForDisplayText;
+  displayName = displayName?.slice(displayName.lastIndexOf('.') + 1);
+  const localeContext = metaData?.datasource?.tableType === 'DataPage' ? 'datapage' : 'associated';
+  const localeClass = localeContext === 'datapage' ? '@baseclass' : className;
+  const localeName = localeContext === 'datapage' ? metaData?.datasource?.name : refName;
+  const localePath = localeContext === 'datapage' ? displayName : '';
+
   let readOnlyProp = {};
 
   if (displayMode === 'LABELS_LEFT') {
@@ -70,7 +86,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
   };
 
   const handleChange = evt => {
-    const selectedValue = evt.target.value === 'Select' ? '' : evt.target.value;
+    const selectedValue = evt.target.value === placeholder ? '' : evt.target.value;
     handleEvent(actionsApi, 'changeNblur', propName, selectedValue);
     if (onRecordChange) {
       onRecordChange(evt);
@@ -85,23 +101,27 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
       fullWidth
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
-      placeholder={placeholder}
+      placeholder={thePConn.getLocalizedValue(placeholder)}
       size='small'
       required={required}
       disabled={disabled}
       onChange={!readOnly ? handleChange : undefined}
       error={status === 'error'}
       label={label}
-      value={value === '' && !readOnly ? 'Select' : value}
+      value={value === '' && !readOnly ? placeholder : value}
       select
-{{! pick new delimiteres for mustache }}
+{{! pick new delimiters for mustache }}
 {{=<% %>=}}
       InputProps={{ ...readOnlyProp, ...testProp }}
-<%={{ }}=%>     {{! revert delimiteres for mustache }}
+<%={{ }}=%>     {{! revert delimiters for mustache }}
     >
       {options.map((option: any) => (
         <MenuItem key={option.key} value={option.key}>
-          {option.value}
+          {thePConn.getLocalizedValue(
+            option.value,
+            localePath,
+            thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
+          )}
         </MenuItem>
       ))}
     </TextField>

package/src/tasks/create/templates/SDK-React/field/Text/index.tsx.mustache

@@ -69,10 +69,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
       error={status === 'error'}
       label={label}
       value={value}
-{{! pick new delimiteres for mustache }}
+{{! pick new delimiters for mustache }}
 {{=<% %>=}}
       InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
-<%={{ }}=%>     {{! revert delimiteres for mustache }}
+<%={{ }}=%>     {{! revert delimiters for mustache }}
     />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );

package/src/tasks/create/templates/SDK-React/field/Text-Email/index.tsx.mustache

@@ -66,7 +66,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
       label={label}
       value={value}
       type='email'
-{{! pick new delimiteres for mustache }}
+{{! pick new delimiters for mustache }}
 {{=<% %>=}}
       InputProps={{
         startAdornment: (
@@ -76,7 +76,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
         ),
         inputProps: { ...testProp }
       }}
-<%={{ }}=%>     {{! revert delimiteres for mustache }}
+<%={{ }}=%>     {{! revert delimiters for mustache }}
     />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );

package/src/tasks/create/templates/SDK-React/field/Text-Input/index.tsx.mustache

@@ -69,10 +69,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
       error={status === 'error'}
       label={label}
       value={value}
-{{! pick new delimiteres for mustache }}
+{{! pick new delimiters for mustache }}
 {{=<% %>=}}
       InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
-<%={{ }}=%>     {{! revert delimiteres for mustache }}
+<%={{ }}=%>     {{! revert delimiters for mustache }}
     />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );

package/src/tasks/create/templates/SDK-React/field/Text-Paragraph/index.tsx.mustache

@@ -73,10 +73,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
       error={status === 'error'}
       label={label}
       value={value}
-{{! pick new delimiteres for mustache }}
+{{! pick new delimiters for mustache }}
 {{=<% %>=}}
       InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
-<%={{ }}=%>     {{! revert delimiteres for mustache }}
+<%={{ }}=%>     {{! revert delimiters for mustache }}
     />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );

package/src/tasks/create/templates/SDK-React/field/Text-Phone/index.tsx.mustache

@@ -60,12 +60,13 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
           error={status === 'error'}
           label={label}
           value={value}
-          {{! pick new delimiteres for mustache }}
+          {{! pick new delimiters for mustache }}
           {{=<% %>=}}
           InputProps={{
-            readOnly: true
+            readOnly: true,
+            inputProps: { ...testProp }
           }}
-          <%={{ }}=%>     {{! revert delimiteres for mustache }}
+          <%={{ }}=%>     {{! revert delimiters for mustache }}
           disableDropdown={disableDropdown}
         />
         </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
@@ -101,10 +102,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
       error={status === 'error'}
       label={label}
       value={value}
-{{! pick new delimiteres for mustache }}
+{{! pick new delimiters for mustache }}
 {{=<% %>=}}
       InputProps={{ ...testProp }}
-<%={{ }}=%>     {{! revert delimiteres for mustache }}
+<%={{ }}=%>     {{! revert delimiters for mustache }}
     />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );

package/src/tasks/create/templates/SDK-React/field/Text-URL/index.tsx.mustache

@@ -24,6 +24,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     onChange,
     onBlur,
     readOnly,
+    testId,
     helperText,
     displayMode,
     hideLabel
@@ -42,6 +43,12 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     return <TextInput {...props} />;
   }
 
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     <TextField
@@ -58,6 +65,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
       error={status === 'error'}
       label={label}
       value={value}
+    {{! pick new delimiters for mustache }}
+    {{=<% %>=}}
+      InputProps={{ inputProps: { ...testProp } }}
+    <%={{ }}=%>     {{! revert delimiters for mustache }}
     />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );

package/src/tasks/create/templates/SDK-React/field/TimeOfDay/config.json.mustache

@@ -0,0 +1,135 @@
+{
+  "name": "{{COMPONENT_KEY}}",
+  "label": "{{COMPONENT_LABEL}}",
+  "description": "{{DESCRIPTION}}",
+  "organization": "{{ORGANIZATION}}",
+  "version": "{{VERSION}}",
+  "library": "{{LIBRARY}}",
+  "allowedApplications": {{{ALLOWEDAPPS}}},
+  "componentKey": "{{COMPONENT_KEY}}",
+  "type": "{{TYPE}}",
+  "subtype": {{{SUB_TYPE}}},
+  "icon": "images/pz-date-time-active.svg",
+  "properties": [
+    {
+      "name": "label",
+      "label": "Field label",
+      "format": "TEXT",
+      "required": true
+    },
+    {
+      "name": "readOnly",
+      "label": "Edit mode",
+      "format": "READONLY"
+    },
+    {
+      "format": "SELECT",
+      "name": "clockFormat",
+      "label": "Clock",
+      "defaultValue": "use locale",
+      "source": [
+        {
+          "key": 0,
+          "value": "use locale"
+        },
+        {
+          "key": 12,
+          "value": "12 hours"
+        },
+        {
+          "key": 24,
+          "value": "24 hours"
+        }
+      ]
+    },
+    {
+      "name": "withSeconds",
+      "label": "Display Seconds",
+      "format": "BOOLEAN"
+    },
+    {
+      "label": "Input settings",
+      "format": "GROUP",
+      "visibility": "(!readOnly = true)",
+      "properties": [
+        {
+          "format": "SELECT",
+          "name": "pickerInterval",
+          "label": "Time picker",
+          "defaultValue": "30",
+          "source": [
+            {
+              "key": "5",
+              "value": "5 min"
+            },
+            {
+              "key": "10",
+              "value": "10 min"
+            },
+            {
+              "key": "15",
+              "value": "15 min"
+            },
+            {
+              "key": "20",
+              "value": "20 min"
+            },
+            {
+              "key": "30",
+              "value": "30 min"
+            },
+            {
+              "key": "60",
+              "value": "1 hr"
+            }
+          ]
+        },
+        {
+          "name": "helperText",
+          "label": "Helper text",
+          "format": "TEXT"
+        }
+      ]
+    },
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "required",
+          "label": "Required",
+          "format": "REQUIRED",
+          "visibility": "(!readOnly = true)"
+        },
+        {
+          "name": "disabled",
+          "label": "Disabled",
+          "format": "DISABLED",
+          "visibility": "(!readOnly = true)"
+        },
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY"
+        }
+      ]
+    },
+    {
+      "label": "Advanced",
+      "format": "GROUP",
+      "collapsible": true,
+      "properties": [
+        {
+          "name": "testId",
+          "label": "Test ID",
+          "format": "TEXT",
+          "ignorePattern": "[^-_\\p{N}\\p{L}]",
+          "includeAnnotations": false
+        }
+      ]
+    }
+  ],
+  "defaultConfig": {
+    "label": "@L $this.label"
+  }
+}

package/src/tasks/create/templates/SDK-React/field/{TimeofDay → TimeOfDay}/index.tsx.mustache

@@ -26,7 +26,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     readOnly,
     helperText,
     displayMode,
-    hideLabel
+    hideLabel,
+    testId
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -42,6 +43,12 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     return <TextInput {...props} />;
   }
 
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
   const handleChange = date => {
     const theValue = date && date.isValid() ? date.format('HH:mm') : null;
     onChange({ value: theValue });
@@ -79,6 +86,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
           format='hh:mm a'
           value={timeValue}
           onChange={handleChange}
+      {{! pick new delimiters for mustache }}
+      {{=<% %>=}}
+          InputProps={{ inputProps: { ...testProp } }}
+      <%={{ }}=%>     {{! revert delimiters for mustache }}
         />
       </MuiPickersUtilsProvider>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>

package/src/tasks/create/templates/SDK-React/template/DETAILS/index.tsx.mustache

@@ -48,10 +48,12 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
     });
   }
 
-{{! pick new delimiteres for mustache }}
-{{=<% %>=}}
+
 
   return (
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
     <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ""}>
       {showHighlightedData && highlightedDataArr.length > 0 && (
         <Grid container spacing={1} style={{ padding: "0 0 1em" }}>
@@ -70,10 +72,12 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
         ))}
       </Grid>
     </FieldGroup>
+<%={{ }}=%>     {{! revert delimiters for mustache }}
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
 
-<%={{ }}=%>     {{! revert delimiteres for mustache }}
+
 
 {{COMPONENT_CLASS_NAME}}.defaultProps = {
   label: undefined,

package/src/tasks/create/templates/SDK-React/template/DETAILS-region/index.tsx.mustache

@@ -5,7 +5,7 @@ import FieldGroup from "@pega/react-sdk-components/lib/components/designSystemEx
 import createPConnectComponent from "@pega/react-sdk-components/lib/bridge/react_pconnect";
 
 // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-import StyledYourOrgRequiredDxilDetailsWrapper from "./styles";
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper from "./styles";
 
 // Duplicated runtime code from React SDK
 
@@ -48,10 +48,12 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
     });
   }
 
-   {{! pick new delimiteres for mustache }}
-{{=<% %>=}}
+
 
   return (
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
     <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ""}>
       {showHighlightedData && highlightedDataArr.length > 0 && (
         <Grid container spacing={1} style={{ padding: "0 0 1em" }}>
@@ -70,10 +72,12 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
         ))}
       </Grid>
     </FieldGroup>
+<%={{ }}=%>     {{! revert delimiters for mustache }}
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
 
-<%={{ }}=%>     {{! revert delimiteres for mustache }}
+
 
 {{COMPONENT_CLASS_NAME}}.defaultProps = {
   label: undefined,