gatsby-matrix-theme 7.0.0 → 7.0.3

package/CHANGELOG.md

@@ -1,3 +1,45 @@
+## [7.0.3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.0.2...v7.0.3) (2022-05-11)
+
+
+### Bug Fixes
+
+* author box null check ([2b2352c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2b2352c71be0e9657cbfb4d9a4fdb36b72fc5550))
+* breadcrumb schema ([0ceb45c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0ceb45c946e94f08831d2c35fe60f51dd50d956b))
+
+## [7.0.2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.0.1...v7.0.2) (2022-05-09)
+
+
+### Bug Fixes
+
+* alignment for toplist tabs ([37c0f39](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/37c0f39a5e9d35bfff0a11c94d102793cfc38de4))
+* moved tabs aboved module-introduction and fixed layout ([480edba](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/480edbaf6e1ed588923996e099fea31484d70a8c))
+
+
+### Code Refactoring
+
+* author card alignment ([c856e84](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c856e84877e496b136fb13714c224c5f4894d3f1))
+* theme styles to match IL ([8099473](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/80994733d4227f38f7999cea67654a70d6a783f4))
+
+
+* Merge branch 'tm-2689-include-a-paragraph-in-all-module' into 'master' ([0e3e26b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0e3e26b203a3b708834a5415253804c80c62f917))
+* Merge branch 'tm-2801-fact-checker' into 'master' ([29ea252](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/29ea252b432f524a8592c339f2a870fbe483cab0))
+
+## [7.0.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.0.0...v7.0.1) (2022-05-05)
+
+
+### Bug Fixes
+
+* aded page path to toplist row ([0169dc1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0169dc16798874635f4cb61b708f68f2bd40b2a1))
+
+
+### Code Refactoring
+
+* update nsa specific schema ([ee5bd71](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ee5bd7134baf71dc3aba62f8c833e4dbc7007933))
+
+
+* Merge branch 'tm-2814-toplist-extra-prop' into 'master' ([78975b6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/78975b654605f831f78ecc0805d91a234a40a262))
+* Merge branch 'tm-2708-update-nsa-specific-schema' into 'master' ([90821d2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/90821d27e7d8c218bee5c590a2dc997798f7912c))
+
 # [7.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v6.0.7...v7.0.0) (2022-05-05)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "7.0.0",
+  "version": "7.0.3",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -29,7 +29,7 @@
     "react": "^17.0.2",
     "gatsby-plugin-sitemap": "^3.3.0",
     "react-dom": "^17.0.2",
-    "gatsby-core-theme": "^7.0.1"
+    "gatsby-core-theme": "^7.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.13.1",

package/src/gatsby-core-theme/components/atoms/author/author.module.scss

@@ -1,13 +1,25 @@
 .authorWraper {
-  display: grid;
-  grid-template-rows: repeat(2, 1fr);
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
+  justify-content: flex-end;
   font-size: var(--author-text-fontSize);
   color: var(--author-primary-text-color);
+  max-width: 370px;
+  column-gap: 0.5rem;
+
+  > div {
+    display: flex;
+    justify-content: flex-end;
+  }
+
   .infoContainer {
     display: flex;
     align-items: center;
     white-space: nowrap;
+    order: 1;
+    flex: 1 1 auto;
+
     .prefixStyle {
       margin: 0px;
     }
@@ -34,21 +46,64 @@
         padding: 0px 2px;
       }
     }
+
+    @include max(mobile) {
+      justify-content: flex-start;
+    }
   }
   .dateTimeWrapper {
     display: flex;
     align-items: center;
     white-space: nowrap;
+    order: 4;
+    flex: 0 0 auto;
+    gap: 0.5rem;
+
     .readingWithBorder {
       &:before {
         content: '|';
         padding: 0px 3px;
       }
     }
+
+    @include max(mobile){
+      order: 2;
+  
+      span { 
+        display: none;
+      }
+    }
+  }
+  
+  .readingWithBorder {
+    order: 2;
+    flex: 0 0 auto;
+    gap: 0.5rem;
+    
+    @include max(mobile){
+      order: 4;
+    }
   }
 
-  @include min(tablet) {
-    display: flex;
+  .reviewer {
+    order: 3;
+    flex: 1 1 auto;
+    gap: 0.5rem;
+
+    > a {
+      color: var(--author-link-text-color);
+      font-weight: var(--author-fontweight);
+      text-decoration: underline;
+    }
+
+    @include max(mobile) {
+      justify-content: flex-start;
+    }
+  }
+
+  @include max(mobile) {
+    max-width: 100%;
+    margin: 0.8rem 0 0.2rem;
   }
 }
 
@@ -58,6 +113,10 @@
   justify-content: space-between;
   color: var( --author-card-text-color);
 
+  .infoContainer {
+    justify-content: flex-start;
+  }
+
   @include min(tablet){
     display: flex;
     justify-content: space-between;

package/src/gatsby-core-theme/components/atoms/author/index.js

@@ -51,7 +51,7 @@ const Author = ({
           />
         )}
       </div>
-      {reviewer && !isCardsAuthor && (
+      {reviewer.name && !isCardsAuthor && (
         <div className={date && styles.reviewer}>
           <span>{`${translate(translations, 'fact_checked_by', 'Fact checked by')}`}</span>
           {` `}

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

@@ -27,7 +27,7 @@ const Main = ({ section = {}, pageContext = {}, showNewsletter = true }) => {
   const NotFound = page.path.includes('404')
     ? loadable(() => import(`gatsby-core-theme/src/components/atoms/not-found`))
     : null;
-  const AuthorBox = page.author ? loadable(() => import(`~atoms/author-box`)) : null;
+  const AuthorBox = page.author_id ? loadable(() => import(`~atoms/author-box`)) : null;
 
   return (
     <main className={styles.modulePage}>

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

@@ -1,4 +1,6 @@
+/* eslint-disable react/forbid-prop-types */
 import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import PropTypes from 'prop-types';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import keygen from '~helpers/keygen';
@@ -16,6 +18,7 @@ const TopList = ({ module, toplistHeading, CustomRow, page }) => {
         <div label={toplist.title} key={keygen()}>
           {toplistHeading}
           <List
+            pagePath={page.path}
             toplist={toplist}
             CustomRow={Row}
             hasLoadMoreButton={toplist.show_load_more}
@@ -37,7 +40,7 @@ TopList.propTypes = {
   }),
   toplistHeading: PropTypes.element,
   CustomRow: PropTypes.func,
-  page: PropTypes.shape({ template: PropTypes.string }),
+  page: PropTypes.shape({ template: PropTypes.string, path: PropTypes.string }),
 };
 
 export default TopList;

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

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-bind */
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable react/prop-types */
 import React, { useRef, useContext } from 'react';
@@ -11,6 +12,7 @@ import Button from '~atoms/button';
 import styles from './list.module.scss';
 
 export default function List({
+  pagePath,
   toplist,
   CustomRow,
   hasLoadMoreButton,
@@ -62,6 +64,7 @@ export default function List({
           >
             {CustomRow ? (
               <CustomRow
+                pagePath={pagePath}
                 item={item}
                 tracker={toplist.tracker}
                 oneliner={toplist.one_liner}
@@ -92,6 +95,7 @@ export default function List({
 }
 
 List.propTypes = {
+  pagePath: PropTypes.string,
   toplist: PropTypes.shape({
     items: PropTypes.arrayOf(
       PropTypes.shape({

package/src/gatsby-core-theme/helpers/schema.js

@@ -56,6 +56,7 @@ export function breadcrumbsSchema({
   const schema = {
     '@context': 'https://schema.org',
     '@type': 'BreadcrumbList',
+    '@id': `${getUrl(path)}#breadcrumblist`,
     itemListElement: [
       {
         '@type': 'ListItem',
@@ -110,22 +111,23 @@ export function breadcrumbsSchema({
 }
 
 export function schemaGenerator(page = {}, pageImage) {
-  if (process.env.GATSBY_SITE_NAME === 'norskespilleautomater.com') {
+  const isNSA = process.env.GATSBY_SITE_NAME === 'norskespilleautomater.com';
+  if (isNSA) {
     page.knowsAbout = knowsAbout;
   }
 
-  const hasWebPageSchema = page.type !== 'operator' && page.type !== 'game';
+  // Temporary Change for removing webPageSchema
+  const hasWebPageSchema = (page.type !== 'operator' && page.type !== 'game') || isNSA;
   const hasOrganisationSchema = page.path === '/' || page.path === 'about-us';
   const jsonSchema = [
     // Page Schema
     page.seo_json_schema,
     // Breadcrumbs Schema
     page.breadcrumbs?.length ? breadcrumbsSchema(page) : null,
-    // Modules Schemas
-    // Temporary Change for removing webpageschema
     hasWebPageSchema ? webPageSchema(page, pageImage) : null,
     hasOrganisationSchema ? organizationSchema(page, pageImage) : null,
     templateSchemas(page, pageImage),
+    // Modules Schemas
     ...(page.sections?.main?.modules
       ? moduleSchemas(page.sections.main.modules, page.path)
       : [null]),

package/src/hooks/tabs/index.js

@@ -75,21 +75,15 @@ const Tabs = ({
 
     if (module?.module_title_tag)
       return (
-        <div>
-          <CustomTag>
-            {module.module_title}
-            {currentMonth ? (
-              <span className={styles.toplistDate}>
-                <small>•</small>
-                {`${currentMonth} ${year}`}
-              </span>
-            ) : null}
-          </CustomTag>
-          {module.module_introduction && (
-            // eslint-disable-next-line react/no-danger
-            <div dangerouslySetInnerHTML={{ __html: module?.module_introduction }} />
-          )}
-        </div>
+        <CustomTag className={styles.titleContainer}>
+          <div className={styles.title}>{module.module_title}</div>
+          {currentMonth ? (
+            <span className={styles.toplistDate}>
+              <small>•</small>
+              {`${currentMonth} ${year}`}
+            </span>
+          ) : null}
+        </CustomTag>
       );
     return (
       <span className={styles.noTag}>
@@ -111,20 +105,26 @@ const Tabs = ({
   return (
     <>
       <div className={tabHeaderClass}>
-        {module.name === 'top_list' && getTitle(module)}
-        {TabList && (
-          <TabList
-            siteName={siteName}
-            title={title}
-            onClick={onClickTabItem}
-            items={children}
-            activeTab={activeTab}
-            activeTabClass={activeTabClass}
-            showAll={showAll}
-            alignRight={tabsAlign === 'right'}
-            module={module}
-            gtmClass={gtmClass}
-          />
+        <div className={styles.titleAndTab}>
+          {module.name === 'top_list' && getTitle(module)}
+          {TabList && (
+            <TabList
+              siteName={siteName}
+              title={title}
+              onClick={onClickTabItem}
+              items={children}
+              activeTab={activeTab}
+              activeTabClass={activeTabClass}
+              showAll={showAll}
+              alignRight={tabsAlign === 'right'}
+              module={module}
+              gtmClass={gtmClass}
+            />
+          )}
+        </div>
+        {module.module_introduction && (
+          // eslint-disable-next-line react/no-danger
+          <div dangerouslySetInnerHTML={{ __html: module?.module_introduction }} />
         )}
         {HeaderComp && <div className={styles.headerComp}>{HeaderComp}</div>}
       </div>

package/src/hooks/tabs/tabs.module.scss

@@ -28,16 +28,16 @@
       margin-bottom: 2rem;
     }
   }
-  .toplistDate{
+  .toplistDate {
     color: var(--color-6);
     font-weight: 300;
     font-size: 1.4rem;
-    padding-left: .5rem;
+    padding-left: 0.5rem;
     display: inline-block;
     position: relative;
     top: -4px;
-    small{
-      padding-right: .5rem;
+    small {
+      padding-right: 0.5rem;
       font-size: 1.2rem;
       font-weight: 400;
     }
@@ -50,14 +50,15 @@
     > div:first-child {
       grid-column: 2;
     }
-    @include min(laptop){
-      flex-direction: row;
+    @include min(laptop) {
+      // flex-direction: row;
       align-items: center;
     }
 
     > div:nth-child(2) {
       grid-column: 1;
       @include flex-align(center, flex-start);
+      display: block;
     }
   }
 
@@ -66,6 +67,16 @@
   }
 }
 
+.titleAndTab {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.title {
+  margin: 2rem 0;
+}
+
 .headerComp {
   select {
     margin: 2rem 0;
@@ -81,3 +92,7 @@
     font-size: 1.6rem;
   }
 }
+
+.titleContainer {
+  @include flex-align(center, center);
+}