{ "_lib": "./dist/index.js", "_templates" : { "saveRecordButton" : { "description": "Save record button", "component": "button" } }, "button" : { "name": "Button", "description": "an html <button />", "props": { "contentText": { "type": "string", "default": "Button" }, "className": "string", "disabled": "bool", "onClick": "event", "background": "string", "color": "string", "border": "string", "padding": "string", "hoverColor": "string", "hoverBackground": "string", "hoverBorder": "string" }, "tags": ["layout"], "presets": { "primary": { "contentText": "Primary Button Preset", "color": "papayawhip", "padding": "20px", "background": "blue" }, "secondary": { "contentText": "Secondary Button Preset", "color": "rebeccapurple", "padding": "10px", "background": "#fff", "border": "1px solid red" }, "error": { "contentText": "ERROR", "color": "red", "padding": "10px", "border": "1px solid red" } } }, "login" : { "name": "Login Control", "description": "A control that accepts username, password an also handles password resets", "props" : { "logo": "asset", "loginRedirect": "string", "usernameLabel": {"type":"string", "default": "Username"}, "passwordLabel": {"type":"string", "default": "Password"}, "loginButtonLabel": {"type":"string", "default": "Login"}, "buttonClass": "string", "inputClass": "string" }, "tags": ["login", "credentials", "password", "logon"] }, "input" : { "name": "Input", "description": "An HTML input", "props" : { "value": "string", "type": { "type":"options", "options":[ "text", "password", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "radio", "range", "reset", "search", "submit", "tel", "time", "week"], "default":"text" }, "onChange": "event", "className": "string" }, "tags": ["form"] }, "select" : { "name": "Select", "description": "An HTML <select> (dropdown)", "props" : { "value": "string", "className": "string" } }, "option" : { "name": "Option", "description": "An HTML <option>, to be used with <select>", "children": false, "props" : { "value": "string", "text": "string" } }, "text": { "name": "Text", "description": "stylable block of text", "children": false, "props" : { "text": "string", "font": "string", "color": "string", "textAlign": { "type": "options", "default":"inline", "options": [ "left", "center", "right" ] }, "verticalAlign": { "type": "options", "default":"inline", "options": [ "top", "middle", "bottom" ] }, "formattingTag": { "type": "options", "default":"none", "options": [ "none", "<b> - bold", "<strong> - important", "<i> - italic", "<em> - emphasized", "<mark> - marked text", "<small> - small", "<del> - deleted", "<ins> - inserted", "<sub> - subscript", "<sup> - superscript" ] } }, "tags": ["div", "container"] }, "link": { "description": "an HTML anchor <a> tag", "props": { "url": "string", "openInNewTab": "bool", "text": "string", "color": "string", "hoverColor": "string", "underline": "bool", "fontSize": "string" } }, "image": { "description": "an HTML <img> tag", "props": { "url": "string", "className": "string", "description": "string", "height": "string", "width": "string" } }, "container": { "name": "Container", "description": "An element that contains and lays out other elements. e.g. <div>, <header> etc", "props" : { "className":"string", "onLoad": "event", "type": { "type": "options", "options": [ "article", "aside", "details", "div", "firgure", "figcaption", "footer", "header", "main", "mark", "nav", "paragraph", "summary" ], "default": "div" }, "backgroundColor": "string", "color": "string", "borderWidth": "string", "borderColor": "string", "borderStyle": { "type":"options", "options": [ "none", "solid", "dotted", "dashed", "double", "groove", "ridge", "inset", "outset" ], "default": "none" } }, "container": true, "tags": ["div", "container", "layout"] }, "heading": { "name": "Heading", "description": "An HTML H1 - H6 tag", "props" : { "className":"string", "type": { "type": "options", "default": "h1", "options": ["h1","h2","h3","h4","h5","h6"] } }, "tags": [] }, "thead": { "name": "TableHead", "description": "an HTML <thead> tab", "props" : { "className":"string" } }, "tbody": { "name": "TableBody", "description": "an HTML <tbody> tab", "props" : { "className":"string" } } }