gatsby-matrix-theme 13.0.3 → 13.0.4

package/.storybook/preview.js

@@ -28,6 +28,8 @@ export const parameters = {
             'Header',
             [
               'Default',
+              'Author',
+              ['Template One', 'Template Two', 'Template Three', 'Template Four'],
               'Operator',
               ['Template One-Two', 'Template Three', 'Template Four', 'Template Five'],
             ],

package/CHANGELOG.md

@@ -1,3 +1,41 @@
+## [13.0.4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v13.0.3...v13.0.4) (2023-02-09)
+
+
+### Bug Fixes
+
+* author template one ([c1cf66c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c1cf66cc40161e9d1411bdf87cc57a3cab7159d3))
+
+
+### Code Refactoring
+
+* add author header component variants ([42a6def](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/42a6def6aa621893290df056451198069fe52204))
+* add author header stories variants ([7bae43c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7bae43ce6645de1cd0a874280a4c2c29b4a035c0))
+* add author header styles variants ([68da037](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/68da0370c831b252f46f01d4b78932e202189844))
+* add author header tests variants ([1861772](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/18617722c095cc7541743a9f04478bf15f76edea))
+* add author header variants in preview for storybook ([5847ac9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5847ac9ccb6831233f597a0e91c59b4ab87e170d))
+* add author header variants into main header ([0788be0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0788be05acfb8c8a2f6bb60156fa3c55ab75f6d7))
+* update author header template one ([6996650](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6996650a98296d6299968f0f0b5df90f796c002c))
+* update author header variant styles ([54ea464](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/54ea46420dcb41bf9cf22d218b396ff5c8b78d96))
+* update author header variant styles ([c718828](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c7188286a3dd7d1b1133f87b0cecb0979ab3dd22))
+* update author header variant three gradient ([71bde8a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/71bde8a59aee4b93d89ca56b46049636967881d6))
+* update author header variants border radius ([c594434](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c594434e6d8f3379bbd9f40535b83fdfac74c9ef))
+* update author header variants border radius and style ([b09647f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b09647fd9a0dded39b0a925227da63949b65eabd))
+* update author header variants colors ([3011bd0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3011bd06192bec6ebcc6f15c2bcc18ffa4e71ad7))
+* update author header variants styles ([ddd9f7e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ddd9f7e64a153fdc067f93fa2d6de4b215a7f68e))
+* update author templates and assets ([7a03a35](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7a03a35e50abbe3d335fbb40f56a82222a2f4f3b))
+* update header component tests ([4a088f4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4a088f474d92c2d448b528acd8909291889bf2b6))
+* update main header component tests ([0f72790](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0f72790ff8ebfd912cf57071640396bec813cbab))
+
+
+### Config
+
+* update gatsby theme version ([07eaa3d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/07eaa3d4e033f4d00e0f460b85d481c225206dab))
+
+
+* Merge branch 'tm-3271-author-header-update' into 'master' ([92fe33c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/92fe33c940400a3916d404c7ef559463a13188a6))
+* Merge branch 'tm-3271-author-header-update' into 'master' ([6e0d9ad](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6e0d9addb3f06e12c1deebbdd72271a1878767bf))
+* Merge branch 'master' into 'tm-3271-author-header-update' ([d552070](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d55207091a573b7dd4dd7e00bcf93704ebae6f95))
+
 ## [13.0.3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v13.0.2...v13.0.3) (2023-02-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "13.0.3",
+  "version": "13.0.4",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",

package/src/components/molecules/header/variants/author/assets/expertise/expertise.module.scss

@@ -0,0 +1,44 @@
+.expertise {
+  display: flex;
+  flex-direction: column;
+  color: #3e3c47;
+
+  @include min(tablet) {
+    flex-direction: row;
+    align-items: baseline;
+  }
+
+  > span {
+    margin-bottom: 1.6rem;
+    line-height: 2.2rem;
+    font-size: 1.4rem;
+    font-weight: 600;
+
+    @include min(tablet) {
+      margin-right: 0.8rem;
+      margin-bottom: 0;
+      white-space: nowrap;
+    }
+  }
+
+  > ul {
+    display: flex;
+    flex-wrap: wrap;
+
+    > li {
+      margin-right: 0.8rem;
+      margin-bottom: 0.8rem;
+      padding: 0.2rem 0.8rem;
+      line-height: 2rem;
+      font-size: 1.2rem;
+      font-weight: 500;
+      border: 1px solid #e9e9e9;
+      border-radius: 10rem;
+      background-color: #f6f6f6;
+
+      > img {
+        margin-right: 0.75rem;
+      }
+    }
+  }
+}

package/src/components/molecules/header/variants/author/assets/expertise/index.js

@@ -0,0 +1,40 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import LazyImage from '~hooks/lazy-image';
+import { translate } from '~helpers/getters';
+import { Context } from '~context/MainProvider';
+import styles from './expertise.module.scss';
+
+export default function TemplateOne({ className = '', expertise, icon }) {
+  const { translations } = useContext(Context) || {};
+
+  return (
+    expertise && (
+      <div className={`${className} ${styles.expertise}`}>
+        <span>{translate(translations, 'expert_on', 'Expert on')}: </span>
+        <ul>
+          {expertise.map((item, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <li key={index}>
+              <LazyImage
+                src={icon || '../../../images/check.svg'}
+                alt={translate(translations, 'check', 'Check')}
+                loading="eager"
+                width={10}
+                height={10}
+              />
+              {item}
+            </li>
+          ))}
+        </ul>
+      </div>
+    )
+  );
+}
+
+TemplateOne.propTypes = {
+  className: PropTypes.string,
+  expertise: PropTypes.array,
+  icon: PropTypes.string,
+};

package/src/components/molecules/header/variants/author/assets/name/index.js

@@ -0,0 +1,30 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import LazyImage from '~hooks/lazy-image';
+import { translate } from '~helpers/getters';
+import { Context } from '~context/MainProvider';
+import styles from './name.module.scss';
+
+export default function Name({ className = '', name, icon }) {
+  const { translations } = useContext(Context) || {};
+
+  return (
+    <h1 className={`${className} ${styles.name}`}>
+      {name}
+      <LazyImage
+        className={styles.verify}
+        src={icon || '../../../images/verify.svg'}
+        alt={translate(translations, 'verified', 'Verified')}
+        loading="eager"
+        width={20}
+        height={20}
+      />
+    </h1>
+  );
+}
+
+Name.propTypes = {
+  className: PropTypes.string,
+  name: PropTypes.string,
+  icon: PropTypes.string,
+};

package/src/components/molecules/header/variants/author/assets/name/name.module.scss

@@ -0,0 +1,27 @@
+.name {
+  margin-top: 0;
+  display: inline-block;
+  line-height: 3.4rem;
+  font-size: 2.4rem;
+  font-weight: 700;
+  text-transform: capitalize;
+  color: #1c1a28;
+
+  @include min(tablet) {
+    line-height: 4.2rem;
+    font-size: 3.2rem;
+  }
+}
+
+.verify {
+  margin-left: 0.4rem;
+  height: 1.6rem;
+  width: 1.6rem;
+  vertical-align: top;
+
+  @include min(tablet) {
+    margin-left: 0.8rem;
+    height: 2.4rem;
+    width: 2.4rem;
+  }
+}

package/src/components/molecules/header/variants/author/assets/portrait/index.js

@@ -0,0 +1,40 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import LazyImage from '~hooks/lazy-image';
+import { imagePrettyUrl, getAltText } from '~helpers/getters';
+import styles from './portrait.module.scss';
+
+export default function Portrait({ className = '', author }) {
+  return (
+    author.image_object && (
+      <a
+        className={`${className} ${styles.portrait}`}
+        href={author.profile_page_path || '/'}
+        target="_blank"
+        rel="nofollow noreferrer"
+        aria-label="Profile Page Link"
+      >
+        <LazyImage
+          src={imagePrettyUrl(author.image_object.filename, 180, 180)}
+          alt={getAltText(author.image_object, author.image_alt || author.name)}
+          loading="eager"
+          width={180}
+          height={180}
+        />
+      </a>
+    )
+  );
+}
+
+Portrait.propTypes = {
+  className: PropTypes.string,
+  author: PropTypes.shape({
+    name: PropTypes.string,
+    image_alt: PropTypes.string,
+    profile_page_path: PropTypes.string,
+    image_object: PropTypes.shape({
+      filename: PropTypes.string,
+    }),
+  }),
+};

package/src/components/molecules/header/variants/author/assets/portrait/portrait.module.scss

@@ -0,0 +1,8 @@
+.portrait {
+  height: fit-content;
+  width: fit-content;
+  flex: 0 0 auto;
+  display: flex;
+  border: 1.5px solid #e9e9e9;
+  overflow: hidden;
+}

package/src/components/molecules/header/variants/author/assets/socials/index.js

@@ -0,0 +1,50 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FaInstagram } from '@react-icons/all-files/fa/FaInstagram';
+import { FaFacebookSquare } from '@react-icons/all-files/fa/FaFacebookSquare';
+import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter';
+import { IoLogoTiktok } from '@react-icons/all-files/io5/IoLogoTiktok';
+import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin';
+import styles from './socials.module.scss';
+
+export default function Socials({ className = '', author }) {
+  const socialLinks = [
+    { id: 'fb', link: author.facebook_profile, icon: <FaFacebookSquare /> },
+    { id: 'ig', link: author.instagram_profile, icon: <FaInstagram /> },
+    { id: 'li', link: author.linkedin_profile, icon: <FaLinkedin /> },
+    { id: 'tw', link: author.twitter_profile, icon: <FaTwitter /> },
+    { id: 'tt', link: author.tik_tok, icon: <IoLogoTiktok /> },
+  ].filter((socialLink) => socialLink.link);
+
+  return (
+    socialLinks.length && (
+      <div className={`${className} ${styles.socials}`}>
+        {socialLinks.map((socialLink) => (
+          // eslint-disable-next-line jsx-a11y/control-has-associated-label
+          <a
+            className={`${styles.social} author-gtm`}
+            href={socialLink.link}
+            target="_blank"
+            rel="nofollow noreferrer"
+            key={`author-box-link-${socialLink.id}`}
+            aria-label={`${socialLink.id} Link`}
+          >
+            {socialLink.icon}
+          </a>
+        ))}
+      </div>
+    )
+  );
+}
+
+Socials.propTypes = {
+  className: PropTypes.string,
+  author: PropTypes.shape({
+    facebook_profile: PropTypes.string,
+    instagram_profile: PropTypes.string,
+    linkedin_profile: PropTypes.string,
+    twitter_profile: PropTypes.string,
+    tik_tok: PropTypes.string,
+  }),
+};

package/src/components/molecules/header/variants/author/assets/socials/socials.module.scss

@@ -0,0 +1,26 @@
+.social {
+  margin-right: 0.8rem;
+  padding: 0.7rem;
+  height: 2.4rem;
+  width: 2.4rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: #1c1a28;
+
+  @include min(tablet) {
+    height: 3.2rem;
+    width: 3.2rem;
+  }
+
+  > svg {
+    height: 1.35rem;
+    width: 1.35rem;
+    color: #ffffff;
+  }
+}
+
+.social:last-child {
+  margin-right: 0;
+}

package/src/components/molecules/header/variants/author/template-four/index.js

@@ -0,0 +1,38 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import Portrait from '../assets/portrait';
+import Name from '../assets/name';
+import Socials from '../assets/socials';
+import styles from './template-four.module.scss';
+
+export default function TemplateFour({ author, icons }) {
+  return (
+    <div className={styles.container}>
+      <Portrait className={styles.portrait} author={author} />
+      <div>
+        <Name className={styles.name} name={author.name} icon={icons?.verify} />
+        <div className={styles.title}>{author.author_title}</div>
+        <Socials author={author} />
+      </div>
+    </div>
+  );
+}
+
+TemplateFour.propTypes = {
+  author: PropTypes.shape({
+    name: PropTypes.string,
+    author_title: PropTypes.string,
+    image_alt: PropTypes.string,
+    profile_page_path: PropTypes.string,
+    facebook_profile: PropTypes.string,
+    instagram_profile: PropTypes.string,
+    linkedin_profile: PropTypes.string,
+    twitter_profile: PropTypes.string,
+    tik_tok: PropTypes.string,
+    image_object: PropTypes.shape({
+      filename: PropTypes.string,
+    }),
+  }),
+  icons: PropTypes.object,
+};

package/src/components/molecules/header/variants/author/template-four/template-four.module.scss

@@ -0,0 +1,68 @@
+.container {
+  margin: 4.4rem max(1.6rem, 50% - 37.5rem / 2) 0;
+  padding: 4rem;
+  max-width: 37.5rem;
+  @include flex-direction(column);
+  align-items: center;
+  border: 1.5px solid #e9e9e9;
+  border-radius: 1.6rem;
+  background: linear-gradient(94.15deg, #f9f6e7 1.69%, #ffffff 49.54%, #dddaee 100%);
+
+  > div {
+    @include flex-direction(column);
+    align-items: center;
+  }
+
+  @include min(tablet) {
+    margin: 0;
+    padding: 3.2rem;
+    max-width: 100%;
+    border-radius: 0;
+
+    > div {
+      margin-top: 3.4rem;
+    }
+  }
+}
+
+.portrait {
+  margin-top: -6.7rem;
+  margin-bottom: 5.1rem;
+  border-radius: 50%;
+
+  @include min(tablet) {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  > img {
+    height: 9.6rem;
+    width: 9.6rem;
+
+    @include min(tablet) {
+      height: 27.6rem;
+      width: 27.6rem;
+    }
+  }
+}
+
+.name {
+  margin-bottom: 0.8rem;
+  text-align: center;
+}
+
+.title {
+  margin-bottom: 2.4rem;
+  line-height: 1.9rem;
+  font-size: 1.3rem;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-align: center;
+  text-transform: uppercase;
+  color: #6b6a72;
+
+  @include min(tablet) {
+    line-height: 2.4rem;
+    font-size: 1.6rem;
+  }
+}

package/src/components/molecules/header/variants/author/template-four/template-four.stories.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import getAuthorList from '../../../../../../../tests/factories/authors/author.factory';
+import verifyIcon from '../../../../../../../storybook-images/verify.svg';
+import TemplateFour from '.';
+
+const author = getAuthorList({})[1];
+export default {
+  title: 'Matrix-Theme/Layout/Header/Author/Template Four',
+  component: TemplateFour,
+  author: {
+    name: 'author',
+    type: { name: 'object', required: false },
+    defaultValue: null,
+    description: 'The author object.',
+  },
+  translations: {
+    name: 'translations',
+    type: { name: 'object', required: false },
+    defaultValue: {
+      verified: 'Verified LANG',
+      expert_on: 'Expert on LANG',
+    },
+    description: 'The translations object',
+  },
+};
+
+const Template = (args) => <TemplateFour {...args} />;
+export const Default = Template.bind({});
+Default.args = {
+  // eslint-disable-next-line object-shorthand
+  author: author,
+  icons: {
+    verify: verifyIcon,
+  },
+  translations: {
+    verified: 'Verified LANG',
+    expert_on: 'Expert on LANG',
+  },
+};

package/src/components/molecules/header/variants/author/template-four/template-four.test.js

@@ -0,0 +1,38 @@
+/* eslint-disable no-multi-assign */
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import TemplateFour from '.';
+
+describe('Author Header', () => {
+  test('Template Four', () => {
+    const { container, getByText } = render(
+      <TemplateFour
+        author={{
+          name: 'Ida Moen Olsen',
+          author_title: 'Online Casino Specialist',
+          image_object: {
+            filename:
+              'https://assets-srv.s3.eu-west-1.amazonaws.com/2020-09-25-15-01-46-imagesjpeg-191264.png',
+            width: '150',
+            height: '150',
+          },
+          image_alt: 'image-alt',
+          facebook_profile: 'https://www.irishluck.ie',
+          instagram_profile: 'https://www.irishluck.ie',
+          linkedin_profile: 'https://www.irishluck.ie',
+          twitter_profile: 'https://www.irishluck.ie',
+          tik_tok: 'https://www.irishluck.ie',
+          profile_page_path: '/',
+        }}
+      />
+    );
+    expect(getByText('Ida Moen Olsen')).toBeTruthy();
+    expect(getByText('Online Casino Specialist')).toBeTruthy();
+    expect(container.querySelectorAll('a')).toHaveLength(6);
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});

package/src/components/molecules/header/variants/author/template-one/index.js

@@ -0,0 +1,49 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import Portrait from '../assets/portrait';
+import Name from '../assets/name';
+import Socials from '../assets/socials';
+import Expertise from '../assets/expertise';
+import styles from './template-one.module.scss';
+
+export default function TemplateOne({ author, icons }) {
+  return (
+    <div className={styles.container}>
+      <Portrait className={styles.portrait} author={author} />
+      <div>
+        <div className={styles.title}>{author.author_title}</div>
+        <Name className={styles.name} name={author.name} icon={icons?.verify} />
+        <Socials className={styles.socials} author={author} />
+        {author.biography && (
+          <div
+            className={styles.biography}
+            dangerouslySetInnerHTML={{ __html: author.biography }}
+          />
+        )}
+        <Expertise expertise={author.expertise} icon={icons?.expertise} />
+      </div>
+    </div>
+  );
+}
+
+TemplateOne.propTypes = {
+  author: PropTypes.shape({
+    name: PropTypes.string,
+    author_title: PropTypes.string,
+    biography: PropTypes.string,
+    image_alt: PropTypes.string,
+    expertise: PropTypes.array,
+    icon: PropTypes.object,
+    profile_page_path: PropTypes.string,
+    facebook_profile: PropTypes.string,
+    instagram_profile: PropTypes.string,
+    linkedin_profile: PropTypes.string,
+    twitter_profile: PropTypes.string,
+    tik_tok: PropTypes.string,
+    image_object: PropTypes.shape({
+      filename: PropTypes.string,
+    }),
+  }),
+  icons: PropTypes.object,
+};

package/src/components/molecules/header/variants/author/template-one/template-one.module.scss

@@ -0,0 +1,88 @@
+.container {
+  margin: 1.8rem max(1.6rem, 50% - 37.5rem / 2) 0;
+  padding: 1.6rem;
+  max-width: 37.5rem;
+  @include flex-direction(column);
+  border: 1.5px solid #e9e9e9;
+  border-radius: 1.6rem;
+  background-color: #ffffff;
+
+  @include min(tablet) {
+    margin: 1.8rem max(1.6rem, 50% - calc(var(--main-container-max) - 4.8rem) / 2) 0;
+    padding: 2.4rem;
+    max-width: calc(var(--main-container-max) - 4.8rem);
+    flex-direction: row;
+
+    > div {
+      margin-left: 4.8rem;
+      padding-top: 1.2rem;
+    }
+  }
+}
+
+.portrait {
+  margin-top: -3.4rem;
+  margin-bottom: 2.4rem;
+  border-radius: 1.6rem;
+
+  @include min(tablet) {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  > img {
+    height: 10.4rem;
+    width: 10.4rem;
+
+    @include min(tablet) {
+      height: 27.6rem;
+      width: 27.6rem;
+    }
+  }
+}
+
+.name {
+  margin-bottom: 1.6rem;
+}
+
+.title {
+  margin-bottom: 0.8rem;
+  line-height: 1.9rem;
+  font-size: 1.3rem;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: #6b6a72;
+
+  @include min(tablet) {
+    line-height: 2.4rem;
+    font-size: 1.6rem;
+  }
+}
+
+.socials {
+  margin-bottom: 2.4rem;
+}
+
+.biography {
+  margin-bottom: 2.4rem;
+  height: 13.5rem;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 2.7rem;
+  font-size: 1.6rem;
+  font-weight: 400;
+  color: #3e3c47;
+
+  @include min(tablet) {
+    height: 5.4rem;
+    -webkit-line-clamp: 2;
+  }
+
+  img {
+    display: none;
+  }
+}