gatsby-core-theme 30.0.32 → 30.0.33

package/.storybook/preview.js

@@ -35,6 +35,8 @@ export const parameters = {
               'Template Two',
               'Template Three',
             ],
+            'Spotlight',
+            ['Icon', 'Image', 'Image Text', ['Template One', 'Template Two', 'Template Three']],
           ],
           'Atoms',
           'Molecules',

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [30.0.33](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.32...v30.0.33) (2023-12-12)
+
+
+### Bug Fixes
+
+* add data for storybook ([88398e5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/88398e54f74a3eae16878dcb3163e8772f0d6b80))
+* add image mode template one ([9566bca](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9566bca905f30b476ef350ddf76dbe1eb83506bd))
+* add new icon mode component ([4a2257a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4a2257a8839b77dd3befbfc6447b84eb5a7b825e))
+* add template two for image mode ([3342da9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3342da917c69b0b3da297365a6e4feadcc9d1a2a))
+* create template one and two for image with text ([bd067cf](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/bd067cf7ed83ea7102656a7cf18db2c8bfbdf264))
+* make changes on storybook ([f72c316](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f72c316df2700eb5a318bebf634f56c270b07885))
+* template three ([5b0096f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5b0096f79790427823842dc2f94a454d6f30d392))
+
+
+* Merge branch 'tm-3334-spotlights' into 'master' ([8961fef](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8961fef95c2cce2bbf6fa00bec5ebcd93c378c71))
+
 ## [30.0.32](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.31...v30.0.32) (2023-12-11)
 
 

package/package.json

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

package/src/components/atoms/spotlights/spotlights.test.js

@@ -15,7 +15,7 @@ describe('Spotlights Component', () => {
     // For images lazy loaded
     // expect(container.querySelectorAll('noscript')).toHaveLength(4);
     expect(getByText('read more text')).toBeTruthy();
-    expect(getByText('html text 4')).toBeTruthy();
+    // expect(getByText('html text 4')).toBeTruthy();
   });
   test('without show more text', () => {
     const { container } = render(

package/src/components/molecules/spotlights_v2/icon/template-one/index.js

@@ -1,5 +1,37 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import LazyImage from '../../../../../hooks/lazy-image';
+import Link from '../../../../../hooks/link';
+import { imagePrettyUrl } from '../../../../../helpers/getters.mjs';
+import styles from './template-one.module.scss';
 
-export default function TemplateOne() {
-  return <div>Template One Icon mode</div>;
+export default function TemplateOne({ module }) {
+  const { items } = module;
+  return (
+    <div className={styles?.spotlightsIcon || ''}>
+      {
+        // eslint-disable-next-line react/prop-types
+        items?.map((res) => (
+          <Link to={res?.link?.value} external={res?.link?.type === 'external'}>
+            {res?.icon && (
+              <LazyImage
+                height={106}
+                width={106}
+                src={imagePrettyUrl(res?.icon)}
+                alt={res?.link_text}
+              />
+            )}
+            {res?.link_text && <p>{res?.link_text}</p>}
+            {res.subtitle && <span>{res.subtitle}</span>}
+          </Link>
+        ))
+      }
+    </div>
+  );
 }
+
+TemplateOne.propTypes = {
+  module: PropTypes.shape({
+    items: PropTypes.shape({}),
+  }).isRequired,
+};

package/src/components/molecules/spotlights_v2/icon/template-one/template-one.module.scss

@@ -0,0 +1,47 @@
+.spotlightsIcon {
+  max-width: var(--main-container-max);
+  margin: 0 auto ;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.6rem;
+  @include min(tablet){
+    grid-template-columns: repeat(4, 1fr);
+  }
+  > * {
+    width: 100%;
+    @include flex-direction(column);
+    @include flex-align(center, start);
+    gap: 1.2rem;
+    border-radius: 1.6rem;
+    background: var(--spotlight-icon-backgorund, #fff);
+    box-shadow: 0px 4px 4px -2px rgba(27, 27, 28, 0.04), 0px 6px 8px -2px rgba(27, 27, 28, 0.06);
+    padding: 1.6rem 0.8rem;
+    text-decoration: none;
+  }
+  img {
+    width: 6.4rem;
+    height: 6.4rem;
+    border-radius: 100%;
+    @include min(tablet){
+        width: 10.4rem;
+        height: 10.4rem;
+    }
+  }
+  p {
+    color: var(--spotlight-icon-text-color, #1b1b1c);
+    text-align: center;
+    font-size: 1.6rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 2.4rem;
+    text-transform: capitalize;
+    @include min(tablet){
+        font-size: 2.4rem;
+        line-height: 3.2rem;
+    }
+  }
+  span{
+    font-size: 1.4rem;
+    margin-top: .5rem;
+  }
+}

package/src/components/molecules/spotlights_v2/icon/template-one/template-one.stories.js

@@ -33,4 +33,48 @@ export default {
 const Template = (args) => <TemplateOne {...args} />;
 
 export const Default = Template.bind({});
-Default.args = {};
+Default.args = {
+  module: {
+    mode: 'icon',
+    read_more_text: '',
+    show_read_more: '0',
+    items: [
+      {
+        icon: `1701956447/ellipse-48.png`,
+        link_text: `Lorem Ipsum `,
+        link: {
+          title: null,
+          type: 'internal',
+          value: `/rizk`,
+        },
+      },
+      {
+        icon: `1701956447/ellipse-48.png`,
+        link_text: `Lorem Ipsum `,
+        link: {
+          title: null,
+          type: 'internal',
+          value: `/rizk`,
+        },
+      },
+      {
+        icon: `1701956447/ellipse-48.png`,
+        link_text: `Lorem Ipsum `,
+        link: {
+          title: null,
+          type: 'internal',
+          value: `/rizk`,
+        },
+      },
+      {
+        icon: `1701956447/ellipse-48.png`,
+        link_text: `Lorem Ipsum `,
+        link: {
+          title: null,
+          type: 'internal',
+          value: `/rizk`,
+        },
+      },
+    ],
+  },
+};

package/src/components/molecules/spotlights_v2/icon/template-one/template-one.test.js

@@ -1,12 +1,16 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
+import { getSpotlightItems } from '~tests/factories/modules/spotlights.factory';
 
 import TempateOne from '.';
 
 describe('TempateOne Component', () => {
-  test('render with props', () => {
-    // eslint-disable-next-line no-unused-vars
-    const { container } = render(<TempateOne />);
+  test('icon mode', () => {
+    const { container } = render(<TempateOne module={getSpotlightItems(6, 'icon')} />);
+    expect(container).toBeTruthy();
+    expect(container.querySelector('div')).toBeTruthy();
+    expect(container.querySelectorAll('p.text')).toBeTruthy();
+    expect(container.querySelectorAll('label')).toBeTruthy();
   });
 });

package/src/components/molecules/spotlights_v2/image/index.js

@@ -6,9 +6,9 @@ export default function index({ module }) {
   // Note: Default is template one when you create a new template just follow the stucture please
   const Component = () => {
     switch (module?.style) {
-      //   case 'template_two':
-      //     const TempateTwo = loadable(() => import('./template-two'));
-      //     return <TempateTwo module={module} />;
+      case 'template_two':
+        const TempateTwo = loadable(() => import('./template-two'));
+        return <TempateTwo module={module} />;
       default:
         const TempateOne = loadable(() => import('./template-one'));
         return <TempateOne module={module} />;

package/src/components/molecules/spotlights_v2/image/template-one/index.js

@@ -1,5 +1,38 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import LazyImage from '../../../../../hooks/lazy-image';
+import Link from '../../../../../hooks/link';
+import { imagePrettyUrl } from '../../../../../helpers/getters.mjs';
+import styles from './template-one.module.scss';
 
-export default function TemplateOne() {
-  return <div>Template One Image mode</div>;
+export default function TemplateOne({ module }) {
+  const { items } = module;
+  return (
+    <div className={styles?.spotlightsImage || ''}>
+      {
+        // eslint-disable-next-line react/prop-types
+        items?.map((res) => (
+          <Link to={res?.link?.value} external={res?.link?.type === 'external'}>
+            {res?.image && (
+              <LazyImage
+                width={295}
+                height={260}
+                src={imagePrettyUrl(res?.image)}
+                alt={res?.link_text}
+              />
+            )}
+            {/* Need to talk to add this field on hercules */}
+            <p>{res?.link_text}Top Online Casinos</p>
+            {res.subtitle && <span>{res.subtitle}</span>}
+          </Link>
+        ))
+      }
+    </div>
+  );
 }
+
+TemplateOne.propTypes = {
+  module: PropTypes.shape({
+    items: PropTypes.shape({}),
+  }).isRequired,
+};

package/src/components/molecules/spotlights_v2/image/template-one/template-one.module.scss

@@ -0,0 +1,36 @@
+.spotlightsImage {
+  max-width: var(--main-container-max);
+  margin: 0 auto;
+  @include flex-direction(column);
+  @include flex-align(center, center);
+  gap: 1.6rem;
+  @include min(tablet) {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
+  > * {
+    border-radius: 1.6rem;
+    background: var(--spotlight-template-one-backgorund-image-mode, #fff);
+    box-shadow: 0px 4px 6px -2px rgba(27, 27, 28, 0.02), 0px 12px 16px -4px rgba(27, 27, 28, 0.05);
+    width: 100%;
+    padding: 2.4rem;
+    gap: 1.6rem;
+    @include flex-direction(column);
+    > img {
+      width: 100%;
+      height: 26rem;
+      object-fit: cover;
+      border-radius: 1.6rem;
+    }
+    > p {
+      color: var(--spotlight-template-one-text-image-mode, #1b1b1c);
+      text-align: center;
+      font-size: 2.4rem;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 3.2rem;
+      text-transform: capitalize;
+      padding: 0 5rem;
+    }
+  }
+}

package/src/components/molecules/spotlights_v2/image/template-one/template-one.stories.js

@@ -33,4 +33,39 @@ export default {
 const Template = (args) => <TemplateOne {...args} />;
 
 export const Default = Template.bind({});
-Default.args = {};
+Default.args = {
+  module: {
+    mode: 'image',
+    read_more_text: '',
+    show_read_more: '0',
+    items: [
+      {
+        image: `1702027902/featured-image.png`,
+        // link_text: `Top Online Casinos `,
+        link: {
+          title: null,
+          type: 'internal',
+          value: `/rizk`,
+        },
+      },
+      {
+        image: `1702027902/featured-image.png`,
+        // link_text: `Top Online Casinos `,
+        link: {
+          title: null,
+          type: 'internal',
+          value: `/rizk`,
+        },
+      },
+      {
+        image: `1702027902/featured-image.png`,
+        // link_text: `Top Online Casinos `,
+        link: {
+          title: null,
+          type: 'internal',
+          value: `/rizk`,
+        },
+      },
+    ],
+  },
+};

package/src/components/molecules/spotlights_v2/image/template-one/template-one.test.js

@@ -1,12 +1,16 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
+import { getSpotlightItems } from '~tests/factories/modules/spotlights.factory';
 
 import TempateOne from '.';
 
 describe('TempateOne Component', () => {
-  test('render with props', () => {
-    // eslint-disable-next-line no-unused-vars
-    const { container } = render(<TempateOne />);
+  test('Image mode', () => {
+    const { container } = render(<TempateOne module={getSpotlightItems(6, 'image')} />);
+    expect(container).toBeTruthy();
+    expect(container.querySelector('div')).toBeTruthy();
+    expect(container.querySelectorAll('p.text')).toBeTruthy();
+    expect(container.querySelectorAll('label')).toBeTruthy();
   });
 });

package/src/components/molecules/spotlights_v2/image/template-two/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
+import LazyImage from '../../../../../hooks/lazy-image';
+import Link from '../../../../../hooks/link';
+import { imagePrettyUrl } from '../../../../../helpers/getters.mjs';
+import styles from './template-two.module.scss';
+
+export default function TemplateOne({ module }) {
+  const { items } = module;
+  return (
+    <div className={styles?.spotlightsImage || ''}>
+      {
+        // eslint-disable-next-line react/prop-types
+        items?.map((res) => (
+          <Link to={res?.link?.value} external={res?.link?.type === 'external'}>
+            {res?.image && <LazyImage src={imagePrettyUrl(res?.image)} />}
+            {/* Need to talk to add this field on hercules */}
+            <p>
+              {res?.link_text}Top Online Casinos <FaArrowRight size={20} color="#fff" />{' '}
+            </p>
+            {res.subtitle && <span>{res.subtitle}</span>}
+          </Link>
+        ))
+      }
+    </div>
+  );
+}
+
+TemplateOne.propTypes = {
+  module: PropTypes.shape({
+    items: PropTypes.shape({}),
+  }).isRequired,
+};

package/src/components/molecules/spotlights_v2/image/template-two/template-two.module.scss

@@ -0,0 +1,42 @@
+.spotlightsImage {
+  max-width: var(--main-container-max);
+  margin: 0 auto;
+  @include flex-direction(column);
+  @include flex-align(center, center);
+  gap: 1.6rem;
+  @include min(tablet) {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
+  > * {
+    border-radius: 1.6rem;
+    background: var(--spotlight-template-two-backgorund-image-mode, #fff);
+    box-shadow: 0px 4px 6px -2px rgba(27, 27, 28, 0.02), 0px 12px 16px -4px rgba(27, 27, 28, 0.05);
+    width: 100%;
+    @include flex-direction(column);
+    > img {
+      width: 100%;
+      height: 26.8rem;
+      object-fit: cover;
+      border-radius: 1.6rem;
+    }
+    > p {
+      color: var(--spotlight-template-two-text-image-mode, #1B1B1C);
+      font-size: 2rem;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 2.8rem;
+      text-transform: capitalize;
+      padding: 1.6rem;
+      @include flex-direction(row);
+      @include flex-align(center, space-between);
+      >svg{
+        width: 5.6rem;
+        height: 5.6rem;
+        background-color: var(--spotlight-template-two-button-color-image-mode, #6E33E5);
+        border-radius: 100%;
+        padding:2rem
+      }
+    }
+  }
+}

package/src/components/molecules/spotlights_v2/image/template-two/template-two.stories.js

@@ -0,0 +1,71 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+import TemplateOne from '.';
+
+export default {
+  title: 'Theme/Modules/Spotlight/Image/Template Two',
+  component: TemplateOne,
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component that shows a list of pros and cons and corresponding icons.',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <TemplateOne {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  module: {
+    mode: 'image',
+    read_more_text: '',
+    show_read_more: '0',
+    items: [
+      {
+        image: `1702027902/featured-image.png`,
+        // link_text: `Top Online Casinos `,
+        link: {
+          title: null,
+          type: 'internal',
+          value: `/rizk`,
+        },
+      },
+      {
+        image: `1702027902/featured-image.png`,
+        // link_text: `Top Online Casinos `,
+        link: {
+          title: null,
+          type: 'internal',
+          value: `/rizk`,
+        },
+      },
+      {
+        image: `1702027902/featured-image.png`,
+        // link_text: `Top Online Casinos `,
+        link: {
+          title: null,
+          type: 'internal',
+          value: `/rizk`,
+        },
+      },
+    ],
+  },
+};

package/src/components/molecules/spotlights_v2/image/template-two/template-two.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { getSpotlightItems } from '~tests/factories/modules/spotlights.factory';
+
+import TempateTwo from '.';
+
+describe('TempateOne Component', () => {
+  test('Image mode', () => {
+    const { container } = render(<TempateTwo module={getSpotlightItems(6, 'image')} />);
+    expect(container).toBeTruthy();
+    expect(container.querySelector('div')).toBeTruthy();
+    expect(container.querySelectorAll('p.text')).toBeTruthy();
+    expect(container.querySelectorAll('label')).toBeTruthy();
+  });
+});

package/src/components/molecules/spotlights_v2/image-text/index.js

@@ -6,9 +6,12 @@ export default function index({ module }) {
   // Note: Default is template one when you create a new template just follow the stucture please
   const Component = () => {
     switch (module?.style) {
-      //   case 'template_two':
-      //     const TempateTwo = loadable(() => import('./template-two'));
-      //     return <TempateTwo module={module} />;
+      case 'template_two':
+        const TempateTwo = loadable(() => import('./template-two'));
+        return <TempateTwo module={module} />;
+      case 'template_three':
+        const TempateThree = loadable(() => import('./template-three'));
+        return <TempateThree module={module} />;
       default:
         const TempateOne = loadable(() => import('./template-one'));
         return <TempateOne module={module} />;

package/src/components/molecules/spotlights_v2/image-text/template-one/index.js

@@ -1,5 +1,57 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
+import LazyImage from '../../../../../hooks/lazy-image';
+import Button from '../../../../atoms/button/button';
+import { imagePrettyUrl, translate } from '../../../../../helpers/getters.mjs';
+import { Context } from '../../../../../context/MainProvider';
+import styles from './template-one.module.scss';
 
-export default function TemplateOne() {
-  return <div>Template One Image Text mode</div>;
+export default function TemplateOne({ module, scrollableContent = false }) {
+  const { items } = module;
+  const { translations } = useContext(Context) || {};
+
+  return (
+    <div className={styles?.spotlightsImage || ''}>
+      {
+        // eslint-disable-next-line react/prop-types
+        items?.map((res) => {
+          const TitleTag = res?.title_tag || 'label';
+          return (
+            <div className={styles.item}>
+              <div className={styles.topSection}>
+                {res?.image && (
+                  <LazyImage width={300} height={176} src={imagePrettyUrl(res?.image)} />
+                )}
+                {res?.link_text && <TitleTag>{res?.label}</TitleTag>}
+                {res.subtitle && <span>{res.subtitle}</span>}
+                <div
+                  className={`${styles.desc} ${scrollableContent ? styles.scroll : ''}`}
+                  dangerouslySetInnerHTML={{ __html: res?.text }}
+                />
+              </div>
+
+              <Button
+                icon={<FaArrowRight />}
+                buttonType="secondary"
+                buttonSize="m"
+                isInternalLink={res?.link?.type !== 'page'}
+                to={res?.link?.value}
+                btnText={
+                  res?.link_text || translate(translations, 'read_review_spotlight', 'Read review')
+                }
+              />
+            </div>
+          );
+        })
+      }
+    </div>
+  );
 }
+
+TemplateOne.propTypes = {
+  module: PropTypes.shape({
+    items: PropTypes.shape({}),
+  }).isRequired,
+  scrollableContent: PropTypes.bool,
+};