Describe the bug

Currently the story for tabs doesn't really show what the tabs do. You can see the default state but can't click on a tab.

To Reproduce

1. Go to storybook
2. Click on a tab
3. You are redirected off the page

Expected behavior

Clicking a tab should update which tab is marked as current but should not navigate away.

Screenshots

N/A

Desktop (please complete the following information):

N/A

Smartphone (please complete the following information):

N/A

Additional context

The code is located here /app/javascript/crayons/navigation/NavigationTabs/stories/navigationTab.html.stories.jsx

I'd probably update the href to # and add some JS to handle the active state.

What type of PR is this? (check all applicable)

• [ ] Refactor
• [ ] Feature
• [x] Bug Fix
• [ ] Optimization
• [ ] Documentation Update

Description

• #13601 Fixed the anchor tags with hash routes to prevent navigating to different page.
• Since the stories are inside iFrame, I couldn't keep it in the same story navigatable view, instead it will open the story on fullscreen and the corresponding selected tab is highlighed.
• Took reference from implemented Tab component for className toggles - Tabs.tsx
• Used state to highlight the current tab.
• Used location.hash to set the initial state.

Related Tickets & Documents

Closes #13601

QA Instructions, Screenshots, Recordings

The fix is shown in the GIF below

UI accessibility concerns?

There are no UI changes.

Added/updated tests?

• [ ] Yes
• [x] No, and this is why: This is a bugfix in storybook story
• [ ] I need help with writing tests

[Forem core team only] How will this change be communicated?

Will this PR introduce a change that impacts Forem members or creators, the development process, or any of our internal teams? If so, please note how you will share this change with the people who need to know about it.

• [ ] I've updated the Developer Docs and/or Admin Guide, or Storybook (for Crayons components)
• [ ] I've updated the README or added inline documentation
• [ ] I've added an entry to CHANGELOG.md
• [ ] I will share this change in a Changelog or in a forem.dev post
• [ ] I will share this change internally with the appropriate teams
• [ ] I'm not sure how best to communicate this change and need help
• [ ] This change does not need to be communicated, and this is why not: please replace this line with details on why this change doesn't need to be shared

What gif best describes this PR or how it makes you feel?