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.