gatsby-core-theme 44.5.0-poc.2 → 44.5.0

package/src/components/organisms/comments/comment-tree/comment-tree.module.scss

@@ -0,0 +1,47 @@
+.comment_0{
+    margin-left: 0;
+
+    >div>div{
+        z-index: 1;
+    }
+}
+
+.comment_1{
+    @include min(tablet){
+        margin-left: 5.6rem;
+    }
+
+    margin-left: 2.4rem;
+}
+
+.comment_2{
+    @include min(tablet){
+        margin-left: 11.2rem;
+    }
+
+    margin-left: 4rem;
+}
+
+.isReply{
+    position: relative;
+
+    &::before{
+        content: "";
+        position: absolute;
+        right: 100%;
+        border-left: var(--comment-tree-border, .1rem solid #CFC7C0);
+        border-bottom: var(--comment-tree-border, .1rem solid #CFC7C0);
+        border-bottom-left-radius: var(--comment-tree-border-radius, 2rem);
+        bottom: 50%;
+        height: calc(50% + 8.5rem);
+        width: 1.1rem;
+
+        @include min(tablet){
+            width: 3rem;
+        }
+    }
+
+    + .isReply::before{
+        height: calc(50% + 25.5rem);
+    }
+}

package/src/components/organisms/comments/comment-tree/index.js

@@ -1,15 +1,16 @@
 import React from "react";
 
 import PropTypes, { arrayOf } from 'prop-types';
-import keygen from '~helpers/keygen';
 import Comment from "../../../molecules/comment";
 
-const CommentTree = React.memo(({ pageContext, comment, authors, depth = 0, cookieComments }) => 
-  <div key={keygen()} style={{ marginLeft: depth * 56 }}>
-    <Comment pageContext={pageContext} comment={comment} authors={authors} isReply={depth > 0} userInteractions={cookieComments} />
+import styles from './comment-tree.module.scss';
+
+const CommentTree = React.memo(({ pageContext, comment, authors, depth = 0 }) => 
+  <div key={comment.comment_id} className={`${styles?.[`comment_${depth}`]} ${depth > 0 && styles.isReply}`}>
+    <Comment pageContext={pageContext} comment={comment} authors={authors} isReply={depth > 0} />
     {comment.replies?.map(reply => (
       <CommentTree 
-        key={keygen()} 
+        key={reply.comment_id} 
         comment={reply} 
         authors={authors} 
         depth={depth + 1}
@@ -22,11 +23,11 @@ const CommentTree = React.memo(({ pageContext, comment, authors, depth = 0, cook
 CommentTree.propTypes = {
   pageContext: PropTypes.shape({}),
   comment: PropTypes.shape({
-    replies: arrayOf(PropTypes.shape({}))
+    replies: arrayOf(PropTypes.shape({})),
+    comment_id: PropTypes.number
   }),
   authors: PropTypes.shape({}),
   depth: PropTypes.number, 
-  cookieComments: PropTypes.arrayOf(PropTypes.string)
 };
 
 export default CommentTree;

package/src/components/organisms/comments/index.js

@@ -1,39 +1,27 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import CommentTree from './comment-tree';
 import LeaveCommentForm from '../../molecules/leave-comment-form';
+import { VotesProvider } from '../../../context/VotesProvider';
 
 const Comments = ({ pageContext }) => {
   const { comments, authors } = pageContext;
-  const [cookieComments, setCookieComments] = useState([]);
-
-  useEffect(() => {
-    const storedVotes =
-      document.cookie
-        .split('; ')
-        .find((row) => row.startsWith('comments='))
-        ?.split('=')[1]
-        ?.split(',')
-        .filter(Boolean) || [];
-
-    setCookieComments(storedVotes);
-  }, []);
-
-  if (!comments) return null;
 
   return (
     <div>
       <LeaveCommentForm page={pageContext.page} />
-      {comments.map((comment) => (
-        <CommentTree
-          key={comment.comment_id}
-          pageContext={pageContext}
-          comment={comment}
-          authors={authors?.authors}
-          depth={0}
-          cookieComments={cookieComments}
-        />
-      ))}
+      {comments && <VotesProvider>
+        {comments.map((comment) => (
+          <CommentTree
+            key={comment.comment_id}
+            pageContext={pageContext}
+            comment={comment}
+            authors={authors?.authors}
+            depth={0}
+          />
+        ))}
+      </VotesProvider>
+      }
     </div>
   );
 };

package/src/components/organisms/cookie-consent/index.js

@@ -1,70 +1,78 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable import/no-extraneous-dependencies */
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import React, { useState, useEffect, lazy, Suspense } from "react";
+import PropTypes from "prop-types";
 
-import useTranslate from '~hooks/useTranslate/useTranslate';
-import { setCookie, getCookie } from '~helpers/cookies';
-import CookieModal from '../../molecules/cookie-modal';
-import styles from './cookie-consent.module.scss';
+import useTranslate from "~hooks/useTranslate/useTranslate";
+import { setCookie, getCookie } from "~helpers/cookies";
+import styles from "./cookie-consent.module.scss";
 
 const CookieConsent = ({
-  acceptText = 'Accept',
-  rejectText = 'Reject',
+  acceptText = "Accept",
+  rejectText = "Reject",
   settingsCookie,
   children,
-  cookieName = 'CookieConsent',
-  logo = '/images/logo.svg',
+  cookieName = "CookieConsent",
+  logo = "/images/logo.svg",
   icon = null,
-  showRejectButton=false
+  showRejectButton = false,
 }) => {
   const [showModal, setShowModal] = useState(false);
 
   const [showCookieConsent, setShowCookieConsent] = useState(false);
 
+  const CookieModal = lazy(() => import("../../molecules/cookie-modal"));
+
   // when user declines
   const handleDecline = () => {
-    setCookie(cookieName, false, 365, '/');
-    setCookie('showCookie', false, 365, '/');
+    setCookie(cookieName, false, 365, "/");
+    setCookie("showCookie", false, 365, "/");
     setShowCookieConsent(false);
     setShowModal(false);
-    document.body.style.overflow = 'auto';
+    document.body.style.overflow = "auto";
   };
 
   // when user accepts
   const handleAccept = () => {
-    setCookie(cookieName, true, 365, '/');
-    setCookie('showCookie', false, 365, '/');
+    setCookie(cookieName, true, 365, "/");
+    setCookie("showCookie", false, 365, "/");
     setShowCookieConsent(false);
     setShowModal(false);
-    document.body.style.overflow = 'auto';
+    document.body.style.overflow = "auto";
   };
 
   const handleShowModalClick = () => {
     setShowModal(!showModal);
-    document.body.style.overflow = 'hidden';
+    document.body.style.overflow = "hidden";
   };
 
   const closeModal = () => {
     setShowModal(false);
-    document.body.style.overflow = 'auto';
+    document.body.style.overflow = "auto";
   };
 
   useEffect(() => {
-    if (typeof window !== `undefined` && getCookie('showCookie') !== "false") {
+    if (typeof window !== `undefined` && getCookie("showCookie") !== "false") {
       setShowCookieConsent(true);
     }
   }, []);
 
-  const settingCookieText = useTranslate('cookie_setting_button', 'Cookie Setting');
+  const settingCookieText = useTranslate(
+    "cookie_setting_button",
+    "Cookie Setting"
+  );
 
   return (
     <>
-      <div className={`${styles.cookieConsent} ${(showCookieConsent && styles.show) || ''}`}>
-        <div className={`${styles?.consent || ''}`}>
-          <div className={styles?.content || ''}>{children}</div>
-          <div className={styles?.buttonsContainer || ''}>
+      <div
+        className={`${styles.cookieConsent} ${
+          (showCookieConsent && styles.show) || ""
+        }`}
+      >
+        <div className={`${styles?.consent || ""}`}>
+          <div className={styles?.content || ""}>{children}</div>
+          <div className={styles?.buttonsContainer || ""}>
             {settingsCookie && (
               <button
                 onClick={handleShowModalClick}
@@ -90,20 +98,22 @@ const CookieConsent = ({
               className="cookie-consent-gtm btn-cta"
               type="button"
             >
-              {useTranslate('cookie_accept_button', acceptText)}
+              {useTranslate("cookie_accept_button", acceptText)}
               {icon && icon}
             </button>
           </div>
         </div>
       </div>
       {settingsCookie && showModal && (
-        <CookieModal
-          logo={logo}
-          hide={!showModal}
-          handleAcceptCookies={handleAccept}
-          handleDeclineCookies={handleDecline}
-          closeModal={closeModal}
-        />
+        <Suspense fallback={null}>
+          <CookieModal
+            logo={logo}
+            hide={!showModal}
+            handleAcceptCookies={handleAccept}
+            handleDeclineCookies={handleDecline}
+            closeModal={closeModal}
+          />
+        </Suspense>
       )}
     </>
   );
@@ -116,7 +126,11 @@ CookieConsent.propTypes = {
   settingsCookie: PropTypes.bool,
   cookieName: PropTypes.string,
   logo: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.any]),
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+    PropTypes.any,
+  ]),
   icon: PropTypes.node,
 };
 

package/src/components/organisms/form/fields/fields.module.scss

@@ -29,7 +29,7 @@
   @include flex-align(flex-end, flex-start);
 
   > span {
-    font-size: 1.4rem;
+    font-size: 1.2rem;
     font-weight: 400;
     line-height: 2.2rem;
   }
@@ -105,7 +105,7 @@
   cursor: pointer;
   width: 4.8rem;
   inset: 0;
-  background-color: #ccc;
+  background-color: #AFAFB0;
   transition: 0.4s;
   border-radius: 3.4rem;
   height: 2.4rem;
@@ -137,11 +137,14 @@ input:checked + .slider::before {
 
 .switchLabel{
   margin-left: 4.5rem;
+  font-size: 1.6rem;
+  font-weight: 400;
+  color: var(--switch-bg, #3C3C40);
 }
 
 .errorMsg {
   font-size: 1.2rem;
-  color: #DD4B39;
+  color: var(--comment-error-color, #DD4B39);;
   font-weight: 400;
   line-height: 1.8rem;
   grid-column: 1/-1;
@@ -154,7 +157,7 @@ input:checked + .slider::before {
   bottom: 3.5rem;
   right: 1.5rem;
   font-size: 1.2rem;
-  color: #DD4B39;
+  color: var(--comment-length-warning-color, #DD4B39);
   font-weight: 400;
   line-height: 1.8rem;
 }

package/src/components/organisms/form/fields/index.js

@@ -5,13 +5,21 @@
 /* eslint-disable import/prefer-default-export */
 /* eslint-disable react/react-in-jsx-scope */
 /* eslint-disable no-undef */
-import React, {useState} from 'react';
-import styles from './fields.module.scss';
-import { generatePlaceholderString } from '../../../../helpers/generators.mjs';
-import useTranslate from '~hooks/useTranslate/useTranslate';
+import React, { useState } from "react";
+import styles from "./fields.module.scss";
+import { generatePlaceholderString } from "../../../../helpers/generators.mjs";
+import useTranslate from "~hooks/useTranslate/useTranslate";
 
 const getField = (field, handleChange, elements, state) => {
-  const { type, id, translationKey, label, placeholder, icon = null, ...props } = field;
+  const {
+    type,
+    id,
+    translationKey,
+    label,
+    placeholder,
+    icon = null,
+    ...props
+  } = field;
   const [rating, setRating] = useState(3);
   const { errorMsg, ...restProps } = props;
 
@@ -37,38 +45,33 @@ const getField = (field, handleChange, elements, state) => {
             <span>{`${elements[id].length}/${field.maxLength}`}</span>
           )}
           {field.minlength && (
-            <span className={styles.lengthWarning}>{`Minimum ${field.minlength} words`}</span>
+            <span className={styles.lengthWarning}>
+              {useTranslate(
+                "minimum_chars",
+                `Minimum ${field.minlength} chars`
+              )}
+            </span>
+          )}
+          {field?.error?.errorMsg && (
+            <span className={styles.errorMsg}>
+              {useTranslate(
+                field?.error?.translationKey,
+                field?.error?.errorMsg
+              )}
+            </span>
           )}
-          {field.errorMsg && <span className={styles.errorMsg}>{field.errorMsg}</span>}
         </div>
       );
     case "checkbox":
       return (
-        <div className={styles.checkboxGroup || ''}>
-          {field.options.map((option) => field.switch ? (
-            <label key={option.id} className={styles.switch} htmlFor={option.id}>
-              <input
-                id={option.id}
-                name={option.id}
-                type={type}
-                checked={elements[option.id] === 'true'}
-                onChange={(e) => handleChange(e.target.name, e.target.checked.toString())}
-                required={!!option?.required}
-              />
-              <span
-                className={`${styles.checkboxLabel || ''} ${styles.slider} ${
-                  (!state.isValid && !elements[option.id].length && styles.invalid) || ''
-                }`}
-              />
-              <span className={styles.switchLabel}>{generatePlaceholderString(
-                useTranslate(option.translationKey, option.label),
-                null,
-                option?.link
-              )}</span>
-            </label>
-          ) : (
-            <>
-              <div key={option.id}>
+        <div className={styles.checkboxGroup || ""}>
+          {field.options.map((option) =>
+            field.switch ? (
+              <label
+                key={option.id}
+                className={styles.switch}
+                htmlFor={option.id}
+              >
                 <input
                   id={option.id}
                   name={option.id}
@@ -79,26 +82,58 @@ const getField = (field, handleChange, elements, state) => {
                   }
                   required={!!option?.required}
                 />
-                <label
-                  htmlFor={option.id}
-                  className={`${
-                    (!state.isValid &&
-                      !elements[option.id].length &&
-                      styles.invalid) ||
-                    ""
-                  }`}
-                  dangerouslySetInnerHTML={{
-                    __html: generatePlaceholderString(
-                      useTranslate(option.translationKey, option.label),
-                      null,
-                      option?.link
-                    ),
-                  }}
+                <span
+                  className={`${styles.checkboxLabel || ""} ${styles.slider}`}
                 />
-                {field.errorMsg && <span className={styles.errorMsg}>{field.errorMsg}</span>}
-              </div>
-            </>
-          ))}
+                <span className={styles.switchLabel}>
+                  {generatePlaceholderString(
+                    useTranslate(option.translationKey, option.label),
+                    null,
+                    option?.link
+                  )}
+                </span>
+              </label>
+            ) : (
+              <>
+                <div key={option.id}>
+                  <input
+                    id={option.id}
+                    name={option.id}
+                    type={type}
+                    checked={elements[option.id] === "true"}
+                    onChange={(e) =>
+                      handleChange(e.target.name, e.target.checked.toString())
+                    }
+                    required={!!option?.required}
+                  />
+                  <label
+                    htmlFor={option.id}
+                    className={`${
+                      (!state.isValid &&
+                        !elements[option.id].length &&
+                        styles.invalid) ||
+                      ""
+                    }`}
+                    dangerouslySetInnerHTML={{
+                      __html: generatePlaceholderString(
+                        useTranslate(option.translationKey, option.label),
+                        null,
+                        option?.link
+                      ),
+                    }}
+                  />
+                  {field?.error?.errorMsg && (
+                    <span className={styles.errorMsg}>
+                      {useTranslate(
+                        field?.error?.translationKey,
+                        field?.error?.errorMsg
+                      )}
+                    </span>
+                  )}
+                </div>
+              </>
+            )
+          )}
         </div>
       );
     case "radio":
@@ -152,7 +187,7 @@ const getField = (field, handleChange, elements, state) => {
           ))}
         </select>
       );
-    case 'range':
+    case "range":
       return field?.starRating ? (
         <>
           <label className={styles.ratingLabel}>
@@ -168,10 +203,12 @@ const getField = (field, handleChange, elements, state) => {
               onChange={e => setRating(e.target.value)}
               value={rating} />
           </label>
-          {field.errorMsg && rating === '0' && <span className={styles.errorMsg}>{field.errorMsg}</span>}
+          {field.errorMsg && rating === "0" && (
+            <span className={styles.errorMsg}>{field.errorMsg}</span>
+          )}
         </>
       ) : (
-        <div className={styles.radioGroup || ''}>
+        <div className={styles.radioGroup || ""}>
           <input
             name={id}
             id={id}
@@ -220,12 +257,20 @@ const getField = (field, handleChange, elements, state) => {
         <div className={styles.inputGroup || ""}>
           {icon}
           {inputElement}
-          {field.errorMsg && <span className={styles.errorMsg}>{field.errorMsg}</span>}
+          {field.error.errorMsg && (
+            <span className={styles.errorMsg}>
+              {useTranslate(field.error?.translationKey, field.error?.errorMsg)}
+            </span>
+          )}
         </div>
       ) : (
         <>
           {inputElement}
-          {field.errorMsg && <span className={styles.errorMsg}>{field.errorMsg}</span>}
+          {field.error?.errorMsg && (
+            <span className={styles.errorMsg}>
+              {useTranslate(field.error?.translationKey, field.error?.errorMsg)}
+            </span>
+          )}
         </>
       );
     }