@sankei-arc-shared-components/feature_article-body v1.1.13

Article Body Components

How do I use it?

This is a collection of components used to build the body for an article.

This is an example of how you could use these components.

import React from 'react';
import { useBrowserSize } from '@sankei-arc-shared-components/tools_general-helpers';
import { getContentElements } from '@sankei-arc-shared-components/utils_ans-helpers';
import { useFusionContext } from 'fusion:context';
import Layout from "@sankei-arc-shared-components/element_layout";
import {
  Oembed,
  ArticleImage,
  GalleryEmbed,
  InterstitialLink,
  Headline,
  Text,
  HeadlineImage,
  AdHeadline,
  ArticleAd,
} from '@sankei-arc-shared-components/feature_article-body';

const ArcAd = () => {
  /* Ad implementation that will be added to the article ads */
};

const ArticleBody = ({ customFields }) => {
  const { globalContent, isAdmin, arcSite } = useFusionContext();
  const browserSize = useBrowserSize(false);

  const contentElements = getContentElements(globalContent);

  const siteUrl = get(globalContent, 'website_url');
  const promoItems = get(globalContent, 'promo_items', {});

  const articleSubtype = get(globalContent, 'subtype', 'none');
  const { meta = {} } = globalContent;

  const articleAd = new ArticleAd({
    meta,
    adCharacterCount: 0,
    arcAd: ArcAd,
    browserSize,
  });

  return (
    <Layout className="article-body clearfix">
      <AdHeadline
        promoItems={promoItems}
        ArcAd={ArcAd}
        browserSize={browserSize}
      />
      {contentElements.map((item, index) => {
        const { _id: id, type } = item;

        switch (type) {
          case 'text':
            articleAd.incrementAdCharacterCount(item.content.length);
            articleAd.setAds(index);

            return (
              <Fragment key={id} >
                {articleAd.inreadAd}<Text className={`article-text ${item.alignment ? `text-align-${item.alignment}` : ''}`} element={item} />{articleAd.inlineAd}
              </Fragment>
            );
          case 'image':
            return <ArticleImage key={id} element={item}
              contentIndex={index} url={siteUrl} arcSite={arcSite} />;
          case 'oembed_response':
            return <Oembed key={id} element={item} className={`article-${item.subtype} width-full relative clear`} />;
          case 'interstitial_link':
            return <InterstitialLink className="article-interstitial" key={id} element={item} />;
          case 'header':
            return <Headline className={`article-middle-headline headline-size_${item.level} block font-bold overflow-auto padding-left-sm`} key={id} element={item} />;
          case 'gallery':
            return <GalleryEmbed
              key={id}
              element={item}
              index={index}
              arcSite={arcSite}
            />;
          default:
            return (
              <AdminMessage key={id} isAdmin={isAdmin} type="error">
                <p>{`No element of of type ${type} found.`}</p>
              </AdminMessage>
            );
        }
      })}
    </Layout>
  );
};

export default ArticleBody;

Take a look in the src/index.mdx file to see suggested implementations.