gatsby-core-theme 30.0.85 → 30.0.87

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## [30.0.87](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.86...v30.0.87) (2024-02-22)
+
+
+### Bug Fixes
+
+* add continue reading ([ca3f8f6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ca3f8f61994430fbeca59b6d5416353232ba169c))
+* add image as well ([aa901ce](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/aa901ceaf43ed2a246f6b4b98f0cab73df7601dc))
+* update tests ([4033148](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4033148d8f5b1848031a309006d92252c9c70bba))
+
+
+* Merge branch 'tm-3980-author-box' into 'master' ([8f72950](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8f72950a5ea153c3a27a47ee91afe804604beaee))
+
+## [30.0.86](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.85...v30.0.86) (2024-02-22)
+
+
+### Bug Fixes
+
+* used phonenum for helpline ([00ac2d5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/00ac2d5dc62314c76aadf2b09cbe7d92b2ceb5ef))
+
+
+* Merge branch 'tm-4047-market-helpline' into 'master' ([d2ae2b3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d2ae2b3a4399146c9e4f501d18a99e63007edcbf))
+* Merge remote-tracking branch 'origin' into tm-4047-market-helpline ([713c588](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/713c588b487c531740c9519fdd703b01d464ef69))
+
 ## [30.0.85](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.84...v30.0.85) (2024-02-21)
 
 

package/package.json

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

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

@@ -4,7 +4,7 @@
   align-self: stretch;
   position: relative;
   margin-bottom: 1rem;
-  @include min(laptop){
+  @include min(laptop) {
     grid-column: 2/3;
     grid-row: 1/2;
   }
@@ -15,13 +15,36 @@
   bottom: 0;
 }
 
+.contReadText {
+  text-decoration: underline;
+}
+
 .biography {
   font-size: 1.4rem;
   line-height: 2.2rem;
   color: #515156;
   margin-bottom: 1.6rem;
-  @include min(laptop){
-    margin-bottom: .8rem;
+  @include min(laptop) {
+    margin-bottom: 0.8rem;
+  }
+
+  &.showReadMore {
+    max-height: 88px;
+    min-height: 66px;
+    overflow: hidden;
+    transition: max-height 0s ease-out;
+    cursor: pointer;
+
+    @include max(mobile) {
+      max-height: 110px;
+    }
+
+    &.open {
+      max-height: 2000px;
+      transition: max-height 0s ease-in;
+      cursor: default;
+      pointer-events: none;
+    }
   }
 
   p {
@@ -44,8 +67,8 @@
   text-transform: capitalize;
 }
 
-.templateTwo{
-  @include min(tablet){
-    padding-left:13rem;
+.templateTwo {
+  @include min(tablet) {
+    padding-left: 13rem;
   }
 }

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

@@ -1,4 +1,4 @@
-import React, { useContext, useRef } from 'react';
+import React, { useContext, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
 import { translate } from '~helpers/getters';
@@ -13,14 +13,32 @@ export default function AuthorDescription({
 }) {
   const { translations } = useContext(Context) || {};
   const biographyRef = useRef(null);
+  const [isReadMore, setIsReadMore] = useState(true);
+
+  const toggleReadMore = () => {
+    biographyRef.current.classList.add(styles.open);
+    setIsReadMore(false);
+  };
 
   return (
     <div className={`${styles.description || ''} ${styles[template]}`}>
       <div
         ref={biographyRef}
-        className={`${styles.biography}`}
+        className={`${styles.biography} ${
+          author?.biography?.split(' ').length > 30 && styles.showReadMore
+        }`}
+        role="button"
+        aria-label="Toggle biography read more"
+        tabIndex={0}
+        onClick={toggleReadMore}
+        onKeyDown={toggleReadMore}
         dangerouslySetInnerHTML={{
-          __html: author?.biography,
+          __html:
+            author?.biography?.split(' ').length > 30 && isReadMore
+              ? `${author?.biography?.split(' ').slice(0, 30).join(' ')} <span class='${
+                  styles.contReadText
+                }'>...${translate(translations, 'cont_read', 'continue reading')}</span>`
+              : author?.biography,
         }}
       />
       {author?.profile_page_path && (

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

@@ -4,6 +4,7 @@ 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';
+import { FaRegEnvelope } from '@react-icons/all-files/fa/FaRegEnvelope';
 
 export const TwitterIcon = () => (
   <svg
@@ -24,6 +25,7 @@ const socialIcons = {
   twitter: <TwitterIcon />,
   tiktok: <IoLogoTiktok title="Tiktok Icon" />,
   wikipedia: <FaWikipediaW title="Wikipedia" />,
+  message: <FaRegEnvelope title="Envelope icon" />,
 };
 
 export default (author) => [
@@ -33,4 +35,5 @@ export default (author) => [
   { 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 },
+  { id: 'em', link: author?.email_address, icon: socialIcons?.message },
 ];

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

@@ -21,7 +21,7 @@ describe('author box component', () => {
     const author = authorObject;
 
     author.biography =
-      "The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout. A practice not without controversy, laying out";
+      "The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout";
 
     const { container, getByText } = render(<AuthorBox author={author} />);
 

package/src/components/atoms/author-box/template-three/author-box.test.js

@@ -21,7 +21,7 @@ describe('author box component', () => {
     const author = authorObject;
 
     author.biography =
-      "The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout. A practice not without controversy, laying out";
+      "The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout.";
 
     const { container, getByText } = render(<AuthorBox author={author} />);
 

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

@@ -21,7 +21,7 @@ describe('author box component', () => {
     const author = authorObject;
 
     author.biography =
-      "The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout. A practice not without controversy, laying out";
+      "The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout.";
 
     const { container, getByText } = render(<AuthorBox author={author} />);
 

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

@@ -38,7 +38,6 @@ const Footer = (props) => {
     </a>
     in order to get help.
   </p>`;
-  const phoneNum = '- 89 241 5401';
 
   const footerLogos = getExtraField(props.section?.extra_fields, 'logos');
 
@@ -75,8 +74,8 @@ const Footer = (props) => {
     dmcaWidth: 100,
     dmcaHeight: 30,
     securityIcon: '../../../images/security.svg',
-    helpText: getExtraField(props.section?.extra_fields, 'helpline') || helpText,
-    phoneNum,
+    helpText,
+    phoneNum: getExtraField(props.section?.extra_fields, 'helpline') || null,
   };
 
   return footerContent(props);