Let's say that on our homepage we only want to show the first couple of sentences in our blog post as a short summary, and then you'll have to click through to see the full post.
First let's update the
Article component to contain that functionality:
We'll pass an additional
summary prop to the component to let it know if it should show just the summary or the whole thing. We default it to
false to preserve the existing behavior—always showing the full body.
Now in the Storybook story let's create a
summary story that uses the
Article component the same way that
generated does, but adds the new
summary prop. We'll take the content of the sample post and put that in a constant that both stories will use. We'll also rename
full to make it clear what's different between the two:
As soon as you save the change the stories Storybook should refresh and show the updates:
Great! Now to complete the picture let's use the summary in our home page display of blog posts. The actual Home page isn't what references the
Article component though, that's in the
ArticlesCell. We'll add the
summary prop and then check the result in Storybook:
And if you head to the real site you'll see the summary there as well:
We can double check that our original usage of
Article (the one without the
summary prop) in
ArticleCell still renders the entire post, not just the truncated version:
Storybook makes it easy to create and modify your components in isolation and actually helps enforce a general best practice when building React applications: components should be self-contained and reusable by just changing the props that are sent in.