gatsby-matrix-theme 2.0.2 → 2.1.0

package/storybook/public/vendors~main.aac219e4.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vendors~main.aac219e4.iframe.bundle.js","sources":[],"mappings":";;;;;A","sourceRoot":""}

package/src/components/atoms/author-box/author-box.module.scss

@@ -1,92 +0,0 @@
-.container {
-  max-width: var(--main-container-max);
-  margin: 0 auto;
-  padding: 1.6rem;
-  @include flex-direction(column);
-  .innerContainer {
-    background-color: var(--color-9);
-    padding: 1.6rem;
-    border-radius: var(--border-radius);
-    .information {
-      @include flex-align(center, center);
-      flex-direction: column;
-      img {
-        width: 15rem;
-        height: 15rem;
-        border-radius: 50%;
-      }
-      .name {
-        margin: 3rem 0 .5rem 0;
-      }
-      .title {
-        margin-bottom: 2rem;
-        font-weight: bold;
-        color: var(--color-3);
-      }
-    }
-    .description {
-      @include flex-align(center, center);
-      flex-direction: column;
-      .links {
-        @include flex-align(center, center);
-        flex-direction: column;
-        .contactLinks {
-          color: var(--text-link-color);
-          order: 2;
-          a {
-            padding: 0 .5rem;
-            line-height: 1.5rem;
-            &:hover {
-              text-decoration: underline;
-            }
-          }
-          a:not(:last-child) {
-            border-right: 1px solid var(--text-link-color);
-          }
-        }
-        .socialIcons {
-          order: 3;
-          svg {
-            margin: 0 .3rem;
-          }
-        }
-        .biography {
-          padding-top: 2rem;
-          text-align: left;
-          color: var(--color-3);
-          order: 4;
-        }
-      }
-      .button {
-        border: 2px solid var(--color-3);
-        padding: .8rem 3rem;
-        color: var(--color-3);
-        border-radius: .5rem;
-        font-weight: bold;
-        margin-top: 2rem;
-        &:hover {
-          text-decoration: none;
-        }
-      }
-    }
-  }
-}
-
-@include min(tablet) {
-  .container {
-    padding: 1.6rem 2.4rem;
-    .innerContainer {
-      display: grid;
-      grid-template-columns: 1fr 3fr;
-      grid-column-gap: 2rem;
-      .description {
-        .links {
-          .biography {
-            padding: 0 0 2rem 0;
-            order: 1;
-          }
-        }
-      }
-    }
-  }
-}

package/src/components/atoms/author-box/author-box.stories.js

@@ -1,72 +0,0 @@
-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 AuthorBox from '.';
-
-export default {
-  title: 'Matrix-Theme/Atoms/Author Box',
-  component: AuthorBox,
-  argTypes: {
-    author: {
-      name: 'author',
-      type: { name: 'object', required: false },
-      defaultValue: null,
-      description: 'The author object.',
-    },
-    translations: {
-      name: 'translations',
-      type: { name: 'object', required: false },
-      defaultValue: null,
-      description: 'The translations object',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: 'Author box component',
-      },
-      page: () => (
-        <>
-          <Title />
-          <Description />
-          <Primary />
-          <ArgsTable story={PRIMARY_STORY} />
-        </>
-      ),
-    },
-  },
-};
-
-const Template = (args) => <AuthorBox {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  author: {
-    image_object: {
-      url: 'https://assets-srv.s3.eu-west-1.amazonaws.com/2020-09-25-15-01-46-imagesjpeg-191264.png',
-      width: '150',
-      height: '150',
-    },
-    name: 'Ida Moen Olsen',
-    author_title: 'Online Casino Specialist',
-    email_address: 'ida@gig.com',
-    personal_website: 'https://www.irishluck.ie',
-    additional_url: 'https://www.irishluck.ie',
-    facebook_profile: 'https://www.irishluck.ie',
-    instagram_profile: 'https://www.irishluck.ie',
-    linkedin_profile: 'https://www.irishluck.ie',
-    biography:
-      "The author's biography goes here. This author is cool and she likes writing articles. Something else about Irishluck and how this author has experience.",
-    profile_page_path: '/',
-  },
-  translations: {
-    read_more: 'Les mer',
-  },
-};

package/src/components/atoms/author-box/author-box.test.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import { render, cleanup } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-
-import getPageData from 'gatsby-core-theme/tests/factories/pages/default.factory';
-import { authorObject } from '../../../../tests/factories/modules/matrix/author-box.factory';
-import AuthorBox from '.';
-
-describe('author box component', () => {
-  test('render', () => {
-    const page = getPageData;
-    const author = authorObject;
-    const { container, getByText } = render(
-      <AuthorBox author={author} translations={page.translations} />
-    );
-    expect(container).toBeTruthy();
-    // Logo
-    expect(container.querySelector('img')).toBeFalsy();
-    expect(container.querySelectorAll('div.lazyload-placeholder')).toHaveLength(1);
-    // Name
-    expect(getByText('Ida Moen Olsen')).toBeTruthy();
-    // Title
-    expect(getByText('Casino Specialist')).toBeTruthy();
-    // Email, website, additional url
-    expect(container.querySelectorAll('.contactLinks a')).toBeTruthy();
-    // Facebook, Instagram, LinkedIn
-    expect(container.querySelectorAll('.socialIcons a')).toBeTruthy();
-    // Biography
-    expect(getByText('Here goes the biography of the author.')).toBeTruthy();
-    // CTA
-    expect(getByText('Read More')).toBeTruthy();
-  });
-});
-afterEach(() => {
-  cleanup();
-});

package/src/components/atoms/author-box/index.js

@@ -1,94 +0,0 @@
-import React from 'react';
-import { FaInstagram, FaFacebookSquare, FaTwitter, FaLinkedin } from 'react-icons/fa';
-import PropTypes from 'prop-types';
-import { translate } from 'gatsby-core-theme/src/helpers/getters';
-import styles from './author-box.module.scss';
-import LazyImage from '~hooks/lazy-image';
-import Link from '~hooks/link';
-
-export default function AuthorBox({ author, translations }) {
-  const socialLinks = [
-    { link: author.facebook_profile, icon: <FaFacebookSquare /> },
-    { link: author.instagram_profile, icon: <FaInstagram /> },
-    { link: author.linkedin_profile, icon: <FaLinkedin /> },
-    { link: author.twitter_profile, icon: <FaTwitter /> },
-  ];
-  return (
-    <div className={styles.container}>
-      <div className={styles.innerContainer}>
-        <div className={styles.information}>
-          <LazyImage
-            src={author.image_object?.url}
-            alt={author.image_alt}
-            width={author.image_object?.width}
-            height={author.image_object?.height}
-          />
-          <h3 className={styles.name}>{author.name}</h3>
-          <p className={styles.title}>{author.author_title}</p>
-        </div>
-        <div className={styles.description}>
-          <div className={styles.links}>
-            <p className={styles.contactLinks}>
-              {author.email_address && (
-                <a href={`mailto:${author.email_address}`} target="_blank" rel="noreferrer">
-                  Email
-                </a>
-              )}
-              {author.personal_website && (
-                <a href={author.personal_website} target="_blank" rel="noreferrer">
-                  Website
-                </a>
-              )}
-              {author.additional_url && (
-                <a href={author.additional_url} target="_blank" rel="noreferrer">
-                  Contact
-                </a>
-              )}
-            </p>
-            <p className={styles.socialIcons}>
-              {socialLinks
-                .filter((socialLink) => socialLink.link)
-                .map((filteredLinks) => (
-                  // eslint-disable-next-line jsx-a11y/control-has-associated-label
-                  <a href={filteredLinks.link} target="_blank" rel="noreferrer">
-                    {filteredLinks.icon}
-                  </a>
-                ))}
-            </p>
-            <p className={styles.biography}>{author.biography}</p>
-          </div>
-          {author.profile_page_path && (
-            <Link to={author.profile_page_path} title="Read More" className={styles.button}>
-              {translate(translations, 'read_more', 'Read More')}
-            </Link>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-AuthorBox.propTypes = {
-  author: PropTypes.shape({
-    image_object: PropTypes.shape({
-      url: PropTypes.string,
-      width: PropTypes.number,
-      height: PropTypes.number,
-    }),
-    image_alt: PropTypes.string,
-    name: PropTypes.string,
-    author_title: PropTypes.string,
-    email_address: PropTypes.string,
-    personal_website: PropTypes.string,
-    additional_url: PropTypes.string,
-    facebook_profile: PropTypes.string,
-    instagram_profile: PropTypes.string,
-    linkedin_profile: PropTypes.string,
-    twitter_profile: PropTypes.string,
-    biography: PropTypes.string,
-    profile_page_path: PropTypes.string,
-  }),
-  translations: PropTypes.shape({
-    read_more: PropTypes.string,
-  }),
-};

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

@@ -1,125 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FaAngleRight } from 'react-icons/fa';
-import { translate } from 'gatsby-core-theme/src/helpers/getters';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import styles from 'gatsby-matrix-theme/src/components/atoms/module-title/module-title.module.scss';
-import Link from '~hooks/link';
-
-const ModuleTitle = ({
-  module,
-  viewMoreIcon = <FaAngleRight />,
-  pageContext = null,
-  translations,
-}) => {
-  const tabsToplist = module?.items?.length > 1 && module?.name === 'top_list';
-
-  const CustomTag = `${module.module_title_tag}`;
-
-  const monthNames = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ];
-  const d = new Date();
-  const year = d.getFullYear();
-  const month = monthNames[d.getMonth()];
-  const currentMonth = module.show_last_updated_date
-    ? translate(translations, month, month)
-    : false;
-  const getTitle = () => {
-    if (!module?.module_title_tag) {
-      return (
-        <h2 className={styles.noTag}>
-          {module.title}
-          {currentMonth ? (
-            <span className={styles.toplistDate}>
-              <small>•</small>
-              {`${currentMonth} ${year}`}
-            </span>
-          ) : null}
-        </h2>
-      );
-    }
-
-    if (module.module_title_tag)
-      return (
-        <CustomTag>
-          {module.module_title}
-          {currentMonth ? (
-            <span className={styles.toplistDate}>
-              <small>•</small>
-              {`${currentMonth} ${year}`}
-            </span>
-          ) : null}
-        </CustomTag>
-      );
-    return (
-      <span className={styles.noTag}>
-        {module.module_title}
-        {currentMonth ? (
-          <span className={styles.toplistDate}>
-            <small>•</small>
-            {`${currentMonth} ${year}`}
-          </span>
-        ) : null}
-      </span>
-    );
-  };
-
-  const template = pageContext && pageContext?.page?.template;
-  return (
-    <div className={`${tabsToplist ? styles.tabsToplist : null}`}>
-      {(module.module_title ||
-        module.link_label ||
-        (module.title && (module.name === 'cards' || module.name === 'top_list'))) && (
-        <div
-          className={`${styles.moduleTitle} ${styles[template]} ${
-            module?.style && styles[module.style]
-          }`}
-        >
-          <span className={styles.spanToplist}>
-            {(module?.title || module.module_title) && getTitle(module)}
-          </span>
-
-          {module.link_label && (
-            <Link to={module.link_value} className={styles.viewMore}>
-              {module.link_label}
-              {viewMoreIcon}
-            </Link>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-ModuleTitle.propTypes = {
-  module: PropTypes.shape({
-    module_title: PropTypes.string,
-    module_title_tag: PropTypes.string,
-    link_label: PropTypes.string,
-    link_value: PropTypes.string,
-    name: PropTypes.string,
-    style: PropTypes.string,
-    items: PropTypes.shape({
-      length: PropTypes.number,
-    }),
-    show_last_updated_date: PropTypes.string,
-    title: PropTypes.string,
-  }),
-  viewMoreIcon: PropTypes.element,
-  pageContext: PropTypes.shape({}),
-  translations: PropTypes.shape({}),
-};
-
-export default ModuleTitle;

package/src/components/atoms/module-title/module-title.module.scss

@@ -1,52 +0,0 @@
-  .moduleTitle {
-    @include flex-align(center, space-between);
-  
-    .noTag {
-      display: block;
-      margin-bottom: 1rem;
-    }
-  
-    .viewMore {
-      color: var(--text-link-color);
-      font-size: 1.6rem;
-      text-decoration: underline;
-      margin-bottom: 1rem;
-  
-      svg {
-        margin-left: 1.2rem;
-      }
-    }
-  }
-  .tabsToplist{
-    @include min(tablet){
-      margin-bottom: -11rem !important;
-      max-width: 507px !important;
-      position: relative;
-      left: -127px;
-    }
-    @include min(laptop){
-      margin-bottom: -9rem !important;
-      max-width: 515px!important;
-      position: relative;
-      left: -217px;
-    }
-    .spanToplist{
-      h2{
-        max-width: 461px;
-        @include min(laptop){
-          margin-bottom: 2rem;
-        }
-      }
-    }
-  }
-  .toplistDate{
-    color: var(--color-6);
-    font-weight: 300;
-    font-size: 1.4rem;
-    padding-left: .5rem;
-    position: relative;
-    bottom: 2px;
-  }
-  .spanToplist{
-    display: flex;
-  }

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

@@ -1,201 +0,0 @@
-.content {
-  width: 100%;
-  table{
-    @include min(tablet){
-        thead, tbody{
-          display: table;
-          width: 100%;
-          table-layout: fixed;
-        }
-      }
-  }
-  p{
-    margin-bottom: 24px;
-  }
-  table {
-    width: 100% !important;
-    border: none;
-    margin-bottom: 1.4rem;
-    border-radius: var(--table-border-radius);
-    font-weight: 400;
-    table-layout: auto;
-    @include link-color(var(--color-6));
-
-    thead {
-      tr {
-        th {
-          padding: 1rem;
-          vertical-align: top;
-          padding-left: 1.4rem;
-          color: var(--table-head-text);
-          background: var(--table-head-background);
-          font-weight: 700;
-
-          &:first-child {
-            border-top-left-radius: var(--table-border-radius);
-          }
-
-          &:last-child {
-            border-top-right-radius: var(--table-border-radius);
-          }
-        }
-      }
-    }
-
-    tbody {
-      tr {
-        background-color: var(--table-background);
-
-        &:nth-child(odd) {
-          background-color: var(--table-highlight);
-        }
-
-        td {
-          padding: 1rem;
-          vertical-align: top;
-          padding-left: 1.4rem;
-        }
-      }
-
-      tr:last-child td:last-child {
-        border-bottom-right-radius: var(--table-border-radius);
-      }
-
-      tr:last-child td:first-child {
-        border-bottom-left-radius: var(--table-border-radius);
-      }
-    }
-  }
-
-  .firstTable {
-    table {
-      tbody tr td {
-        text-align: center;
-      }
-    }
-  }
-
-  .secondTable {
-    table {
-      thead {
-        tr th {
-          &:last-child {
-            text-align: left;
-          }
-        }
-      }
-
-      tbody tr td {
-        &:first-child {
-          background-color: var(--second-table-background);
-          text-align: center;
-
-          a {
-            font-weight: 700;
-          }
-        }
-
-        &:nth-child(2) {
-          text-align: center;
-        }
-      }
-    }
-  }
-
-  .tableResponsive,
-  .tableResponsive > div {
-    box-sizing: content-box;
-    width: 100%;
-    table{
-      display: block;
-      width: 100%;
-      @include overflow(overflow-x, auto, touch);
-      @include scrollbar(0.8rem, 0.8rem, var(--color-33));
-      
-    }
-
-    * {
-      box-sizing: content-box;
-    }
-
-    td,
-    th {
-      @include max(tablet) {
-        min-width: 25rem;
-      }
-    }
-  }
-  .horizontalScrollImage{
-    p{
-      overflow-x: scroll;
-      img{
-        max-width: unset;
-      }
-    }
-  }
-
-  ul,
-  ol {
-    color: var(--color-6);
-    font-size: 1.6rem;
-    list-style-position: inside;
-    padding: 1.6rem;
-
-    li {
-      margin: 0.35rem 0;
-    }
-  }
-
-  ul {
-    list-style-type: disc;
-  }
-
-  ol {
-    list-style-type: decimal;
-  }
-
-  ul ul,
-  ol ul {
-    list-style-type: circle;
-    list-style-position: inside;
-    margin-left: 1.5rem;
-  }
-
-  ol ol,
-  ul ol {
-    list-style-type: lower-latin;
-    list-style-position: inside;
-    margin-left: 1.5rem;
-  }
-
-  @each $heading, $size, $mobileSize in $heading-sizes {
-    #{$heading},
-    .#{$heading} {
-      margin-bottom: 1rem;
-
-      &:not(:first-child) {
-        margin-top: 2rem;
-      }
-    }
-  }
-}
-
-.floatLeft {
-  @include content-img-float(left);
-}
-
-.floatRight {
-  @include content-img-float(right);
-}
-
-.alignCenter {
-  @include content-img-align;
-}
-
-.alignLeft {
-  @include content-img-align(left);
-}
-
-.alignRight {
-  @include content-img-align(right);
-}