NakedImage class/style is now imgClass/imgStyle. Introduce pictureCla…

…ss/pictureStyle
datocms · Jun 23, 2024 · 802bd85 · 802bd85
1 parent f6f2e65
commit 802bd85
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 27 deletions.
diff --git a/src/components/Image/README.md b/src/components/Image/README.md
@@ -174,8 +174,10 @@ Here's a complete recap of what `responsiveImage` offers:
 | prop               | type                     | default                            | required           | description                                                                                                                                          |
 | ------------------ | ------------------------ | ---------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
 | data               | `ResponsiveImage` object |                                    | :white_check_mark: | The actual response you get from a DatoCMS `responsiveImage` GraphQL query                            ****                                           |
-| class              | string                   | null                               | :x:                | Additional CSS class for image                                                                                                                       |
-| style              | CSS properties           | null                               | :x:                | Additional CSS rules to add to the image                                                                                                             |
+| picture-class      | string                   | null                               | :x:                | Additional CSS class for the root `<picture>` tag                                                                                                    |
+| picture-style      | CSS properties           | null                               | :x:                | Additional CSS rules to add to the root `<picture>` tag                                                                                              |
+| img-class          | string                   | null                               | :x:                | Additional CSS class for the `<img>` tag                                                                                                             |
+| img-style          | CSS properties           | null                               | :x:                | Additional CSS rules to add to the `<img>` tag                                                                                                       |
 | priority           | Boolean                  | false                              | :x:                | Disables lazy loading, and sets the image [fetchPriority](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchPriority) to "high" |
 | sizes              | string                   | undefined                          | :x:                | The HTML5 [`sizes`](https://web.dev/learn/design/responsive-images/#sizes) attribute for the image (will be used `data.sizes` as a fallback)         |
 | use-placeholder    | Boolean                  | true                               | :x:                | Whether the image should use a blurred image placeholder                                                                                             |

diff --git a/src/components/NakedImage/__tests__/__snapshots__/index.test.ts.snap b/src/components/NakedImage/__tests__/__snapshots__/index.test.ts.snap
@@ -29,9 +29,9 @@ exports[`Image minimalDataWithRelativeUrl renders correctly 1`] = `
 `;
 
 exports[`Image passing class and/or style renders correctly 1`] = `
-<picture>
+<picture style="border: 1px solid red;" class="picture-class-name">
   <!---->
-  <source srcset="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=4 3000w"><img src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750" loading="lazy" style="width: 100%; max-width: 750px; height: auto; border: 1px solid red;" class="class-name">
+  <source srcset="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=4 3000w"><img src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750" loading="lazy" style="width: 100%; max-width: 750px; height: auto; border: 1px solid green;" class="img-class-name">
 </picture>
 `;
 

diff --git a/src/components/NakedImage/__tests__/index.test.ts b/src/components/NakedImage/__tests__/index.test.ts
@@ -70,8 +70,10 @@ describe('Image', () => {
       const wrapper = mount(NakedImage, {
         propsData: {
           data: minimalData,
-          class: 'class-name',
-          style: { border: '1px solid red' },
+          pictureClass: 'picture-class-name',
+          pictureStyle: { border: '1px solid red' },
+          imgClass: 'img-class-name',
+          imgStyle: { border: '1px solid green' },
         },
       });
 

diff --git a/src/components/NakedImage/index.ts b/src/components/NakedImage/index.ts
@@ -43,12 +43,30 @@ export const NakedImage = defineComponent({
      **/
     srcSetCandidates: {
       type: Array,
-      validator: (values: any[]): values is number[] =>
+      validator: (values: unknown[]): values is number[] =>
         values.every((value): value is number => {
           return typeof value === 'number';
         }),
       default: () => [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4],
     },
+    /** Additional CSS class for the root `<picture />` tag */
+    pictureClass: {
+      type: String,
+    },
+    /** Additional CSS rules to add to the root `<picture />` tag */
+    pictureStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    /** Additional CSS class for the `<img />` tag */
+    imgClass: {
+      type: String,
+    },
+    /** Additional CSS rules to add to the `<img />` tag */
+    imgStyle: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   setup(_props, { emit, expose }) {
     const loaded = ref(false);
@@ -118,26 +136,33 @@ export const NakedImage = defineComponent({
             }
           : undefined;
 
-    return h('picture', null, [
-      webpSource,
-      regularSource,
-      this.data.src &&
-        h('img', {
-          ref: 'imageRef',
-          src: this.data.src,
-          alt: this.data.alt,
-          onLoad: this.handleLoad,
-          title: this.data.title,
-          fetchpriority: this.priority ? 'high' : undefined,
-          loading: this.priority ? undefined : 'lazy',
-          style: {
-            ...placeholderStyle,
-            ...sizingStyle,
-            ...(this.$attrs.style || {}),
-          },
-          class: this.$attrs.class,
-        }),
-    ]);
+    return h(
+      'picture',
+      {
+        style: this.pictureStyle,
+        class: this.pictureClass,
+      },
+      [
+        webpSource,
+        regularSource,
+        this.data.src &&
+          h('img', {
+            ref: 'imageRef',
+            src: this.data.src,
+            alt: this.data.alt,
+            onLoad: this.handleLoad,
+            title: this.data.title,
+            fetchpriority: this.priority ? 'high' : undefined,
+            loading: this.priority ? undefined : 'lazy',
+            style: {
+              ...placeholderStyle,
+              ...sizingStyle,
+              ...(this.imgStyle || {}),
+            },
+            class: this.imgClass,
+          }),
+      ],
+    );
   },
 });