Story Card Feed Components

How do I use it?

This is a collection of components used to build a feed of stories using a card layout.

This is an example of how you could build a feed using these components.

import Layout from "@sankei-arc-shared-components/element_layout";
import { SeeMoreButton, StoryCards } from "@sankei-arc-shared-components/feature_story-card-feed";

const StoryCard = () => {
  /* Story Card implementation that will be added to the feed */
};

const StoryCardFeed = (props) => {
    const content = useContent({
    source: 'stories_content_source',
  }) || {};
  const { content_elements: stories = [] } = content;
  const { customFields } = props;
  const seeMoreOnClick = () => console.log('adding more stories to the feed!');

  return (
    <>
      <Layout className='story-card'>
        <StoryCards
          stories={stories}
          customFields={customFields}
          StoryCard={StoryCard}
        />
        <SeeMoreButton
          className={[
            'button',
            'button-primary',
            'margin-center',
            ].join(' ')}
          onClick={seeMoreOnClick}
        />
      </Layout>
    </>
  );
};

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

How can I view what's in there quickly?

These are the components that are included.

Story Cards

This displays the list of received stories with the provided story card.

<StoryCards
  stories={stories}
  customFields={customFields}
  useHeroCard={false}
  StoryCard={StoryCard}
/>

See More Button

This button is used to display more stories in the feed.

<SeeMoreButton
  className={[
    'button',
    'button-primary',
    ].join(' ')}
  onClick={seeMoreOnClick}
  displaySeeMoreButton={true},
  isButtonDisabled={false},
/>