Storybook Component Documentation Update - Refactor the SegmentedControl component story
Closed this issue · 2 comments
Description
The SegmentedControl component's story is configured so that it is wrapped in the <SegmentedControlStoryHelper />. The StoryHelper is used to manage the state and functionality of the component.
The Code option in the component Docs page serves as a reference for how to use the component. With this HOC component wrapping it we cannot see the example of how to use this component.
To fix this, we can move the helper and move that logic into the component story, so that it allows for the SegmentedControl component code to fully display.
The current configuration of the SegmentedControl component's story involves a wrapper. This wrapper plays a crucial role in overseeing the component's state and functionality.
There are some issues with how it displays the component's code in the Code tab in Storybook. This option essentially provides a guide on how to use the component. Unfortunately, the usage example of this component is obscured by the higher-order component (HOC) that is encompassing it - SegmentedControlStoryHelper.
See the screenshot above and how the helper is displaying but not showing how to use the actual component.
To address this issue, a suggested solution entails repositioning this operational logic within the story designed for the SegmentedControl. By taking this step, the SegmentedControl component's code will become visible and accessible.
For an example of how a component was refactored in a similar way you can reference this work: #989
If this is your first experience working with Storybook stories, they have great documentation to reference, along with the other story files we have throughout the project.
Acceptance Criteria
Update the SegmentedControl.stories.tsx file so that the code example will display how to use the component.
Contribution Guide
If this is your first time contributing to UI Kit, please review the How to Contribute guide beforehand.
@electron97 I cannot assign issues to you unless you comment on the issue first. We ask that you ask to have issues assigned for this reason, also so we don't duplicate work. Comment back if you'd like me to assign so you can get your Hacktoberfest credit if you are participating. Cheers!
Hey @nataliepina ,
Thanks for clarifying. Could you please assign this issue to me?
Thanks!