gatsby-core-theme 44.4.28 → 44.4.29

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [44.4.29](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.4.28...v44.4.29) (2025-08-04)
+
+
+### Bug Fixes
+
+* added extra validation to comments ([278c60e](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/278c60e1c3d37750e607b02633c6d6fdd3d06117))
+* added npmrc to gitignore ([e31dbc6](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/e31dbc6dbb18fdaf96af53b1f90938d79c2e7498))
+
 ## [44.4.28](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.4.27...v44.4.28) (2025-07-30)
 
 

package/package.json

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

package/src/components/molecules/comment/comment.module.scss

@@ -113,7 +113,7 @@
     line-height: 1.8rem;
     text-transform: capitalize;
     margin-left: .8rem;
-    padding: 0 1.6rem;
+    padding: 0.8rem 1.6rem;
 }
 
 .replySection{

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

@@ -11,7 +11,14 @@ import LeaveCommentForm from '../leave-comment-form';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import styles from './comment.module.scss';
 
-const Comment = ({ pageContext, comment, authors, isReply, userInteractions }) => {
+const Comment = ({ 
+    pageContext, 
+    comment, 
+    authors, 
+    isReply, 
+    userInteractions,
+    showVotes = true
+}) => {
     const commentName = comment?.author_id ? authors?.[comment?.author_id]?.name : comment.author_name;
     const commentJobTitle = comment?.author_id ? authors?.[comment?.author_id]?.author_title : undefined;
     const date = new Date(comment.updated_at);
@@ -82,32 +89,36 @@ const Comment = ({ pageContext, comment, authors, isReply, userInteractions }) =
                     <p>{comment.comment}</p>
                 </div>
                 <div className={styles.commentActions}>
-                    <button 
-                        onClick={async () => {
-                            await handleVote(true, comment.comment_id)
-                            setLikes((prev) => prev + 1)
-                        }} 
-                        aria-label='Like Button' 
-                        type='button' 
-                        className={`${styles.buttonGroup} ${styles.left} ${currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))?.split(': ')[1] === 'vote_down' && styles.disabled || ''}`}
-                        disabled={currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))}
-                        >
-                        <LazyImage className={styles.buttonGroupIcon} src='/images/like.svg' />
-                        <span>{likes}</span>
-                    </button>
-                    <button 
-                        onClick={async () => {
-                            await handleVote(false, comment.comment_id)
-                            setDislikes((prev) => prev + 1)
-                        }}
-                        aria-label='Dislike Button' 
-                        type='button' 
-                        className={`${styles.buttonGroup} ${styles.right} ${currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))?.split(': ')[1] === 'vote_up' && styles.disabled || ''}`}
-                        disabled={currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))}
-                        >
-                        <LazyImage className={styles.buttonGroupIcon} src='/images/dislike.svg' />
-                        <span>{dislikes}</span>
-                    </button>
+                    {showVotes && (
+                        <>
+                            <button 
+                                onClick={async () => {
+                                    await handleVote(true, comment.comment_id)
+                                    setLikes((prev) => prev + 1)
+                                }} 
+                                aria-label='Like Button' 
+                                type='button' 
+                                className={`${styles.buttonGroup} ${styles.left} ${currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))?.split(': ')[1] === 'vote_down' && styles.disabled || ''}`}
+                                disabled={currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))}
+                                >
+                                <LazyImage className={styles.buttonGroupIcon} src='/images/like.svg' />
+                                <span>{likes}</span>
+                            </button>
+                            <button 
+                                onClick={async () => {
+                                    await handleVote(false, comment.comment_id)
+                                    setDislikes((prev) => prev + 1)
+                                }}
+                                aria-label='Dislike Button' 
+                                type='button' 
+                                className={`${styles.buttonGroup} ${styles.right} ${currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))?.split(': ')[1] === 'vote_up' && styles.disabled || ''}`}
+                                disabled={currentUserInteractions.current?.find(v => v.startsWith(`${comment.comment_id}:`))}
+                                >
+                                <LazyImage className={styles.buttonGroupIcon} src='/images/dislike.svg' />
+                                <span>{dislikes}</span>
+                            </button>
+                        </>
+                    )}
                     {!isReply && (
                         <button aria-label='Reply Button' onClick={() => setReply(!reply)} type='button' className={styles.replyButton}>
                             {reply ? useTranslate('cancel_reply_button', 'Cancel Reply') : useTranslate('reply_button', 'Reply')}
@@ -134,7 +145,8 @@ Comment.propTypes = {
     }),
     authors: PropTypes.shape({}),
     isReply: PropTypes.bool,
-    userInteractions: PropTypes.arrayOf(PropTypes.string)
+    userInteractions: PropTypes.arrayOf(PropTypes.string),
+    showVotes: PropTypes.bool
 };
 
 export default Comment;

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

@@ -4,6 +4,8 @@
 .textareaGroup {
   @include flex-direction(column);
 
+  position: relative;
+
   > div {
     @include flex-align(center, flex-start);
 
@@ -134,4 +136,23 @@ input:checked + .slider::before {
 
 .switchLabel{
   margin-left: 5.5rem;
+}
+
+.errorMsg {
+  font-size: 1.2rem;
+  color: #DD4B39;
+  font-weight: 400;
+  line-height: 1.8rem;
+  margin-right: auto;
+  margin-top: .4rem;
+}
+
+.lengthWarning{
+  position: absolute;
+  bottom: 3.5rem;
+  right: 1.5rem;
+  font-size: 1.2rem;
+  color: #DD4B39;
+  font-weight: 400;
+  line-height: 1.8rem;
 }

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

@@ -13,7 +13,8 @@ import useTranslate from '~hooks/useTranslate/useTranslate';
 const getField = (field, handleChange, elements, state) => {
   const { type, id, translationKey, label, placeholder, icon = null, ...props } = field;
   const [rating, setRating] = useState(3);
-
+  const { errorMsg, ...restProps } = props;
+  
   switch (type) {
     case "textarea":
       return (
@@ -25,7 +26,7 @@ const getField = (field, handleChange, elements, state) => {
               placeholder?.translationKey,
               placeholder?.label
             )}
-            {...props}
+            {...restProps}
             value={elements[id]}
             onChange={(e) => handleChange(e.target.name, e.target.value)}
             className={`${
@@ -35,6 +36,10 @@ const getField = (field, handleChange, elements, state) => {
           {field.maxLength && (
             <span>{`${elements[id].length}/${field.maxLength}`}</span>
           )}
+          {field.minlength && (
+            <span className={styles.lengthWarning}>{`Minimum ${field.minlength} words`}</span>
+          )}
+          {field.errorMsg && <span className={styles.errorMsg}>{field.errorMsg}</span>}
         </div>
       );
     case "checkbox":
@@ -194,7 +199,7 @@ const getField = (field, handleChange, elements, state) => {
             placeholder?.translationKey,
             placeholder?.label
           )}
-          {...props}
+          {...restProps}
           value={elements[id]}
           onChange={(e) => handleChange(e.target.name, e.target.value)}
           className={`${styles.inputBox || ""} ${
@@ -208,9 +213,13 @@ const getField = (field, handleChange, elements, state) => {
         <div className={styles.inputGroup || ""}>
           {icon}
           {inputElement}
+          {field.errorMsg && <span className={styles.errorMsg}>{field.errorMsg}</span>}
         </div>
       ) : (
-        inputElement
+        <>
+          {inputElement}
+          {field.errorMsg && <span className={styles.errorMsg}>{field.errorMsg}</span>}
+        </>
       );
     }
   }

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

@@ -232,11 +232,35 @@
       display: grid;
       grid-template-columns: 1fr 1fr;
 
+      div > input ~ span, div > textarea ~ span{
+        display: none;
+      }
+
       input:user-invalid{
         border: .15rem solid var(--comment-input-error, #DD4B39);
       }
 
-      input:not(:placeholder-shown):invalid{
+      textarea:user-invalid{
+        border: .15rem solid var(--comment-input-error, #DD4B39);
+      }
+
+      input:user-invalid ~ span{
+        display: block;
+      }
+
+      textarea:user-invalid ~ span{
+        display: block;
+      }
+
+      input:not(:placeholder-shown):invalid ~ span{
+        display: block;     
+      }
+
+      textarea:not(:placeholder-shown):invalid ~ span{
+        display: block;     
+      }
+
+      input:not(:placeholder-shown):invalid, textarea:not(:placeholder-shown):invalid{
         border: .15rem solid var(--comment-input-error, #DD4B39);
       }
 

package/src/constants/forms.js

@@ -119,6 +119,7 @@ export const commentForm = {
           translationKey: 'name_placeholder',
         },
         twoCol: true,
+        errorMsg: "Please enter your name."
       },
       {
         label: 'Email Address',
@@ -131,6 +132,7 @@ export const commentForm = {
         },
         translationKey: 'email_label',
         twoCol: true,
+        errorMsg: "Please enter a valid email address."
       },
       {
         label: 'Leave a comment',
@@ -143,6 +145,8 @@ export const commentForm = {
         translationKey: 'textarea_label',
         twoCol: false,
         required: true,
+        minlength: 15,
+        errorMsg: "Please enter a comment."
       },
       {
         id: 'post_anonymously',
@@ -205,6 +209,7 @@ export const replyForm = {
           translationKey: 'name_placeholder',
         },
         twoCol: true,
+        errorMsg: "Please enter your name."
       },
       {
         label: 'Email Address',
@@ -217,6 +222,7 @@ export const replyForm = {
         },
         translationKey: 'email_label',
         twoCol: true,
+        errorMsg: "Please enter a valid email address."
       },
       {
         label: 'Leave a comment',
@@ -229,6 +235,8 @@ export const replyForm = {
         translationKey: 'textarea_label',
         twoCol: false,
         required: true,
+        minlength: 15,
+        errorMsg: "Please enter a comment."
       },
       {
         id: `post_anonymously_${Math.floor(Math.random() * 1000000)}`,