New Custom Component Checklist

• Page code of component will be 'cst-${componentName}'.
• Deep/Hard Copy the bindable properties as if we change something in component file it will also change actual variable. Example:
  @bindable dataObj

  this.dataObj = {\}

  Object.assign(this.dataObj,dataObj)
• Change the names of bindable properties which are getting used in view to 'mdl'+ ${bindable proprety name} because same name overrides. Example:
  @bindable dataObj

  this.mdlDataObj = dataObj
• Convert the CSS file to SAAS file.
• For theming and pageLabels, check if 'window.SharedFunctionsCls' is there then call those methods.
• Add all the color variables in root with their color values.
• Bindable properties names:
  • For data:
    • If obj take name as, 'item'
    • If array take name as, 'items'
  • For options take name as 'options'
• position : typically has "top/ right/ bottom/ left/ center" values
• style: typically has HTML style properties (all css properties)
• Normal attributes override json schema
• Global level option to open/close help icon details
• All custom elements can be used by common attributes like 'schema, schema-prop, schema-value'
• Test children works in same style as child i.e. if we give array/icons with options or javascript
• Test for no, min and large data.
• Test for component responsiveness.
• Page code of component will be 'cst-${componentName}'.
• Use disabled property as external property so that change can be handled.
• Test colors & text contrast with different themes.
• Test design with different container sizes.
• Check logging, security, performance & flexibility
• multi template design
• no label or other hardcodes
• Help manual (context sensitive)