gatsby-core-theme 11.0.3 → 11.0.6

package/CHANGELOG.md

@@ -1,3 +1,47 @@
+## [11.0.6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v11.0.5...v11.0.6) (2022-09-02)
+
+
+### Bug Fixes
+
+* update button and author-box ([3eec6da](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3eec6da80b37568a47ead1a15ad1811612b10828))
+* update button component ([60cd4d1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/60cd4d1148517bdd4ef51cc265561b8137cfdcfa))
+* update button component in order to accept props ([25cc1e3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/25cc1e31df9e468be966e3b1a7414e84dc5bace3))
+
+
+* Merge branch 'tm-3024-contact-us' into 'master' ([46e0b23](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/46e0b238e9c0c4da12a90c2dd072e6fc0fb039c7))
+
+## [11.0.5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v11.0.4...v11.0.5) (2022-08-31)
+
+
+### Bug Fixes
+
+* added placeholders for cards v2 module title ([d2ec6d7](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d2ec6d7a05ab6efa4e55378e4fd40401c06e290a))
+* removed log ([49b46e5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/49b46e55cad7686151b4bfdd4f70076d3078f370))
+* tests ([85dcc20](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/85dcc20c53a4ca8b7dd82624bdb226037190ab8e))
+
+
+* Merge branch 'tm-2998-cardsv2-title-placeholders' into 'master' ([4dc5b17](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4dc5b1730b5c70d618a52929cf81610ee9044e82))
+
+## [11.0.4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v11.0.3...v11.0.4) (2022-08-29)
+
+
+### Bug Fixes
+
+* add progress bar in anchor ([14fcbf1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/14fcbf1958dfbf0d4c803a4e97a3c2b01506522b))
+* added aa check in the game card provider linkage ([608de14](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/608de148afd4b5602923484e03fab36eec054a21))
+* added faq module ([bf2a881](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/bf2a881df6138434d52cd678fdf368db2d69eedf))
+* added width and height with image module ([f057ea9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f057ea963adaa33ec84aa937bbe4af984df9f16c))
+* added width and height with image module ([a277de5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a277de55520599c1cac34e3934e69264fb976f3f))
+* anchor minor styling issue ([68eda40](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/68eda40450ae5685be4f481f4cc17f48ae80017d))
+* linked the game provider to the actual page ([7a878be](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7a878bee42bfd06229ae3ff199cd8a3c31ee1b57))
+* removed module intro component and used the content module instead ([a37deeb](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a37deeb398ae347dccf2af01ee2bde80e81fcb86))
+
+
+* Merge branch 'tm-3037-module-intro' into 'master' ([6fc0c6c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6fc0c6c0884522ed0eca6bd944924aedee69f5b5))
+* Merge branch 'tm-2781-link-provider-link-pages' into 'master' ([f799ac5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f799ac5f78f9528f9d18e9e6b241d1729b0949e7))
+* Merge branch 'tm-3038-anchor-progress-bar' into 'master' ([1e05599](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1e055990d3c6058897a6ac752a3999e1c3bb1960))
+* Merge branch 'master' into 'tm-2781-link-provider-link-pages' ([1d55b26](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1d55b264ae377cc9d0a1ed6619067af7dca0e739))
+
 ## [11.0.3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v11.0.2...v11.0.3) (2022-08-24)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "11.0.3",
+  "version": "11.0.6",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "GATSBY_RECAPTCHA_SITEKEY": "6LfoyvMUAAAAAO4nl_MQnqHb4XdHxEiu5cXgIqeB",

package/src/components/atoms/author-box/index.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import { translate, imagePrettyUrl, getAltText } from '~helpers/getters';
 import styles from './author-box.module.scss';
 import LazyImage from '~hooks/lazy-image';
-import Link from '~hooks/link';
+import Button from '~atoms/button';
 import { Context } from '~context/TranslationsProvider';
 
 export default function AuthorBox({ author, preElement = null }) {
@@ -94,13 +94,14 @@ export default function AuthorBox({ author, preElement = null }) {
             />
           </div>
           {author.profile_page_path && (
-            <Link
+            <Button
+              primaryColor={false}
               to={author.profile_page_path}
-              title="Read More"
+              btnText="Read More"
               className={`${styles.button} author-gtm`}
             >
               {translate(translations, 'read_more', 'Read More')}
-            </Link>
+            </Button>
           )}
         </div>
       </div>

package/src/components/atoms/button/index.js

@@ -18,6 +18,7 @@ function Button({
   disabled = false,
   tertiary = false,
   noStyle = false,
+  icon = null,
   gtmClass = '',
 }) {
   const classes = `${styles.ctaBtn} ${primaryColor ? styles.primary : styles.secondary} ${
@@ -37,6 +38,7 @@ function Button({
         disabled={disabled}
       >
         {btnText}
+        {icon && icon}
       </button>
     );
   }
@@ -45,6 +47,7 @@ function Button({
     return (
       <Link className={`${classes} ${gtmClass}`} to={to} title={btnTitle} aria-label={btnTitle}>
         {btnText}
+        {icon && icon}
       </Link>
     );
   }
@@ -60,12 +63,14 @@ function Button({
       rel="nofollow noreferrer"
     >
       {btnText}
+      {icon && icon}
     </a>
   );
 }
 
 Button.propTypes = {
   to: PropTypes.string,
+  icon: PropTypes.func,
   btnText: PropTypes.oneOfType([PropTypes.string, PropTypes.any]),
   primaryColor: PropTypes.bool,
   invertColors: PropTypes.bool,

package/src/components/atoms/faq/faq.module.scss

@@ -0,0 +1,71 @@
+.faqContainer {
+    padding: 0 1.6rem;
+    @include min(tablet) {
+        padding: 0 2.4rem;
+    }
+    .faqItem {
+        display: flex;
+        flex-direction: column;
+        padding: 1rem 1.6rem 1.6rem;
+        background-color: #fff;
+        border-radius: 0.6rem;
+        margin: 1rem 0;
+
+        .title {
+            position: relative;
+            text-align: left;
+            color: var(--color-12);
+            font-size: 1.8rem;
+            font-weight: 700;
+            padding: 1rem 0;
+            outline: none;
+            padding-right: 2.5rem;
+            .icon{
+                display: flex;
+                align-items: center;
+                .circle{
+                    @include flex-align (center, center);
+                    margin-right: 0.5rem;
+                }
+                > span{
+                    display: block;
+                    margin: 0;
+                    margin-right: 2rem;
+                    font-weight: 700;
+                    font-size: 1.8rem;
+                    p, h2, h3, h4 {
+                        margin: 0;
+                        font-weight: 700;
+                        font-size: 1.8rem;
+                    }
+                }                
+            }
+            &:hover,
+            &:focus {
+                outline: none;
+            }
+
+            &:after {
+                transition: 0.5s;
+                @include arrow(black, 0.9rem, down, false, translateY(-50%));
+                position: absolute;
+                right: 0.5rem;
+                top: 50%;
+            }
+
+            &.invertArrow {
+                &:after {
+                    transform: translateY(-50%) rotate(-135deg);
+                }
+            }     
+        }
+
+        .content {
+            @include collapse(0.5s, 500rem);
+            @include flex-direction(column);
+            font-size: 1.6rem;
+            color: var(--color-20);
+            padding: 0;
+        }
+    }
+}

package/src/components/atoms/faq/faq.stories.js

@@ -0,0 +1,92 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+
+import Faq from '.';
+
+export default {
+  title: 'Gatsby-Theme/Atoms/Faq',
+  component: Faq,
+  argTypes: {
+    module: {
+      name: 'module',
+      type: { name: 'object', required: true },
+      defaultValue: null,
+      description: 'The page object.',
+    },
+    openAll: {
+      name: 'openAll',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'This prop opens all sections',
+    },
+    openItem: {
+      name: 'OpenItem',
+      type: { name: 'boolean', required: true },
+      defaultValue: '',
+      description: 'This prop open a sections',
+    },
+    closeOthers: {
+      name: 'closeOthers',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'This prop close all others sections',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A component that gets an object of data and generates divs including keys/values. works as a slider on mobile devices',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <Faq {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  module: {
+    items: [
+      {
+        question: '🍀 Do online casinos need an Irish gambling licence?',
+        answer:
+          'Yes. In 2015 there was an amendment to the Irish Gambling Law to legally be able to provide gambling services to Irish players, the online casino needs a licence. When you play online it is important to do some research before you choose a casino, so that you are sure you choose a good and licensed and regulated one.',
+      },
+      {
+        question: '🍀 Is it legal to gamble in Ireland?',
+        answer: 'Yes, it is legal provided the online casino has the correct license.',
+      },
+      {
+        question: '🍀 How safe are Irish online casinos?',
+        answer:
+          'Online casinos are very safe to use if you do your research. Good online casinos will offer only secure payment options, as well as having additional encryption protocols in place. This is to prevent third parties from getting both your money and your personal data. We always provide information on whether an Irish casino has this or not. ',
+      },
+      {
+        question: '🍀 Can I play at Irish Luck from another country?',
+        answer:
+          'Unfortunately, no. The casino lists and reviews at Irish Luck are aimed for Irish players. Therefore, if you are visiting our website from another country, we suggest that you check out other sites that are localised for your country.',
+      },
+      {
+        question: '🍀 What`s the best online casinos for Irish Players?',
+        answer:
+          'That`s a good question! And that`s also why it`s not the easiest to answer. It depends on what you prefer and what is important to you when you, when have to choose a gambling site. We recommend that you have a look at the toplist on top of this page. It`s always updated with the best casinos right now! Then go from there and see which one speaks the most to you. Good luck!',
+      },
+    ],
+  },
+};

package/src/components/atoms/faq/index.js

@@ -0,0 +1,103 @@
+/* eslint-disable no-return-assign */
+import React, { useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import styles from './faq.module.scss';
+import keygen from '~helpers/keygen';
+
+/* eslint-disable react/no-danger */
+
+const Faq = ({ module, closeAll = false, openItem, closeOthers = false, icon = '' }) => {
+  const { items } = module;
+  const itemRefs = useRef([]);
+  const btnRefs = useRef([]);
+
+  const closeAllItems = () => {
+    for (let i = 0; i < itemRefs.current.length; i += 1) {
+      itemRefs.current[i].classList.remove(styles.active);
+      btnRefs.current[i].classList.remove(styles.invertArrow);
+    }
+  };
+
+  const openSingleItem = (index) => {
+    if (itemRefs.current[index]) {
+      itemRefs.current[index].classList.add(styles.active);
+      btnRefs.current[index].classList.add(styles.invertArrow);
+    }
+  };
+
+  const closeOtherItems = (index) => {
+    for (let i = 0; i < itemRefs.current.length; i += 1) {
+      if (i !== index) {
+        itemRefs.current[i].classList.remove(styles.active);
+        btnRefs.current[i].classList.remove(styles.invertArrow);
+      }
+    }
+  };
+
+  // toggle open/close an item
+  const toggle = (index) => {
+    btnRefs.current[index].classList.toggle(styles.invertArrow);
+    itemRefs.current[index].classList.toggle(styles.active);
+    if (closeOthers) {
+      closeOtherItems(index);
+    }
+  };
+
+  useEffect(() => {
+    if (closeAll) {
+      closeAllItems();
+    }
+  });
+  useEffect(() => {
+    if (openItem) {
+      openSingleItem(openItem - 1);
+    }
+  });
+
+  return (
+    <>
+      <div className={styles.faqContainer}>
+        {items.map((item, index) => (
+          <div key={keygen()} className={styles.faqItem}>
+            <button
+              onClick={() => toggle(index)}
+              className={`${styles.title} faq-gtm`}
+              type="button"
+              ref={(el) => (btnRefs.current[index] = el)}
+            >
+              <span className={styles.icon}>
+                {icon && <span className={styles.circle}>{icon} </span>}
+                <span dangerouslySetInnerHTML={{ __html: item.question }} />
+              </span>
+            </button>
+            <div
+              className={`${styles.content} ${styles.active}`}
+              ref={(el) => (itemRefs.current[index] = el)}
+              dangerouslySetInnerHTML={{ __html: item.answer }}
+            />
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+Faq.propTypes = {
+  module: PropTypes.shape({
+    anchor_label: PropTypes.string,
+    items: PropTypes.arrayOf(
+      PropTypes.shape({
+        title: PropTypes.string,
+        content: PropTypes.string,
+      })
+    ),
+  }).isRequired,
+  closeAll: PropTypes.bool,
+  openItem: PropTypes.number,
+  closeOthers: PropTypes.bool,
+  styles: PropTypes.shape({}),
+  icon: PropTypes.func,
+};
+
+export default Faq;

package/src/components/atoms/iframe/index.js

@@ -30,6 +30,8 @@ const Iframe = ({
       <iframe
         title={title}
         style={{ width: '100%', minHeight, display: 'block' }}
+        width={868}
+        height={454}
         src={src}
         loading={lazyLoad ? 'lazy' : 'eager'}
         frameBorder={frameBorder}

package/src/components/atoms/image/image.module.scss

@@ -10,4 +10,11 @@
   &.align_left {
     @include content-img-align(left, 0);
   }
+
+  img {
+    width: 100%;
+    @include min(tablet) {
+      width: auto;
+    }
+  }
 }

package/src/components/atoms/image/index.js

@@ -11,12 +11,14 @@ const Image = ({ module = {} }) => {
   if (!value) return <></>;
 
   return (
-      <LazyImage
-        src={imagePrettyUrl(value)}
-        alt={alt || 'missing alt'}
-        title={title && title}
-        className={`${styles.imageModule} ${styles[alignment]}`}
-      />
+    <LazyImage
+      src={imagePrettyUrl(value, 912, 333)}
+      alt={alt || 'missing alt'}
+      width={912}
+      height={333}
+      title={title && title}
+      className={`${styles.imageModule} ${styles[alignment]}`}
+    />
   );
 };
 

package/src/components/molecules/header/index.js

@@ -87,7 +87,7 @@ Header.propTypes = {
       path: PropTypes.string,
       updated_at: PropTypes.string,
       created_at: PropTypes.string,
-      reading_time: PropTypes.string,
+      reading_time: PropTypes.number,
       reviewer: PropTypes.string,
       reviewer_id: PropTypes.number,
       author: PropTypes.shape({

package/src/components/molecules/module/index.js

@@ -28,6 +28,8 @@ const Modules = ({ module, page, pageContext }) => {
         return loadable(() => import('~organisms/cards'));
       case 'pros_and_cons':
         return loadable(() => import('~molecules/pros-cons'));
+      case 'faq':
+        return loadable(() => import('~atoms/faq'));
       case 'accordion':
         return loadable(() => import('~organisms/accordion'));
       case 'anchor':
@@ -72,8 +74,7 @@ const Modules = ({ module, page, pageContext }) => {
     '--module-background-color': module.background_color,
   };
 
-  const ModuleIntro =
-    module.module_introduction && loadable(() => import('~molecules/content-intro'));
+  const ModuleIntro = module.module_introduction && loadable(() => import('~molecules/content'));
 
   return (
     ModuleComponent && (
@@ -85,7 +86,7 @@ const Modules = ({ module, page, pageContext }) => {
         } ${styles.module} ${module?.style && styles[module.style]} module`}
       >
         <ModuleTitle module={module} />
-        {ModuleIntro && <ModuleIntro content={module.module_introduction} />}
+        {ModuleIntro && <ModuleIntro module={{ value: module.module_introduction }} />}
         <ModuleComponent module={module} page={page} pageContext={pageContext} {...extraProps} />
       </div>
     )

package/src/components/organisms/anchor/anchor.module.scss

@@ -8,8 +8,14 @@
     box-shadow: 0px 8px 12px 0px;
     left: 0;
     right: 0;
-    padding: 0 5px;
+    .progressBar{
+      height: 5px;
+      width: 100px;
+      background-color: var(--progress-bar-color, red);
+      transition: width 1s;
+    }
   }
+  
 
   .defaultConatiner {
     position: relative;
@@ -30,12 +36,13 @@
     @include flex-direction(row);
     &::-webkit-scrollbar {
       height: 0.5rem;
+      display: none;
     }
     &::-webkit-scrollbar-track {
       background: #fff;
     }
     &::-webkit-scrollbar-thumb {
-      background: var(--anchor-thumb-color);
+      background: black;
     }
     overflow-x: scroll;
     .link {

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

@@ -24,6 +24,7 @@ function Anchor({
   const itemsRef = useRef([]);
   const anchorContainerRef = useRef(null);
   const anchorListRef = useRef(null);
+  const progressBar = useRef(null);
   const sticky = isFixed && isSticky(offsetTop);
   const { translations } = useContext(Context) || {};
   const anchorList = items.map((anchor) => ({
@@ -52,11 +53,17 @@ function Anchor({
 
   const setActiveAnchor = () => {
     anchorContainerRef.current && setOffsetTop(anchorContainerRef.current.offsetTop);
+    const { innerHeight, scrollY } = window;
+
+    // progress scroll bar
+    const scrollHeight = document.querySelector('body').scrollHeight;
+    const calcPercent = (scrollY * 100) / (scrollHeight - innerHeight);
+    progressBar.current ? (progressBar.current.style.width = `${calcPercent}%`) : null;
 
     // get element in viewport
     const currentAnchor = anchorList?.map((el) => {
       const element = document.getElementById(el.id);
-      if (element?.offsetTop - headerOffset - heightOfAnchor - offset <= window.scrollY) {
+      if (element?.offsetTop - headerOffset - heightOfAnchor - offset <= scrollY) {
         return element;
       }
       return null;
@@ -133,6 +140,7 @@ function Anchor({
             </li>
           ))}
         </ul>
+        {sticky && <div ref={progressBar} className={styles.progressBar} />}
       </div>
     </div>
   );

package/src/helpers/getters.js

@@ -374,6 +374,16 @@ export function shiftFirstOperator(pageId, module, pagesMappedById) {
   }
 }
 
+export const getModuleTitle = (module, page) => {
+  if (page && page.type === 'operator') {
+    return (
+      module.module_title && module.module_title.replace('[operator_name]', page.relation.name)
+    );
+  }
+
+  return module.title;
+};
+
 export const getRoundMinutes = (time) => {
   const [minutes, seconds] = time.split(':');
   const value = seconds > 30 ? Number(minutes) + 1 : Number(minutes);

package/src/helpers/getters.test.js

@@ -29,6 +29,15 @@ describe('Getters Helper', () => {
     expect(Getters.getExtraField({ name: 'foo' }, 'name', 'def')).toEqual('foo');
   });
 
+  test('getModuleTitle()', () => {
+    expect(
+      Getters.getModuleTitle(
+        { module_title: 'Test [operator_name] test' },
+        { type: 'operator', relation: { name: 'test name' } }
+      )
+    ).toEqual('Test test name test');
+  });
+
   test('getSection()', () => {
     expect(Getters.getSection('short_code', { page: {}, marketSections: {} })).toBeNull();
     expect(

package/src/helpers/processor/index.js

@@ -256,6 +256,19 @@ export default {
           ) {
             transformedPages[market][pageType][index].relation =
               relations[page.type][page.relation_id] || null;
+
+            // Linking game provider path to the game
+            if (page.type === 'game') {
+              const providerId =
+                transformedPages[market][pageType][index].relation.game_provider.id;
+              const providerPage = transformedPages[market].software_provider
+                ? transformedPages[market].software_provider.filter(
+                    (provider) => providerId === provider.relation_id
+                  )
+                : [];
+              transformedPages[market][pageType][index].relation.game_provider.path =
+                providerPage.length > 0 ? providerPage[0].path : null;
+            }
           }
 
           // add author object to page

package/src/helpers/processor/modules.js

@@ -5,7 +5,7 @@ import { clonePageForCards, groupBy, removeDuplicates } from './common';
 import settings from '../../constants/settings';
 import ModuleValue from '../../constants/module-value';
 import { topListPickKeys } from '../../constants/pick-keys';
-import { shiftFirstOperator } from '../getters';
+import { shiftFirstOperator, getModuleTitle } from '../getters';
 import { generatePlaceholderString } from '../generators';
 
 const pagesGroupedByTemplateId = [];
@@ -223,6 +223,11 @@ export function processCardsV2(module, pagesCloned, pagesMappedById, pageId) {
     shiftFirstOperator(pageId, module, pagesMappedById);
   }
 
+  // Check for module title placeholders
+  if (pageId !== null) {
+    module.module_title = getModuleTitle(module, pagesMappedById[pageId]);
+  }
+
   // modify page so it doesn't have too much data
   module.items = module.items.map((item) => clonePageForCards(cloneDeep(item), module.style));
 }

package/src/hooks/link/index.js

@@ -50,7 +50,7 @@ function LinkCustom({
 }
 
 LinkCustom.propTypes = {
-  to: PropTypes.string.isRequired,
+  to: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.element, PropTypes.any]),
   activeClassName: PropTypes.string,
   partiallyActive: PropTypes.bool,

package/src/components/molecules/content-intro/content-intro.module.scss

@@ -1,2 +0,0 @@
-.contentIntro {
-}

package/src/components/molecules/content-intro/content-intro.test.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { render, cleanup } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-
-import { getSingleContentData } from '~tests/factories/modules/content.factory';
-import ContentIntro from '.';
-
-describe('Content Component', () => {
-  test('render content props', () => {
-    const correctData = getSingleContentData('h4');
-    const { container } = render(<ContentIntro content={correctData.value} />);
-    expect(container).toBeTruthy();
-    // getByText(container, 'Goodbye world')
-    // HTML parse
-    expect(container.querySelectorAll('p')).toHaveLength(1);
-    expect(container.querySelectorAll('i')).toHaveLength(1);
-
-    // Lazy image
-    expect(container.querySelectorAll('div.lazyload-wrapper')).toHaveLength(1);
-  });
-});
-
-afterEach(() => {
-  cleanup();
-});

package/src/components/molecules/content-intro/index.js

@@ -1,37 +0,0 @@
-import React from 'react';
-import loadable from '@loadable/component';
-import parse from 'html-react-parser';
-import LazyImage from '~hooks/lazy-image';
-import { parseCss } from '~helpers/css-parser';
-import { parseContentImageUrl } from '~helpers/strings';
-
-import styles from './content-intro.module.scss';
-
-export default function index({ content }) {
-  const replaceMedia = (node) => {
-    if (node.name === 'iframe') {
-      const Iframe = loadable(() => import('gatsby-core-theme/src/components/atoms/iframe'));
-      return <Iframe src={node.attribs.src} />;
-    }
-
-    if (node.name === 'img') {
-      const lazyProps = {
-        src: parseContentImageUrl(node.attribs.src),
-        width: node.attribs.width && node.attribs.width.replace('px', ''),
-        height: node.attribs.height && node.attribs.height.replace('px', ''),
-        style: node.attribs.style ? parseCss(node.attribs.style) : null,
-        alt: node.attribs.alt ? node.attribs.alt : 'missing alt',
-      };
-      return <LazyImage {...lazyProps} />;
-    }
-    return null;
-  };
-
-  return (
-    <div className={styles.contentIntro}>
-      {parse(content, {
-        replace: replaceMedia,
-      })}
-    </div>
-  );
-}