gatsby-matrix-theme 17.0.1 → 17.1.1

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+## [17.1.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v17.1.0...v17.1.1) (2023-03-29)
+
+
+### Bug Fixes
+
+* added author card templates ([a8d4a45](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a8d4a451f3f4dc9a88ae9d25ff06ac92c52b4bd3))
+* added author cards ([4ec39da](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4ec39dad041fdcab2baf0228019dfe1783533bec))
+* change page type to relation_type ([b535e0f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b535e0fda43ef5396d340562e20cf506fb3ee708))
+* conflict ([4a1f6b4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4a1f6b45b3a345dff627f7d9c265c88515389e22))
+* remove console.log and update if else ([cc3c224](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/cc3c2242bd7703c3cd4c0c979b6458edae9bb8c6))
+* update core version ([e516ad6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e516ad696b1422289d6e5d3a17c23d0a78bf73d3))
+* update to the latest core version ([484a4de](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/484a4defd5886e569bbdcfc58ed89442990d7e27))
+* update with the latest change ([71a9d0b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/71a9d0b0a1181009c3a6e7fa0dc25405b889f252))
+
+
+* Merge branch 'tm-3312-author-cards' into 'master' ([3a436d0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3a436d0f817f04593539cf9edd79ce398b7fa7fd))
+* Merge branch 'tm-3088-have-you-found-feature' into 'master' ([ecbc01b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ecbc01bf80e3f5be63c679557fbe6941757d9676))
+* Merge branch 'tm-3324-change-type' into 'master' ([ed96781](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ed96781f772b083fac0509a4fd704e3f21464404))
+* Merge branch 'master' into tm-3312-author-cards ([a7dccdf](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a7dccdfb44b2311142e0c171c4855e27e60187e5))
+
+# [17.1.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v17.0.1...v17.1.0) (2023-03-29)
+
+
+### Bug Fixes
+
+* update _main and feedback scss ([281192b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/281192b0491e7f60d30ab4e6adc0a41df1e3d1ba))
+* update styling for feedback module ([eb7abc6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/eb7abc6acd37751ed306df0c7cfd12c619827e0c))
+* update styling for feedback module ([e732cb1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e732cb18e3a1e70f1981d6ca70c0b09d3b8fd80c))
+
+
+* Merge branch 'tm-3088-have-you-found-feature' into 'master' ([4cbdb00](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4cbdb00d8ae13de99e6c42b6c6d7281d6f5c7da5))
+
+
+### Features
+
+* add the have you found what you have been looking for feature ([305fbb4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/305fbb4eb8c0293a3be5846dbaf2ecb9046cd472))
+
 ## [17.0.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v17.0.0...v17.0.1) (2023-03-28)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "17.0.1",
+  "version": "17.1.1",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^4.20.0",
-    "gatsby-core-theme": "18.0.27",
+    "gatsby-core-theme": "18.0.28",
     "gatsby-plugin-sharp": "^4.10.2",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^4.10.0",

package/src/components/atoms/cards/author/template-one/index.js

@@ -0,0 +1,56 @@
+import React, { useContext } from 'react';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import Link from 'gatsby-core-theme/src/hooks/link';
+import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
+import PropTypes from 'prop-types';
+import LazyImage from '~hooks/lazy-image';
+import Socials from '../../../author/socials';
+import styles from './template-one.module.scss';
+import { imagePrettyUrl, getAltText, translate, textWordsLimit } from '~helpers/getters';
+
+export default function TemplateOne({ item }) {
+  const author = item.relation;
+  const { translations } = useContext(Context);
+
+  return (
+    <div className={styles.container}>
+      <span className={styles.posts}>
+        {author.pages_count} {translate(translations, 'posts', 'Posts')}
+      </span>
+      <LazyImage
+        src={imagePrettyUrl(author.image_object.filename, 72, 72)}
+        alt={getAltText(author.image_object, author.image_alt || author.name)}
+        width={72}
+        height={72}
+      />
+      <span className={styles.title}>{author.author_title}</span>
+      <span className={styles.name}>{author.name}</span>
+      <Socials author={author} />
+      <div
+        className={styles.bio}
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{ __html: textWordsLimit(author.biography, 20) }}
+      />
+      <Link className={styles.readMore} to={author.profile_page_path}>
+        {translate(translations, 'read_more', 'Read More')} <FaArrowRight size="1.4rem" />
+      </Link>
+    </div>
+  );
+}
+
+TemplateOne.propTypes = {
+  item: PropTypes.shape({
+    relation: PropTypes.shape({
+      author_title: PropTypes.string,
+      name: PropTypes.string,
+      profile_page_path: PropTypes.string,
+      biography: PropTypes.string,
+      pages_count: PropTypes.string,
+      image_alt: PropTypes.string,
+      image_object: PropTypes.shape({
+        filename: PropTypes.string,
+        image_alt: PropTypes.string,
+      }),
+    }),
+  }),
+};

package/src/components/atoms/cards/author/template-one/template-one.module.scss

@@ -0,0 +1,70 @@
+.container {
+  background: #ffffff;
+  border: 0.15rem solid #e9e9e9;
+  border-radius: 1.6rem;
+  @include flex-align(flex-start, flex-start);
+  flex-direction: column;
+  padding: 2.4rem;
+  position: relative;
+
+  > img {
+    margin-bottom: 2rem;
+    border-radius: 4rem;
+  }
+
+  > a {
+    @include flex-align(flex-end, flex-start);
+    flex-grow: 1;
+  }
+}
+
+.posts {
+  position: absolute;
+  background: #5545a9;
+  border-radius: 100px;
+  color: #fff;
+  top: 2.4rem;
+  right: 2.4rem;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 10px;
+  line-height: 13px;
+  padding: 0.6rem;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 13px;
+  line-height: 19px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: #737090;
+}
+
+.name {
+  color: #000;
+  font-weight: 700;
+  font-size: 20px;
+  margin-bottom: 2rem;
+  line-height: 30px;
+}
+
+.bio {
+  font-size: 16px;
+  line-height: 27px;
+  margin-top: 2rem;
+}
+
+.readMore {
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 18px;
+  color: #1c1a28;
+  margin-top: 1rem;
+
+  svg {
+      margin-left: .8rem;
+      margin-bottom: .1rem;
+  }
+}

package/src/components/atoms/cards/author/template-one/template-one.stories.js

@@ -0,0 +1,42 @@
+/* eslint-disable react/destructuring-assignment */
+import React from 'react';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import getAuthorList from '../../../../../../tests/factories/authors/author.factory';
+import TemplateOne from '.';
+
+const author = getAuthorList({})[1];
+
+export default {
+  title: 'Matrix-Theme/Modules/Cards/Author/Template One',
+  component: TemplateOne,
+  argTypes: {
+    item: {
+      relation: {
+        ...author,
+      },
+    },
+  },
+};
+
+const Template = (args) => (
+  <div
+    style={{
+      maxWidth: ' 34.3rem',
+      margin: '0 auto',
+    }}
+  >
+    <Context.Provider value={{}}>
+      <TemplateOne {...args} />
+    </Context.Provider>
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  item: {
+    relation: {
+      ...author,
+    },
+  },
+};

package/src/components/atoms/cards/author/template-one/template-one.test.js

@@ -0,0 +1,29 @@
+/* eslint-disable no-multi-assign */
+import React from 'react';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import getAuthorList from '../../../../../../tests/factories/authors/author.factory';
+import TemplateOne from '.';
+import { textWordsLimit } from '~helpers/getters';
+
+describe('Author Header', () => {
+  test('Template One', () => {
+    const author = getAuthorList({})[1];
+    const { container, getByText } = render(<TemplateOne item={{ relation: { ...author } }} />, {
+      wrapper: ({ children }) => <Context.Provider value={{}}>{children}</Context.Provider>,
+    });
+    expect(getByText('Author 1 Name')).toBeTruthy();
+    expect(getByText(author.author_title)).toBeTruthy();
+    expect(getByText('23 Posts')).toBeTruthy();
+    expect(getByText(textWordsLimit(author.biography, 20))).toBeTruthy();
+    expect(container.querySelectorAll('a')).toHaveLength(6);
+    expect(getByText('Read More').closest('a').getAttribute('href')).toEqual(
+      `/${author.profile_page_path}`
+    );
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});

package/src/components/atoms/cards/author/template-two/index.js

@@ -0,0 +1,51 @@
+import React, { useContext } from 'react';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import Link from 'gatsby-core-theme/src/hooks/link';
+import PropTypes from 'prop-types';
+import LazyImage from '~hooks/lazy-image';
+import Socials from '../../../author/socials';
+import styles from './template-two.module.scss';
+import { imagePrettyUrl, getAltText, translate } from '~helpers/getters';
+
+export default function TemplateTwo({ item }) {
+  const author = item.relation;
+  const { translations } = useContext(Context);
+
+  return (
+    <div className={styles.container}>
+      <LazyImage
+        src={imagePrettyUrl(author.image_object.filename, 80, 80)}
+        alt={getAltText(author.image_object, author.image_alt || author.name)}
+        width={80}
+        height={80}
+      />
+      <div className={styles.nameContainer}>
+        <span className={styles.title}>{author.author_title}</span>
+        <Link className={styles.name} to={author.profile_page_path}>
+          {author.name}
+        </Link>
+      </div>
+      <span className={styles.posts}>
+        {author.pages_count} {translate(translations, 'posts', 'Posts')}
+      </span>
+      <Socials author={author} />
+    </div>
+  );
+}
+
+TemplateTwo.propTypes = {
+  item: PropTypes.shape({
+    relation: PropTypes.shape({
+      author_title: PropTypes.string,
+      name: PropTypes.string,
+      profile_page_path: PropTypes.string,
+      biography: PropTypes.string,
+      pages_count: PropTypes.string,
+      image_alt: PropTypes.string,
+      image_object: PropTypes.shape({
+        filename: PropTypes.string,
+        image_alt: PropTypes.string,
+      }),
+    }),
+  }),
+};

package/src/components/atoms/cards/author/template-two/template-two.module.scss

@@ -0,0 +1,63 @@
+.container {
+  background: #ffffff;
+  border: 0.15rem solid #e9e9e9;
+  border-radius: 1.6rem;
+  @include flex-align(center, space-between);
+  gap: 1.6rem;
+  flex-direction: column;
+  padding: 2.4rem;
+  position: relative;
+
+  > img {
+    border-radius: 4rem;
+  }
+}
+
+.posts {
+  background: #5545a9;
+  border-radius: 100px;
+  color: #fff;
+  top: 2.4rem;
+  right: 2.4rem;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 10px;
+  line-height: 13px;
+  padding: 0.6rem;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 13px;
+  line-height: 19px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: #737090;
+  text-align: center;
+}
+
+.nameContainer {
+  @include flex-align(center, center);
+  flex-direction: column;
+}
+
+.name {
+  color: #000;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 30px;
+  position: relative;
+
+  &:after {
+    @include arrow(var(--horse-calc-label-color, #000), 0.8rem, down, false);
+    position: absolute;
+    right: -1.5rem;
+    top: 38%;
+  }
+}
+
+.bio {
+  font-size: 16px;
+  line-height: 27px;
+}

package/src/components/atoms/cards/author/template-two/template-two.stories.js

@@ -0,0 +1,42 @@
+/* eslint-disable react/destructuring-assignment */
+import React from 'react';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import getAuthorList from '../../../../../../tests/factories/authors/author.factory';
+import TemplateTwo from '.';
+
+const author = getAuthorList({})[1];
+
+export default {
+  title: 'Matrix-Theme/Modules/Cards/Author/Template Two',
+  component: TemplateTwo,
+  argTypes: {
+    item: {
+      relation: {
+        ...author,
+      },
+    },
+  },
+};
+
+const Template = (args) => (
+  <div
+    style={{
+      maxWidth: ' 34.3rem',
+      margin: '0 auto',
+    }}
+  >
+    <Context.Provider value={{}}>
+      <TemplateTwo {...args} />
+    </Context.Provider>
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  item: {
+    relation: {
+      ...author,
+    },
+  },
+};

package/src/components/atoms/cards/author/template-two/template-two.test.js

@@ -0,0 +1,27 @@
+/* eslint-disable no-multi-assign */
+import React from 'react';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import getAuthorList from '../../../../../../tests/factories/authors/author.factory';
+import TemplateOne from '.';
+
+describe('Author Header', () => {
+  test('Template One', () => {
+    const author = getAuthorList({})[1];
+    const { container, getByText } = render(<TemplateOne item={{ relation: { ...author } }} />, {
+      wrapper: ({ children }) => <Context.Provider value={{}}>{children}</Context.Provider>,
+    });
+    expect(getByText('Author 1 Name')).toBeTruthy();
+    expect(getByText(author.author_title)).toBeTruthy();
+    expect(getByText('23 Posts')).toBeTruthy();
+    expect(container.querySelectorAll('a')).toHaveLength(6);
+    expect(getByText('Author 1 Name').closest('a').getAttribute('href')).toEqual(
+      `/${author.profile_page_path}`
+    );
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});

package/src/components/atoms/cards/comparison-table/index.js

@@ -13,7 +13,7 @@ export default function ComparisonTable({ module, page }) {
     <div className={styles.comparisonTable}>
       <ScrollX refTag={ele} scroll>
         <div ref={ele} className={styles.contentTable}>
-          <Table type={page?.type} items={module?.items} tempate={page?.template} />
+          <Table type={page?.relation_type} items={module?.items} tempate={page?.template} />
         </div>
       </ScrollX>
     </div>
@@ -25,6 +25,7 @@ ComparisonTable.propTypes = {
     items: PropTypes.shape({}),
   }),
   page: PropTypes.shape({
+    relation_type: PropTypes.string,
     type: PropTypes.string,
     template: PropTypes.string,
   }),

package/src/components/atoms/feedBackModule/feedback-module.module.scss

@@ -0,0 +1,126 @@
+.mainContainer {
+  padding: 0 2.4rem;
+}
+
+.dottedBorder {
+  border: var(--feedbackModule-main-border);
+  border-radius: var(--feedbackModule-main-border-radius);
+  width: auto !important;
+  max-width: var(--main-container-max) !important;
+  margin-bottom: 1rem !important;
+  margin: 0 auto;
+  padding: 1.6rem;
+}
+.container {
+  @include flex-align(center, space-between);
+  border: var(--feedbackModule-container-border);
+  background: var(--feedbackModule-background-color);
+  border-radius: var(--feedbackModule-container-radius);
+  flex-direction: column;
+  padding: 24px 16px;
+  gap: var(--feedbackModule-container-gap-mobile);
+}
+.textContainer {
+  @include flex-direction(column);
+  gap: 8px;
+}
+
+.firstText {
+  font-weight: 700;
+  font-size: var(--feedbackModule-firstText-font-size-mobile);
+  line-height: var(--feedbackModule-firstText-line-height-mobile);
+  color: var(--color-71);
+}
+
+.secondText {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: var(--feedbackModule-secondText-line-height);
+  color: var(--color-72);
+  > a {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: var(--feedbackModule-secondText-anchor-line-height);
+    color: var(--color-73);
+    >svg {
+      display: none
+    }
+  }
+}
+.buttonContainer {
+  @include flex-direction(row);
+  width: 100%;
+  justify-content: center;
+  gap: 8px;
+
+  > :first-child,
+  > :last-child {
+    padding: 16px 24px;
+    border: var(--feedbackModule-buttons-border-style);
+    border-radius: var(--feedbackModule-buttons-border-radius);
+    font-weight: 700;
+    width: var(--feedbackModule-buttons-width-mobile);
+    font-size: var(--feedbackModule-buttons-font-size);
+    line-height: var(--feedbackModule-buttons-line-height);
+    color: var(--color-74);
+    height: var(--feedbackModule-buttons-height-mobile);
+    @include flex-align(center, center);
+    background: var(--feedbackModule-buttons-background);
+    letter-spacing: var(--feedbackModule-buttons-letter-spacing);
+    > svg {
+      display: none;
+    }
+  }
+  :first-child {
+    box-shadow: var(--feedbackModule-first-button-box-shadow);
+    background: var(--feedback-first-button-background);
+  }
+  > :last-child {
+    box-shadow: var(--feedbackModule-second-button-box-shadow);
+    background: var(--feedback-second-button-background);
+  }
+  > :first-child:hover {
+    background-color: var(--color-75);
+    border: var(--feedbackModule-first-button-border);
+    box-shadow: var(--feedback-first-button-box-shadow-hover);
+  }
+  > :last-child:hover {
+    background-color: var(--color-76);
+    border: var(--feedbackModule-second-button-border);
+    box-shadow: var(--feedback-second-button-box-shadow-hover);
+  }
+  .onlyDesktop {
+    display: none;
+  }
+}
+
+@include min(tablet) {
+  .dottedBorder {
+    max-width: calc(var(--main-container-max) - 48px) !important;
+  }
+
+  .container {
+    flex-direction: row;
+    padding: 24px;
+    gap: var(--feedbackModule-container-gap);
+  }
+
+  .firstText {
+    font-size: var(--feedbackModule-firstText-font-size);
+    line-height: var(--feedbackModule-firstText-line-height);
+  }
+  .onlyDesktop {
+    display: block;
+  }
+  .textContainer {
+    gap: 4px;
+  }
+  .buttonContainer {
+    width: auto;
+    > :first-child,
+    > :last-child {
+      width: var(--feedbackModule-buttons-width);
+      height: var(--feedbackModule-buttons-height);
+    }
+  }
+}

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

@@ -0,0 +1,98 @@
+import React, { useContext, useState } from 'react';
+import PropTypes from 'prop-types';
+import Button from 'gatsby-core-theme/src/components/atoms/button';
+import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import styles from './feedback-module.module.scss';
+
+const FeedBackModule = ({ path = 'contact-us' }) => {
+  const { translations } = useContext(Context);
+  const [response, setResponse] = useState(null);
+
+  const handleClick = (userResponse) => {
+    setResponse(userResponse);
+  };
+
+  return (
+    <div className={styles.mainContainer}>
+      <div className={styles.dottedBorder}>
+        <div className={styles.container}>
+          <div className={styles.textContainer}>
+            {!response && (
+              <p className={styles.firstText}>{`${translate(
+                translations,
+                'have_you_found_text',
+                "Have You Found What You're Looking for?"
+              )}`}</p>
+            )}
+            {!response && (
+              <p className={`${styles.secondText} ${styles.onlyDesktop}`}>{`${translate(
+                translations,
+                'feedback_text',
+                'Your feedback is paramount!'
+              )}`}</p>
+            )}
+
+            {response === 'yes' && (
+              <p className={styles.firstText}>{`${translate(
+                translations,
+                'yes_first_text',
+                'Glad To hear that! 😊'
+              )}`}</p>
+            )}
+
+            {response === 'yes' && (
+              <p className={styles.secondText}>
+                {`${translate(
+                  translations,
+                  'yes_second_text',
+                  'Tell us more about what you liked best. Send us a message'
+                )}`}{' '}
+                <Button btnText="here" noStyle to={path} />
+              </p>
+            )}
+
+            {response === 'no' && (
+              <p className={styles.firstText}>{`${translate(
+                translations,
+                'no_first_text',
+                'Sorry to hear about that! 😢'
+              )}`}</p>
+            )}
+
+            {response === 'no' && (
+              <p className={styles.secondText}>
+                {`${translate(
+                  translations,
+                  'no_second_text',
+                  'Tell us what you need to know on this topic'
+                )}`}{' '}
+                <Button btnText="here" noStyle to={path} />
+              </p>
+            )}
+          </div>
+          <div className={styles.buttonContainer}>
+            <Button
+              isButton
+              noStyle
+              btnText={`${translate(translations, 'yes_button', 'Yes')}`}
+              onClick={() => handleClick('yes')}
+            />
+            <Button
+              isButton
+              noStyle
+              btnText={`${translate(translations, 'no_button', 'No')}`}
+              onClick={() => handleClick('no')}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+FeedBackModule.propTypes = {
+  path: PropTypes.string,
+};
+
+export default FeedBackModule;