gatsby-matrix-theme 37.0.39 → 37.0.41

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## [37.0.41](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v37.0.40...v37.0.41) (2023-12-26)
+
+
+### Bug Fixes
+
+* jest ([19e145e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/19e145e1544b72414fd29ac100fbc345c8f62813))
+* tooltip scrolling fix ([3d171e5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3d171e51c9b2557eea755cb1ddd4deff76e7011a))
+* update to latest core theme ([1d0f786](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1d0f7869fb703e1d018fa68aa770623017ab43b3))
+
+
+* Merge branch 'tooltip-scrolling-fix' into 'master' ([c362f78](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c362f7870b5053acf8dfdaa32961116a6b8f7c73))
+
+## [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "37.0.39",
+  "version": "37.0.41",
   "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.37",
+    "gatsby-core-theme": "30.0.38",
     "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/tooltip/index.js

@@ -40,14 +40,16 @@ const Tooltip = ({ content, delay = 0, children, direction, minWidth = 10 }) =>
   };
 
   return (
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus, jsx-a11y/click-events-have-key-events
     <div
       className={styles?.wrapper || ''}
       onMouseEnter={showTip}
       onMouseLeave={hideTip}
-      onTouchStart={(e) => {
+      onClick={(e) => {
         getPositionClass(e.target, styles);
         showTip();
       }}
+      role="button"
     >
       {children}
       {active && (
@@ -57,7 +59,7 @@ const Tooltip = ({ content, delay = 0, children, direction, minWidth = 10 }) =>
             styles[direction] ? styles[direction] || '' : styles.top || ''
           }`}
         >
-          {content}
+          <span>{content}</span>
         </div>
       )}
     </div>

package/src/components/atoms/tooltip/tooltip.test.js

@@ -30,7 +30,7 @@ describe('Tooltip Component', () => {
     expect(container).toBeTruthy();
     expect(getByText('Test Children')).toBeTruthy();
 
-    fireEvent.touchStart(screen.getByText('Test Children'));
+    fireEvent.click(screen.getByText('Test Children'));
     await waitFor(() => screen.getByText('test content'));
   });
   test('render tooltip with different direction', async () => {
@@ -42,7 +42,7 @@ describe('Tooltip Component', () => {
     expect(container).toBeTruthy();
     expect(getByText('Test Children')).toBeTruthy();
 
-    fireEvent.touchStart(screen.getByText('Test Children'));
+    fireEvent.click(screen.getByText('Test Children'));
     await waitFor(() => {
       screen.getByText('test content');
       expect(container.querySelector('.tooltip')).toBeTruthy();

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

@@ -2,9 +2,9 @@ import React from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import loadable from '@loadable/component';
 import ModuleIntroduction from './module-introduction';
+import SeeMore from '../../atoms/see-more';
 
-export default function index(props) {
-  const { module, page } = props;
+export default function index({ module, page, seeMoreButtonDown = false }) {
   const Component = () => {
     switch (module?.style) {
       case 'stack_table': {
@@ -31,11 +31,11 @@ export default function index(props) {
       }
     }
   };
-
   return (
     <>
-      <ModuleIntroduction module={module} />
+      <ModuleIntroduction showSeeMore={!seeMoreButtonDown} module={module} />
       {Component && <Component />}
+      {seeMoreButtonDown && <SeeMore module={module} />}
     </>
   );
 }

package/src/components/organisms/cards/module-introduction/index.js

@@ -2,14 +2,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import loadable from '@loadable/component';
-import { FiArrowRight } from '@react-icons/all-files/fi/FiArrowRight';
 import { anchorLink } from 'gatsby-core-theme/src/helpers/strings';
 import styles from './styles.module.scss';
 import ModuleTitle from '../../../../gatsby-core-theme/components/atoms/module-title';
-import Link from '~hooks/link';
+
 import { removeSymbols } from '../../../../helpers/strings';
+import SeeMore from '../../../atoms/see-more';
 
-const ModuleIntroduction = ({ module }) => {
+const ModuleIntroduction = ({ module, showSeeMore = false }) => {
   const anchorLabel = module?.anchor_label && removeSymbols(anchorLink(module?.anchor_label));
 
   const ModuleIntro = module?.module_introduction
@@ -29,12 +29,7 @@ const ModuleIntroduction = ({ module }) => {
           module={{ value: module?.module_introduction }}
         />
       )}
-      {ModuleIntro && module.see_more_link?.value && (
-        <Link to="/" className={`${styles.viewMore || ''} module-title-gtm`}>
-          {module.see_more_link.title}
-          <FiArrowRight title="Right-pointing Arrow Icon" />
-        </Link>
-      )}
+      {showSeeMore && <SeeMore module={module} />}
     </div>
   );
 };
@@ -45,10 +40,11 @@ ModuleIntroduction.propTypes = {
     name: PropTypes.string.isRequired,
     module_introduction: PropTypes.string,
     see_more_link: PropTypes.shape({
-      value: PropTypes.string,
+      path: PropTypes.string,
       title: PropTypes.string,
     }),
   }),
+  showSeeMore: PropTypes.bool,
 };
 
 export default ModuleIntroduction;

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

@@ -6,7 +6,7 @@ import { FaAngleRight } from '@react-icons/all-files/fa/FaAngleRight';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
 import styles from './module-title.module.scss';
-import Link from '~hooks/link';
+import SeeMore from '../../../../components/atoms/see-more';
 
 const ModuleTitle = ({
   module,
@@ -99,27 +99,7 @@ const ModuleTitle = ({
       >
         {(module?.title || module.module_title) && getTitle(styles.toplistTitle)}
 
-        {module.see_more_link?.value && module.see_more_link.type && showMoreLink === 'page' && (
-          <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 &&
-          showMoreLink === 'external' && (
-            <a
-              href={module.see_more_link?.path}
-              rel="nofollow"
-              className={`${styles.viewMore || ''} module-title-gtm`}
-            >
-              {module.see_more_link?.title}
-              {viewMoreIcon}
-            </a>
-          )}
+        <SeeMore module={module} showMoreLink={showMoreLink} viewMoreIcon={viewMoreIcon} />
       </div>
     ) : (
       (module?.title || module.module_title) &&

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

@@ -6,13 +6,6 @@
       display: block;
       margin-bottom: 1.2rem !important;
     }
-  
-    .viewMore {
-      color: var(--text-link-color);
-      font-size: 1.6rem;
-      text-decoration: underline;
-      @include flex-align(center, center);
-    }
   }
   .tabsToplist{
     @include min(tablet){

package/storybook/public/347.512163c1.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkgatsby_matrix_theme=self.webpackChunkgatsby_matrix_theme||[]).push([[347],{"./src/components/organisms/cards/index.js":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:function(){return index}});__webpack_require__("../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../node_modules/core-js/modules/web.dom-collections.iterator.js");var react=__webpack_require__("../node_modules/react/index.js"),loadable_esm=__webpack_require__("../node_modules/@loadable/component/dist/loadable.esm.js"),prop_types=__webpack_require__("./node_modules/prop-types/index.js"),prop_types_default=__webpack_require__.n(prop_types),strings=__webpack_require__("../node_modules/gatsby-core-theme/src/helpers/strings.js"),injectStylesIntoStyleTag=__webpack_require__("../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),injectStylesIntoStyleTag_default=__webpack_require__.n(injectStylesIntoStyleTag),styles_module=__webpack_require__("../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/sass-loader/dist/cjs.js!../node_modules/sass-resources-loader/lib/loader.js??ruleSet[1].rules[10].use[3]!./src/components/organisms/cards/module-introduction/styles.module.scss"),options={insert:"head",singleton:!1},module_introduction_styles_module=(injectStylesIntoStyleTag_default()(styles_module.Z,options),styles_module.Z.locals||{}),module_title=__webpack_require__("./src/gatsby-core-theme/components/atoms/module-title/index.js"),helpers_strings=__webpack_require__("./src/helpers/strings.js"),see_more=__webpack_require__("./src/components/atoms/see-more/index.js"),ModuleIntroduction=function ModuleIntroduction(_ref){var module=_ref.module,_ref$showSeeMore=_ref.showSeeMore,showSeeMore=void 0!==_ref$showSeeMore&&_ref$showSeeMore,anchorLabel=(null==module?void 0:module.anchor_label)&&(0,helpers_strings.t5)((0,strings.CB)(null==module?void 0:module.anchor_label)),ModuleIntro=null!=module&&module.module_introduction?(0,loadable_esm.ZP)((function(){return Promise.resolve().then(__webpack_require__.bind(__webpack_require__,"../node_modules/gatsby-core-theme/src/components/molecules/content/index.js"))})):null;return react.createElement("div",{className:ModuleIntro?"":module_introduction_styles_module.noIntroModuleCards},react.createElement(module_title.Z,{module:module,anchorLabel:"archive"===module.name&&anchorLabel,showMoreLink:!ModuleIntro}),ModuleIntro&&react.createElement(ModuleIntro,{isModuleIntroduction:null==module?void 0:module.module_introduction,module:{value:null==module?void 0:module.module_introduction}}),showSeeMore&&react.createElement(see_more.Z,{module:module}))};ModuleIntroduction.displayName="ModuleIntroduction",ModuleIntroduction.propTypes={module:prop_types_default().shape({anchor_label:prop_types_default().string,name:prop_types_default().string.isRequired,module_introduction:prop_types_default().string,see_more_link:prop_types_default().shape({path:prop_types_default().string,title:prop_types_default().string})}),showSeeMore:prop_types_default().bool},ModuleIntroduction.__docgenInfo={description:"",methods:[],displayName:"ModuleIntroduction",props:{showSeeMore:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},module:{description:"",type:{name:"shape",value:{anchor_label:{name:"string",required:!1},name:{name:"string",required:!0},module_introduction:{name:"string",required:!1},see_more_link:{name:"shape",value:{path:{name:"string",required:!1},title:{name:"string",required:!1}},required:!1}}},required:!1}}};var module_introduction=ModuleIntroduction;function index(_ref){var module=_ref.module,page=_ref.page,_ref$seeMoreButtonDow=_ref.seeMoreButtonDown,seeMoreButtonDown=void 0!==_ref$seeMoreButtonDow&&_ref$seeMoreButtonDow,Component=function Component(){switch(null==module?void 0:module.style){case"stack_table":if("operator"===module.cards_page_type){var OperatorsTable=(0,loadable_esm.ZP)((function(){return __webpack_require__.e(487).then(__webpack_require__.bind(__webpack_require__,"./src/components/atoms/cards/operators-table/index.js"))}));return react.createElement(OperatorsTable,{module:module,page:page})}return null;case"comparison_table":if("operator"===module.cards_page_type){var ComparisonTable=(0,loadable_esm.ZP)((function(){return Promise.resolve().then(__webpack_require__.bind(__webpack_require__,"./src/components/atoms/cards/comparison-table/index.js"))}));return react.createElement(ComparisonTable,{module:module,page:page})}return null;case"template_two":var SrcollLayout=(0,loadable_esm.ZP)((function(){return __webpack_require__.e(809).then(__webpack_require__.bind(__webpack_require__,"./src/components/organisms/cards/template-two/index.js"))}));return react.createElement(SrcollLayout,{module:module,page:page});default:var GridLayout=(0,loadable_esm.ZP)((function(){return Promise.resolve().then(__webpack_require__.bind(__webpack_require__,"./src/components/organisms/cards/template-one/index.js"))}));return react.createElement(GridLayout,{module:module,page:page})}};return react.createElement(react.Fragment,null,react.createElement(module_introduction,{showSeeMore:!seeMoreButtonDown,module:module}),Component&&react.createElement(Component,null),seeMoreButtonDown&&react.createElement(see_more.Z,{module:module}))}"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/organisms/cards/module-introduction/index.js"]={name:"ModuleIntroduction",docgenInfo:ModuleIntroduction.__docgenInfo,path:"src/components/organisms/cards/module-introduction/index.js"}),index.__docgenInfo={description:"",methods:[],displayName:"index",props:{seeMoreButtonDown:{defaultValue:{value:"false",computed:!1},required:!1}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/organisms/cards/index.js"]={name:"index",docgenInfo:index.__docgenInfo,path:"src/components/organisms/cards/index.js"})},"../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/sass-loader/dist/cjs.js!../node_modules/sass-resources-loader/lib/loader.js??ruleSet[1].rules[10].use[3]!./src/components/organisms/cards/module-introduction/styles.module.scss":function(module,__webpack_exports__,__webpack_require__){var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../node_modules/css-loader/dist/runtime/cssWithMappingToString.js"),_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,".rJsck5V3Vhw9AZjiRqWp6Q\\=\\=>div{display:flex;align-items:flex-start;justify-content:space-between;width:100%;flex-direction:column}@media only screen and (min-width:768px){.rJsck5V3Vhw9AZjiRqWp6Q\\=\\=>div{flex-direction:row;align-items:space-between}}.rJsck5V3Vhw9AZjiRqWp6Q\\=\\=>div a{display:flex;align-items:center;justify-content:space-between}._3fi4PYDoDd7CGQkSUegABg\\=\\={font-size:1.6rem;font-style:normal;font-weight:700;line-height:2.7rem;text-transform:capitalize;display:flex;align-items:center;justify-content:flex-start;color:#165af8;gap:.4rem}._3fi4PYDoDd7CGQkSUegABg\\=\\= svg{margin-top:.2rem}","",{version:3,sources:["webpack://./src/components/organisms/cards/module-introduction/styles.module.scss","webpack://./../node_modules/gatsby-core-theme/src/styles/utils/_mixins.scss","webpack://./../node_modules/gatsby-core-theme/src/styles/utils/_media-queries.scss"],names:[],mappings:"AAeI,gCCdF,YAAA,CACA,sBDcwB,CCbxB,6BDaoC,CAChC,UAAA,CACA,qBAAA,CEkCJ,yCFrCE,gCAMI,kBAAA,CACA,yBAAA,CAAA,CAGF,kCCxBJ,YAAA,CACA,kBDwB0B,CCvB1B,6BDuBkC,CAMpC,6BACE,gBAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,yBAAA,CCpCA,YAAA,CACA,kBDoCoB,CCnCpB,0BDmC4B,CAC5B,aAAA,CACA,SAAA,CACA,iCACE,gBAAA",sourcesContent:["// Global styles extended in each theme\n\n// Utils\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/variables/typography';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/variables/layout';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/variables/stack-order';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/media-queries';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/icons';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/tooltip';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/loader';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/mixins';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/scrollbar';\n@import '../../../../../../node_modules/gatsby-core-theme/src/styles/utils/animations';\n\n.noIntroModuleCards {\n    > div {\n      @include flex-align(flex-start, space-between);\n      width: 100%;\n      flex-direction: column;\n  \n      @include min(tablet) {\n        flex-direction: row;\n        align-items: space-between;\n      }\n  \n      a {\n        @include flex-align(center, space-between);\n      }\n    }\n  }\n\n\n.viewMore {\n  font-size: 1.6rem;\n  font-style: normal;\n  font-weight: 700;\n  line-height: 2.7rem; \n  text-transform: capitalize;\n  @include flex-align(center, flex-start);\n  color: #165AF8;\n  gap: .4rem;\n  svg{\n    margin-top: .2rem;\n  }\n}","@mixin flex-align($align-items, $justify-content) {\n  display: flex;\n  align-items: $align-items;\n  justify-content: $justify-content;\n}\n\n@mixin flex-direction($flex-direction) {\n  display: flex;\n  flex-direction: $flex-direction;\n}\n\n@mixin overflow($overflow-type, $overflow-value, $scrolling) {\n  #{$overflow-type}: $overflow-value;\n  -webkit-overflow-scrolling: $scrolling; // Autoprefixer doesn't add\n}\n\n@mixin text-background($bgcolor, $text-color) {\n  background: $bgcolor;\n  border-radius: 100px;\n  color: $text-color;\n  font-weight: 700;\n  @include flex-align(center, center);\n  padding: 0 2rem;\n}\n\n@mixin link-color($color) {\n  color: $color;\n\n  &:hover {\n    color: $color;\n  }\n}\n\n// Using em because I want images in content to inherit size based on parent element (not root)\n@mixin content-img-float($direction) {\n  float: $direction;\n  @if $direction == right {\n    margin: var(--img-float-direction-right, 0 0 2.4rem 4.8rem);\n  } @else if $direction == left {\n    margin: var(--img-float-direction-left, 0 4.8rem 2.4rem 0);\n  } @else {\n    margin: 0 1em 1em 0;\n  }\n}\n\n@mixin content-img-align($direction: center, $spacing: var(--content-img-spacing, 1em)) {\n  display: block;\n  @if $direction == right {\n    margin: $spacing 0 $spacing auto;\n  } @else if $direction == left {\n    margin: $spacing auto $spacing 0;\n  } @else {\n    margin: $spacing auto;\n  }\n}\n\n@mixin section-arrow-down($color, $width, $height) {\n  position: relative;\n  &:after {\n    top: 100%;\n    left: 50%;\n    border: solid transparent;\n    content: '';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n    border-color: rgba(0, 0, 0, 0);\n    border-top: $height solid $color;\n    border-right: calc($width / 2) solid transparent;\n    border-left: calc($width / 2) solid transparent;\n    margin-left: -calc($width / 2);\n  }\n}\n\n@mixin gradientBtn($color1, $color2, $color3) {\n  background: linear-gradient(to bottom, $color1 0, $color2 14%, $color3 61%);\n  &:hover {\n    background: linear-gradient(to bottom, $color1 0, $color2 14%, $color3 61%);\n  }\n}\n\n@mixin sportBtn($color1, $color2) {\n  background: linear-gradient(to bottom, $color1 0, $color2 100%);\n  &:hover {\n    background: linear-gradient(to bottom, $color2 0, $color1 100%);\n  }\n}\n\n@mixin star($border-color: #ffb400, $fill-color: #ffb400, $width: 16px, $line-height: 2rem) {\n  line-height: $line-height;\n  width: $width;\n  font-weight: normal;\n  display: inline-block;\n  color: $fill-color;\n  font-size: 15px;\n  position: relative;\n  text-shadow: -1px 0 $border-color, 0 1px $border-color, 1px 0 $border-color, 0 -1px $border-color;\n\n  &:last-child {\n    margin-right: 0;\n  }\n  &:before {\n    content: '\\2605';\n  }\n}\n\n@mixin half-star($border-color: #ffb400, $half-empty-color: #ffb400, $half-full-color: white) {\n  line-height: 2rem;\n  width: 16px;\n  font-weight: normal;\n  display: inline-block;\n  color: $half-full-color;\n  font-size: 15px;\n  position: relative;\n  &:before {\n    content: '\\2605';\n  }\n  text-shadow: -1px 0 $border-color, 0 1px $border-color, 1px 0 $border-color, 0 -1px $border-color;\n  &:after {\n    content: '\\2605';\n    color: $half-empty-color;\n    position: absolute;\n    width: 7px;\n    overflow: hidden;\n    bottom: 0;\n    left: 0;\n  }\n}\n\n@mixin border-gradient($color-1, $color-2, $bgcolor, $radius: 0.8rem) {\n  background: $bgcolor;\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border-radius: $radius;\n    border: 2px solid transparent;\n    background: $color-1, $color-2 border-box;\n    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n    -webkit-mask-composite: destination-out;\n    mask-composite: exclude;\n  }\n}\n\n@mixin buttonsColor($color1, $color2, $color3, $textColor: 'white') {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  background-color: $color1;\n  color: $textColor;\n  padding: 0.9rem 3rem;\n  font-weight: 700;\n  font-size: 1.8rem;\n  border-radius: var(--border-radius);\n\n  > svg {\n    flex: none;\n    margin-left: 0.8rem;\n  }\n\n  &:hover {\n    background-color: $color2;\n    color: $textColor;\n  }\n\n  &:active {\n    background-color: $color3;\n    color: $textColor;\n  }\n}\n","$media-query-sizes: (\n  mobile-s: (\n    min: 320px,\n    max: 374px,\n  ),\n  mobile-m: (\n    min: 375px,\n    max: 424px,\n  ),\n  mobile: (\n    min: 425px,\n    max: 767px,\n  ),\n  tablet: (\n    min: 768px,\n    max: 991px,\n  ),\n  laptop: (\n    min: 992px,\n    max: 1199px,\n  ),\n  desktop: (\n    min: 1200px,\n  ),\n);\n\n// Get media query sizes\n$screen: 'only screen';\n@function media-query($media, $optional-media: '', $min: true) {\n  $media-label: '';\n\n  @if ($optional-media != '') {\n    $media-sizes-min: map-get($media-query-sizes, $media);\n    $media-sizes-max: map-get($media-query-sizes, $optional-media);\n    $media-label: $screen +\n      \" and (min-width:#{map-get($media-sizes-min, 'min')}) and (max-width:#{map-get($media-sizes-max, 'max')})\";\n  } @else {\n    $query: 'max';\n\n    @if ($min) {\n      $query: 'min';\n    }\n\n    $media-sizes: map-get($media-query-sizes, $media);\n    $media-label: $screen + ' and (#{$query}-width:#{map-get($media-sizes, $query)})';\n  }\n\n  @return $media-label;\n}\n\n// Min media query\n@mixin min($media) {\n  @media #{media-query($media)} {\n    @content;\n  }\n}\n\n// Max media query\n@mixin max($media) {\n  @media #{media-query($media, '', false)} {\n    @content;\n  }\n}\n\n// Min & max media query\n@mixin min-max($min, $max) {\n  @media #{media-query($min, $max)} {\n    @content;\n  }\n}\n\n// Use this ONLY if you need a media query that doesn't fit the $media-query-sizes breakpoints above\n// Pass number, for example @include custom-min(992)\n@mixin custom-min($min) {\n  @media #{$screen} and (min-width: #{$min}px) {\n    @content;\n  }\n}\n\n@mixin custom-max($max) {\n  @media #{$screen} and (max-width: #{$max}px) {\n    @content;\n  }\n}\n\n@mixin custom-min-max($min, $max) {\n  @media #{$screen} and (min-width: #{$min}px) and (max-width: #{$max}px) {\n    @content;\n  }\n}\n\n// Landscape\n// (If we find more use cases of this in the future, might want to refactor this and include it in the media-query function for $screen)\n// Pass number\n$landscape: 'screen and (orientation:landscape)';\n\n@mixin landscape-max($max) {\n  @media #{$landscape} and (max-width: #{$max}px) {\n    @content;\n  }\n}\n\n@mixin landscape-min($min) {\n  @media #{$landscape} and (min-width: #{$min}px) {\n    @content;\n  }\n}\n"],sourceRoot:""}]),___CSS_LOADER_EXPORT___.locals={noIntroModuleCards:"rJsck5V3Vhw9AZjiRqWp6Q==",viewMore:"_3fi4PYDoDd7CGQkSUegABg=="},__webpack_exports__.Z=___CSS_LOADER_EXPORT___}}]);

package/storybook/public/iframe.html

@@ -361,4 +361,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)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/organisms/navigation","files":"navigation.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/organisms\\/navigation\\/navigation\\.stories\\.js)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/organisms/anchor/template-one","files":"anchor.stories","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/organisms\\/anchor\\/template-one\\/anchor\\.stories)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/organisms/anchor/template-two","files":"template-two.stories","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/organisms\\/anchor\\/template-two\\/template-two\\.stories)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/bonus/template-one","files":"bonus.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/bonus\\/template-one\\/bonus\\.stories\\.js)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/bonus/template-two","files":"bonus.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/bonus\\/template-two\\/bonus\\.stories\\.js)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/content","files":"text.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/content\\/text\\.stories\\.js)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/content","files":"show-more.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/content\\/show-more\\.stories\\.js)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/content","files":"content.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/content\\/content\\.stories\\.js)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/content/lists","files":"lists.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/content\\/lists\\/lists\\.stories\\.js)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/content/frame","files":"frame.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/content\\/frame\\/frame\\.stories\\.js)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/content/table","files":"table-one.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/content\\/table\\/table-one\\.stories\\.js)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/content/table","files":"table-two.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/content\\/table\\/table-two\\.stories\\.js)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/pagination","files":"pagination.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/pagination\\/pagination\\.stories\\.js)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/organisms/carousel/template-one","files":"template-one.stories","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/organisms\\/carousel\\/template-one\\/template-one\\.stories)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/organisms/carousel/template-two","files":"template-two.stories","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/organisms\\/carousel\\/template-two\\/template-two\\.stories)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/spotlights_v2/icon/template-one","files":"**/*.stories.@(mdx|tsx|ts|jsx|js)","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/spotlights_v2\\/icon\\/template-one(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(mdx|tsx|ts|jsx|js))$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/spotlights_v2/image/template-one","files":"template-one.stories","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/spotlights_v2\\/image\\/template-one\\/template-one\\.stories)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/spotlights_v2/image/template-two","files":"template-two.stories","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/spotlights_v2\\/image\\/template-two\\/template-two\\.stories)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/spotlights_v2/image-text/template-one","files":"template-one.stories","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/spotlights_v2\\/image-text\\/template-one\\/template-one\\.stories)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/spotlights_v2/image-text/template-two","files":"template-two.stories","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/spotlights_v2\\/image-text\\/template-two\\/template-two\\.stories)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/spotlights_v2/image-text/template-three","files":"template-three.stories","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/spotlights_v2\\/image-text\\/template-three\\/template-three\\.stories)$"}];</script><script src="runtime~main.dad8996c.iframe.bundle.js"></script><script src="631.6bc9ee8d.iframe.bundle.js"></script><script src="main.d18a5a6f.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)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/organisms/navigation","files":"navigation.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/organisms\\/navigation\\/navigation\\.stories\\.js)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/organisms/anchor/template-one","files":"anchor.stories","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/organisms\\/anchor\\/template-one\\/anchor\\.stories)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/organisms/anchor/template-two","files":"template-two.stories","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/organisms\\/anchor\\/template-two\\/template-two\\.stories)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/bonus/template-one","files":"bonus.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/bonus\\/template-one\\/bonus\\.stories\\.js)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/bonus/template-two","files":"bonus.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/bonus\\/template-two\\/bonus\\.stories\\.js)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/content","files":"text.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/content\\/text\\.stories\\.js)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/content","files":"show-more.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/content\\/show-more\\.stories\\.js)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/content","files":"content.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/content\\/content\\.stories\\.js)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/content/lists","files":"lists.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/content\\/lists\\/lists\\.stories\\.js)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/content/frame","files":"frame.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/content\\/frame\\/frame\\.stories\\.js)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/content/table","files":"table-one.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/content\\/table\\/table-one\\.stories\\.js)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/content/table","files":"table-two.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/content\\/table\\/table-two\\.stories\\.js)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/pagination","files":"pagination.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/pagination\\/pagination\\.stories\\.js)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/organisms/carousel/template-one","files":"template-one.stories","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/organisms\\/carousel\\/template-one\\/template-one\\.stories)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/organisms/carousel/template-two","files":"template-two.stories","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/organisms\\/carousel\\/template-two\\/template-two\\.stories)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/spotlights_v2/icon/template-one","files":"**/*.stories.@(mdx|tsx|ts|jsx|js)","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/spotlights_v2\\/icon\\/template-one(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(mdx|tsx|ts|jsx|js))$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/spotlights_v2/image/template-one","files":"template-one.stories","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/spotlights_v2\\/image\\/template-one\\/template-one\\.stories)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/spotlights_v2/image/template-two","files":"template-two.stories","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/spotlights_v2\\/image\\/template-two\\/template-two\\.stories)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/spotlights_v2/image-text/template-one","files":"template-one.stories","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/spotlights_v2\\/image-text\\/template-one\\/template-one\\.stories)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/spotlights_v2/image-text/template-two","files":"template-two.stories","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/spotlights_v2\\/image-text\\/template-two\\/template-two\\.stories)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/spotlights_v2/image-text/template-three","files":"template-three.stories","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/spotlights_v2\\/image-text\\/template-three\\/template-three\\.stories)$"}];</script><script src="runtime~main.4b2c10dc.iframe.bundle.js"></script><script src="631.6bc9ee8d.iframe.bundle.js"></script><script src="main.06ccd11a.iframe.bundle.js"></script></body></html>