Storybook Component Documentation Update - Refactor the Modal component stories
Closed this issue · 3 comments
Description
The Modal component's stories are configured so that it is wrapped in the <ModalStoryContainer />. The Story Container 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 Modal component code to fully display.
The current configuration of the Modal 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 - ModalStoryContainer.
To address this issue, a suggested solution entails repositioning this operational logic within the story designed for the Modal. By taking this step, the Modal 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 Modal.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.
Can this issue be assigned to me?
I've assigned it to you @Chirag-Nanda
I have submitted a pull request, Can you review it and provide a feedback on any improvement?