Add #435: Storybook stories for Progress component #536
Conversation
Before: No Story in place for Progress component as part of issue #435 After: Create Empty, Halfway and Full Progress stories showcasing different progress values Includes interactive controls for value, className and indicatorClassName. Issue: Progress bar renders utilizing a parent component however this comes with an 'error' that I am still figuring out
haydnkerr
requested review from
HoldUpFjord,
alexappleget,
bethanyann,
jennifertieu,
kepsteen,
nickytonline and
shashilo
as code owners
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Removed cn import as it is not needed
stories/Progress.stories.tsx
Outdated
| @@ -0,0 +1,59 @@ | |||
| import type { Meta, StoryObj } from '@storybook/react'; | |||
There was a problem hiding this comment.
Headers have been added
There was a problem hiding this comment.
Just add a newline after the headers to fix the eslint error.
stories/Progress.stories.tsx
Outdated
| args: { | ||
| value: 0, | ||
| }, | ||
| render: (args) => ( |
There was a problem hiding this comment.
Look up decorators in Storybook. This is a way to add a wrapper to the element so you can wrap each Progress in a div.
Then you can remove all the renders you have in each export.
https://storybook.js.org/docs/writing-stories/decorators
If it complains about a missing return type, import and use ReactElement. There might be a better type, but I found this works.
There was a problem hiding this comment.
I have implemented decorators and removed or renders for the individual examples
There was a problem hiding this comment.
There's still a missing return type on the decorator. Use import { ReactElement } from 'react'; instead of importing all of React.
Then use ReactElement as the decorator's return type.
|
Move the story file into the Progress component's folder.
|
add 'react' import
Before: No Story in place for Progress component as part of issue #435
After:
Issue: Progress bar renders utilizing a parent component however this comes with an 'error' that I am still figuring out.