Update new component panel so that long component names take up 2 columns. Reorder component sections and components

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte

@@ -188,6 +188,7 @@
           {#each category.children as component}
             <div
               class="component"
+              class:wide={component.name?.length > 15}
               class:selected={selectedIndex === orderMap[component.component]}
               on:click={() => addComponent(component.component)}
               on:mouseover={() => (selectedIndex = null)}
@@ -226,7 +227,7 @@
   .component {
     background-color: var(--spectrum-global-color-gray-200);
     border-radius: 4px;
-    height: 72px;
+    height: 76px;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -238,6 +239,9 @@
     border: 1px solid var(--spectrum-global-color-gray-200);
     transition: border-color 130ms ease-out;
   }
+  .component.wide {
+    grid-column: span 2;
+  }
   .component.selected,
   .component:hover {
     border-color: var(--spectrum-global-color-blue-400);

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/componentStructure.json

@@ -26,6 +26,26 @@
       "dynamicfilter"
     ]
   },
+  {
+    "name": "Basic",
+    "icon": "TextParagraph",
+    "children": [
+      "heading",
+      "text",
+      "button",
+      "tag",
+      "spectrumcard",
+      "cardstat",
+      "divider",
+      "image",
+      "link",
+      "icon",
+      "embed",
+      "markdownviewer",
+      "backgroundimage",
+      "embeddedmap"
+    ]
+  },
   {
     "name": "Form",
     "icon": "Form",
@@ -39,23 +59,15 @@
       "optionsfield",
       "booleanfield",
       "longformfield",
-      "datetimefield",
       "attachmentfield",
-      "relationshipfield",
       "daterangepicker",
-      "multifieldselect",
       "jsonfield",
+      "relationshipfield",
+      "datetimefield",
+      "multifieldselect",
       "s3upload"
     ]
   },
-  {
-    "name": "Card",
-    "icon": "Card",
-    "children": [
-      "spectrumcard",
-      "cardstat"
-    ]
-  },
   {
     "name": "Chart",
     "icon": "GraphBarVertical",
@@ -63,27 +75,9 @@
       "bar",
       "line",
       "area",
+      "candlestick",
       "pie",
-      "donut",
-      "candlestick"
-    ]
-  },
-  {
-    "name": "Elements",
-    "icon": "TextParagraph",
-    "children": [
-      "heading",
-      "text",
-      "button",
-      "tag",
-      "divider",
-      "image",
-      "backgroundimage",
-      "link",
-      "icon",
-      "embed",
-      "markdownviewer",
-      "embeddedmap"
+      "donut"
     ]
   }
 ]