gatsby-matrix-theme 3.0.5 → 3.0.6

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+## [3.0.6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.0.5...v3.0.6) (2021-12-07)
+
+
+### Bug Fixes
+
+* content read more ([6f00226](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6f00226ebc277e02a78103e9987871200af0bb17))
+* issue fix ([ac5b5e6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ac5b5e67e43d31d67cf0c37ecfbf0eb0c979323c))
+* small style issue ([2e32e03](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2e32e03904e809a3d2cc1ed444fc5dd1fc16cdeb))
+
+
+### Code Refactoring
+
+* add custom styles to menu ([5fb35db](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5fb35db8cdc8a4afdb72a768e62ff8c49661371c))
+
+
+### Config
+
+* update core theme ([e2885b8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e2885b856a689cc0f2501d87d39d4f6e92b40f37))
+* updated core theme ([2d2e722](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2d2e72239cba3cf0f6239fede523adf901ee21de))
+* updated core version ([6c83579](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6c8357910c12a57d527d691afaab74f2e6debc89))
+
+
+* Merge branch 'show-more-content' into 'master' ([dfbe31f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/dfbe31fd8cf1788ab3546f8ff0663ea5e21bd1e3))
+* Merge branch 'tm-navigation-sticky' into 'master' ([239e204](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/239e2044d341183d843ed06548cfa330b3358bc4))
+
 ## [3.0.5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.0.4...v3.0.5) (2021-12-02)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -31,7 +31,7 @@
     "cross-env": "^7.0.2",
     "dotenv": "8.2.0",
     "gatsby": "^3.3.1",
-    "gatsby-core-theme": "^1.6.15",
+    "gatsby-core-theme": "^1.6.21",
     "gatsby-image": "^3.3.0",
     "gatsby-plugin-image": "^1.3.1",
     "gatsby-plugin-postcss": "^4.3.0",

package/src/gatsby-core-theme/components/molecules/content/content.module.scss

@@ -129,7 +129,7 @@
               td {
                 color: white !important;
                 background: var(--table-head-background);
-                
+
                 border-radius: 0;
 
                 &:first-child {
@@ -237,6 +237,39 @@
       }
     }
   }
+
+  @include max(mobile) {
+    &.showMore {
+      max-height: 17.8rem;
+      overflow: hidden;
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        transition: all .25s ease-in-out;
+        height: 4rem;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-image: linear-gradient(to bottom, rgba(209, 209, 209, 0), #ffffff);
+      }
+    }
+  }
+}
+
+.button {
+  margin: 3rem 0 0 1.6rem !important;
+  border: 2px solid #171f49;
+  width: calc(100% - 3.2rem);
+  font-style: normal;
+  font-weight: bold;
+  font-size: 1.8rem;
+  line-height: 3rem;
+  color: #171f49;
+  @include min(tablet) {
+    display: none;
+  }
 }
 
 .floatLeft {

package/src/gatsby-core-theme/components/molecules/content/index.js

@@ -1,13 +1,16 @@
+/* eslint-disable camelcase */
 /* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
+import React, { useState } from 'react';
 import parse from 'html-react-parser';
 import PropTypes from 'prop-types';
-
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import { parseCss } from 'gatsby-core-theme/src/helpers/css-parser';
 import styles from './content.module.scss';
 
 const Content = ({ module }) => {
+  const { show_more_label, show_more_enabled } = module || {};
+  const [showMore, setShowMore] = useState(show_more_enabled === '1');
+
   const replaceMedia = (node) => {
     if (node.name === 'img') {
       let stylesClass = null;
@@ -64,9 +67,13 @@ const Content = ({ module }) => {
     }
   };
 
+  const handleChange = () => {
+    setShowMore(!showMore);
+  };
+
   return (
     <>
-      <div className={styles.content}>
+      <div className={`${styles.content} ${showMore && styles.showMore}`}>
         <div className={`${switchStyle(module.style)}`}>
           {module.value &&
             parse(module.value, {
@@ -74,6 +81,11 @@ const Content = ({ module }) => {
             })}
         </div>
       </div>
+      {showMore && (
+        <button type="button" className={styles.button} onClick={handleChange}>
+          {show_more_label}
+        </button>
+      )}
     </>
   );
 };

package/src/gatsby-core-theme/components/organisms/navigation/index.js

@@ -32,6 +32,7 @@ const Navigation = ({
   sticky = true,
   template,
   children,
+  customStyles,
 }) => {
   const navRef = useRef(React.createRef());
   const showMenu = template !== 'ppc';
@@ -74,7 +75,13 @@ const Navigation = ({
           </Link>
           {showMenu && (
             <>
-              <Menu section={section} menu={menu} options={options} gtmClass="main-menu-gtm" />
+              <Menu
+                section={section}
+                menu={menu}
+                options={options}
+                customStyles={customStyles}
+                gtmClass="main-menu-gtm"
+              />
               {hasSearch && <SearchForm className={styles.search} searchIcon={searchIcon} />}
             </>
           )}
@@ -121,6 +128,7 @@ Navigation.propTypes = {
     }),
   }),
   sticky: PropTypes.bool,
+  customStyles: PropTypes.string,
 };
 
 export default Navigation;