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 BlogPost 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 BlogPost the same way that
generated does, but adds the new 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 BlogPost component though, that's in the BlogPostsCell. 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:
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.