Update with changes to image size (#1527)

adobe · Jul 14, 2023 · 39a8e26 · 39a8e26
1 parent 901459c
commit 39a8e26
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/packages/gatsby-theme-aio/src/components/Context/index.js b/packages/gatsby-theme-aio/src/components/Context/index.js
@@ -13,7 +13,8 @@
 import { createContext } from 'react';
 
 const Context = createContext({});
+const TableContext = createContext('');
 
 export const Provider = Context.Provider;
 
-export default Context;
+export {Context as default, TableContext};
diff --git a/packages/gatsby-theme-aio/src/components/Image/index.js b/packages/gatsby-theme-aio/src/components/Image/index.js
@@ -10,11 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import React from 'react';
+import React, {useContext} from 'react';
 import { css } from '@emotion/react';
 import { DESKTOP_SCREEN_WIDTH } from '../../utils';
+import {TableContext} from "../Context";
 
 export const Image = (props) => {
+  const {isTable} = useContext(TableContext);
   // Check if gatsby-remark-images-remote processing was skipped
   if (!props.src || props.src.default || props.src.endsWith('.svg') || props.src.endsWith('.gif') || !props.loading) {
     // Defaults to same as gatsby-remark-images-remote loading config
@@ -40,7 +42,8 @@ export const Image = (props) => {
           alt={props.alt}
           className="gatsby-resp-image-image"
           css={css`
-            width: 100%;
+             max-width: ${isTable ? '100%' : ''};
+            width: ${isTable ? '' : '100%'};
             opacity: 1;
             transition: opacity 0.5s;
           `}

diff --git a/packages/gatsby-theme-aio/src/components/Table/index.js b/packages/gatsby-theme-aio/src/components/Table/index.js
@@ -15,6 +15,7 @@ import { css } from '@emotion/react';
 import PropTypes from 'prop-types';
 import '@spectrum-css/table';
 import { MOBILE_SCREEN_WIDTH, useParentSize } from '../../utils';
+import {TableContext} from '../Context';
 
 const Table = ({ children, css: cssOverrides, columnWidths, ...props }) => {
   const tableRef = useRef(null);
@@ -121,6 +122,8 @@ const Tr = ({ children, ...props }) => {
 };
 
 const Td = ({ children, ...props }) => {
+  const [isTable, setIsTable] = useState(true);
+
   return (
     <td
       className="spectrum-Table-cell"
@@ -134,7 +137,7 @@ const Td = ({ children, ...props }) => {
         css={css`
           max-width: ${props.cellWidth}px;
         `}>
-        {children}
+        <TableContext.Provider value={{ isTable, setIsTable }}>{children}</TableContext.Provider>
       </div>
     </td>
   );