gatsby-matrix-theme 32.0.4 → 32.0.6

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [32.0.6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v32.0.5...v32.0.6) (2023-09-14)
+
+
+### Bug Fixes
+
+* update close button ([256cf7e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/256cf7e5cc3c60b9f33c5f0c9024e23a780e9026))
+* update core version ([dc91e6a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/dc91e6a77ccf5e259a3b275b7a37cdfcbddcda4d))
+* update eclusive operator ([a1c22db](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a1c22db0c00f6414884902fe97bb507d5235a96b))
+
+
+* Merge branch 'tm-3638-pcsa-ui-ux-mobile' into 'master' ([c000172](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c000172c26f570e3e9e9fc6d4b630eba82b97214))
+
+## [32.0.5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v32.0.4...v32.0.5) (2023-09-07)
+
+
+### Bug Fixes
+
+* use the game name not title of the page for cards ([ca32475](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ca3247544d59edf423106e781bbee2c35c85b2e2))
+
+
+* Merge branch 'tm-3666-slots-name' into 'master' ([45622ab](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/45622ab96df45678bffbed25d8507dfaa12113e0))
+
 ## [32.0.4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v32.0.3...v32.0.4) (2023-09-06)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "32.0.4",
+  "version": "32.0.6",
   "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": "29.0.3",
+    "gatsby-core-theme": "29.0.5",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^5.11.0",

package/src/components/atoms/cards/game-cards/template-five/index.js

@@ -28,7 +28,8 @@ const TemplateFive = ({
   storybookImage,
   storybookLogo,
 }) => {
-  const { relation, title, path, banner } = item;
+  const { relation, path, banner } = item;
+  const { name } = relation;
   const { translations } = useContext(Context) || {};
   const featured = !!getSectionExtraField(null, item, 'card_background_image');
   const operator = item.extra_fields?.operator;
@@ -49,17 +50,17 @@ const TemplateFive = ({
       <Link
         to={path}
         className={`game-card-gtm ${styles?.cardBanner || ''}`}
-        aria-label={`${title} Link`}
+        aria-label={`${name} Link`}
       >
         {storybookImage || gameImage ? (
           <LazyImage
             width={width}
             height={height}
             src={storybookImage || imagePrettyUrl(gameImage, width, height)}
-            alt={getAltText(relation?.thumbnail_filename_object, title)}
+            alt={getAltText(relation?.thumbnail_filename_object, name)}
           />
         ) : (
-          <GatsbyImg filename="default-slot.jpg" alt={title} />
+          <GatsbyImg filename="default-slot.jpg" alt={name} />
         )}
       </Link>
       <div className={`${styles?.cardContent || ''} ${featured ? styles.featured || '' : ''}`}>
@@ -80,7 +81,7 @@ const TemplateFive = ({
           )}
         </div>
         <Link to={path} className="game-card-gtm">
-          <span className={styles?.cardTitle || ''}>{title}</span>
+          <span className={styles?.cardTitle || ''}>{name}</span>
         </Link>
         <div className={styles?.cardInner || ''}>
           {(storybookLogo || operatorLogo) && (
@@ -89,7 +90,7 @@ const TemplateFive = ({
               width={48}
               height={48}
               src={storybookLogo || imagePrettyUrl(operatorLogo.filename, width, height)}
-              alt={getAltText(operatorLogo, title)}
+              alt={getAltText(operatorLogo, name)}
             />
           )}
           {operator && operator.path ? (
@@ -147,6 +148,7 @@ TemplateFive.propTypes = {
       first_rating: PropTypes.string,
       second_rating: PropTypes.string,
       third_rating: PropTypes.string,
+      name: PropTypes.string,
       fourth_rating: PropTypes.string,
       game_provider: PropTypes.shape({
         name: PropTypes.string,
@@ -158,7 +160,6 @@ TemplateFive.propTypes = {
         alt: PropTypes.string,
       }),
     }),
-    title: PropTypes.string,
     path: PropTypes.string,
     banner: PropTypes.string,
     extra_fields: PropTypes.shape({

package/src/components/atoms/cards/game-cards/template-five/template-five.test.js

@@ -17,7 +17,7 @@ describe('Game Cards', () => {
     };
 
     const { container, getByText } = render(<TemplateFive item={card} />);
-    expect(getByText('wildz')).toBeTruthy();
+    expect(getByText('Wildz Casino')).toBeTruthy();
     expect(getByText('Test Game Provider')).toBeTruthy();
     expect(getByText('Play now')).toBeTruthy();
     expect(container.querySelectorAll('a')).toHaveLength(4);
@@ -38,7 +38,7 @@ describe('Game Cards', () => {
     };
 
     const { container, getByText } = render(<TemplateFive useOneStarRating={false} item={card} />);
-    expect(getByText('wildz')).toBeTruthy();
+    expect(getByText('Wildz Casino')).toBeTruthy();
     expect(getByText('Play at Test Game Operator and get 20 free spins')).toBeTruthy();
     expect(getByText('Play now')).toBeTruthy();
     expect(container.querySelectorAll('a')).toHaveLength(4);

package/src/components/atoms/cards/game-cards/template-four/index.js

@@ -27,7 +27,8 @@ const TemplateFour = ({
   useThumbnail = true,
   storybookImage,
 }) => {
-  const { relation, title, path, banner } = item;
+  const { relation, path, banner } = item;
+  const { name } = relation;
   const { translations } = useContext(Context) || {};
   const featured = !!getSectionExtraField(null, item, 'card_background_image');
   const operator = item.extra_fields?.operator;
@@ -42,17 +43,17 @@ const TemplateFour = ({
       <Link
         to={path}
         className={`game-card-gtm ${styles?.cardBanner || ''}`}
-        aria-label={`${title} Link`}
+        aria-label={`${name} Link`}
       >
         {storybookImage || gameImage ? (
           <LazyImage
             width={width}
             height={height}
             src={storybookImage || imagePrettyUrl(gameImage, width, height)}
-            alt={getAltText(relation?.thumbnail_filename_object, title)}
+            alt={getAltText(relation?.thumbnail_filename_object, name)}
           />
         ) : (
-          <GatsbyImg filename="default-slot.jpg" alt={title} />
+          <GatsbyImg filename="default-slot.jpg" alt={name} />
         )}
       </Link>
       {relation && (
@@ -71,7 +72,7 @@ const TemplateFour = ({
       )}
       <div className={`${styles?.cardContent || ''} ${featured ? styles.featured : ''}`}>
         <Link to={path} className="game-card-gtm">
-          <span className={styles?.cardTitle || ''}>{title}</span>
+          <span className={styles?.cardTitle || ''}>{name}</span>
         </Link>
         <div className={styles?.cardInner || ''}>
           <span>
@@ -132,6 +133,7 @@ TemplateFour.propTypes = {
       first_rating: PropTypes.string,
       second_rating: PropTypes.string,
       third_rating: PropTypes.string,
+      name: PropTypes.string,
       fourth_rating: PropTypes.string,
       game_provider: PropTypes.shape({ name: PropTypes.string, path: PropTypes.string }),
       thumbnail_filename_object: PropTypes.shape({
@@ -139,7 +141,6 @@ TemplateFour.propTypes = {
         alt: PropTypes.string,
       }),
     }),
-    title: PropTypes.string,
     path: PropTypes.string,
     banner: PropTypes.string,
     extra_fields: PropTypes.shape({

package/src/components/atoms/cards/game-cards/template-four/template-four.test.js

@@ -17,7 +17,7 @@ describe('Game Cards', () => {
     };
 
     const { container, getByText } = render(<TemplateFour item={card} />);
-    expect(getByText('wildz')).toBeTruthy();
+    expect(getByText('Wildz Casino')).toBeTruthy();
     expect(getByText('Test Game Provider')).toBeTruthy();
     expect(getByText('Play now')).toBeTruthy();
     expect(container.querySelectorAll('a')).toHaveLength(4);
@@ -33,7 +33,7 @@ describe('Game Cards', () => {
     };
 
     const { container, getByText } = render(<TemplateFour useOneStarRating={false} item={card} />);
-    expect(getByText('wildz')).toBeTruthy();
+    expect(getByText('Wildz Casino')).toBeTruthy();
     expect(getByText('Test Game Operator')).toBeTruthy();
     expect(getByText('Play now')).toBeTruthy();
     expect(container.querySelectorAll('a')).toHaveLength(4);

package/src/components/atoms/cards/game-cards/template-one/index.js

@@ -28,7 +28,8 @@ const TemplateOne = ({
   useThumbnail = true,
   storybookImage,
 }) => {
-  const { relation, title, path, banner } = item;
+  const { relation, path, banner } = item;
+  const { name } = relation;
   const { translations } = useContext(Context) || {};
   const featured = !!getSectionExtraField(null, item, 'card_background_image');
   const operator = item.extra_fields?.operator;
@@ -43,22 +44,22 @@ const TemplateOne = ({
       <Link
         to={path}
         className={`game-card-gtm ${styles?.cardBanner || ''}`}
-        aria-label={`${title} Link`}
+        aria-label={`${name} Link`}
       >
         {storybookImage || gameImage ? (
           <LazyImage
             width={width}
             height={height}
             src={storybookImage || imagePrettyUrl(gameImage, width, height)}
-            alt={getAltText(relation?.thumbnail_filename_object, title)}
+            alt={getAltText(relation?.thumbnail_filename_object, name)}
           />
         ) : (
-          <GatsbyImg filename="default-slot.jpg" alt={title} />
+          <GatsbyImg filename="default-slot.jpg" alt={name} />
         )}
       </Link>
       <div className={`${styles?.cardContent || ''} ${featured ? styles?.featured || '' : ''}`}>
         <Link to={path} className="game-card-gtm">
-          <span className={styles?.cardTitle || ''}>{title}</span>
+          <span className={styles?.cardTitle || ''}>{name}</span>
         </Link>
         <div className={styles?.cardInner || ''}>
           {operator && operator.path ? (
@@ -133,6 +134,7 @@ TemplateOne.propTypes = {
       first_rating: PropTypes.string,
       second_rating: PropTypes.string,
       third_rating: PropTypes.string,
+      name: PropTypes.string,
       fourth_rating: PropTypes.string,
       game_provider: PropTypes.shape({ name: PropTypes.string, path: PropTypes.string }),
       thumbnail_filename_object: PropTypes.shape({
@@ -140,7 +142,6 @@ TemplateOne.propTypes = {
         alt: PropTypes.string,
       }),
     }),
-    title: PropTypes.string,
     path: PropTypes.string,
     banner: PropTypes.string,
     extra_fields: PropTypes.shape({

package/src/components/atoms/cards/game-cards/template-one/template-one.test.js

@@ -17,7 +17,7 @@ describe('Game Cards', () => {
     };
 
     const { container, getByText } = render(<TemplateOne item={card} />);
-    expect(getByText('wildz')).toBeTruthy();
+    expect(getByText('Wildz Casino')).toBeTruthy();
     expect(getByText('Test Game Provider')).toBeTruthy();
     expect(getByText('Play now')).toBeTruthy();
     expect(container.querySelectorAll('a')).toHaveLength(4);
@@ -33,7 +33,7 @@ describe('Game Cards', () => {
     };
 
     const { container, getByText } = render(<TemplateOne useOneStarRating={false} item={card} />);
-    expect(getByText('wildz')).toBeTruthy();
+    expect(getByText('Wildz Casino')).toBeTruthy();
     expect(getByText('Test Game Operator')).toBeTruthy();
     expect(getByText('Play now')).toBeTruthy();
     expect(container.querySelectorAll('a')).toHaveLength(4);

package/src/components/atoms/cards/game-cards/template-three/index.js

@@ -27,7 +27,8 @@ const TemplateThree = ({
   useThumbnail = true,
   storybookImage,
 }) => {
-  const { relation, title, path, banner } = item;
+  const { relation, path, banner } = item;
+  const { name } = relation;
   const { translations } = useContext(Context) || {};
   const featured = !!getSectionExtraField(null, item, 'card_background_image');
   const operator = item.extra_fields?.operator;
@@ -42,17 +43,17 @@ const TemplateThree = ({
       <Link
         to={path}
         className={`game-card-gtm ${styles?.cardBanner || ''}`}
-        aria-label={`${title} Link`}
+        aria-label={`${name} Link`}
       >
         {storybookImage || gameImage ? (
           <LazyImage
             width={width}
             height={height}
             src={storybookImage || imagePrettyUrl(gameImage, width, height)}
-            alt={getAltText(relation?.thumbnail_filename_object, title)}
+            alt={getAltText(relation?.thumbnail_filename_object, name)}
           />
         ) : (
-          <GatsbyImg filename="default-slot.jpg" alt={title} />
+          <GatsbyImg filename="default-slot.jpg" alt={name} />
         )}
       </Link>
       <div className={`${styles?.cardContent || ''} ${featured ? styles.featured || '' : ''}`}>
@@ -73,7 +74,7 @@ const TemplateThree = ({
           )}
         </div>
         <Link to={path} className="game-card-gtm">
-          <span className={styles?.cardTitle || ''}>{title}</span>
+          <span className={styles?.cardTitle || ''}>{name}</span>
         </Link>
         <div className={styles?.cardInner || ''}>
           {operator && operator.path ? (
@@ -132,13 +133,13 @@ TemplateThree.propTypes = {
       second_rating: PropTypes.string,
       third_rating: PropTypes.string,
       fourth_rating: PropTypes.string,
+      name: PropTypes.string,
       game_provider: PropTypes.shape({ name: PropTypes.string, path: PropTypes.string }),
       thumbnail_filename_object: PropTypes.shape({
         filename: PropTypes.string,
         alt: PropTypes.string,
       }),
     }),
-    title: PropTypes.string,
     path: PropTypes.string,
     banner: PropTypes.string,
     extra_fields: PropTypes.shape({

package/src/components/atoms/cards/game-cards/template-three/template-three.test.js

@@ -17,7 +17,7 @@ describe('Game Cards', () => {
     };
 
     const { container, getByText } = render(<TemplateThree item={card} />);
-    expect(getByText('wildz')).toBeTruthy();
+    expect(getByText('Wildz Casino')).toBeTruthy();
     expect(getByText('Test Game Provider')).toBeTruthy();
     expect(getByText('Play now')).toBeTruthy();
     expect(container.querySelectorAll('a')).toHaveLength(4);
@@ -33,7 +33,7 @@ describe('Game Cards', () => {
     };
 
     const { container, getByText } = render(<TemplateThree useOneStarRating={false} item={card} />);
-    expect(getByText('wildz')).toBeTruthy();
+    expect(getByText('Wildz Casino')).toBeTruthy();
     expect(getByText('Test Game Operator')).toBeTruthy();
     expect(getByText('Play now')).toBeTruthy();
     expect(container.querySelectorAll('a')).toHaveLength(4);

package/src/components/atoms/cards/game-cards/template-two/index.js

@@ -27,7 +27,8 @@ const TemplateTwo = ({
   useThumbnail = true,
   storybookImage,
 }) => {
-  const { relation, title, path, banner } = item;
+  const { relation, path, banner } = item;
+  const { name } = relation;
   const { translations } = useContext(Context) || {};
   const featured = !!getSectionExtraField(null, item, 'card_background_image');
   const operator = item.extra_fields?.operator;
@@ -42,23 +43,23 @@ const TemplateTwo = ({
       <Link
         to={path}
         className={`game-card-gtm ${styles?.cardBanner || ''}`}
-        aria-label={`${title} Link`}
+        aria-label={`${name} Link`}
       >
         {storybookImage || gameImage ? (
           <LazyImage
             width={width}
             height={height}
             src={storybookImage || imagePrettyUrl(gameImage, width, height)}
-            alt={getAltText(relation?.thumbnail_filename_object, title)}
+            alt={getAltText(relation?.thumbnail_filename_object, name)}
           />
         ) : (
-          <GatsbyImg filename="default-slot.jpg" alt={title} />
+          <GatsbyImg filename="default-slot.jpg" alt={name} />
         )}
       </Link>
       <div className={`${styles?.cardContent || ''} ${featured ? styles?.featured || '' : ''}`}>
         <div className={styles?.cardInnerTop || ''}>
           <Link to={path} className="game-card-gtm">
-            <span className={styles?.cardTitle || ''}>{title}</span>
+            <span className={styles?.cardTitle || ''}>{name}</span>
           </Link>
           <div className={styles?.cardRating || ''}>
             {relation && (
@@ -134,6 +135,7 @@ TemplateTwo.propTypes = {
       second_rating: PropTypes.string,
       third_rating: PropTypes.string,
       fourth_rating: PropTypes.string,
+      name: PropTypes.string,
       game_provider: PropTypes.shape({ name: PropTypes.string, path: PropTypes.string }),
       thumbnail_filename_object: PropTypes.shape({
         filename: PropTypes.string,

package/src/components/atoms/cards/game-cards/template-two/template-two.test.js

@@ -17,7 +17,7 @@ describe('Game Cards', () => {
     };
 
     const { container, getByText } = render(<TemplateTwo item={card} />);
-    expect(getByText('wildz')).toBeTruthy();
+    expect(getByText('Wildz Casino')).toBeTruthy();
     expect(getByText('Test Game Provider')).toBeTruthy();
     expect(getByText('Play now')).toBeTruthy();
     expect(container.querySelectorAll('a')).toHaveLength(4);
@@ -33,7 +33,7 @@ describe('Game Cards', () => {
     };
 
     const { container, getByText } = render(<TemplateTwo useOneStarRating={false} item={card} />);
-    expect(getByText('wildz')).toBeTruthy();
+    expect(getByText('Wildz Casino')).toBeTruthy();
     expect(getByText('Test Game Operator')).toBeTruthy();
     expect(getByText('Play now')).toBeTruthy();
     expect(container.querySelectorAll('a')).toHaveLength(4);

package/src/components/molecules/operator-exclusive/index.js

@@ -2,7 +2,7 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable no-nested-ternary */
 /* eslint-disable import/no-extraneous-dependencies */
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
 import Link from 'gatsby-core-theme/src/hooks/link';
@@ -12,7 +12,7 @@ import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import { imagePrettyUrl, translate, getAltText } from '~helpers/getters';
 import styles from './oeprator-exlusive.module.scss';
 
-const Banner = ({ bonus, template }) => {
+const Banner = ({ bonus, template, closeButtonIcon = true }) => {
   const { value, module_title } = bonus;
   const [, reviewPath] = value.review_link.split('.co.za/');
   const splitBy = module_title?.includes('OR') ? 'OR' : module_title?.includes('+') ? '+' : '&';
@@ -22,49 +22,66 @@ const Banner = ({ bonus, template }) => {
   const { translations } = useContext(Context) || {};
   const imageObject = value?.standardised_logo_url_object || value?.logo_url_object;
   const tracker = isMobileDevice() ? 'mobbanner' : 'banner';
+  const [closed, setClosed] = useState(false);
 
   return (
-    <div className={`${styles?.wrapper || ''}`}>
-      <div className={styles?.content || ''}>
-        <div className={styles?.offer || ''}>
-          {translate(translations, 'exclusive_offer', 'EXCLUSIVE OFFER')}
-        </div>
-        <div className={styles?.logo || ''}>
-          <Link to={reviewPath} title={bonus.name} className="banner-gtm bonus-cta logo-cta">
-            <LazyImage
-              alt={getAltText(imageObject, value.name)}
-              src={imagePrettyUrl(imageObject?.filename || imageObject?.logo_url, 48, 48)}
-              width={48}
-              height={48}
-              loading="eager"
-            />
-          </Link>
-        </div>
-        <div className={styles?.info || ''}>
-          <p>
-            {bonus.value.name}: Get <span>{firstLine}</span>
-            {secondLine && splitBy + secondLine}
-          </p>
-          <div className={styles?.button || ''}>
-            <OperatorCta
-              operator={bonus.value}
-              translationsObj={{
-                active: { translationKey: 'play_now', defaultValue: 'Play now' },
-                not_recommended: {
-                  translationKey: 'not_recommended',
-                  defaultValue: 'Not Recommended',
-                },
-                coming_soon: { translationKey: 'coming_soon', defaultValue: 'Soon Available' },
-                inactive: { translationKey: 'inactive', defaultValue: 'Not Accepting New Players' },
-                blacklisted: { translationKey: 'blacklisted', defaultValue: 'Blacklisted' },
-              }}
-              tracker={tracker}
-              gtmClass="banner-operator-cta-gtm"
-              pageTemplate={template}
-            />
+    <div>
+      {!closed && (
+        <div className={`${styles?.wrapper || ''}`}>
+          <div className={styles?.content || ''}>
+            {closeButtonIcon && (
+              <button
+                className={closed ? `${styles.closed || ''}` : `${styles.closeButton || ''}`}
+                type="button"
+                onClick={() => setClosed(true)}
+              >
+                ✕
+              </button>
+            )}
+            <div className={styles?.offer || ''}>
+              {translate(translations, 'exclusive_offer', 'EXCLUSIVE OFFER')}
+            </div>
+            <div className={styles?.logo || ''}>
+              <Link to={reviewPath} title={bonus.name} className="banner-gtm bonus-cta logo-cta">
+                <LazyImage
+                  alt={getAltText(imageObject, value.name)}
+                  src={imagePrettyUrl(imageObject?.filename || imageObject?.logo_url, 48, 48)}
+                  width={48}
+                  height={48}
+                  loading="eager"
+                />
+              </Link>
+            </div>
+            <div className={styles?.info || ''}>
+              <p>
+                {bonus.value.name}: Get <span>{firstLine}</span>
+                {secondLine && splitBy + secondLine}
+              </p>
+              <div className={styles?.button || ''}>
+                <OperatorCta
+                  operator={bonus.value}
+                  translationsObj={{
+                    active: { translationKey: 'play_now', defaultValue: 'Play now' },
+                    not_recommended: {
+                      translationKey: 'not_recommended',
+                      defaultValue: 'Not Recommended',
+                    },
+                    coming_soon: { translationKey: 'coming_soon', defaultValue: 'Soon Available' },
+                    inactive: {
+                      translationKey: 'inactive',
+                      defaultValue: 'Not Accepting New Players',
+                    },
+                    blacklisted: { translationKey: 'blacklisted', defaultValue: 'Blacklisted' },
+                  }}
+                  tracker={tracker}
+                  gtmClass="banner-operator-cta-gtm"
+                  pageTemplate={template}
+                />
+              </div>
+            </div>
           </div>
         </div>
-      </div>
+      )}
     </div>
   );
 };

package/src/components/molecules/operator-exclusive/oeprator-exlusive.module.scss

@@ -85,38 +85,21 @@
       }
     }
     .closeButton {
-      padding: 0 0.3rem 2rem 0.3rem;
       cursor: pointer;
-      width: 2rem;
-      height: 2rem;
-      background-color: grey;
+      width: 1.4rem;
+      height: 1.4rem;
+      color: #6E6E84;
       position: absolute;
-      right: 1rem;
+      right: 0rem;
       border-radius: 50%;
-      top: 1rem;
-      &::before {
-        content: '';
-        display: inline-block;
-        width: 1rem;
-        height: 0.2rem;
-        background-color: var(--color-1);
-        transform: rotate(45deg);
-        position: absolute;
-        top: 0.9rem;
-        right: 0.5rem;
-      }
-      &::after {
-        content: '';
-        display: inline-block;
-        width: 0.2rem;
-        height: 1rem;
-        background-color: white;
-        transform: rotate(45deg);
-        position: absolute;
-        top: 0.5rem;
-        right: 0.9rem;
+      top: 0rem;
+
+      @include min(tablet) {
+        display: none;
       }
     }
+
+
   }
   @include min(tablet) {
     padding: 0 2rem;
@@ -153,6 +136,3 @@
     }
   }
 }
-.close {
-  display: none;
-}

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","files":"anchor.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/organisms\\/anchor\\/anchor\\.stories\\.js)$"},{"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":"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/table","files":"table.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/content\\/table\\/table\\.stories\\.js)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/content/text/Images","files":"text.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/content\\/text\\/Images\\/text\\.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)$"}];</script><script src="runtime~main.9e186118.iframe.bundle.js"></script><script src="958.0d025941.iframe.bundle.js"></script><script src="main.3afcbd3a.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","files":"anchor.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/organisms\\/anchor\\/anchor\\.stories\\.js)$"},{"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":"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/table","files":"table.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/content\\/table\\/table\\.stories\\.js)$"},{"titlePrefix":"","directory":"../node_modules/gatsby-core-theme/src/components/molecules/content/text/Images","files":"text.stories.js","importPathMatcher":"^(?:\\.\\.\\/node_modules\\/gatsby-core-theme\\/src\\/components\\/molecules\\/content\\/text\\/Images\\/text\\.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)$"}];</script><script src="runtime~main.9e186118.iframe.bundle.js"></script><script src="958.0d025941.iframe.bundle.js"></script><script src="main.dad56c23.iframe.bundle.js"></script></body></html>