Input components and tidyup

packages/builder/src/components/userInterface/ComponentSelectionList.svelte

@@ -95,9 +95,6 @@
     {/each}
   </ul>
   <div class="panel">
-    <!-- <Tab
-      list={selectedCategory}
-      on:selectItem={e => onComponentChosen(e.detail)} /> -->
     <Tab
       list={selectedCategory}
       on:selectItem={e => onComponentChosen(e.detail)}

packages/builder/src/components/userInterface/ItemTab/Item.svelte

@@ -24,14 +24,12 @@
   }
 
   .item-item:hover {
-    /* background: #f5f5f5; */
     background: #fbfbfb;
     border-radius: 5px;
   }
 
   .item-icon {
     flex: 0 0 40px;
-    /* background: #efe9e9; */
     background: #f1f4fc;
     height: 40px;
     border-radius: 5px;

packages/builder/src/components/userInterface/ItemTab/Tab.svelte

@@ -39,5 +39,6 @@
     border: solid 1px #e8e8ef;
     background: white;
     margin-bottom: 20px;
+    cursor: pointer;
   }
 </style>

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -21,7 +21,8 @@ export default {
             {
               _component: '@budibase/standard-components/heading',
               name: 'Headline',
-              icon: 'headline',
+              description: "A component for displaying heading text",
+              icon: "ri-heading",
               props: {
                 type: {
                   type: "options",
@@ -34,7 +35,44 @@ export default {
             {
               _component: '@budibase/standard-components/text',
               name: 'Paragraph',
-              icon: 'paragraph',
+              description: "A component for displaying paragraph text.",
+              icon: 'ri-paragraph',
+              props: {}
+            }
+          ]
+        },
+        {
+          name: 'Input',
+          description: "These components handle user input.",
+          icon: 'ri-edit-box-line',
+          commonProps: {},
+          children: [
+            {
+              _component: "@budibase/standard-components/textfield",
+              name: "Textfield",
+              description: "A textfield component that allows the user to input text.",
+              icon: 'ri-edit-box-line',
+              props: {}  
+            },
+            {
+              _component: "@budibase/standard-components/checkbox",
+              name: "Checkbox",
+              description: "A selectable checkbox component",
+              icon: 'ri-checkbox-line',
+              props: {}  
+            },
+            {
+              _component: "@budibase/standard-components/radiobutton",
+              name: "Radiobutton",
+              description: "A selectable radiobutton component",
+              icon: 'ri-radio-button-line',
+              props: {}  
+            },
+            {
+              _component: "@budibase/standard-components/select",
+              name: "Select",
+              description: "A select component for choosing from different options",
+              icon: 'ri-file-list-line',
               props: {}  
             }
           ]
@@ -48,6 +86,7 @@ export default {
           children: []
         },
         {
+          _component: "@budibase/standard-components/icon",
           name: 'Icon',
           description: 'A basic component for displaying icons',
           icon: 'ri-sun-fill',
@@ -55,13 +94,7 @@ export default {
           children: []
         },
         {
-          name: 'Avatar',
+          _component: "@budibase/standard-components/link",
-          description: 'A basic component for rendering an avatar',
-          icon: 'ri-user-smile-fill',
-          commonProps: {},
-          children: []
-        },
-        {
           name: 'Link',
           description: 'A basic link component for internal and external links',
           icon: 'ri-link',

packages/standard-components/components.json

@@ -103,6 +103,7 @@
 		"props" : {
 			"text": "string",
 			"font": "string",
+			"fontSize": "string",
 			"color": "string",
 			"textAlign": {
 				"type": "options", 
@@ -138,6 +139,42 @@
 		},
 		"tags": ["div", "container"]
 	},
+	"textfield": {
+		"name": "Textfield",
+		"description": "A component that allows the user to input text.",
+		"props": {
+			"label": "string",
+			"value": "string",
+			"onchange": "event"
+		}
+	},
+	"checkbox": {
+		"name": "Checkbox",
+		"description": "A selectable checkbox component",
+		"props": {
+			"label": "string",
+			"checked": "bool",
+			"value": "string",
+			"onchange": "event"
+		}
+	},
+	"radiobutton": {
+		"name": "Radiobutton",
+		"description": "A selectable radiobutton component",
+		"props": {
+			"label": "string",
+			"checked": "bool",
+			"value": "string",
+			"onchange": "event"
+		}	
+	},
+	"icon": {
+		"description": "A HTML icon tag",
+		"props": {
+			"icon": "string",
+			"fontSize": "string" 
+		}
+	},
 	"link": {
 		"description": "an HTML anchor <a> tag",
 		"props": {

packages/standard-components/src/Checkbox.svelte

@@ -0,0 +1,11 @@
+<script>
+  import Input from "./Input.svelte"
+  export let _bb
+
+  export let label = ""
+  export let checked = false
+  export let value = ""
+  export let onchange = () => {}
+</script>
+
+<Input type="checkbox" {_bb} {checked} {label} {value} {onchange} />

packages/standard-components/src/Icon.svelte

@@ -0,0 +1,9 @@
+<script>
+  export let icon = ""
+  export let fontSize = "1em"
+  export let _bb
+
+  $: style = { fontSize }
+</script>
+
+<i class={icon} {style} />

packages/standard-components/src/Input.svelte

@@ -1,7 +1,10 @@
 <script>
+  export let id = ""
   export let value = ""
   export let className = ""
   export let type = "text"
+  export let label = ""
+  export let checked = false
 
   export let _bb
 
@@ -14,4 +17,5 @@
   }
 </script>
 
-<input class={className} {type} {value} on:change={onchange} />
+<label for={id}>{label}</label>
+<input {id} class={className} {type} {value} {checked} on:change={onchange} />

packages/standard-components/src/Radiobutton.svelte

@@ -0,0 +1,11 @@
+<script>
+  import Input from "./Input.svelte"
+  export let _bb
+
+  export let label = ""
+  export let checked = false
+  export let value = ""
+  export let onchange = () => {}
+</script>
+
+<Input type="radio" {_bb} {checked} {label} {value} {onchange} />

packages/standard-components/src/Text.svelte

@@ -7,29 +7,26 @@
   export let formattingTag = ""
 
   export let font = ""
+  export let fontSize = "1em"
   export let textAlign = ""
   export let verticalAlign = ""
   export let color = ""
 
   export let _bb
 
-  let style = ""
-
   const isTag = tag => (formattingTag || "").indexOf(tag) > -1
 
-  $: {
+  $: style = buildStyle({
-    style = buildStyle({
+    font: `${fontSize} ${font}`,
-      font,
+    verticalAlign,
-      verticalAlign,
+    color,
-      color,
+    "text-align": textAlign,
-      "text-align": textAlign,
+    "vertical-align": verticalAlign,
-      "vertical-align": verticalAlign,
+  })
-    })
-  }
 </script>
 
 {#if isTag('none')}
-  <span>{text}</span>
+  <span {style}>{text}</span>
 {:else if isTag('<b>')}
   <b class={className} {style}>{text}</b>
 {:else if isTag('<strong>')}

packages/standard-components/src/Textfield.svelte

@@ -0,0 +1,10 @@
+<script>
+  import Input from "./Input.svelte"
+  export let _bb
+
+  export let label = ""
+  export let value = ""
+  export let onchange = () => {}
+</script>
+
+<Input type="text" {_bb} {label} {value} {onchange} />

packages/standard-components/src/index.js

@@ -3,9 +3,13 @@ export { default as text } from "./Text.svelte"
 export { default as heading } from "./Heading.svelte"
 export { default as input } from "./Input.svelte"
 export { default as select } from "./Select.svelte"
+export { default as textfield } from "./Textfield.svelte"
+export { default as checkbox } from "./Checkbox.svelte"
+export { default as radiobutton } from "./Radiobutton.svelte"
 export { default as option } from "./Option.svelte"
 export { default as button } from "./Button.svelte"
 export { default as login } from "./Login.svelte"
 export { default as saveRecordButton } from "./Templates/saveRecordButton"
 export { default as link } from "./Link.svelte"
 export { default as image } from "./Image.svelte"
+export { default as icon } from "./Icon.svelte"