gatsby-core-theme 44.0.18 → 44.0.20

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [44.0.20](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.0.19...v44.0.20) (2025-04-18)
+
+
+### Bug Fixes
+
+* fix test ([596cfa4](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/596cfa4980e551c8bdf73bb114647cfd70a168e4))
+* image constant height ([e2e4821](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/e2e482171a6e3801193847ece33f8bd94bbf8251))
+
+## [44.0.19](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.0.18...v44.0.19) (2025-04-17)
+
+
+### Bug Fixes
+
+* add  new responsive image hook ([8babdf9](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/8babdf982267920bb3a0fd7550616b4d19768c57))
+* images dimension ([a7fd8ad](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/a7fd8adad91158e619593feece5be1361737dca3))
+* more dynamic responsive images ([406971a](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/406971aaaec6543e74933e79a7a66851b8ea3048))
+* small fix ([5e19d57](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/5e19d5713a9a30893c4eaf04e35c95cbc06d9d5d))
+* small fix ([b65c9a1](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/b65c9a1dde8680ffcc3fad11359f46420027069d))
+
+
+* Merge branch 'tm-4326-images-picture' into 'master' ([d6e62ba](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/d6e62ba00d60f74b2652d286950900d5d9eb8f33))
+
 ## [44.0.18](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.0.17...v44.0.18) (2025-04-15)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "44.0.18",
+  "version": "44.0.20",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

package/src/components/molecules/carousel/default-slide/index.js

@@ -1,28 +1,28 @@
 /* eslint-disable react/forbid-prop-types */
 /* eslint-disable arrow-body-style */
+/* eslint-disable react/no-danger */
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import LazyImage from '~hooks/lazy-image';
-import { imagePrettyUrl, getAltText } from '~helpers/getters';
+import ResponsiveImages from '~hooks/responsive-images';
+import {  getAltText } from '~helpers/getters';
 import styles from './default-slide.module.scss';
 
 const Slide = ({
   item = {},
-  imageSizes = { width: 675, height: 930 },
   slideTitle = '',
   hideCaptions = false,
 }) => {
   return (
     <>
       {item.title && !hideCaptions && <span className={styles.title || ''}>{item.title}</span>}
-      {item.image && (
-        <LazyImage
+       {item.image && (
+        <ResponsiveImages
+          src={item?.image}
+          breakpointKey='sliders'
           className={styles.image || ''}
-          src={imagePrettyUrl(item.image, imageSizes.width, imageSizes.height)}
           alt={getAltText(item?.image_object, item.title || slideTitle)}
-          width={imageSizes.width}
-          height={imageSizes.height}
+          
         />
       )}
       {item.content && (
@@ -43,7 +43,6 @@ Slide.propTypes = {
     label: PropTypes.string,
   }),
   hideCaptions: PropTypes.bool,
-  imageSizes: PropTypes.shape({ width: PropTypes.any, height: PropTypes.any }),
   slideTitle: PropTypes.string,
 };
 

package/src/components/organisms/head/index.js

@@ -55,6 +55,7 @@ const HeadData = ({ page = {}, siteInfo }) => {
       {page.meta_robots && process.env.GATSBY_ACTIVE_ENV !== 'development' && (
         <meta name="robots" content={page.meta_robots.join()} />
       )}
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
 
       {page.robot_options && <meta name="robots" content={getRobotOptions(page.robot_options)} />}
 

package/src/constants/responsiveBreakpoints.js

@@ -0,0 +1,26 @@
+/* eslint-disable import/prefer-default-export */
+export const responsiveBreakpoints = {
+    sliders: {
+        mobile: {
+            media: "(max-width: 767px)",
+            width: 304,
+            height: 158,
+        },
+        // tablet: {
+        //     media: "(min-width: 768px) and (max-width: 1023px)",
+        //     width: 675,
+        //     height: 930,
+        // },
+        // laptop: {
+        //     media: "(min-width: 1024px) and (max-width: 1439px)",
+        //     width: 675,
+        //     height: 930,
+        // },
+        desktop: {
+            media: "(min-width: 768px)",
+            width: 675,
+            height: 352,
+        },
+    },
+};
+

package/src/hooks/lazy-image/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import PropTypes from 'prop-types';
 
+
 export default function LazyImage({
   height,
   width,

package/src/hooks/responsive-images/index.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import { imagePrettyUrl } from '~helpers/getters';
+import { responsiveBreakpoints } from '~constants/responsiveBreakpoints';
+
+export default function ResponsiveImages({
+    src,
+    alt = '',
+    style = {},
+    className,
+    loading = 'lazy',
+    breakpointKey = '',
+}) {
+
+    const breakpoints = breakpointKey && responsiveBreakpoints[breakpointKey]
+        ? responsiveBreakpoints[breakpointKey]
+        : {};
+
+    return (
+        <picture>
+            {Object?.entries(breakpoints)?.map(([device, config]) => (
+                <source
+                    key={device}
+                    media={config?.media}
+                    srcSet={imagePrettyUrl(src, config?.width, config?.height)}
+                    width={config?.width}
+                    height={config?.height}
+                />
+            ))}
+            {/* Fallback */}
+            <img
+                loading={loading}
+                className={className}
+                alt={alt === 'null' ? '' : alt}
+                width={breakpoints?.desktop?.width}
+                height={breakpoints?.desktop?.height}
+                src={imagePrettyUrl(src, breakpoints?.desktop?.width, breakpoints?.desktop?.height)}
+                style={style}
+            />
+        </picture>
+    );
+}
+
+ResponsiveImages.propTypes = {
+    src: PropTypes.string,
+    breakpointKey: PropTypes.string,
+    alt: PropTypes.string,
+    style: PropTypes.shape({}),
+    className: PropTypes.string,
+    loading: PropTypes.string,
+}

package/src/hooks/responsive-images/responsive-image.stories.js

@@ -0,0 +1,111 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Stories,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+
+import ResponsiveImages from '.';
+
+export default {
+  title: 'Theme/Hooks/Responsive Image',
+  component: ResponsiveImages,
+  argTypes: {
+
+    style: {
+      name: 'style',
+      type: { name: 'object', required: false },
+      defaultValue: '',
+      description: 'Additional styles for the image.',
+      table: {
+        type: { summary: 'object' },
+        defaultValue: { summary: '' },
+      },
+    },
+    className: {
+      name: 'className',
+      type: { name: 'string', required: false },
+      defaultValue: '',
+      description: 'Additional class name for the image.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' },
+      },
+    },
+    src: {
+      name: 'src',
+      type: { name: 'string', required: false },
+      defaultValue: '',
+      description: 'The image url.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' },
+      },
+    },
+    alt: {
+      name: 'alt',
+      type: { name: 'string', required: false },
+      defaultValue: '',
+      description: 'The image alt attribute.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A component that displays a lazy-loaded `<img>`. Use this component if you have 1 image to lazyload, or if you have images for different breakpoints and want the browser to decide when to serve the images based on the device, bandwidth, etc.',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Subtitle />
+          <Description />
+          <Primary />
+          <Stories />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <ResponsiveImages {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  src: '313df295c19d7c5f137ceda9d0cc5df7.jpeg',
+  breakpointKey: 'sliders',
+  style: { 'border-radius': '1rem' },
+  className: 'my-class',
+  srcSet: '',
+  alt: 'Image Alt',
+};
+
+const ErrorImageTemplate = (args) => <ResponsiveImages {...args} />;
+
+export const BrokenURL = ErrorImageTemplate.bind({});
+BrokenURL.story = {
+  parameters: {
+    docs: {
+      storyDescription:
+        'The example below shows a replacement image if the original image URL is broken (returns a 404). This is useful for showing a default image if you have broken image links. Your default image can be any element, use an `<img>` or React Icon.',
+    },
+  },
+  args: {
+    src: '313df295c19d7c5f137ceda9d0cc5df7.jpeg',
+  breakpointKey: 'sliders',
+  style: { 'border-radius': '1rem' },
+  className: 'my-class',
+  srcSet: '',
+  alt: 'Image Alt',
+  },
+};

package/src/hooks/responsive-images/responsive-image.test.js

@@ -0,0 +1,40 @@
+/* eslint-disable no-restricted-syntax */
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import ResponsiveImages from '.';
+
+describe('ResponsiveImages function', () => {
+  test('ResponsiveImages Component', () => {
+    const { container } = render(
+      <ResponsiveImages
+        src="jackpot-village-logo-9.png"
+        alt="test"
+      />
+    );
+    expect(container.querySelector('img')).toBeTruthy();
+    expect(container.querySelector('img')).toHaveAttribute(
+      'src',
+      'https://cdn.images.com/jackpot-village-logo-9.png'
+    );
+  });
+
+  test('ResponsiveImages Component with width and heigh', () => {
+    const { container } = render(
+      <ResponsiveImages
+        src="jackpot-village-logo-9.png"
+        alt="test"
+        breakpointKey='sliders'
+      />
+    );
+    expect(container.querySelector('img')).toBeTruthy();
+    expect(container.querySelector('img')).toHaveAttribute(
+      'src',
+      'https://cdn.images.com/fit-in/675x352/jackpot-village-logo-9.png'
+    );
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});