Article Body: An Arc Core Component

What does this do?

When used in a Fusion Project, this Core Component can be used to render content elements of an ANS Story.

The Article Body currently supports the following ANS elements:

• Text
• Images
• Corrections
• Interstitial Links
• Lists
• Raw HTML
• Quotes
• BlockQuotes (Quotes that have subtype "blockquote" on them)
• Headers
• Oembeds (Facebook, Twitter, Instagram, Youtube)

How do I use it?

  import ArticleBody from '@arc-core-components/feature_article-body'

  <ArticleBody data={yourArrayOfContentElements} renderElement={yourCustomRenderElementFunction}>

Take a look in the src/mocks file to see a suggested implementation, in article-body.mdx.

How do I add my own classes to the article body elements?

See Default rendering with element classes in src/article-body.mdx.

How do I add my own custom components (such as a Video Player or a Gallery)?

See the Extending default rendering example in src/article-body.mdx.

| Prop Name | Type | Description | Required? | | ---------------- | -------- | -------------------------------------------------------------------------------------------------------- | --------- | | data | array | The Content Elements of an ANS story. | X | | renderElement | function | Overwrite any content elements with your own component. | | | elementClasses | object | Specify CSS classes to be used on the default markup. | | | isAdmin | bool | Pass from Fusion if you'd like to display an error message only in the admin. By default, this is false. |

How do I render elements inline (such as ads, related content or a call to action)?

The Core Component will render any type of element that has a type of inline_element. So something like this:

const inlineAd = {
  type: "inline_element",
  element: <div>Any JSX element</div>
};

Will be rendered within the Core Component.

Your job is to place it in the proper place in the content_elements array from within your Component repo.

Please note that you must pass in a completely constructed inline element -- the Core Component will render it as is.

You can use the renderElement method to change the default implementation of the Core Component, if you need to.

How can I view what's in there quickly?

Run npm i && npm run docz:dev after cloning to see what is within.

Testing & Linting

We are using Jest and XO for testing and linting.

We are using Husky to run a pre-push hook, preventing un-linted or code that fails tests from making it into the repo.

To test: npm test

To lint: npm run lint - This will also fix any simple linter errors automatically.

To push without testing or linting: git push --no-verify - This can often be helpful if you just need to push a branch for demonstration purposes or for help.