Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: updated togglebox and toggleboxgroup stories #989

Merged
merged 1 commit into from
Aug 22, 2023

Conversation

nataliepina
Copy link
Collaborator

@nataliepina nataliepina commented Aug 21, 2023

Removed wrapping helper component to improve code snippets.

Description

We have some stories throughout our Storybook that will not display how to use the component under the docs code tab if they are wrapped in a helper component. This HOC (Higher Order Component) pattern does not pair well with the Storybook documentation.
These can be refactored so that the logic from the helper component is integrated directly into the component stories.

I'd like for these changes to serve as a reference for the other stories we need to update. I will be opening those up for open source contributions so others in the community can gain some experience with Storybook.

Here is a an outline of how to go about these changes.

Refactoring Storybook files with helper components
Open the story files related to the component (e.g., ToggleBox.stories.tsx, ToggleBoxGroup.stories.tsx).
Remove the import of the *StoryHelper components.
Integrate the state management and handlers directly into the story templates. Replace the occurrences where the *StoryHelper components were used with the state management logic.
Ensure that the state management, handlers, and component rendering are all contained within the same story file.

Which issue(s) does this PR relate to?

Testing

Test out the ToggleBox and ToggleBoxGroup components.
View the Docs page for these components and click the Code button to open up the code example.

Trade-offs

Screenshots

Before

ToggleBox

Screenshot 2023-08-21 at 9 51 35 AM

ToggleBoxGroup

Screenshot 2023-08-21 at 9 51 26 AM

After

ToggleBox

Screenshot 2023-08-21 at 9 53 17 AM

ToggleBoxGroup

Screenshot 2023-08-21 at 9 53 07 AM

Checklist

  • This PR is associated with a JIRA and it is mentioned in the commit message footer ("Closes …")
  • Significant changes have been tested downstream to avoid breaking changes
  • This PR contains breaking changes and states in the commit message body ("BREAKING CHANGE: …")
  • I have reviewed the changes and provided detail to the sections above

Removed wrapping helper component to improve code snippets.
@nataliepina nataliepina requested a review from a team as a code owner August 21, 2023 15:57
@github-actions
Copy link

github-actions bot commented Aug 21, 2023

Uffizzi Preview deployment-33976 was deleted.

@nataliepina nataliepina merged commit bae2103 into main Aug 22, 2023
5 checks passed
@nataliepina nataliepina deleted the npina/docs/togglebox-stories-code-examples branch August 22, 2023 13:37
@github-actions
Copy link

🎉 This PR is included in version 15.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants