Update Gen 2 React with BuilderBlocks CustomHero component

packages/sdks-tests/src/snippet-tests/custom-child.spec.ts

@@ -40,10 +40,7 @@ test.describe('Div with Hero class, and text', () => {
     const builderBlock = page.locator('div.builder-block').first();
     await expect(builderBlock).toBeVisible();
 
-    const column1Text = page.locator('text=This is text from your component');
-    await expect(column1Text).toBeVisible();
-
-    const column2Text = page.locator('text=This is Builder text');
-    await expect(column2Text).toBeVisible();
+    const componentText = page.locator('text=This is text from your component');
+    await expect(componentText).toBeVisible();
   });
 });

packages/sdks/snippets/react/src/components/CustomHero.tsx

@@ -1,34 +1,40 @@
-import { RegisteredComponent } from '@builder.io/sdk-react';
-import { ReactNode } from 'react';
+import {
+  Blocks,
+  BuilderBlock,
+  RegisteredComponent,
+} from '@builder.io/sdk-react';
 
 interface CustomHeroProps {
-  children: ReactNode;
+  content: BuilderBlock[];
+  builderBlock: BuilderBlock;
 }
 
 const CustomHero = (props: CustomHeroProps) => {
   return (
     <>
-      <div>This is text from your component</div>
+      <h2>This is text from your component</h2>
 
-      {props.children}
+      <Blocks
+        blocks={props.content}
+        parent={props.builderBlock.id}
+        path="content"
+      />
     </>
   );
 };
 
 export const customHeroInfo: RegisteredComponent = {
-  component: CustomHero,
   name: 'CustomHero',
-  inputs: [],
-  canHaveChildren: true,
-  defaultChildren: [
+  component: CustomHero,
+  shouldReceiveBuilderProps: {
+    builderBlock: true,
+  },
+  inputs: [
     {
-      '@type': '@builder.io/sdk:Element',
-      component: {
-        name: 'Text',
-        options: {
-          text: 'This is Builder text',
-        },
-      },
+      name: 'content',
+      type: 'uiBlocks',
+      hideFromUI: true,
+      defaultValue: [],
     },
   ],
 };