gatsby-matrix-theme 17.1.0 → 17.1.2

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## [17.1.2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v17.1.1...v17.1.2) (2023-03-30)
+
+
+### Bug Fixes
+
+* author card template styling ([9df14a4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9df14a4410259e19be59a9017b0754ddd7a791b5))
+* payment method ([756586e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/756586eaf0f234efdf85ffafefcd49c70cefad38))
+* payment method ([5808dd9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5808dd9fba19c6019d700200270333841708e01b))
+
+## [17.1.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v17.1.0...v17.1.1) (2023-03-29)
+
+
+### Bug Fixes
+
+* added author card templates ([a8d4a45](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a8d4a451f3f4dc9a88ae9d25ff06ac92c52b4bd3))
+* added author cards ([4ec39da](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4ec39dad041fdcab2baf0228019dfe1783533bec))
+* change page type to relation_type ([b535e0f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b535e0fda43ef5396d340562e20cf506fb3ee708))
+* conflict ([4a1f6b4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4a1f6b45b3a345dff627f7d9c265c88515389e22))
+* remove console.log and update if else ([cc3c224](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/cc3c2242bd7703c3cd4c0c979b6458edae9bb8c6))
+* update core version ([e516ad6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e516ad696b1422289d6e5d3a17c23d0a78bf73d3))
+* update to the latest core version ([484a4de](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/484a4defd5886e569bbdcfc58ed89442990d7e27))
+* update with the latest change ([71a9d0b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/71a9d0b0a1181009c3a6e7fa0dc25405b889f252))
+
+
+* Merge branch 'tm-3312-author-cards' into 'master' ([3a436d0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3a436d0f817f04593539cf9edd79ce398b7fa7fd))
+* Merge branch 'tm-3088-have-you-found-feature' into 'master' ([ecbc01b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ecbc01bf80e3f5be63c679557fbe6941757d9676))
+* Merge branch 'tm-3324-change-type' into 'master' ([ed96781](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ed96781f772b083fac0509a4fd704e3f21464404))
+* Merge branch 'master' into tm-3312-author-cards ([a7dccdf](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a7dccdfb44b2311142e0c171c4855e27e60187e5))
+
 # [17.1.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v17.0.1...v17.1.0) (2023-03-29)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "17.1.0",
+  "version": "17.1.2",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^4.20.0",
-    "gatsby-core-theme": "18.0.27",
+    "gatsby-core-theme": "18.0.28",
     "gatsby-plugin-sharp": "^4.10.2",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^4.10.0",

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

@@ -0,0 +1,56 @@
+import React, { useContext } from 'react';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import Link from 'gatsby-core-theme/src/hooks/link';
+import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
+import PropTypes from 'prop-types';
+import LazyImage from '~hooks/lazy-image';
+import Socials from '../../../author/socials';
+import styles from './template-one.module.scss';
+import { imagePrettyUrl, getAltText, translate, textWordsLimit } from '~helpers/getters';
+
+export default function TemplateOne({ item }) {
+  const author = item.relation;
+  const { translations } = useContext(Context);
+
+  return (
+    <div className={styles.container}>
+      <span className={styles.posts}>
+        {author.pages_count} {translate(translations, 'posts', 'Posts')}
+      </span>
+      <LazyImage
+        src={imagePrettyUrl(author.image_object.filename, 72, 72)}
+        alt={getAltText(author.image_object, author.image_alt || author.name)}
+        width={72}
+        height={72}
+      />
+      <span className={styles.title}>{author.author_title}</span>
+      <span className={styles.name}>{author.name}</span>
+      <Socials className={styles.socials} author={author} />
+      <div
+        className={styles.bio}
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{ __html: textWordsLimit(author.biography, 20) }}
+      />
+      <Link className={styles.readMore} to={author.profile_page_path}>
+        {translate(translations, 'read_more', 'Read More')} <FaArrowRight size="1.4rem" />
+      </Link>
+    </div>
+  );
+}
+
+TemplateOne.propTypes = {
+  item: PropTypes.shape({
+    relation: PropTypes.shape({
+      author_title: PropTypes.string,
+      name: PropTypes.string,
+      profile_page_path: PropTypes.string,
+      biography: PropTypes.string,
+      pages_count: PropTypes.string,
+      image_alt: PropTypes.string,
+      image_object: PropTypes.shape({
+        filename: PropTypes.string,
+        image_alt: PropTypes.string,
+      }),
+    }),
+  }),
+};

package/src/components/atoms/cards/author/template-one/template-one.module.scss

@@ -0,0 +1,77 @@
+.container {
+  background: #ffffff;
+  border: 0.15rem solid #e9e9e9;
+  border-radius: 1.6rem;
+  @include flex-align(flex-start, flex-start);
+  flex-direction: column;
+  padding: 2.4rem;
+  position: relative;
+
+  > img {
+    margin-bottom: 1.6rem;
+    border-radius: 4rem;
+  }
+
+  > a {
+    @include flex-align(flex-end, flex-start);
+    flex-grow: 1;
+  }
+}
+
+.socials {
+  a {
+    height: 2.4rem !important;
+    width: 2.4rem !important;
+  }
+}
+
+.posts {
+  position: absolute;
+  background: #5545a9;
+  border-radius: 100px;
+  color: #fff;
+  top: 2.4rem;
+  right: 2.4rem;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 10px;
+  line-height: 13px;
+  padding: 0.6rem;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 13px;
+  line-height: 19px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: #737090;
+}
+
+.name {
+  color: #000;
+  font-weight: 700;
+  font-size: 20px;
+  margin-bottom: 1.6rem;
+  line-height: 30px;
+}
+
+.bio {
+  font-size: 16px;
+  line-height: 27px;
+  margin-top: 2.4rem;
+}
+
+.readMore {
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 18px;
+  color: #1c1a28;
+  margin-top: 1rem;
+
+  svg {
+      margin-left: .8rem;
+      margin-bottom: .1rem;
+  }
+}

package/src/components/atoms/cards/author/template-one/template-one.stories.js

@@ -0,0 +1,42 @@
+/* eslint-disable react/destructuring-assignment */
+import React from 'react';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import getAuthorList from '../../../../../../tests/factories/authors/author.factory';
+import TemplateOne from '.';
+
+const author = getAuthorList({})[1];
+
+export default {
+  title: 'Matrix-Theme/Modules/Cards/Author/Template One',
+  component: TemplateOne,
+  argTypes: {
+    item: {
+      relation: {
+        ...author,
+      },
+    },
+  },
+};
+
+const Template = (args) => (
+  <div
+    style={{
+      maxWidth: ' 34.3rem',
+      margin: '0 auto',
+    }}
+  >
+    <Context.Provider value={{}}>
+      <TemplateOne {...args} />
+    </Context.Provider>
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  item: {
+    relation: {
+      ...author,
+    },
+  },
+};

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

@@ -0,0 +1,29 @@
+/* eslint-disable no-multi-assign */
+import React from 'react';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import getAuthorList from '../../../../../../tests/factories/authors/author.factory';
+import TemplateOne from '.';
+import { textWordsLimit } from '~helpers/getters';
+
+describe('Author Header', () => {
+  test('Template One', () => {
+    const author = getAuthorList({})[1];
+    const { container, getByText } = render(<TemplateOne item={{ relation: { ...author } }} />, {
+      wrapper: ({ children }) => <Context.Provider value={{}}>{children}</Context.Provider>,
+    });
+    expect(getByText('Author 1 Name')).toBeTruthy();
+    expect(getByText(author.author_title)).toBeTruthy();
+    expect(getByText('23 Posts')).toBeTruthy();
+    expect(getByText(textWordsLimit(author.biography, 20))).toBeTruthy();
+    expect(container.querySelectorAll('a')).toHaveLength(6);
+    expect(getByText('Read More').closest('a').getAttribute('href')).toEqual(
+      `/${author.profile_page_path}`
+    );
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});

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

@@ -0,0 +1,51 @@
+import React, { useContext } from 'react';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import Link from 'gatsby-core-theme/src/hooks/link';
+import PropTypes from 'prop-types';
+import LazyImage from '~hooks/lazy-image';
+import Socials from '../../../author/socials';
+import styles from './template-two.module.scss';
+import { imagePrettyUrl, getAltText, translate } from '~helpers/getters';
+
+export default function TemplateTwo({ item }) {
+  const author = item.relation;
+  const { translations } = useContext(Context);
+
+  return (
+    <div className={styles.container}>
+      <LazyImage
+        src={imagePrettyUrl(author.image_object.filename, 80, 80)}
+        alt={getAltText(author.image_object, author.image_alt || author.name)}
+        width={80}
+        height={80}
+      />
+      <div className={styles.nameContainer}>
+        <span className={styles.title}>{author.author_title}</span>
+        <Link className={styles.name} to={author.profile_page_path}>
+          {author.name}
+        </Link>
+      </div>
+      <span className={styles.posts}>
+        {author.pages_count} {translate(translations, 'posts', 'Posts')}
+      </span>
+      <Socials className={styles.socials} author={author} />
+    </div>
+  );
+}
+
+TemplateTwo.propTypes = {
+  item: PropTypes.shape({
+    relation: PropTypes.shape({
+      author_title: PropTypes.string,
+      name: PropTypes.string,
+      profile_page_path: PropTypes.string,
+      biography: PropTypes.string,
+      pages_count: PropTypes.string,
+      image_alt: PropTypes.string,
+      image_object: PropTypes.shape({
+        filename: PropTypes.string,
+        image_alt: PropTypes.string,
+      }),
+    }),
+  }),
+};

package/src/components/atoms/cards/author/template-two/template-two.module.scss

@@ -0,0 +1,70 @@
+.container {
+  background: #ffffff;
+  border: 0.15rem solid #e9e9e9;
+  border-radius: 1.6rem;
+  @include flex-align(center, space-between);
+  gap: 1.6rem;
+  flex-direction: column;
+  padding: 2.4rem;
+  position: relative;
+
+  > img {
+    border-radius: 4rem;
+  }
+}
+
+.posts {
+  background: #5545a9;
+  border-radius: 100px;
+  color: #fff;
+  top: 2.4rem;
+  right: 2.4rem;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 10px;
+  line-height: 13px;
+  padding: 0.6rem;
+}
+
+.socials {
+  a {
+    height: 2.4rem !important;
+    width: 2.4rem !important;
+  }
+}
+
+.title {
+  font-weight: 700;
+  font-size: 13px;
+  line-height: 19px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: #737090;
+  text-align: center;
+}
+
+.nameContainer {
+  @include flex-align(center, center);
+  flex-direction: column;
+}
+
+.name {
+  color: #000;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 30px;
+  position: relative;
+
+  &:after {
+    @include arrow(var(--horse-calc-label-color, #000), 0.8rem, down, false);
+    position: absolute;
+    right: -1.5rem;
+    top: 38%;
+  }
+}
+
+.bio {
+  font-size: 16px;
+  line-height: 27px;
+}

package/src/components/atoms/cards/author/template-two/template-two.stories.js

@@ -0,0 +1,42 @@
+/* eslint-disable react/destructuring-assignment */
+import React from 'react';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import getAuthorList from '../../../../../../tests/factories/authors/author.factory';
+import TemplateTwo from '.';
+
+const author = getAuthorList({})[1];
+
+export default {
+  title: 'Matrix-Theme/Modules/Cards/Author/Template Two',
+  component: TemplateTwo,
+  argTypes: {
+    item: {
+      relation: {
+        ...author,
+      },
+    },
+  },
+};
+
+const Template = (args) => (
+  <div
+    style={{
+      maxWidth: ' 34.3rem',
+      margin: '0 auto',
+    }}
+  >
+    <Context.Provider value={{}}>
+      <TemplateTwo {...args} />
+    </Context.Provider>
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  item: {
+    relation: {
+      ...author,
+    },
+  },
+};

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

@@ -0,0 +1,27 @@
+/* eslint-disable no-multi-assign */
+import React from 'react';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import getAuthorList from '../../../../../../tests/factories/authors/author.factory';
+import TemplateOne from '.';
+
+describe('Author Header', () => {
+  test('Template One', () => {
+    const author = getAuthorList({})[1];
+    const { container, getByText } = render(<TemplateOne item={{ relation: { ...author } }} />, {
+      wrapper: ({ children }) => <Context.Provider value={{}}>{children}</Context.Provider>,
+    });
+    expect(getByText('Author 1 Name')).toBeTruthy();
+    expect(getByText(author.author_title)).toBeTruthy();
+    expect(getByText('23 Posts')).toBeTruthy();
+    expect(container.querySelectorAll('a')).toHaveLength(6);
+    expect(getByText('Author 1 Name').closest('a').getAttribute('href')).toEqual(
+      `/${author.profile_page_path}`
+    );
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});

package/src/components/atoms/cards/comparison-table/index.js

@@ -13,7 +13,7 @@ export default function ComparisonTable({ module, page }) {
     <div className={styles.comparisonTable}>
       <ScrollX refTag={ele} scroll>
         <div ref={ele} className={styles.contentTable}>
-          <Table type={page?.type} items={module?.items} tempate={page?.template} />
+          <Table type={page?.relation_type} items={module?.items} tempate={page?.template} />
         </div>
       </ScrollX>
     </div>
@@ -25,6 +25,7 @@ ComparisonTable.propTypes = {
     items: PropTypes.shape({}),
   }),
   page: PropTypes.shape({
+    relation_type: PropTypes.string,
     type: PropTypes.string,
     template: PropTypes.string,
   }),

package/src/components/atoms/cards/{payment-method-card → payment-method}/template-one/index.js

@@ -18,8 +18,8 @@ import styles from './template-one.module.scss';
 
 const TemplateOneTwo = ({ item, showSellingPoints = true, width = 150, height = 150 }) => {
   const { translations } = useContext(Context);
-  const { title, path, relation, sections, description } = item;
-  const { name, selling_points } = item.relation;
+  const { title, path, relation, sections, description } = item || {};
+  const { name, selling_points } = item?.relation || {};
 
   const imageObject = relation?.standardised_logo_filename_object || relation?.logo_filename_object;
   const StarRating = loadable(() =>
@@ -47,7 +47,12 @@ const TemplateOneTwo = ({ item, showSellingPoints = true, width = 150, height =
 
           <div className={`${styles.links}`}>
             <span className={styles.title}>{name}</span>
-            <StarRating numOfStars={5} halfStars={false} rating={relation.rating} showDot={false} />
+            <StarRating
+              numOfStars={5}
+              halfStars={false}
+              rating={relation?.rating}
+              showDot={false}
+            />
           </div>
         </div>
 

package/src/components/atoms/cards/{payment-method-card → payment-method}/template-three/index.js

@@ -12,8 +12,8 @@ import SellingPoints from '../sellingPoints';
 import styles from './template-three.module.scss';
 
 const TemplateThree = ({ item, width = 150, height = 150 }) => {
-  const { title, path, relation } = item;
-  const { name, selling_points } = item.relation;
+  const { title, path, relation } = item || {};
+  const { name, selling_points } = item?.relation || {};
 
   const imageObject = relation?.standardised_logo_filename_object || relation?.logo_filename_object;
   const StarRating = loadable(() =>
@@ -41,7 +41,12 @@ const TemplateThree = ({ item, width = 150, height = 150 }) => {
           <div className={`${styles.links}`}>
             <span className={styles.title}>{name}</span>
 
-            <StarRating numOfStars={5} halfStars={false} rating={relation.rating} showDot={false} />
+            <StarRating
+              numOfStars={5}
+              halfStars={false}
+              rating={relation?.rating}
+              showDot={false}
+            />
           </div>
         </div>
 

package/src/components/molecules/header/variants/author/template-four/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Portrait from '../assets/portrait';
 import Name from '../assets/name';
-import Socials from '../assets/socials';
+import Socials from '../../../../../atoms/author/socials';
 import styles from './template-four.module.scss';
 
 export default function TemplateFour({ author, icons, authorTitle }) {

package/src/components/molecules/header/variants/author/template-one/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Portrait from '../assets/portrait';
 import Name from '../assets/name';
-import Socials from '../assets/socials';
+import Socials from '../../../../../atoms/author/socials';
 import Expertise from '../assets/expertise';
 import styles from './template-one.module.scss';
 
@@ -18,6 +18,7 @@ export default function TemplateOne({ author, icons, authorTitle }) {
         {author.biography && (
           <div
             className={styles.biography}
+            // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{ __html: author.biography }}
           />
         )}

package/src/components/molecules/header/variants/author/template-three/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Portrait from '../assets/portrait';
 import Name from '../assets/name';
-import Socials from '../assets/socials';
+import Socials from '../../../../../atoms/author/socials';
 import Expertise from '../assets/expertise';
 import styles from './template-three.module.scss';
 

package/src/components/molecules/header/variants/author/template-two/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Portrait from '../assets/portrait';
 import Name from '../assets/name';
-import Socials from '../assets/socials';
+import Socials from '../../../../../atoms/author/socials';
 import Expertise from '../assets/expertise';
 import styles from './template-two.module.scss';
 

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

@@ -21,7 +21,8 @@ const OperatorSummary = ({
   defaultBg,
 }) => {
   let operatorData = page?.extra_fields?.related_operator;
-  if (page.type === 'operator') {
+
+  if (page?.relation_type === 'operator') {
     operatorData = page?.relation;
   }
 
@@ -80,6 +81,7 @@ OperatorSummary.propTypes = {
   defaultBg: PropTypes.string,
   page: PropTypes.shape({
     market: PropTypes.string,
+    relation_type: PropTypes.string,
     extra_fields: PropTypes.shape({
       summary: PropTypes.string,
       summary_background: PropTypes.string,

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

@@ -83,7 +83,7 @@ const ModuleTitle = ({
   };
 
   const template = pageContext && pageContext?.page?.template;
-  const type = pageContext && pageContext?.page?.type;
+  const type = pageContext && pageContext?.page?.relation_type;
   const seeMore = module?.see_more_link?.title;
 
   return module.module_title ||

package/src/gatsby-core-theme/components/molecules/header/header.test.js

@@ -8,7 +8,7 @@ function getHeaderSection(type = 'page', template = 'author') {
   const header = {
     section: {
       page: {
-        type: `${type}`,
+        relation_type: `${type}`,
         template: `${template}`,
         title: 'The Page Title',
         path: 'sport/brand',

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

@@ -10,12 +10,12 @@ import styles from './header.module.scss';
 export const relationContent = (section, numOfStarsRating) => {
   let ModuleComponent = null;
 
-  switch (section?.page?.type) {
+  switch (section?.page?.relation_type) {
     case 'payment_method': {
       const data = {
         page: section?.page,
         relation: section?.page?.relation || {},
-        type: section?.page?.type,
+        type: section?.page?.relation_type,
         template: section?.page?.page_styles?.short_name,
         pageTemplate: section?.page?.template,
         sections: section?.page?.sections,
@@ -68,7 +68,7 @@ export const relationContent = (section, numOfStarsRating) => {
       const data = {
         page: section?.page,
         author: section?.page.author,
-        type: section?.page?.type,
+        type: section?.page?.relation_type,
         template: section?.page?.page_styles?.short_name,
         pageTemplate: section?.page?.template,
         relation: section?.page?.relation || {},
@@ -242,7 +242,6 @@ Header.propTypes = {
         }),
       }),
       title: PropTypes.string,
-      type: PropTypes.string,
       reading_time: PropTypes.string,
       reviewer_id: PropTypes.string,
       reviewer: PropTypes.shape({}),

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

@@ -17,8 +17,8 @@ const Main = ({ section = {}, pageContext = {}, showAuthor = true, exclOperator
   const siteName = process.env.GATSBY_SITE_NAME;
   const showNewsletter = !(
     settings[siteName]?.filter_pages?.includes('*') ||
-    settings[siteName]?.filter_pages?.includes(page.type) ||
-    settings.default?.filter_pages?.includes(page.type)
+    settings[siteName]?.filter_pages?.includes(page?.relation_type) ||
+    settings.default?.filter_pages?.includes(page?.relation_type)
   );
   const SearchPage =
     page.path === 's'

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

@@ -34,7 +34,7 @@ const Modules = ({ module, page, pageContext, index, exclOperator }) => {
           return loadable(() => import('../../../../components/atoms/cards/comparison-table'));
         }
 
-        return loadable(() => import('../../organisms/cards'));
+        return loadable(() => import('gatsby-core-theme/src/components/organisms/cards'));
       case 'pros_and_cons':
         return loadable(() => import('gatsby-core-theme/src/components/molecules/pros-cons'));
       case 'accordion':