Merge branch 'main' into custom-components-svelte

Author: uttej-vsk

packages/react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @builder.io/react
 
+## 8.0.10
+
+### Patch Changes
+
+- 372746e: Feat: add title option for images
+
 ## 8.0.9
 
 ### Patch Changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/react",
-  "version": "8.0.9",
+  "version": "8.0.10",
   "description": "",
   "keywords": [],
   "main": "dist/builder-react.cjs.js",

packages/react/src/blocks/Image.tsx

@@ -325,6 +325,7 @@ class ImageComponent extends React.Component<any, { imageLoaded: boolean; load:
                   } as any)
                 : null)}
               alt={this.props.altText}
+              title={this.props.title}
               key={
                 Builder.isEditing
                   ? (typeof this.image === 'string' && this.image.split('?')[0]) || undefined
@@ -548,6 +549,11 @@ export const Image = withBuilder(ImageComponent, {
       type: 'string',
       helperText: 'Text to display when the user has images off',
     },
+    {
+      name: 'title',
+      type: 'string',
+      helperText: 'Text to display when hovering over the asset',
+    },
     {
       name: 'highPriority',
       type: 'boolean',

packages/sdks-tests/playwright.config.ts

@@ -66,7 +66,7 @@ export default defineConfig({
     /**
      * Increase the default timeout for snippet tests because they're not deterministic.
      */
-    timeout: testType === 'snippet' ? 60000 : 5000,
+    timeout: testType === 'snippet' ? 50000 : 5000,
   },
 
   /* Configure projects for major browsers */

packages/sdks-tests/src/e2e-tests/blocks.spec.ts

@@ -228,6 +228,34 @@ test.describe('Blocks', () => {
 
       await expect(img).not.toHaveAttribute('srcset');
     });
+
+    test('Image title attribute', async ({ page, sdk, packageName }) => {
+      test.skip(checkIsRN(sdk));
+      test.skip(
+        isSSRFramework(packageName),
+        'SSR frameworks get the images from the server so page.route intercept does not work'
+      );
+      const mockImgPath = path.join(mockFolderPath, 'placeholder-img.png');
+      const mockImgBuffer = fs.readFileSync(mockImgPath);
+
+      await page.route('**/*', route => {
+        const request = route.request();
+        if (request.url().includes('cdn.builder.io/api/v1/image')) {
+          return route.fulfill({
+            status: 200,
+            contentType: 'image/png',
+            body: mockImgBuffer,
+          });
+        } else {
+          return route.continue();
+        }
+      });
+
+      await page.goto('/image');
+
+      const img = page.getByTitle('title test');
+      await expect(img).toHaveAttribute('title', 'title test');
+    });
   });
 
   test.describe('Video', () => {

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

@@ -12,6 +12,7 @@ test.describe('Advanced child sub components', () => {
         'gen1-react',
         'svelte',
         'sveltekit',
+        'qwik-city'
       ].includes(packageName)
     );
 
@@ -36,6 +37,7 @@ test.describe('Advanced child sub components', () => {
 
   test('Display content for the clicked tab and hide the other', async ({ page, packageName }) => {
     test.skip(
+
       ![
         'react',
         'angular-16',
@@ -44,6 +46,7 @@ test.describe('Advanced child sub components', () => {
         'gen1-react',
         'svelte',
         'sveltekit',
+        'qwik-city'
       ].includes(packageName)
     );
 

packages/sdks-tests/src/snippet-tests/blueprints-product-details.spec.ts

@@ -3,7 +3,21 @@ import { test } from '../helpers/index.js';
 
 test.describe('Product Details Component', () => {
   test.beforeEach(async ({ page, packageName }) => {
-    test.skip(!['angular-16', 'angular-16-ssr'].includes(packageName));
+    test.skip(
+      ![
+        'angular-16',
+        'angular-16-ssr',
+        'react',
+        'vue',
+        'nuxt',
+        'svelte',
+        'sveltekit',
+        'qwik-city',
+        'react-sdk-next-14-app',
+        'react-sdk-next-pages',
+        'hydrogen',
+      ].includes(packageName)
+    );
     // Visit the page where ProductDetailsComponent is rendered
     await page.goto('/product/category/jacket');
   });
@@ -25,8 +39,6 @@ test.describe('Product Details Component', () => {
     // Verify the image source, alt text, and size
     await expect(image).toHaveAttribute('src', /.+/);
     await expect(image).toHaveAttribute('alt', 'Red Jacket');
-    await expect(image).toHaveAttribute('width', '400');
-    await expect(image).toHaveAttribute('height', '500');
   });
 
   test('should display product copy (description)', async ({ page }) => {

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

@@ -12,6 +12,7 @@ test.describe('Div with Hero class, and text', () => {
         'gen1-react',
         'svelte',
         'sveltekit',
+        'qwik-city'
       ].includes(packageName)
     );
 
@@ -29,6 +30,7 @@ test.describe('Div with Hero class, and text', () => {
         'gen1-react',
         'svelte',
         'sveltekit',
+        'qwik-city'
       ].includes(packageName)
     );
 

packages/sdks-tests/src/snippet-tests/editable-regions.spec.ts

@@ -33,6 +33,7 @@ test.describe('Editable regions in custom components', () => {
         'gen1-react',
         'svelte',
         'sveltekit',
+        'qwik-city'
       ].includes(packageName)
     );
 

packages/sdks-tests/src/specs/image.ts

@@ -87,6 +87,7 @@ export const CONTENT = {
             width: 1880,
             aspectRatio: 0.19,
             altText: 'alt text test',
+            title: 'title test',
           },
         },
         responsiveStyles: {
@@ -289,6 +290,7 @@ export const CONTENT_2 = {
             width: 1880,
             aspectRatio: 0.19,
             altText: 'alt text test',
+            title: 'title test',
           },
         },
         responsiveStyles: {