refactor!: change auto to thumbnails for consistency

Author: lihbr

DOCUMENTATION.md

@@ -446,15 +446,15 @@ Displays an image field, image manipulation can be performed through the `imgixP
 
 {% image document.data.image, { widths: "defaults" } %}
 
-{% image document.data.imageWithResponsiveViews, { widths: "auto" } %}
+{% image document.data.imageWithResponsiveViews, { widths: "thumbnails" } %}
 
 {% image document.data.image, { widths: [500, 1000, 1500] } %}
 
 {% image document.data.image, { pixelDensities: "defaults" } %}
 
 {% image document.data.image, { pixelDensities: [3, 4] } %}
 
-{% image document.data.image, { imgixParams: { sat: 100 }, widths: "auto", class: "block p-5", loading: "lazy" } %}
+{% image document.data.image, { imgixParams: { sat: 100 }, widths: "thumbnails", class: "block p-5", loading: "lazy" } %}
 ```
 
 Renders to:

src/shortcodes.ts

@@ -164,7 +164,7 @@ export const image = (
 						| NonNullable<
 								Parameters<typeof prismicH.asImageWidthSrcSet>[1]
 						  >["widths"]
-						| "auto"
+						| "thumbnails"
 						| "defaults";
 					pixelDensities?:
 						| NonNullable<
@@ -205,20 +205,10 @@ export const image = (
 					);
 				}
 
-				if (widths === "auto") {
-					return prismicH.asImageWidthSrcSet(imageField, imgixParams);
-				} else {
-					// Remove potential thumbnails when using manual widths
-					const { url, dimensions, alt, copyright } = imageField;
-
-					return prismicH.asImageWidthSrcSet(
-						{ url, dimensions, alt, copyright },
-						{
-							...imgixParams,
-							widths: widths === "defaults" ? widthSrcSetDefaults : widths,
-						},
-					);
-				}
+				return prismicH.asImageWidthSrcSet(imageField, {
+					...imgixParams,
+					widths: widths === "defaults" ? widthSrcSetDefaults : widths,
+				});
 			} else if (pixelDensities) {
 				return prismicH.asImagePixelDensitySrcSet(imageField, {
 					...imgixParams,

src/types.ts

@@ -104,7 +104,7 @@ export type PrismicPluginOptionsBase = {
 	 *
 	 * @remarks
 	 * Consider configuring image widths within your content type definition and
-	 * using `widths="auto"` instead to give content writers the ability to crop
+	 * using `widths="thumbnails"` instead to give content writers the ability to crop
 	 * images in the editor.
 	 * @defaultValue `@prismicio/helpers` defaults
 	 */

test/shortcodes-image.test.ts

@@ -24,6 +24,13 @@ test("returns a valid image tag with an accessible default alt value", (t) => {
 	);
 });
 
+test("renders image field with provided alt value", (t) => {
+	t.is(
+		image()({ ...imageField, alt: "foo" }, { alt: "bar" }),
+		'<img alt="bar" src="https://example.com/" />',
+	);
+});
+
 test("returns a valid image tag with class", (t) => {
 	t.is(
 		image()(imageField, "foo"),
@@ -52,7 +59,7 @@ test("returns a valid image tag with width-based `srcset`", (t) => {
 	);
 });
 
-test("returns a valid image tag with auto width-based `srcset`", (t) => {
+test("returns a valid image tag with thumbnails width-based `srcset`", (t) => {
 	t.is(
 		image()(
 			{
@@ -65,7 +72,7 @@ test("returns a valid image tag with auto width-based `srcset`", (t) => {
 					},
 				},
 			} as ImageField<"foo">,
-			{ imgixParams: { sat: 100 }, widths: "auto" },
+			{ imgixParams: { sat: 100 }, widths: "thumbnails" },
 		),
 		'<img alt="foo" src="https://example.com/?sat=100" srcset="https://example.com/?sat=100&width=10 10w, https://example.com/?sat=100&width=100 100w" />',
 	);