feat: Handle imgProps.style in Image component

whitespace-se · Jul 17, 2023 · db14132 · db14132
1 parent 0faa226
commit db14132
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/packages/gatsby-theme-wordpress-basic/package.json b/packages/gatsby-theme-wordpress-basic/package.json
@@ -82,7 +82,7 @@
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@gatsbyjs/reach-router": "^1.3.6",
-    "@wsui/base": "^0.8.2",
+    "@wsui/base": "^0.8.3",
     "gatsby": "^3.14.3",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
@@ -99,7 +99,7 @@
     "@storybook/react-vite": "^7.0.12",
     "@storybook/testing-library": "^0.1.0",
     "@whitespace/storybook-addon-html": "^5.1.1",
-    "@wsui/base": "^0.8.2",
+    "@wsui/base": "^0.8.3",
     "gatsby": "^3.14.3",
     "prettier": "^2.4.1",
     "react": "^17.0.0",

diff --git a/packages/gatsby-theme-wordpress-basic/src/wsui/components/Image.jsx b/packages/gatsby-theme-wordpress-basic/src/wsui/components/Image.jsx
@@ -1,6 +1,11 @@
 /** @jsx jsx */
 import { jsx, css, useTheme } from "@emotion/react";
-import { Link, TypographyBlock, useComponentWidth } from "@wsui/base";
+import {
+  Link,
+  TypographyBlock,
+  parseStyle,
+  useComponentWidth,
+} from "@wsui/base";
 import Img from "gatsby-image";
 
 export default function Image({
@@ -13,7 +18,7 @@ export default function Image({
   creditProps = {},
   estimatedWidth = 320,
   height,
-  imgProps = {},
+  imgProps: { style: imgStyle, ...imgRestProps } = {},
   linkProps = {},
   linkTo,
   maxWidth,
@@ -46,6 +51,7 @@ export default function Image({
         <Img
           css={css`
             border-radius: ${theme.getLength(borderRadius)};
+            ${parseStyle(imgStyle, theme)}
           `}
           fluid={{
             src,
@@ -60,7 +66,7 @@ export default function Image({
             alt,
           }}
           alt={alt}
-          {...imgProps}
+          {...imgRestProps}
         />
       </Link>
       {!!(caption || credit) && !hideCaption && (