gatsby-core-theme 30.0.82 → 30.0.83

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+## [30.0.83](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.82...v30.0.83) (2024-02-20)
+
+
+### Bug Fixes
+
+* add template two and three ([46b4da8](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/46b4da87222f44839f9ccdc895ae87c2b21a1598))
+* align template two ([e275e44](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e275e44f98196f29e7aeb3e2dab05a06cbda1dc8))
+* author box structure ([4c01e58](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4c01e58f3de59ece3fff4735ddc25c2429aebcf6))
+* clean up and add storybook ([18dc6e3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/18dc6e3961d7f29bdf6a04e2bcf70ccd6e1b48a4))
+* fixed props ([17e5774](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/17e57748e1c853ec5c8a2941760ad9c62c2be39c))
+* make style ([c3ee782](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c3ee782e1d15b3a0fe3762c1588da1ffbaccfcd4))
+* make style ([7681944](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7681944fd4d74cccba968697f27b011e43bc80d1))
+* make style ([be17043](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/be17043532382b48c2c2c046a07faa32d9f4debd))
+* make style ([05a40af](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/05a40afbb9637bf84497b64ffdb5cc3e3da8573f))
+* make style ([50d5902](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/50d5902d0e05e7ab8a130fdd0dcb6ca4032e98cc))
+* make style ([f669d92](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f669d9205efa71258415d3f769f9a6841b2ec34f))
+* make style for template three+ ([0736e82](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0736e829c35cfdc6b2b701ad9aeff2d3deecd057))
+* refactor code ([7d68a6d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7d68a6df291647cddf2ee70705f8a89f18c74e74))
+* remove fact check ([e5c945f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e5c945fa0f6838161ce21deb2dd1ee5717873be7))
+* storybbok ([4a35785](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4a35785617f50f6b144b949fc395447456a4a43e))
+
+
+* Merge branch 'tm-4047-market-helpline' into 'master' ([c467469](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c4674691404385059ec9605fda6011716dc3ad6e))
+* Merge branch 'tm-3980-author-box' into 'master' ([7c21f5c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7c21f5cc42a87797a27033b25076db64e61a4190))
+* Merge branch 'master' into tm-3980-author-box ([225b338](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/225b338ac49a17a16b15123e2851d075d85be732))
+* Merge branch 'master' into tm-3980-author-box ([2fb1dcb](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2fb1dcb1aae1860cdebde701c895793df57098c5))
+
 ## [30.0.82](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.81...v30.0.82) (2024-02-20)
 
 

package/package.json

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

package/src/components/atoms/author-box/description/author-description.module.scss

@@ -0,0 +1,51 @@
+.description {
+  @include flex-direction(column);
+  flex: 3;
+  align-self: stretch;
+  position: relative;
+  margin-bottom: 1rem;
+  @include min(laptop){
+    grid-column: 2/3;
+    grid-row: 1/2;
+  }
+}
+.continueRead {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+
+.biography {
+  font-size: 1.4rem;
+  line-height: 2.2rem;
+  color: #515156;
+  margin-bottom: 1.6rem;
+  @include min(laptop){
+    margin-bottom: .8rem;
+  }
+
+  p {
+    display: inline-block;
+  }
+
+  a {
+    display: initial;
+  }
+}
+
+.readMore {
+  @include flex-align(center, flex-start);
+  color: #2563eb;
+  font-size: 1.4rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 2.1rem;
+  gap: 0.8rem;
+  text-transform: capitalize;
+}
+
+.templateTwo{
+  @include min(tablet){
+    padding-left:13rem;
+  }
+}

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

@@ -0,0 +1,49 @@
+import React, { useContext, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
+import { translate } from '~helpers/getters';
+import styles from './author-description.module.scss';
+import Link from '~hooks/link';
+import { Context } from '~context/MainProvider';
+
+export default function AuthorDescription({
+  author,
+  contReadIcon = <FaArrowRight title="Right-pointing Arrow Icon" />,
+  template = '',
+}) {
+  const { translations } = useContext(Context) || {};
+  const biographyRef = useRef(null);
+
+  return (
+    <div className={`${styles.description || ''} ${styles[template]}`}>
+      <div
+        ref={biographyRef}
+        className={`${styles.biography}`}
+        dangerouslySetInnerHTML={{
+          __html: author?.biography,
+        }}
+      />
+      {author?.profile_page_path && (
+        <Link
+          to={author?.profile_page_path}
+          title={author?.name}
+          className={`${styles.readMore || ''} author-gtm`}
+        >
+          {translate(translations, 'cont_read', 'continue reading')}
+          {contReadIcon}
+        </Link>
+      )}
+    </div>
+  );
+}
+
+AuthorDescription.propTypes = {
+  author: PropTypes.shape({
+    name: PropTypes.string,
+    biography: PropTypes.string,
+    expertise: PropTypes.arrayOf(PropTypes.string),
+    profile_page_path: PropTypes.string,
+  }).isRequired,
+  contReadIcon: PropTypes.node,
+  template: PropTypes.string,
+};

package/src/components/atoms/author-box/details/author-details.module.scss

@@ -0,0 +1,210 @@
+.details {
+  display: flex;
+  gap: 1.6rem;
+  font-size: 1.4rem;
+  line-height: 2.2rem;
+  color: #6e7074;
+  gap: 1.6rem;
+  @include flex-direction(row);
+  @include min(laptop) {
+    grid-column: 1/2;
+    grid-row: 1/3;
+  }
+
+  > img {
+    border-radius: 1.2rem;
+    border: 1.5px solid #ececec;
+    background: lightgray 50% / cover no-repeat;
+    height: 9.65rem;
+    width: 9.65rem;
+    object-fit: contain;
+    @include min(laptop) {
+      width: 15.6rem;
+      height: 15.6rem;
+    }
+  }
+}
+
+.information {
+  @include flex-direction(column);
+  padding: 0 12px 0 0;
+  flex: 1;
+  padding: 0;
+  justify-content: space-around;
+  @include min(tablet) {
+    min-width: 16rem;
+    max-height: 10rem;
+  }
+}
+
+.name {
+  color: #1b1b1c;
+  font-size: 1.6rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 2.7rem;
+
+  > svg {
+    margin-left: 0.4rem;
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+}
+
+.title {
+  color: #64646d;
+  font-size: 1.4rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 2.2rem;
+}
+
+.socialIcons {
+  display: flex;
+  margin-bottom: 1rem;
+  margin: 0 0 0;
+
+  a {
+    @include flex-align(center, center);
+    width: 24px;
+    height: 24px;
+    background: #262629;
+    margin-right: 0.8rem;
+    border-radius: 100%;
+
+    &:last-of-type {
+      margin: 0;
+    }
+
+    img,
+    svg {
+      fill: #fff;
+      width: 1.2rem;
+    }
+  }
+}
+
+.ribbon {
+  border-radius: 10rem;
+  padding: 0.4rem 0.8rem;
+  background: #165af8;
+  color: #fff;
+  text-align: center;
+  font-size: 0.9rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  max-height: 1.9rem;
+}
+
+.ribbonAndExpert {
+  @include flex-direction(row);
+  @include flex-align(center, start);
+  margin-top: 0.8rem;
+  margin-bottom: 1.6rem;
+  gap: 1.6rem;
+  @include min(tablet){
+    grid-column: 1/3;
+    grid-row: 2/3;
+  }
+}
+
+.authorStats {
+  padding-top: 2.4rem;
+  @include min(tablet){
+    grid-column: 1/3;
+    grid-row: 3/4;
+    padding-top: 1rem;
+  }
+  p {
+    display: inline-block;
+    margin-right: 1.6rem;
+    span {
+      color: #1b1b1c;
+      font-size: 1.4rem; 
+      font-weight: 700;
+      line-height: 2.2rem;
+      margin-right: .4rem;
+    }
+    &:nth-child(2){
+      &::first-letter{
+        color: #1b1b1c;
+        font-size: 1.4rem;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 2.2rem;
+      }
+    }
+  }
+}
+
+.templateTwo {
+  @include flex-direction(column);
+  @include min(tablet){
+    @include flex-direction(row);
+    @include flex-align(center, start);
+  }
+  > img {
+    width: 8rem;
+    height: 8rem;
+    border-radius: 50%;
+    @include min(tablet){
+      width: 11.2rem;
+      height: 11.2rem;
+    }
+    @include min(tablet){
+      width: 12.8rem;
+      height: 12.8rem;
+    }
+  }
+  .socialIcons{
+    @include min(tablet){
+      position: absolute;
+      right: 2.4rem;
+      top: 2.4rem;
+    }
+  }
+  > div {
+    > p {
+      > span {
+        font-size: 2rem;
+      }
+    }
+  }
+}
+
+.templateThree{
+  display: flex;
+  font-size: 1.4rem;
+  line-height: 2.2rem;
+  color: #6e7074;
+  gap: 1.6rem;
+  @include flex-direction(row);
+  @include min(tablet) {
+    @include flex-direction(row);
+  }
+  
+  @include min(laptop){
+    grid-column: 1/2;
+    grid-row: 1/4;
+    @include flex-direction(column);
+  }
+  
+  > img {
+    border-radius: 100%;
+    border: 1.5px solid #ececec;
+    background: lightgray 50% / cover no-repeat;
+    height: 9.6rem;
+    width: 9.6rem;
+    @include min(tablet){
+        width: 10.8rem;
+        height: 10.8rem;
+    }
+    @include min(laptop) {
+      width: 12.4rem;
+      height: 12.4rem;
+    }
+  }
+}

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

@@ -0,0 +1,97 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { imagePrettyUrl, getAltText, translate } from '~helpers/getters';
+import styles from './author-details.module.scss';
+import LazyImage from '~hooks/lazy-image';
+import socialIcons from '../icons/socialIcons';
+import FactCheckIcon from '../../../../images/icons/fact-check';
+import { Context } from '~context/MainProvider';
+
+export default function AuthorDetails({
+  author,
+  width = 180,
+  height = 180,
+  verifiedIconWidth = 14,
+  verifiedIconHeight = 14,
+  template = '',
+  ribbon = false,
+  extraInfo = false,
+}) {
+  const { translations } = useContext(Context) || {};
+  return (
+    <div className={`${styles.details || ''} ${styles[template]}`}>
+      {author?.image_object && (
+        <LazyImage
+          src={imagePrettyUrl(author?.image_object.filename, width, height)}
+          alt={getAltText(author?.image_object, author?.image_alt || author?.name)}
+          width={width}
+          height={height}
+        />
+      )}
+      <div className={styles.information || ''}>
+        <p className={styles.name || ''}>
+          <span>{author?.name}</span>
+          <FactCheckIcon width={verifiedIconWidth} height={verifiedIconHeight} color="#457BF9" />
+        </p>
+        <div className={styles.ribbonAndExpert}>
+          {author?.author_title && <p className={styles.title || ''}>{author?.author_title}</p>}
+          {author?.ribbon_label && ribbon && (
+            <div className={styles.ribbon || ''}>{author?.ribbon_label}</div>
+          )}
+        </div>
+        {socialIcons(author).length > 0 && (
+          <p className={styles.socialIcons || ''}>
+            {socialIcons(author)
+              .filter((socialLink) => socialLink.link)
+              .map((filteredLinks) => (
+                // eslint-disable-next-line jsx-a11y/control-has-associated-label
+                <a
+                  href={filteredLinks.link}
+                  className="author-gtm"
+                  target="_blank"
+                  rel="nofollow noreferrer"
+                  key={`author-box-link-${filteredLinks.id}`}
+                  aria-label={`${filteredLinks.id} Link`}
+                >
+                  {filteredLinks.icon}
+                </a>
+              ))}
+          </p>
+        )}
+        {extraInfo && (author?.experience || author?.pages_count) && (
+          <div className={styles.authorStats}>
+            {author?.pages_count && (
+              <p>
+                <span>{author?.pages_count}</span>
+                {translate(translations, 'written_articles', 'Written articles')}
+              </p>
+            )}
+            {author?.experience && <p>{author?.experience}</p>}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+AuthorDetails.propTypes = {
+  author: PropTypes.shape({
+    image_object: PropTypes.shape({
+      filename: PropTypes.string,
+    }),
+    image_alt: PropTypes.string,
+    name: PropTypes.string,
+    author_title: PropTypes.string,
+    ribbon_label: PropTypes.string,
+    experience: PropTypes.string,
+    pages_count: PropTypes.string,
+  }),
+  width: PropTypes.number,
+  height: PropTypes.number,
+  verifiedIconWidth: PropTypes.number,
+  verifiedIconHeight: PropTypes.number,
+  socialIcons: PropTypes.shape({}),
+  template: PropTypes.string,
+  ribbon: PropTypes.bool,
+  extraInfo: PropTypes.bool,
+};

package/src/components/atoms/author-box/icons/socialIcons.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { FaInstagram } from '@react-icons/all-files/fa/FaInstagram';
+import { FaFacebookSquare } from '@react-icons/all-files/fa/FaFacebookSquare';
+import { IoLogoTiktok } from '@react-icons/all-files/io5/IoLogoTiktok';
+import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin';
+import { FaWikipediaW } from '@react-icons/all-files/fa/FaWikipediaW';
+
+export const TwitterIcon = () => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 13 12"
+    fill="currentcolor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M9.97574 0H11.9181L7.67469 4.84989L12.6667 11.4495H8.75802L5.69659 7.44685L2.19363 11.4495H0.250147L4.78881 6.26203L0 0H4.0079L6.7752 3.65856L9.97574 0ZM9.29408 10.287H10.3703L3.42314 1.1015H2.26822L9.29408 10.287Z" />
+  </svg>
+);
+
+const socialIcons = {
+  facebook: <FaFacebookSquare title="Facebook Icon" />,
+  instagram: <FaInstagram title="Instagram Icon" />,
+  linkedin: <FaLinkedin title="Linkedin Icon" />,
+  twitter: <TwitterIcon />,
+  tiktok: <IoLogoTiktok title="Tiktok Icon" />,
+  wikipedia: <FaWikipediaW title="Wikipedia" />,
+};
+
+export default (author) => [
+  { id: 'fb', link: author?.facebook_profile, icon: socialIcons?.facebook },
+  { id: 'ig', link: author?.instagram_profile, icon: socialIcons?.instagram },
+  { id: 'li', link: author?.linkedin_profile, icon: socialIcons?.linkedin },
+  { id: 'tw', link: author?.twitter_profile, icon: socialIcons?.twitter },
+  { id: 'tt', link: author?.tik_tok, icon: socialIcons?.tiktok },
+  { id: 'wk', link: author?.personal_website, icon: socialIcons?.wikipedia },
+];