gatsby-matrix-theme 37.0.38 → 37.0.40

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## [37.0.40](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v37.0.39...v37.0.40) (2023-12-20)
+
+
+### Bug Fixes
+
+* add se more ([e13d11b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e13d11b7efc8802fefa576bbd05b5efeb3649db9))
+* create a see more component and reuse it ([9b20b3a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9b20b3a8a81317a528b65a033f2c9a4abccb152c))
+
+
+* Merge branch 'seeMoreCards' into 'master' ([1f20399](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1f20399b6997959703111c00788a41ead0dd3c5d))
+
+## [37.0.39](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v37.0.38...v37.0.39) (2023-12-20)
+
+
+### Bug Fixes
+
+* add style ([5fc3b02](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5fc3b0235fec828e36f6b3bc79702d658bf4f411))
+* dom changes ([452e9eb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/452e9ebc493417cbb75925ed4d6d313cb0402f57))
+* make style ([84d3d8e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/84d3d8ebc2e3f08dee6db4cc514d7c95e2271c57))
+* make the structure ([37c7877](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/37c787753059d1bb23e2ca17af5d5be89bd8190e))
+* style ([5528873](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5528873f61ba9854693c1032368ddc9bcf03dfb6))
+* updated core theme ([4440093](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4440093f2b3cdbb8396629ec0701d532d71e8385))
+
+
+* Merge branch 'tm-3837-horse-calcualtor' into 'master' ([a44087a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a44087ab3d48ee8dcb276ba561a773046210abcc))
+
 ## [37.0.38](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v37.0.37...v37.0.38) (2023-12-19)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "37.0.38",
+  "version": "37.0.40",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^5.11.0",
-    "gatsby-core-theme": "30.0.36",
+    "gatsby-core-theme": "30.0.37",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^5.11.0",

package/src/components/atoms/see-more/index.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FaAngleRight } from '@react-icons/all-files/fa/FaAngleRight';
+import styles from './see-more.module.scss';
+import Link from '~hooks/link';
+
+export default function SeeMore({
+  module,
+  viewMoreIcon = <FaAngleRight title="Right-pointing Arrow Icon" />,
+  showMoreLink = true,
+}) {
+  return (
+    <>
+      {module.see_more_link?.value && module.see_more_link.type === 'page' && showMoreLink && (
+        <Link
+          to={module.see_more_link?.path}
+          className={`${styles.viewMore || ''} module-title-gtm`}
+        >
+          {module.see_more_link?.title}
+          {viewMoreIcon}
+        </Link>
+      )}
+      {module.see_more_link?.value && module.see_more_link.type === 'external' && showMoreLink && (
+        <a
+          href={module.see_more_link?.path}
+          rel="nofollow"
+          className={`${styles.viewMore || ''} module-title-gtm`}
+        >
+          {module.see_more_link?.title}
+          {viewMoreIcon}
+        </a>
+      )}
+    </>
+  );
+}
+
+SeeMore.propTypes = {
+  module: PropTypes.shape({
+    see_more_link: PropTypes.shape({
+      path: PropTypes.string,
+      value: PropTypes.number,
+      title: PropTypes.string,
+      type: PropTypes.string,
+    }),
+  }),
+  viewMoreIcon: PropTypes.element,
+  showMoreLink: PropTypes.bool,
+};

package/src/components/atoms/see-more/see-more.module.scss

@@ -0,0 +1,6 @@
+.viewMore {
+  color: var(--text-link-color);
+  font-size: 1.6rem;
+  text-decoration: underline;
+  @include flex-align(center, center);
+}

package/src/components/atoms/see-more/see-more.test.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect'; // for additional matchers
+import SeeMore from '.';
+
+describe('SeeMore Component', () => {
+  test('renders external link when type is external', () => {
+    const module = {
+      see_more_link: {
+        path: 'https://example.com',
+        value: 1,
+        title: 'External Link',
+        type: 'external',
+      },
+    };
+
+    render(<SeeMore module={module} showMoreLink />);
+
+    const externalLink = screen.getByRole('link', { name: /External Link/i });
+    expect(externalLink).toHaveAttribute('href', 'https://example.com');
+  });
+
+  test('renders internal link when type is page', () => {
+    const module = {
+      see_more_link: {
+        path: '/internal-page',
+        value: 2,
+        title: 'Internal Link',
+        type: 'page',
+      },
+    };
+
+    render(<SeeMore module={module} showMoreLink />);
+
+    const internalLink = screen.getByRole('link', { name: /Internal Link/i });
+    expect(internalLink).toHaveAttribute('href', '/internal-page');
+  });
+
+  test('does not render link when showMoreLink is false', () => {
+    const module = {
+      see_more_link: {
+        path: '/should-not-render',
+        value: 3,
+        title: 'Should Not Render',
+        type: 'page',
+      },
+    };
+
+    render(<SeeMore module={module} showMoreLink={false} />);
+
+    const link = screen.queryByRole('link', { name: /Should Not Render/i });
+    expect(link).not.toBeInTheDocument();
+  });
+});

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

@@ -40,7 +40,14 @@ export default function Select({
 
   return (
     <label htmlFor={id}>
-      {translate(translations, id, label)}
+      <div>
+        {translate(translations, id, label)}
+        {tooltip && (
+          <Tooltip content={translate(translations, `${id}_tooltip`, tooltip)}>
+            <BsQuestionCircle size="2.6rem" title="Question Icon" />
+          </Tooltip>
+        )}
+      </div>
       <div
         className={`${styles?.dropdownStyling || ''} ${
           tooltip ? styles.tooltip || '' : styles.fullWidth || ''
@@ -49,11 +56,6 @@ export default function Select({
         <select ref={refObj} onChange={(e) => onChangeFunc(e, index)} id={id}>
           {options.map((option) => option)}
         </select>
-        {tooltip && (
-          <Tooltip content={translate(translations, `${id}_tooltip`, tooltip)}>
-            <BsQuestionCircle size="2.6rem" title="Question Icon" />
-          </Tooltip>
-        )}
       </div>
     </label>
   );