Use updated js-utils to handle Kinja images (#119)

* update image transforms * Update js-utils lock * Add TypeScript types Co-authored-by: GitHub Action <[email protected]>
Quartz · Jul 20, 2022 · 5b0a144 · 5b0a144
1 parent bd8329e
commit 5b0a144
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 13 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 .DS_Store
 .storybook/build
+.vscode
diff --git a/dist/ColorScheme/ColorScheme.d.ts b/dist/ColorScheme/ColorScheme.d.ts
diff --git a/dist/ColorScheme/ColorScheme.d.ts.map b/dist/ColorScheme/ColorScheme.d.ts.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
 	"devDependencies": {
 		"@babel/core": "^7.12.9",
 		"@quartz/eslint-config-react": "^1.1.5",
-		"@quartz/js-utils": "^1.1.1",
+		"@quartz/js-utils": "^2.0.0",
 		"@quartz/stylelint-config": "^1.2.0",
 		"@storybook/addon-a11y": "^6.1.10",
 		"@storybook/addon-actions": "^6.1.10",

diff --git a/src/components/ColorScheme/ColorScheme.tsx b/src/components/ColorScheme/ColorScheme.tsx
@@ -161,7 +161,7 @@ export default function ColorScheme( props: {
 	 */
 	accent: string,
 
-	 /**
+	/**
 	 * The color used for borders of focused interactive elements, accented
 	 * color blocks, article text links, certain headings, etc. on navigation.
 	 * Defaults to `accent`.

diff --git a/src/components/ResponsiveImage/ResponsiveImage.tsx b/src/components/ResponsiveImage/ResponsiveImage.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Image } from '..';
-import { arrayFromRange, resizeWPImage } from '@quartz/js-utils';
+import { arrayFromRange, resizeImage } from '@quartz/js-utils';
 
 export default function ResponsiveImage( props: {
 	/**
@@ -85,7 +85,7 @@ export default function ResponsiveImage( props: {
 
 	// Map source widths to image URLs
 	const srcSet = srcWidths
-		.map( width => `${resizeWPImage( src, width, aspectRatio * width, true, quality )} ${width}w` )
+		.map( width => `${resizeImage( src, width, aspectRatio * width, true, quality )} ${width}w` )
 		.join();
 
 	// If no `sizes` prop was specified, assume the image has a fixed width
@@ -97,7 +97,7 @@ export default function ResponsiveImage( props: {
 			amp={amp}
 			className={className}
 			sizes={sizes || sizesDefault}
-			src={resizeWPImage( src, fallbackWidth, fallbackHeight )}
+			src={resizeImage( src, fallbackWidth, fallbackHeight )}
 			srcSet={srcSet}
 			fallbackWidth={fallbackWidth}
 			fallbackHeight={fallbackHeight}