EDU-122: Blueprints - Hero - React Gen 2

packages/sdks-tests/src/snippet-tests/blueprints-hero.spec.ts

@@ -0,0 +1,50 @@
+import { expect } from '@playwright/test';
+import { test } from '../helpers/index.js';
+
+test.describe('Hero Section', () => {
+  test.beforeEach(async ({ page, packageName }) => {
+    test.skip(
+      [
+        'react-native-74',
+        'react-native-76-fabric',
+        'solid',
+        'solid-start',
+        'qwik-city',
+        'react-sdk-next-pages',
+        'remix',
+        'hydrogen',
+        'react-sdk-next-14-app',
+        'react-sdk-next-15-app',
+        'nextjs-sdk-next-app',
+        'vue',
+        'nuxt',
+        'svelte',
+        'sveltekit',
+        'angular-16',
+        'angular-16-ssr',
+        'angular-19-ssr',
+        'gen1-react',
+        'gen1-remix',
+        'gen1-next14-pages',
+        'gen1-next15-app',
+      ].includes(packageName)
+    );
+    await page.goto('/marketing-event');
+  });
+
+  test('should display the hero section with title and call-to-action', async ({ page }) => {
+    await page.waitForLoadState('networkidle');
+
+    const heading = page.getByText('Find the best shoes in town');
+    await expect(heading).toBeVisible();
+
+    const ctaButton = page.getByRole('button', { name: 'Buy now' });
+    await expect(ctaButton).toBeVisible();
+  });
+
+  test('should display hero image', async ({ page }) => {
+    const imgInPicture = page.locator('picture img');
+    await expect(imgInPicture).toBeVisible();
+    await expect(imgInPicture).toHaveAttribute('src', /.+/);
+  });
+});

packages/sdks/snippets/react/src/main.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import AnnouncementBar from './routes/AnnouncementBar.tsx';
 import BlogArticle from './routes/blueprints/BlogArticle.tsx';
+import Hero from './routes/blueprints/Hero.tsx';
 import Homepage from './routes/blueprints/homepage.tsx';
 import ProductDetails from './routes/blueprints/ProductDetails.tsx';
 import ProductEditorial from './routes/blueprints/ProductEditorial.tsx';
@@ -51,6 +52,8 @@ const router = createBrowserRouter([
     element: <ProductEditorial />,
   },
   {
+    path: '/marketing-event',
+    element: <Hero />,
     path: '/home',
     element: <Homepage />,
   },

packages/sdks/snippets/react/src/routes/blueprints/Hero.tsx

@@ -0,0 +1,31 @@
+import { BuilderContent, Content, fetchOneEntry } from '@builder.io/sdk-react';
+import { useEffect, useState } from 'react';
+
+const BUILDER_API_KEY = 'ee9f13b4981e489a9a1209887695ef2b';
+const MODEL_NAME = 'collection-hero';
+
+export default function ProductHero() {
+  const [productHero, setProductHero] = useState<BuilderContent | null>(null);
+
+  useEffect(() => {
+    fetchOneEntry({
+      model: MODEL_NAME,
+      apiKey: BUILDER_API_KEY,
+      userAttributes: { urlPath: window.location.pathname },
+    }).then((data) => {
+      setProductHero(data);
+    });
+  }, []);
+
+  return (
+    <>
+      {productHero && (
+        <Content
+          content={productHero}
+          model={MODEL_NAME}
+          apiKey={BUILDER_API_KEY}
+        />
+      )}
+    </>
+  );
+}