gatsby-matrix-theme 2.0.2 → 2.1.0

package/CHANGELOG.md

@@ -1,3 +1,129 @@
+# [2.1.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v2.0.5...v2.1.0) (2021-10-20)
+
+
+### Bug Fixes
+
+* another style issue ([d76bcb7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d76bcb7045a5c37c481d70b29993db973ec5d88c))
+* faq all tags style ([45bff16](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/45bff16e3f00c2f018b4205f43af8e7a19fba3f6))
+* max height faq ([e3da648](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e3da648f9d46e8039fbf73387a8b54309294f557))
+* style issue ([704a93a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/704a93aa9e99d70316072d931f2ae50a34bd7df9))
+* styling issues overriden on pcsa ([76806dd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/76806dde2ed65d6a2d1915943999e143f26a4906))
+
+
+### Code Refactoring
+
+* correction to search keyword ([f8d1ddf](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f8d1ddf1307547cbfcfcab570f66cac102354bac))
+
+
+* Merge branch 'tm-2509-faq-tags-style' into 'master' ([c87422c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c87422ca5ca9d0fc1cce60b945e5cb0267b27814))
+* Merge branch 'tm-2469-popup-fix' into 'master' ([7afd323](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7afd3234f28854feb49e38d6237660003eacbeb4))
+* Merge branch 'tm-2478-search' into 'master' ([1f78305](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1f783057eb15ffdc8e0c33e50ef3e64182133d5b))
+
+
+### Features
+
+* search keyword ([741aefd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/741aefd8921f145815476f3474ab80b043e3e55e))
+
+## [2.0.5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v2.0.4...v2.0.5) (2021-10-19)
+
+
+### Bug Fixes
+
+* add sitemap plugin in the config for all sites ([673f6ee](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/673f6eed413c1a47d8af12b8328f420dc2b36ac2))
+* added close icon and translations ([8b920d2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8b920d20456ab4509df974c5d509ec2605d96a53))
+* added once to stop lazyload ([25a702f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/25a702f67594ca69a36ec914a845dd658471d7b0))
+* added operatorcta and moved all events to one useffect ([f5eeb34](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f5eeb34ac01327239303b79302e584500dde2661))
+* added storybook ([f4b8c51](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f4b8c51bb9dc4439c73c77170757090137948b19))
+* comparison table name ([39aef80](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/39aef80996d28d7927eb5e2afdf77a04bc09be29))
+* deleted author-box ([dcc3cbf](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/dcc3cbf26f337bb81c2c1fcb02e182f2bfbb5432))
+* file path changed ([f7e75cd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f7e75cdb99c076878f0571e796c43d4f5ebb9d80))
+* fixed a file ([707855a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/707855a67a2ac5c35792c5fa1427259d21b82efd))
+* fixed files ([b3c5d12](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b3c5d12e1233783c220337d710574284bbda3e26))
+* fixed some files ([fe742b3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fe742b359436f1c57f56ba7685e5c827d90b1d8f))
+* fixed tests and added storybook for popupcard ([6fea540](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6fea540dfb44801d0d22c42dfff3f5f2dd3ba63e))
+* merged master ([995e15b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/995e15bbd5d5841fdb4d764e697a9389c9993328))
+* merged master ([423b98f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/423b98fec269182897e3ac4e5c9c095dd3601daa))
+* merged master ([700efb8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/700efb82cf901a45366e132fc16471615e45e8f8))
+* modify some files ([88eeea1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/88eeea122a4fc9970013332f05b2ed735c95a284))
+* refactored all files and fixed popup scroll ([a1b98b4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a1b98b46f900b0590fae647a3044b7fc25b7928b))
+* removed unused useffect ([bef38ad](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bef38ad57a46ec706d52be0190794279ed0c94fb))
+* replaced cookies with session ([b5d5d88](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b5d5d884b38aa7e56f65e3e5c4c58533ccc72cf4))
+* shadow files fix ([78f1322](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/78f1322ade609838dbbfb95b4eaa76f3978dd83c))
+* shadow files fix ([03244d4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/03244d40eb5b5c8a369af4854d1231e4e72432ca))
+* shadowing structure ([d65ff3e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d65ff3e2c0008887c6a912353339999af202e9cd))
+* some component changes ([8fe90d3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8fe90d3a3b4df595f87d30d9f2d46baf739c701c))
+* some files change ([fabed68](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fabed68852a1739957a2c527024a417f55f5c125))
+* style centered modal ([26338dc](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/26338dc7f44fd02ce14f967076ad4ed13f6bee3a))
+* style component changed ([1a73575](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1a73575370e0cc5ecc256be7ae1f95700e3d8265))
+
+
+### Code Refactoring
+
+* add error handling for popup ([3f95545](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3f955455038c8dd3ae786f354366579f6b2f8828))
+* emoved mobile row prop and featured from toplist ([c799d01](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c799d01274adb54c88f618cb5a6914583bbf2bd0))
+* fix build err ([8312a41](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8312a41b323fb91dee9dd78254ff12488accffac))
+* remove unneeded code ([d6a322e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d6a322e6a2c279ba8ecc500553319ae8f4758db4))
+* removed commented lines ([7c034dc](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7c034dc98e232c947826777ef295d4cc98a9930b))
+
+
+### Config
+
+* fixed conflict ([69999a8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/69999a8ab63fca1324c2e78cc9887a36e820fcc7))
+* source to irishluck and tracker env change ([5f884ff](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5f884ff4c36c6e3915424609e324be3145fa6e10))
+* updated core theme version ([e6e7a83](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e6e7a830617ee61433e5562bcb02c2b58cf0ad91))
+* updated core theme version ([258e405](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/258e40510de8cb6996df2eb91ea9ef6b5f1aba39))
+
+
+* Merge branch 'tm-2540-matrix-theme-components' into 'master' ([a7271b3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a7271b3b9cbacd0bd85f360605e894d21d27d577))
+* Merge branch 'tm-2491-toplist' into 'master' ([3bb864a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3bb864adfcc7ef8d6d3d45e9e183bc9bf17ce6ee))
+* Merge branch 'tm-2520-sitemap-plugin' into 'master' ([3e0ffbb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3e0ffbba6a2abcdfd5845e8e9885f3f5b3b88ca7))
+* Merge branch 'tm-2469-popup' into 'master' ([f64c132](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f64c132334a4da12c3de3df39f4693e422ff91e7))
+
+
+### norelease
+
+* merge branch 'master'  into tm-2469-popup ([7303fe5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7303fe5a385482504edf3dd0cecb171b4fc7b738))
+* resolve conflicts ([430bab1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/430bab128d94ee4da92173d041171d83262c4f35))
+* wip popup ([59cc45b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/59cc45bbb37e7ea97fdb29f936230f23b834f738))
+* wip popup, added event listeners ([25c481d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/25c481da741abd012ec564cd737b2284ad4a0d1f))
+
+
+### Tests
+
+* corrected click close modal covering ([032bb0b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/032bb0b1a80c38c95ca53489b4399f05d80de6bf))
+* fixing tests ([0f16d30](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0f16d30da3127a47765288b26e80dfdd7ca2abd9))
+
+## [2.0.4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v2.0.3...v2.0.4) (2021-10-12)
+
+
+### Bug Fixes
+
+* content image scroll fix ([ae387a1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ae387a13500700ab7222ae7886ecb0a582052bef))
+
+
+### Code Refactoring
+
+* lazyload changes to styles ([2cc7e68](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2cc7e68e64ea31fe14590122ec5e9c3ab89481ce))
+* lazyload override ([991897a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/991897a6776442661c9f2a01df86c4b87239e1b6))
+* remove overriden components ([836a1c9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/836a1c9a38ff71aed56247c9dd21b5a57f8290e9))
+
+
+### Config
+
+* merge branch master ([0a1c795](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0a1c795f17e389d60db360b291825f2ba341cb3f))
+* update core version ([34261fa](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/34261fae6805e7ffcf99d3e0402b86ea2caab873))
+
+
+* Merge branch 'tm-2480-content-fix' into 'master' ([fd44c4f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fd44c4f0e0e8532bb45fe4e74db69d89bf9d28bf))
+* Merge branch 'tm-2496-mobile-footer-links' into 'master' ([954c7e4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/954c7e45f6621285e719fd059758f7a33a34e422))
+
+## [2.0.3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v2.0.2...v2.0.3) (2021-10-11)
+
+
+### Config
+
+* release ([9d1aea3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9d1aea346bd96047ef0fd4d85c1e2ef14b4ed922))
+
 ## [2.0.2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v2.0.1...v2.0.2) (2021-10-11)
 
 

package/gatsby-config.js

@@ -1,4 +1,7 @@
+const { getSitemap } = require('./src/helpers/sitemap');
+
 const activeEnv = process.env.GATSBY_ACTIVE_ENV || 'development';
+const siteMapExcludes = process.env.SITEMAP_EXCLUDE.split(',') || [];
 
 require('dotenv').config({
   path: `.env.${activeEnv}`,
@@ -22,6 +25,39 @@ module.exports = {
         ],
       },
     },
+    {
+      resolve: `gatsby-plugin-sitemap`,
+      options: {
+        output: `/sitemap.xml`,
+        sitemapSize: 5000,
+        exclude: siteMapExcludes,
+        query: `
+          {
+            site {
+              siteMetadata {
+                siteUrl
+              }
+            }
+            allSitePage {
+              edges {
+                node {
+                  path
+                    context{
+                       page{
+                       robot_options{
+                          page_index
+                      }
+                    }
+                  }  
+                }
+              }
+            }
+          }
+        `,
+
+        serialize: ({ site, allSitePage }) => getSitemap(site, allSitePage),
+      },
+    },
     `gatsby-plugin-image`,
     `gatsby-plugin-sharp`,
     `gatsby-transformer-sharp`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -26,7 +26,7 @@
     "url": "https://storybook-matrix.gigmedia.com/"
   },
   "dependencies": {
-    "gatsby-core-theme": "^1.2.5",
+    "gatsby-core-theme": "^1.3.1",
     "babel-preset-gatsby": "^1.3.0",
     "chalk": "^4.1.0",
     "cross-env": "^7.0.2",

package/src/components/atoms/cards/popup-card/index.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta';
+import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
+
+import styles from './popup-card.module.scss';
+
+const PopupCard = ({ item, translations }) => {
+  const { logo_url: logoUrl } = item;
+  const oneLiner = item?.one_liners?.main?.one_liner;
+  const secondLiner = item?.one_liners?.secondary?.one_liner;
+  const [one, second] = (oneLiner?.includes('+') && oneLiner?.split('+')) || [
+    oneLiner,
+    secondLiner,
+  ];
+
+  return (
+    <div className={styles.popupCard}>
+      <div className={styles.wrapper}>
+        <div className={styles.imgContainer}>
+          <img width={98} height={98} src={imagePrettyUrl(logoUrl)} alt={oneLiner} />
+        </div>
+        <div className={styles.textContainer}>
+          <p className={styles.primaryText}>{one}</p>
+          <p className={styles.secondaryText}>{second}</p>
+        </div>
+      </div>
+      <div className={styles.buttonContainer}>
+        <OperatorCta
+          tracker="popup"
+          operator={item}
+          translations={translations}
+          playText="Play Now"
+        />
+      </div>
+    </div>
+  );
+};
+
+PopupCard.propTypes = {
+  item: PropTypes.shape({
+    links: PropTypes.shape({
+      main: PropTypes.string,
+    }),
+    logo_url: PropTypes.string,
+    one_liners: PropTypes.shape({
+      main: PropTypes.shape({
+        one_liner: PropTypes.string,
+      }),
+      secondary: PropTypes.shape({
+        one_liner: PropTypes.string,
+      }),
+    }),
+  }),
+  translations: PropTypes.shape({}),
+};
+
+export default PopupCard;

package/src/components/atoms/cards/popup-card/popup-card.module.scss

@@ -0,0 +1,88 @@
+.popupCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 16px;
+  border-top: 1px solid #a5bcf0;
+
+  @include min(tablet) {
+    flex-direction: row;
+    padding: 16px 0;
+  }
+
+  .wrapper {
+    height: 100%;
+    display: flex;
+
+    @include max(tablet) {
+      width: 100%;
+    }
+
+    .imgContainer {
+      width: 8rem;
+      height: 8rem;
+
+      @include min(tablet) {
+        width: 9.8rem;
+        height: 9.8rem;
+      }
+
+      > img {
+        width: 100%;
+        height: 100%;
+        border-radius: 0.4rem;
+      }
+    }
+
+    .textContainer {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      margin-left: 1.5rem;
+
+      .primaryText {
+        color: #e00028;
+        font-weight: 700;
+        font-size: 1.4rem;
+        line-height: 2.3rem;
+
+        @include min(tablet) {
+          font-size: 2rem;
+          line-height: 3rem;
+        }
+      }
+
+      .secondaryText {
+        color: #17182f;
+        font-weight: 700;
+        line-height: 2.3rem;
+        font-size: 1.4rem;
+
+        @include min(tablet) {
+          line-height: 3rem;
+          font-size: 1.8rem;
+        }
+      }
+    }
+  }
+
+  .buttonContainer {
+    margin-left: 3rem;
+
+    @include max(mobile) {
+      width: 100%;
+      margin: 1.6rem 0;
+
+      a {
+        width: 100%;
+      }
+    }
+
+    a {
+      border-radius: 4px;
+      font-weight: 700;
+      font-size: 1.8rem;
+    }
+  }
+}

package/src/components/atoms/cards/popup-card/popup-card.stories.js

@@ -0,0 +1,61 @@
+import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+import { singleToplistData } from 'gatsby-core-theme/tests/factories/modules/toplist.factory';
+
+import PopupCard from '.';
+
+export default {
+  title: 'Matrix-Theme/Atoms/Cards/Popup Card',
+  component: PopupCard,
+  argTypes: {
+    item: {
+      name: 'item',
+      type: { name: 'object', required: true },
+      defaultValue: '',
+      description: 'item object',
+      table: {
+        type: { summary: 'object' },
+        defaultValue: { summary: '' },
+      },
+    },
+    translations: {
+      name: 'translations',
+      type: { name: 'object', required: true },
+      defaultValue: '',
+      description: 'Translations object',
+      table: {
+        type: { summary: 'object' },
+        defaultValue: { summary: '' },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component that displays a single Popup Card',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <PopupCard {...args} />;
+export const Default = Template.bind({});
+Default.args = {
+  isStorybook: true,
+  item: singleToplistData.items[0].items[0],
+};

package/src/components/molecules/faq/faq.module.scss

@@ -26,6 +26,17 @@
                     @include flex-align (center, center);
                     margin-right: 0.5rem;
                 }
+                > div{
+                    margin: 0;
+                    margin-right: 2rem;
+                    font-weight: 700;
+                    font-size: 1.8rem;
+                    p, h2, h3, h4 {
+                        margin: 0;
+                        font-weight: 700;
+                        font-size: 1.8rem;
+                    }
+                }                
             }
             &:hover,
             &:focus {
@@ -44,21 +55,14 @@
                 &:after {
                     transform: translateY(-50%) rotate(-135deg);
                 }
-            }
-            p {
-                margin-right: 2rem;
-            }
+            }     
         }
 
         .content {
-            @include collapse(0.5s, 20rem);
+            @include collapse(0.5s, 500rem);
             font-size: 1.6rem;
             color: var(--color-20);
             padding: 0;
-
-            p {
-                padding: 1rem 0;
-            }
         }
     }
-}
+}

package/src/components/molecules/header/variants/article/index.js

@@ -7,6 +7,6 @@ export default function ArticleHeader({ page }) {
 
 ArticleHeader.propTypes = {
   page: PropTypes.shape({
-    title: PropTypes.string
-  })
-}
+    title: PropTypes.string,
+  }),
+};

package/src/components/molecules/header/variants/operator/index.js

@@ -7,6 +7,6 @@ export default function OperatorHeader({ operator }) {
 
 OperatorHeader.propTypes = {
   operator: PropTypes.shape({
-    name: PropTypes.string
-  })
-}
+    name: PropTypes.string,
+  }),
+};

package/src/components/molecules/info-grid/index.js

@@ -25,27 +25,27 @@ const InfoGrid = ({
 
   let volatility = 'Low';
 
-  if (page.relation.volatility === 1) {
+  if (page?.relation?.volatility === 1) {
     volatility = 'Medium';
-  } else if (page.relation.volatility === 2) {
+  } else if (page?.relation?.volatility === 2) {
     volatility = 'High';
   }
 
   let slotType = '';
 
-  if (page.relation.game_categories.length > 0) {
+  if (page?.relation?.game_categories?.length > 0) {
     slotType = page.relation.game_categories[0].name;
   }
 
   const gridValues = [
-    page.relation.game_provider.name,
-    page.relation.launch_date,
-    `${page.relation.rtp}%`,
+    page?.relation?.game_provider?.name,
+    page?.relation?.launch_date,
+    `${page?.relation?.rtp}%`,
     volatility,
-    page.relation.freespins === 1 ? 'Yes' : 'No',
-    page.relation.jackpots === 1 ? 'Yes' : 'No',
-    page.relation.winning_lines,
-    page.relation.number_of_reels,
+    page?.relation?.freespins === 1 ? 'Yes' : 'No',
+    page?.relation?.jackpots === 1 ? 'Yes' : 'No',
+    page?.relation?.winning_lines,
+    page?.relation?.number_of_reels,
     slotType,
   ];
 

package/src/components/molecules/toplist/row/variant-one.js

@@ -14,7 +14,7 @@ import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
 import SellingPoints from 'gatsby-core-theme/src/components/atoms/selling-points';
 import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta';
 import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
-import Bonus from '../../../atoms/bonus';
+import Bonus from 'gatsby-core-theme/src/components/atoms/bonus';
 import styles from './variant-one.module.scss';
 
 export default function Row({

package/src/components/molecules/toplist/row/variant-one.test.js

@@ -33,9 +33,7 @@ describe('toplist row component', () => {
     expect(getAllByText('name1 Review')[0].closest('a').getAttribute('href')).toEqual('/link1');
 
     // CTA
-    expect(getByText('Visit').closest('a').getAttribute('href')).toEqual(
-      '/tracker_link/shortName1'
-    );
+    expect(getByText('Visit').closest('a').getAttribute('href')).toEqual('/shortName1');
   });
 
   test('render row grid format', () => {
@@ -64,9 +62,7 @@ describe('toplist row component', () => {
     expect(getAllByText('name1 Review')[0].closest('a').getAttribute('href')).toEqual('/link1');
 
     // CTA
-    expect(getByText('Visit').closest('a').getAttribute('href')).toEqual(
-      '/tracker_link/shortName1'
-    );
+    expect(getByText('Visit').closest('a').getAttribute('href')).toEqual('/shortName1');
   });
 });
 afterEach(() => {

package/src/components/organisms/footer-navigation/footer-navigation.module.scss

@@ -8,15 +8,19 @@
   background-color: var(--color-7);
   border-radius: 0;
   z-index: 1001;
-  display: none;
+  display: flex;
+  opacity: 0;
+  visibility: hidden;
+  transition: all ease-in-out 0.2s;
 
   &.storybookStyles {
-    display: flex;
     position: absolute;
   }
 
   @media only screen and (max-width: 767px) {
-    display: flex;
+    opacity: 1;
+    visibility: visible;
+    
   }
 
   > ul {

package/src/components/organisms/footer-navigation/index.js

@@ -9,7 +9,7 @@ const FooterNavigation = ({ section, isStorybook = false }) => {
   const menuArray = getFirstModuleByName(section, 'menu');
   return (
     <div className={`${styles.footerLinks} ${isStorybook && styles.storybookStyles}`}>
-      <LinkList showListTitle={false} singleList lists={menuArray} />
+      <LinkList showListTitle={false} singleList lists={menuArray} once width={48} height={48} />
     </div>
   );
 };