Components - icons, descriptions and other tidyup

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

@@ -1,8 +1,6 @@
 <script>
   import Item from "./Item.svelte"
   export let components
-
-  console.log("Components: ", components)
 </script>
 
 {#each components as { icon, name, description }}

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

@@ -69,103 +69,27 @@ export default {
         }
       ]
     },
-    {
-      name: 'Form',
-      components: [
-        {
-          name: 'Button',
-          description: 'A basic html button that is ready for styling',
-          icon: 'ri-radio-button-fill',
-          commonProps: {},
-          type: []
-        },
-        {
-          name: 'Icon',
-          description: 'A basic component for displaying icons',
-          icon: 'ri-sun-fill',
-          commonProps: {},
-          type: []
-        },
-        {
-          name: 'Avatar',
-          description: 'A basic component for rendering an avatar',
-          icon: 'ri-user-smile-fill',
-          commonProps: {},
-          type: []
-        },
-        {
-          name: 'Link',
-          description: 'A basic link component for internal and external links',
-          icon: 'ri-link',
-          commonProps: {},
-          type: []
-        }
-      ]
-    },
     {
       name: 'Blocks',
       components: [
         {
-          name: 'Container',
+          name: 'Card',
-          description: 'This component contains things within itself',
+          description: 'A basic card component that can contain content and actions.',
-          icon: 'ri-layout-row-fill',
+          icon: 'ri-layout-bottom-line',
           commonProps: {},
           type: []
         },
         {
-          name: 'Text',
+          name: 'Login',
-          description: 'This is a simple text component',
+          description: 'A component that automatically generates a login screen for your app.',
-          icon: 'ri-t-box-fill',
+          icon: 'ri-login-box-fill',
-          commonProps: {},
-          type: [
-            {
-              _component: '@budibase/standard-components/header',
-              name: 'Headline',
-              icon: 'headline',
-              props: {
-                type: {
-                  type: 'options',
-                  options: [
-                    'h1',
-                    'h2'
-                  ],
-                  'default': 'h1'
-                }
-              }
-            },
-            {
-              _component: '@budibase/standard-components/text',
-              name: 'Paragraph',
-              icon: 'paragraph',
-              props: {}
-            }
-          ]
-        },
-        {
-          name: 'Button',
-          description: 'A basic html button that is ready for styling',
-          icon: 'ri-radio-button-fill',
           commonProps: {},
           type: []
         },
         {
-          name: 'Icon',
+          name: 'Navbar',
-          description: 'A basic component for displaying icons',
+          description: 'A component for handling the navigation within your app.',
-          icon: 'ri-sun-fill',
+          icon: 'ri-navigation-fill',
-          commonProps: {},
-          type: []
-        },
-        {
-          name: 'Avatar',
-          description: 'A basic component for rendering an avatar',
-          icon: 'ri-user-smile-fill',
-          commonProps: {},
-          type: []
-        },
-        {
-          name: 'Link',
-          description: 'A basic link component for internal and external links',
-          icon: 'ri-link',
           commonProps: {},
           type: []
         }
@@ -175,66 +99,16 @@ export default {
       name: 'Data',
       components: [
         {
-          name: 'Container',
+          name: 'Table',
-          description: 'This component contains things within itself',
+          description: 'A component that generates a table from your data.',
-          icon: 'ri-layout-row-fill',
+          icon: 'ri-archive-drawer-fill',
           commonProps: {},
           type: []
         },
         {
-          name: 'Text',
+          name: 'Form',
-          description: 'This is a simple text component',
+          description: 'A component that generates a form from your data.',
-          icon: 'ri-t-box-fill',
+          icon: 'ri-file-edit-fill',
-          commonProps: {},
-          type: [
-            {
-              _component: '@budibase/standard-components/header',
-              name: 'Headline',
-              icon: 'headline',
-              props: {
-                type: {
-                  type: 'options',
-                  options: [
-                    'h1',
-                    'h2'
-                  ],
-                  'default': 'h1'
-                }
-              }
-            },
-            {
-              _component: '@budibase/standard-components/text',
-              name: 'Paragraph',
-              icon: 'paragraph',
-              props: {}
-            }
-          ]
-        },
-        {
-          name: 'Button',
-          description: 'A basic html button that is ready for styling',
-          icon: 'ri-radio-button-fill',
-          commonProps: {},
-          type: []
-        },
-        {
-          name: 'Icon',
-          description: 'A basic component for displaying icons',
-          icon: 'ri-sun-fill',
-          commonProps: {},
-          type: []
-        },
-        {
-          name: 'Avatar',
-          description: 'A basic component for rendering an avatar',
-          icon: 'ri-user-smile-fill',
-          commonProps: {},
-          type: []
-        },
-        {
-          name: 'Link',
-          description: 'A basic link component for internal and external links',
-          icon: 'ri-link',
           commonProps: {},
           type: []
         }