@dmn-arc-core-components/feature_global-story-card
v1.0.1-alpha
Published
Arc Core Component representing a flexible Story Card feature.
Downloads
4
Readme
Feature: Story Card
What does this do?
When used in a Fusion Project, this Core Component can be used to render a series of elements (Overline, Headline*, Deck, Image*) associated with a piece of content.
Commonly used in Section fronts and Homepages, though can also be used for rail or "widget" type features (Authors Feed, Recirc Well, etc.), or even additional page types, ex: Search Results.
Which elements to be displayed, as well as in what order, are explicitly semantic.
Enables quick view toggling through a single click, rather than numerous show/hide, left/right, above/below Custom Field options, as with a traditional "Flex Feature".
*-Incorporates element_headline and element_image Core Components
How do I use it?
Take a look in the src
folder to see a suggested implementation in
index.mdx
List of all possible props:
import StoryCard from '@dmn-arc-core-components/feature_global-story-card'
<StoryCard
data={PropTypes.object},
deckClasses={PropTypes.string},
deckText={PropTypes.string},
classes={PropTypes.string},
customFields={PropTypes.shape({
view={PropTypes.string}
})},
customViews={PropTypes.array},
headlineClasses={PropTypes.string},
headlineLevel={PropTypes.number},
headlineText={PropTypes.string},
imageClasses={PropTypes.string},
imageHeight={PropTypes.number},
imageWidth={PropTypes.number},
indexedComponents={PropTypes.shape({})},
pbData={PropTypes.shape({
isAdmin={PropTypes.bool}
})},
overlineClasses={PropTypes.string},
overlineText={PropTypes.string},
replacementComponents={PropTypes.shape({})},
subdheadlineClasses={PropTypes.string},
subheadlineLevel={PropTypes.number},
subheadlineText={PropTypes.string},
view={PropTypes.string},
url={PropTypes.string}
};
Data Defaults
If no data values are passed in for Deck, Headline, Image, Overline or url, fallbacks point to the following ANS values:
deckText = {data.description.basic};
headlineText = {data.headlines.basic};
imageHeight = {data.promo_items.basic.height}
imageWidth = {data.promo_items.basic.width}
overlineText = {data.taxonomy.primary_section.name}
url = {data.canonical_url}
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.