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 '@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.