gatsby-core-theme 21.0.7 → 21.0.9

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## [21.0.9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v21.0.8...v21.0.9) (2023-05-11)
+
+
+### Bug Fixes
+
+* added all markets to page context for multiple markets ([7c1b7d4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7c1b7d43a00566abff583d0866b8c85c3db2eda4))
+* pipelines ([95037e9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/95037e991dadb97187376860b40c01b75a11e1dc))
+* pipelines ([d42b627](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d42b6270d12e7fc8a90ca3b3c76c8c1504c4fca1))
+
+## [21.0.8](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v21.0.7...v21.0.8) (2023-05-10)
+
+
+### Bug Fixes
+
+* add hash in the class name ([d0e4a25](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d0e4a25cdb7a388d22268ff36d181699fbbe9a33))
+
+
+### Code Refactoring
+
+* update anchor label id element ([c096ff4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c096ff47f2a8cbdd241eeecaabfafe7489df776e))
+* update archive module conditional anchor label ([3c874c4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3c874c43cb4700da9ce950a01f23261f2332469d))
+* update archive module pagination to scroll into view ([7fb0e28](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7fb0e289857c61c25fd999b4b9fd6c7557148cac))
+* update module title anchor only for archive module ([2a481c7](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2a481c770ec3bd6b5a77178df708c0bfe80da6d6))
+* update pagination component path generation ([907af0c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/907af0c6fd5ffd91cd0733b77c25d7f3267e2880))
+
+
+* Merge branch 'tm-3416-archive-module-pagination-focus' into 'master' ([569c899](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/569c8990aea9643ef5f09684c784fa09fb42d0be))
+* Merge branch 'tm-3416-archive-module-pagination-focus' into 'master' ([5c639be](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5c639be39274a3c79a4e58fbc1b6d4d0f5f4278d))
+
 ## [21.0.7](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v21.0.6...v21.0.7) (2023-05-04)
 
 

package/gatsby-config.js

@@ -11,7 +11,7 @@ module.exports = {
           esModule: false,
           modules: {
             namedExport: false,
-            localIdentName: '[name]__[local]', // customize the class name structure here
+            localIdentName: '[name]__[local]__[hash:base64:5]', // customize the class name structure here
           },
         },
         additionalData: '@import "gatsby-core-theme/src/styles/globals.scss";',

package/gatsby-node.esm.js

@@ -220,6 +220,7 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
       processed.pages[siteMarket][pageType].forEach((page) => {
         marketSections = processed.market_sections[siteMarket];
         prefilledModules = processed.prefilled_market_modules[siteMarket];
+        const allMarkets = processed.site_markets;
         const processedPage = page;
         processedPage.preconnect_links = preconnectLinks;
 
@@ -250,6 +251,7 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
         const autogenerated = template && template.autogenerated_content;
         const contextData = {
           page,
+          allMarkets,
           marketSections,
           prefilledModules,
           siteInfo,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "21.0.7",
+  "version": "21.0.9",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "GATSBY_RECAPTCHA_SITEKEY": "6LfoyvMUAAAAAO4nl_MQnqHb4XdHxEiu5cXgIqeB",

package/src/components/atoms/module-title/index.js

@@ -5,15 +5,22 @@ import { FaAngleRight } from '@react-icons/all-files/fa/FaAngleRight';
 import Link from '~hooks/link';
 import styles from './module-title.module.scss';
 
-const ModuleTitle = ({ module, viewMoreIcon = <FaAngleRight />, pageContext = null }) => {
+const ModuleTitle = ({
+  module,
+  viewMoreIcon = <FaAngleRight />,
+  pageContext = null,
+  anchorLabel = null,
+}) => {
   const getTitle = (classname = '') => {
-    if (module.module_title_tag === 'h2') return <h2>{module.module_title}</h2>;
-    if (module.module_title_tag === 'h3') return <h3>{module.module_title}</h3>;
-    if (module.module_title_tag === 'h4') return <h4>{module.module_title}</h4>;
-    if (module.module_title_tag === 'h5') return <h5>{module.module_title}</h5>;
-    if (module.module_title_tag === 'h6') return <h6>{module.module_title}</h6>;
+    if (module.module_title_tag === 'h2') return <h2 id={anchorLabel}>{module.module_title}</h2>;
+    if (module.module_title_tag === 'h3') return <h3 id={anchorLabel}>{module.module_title}</h3>;
+    if (module.module_title_tag === 'h4') return <h4 id={anchorLabel}>{module.module_title}</h4>;
+    if (module.module_title_tag === 'h5') return <h5 id={anchorLabel}>{module.module_title}</h5>;
+    if (module.module_title_tag === 'h6') return <h6 id={anchorLabel}>{module.module_title}</h6>;
     return (
-      <span className={`${styles?.noTag || ''} ${classname || ''}`}>{module.module_title}</span>
+      <span className={`${styles?.noTag || ''} ${classname || ''}`} id={anchorLabel}>
+        {module.module_title}
+      </span>
     );
   };
   // if (

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

@@ -61,6 +61,12 @@ const Modules = ({ module, page, pageContext }) => {
 
   const ModuleComponent = GetModuleComponent(module);
 
+  const anchorLabel = module.anchor_label
+    ? removeSymbols(anchorLink(module.anchor_label))
+    : module.name === 'archive'
+    ? 'archiveLabel'
+    : null;
+
   const extraProps =
     module.name === 'bonus'
       ? {
@@ -69,7 +75,9 @@ const Modules = ({ module, page, pageContext }) => {
           hasLink: true,
           prettyLink: prettyTracker(module?.value, 'main', false, page.template),
         }
-      : {};
+      : {
+          anchorLabel,
+        };
 
   const moduleClassName = `${module.name}Module`;
 
@@ -81,13 +89,13 @@ const Modules = ({ module, page, pageContext }) => {
   return (
     ModuleComponent && (
       <div
-        id={module.anchor_label && `${removeSymbols(anchorLink(module.anchor_label))}`}
+        id={module.name === 'archive' && module.module_title ? null : anchorLabel}
         style={module.background_color && moduleBackgroundColor}
         className={`${styles[moduleClassName] !== undefined ? styles[moduleClassName] || '' : ''} ${
           module.name || ''
         } ${styles.module || ''} ${module?.style ? styles[module.style] || '' : ''} module`}
       >
-        <ModuleTitle module={module} />
+        <ModuleTitle module={module} anchorLabel={module.name === 'archive' && anchorLabel} />
         {ModuleIntro && <ModuleIntro module={{ value: module.module_introduction }} />}
         <ModuleComponent module={module} page={page} pageContext={pageContext} {...extraProps} />
       </div>

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 
 import Link from '~hooks/link';
@@ -13,11 +13,15 @@ const Pagination = ({
   previousText = 'Previous',
   nextText = 'Next',
   numOfItems = 5,
+  anchorLabel,
 }) => {
   const numOfItemsEachSide = Math.ceil(numOfItems / 2);
 
   function getPagePath(index) {
-    return index === 1 ? pagePath : `${pagePath}/page/${index}`;
+    return (
+      (index === 1 ? pagePath : `${pagePath}/page/${index}`) +
+      (anchorLabel ? `#${anchorLabel}` : '')
+    );
   }
 
   function generatePaginationList() {
@@ -45,6 +49,11 @@ const Pagination = ({
     return pages;
   }
 
+  useEffect(() => {
+    const hash = window?.location?.hash?.replace('#', '');
+    document?.getElementById(hash)?.scrollIntoView();
+  });
+
   return (
     <ul className={styles.pagination || ''}>
       {/* previous button */}

package/src/components/molecules/pagination/with-midpoints.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { MdLastPage } from '@react-icons/all-files/md/MdLastPage';
 import { MdFirstPage } from '@react-icons/all-files/md/MdFirstPage';
@@ -18,18 +18,27 @@ const PaginationWithMidPoints = ({
   nextComp = <MdChevronRight />,
   firstComp = <MdFirstPage />,
   lastComp = <MdLastPage />,
+  anchorLabel,
 }) => {
   const { translations } = useContext(Context) || {};
   const current = Number(currentPage);
   const total = Number(totalPages);
   function getPagePath(index) {
-    return index === 1 ? pagePath : `${pagePath}/page/${index}`;
+    return (
+      (index === 1 ? pagePath : `${pagePath}/page/${index}`) +
+      (anchorLabel ? `#${anchorLabel}` : '')
+    );
   }
 
   const midPage = (a, b) => Math.ceil((a + b) / 2);
   const firstMidPage = midPage(0, current);
   const lastMidPage = midPage(total, current);
 
+  useEffect(() => {
+    const hash = window?.location?.hash?.replace('#', '');
+    document?.getElementById(hash)?.scrollIntoView();
+  });
+
   return (
     <ul className={styles.pagination || ''}>
       {/* got to first page */}

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

@@ -9,7 +9,7 @@ import { translate } from '~helpers/getters';
 import { Context } from '~context/MainProvider';
 import styles from './archive.module.scss';
 
-const Archive = ({ module, PaginationComponent, page, loadMore, gtmClass = '' }) => {
+const Archive = ({ module, PaginationComponent, page, loadMore, gtmClass = '', anchorLabel }) => {
   const [moduleItems, setModuleItems] = useState([...module.items]);
   const updatedModule = { ...module };
   const hasLoadMore = module.pagination_type === 'load_more';
@@ -55,12 +55,14 @@ const Archive = ({ module, PaginationComponent, page, loadMore, gtmClass = '' })
           pagePath={module.rootPath}
           currentPage={module.currentPage}
           totalPages={module.numOfPages}
+          anchorLabel={anchorLabel}
         />
       ) : (
         <Pagination
           pagePath={module.rootPath}
           currentPage={module.currentPage}
           totalPages={module.numOfPages}
+          anchorLabel={anchorLabel}
         />
       )}
     </>

package/src/components/pages/body/index.js

@@ -43,6 +43,7 @@ function Body({ pageContext, children, serverData }) {
       {navigation && (
         <Navigation
           template={template}
+          pageContext={pageContext}
           section={navigation}
           options={{
             mobile: {

package/storybook/.ci.yml

@@ -31,7 +31,6 @@ Storybook Deploy:
     - gatsby-runner-dev-1
   script:
     - mkdir -p ~/.ssh
-    - ssh-keyscan -H storybook >> ~/.ssh/known_hosts
     - echo "$FLOYD_ROOT_KEY" > ~/.ssh/id_rsa
     - chmod 600 ~/.ssh/id_rsa
     - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config