gatsby-matrix-theme 17.1.1 → 17.1.3

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## [17.1.3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v17.1.2...v17.1.3) (2023-04-03)
+
+
+### Bug Fixes
+
+* news article ([3291a1f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3291a1fd331340423d9a31338cb4104c84896258))
+* update feedback module ([1ee939b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1ee939b48ffd884cd0f3e04cd3a241ab171f85ec))
+* update feedback module ([af1dac7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/af1dac7e2c6e66bc7dd1ee8ff59147229ef54eba))
+* update feedback module ([2a153da](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2a153dadaa1d0eda64e1816eb4f76f484849d94e))
+* update main and feedback scss ([a53c81f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a53c81fddf032f4dc42a1e899df4c75756f41283))
+
+
+* Merge branch 'tm-3088-feedbackmodule-feature' into 'master' ([3d4a0ed](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3d4a0eda8d9da75705836b64f44345253eb9339e))
+* Merge branch 'tm-3311-news-article-matrix' into 'master' ([044b898](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/044b898d36a8a8323366d182f51f6760a86fe155))
+
+## [17.1.2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v17.1.1...v17.1.2) (2023-03-30)
+
+
+### Bug Fixes
+
+* author card template styling ([9df14a4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9df14a4410259e19be59a9017b0754ddd7a791b5))
+* payment method ([756586e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/756586eaf0f234efdf85ffafefcd49c70cefad38))
+* payment method ([5808dd9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5808dd9fba19c6019d700200270333841708e01b))
+
 ## [17.1.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v17.1.0...v17.1.1) (2023-03-29)
 
 

package/package.json

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

package/src/components/atoms/cards/article-card/template-one/article-card.module.scss

@@ -9,6 +9,7 @@
   display: grid;
   grid-template-rows: 24rem 1fr;
   padding: 1.6rem;
+  border-radius: 1.6rem;
 }
 
 .cardContent {
@@ -33,12 +34,19 @@
   @include flex-align(center, space-between);
   width: 100%;
 
+  > div {
+    display: grid;
+    grid-template-columns: auto 1fr;
+  }
+
   > div > div {
+    white-space: normal !important;
     > a {
       display: block !important;
       color: #165af8 !important;
       font-size: 1.4rem;
-      font-weight: 700;
+      line-height: 21px;
+      font-weight: 700 !important;
     }
     > img {
       position: absolute;
@@ -49,7 +57,7 @@
     > span {
       font-size: 1.4rem;
       line-height: 2.2rem;
-      color: #3e3c47;
+      color: #3e3c47 !important;
       font-weight: 500;
     }
     > p {
@@ -57,7 +65,10 @@
       span {
         font-size: 1.4rem;
         color: #3e3c47;
-        font-weight: 500;
+        font-weight: 400;
+        line-height: 22px;
+        text-transform: capitalize;
+        white-space: nowrap;
       }
     }
   }

package/src/components/atoms/cards/article-card/template-one/index.js

@@ -47,6 +47,7 @@ const ArticleCard = ({ showAuthorOnOneLine = false, item, width, height }) => {
             <Author
               prefix="by"
               name={author?.name}
+              splitDateFormat="/"
               isCardsAuthor
               authorImg={author?.image}
               date={item?.updated_at || item?.created_at}

package/src/components/atoms/cards/author/template-one/index.js

@@ -25,7 +25,7 @@ export default function TemplateOne({ item }) {
       />
       <span className={styles.title}>{author.author_title}</span>
       <span className={styles.name}>{author.name}</span>
-      <Socials author={author} />
+      <Socials className={styles.socials} author={author} />
       <div
         className={styles.bio}
         // eslint-disable-next-line react/no-danger

package/src/components/atoms/cards/author/template-one/template-one.module.scss

@@ -8,7 +8,7 @@
   position: relative;
 
   > img {
-    margin-bottom: 2rem;
+    margin-bottom: 1.6rem;
     border-radius: 4rem;
   }
 
@@ -18,6 +18,13 @@
   }
 }
 
+.socials {
+  a {
+    height: 2.4rem !important;
+    width: 2.4rem !important;
+  }
+}
+
 .posts {
   position: absolute;
   background: #5545a9;
@@ -46,14 +53,14 @@
   color: #000;
   font-weight: 700;
   font-size: 20px;
-  margin-bottom: 2rem;
+  margin-bottom: 1.6rem;
   line-height: 30px;
 }
 
 .bio {
   font-size: 16px;
   line-height: 27px;
-  margin-top: 2rem;
+  margin-top: 2.4rem;
 }
 
 .readMore {

package/src/components/atoms/cards/author/template-two/index.js

@@ -28,7 +28,7 @@ export default function TemplateTwo({ item }) {
       <span className={styles.posts}>
         {author.pages_count} {translate(translations, 'posts', 'Posts')}
       </span>
-      <Socials author={author} />
+      <Socials className={styles.socials} author={author} />
     </div>
   );
 }

package/src/components/atoms/cards/author/template-two/template-two.module.scss

@@ -27,6 +27,13 @@
   padding: 0.6rem;
 }
 
+.socials {
+  a {
+    height: 2.4rem !important;
+    width: 2.4rem !important;
+  }
+}
+
 .title {
   font-weight: 700;
   font-size: 13px;

package/src/components/atoms/cards/payment-method/template-one/index.js

@@ -18,8 +18,8 @@ import styles from './template-one.module.scss';
 
 const TemplateOneTwo = ({ item, showSellingPoints = true, width = 150, height = 150 }) => {
   const { translations } = useContext(Context);
-  const { title, path, relation, sections, description } = item;
-  const { name, selling_points } = item.relation;
+  const { title, path, relation, sections, description } = item || {};
+  const { name, selling_points } = item?.relation || {};
 
   const imageObject = relation?.standardised_logo_filename_object || relation?.logo_filename_object;
   const StarRating = loadable(() =>
@@ -47,7 +47,12 @@ const TemplateOneTwo = ({ item, showSellingPoints = true, width = 150, height =
 
           <div className={`${styles.links}`}>
             <span className={styles.title}>{name}</span>
-            <StarRating numOfStars={5} halfStars={false} rating={relation.rating} showDot={false} />
+            <StarRating
+              numOfStars={5}
+              halfStars={false}
+              rating={relation?.rating}
+              showDot={false}
+            />
           </div>
         </div>
 

package/src/components/atoms/cards/payment-method/template-three/index.js

@@ -12,8 +12,8 @@ import SellingPoints from '../sellingPoints';
 import styles from './template-three.module.scss';
 
 const TemplateThree = ({ item, width = 150, height = 150 }) => {
-  const { title, path, relation } = item;
-  const { name, selling_points } = item.relation;
+  const { title, path, relation } = item || {};
+  const { name, selling_points } = item?.relation || {};
 
   const imageObject = relation?.standardised_logo_filename_object || relation?.logo_filename_object;
   const StarRating = loadable(() =>
@@ -41,7 +41,12 @@ const TemplateThree = ({ item, width = 150, height = 150 }) => {
           <div className={`${styles.links}`}>
             <span className={styles.title}>{name}</span>
 
-            <StarRating numOfStars={5} halfStars={false} rating={relation.rating} showDot={false} />
+            <StarRating
+              numOfStars={5}
+              halfStars={false}
+              rating={relation?.rating}
+              showDot={false}
+            />
           </div>
         </div>
 

package/src/components/atoms/feedBackModule/feedback-module.module.scss

@@ -1,5 +1,8 @@
 .mainContainer {
-  padding: 0 2.4rem;
+  padding: 0 1.6rem;
+  @include min(tablet) {
+    padding: 0.2.4rem
+  }
 }
 
 .dottedBorder {
@@ -9,7 +12,7 @@
   max-width: var(--main-container-max) !important;
   margin-bottom: 1rem !important;
   margin: 0 auto;
-  padding: 1.6rem;
+  padding: 1.6rem 0 ;
 }
 .container {
   @include flex-align(center, space-between);
@@ -42,8 +45,9 @@
     font-size: 16px;
     line-height: var(--feedbackModule-secondText-anchor-line-height);
     color: var(--color-73);
-    >svg {
-      display: none
+    text-decoration: var(--feedbackModule-here-underline);
+    > svg {
+      display: none;
     }
   }
 }
@@ -71,7 +75,28 @@
       display: none;
     }
   }
-  :first-child {
+
+
+  >:first-child:disabled,
+  >:last-child:disabled {
+    cursor: not-allowed;
+  }
+
+  .yesButton {
+    color: var(--color-77);
+    background: var(--color-75) !important;
+    border: var(--feedbackModule-first-button-border);
+    box-shadow: var(--feedback-first-button-box-shadow-hover) !important;
+  }
+
+  .noButton {
+    color: var(--color-77);
+    background-color: var(--color-76) !important;
+    border: var(--feedbackModule-second-button-border);
+    box-shadow: var(--feedback-second-button-box-shadow-hover) !important;
+  }
+
+  >:first-child {
     box-shadow: var(--feedbackModule-first-button-box-shadow);
     background: var(--feedback-first-button-background);
   }
@@ -79,16 +104,7 @@
     box-shadow: var(--feedbackModule-second-button-box-shadow);
     background: var(--feedback-second-button-background);
   }
-  > :first-child:hover {
-    background-color: var(--color-75);
-    border: var(--feedbackModule-first-button-border);
-    box-shadow: var(--feedback-first-button-box-shadow-hover);
-  }
-  > :last-child:hover {
-    background-color: var(--color-76);
-    border: var(--feedbackModule-second-button-border);
-    box-shadow: var(--feedback-second-button-box-shadow-hover);
-  }
+
   .onlyDesktop {
     display: none;
   }

package/src/components/atoms/feedBackModule/index.js

@@ -48,7 +48,11 @@ const FeedBackModule = ({ path = 'contact-us' }) => {
                   'yes_second_text',
                   'Tell us more about what you liked best. Send us a message'
                 )}`}{' '}
-                <Button btnText="here" noStyle to={path} />
+                <Button
+                  btnText={`${translate(translations, 'here_text', 'here')}`}
+                  noStyle
+                  to={path}
+                />
               </p>
             )}
 
@@ -67,23 +71,31 @@ const FeedBackModule = ({ path = 'contact-us' }) => {
                   'no_second_text',
                   'Tell us what you need to know on this topic'
                 )}`}{' '}
-                <Button btnText="here" noStyle to={path} />
+                <Button
+                  btnText={`${translate(translations, 'here_text', 'here')}`}
+                  noStyle
+                  to={path}
+                />
               </p>
             )}
           </div>
           <div className={styles.buttonContainer}>
-            <Button
-              isButton
-              noStyle
-              btnText={`${translate(translations, 'yes_button', 'Yes')}`}
+            <button
+              type="button"
               onClick={() => handleClick('yes')}
-            />
-            <Button
-              isButton
-              noStyle
-              btnText={`${translate(translations, 'no_button', 'No')}`}
+              className={response === 'yes' ? styles.yesButton : ''}
+              disabled={response !== null}
+            >
+              {`${translate(translations, 'yes_button', 'Yes')}`}
+            </button>
+            <button
+              type="button"
               onClick={() => handleClick('no')}
-            />
+              className={response === 'no' ? styles.noButton : ''}
+              disabled={response !== null}
+            >
+              {`${translate(translations, 'no_button', 'No')}`}
+            </button>
           </div>
         </div>
       </div>

package/storybook/public/iframe.html

@@ -345,4 +345,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"}];</script><script src="runtime~main.514de402.iframe.bundle.js"></script><script src="870.4fcc5488.iframe.bundle.js"></script><script src="main.a08237e2.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"}];</script><script src="runtime~main.514de402.iframe.bundle.js"></script><script src="870.4fcc5488.iframe.bundle.js"></script><script src="main.c915a422.iframe.bundle.js"></script></body></html>